/* ==========================================================================
   SOI ÓPTICAS — Sistema de diseño
   Estética: minimalismo editorial tipo Oakley (negro/blanco, tipografía
   grotesca en mayúsculas, botones pill, imagen a sangre) con la paleta
   de marca de SOI (cian #28B6D2 sobre hueso #F5F3F0).
   ========================================================================== */

/* ---------- 0. Tipografías ----------
   Archivo e Inter alojadas en el propio sitio (antes venían de Google
   Fonts). La hoja de Google bloqueaba el primer pintado y obligaba a abrir
   dos conexiones más; aquí son dos archivos que el HTML precarga. Son las
   fuentes variables del subconjunto latino (el mismo que servía Google, que
   cubre el español), con todo el rango de pesos que usa el diseño. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("../fonts/archivo-latin-v25.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-latin-v20.woff2") format("woff2");
}

/* ---------- 1. Tokens ---------- */
:root {
  /* Color */
  --ink:            #141414;
  --ink-soft:       #262626;
  --ink-mute:       #6b6b6b;   /* 4,8:1 sobre hueso, 5,3:1 sobre blanco (AA) */
  --line:           #dedbd6;
  --line-dark:      #333030;
  --bone:           #f5f3f0;
  --bone-2:         #e8e6e3;
  --white:          #ffffff;
  --brand:          #28b6d2;
  --brand-deep:     #137a8f;   /* texto y fondos con texto blanco: 5:1 (AA) */
  /* El cian de marca sobre fotografía no llega al contraste mínimo ni con un
     velo casi opaco (queda en 3,3:1 con texto de 10 px). Esta versión aclarada
     mantiene el tono y sube a 5,5:1 en el peor caso, la foto de lentes de
     contacto, que es casi blanca. */
  --brand-light:    #8fe6f7;
  --brand-glow:     rgba(40, 182, 210, .28);
  --sale:           #c8452c;

  /* Tipografía */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Métrica */
  --pad:        clamp(1.25rem, 4.5vw, 4.5rem);
  --maxw:       1680px;
  --header-h:   72px;
  --promo-h:    38px;
  --fab-clear:  160px;   /* holgura bajo el pie para los botones flotantes */

  /* Movimiento */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --dur:        .45s;

  --shadow-lift: 0 18px 50px -22px rgba(20, 20, 20, .45);
  --shadow-pop:  0 30px 80px -30px rgba(20, 20, 20, .6);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background-color: var(--bone-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 100px;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 3. Tipografía ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}

.t-mega   { font-size: clamp(3rem, 11vw, 10.5rem); line-height: .86; letter-spacing: -.04em; }
.t-xl     { font-size: clamp(2.25rem, 6.4vw, 5.5rem); }
.t-lg     { font-size: clamp(1.85rem, 4.2vw, 3.4rem); }
.t-md     { font-size: clamp(1.35rem, 2.4vw, 2.1rem); }
.t-sm     { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--brand);
  flex: none;
}
.eyebrow.is-center { justify-content: center; }
.eyebrow.on-dark { color: rgba(255, 255, 255, .62); }

.lede {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink-mute);
  max-width: 56ch;
  text-wrap: pretty;
}
.on-dark .lede, .lede.on-dark { color: rgba(255, 255, 255, .68); }

/* ---------- 4. Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap-narrow { max-width: 1120px; }

.section { padding-block: clamp(4.5rem, 9vw, 9rem); }
.section-tight { padding-block: clamp(3rem, 5vw, 5rem); }
.section-dark { background: var(--ink); color: var(--white); }
.section-bone { background: var(--bone); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}
.section-head > div { display: grid; gap: .9rem; }

/* ---------- 5. Botones ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: 0 1.9rem;
  border: 1px solid var(--btn-bd);
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--ink);
}
.btn--ghost:hover,
.btn--ghost.is-on { --btn-bg: var(--ink); --btn-fg: var(--white); }

.btn--light {
  --btn-bg: var(--white);
  --btn-fg: var(--ink);
  --btn-bd: var(--white);
}
.btn--light:hover { --btn-bg: transparent; --btn-fg: var(--white); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, .55);
}
.btn--outline-light:hover { --btn-bg: var(--white); --btn-fg: var(--ink); --btn-bd: var(--white); }

.btn--brand {
  --btn-bg: var(--brand);
  --btn-fg: var(--ink);
  --btn-bd: var(--brand);
}
.btn--brand:hover { --btn-bg: var(--brand-deep); --btn-fg: var(--white); --btn-bd: var(--brand-deep); }

.btn--sm  { min-height: 40px; padding: 0 1.25rem; font-size: .66rem; }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease), color .3s;
}
.link-arrow:hover { gap: 1rem; color: var(--brand-deep); }
.on-dark .link-arrow:hover, .link-arrow.on-dark:hover { color: var(--brand); }

/* ---------- 6. Barra promocional ---------- */
.promo {
  position: relative;
  z-index: 60;
  height: var(--promo-h);
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.promo__viewport {
  position: relative;
  height: 100%;
  flex: 1;
  max-width: 720px;
  overflow: hidden;
}
.promo__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(105%);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  text-align: center;
  padding-inline: .5rem;
  white-space: nowrap;      /* la barra es de una sola línea */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* En móvil no cabe una sola línea: se permiten dos y la barra crece.
   --promo-h alimenta el cálculo de altura del hero, así que se ajusta también. */
@media (max-width: 560px) {
  :root { --promo-h: 54px; }
  .promo__slide {
    font-size: .6rem;
    letter-spacing: .08em;
    line-height: 1.35;
    white-space: normal;
    text-overflow: clip;
    padding-inline: .25rem;
  }
}
.promo__slide.is-active { opacity: 1; transform: translateY(0); }
.promo__slide.is-out    { opacity: 0; transform: translateY(-105%); }
.promo__slide b { color: var(--brand); font-weight: 700; }
.promo__nav {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .5);
  transition: color .25s;
  flex: none;
}
.promo__nav:hover { color: var(--white); }

/* ---------- 7. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--white);
  transition: transform .45s var(--ease), background-color .35s var(--ease),
              color .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Vela de contraste: garantiza que el logotipo y la navegación se lean
     sobre cualquier zona clara de la imagen del hero.
     z-index -1 es imprescindible: sin él este pseudoelemento (posicionado,
     z-index auto) se pinta por encima del logotipo —que no está posicionado—
     y lo apaga, mientras que los enlaces e iconos, que sí llevan
     position: relative, quedan por encima y sí se ven blancos. */
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .34) 62%, transparent);
  pointer-events: none;
  transition: opacity .35s;
}
.header__inner {
  height: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Estado sólido (scrolleado o página interior) */
.header.is-solid,
.header.is-open {
  background: var(--white);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.header.is-solid::before,
.header.is-open::before { opacity: 0; }
.header.is-hidden { transform: translateY(-100%); }

/* Logotipo oficial. Se sirven dos versiones del mismo archivo original:
   la de marca (texto oscuro) y una variante clara para fondos oscuros.
   Solo una está en el árbol de accesibilidad a la vez. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}
.brand__logo {
  height: 38px;
  width: auto;
  background: none;
  transition: height .35s var(--ease);
}
.brand__logo--light { display: none; }

/* Cabecera transparente sobre el hero → variante clara */
.header[data-header-overlay]:not(.is-solid):not(.is-open) .brand__logo--light { display: block; }
.header[data-header-overlay]:not(.is-solid):not(.is-open) .brand__logo--dark  { display: none; }

@media (min-width: 860px) { .header .brand__logo { height: 46px; } }

/* Lockup vertical oficial (blanco sobre transparente) para las superficies
   oscuras con espacio en alto: menú móvil y pie. */
.brand--stack { align-self: center; }
.brand__logo--stack {
  height: 52px;
  width: auto;
  background: none;
}
.footer .brand__logo--stack { height: 96px; }
@media (max-width: 620px) { .footer .brand__logo--stack { height: 76px; } }

.nav { display: none; height: 100%; }
.nav__list { display: flex; height: 100%; align-items: stretch; gap: .35rem; }
.nav__item { display: flex; align-items: center; }
.nav__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: .85rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: 22px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__item:hover .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link .caret { margin-left: .4rem; opacity: .6; }

.tools { display: flex; align-items: center; gap: .15rem; flex: none; }
.tool {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background-color .25s;
}
.tool:hover { background: rgba(128, 128, 128, .16); }
.tool__badge {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 17px; height: 17px;
  padding-inline: 4px;
  border-radius: 100px;
  background: var(--brand);
  color: var(--ink);
  font-size: .6rem;
  font-weight: 700;
  display: grid; place-items: center;
  transform: scale(0);
  transition: transform .3s var(--ease-out);
}
.tool__badge.is-on { transform: scale(1); }
.tool--cta { display: none; margin-left: .6rem; }
.tool--burger { }

/* Mega menú */
.mega {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  padding: 2.75rem var(--pad) 3rem;
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.nav__item.is-open .mega { display: block; opacity: 1; transform: translateY(0); }
.mega__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem 3rem;
  align-items: start;
}
.mega__col h4 {
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.mega__col a {
  display: block;
  padding: .38rem 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color .2s, transform .25s var(--ease);
}
.mega__col a:hover { color: var(--brand-deep); transform: translateX(5px); }
.mega__promo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: 1.4rem;
  color: var(--white);
  isolation: isolate;
}
.mega__promo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .7s var(--ease);
}
.mega__promo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 65%);
  z-index: -1;
}
.mega__promo:hover img { transform: scale(1.06); }
.mega__promo span { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; font-weight: 800; }

