/* ============================================================
   MADELEINE RESIDENCIAL — sistema visual
   Paleta de marca. El coral es acento: nunca fondo, nunca texto sobre cielo.
   ============================================================ */
:root{
  --cielo:#A4C8E2; --navy:#44556E; --coral:#FF5B35; --durazno:#F6B8AB;
  --oro:#F6C55C; --gris:#E6E6E6; --papel:#FAF9F7; --tinta:#2E3B4E;
  --navy-900:#2B3849; --sombra:0 2px 24px rgba(44,85,110,.10);
  /* ---- TIPOGRAFÍA DE TITULARES: se cambia aquí y en el <link> de Google Fonts ---- */
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --display-peso:600;
  --display-track:-.015em;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'IBM Plex Sans','Segoe UI',Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6;color:var(--tinta);background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto es OBLIGATORIO junto con los atributos width/height del HTML.
   Sin él, el alto del atributo se toma como alto real: la foto encoge de ancho
   con max-width pero conserva sus 1200 px de alto y queda estirada. Con él, el
   navegador usa los dos atributos sólo para deducir la proporción. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

h1,h2,h3,.display{font-family:var(--display);font-weight:var(--display-peso);color:var(--navy);line-height:1.08;letter-spacing:var(--display-track)}
h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:18px}
h3{font-size:clamp(20px,2.4vw,27px);margin-bottom:12px}
.mono{font-family:'IBM Plex Mono',Consolas,monospace}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--coral);margin-bottom:14px;display:block}
.eyebrow-claro{color:var(--durazno)}
.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.62;color:#4A5A6E;max-width:64ch}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border:none;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  transition:.22s ease;white-space:nowrap}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:#E64A26;transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-900);transform:translateY(-2px)}
.btn-linea{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-linea:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-linea-navy{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn-linea-navy:hover{background:var(--navy);color:#fff}

/* Flecha en todos los botones. Sin ella, los de contorno se leen como un
   recuadro con texto y no como algo en lo que se puede hacer clic; el hueco
   del gap ya estaba reservado. Se desplaza en el hover para confirmar que
   responde. */
.btn::after{content:'\2192';font-family:'IBM Plex Mono',monospace;font-size:1.02em;line-height:1;
  transition:transform .2s}
.btn:hover::after{transform:translateX(4px)}

/* ---------- franja de conversión ----------
   Va al cierre de las secciones largas. Sin ella, alguien a la mitad del
   recorrido tiene que irse hasta el pie o hasta el menú para agendar: se
   pierde justo cuando más interesado está. */
.cta-franja{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-top:clamp(44px,6vw,70px);padding:clamp(26px,3.4vw,38px) clamp(26px,4vw,44px);
  background:var(--cielo)}
.cta-franja p{font-family:var(--display);font-weight:var(--display-peso);letter-spacing:var(--display-track);
  font-size:clamp(20px,2.3vw,28px);color:var(--navy);line-height:1.14;max-width:36ch;margin:0}
.sec-navy .cta-franja{background:rgba(255,255,255,.08)}
.sec-navy .cta-franja p{color:#fff}
.sec-cielo .cta-franja{background:#fff}
@media(max-width:640px){
  .cta-franja{flex-direction:column;align-items:stretch}
  .cta-franja .btn{justify-content:center}
}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;padding:18px 0;transition:.3s ease}
.nav.solido{background:rgba(255,255,255,.97);box-shadow:0 1px 20px rgba(44,85,110,.10);padding:12px 0;backdrop-filter:blur(8px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.marca{font-family:var(--display);font-size:19px;letter-spacing:.34em;color:#fff;transition:.3s}
.nav.solido .marca{color:var(--navy)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.9);transition:.2s}
.nav.solido .nav-links a{color:var(--navy)}
.nav-links a:hover{color:var(--coral)}
.nav-links a.activo{color:var(--coral)}
.nav .btn{padding:11px 20px;font-size:11px}
.burger{display:none;background:none;border:none;cursor:pointer;width:30px;height:22px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:2px;background:#fff;transition:.25s}
.nav.solido .burger span{background:var(--navy)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}

/* ---------- hero ---------- */
/* El padding-top reserva el alto de la barra, que va fija encima del hero.
   Sin él, cuando el contenido crece hasta llenar el alto disponible, el
   antetítulo se imprime sobre el logotipo. */
.hero{position:relative;min-height:100svh;padding-top:96px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover}

/* Casa 1: su foto de portada es vertical (la que mandó Rodrigo el 21 de
   octubre de 2026, recortada a 1000 × 1448 para dejar fuera el auto rojo del
   vecino). En teléfono encaja sola. De 561 px en adelante el hero es más ancho
   que alto y de la foto entra una franja: al 36% caben los dos niveles de la
   casa en vez del centro exacto, que cortaba la planta alta. */
@media(min-width:561px){
  .hero-casa-1 .hero-img img{object-position:50% 36%}
}
/* El velo no es decorativo: es lo que hace legible el titular en blanco.
   Medido componiendo el degradado sobre los píxeles reales de las cuatro fotos
   de hero, el anterior daba entre 2.16 y 2.91 de contraste en la banda del
   titular — por debajo de 3, que es el mínimo para texto grande. Fallaba en las
   cuatro, no sólo en la del pórtico.
   Esta curva da entre 4.18 y 5.70. Se mantiene claro hasta el 26% para no
   apagar el rótulo del pórtico, que es la razón de esa foto, y carga a partir
   del 55%, que es donde empieza el texto. */
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,56,73,.60) 0%,rgba(43,56,73,.36) 26%,rgba(43,56,73,.78) 55%,rgba(43,56,73,.94) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero-txt{padding-bottom:44px;max-width:760px}
.hero h1{color:#fff;font-size:clamp(38px,7.2vw,80px);margin-bottom:18px}
.hero .regla{width:78px;height:3px;background:var(--coral);margin-bottom:26px}
.hero-sub{font-size:clamp(16px,1.9vw,21px);line-height:1.5;color:rgba(255,255,255,.92);max-width:52ch;margin-bottom:32px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-datos{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.26);
  padding:26px 0 34px;gap:18px}
.hero-dato .v{font-family:var(--display);font-size:clamp(22px,2.9vw,33px);color:#fff;line-height:1;margin-bottom:7px}
.hero-dato .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.4}

/* ---------- secciones ---------- */
section{padding:clamp(64px,9vw,110px) 0}
.sec-papel{background:var(--papel)}
.sec-cielo{background:linear-gradient(180deg,#EDF4F9 0%,#F7FAFC 100%)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .lead{color:rgba(255,255,255,.84)}
.cab{max-width:70ch;margin-bottom:44px}

/* ---------- pilares ---------- */
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:1px;background:var(--gris);border:1px solid var(--gris)}
.pilar{background:#fff;padding:34px 26px}
.pilar .num{font-family:var(--display);font-size:15px;color:var(--coral);margin-bottom:16px;display:block}
.pilar h3{font-size:18px;margin-bottom:9px}
.pilar p{font-size:14.5px;color:#5A6878;line-height:1.58}

/* ---------- precio ---------- */
.precio-caja{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;
  padding:32px 0;border-top:2px solid var(--navy);border-bottom:1px solid var(--gris);margin-bottom:46px}
.precio-monto{font-family:var(--display);font-size:clamp(32px,5vw,54px);color:var(--navy);line-height:1}
.precio-et{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#7C8AA0;margin-bottom:9px;display:block}
.precio-nota{font-size:13.5px;color:#7C8AA0;max-width:34ch}

/* ---------- niveles ---------- */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--gris);margin-bottom:34px;overflow-x:auto}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:15px 24px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A97A8;
  white-space:nowrap;transition:.2s}
.tab:hover{color:var(--navy)}
.tab.on{color:var(--navy);border-bottom-color:var(--coral)}
.panel{display:none}
.panel.on{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);align-items:center}
.panel-txt .proposito{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin-bottom:12px;display:block}
.panel ul{list-style:none;margin-top:20px}
.panel li{padding:9px 0 9px 24px;position:relative;border-bottom:1px solid var(--gris);font-size:15px}
.panel li:before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px;border-radius:50% 50% 0 0;background:var(--cielo)}
.panel-img img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ---------- galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.gal-item{position:relative;overflow:hidden;cursor:pointer;background:var(--navy);aspect-ratio:4/3}
.gal-item.ancha{aspect-ratio:8/3}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.gal-item:hover img{transform:scale(1.05);opacity:.82}
.gal-item .ver{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:.3s;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:#fff;text-transform:uppercase}
.gal-item:hover .ver{opacity:1}
.gal-item.ancha{grid-column:span 2}
@media(max-width:640px){.gal-item.ancha{grid-column:span 1;aspect-ratio:4/3}}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(43,56,73,.96);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain}
.lb-cerrar{position:absolute;top:22px;right:26px;background:none;border:none;color:#fff;font-size:34px;cursor:pointer;line-height:1}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:44px;cursor:pointer;padding:14px;opacity:.7}
.lb-nav:hover{opacity:1}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-pie{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:rgba(255,255,255,.8);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em}

/* ---------- listas de características ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px)}
.lista{list-style:none}
.lista li{padding:11px 0 11px 26px;border-bottom:1px solid var(--gris);position:relative;font-size:15px}
.lista li:before{content:"";position:absolute;left:0;top:19px;width:10px;height:5px;border-radius:10px 10px 0 0;background:var(--coral)}
.sec-navy .lista li{border-bottom-color:rgba(255,255,255,.16)}
.sec-navy .lista li:before{background:var(--durazno)}

/* ---------- ficha técnica ---------- */
.ficha{width:100%;border-collapse:collapse;font-size:15px}
.ficha td{padding:13px 0;border-bottom:1px solid var(--gris)}
.ficha td:first-child{color:#7C8AA0;font-size:13.5px;width:48%}
.ficha td:last-child{text-align:right;font-family:'IBM Plex Mono',monospace;color:var(--navy);font-weight:500}
.sec-navy .ficha td{border-bottom-color:rgba(255,255,255,.16)}
.sec-navy .ficha td:first-child{color:rgba(255,255,255,.62)}
.sec-navy .ficha td:last-child{color:#fff}

/* ---------- ubicación ---------- */
.tiempos{width:100%;border-collapse:collapse;font-size:15px}
.tiempos th{text-align:left;padding:12px 14px;background:var(--cielo);color:var(--navy);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.tiempos td{padding:13px 14px;border-bottom:1px solid var(--gris)}
.tiempos td:nth-child(2){font-family:'IBM Plex Mono',monospace;white-space:nowrap;color:var(--navy)}
.tiempos tr:hover td{background:var(--papel)}

/* tabla comparativa: todas las columnas de datos con la misma tipografía */
.comparativo td:first-child{color:#7C8AA0;font-size:13.5px}
.comparativo td:nth-child(n+2){font-family:'IBM Plex Mono',monospace;color:var(--navy);white-space:normal}
.comparativo tr.prosa td:nth-child(n+2){font-family:'IBM Plex Sans',sans-serif;color:var(--tinta)}

/* ---------- tablas que no caben en un teléfono ----------
   La comparativa mide 493 px de ancho mínimo: más que cualquier celular en uso.
   Como el body lleva overflow-x:hidden, sin un contenedor propio las columnas
   de la derecha no quedan feas, quedan INALCANZABLES. El envoltorio les da su
   propio desplazamiento y la primera columna se ancla para no perder de vista
   qué fila se está leyendo. */
.tabla-env{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.tabla-env table{min-width:100%}

@media(max-width:640px){
  .tabla-env table{min-width:max-content}

  /* Sombra en el borde que sólo aparece mientras quede algo por ver: los dos
     degradados blancos van anclados al contenido (local) y las medias lunas
     al marco (scroll), así que al llegar al final se tapan entre sí. */
  .tabla-env{
    background:
      linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left/26px 100% no-repeat,
      linear-gradient(270deg,#fff 30%,rgba(255,255,255,0)) right/26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(68,85,110,.17),transparent) left/11px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(68,85,110,.17),transparent) right/11px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  /* El box-shadow hace de filete: separa la columna anclada del contenido que
     pasa por debajo, sin ocupar ancho como lo haría un border. */
  .comparativo td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--gris)}
  .comparativo th:first-child{position:sticky;left:0;background:var(--cielo);z-index:2;box-shadow:1px 0 0 rgba(68,85,110,.18)}
  .tiempos th,.tiempos td{padding-left:12px;padding-right:12px}
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:150;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(43,56,73,.88)}
.modal.on{display:flex}
.modal-caja{background:var(--navy);color:#fff;width:min(540px,100%);max-height:92vh;overflow-y:auto;
  padding:36px 34px;position:relative}
.modal-caja h3{color:#fff;font-size:25px;margin-bottom:6px}
.modal-caja .intro{font-size:14.5px;color:rgba(255,255,255,.78);margin-bottom:22px;line-height:1.55}
.modal-cerrar{position:absolute;top:10px;right:14px;background:none;border:none;color:#fff;
  font-size:30px;cursor:pointer;line-height:1;opacity:.75}
.modal-cerrar:hover{opacity:1}
@media(max-width:520px){.modal-caja{padding:30px 22px}}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px}
.cifra .v{font-family:var(--display);font-size:clamp(34px,4.6vw,52px);line-height:1;color:var(--navy);margin-bottom:10px}
.sec-navy .cifra .v{color:#fff}
.cifra .t{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.sec-navy .cifra .t{color:var(--durazno)}
.cifra p{font-size:14.5px;color:#5A6878;line-height:1.56}
.sec-navy .cifra p{color:rgba(255,255,255,.76)}

/* ---------- otras unidades ---------- */
.otras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.otra{background:#fff;border:1px solid var(--gris);overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.otra:hover{box-shadow:var(--sombra);transform:translateY(-4px)}
.otra img{width:100%;aspect-ratio:3/2;object-fit:cover}
.otra-txt{padding:24px;display:flex;flex-direction:column;flex:1}
.otra .et{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--coral);margin-bottom:9px}
.otra h3{font-size:21px;margin-bottom:8px}
.otra p{font-size:14.5px;color:#5A6878;margin-bottom:16px;flex:1}
.otra .precio{font-family:'IBM Plex Mono',monospace;font-size:17px;color:var(--navy);font-weight:600;margin-bottom:16px}

/* ---------- formulario ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,66px);align-items:start}
.campo{margin-bottom:17px}
.campo label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:7px}
.campo input,.campo select,.campo textarea{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.07);color:#fff;font-family:inherit;font-size:15px;border-radius:0;transition:.2s}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--coral);background:rgba(255,255,255,.12)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(255,255,255,.42)}
.campo select option{background:var(--navy);color:#fff}
.campo textarea{resize:vertical;min-height:88px}
/* Trampa para bots. display:none y no fuera de pantalla: el autollenado del
   navegador no escribe en un campo que no se pinta, y en uno escondido a
   -9999px sí, con la empresa del perfil del usuario. */
.hp{display:none}
.form-nota{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:14px;line-height:1.5}
.form-msg{margin-top:14px;font-size:14px;display:none}
.form-msg.err{display:block;color:var(--durazno)}

/* ---------- aviso ---------- */
.aviso{border-left:2.5px solid var(--coral);background:var(--papel);padding:18px 22px;font-size:13.5px;color:#5A6878;line-height:1.55}
.sec-navy .aviso{background:rgba(255,255,255,.06);color:rgba(255,255,255,.76)}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:rgba(255,255,255,.62);padding:56px 0 30px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
footer .marca{color:#fff;margin-bottom:14px;display:block}
footer h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--durazno);margin-bottom:14px;font-weight:600}
footer a:hover{color:#fff}
footer p{margin-bottom:8px;line-height:1.6}
.foot-legal{padding-top:22px;font-size:12px;color:rgba(255,255,255,.42);line-height:1.6}

/* ---------- wa flotante ---------- */
.wa-flota{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(0,0,0,.24);transition:.25s}
.wa-flota:hover{transform:scale(1.08)}
.wa-flota svg{width:29px;height:29px;fill:#fff}

/* ---------- arco decorativo ---------- */
.arco-deco{position:absolute;background:var(--cielo);opacity:.34;pointer-events:none;z-index:0}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:#fff;flex-direction:column;
    justify-content:center;gap:26px;transform:translateX(100%);transition:transform .3s;z-index:92;
    box-shadow:-4px 0 28px rgba(0,0,0,.14)}
  .nav-links.abierto{transform:translateX(0)}
  .nav-links a{color:var(--navy)!important;font-size:14px}
  .burger{display:block;z-index:95}

  /* Con el cajón abierto la hamburguesa tiene que verse SIEMPRE. Sin esto, en
     lo alto de la página las barras son blancas sobre el panel blanco y
     desaparece el único botón para cerrarlo. */
  /* NO devolver el backdrop-filter a esta barra.
     backdrop-filter convierte al elemento en bloque contenedor de sus
     descendientes position:fixed. Con él, al desplazar la página la barra se
     vuelve sólida y el cajón del menú deja de anclarse a la pantalla: se ancla
     a la barra y colapsa a sus 66 px de alto, con los enlaces desbordados
     encima del contenido. Sin desplazar no pasa, porque la barra aún no es
     sólida — por eso el fallo sólo aparece deslizando.
     El fondo ya va al 97% de opacidad: el desenfoque no aportaba nada visible. */
  .nav.solido{backdrop-filter:none;-webkit-backdrop-filter:none}

  .nav-links.abierto ~ .burger span{background:var(--navy)}
  .nav-links.abierto ~ .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
  .nav-links.abierto ~ .burger span:nth-child(2){opacity:0}
  .nav-links.abierto ~ .burger span:nth-child(3){top:10px;transform:rotate(-45deg)}
  .panel.on,.cols2,.form-grid{grid-template-columns:1fr}
  .hero-datos{grid-template-columns:1fr 1fr;gap:22px}
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{justify-content:center}
  .precio-caja{flex-direction:column;align-items:flex-start}
}

/* En teléfono el cajón va a pantalla completa, no a 80%.
   min(80vw,320px) en un equipo de 390 pt daba 312: dejaba una rendija de 78 px
   por donde se veía la página de atrás y el menú se leía como un error de
   maquetación, no como un panel. A pantalla completa no hay rendija que
   explicar y los enlaces caben alineados a la izquierda, que se leen mejor que
   centrados. */
@media(max-width:560px){
  .nav-links{width:100%;align-items:flex-start;padding:0 30px;gap:24px;box-shadow:none}
  .nav-links a{font-size:17px}
  .nav-links .btn{width:100%;justify-content:center;margin-top:14px;font-size:12px}

  /* El hero baja de 100svh a 80. La foto del pórtico es 4:3 y object-fit:cover
     recorta a lo ancho para llenar una caja vertical: a pantalla completa se
     comía 47 px del rótulo por la izquierda, justo la "M" de MADELEINE, que es
     la razón de ser de esa foto. */
  .hero{min-height:80svh}

  /* Aire entre las piezas del hero. En teléfono los huecos quedaban en 14 y 18
     px y todo se leía amontonado: el antetítulo de dos renglones pegado al
     titular, y el titular pegado al filete. */
  .hero .eyebrow{margin-bottom:20px}
  .hero h1{margin-bottom:24px}
  .hero .regla{margin-bottom:30px}
  .hero-sub{margin-bottom:38px}
  .hero-txt{padding-bottom:38px}
  .hero-datos{padding-top:26px;gap:26px}

  /* Con el hero más alto por el aire que se le dio, object-fit vuelve a
     recortar por la izquierda. Correr el encuadre al 47% devuelve el rótulo
     completo. Medido, no estimado. */
  .hero-img img{object-position:47% center}
}

/* Teléfonos angostos: iPhone SE y la gama baja de Android siguen siendo 320 px.
   Sin este tramo el margen de 24 px se come una sexta parte del ancho útil. */
@media(max-width:380px){
  .wrap{padding:0 18px}
  .hero-datos{gap:16px}
  .tab{padding:14px 15px}
  .tiempos{font-size:14px}

  /* En pantallas de 320 y 360 el hero crece por contenido y vuelve a recortar
     el rótulo por la izquierda. Correr el encuadre al 45% lo devuelve completo.
     Va sólo en este tramo: de 390 en adelante, el 50% de siempre lo encuadra
     mejor. */
  .hero-img img{object-position:45% center}
}