/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MUNDO — la capa 3D de cartón y el viaje entre páginas
   ═══════════════════════════════════════════════════════════════════════════════════════════

   TRES PIEZAS
     1. .mundo: una capa fija DETRÁS de toda la página (z-index -1). Las secciones opacas la
        tapan; las «ventanas» (.ventana[data-escena]) son transparentes y dejan ver el diorama.
     2. .escena-foco: la caja de la maqueta donde cae el protagonista 3D de cada ventana. El
        motor encuadra la estación dentro de esa caja; por eso el 3D nunca pisa un texto.
     3. @view-transition: navegar entre /, /catalogo, /planes, /historia y las fichas es el MISMO
        viaje de cámara: el mundo viejo se atraviesa (dolly) mientras entra la página nueva.
        Sin reescribir la web como SPA: son documentos distintos, Chrome los funde.

   LO QUE NO SE ANIMA
     La rejilla de productos no se toca: ni fundidos ni viajes encima. La vida vive en el mundo
     de fondo y en lo que se pulsa. prefers-reduced-motion corta todo esto a cortes secos.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1. la capa del mundo ──────────────────────────────────────────────────────────────────── */
.mundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:radial-gradient(120% 80% at 70% 85%,#3A2211 0%,#1E120A 45%,#130C07 100%);
  view-transition-name:mundo}
.mundo-lienzo{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s cubic-bezier(.22,1,.36,1)}
.mundo-vivo .mundo-lienzo{opacity:1}

/* Todo lo que NO es ventana es opaco: la rejilla de productos, las fichas, el pie. Algunas
   secciones venían con `background:none` (el catálogo, por ejemplo) y el mundo se habría visto
   por detrás de los precios. Solo el color de fondo: sus degradados siguen encima. */
