/* =============================================================================
   3R PRODUCCIONES · sections.css
   Las nueve secciones, en orden.
   ============================================================================= */


/* =============================================================================
   01 · EL MONTAJE (hero)
   El video/maqueta ocupa una etapa sticky y avanza con el scroll.
   El usuario nunca pierde el control del scroll: no hay scrolljacking.
   ============================================================================= */

/* Modo loop (el que está activo): el hero ocupa una pantalla y queda fijo.
   La sección siguiente sube por encima al scrollear, sin scroll de más. */
.hero{
  position: sticky; top: 0;
  z-index: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* Modo scroll: la pista larga define cuánto dura el montaje. */
.hero:has(.hero__track){ position: relative; height: auto; overflow: visible; }
.hero__track{ height: 460vh; }
@media (max-width: 820px){ .hero__track{ height: 380vh; } }
.hero__stage--pega{ position: sticky; top: 0; }

.hero__stage{
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);   /* que el SVG no estire la fila */
  isolation: isolate;
}
.hero__stage > *{ grid-area: stack; min-width: 0; min-height: 0; }

/* --- capa de medios: video real o maqueta SVG ------------------------------ */
.hero__media{
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #0E1218 0%, #050608 70%);
}
.hero__media video,
.hero__media img,
.hero__media canvas{
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}

/* El material real trae cartelas blancas a pantalla completa entre rubro y
   rubro. Sobre una página negra pegan un fogonazo.

   Antes esto se resolvía con una capa en modo `darken`, y estaba mal: ese
   modo compara canal por canal, así que un rojo (255,50,50) contra un gris
   azulado terminaba en (69,76,50) — un verde. De ahí venía la sensación de
   saturación rara. Ahora se hace plano: menos brillo, menos saturación y un
   velo negro liso encima. Oscurece parejo y no toca los tonos. */
.hero__media--real{ isolation: isolate; }
.hero__media--real video,
.hero__media--real canvas{
  filter: brightness(.6) saturate(.72) contrast(1.02);
}
.hero__media--real::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(5, 6, 8, .3);
  pointer-events: none;
}
.hero__svg{ position: absolute; inset: 0; }
.hero__svg svg{ width: 100%; height: 100%; }

/* Velo para que el texto se lea siempre sobre el video.
   La columna izquierda va bien oscura: es donde vive el titular, y el
   material real trae sus propios carteles en el centro. */
.hero__veil{
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(5,6,8,.95) 0%, rgba(5,6,8,.88) 26%, rgba(5,6,8,.45) 48%,
      rgba(5,6,8,.18) 66%, rgba(5,6,8,.42) 100%),
    linear-gradient(180deg,
      rgba(5,6,8,.80) 0%, rgba(5,6,8,.18) 28%, rgba(5,6,8,.22) 58%,
      rgba(5,6,8,.96) 100%);
}

/* En modo loop el titular vive abajo a la izquierda: ahí el velo tiene que
   ser opaco de verdad, porque el video cicla cartelas claras cada 10 s. */
.hero:has(.hero__ui--loop) .hero__veil{
  background:
    linear-gradient(180deg,
      rgba(5,6,8,.62) 0%, rgba(5,6,8,.20) 26%, rgba(5,6,8,.55) 60%,
      rgba(5,6,8,.90) 82%, rgba(5,6,8,.98) 100%),
    linear-gradient(72deg,
      rgba(5,6,8,.88) 0%, rgba(5,6,8,.55) 38%, rgba(5,6,8,.12) 70%,
      rgba(5,6,8,.30) 100%);
}

/* Con la maqueta SVG el velo puede ser mucho más suave: no hay nada que tapar. */
.hero:has(#maqueta) .hero__veil{
  background:
    linear-gradient(180deg, rgba(5,6,8,.86) 0%, rgba(5,6,8,.25) 34%, rgba(5,6,8,.30) 62%, rgba(5,6,8,.95) 100%),
    radial-gradient(80% 60% at 50% 55%, transparent 40%, rgba(5,6,8,.55) 100%);
}

/* --- capa de contenido ---------------------------------------------------- */
.hero__ui{
  position: relative;
  display: grid;
  align-content: space-between;
  padding-block: clamp(84px, 12vh, 130px) clamp(28px, 5vh, 54px);
  pointer-events: none;
}
/* En modo loop el titular se apoya abajo: arriba manda la imagen. */
.hero__ui--loop{
  align-content: end;
  gap: clamp(24px, 5vh, 48px);
  padding-block: clamp(84px, 12vh, 130px) clamp(24px, 4vh, 44px);
}
.hero__acciones{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin-top: clamp(22px, 3.5vh, 34px);
}
.hero__ver{
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 14px 4px;
  border-bottom: 1px solid var(--line-lit);
  transition: color var(--d-fast) ease, border-color var(--d-fast) ease;
}
.hero__ver:hover{ color: var(--lima); border-color: var(--lima); }
.hero__ui > .wrap{ width: 100%; }
.hero__ui a, .hero__ui button{ pointer-events: auto; }

