/* ==========================================================================
   López Poletti — Landing captación de propietarios
   Paleta: #000000 · #4F4D4C · #D1D1D1 · #FD8884 · #FDA9A5
   ========================================================================== */

:root{
  --ink:#000000;
  --graphite:#4F4D4C;
  --silver:#D1D1D1;
  --coral:#FD8884;
  --coral-soft:#FDA9A5;

  --paper:#FFFFFF;
  --mist:#F5F5F5;              /* tinte claro de --silver */
  --line:#E4E4E4;
  --line-dark:rgba(209,209,209,.2);
  --muted-light:rgba(255,255,255,.62);

  --wrap:1180px;
  --gut:clamp(20px,5vw,48px);
  --sect:clamp(64px,9vw,120px);
  --r:4px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:clamp(15px,1.05vw,16.5px);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
summary::-webkit-details-marker{display:none}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip-link:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sect);position:relative}
section[id]{scroll-margin-top:clamp(60px,8vw,80px)}
.section--mist{background:var(--mist)}
.section--dark{background:var(--ink);color:#fff}
.center{text-align:center}

/* ---------- Tipografía ---------- */
.h2{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.9rem,4.8vw,3.5rem);line-height:1;
  letter-spacing:-.035em;margin:0 0 .5em;text-wrap:balance;
}
.eyebrow{
  font-family:'Archivo',sans-serif;font-size:.688rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);
  margin:0 0 1.3em;display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--coral);flex:none}
.eyebrow--light{color:var(--muted-light)}
.lede{font-size:clamp(1rem,1.3vw,1.13rem);line-height:1.58}
.head{max-width:700px;margin-bottom:clamp(32px,5vw,56px)}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}
.head__lede{color:var(--graphite);max-width:52ch;margin:0}
.section--dark .head__lede{color:var(--muted-light)}

/* ---------- Botones ---------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.875rem;
  padding:.95em 1.6em;border:1px solid var(--bd);border-radius:100px;
  background:var(--bg);color:var(--fg);cursor:pointer;text-align:center;
  transition:transform .3s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--solid:hover{--bg:var(--coral);--bd:var(--coral);--fg:var(--ink)}
.btn--coral{--bg:var(--coral);--fg:var(--ink);--bd:var(--coral)}
.btn--coral:hover{--bg:var(--coral-soft);--bd:var(--coral-soft)}
.btn--ghost{--bg:transparent;--fg:currentColor;--bd:currentColor}
.btn--ghost:hover{--bg:var(--coral);--fg:var(--ink);--bd:var(--coral)}
.btn--lg{padding:1.08em 2em;font-size:.938rem}
.btn--sm{padding:.68em 1.15em;font-size:.813rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;pointer-events:none}

.link-arrow{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.875rem;
  border-bottom:1px solid var(--coral);padding-bottom:2px;
  display:inline-flex;gap:.4em;transition:color .25s;
}
.link-arrow::after{content:"→";transition:transform .3s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .35s var(--ease),box-shadow .35s,transform .35s var(--ease);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(12px,1.8vw,18px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav__logo{flex:none;position:relative;display:block}
.nav__logo-img{height:clamp(20px,2.2vw,25px);width:auto;transition:opacity .35s,filter .35s}
/* La sombra es para despegarlo de la foto del hero, pero 4px de desenfoque
   sobre un logo de 20px era un halo casi tan grande como el logo: se veía
   sucio. Ahora es más cerrada y un poco más oscura: separa igual y no ensucia. */
.nav__logo-img--light{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.6))}
.nav__logo-img--dark{position:absolute;inset:0;opacity:0}