/* ---------- 8. Drawer móvil ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(12, 12, 12, .6);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.scrim.is-on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 80;
  width: min(420px, 100%);
  height: 100dvh;
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-on { transform: translateX(0); }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line-dark);
  position: sticky; top: 0;
  background: var(--ink);
  z-index: 2;
}
.drawer__body { padding: 1.25rem 1.5rem 2rem; flex: 1; }
.drawer__group + .drawer__group { border-top: 1px solid var(--line-dark); }
.drawer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  text-align: left;
}
.drawer__toggle svg { transition: transform .35s var(--ease); flex: none; }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.drawer__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
/* Sin relleno propio: overflow recorta el contenido pero NO el relleno, y ese
   relleno entra en el tamaño mínimo de la pista, de modo que el panel plegado
   se quedaba en 1,1rem (~18 px) y dejaba asomar la primera línea de enlaces.
   El aire inferior se da dentro del área recortada, en el último enlace. */
.drawer__panel > div { overflow: hidden; min-height: 0; }
.drawer__toggle[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }
.drawer__panel a {
  display: block;
  padding: .55rem 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .68);
  transition: color .2s;
}
.drawer__panel a:hover { color: var(--brand); }
.drawer__panel a:last-child { padding-bottom: 1.65rem; }
.drawer__foot {
  padding: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: grid;
  gap: .7rem;
}
.drawer__meta {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

/* ---------- 9. Buscador ---------- */
.search {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(245, 243, 240, .97);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
  overflow-y: auto;
}
.search.is-on { opacity: 1; visibility: visible; }
.search__inner { max-width: 980px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 4rem) var(--pad) 4rem; }
.search__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .9rem;
}
.search__bar input {
  flex: 1;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  outline: none;
  min-width: 0;
}
.search__bar input::placeholder { color: rgba(20, 20, 20, .22); }
.search__hint {
  margin-top: 1rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.search__quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.search__results { margin-top: 2.5rem; display: grid; gap: .4rem; }
.search__row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: .7rem;
  border-radius: 4px;
  background: var(--white);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.search__row:hover { transform: translateX(6px); box-shadow: var(--shadow-lift); }
.search__row img { width: 74px; height: 58px; object-fit: cover; flex: none; background: var(--bone); }
.search__row .n { font-weight: 600; font-size: .95rem; }
.search__row .b { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); }
.search__row .p { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h) - var(--promo-h));
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  display: flex;
  align-items: flex-end;
  color: var(--white);
  isolation: isolate;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .35) 45%, rgba(8, 8, 8, .15) 100%),
    linear-gradient(to right, rgba(8, 8, 8, .55), transparent 60%);
}
.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: 1.6rem;
  justify-items: start;
}
/* El h1 de la portada agrupa la línea «Óptica en Cuenca…» y el lema: así el
   titular dice qué es y dónde está, y se ve igual que antes. */
.hero__h1 { display: grid; gap: 1.6rem; justify-items: start; }
.hero__h1 .eyebrow { line-height: 1.5; letter-spacing: .26em; }
.hero__title { display: block; max-width: 14ch; }
.hero__title .l2 { display: block; color: var(--brand); }
.hero__sub { max-width: 44ch; font-size: clamp(1rem, 1.35vw, 1.2rem); color: rgba(255, 255, 255, .82); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }

.hero__scroll {
  position: absolute;
  right: var(--pad);
  bottom: clamp(3rem, 8vw, 6rem);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
}
.hero__scroll span { display: block; animation: bob 2.6s var(--ease) infinite; }
.hero__scroll .rule {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .7), transparent);
  animation: none;
  margin-top: .3rem;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* ---------- 11. Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--white);
  padding-block: .95rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee--dark { background: var(--ink); color: var(--white); border-color: var(--line-dark); }
.marquee__track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee--fast .marquee__track { animation-duration: 24s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: .8rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after { content: "◆"; font-size: .5rem; color: var(--brand); }
.marquee--brands .marquee__item {
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  padding-inline: 1.5rem;
  transition: color .25s;
}
.marquee--brands .marquee__item:hover { color: var(--ink); }
.marquee--brands .marquee__item::after { content: ""; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 11b. Carrusel infinito de logotipos ----------
   Cada marca ocupa una caja de ancho y alto idénticos, y el logotipo se ajusta
   dentro por alto Y por ancho: así ninguno desborda ni domina sobre el resto,
   por muy distintas que sean sus proporciones. El gris unifica logotipos de
   colores dispares; el color real aparece al pasar el cursor. */
.marquee--logos {
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
  /* Altura común de TODOS los logotipos. Es la medida que de verdad hace que
     un muro de marcas se vea uniforme: no cajas iguales —que dejarían un
     logotipo alargado como "CAROLINA HERRERA" diminuto frente a uno compacto—
     sino la misma altura de trazo para todos. */
  --logo-h: 30px;
  --logo-max-w: 300px;
}
.marquee--logos .marquee__track { animation-duration: 95s; }

.marquee--logos .marquee__item {
  flex: none;
  height: 76px;                 /* holgura para los logotipos más altos */
  min-width: 140px;             /* ritmo mínimo entre marcas */
  padding-inline: 26px;
  margin-inline: 0;
  display: grid;
  place-items: center;
  gap: 0;
}
.marquee--logos .marquee__item::after { content: none; }

.brandlogo__img {
  display: none;                /* solo se muestra si existe el archivo */
  /* Misma altura para todos; el ancho se adapta al logotipo. object-fit
     mantiene la proporción cuando un logotipo muy alargado topa con el
     ancho máximo. --logo-scale corrige un caso suelto sin tocar el resto. */
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  width: auto;
  max-width: var(--logo-max-w);
  object-fit: contain;
  /* Sin fondo: la regla global de img pinta un color de espera que se vería
     como un recuadro gris detrás de cada logotipo transparente. */
  background: none;
  filter: grayscale(1) contrast(1.15);
  opacity: .92;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.marquee--logos .marquee__item.has-logo .brandlogo__img { display: block; }
.marquee--logos .marquee__item.has-logo .brandlogo__name { display: none; }
.marquee--logos .marquee__item:hover .brandlogo__img { filter: grayscale(0); opacity: 1; }

/* Logotipos claros sobre fondo blanco: se oscurecen para que se vean */
.brandlogo__img.is-light { filter: grayscale(1) invert(1); }
.marquee--logos .marquee__item:hover .brandlogo__img.is-light { filter: grayscale(1) invert(1) contrast(1.1); opacity: 1; }

/* Respaldo tipográfico mientras no exista el archivo del logotipo.
   El cuerpo se ajusta para que su altura de mayúscula case con la de los
   logotipos y no se vea más pequeño que ellos en el carril. */
.brandlogo__name {
  font-family: var(--font-display);
  /* Cuerpo calculado para que la altura de mayúscula case con la de los
     rótulos: los logotipos de esta franja son casi todos en caja alta, así
     que su altura de caja ES su altura de mayúscula. */
  font-size: calc(var(--logo-h) * .95);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  color: #5a5a5a;
  transition: color .3s var(--ease);
}
.marquee--logos .marquee__item:hover .brandlogo__name { color: var(--ink); }

@media (max-width: 620px) {
  .marquee--logos { --logo-h: 23px; --logo-max-w: 190px; }
  .marquee--logos .marquee__item { height: 60px; min-width: 108px; padding-inline: 16px; }
}

/* ---------- 12. Mosaico de categorías ---------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: var(--line);
}
.tile {
  --tile-pad: clamp(1.25rem, 2.5vw, 2.25rem);
  --tile-fade: 2.4rem;
  position: relative;
  min-height: clamp(300px, 46vw, 560px);
  display: flex;
  align-items: flex-end;
  padding: var(--tile-pad);
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
  background: var(--ink);
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s var(--ease-out), filter .6s;
}
/* Dos velos con papeles distintos.

   El de la baldosa da el ambiente y funde la foto con el pie. Un degradado en
   PORCENTAJE no puede garantizar legibilidad: el bloque de texto ocupa una
   fracción distinta de la baldosa según lo alta que sea, y medido aquí llegaba
   a arrancar a media altura, donde la rampa anterior ya había caído al 12 %.
   Por eso el trabajo de contraste lo hace el segundo velo, anclado al propio
   texto y no a la baldosa, que así lo cubre midan lo que midan.

   El nivel no es arbitrario: la foto de lentes de contacto es casi blanca
   (luminancia 0,85) y para que el texto blanco llegue a 4,5:1 hay que dejar el
   fondo por debajo de 0,18, o sea un negro al 80 % como mínimo. */
.tile::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(4, 6, 8, .55) 0%,
    rgba(4, 6, 8, .34) 34%,
    rgba(4, 6, 8, .12) 60%,
    rgba(4, 6, 8, 0) 82%);
  transition: opacity .4s;
}
.tile:hover img { transform: scale(1.07); }
.tile__body { position: relative; display: grid; gap: .35rem; width: 100%; }
/* El velo que sí garantiza el contraste: se estira con el contenido y sangra
   hasta los bordes de la baldosa, con una difuminación por arriba para que no
   se vea el corte. */
.tile__body::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--tile-fade)) calc(-1 * var(--tile-pad)) calc(-1 * var(--tile-pad));
  z-index: -1;
  /* La difuminación mide lo mismo pase lo que pase (--tile-fade) en vez de un
     porcentaje del alto: con porcentaje, un título que pasa a dos líneas
     estira el bloque y empuja el volante hacia la zona clara —le pasa a
     «Lentes de contacto» en escritorio, donde se quedaba en 3,9:1—. Así el
     texto entero cae siempre en la parte plana y sólo se difumina el borde. */
  background:
    linear-gradient(to top, rgba(4, 6, 8, .82), rgba(4, 6, 8, 0))
      top / 100% var(--tile-fade) no-repeat,
    linear-gradient(rgba(4, 6, 8, .82) 0 100%)
      bottom / 100% calc(100% - var(--tile-fade)) no-repeat;
}
.tile__count {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-light);
}
/* Interlineado de titular, no de párrafo. El 1,6 que heredaba del cuerpo
   separaba «Lentes de / contacto» casi una línea entera y hacía que la única
   baldosa de dos líneas se viera estirada frente a las demás. */
