/* =========================================================================
   REDISEÑO v4 — "Sin Ruido". Lienzo oscuro, tipografía Bricolage Grotesque,
   showcase de producto unificado (escalable, no fija un número de productos
   en el sistema ni en el copy). Reemplaza la Home v3 por completo — ver
   Docs/Marca.md y Docs/Desarrollo.md.
   ========================================================================= */

/* =========================================================================
   HERO — full-bleed oscuro, dos variantes de markup (desktop/mobile), mismo
   breakpoint único del proyecto (760px).
   ========================================================================= */
.hero-desktop { display: none; }

@media (min-width: 760px) {
  .hero-desktop {
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    padding: 100px 40px 72px;
  }
}

.hero-desktop-bg {
  position: absolute;
  inset: -60px 0 -60px 0;
  /* Poster de respaldo detrás del <video>: se ve un instante mientras el
     video decodifica el primer frame (o si el navegador no puede reproducirlo). */
  background-image: url("/assets/home-v2/hero-desktop.jpg");
  background-image: image-set(
    url("/assets/home-v2/hero-desktop.webp") type("image/webp"),
    url("/assets/home-v2/hero-desktop.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform, opacity;
}

.hero-desktop-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}

.hero-desktop-content {
  position: relative;
  max-width: 760px;
  width: 100%;
  will-change: transform, opacity;
}

.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-badge-bg-green);
  color: var(--color-green-dark);
  border: 1px solid oklch(70% 0.15 142 / .4);
  border-radius: var(--radius-pill);
  font: 700 12px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-title {
  font: 800 clamp(34px, 7.4vw, 68px)/1.03 var(--font-display);
  letter-spacing: -.01em;
  margin: 0 0 20px;
  color: #fff;
}
.hero-title .accent { color: var(--color-green-bright); text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero-body .accent { color: var(--color-green-bright); }

.hero-body {
  font: 400 clamp(15px, 3.6vw, 18px)/1.6 var(--font-body);
  color: oklch(88% 0.01 145);
  max-width: 520px;
  width: 100%;
  margin: 0 0 32px;
}

.hero-scroll-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid oklch(100% 0 0 / .35);
  color: #fff;
  font: 700 12px var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}
