/* ==========================================================================
   Lutz Ferrando · Rediseño 2027
   Lenguaje moderno y avanzado: tipografía Aeonik (la de agonProp), juego de
   pesos (light 300 ↔ bold 700), aire generoso, grano sutil, aurora animada,
   gradientes, glass puntual, radios amplios y micro-interacciones. Sin serif.
   ========================================================================== */
@font-face { font-family: "Aeonik"; src: url("fonts/aeonik/Aeonik-Light.ttf")   format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/aeonik/Aeonik-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/aeonik/Aeonik-Medium.ttf")  format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("fonts/aeonik/Aeonik-Bold.ttf")    format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* marca */
  --verde: #069280;      /* color exacto del logo */
  --verde-osc: #0A7E6D;  /* teal del logo para secciones (herencia, newsletter, anuncio) */
  --verde-nte: #086A5C;  /* teal un punto más profundo (footer, CTA sucursales) */
  --verde-cl: #14B49E;   /* teal claro (acentos y gradientes) */
  --verde-txt: #0A7A67;  /* teal para texto/acentos sobre blanco (WCAG AA) */
  --menta: #D3F0EA;
  --agua: #E7F5F1;
  --agua-2: #F2FAF8;

  /* neutros cálidos, aire premium */
  --tinta: #0E1C18;
  --tinta-2: #33413C;
  --gris: #5E6B66;
  --linea: #E8ECE9;
  --linea-2: #EFF2F0;
  --hueso: #F7F9F8;      /* blanco frío, sin tibieza (la clienta no quiere beige) */
  --crema: #E7F4EF;      /* verde muy claro: reemplaza el beige de cards/hero/repisas */
  --beige-sec: #F2F5F4;  /* gris claro frío para FONDOS de sección (era beige) */

  /* acento cálido, guiño al bronce del edificio de Florida 238 */
  --bronce: #B08D57;
  --bronce-cl: #CBAE80;

  --radio: 18px;
  --radio-lg: 28px;
  --radio-xl: 38px;

  --sombra-xs: 0 1px 2px rgba(14,28,24,.05);
  --sombra: 0 1px 2px rgba(14,28,24,.04), 0 10px 30px rgba(14,28,24,.07);
  --sombra-alta: 0 6px 16px rgba(14,28,24,.08), 0 34px 66px rgba(14,28,24,.16);

  --sans: 'Aeonik', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--sans);
  --serif: var(--sans); /* alias de compatibilidad — todo Aeonik */

  --ancho: 1260px;
  --ease: cubic-bezier(.22,.68,0,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--hueso);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
::selection { background: var(--verde-cl); color: #fff; }

.contenedor { max-width: none; width: 100%; margin: 0 auto; padding: 0 clamp(24px, 4vw, 72px); }
.seccion { padding: 96px 0; }
.seccion--ap { padding: 108px 0; }
/* La última sección (newsletter) conecta directo con el footer, sin aire */
main > .seccion:last-child { padding-bottom: 0; }

/* barra de progreso de scroll */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; pointer-events: none; }
.progreso span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--verde), var(--verde-cl)); box-shadow: 0 0 12px rgba(20,180,158,.6); }

/* grano sutil reutilizable */
.grano::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* aparición al hacer scroll */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .anuncio__pista, .marquee__grp, .aurora span { animation: none !important; }
  * { scroll-behavior: auto; }
}