.hero__copy h1{
  /* escala propia del hero: tiene que entrar en dos líneas dentro de 100vh */
  font-size: clamp(2.4rem, 1.2rem + 4.2vw, 5rem);
  line-height: .94;
  letter-spacing: -.045em;
  margin-bottom: 20px;
  max-width: 13em;      /* em = tamaño del propio titular, no del body */
}
.hero__copy .lede{ max-width: 46ch; }
.hero__kicker{ color: var(--ink-2); }

/* --- rótulos de capa que van cambiando (Relats) ---------------------------- */
.hero__layers{
  position: relative;
  min-height: 118px;
  display: flex; align-items: flex-end;
}
.hero__layer{
  position: absolute; inset: auto 0 0 0;
  opacity: 0; transform: translateY(14px);
  will-change: opacity, transform;
}
.hero__layer.is-on{ opacity: 1; transform: none; }
.hero__layer .n{
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .22em; text-transform: uppercase; color: var(--lima);
  display: block; margin-bottom: 6px;
}
.hero__layer h2{
  font-size: var(--t-2); margin-bottom: 4px;
}
.hero__layer p{ color: var(--ink-2); font-size: var(--t--1); max-width: 44ch; margin: 0; }

/* --- pie del hero: progreso de capas + hint + CTA final -------------------- */
.hero__foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  justify-content: space-between;
}
.hero__steps{ display: flex; gap: 6px; align-items: center; }
.hero__steps i{
  display: block; width: 30px; height: 2px; border-radius: 2px;
  background: var(--line-lit);
  transition: background var(--d-mid) var(--e-out), width var(--d-mid) var(--e-out);
}
.hero__steps i.is-on{ background: var(--lima); width: 44px; }

/* Cuando el video ya nombra cada rubro, en vez de los seis pasos va una
   barra fina de avance. */
.hero__barra{
  position: relative;
  width: clamp(120px, 22vw, 260px); height: 2px;
  background: var(--line-lit); border-radius: 2px; overflow: hidden;
}
.hero__barra i{
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--lima), var(--azul-lit));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Sin rótulos, el bloque central solo tiene que sostener el cierre. */
.hero__layers--vacio{ min-height: 96px; }

.hero__hint{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hero__hint i{
  width: 1px; height: 26px; background: linear-gradient(180deg, var(--lima), transparent);
  animation: hintDrop 1.8s var(--e-io) infinite;
}
@keyframes hintDrop{
  0%   { transform: scaleY(0); transform-origin: 0 0; }
  45%  { transform: scaleY(1); transform-origin: 0 0; }
  55%  { transform: scaleY(1); transform-origin: 0 100%; }
  100% { transform: scaleY(0); transform-origin: 0 100%; }
}

.hero__end{
  position: absolute; inset: auto 0 0 0;
  opacity: 0; transform: translateY(16px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
}
.hero__end h2{ font-size: var(--t-3); }

@media (max-width: 720px){
  .hero__veil{
    background:
      linear-gradient(180deg,
        rgba(5,6,8,.94) 0%, rgba(5,6,8,.80) 22%, rgba(5,6,8,.30) 45%,
        rgba(5,6,8,.55) 72%, rgba(5,6,8,.97) 100%);
  }
  .hero__layers{ min-height: 150px; }
  .hero__foot{ gap: 14px; }
  .hero__copy .lede{ font-size: var(--t-0); }
}

/* Pantalla baja: celular apaisado, notebooks de 1366x600, ventanas partidas.
   El hero tiene que entrar entero igual: se achica el tipo y se sacan las
   piezas accesorias antes que dejar que desborde. */
@media (max-height: 560px){
  .hero__ui{ padding-block: 64px 18px; }
  .hero__copy h1{ font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem); margin-bottom: 10px; }
  .hero__copy .lede{ font-size: var(--t--1); }
  .hero__layers{ min-height: 84px; }
  .hero__layer h2{ font-size: var(--t-1); }
  .hero__layer p{ display: none; }
  .hero__layer .n{ margin-bottom: 3px; }
  .hero__hint{ display: none; }
  .hero__end h2{ font-size: var(--t-2); }
}

/* --- maqueta SVG: capas del montaje --------------------------------------- */
#maqueta .lay{
  opacity: 0;
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}
#maqueta .lay.vis{ opacity: 1; transform: none !important; }
#maqueta #l-truss{ transform: translateY(-40px); }
#maqueta #l-led  { transform: scale(.88); transform-origin: 400px 254px; }
#maqueta #l-snd  { transform: translateY(-30px); }
#maqueta #l-lux  { transform: translateY(-16px); }
#maqueta #l-crowd{ transform: translateY(26px); }