/* Ojo con esto, que ya se rompió una vez y se veía borroso:

   Arriba hay DOS logos, uno encima del otro (el blanco para la foto del hero y
   el oscuro para cuando la barra se pone blanca). Son exactamente el mismo
   dibujo, sólo cambia el color.

   Antes, al scrollear, el blanco se desvanecía mientras el oscuro aparecía. En
   el medio de esa transición los dos quedaban a media transparencia, y dos
   dibujos iguales medio transparentes uno arriba del otro no se suman: se ven
   grises y desdibujados. Eso era el "logo borroso".

   La solución es que el blanco NUNCA se desvanezca. Se queda entero abajo
   haciendo de base sólida, y el oscuro aparece encima. Así el logo siempre
   tiene el borde nítido y lo único que cambia es el color.

   Lo único que sí se apaga es la sombra del blanco (a rgba(...,0), no a
   "none", para que se apague de a poco), porque sobre la barra blanca esa
   sombra quedaba como una mancha sucia debajo del logo oscuro. */
.nav.is-stuck .nav__logo-img--light{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0))}
.nav.is-stuck .nav__logo-img--dark{opacity:1}
.nav__cta{--bg:#fff;--fg:var(--ink);--bd:#fff}
.nav__cta:hover{--bg:var(--coral);--bd:var(--coral)}
.nav.is-stuck{background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav.is-stuck .nav__cta{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
/* Acá vivía .nav.is-hidden, que subía la barra fuera de pantalla al
   scrollear para abajo. Se sacó a propósito: el botón "Informe gratis"
   tiene que estar siempre a mano. */

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(100px,15vh,140px) clamp(80px,12vh,110px);
  color:#fff;overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* La foto es apaisada y la pantalla del celular es vertical: para llenarla, el
   navegador la agranda y se come los costados. Centrada quedaba justo la
   silueta de espaldas del medio, que no se entiende qué es. Corriéndola un
   poco a la derecha entran las dos personas enfrentadas de la mesa, que es
   lo que cuenta la escena.
   Sólo hasta 800px: de ahí para arriba casi no hay recorte (10-20px) y la
   foto ya se ve entera, así que no hace falta tocar nada. */
@media (max-width:800px){
  .hero__media img{object-position:60% 38%}
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.35) 68%,rgba(0,0,0,.6) 100%);
}
.hero__inner{position:relative;z-index:1;max-width:var(--wrap);margin-inline:auto;width:100%;padding-inline:var(--gut)}
/* Dos líneas: "Publicar" arriba y "no es vender." abajo, bien pegadas.
   La medida la manda el ancho de pantalla: la línea larga tiene que entrar
   entera aun en el celular más chico, por eso el tope de abajo es 11.2vw. */
.hero__title{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(2.6rem,13.8vw,6.4rem);line-height:.96;
  letter-spacing:-.04em;margin:0 0 .38em;
}
/* Ahora la frase de abajo es el mensaje, no una aclaración: va un poco más
   grande y más clara que un párrafo común. */
.hero__lede{
  max-width:44ch;font-size:clamp(1.06rem,1.75vw,1.45rem);line-height:1.35;
  color:rgba(255,255,255,.92);margin:0 0 2em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2.4em}
.hero__trust{
  list-style:none;margin:0;padding:1.3em 0 0;display:flex;flex-wrap:wrap;
  gap:clamp(18px,4vw,50px);border-top:1px solid rgba(255,255,255,.22);
  font-size:.8rem;color:rgba(255,255,255,.68);
}
.hero__trust strong{
  display:block;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:1.3rem;color:#fff;letter-spacing:-.02em;line-height:1.25;
}
.hero__more{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:1;
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.75);
  display:flex;flex-direction:column;align-items:center;gap:.8em;transition:color .25s;
}
.hero__more:hover{color:var(--coral)}
.hero__more::after{content:"";width:1px;height:30px;background:currentColor;animation:pulse 2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.hero__more::after{animation:none}}

