/* =========================================================
   muta — versión base para mostrar y vender la sala
   Se apoya en ../assets/css/muta.css (color, tipografía, marca
   y el componente de revelado). Acá solo va lo de esta página.
   ========================================================= */

:root{
  /* campos de cápsula: en esta pantalla la letra toma color */
  --malva:#A79ECB;
  --fuego:#E2431E;
  --acido:#C8D75A;
  --marea:#46A0AA;
  --barra:56px;
}

html{scroll-behavior:smooth}
/* un solo negro de punta a punta: el de las secciones */
body{background:#0d0c0a;overflow-x:clip}

/* ---------- barra superior ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--barra);
  display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding:0 var(--pad);
  color:var(--crema);transition:color .35s}
.top.claro{color:var(--negro)}
.top.opaca{background:#0d0c0a;color:var(--crema)}
/* en el teléfono las escenas miden más que la pantalla y el texto pasa por debajo */
@media(max-width:820px){
  .top{background:rgba(13,12,10,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:color .35s,background .35s}
  .top.claro{background:rgba(239,235,227,.9)}
}
.top .logo{font-size:22px;flex:none}
.top nav{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top ul{display:flex;gap:clamp(14px,2vw,28px);list-style:none;font-size:13px;white-space:nowrap}
.top nav a{opacity:.55;transition:opacity .3s}
.top nav a:hover,.top nav a[aria-current="true"]{opacity:1}
.top nav a[aria-current="true"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------- escenas ----------
   No se apilan: la página baja en bloque y las estaciones se fijan en el lugar del marco
   (js/estaciones.js); entre estación y estación la página corre normal. */
.escena{position:relative;overflow:hidden;isolation:isolate}

.dentro{position:relative;z-index:2;padding:calc(var(--barra) + clamp(24px,6vh,64px)) var(--pad) clamp(28px,6vh,64px)}
.kicker{font-size:12px;letter-spacing:.01em;opacity:.6;margin-bottom:18px}
.titular{font-size:clamp(40px,8.2vw,132px);line-height:.9;letter-spacing:-.05em;font-weight:700;max-width:12ch}
.bajada{font-size:clamp(18px,2.2vw,30px);line-height:1.12;letter-spacing:-.03em;font-weight:400;margin-top:.7em;max-width:26ch}
.texto{font-size:clamp(15px,1.25vw,18px);line-height:1.55;max-width:56ch}
.texto p+p{margin-top:1em}
.boton{display:inline-block;font-size:13px;border:1px solid currentColor;padding:10px 18px;margin-top:28px;
  transition:background .25s,color .25s}

/* ---------- 04 · cápsulas ----------
   Escena fija. La barra de navegación queda arriba sobre negro, afuera del video. El video
   va a todo el ancho y entero (apaisado, sin recorte). El título pisa la imagen abajo a la
   izquierda, en crema. La descripción va debajo, fuera de la imagen.
   Si la pantalla es baja y no entra todo, la escena mide más que la pantalla y se fija por
   abajo (escenas.js y capsulas.js ya lo tienen en cuenta): lo que se esconde es el margen
   de arriba, detrás de la barra. */
/* .toma: la misma puesta para inmersivas, frontera, cápsulas y altera: siempre la sala,
   en la misma toma, a todo el ancho; lo que cambia es su estado */
.toma{background:#0d0c0a;color:var(--crema)}
/* las secciones miden lo que ocupan (marco + texto): la siguiente queda justo debajo, sin un
   bloque negro que barrer. Solo el inicio deja lugar para la barra; la última deja espacio
   abajo para poder subir hasta el lugar del marco. Solo se ve la sección en foco
   (estaciones.js); la que viene aparece por fundido. */
.toma .escenario{position:relative;display:flex;flex-direction:column}
#inicio .escenario{padding-top:var(--barra)}
#contacto .escenario{min-height:calc(100svh - var(--barra))}
.pantalla{position:relative;flex:none;width:100%;aspect-ratio:1920/824}
.pantalla > :is(video,img){position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:cover}
/* las capas de una estación: todas en el mismo marco, se funden entre sí */
.pantalla .capa{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  transition:opacity 1.4s cubic-bezier(.3,.6,.2,1)}
.pantalla .capa.on{opacity:1}
/* orden fijo: gradiente abajo, bosque, frontera, video; encima el velo y los títulos */
/* solo se ve la sección en foco; la que viene aparece por fundido apenas arranca el paso */
#escenas > section{transition:opacity .55s cubic-bezier(.3,.6,.2,1),visibility 0s}
#escenas > section.oculta{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s cubic-bezier(.3,.6,.2,1),visibility 0s .55s}
.pantalla [data-capa="gradiente"]{overflow:hidden;z-index:0}
.pantalla [data-capa-estado="0"]{z-index:0}
.pantalla [data-capa-estado="1"]{z-index:1}
.pantalla [data-capa-estado="2"]{z-index:2}
.pantalla [data-capa="video"]{z-index:3}
.pantalla [data-capa="video"] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background:#000;visibility:hidden}
.pantalla [data-capa="video"] video.activo{visibility:visible}
/* el gradiente: canvas chico, desenfocado y agrandado (como en piezas/web.html) */
.pantalla [data-capa="gradiente"] canvas{width:100%;height:100%;display:block;filter:blur(12px) saturate(1.15);transform:scale(1.16)}
.pantalla img.capa,.pantalla video.capa{object-fit:cover;background:#000}
/* inicio: muta grande y la bajada, como marca sobre el campo */
.titulo-cap.inicio .logo-xl{display:block;font-size:2.4em;line-height:.78}
/* halo de lente sobre muta: crece con la luz del gradiente detrás (--luz, 0 a 1, lo calcula
   gradiente.js). Resplandor cálido que se abre en capas y un leve desenfoque de la letra, como
   un filtro difusor de cine. Sobre oscuro, nada; sobre blanco, al máximo. */
#inicio :is(.logo-xl, .claim){--luz:0;
  text-shadow:
    0 0 calc(var(--luz) * .06em) rgba(255,250,240,calc(var(--luz) * .95)),
    0 0 calc(var(--luz) * .18em) rgba(255,244,228,calc(var(--luz) * .7)),
    0 0 calc(var(--luz) * .45em) rgba(255,232,205,calc(var(--luz) * .45)),
    0 0 calc(var(--luz) * .9em)  rgba(255,220,185,calc(var(--luz) * .25));
  filter:blur(calc(var(--luz) * .005em))}   /* ~1 px en muta; proporcional en la bajada */
.titulo-cap.inicio .claim{display:block;font-weight:300;font-style:italic;letter-spacing:-.03em;font-size:.5em;margin-top:.3em}
.fichas .n{font-size:12px;opacity:.6}
/* un velo bajo, apenas, para que el título se lea sobre cualquier cuadro */
.pantalla::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;z-index:5;pointer-events:none;
  background:linear-gradient(rgba(13,12,10,0),rgba(13,12,10,.42))}
/* la sala de día es muy clara: más velo para que el título se lea */
#sala[data-nav="altera"] .pantalla::after{height:60%;background:linear-gradient(rgba(13,12,10,0),rgba(13,12,10,.62))}
.titulo-cap{position:absolute;z-index:6;left:var(--pad);bottom:clamp(12px,2.2vw,34px);margin:0;
  color:var(--crema);pointer-events:none;
  font-size:clamp(24px,4.3vw,75px);line-height:.86;letter-spacing:-.045em;font-weight:700;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.titulo-cap .br{display:block}
.titulo-cap.fuera{opacity:0;filter:blur(8px);transform:translateY(10px)}
/* el índice va chico, abajo a la derecha del video, en la línea del título */
.indice{position:absolute;z-index:6;bottom:clamp(12px,2.2vw,34px);right:var(--pad);list-style:none;display:flex;
  gap:clamp(12px,2vw,26px);font-size:12px;counter-reset:c;color:var(--crema);text-shadow:0 0 12px rgba(0,0,0,.5)}
.indice li{opacity:.4;transition:opacity .5s;counter-increment:c}
.indice li::before{content:"0" counter(c) " ";opacity:.6}
.indice li.on{opacity:1}
.indice{transition:opacity .8s}
.indice.fuera{opacity:0}
/* las fichas se apilan en la misma celda: la más alta define el alto */
.fichas{display:grid}
.ficha-cap{grid-area:1/1;padding:clamp(10px,1.6svh,18px) var(--pad) clamp(14px,2.4svh,26px);
  display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.8fr) minmax(0,.8fr);gap:clamp(20px,3vw,56px);
  align-items:start;align-content:start;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),filter .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.ficha-cap.fuera{opacity:0;filter:blur(8px);transform:translateY(10px);pointer-events:none}
.ficha-cap .n{font-size:12px;opacity:.6;margin-bottom:8px}
.ficha-cap .incluye{font-size:13px;line-height:1.45;opacity:.8}
.ficha-cap .texto{font-size:clamp(13.5px,.98vw,15px);line-height:1.45;color:rgba(239,235,227,.86);max-width:none}
.ficha-cap .texto p+p{margin-top:.6em}
.ficha-cap .tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11px;letter-spacing:.04em}
.ficha-cap .boton{margin-top:10px;padding:8px 15px}
.ficha-cap .boton:hover{background:var(--crema);color:var(--negro)}
/* la firma de Clorindo Testa (trazada a curvas desde el escaneo): crema, sutil */
.firma-testa{display:block;width:min(100%,clamp(170px,17vw,260px));height:auto;color:var(--crema);opacity:.88}
.firma-linea{font-size:12px;line-height:1.45;opacity:.6;margin-top:10px;max-width:30ch}
.compartir{display:block;margin-top:10px;padding:0;border:0;background:none;font:inherit;font-size:11.5px;
  color:inherit;opacity:.6;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.compartir:hover{opacity:1;border:0}
.ficha-cap .datos{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(239,235,227,.2)}
.ficha-cap .datos div{padding:9px 0;border-bottom:1px solid rgba(239,235,227,.2)}
.ficha-cap .datos dt{font-size:11px;opacity:.6}
.ficha-cap .datos dd{font-size:clamp(15px,1.3vw,19px);letter-spacing:-.02em;font-weight:500;margin-top:2px}
/* pantallas bajas y anchas: el video a todo el ancho se come el alto; los párrafos van corridos
   en un solo bloque (antes se escondía todo menos el primero y se perdían textos que importan) */
@media(min-width:901px) and (min-aspect-ratio:16/10){
  .ficha-cap .texto p{display:inline}
  .ficha-cap .texto p+p::before{content:" "}
}
@media(max-width:900px){
  .indice{font-size:10.5px;gap:8px;top:10px;bottom:auto;left:var(--pad);right:auto}
  .titulo-cap{font-size:clamp(20px,5vw,36px)}
  .ficha-cap{grid-template-columns:1fr;gap:14px}
  .ficha-cap .n{margin-bottom:4px}
  .ficha-cap .boton{margin-top:12px}
}

/* ---------- estación planes ----------
   Membresías y mecenazgos juntos: dos filas, cada una con su cabecera y sus cuatro tarjetas.
   En pantalla grande el lado de las tarjetas sale del alto disponible, así las dos filas llenan
   la pantalla sin cortarse; el ancho que sobra queda a la derecha. La fila fuera de foco se
   atenúa. */
.planes-doble{--gap:clamp(6px,.6vw,10px);--lado:calc((100svh - var(--barra) - 250px) / 2);
  display:flex;flex-direction:column;gap:clamp(16px,2.6svh,30px);
  padding:clamp(10px,1.8svh,20px) var(--pad) clamp(16px,2.6svh,28px)}
.fila{transition:opacity .6s cubic-bezier(.3,.6,.2,1)}
#planes[data-nav="membresias"] .fila[data-fila="1"],
#planes[data-nav="mecenazgos"] .fila[data-fila="0"]{opacity:.42}
.fila-cabeza{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(20px,3vw,56px);
  align-items:end;margin-bottom:clamp(10px,1.4svh,16px);width:min(100%,calc(var(--lado) * 4 + var(--gap) * 3))}
.fila-cabeza .n{font-size:12px;opacity:.6}
.fila-cabeza p{font-size:clamp(13.5px,.98vw,15px);line-height:1.45;color:rgba(239,235,227,.8);max-width:62ch}
.pantalla.planes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);
  background:none;aspect-ratio:auto;width:min(100%,calc(var(--lado) * 4 + var(--gap) * 3))}
.pantalla.planes::after{display:none}
/* las tarjetas son siempre cuadradas; el texto se mide contra el ancho de la tarjeta (cqi),
   así entra igual en una pantalla grande que en una grilla de 2 × 2 en el teléfono */
.celda{position:relative;min-width:0;aspect-ratio:1/1;container-type:inline-size}
.plan{position:absolute;inset:0;isolation:isolate;overflow:hidden;background:#0d0c0a;color:var(--crema);
  padding:clamp(10px,7cqi,32px);display:flex;flex-direction:column;gap:clamp(4px,2.6cqi,12px);
  transition:opacity 1.1s cubic-bezier(.3,.6,.2,1) calc(var(--i) * 90ms)}
.plan.fuera{opacity:0;pointer-events:none}
.plan .fondo{position:absolute;inset:0;z-index:-1}
.plan .fondo canvas{width:100%;height:100%;display:block;filter:blur(10px) saturate(1.1) brightness(.82);transform:scale(1.2)}
/* velo: más denso arriba (número y título) y abajo (texto y precio) */
.plan .fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(13,12,10,.66) 0,rgba(13,12,10,.5) 22%,rgba(13,12,10,.2) 38%,rgba(13,12,10,.2) 46%,
    rgba(13,12,10,.62) 62%,rgba(13,12,10,.74) 100%)}