/* =============================================================================
   02 · PRUEBA EN 5 SEGUNDOS
   ============================================================================= */

.proof{ overflow: hidden; }

.proof__scene{
  /* El radio y el alto de la tarjeta viven acá para que el alto de la escena
     salga de ellos y no de un cálculo a ojo con vw. Así la sección nunca
     queda más corta que el anillo, en ningún ancho. */
  --ring-r: clamp(112px, 32vw, 420px);
  --card-h: 250px;

  position: relative;
  height: calc(var(--ring-r) * 2 + var(--card-h) + 40px);
  display: grid; place-items: center;
  margin-block: clamp(24px, 5vh, 56px);
}

/* --- las palabras gigantes, en dos capas --------------------------------- */
.proof__bg{
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  pointer-events: none; user-select: none;
  font-family: var(--f-display); font-weight: 800;
  /* Grande de verdad: puede sangrar por los costados, la sección recorta. */
  font-size: min(17vw, 15rem);
  letter-spacing: -.055em; line-height: .82;
  white-space: nowrap;
}
.proof__bg span{ display: block; }

/* La capa de atrás lleva todas las palabras menos la última. */
.proof__bg--atras{ z-index: 0; color: #1A2029; }

/* La de adelante lleva solo la última, y pasa por encima de las fotos. */
.proof__bg--delante{ z-index: 3; color: var(--azul); }

/* Los huecos mantienen el renglón para que las dos capas calcen exacto. */
.proof__bg .es-hueco{ visibility: hidden; }

/* Círculo guía, apenas insinuado */
.proof__aro{
  position: absolute; z-index: 1;
  width: calc(var(--aro, 300px) * 2); height: calc(var(--aro, 300px) * 2);
  border: 1px solid rgba(52,93,168,.16);
  border-radius: 50%;
  pointer-events: none;
}

/* --- el anillo de fotos -------------------------------------------------- */
.ring{
  /* El radio lo hereda de .proof__scene. Vive en CSS y no en JS para que el
     anillo se adapte solo a cualquier ancho sin esperar un resize. */
  position: absolute; z-index: 2;
  width: 1px; height: 1px;
  will-change: transform;
}

/* La tarjeta SOLO se ubica sobre el círculo. Sin transición: si la tuviera,
   al cambiar el ancho la animación arrancaría desde el radio anterior y las
   tarjetas quedarían clavadas ahí. */
.ring__card{
  position: absolute;
  width: 190px; height: 250px;
  margin: -125px 0 0 -95px;
  transform: rotate(var(--a, 0deg)) translateY(calc(var(--ring-r) * -1));
}

/* El marco blanco tipo polaroid, y la ampliación del hover. Acá sí va la
   transición: medio segundo largo con salida suave, para que se sienta como
   una foto que alguien levanta y no como un salto. */
.ring__marco{
  position: absolute; inset: 0;
  padding: 10px 10px 24px;
  background: #F4F5F7;
  border-radius: 2px;
  box-shadow: 0 18px 42px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  transform: scale(var(--esc, 1));
  transition: transform .62s cubic-bezier(.22, 1, .28, 1),
              box-shadow .62s cubic-bezier(.22, 1, .28, 1);
  will-change: transform;
}

/* Al pasar el mouse la foto se agranda y el anillo se frena (eso lo hace JS).
   La escala entra por --esc, que el transform inline ya deja preparada. */
@media (hover: hover) and (pointer: fine){
  .ring__card:hover{ --esc: 1.55; z-index: 9; }
  .ring__card:hover .ring__marco{
    box-shadow: 0 46px 100px rgba(0,0,0,.78), 0 4px 16px rgba(0,0,0,.5);
  }
  .ring__card:hover .ring__pie{ opacity: 1; }
  /* mientras se mira una foto, la palabra de adelante se corre del medio */
  .proof__scene:has(.ring__card:hover) .proof__bg--delante{ opacity: .28; }
}
.ring{ transition: none; }
.proof__bg--delante{ transition: opacity .5s var(--e-out); }

/* Rótulo en el margen blanco de la polaroid. Aparece al agrandar. */
.ring__pie{
  position: absolute; left: 10px; right: 10px; bottom: 7px;
  font-family: var(--f-mono); font-size: .5rem;
  letter-spacing: .04em; text-transform: uppercase;
  color: rgba(10,11,13,.75);
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .4s .12s var(--e-out);
}
.ring__foto{
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--panel);
}
.ring__foto img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* El número va en el margen blanco, girado, como en la referencia. */
.ring__card b{
  position: absolute; left: 0; bottom: 28px;
  transform: rotate(-90deg); transform-origin: 0 0;
  font-family: var(--f-mono); font-weight: 500;
  font-size: .66rem; letter-spacing: .16em;
  color: rgba(10,11,13,.5);
}