/* ---------- Marquee ---------- */
.marquee{background:var(--ink);color:#fff;padding:14px 0;overflow:hidden;white-space:nowrap}
.marquee__track{
  display:inline-flex;align-items:center;gap:20px;animation:slide 40s linear infinite;
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}
.marquee__track i{color:var(--coral);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Bloques desplegables ---------- */
.exp-list{border-top:1px solid var(--line)}
.exp{border-bottom:1px solid var(--line)}
.exp>summary{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);
  padding:clamp(18px,2.4vw,26px) 44px clamp(18px,2.4vw,26px) 0;
  cursor:pointer;list-style:none;position:relative;transition:opacity .2s;
}
.exp>summary:hover{opacity:.62}
.exp>summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 13px no-repeat;
  transform:translateY(-50%);transition:transform .35s var(--ease);
}
.exp[open]>summary::after{transform:translateY(-50%) rotate(135deg)}
.exp__n{
  font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:700;
  color:var(--coral);flex:none;
}
.exp__h{display:flex;flex-direction:column;gap:.15em;min-width:0}
.exp__h strong{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.15rem,2.6vw,1.9rem);letter-spacing:-.025em;line-height:1.08;
}
.exp__h em{font-style:normal;font-size:.813rem;color:var(--graphite)}
.exp__c{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,4vw,56px);
  align-items:center;padding:0 0 clamp(26px,3.4vw,40px);
}
/* La animación de apertura ya no está acá: está toda junta al final del
   archivo, en "APERTURA DE LOS BLOQUES". */
@keyframes fade{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.exp__txt p{margin:0 0 1em;color:var(--graphite)}
.exp__txt p:last-child{margin-bottom:0}
.exp__hi{
  color:var(--ink)!important;font-weight:500;
  border-left:2px solid var(--coral);padding-left:1em;
}
.exp__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.exp__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.exp--feat .exp__n{color:var(--ink);background:var(--coral);padding:.35em .6em;border-radius:100px}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:1.3em 0 0;padding:0}
.tags li{
  font-family:'Archivo',sans-serif;font-size:.75rem;
  padding:.42em .9em;border:1px solid var(--silver);border-radius:100px;color:var(--graphite);
}

@media (max-width:800px){
  .exp__c{grid-template-columns:1fr;gap:20px}
  /* Antes acá había 16/9 y era demasiado apaisado: la foto de Transparencia es
     vertical y la caja se comía más de la mitad. 4/3 es el formato en el que
     están sacadas casi todas, así que el recorte pasa a ser mínimo. */
  .exp__img{order:-1;aspect-ratio:4/3}
}

/* ---------- Galería (Marketing) ---------- */
/* Este bloque no lleva imagen a la derecha: el texto va arriba y la tira
   de miniaturas ocupa todo el ancho. */
.exp__c--ancho{grid-template-columns:1fr;gap:clamp(18px,2.4vw,26px)}
.exp__c--ancho .exp__txt{max-width:62ch}

.galeria{margin:0;min-width:0}
.galeria__pista{
  margin:.8em 0 0;font-size:.75rem;color:var(--graphite);
  font-family:'Archivo',sans-serif;
}
.galeria__rotulo{
  font-family:'Archivo',sans-serif;font-size:.688rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);
  margin:0 0 .9em;display:flex;align-items:center;gap:.8em;
}
.galeria__rotulo::after{content:'';flex:1;height:1px;background:var(--line)}
.galeria--canales{margin-top:clamp(22px,3vw,32px)}