.tile__title {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.08;
}
/* Con las baldosas en fila, «Lentes de contacto» parte en dos líneas y las
   otras tres no. No hay forma de que quepa en una: al ancho de columna de un
   portátil habría que bajar el titular a 21 px, y encoger el nombre de una
   categoría por lo largo que sea es peor que el problema.

   Así que el hueco de la segunda línea se reserva SIEMPRE y se coloca donde no
   se nota: debajo del título. El volante queda pegado a su titular en las
   cuatro —antes flotaba a media baldosa en las de una línea— y descripción y
   «Explorar» siguen cuadrando. Lo que sobra es aire entre título y
   descripción, que se lee como respiro y no como desajuste.

   Sólo desde 860 px, que es donde las cuatro entran en fila y aparece el
   salto; con dos columnas ninguna parte y reservar sería hueco de más. */
@media (min-width: 860px) {
  .tile__title {
    display: grid;
    align-content: start;
    min-height: 2.16em;                  /* dos líneas a 1,08 */
  }
  @supports (height: 1lh) {
    .tile__title { min-height: 2lh; }
  }

  /* Mejor todavía donde haya subgrid: en vez de reservar dos líneas a ciegas,
     las cuatro baldosas comparten las filas del mosaico, así que cada renglón
     mide lo que mida el más alto de las cuatro y no sobra ni un píxel. Si
     mañana ningún título parte, desaparece el hueco solo. La fila 1fr de
     arriba es la que se come el alto restante de la baldosa. */
  @supports (grid-template-rows: subgrid) {
    .tiles {
      column-gap: 2px;
      row-gap: 0;
      grid-template-rows: 1fr repeat(4, auto);
      /* El alto lo manda ahora el mosaico: como baldosa pasa a ser un elemento
         de rejilla que ocupa todas las filas, su min-height ya no puede
         estirar el contenedor y la tira se quedaba en 257 px. */
      min-height: clamp(300px, 46vw, 560px);
    }
    .tile {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
    }
    .tile__body {
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
      row-gap: .35rem;
    }
    .tile__title { min-height: 0; }
  }
}
.tile__desc { font-size: .9rem; color: rgba(255, 255, 255, .88); }
.tile__go {
  margin-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: gap .3s var(--ease);
}
.tile:hover .tile__go { gap: 1rem; }

/* ---------- 13. Producto ---------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.card:hover { border-color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-3px); }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--white);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card__media img {
  width: 100%; height: 100%;
  transition: transform .6s var(--ease-out);
}
/* Recortes de estudio sobre blanco: encajar completos. Sin el fondo gris de
   carga de img: asomaría por el relleno como un marco alrededor de la foto. */
.card__media--contain img { object-fit: contain; padding: 9%; background: none; }
/* Fotografía a sangre: llenar el marco */
.card__media--cover img { object-fit: cover; }
.card:hover .card__media--contain img { transform: scale(1.07) rotate(-1.5deg); }
.card:hover .card__media--cover img { transform: scale(1.05); }

.card__flags { position: absolute; top: .7rem; left: .7rem; display: grid; gap: .35rem; z-index: 2; }
.flag {
  padding: .3rem .6rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
}
.flag--brand { background: var(--brand); color: var(--ink); }
.flag--soft  { background: var(--white); color: var(--ink); border: 1px solid var(--line); }

.card__fav {
  position: absolute;
  top: .55rem; right: .55rem;
  z-index: 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  transition: background-color .25s, transform .25s var(--ease);
}
.card__fav:hover { background: var(--white); transform: scale(1.1); }
.card__fav svg { transition: fill .25s, stroke .25s, transform .3s var(--ease-out); }
.card__fav.is-on svg { fill: var(--sale); stroke: var(--sale); transform: scale(1.12); }

.card__quick {
  position: absolute;
  left: .7rem; right: .7rem; bottom: .7rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: translateY(0); }

.card__body {
  padding: 1rem 1.05rem 1.15rem;
  display: grid;
  gap: .3rem;
  flex: 1;
  align-content: start;
}
.card__brand {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.card__name {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
}
.card__meta { font-size: .78rem; color: var(--ink-mute); }
.card__foot {
  margin-top: .5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.card__price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; }
.card__swatches { display: flex; gap: .28rem; }
.swatch { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); }

.card__link { position: absolute; inset: 0; z-index: 1; }

/* Riel horizontal */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 82vw);
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  padding-inline: var(--pad);
  margin-inline: calc(var(--pad) * -1);
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-nav { display: flex; gap: .5rem; }
.rail-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.rail-btn:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }

/* Grid de catálogo */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