@media (max-width: 1100px){
  .proof__scene{ --card-h: 205px; }
  .ring__card{ width: 155px; height: 205px; margin: -102px 0 0 -77px; }
  .ring__marco{ padding: 9px 9px 21px; }
  .ring__card b{ font-size: .6rem; bottom: 29px; }
}
@media (max-width: 820px){
  .proof__scene{ --card-h: 158px; --ring-r: clamp(112px, 30vw, 300px); }
  .ring__card{ width: 120px; height: 158px; margin: -79px 0 0 -60px; }
  .ring__marco{ padding: 7px 7px 16px; }
  .ring__card b{ font-size: .54rem; bottom: 23px; }
  .ring__pie{ display: none; }
}
@media (max-width: 560px){
  /* Ocho tarjetas de 84 px: la circunferencia da 735 px y ocupan 672, con
     aire. Con doce de 96 se pisaban un 57% y no se distinguía ninguna. */
  .proof__scene{ --card-h: 110px; --ring-r: clamp(96px, 30vw, 200px); }
  .ring__card{ width: 84px; height: 110px; margin: -55px 0 0 -42px; }
  .ring__marco{ padding: 5px 5px 12px; }
  .ring__card b{ font-size: .46rem; bottom: 16px; }
  .proof__bg{ font-size: min(21vw, 6rem); }
}

/* Pantalla baja: el anillo no puede empujar la página. */
@media (max-height: 620px) and (min-width: 821px){
  .proof__scene{ --ring-r: clamp(112px, 26vh, 300px); --card-h: 168px; }
  .ring__card{ width: 128px; height: 168px; margin: -84px 0 0 -64px; }
  .ring__marco{ padding: 7px 7px 17px; }
}

/* Lo que va incluido en todos los eventos. Reemplaza a las métricas de
   trayectoria: 3R está arrancando y los números duros juegan en contra. */
.difs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin-top: clamp(24px, 4vh, 44px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.dif{
  background: var(--ground);
  padding: 28px 24px 30px;
  position: relative;
}
.dif::before{
  content: "";
  position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: var(--lima);
  transition: width .9s var(--e-out);
}
.dif.is-in::before{ width: 100%; }
.dif h3{
  font-size: var(--t-1);
  line-height: 1.15;
  margin-bottom: 10px;
  color: #fff;
}
.dif p{
  margin: 0;
  font-size: var(--t--1);
  color: var(--ink-2);
}

/* Prueba social. Vive acá desde que se sacó "Quiénes somos". */
.testis{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 32px;
}
.testi{
  margin: 0;
  padding: 24px 24px 22px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--azul);
  border-radius: var(--r-sm);
  background: var(--panel);
}
.testi p{ font-size: var(--t--1); color: var(--ink); margin-bottom: 12px; }
.testi cite{
  font-style: normal;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}


/* =============================================================================
   03 · ¿QUÉ TIPO DE EVENTO TENÉS?  (la puerta de calificación)
   ============================================================================= */

.gates__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 5vh, 52px);
}

.gate{
  position: relative;
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 28px 26px 26px;
  min-height: 260px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--d-mid) var(--e-out),
              background var(--d-mid) var(--e-out),
              transform var(--d-mid) var(--e-out);
}
.gate::before{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 110%, var(--azul-glow), transparent 70%);
  opacity: 0; transition: opacity var(--d-mid) var(--e-out);
}
.gate > *{ position: relative; }
.gate:hover{ border-color: var(--line-lit); transform: translateY(-3px); }
.gate:hover::before{ opacity: .7; }

.gate[aria-pressed="true"]{
  border-color: var(--lima);
  background: var(--panel-2);
}
.gate[aria-pressed="true"]::before{
  opacity: 1;
  background: radial-gradient(90% 70% at 50% 110%, var(--lima-glow), transparent 70%);
}

