/* ═══════════════════════════════════════════════════════════════
   intro-tierra.css — intro tipo Google Earth de pri-antes-despues
   Tierra real (Cesium + imágenes satelitales) que vuela
   Tumaco → Bogotá → Madrid. Si el navegador no tiene WebGL, la página
   vuelve sola a la intro dibujada en lienzo 2D.
   ═══════════════════════════════════════════════════════════════ */

#earth-intro.modo-globo{background:#000;}
#earth-intro.modo-globo #earth-canvas,
#earth-intro.modo-globo .earth-ui,
#earth-intro.modo-globo .ei-pulse{display:none;}
#earth-intro:not(.modo-globo) #et-globo,
#earth-intro:not(.modo-globo) .et-capa{display:none;}

#et-globo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
#et-globo.listo{opacity:1;}
#et-globo .cesium-widget,#et-globo .cesium-widget canvas{width:100%;height:100%;}
#et-globo .cesium-viewer-bottom{left:auto;right:12px;bottom:10px;opacity:.55;}
#et-globo .cesium-widget-credits{font:500 10px/1.4 'Montserrat',Helvetica,Arial,sans-serif;color:rgba(255,255,255,.75);}
#et-globo .cesium-credit-logoContainer img{height:14px;width:auto;}
#et-globo .cesium-credit-expand-link{color:rgba(255,255,255,.75);}

/* Viñeta de cine encima del globo: centra la mirada y oscurece bordes */
.et-capa{position:absolute;inset:0;pointer-events:none;z-index:2;}
.et-vineta{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.32) 30%,transparent 52%),radial-gradient(ellipse 85% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%);}

/* ── Pines ── */
.et-pin{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform,opacity;}
.et-pin-cuerpo{position:absolute;left:0;top:0;transform-origin:50% 100%;}
.et-gota{position:absolute;left:-19px;top:-50px;width:38px;height:38px;border-radius:50% 50% 50% 4px;transform:rotate(-45deg);
  background:var(--c);box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 -3px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35);border:2px solid rgba(255,255,255,.92);}