/* ---------- 13b. Ficha de producto (producto/<slug>.html) ---------- */
.pdp { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3.5rem, 7vw, 6rem); }
.pdp .crumbs { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.pdp__grid { display: grid; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start; }

.pdp__gallery { display: grid; gap: .75rem; }
.pdp__main {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pdp__main img { width: 100%; height: 100%; }
.pdp__main--contain img { object-fit: contain; padding: 8%; background: none; }
.pdp__main--cover img { object-fit: cover; }
.pdp__main .card__flags { top: 1rem; left: 1rem; }
.pdp__thumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.pdp__thumb {
  width: 76px; height: 76px;
  border: 1px solid var(--line);
  background: var(--white);
  overflow: hidden;
  transition: border-color .25s;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { border-color: var(--ink-mute); }
.pdp__thumb[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

.pdp__info { display: grid; gap: 1.15rem; align-content: start; }
.pdp__info h1 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.pdp__price { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pdp__price b { font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; line-height: 1; }
.pdp__price span { font-size: .78rem; color: var(--ink-mute); }

.pdp__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .55rem;
}
.pdp__colors { display: flex; flex-wrap: wrap; gap: .5rem; }
.pdp__color {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem .4rem .45rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .8rem;
}
.pdp__color .swatch { width: 16px; height: 16px; }
.pdp__color--plain { padding-left: .85rem; }

.pdp__specs { display: grid; border-top: 1px solid var(--line); }
.pdp__specs div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.pdp__specs dt { color: var(--ink-mute); }
.pdp__specs dd { font-weight: 600; text-align: right; }

.pdp__feats { display: flex; flex-wrap: wrap; gap: .45rem; }
.pdp__feats li {
  padding: .35rem .8rem;
  background: var(--bone);
  border-radius: 100px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.pdp__stock { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pdp__store {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  background: var(--white);
  font-size: .88rem;
}
.pdp__store b { font-weight: 600; }
.pdp__store .badge-open.is-closed::before { background: var(--ink-mute); box-shadow: 0 0 0 3px rgba(115, 115, 115, .2); }

.pdp__assure { display: grid; gap: .45rem; font-size: .85rem; color: var(--ink-mute); }
.pdp__assure li { display: flex; gap: .6rem; align-items: center; }
.pdp__assure svg { color: var(--brand-deep); flex: none; }
.pdp__note { font-size: .75rem; color: var(--ink-mute); }

@media (min-width: 900px) {
  .pdp__grid { grid-template-columns: 1.1fr 1fr; }
  .pdp__gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.pdp__store a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.pdp__store a:hover { text-decoration-color: currentColor; }
.pdp .eyebrow a:hover { color: var(--ink); }

/* ---------- 13c. Categorías y marcas (catalogo/, marcas/) ----------
   Fila de accesos (marcas de una categoría, categorías de una marca) sobre
   la rejilla, y el muro de logotipos del índice de marcas. */
.listing-brands {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.listing-brands::-webkit-scrollbar { display: none; }
.listing-brands--wrap { flex-wrap: wrap; overflow: visible; margin-bottom: 0; }
.listing-brands__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: .35rem;
  flex: none;
}
.prose + .listing-brands { margin-top: 1rem; }

/* Las líneas van en cada casilla y no en el hueco de la rejilla: con un
   número de marcas que no llena la última fila, el hueco quedaría como un
   bloque gris. */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.brand-tile {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --logo-h: 28px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .9rem;
  min-height: 150px;
  padding: 1.5rem 1rem;
  background: var(--white);
  text-align: center;
  transition: background-color .3s var(--ease);
}
.brand-tile:hover { background: var(--bone); }
.brand-tile__logo {
  height: calc(var(--logo-h) * var(--logo-scale, 1));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: none;
  filter: grayscale(1) contrast(1.15);
  opacity: .92;
  transition: filter .35s var(--ease), opacity .35s var(--ease);
}
.brand-tile:hover .brand-tile__logo { filter: none; opacity: 1; }
.brand-tile__name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: -.01em; }
.brand-tile__n { font-size: .64rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }

/* ---------- 14. Editorial ---------- */
.editorial { display: grid; gap: 2px; }
.ed-row { display: grid; gap: 2px; }
.ed-media { position: relative; min-height: clamp(300px, 52vw, 640px); overflow: hidden; background: var(--ink); }
.ed-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-copy {
  background: var(--bone);
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  align-content: center;
  gap: 1.25rem;
}
.ed-copy--dark { background: var(--ink); color: var(--white); }
.ed-copy--brand { background: var(--brand); color: var(--ink); }
.ed-copy--brand .eyebrow { color: rgba(20, 20, 20, .65); }
.ed-copy--brand .eyebrow::before { background: var(--ink); }
.ed-copy--brand .lede { color: rgba(20, 20, 20, .78); }
.ed-num {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--brand);
}
.ed-copy--brand .ed-num { color: var(--ink); opacity: .55; }

.ed-list { display: grid; gap: .6rem; margin-top: .3rem; }
.ed-list li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .95rem;
  color: inherit;
  opacity: .85;
}
.ed-list svg { flex: none; margin-top: 4px; color: var(--brand); }
.ed-copy--brand .ed-list svg { color: var(--ink); }

/* ---------- 15. Tecnología / comparador de lentes ---------- */
.tech { background: var(--ink); color: var(--white); overflow: hidden; }
.tech__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.compare {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 4px;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  background: var(--ink-soft);
}
.compare img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.compare__before { filter: saturate(.45) contrast(.82) brightness(1.16) blur(.6px); }
.compare__after-wrap {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--split, 50%));
}
.compare__after { filter: saturate(1.32) contrast(1.14) brightness(1.02); }
.compare__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 2px;
  background: var(--white);
  transform: translateX(-1px);
  pointer-events: none;
  box-shadow: 0 0 22px rgba(0, 0, 0, .5);
}
.compare__knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.compare__tag {
  position: absolute;
  bottom: 1rem;
  padding: .4rem .8rem;
  border-radius: 100px;
  background: rgba(10, 10, 10, .68);
  backdrop-filter: blur(6px);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__tag--l { left: 1rem; }
.compare__tag--r { right: 1rem; color: var(--brand); }
.compare__note {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .38);
  margin-top: .8rem;
}
/* Dos fotografías reales (con y sin polarizado): sin los filtros simulados */
.compare--real .compare__before, .compare--real .compare__after { filter: none; }
.compare--real { aspect-ratio: 1 / 1; }
@media (min-width: 860px) { .compare--real { aspect-ratio: 4 / 3; } }

/* ---------- 15b. Simulador de tinte (lentes Transitions) ---------- */
.tint { --sol: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
.tint__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #3a3631, #1d1b19);
}
/* Cielo a pleno sol: aparece a medida que sube el control */
.tint__stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(255, 244, 214, .95), rgba(255, 244, 214, 0) 38%),
              linear-gradient(170deg, #8fd0f2 0%, #d8eef7 60%, #f3e6c9 100%);
  opacity: calc(var(--sol) / 100);
}
.tint__glasses { position: relative; width: 82%; height: auto; overflow: visible; }
.tint__lens-base { fill: rgba(255, 255, 255, .14); }
.tint__lens { fill: var(--tint); opacity: calc(var(--sol) / 100 * .9); }
.tint__frame { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.tint__state {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .4rem .8rem;
  border-radius: 100px;
  background: rgba(10, 10, 10, .68);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tint__controls { display: grid; gap: 1rem; }
.tint__range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.tint__range input { width: 100%; accent-color: var(--brand); }
.tint__name { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.tint__name b { color: var(--white); font-weight: 700; }
.tint__desc { color: rgba(255, 255, 255, .72); font-size: .95rem; }
.tint__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tint__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem .45rem .5rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  color: var(--white);
  font-size: .74rem;
  font-weight: 600;
  transition: border-color .25s, background-color .25s;
}
.tint__chip:hover { border-color: rgba(255, 255, 255, .5); }
.tint__chip[aria-checked="true"] { border-color: var(--brand); background: rgba(40, 182, 210, .12); }
.tint__dot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--glow), var(--dark) 70%); flex: none; }
@media (min-width: 860px) { .tint { grid-template-columns: 1.1fr 1fr; } }

/* ---------- 15c. Landings de lentes (Transitions, polarizadas) ---------- */
.landing__logo { width: auto; height: clamp(40px, 6vw, 64px); background: none; margin: .6rem 0 .2rem; }
.phero--landing .t-xl { max-width: 14ch; }
.landing-band { position: relative; margin: 0; background: var(--ink); }
.landing-band img { width: 100%; max-height: 72vh; object-fit: cover; }
.landing-band figcaption {
  position: absolute;
  left: var(--pad); bottom: clamp(1.25rem, 4vw, 3rem);
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.6vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.landing-duo { display: grid; gap: 2px; }
.landing-duo img { width: 100%; aspect-ratio: 8 / 7; object-fit: cover; }
@media (min-width: 760px) { .landing-duo { grid-template-columns: 1fr 1fr; } }
.ed-copy--dark .lede a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.tabs--mirror { background: var(--white); margin: 0; }
.tabs__panel--mirror { grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem; }
.tabs__panel--mirror .tone-dot { width: clamp(80px, 12vw, 120px); height: clamp(80px, 12vw, 120px); }
.tabs__panel--mirror .tone-specs { font-size: .95rem; }
.pillar .tone-swatch { margin-bottom: .4rem; }

/* Tonos Xperio: muestra de color de cada versión */
.tone-swatch { width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; }
.tone-dot { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tone-specs { display: grid; gap: .35rem; font-size: .86rem; color: var(--ink-mute); }
.tone-specs b { color: var(--ink); font-weight: 600; }

/* Rejilla fija de 2×2: con 4 datos, auto-fit los repartía en 3 + 1 y dejaba
   la última fila coja. */
.spec-grid {
  display: grid;
  /* minmax(0, …) y no 1fr a secas: el mínimo automático de 1fr es el ancho
     mínimo del contenido, así que un valor largo como «Esencial · Estándar ·
     Premium» ensanchaba su columna y dejaba la pareja descuadrada en móvil. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  margin-top: 1.5rem;
}
.spec {
  background: var(--ink);
  padding: 1.1rem 1.15rem;
  display: grid;
  gap: .35rem;
  /* Respaldo para navegadores sin subgrid: al menos mantiene los valores
     pegados abajo cuando una etiqueta ocupa dos líneas. */
  align-content: space-between;
}

/* Subgrid: las etiquetas comparten una pista de fila y los valores otra, en
   toda la rejilla. Así, si una etiqueta O un valor ocupa dos líneas, sus
   vecinos crecen con él y las primeras líneas siguen alineadas. Con
   `space-between` a secas, un valor de dos líneas empujaba al de al lado
   hasta el fondo de la celda y la fila se veía descuadrada. */
@supports (grid-template-rows: subgrid) {
  .spec-grid > .spec {
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-content: start;
  }
}
.spec dt { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .48); }
.spec dd {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  text-wrap: balance;   /* reparte «Esencial · Estándar · Premium» en dos líneas parejas */
}

/* ---------- Listado del blog ---------- */
/* Navegación rápida bajo la marquesina. */
.blognav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.blognav a {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color .25s var(--ease);
}
.blognav a:hover { color: var(--ink); }

/* Destacados: uno grande a la izquierda y dos apilados a la derecha. */
.blogfeat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .blogfeat { grid-template-columns: 1fr 1fr; } }
.blogfeat__side { display: grid; grid-template-rows: 1fr 1fr; gap: 1px; background: var(--line); }