.hero-scroll-cta:hover { border-color: var(--color-green-bright); background: oklch(70% 0.15 142 / .12); color: #fff; transform: translateY(-2px); }
.hero-scroll-cta svg { width: 14px; height: 14px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ----- Hero mobile (<760px) ----- */
.hero-mobile { display: block; position: relative; }
@media (min-width: 760px) {
  .hero-mobile { display: none; }
}
/* Contenedor con la misma proporción que tenía hero-mobile.jpg (1236x1272):
   le da tamaño propio a la sección aunque el <video> de adentro esté en
   position:absolute (si no, .hero-mobile queda sin ningún hijo "en flujo"
   — el overlay de texto también es absolute — y la sección colapsa a 0px). */
.hero-mobile-media {
  position: relative; width: 100%; aspect-ratio: 1236 / 1272; overflow: hidden;
  /* Poster como fondo CSS (no atributo poster del <video>): Chrome descarga el
     poster aunque el video tenga display:none, pero no el fondo de un
     elemento oculto — asi en desktop no se baja la imagen de mobile. Mismo
     motivo por el que el <video> desktop no lleva poster (usa el fondo de
     .hero-desktop-bg). La imagen ya tiene la proporcion del contenedor. */
  background-image: url("/assets/home-v2/hero-mobile.jpg");
  background-image: image-set(
    url("/assets/home-v2/hero-mobile.webp") type("image/webp"),
    url("/assets/home-v2/hero-mobile.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
}
/* object-position 85%: el recorte vertical (aspect-ratio casi cuadrado vs.
   video 16:9) deja visible solo el ~55% del ancho original; centrado (50%,
   default) mostraba de más el hueco vacío del gym a la izquierda y cortaba
   a la mujer por la derecha. 85% centra a ambas personas (verificado
   extrayendo un frame del video). */
.hero-mobile-media .hero-bg-video { filter: brightness(.92); object-position: 85% center; }
.hero-mobile-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: left;
  padding: 20px 24px 32px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 45%, rgba(0,0,0,.92) 100%);
}
.hero-mobile-overlay .hero-title { font-size: clamp(26px, 7.5vw, 34px); margin-bottom: 12px; }
.hero-mobile-overlay .hero-body { max-width: 420px; margin-bottom: 20px; }

/* =========================================================================
   TESIS — la filosofía de marca enunciada temprano (hallazgo de la
   investigación de referencia), sin fijar un número de productos.
   ========================================================================= */
.thesis {
  background: var(--color-bg);
  padding: clamp(64px, 11vw, 120px) 24px;
  text-align: center;
}
.thesis-inner { max-width: 880px; margin: 0 auto; }
/* Halo líquido: una copia del mismo texto (.thesis-title::before, vía
   attr(data-text)) pasa por el filtro SVG #thesis-fluid (feTurbulence +
   feDisplacementMap, auto-animado con SMIL — no CSS @keyframes, así que no
   lo pisa el reset global de prefers-reduced-motion de base.css) y queda
   detrás en verde NutriVive, desbordando/vibrando alrededor de las letras.
   El texto real (negro, --color-text) va encima, nítido y legible. */
.thesis-title {
  position: relative;
  /* z-index:0 (no solo position:relative) para que este elemento forme su
     propio contexto de apilamiento — si no, el z-index:-1 del halo de abajo
     escapa hacia arriba en la pila global y termina pintado detrás del
     fondo de toda la página en vez de solo detrás de este texto. */
  z-index: 0;
  font: 800 clamp(28px, 5.6vw, 52px)/1.15 var(--font-display);
  margin: 0 0 20px;
  color: var(--color-text);
  white-space: pre-line;
  letter-spacing: -.01em;
}
.thesis-title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  color: var(--color-green-bright);
  filter: url(#thesis-fluid);
  opacity: .8;
  z-index: -1;
}
.thesis-body {
  font: 400 clamp(15px, 2vw, 19px)/1.65 var(--font-body);
  color: var(--color-text-muted);
  white-space: pre-line;
  max-width: 620px;
  margin: 0 auto;
}
.thesis-kicker {
  font: 700 clamp(15px, 2vw, 19px)/1.5 var(--font-display);
  color: var(--color-green); /* green-bright es solo para fondos oscuros; sobre el lienzo claro no pasaba AA */
  margin: 20px auto 0;
  letter-spacing: -.01em;
}

/* =========================================================================
   SHOWCASE DE PRODUCTO — pieza central del rediseño: grid de cards
   consistentes (misma forma para cada producto, escalable a más productos
   a futuro), cada una un link completo a su ficha. Reemplaza la fila de
   wordmarks + las 3 secciones dispares de v3.
   ========================================================================= */
.showcase {
  background: var(--color-bg);
  padding: 0 24px clamp(64px, 10vw, 100px);
}
.showcase-head {
  max-width: 1200px;
  margin: 0 auto clamp(28px, 5vw, 44px);
}
.showcase-eyebrow {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-badge-bg-green);
  border: 1px solid oklch(70% 0.15 142 / .4);
  border-radius: var(--radius-pill);
  font: 700 12px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: 10px;
}
.showcase-title {
  font: 800 clamp(26px, 4.4vw, 40px)/1.1 var(--font-display);
  letter-spacing: -.01em;
  margin: 0;
  color: var(--color-text);
}
.showcase-sub {
  font: 400 15px/1.6 var(--font-body);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 10px 0 0;
}

.showcase-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr; }
}

.product-card {
  position: relative;
  display: block;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  isolation: isolate;
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: border-color .3s ease, transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;
}
@media (max-width: 900px) {
  .product-card { aspect-ratio: 4 / 3; }
}
.product-card:hover,
.product-card:focus-visible {
  border-color: oklch(70% 0.15 142 / .55);
  box-shadow: var(--glow-green);
  transform: translateY(-6px);
}

.product-card-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .5s cubic-bezier(.16,.84,.44,1), filter .35s ease;
  filter: saturate(1.02);
}
/* La foto de cada card es un <picture><img> dentro de .product-card-bg
   (antes background-image por clase). object-fit reproduce el antiguo
   background-size: cover + background-position: center; el zoom del hover
   sigue aplicándose al contenedor. */
.product-card-bg picture, .product-card-bg img { display: block; width: 100%; height: 100%; }
.product-card-bg img { object-fit: cover; object-position: center; }
/* proteina-card (card de Proteína en index.html): mockup de packaging
   aportado por el usuario (Docs/Localimported, 2026-08-05). El logo se lee "NUTRNIVE" en el render — mismo defecto de
   generación por IA ya documentado en PRODUCT.md — pero el usuario confirmó
   explícitamente usarlo así, sin esperar una versión corregida. */
.product-card:hover .product-card-bg,
.product-card:focus-visible .product-card-bg { transform: scale(1.06); }

.product-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.2) 45%, rgba(0,0,0,.92) 100%);
  transition: opacity .3s ease;
}