/* Grilla de fotos (Producción y capturas de canal) */
.grilla{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.grilla__item{
  position:relative;display:block;padding:0;border:0;background:var(--muted-light);
  aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;cursor:pointer;
  transition:transform .3s var(--ease);
}
.grilla__item img{width:100%;height:100%;object-fit:cover;display:block}
.grilla__item:hover{transform:translateY(-3px)}
.grilla__item:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
/* Las "anchas" ocupan dos columnas. Cuáles son se decide en script.js, y están
   puestas para que la grilla cierre justa y no sobre un hueco al final. */
.grilla__item--ancho{grid-column:span 2;aspect-ratio:16/9}
.grilla--canales{grid-template-columns:repeat(3,1fr);gap:8px}
/* Las capturas mezclan vertical y horizontal. El encuadre de cada una lo
   define su campo "pos" en script.js, porque cada foto tiene lo importante
   en un lugar distinto. */
.grilla--canales .grilla__item{aspect-ratio:4/3}

/* En el celular esta grilla era el peor recorte de toda la página. Son capturas
   de Instagram y de reels: casi todas son VERTICALES. Metidas de a 3 en fila y
   en cajas apaisadas quedaban de 111x83 px y se perdía entre el 45% y el 59%
   de cada foto (de la de Instagram sólo se veía una banda del medio).
   De a 2 y en cajas verticales pasan a medir ~171x214: se ven casi enteras y
   además se leen, que era el punto de mostrar capturas. */
@media (max-width:800px){
  .grilla--canales{grid-template-columns:repeat(2,1fr)}
  .grilla--canales .grilla__item{aspect-ratio:4/5}
}

/* Carrusel de reels: 3 por slide */
.carru{margin:0;min-width:0}
.carru__vp{
  display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carru__vp::-webkit-scrollbar{display:none}
.carru__slide{
  flex:0 0 100%;scroll-snap-align:start;
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.carru__hueco{
  position:relative;display:grid;place-items:center;
  padding:0;border:1px dashed var(--silver);background:var(--muted-light);
  aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;
  color:var(--silver);
}
.carru__hueco svg{width:26px;height:26px;fill:currentColor;opacity:.55}
.carru__hueco span{
  position:absolute;bottom:8px;left:0;right:0;text-align:center;
  font-family:'Archivo',sans-serif;font-size:.625rem;letter-spacing:.06em;
  color:var(--graphite);opacity:.6;
}
/* Cuando el hueco ya tiene un reel cargado.
   Es una muestra, no un botón: no se toca, no se agranda, no tiene sonido.
   Por eso no lleva cursor de mano, ni hover, ni ícono encima. */
.carru__item{
  position:relative;display:block;background:var(--muted-light);
  aspect-ratio:9/16;border-radius:var(--r);overflow:hidden;
}
.carru__item img,
.carru__item video{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--muted-light);
  pointer-events:none;   /* ni el menú del video ni el arrastrar la imagen */
}

.carru__nav{display:flex;align-items:center;gap:.9em;margin-top:.9em}
.carru__btn{
  width:34px;height:34px;flex:none;border-radius:100px;
  border:1px solid var(--silver);background:transparent;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .25s,background .25s;
}
.carru__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carru__btn:hover{border-color:var(--ink)}
.carru__btn[disabled]{opacity:.3;cursor:default}
.carru__btn[disabled]:hover{border-color:var(--silver)}
.carru__puntos{display:flex;gap:6px}
.carru__punto{
  width:6px;height:6px;padding:0;border:0;border-radius:100px;position:relative;
  background:var(--silver);cursor:pointer;transition:background .25s,width .25s;
}
.carru__punto.is-on{background:var(--coral);width:18px}
/* El puntito se ve de 6px pero se toca en un área de 16x34: con el dedo, un
   botón de 6 píxeles es imposible de acertar. El ::after es invisible y no
   ocupa lugar en el layout, así que la fila de puntos se sigue viendo igual. */
.carru__punto::after{content:"";position:absolute;inset:-14px -5px}

/* En pantalla ancha el carrusel y las capturas conviven lado a lado */
.mkt{display:grid;gap:clamp(22px,3vw,30px)}
@media (min-width:801px){
  .mkt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,3.5vw,48px);align-items:start}
  .galeria--canales{margin-top:0}
  .carru{max-width:480px}
  .grilla{grid-template-columns:repeat(4,1fr);gap:10px}
  .grilla__item--ancho{aspect-ratio:8/3}
  .grilla--canales{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:200;
  background:#000;
  display:none;place-items:center;
  padding:clamp(12px,4vw,40px);
}
.lb.is-on{display:grid;animation:fade .3s var(--ease)}
.lb__view{
  max-width:min(100%,1100px);max-height:100%;
  display:grid;place-items:center;
}
.lb__view img,.lb__view video{
  max-width:100%;max-height:82svh;
  width:auto;height:auto;display:block;
  border-radius:var(--r);background:#000;
}
.lb__btn{
  position:absolute;border:0;background:rgba(255,255,255,.11);
  color:#fff;width:44px;height:44px;border-radius:100px;
  display:grid;place-items:center;cursor:pointer;
  transition:background .25s;
}
.lb__btn:hover{background:rgba(255,255,255,.22)}
.lb__btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb__close{top:14px;right:14px}
.lb__prev{left:14px;top:50%;transform:translateY(-50%)}
.lb__next{right:14px;top:50%;transform:translateY(-50%)}
.lb__count{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-family:'Archivo',sans-serif;font-size:.75rem;
  color:rgba(255,255,255,.65);letter-spacing:.04em;
}
@media (max-width:520px){
  .lb__prev{left:8px}
  .lb__next{right:8px}
  .lb__view img,.lb__view video{max-height:74svh}
}

/* ---------- Ruta de venta ---------- */
.route{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(32px,4vw,48px)}
.route__stages{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line-dark)}
/* El padding lateral no es decorativo: la lista tiene fondo propio (el gris de
   arriba) y sin él la chapita "Etapa 1" y el "3 pasos" quedaban pegados al
   borde del bloque, como si el texto estuviera cortado. */