.gate__n{
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.gate[aria-pressed="true"] .gate__n{ color: var(--lima); }
.gate h3{ font-size: var(--t-2); }
.gate__ej{ font-size: var(--t--1); color: var(--muted); margin: 0; }
.gate__txt{
  font-size: var(--t--1); color: var(--ink-2); margin: 0;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--e-out), opacity .4s var(--e-out), margin .4s var(--e-out);
}
.gate[aria-pressed="true"] .gate__txt{ max-height: 260px; opacity: 1; margin-top: 4px; }

.gate__rubros{
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px;
}
.gate__rubros i{
  font-style: normal;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px; border-radius: 100px;
  border: 1px solid var(--line-lit);
}
.gate[aria-pressed="true"] .gate__rubros i{ border-color: var(--lima-dim); color: var(--lima); }

.gates__note{
  margin-top: 22px;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  min-height: 1.4em;
}


/* =============================================================================
   04 · CÓMO TRABAJAMOS
   ============================================================================= */

.process__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0;
  margin-top: clamp(30px, 5vh, 56px);
  border-top: 1px solid var(--line);
}
.step{
  position: relative;
  padding: 30px 26px 34px 0;
  border-right: 1px solid var(--line-soft);
}
.step:last-child{ border-right: 0; }
.step::before{
  content: "";
  position: absolute; top: -1px; left: 0; width: 0; height: 2px;
  background: var(--lima);
  transition: width 1s var(--e-out);
}
.step.is-in::before{ width: 100%; }
.step b{
  display: block;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .2em; color: var(--lima); margin-bottom: 14px;
}
.step h3{ font-size: var(--t-2); margin-bottom: 10px; }
.step p{ font-size: var(--t--1); color: var(--ink-2); margin: 0; max-width: 34ch; }

.quote-method{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
  margin-top: clamp(40px, 7vh, 80px);
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--lima);
  border-radius: var(--r-md);
  background: var(--panel);
}
.quote-method h3{ font-size: var(--t-3); margin-bottom: 12px; }
.quote-method ol{
  margin: 0; padding: 0; list-style: none;
  counter-reset: qm;
}
.quote-method li{
  counter-increment: qm;
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--ink-2);
  font-size: var(--t--1);
}
.quote-method li::before{
  content: counter(qm, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--f-mono); font-size: var(--t--2);
  color: var(--lima); letter-spacing: .1em;
}
.quote-method .nota{
  margin-top: 20px; padding-top: 16px;
  border-top: 1px dashed var(--line);
  color: var(--muted); font-size: var(--t--1);
}
@media (max-width: 780px){
  .quote-method{ grid-template-columns: 1fr; }
  .step{ border-right: 0; border-bottom: 1px solid var(--line-soft); padding-right: 0; }
}


/* =============================================================================
   05 · CASOS  (el mosaico que se abre)
   ============================================================================= */

/* Casos es el único bloque a sangre de toda la página: acá no va el panel
   redondeado, porque la foto ocupa hasta el borde y le comería las esquinas. */
.mosaic.panel{
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}

.mosaic{
  /* El alto de la franja de la frase vive acá porque lo necesitan dos reglas:
     la franja misma y el rótulo del destacado, que tiene que quedar por
     encima. Si se toca una sola, el rótulo se mete abajo de la frase. */
  --frase-tapa: clamp(64px, 11vh, 130px);
  --frase-pie:  clamp(10px, 1.6vh, 18px);
  --frase-alto: calc(var(--frase-tapa) + var(--frase-pie)
                     + clamp(1.1rem, .6rem + 1.6vw, 2.1rem) * 1.1);
}

.mosaic__track{ height: 300vh; position: relative; }
.mosaic__sticky{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: grid; place-items: stretch;
  padding: 0;                 /* a sangre: la foto cubre toda la sección */
  overflow: hidden;
}
.mosaic__grid{
  /* Ocupa la pantalla entera: primero una sola foto a sangre, después las
     nueve juntas cubriendo lo mismo, separadas apenas por una línea. */
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 5px;
}
.tile{
  position: relative;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid rgba(52,93,168,.22);
  background: var(--panel);
  opacity: var(--p, 0);
  transform: scale(calc(.9 + var(--p, 0) * .1));
  will-change: transform, opacity;
}
.tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile figcaption{
  position: absolute; left: 10px; right: 10px; bottom: 9px;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(237,239,242,.82);
  text-shadow: 0 1px 10px rgba(5,6,8,.95), 0 0 3px rgba(5,6,8,.9);
  z-index: 2;
}
.tile figcaption b{ font-weight: 400; }
.tile figcaption i{ font-style: normal; }
.tile figcaption i::before{ content: " · "; }

