/* ==========================================================================
   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)}
.nav.is-hidden{transform:translateY(-100%)}

/* ---------- 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);
  animation:fade .45s var(--ease);
}
@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}
  .exp__img{order:-1;aspect-ratio:16/9}
}

/* ---------- 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}

/* 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;
  background:var(--silver);cursor:pointer;transition:background .25s,width .25s;
}
.carru__punto.is-on{background:var(--coral);width:18px}

/* 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)}
.route__stages li{
  display:flex;align-items:center;gap:14px;padding:.95em 0;
  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);animation:fade .45s var(--ease)}
.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;animation:fade .45s var(--ease)}
.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 ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(14px,2vw,22px);padding-top:1.6em}
.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}}