.bigpost {
  background: var(--white);
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
}
.bigpost__media { overflow: hidden; aspect-ratio: 16 / 11; background: var(--bone); }
.bigpost--small .bigpost__media { aspect-ratio: 16 / 9; }
.bigpost__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bigpost:hover .bigpost__media img { transform: scale(1.04); }
.bigpost__body {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  gap: .7rem;
  align-content: start;
}
.bigpost__date {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.bigpost__title {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
}
.bigpost--small .bigpost__title { font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.bigpost__excerpt { font-size: .88rem; line-height: 1.6; color: var(--ink-mute); }
.bigpost__cta {
  margin-top: .3rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bigpost__cta svg { transition: transform .25s var(--ease); }
.bigpost:hover .bigpost__cta svg { transform: translateX(4px); }

/* Bloque «Hola, somos SOI Ópticas». */
.blogabout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .blogabout { grid-template-columns: .8fr 1.2fr; } }
.blogabout__hi {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.blogabout__name {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: .95;
  font-size: clamp(2.2rem, 6vw, 4rem);
  text-transform: uppercase;
}
.blogabout__text { display: grid; gap: 1rem; }
.blogabout__text p { font-size: .95rem; line-height: 1.7; color: var(--ink-mute); }
.blogabout__text p:last-child { color: var(--ink); font-weight: 500; }

/* ---------- Artículos del blog ---------- */
.articulo__portada {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.articulo__origen {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--ink-mute);
}
.articulo__origen a { text-decoration: underline; text-underline-offset: 3px; }

/* Cabecera del artículo: el page hero oscuro de las páginas interiores,
   con autor y fecha, y una franja de cifras clave debajo. */
.phero--article .t-lg { max-width: 22ch; }
.phero--article .lede { max-width: 62ch; }
.art-byline {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.art-byline b { color: var(--white); font-weight: 600; }
.stats.stats--3 { grid-template-columns: 1fr; }
.stats--3 .stat { padding-block: clamp(1.4rem, 3vw, 2.2rem); }
.stats--3 .stat__num { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.stats--3 .stat__label { letter-spacing: .04em; text-transform: none; font-size: .8rem; max-width: 34ch; line-height: 1.5; }
@media (min-width: 640px) { .stats.stats--3 { grid-template-columns: repeat(3, 1fr); } }

/* Índice del artículo */
.art-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.art-toc__label { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-right: .4rem; }

/* Cuerpo del artículo: amplía .prose con lo que traen los textos largos */
.art-prose { max-width: 76ch; }
.art-prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: 1.1rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.2; margin-top: 2.2rem; margin-bottom: .7rem; }
.prose h4 { font-size: .98rem; line-height: 1.25; letter-spacing: -.01em; margin-top: 1.6rem; margin-bottom: .5rem; }
.prose em { font-style: italic; }
.prose ol:not([class]) { display: grid; gap: .65rem; margin-bottom: 1.6rem; counter-reset: n; }
.prose ol:not([class]) > li::before {
  counter-increment: n;
  content: counter(n);
  top: 0;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand-deep);
}
.prose blockquote {
  margin: 2.2rem 0;
  padding: .3rem 0 .3rem clamp(1.1rem, 2.5vw, 1.8rem);
  border-left: 3px solid var(--brand);
}
.prose blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .8rem;
}
.prose blockquote cite { display: block; font-style: normal; font-size: .8rem; color: var(--ink-mute); }
.prose .art-pull {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 2.5rem 0 1rem;
}
.prose .art-pull + p { color: var(--ink); font-weight: 500; }
.prose .art-kicker {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 2rem 0 .4rem;
}
.prose .art-note { font-size: .82rem; font-style: italic; margin-top: 2.5rem; }

/* Resumen rápido */
.art-tldr {
  background: var(--ink);
  color: var(--white);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 2.5rem;
}
.art-tldr__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 1.1rem !important;
  color: var(--white) !important;
}
.prose .art-tldr li { color: rgba(255, 255, 255, .78); }
.prose .art-tldr strong { color: var(--white); }
.prose .art-tldr a { color: var(--brand-light); }
.prose .art-tldr ul { margin-bottom: 0; }

/* Aviso con etiqueta (Dato clave, Tip…) */
.callout__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-deep) !important;
  margin-bottom: .5rem !important;
}
.prose .callout p:not(.callout__label) { color: var(--ink); }
.art-callouts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 2rem; }
.art-callouts .callout { margin: 0; border-left: 0; border-top: 3px solid var(--brand); }
@media (min-width: 760px) { .art-callouts { grid-template-columns: repeat(3, 1fr); } }

/* Rejilla de tarjetas */
.art-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0 2rem;
}
@media (min-width: 680px) {
  .art-cards { grid-template-columns: repeat(2, 1fr); }
  /* Número impar de tarjetas: la última ocupa la fila entera, sin hueco gris */
  .art-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .art-cards > :last-child:nth-child(odd) .art-fig img { aspect-ratio: 21 / 9; }
}
.art-card { background: var(--white); padding: clamp(1.25rem, 2.5vw, 1.75rem); display: grid; gap: .55rem; align-content: start; }
.prose .art-card h3, .prose .art-card h4 { margin: 0; font-size: 1rem; }
.prose .art-card p, .prose .art-card li { margin: 0; font-size: .92rem; line-height: 1.65; }
.prose .art-card ul { margin: .3rem 0 0; }
.art-card .art-fig { margin: calc(clamp(1.25rem, 2.5vw, 1.75rem) * -1) calc(clamp(1.25rem, 2.5vw, 1.75rem) * -1) .6rem; }
.art-card .art-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.art-card__idx { font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--brand-deep); }
.prose .art-card__sub { font-size: .78rem !important; font-weight: 600; letter-spacing: .02em; color: var(--ink) !important; }
.art-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .3rem; }
.art-chips span {
  padding: .25rem .65rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
}

/* Caja destacada (equipo, especialista, evaluación) */
.art-box {
  background: var(--bone);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin: 2rem 0;
}
.art-box > *:first-child { margin-top: 0; }
.prose .art-box p:last-child, .prose .art-box ul:last-child { margin-bottom: 0; }
.art-box--dark { background: var(--ink); color: var(--white); }
.prose .art-box--dark h2, .prose .art-box--dark h3 { color: var(--white); }
.prose .art-box--dark p, .prose .art-box--dark li { color: rgba(255, 255, 255, .72); }
.prose .art-box--dark strong { color: var(--white); }
.prose .art-box--dark .art-kicker { color: var(--brand); margin-top: 0; }
.art-box--dark .art-fig { margin-top: 1.5rem; }
.prose .art-box .btn { text-decoration: none; color: var(--btn-fg); margin-top: .4rem; }
/* Tarjetas y pasos dentro de una caja oscura: una sola columna, sin fondo blanco */
.art-box--dark .art-cards, .art-box--dark .art-steps { background: var(--line-dark); border-color: var(--line-dark); grid-template-columns: 1fr; margin: 0; }
.art-box--dark .art-card, .prose .art-box--dark .art-steps > li { background: var(--ink); }
.prose .art-box--dark h4 { color: var(--white); }
.prose .art-box--dark .art-card__sub { color: var(--white) !important; }
.art-box--dark .art-chips span { border-color: var(--line-dark); color: var(--white); }
.art-card .art-fig--logo { margin: 0 0 .6rem; }
.art-card .art-fig--logo img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 200px; background: none; }

/* Llamada a la acción dentro de una caja oscura (especialista, laboratorio) */
.art-box-cta { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.art-box-cta .art-fig { margin: 0 0 1.5rem; }
.prose .art-box-cta h3 { margin-top: 0; }

/* Gráfico de barras horizontal (radiación UV según altitud) */
.art-bars { display: grid; gap: .8rem; margin: 1.4rem 0; }
.art-bar { display: grid; grid-template-columns: minmax(84px, 9rem) 1fr 3.4rem; align-items: center; gap: .9rem; font-size: .84rem; }
.art-bar__label { color: var(--ink); font-weight: 600; line-height: 1.3; }
.art-bar__track { height: 12px; background: var(--white); border-radius: 100px; overflow: hidden; }
.art-bar__fill { display: block; height: 100%; width: var(--v); background: var(--ink-mute); border-radius: inherit; }
.art-bar--hi .art-bar__fill { background: var(--brand); }
.art-bar__val { font-family: var(--font-display); font-weight: 800; text-align: right; }

/* Cifras (glaucoma: 76 M, 111 M…) */
.art-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.5rem 0 2rem;
}
@media (min-width: 760px) { .art-figures { grid-template-columns: repeat(3, 1fr); } }
.art-figure { background: var(--white); padding: 1.3rem 1.2rem; display: grid; gap: .35rem; align-content: start; }
.art-figure b { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; }
.art-figure span { font-size: .82rem; line-height: 1.5; color: var(--ink-mute); }

/* Pasos numerados (terapias, tratamientos) */
.art-steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.5rem 0 2rem; counter-reset: paso; }
.prose .art-steps > li {
  display: grid;
  gap: .35rem;
  padding: 1.3rem 1.4rem 1.4rem 4rem;
  background: var(--white);
  color: var(--ink-mute);
}
.prose .art-steps > li::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  left: 1.4rem; top: 1.25rem;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--brand-deep);
}
.prose .art-steps > li > * { margin: 0; }
.prose .art-steps h3, .prose .art-steps h4 { font-size: 1rem; }
.prose .art-steps .art-card__sub { margin-bottom: .2rem; }