/* ── Tipografía ─────────────────────────────────────────────────────── */
.display { font-family: var(--display); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--verde-txt);
}
.kicker::before { content: ""; width: 18px; height: 2px; background: currentColor; opacity: .55; }
.kicker--bronce { color: #D8C09B; }
.sec-head.centro .kicker { justify-content: center; }

.sec-head { max-width: 680px; margin-bottom: 54px; }
.sec-head.centro { margin-inline: auto; text-align: center; }
.sec-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.1rem, 3.8vw, 3.15rem); line-height: 1.03; margin-top: 16px; letter-spacing: -.035em; }
.sec-head p { margin-top: 18px; color: var(--gris); font-size: 1.06rem; font-weight: 400; max-width: 60ch; }
.sec-head.centro p { margin-inline: auto; }
.grad { background: linear-gradient(115deg, var(--verde) 10%, var(--verde-cl) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* títulos: juego de pesos (base liviana + palabra clave en negrita, estilo "NEW ARRIVALS") */
/* (juego de pesos definido al FINAL del archivo para ganar a las reglas por-sección) */

/* ── Botones ───────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 500; font-size: .95rem; padding: 15px 27px; border-radius: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap; border: 1.5px solid transparent; overflow: hidden; isolation: isolate;
}
.btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.btn--primario { background: var(--verde-txt); color: #fff; box-shadow: 0 6px 16px rgba(15,87,72,.18); }
.btn--primario::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28), transparent 80%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn--primario:hover { background: var(--verde-nte); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,87,72,.28); }
.btn--primario:hover::after { transform: translateX(120%); }
.btn--primario:hover svg { transform: translateX(3px); }
.btn--tinta { background: var(--tinta); color: #fff; }
.btn--tinta:hover { background: #000; transform: translateY(-2px); }
.btn--linea { border-color: var(--linea); color: var(--tinta); background: #fff; box-shadow: var(--sombra-xs); }
.btn--linea:hover { border-color: var(--verde); color: var(--verde-osc); transform: translateY(-2px); box-shadow: var(--sombra); }
.btn--claro { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.btn--claro:hover { background: rgba(255,255,255,.24); transform: translateY(-2px); }
.btn--fantasma { color: var(--verde-osc); padding-inline: 4px; font-weight: 500; }
.btn--fantasma:hover { gap: 12px; }
.btn--fantasma:hover svg { transform: translateX(3px); }

/* foco visible accesible (teclado) */
:where(a, button, input, summary, .btn, .iconbtn, .nav__link):focus-visible { outline: 2px solid var(--verde-txt); outline-offset: 2px; border-radius: 6px; }
.footer :focus-visible, .suc-cta :focus-visible, .herencia :focus-visible, .news :focus-visible, .anuncio :focus-visible { outline-color: #fff; }

/* ══════════════ Barra de anuncios ══════════════ */
.anuncio { background: var(--verde-osc); color: #fff; font-size: .82rem; letter-spacing: .01em; overflow: hidden; }
.anuncio__pista { display: flex; align-items: center; gap: 54px; padding: 10px 0; white-space: nowrap; animation: correr 38s linear infinite; }
.anuncio__pista span { display: inline-flex; align-items: center; gap: 9px; opacity: .94; }
.anuncio__pista b { color: #57D6BC; font-weight: 700; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══════════════ Header ══════════════ */
/* .lf-frame envuelve solo anuncio+header (no el contenido): display:contents
   saca su caja para que el header quede sticky relativo al viewport, también
   en el home mobile (donde el header pasa a position:sticky). */
.lf-frame { display: contents; }
.header { position: sticky; top: 0; z-index: 900; background: rgba(252,251,248,.82); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--linea); }
.header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 15px 0; }
.header__logo { justify-self: start; display: inline-flex; align-items: center; }
.header__logo img { height: auto; max-height: 38px; width: auto; max-width: 100%; }
.header__logo .marca, .header__logo .nombre { display: none; }

.nav { justify-self: center; display: flex; gap: 2px; position: relative; }
.nav__item { position: static; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; font-size: .95rem; font-weight: 500; transition: color .18s var(--ease); }
/* Hover en forma de "L" (la L de Lutz): traza vertical desde la primera letra + horizontal hasta el final */
.nav__link::before { content: ""; position: absolute; left: 4px; bottom: 6px; width: 2px; height: 0; background: var(--verde-txt); transition: height .22s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 4px; bottom: 6px; height: 2px; width: 0; background: var(--verde-txt); transition: width .3s var(--ease) .07s; }
.nav__link:hover, .nav__item:hover .nav__link { color: var(--verde-osc); background: transparent; }
.nav__link:hover::before, .nav__item:hover .nav__link::before { height: calc(100% - 15px); }
.nav__link:hover::after, .nav__item:hover .nav__link::after { width: calc(100% - 9px); }
.nav__link svg { width: 13px; height: 13px; opacity: .5; transition: transform .25s var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

/* mega menú */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  width: max-content; min-width: 760px; max-width: 96vw; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta); padding: 24px 24px; opacity: 0; visibility: hidden; transition: .26s var(--ease);
  display: flex; gap: 28px; align-items: flex-start;
}
/* Grupos en FILA (columnas lado a lado): el mega se despliega a lo ancho y
   queda corto (nada de scroll vertical). Cada grupo es una columna al tope. */
.mega__cols { display: flex; gap: 20px; align-items: flex-start; flex: 1 1 auto; }
.mega__col { flex: 0 0 auto; min-width: 124px; }
.mega__col--wide { flex: 0 0 auto; width: 348px; min-width: 348px; columns: 2; column-gap: 18px; }
.mega__col--wide > h4 { column-span: all; }
.mega__col--wide > .mega__link { break-inside: avoid; font-size: .88rem; padding: 6px 9px; white-space: nowrap; }
.mega__link--all { color: var(--verde-txt); font-weight: 600; }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__col h4 { position: relative; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; margin-bottom: 12px; padding: 0 12px 9px; border-bottom: 1px solid var(--linea); }
.mega__col h4::after { content: ""; position: absolute; left: 12px; bottom: -1px; width: 22px; height: 2px; background: var(--verde-txt); border-radius: 2px; }
.mega__link { display: block; padding: 9px 12px; border-radius: 11px; font-size: .92rem; font-weight: 500; color: var(--tinta-2); transition: .16s var(--ease); white-space: nowrap; }
.mega__link:hover { background: var(--agua-2); color: var(--verde-osc); transform: translateX(3px); }
.mega__promo { flex: 0 0 212px; align-self: auto; border-radius: 18px; overflow: hidden; position: relative; height: 300px; background: var(--crema); display: block; transition: transform .3s var(--ease); }
.mega__promo:hover { transform: translateY(-3px); }
.mega__promo img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 26px 22px 58px; mix-blend-mode: multiply; }
.mega__promo .cap { position: absolute; inset: auto 0 0 0; padding: 16px; background: linear-gradient(transparent, rgba(14,28,24,.85)); color: #fff; z-index: 1; }
.mega__promo .cap b { font-weight: 700; font-size: 1.02rem; }
.mega__promo .cap span { display: block; font-size: .8rem; opacity: .85; margin-top: 2px; }

.header__acc { justify-self: end; display: flex; align-items: center; gap: 4px; }
.iconbtn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--tinta); transition: .18s var(--ease); position: relative; }
.iconbtn:hover { background: var(--agua); color: var(--verde-osc); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .cont { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--verde); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.hamb { display: none; }

/* ══════════════ Hero editorial (claro, aireado, con aurora) ══════════════ */
.hero { position: relative; overflow: hidden; background:
  radial-gradient(120% 90% at 88% 6%, var(--menta) 0%, transparent 46%),
  radial-gradient(90% 70% at 2% 100%, #F0EDE4 0%, transparent 50%),
  var(--hueso); }
.hero .grano::before { opacity: .32; }
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(70px); }
.aurora .b1 { width: 460px; height: 460px; background: rgba(20,180,158,.5); top: -140px; right: -60px; animation: flotar1 15s var(--ease) infinite; }
.aurora .b2 { width: 380px; height: 380px; background: rgba(203,174,128,.42); bottom: -160px; left: -40px; animation: flotar2 18s var(--ease) infinite; }
.aurora .b3 { width: 300px; height: 300px; background: rgba(6,146,128,.28); top: 30%; left: 42%; animation: flotar1 22s var(--ease) infinite reverse; }
@keyframes flotar1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,-26px) scale(1.08); } }
@keyframes flotar2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-28px,30px) scale(1.1); } }