.product-card-body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}
.product-card-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  background: var(--color-badge-bg-green);
  border: 1px solid oklch(70% 0.15 142 / .4);
  border-radius: var(--radius-pill);
  font: 700 11px var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: 8px;
}
.product-card-title {
  font: 800 clamp(22px, 3vw, 28px)/1.1 var(--font-display);
  letter-spacing: -.01em;
  color: #fff;
  margin: 0 0 8px;
}
.product-card-desc {
  font: 400 14px/1.5 var(--font-body);
  color: oklch(85% 0.01 145);
  margin: 0 0 16px;
  max-width: 34ch;
}
.product-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.product-card-count {
  font: 600 12px var(--font-data);
  letter-spacing: .02em;
  color: oklch(78% 0.01 145);
}
.product-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(100% 0 0 / .3);
  color: #fff;
  flex: none;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.product-card:hover .product-card-arrow,
.product-card:focus-visible .product-card-arrow {
  background: var(--color-green-mid);
  border-color: var(--color-green-mid);
  transform: rotate(45deg);
}
.product-card-arrow svg { width: 16px; height: 16px; }

/* =========================================================================
   NUTRICIÓN Y CIENCIA — teaser, restyle oscuro
   ========================================================================= */
/* El video (PersonMuscle03.mp4) pasa a ser el fondo de toda la sección
   (mismo patrón .hero-bg-video que Home/Nutrición/Sobre la marca: bg
   absoluto + object-fit:cover) con el texto encima, en vez de ir contenido
   en un recuadro al lado del texto. Alto por aspect-ratio (no vh), mismo
   criterio que los otros heroes de video del sitio. */
.science-teaser {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 20/9 (no 16/9): un 20% menos de alto a igual ancho — 16/9 da
     H=0.5625×ancho, 20/9 da H=0.45×ancho (0.45/0.5625 = 0.8). */
  aspect-ratio: 20 / 9;
  /* Fondo fijo (no var(--color-bg-elevated), que se invierte según el tema
     claro/oscuro del sitio) — mismo blanco de estudio del video
     (~rgb(231,232,233), muestreado del propio video), visible un instante
     mientras el video decodifica el primer frame. */
  background: #e7e8e9;
}
/* inset vertical -60px: da margen de sobra para el translateY del parallax
   de scroll (parallax.js) sin que se vea un borde vacío arriba/abajo —
   mismo truco que .hero-desktop-bg en Home. */
.science-teaser-bg { position: absolute; inset: -60px 0; will-change: transform, opacity; }
/* La caja (20:9) es más ancha que el video (16:9), así que cover recorta
   verticalmente — bottom (no center) recorta desde arriba y deja ver la
   mitad inferior del encuadre (mano + shaker), no el techo del estudio. */
.science-teaser-bg .hero-bg-video { object-position: center bottom; }

@media (max-width: 759px) {
  /* Mismo criterio de -20% de alto que en desktop: 4/5 (H=1.25×ancho) pasa
     a 1/1 (H=1×ancho; 1/1.25 = 0.8). */
  .science-teaser { aspect-ratio: 1 / 1; }
  /* cover + center: la caja es cuadrada y el video 16:9 (más ancho que
     alto), así que cover ya queda "guiado por el alto" — la altura del
     video encaja exacta con la de la sección sin ningún recorte vertical
     (0% letterbox arriba/abajo) y solo recorta un poco parejo a los
     costados (no hay forma de mostrar un video panorámico completo dentro
     de una caja cuadrada sin recortar ni sin dejar franjas vacías arriba y
     abajo). center centra ese recorte lateral en vez del 96% de antes. */
  .science-teaser-bg .hero-bg-video { object-fit: cover; object-position: center; }
}

.science-teaser-body { position: relative; padding: 32px 24px 48px; max-width: 520px; will-change: transform, opacity; }
@media (min-width: 760px) {
  .science-teaser-body { padding: 32px clamp(24px, 5vw, 64px); }
}

.science-teaser-title {
  font: 800 clamp(26px, 3.6vw, 38px)/1.15 var(--font-display);
  letter-spacing: -.01em;
  margin: 0 0 10px;
  color: var(--color-text);
  text-wrap: pretty;
}
.science-teaser-desc {
  font: 400 clamp(14px, 1.6vw, 17px)/1.5 var(--font-body);
  margin: 0 0 24px;
  color: var(--color-text-muted);
}
.science-teaser-btn {
  display: inline-block;
  background: var(--color-green-mid);
  color: #fff;
  border: none;
  font: 700 13px var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.science-teaser-btn:hover { transform: translateY(-2px); background: var(--color-green-hover); color: #fff; box-shadow: var(--glow-green); }

/* CTA pill compartido (fichas de producto, artículo) */
.cta-pill {
  display: inline-block;
  background: var(--color-green-mid);
  color: #fff;
  border: none;
  font: 700 13px var(--font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  margin-top: 16px;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.cta-pill:hover { transform: translateY(-2px); background: var(--color-green-hover); color: #fff; box-shadow: var(--glow-green); }