.plan .n{font-size:clamp(9.5px,3.3cqi,12px);opacity:.8}
.plan h3{font-size:clamp(15px,9.5cqi,40px);letter-spacing:-.04em;line-height:1;font-weight:700}
.plan p{font-size:clamp(10.5px,4.3cqi,15px);line-height:1.4;margin-top:auto;text-wrap:pretty}
.plan .precio{font-size:clamp(14px,8.2cqi,32px);letter-spacing:-.035em;font-weight:500}
.plan.fundador{box-shadow:inset 0 0 0 1px rgba(239,235,227,.55)}
.titulo-plan{font-size:clamp(26px,2.6vw,44px);line-height:.95;letter-spacing:-.045em;font-weight:700;margin-top:6px}
@media(max-width:900px){
  .pantalla.planes{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .fila-cabeza{grid-template-columns:1fr;gap:8px;width:100%}
}

/* ---------- pie ---------- */
.firma{display:flex;justify-content:space-between;gap:16px;font-size:11.5px;color:var(--gris);
  padding:18px var(--pad);border-top:1px solid rgba(239,235,227,.12);background:#0d0c0a}

/* sin movimiento: nada se apila ni se corre */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- celular en horizontal ----------
   Mismo orden que en la pantalla grande (barra, marco, texto), todo en una pantalla: la barra se
   achica y el marco se reencuadra más bajo (recorta arriba y abajo, no los costados) para dejar
   lugar al texto, que va en tres columnas, chico y corrido. Las estaciones se fijan pegadas a la
   barra, como en cualquier pantalla (escenas.js, mutaArriba). */
@media (orientation:landscape) and (max-height:540px){
  :root{--barra:40px;--pad:clamp(16px,4vw,40px)}
  .top{gap:20px}
  .top .logo{font-size:18px}
  .top ul{font-size:12px;gap:16px}
  .toma .escenario{height:calc(100svh - var(--barra))}
  #inicio .escenario{height:100svh}
  .toma .escenario > .pantalla{flex:1 1 auto;min-height:0;aspect-ratio:auto}
  .planes-doble{height:auto !important}
  .pantalla.planes{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))}
  .fila-cabeza{width:100%;grid-template-columns:minmax(0,.9fr) minmax(0,2fr)}
  .titulo-cap{font-size:clamp(18px,3.6vw,32px);bottom:10px}
  .titulo-cap.inicio{font-size:clamp(30px,7vw,60px)}
  .indice{top:auto;left:auto;bottom:10px;right:var(--pad)}
  .ficha-cap{grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr) minmax(0,1fr);gap:18px;
    padding:9px var(--pad) 11px}
  .ficha-cap .n{font-size:10.5px;margin-bottom:3px}
  .ficha-cap .incluye{font-size:11.5px;line-height:1.35}
  .ficha-cap .texto{font-size:12px;line-height:1.4}
  .ficha-cap .texto p{display:inline}
  .ficha-cap .texto p+p::before{content:" "}
  .ficha-cap .tags{font-size:9.5px;gap:3px 10px}
  .ficha-cap .boton{margin-top:7px;padding:5px 11px;font-size:11.5px}
  .compartir{margin-top:5px;font-size:10.5px}
  .firma-testa{width:110px}
  .firma-linea{font-size:10.5px;margin-top:4px}
  .ficha-cap .datos div{padding:5px 0}
  .ficha-cap .datos dd{font-size:13px}
}