.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(32px, 5vw, 78px); padding: clamp(48px, 6vw, 100px) 28px clamp(56px, 6vw, 108px); }
.hero__chip { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 500; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.7); backdrop-filter: blur(8px); border: 1px solid var(--linea); box-shadow: var(--sombra-xs); color: var(--tinta-2); }
.hero__chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(20,180,158,.18); }
.hero__chip b { color: var(--verde-osc); font-weight: 700; }
.hero h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.3rem, 4.7vw, 3.7rem); line-height: 1.02; letter-spacing: -.035em; margin-top: 24px; }
.hero h1 .l1 { white-space: nowrap; }
.hero h1 em { font-style: normal; font-weight: 700; background: linear-gradient(115deg, var(--verde) 0%, var(--verde-cl) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: 28px; font-size: 1.16rem; max-width: 46ch; color: var(--tinta-2); font-weight: 400; }
.hero__cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__stats { margin-top: 46px; display: flex; gap: 42px; }
.hero__stats b { display: block; font-family: var(--display); font-weight: 500; font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; color: var(--verde-osc); }
.hero__stats span { font-size: .82rem; color: var(--gris); margin-top: 7px; display: block; }

/* figura del hero */
.hero__fig { position: relative; }
.hero__foto { position: relative; border-radius: var(--radio-xl); overflow: hidden; aspect-ratio: 16/9; box-shadow: var(--sombra-alta); background: var(--crema) center/cover no-repeat; }
.hero__foto img { width: 100%; height: 108%; object-fit: cover; will-change: transform; }
/* video de YouTube embebido como fondo nativo (sin controles ni marca de YT),
   escala > 100% para empujar el título/logo de YouTube fuera del marco */
.hero__yt, .vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transform: scale(1.34); transform-origin: center; pointer-events: none; z-index: 1; }
.hero__yt-block { position: absolute; inset: 0; z-index: 2; }

/* ══════════════ Hero split (promo + lifestyle) ══════════════ */
.hero2 { position: relative; display: grid; grid-template-columns: 1.9fr 1fr; min-height: 100vh; }
.hero2__left { background: var(--crema); display: flex; align-items: center; justify-content: center; padding: 116px 6% 52px; }
.hero2__promo { width: 100%; max-width: 440px; text-align: center; }
.hero2__badge { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--verde-txt); background: var(--menta); padding: 7px 16px; border-radius: 999px; }
.hero2__nom { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: .92; letter-spacing: -.045em; margin-top: 18px; }
.hero2__prodimg { margin: 38px auto 32px; max-width: 380px; }
/* nav compacto en el home para que entre sobre la columna clara */
.home .nav { gap: 0; }
.home .nav__link { padding: 9px 11px; font-size: .9rem; }
.hero2__prodimg img { width: 100%; height: 280px; object-fit: cover; object-position: center; mix-blend-mode: multiply; transition: transform .55s var(--ease); will-change: transform; }
.hero2__promo:hover .hero2__prodimg img { transform: translateY(-14px) scale(1.06) rotate(-3deg); }
.hero2__precio { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.hero2__precio .ahora { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.hero2__precio .antes { font-size: 1.05rem; color: var(--gris); text-decoration: line-through; }
.hero2__cuotas { font-size: .9rem; color: var(--verde-osc); font-weight: 500; margin-top: 6px; }
.hero2__acc { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }

.hero2__right { position: relative; z-index: 2; overflow: visible; background:
  radial-gradient(120% 85% at 64% 24%, rgba(255,255,255,.12), transparent 58%),
  linear-gradient(150deg, #3a423f 0%, #1c2320 56%, var(--tinta) 100%); }
/* La mujer (recorte transparente) sale del box hacia la izquierda: su codo
   cruza a la columna crema y conecta visualmente las dos mitades del hero. */
.hero2__woman { position: absolute; right: -8px; bottom: 0; top: auto; height: 114%;
  width: auto; max-width: none; z-index: 3; pointer-events: none;
  filter: drop-shadow(-30px 16px 28px rgba(0,0,0,.34)); }
/* Máscara crema anclada a la costura (65.517% = 1.9/2.9): oculta el derrame
   de las piernas sobre la columna izquierda; el codo queda por encima. */
.hero2__tapa { position: absolute; right: 34.483%; bottom: 0; width: 17%; height: 43%;
  z-index: 6; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, var(--crema) 30px); }
.hero2__right::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background:
  linear-gradient(to top, rgba(14,28,24,.92) 1%, rgba(14,28,24,.30) 33%, transparent 55%); }
.hero2__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: clamp(32px, 4vw, 60px); max-width: 560px; color: #fff; }
.hero2__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--verde-cl); }
.hero2__eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.hero2__over h2 { font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.04em; margin-top: 14px; }
.hero2__over p { margin-top: 14px; font-size: 1.02rem; color: rgba(255,255,255,.86); max-width: 42ch; }
.hero2__over .btn { margin-top: 24px; }

/* ══════════════ Sección film (video de campaña, full-bleed) ══════════════ */
.film { padding: 96px 0 0; }
.film__marco { position: relative; width: 100%; height: clamp(380px, 48vw, 800px); margin-top: 44px; overflow: hidden; background: linear-gradient(150deg, #3a423f 0%, #1c2320 56%, var(--tinta) 100%); }

/* ══════════════ Hombres / Mujeres ══════════════ */
.generos { padding-bottom: 0; background: var(--beige-sec); }
.generos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; margin-top: 44px; }
.genero { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 4.4; background: var(--crema); }
.genero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .7s var(--ease); }
.genero:hover img { transform: scale(1.05); }
.genero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,28,24,.72), rgba(14,28,24,.06) 52%, transparent); }
.genero__cap { position: absolute; inset: auto 0 0 0; z-index: 1; padding: clamp(24px, 3vw, 42px); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; color: #fff; }
.genero__lbl { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.8rem); letter-spacing: -.03em; line-height: 1; }
.genero__cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .92rem; padding-bottom: 6px; white-space: nowrap; transition: gap .25s var(--ease); }
.genero:hover .genero__cta { gap: 12px; }
.genero__cta svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .generos__grid { grid-template-columns: 1fr; } .genero { aspect-ratio: 5 / 4; } }

/* ══════════════ Logo destacado: fondo blanco desde el borde superior (home) ══ */
.home .header__logo { position: relative; }
.home .header .header__logo::before { display: none; }
.home .header.solid .header__logo::before { opacity: 0; }
.header__logo img { transition: transform .45s var(--ease); }
.header__logo:hover img { transform: translateY(-2px) scale(1.06); }