.route__stages li{
  display:flex;align-items:center;gap:14px;padding:.95em 14px;
  font-family:'Archivo',sans-serif;font-size:.938rem;font-weight:500;
}
.route__stages b{margin-left:auto;font-weight:400;font-size:.8rem;color:var(--muted-light)}
.pill{
  font-family:'Archivo',sans-serif;font-size:.65rem;font-weight:700;
  letter-spacing:.06em;padding:.35em .75em;border-radius:100px;
  color:var(--ink);flex:none;
}
.pill--1{background:var(--graphite);color:#fff}
.pill--2{background:var(--silver)}
.pill--3{background:var(--coral-soft)}
.pill--4{background:var(--coral)}
.pill--5{background:#fff}
@media (max-width:800px){.route{grid-template-columns:1fr;gap:24px}}

/* ---------- Drawer ---------- */
.drawer{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.drawer>summary{
  list-style:none;cursor:pointer;padding:1.2em 0;
  display:flex;align-items:center;gap:.7em;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.938rem;
  transition:color .25s;
}
.drawer>summary:hover{color:var(--coral)}
.drawer>summary::after{
  content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);
}
.drawer[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.drawer__close{display:none}
.drawer[open] .drawer__open{display:none}
.drawer[open] .drawer__close{display:inline}
.drawer__c{padding-bottom:clamp(24px,3.4vw,40px)}
.drawer--light{border-color:var(--line);margin-top:clamp(32px,4vw,52px)}

/* ---------- Pasos ---------- */
.steps{display:grid;gap:0}
.steps__stage{
  display:flex;align-items:center;gap:.9em;margin:2em 0 .4em;
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light);
}
.steps__stage:first-child{margin-top:.6em}
.step{display:flex;gap:clamp(14px,2vw,22px);padding:.85em 0;border-bottom:1px solid var(--line-dark)}
.step__n{font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:700;color:var(--coral);flex:none;padding-top:.3em}
.step h3{font-family:'Archivo',sans-serif;font-size:1rem;font-weight:700;margin:0 0 .2em;letter-spacing:-.015em}
.step p{margin:0;font-size:.875rem;color:var(--muted-light);max-width:64ch}
.steps__quote{
  margin:clamp(28px,4vw,48px) auto 0;max-width:46ch;text-align:center;text-wrap:balance;
  font-family:'Archivo',sans-serif;font-size:clamp(.8rem,1.5vw,.95rem);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.7;
}
.steps__quote::before,.steps__quote::after{color:var(--coral)}
.steps__quote::before{content:"\201C\A0"}
.steps__quote::after{content:"\A0\201D"}

/* ---------- Informe de valuación ---------- */
.offer{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}
.offer__left .h2{font-size:clamp(1.8rem,3.5vw,3.05rem)}
.offer__left .lede{color:var(--graphite);margin:0 0 1.8em}
.offer__left .lede strong{color:var(--ink)}
.offer__meta{display:flex;gap:clamp(26px,5vw,52px);margin-bottom:2em}
.offer__big{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2.1rem,4.4vw,3.2rem);letter-spacing:-.04em;line-height:1}
.offer__lbl{font-size:.75rem;color:var(--graphite)}
.offer__right{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
.offer__right>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7em;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.offer__right>summary::after{
  content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral);
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);
}
.offer__right[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.checklist{list-style:none;margin:1.6em 0 0;padding:0;display:grid;gap:.85em}
.checklist li{position:relative;padding-left:1.9em;font-size:.9rem;color:var(--graphite);line-height:1.5}
.checklist li::before{
  content:"";position:absolute;left:0;top:.4em;width:11px;height:6px;
  border-left:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral);transform:rotate(-45deg);
}
@media (max-width:800px){.offer{grid-template-columns:1fr}}