/* el destacado arranca ocupando toda la escena y se achica hasta su celda */
.tile--hero{
  grid-area: 2 / 2 / 3 / 3;
  z-index: 4;
  opacity: 1;
  /* 3,1 alcanza para tapar la grilla entera en cualquier proporción de
     pantalla: hacen falta 3 más lo que suman los dos huecos. */
  transform: scale(calc(1 + (1 - var(--p, 0)) * 2.1));
  border-color: rgba(181,205,2,.4);
}
.tile--hero .tile__cap{
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px;
  /* El rótulo se corre solo para no meterse abajo de la frase del pie.
     Con el mosaico cerrado la celda está escalada 3,1 veces, así que lo de
     acá se ve tres veces más grande: se divide por eso para razonar en
     píxeles de pantalla. Los 60 son el aire entre el rótulo y la frase. */
  padding: 6px 8px calc((var(--frase-alto) + 60px) / 3.1);
  background: linear-gradient(0deg,
    rgba(5,6,8,0.8) 0%,
    rgba(5,6,8,0.59) 19%,
    rgba(5,6,8,0.433) 34%,
    rgba(5,6,8,0.306) 47%,
    rgba(5,6,8,0.222) 56.5%,
    rgba(5,6,8,0.155) 65%,
    rgba(5,6,8,0.101) 73%,
    rgba(5,6,8,0.06) 80.2%,
    rgba(5,6,8,0.034) 86.1%,
    rgba(5,6,8,0.017) 91%,
    rgba(5,6,8,0.006) 95.2%,
    rgba(5,6,8,0.002) 98.2%,
    rgba(5,6,8,0.0) 100%);
  opacity: calc(1 - var(--p, 0) * 1.7);
}
.tile--hero .tile__cap i{
  font-style: normal;
  font-family: var(--f-mono); font-size: .3rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--lima);
}
.tile--hero .tile__cap b{
  font-family: var(--f-display); font-weight: 800;
  font-size: .62rem; line-height: 1.08; letter-spacing: -.01em; color: #fff;
}

/* La frase de 3R, corriendo al pie de las fotos. Va dentro del sticky, así
   que queda pegada a las imágenes y la franja lima después pasa por encima
   de las dos cosas juntas. */
.mosaic__frase{
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 6; pointer-events: none;
  /* Alto de sobra para que el velo tenga recorrido: con 65 px la caída se
     comprimía y el degradado se leía como una banda con borde. */
  padding-block: var(--frase-tapa) var(--frase-pie);
  background: linear-gradient(0deg,
    rgba(5,6,8,0.95) 0%,
    rgba(5,6,8,0.701) 19%,
    rgba(5,6,8,0.514) 34%,
    rgba(5,6,8,0.363) 47%,
    rgba(5,6,8,0.264) 56.5%,
    rgba(5,6,8,0.184) 65%,
    rgba(5,6,8,0.12) 73%,
    rgba(5,6,8,0.071) 80.2%,
    rgba(5,6,8,0.04) 86.1%,
    rgba(5,6,8,0.02) 91%,
    rgba(5,6,8,0.008) 95.2%,
    rgba(5,6,8,0.002) 98.2%,
    rgba(5,6,8,0.0) 100%);
}
.mosaic__frase .mq__track span{
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.1rem, .6rem + 1.6vw, 2.1rem);
  letter-spacing: -.02em; line-height: 1.1;
  color: rgba(237,239,242,.82);
  padding-right: .3em;
  white-space: nowrap;
}
.mosaic__frase .mq__track span em{ color: var(--lima); }

.mosaic__head{
  position: absolute; top: 0; left: 0; right: 0;
  /* El padding horizontal va explícito: el shorthand con 0 pisaba el
     padding-inline que trae .wrap y el título quedaba contra el filo. */
  padding: clamp(72px, 12vh, 128px) var(--gut) clamp(28px, 5vh, 54px);
  z-index: 6; pointer-events: none;
  /* velo para que el título se lea sobre cualquier foto */
  background: linear-gradient(180deg,
    rgba(5,6,8,0.9) 0%,
    rgba(5,6,8,0.664) 19%,
    rgba(5,6,8,0.487) 34%,
    rgba(5,6,8,0.344) 47%,
    rgba(5,6,8,0.25) 56.5%,
    rgba(5,6,8,0.175) 65%,
    rgba(5,6,8,0.113) 73%,
    rgba(5,6,8,0.068) 80.2%,
    rgba(5,6,8,0.038) 86.1%,
    rgba(5,6,8,0.019) 91%,
    rgba(5,6,8,0.007) 95.2%,
    rgba(5,6,8,0.002) 98.2%,
    rgba(5,6,8,0.0) 100%);
}
.mosaic__head .kicker{ margin-bottom: 6px; }
.mosaic__head h2{ font-size: var(--t-3); }