body>section:not(.ventana),body>header:not(.ventana),body>footer,body>main>section:not(.ventana){background-color:var(--espresso,#150E09)!important}

/* ── 2. las ventanas ───────────────────────────────────────────────────────────────────────── */
.ventana{position:relative;isolation:isolate;background:transparent!important}
/* El velo: oscurece el lado del texto (legibilidad AA sobre cualquier cosa del diorama) y funde
   los bordes de la ventana con las secciones opacas de arriba y abajo. */
.ventana::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,var(--espresso,#150E09) 0,rgba(21,14,9,0) 90px,rgba(21,14,9,0) calc(100% - 90px),var(--espresso,#150E09) 100%),
    linear-gradient(90deg,rgba(21,14,9,.93) 0%,rgba(21,14,9,.82) 34%,rgba(21,14,9,.34) 52%,rgba(21,14,9,0) 68%)}
/* Dos ventanas seguidas miran al MISMO mundo: entre ellas no hay costura oscura, el diorama sigue. */
.ventana:has(+ .ventana)::before{background:
    linear-gradient(180deg,var(--espresso,#150E09) 0,rgba(21,14,9,0) 90px),
    linear-gradient(90deg,rgba(21,14,9,.93) 0%,rgba(21,14,9,.82) 34%,rgba(21,14,9,.34) 52%,rgba(21,14,9,0) 68%)}
.ventana + .ventana::before{background:
    linear-gradient(0deg,var(--espresso,#150E09) 0,rgba(21,14,9,0) 90px),
    linear-gradient(90deg,rgba(21,14,9,.93) 0%,rgba(21,14,9,.82) 34%,rgba(21,14,9,.34) 52%,rgba(21,14,9,0) 68%)}
.ventana-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,4vw,64px);align-items:center}
.ventana-texto{min-width:0}
.escena-foco{position:relative;min-height:clamp(300px,54vh,580px);pointer-events:none}
.escena-foco>*{pointer-events:auto}

/* Vertical (móvil y tableta de pie): el protagonista arriba, el texto debajo. */
@media (max-width:860px),(max-aspect-ratio:1/1){
  .ventana::before{background:
    linear-gradient(180deg,var(--espresso,#150E09) 0,rgba(21,14,9,0) 70px,rgba(21,14,9,0) calc(100% - 70px),var(--espresso,#150E09) 100%),
    linear-gradient(180deg,rgba(21,14,9,0) 0%,rgba(21,14,9,.1) 30%,rgba(21,14,9,.82) 46%,rgba(21,14,9,.9) 100%)}
  .ventana:has(+ .ventana)::before,.ventana + .ventana::before{background:
    linear-gradient(180deg,rgba(21,14,9,0) 0%,rgba(21,14,9,.1) 30%,rgba(21,14,9,.82) 46%,rgba(21,14,9,.9) 100%)}
  .ventana-in{grid-template-columns:minmax(0,1fr);gap:18px}
  .escena-foco{order:-1;min-height:0;height:clamp(220px,36svh,380px)}
  /* El velo del texto nace JUSTO donde acaba la caja del 3D, no a un porcentaje de la sección:
     en una sección alta (con tarjetas) el 46 % caía cientos de píxeles por debajo del título y
     las matas del cafetal asomaban detrás del «De dónde viene». overflow-x:clip corta el velo a
     lo ancho sin crear barra de scroll. */
  .ventana{overflow-x:clip}
  .escena-foco::after{content:"";position:absolute;left:-50vw;right:-50vw;top:calc(100% - 36px);bottom:-200vh;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(21,14,9,0) 0,rgba(21,14,9,.84) 64px,rgba(21,14,9,.9) 100%)}
}

/* Modo póster (equipos que no aguantan el 3D, o 3D apagado por el vigía): la misma escena,
   renderizada, dentro de su caja y fundida con el fondo. Se pide al acercarse, no antes. */
.mundo-poster .escena-foco[data-poster]{background-repeat:no-repeat;background-position:center;background-size:cover;
  -webkit-mask-image:radial-gradient(farthest-side,#000 62%,transparent 100%);mask-image:radial-gradient(farthest-side,#000 62%,transparent 100%);
  opacity:0;transition:opacity .6s ease}
.mundo-poster .escena-foco[data-poster].visto{opacity:1}

/* ── los enlaces sobre las bolsas del mostrador ────────────────────────────────────────────── */
.mundo-punto{position:absolute;left:0;top:0;width:calc(var(--alto,120px)*.8);height:var(--alto,120px);translate:-50% -50%;
  display:none;border-radius:14px;outline-offset:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mundo-vivo .mundo-punto.on{display:block}
.mundo-punto span{position:absolute;left:50%;bottom:-10px;translate:-50% 100%;white-space:nowrap;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:#241608;background:linear-gradient(180deg,#E7C084,#CB9145);padding:6px 12px;border-radius:100px;box-shadow:0 8px 22px rgba(0,0,0,.4);
  opacity:0;transform:translateY(-4px) scale(.94);transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.mundo-punto:hover span,.mundo-punto:focus-visible span{opacity:1;transform:none}
.mundo-punto:focus-visible{outline:2px solid #E7C084}
@media (hover:none){.mundo-punto span{display:none}}

/* ── 3. el viaje entre páginas ─────────────────────────────────────────────────────────────── */
@view-transition{navigation:auto}
::view-transition-group(root),::view-transition-group(mundo){animation-duration:.72s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* Adelante (portada → catálogo → ficha): la cámara ATRAVIESA el mundo viejo y la página nueva
   llega desde lejos, con un asentamiento corto al final. */
::view-transition-old(mundo){animation:mundo-cruza .72s cubic-bezier(.55,0,.3,1) both}
::view-transition-new(mundo){animation:mundo-llega .72s cubic-bezier(.22,1,.36,1) both}
::view-transition-old(root){animation:pagina-se-va .38s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pagina-llega .66s cubic-bezier(.34,1.3,.64,1) .1s both}
/* Atrás: la cámara retrocede (el mundo viejo se aleja) y la página anterior vuelve a su sitio. */
html:active-view-transition-type(atras)::view-transition-old(mundo){animation-name:mundo-retrocede}
html:active-view-transition-type(atras)::view-transition-new(root){animation-name:pagina-vuelve}
/* Al lado (catálogo ↔ planes ↔ historia): travelling lateral. */
html:active-view-transition-type(lado)::view-transition-old(mundo){animation-name:mundo-travelling}
html:active-view-transition-type(lado)::view-transition-old(root){animation-name:pagina-sale-izq}
html:active-view-transition-type(lado)::view-transition-new(root){animation-name:pagina-entra-der}

@keyframes mundo-cruza{from{transform:none;opacity:1;filter:none}to{transform:scale(1.55);opacity:0;filter:blur(10px)}}
@keyframes mundo-retrocede{from{transform:none;opacity:1}to{transform:scale(.72);opacity:0;filter:blur(6px)}}
@keyframes mundo-travelling{from{transform:none;opacity:1}to{transform:translateX(-22%) scale(1.08);opacity:0;filter:blur(6px)}}
@keyframes mundo-llega{from{opacity:0}to{opacity:1}}
@keyframes pagina-se-va{to{opacity:0;transform:scale(1.04) translateY(-2%)}}
@keyframes pagina-llega{from{opacity:0;transform:scale(.93) translateY(3%)}to{opacity:1;transform:none}}
@keyframes pagina-vuelve{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes pagina-sale-izq{to{opacity:0;transform:translateX(-6%)}}
@keyframes pagina-entra-der{from{opacity:0;transform:translateX(7%)}to{opacity:1;transform:none}}

/* Movimiento reducido: sin viaje entre páginas (corte seco) y sin fundidos del mundo. */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .mundo-lienzo,.mundo-poster .escena-foco[data-poster]{transition:none}
  .mundo-punto span{transition:none}
}