/* Mitos y realidades */
.art-myths { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.5rem 0 2rem; }
@media (min-width: 680px) {
  .art-myths { grid-template-columns: repeat(2, 1fr); }
  .art-myths > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .art-myths > :last-child:nth-child(odd) img { aspect-ratio: 21 / 9; }
}
.art-myth { background: var(--white); display: grid; align-content: start; }
.art-myth img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.art-myth__body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .5rem; }
.prose .art-myth__tag { font-size: .62rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin: 0; }
.prose .art-myth__tag--mito { color: var(--sale); }
.prose .art-myth__tag--verdad { color: #1f8a4c; margin-top: .4rem; }
.prose .art-myth__claim { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: var(--ink); margin: 0; }
.prose .art-myth__body p { margin: 0; font-size: .9rem; line-height: 1.65; }

/* Pestañas (diagnóstico de glaucoma, capas del ojo, formas de rostro) */
.tabs { margin: 1.5rem 0 2.25rem; border: 1px solid var(--line); }
.tabs__list { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: var(--bone); }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: 1 0 auto;
  padding: 1rem 1.2rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color .25s, border-color .25s, background-color .25s;
}
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); background: var(--white); }
.tabs__panel { padding: clamp(1.3rem, 3vw, 2rem); display: grid; gap: 1rem; }
.tabs__panel[hidden] { display: none; }
.prose .tabs__panel h3 { margin: 0; }
.prose .tabs__panel p, .prose .tabs__panel ul { margin: 0; }
.tabs__panel .art-fig { margin: 0; }
.tabs__panel .art-fig img { aspect-ratio: 16 / 9; object-fit: cover; }
.prose .tabs__panel .tabs__signal { font-size: .82rem; padding-left: .9rem; border-left: 2px solid var(--brand); }
@media (min-width: 860px) {
  .tabs__panel--media { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 2rem; }
  .tabs__panel--media .art-fig { grid-column: 2; grid-row: 1 / span 9; }
}

/* Figuras */
.art-fig { margin: 2rem 0; }
.art-fig img { width: 100%; height: auto; }
.art-fig figcaption { font-size: .78rem; color: var(--ink-mute); margin-top: .6rem; }
.art-fig--logo { margin: 0 0 .5rem; }
.art-fig--logo img { width: auto; max-width: 180px; max-height: 56px; background: none; }

/* Tablas */
.art-table { overflow-x: auto; margin: 1.5rem 0 2rem; border: 1px solid var(--line); }
.art-table table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.art-table th, .art-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.art-table th { background: var(--bone); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }

/* Locales dentro del artículo */
.art-stores { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 2rem 0; }
@media (min-width: 680px) { .art-stores { grid-template-columns: 1fr 1fr; } }
.art-store { background: var(--white); padding: 1.4rem 1.5rem; display: grid; gap: .4rem; align-content: start; }
.prose .art-store h3 { margin: 0 0 .3rem; font-size: 1rem; }
.prose .art-store p { margin: 0; font-size: .88rem; line-height: 1.6; }
.prose .art-store .art-store__note { color: var(--ink); margin-top: .35rem; }
.art-store .row { margin-top: .8rem; }
.prose .art-store .btn { text-decoration: none; color: var(--btn-fg); }

/* Lecturas relacionadas */
.art-related { margin-top: 3rem; }
.art-related__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 680px) { .art-related__grid { grid-template-columns: 1fr 1fr; } }
.prose .art-related__item {
  display: grid;
  gap: .3rem;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.prose .art-related__item:hover { background: var(--ink); color: var(--white); }
.art-related__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: .95rem; letter-spacing: -.01em; }
.art-related__desc { font-size: .84rem; color: var(--ink-mute); transition: color .25s; }
.art-related__item:hover .art-related__desc { color: rgba(255, 255, 255, .65); }

/* Preguntas frecuentes del artículo: el acordeón del sitio, a la medida del texto */
.prose .art-faq .acc__btn { font-size: clamp(.95rem, 1.4vw, 1.1rem); }
.prose .art-faq .acc__panel p { margin-bottom: 0; padding-bottom: 1.4rem; }

/* Autor */
.art-author {
  margin-top: 3rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
}
.prose .art-author__eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .6rem; }
.prose .art-author__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; color: var(--ink); margin-bottom: .1rem; line-height: 1.1; }
.prose .art-author__role { font-size: .8rem; margin-bottom: 1rem; }
.prose .art-author__company { font-size: .85rem; padding-top: 1rem; border-top: 1px solid var(--line); margin-bottom: 0; }

/* Fuentes */
.art-sources { margin-top: 2.5rem; }
.art-prose .art-sources h2 { font-size: .74rem; letter-spacing: .2em; margin-top: 0; }
.prose .art-sources li { font-size: .84rem; }

/* ---------- 16. Estadísticas ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.section-dark .stats, .stats.on-dark { background: var(--line-dark); border-color: var(--line-dark); }
.stat {
  background: var(--white);
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 2vw, 2rem);
  display: grid;
  gap: .3rem;
  justify-items: center;
  text-align: center;
}
.stats.on-dark .stat { background: var(--ink); }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}
.stat__num sup { font-size: .4em; vertical-align: super; color: var(--brand); }
.stat__label {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stats.on-dark .stat__label { color: rgba(255, 255, 255, .5); }

/* ---------- 17. Servicios / pilares ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pillar {
  background: var(--white);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: .8rem;
  align-content: start;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.pillar:hover { background: var(--ink); color: var(--white); }
.pillar:hover .pillar__desc { color: rgba(255, 255, 255, .68); }
.pillar:hover .pillar__idx { color: var(--brand); }
/* Rejilla fija: 2 filas de 3 en escritorio, 2 en tableta, 1 en móvil.
   Evita que auto-fit reparta 6 tarjetas en 4 + 2 con un hueco suelto. */
.pillars--3 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pillars--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars--3 { grid-template-columns: repeat(3, 1fr); } }

.pillars--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .pillars--2 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fichas de profesionales (servicios.html) ---------- */
.pros {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px)  { .pros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pros { grid-template-columns: repeat(3, 1fr); } }
/* Páginas de servicio con uno o dos profesionales: sin casillas vacías. */
.pros--1 { grid-template-columns: 1fr !important; max-width: 440px; }
.pros--2 { max-width: 900px; }
@media (min-width: 1060px) { .pros--2 { grid-template-columns: repeat(2, 1fr); } }

.pro {
  background: var(--white);
  display: grid;
  grid-template-rows: auto 1fr;   /* las fotos alineadas aunque las biografías midan distinto */
}
.pro__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bone);
}
.pro__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.pro:hover .pro__media img { transform: scale(1.04); }

.pro__body {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  display: grid;
  gap: .7rem;
  align-content: start;
}
.pro__role {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.pro__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.1;
}
.pro__list {
  display: grid;
  gap: .55rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}
.pro__list li {
  position: relative;
  padding-left: 1rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--ink-mute);
}
.pro__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.pro__reg {
  margin-top: .4rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Rejilla de servicios clínicos ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }

.svc {
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: grid;
  gap: .7rem;
  align-content: start;
}
.svc__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.svc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.15;
}
.svc__time {
  flex: none;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}
.svc__desc { font-size: .88rem; line-height: 1.6; color: var(--ink-mute); }
.svc__title a:hover { color: var(--brand-deep); }
.svc .link-arrow { justify-self: start; margin-top: .3rem; }
.svc__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
}

/* ---------- Reseñas ---------- */
.reviews {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  background: var(--white);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  margin: 0;
  display: grid;
  gap: 1rem;
  align-content: space-between;   /* la firma pegada abajo aunque el texto sea corto */
}
.review__text { font-size: .9rem; line-height: 1.65; color: var(--ink); }
.review__who {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pillar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pillar__idx {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--ink-mute);
  transition: color .35s;
}
.pillar__icon {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brand-deep);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.pillar:hover .pillar__icon {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--ink);
  transform: translateY(-2px);
}
.pillar__title { font-size: 1.15rem; letter-spacing: -.01em; }
.pillar__desc { font-size: .93rem; color: var(--ink-mute); transition: color .35s; }

/* ---------- 18. Journal ---------- */
.journal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}
.post { display: grid; gap: 1rem; align-content: start; }
.post__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bone-2); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post:hover .post__media img { transform: scale(1.06); }
.post__date { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); }
.post__title { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; line-height: 1.35; text-transform: none; letter-spacing: -.01em; }
.post__excerpt { font-size: .92rem; color: var(--ink-mute); }

/* ---------- 19. Acordeón (FAQ / footer) ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  transition: color .25s;
}
.acc__btn:hover { color: var(--brand-deep); }
.acc__btn svg { flex: none; transition: transform .35s var(--ease); }
.acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.acc__panel > div { overflow: hidden; }
.acc__btn[aria-expanded="true"] + .acc__panel { grid-template-rows: 1fr; }
.acc__panel p { padding-bottom: 1.5rem; max-width: 72ch; color: var(--ink-mute); }

/* Agrupación por categorías dentro del acordeón de preguntas */
.faq-group + .faq-group { margin-top: 2.75rem; }
.faq-group__title {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: .35rem;
}
.faq-group__title::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--brand);
  flex: none;
}

/* ---------- 20. Formularios ---------- */
.field { display: grid; gap: .45rem; }
.field > label {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.field textarea { resize: vertical; min-height: 130px; }
.field .err { font-size: .74rem; color: var(--sale); display: none; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--sale); }
.field.is-bad .err { display: block; }
.form-grid { display: grid; gap: 1.15rem; }