/* ══════════════ Header integrado al hero (solo home) ══════════════ */
.home .anuncio { display: none; }
.home .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: none; transition: background .3s var(--ease), border-color .3s var(--ease); }
.home .header__row { display: flex; align-items: center; gap: 58px; padding-inline: clamp(24px, 4vw, 72px); }
.home .header__acc { margin-left: auto; }
.home .header__acc .iconbtn { color: #fff; }
.home .header__acc .iconbtn:hover { background: rgba(255,255,255,.18); color: #fff; }
.home .header.solid { background: #fff; backdrop-filter: none; border-bottom-color: var(--linea); }
.home .header.solid .header__acc .iconbtn { color: var(--tinta); }
.home .header.solid .header__acc .iconbtn:hover { background: var(--agua); color: var(--verde-osc); }
/* en pantallas donde el nav se montaría sobre la foto oscura, pasa a hamburguesa */
@media (max-width: 1300px) { .home .nav { display: none; } .home .hamb { display: grid; } }
/* hero split apilado en tablet/mobile */
@media (max-width: 980px) {
  .hero2 { grid-template-columns: 1fr; min-height: auto; overflow-x: clip; }
  .hero2__left { padding: 44px 22px 150px; }
  /* Destacado más compacto en móvil: que la 2da fila (foto) asome en la primera pantalla */
  .hero2__nom { font-size: clamp(2.2rem, 8vw, 2.9rem); margin-top: 10px; }
  .hero2__prodimg { margin: 16px auto 12px; max-width: 300px; }
  .hero2__prodimg img { width: 100%; height: 200px; margin: 0 auto; display: block; }
  .hero2__acc { margin-top: 18px; }
  .hero2__right { min-height: 56vh; background: linear-gradient(155deg, #2b322f 0%, var(--tinta) 62%); }
  /* En 1 columna el efecto "codo fuera del box" no aplica: centrar la figura y ocultar la máscara de la costura */
  .hero2__tapa { display: none; }
  /* La cabeza/hombros de la chica salen hacia arriba, cruzando al box del destacado (equivalente móvil del "codo fuera del box" de PC) */
  .hero2__woman { right: auto; left: 50%; transform: translateX(-50%); height: 150%; z-index: 3; filter: drop-shadow(0 14px 22px rgba(0,0,0,.28)); }
  .home .header__acc .iconbtn, .home .header.solid .header__acc .iconbtn { color: var(--tinta); }
  .home .header__acc .iconbtn:hover { background: var(--agua); color: var(--verde-osc); }
  /* Header BLANCO sólido en móvil/tablet (no transparente sobre el hero) */
  .home .header { position: sticky; background: #fff; backdrop-filter: none; border-bottom-color: var(--linea); }
  .home .header .header__logo::before { display: none; }
}
.hero__ring { position: absolute; right: -14px; top: -14px; width: 92px; height: 92px; border: 1.5px solid var(--bronce-cl); border-radius: 50%; opacity: .6; }
.hero__tarjeta { position: absolute; left: -22px; bottom: 28px; display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.72); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.7); border-radius: 18px; padding: 12px 16px 12px 12px; box-shadow: var(--sombra-alta); max-width: 264px; will-change: transform; }
.hero__tarjeta img { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: var(--crema); padding: 6px; mix-blend-mode: multiply; }
.hero__tarjeta .m { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; }
.hero__tarjeta .n { display: block; font-size: .86rem; font-weight: 500; line-height: 1.25; margin: 3px 0; }
.hero__tarjeta .p { display: block; font-size: .95rem; font-weight: 700; }
.hero__sello { position: absolute; right: 20px; top: 22px; display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 500; color: var(--tinta); background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 8px 14px; box-shadow: var(--sombra); }
.hero__sello svg { width: 14px; height: 14px; color: var(--bronce); }

/* ══════════════ Barra de confianza ══════════════ */
.confianza { background: #fff; border-top: 1px solid var(--linea); }
.confianza__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.confianza__it { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 48px 26px; border-left: 1px solid var(--linea); transition: background .25s var(--ease); }
.confianza__it:hover { background: var(--agua-2); }
.confianza__it:first-child { border-left: 0; }
.confianza__it .ic { display: grid; place-items: center; }
.confianza__it svg { width: 36px; height: 36px; color: var(--verde-txt); }
.confianza__it b { display: block; font-size: 1rem; font-weight: 700; }
.confianza__it span { font-size: .85rem; color: var(--gris); margin-top: 2px; }

/* ══════════════ Categorías (bento simétrico) ══════════════ */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 100px; }
.cat { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--radio-lg); padding: 214px 22px 24px; text-align: center; box-shadow: var(--sombra-xs); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.cat:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); }
/* Fondo editable de cada tarjeta: el color llega por la variable --cat-bg (inline en lf-home.tpl,
   tomada de settings.home_catN_bg -> panel Personalizar » Portada » "Categorías · colores de las tarjetas").
   Encima va un brillo sutil fijo para dar profundidad con cualquier color elegido. */
.cat { background-image: linear-gradient(158deg, rgba(255,255,255,.30), rgba(255,255,255,0)); background-color: var(--cat-bg, #e3ede9); }
.cat--a { --cat-bg: #DDEDE7; }
.cat--b { --cat-bg: #EDE4D3; }
.cat--c { --cat-bg: #DAE8E5; }
.cat--d { --cat-bg: #E4E9E7; }
/* el producto se sale del box por arriba (inmersivo) */
.cat__prod { position: absolute; top: -84px; left: 50%; transform: translateX(-50%); width: auto; height: auto; max-width: 100%; max-height: 270px; object-fit: contain; z-index: 3; filter: drop-shadow(0 20px 22px rgba(14,28,24,.28)); transition: transform .5s var(--ease); pointer-events: none; }
.cat:hover .cat__prod { transform: translateX(-50%) translateY(-10px) scale(1.05); }
.cat__ic { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); color: var(--verde-osc); opacity: .9; transition: transform .5s var(--ease); }
.cat__ic svg { width: 100px; height: 100px; }
.cat:hover .cat__ic { transform: translateX(-50%) translateY(-8px); }
.cat__cap h3 { font-family: var(--display); font-size: 1.24rem; font-weight: 500; line-height: 1.08; letter-spacing: -.02em; }
.cat__cap span { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .84rem; margin-top: 9px; color: var(--verde-osc); font-weight: 500; transition: gap .25s var(--ease); }
.cat:hover .cat__cap span { gap: 12px; }
.cat__cap span svg { width: 14px; height: 14px; }

/* ══════════════ Productos ══════════════ */
.prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 60px; }
/* Mismo diseño que las tarjetas del listado de productos: borde sutil, sin sombra,
   imagen flotando sobre fondo transparente (sin el recuadro verde). */
.prod { position: relative; display: flex; flex-direction: column; justify-content: flex-start; background: #fff; border: 1px solid rgba(14,28,24,.09); box-shadow: none; border-radius: 22px; padding: 26px 14px 20px; overflow: visible; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
.prod::before { display: none; }
.prod:hover { box-shadow: var(--sombra); transform: translateY(-4px); border-color: rgba(14,28,24,.14); }
/* Repisa flexible: la foto se apoya en el fondo del área (align-end) y queda pegada al título.
   El alto se adapta al alto real de cada foto; las fotos altas sobresalen hacia arriba (overflow visible), como el listado. */
.prod__media { display: flex; align-items: flex-end; justify-content: center; height: 172px; overflow: visible; }
.prod__prod { width: auto; height: auto; max-width: 96%; max-height: 194px; object-fit: contain; object-position: center bottom; z-index: 2; mix-blend-mode: multiply; transition: transform .5s var(--ease); pointer-events: none; }
.prod:hover .prod__prod { transform: translateY(-6px) scale(1.03); }
.prod__tag { margin-top: auto; margin-bottom: 9px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: 5px 10px; border-radius: 999px; }
.tag--off { background: var(--verde-txt); color: #fff; }
.tag--envio { background: var(--verde-nte); color: #fff; }
.prod__fav { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); display: grid; place-items: center; box-shadow: var(--sombra-xs); opacity: 0; transform: translateY(-4px); transition: .25s var(--ease); z-index: 4; }
.prod:hover .prod__fav { opacity: 1; transform: none; }
.prod__fav svg { width: 16px; height: 16px; color: var(--gris); }
.prod__fav:hover svg { color: var(--verde); }
.prod__body { padding: 16px 4px 4px; text-align: left; display: flex; flex-direction: column; flex: 1; }
.prod__marca { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; }
.prod__nom { font-size: .96rem; font-weight: 500; margin-top: 5px; line-height: 1.34; min-height: 2.6em; }
.prod__precio { display: flex; align-items: baseline; gap: 9px; }
.prod__precio .ahora { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
.prod__precio .antes { font-size: .85rem; color: var(--gris); text-decoration: line-through; }
.prod__cuotas { font-size: .78rem; color: var(--verde-osc); margin-top: 4px; font-weight: 500; }

/* ══════════════ Herencia (editorial oscuro) ══════════════ */
.herencia { background: var(--agua-2); color: var(--tinta); position: relative; overflow: hidden; }
.herencia__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
.herencia__txt { position: relative; align-self: center; padding: clamp(64px, 7vw, 108px) clamp(32px, 4vw, 64px) clamp(64px, 7vw, 108px) clamp(24px, 4vw, 72px); }
.herencia__txt > * { position: relative; z-index: 1; }
.herencia__txt h2 { font-family: var(--display); font-weight: 300; font-size: clamp(2rem, 3.3vw, 3rem); line-height: 1.04; margin-top: 18px; letter-spacing: -.035em; color: var(--tinta); }
.herencia__txt p { margin-top: 20px; color: var(--gris); font-size: 1.04rem; max-width: 48ch; }
.herencia__sellos { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.sello { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 500; color: var(--tinta-2); padding: 9px 14px; background: #fff; border: 1px solid var(--linea); }
.sello svg { width: 15px; height: 15px; color: var(--verde-txt); }
.herencia__media { position: relative; overflow: hidden; min-height: 540px; background: var(--agua); }
.herencia__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.herencia__media .flotante { position: absolute; left: 0; bottom: 40px; z-index: 2; background: #fff; color: var(--tinta); padding: 20px 26px; box-shadow: var(--sombra-alta); }
.herencia__media .flotante b { font-family: var(--display); font-size: 2.3rem; font-weight: 700; color: var(--verde-txt); display: block; line-height: 1; letter-spacing: -.03em; }
.herencia__media .flotante span { font-size: .82rem; color: var(--gris); margin-top: 5px; display: block; }

/* ══════════════ Marcas (marquee kinético) ══════════════ */
.marcas { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #fff; padding: 46px 0; }
.marcas__lbl { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; margin-bottom: 32px; }
.marcas__lbl::before, .marcas__lbl::after { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .5; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__grp { display: flex; align-items: center; gap: 62px; padding-right: 62px; flex-shrink: 0; animation: desliza 34s linear infinite; }
.marquee span { position: relative; font-family: var(--display); font-size: 1.55rem; font-weight: 500; color: var(--tinta-2); opacity: .66; letter-spacing: -.02em; transition: .25s var(--ease); white-space: nowrap; }
.marquee span::after { content: ""; position: absolute; right: -33px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--bronce-cl); transform: translateY(-50%); opacity: .75; }
.marquee span:hover { opacity: 1; color: var(--verde-txt); }
/* Logos de marcas: a color real, altura uniforme, leve realce al pasar el mouse */
.marca-logo { opacity: 1; }
.marca-logo::after { display: none; }
.marca-logo img { height: 34px; width: auto; max-width: 200px; display: block; object-fit: contain; opacity: .92; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.marca-logo:hover img { opacity: 1; transform: scale(1.06); }
@keyframes desliza { to { transform: translateX(-100%); } }

/* ══════════════ Franja lentes de contacto ══════════════ */
.lentes { background: var(--beige-sec); }
.lentes__grid { display: grid; grid-template-columns: .92fr 1.2fr; gap: 56px; align-items: center; }
.lentes__grid h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; }
.lentes__promo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 44px; }
/* Cards de lentes: producto contenido dentro de un panel tintado (no inmersivo:
   los stacks de cajas Acuvue quedan desprolijos saliendo del box) + info consistente. */
.promo { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--radio-lg); overflow: hidden; box-shadow: var(--sombra-xs); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.promo:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.promo__media { position: relative; height: 190px; display: flex; align-items: center; justify-content: center; padding: 12px; background: #fff; }
.promo__prod { max-width: 96%; max-height: 166px; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.promo:hover .promo__prod { transform: translateY(-4px) scale(1.05); }
.promo__body { padding: 18px 20px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.promo h4 { font-size: 1.02rem; font-weight: 700; color: var(--tinta); letter-spacing: -.01em; }
.promo__meta { font-size: .8rem; color: var(--gris); }
.promo .p { margin-top: 8px; font-size: 1.16rem; font-weight: 700; color: var(--verde-txt); }
.promo__badge { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--verde-txt); }
.promo__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-cl); }

/* ══════════════ Obras sociales — muro de logos (matriz con hairlines) ══════════════ */
.obras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--linea); border: 1px solid var(--linea);
  max-width: 1000px; margin: 12px auto 0; }
.obra-log { background: #fff; min-height: 156px; display: flex; align-items: center; justify-content: center;
  padding: 34px 30px; transition: background .3s var(--ease); }
.obra-log img { max-height: 56px; max-width: 82%; width: auto; object-fit: contain;
  transition: transform .4s var(--ease); }
.obra-log:hover { background: var(--agua-2); }
.obra-log:hover img { transform: scale(1.08); }
.obras__pie { text-align: center; margin-top: 26px; font-size: .95rem; color: var(--gris); }
.obras__pie a { color: var(--verde-txt); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
@media (max-width: 860px) {
  .obras { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .obra-log { min-height: 118px; padding: 22px 16px; }
  .obra-log img { max-height: 44px; max-width: 84%; }
  .obras > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ══════════════ Sucursales CTA ══════════════ */
.suc-cta { position: relative; border-radius: var(--radio-xl); overflow: hidden; background: var(--verde-nte); color: #fff; box-shadow: var(--sombra-alta); }
.suc-cta__mapa { position: absolute; z-index: 1; right: 2%; top: 50%; transform: translateY(-50%); height: 172%; width: auto; opacity: .13; pointer-events: none; user-select: none; }
.suc-cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; }
.suc-cta__txt { padding: 60px; }
.suc-cta__txt h2 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.04; margin-top: 16px; letter-spacing: -.035em; }
.suc-cta__txt p { margin-top: 18px; color: rgba(255,255,255,.82); max-width: 44ch; }
.suc-cta__txt .btn { margin-top: 30px; }
.suc-cta__txt .btn--primario { background: #fff; color: var(--verde-nte); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.suc-cta__txt .btn--primario:hover { background: var(--crema); color: var(--verde-nte); }
/* panel de cobertura: ciudades reales, claro y simétrico */
.suc-cta__cob { position: relative; padding: 44px; display: flex; align-items: center; background:
  radial-gradient(circle at 26% 30%, rgba(20,180,158,.26), transparent 46%),
  radial-gradient(circle at 78% 74%, rgba(203,174,128,.16), transparent 46%),
  rgba(255,255,255,.03); border-left: 1px solid rgba(255,255,255,.08); }
.suc-cta__cob::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 26px 26px; }
.cob__grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.cob__ciudad { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-radius: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .9rem; font-weight: 500; transition: .2s var(--ease); }
.cob__ciudad:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.cob__ciudad svg { width: 16px; height: 16px; color: var(--menta); flex-shrink: 0; }
.cob__ciudad b { font-weight: 700; }
.cob__ciudad--sum { background: transparent; border-color: transparent; color: rgba(255,255,255,.75); font-weight: 400; }

/* ══════════════ Blog / consejos ══════════════ */
.blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post { display: flex; flex-direction: column; background: #fff; box-shadow: var(--sombra-xs); border-radius: var(--radio-lg); overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.post:hover { box-shadow: var(--sombra-alta); transform: translateY(-6px); }
.post__fig { aspect-ratio: 16/11; position: relative; overflow: hidden; display: grid; place-items: center; }
.post__fig.f-a { background: linear-gradient(158deg, #e8f3ef, #d3e7e0); }
.post__fig.f-b { background: linear-gradient(158deg, #e8f2f0, #ccdedb); }
.post__fig.f-c { background: linear-gradient(158deg, #f4efe4, #e6d9c3); }
.post__fig img { width: 62%; height: 62%; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
.post:hover .post__fig img { transform: scale(1.08) rotate(-1.5deg); }
.post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post__cat { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; }
.post__body h3 { font-family: var(--display); font-size: 1.24rem; font-weight: 500; margin-top: 10px; line-height: 1.16; letter-spacing: -.025em; }
.post__body p { font-size: .9rem; color: var(--gris); margin-top: 10px; }
.post__body .btn--fantasma { margin-top: auto; font-size: .88rem; align-self: flex-start; }

/* ══════════════ FAQ ══════════════ */
.faq__lista { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--linea); }
.faq__item { position: relative; background: transparent; border-bottom: 1px solid var(--linea); transition: background .22s var(--ease); }
.faq__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--verde-txt); transform: scaleY(0); transform-origin: top; transition: transform .28s var(--ease); }
.faq__item[open] { background: var(--agua-2); }
.faq__item[open]::before { transform: scaleY(1); }
.faq__item summary { list-style: none; cursor: pointer; padding: 22px 22px; font-weight: 500; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.5rem; color: var(--verde-txt); font-weight: 400; transition: transform .25s var(--ease); line-height: 1; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__resp { padding: 0 22px 24px; color: var(--gris); font-size: .96rem; line-height: 1.6; max-width: 62ch; }

/* ══════════════ Newsletter ══════════════ */
.news { position: relative; background: var(--verde-osc); color: #fff; border-radius: var(--radio-xl); padding: 64px; text-align: center; overflow: hidden; box-shadow: var(--sombra-alta); }
.news::after { content: ""; position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(60% 80% at 12% 10%, rgba(20,180,158,.4), transparent 60%),
  radial-gradient(50% 70% at 90% 100%, rgba(203,174,128,.28), transparent 60%); }
.news > * { position: relative; z-index: 1; }
.news h2 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -.035em; }
.news p { margin-top: 14px; color: rgba(255,255,255,.9); max-width: 46ch; margin-inline: auto; }
.news__form { margin-top: 28px; display: flex; gap: 0; max-width: 480px; margin-inline: auto; box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.news__form input { flex: 1; height: 56px; padding: 0 22px; border-radius: 0; border: 0; font-family: inherit; font-size: .95rem; background: #fff; }
.news__form input:focus { outline: 2px solid var(--verde-cl); outline-offset: -2px; }
.news__form .btn { height: 56px; background: #fff; color: var(--verde-osc); font-weight: 700; border-radius: 0; border-left: 1.5px solid var(--linea); }
.news__form .btn:hover { background: var(--crema); transform: none; }

/* ══════════════ Footer ══════════════ */
/* Footer split: columna marca (teal) + columna navegación (beige), espeja el corte del hero */
.footer { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-top: 2px solid var(--bronce); padding: 0 !important; margin: 0 !important; }

/* ── Izquierda: marca sobre teal ── */
.footer__brand { position: relative; overflow: hidden; background: var(--verde-nte); color: rgba(255,255,255,.86); padding: clamp(52px, 5.2vw, 82px) clamp(32px, 4vw, 66px); display: flex; }
.footer__mapa { position: absolute; right: -10%; bottom: -12%; height: 125%; width: auto; opacity: .07; z-index: 0; pointer-events: none; user-select: none; }
.footer__brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }
.footer__logo img { height: 27px; width: auto; filter: brightness(0) invert(1); transition: transform .45s var(--ease); }
.footer__logo:hover img { transform: translateY(-2px) scale(1.04); }
.footer__tag { margin-top: 22px; font-size: .92rem; line-height: 1.7; max-width: 42ch; }
.footer__redes { margin-top: 26px; display: flex; gap: 10px; }
.footer__redes a { width: 42px; height: 42px; border-radius: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #fff; transition: .2s var(--ease); }
.footer__redes a:hover { background: var(--verde); border-color: var(--verde); transform: translateY(-2px); }
.footer__redes svg { width: 17px; height: 17px; }
.footer__firma { margin-top: auto; padding-top: 46px; font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; color: rgba(255,255,255,.5); }
.footer__firma b { font-weight: 700; color: var(--bronce-cl); }

/* ── Derecha: navegación sobre beige ── */
.footer__nav { background: var(--crema); color: var(--tinta-2); padding: clamp(52px, 5.2vw, 82px) clamp(32px, 4vw, 66px); display: flex; flex-direction: column; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer__col h4 { color: var(--tinta); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 15px; }
.footer__col a { display: block; font-size: .9rem; color: var(--gris); padding: 6px 0; transition: .16s var(--ease); }
.footer__col a:hover { color: var(--verde-txt); transform: translateX(3px); }
.footer__pagos { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pago { height: 36px; min-width: 54px; padding: 0 12px; background: #fff; border: 1px solid var(--linea); border-radius: 0; display: grid; place-items: center; }
.pago img { height: 18px; width: auto; }
.pago--txt { font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--tinta-2); }
.footer__legal { margin-top: auto; padding-top: 30px; font-size: .8rem; color: var(--gris); display: flex; flex-direction: column; gap: 5px; }
.footer__legal .bronce { color: var(--bronce); font-weight: 500; }

/* ══════════════ Menú mobile ══════════════ */
.mmenu { position: fixed; inset: 0; z-index: 1000; background: var(--hueso); transform: translateX(100%); transition: transform .32s var(--ease); display: flex; flex-direction: column; }
.mmenu.abierto { transform: translateX(0); }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--linea); }
.mmenu__top .header__logo img { max-height: 26px; height: auto; }
.mmenu__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.mmenu__body a { position: relative; display: block; padding: 15px 0 15px 14px; font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--linea); transition: color .18s var(--ease); }
.mmenu__body a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--verde-txt); border-radius: 2px; transition: height .2s var(--ease); }
.mmenu__body a:hover, .mmenu__body a.selected, .mmenu__body a:active { color: var(--verde-osc); font-weight: 700; }
.mmenu__body a:hover::before, .mmenu__body a.selected::before, .mmenu__body a:active::before { height: 56%; }
.mmenu__body a.sub { font-size: .95rem; font-weight: 400; padding: 10px 0 10px 16px; color: var(--gris); border: 0; }

/* Menú mobile · acordeón (colapsable) */
.mmenu__body .mm-sec { display: block; padding: 20px 0 4px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; border-bottom: 0; }
.mmenu__body .mm-sec::before { display: none; }
.mm-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 15px 0 15px 14px; background: none; border: 0; border-bottom: 1px solid var(--linea); font-family: inherit; font-size: 1.1rem; font-weight: 500; color: inherit; text-align: left; cursor: pointer; }
.mm-acc__chev { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gris); transition: transform .25s var(--ease); }
.mm-acc[aria-expanded="true"] { color: var(--verde-osc); font-weight: 700; }
.mm-acc[aria-expanded="true"] .mm-acc__chev { transform: rotate(180deg); color: var(--verde-osc); }
.mm-panel { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); }
.mm-acc[aria-expanded="true"] + .mm-panel { max-height: 1600px; }
.mmenu__body .mm-panel__all,
.mmenu__body .mm-panel__link { padding: 11px 0 11px 28px; font-size: .98rem; font-weight: 400; color: var(--gris); border-bottom: 0; }
.mmenu__body .mm-panel__all::before,
.mmenu__body .mm-panel__link::before { display: none; }
.mmenu__body .mm-panel__all { color: var(--verde-txt); font-weight: 600; }
.mmenu__body .mm-panel__link.selected,
.mmenu__body .mm-panel__link:active { color: var(--verde-osc); }
.mm-panel > a:last-child { margin-bottom: 10px; }
.mmenu__foot { padding: 24px 24px 32px; border-top: 1px solid var(--linea); }
.mmenu__foot-lbl { display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-bottom: 13px; }
.mmenu__redes { display: flex; gap: 10px; }
.mmenu__redes a { width: 44px; height: 44px; border: 1px solid var(--linea); display: grid; place-items: center; color: var(--verde-txt); transition: .2s var(--ease); }
.mmenu__redes a:hover { background: var(--verde-txt); color: #fff; border-color: var(--verde-txt); }
.mmenu__redes svg { width: 18px; height: 18px; }

/* ══════════════ Efectos extra ══════════════ */

/* stagger: las tarjetas aparecen en cascada cuando se revela la sección */
[data-reveal] :is(.cats, .prods, .blog, .obras, .lentes__promo) > * {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > * { opacity: 1; transform: none; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(1) { transition-delay: .00s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(2) { transition-delay: .06s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(3) { transition-delay: .12s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(4) { transition-delay: .18s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(5) { transition-delay: .24s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(6) { transition-delay: .30s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(7) { transition-delay: .36s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(8) { transition-delay: .42s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(9) { transition-delay: .48s; }
[data-reveal].visible :is(.cats, .prods, .blog, .obras, .lentes__promo) > :nth-child(n+10) { transition-delay: .54s; }

/* brillo que barre las tarjetas al pasar el mouse */
.post::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
  transform: translateX(-130%); transition: transform .75s var(--ease);
}
.post:hover::after { transform: translateX(130%); }

/* gradiente vivo en el acento del hero */
.hero h1 em { background-size: 220% 100%; animation: brillo 7s ease-in-out infinite; }
@keyframes brillo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* el sello del hero flota suave */
.hero__sello { animation: flotaChip 5s ease-in-out infinite; }
@keyframes flotaChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* la línea del kicker se estira al revelar */
[data-reveal] .kicker::before { width: 0; transition: width .6s .2s var(--ease); }
[data-reveal].visible .kicker::before { width: 18px; }

/* profundidad 3D para el tilt de la figura del hero */
.hero__fig { perspective: 1000px; }
.hero__foto { transition: transform .4s var(--ease); transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] :is(.cats, .prods, .blog, .obras, .lentes__promo) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 em, .hero__sello { animation: none !important; }
  [data-reveal] .kicker::before { width: 18px !important; transition: none !important; }
}

/* numeración editorial neutralizada: se conserva solo el kicker */
.eyebrow { display: contents; }
.eyebrow__num { display: none; }

/* ══════════════ Responsive ══════════════ */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__col { min-width: 0; }
  .hero__fig { max-width: 460px; min-width: 0; }
  .hero__stats { gap: 34px; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .prods { grid-template-columns: repeat(2, 1fr); }
  /* Fuera de desktop (multi-fila) el producto "que sale del box" solapa la fila de arriba:
     cards de producto CONTENIDAS (producto adentro) en tablet y mobile. */
  .cat { justify-content: flex-start; padding: 0 20px 26px; }
  .cat__prod, .cat:hover .cat__prod { position: static; top: auto; left: auto; transform: none; max-width: 94%; max-height: 270px; margin: 20px auto 14px; display: block; }
  .cat__ic { display: none; }
  .prod { padding: 22px 14px 20px; }
  .prod::before { display: none; }
  .prod__media { height: 194px; }
  .prod__body { flex: 0 0 auto; }
  .blog { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .footer__cols { gap: 22px; }
  .lentes__grid { grid-template-columns: 1fr; gap: 40px; }
  .herencia__grid { grid-template-columns: 1fr; }
  .herencia__media { min-height: 56vh; order: -1; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .hamb { display: grid; }
  .header__row { grid-template-columns: auto 1fr auto; padding: 16px 20px; }
  /* Header del home idéntico al de las secciones internas (mismo grid, no el flex del desktop) */
  .home .header__row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; padding: 16px 20px; }
  .header__logo { justify-self: start; }
  .header__logo img { max-height: 36px; }
  .confianza__grid { grid-template-columns: 1fr 1fr; }
  .confianza__it:nth-child(-n+2) { border-bottom: 1px solid var(--linea); }
  .confianza__it:nth-child(3) { border-left: 0; }
  .suc-cta__grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .suc-cta__txt { padding: 44px 30px; }
  .seccion { padding: 68px 0; }
  .seccion--ap { padding: 72px 0; }
}
@media (max-width: 560px) {
  .contenedor { padding: 0 20px; }
  .hero__grid { padding: 40px 20px 56px; }
  /* Hero foto en móvil: más alta (no franja 16/9) y tarjetas contenidas dentro de la foto */
  .hero__foto { aspect-ratio: 4 / 5; }
  .hero__foto img { height: 100%; }
  .hero__ring { right: -8px; top: -8px; width: 66px; height: 66px; }
  .hero__sello { right: 12px; top: 12px; }
  .hero__tarjeta { left: 12px; bottom: 12px; max-width: 280px; }
  .hero__stats { gap: 14px; }
  .hero__stats > div { flex: 1 1 0; min-width: 0; }
  .hero__stats b { font-size: 1.55rem; }
  .hero__stats span { font-size: .72rem; }
  .prods { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .cats { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .confianza__grid { grid-template-columns: 1fr; }
  .confianza__it { border-left: 0; border-bottom: 1px solid var(--linea); }
  .confianza__it:last-child { border-bottom: 0; }
  .lentes__promo { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .news { padding: 44px 24px; }
  .news__form { flex-direction: column; }
  .news__form .btn { border-left: 0; border-top: 1px solid var(--linea); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .suc-cta__txt { padding: 36px 24px; }
}

/* ══════════════ Juego de pesos de títulos (autoritativo, gana la cascada) ══════════════ */
/* base liviana 300 + palabra clave en <b> 700, estilo "NEW ARRIVALS", en TODOS los títulos de sección */
.sec-head h2, .lentes__grid h2, .herencia__txt h2, .suc-cta__txt h2, .news h2, .hero2__over h2, .hero2__nom { font-weight: 300; }
.sec-head h2 b, .lentes__grid h2 b, .herencia__txt h2 b, .suc-cta__txt h2 b, .news h2 b, .hero2__over h2 b, .hero2__nom b { font-weight: 700; }