/* ---------- Reseñas ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.review{margin:0;background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px)}
.stars{color:var(--coral);letter-spacing:.14em;font-size:.8rem;margin-bottom:.9em}
.review blockquote{margin:0 0 1.1em;font-size:.9rem;line-height:1.6}
.review figcaption{font-family:'Archivo',sans-serif;font-size:.8rem;font-weight:600;color:var(--graphite)}
.reviews+.center{margin-top:2em}

/* ---------- Equipo ---------- */
/* Son 5 personas, y 5 es un número incómodo: cuando no entran todas en una
   fila, la que sobra quedaba sola contra el borde izquierdo con el hueco al
   lado. En el celular (2 por fila) pasaba siempre.

   Por eso NO es una grilla: es flex con justify-content:center. La diferencia
   está justo en eso — la grilla alinea la última fila al principio y no hay
   forma de centrarla; flex la centra sola, sin importar cuántas sobren.

   El ancho de cada tarjeta sale de --cols para que se sigan viendo igual que
   antes (llenando la fila). Si algún día son 6 personas, no hay que tocar
   nada: se reacomoda solo. */
.team{
  --gap:clamp(14px,2vw,22px);
  --cols:5;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--gap);padding-top:1.6em;
}
.member{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
@media (max-width:900px){.team{--cols:3}}
@media (max-width:560px){.team{--cols:2}}
.member img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);
  margin-bottom:.9em;filter:grayscale(1);transition:filter .45s var(--ease);
}
.member:hover img{filter:grayscale(0)}
.member h3{font-family:'Archivo',sans-serif;font-size:.875rem;font-weight:700;margin:0 0 .2em}
.member p{margin:0;font-size:.75rem;color:var(--graphite);line-height:1.4}

/* ---------- Formulario ---------- */
.form-section{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.form-section__bg{position:absolute;inset:0;z-index:0;opacity:.18}
.form-section__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.form-section__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--ink),rgba(0,0,0,.5) 45%,var(--ink))}
.form-section .wrap{position:relative;z-index:1}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.fgrid__left .lede{color:var(--muted-light);margin:0 0 1.8em;max-width:42ch}
.fgrid__points{list-style:none;margin:0 0 2em;padding:0;display:grid;gap:.7em}
.fgrid__points li{position:relative;padding-left:1.9em;font-size:.9rem;color:rgba(255,255,255,.82)}
.fgrid__points li::before{
  content:"";position:absolute;left:0;top:.4em;width:11px;height:6px;
  border-left:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral);transform:rotate(-45deg);
}
.fgrid__alt{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:1.6em;border-top:1px solid var(--line-dark)}
.fgrid__alt span{font-size:.875rem;color:var(--muted-light)}