.et-gota svg{position:absolute;left:50%;top:50%;width:19px;height:19px;transform:translate(-50%,-50%) rotate(45deg);fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.et-gota svg .lleno{fill:#fff;stroke:none;}
.et-sombra{position:absolute;left:-9px;top:-4px;width:18px;height:7px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(2px);}
.et-onda{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid var(--c);opacity:0;}
.et-nombre{position:absolute;left:24px;top:-46px;white-space:nowrap;font:800 13px/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:.5px;color:#fff;
  padding:7px 11px;border-radius:999px;background:rgba(2,10,24,.62);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 6px rgba(0,0,0,.7);}

/* ── Tarjetas de cada parada (tercio inferior, como documental) ── */
.et-tarjeta{position:absolute;left:clamp(16px,5vw,64px);bottom:clamp(84px,12vh,120px);max-width:min(560px,calc(100% - 32px));opacity:0;will-change:opacity,transform;}
.et-k{text-shadow:0 1px 8px rgba(0,0,0,.9);font:700 11px/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:5px;text-transform:uppercase;color:var(--c);display:flex;align-items:center;gap:10px;}
.et-k::before{content:'';width:28px;height:2px;background:var(--c);border-radius:2px;}
.et-t{font:900 clamp(2rem,6.2vw,4.4rem)/.95 'Montserrat',Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:#fff;margin:.55rem 0 .5rem;
  text-shadow:0 4px 30px rgba(0,0,0,.85),0 0 50px rgba(0,0,0,.4);}
.et-t em{font-style:normal;color:var(--c);}
.et-s{font:italic 400 clamp(1rem,2.2vw,1.3rem)/1.35 'Lora',Georgia,'Times New Roman',serif;color:rgba(255,255,255,.9);text-shadow:0 2px 14px rgba(0,0,0,.95);}
.et-m{margin-top:.7rem;font:600 11px/1.5 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.62);text-shadow:0 2px 10px rgba(0,0,0,.9);}
.et-m b{color:#38BDF8;font-weight:700;}

/* Cierre: centrado abajo, el planeta con la ruta queda libre arriba */
.et-tarjeta.et-final{left:50%;bottom:clamp(76px,9vh,96px);transform:translateX(-50%);text-align:center;width:max-content;max-width:calc(100% - 32px);}
.et-final .et-k{justify-content:center;}
.et-final .et-k::after{content:'';width:28px;height:2px;background:var(--c);border-radius:2px;}
.et-final .et-t{font-size:clamp(2rem,5.5vw,3.6rem);}
.et-final .et-s,.et-final .et-m{text-shadow:0 2px 12px #000,0 0 30px #000;}

/* Ruta: Tumaco → Bogotá → Madrid, abajo a la derecha */
.et-ruta{position:absolute;right:clamp(16px,5vw,64px);bottom:clamp(84px,12vh,120px);display:flex;align-items:center;gap:8px;opacity:0;
  font:700 10px/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);}
.et-ruta span{display:flex;align-items:center;gap:6px;transition:color .4s;}
.et-ruta span i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .4s,box-shadow .4s;}
.et-ruta span.on{color:#fff;}
.et-ruta span.on i{background:var(--c);box-shadow:0 0 10px var(--c);}
.et-ruta b{width:22px;height:1px;background:rgba(255,255,255,.25);}

#earth-intro.modo-globo .ei-skip{color:rgba(255,255,255,.7);background:rgba(2,10,24,.5);border-color:rgba(255,255,255,.22);min-height:44px;font-size:.62rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

@media (max-width:700px){
  .et-tarjeta{bottom:96px;}
  .et-ruta{left:50%;right:auto;top:18px;bottom:auto;transform:translateX(-50%);}
  .et-nombre{font-size:12px;}
}

/* El aviso de almacenamiento espera a que termine la intro */
body.intro-active #aviso-almacenamiento{visibility:hidden;}

/* Modo video (render cuadro por cuadro): sin botón, sin cursor, crédito discreto */
.modo-video .ei-skip,.modo-video #cur,.modo-video #cur-r,.modo-video #aviso-almacenamiento,.modo-video #et-globo .cesium-viewer-bottom{display:none!important;}
.modo-video #earth-intro::after{content:'Imágenes © Esri, Maxar, Earthstar Geographics';position:absolute;right:14px;bottom:10px;z-index:5;font:500 9px/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:.5px;color:rgba(255,255,255,.45);}
.modo-video #et-globo{transition:none;}
/* Video vertical (Reels/TikTok): letras más grandes y textos lejos de la interfaz de la app */
@media (max-aspect-ratio:3/4){
  .modo-video .et-tarjeta{bottom:21%;left:7%;max-width:86%;}
  .modo-video .et-tarjeta.et-final{left:50%;bottom:19%;}
  .modo-video .et-k{font-size:12px;}
  .modo-video .et-t{font-size:3.1rem;}
  .modo-video .et-final .et-t{font-size:2.9rem;}
  .modo-video .et-s{font-size:1.25rem;}
  .modo-video .et-m{font-size:10px;letter-spacing:2px;}
  .modo-video .et-ruta{top:9%;}
  .modo-video .et-nombre{font-size:14px;}
}

/* Avioncito en la punta de la ruta */
.et-avion{position:absolute;left:0;top:0;width:0;height:0;opacity:0;will-change:transform,opacity;z-index:1;}
.et-avion svg{position:absolute;left:-15px;top:-15px;width:30px;height:30px;fill:#fff;
  filter:drop-shadow(0 0 6px rgba(255,138,61,.95)) drop-shadow(0 3px 6px rgba(0,0,0,.6));}

/* Botones de la intro: sonido + saltar, en píldora, abajo al centro */
.et-botones{position:absolute;left:50%;bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:6;display:flex;gap:.6rem;}
#earth-intro .et-botones .ei-skip{position:static;transform:none;}
#earth-intro:not(.modo-globo) .et-son{display:none;}
.et-son{display:flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1.1rem 0 .9rem;border-radius:999px;cursor:pointer;
  font:700 .62rem/1 'Montserrat',Helvetica,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(255,94,0,.18);border:1px solid rgba(255,94,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .15s;}
.et-son:hover{background:rgba(255,94,0,.32);}
.et-son:active{transform:scale(.97);}
.et-son:focus-visible{outline:2px solid #FF5E00;outline-offset:3px;}
.et-son svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.et-son svg .parlante{fill:#fff;stroke:none;}
.et-son .onda1,.et-son .onda2{display:none;}
.et-son.on .onda1,.et-son.on .onda2{display:block;}
.et-son.on .mudo{display:none;}
.et-son.on{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);}
.modo-video .et-botones{display:none!important;}

#earth-intro .et-botones .ei-skip,.et-son{white-space:nowrap;}