/* Resultado del envío por correo (contacto.html). Se anuncia con role="status". */
.form-status {
  padding: .85rem 1rem;
  border-left: 3px solid var(--brand);
  background: var(--bone);
  font-size: .88rem;
  line-height: 1.55;
}
.form-status.is-error { border-left-color: var(--sale); }
.form-status a { text-decoration: underline; text-underline-offset: 2px; }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.chip__n { opacity: .72; font-weight: 500; }

.filters {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding-block: .9rem;
  transition: padding-block .35s var(--ease);
}

/* Segunda fila plegable: al bajar por el catálogo se recoge para no comerse
   un cuarto de la pantalla, y vuelve en cuanto se sube. El relleno superior
   va DENTRO del área recortada — si se pusiera en el propio ítem de rejilla
   contaría en el tamaño mínimo de la pista y la fila nunca cerraría del todo. */
.filters__more {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s var(--ease), opacity .25s var(--ease);
}
.filters__more > div { overflow: hidden; min-height: 0; }
.filters__row--sec { padding-top: 1rem; }

.filters.is-compact { padding-block: .5rem; }
.filters.is-compact .filters__more { grid-template-rows: 0fr; opacity: 0; }
.filters__row {
  display: flex;
  align-items: center;
  gap: .8rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters__row::-webkit-scrollbar { display: none; }
.filters__spacer { flex: 1; min-width: .5rem; }
.select-sort {
  min-height: 38px;
  padding: 0 2.2rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23141414' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1rem center;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  appearance: none;
  cursor: pointer;
}

/* ---------- 21. Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: var(--pad);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.modal.is-on { opacity: 1; visibility: visible; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, .72); backdrop-filter: blur(4px); }
.modal__box {
  position: relative;
  width: min(940px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--white);
  box-shadow: var(--shadow-pop);
  transform: translateY(24px) scale(.98);
  transition: transform .4s var(--ease-out);
}
.modal.is-on .modal__box { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute;
  top: .8rem; right: .8rem;
  z-index: 3;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bone);
  transition: background-color .25s, transform .25s;
}
.modal__close:hover { background: var(--ink); color: var(--white); transform: rotate(90deg); }
.modal__grid { display: grid; }
.modal__media { background: var(--bone); display: grid; place-items: center; padding: 2rem; min-height: 280px; }
.modal__media img { max-height: 340px; width: auto; object-fit: contain; }
.modal__media--cover { padding: 0; }
.modal__media--cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; min-height: 320px; }
.modal__body { padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; align-content: start; }
.modal__price { font-family: var(--font-display); font-size: 2rem; font-weight: 800; }
.modal__specs { display: grid; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .3rem; }
.modal__specs div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.modal__specs dt { color: var(--ink-mute); }
.modal__specs dd { font-weight: 600; text-align: right; }

/* ---------- 22. Toast ---------- */
.toast-stack {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  z-index: 120;
  transform: translateX(-50%);
  display: grid;
  gap: .5rem;
  width: min(420px, calc(100% - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.2rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--white);
  font-size: .82rem;
  box-shadow: var(--shadow-pop);
  transform: translateY(18px);
  opacity: 0;
  animation: toast-in .4s var(--ease-out) forwards;
}
.toast svg { color: var(--brand); flex: none; }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in  { to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(14px); opacity: 0; } }

/* ---------- 23. Locales ---------- */
.store {
  display: grid;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.store__media { position: relative; min-height: 260px; overflow: hidden; background: var(--bone-2); }
.store__media img, .store__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.store__body { background: var(--white); padding: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 1rem; align-content: start; }
.store__rows { display: grid; gap: .55rem; }
.store__row { display: flex; gap: .8rem; align-items: flex-start; font-size: .93rem; }
.store__row svg { flex: none; margin-top: 3px; color: var(--brand); }
.hours { display: grid; gap: .3rem; font-size: .88rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.hours dt { color: var(--ink-mute); }
.hours dd { font-weight: 600; }
.badge-open {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.badge-open::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #21a35b;
  box-shadow: 0 0 0 3px rgba(33, 163, 91, .2);
}
.badge-open.is-closed::before { background: var(--sale); box-shadow: 0 0 0 3px rgba(200, 69, 44, .2); }

/* ---------- 24. Newsletter ---------- */
.news {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.news__inner { display: grid; gap: 2rem; align-items: center; }
.news__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.news__form input {
  flex: 1;
  min-width: 220px;
  padding: .95rem 1.2rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  background: rgba(255, 255, 255, .05);
  color: var(--white);
  font-size: .92rem;
  transition: border-color .25s, background-color .25s;
}
.news__form input::placeholder { color: rgba(255, 255, 255, .4); }
.news__form input:focus { outline: none; border-color: var(--brand); background: rgba(255, 255, 255, .09); }
.news__legal { font-size: .7rem; color: rgba(255, 255, 255, .38); margin-top: .8rem; }

/* ---------- 25. Footer ---------- */
.footer { background: var(--ink); color: var(--white); }

/* Fila 1: marca + columnas de enlaces */
.footer__top {
  display: grid;
  gap: 3rem;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--line-dark);
}
.footer__brand { display: grid; gap: 1.4rem; align-content: start; justify-items: start; }
.footer__claim {
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .5);
  max-width: 32ch;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2.5rem 2rem;
}
.footer__col h2 {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 1.15rem;
}
.footer__col h2::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--brand);
  flex: none;
}
.footer__col ul { display: grid; gap: .05rem; }
.footer__col a {
  display: inline-block;
  padding: .32rem 0;
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  transition: color .25s, transform .3s var(--ease);
}
.footer__col a:hover { color: var(--white); transform: translateX(5px); }

.socials { display: flex; gap: .55rem; }
.social {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .72);
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.social:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); transform: translateY(-3px); }

/* Fila 2: los dos locales como fichas, con espacio para no partir direcciones */
.footer__stores {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border-block: 1px solid var(--line-dark);
}
.fstore {
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  display: grid;
  gap: .95rem;
  align-content: start;
}
.fstore__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fstore__head h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.fstore .badge-open { font-size: .58rem; color: rgba(255, 255, 255, .55); }
.fstore__row {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .55);
}
.fstore__row svg { flex: none; margin-top: 3px; color: var(--brand); }
.fstore__row b { display: block; font-weight: 500; color: rgba(255, 255, 255, .88); }
.fstore__row a { transition: color .2s; }
.fstore__row a:hover { color: var(--white); }
.fstore .link-arrow { justify-self: start; margin-top: .3rem; font-size: .66rem; color: rgba(255, 255, 255, .7); }
.fstore .link-arrow:hover { color: var(--brand); }
.nowrap { white-space: nowrap; }

/* Fila 3: legal. */
.footer__bottom {
  padding-block: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  font-size: .74rem;
  color: rgba(255, 255, 255, .58);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; }
.footer__legal a { transition: color .2s; }
.footer__legal a:hover { color: var(--white); }

/* Fila 4: firma del estudio, en banda propia y centrada.
   El hueco inferior reserva sitio para los botones flotantes, que son
   position: fixed y taparían la firma al llegar al final de la página. La pila
   mide 54 (WhatsApp) + 10 (hueco) + 44 (subir) + 18 (margen) ≈ 126 px; se
   redondea a 140 px de holgura. */
/* Copiado tal cual del pie de CONSULFINCO (CONSULFINCO/css/style.css, «22.
   Pie»), que es la referencia que se pidió replicar: mismos píxeles, mismos
   colores y el mismo archivo de logotipo, byte a byte. Los valores van en px
   como en el original —no en rem— para que no los escale nada.

   Lo medido antes sobre la captura salía un 50 % más grande porque esa captura
   estaba hecha con el navegador al 150 %: la chapa mide 38 px de alto, no 54.

   Única diferencia con el original, y es funcional: el hueco inferior en
   móvil. Ahí los botones flotantes caen encima de la firma centrada, así que
   se reserva su altura. Desde 640 px la firma (≈ 330 px, centrada) ya no
   alcanza ni la pila de la derecha ni la pestaña del 10 % de la izquierda, y
   vuelve a los 32 px del original: con la reserva quedaba una franja negra
   vacía bajo la firma. */
.footer__signature {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 26px 0 var(--fab-clear);
  display: flex;
  justify-content: center;
  font-size: 13.5px;
}
@media (min-width: 640px) {
  .footer__signature { padding-bottom: 32px; }
}
.powered {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; letter-spacing: .04em; color: #7f878d;
}
.powered > span { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.powered a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 100px;
  transition: border-color .25s, background .25s;
}
.powered a:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .05); }
/* background: none no está en el original y aquí hace falta: la regla global de
   img pinta un hueso claro de fondo mientras carga, y rellenaba los huecos del
   nudo hasta dejarlo como un cuadrado. */
