/*! Solar Landing Kit 1.1 · Cámara de Comercio de Santiago
 *  Aislamiento de WordPress/Elementor y mecánica de los efectos.
 *  1.1: separación genérica de Elementor, efectos nuevos (secciones 14 a 27)
 *  y animaciones de scroll solo con CSS.
 *  El aspecto (colores, tipografías, layout) va en el CSS de cada landing,
 *  siempre bajo #ccs-landing y con variables --lp-*.
 *
 *  Clases que pone kit-1.1.js en <html>:
 *    .ccs-js      el JS cargó
 *    .ccs-motion  el JS cargó y la persona no pidió reducir movimiento
 *    .ccs-calm    la persona pidió reducir movimiento (sin animaciones)
 *    .ccs-wide    efectos de pantalla grande activos (≥ 900 × 640 px y .ccs-motion)
 */

/* ===== 0. Separación de WordPress y Elementor (igual en todos los sitios) =====
 *  Solo actúa en la página que tiene #ccs-landing. Lo propio de cada tema va en sitios/<sitio>.css. */
body:has(#ccs-landing){margin:0!important;padding:0!important;overflow:visible!important}
.elementor:has(#ccs-landing),.e-con:has(#ccs-landing),.e-con:has(#ccs-landing)>.e-con-inner{display:block!important;margin:0!important;padding:0!important;gap:0!important;max-width:none!important;width:100%!important;min-height:0!important;border:0!important;background:none!important}
.e-con:has(#ccs-landing) .elementor-widget,.e-con:has(#ccs-landing) .elementor-widget-container{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
.e-con:has(#ccs-landing)>.elementor-widget:not(:has(#ccs-landing)){display:none!important}
/* Sello de reCAPTCHA que algunos plugins cargan en todo el sitio: la landing no tiene formularios */
body:has(#ccs-landing) .grecaptcha-badge{visibility:hidden!important}

/* ===== 1. Aislamiento ===== */
#ccs-landing :where(h1,h2,h3,h4,h5,h6,p,a,button,ul,ol,li,dl,dt,dd,figure,blockquote,small,strong,em,b,i,span,div,section,header,footer,nav,main,article,aside,details,summary,address,time,label,table,caption,thead,tbody,tfoot,tr,th,td){all:revert}
#ccs-landing{--ccs-hdr:76px;--ccs-gp:0;interpolate-size:allow-keywords;display:block;overflow-x:clip;text-align:left;-webkit-font-smoothing:antialiased}
#ccs-landing *,#ccs-landing *::before,#ccs-landing *::after{box-sizing:border-box}
#ccs-landing img,#ccs-landing svg,#ccs-landing video{max-width:100%;display:block}
#ccs-landing :where(img){height:auto}
#ccs-landing a{color:inherit}
#ccs-landing :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin:0}
#ccs-landing :where(ul,ol){padding:0;list-style:none}
#ccs-landing [hidden]{display:none!important}
#ccs-landing .ccs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body:has(> #ccs-landing){margin:0}
html:has(#ccs-landing){scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html:has(#ccs-landing){scroll-behavior:auto}}

/* ===== 2. Aparición al hacer scroll: data-ccs-reveal ===== */
.ccs-motion #ccs-landing [data-ccs-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--ccs-d,0s)}
.ccs-motion #ccs-landing [data-ccs-reveal].ccs-in{opacity:1;transform:none}
/* Variante "clip": el bloque se descubre de abajo hacia arriba. Usa --ccs-radius si el bloque tiene bordes redondeados. */
.ccs-motion #ccs-landing [data-ccs-reveal="clip"]{opacity:1;transform:none;clip-path:inset(100% 0 0 0 round var(--ccs-radius,0px));transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--ccs-d,0s)*2.5)}
.ccs-motion #ccs-landing [data-ccs-reveal="clip"].ccs-in{clip-path:inset(0 0 0 0 round var(--ccs-radius,0px))}

/* ===== 3. Titulares línea a línea: data-ccs-lines + .ccs-ln ===== */
#ccs-landing .ccs-ln{display:block;overflow:hidden;padding:.06em .1em .2em 0;margin-block:-.06em -.2em}
#ccs-landing .ccs-ln>span{display:block}
.ccs-motion #ccs-landing [data-ccs-lines] .ccs-ln>span{transform:translateY(108%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.ccs-motion #ccs-landing [data-ccs-lines].ccs-in .ccs-ln>span{transform:none}
.ccs-motion #ccs-landing [data-ccs-lines].ccs-in .ccs-ln:nth-child(2)>span{transition-delay:.09s}
.ccs-motion #ccs-landing [data-ccs-lines].ccs-in .ccs-ln:nth-child(3)>span{transition-delay:.18s}
.ccs-motion #ccs-landing [data-ccs-lines].ccs-in .ccs-ln:nth-child(4)>span{transition-delay:.27s}

/* ===== 4. Header que aparece al bajar: data-ccs-header="reveal" ===== */
.ccs-motion #ccs-landing [data-ccs-header="reveal"]{transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ccs-motion #ccs-landing [data-ccs-header="reveal"]:not(.ccs-show):not(:focus-within){transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none}

/* ===== 5. Barra de progreso: data-ccs-progress (alto y color en la landing) ===== */
#ccs-landing [data-ccs-progress]{position:fixed;left:0;top:0;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* ===== 6. Indicador de scroll: data-ccs-cue ===== */
#ccs-landing [data-ccs-cue]{transition:opacity .4s,transform .4s}
#ccs-landing [data-ccs-cue].ccs-out{opacity:0;transform:translateY(12px);pointer-events:none}

/* ===== 7. Marquesina: data-ccs-marquee + data-ccs-marquee-track ===== */
#ccs-landing [data-ccs-marquee]{overflow:hidden}
#ccs-landing [data-ccs-marquee-track]{display:flex;width:max-content;will-change:transform}
#ccs-landing [data-ccs-marquee-track]>*{flex:none;white-space:nowrap}
.ccs-calm #ccs-landing [data-ccs-marquee-track]{transform:none!important}

/* ===== 8. Texto que se rellena palabra por palabra: data-ccs-wordfill ===== */
#ccs-landing .ccs-w{transition:opacity .15s linear}

/* ===== 9. Portada fija con apertura circular: data-ccs-pin ===== */
.ccs-wide #ccs-landing [data-ccs-pin-stage]{position:sticky;top:0;height:100svh}
#ccs-landing [data-ccs-wipe]{display:none}
.ccs-wide #ccs-landing [data-ccs-wipe]{display:flex;align-items:center;position:absolute;inset:0;z-index:5;clip-path:circle(0 at 50% 50%);pointer-events:none}

/* ===== 10. Franja horizontal: data-ccs-hscroll ===== */
#ccs-landing [data-ccs-hscroll-track]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
#ccs-landing [data-ccs-hscroll-track]>*{flex:none;scroll-snap-align:start}
.ccs-wide #ccs-landing [data-ccs-hscroll-stage]{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.ccs-wide #ccs-landing [data-ccs-hscroll-track]{overflow:visible;scroll-snap-type:none;will-change:transform}

/* ===== 11. Tarjetas apiladas: data-ccs-stack + data-ccs-stack-item ===== */
.ccs-wide #ccs-landing [data-ccs-stack-item]{position:sticky;top:calc(var(--ccs-stack-top,calc(var(--ccs-hdr) + 8px)) + var(--ccs-i,0)*16px);transform-origin:50% 0}

/* ===== 12. YouTube al hacer clic: data-ccs-youtube ===== */
#ccs-landing .ccs-yt-frame{position:relative}
#ccs-landing .ccs-yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== 13. Botón magnético: data-ccs-magnetic ===== */
#ccs-landing :where([data-ccs-magnetic]){transition:transform .25s cubic-bezier(.2,.8,.2,1)}


/* ===== 14. Marquesina que se detiene: data-ccs-pause="hover" (la detiene el JS) ===== */
#ccs-landing :where([data-ccs-marquee]){display:block}

/* ===== 15. Titular palabra por palabra: data-ccs-words (el JS separa las palabras) ===== */
#ccs-landing .ccs-wd{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .18em;margin-block:-.06em -.18em}
#ccs-landing .ccs-wd>span{display:inline-block}
.ccs-motion #ccs-landing [data-ccs-words] .ccs-wd>span{transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--ccs-i,0)*45ms)}
.ccs-motion #ccs-landing [data-ccs-words].ccs-in .ccs-wd>span{transform:none}

/* ===== 16. Texto que se descifra: data-ccs-scramble ===== */
#ccs-landing [data-ccs-scramble] [aria-hidden]{font-variant-numeric:tabular-nums}

/* ===== 17. Contador de cifras: data-ccs-count ===== */
#ccs-landing [data-ccs-count]{font-variant-numeric:tabular-nums}

/* ===== 18. Cursor con etiqueta: data-ccs-cursor="Ver" (el JS crea .ccs-cursor) ===== */
#ccs-landing .ccs-cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;display:grid;place-items:center;min-width:88px;height:88px;padding:0 18px;border-radius:999px;background:var(--ccs-cursor-bg,#0B0B0C);color:var(--ccs-cursor-fg,#fff);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:0;scale:.4;transition:opacity .25s,scale .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
#ccs-landing .ccs-cursor.ccs-on{opacity:1;scale:1}

/* ===== 19. Header que cambia según la sección: data-ccs-theme en cada sección =====
 *  El JS pone data-ccs-on="<valor>" en cada [data-ccs-header] y [data-ccs-edge]; los colores van en la landing:
 *  #ccs-landing .hdr[data-ccs-on="oscuro"]{background:#000;color:#fff} */
#ccs-landing [data-ccs-header]{transition:background-color .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}

/* ===== 20. Menú que marca la sección activa: data-ccs-spy =====
 *  El enlace activo recibe .ccs-active y aria-current="location". */
@media (min-width:900px){#ccs-landing [data-ccs-sticky]{position:sticky;top:calc(var(--ccs-hdr) + var(--ccs-sticky-gap,16px));align-self:start}}

/* ===== 21. Imagen fija que cambia con el texto: data-ccs-swap ===== */
.ccs-js #ccs-landing [data-ccs-swap-media]{display:grid}
.ccs-js #ccs-landing [data-ccs-swap-media]>*{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.ccs-js #ccs-landing [data-ccs-swap-media]>.ccs-on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.ccs-calm #ccs-landing [data-ccs-swap-media]>*{transition:none}
#ccs-landing [data-ccs-swap-step]{transition:opacity .4s}
.ccs-js #ccs-landing [data-ccs-swap-step]:not(.ccs-on){opacity:var(--ccs-swap-dim,.35)}
@media (min-width:900px){#ccs-landing [data-ccs-swap-media]{position:sticky;top:calc(var(--ccs-hdr) + 16px)}}

/* ===== 22. Pestañas: data-ccs-tabs ===== */
html:not(.ccs-js) #ccs-landing [data-ccs-tablist]{display:none}
.ccs-motion #ccs-landing [data-ccs-tabs] [role="tabpanel"]:not([hidden]){animation:ccs-fade .35s ease both}
@keyframes ccs-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== 23. Video o imagen en ventana: data-ccs-lightbox (el JS crea un <dialog class="ccs-lb">) ===== */
#ccs-landing .ccs-lb{width:min(92vw,1200px);max-width:none;max-height:92svh;padding:0;border:0;border-radius:var(--ccs-lb-radius,16px);background:#000;color:#fff;overflow:visible}
#ccs-landing .ccs-lb::backdrop{background:rgb(0 0 0/.82)}
#ccs-landing .ccs-lb-body{display:grid;place-items:center}
#ccs-landing .ccs-lb-body>video,#ccs-landing .ccs-lb-body>img{width:100%;max-height:92svh;object-fit:contain;border-radius:inherit}
#ccs-landing .ccs-lb-body>iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:inherit}
#ccs-landing .ccs-lb-close{position:absolute;right:0;bottom:calc(100% + 10px);width:44px;height:44px;border:1px solid rgb(255 255 255/.5);border-radius:50%;background:rgb(0 0 0/.6);color:#fff;font-size:1.2rem;line-height:1;cursor:pointer}
#ccs-landing .ccs-lb-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ccs-motion #ccs-landing .ccs-lb[open]{animation:ccs-fade .3s ease both}

/* ===== 24. "Ver más" y preguntas frecuentes con apertura suave: details[data-ccs-more] (solo CSS) ===== */
#ccs-landing details[data-ccs-more]>summary{cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  #ccs-landing details[data-ccs-more]::details-content{block-size:0;overflow:clip;transition:block-size .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
  #ccs-landing details[data-ccs-more][open]::details-content{block-size:auto}
}

/* ===== 25. Bordes de sección con forma: data-ccs-shape (solo CSS) =====
 *  round-top|round-bottom|round   esquinas grandes        --ccs-shape-r (48px)
 *  arc-top|arc-bottom             borde curvo             --ccs-shape-h (6vw)
 *  notch-top|notch-bottom         muesca en el centro     --ccs-notch (64px) */
#ccs-landing [data-ccs-shape]{--ccs-shape-r:clamp(24px,4vw,48px);--ccs-shape-h:6vw;--ccs-notch:clamp(36px,5vw,64px);position:relative}
#ccs-landing [data-ccs-shape="round"]{border-radius:var(--ccs-shape-r)}
#ccs-landing [data-ccs-shape="round-top"]{border-radius:var(--ccs-shape-r) var(--ccs-shape-r) 0 0}
#ccs-landing [data-ccs-shape="round-bottom"]{border-radius:0 0 var(--ccs-shape-r) var(--ccs-shape-r)}
#ccs-landing [data-ccs-shape="arc-bottom"]{clip-path:ellipse(80% 100% at 50% 0);padding-bottom:calc(var(--ccs-shape-h) + 24px)}
#ccs-landing [data-ccs-shape="arc-top"]{clip-path:ellipse(80% 100% at 50% 100%);padding-top:calc(var(--ccs-shape-h) + 24px)}
#ccs-landing [data-ccs-shape="notch-bottom"]{border-radius:0 0 var(--ccs-shape-r) var(--ccs-shape-r);-webkit-mask:radial-gradient(var(--ccs-notch) at 50% calc(100% + var(--ccs-notch)*.45),#0000 98%,#000);mask:radial-gradient(var(--ccs-notch) at 50% calc(100% + var(--ccs-notch)*.45),#0000 98%,#000)}
#ccs-landing [data-ccs-shape="notch-top"]{border-radius:var(--ccs-shape-r) var(--ccs-shape-r) 0 0;-webkit-mask:radial-gradient(var(--ccs-notch) at 50% calc(var(--ccs-notch)*-.45),#0000 98%,#000);mask:radial-gradient(var(--ccs-notch) at 50% calc(var(--ccs-notch)*-.45),#0000 98%,#000)}

/* ===== 26. Desenfoque progresivo en el borde: data-ccs-edge="top|bottom" (solo CSS) =====
 *  <div data-ccs-edge="top" aria-hidden="true"><span></span><span></span><span></span></div>
 *  --ccs-edge-h (alto, 75px) y --ccs-edge-bg (color del lavado, el del fondo de la landing).
 *  Con data-ccs-theme en las secciones, el kit le pone data-ccs-on, igual que al header:
 *  #ccs-landing [data-ccs-edge][data-ccs-on="oscuro"]{--ccs-edge-bg:#0B0B0C} */
#ccs-landing [data-ccs-edge]{--ccs-edge-h:75px;--ccs-edge-bg:#fff;position:fixed;left:0;right:0;height:var(--ccs-edge-h);z-index:40;pointer-events:none}
#ccs-landing [data-ccs-edge="top"]{top:0}
#ccs-landing [data-ccs-edge="bottom"]{bottom:0;transform:scaleY(-1)}
#ccs-landing [data-ccs-edge]::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--ccs-edge-bg),color-mix(in srgb,var(--ccs-edge-bg) 88%,transparent) 22%,color-mix(in srgb,var(--ccs-edge-bg) 55%,transparent) 52%,color-mix(in srgb,var(--ccs-edge-bg) 18%,transparent) 80%,transparent)}
#ccs-landing [data-ccs-edge]>span{position:absolute;inset:0;background:rgb(255 255 255/.004)}
#ccs-landing [data-ccs-edge]>span:nth-child(1){-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);-webkit-mask:linear-gradient(to top,#0000 0,#000 25%,#000 50%,#0000 75%);mask:linear-gradient(to top,#0000 0,#000 25%,#000 50%,#0000 75%)}
#ccs-landing [data-ccs-edge]>span:nth-child(2){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);-webkit-mask:linear-gradient(to top,#0000 25%,#000 50%,#000 75%,#0000 100%);mask:linear-gradient(to top,#0000 25%,#000 50%,#000 75%,#0000 100%)}
#ccs-landing [data-ccs-edge]>span:nth-child(3){-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask:linear-gradient(to top,#0000 50%,#000 75%,#000 100%);mask:linear-gradient(to top,#0000 50%,#000 75%,#000 100%)}
@media (max-width:599px){#ccs-landing [data-ccs-edge]{--ccs-edge-h:48px}#ccs-landing [data-ccs-edge]>span:nth-child(-n+2){display:none}}

/* ===== 27. Animaciones de scroll solo con CSS: data-ccs-scroll =====
 *  fade | rise | zoom-in | zoom-out | parallax | slide-left | slide-right | tilt
 *  No necesitan el JS. Solo en navegadores con animation-timeline y sin "reducir movimiento";
 *  en los demás el elemento se ve quieto. Para parallax y zoom, el contenedor de la imagen
 *  recorta con overflow:clip, NO con overflow:hidden: hidden crea un contenedor de scroll y
 *  view() se engancha a él en vez de a la página, así que la animación queda congelada al 50 %. */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  #ccs-landing [data-ccs-scroll]{animation:ccs-s-rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  #ccs-landing [data-ccs-scroll="fade"]{animation-name:ccs-s-fade}
  #ccs-landing [data-ccs-scroll="zoom-in"]{animation-name:ccs-s-zoom-in;animation-range:entry 0% cover 50%}
  #ccs-landing [data-ccs-scroll="zoom-out"]{animation-name:ccs-s-zoom-out;animation-range:cover 0% cover 100%}
  #ccs-landing [data-ccs-scroll="parallax"]{animation-name:ccs-s-parallax;animation-range:cover 0% cover 100%}
  #ccs-landing [data-ccs-scroll="slide-left"]{animation-name:ccs-s-left}
  #ccs-landing [data-ccs-scroll="slide-right"]{animation-name:ccs-s-right}
  #ccs-landing [data-ccs-scroll="tilt"]{animation-name:ccs-s-tilt;animation-range:entry 0% cover 45%}
}}
@keyframes ccs-s-fade{from{opacity:0}to{opacity:1}}
@keyframes ccs-s-rise{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@keyframes ccs-s-zoom-in{from{opacity:.4;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes ccs-s-zoom-out{from{transform:scale(1.18)}to{transform:scale(1)}}
@keyframes ccs-s-parallax{from{transform:translateY(-9%) scale(1.2)}to{transform:translateY(9%) scale(1.2)}}
@keyframes ccs-s-left{from{opacity:0;transform:translateX(12vw)}to{opacity:1;transform:none}}
@keyframes ccs-s-right{from{opacity:0;transform:translateX(-12vw)}to{opacity:1;transform:none}}
@keyframes ccs-s-tilt{from{opacity:0;transform:perspective(1000px) rotateX(18deg) translateY(40px)}to{opacity:1;transform:none}}