@media (max-width: 760px){
  .mosaic__grid{ gap: 4px; }
  /* En celda de 127 px de ancho el rótulo ocupaba tres renglones, se salía y
     la última fila chocaba con la frase que corre al pie. A ese tamaño
     aportan poco: manda la foto. El único que queda es el del destacado,
     que se ve cuando la foto ocupa la pantalla entera. */
  .tile figcaption{ display: none; }


}
@media (max-height: 560px){
  .mosaic__head{ padding-top: 56px; padding-bottom: 16px; }
  .mosaic__head h2{ font-size: var(--t-2); }
}


/* =============================================================================
   07 · PREGUNTAS FRECUENTES · última sección de contenido
   ============================================================================= */

.faq__list{
  margin-top: clamp(24px, 4vh, 44px);
  border-top: 1px solid var(--line);
  max-width: 900px;
}
.qa{ border-bottom: 1px solid var(--line-soft); }
.qa__q{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--t-1); letter-spacing: -.015em; line-height: 1.25;
  color: var(--ink);
  transition: color var(--d-fast) ease;
}
.qa__q:hover{ color: var(--lima); }
.qa__ico{
  position: relative; flex: none;
  width: 16px; height: 16px;
}
.qa__ico::before, .qa__ico::after{
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform var(--d-mid) var(--e-out);
}
.qa__ico::after{ transform: rotate(90deg); }
.qa[open] .qa__ico::after{ transform: rotate(0); }
.qa[open] .qa__q{ color: var(--lima); }

.qa__a{
  overflow: hidden;
  height: 0;
}
.qa__a > div{ padding: 0 0 24px; max-width: 62ch; color: var(--ink-2); font-size: var(--t--1); }


/* =============================================================================
   06 · CIERRE Y FORMULARIO
   ============================================================================= */

.form__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin-top: clamp(26px, 4vh, 46px);
  max-width: 860px;
}
.field{ display: flex; flex-direction: column; gap: 7px; }
.field--full{ grid-column: 1 / -1; }
.field > label,
.field > .field__ttl{
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.field__help{
  font-family: var(--f-body); font-size: var(--t--1);
  letter-spacing: 0; text-transform: none; color: var(--lima-dim);
}
.field input, .field select{
  width: 100%;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color var(--d-fast) ease, background var(--d-fast) ease;
}
.field input::placeholder{ color: var(--muted-2); }
.field input:focus, .field select:focus{
  outline: none; border-color: var(--lima); background: var(--panel-2);
}
.field select{ appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(.7); cursor: pointer; }

.checks{ display: flex; flex-wrap: wrap; gap: 8px; }
.checks label{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 100px;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--d-fast) ease, color var(--d-fast) ease;
}
.checks label:hover{ border-color: var(--line-lit); color: var(--ink); }
.checks input{ position: absolute; opacity: 0; width: 0; height: 0; }
.checks label i{
  width: 9px; height: 9px; border-radius: 2px;
  border: 1px solid var(--line-lit);
  transition: background var(--d-fast) ease, border-color var(--d-fast) ease;
}
.checks input:checked + i{ background: var(--lima); border-color: var(--lima); }
.checks label:has(input:checked){ border-color: var(--lima); color: var(--lima); }
.checks input:focus-visible + i{ outline: 2px solid var(--lima); outline-offset: 3px; }

.form__foot{
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: 6px;
}
.form__nota{ margin: 0; font-size: var(--t--1); color: var(--muted); }
.form__error{
  grid-column: 1 / -1;
  margin: 0; color: var(--alerta); font-size: var(--t--1);
  min-height: 1.2em;
}

@media (max-width: 680px){
  .form__grid{ grid-template-columns: 1fr; }
}

/* --- la franja lima, que sube por encima del mosaico (Scout + WMF) -------- */
.closer{ position: relative; }