.powered img { width: 22px; height: auto; display: block; background: none; }
.powered strong { color: #fff; font-weight: 600; letter-spacing: .01em; font-size: 14px; }

/* ---------- 26. WhatsApp flotante + volver arriba ---------- */
.fab-stack {
  position: fixed;
  right: 1.1rem; bottom: 1.1rem;
  z-index: 45;
  display: grid;
  gap: .6rem;
  justify-items: center;
}
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform .3s var(--ease), opacity .3s, visibility .3s;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab--wa { background: #25d366; color: #fff; }
.fab--top { background: var(--ink); color: var(--white); width: 44px; height: 44px; opacity: 0; visibility: hidden; }
.fab--top.is-on { opacity: 1; visibility: visible; }

/* ---------- 26b. Tarjeta de newsletter ----------
   Deliberadamente poco invasiva: sin velo, sin bloquear el desplazamiento y
   anclada a una esquina. El usuario puede seguir navegando con ella abierta.
   Aparece solo tras cierta permanencia o profundidad de lectura, y recuerda
   la decisión (ver initNudge en app.js). */
.nudge {
  position: fixed;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 44;                       /* por debajo del menú y el buscador */
  width: min(420px, calc(100vw - 2.2rem));
  display: grid;
  grid-template-columns: 116px 1fr;
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s;
}
.nudge.is-on { opacity: 1; visibility: visible; transform: none; }

.nudge__media { position: relative; overflow: hidden; background: var(--ink-soft); }
.nudge__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.nudge__body { padding: 1.35rem 1.4rem 1.25rem; display: grid; gap: .55rem; align-content: start; }
.nudge__eyebrow {
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand);
}
/* Cuerpo ajustado para que "EN TU PRIMERA COMPRA" quepa en una sola línea
   dentro de la columna de texto de la tarjeta. */
.nudge__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.nudge__text { font-size: .8rem; line-height: 1.55; color: rgba(255, 255, 255, .62); }

.nudge__form { display: grid; gap: .55rem; margin-top: .35rem; }
.nudge__form input[type="email"] {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid var(--line-dark);
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  color: var(--white);
  font-size: .85rem;
  transition: border-color .25s, background-color .25s;
}
.nudge__form input[type="email"]::placeholder { color: rgba(255, 255, 255, .38); }
.nudge__form input[type="email"]:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, .1);
}
.nudge__consent {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .68rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
}
.nudge__consent input { margin-top: .15rem; accent-color: var(--brand); flex: none; }
.nudge__consent a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 2px; }
.nudge__consent a:hover { color: var(--brand); }
.nudge.is-bad .nudge__consent { color: var(--sale); }
.nudge.is-bad input[type="email"] { border-color: var(--sale); }

.nudge__later {
  justify-self: start;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  padding: .3rem 0;
  transition: color .25s;
}
.nudge__later:hover { color: var(--white); }

.nudge__close {
  position: absolute;
  top: .5rem; right: .5rem;
  z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, .6);
  background: rgba(20, 20, 20, .55);
  transition: background-color .25s, color .25s, transform .25s;
}
.nudge__close:hover { background: var(--white); color: var(--ink); transform: rotate(90deg); }

@media (max-width: 620px) {
  /* Sobre los botones flotantes, nunca tapándolos */
  .nudge {
    grid-template-columns: 1fr;
    left: 1.1rem;
    right: 1.1rem;
    width: auto;
    bottom: calc(var(--fab-clear) - 4px);
  }
  .nudge__media { display: none; }
  .nudge__body { padding: 1.2rem 1.25rem 1.1rem; }
}

/* Pestaña de esquina: afordancia permanente y mínima de la oferta.
   Al cerrar la tarjeta, esta se repliega aquí en lugar de desaparecer. */
/* Geometría: la caja recorta la cinta en diagonal. La cuerda visible mide
   k·√2, donde k es la distancia de la cinta a la esquina. Con "10% OFF"
   (~60 px) basta una caja pequeña, pegada a la esquina, que apenas invade
   la lectura. */
.offer-tab {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 43;
  width: 108px; height: 108px;
  overflow: hidden;
  pointer-events: none;           /* solo los botones son clicables */
  opacity: 0;
  visibility: hidden;
  transform: translate(-14px, 14px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), visibility .4s;
}
.offer-tab.is-on { opacity: 1; visibility: visible; transform: none; }

.offer-tab__open {
  pointer-events: auto;
  position: absolute;
  left: -50px;                    /* centro de la cinta a ~72 px de la esquina */
  bottom: 24px;
  width: 170px;
  padding: .42rem 0;
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--white);
  text-align: center;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px -8px rgba(0, 0, 0, .5);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.offer-tab__open:hover { background: var(--brand); color: var(--ink); }
.offer-tab__open b { color: var(--brand); font-weight: 800; transition: color .3s; }
.offer-tab__open:hover b { color: var(--ink); }

.offer-tab__close {
  pointer-events: auto;
  position: absolute;
  left: 5px; bottom: 5px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-mute);
  background: var(--white);
  border: 1px solid var(--line);
  transition: background-color .25s, color .25s, transform .25s;
}
.offer-tab__close:hover { background: var(--ink); color: var(--white); transform: rotate(90deg); }

@media (max-width: 620px) {
  .offer-tab { width: 98px; height: 98px; }
  .offer-tab__open { left: -48px; bottom: 20px; width: 160px; font-size: .56rem; }
  .offer-tab__close { width: 22px; height: 22px; left: 4px; bottom: 4px; }
}

/* ---------- 27. Page hero (interiores) ---------- */
.phero {
  background: var(--ink);
  color: var(--white);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}
.phero__inner { display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.phero__glow {
  position: absolute;
  top: -35%; right: -12%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow), transparent 68%);
  pointer-events: none;
}
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .48); }
.crumbs a:hover { color: var(--white); }
/* Sobre fondo claro (fichas de producto): el gris blanco de arriba no se leería */
.crumbs--light { color: var(--ink-mute); }
.crumbs--light a:hover { color: var(--ink); }

/* ---------- 28. Reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---------- 28b. Texto legal ---------- */
.prose { max-width: 72ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  margin-top: 2.9rem;
  margin-bottom: .85rem;
}
.prose p {
  margin-bottom: 1.1rem;
  line-height: 1.8;
  color: var(--ink-mute);
  text-wrap: pretty;
}
.prose ul { display: grid; gap: .65rem; margin-bottom: 1.6rem; }
/* Bloque con viñeta posicionada (no flex): un <li> con texto y <strong>
   mezclados se partiría en columnas si fuera un contenedor flex. */
.prose li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.7;
  color: var(--ink-mute);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: .66rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--ink); }

/* Coberturas de garantía: término + plazo + detalle */
.warranty {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 2.25rem;
}
.warranty__item {
  background: var(--white);
  padding: 1.35rem 1.5rem;
  display: grid;
  gap: .5rem;
}
.warranty__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1rem;
}
.warranty__term {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.warranty__period {
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: rgba(40, 182, 210, .1);
  padding: .32rem .75rem;
  border-radius: 100px;
  white-space: nowrap;
}
.warranty__item p { margin: 0; font-size: .93rem; line-height: 1.7; color: var(--ink-mute); }

/* Aviso destacado */
.callout {
  background: var(--bone);
  border-left: 3px solid var(--brand);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.5rem;
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.prose .note {
  font-size: .85rem;
  color: var(--ink-mute);
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  margin-bottom: .9rem;
}

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 2.5rem;
}
.legal-meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- 29. Utilidades ---------- */
.stack   { display: grid; gap: 1.25rem; }
.stack-s { display: grid; gap: .65rem; }
.row     { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center  { text-align: center; justify-items: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.hide { display: none !important; }
.text-brand { color: var(--brand); }
.empty {
  padding: 4rem 1rem;
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
  color: var(--ink-mute);
  grid-column: 1 / -1;
  background: var(--white);
}

/* ---------- 30. Breakpoints ---------- */
@media (min-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-auto-columns: minmax(260px, 44vw); }
  .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .news__form { flex-wrap: nowrap; }
}

@media (min-width: 860px) {
  :root { --header-h: 80px; }
  .hero__scroll { display: flex; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .store { grid-template-columns: 1.05fr 1fr; }
  .modal__grid { grid-template-columns: 1.05fr 1fr; }
  .news__inner { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .footer__top { grid-template-columns: minmax(240px, .85fr) 2fr; gap: 5rem; }
  .footer__stores { grid-template-columns: 1fr 1fr; }
  /* Canales simétricos respecto a la divisoria central: el contenido de cada
     ficha se separa lo mismo de la línea, y los bordes exteriores siguen
     alineados con el resto del pie. */
  .footer__stores .fstore:nth-child(1) { padding-right: clamp(1.6rem, 3vw, 2.4rem); }
  .footer__stores .fstore:nth-child(2) { padding-left:  clamp(1.6rem, 3vw, 2.4rem); }
  .ed-row { grid-template-columns: 1fr 1fr; }
  .ed-row--flip .ed-media { order: 2; }
  .tech__grid { grid-template-columns: 1.15fr 1fr; }
  .rail { grid-auto-columns: minmax(280px, 30vw); }
}

@media (min-width: 1080px) {
  .nav { display: flex; }
  .tool--burger { display: none; }
  .tool--cta { display: inline-flex; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .rail { grid-auto-columns: minmax(300px, 23vw); }
  .mega__grid { grid-template-columns: repeat(4, 1fr) 1.15fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .promo, .fab-stack, .footer, .news, .drawer, .scrim, .search { display: none !important; }
  body { color: #000; }
}