.form{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(22px,3vw,36px)}
.form__title{font-family:'Archivo',sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:-.02em;margin:0 0 1.5em}
.field{margin-bottom:1em;display:flex;flex-direction:column;gap:.4em}
.field[hidden]{display:none}
.field__opt{font-weight:400;letter-spacing:0;text-transform:none;color:var(--silver)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row.is-solo{grid-template-columns:1fr}
.field-row[hidden]{display:none}
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field label{font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--graphite)}
.field input,.field select{
  width:100%;padding:.85em 1em;border:1px solid var(--silver);border-radius:var(--r);
  background:#fff;font-size:16px;transition:border-color .25s,box-shadow .25s;
}
.field input::placeholder{color:#B8B8B8}
.field input:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(253,136,132,.28)}
.field input[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 3px rgba(253,136,132,.22)}
.field select{
  appearance:none;cursor:pointer;padding-right:2.6em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234F4D4C' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;background-size:11px;
}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{margin-top:.6em}
.form__legal{font-size:.75rem;color:var(--graphite);margin:1em 0 0;line-height:1.5}
.form__msg{margin-top:1em;font-size:.875rem;line-height:1.5;max-height:0;overflow:hidden;transition:max-height .4s var(--ease),padding .3s}
.form__msg.is-on{max-height:220px;padding:.9em 1.1em;border-radius:var(--r)}
.form__msg.is-ok{background:rgba(79,77,76,.07);border:1px solid var(--silver)}
.form__msg.is-err{background:rgba(253,136,132,.14);border:1px solid var(--coral)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr}}
@media (max-width:420px){.field-row{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#fff;padding-block:clamp(42px,6vw,70px) 26px;border-top:1px solid var(--line-dark)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,52px);padding-bottom:clamp(28px,4vw,44px)}
.footer__logo{height:23px;width:auto;margin-bottom:1.1em}
.footer__brand p{margin:0;font-size:.8rem;color:var(--muted-light)}
.footer__col h4{font-family:'Archivo',sans-serif;font-size:.688rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);margin:0 0 1.1em}
.footer__col a,.footer__col p,.footer__col .footer__item{display:block;font-size:.875rem;color:rgba(255,255,255,.8);margin:0 0 .55em;transition:color .25s;line-height:1.55}
.footer__col a:hover{color:var(--coral)}
.footer__col .footer__item{display:flex;align-items:center;gap:.65em}
.footer__item svg{width:15px;height:15px;flex:none;color:var(--muted-light);transition:color .25s}
a.footer__item:hover svg{color:var(--coral)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line-dark);font-size:.75rem;color:var(--muted-light)}
.footer__bottom p{margin:0}
.footer__code{font-family:'Archivo',sans-serif;letter-spacing:.1em;opacity:.55}
@media (max-width:720px){.footer__top{grid-template-columns:1fr;gap:28px}}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed;z-index:90;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);
  display:inline-flex;align-items:center;gap:.6em;
  background:var(--ink);color:#fff;padding:.85em 1.25em;border-radius:100px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.875rem;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
  transform:translateY(120%);opacity:0;
  transition:transform .45s var(--ease),opacity .35s,background .25s,color .25s;
}
.wa-float.is-on{transform:none;opacity:1}
.wa-float:hover{background:var(--coral);color:var(--ink)}
.wa-float svg{width:19px;height:19px;flex:none}
@media (max-width:520px){.wa-float span{display:none}.wa-float{padding:.95em}.wa-float svg{width:23px;height:23px}}

/* ==========================================================================
   APERTURA DE LOS BLOQUES — leerlo antes de tocar
   ==========================================================================

   Son los tres tipos de bloque que se abren y se cierran:
     .exp          → "Lo que hacemos para encontrarlo" (Estrategia, Marketing…)
     .drawer       → "Ver los 17 pasos", "Conocé al equipo"
     .offer__right → "Qué incluye el informe"

   Están escritos DOS VECES a propósito, y no es un error:

   ABAJO (el @supports) está la versión buena: el bloque se DESPLIEGA de
   verdad, creciendo de alto, y lo que sigue se corre acompañando. Es lo que
   uno espera de un acordeón. Hasta hace poco esto no se podía hacer sin
   JavaScript; ahora sí, pero sólo en navegadores actualizados.

   ARRIBA está el respaldo para los celulares viejos que no entienden lo de
   abajo: ahí el contenido aparece de golpe pero entra con un fundido y un
   desplazamiento. Se nota menos, pero nunca queda sin animación.

   El navegador elige solo cuál usar. No hay que hacer nada.

   Duración: 320 ms. Es a propósito que sea corta — tiene que acompañar el
   toque, no hacerte esperar. Arriba de 400 ms ya se siente lenta.
   ========================================================================== */