.closer__over{
  position: relative;
  /* z-index 1, igual que los paneles: la sección que viene después sube por
     encima de la franja. Con 3 le comía los primeros 40 px al formulario. */
  z-index: 1;
  /* El margen negativo la mete adentro del último tramo del mosaico: sube
     por encima de las fotos y de la frase mientras el mosaico sigue clavado. */
  /* El margen negativo es exactamente una pantalla: así el lima termina de
     tapar el mosaico justo cuando el mosaico se despega. Un valor menor
     rompe el efecto (el mosaico se va antes de que el lima llegue). */
  margin-top: -100vh;
  margin-top: -100svh;
  /* Alto de más para que, una vez que tapó todo, el botón quede solo en
     pantalla un rato antes de que suba el formulario. */
  min-height: 140vh; min-height: 140svh;
  background: var(--lima);
  color: #0A0B0D;
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  display: grid; place-items: center;
  overflow: hidden;
}

/* La línea de palabras clave es la capa de fondo: el botón va encima. */
.closer__mq{
  position: absolute; inset: 0;
  display: grid; align-content: center;
  z-index: 1;
}
.closer__mq .mq__track span{ color: rgba(255,255,255,.72); }
.closer__mq .mq__track span em{ color: rgba(255,255,255,.4); }

.mq{
  overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.mq__track{ display: inline-flex; will-change: transform; }
.mq__track span{
  font-family: var(--f-display); font-weight: 800;
  /* Enorme: es el fondo sobre el que se apoya el botón, no una etiqueta. */
  font-size: clamp(4.5rem, 1rem + 15vw, 17rem);
  letter-spacing: -.045em; line-height: .95;
  color: #0A0B0D;
  padding-right: .28em;
  white-space: nowrap;
}
.mq__track span em{ color: rgba(10,11,13,.32); }

.closer__mid{
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; padding-inline: var(--gut);
}
.closer__titulo{
  /* Solo en pantallas chicas: en escritorio la franja es el botón sobre las
     palabras grandes, como la referencia. */
  display: none;
  margin: 0 0 4px;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 2.2rem);
  line-height: 1.08;
  color: #0A0B0D;
  max-width: 16ch;
}
.closer__mid .cta{
  font-size: var(--t--1); padding: 22px 38px;
  box-shadow: 0 18px 50px -18px rgba(10,11,13,.85);
}
.closer__nota{
  margin: 0;
  font-family: var(--f-mono); font-size: var(--t--2);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(10,11,13,.72);
  text-shadow: 0 1px 12px rgba(181,205,2,.9);
}
.closer__wa-falta{
  border-color: rgba(10,11,13,.45);
  color: rgba(10,11,13,.8);
  background: repeating-linear-gradient(45deg, rgba(10,11,13,.06) 0 8px, transparent 8px 16px);
}
.closer__wa-falta::before{ color: #0A0B0D; }


/* =============================================================================
   GRANO — textura sutil sobre todo el sitio
   ============================================================================= */

.grain{
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  opacity: .55;
}


/* --- La franja lima en pantallas chicas -------------------------------------
   En escritorio el botón se apoya sobre las palabras gigantes, como la
   referencia. En una pantalla de 390 eso no funciona: una sola palabra medía
   700 px, se leían letras sueltas y el bloque era una pantalla y media de
   lima plano con un botón perdido en el medio.

   Acá la línea de palabras deja de ser capa de fondo y pasa a ser una franja
   más, debajo del bloque. El contenido se apila compacto y alineado a la
   izquierda, como el resto de la página. --------------------------------- */
@media (max-width: 760px){
  .closer__over{
    /* 106 y no 100: las 6 de más son lo que la franja sobresale del mosaico,
       que es lo que la hace verse subir por encima de las fotos. Por debajo
       de 100 se rompe ese mecanismo y la franja aparece de golpe. */
    min-height: 106vh; min-height: 106svh;
    display: flex; flex-direction: column; justify-content: center;
    gap: clamp(26px, 5vh, 44px);
  }
  .closer__titulo{ display: block; }
  .closer__mid{
    align-items: flex-start;
    text-align: left;
    gap: 18px;
    width: 100%;
  }
  .closer__mid .cta{ padding: 19px 28px; }
  .closer__nota{ text-align: left; max-width: 24ch; line-height: 1.7; }

  /* De capa de fondo a franja al pie del bloque: el titular y el botón
     quedan en el centro y las palabras corren por abajo, sin cruzarse. */
  .closer__mq{
    position: absolute;
    inset: auto 0 0 0;
    display: block;
    align-content: initial;
    padding: 0 0 clamp(22px, 4vh, 40px);
  }
  .closer__mq .mq__track span{
    font-size: clamp(2.1rem, 1rem + 5.4vw, 3.2rem);
    letter-spacing: -.03em;
    color: rgba(10,11,13,.28);
  }
  .closer__mq .mq__track span em{ color: rgba(10,11,13,.16); }
}