/* =========================================================================
   DONDERS & BARLOW — sistema web
   Paleta y reglas: Sistema de identidad (Libro III).
   Referencias de comportamiento: Ace & Tate, Warby Parker, Cubitts.
   ========================================================================= */

:root{
  /* --- La noche --- */
  --verde-observatorio:#004225;
  --verde-noche:#0B3B2E;
  --verde-salon:#1B4D3E;
  --verde-vivo:#005E37;
  --verde-petroleo:#255558;
  --azul-pizarra:#293542;
  --negro-tinta:#1C1C1C;

  /* --- La luz --- */
  --salvia:#ABCAC2;
  --niebla:#B7CECF;
  --bruma:#CADDD8;

  /* --- La señal --- */
  --amarillo:#FAFF51;

  /* --- La materia --- */
  --miel:#F6C87E;
  --roble:#CEAA93;
  --nogal:#B78D74;
  --laton:#C09A5D;
  --ocre:#AE8F24;
  --bronce:#A27418;

  /* --- El papel --- */
  --blanco:#FFFFFF;
  --gris-perla:#E7E7E7;

  /* --- Roles --- */
  --bg:var(--blanco);
  --ink:var(--negro-tinta);
  --ink-soft:#5C5C5C;
  --line:#DEDEDE;
  --line-strong:#C4C4C4;
  --tile:#F3F1ED;          /* bandeja de producto */
  --tile-dark:var(--verde-observatorio);

  /* --- Tipografía: la casa escribe con dos letras (§7) --- */
  --grotesca:"Helvetica Neue",Helvetica,"Inter",Arial,sans-serif;
  --serifa:Georgia,"Times New Roman",Times,serif;

  /* --- Escala tipográfica pública: tres niveles, nada más --- */
  --type-body:16px;
  --type-heading:clamp(32px,4.5vw,58px);
  --type-display:clamp(58px,10.5vw,148px);

  /* --- Retícula: módulo de 8 (§14) --- */
  --u:8px;
  --gap:24px;
  --pad:clamp(20px,4vw,56px);
  --maxw:1280px;

  --r:8px;                  /* radio máximo de la casa (§22) */
  --ease:cubic-bezier(.22,.61,.36,1);   /* la curva del enfoque (§24) */
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
/* Las clases con display propio (.form, .mnav) ganarían sobre el [hidden] del
   navegador; aquí se restablece para que ocultar de verdad oculte. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--grotesca);font-size:16px;line-height:1.6;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--verde-observatorio);outline-offset:3px;border-radius:2px}
.night :focus-visible{outline-color:var(--amarillo)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Tipografía: tres niveles (§8) ---------- */
.display{font-family:var(--serifa);font-size:var(--type-display);line-height:1.03;letter-spacing:-.022em}
.h-xl,.h-lg,.h-md{font-family:var(--serifa);font-size:var(--type-heading);line-height:1.1;letter-spacing:-.018em}
.lead,.body,.small{font-size:var(--type-body);line-height:1.7;color:var(--ink-soft);max-width:68ch}
.label{font-size:var(--type-body);text-transform:uppercase;letter-spacing:.15em;font-weight:400;color:var(--ink-soft)}
.num{font-variant-numeric:tabular-nums}

.night{background:var(--verde-observatorio);color:#fff}
.night .lead,.night .body,.night .small,.night .label{color:rgba(255,255,255,.76)}
.night a:not(.btn):not(.float__cta){color:#fff}
.signal{color:var(--amarillo)}

/* =======================================================================
   CABECERA
   ======================================================================= */
/* Dos filas, como Warby Parker: la firma arriba a la izquierda; debajo el
   menú y, a la derecha, las acciones. Sin texto decorativo. */
.hdr{position:sticky;top:0;z-index:80;background:var(--blanco);border-bottom:1px solid var(--line)}
.hdr__top{display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--pad) 6px}
.hdr__bottom{display:flex;align-items:center;gap:20px;
  max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) 10px;min-height:44px}
.hdr__logo{display:flex;align-items:center;gap:10px;flex:none}
@media(max-width:999px){
  .hdr__top{padding-block:10px}
  .hdr__bottom{display:none}
}
.hdr__logo svg{height:18px;width:auto;flex:none}

/* La firma oficial se pinta con mask: un solo archivo que hereda currentColor,
   así sirve en blanco sobre el hero y en negro sobre papel. */
.logo-lockup{display:block;height:42px;aspect-ratio:529/194;background-color:currentColor;
  -webkit-mask:url(../assets/logo-lockup.svg) no-repeat center/contain;
  mask:url(../assets/logo-lockup.svg) no-repeat center/contain;
  transition:opacity .2s var(--ease)}
.hdr__logo:hover .logo-lockup{opacity:.68}
.ft__logo .logo-lockup{height:40px;margin-bottom:16px}
.mnav__top .logo-lockup{height:30px}
@media(max-width:520px){.logo-lockup{height:28px}}

/* Marca denominativa (nivel 03). El signo & va en serifa de contraste alto
   dentro de una palabra grotesca — la conjunción es la curaduría (§3). */
.wm{font-size:15px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;white-space:nowrap;line-height:1}
.wm i{font-family:var(--serifa);font-style:italic;font-weight:400;font-size:1.12em;letter-spacing:0}
.wm--ft{display:block;font-size:14px;margin-bottom:14px}
@media(max-width:400px){.wm{font-size:13px;letter-spacing:.06em}}
.hdr__nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);flex-wrap:wrap}
.hdr__nav a{font-size:14px;letter-spacing:-.005em;padding:11px 0;position:relative;white-space:nowrap;color:var(--ink)}
.hdr__nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:scaleX(1)}
.hdr__end{display:flex;align-items:center;gap:10px;margin-left:auto}
/* WhatsApp: secundario, sólo el icono en un aro fino */
.hdr__wa{width:36px;height:36px;border-radius:999px;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink);flex:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.hdr__wa svg{width:17px;height:17px}
.hdr__wa:hover{border-color:var(--ink);background:#FAFAF8;transform:translateY(-1px)}
/* La cita: la acción de la cabecera, en aro como el "Sign in" de Warby */
.hdr__cita{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 18px;
  border-radius:999px;border:1px solid var(--line-strong);font-size:14px;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.hdr__cita:hover{border-color:var(--verde-observatorio);background:var(--verde-observatorio);
  color:#fff;transform:translateY(-1px)}
.hdr__burger{display:grid;place-items:center;width:40px;height:40px;justify-self:end;margin-right:-8px}
.hdr__burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.hdr__burger span::before,.hdr__burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink)}
.hdr__burger span::before{top:-6px}.hdr__burger span::after{top:6px}
@media(min-width:1000px){.hdr__burger{display:none}}

/* menú móvil */
.mnav{position:fixed;inset:0;z-index:95;background:var(--blanco);transform:translateY(-100%);
  transition:transform .38s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.mnav[data-open]{transform:none}
.mnav__top{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
  padding-inline:var(--pad);border-bottom:1px solid var(--line);flex:none}
.mnav__x{width:40px;height:40px;display:grid;place-items:center;margin-right:-8px}
.mnav__list{padding:calc(var(--u)*3) var(--pad)}
.mnav__list a{display:block;font-family:var(--serifa);font-size:30px;letter-spacing:-.02em;
  padding:14px 0;border-bottom:1px solid var(--line)}
.mnav__foot{padding:calc(var(--u)*3) var(--pad) calc(var(--u)*6);display:grid;gap:10px}
.mnav__foot a{font-size:15px;color:var(--ink-soft)}

/* =======================================================================
   BOTONES (§25)
   ======================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:999px;font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease);
  text-align:center;min-height:48px}
.btn:active{transform:translateY(1px)}
/* primario: la señal. Uno por pantalla. */
.btn--signal{background:var(--amarillo);color:var(--negro-tinta)}
.btn--signal:hover{background:#EEF43B}
.btn--dark{background:var(--verde-observatorio);color:#fff}
.btn--dark:hover{background:var(--verde-noche)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:#FAFAF8}
.night .btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.night .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--full{width:100%}
.btn--sm{padding:10px 20px;font-size:14px;min-height:40px}
/* terciario */
.tlink{display:inline-flex;align-items:center;gap:7px;font-size:15px;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .18s}
.tlink:hover{opacity:.6}

/* =======================================================================
   SECCIONES
   ======================================================================= */
.sec{padding-block:clamp(56px,7vw,112px)}
.sec--tight{padding-block:clamp(40px,5vw,72px)}
.sec__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(28px,3.5vw,48px)}
.sec__head .label{margin-bottom:14px;display:block}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* =======================================================================
   HERO
   ======================================================================= */
.hero{position:relative;background:var(--verde-observatorio);color:#fff;overflow:hidden}
.hero__grid{display:grid;gap:clamp(32px,4vw,56px);align-items:center;
  padding-block:clamp(56px,7vw,104px)}
@media(min-width:940px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero .display{color:#fff;max-width:14ch}
.hero__lead{margin-top:22px;max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:40px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22)}
.hero__meta span{font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.8)}
/* la estantería iluminada — el único patrón de la casa (§22) */
.hero__shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.hero__shelf{grid-template-columns:repeat(3,1fr)}}
.shelf__cell{aspect-ratio:1/.82;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);display:grid;place-items:center;padding:12%;
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.shelf__cell:hover{background:rgba(250,255,81,.09);border-color:rgba(250,255,81,.4)}
.shelf__cell svg{width:100%;height:auto}

/* =======================================================================
   REJILLA DE PRODUCTO
   ======================================================================= */
.grid{display:grid;gap:var(--gap) 16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(4,1fr)}}

.card{display:flex;flex-direction:column;position:relative}
.card__tile{position:relative;background:var(--tile);border-radius:var(--r);aspect-ratio:720/386;
  display:grid;place-items:center;padding:0;overflow:hidden;
  transition:background .32s var(--ease)}
.card:hover .card__tile{background:#EAE7E1}
.card__tile svg{width:100%;height:auto;transition:transform .42s var(--ease)}
.card:hover .card__tile svg{transform:scale(1.045)}
.product-photo{display:block;max-width:100%;object-fit:contain}
.card__tile .product-photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .42s var(--ease)}
.card:hover .card__tile .product-photo{transform:scale(1.035)}
.card__flag{position:absolute;top:10px;left:10px;background:var(--blanco);border-radius:4px;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;font-weight:500}
.card__fav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.86);opacity:0;transition:opacity .2s}
.card:hover .card__fav,.card__fav:focus-visible{opacity:1}
.card__fav svg{width:16px;height:16px}
.card__fav[aria-pressed="true"]{opacity:1}
.card__fav[aria-pressed="true"] svg{fill:var(--verde-observatorio);stroke:var(--verde-observatorio)}
.card__body{padding-top:14px;display:flex;flex-direction:column;gap:3px}
.card__brand{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.card__name{font-family:var(--serifa);font-size:19px;letter-spacing:-.012em;line-height:1.25}
.card__meta{font-size:13.5px;color:var(--ink-soft)}
.card__price{font-size:14.5px;margin-top:5px;font-variant-numeric:tabular-nums}
.card__swatches{display:flex;gap:5px;margin-top:9px}
.dot{width:13px;height:13px;border-radius:999px;border:1px solid rgba(0,0,0,.18);flex:none}
.card a::after{content:"";position:absolute;inset:0}

/* filtros */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-block:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chip{border:1px solid var(--line-strong);border-radius:999px;padding:9px 17px;font-size:14px;
  transition:border-color .18s,background .18s,color .18s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--negro-tinta);border-color:var(--negro-tinta);color:#fff}
.filters__count{margin-left:auto;font-size:13.5px;color:var(--ink-soft)}
.filters__group{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filters__group::-webkit-scrollbar{display:none}

/* =======================================================================
   FICHA DE PRODUCTO — galería inmersiva y panel de compra guiada
   ======================================================================= */
.pdp{display:grid;gap:clamp(26px,3vw,44px);padding-block:clamp(24px,3vw,44px);align-items:start}
@media(min-width:1020px){.pdp{grid-template-columns:minmax(0,1.48fr) minmax(390px,.82fr)}}
.pdp__gallery{display:grid;gap:14px;min-width:0}
.pdp__stage{position:relative;background:#F4F4F4;border-radius:clamp(16px,2vw,26px);aspect-ratio:720/386;
  overflow:hidden;isolation:isolate}
.pdp__viewport{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.pdp__viewport::-webkit-scrollbar{display:none}
.pdp__track{display:flex;width:100%;height:100%}
.pdp__media{display:grid;place-items:center;flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:start;scroll-snap-stop:always}
.pdp__media svg{width:100%;height:100%;max-height:100%;padding:clamp(22px,5vw,62px)}
.pdp__photo{display:block;width:100%;height:100%;object-fit:contain}
.pdp__arrow{position:absolute;z-index:2;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.9);border:1px solid rgba(28,28,28,.12);
  box-shadow:0 3px 16px rgba(28,28,28,.08);font-size:28px;line-height:1;opacity:0;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pdp__stage:hover .pdp__arrow,.pdp__arrow:focus-visible{opacity:1}
.pdp__arrow:hover{transform:scale(1.05)}
.pdp__arrow--prev{left:16px}.pdp__arrow--next{right:16px}
.pdp__counter{position:absolute;z-index:2;right:16px;bottom:16px;background:rgba(255,255,255,.9);
  border-radius:999px;padding:7px 11px;font-size:12px;font-variant-numeric:tabular-nums}
.pdp__thumbs{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:6px 6px 10px;
  scroll-padding-inline:6px;scrollbar-width:none;scroll-snap-type:x proximity}
.pdp__thumbs::-webkit-scrollbar{display:none}
.pdp__thumb{background:#F4F4F4;border-radius:12px;width:96px;aspect-ratio:720/386;flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;justify-content:center;padding:0;border:2px solid transparent;
  overflow:hidden;transition:border-color .18s,transform .18s}
.pdp__thumb:hover{transform:translateY(-2px)}
.pdp__thumb:focus{outline:none}
.pdp__thumb:focus-visible{outline:2px solid var(--verde-observatorio);outline-offset:2px}
.pdp__thumb svg{width:100%;height:100%;padding:8px;flex:1 1 auto;min-width:0}
.pdp__thumb img{width:100%;height:100%;object-fit:contain}
.pdp__thumb[aria-checked="true"]{border-color:var(--verde-observatorio)}
.pdp__panel{position:sticky;top:calc(var(--header-h) + 18px);display:flex;flex-direction:column;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:clamp(18px,2vw,26px);padding:clamp(22px,2.6vw,34px);
  box-shadow:0 12px 38px rgba(28,28,28,.045)}
@media(max-width:1019px){.pdp__panel{position:static}}
.pdp__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pdp__badge{background:var(--bruma);border-radius:999px;padding:6px 10px;font-size:11px;white-space:nowrap}
.pdp__brand{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.pdp__pricebox{border-top:1px solid var(--line);padding-top:18px}
.pdp__price{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.pdp__note{font-size:13.5px;color:var(--ink-soft);line-height:1.55;margin-top:5px}
.pdp__choice{display:grid;gap:4px}
.pdp__swatches{display:flex;gap:9px;flex-wrap:wrap}
.pdp__sw{width:30px;height:30px;border-radius:999px;border:1px solid rgba(0,0,0,.2);position:relative}
.pdp__sw[aria-current="true"]::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--negro-tinta);border-radius:999px}
.pdp__actions{display:flex;gap:10px;align-items:stretch}
.pdp__fav{width:52px;flex:none;border:1px solid var(--line-strong);border-radius:999px;display:grid;place-items:center}
.pdp__fav[aria-pressed="true"] svg{fill:var(--verde-observatorio);stroke:var(--verde-observatorio)}
.pdp__service{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center;font-size:11px;color:var(--ink-soft)}
.pdp__service span{padding:10px 5px;border-radius:8px;background:#F7F6F3}
.notice{display:flex;gap:11px;background:var(--bruma);border-radius:var(--r);padding:15px 17px;font-size:13.5px;line-height:1.55}
.notice svg{flex:none;margin-top:2px}
.pdp__details{border-top:1px solid var(--line)}
.pdp__details summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 0;
  cursor:pointer;font-size:14px;font-weight:500;list-style:none}
.pdp__details summary::-webkit-details-marker{display:none}
.pdp__details summary span{font-size:22px;font-weight:300;transition:transform .2s var(--ease)}
.pdp__details[open] summary span{transform:rotate(45deg)}
/* especificaciones — el rigor de Cubitts */
.specs{border-top:1px solid var(--line)}
.specs__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs__row dt{color:var(--ink-soft)}
.specs__row dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .pdp__arrow{opacity:1;width:38px;height:38px}
  .pdp__arrow--prev{left:10px}.pdp__arrow--next{right:10px}
  .pdp__thumb{width:82px;border-radius:10px}
  .pdp__panel{padding:20px 17px}
  .pdp__service{font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.pdp__viewport{scroll-behavior:auto}}

/* =======================================================================
   MODAL — "Compra este par en la tienda"
   ======================================================================= */
.modal{position:fixed;inset:0;z-index:100;display:none;padding:16px;overflow-y:auto}
.modal[data-open]{display:grid;place-items:center}
.modal__veil{position:fixed;inset:0;background:rgba(28,28,28,.55);animation:fade .22s var(--ease)}
.modal__box{position:relative;background:var(--blanco);border-radius:var(--r);width:min(880px,100%);
  overflow:hidden;animation:rise .32s var(--ease);max-height:calc(100dvh - 32px);overflow-y:auto}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.modal__x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:999px;
  background:rgba(255,255,255,.92);display:grid;place-items:center}
.modal__head{padding:26px 26px 20px}
.modal__grid{display:grid}
@media(min-width:720px){.modal__grid{grid-template-columns:1fr 1fr}}
.modal__shot{background:var(--verde-observatorio);min-height:220px;position:relative;display:grid;
  place-items:center;padding:26px;color:#fff;text-align:center}
.modal__shot svg{width:min(250px,86%);height:auto;margin-inline:auto}
.modal__shot .product-photo{width:min(280px,90%);height:150px;margin-inline:auto;background:#fff;border-radius:8px;padding:14px}
.modal__map{border:0;width:100%;height:100%;min-height:240px;display:block;filter:grayscale(.28)}
.modal__info{padding:24px 26px 28px;display:flex;flex-direction:column;gap:16px}
.modal__addr{display:grid;gap:5px;font-size:14.5px;line-height:1.6}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =======================================================================
   CAMPAÑAS DE SALUD VISUAL
   ======================================================================= */
.camp{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.camp{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.camp{grid-template-columns:repeat(3,1fr)}}
.camp__item{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:11px;transition:border-color .22s var(--ease),background .22s var(--ease)}
.camp__item:hover{border-color:var(--ink);background:#FBFBF9}
.night .camp__item{border-color:rgba(255,255,255,.2)}
.night .camp__item:hover{border-color:var(--amarillo);background:rgba(255,255,255,.04)}
.camp__n{font-size:11.5px;letter-spacing:.14em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.night .camp__n{color:var(--amarillo)}
.camp__icon{width:26px;height:26px;margin-bottom:6px}

/* pasos numerados */
.steps{counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--line)}
.night .steps li{border-color:rgba(255,255,255,.18)}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:12px;letter-spacing:.1em;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;padding-top:5px}
.night .steps li::before{color:var(--amarillo)}
.steps h3{font-family:var(--serifa);font-size:21px;letter-spacing:-.012em;margin-bottom:5px}

/* =======================================================================
   MARCAS
   ======================================================================= */
.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:720px){.brands{grid-template-columns:repeat(4,1fr)}}
.brands__c{background:var(--blanco);padding:30px 20px;display:grid;place-items:center;gap:7px;text-align:center;min-height:118px}
.brands__c b{font-family:var(--serifa);font-size:19px;font-weight:400;letter-spacing:-.01em}
.brands__c span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.brands__c.is-soon b{color:var(--ink-soft)}

/* =======================================================================
   NEWSLETTER
   ======================================================================= */
.news{background:var(--bruma)}
.news__grid{display:grid;gap:clamp(24px,3vw,48px);align-items:center}
@media(min-width:860px){.news__grid{grid-template-columns:1fr 1fr}}
.form{display:flex;flex-direction:column;gap:14px;max-width:460px}
.field{display:grid;gap:7px}
.field label{font-size:12.5px;letter-spacing:.05em;font-weight:500}
.field input{border:1px solid var(--line-strong);background:var(--blanco);border-radius:var(--r);
  padding:14px 16px;font:inherit;font-size:15.5px;color:var(--ink);min-height:50px;width:100%}
.field input:focus{outline:none;border-color:var(--negro-tinta);box-shadow:0 0 0 2px var(--amarillo)}
.field input[aria-invalid="true"]{border-color:var(--bronce);box-shadow:0 0 0 2px rgba(162,116,24,.22)}
.field__err{font-size:13px;color:var(--negro-tinta);display:none;gap:7px;align-items:center}
.field__err[data-on]{display:flex}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-soft)}
.consent input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--verde-observatorio)}
.form__ok{display:none;gap:11px;align-items:flex-start;background:var(--blanco);
  border-left:3px solid var(--verde-vivo);border-radius:var(--r);padding:17px 19px;font-size:14.5px;line-height:1.6}
.form__ok[data-on]{display:flex}

/* =======================================================================
   PIE
   ======================================================================= */
.ft{background:var(--negro-tinta);color:#fff;padding-block:clamp(48px,6vw,80px) 0}
.ft__grid{display:grid;gap:34px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.ft__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:15px}
.ft__links{display:grid;gap:10px}
.ft__links a{font-size:14.5px;color:rgba(255,255,255,.86);transition:color .16s}
.ft__links a:hover{color:var(--amarillo)}
.ft__logo svg{height:22px;width:auto;margin-bottom:16px}
.ft__blurb{font-size:14px;line-height:1.66;color:rgba(255,255,255,.66);max-width:34ch}
.ft__social{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ft__social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  display:grid;place-items:center;transition:border-color .18s,background .18s}
.ft__social a:hover{border-color:var(--amarillo);background:rgba(250,255,81,.1)}
.ft__social svg{width:16px;height:16px}
/* El pie reserva abajo el alto del CTA flotante para que nunca lo tape. */
.ft__bar{margin-top:clamp(36px,4vw,56px);border-top:1px solid rgba(255,255,255,.16);
  padding-block:22px 88px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.ft__bar p,.ft__bar a{font-size:12.5px;color:rgba(255,255,255,.55)}
.ft__bar a:hover{color:#fff}
.ft__bar .ft__legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-left:auto}

/* =======================================================================
   CTA FLOTANTE + WHATSAPP
   ======================================================================= */
/* En móvil el navbar se colapsa: queda el acceso rápido de WhatsApp abajo. */
.float{position:fixed;right:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;
  align-items:flex-end;gap:10px}
@media(min-width:1000px){.float{display:none}}
.float__cta{background:var(--amarillo);color:var(--negro-tinta);border-radius:999px;
  padding:14px 24px;font-size:15px;font-weight:500;letter-spacing:-.01em;display:inline-flex;
  align-items:center;gap:9px;box-shadow:0 4px 18px rgba(28,28,28,.19);min-height:52px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.float__cta:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(28,28,28,.26)}
.float__wa{width:52px;height:52px;border-radius:999px;background:var(--verde-observatorio);
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(28,28,28,.19);
  transition:transform .2s var(--ease)}
.float__wa:hover{transform:translateY(-2px)}
.float__wa svg{width:25px;height:25px}
@media(max-width:520px){
  .float__cta span{display:none}
  .float__cta{width:52px;height:52px;padding:0;justify-content:center}
}

/* cookies */
.cookie{position:fixed;left:16px;bottom:16px;z-index:90;width:min(420px,calc(100vw - 32px));
  background:var(--blanco);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 40px rgba(28,28,28,.2);padding:22px;display:none}
.cookie[data-open]{display:block;animation:rise .34s var(--ease)}
.cookie__row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.cookie__row .btn{flex:1 1 128px}

/* =======================================================================
   PÁGINAS DE TEXTO
   ======================================================================= */
.doc{max-width:74ch;padding-block:clamp(36px,5vw,64px)}
.doc h2{font-family:var(--serifa);font-size:clamp(22px,2.2vw,29px);letter-spacing:-.014em;
  margin-top:44px;margin-bottom:12px;line-height:1.22}
.doc h3{font-size:16px;font-weight:600;margin-top:26px;margin-bottom:8px}
.doc p,.doc li{font-size:16px;line-height:1.72;color:#3D3D3D}
.doc p+p{margin-top:14px}
.doc ul{margin:12px 0;display:grid;gap:9px}
.doc ul li{padding-left:20px;position:relative}
.doc ul li::before{content:"—";position:absolute;left:0;color:var(--ink-soft)}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc__meta{font-size:13px;color:var(--ink-soft);padding-bottom:22px;border-bottom:1px solid var(--line)}
.toc{background:#FAFAF8;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-top:26px}
.toc ol{margin:0;padding-left:19px;display:grid;gap:7px;font-size:14.5px}

/* acordeón FAQ */
.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__b{width:100%;display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  padding:22px 0;text-align:left;font-family:var(--serifa);font-size:19px;letter-spacing:-.012em;line-height:1.34}
.acc__ic{flex:none;margin-top:5px;transition:transform .26s var(--ease)}
.acc__b[aria-expanded="true"] .acc__ic{transform:rotate(45deg)}
.acc__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.acc__p[data-on]{grid-template-rows:1fr}
.acc__p>div{overflow:hidden}
.acc__p p{font-size:15.5px;line-height:1.7;color:var(--ink-soft);padding-bottom:24px;max-width:70ch}

/* migas */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink-soft);padding-block:16px}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* banda de datos */
.facts{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}}
.facts__c{background:var(--blanco);padding:26px 22px;display:grid;gap:6px}
.facts__n{font-family:var(--serifa);font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1}
.facts__l{font-size:12.5px;color:var(--ink-soft);line-height:1.45}

/* estado vacío */
.empty{padding:64px 0;text-align:center;display:grid;gap:14px;place-items:center}

/* utilidades */
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:40px}
/* El contenido es visible por defecto: sólo se oculta para animarlo cuando el
   JS confirma que puede revelarlo. Si el script falla, no se pierde nada. */
.has-io .reveal{opacity:0;transform:translateY(14px)}
.has-io .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* =========================================================================
   LANDING — bloques calcados de las tres referencias.
   Medidas tomadas del DOM real de warbyparker.com, aceandtate.com y cubitts.com.
   ========================================================================= */

/* Cabecera transparente sobre el hero, sólida al bajar (Ace & Tate).
   Sigue siendo sticky: el hero se sube bajo ella con un margen negativo,
   así no hay que medir la altura de la franja superior. */
body[data-hero] main{margin-top:calc(var(--header-h) * -1)}
body[data-hero] .hdr{background:transparent;border-bottom-color:transparent;
  transition:background .28s var(--ease),border-color .28s var(--ease)}
body[data-hero]:not([data-scrolled]) .hdr__logo,
body[data-hero]:not([data-scrolled]) .hdr__nav a,
body[data-hero]:not([data-scrolled]) .hdr__end a{color:#fff}
body[data-hero]:not([data-scrolled]) .hdr__wa,
body[data-hero]:not([data-scrolled]) .hdr__cita{border-color:rgba(255,255,255,.5)}
body[data-hero]:not([data-scrolled]) .hdr__wa:hover{border-color:#fff;background:rgba(255,255,255,.14)}
body[data-hero]:not([data-scrolled]) .hdr__cita:hover{border-color:#fff;background:#fff;color:var(--negro-tinta)}
body[data-hero]:not([data-scrolled]) .hdr__nav a::after{background:#fff}
body[data-hero]:not([data-scrolled]) .hdr__burger span,
body[data-hero]:not([data-scrolled]) .hdr__burger span::before,
body[data-hero]:not([data-scrolled]) .hdr__burger span::after{background:#fff}
body[data-hero][data-scrolled] .hdr{background:var(--blanco);border-bottom-color:var(--line)}

/* --- 01 · HERO (Warby Parker) ------------------------------------------ */
.wh{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;isolation:isolate}
.wh__bg{position:absolute;inset:0;z-index:-2}
.wh__bg img{width:100%;height:100%;object-fit:cover;object-position:64% 28%}
.wh::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(11,59,46,.86) 0%,rgba(11,59,46,.52) 34%,rgba(11,59,46,0) 62%)}
.wh__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:calc(var(--header-h) + 56px) var(--pad) 32px}
/* la palabra gigante: caja alta, muy apretada, en dos líneas */
.wh__big{font-family:var(--grotesca);font-weight:700;text-transform:uppercase;
  font-size:clamp(58px,12.2vw,168px);line-height:.84;letter-spacing:-.045em;color:#fff;
  margin:0 0 26px;max-width:8ch}
.wh__big span{display:block}
.wh__cta{display:flex;flex-wrap:wrap;gap:12px}
.wh__more{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:16px;color:#fff}
.wh__more:hover{text-decoration:underline;text-underline-offset:4px}
/* barra de beneficios */
.wh__bar{border-top:1px solid rgba(255,255,255,.3);margin-top:34px;padding-top:16px;
  display:grid;gap:6px 24px;grid-template-columns:repeat(2,1fr)}
@media(min-width:860px){.wh__bar{grid-template-columns:repeat(4,1fr)}}
.wh__bar span{font-size:clamp(13px,1.1vw,18px);line-height:1.55;letter-spacing:.02em;color:rgba(255,255,255,.94)}

/* dos tarjetas con foto y pastilla (fin del bloque hero) */
.whcards{display:grid;grid-template-columns:1fr}
@media(min-width:760px){.whcards{grid-template-columns:1fr 1fr}}
.whcard{position:relative;min-height:clamp(340px,42vw,460px);display:flex;align-items:flex-end;
  padding:clamp(22px,2.6vw,36px);overflow:hidden;isolation:isolate}
.whcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.whcard::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(28,28,28,.62),rgba(28,28,28,.06) 52%)}
.whcard__t{font-family:var(--serifa);font-size:clamp(24px,2.5vw,30px);line-height:1.2;
  letter-spacing:-.01em;color:#fff;max-width:16ch;margin-bottom:18px}
.whcard__r{display:flex;flex-wrap:wrap;gap:10px}

/* pastillas al estilo Warby: 48 px de alto, radio total */
.pill{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;
  border-radius:999px;font-size:16px;font-weight:400;letter-spacing:-.005em;white-space:nowrap;
  transition:transform .14s var(--ease),opacity .18s var(--ease),background .18s var(--ease)}
.pill:active{transform:translateY(1px)}
.pill--light{background:#fff;color:var(--negro-tinta)}
.pill--light:hover{background:#F0EFEC}
.pill--signal{background:var(--amarillo);color:var(--negro-tinta)}
.pill--signal:hover{background:#EEF43B}
.pill--dark{background:var(--verde-observatorio);color:#fff}
.pill--dark:hover{background:var(--verde-noche)}
.pill--line{border:1px solid rgba(255,255,255,.6);color:#fff}
.pill--line:hover{background:rgba(255,255,255,.14)}
.pill--ink{border:1px solid var(--line-strong);color:var(--ink)}
.pill--ink:hover{border-color:var(--ink)}

/* --- 02 · NOVEDADES (Ace & Tate) --------------------------------------- */
.at-h{font-family:var(--grotesca);font-weight:500;font-size:clamp(29px,3.5vw,43px);
  line-height:1.23;letter-spacing:-.014em;color:var(--ink)}
/* Sin filetes: sólo la bandeja clara y el aire, como Ace & Tate. */
.at-row{display:grid;gap:0;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.at-row{grid-template-columns:repeat(4,1fr)}}
.at-item{position:relative;padding:clamp(24px,3vw,40px) clamp(14px,1.6vw,22px) 22px;
  display:flex;flex-direction:column;transition:background .3s var(--ease)}
.at-item:hover{background:#F7F6F3}
.at-item__ph{flex:1;display:grid;place-items:center;min-height:clamp(120px,13vw,170px)}
.at-item__ph svg{width:100%;height:auto;transition:transform .4s var(--ease)}
.at-item:hover .at-item__ph svg{transform:scale(1.05)}
.at-item__ph .product-photo{width:100%;height:clamp(120px,13vw,170px);mix-blend-mode:multiply;transition:transform .4s var(--ease)}
.at-item:hover .at-item__ph .product-photo{transform:scale(1.04)}
/* nombre a la izquierda, precio a la derecha, en una sola línea. Nada más. */
.at-item__l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:24px}
.at-item__n{font-family:var(--serifa);font-size:18px;line-height:1.55;letter-spacing:-.004em}
.at-item__p{font-size:16px;line-height:1.5;letter-spacing:-.24px;font-variant-numeric:tabular-nums;white-space:nowrap}
.at-item a::after{content:"";position:absolute;inset:0}
@media(max-width:600px){
  .at-item__l{align-items:flex-start;flex-direction:column;gap:2px}
  .at-item__p{white-space:normal}
}

/* --- 03 · MONTURA INTELIGENTE (Meta) ---------------------------------- */
.wint{background:#F0F1F3;padding:clamp(44px,6vw,88px) var(--pad)}
.wint__grid{width:min(100%,var(--maxw));margin-inline:auto;display:grid;gap:clamp(30px,5vw,74px);align-items:center}
@media(min-width:900px){.wint__grid{grid-template-columns:minmax(310px,.82fr) minmax(0,1.18fr)}}
.wint__col{width:min(430px,100%)}
.wint__t{font-family:var(--serifa);font-size:clamp(27px,3.15vw,40px);line-height:1.15;letter-spacing:-.014em}
.wint__s{font-size:15px;line-height:1.5;color:#3D3D3D;margin-top:10px}
.wint__link{display:inline-block;margin-top:8px;font-size:14px;
  text-decoration:underline;text-underline-offset:3px}
.wint__form{margin-top:26px}
.wint__lab{font-size:15px;line-height:1.6;margin-bottom:10px;display:block}
.wint__form input{width:100%;height:56px;border:1px solid var(--line-strong);border-radius:8px;
  padding:0 18px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.wint__form input:focus{outline:none;border-color:var(--negro-tinta);box-shadow:0 0 0 2px var(--amarillo)}
.wint__form input[aria-invalid="true"]{border-color:var(--bronce);box-shadow:0 0 0 2px rgba(162,116,24,.2)}
.wint__legal{font-size:12px;color:#4A4A4A;text-align:center;margin-top:10px}
.wint__legal a{text-decoration:underline;text-underline-offset:2px}
.wint__go{width:100%;height:52px;border-radius:999px;background:var(--verde-observatorio);color:#fff;
  font-size:16px;margin-top:12px;transition:background .2s var(--ease)}
.wint__go:hover{background:var(--verde-noche)}
.wint__ok{display:none;gap:11px;align-items:flex-start;background:rgba(255,255,255,.94);border-radius:8px;
  padding:18px 20px;font-size:15px;line-height:1.6;margin-top:20px}
.wint__ok[data-on]{display:flex}
.wint__media{position:relative;aspect-ratio:16/10;border-radius:clamp(20px,3vw,38px);overflow:hidden;
  background:#D9DBE0;box-shadow:0 18px 48px rgba(28,28,28,.12)}
.wint__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wint__credit{position:absolute;right:16px;bottom:14px;padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.9);color:#333;font-size:11px;letter-spacing:.02em;backdrop-filter:blur(8px)}
@media(max-width:899px){.wint__col{width:100%}.wint__media{aspect-ratio:16/11}}

/* --- 04 · LA TIENDA (Cubitts) ------------------------------------------
   Imagen a pantalla completa que queda fija mientras la página pasa por
   encima: la capa recortada hace el parallax sin JS. Sólo el rótulo. */
.px{position:relative;height:100vh;height:100svh;overflow:clip;isolation:isolate}
.px__win{position:absolute;inset:0;clip-path:inset(0);z-index:-1}
.px__img{position:fixed;top:0;left:0;width:100%;height:100vh;object-fit:cover;object-position:50% 50%}
@supports not (overflow:clip){.px{overflow:hidden}}
/* rótulo mínimo abajo a la izquierda, con el enlace al lado */
.px__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,3.4vw,40px);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px clamp(28px,6vw,80px);
  font-size:16px;line-height:1.5;color:#fff;
  text-shadow:0 1px 18px rgba(0,0,0,.4)}
.px__cap a{position:relative;padding-bottom:2px}
.px__cap a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .34s var(--ease)}
.px__cap a:hover::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .px{height:clamp(420px,70vh,640px)}
  .px__win{clip-path:none}
  .px__img{position:absolute;height:100%}
}

/* --- 06 · MÁS VENDIDAS (Ace & Tate) ------------------------------------ */
.bswrap{position:relative;background:#F4F4F2}
.lens-shop{padding-bottom:0}
.bs{display:grid;gap:1px;background:var(--line);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.bs{grid-template-columns:repeat(3,1fr)}}
.bs__cell{aspect-ratio:1/1;min-height:0;background:#F4F4F2;position:relative;overflow:hidden}
.bs__intro{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;justify-content:space-between;background:#F4F4F2}
.bs__ph{position:absolute;inset:0;display:grid;place-items:center;background:#F4F4F2}
.bs__ph svg{width:100%;height:auto;max-width:280px;transition:transform .42s var(--ease)}
a.bs__cell:hover .bs__ph svg{transform:scale(1.05)}
.bs__ph .product-photo{width:100%;height:100%;max-width:none;object-fit:contain;mix-blend-mode:normal;transition:transform .55s var(--ease)}
a.bs__cell:hover .bs__ph .product-photo{transform:scale(1.04)}
.bs__info{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(18px,2vw,28px);
  background:linear-gradient(180deg,rgba(244,244,242,0),rgba(244,244,242,.96) 38%,#F4F4F2 100%)}
.bs__n{font-family:var(--serifa);font-size:clamp(20px,2vw,24px);line-height:1.33;letter-spacing:-.006em}
.bs__c{font-size:16px;line-height:1.75;color:var(--ink-soft);font-weight:300}

/* --- 09 · COMPRA POR TIPO DE LENTE (Ace & Tate) ------------------------ */
.bylens{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:760px){.bylens{grid-template-columns:repeat(3,1fr)}}
.bylens__c{position:relative;aspect-ratio:1/1;display:flex;align-items:flex-end;
  justify-content:center;padding:26px;overflow:hidden}
.bylens__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.bylens__c:hover img{transform:scale(1.05)}
.bylens__c span{position:relative;background:#fff;border-radius:999px;height:46px;padding:0 24px;
  display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--negro-tinta)}

/* --- 07 · SERVICIOS EMPRESARIALES ------------------------------------- */
.business-cta{background:var(--verde-observatorio);color:#fff;padding:clamp(52px,7vw,104px) 0}
.business-cta__grid{display:grid;gap:clamp(28px,5vw,76px);align-items:end}
@media(min-width:860px){.business-cta__grid{grid-template-columns:1.08fr .92fr}}
.business-cta .label{color:var(--amarillo)}
.business-cta__title{font-family:var(--serifa);font-size:clamp(38px,5.8vw,76px);line-height:1.02;
  letter-spacing:-.025em;max-width:12ch;margin-top:16px}
.business-cta__copy{display:grid;justify-items:start;gap:24px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;
  color:rgba(255,255,255,.82);max-width:45ch}

/* --- 10 · VISITA LA TIENDA (Warby) — titular grande a la izquierda ------ */
.wstore{padding-block:clamp(52px,7vw,104px)}
.wstore__grid{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media(min-width:900px){.wstore__grid{grid-template-columns:1.06fr .94fr}}
.wstore__k{font-size:15px;font-weight:500;color:var(--verde-observatorio);letter-spacing:.01em}
.wstore__h{font-family:var(--serifa);font-size:clamp(32px,4.9vw,64px);line-height:1.08;
  letter-spacing:-.018em;margin-top:16px;max-width:15ch}
.wstore__h a{color:var(--verde-observatorio);text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:1.5px;transition:color .2s var(--ease),text-decoration-color .2s var(--ease)}
.wstore__h a:hover{color:var(--verde-noche);text-decoration-color:var(--amarillo)}
.wstore__addr{display:grid;gap:5px;font-size:15px;line-height:1.62;margin-top:clamp(22px,2.6vw,34px)}
.wstore__r{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.wstore__map{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 2px 20px rgba(28,28,28,.06)}
.wstore__map iframe{width:100%;height:clamp(300px,42vh,440px);border:0;display:block;
  filter:grayscale(.3);transition:filter .5s var(--ease)}
.wstore__map:hover iframe{filter:grayscale(0)}

/* --- 11 · BOLETÍN + PIE (Ace & Tate) ----------------------------------- */
.atnews{background:#EAE2DC}
/* Titular más grande y menos aire arriba/abajo que en la versión anterior. */
.atnews__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(32px,3.6vw,52px) var(--pad)}
.atnews__h{font-family:var(--serifa);font-size:clamp(32px,4.6vw,60px);line-height:1.14;
  letter-spacing:-.016em;max-width:20ch}
.atnews__f{margin-top:clamp(20px,2.4vw,30px);max-width:560px}
.atnews__f input[type=email]{width:100%;height:46px;border:0;border-radius:6px;background:#fff;
  padding:0 16px;font:inherit;font-size:16px;color:var(--ink)}
.atnews__f input[type=email]:focus{outline:none;box-shadow:0 0 0 2px var(--negro-tinta)}
.atnews__f input[aria-invalid="true"]{box-shadow:0 0 0 2px var(--bronce)}
.atnews__c{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;
  line-height:1.5;color:#4A423C}
.atnews__c input{margin-top:2px;width:17px;height:17px;flex:none;accent-color:var(--negro-tinta)}
.atnews__c a{text-decoration:underline;text-underline-offset:2px}
.atnews__b{margin-top:18px;height:46px;padding:0 40px;border-radius:999px;
  background:var(--negro-tinta);color:#fff;font-size:18px;transition:opacity .18s}
.atnews__b:hover{opacity:.84}
.atnews__ok{display:none;gap:11px;align-items:flex-start;background:#fff;border-radius:6px;
  padding:18px 20px;font-size:15px;line-height:1.6;margin-top:22px;max-width:520px}
.atnews__ok[data-on]{display:flex}

.atft{background:var(--negro-tinta);color:#fff;overflow:hidden}
.atft__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(44px,5vw,72px) var(--pad) 0}
.atft__grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:760px){.atft__grid{grid-template-columns:1.2fr 1fr 1fr}}
.atft__h{font-family:var(--grotesca);font-weight:500;font-size:clamp(24px,2.6vw,32px);
  line-height:1.37;letter-spacing:-.015em}
.atft__meta{margin-top:16px;display:grid;gap:9px;font-size:15px;color:rgba(255,255,255,.72)}
.atft__meta a{display:inline-flex;align-items:center;gap:9px}
.atft__meta a:hover{color:var(--amarillo)}
.atft__links{display:grid;gap:2px}
.atft__links a{font-size:18px;line-height:1.78;color:#fff}
.atft__links a:hover{color:var(--amarillo)}
.atft__bar{margin-top:clamp(36px,4vw,56px);display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;
  padding-bottom:26px}
.atft__bar a,.atft__bar p{font-size:13px;color:rgba(255,255,255,.6)}
.atft__bar a:hover{color:#fff}
.atft__social{display:flex;gap:8px;margin-right:auto}
.atft__social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.24);border-radius:999px;
  display:grid;place-items:center}
.atft__social a:hover{border-color:var(--amarillo)}
.atft__social svg{width:15px;height:15px}
/* la firma gigante al pie, a sangre — el Wordmark oficial */
.atft__giant{display:block;width:100%;aspect-ratio:1063/117;background-color:#fff;margin-top:14px;
  -webkit-mask:url(../assets/logo-wordmark.svg) no-repeat center bottom/100% auto;
  mask:url(../assets/logo-wordmark.svg) no-repeat center bottom/100% auto}

/* =========================================================================
   PULIDO — microinteracciones, revelados y parallax.
   Todo respeta prefers-reduced-motion: se apaga sin romper nada (§24, §26).
   ========================================================================= */

html{scroll-behavior:smooth}

/* --- revelado escalonado --------------------------------------------- */
.has-io .reveal{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .78s var(--ease),transform .78s var(--ease);
  transition-delay:var(--d,0ms)}
.has-io .reveal.is-in{opacity:1;transform:none}

/* la imagen entra enfocando: de desenfoque a nitidez (§24) */
.has-io .rv-img{opacity:0;transform:scale(1.045);filter:blur(9px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s var(--ease);
  transition-delay:var(--d,0ms)}
.has-io .rv-img.is-in{opacity:1;transform:none;filter:none}

/* --- entrada del hero -------------------------------------------------- */
@keyframes wh-up{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:none}}
@keyframes wh-fade{from{opacity:0}to{opacity:1}}
@keyframes wh-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.wh__bg img{animation:wh-zoom 1.8s var(--ease) both}
.wh__big span{display:block;animation:wh-up .95s var(--ease) both}
.wh__big span:nth-child(2){animation-delay:.11s}
.wh__cta{animation:wh-up .9s var(--ease) .24s both}
.wh__bar{animation:wh-fade 1.1s var(--ease) .42s both}
.wh__bar span{position:relative;padding-left:0}

/* --- pastillas: elevación y brillo ------------------------------------ */
.pill{position:relative;overflow:hidden}
.pill::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity .24s var(--ease)}
.pill:hover::after{opacity:.06}
.pill:hover{transform:translateY(-2px)}
.pill--signal:hover{box-shadow:0 6px 20px rgba(250,255,81,.42)}
.pill--dark:hover{box-shadow:0 6px 20px rgba(0,66,37,.3)}
.pill--light:hover{box-shadow:0 6px 20px rgba(28,28,28,.2)}

/* --- enlace de texto con subrayado que crece -------------------------- */
.tlink{border-bottom:0;position:relative;padding-bottom:3px}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform-origin:right;transform:scaleX(1);transition:transform .38s var(--ease)}
.tlink:hover{opacity:1}
.tlink:hover::after{transform-origin:left;animation:tl .5s var(--ease)}
@keyframes tl{0%{transform:scaleX(1)}45%{transform:scaleX(0)}46%{transform-origin:left}100%{transform:scaleX(1)}}
.tlink svg{transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* --- tarjetas del hero ------------------------------------------------- */
@keyframes whcard-drift{from{transform:scale(1)}to{transform:scale(1.045)}}
.has-io .whcard img.rv-img.is-in{animation:whcard-drift 9s var(--ease) infinite alternate}
.whcard:hover img{animation-play-state:paused!important;transform:scale(1.06)}
.whcard__t{transition:transform .5s var(--ease)}
.whcard:hover .whcard__t{transform:translateY(-3px)}

/* --- novedades: la montura flota al pasar ------------------------------ */
.at-item__ph svg{transition:transform .55s var(--ease)}
.at-item:hover .at-item__ph svg{transform:translateY(-6px) scale(1.06)}
.at-item__n{position:relative;display:inline-block}
.at-item__n::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .34s var(--ease)}
.at-item:hover .at-item__n::after{transform:scaleX(1)}

/* --- compra por tipo de lente: pastilla que sube ----------------------- */
.bylens__c span{transition:transform .34s var(--ease),box-shadow .34s var(--ease)}
.bylens__c:hover span{transform:translateY(-4px);box-shadow:0 8px 22px rgba(28,28,28,.22)}
.bylens__c::after{content:"";position:absolute;inset:0;background:rgba(28,28,28,0);
  transition:background .4s var(--ease)}
.bylens__c:hover::after{background:rgba(28,28,28,.08)}

/* --- más pedidas ------------------------------------------------------- */
a.bs__cell::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,66,37,0),rgba(0,66,37,.05));
  opacity:0;transition:opacity .4s var(--ease)}
a.bs__cell:hover::after{opacity:1}

/* --- campos de formulario --------------------------------------------- */
.wint__in-row input,.atnews__f input[type=email],.field input{
  transition:border-color .24s var(--ease),box-shadow .24s var(--ease),background .24s var(--ease)}
.wint__go,.atnews__b{transition:background .24s var(--ease),transform .16s var(--ease),box-shadow .24s var(--ease)}
.wint__go:hover,.atnews__b:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(28,28,28,.22)}
.wint__go:active,.atnews__b:active{transform:translateY(0)}

/* --- pie: enlaces que se desplazan ------------------------------------- */
.atft__links a{display:inline-block;transition:transform .3s var(--ease),color .22s var(--ease)}
.atft__links a:hover{transform:translateX(6px)}
.atft__social a{transition:transform .28s var(--ease),border-color .22s var(--ease),background .22s var(--ease)}
.atft__social a:hover{transform:translateY(-3px)}
.atft__giant{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.atft__giant.is-in{opacity:1;transform:none}

/* --- flotante de WhatsApp: entra cuando el hero se va --- */
body[data-hero] .float{opacity:0;pointer-events:none;transform:translate3d(0,18px,0);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
body[data-hero][data-scrolled] .float{opacity:1;transform:none;pointer-events:auto}

/* --- parallax ligero (el JS sólo escribe --par-y) ---------------------- */
[data-par]{will-change:transform}
.bylens__c img{transform:translate3d(0,var(--par-y,0px),0) scale(1.12)}
/* el hover de la imagen convive con el parallax */
.bylens__c:hover img{transform:translate3d(0,var(--par-y,0px),0) scale(1.17)}
.has-io .bylens__c img.rv-img{transform:translate3d(0,var(--par-y,0px),0) scale(1.19)}
.has-io .bylens__c img.rv-img.is-in{transform:translate3d(0,var(--par-y,0px),0) scale(1.12)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wh__bg img,.wh__big span,.wh__cta,.wh__bar{animation:none}
  .has-io .reveal,.has-io .rv-img{opacity:1;transform:none;filter:none}
  .atft__giant{opacity:1;transform:none}
  body[data-hero] .float{opacity:1;transform:none;pointer-events:auto}
  [data-par]{transform:none !important}
  .bylens__c img{transform:none}
}

/* =========================================================================
   AJUSTES DE EXPERIENCIA — jerarquía CTA, cierre apilado y búsqueda
   ========================================================================= */
body[data-hero]:not([data-scrolled]) .hdr__logo{color:var(--amarillo)}
body[data-hero][data-scrolled] .hdr__logo{color:var(--verde-observatorio)}

.filters__search{position:relative;display:flex;align-items:center;flex:1 0 100%;height:52px;
  border:1px solid var(--line-strong);border-radius:999px;background:#fff;margin-bottom:10px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.filters__search:focus-within{border-color:var(--verde-observatorio);box-shadow:0 0 0 3px rgba(0,66,37,.08)}
.filters__search svg{width:20px;height:20px;margin-left:18px;color:var(--ink-soft);flex:none}
.filters__search input{width:100%;height:100%;border:0;background:transparent;padding:0 18px 0 11px;
  font:inherit;font-size:15px;color:var(--ink);outline:0;-webkit-appearance:none}
.filters__search input::placeholder{color:#777}
.filters__search input::-webkit-search-cancel-button{cursor:pointer}

.home-stack{position:relative;background:var(--verde-observatorio)}
.home-stack__panel{position:sticky;top:var(--header-h);min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;overflow:hidden}
.home-stack__panel--business{z-index:1}
.home-stack__panel--visit{z-index:2;background:#fff;border-radius:28px 28px 0 0;
  box-shadow:0 -18px 42px rgba(10,38,28,.14)}
.home-stack__panel--news{z-index:3;border-radius:28px 28px 0 0;box-shadow:none}
.home-stack .business-cta{padding-block:clamp(58px,8vw,112px)}
.home-stack .wstore{padding-block:clamp(58px,8vw,112px)}
.home-stack .atnews__in{width:100%;padding-block:clamp(58px,8vw,112px)}
.home-stack .atnews__b{background:var(--amarillo);color:var(--negro-tinta);font-weight:500}
.home-stack .atnews__b:hover{background:#EEF43B}
@media(max-width:720px){
  .home-stack__panel{min-height:calc(100svh - var(--header-h));align-items:flex-start}
  .home-stack__panel--visit,.home-stack__panel--news{border-radius:20px 20px 0 0}
}

/* =========================================================================
   SALUD VISUAL EMPRESARIAL — reportaje editorial
   ========================================================================= */
.enterprise-page main{background:#F5F2EC}
.enterprise-page .label{color:var(--verde-observatorio)}
.ent-hero{display:grid;min-height:clamp(660px,82vh,900px);background:#EDE5D9}
.ent-hero__copy{padding:clamp(58px,8vw,126px) var(--pad);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center}
.ent-hero__copy h1{font-family:var(--serifa);font-size:clamp(45px,6.4vw,94px);line-height:.98;
  letter-spacing:-.035em;max-width:10.5ch;margin-top:22px}
.ent-hero__copy>p:not(.ent-hero__note){font-size:clamp(18px,1.7vw,23px);line-height:1.5;
  max-width:49ch;margin-top:26px;color:#424242}
.ent-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.ent-hero__note{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:22px;max-width:56ch}
.ent-hero__media{position:relative;overflow:hidden;min-height:520px;margin:0;background:#255558}
.ent-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform 1.1s var(--ease)}
.ent-hero__media:hover img{transform:scale(1.025)}
.ent-hero__media figcaption,.ent-split__media figcaption{position:absolute;left:20px;right:20px;bottom:18px;
  color:#fff;font-size:12px;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.42)}
@media(min-width:900px){.ent-hero{grid-template-columns:.93fr 1.07fr}.ent-hero__copy{padding-right:clamp(44px,6vw,100px)}}

.ent-score{display:grid;background:var(--amarillo);border-block:1px solid rgba(28,28,28,.16)}
.ent-score>div{padding:clamp(24px,3vw,42px) var(--pad);display:grid;gap:5px;border-bottom:1px solid rgba(28,28,28,.15)}
.ent-score strong{font-family:var(--serifa);font-size:clamp(35px,4.2vw,64px);font-weight:400;line-height:1}
.ent-score span{font-size:13px}
@media(min-width:760px){.ent-score{grid-template-columns:repeat(4,1fr)}.ent-score>div{border-bottom:0;border-right:1px solid rgba(28,28,28,.15)}.ent-score>div:last-child{border-right:0}}

.ent-risk{display:grid;gap:clamp(36px,7vw,110px);align-items:center;padding:clamp(76px,10vw,154px) var(--pad);
  max-width:var(--maxw);margin-inline:auto}
.ent-risk__number{aspect-ratio:1;border-radius:50%;background:var(--verde-observatorio);color:var(--amarillo);
  display:grid;place-items:center;text-align:center;padding:15%;box-shadow:0 28px 70px rgba(0,66,37,.16)}
.ent-risk__number span{font-family:var(--serifa);font-size:clamp(42px,6vw,84px);line-height:.95;max-width:5ch}
.ent-risk h2,.ent-feature h2,.ent-program h2,.ent-split h2,.ent-timeline h2,.ent-proof h2,.ent-contact h2{
  font-family:var(--serifa);font-size:clamp(36px,5vw,70px);line-height:1.02;letter-spacing:-.028em;margin-top:16px}
.ent-risk__copy>p,.ent-feature__copy>p,.ent-split__copy>p{font-size:17px;line-height:1.68;color:var(--ink-soft);margin-top:22px;max-width:58ch}
@media(min-width:820px){.ent-risk{grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)}}

.ent-feature{display:grid;background:#fff;overflow:hidden}
.ent-feature__media,.ent-split__media,.ent-gallery figure{margin:0;overflow:hidden;position:relative;background:#E3E0DA}
.ent-feature__media img,.ent-split__media img,.ent-gallery figure img{width:100%;height:100%;object-fit:cover}
.ent-feature__copy{padding:clamp(58px,8vw,120px) var(--pad)}
.ent-list{margin-top:clamp(30px,4vw,52px);border-top:1px solid var(--line-strong)}
.ent-list article{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:19px 0;border-bottom:1px solid var(--line)}
.ent-list article>span{font-size:11px;letter-spacing:.12em;color:var(--verde-vivo);padding-top:5px}
.ent-list h3{font-family:var(--serifa);font-size:21px}
.ent-list p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-top:3px}
@media(min-width:900px){.ent-feature{grid-template-columns:1.08fr .92fr}.ent-feature__media{min-height:760px}}

.ent-program{padding:clamp(72px,9vw,142px) var(--pad);background:var(--verde-observatorio);color:#fff}
.ent-program .label{color:var(--amarillo)}
.ent-program__head{max-width:var(--maxw);margin-inline:auto}
.ent-program__head h2{max-width:12ch}
.ent-program__head>p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.74);max-width:58ch;margin-top:22px}
.ent-program__grid{max-width:var(--maxw);margin:clamp(44px,6vw,78px) auto 0;display:grid;border-top:1px solid rgba(255,255,255,.25)}
.ent-program__grid article{padding:26px 22px 34px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.ent-program__grid article>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarillo)}
.ent-program__grid h3{font-family:var(--serifa);font-size:clamp(21px,2vw,28px);line-height:1.2;margin-top:24px}
.ent-program__grid p{font-size:14.5px;line-height:1.58;color:rgba(255,255,255,.7);margin-top:10px;max-width:34ch}
@media(min-width:720px){.ent-program__grid{grid-template-columns:repeat(2,1fr)}.ent-program__grid article:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}.ent-program__grid article:nth-child(even){padding-left:28px}}
@media(min-width:1080px){.ent-program__grid{grid-template-columns:repeat(3,1fr)}.ent-program__grid article{border-right:1px solid rgba(255,255,255,.22);padding-left:28px}.ent-program__grid article:nth-child(3n+1){padding-left:0}.ent-program__grid article:nth-child(3n){border-right:0}}

.ent-split{display:grid;background:#F6C87E;overflow:hidden}
.ent-split__copy{padding:clamp(64px,8vw,126px) var(--pad)}
.ent-split__copy ul{display:grid;gap:0;margin-top:34px;border-top:1px solid rgba(28,28,28,.28)}
.ent-split__copy li{padding:14px 0 14px 24px;border-bottom:1px solid rgba(28,28,28,.22);position:relative;font-size:14.5px}
.ent-split__copy li::before{content:'↳';position:absolute;left:0;color:var(--verde-observatorio)}
.ent-split__media{min-height:570px}
@media(min-width:900px){.ent-split{grid-template-columns:.9fr 1.1fr}.ent-split__media{order:-1;min-height:780px}}

.ent-timeline{padding:clamp(76px,10vw,150px) var(--pad);background:#fff;scroll-margin-top:var(--header-h)}
.ent-timeline__head{max-width:var(--maxw);margin-inline:auto}
.ent-timeline__head h2{max-width:13ch}
.ent-timeline ol{max-width:var(--maxw);margin:clamp(44px,6vw,78px) auto 0;display:grid;counter-reset:none}
.ent-timeline li{padding:24px 0;border-top:1px solid var(--line-strong);display:grid;grid-template-columns:86px 1fr;gap:20px}
.ent-timeline li>span{font-size:12px;letter-spacing:.08em;color:var(--verde-vivo);font-weight:600}
.ent-timeline h3{font-family:var(--serifa);font-size:22px}
.ent-timeline p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin-top:6px}
@media(min-width:980px){.ent-timeline ol{grid-template-columns:repeat(5,1fr)}.ent-timeline li{display:block;padding:26px 24px 0;border-right:1px solid var(--line)}.ent-timeline li:first-child{padding-left:0}.ent-timeline li:last-child{border-right:0}.ent-timeline h3{margin-top:42px}}

.ent-gallery{display:grid;background:#DCE8E4;overflow:hidden}
.ent-gallery figure{min-height:520px}
.ent-gallery__quote{padding:clamp(54px,7vw,100px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.ent-gallery blockquote{font-family:var(--serifa);font-size:clamp(34px,4.5vw,62px);line-height:1.06;letter-spacing:-.025em;margin:22px 0 0}
.ent-gallery__quote p{font-size:15px;line-height:1.6;color:var(--ink-soft);margin-top:26px;max-width:42ch}
@media(min-width:980px){.ent-gallery{grid-template-columns:.85fr 1.15fr .85fr}.ent-gallery figure{min-height:720px}}

.ent-proof{padding:clamp(72px,9vw,138px) var(--pad);background:#F5F2EC}
.ent-proof__lead,.ent-proof__grid{max-width:var(--maxw);margin-inline:auto}
.ent-proof__lead h2{max-width:13ch}
.ent-proof__grid{display:grid;margin-top:clamp(42px,6vw,72px);border-top:1px solid var(--line-strong)}
.ent-proof__grid article{padding:22px 18px 26px 0;border-bottom:1px solid var(--line)}
.ent-proof__grid strong{font-family:var(--serifa);font-size:20px;font-weight:400}
.ent-proof__grid p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-top:8px;max-width:31ch}
@media(min-width:820px){.ent-proof__grid{grid-template-columns:repeat(4,1fr)}.ent-proof__grid article{border-right:1px solid var(--line);padding-left:20px}.ent-proof__grid article:first-child{padding-left:0}.ent-proof__grid article:last-child{border-right:0}}

.ent-contact{display:grid;background:var(--verde-noche);color:#fff;padding:clamp(68px,9vw,138px) var(--pad);gap:clamp(46px,7vw,108px);scroll-margin-top:var(--header-h)}
.ent-contact .label{color:var(--amarillo)}
.ent-contact__copy>p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.75);margin-top:24px;max-width:53ch}
.ent-contact__facts{display:grid;gap:11px;margin:34px 0}
.ent-contact__facts span{font-size:14px;color:rgba(255,255,255,.74)}
.ent-contact__facts strong{color:#fff;font-weight:500;margin-right:7px}
.ent-contact .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.ent-contact .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ent-contact__form{background:#fff;color:var(--ink);padding:clamp(24px,4vw,42px);border-radius:18px;align-self:start}
.ent-contact__form .form{padding:0;border:0}
.ent-contact__form .form__ok{border:0;padding:12px 0;color:var(--verde-observatorio)}
.ent-contact__form .consent a{text-decoration:underline}
@media(min-width:900px){.ent-contact{grid-template-columns:1.04fr .76fr}}

@media(max-width:899px){
  .ent-hero__media{min-height:58svh}.ent-feature__media{min-height:62svh}.ent-split__media{min-height:60svh}
}
@media(prefers-reduced-motion:reduce){
  .ent-hero__media img{transition:none}.ent-hero__media:hover img{transform:none}
}

/* =========================================================================
   GUÍA TIPOGRÁFICA PÚBLICA
   Dos familias de marca y solamente tres escalas. La grotesca sostiene el
   display, la lectura y la interfaz; la serif identifica los títulos.
   Ningún texto público supera el peso regular y no se fuerza tracking.
   ========================================================================= */
body[data-page]{
  font-family:var(--grotesca);font-size:var(--type-body);font-weight:400;
  text-transform:none;letter-spacing:normal
}
body[data-page] *,body[data-page] *::before,body[data-page] *::after{
  font-size:var(--type-body)!important;font-weight:400!important;
  text-transform:none!important;letter-spacing:normal!important
}

body[data-page] :where(
  h1,h2,
  .h-xl,.h-lg,.h-md,
  .at-h,.wint__t,.business-cta__title,.wstore__h,.atnews__h,.atft__h,
  .ent-risk__title,.ent-program__head .h-xl,.ent-contact__copy .h-xl
),
body[data-page] :where(
  h1,h2,
  .h-xl,.h-lg,.h-md,
  .at-h,.wint__t,.business-cta__title,.wstore__h,.atnews__h,.atft__h,
  .ent-risk__title,.ent-program__head .h-xl,.ent-contact__copy .h-xl
) *{font-size:var(--type-heading)!important}

body[data-page] :where(
  .display,.wh__big,.ent-hero__copy h1,.ent-gallery blockquote
),
body[data-page] :where(
  .display,.wh__big,.ent-hero__copy h1,.ent-gallery blockquote
) *{font-size:var(--type-display)!important}

/* La serif identifica títulos, nombres de producto, cifras editoriales y
   citas. La grotesca queda para lectura, navegación, formularios y CTA. */
body[data-page] :where(
  h1,h2,h3,h4,h5,h6,blockquote,
  .card__name,.facts__n,.brands__c b,.at-item__n,.bs__n,
  .pdp__title,.ent-risk__number span,.ent-score strong,.ent-proof__grid strong
){font-family:var(--serifa)!important}

/* El nivel display siempre usa la misma grotesca de Apertura 2026. */
body[data-page] :where(
  .display,.wh__big,.ent-hero__copy h1,.ent-gallery blockquote
){font-family:var(--grotesca)!important}
body[data-page="index.html"] .wh__big{line-height:.88}