/* --- Respaldo: fundido + entrada desde arriba --- */
.exp[open]>.exp__c,
.drawer[open]>.drawer__c,
.offer__right[open]>.checklist{
  animation:abrir .32s var(--ease) both;
}
@keyframes abrir{
  from{opacity:0;transform:translateY(-12px)}
  to{opacity:1;transform:none}
}

/* --- Versión buena: alto animado de verdad --- */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  /* Esto es lo que le permite al navegador animar hacia "auto", que es el alto
     que va a tener el bloque abierto y que hasta ahora no se podía calcular de
     antemano. Va en :root porque se hereda hacia toda la página. */
  :root{interpolate-size:allow-keywords}

  .exp::details-content,
  .drawer::details-content,
  .offer__right::details-content{
    height:0;overflow:hidden;opacity:0;
    transition:
      height .32s var(--ease),
      opacity .24s var(--ease),
      content-visibility .32s allow-discrete;
  }
  .exp[open]::details-content,
  .drawer[open]::details-content,
  .offer__right[open]::details-content{height:auto;opacity:1}

  /* Con el alto animándose, el fundido de arriba sobra: se pisaban y el
     contenido llegaba tarde respecto del bloque. */
  .exp[open]>.exp__c,
  .drawer[open]>.drawer__c,
  .offer__right[open]>.checklist{animation:none}
}

/* Si la persona pidió menos animación en su celular, se abre y se cierra seco.
   Es una preferencia de accesibilidad: hay gente a la que el movimiento en
   pantalla la marea. */
@media (prefers-reduced-motion:reduce){
  .exp[open]>.exp__c,
  .drawer[open]>.drawer__c,
  .offer__right[open]>.checklist{animation:none}
  .exp::details-content,
  .drawer::details-content,
  .offer__right::details-content{transition:none}
}

/* ==========================================================================
   AJUSTES DE CELULAR — leerlo antes de tocar
   ==========================================================================

   Este bloque va ÚLTIMO a propósito: pisa lo de arriba sólo en pantallas
   angostas. En la compu no cambia absolutamente nada.

   Resuelve dos cosas que en el escritorio no se notan y en el celular sí:

   1) TEXTO CHICO. Varios rótulos estaban en 10 y 11 píxeles. En un monitor a
      50 cm se leen; en un celular a 30 cm, con sol y en movimiento, no. El
      piso son 12 px. No es capricho de diseño: abajo de eso el navegador de
      iPhone empieza a ofrecer "agrandar texto" solo, y ahí sí se rompe todo.

   2) BOTONES CHICOS. El dedo apoya una superficie de más o menos 9 mm; un
      botón de menos de 40 px es lotería. Donde el botón tiene que seguir
      viéndose chico por diseño, agrandamos el área que se toca y no el dibujo.

   Nada de esto cambia colores, tipografías ni la estructura de la página.
   ========================================================================== */
@media (max-width:800px){

  /* --- Piso de 12 px en los rótulos --- */
  .eyebrow,
  .galeria__rotulo,
  .footer__col h4,
  .steps__stage,
  .hero__more,
  .marquee__track,
  .pill{font-size:.75rem}
  .carru__hueco span{font-size:.72rem}

  /* --- Área de toque --- */
  /* Flechas del carrusel: de 34 a 42 px. */
  .carru__btn{width:42px;height:42px}

  /* "Ver todas las reseñas", teléfono y mail del pie: eran renglones de 22-26
     px de alto. El padding los lleva a ~42 sin separarlos visualmente. */
  .link-arrow{padding-block:.72em}
  .footer__col a{padding-block:.62em;margin-bottom:0}

  /* "Qué incluye el informe": el texto medía 19 px de alto y el resto de la
     tarjeta no era clickeable, así que había que apuntar al renglón justo. */
  .offer__right>summary{padding-block:.85em}
}