@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-400-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 400;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-500-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 500;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-600-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 600;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-700-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 700;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-800-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 800;
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fuentes/Montserrat/critical/Montserrat-900-latin.woff2") format("woff2");
  font-display: optional;
  font-style: normal;
  font-weight: 900;
  unicode-range: U+0000-00FF;
}

:root {
  --nutra-blue: #0071e3;
  --nutra-blue-dark: #034a99;
  --nutra-gold: #e5bb47;
  --nutra-gold-strong: #f2c94c;
  --nutra-ink: #0b0c0f;
  --nutra-charcoal: #15171c;
  --nutra-muted: #626875;
  --nutra-muted-strong: #4a5160;
  --nutra-line: #e4e7ec;
  --nutra-surface: #f5f7fa;
  --nutra-white: #ffffff;
  --home-shell: 1320px;
  --home-pad: clamp(1rem, 3vw, 2.5rem);
  --home-gap: clamp(4rem, 7vw, 7rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--nutra-white);
  color: var(--nutra-ink);
  font-family: "Montserrat", Arial, sans-serif;
}

body,
button,
a {
  -webkit-font-smoothing: antialiased;
}

.ripple {
  -webkit-tap-highlight-color: transparent;
  transition: filter 120ms ease;
}

.ripple:active {
  filter: brightness(0.82);
}

img,
video {
  max-width: 100%;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgb(242 201 76 / 70%);
  outline-offset: 4px;
}

.home-shell {
  width: min(100%, calc(var(--home-shell) + (var(--home-pad) * 2)));
  margin-inline: auto;
  padding-inline: var(--home-pad);
}

.home-refresh {
  overflow: hidden;
  background: var(--nutra-white);
}

.home-refresh p {
  margin-top: 0;
  text-align: left;
}

.home-section {
  padding-block: var(--home-gap);
}

#elige-tu-objetivo,
#productos-destacados,
#recetas-e-ideas,
#kits-destacados,
#conoce-nuestra-planta,
#productos-sin-fructosa,
#compra-con-confianza,
#tiendas-nutramerican {
  scroll-margin-top: 5.5rem;
}

.home-kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  color: var(--nutra-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.home-kicker::before {
  width: 2.25rem;
  height: 3px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
}

.home-kicker--light {
  color: var(--nutra-gold-strong);
}

.home-section__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 7rem);
  margin-bottom: clamp(2rem, 4vw, 3.75rem);
}

.home-section__heading h2,
.home-confidence h2,
.home-stores h2 {
  margin: 0;
  color: var(--nutra-ink);
  font-size: clamp(2.35rem, 4.9vw, 5.25rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

/* Parrafo de apoyo del encabezado. El filete lateral lo ancla (es el mismo
   gesto de barra que usa .home-kicker, girado 90 grados) y evita que quede
   como texto suelto frente a un h2 de hasta 84px y peso 900. */
.home-section__heading > p {
  max-width: 34rem;
  margin: 0 0 0.35rem;
  padding-left: 1.5rem;
  border-left: 3px solid var(--nutra-blue);
  color: var(--nutra-muted-strong);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.7;
  text-wrap: pretty;
}

.home-section__heading > p strong {
  color: var(--nutra-ink);
  font-weight: 800;
}

.home-section__heading--compact {
  grid-template-columns: 1fr auto;
}

.home-text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--nutra-blue);
  color: var(--nutra-ink);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, gap 180ms ease;
}

.home-text-link:hover,
.home-text-link:focus-visible {
  gap: 1rem;
  color: var(--nutra-blue);
}

.home-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.9rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.065em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.home-button:hover,
.home-button:focus-visible {
  transform: translateY(-2px);
}

.home-button--gold {
  background: var(--nutra-gold-strong);
  color: var(--nutra-ink);
  box-shadow: 0 10px 30px rgb(0 0 0 / 18%);
}

.home-button--gold:hover,
.home-button--gold:focus-visible {
  background: #ffd75b;
  color: var(--nutra-ink);
}

.home-button--glass {
  border-color: rgb(255 255 255 / 52%);
  background: rgb(11 12 15 / 24%);
  color: var(--nutra-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-button--glass:hover,
.home-button--glass:focus-visible {
  border-color: var(--nutra-white);
  background: rgb(255 255 255 / 12%);
  color: var(--nutra-white);
}

.home-button--white {
  background: var(--nutra-white);
  color: var(--nutra-blue-dark);
}

.home-button--outline-white {
  border-color: rgb(255 255 255 / 58%);
  color: var(--nutra-white);
}

.home-button--outline-white:hover,
.home-button--outline-white:focus-visible {
  border-color: var(--nutra-white);
  background: var(--nutra-white);
  color: var(--nutra-blue-dark);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Hero */
.home-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--nutra-ink);
  background-image: url("/video/intro-2026/poster-nutramerican-mobile.webp");
  background-position: center;
  background-size: cover;
  color: var(--nutra-white);
  font-family: "Montserrat", Arial, sans-serif;
  font-synthesis: none;
}

.home-hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.home-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgb(4 5 8 / 84%) 0%, rgb(4 5 8 / 54%) 43%, rgb(4 5 8 / 13%) 72%),
    linear-gradient(0deg, rgb(4 5 8 / 82%) 0%, transparent 43%, rgb(4 5 8 / 20%) 100%);
}

.home-hero__veil::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 113 227 / 20%) 0, transparent 33%);
  content: "";
  mix-blend-mode: screen;
}

.home-hero__content {
  display: flex;
  min-height: 100svh;
  align-items: center;
  padding-top: clamp(6.5rem, 12vh, 9rem);
  padding-bottom: clamp(10rem, 18vh, 13rem);
}

/* El h1 se dimensiona con el ancho de ESTA columna (que cambia por breakpoint),
   no con el del viewport. Asi "Nutramerican" -6.588em, la palabra mas ancha e
   irrompible- nunca desborda. */
.home-hero__copy {
  width: min(56rem, 80vw);
  container-type: inline-size;
}

.js:not(.home-fonts-ready) .home-hero__copy,
.js:not(.home-fonts-ready) .home-hero__proof > div,
.js:not(.home-fonts-ready) .home-hero__quick a {
  opacity: 0;
  transform: translateY(0.4rem);
}

.js.home-fonts-ready .home-hero__copy,
.js.home-fonts-ready .home-hero__proof > div,
.js.home-fonts-ready .home-hero__quick a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease-out, transform 180ms ease-out;
}

.home-hero__copy h1 {
  margin: 0;
  color: var(--nutra-white);
  /* rem + cqi: el sumando en rem mantiene vivo el zoom del navegador (a11y). */
  font-size: clamp(2.5rem, 0.5rem + 7.5cqi, 4.75rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.88;
  text-shadow: 0 8px 38px rgb(0 0 0 / 30%);
}

.home-hero__copy h1 span {
  color: var(--nutra-gold-strong);
}

.home-hero__lead {
  max-width: 40rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 1.8rem;
  color: rgb(255 255 255 / 85%);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.65;
}

.home-hero__proof {
  position: absolute;
  right: var(--home-pad);
  bottom: 8.5rem;
  display: flex;
  align-items: stretch;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 1rem;
  background: rgb(5 7 12 / 42%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-hero__proof > div {
  display: flex;
  min-width: 10.5rem;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.25rem;
}

.home-hero__proof > div + div {
  border-left: 1px solid rgb(255 255 255 / 18%);
}

.home-hero__proof strong {
  color: var(--nutra-white);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}

.home-hero__proof span {
  margin-top: 0.4rem;
  color: rgb(255 255 255 / 68%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Silueta blanca, igual que el resto de sellos del panel. Se dimensiona por
   ALTO para que la altura del panel no dependa del ratio del archivo si algun
   dia se sustituye el logo. */
.home-hero__proof img {
  width: auto;
  height: 2rem;
  filter: brightness(0) invert(1);
}

.home-hero__quick {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(255 255 255 / 22%);
  background: rgb(5 6 9 / 68%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.home-hero__quick a {
  display: flex;
  min-height: 5.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--nutra-white);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}

.home-hero__quick a + a {
  border-left: 1px solid rgb(255 255 255 / 18%);
}

.home-hero__quick a:hover,
.home-hero__quick a:focus-visible {
  background: var(--nutra-gold-strong);
  color: var(--nutra-ink);
}

.home-hero__quick i {
  font-size: 1.15rem;
}

/* Trust ticker */
.home-ticker {
  border-bottom: 1px solid #20232a;
  background: var(--nutra-ink);
  color: var(--nutra-white);
}

.home-ticker__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-ticker span {
  display: flex;
  min-height: 5rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-ticker span + span {
  border-left: 1px solid #2b2e35;
}

.home-ticker i {
  color: var(--nutra-gold-strong);
}

/* Goal bento */
.home-goals {
  background:
    radial-gradient(circle at 5% 10%, rgb(0 113 227 / 8%), transparent 30rem),
    var(--nutra-white);
  scroll-margin-top: 4rem;
}

.home-goals__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.goal-card {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  border-radius: 1.6rem;
  isolation: isolate;
  color: var(--nutra-white);
  box-shadow: 0 14px 40px rgb(17 24 39 / 10%);
}

.goal-card::before,
.goal-card::after {
  position: absolute;
  z-index: -2;
  content: "";
  pointer-events: none;
}

.goal-card::before {
  inset: 0;
  background:
    radial-gradient(circle at 78% 20%, var(--goal-glow, rgb(229 187 71 / 25%)), transparent 32%),
    linear-gradient(135deg, #202127, var(--goal-bg, #08090b) 70%);
}

.goal-card::after {
  top: -16%;
  right: -8%;
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  box-shadow:
    0 0 0 3rem rgb(255 255 255 / 2%),
    0 0 0 6rem rgb(255 255 255 / 2%);
}

/* Hueco en la rejilla. Va aparte del producto para poder reordenar la seccion
   moviendo solo el HTML:  --lead + --feature ocupan la fila grande (7+5) y
   --compact x2 + --panel la fila de abajo (4+4+4). */
.goal-card--lead {
  grid-column: span 7;
  min-height: 34rem;
}

.goal-card--feature {
  grid-column: span 5;
  min-height: 34rem;
}

.goal-card--compact,
.goal-card--panel {
  grid-column: span 4;
}

/* Tema de color, propio de cada producto */
.goal-card--gainz {
  --goal-bg: #090909;
  --goal-glow: rgb(229 187 71 / 38%);
}

.goal-card--bipro {
  --goal-bg: #07131f;
  --goal-glow: rgb(0 113 227 / 35%);
}

.goal-card--burner {
  --goal-bg: #111216;
  --goal-glow: rgb(207 38 38 / 40%);
}

.goal-card--crea {
  --goal-bg: #101010;
  --goal-glow: rgb(244 213 47 / 35%);
}

.goal-card--pops {
  --goal-bg: #2c2415;
  --goal-glow: rgb(248 216 133 / 36%);
}

.goal-card__copy {
  position: relative;
  z-index: 3;
  display: flex;
  width: 62%;
  height: 100%;
  min-height: inherit;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.goal-card--compact .goal-card__copy,
.goal-card--panel .goal-card__copy {
  width: 72%;
}

.goal-card__number {
  align-self: flex-start;
  color: rgb(255 255 255 / 32%);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.goal-card__eyebrow {
  margin: 0 0 0.8rem;
  color: var(--nutra-gold-strong);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.goal-card__details {
  position: relative;
  z-index: 3;
  margin-top: auto;
}

.goal-card h3 {
  margin: 0;
  color: var(--nutra-white);
  font-size: clamp(1.65rem, 2.65vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.goal-card--compact h3,
.goal-card--panel h3 {
  font-size: clamp(1.55rem, 2vw, 2.15rem);
}

.goal-card__details > p:not(.goal-card__eyebrow) {
  margin: 1rem 0 1.2rem;
  color: rgb(255 255 255 / 68%);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.65;
}

.goal-card__details > a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgb(255 255 255 / 42%);
  color: var(--nutra-white);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: gap 180ms ease, border-color 180ms ease;
}

.goal-card__details > a:hover,
.goal-card__details > a:focus-visible {
  gap: 0.9rem;
  border-color: var(--nutra-gold-strong);
}

.goal-card__product {
  position: absolute;
  top: 50%;
  right: -4%;
  z-index: 1;
  width: 56%;
  transform: translateY(-50%);
  filter: drop-shadow(0 22px 20px rgb(0 0 0 / 40%));
  transition: transform 320ms ease;
}

.goal-card__product img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.goal-card--compact .goal-card__product,
.goal-card--panel .goal-card__product {
  top: 38%;
  right: -2%;
  width: 52%;
}

.goal-card:hover .goal-card__product {
  transform: translateY(-52%) scale(1.045);
}

.goal-card--compact:hover .goal-card__product,
.goal-card--panel:hover .goal-card__product {
  transform: translateY(-54%) scale(1.045);
}

/* Product cards */
.home-products {
  border-top: 1px solid var(--nutra-line);
  background: var(--nutra-surface);
}

.home-products__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.product-card {
  overflow: hidden;
  border: 1px solid var(--nutra-line);
  border-radius: 1.35rem;
  background: var(--nutra-white);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgb(17 24 39 / 12%);
}

.product-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 50% 55%, rgb(0 113 227 / 18%), transparent 44%),
    #edf4fb;
}

.product-card__media::after {
  position: absolute;
  right: -15%;
  bottom: -30%;
  width: 70%;
  aspect-ratio: 1;
  border: 1px solid rgb(0 113 227 / 15%);
  border-radius: 50%;
  box-shadow: 0 0 0 2.2rem rgb(0 113 227 / 3%);
  content: "";
}

.product-card__media--crea {
  background:
    radial-gradient(circle at 50% 55%, rgb(235 196 29 / 25%), transparent 44%),
    #f7f4e8;
}

.product-card__media--pops {
  background:
    radial-gradient(circle at 50% 55%, rgb(195 143 34 / 22%), transparent 44%),
    #faf3df;
}

.product-card__media--radical {
  background:
    radial-gradient(circle at 50% 55%, rgb(73 118 172 / 20%), transparent 44%),
    #eef1f5;
}

.product-card__media img {
  position: absolute;
  inset: 5%;
  z-index: 1;
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 20px 16px rgb(0 0 0 / 22%));
  transition: transform 260ms ease;
}

.product-card:hover .product-card__media img {
  transform: scale(1.055);
}

.product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  background: var(--nutra-ink);
  color: var(--nutra-white);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.product-card__body {
  padding: 1.3rem 1.3rem 1.5rem;
}

.product-card__body > p {
  margin-bottom: 0.35rem;
  color: var(--nutra-blue);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card h3 {
  margin: 0;
  color: var(--nutra-ink);
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.045em;
}

.product-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.8rem 0 1.2rem;
  padding: 0;
  color: var(--nutra-muted);
  font-size: 0.75rem;
  font-weight: 600;
  list-style: none;
}

.product-card li::before {
  margin-right: 0.4rem;
  color: var(--nutra-gold);
  content: "•";
}

.product-card__body > a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nutra-ink);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.product-card__body > a i {
  color: var(--nutra-blue);
}

/* Recipes editorial break */
.home-recipes {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(27rem, 34vw, 36rem);
  overflow: hidden;
  background: var(--nutra-ink);
  color: var(--nutra-white);
}

.home-recipes__media,
.home-recipes__veil {
  position: absolute;
  inset: 0;
}

.home-recipes__media {
  z-index: -2;
  display: block;
  margin: 0;
}

.home-recipes__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.home-recipes__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(4 6 10 / 94%) 0%, rgb(4 6 10 / 85%) 37%, rgb(4 6 10 / 48%) 63%, rgb(4 6 10 / 20%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 16%), rgb(0 0 0 / 42%));
}

.home-recipes__inner {
  display: flex;
  min-height: inherit;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.home-recipes__copy {
  width: min(54%, 43rem);
}

.home-recipes__intro {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: 0.9rem;
}

.home-recipes__logo {
  width: clamp(4.5rem, 7vw, 6.5rem);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 0.6rem 1.2rem rgb(0 0 0 / 42%));
}

.home-recipes .home-kicker {
  margin: 0;
}

.home-recipes h2 {
  margin: 0;
  color: var(--nutra-white);
  font-size: clamp(3.25rem, 6.4vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.home-recipes h2 span {
  color: var(--nutra-gold-strong);
}

.home-recipes__copy > p {
  max-width: 38rem;
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 1.75rem;
  color: rgb(255 255 255 / 78%);
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.75;
}

.home-recipes .home-button {
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 28%);
}

/* Featured kits slider */
.home-kits {
  background: var(--nutra-white);
}

.home-kits__slider {
  position: relative;
}

.home-kits__viewport {
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 0 2rem 4rem -3rem rgb(0 49 109 / 45%);
  touch-action: pan-y;
}

.home-kits__track {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 460ms cubic-bezier(0.22, 0.72, 0.18, 1);
  will-change: transform;
}

.home-kits__track.is-dragging {
  transition: none;
}

.home-kit {
  position: relative;
  display: grid;
  min-width: 100%;
  min-height: 39rem;
  flex: 0 0 100%;
  grid-template-columns: minmax(0, 1.08fr) minmax(26rem, 0.92fr);
  align-items: center;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5rem);
  background:
    radial-gradient(circle at 83% 28%, rgb(255 255 255 / 19%), transparent 23rem),
    linear-gradient(135deg, #005fc1, var(--nutra-blue) 64%, #2d8bf0);
  color: var(--nutra-white);
  isolation: isolate;
}

.home-kit--definition {
  background:
    radial-gradient(circle at 80% 30%, rgb(0 113 227 / 36%), transparent 24rem),
    linear-gradient(132deg, #071c3b, #033d7e 58%, #087ce4);
}

.home-kit::before {
  position: absolute;
  top: -42%;
  right: -9%;
  z-index: -1;
  width: min(57%, 47rem);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 50%;
  box-shadow:
    0 0 0 5rem rgb(255 255 255 / 3%),
    0 0 0 10rem rgb(255 255 255 / 3%);
  content: "";
}

.home-kit::after {
  position: absolute;
  right: 4%;
  bottom: 4%;
  z-index: -1;
  width: 42%;
  height: 13%;
  border-radius: 50%;
  background: rgb(1 27 57 / 35%);
  content: "";
  filter: blur(2.4rem);
  transform: rotate(-4deg);
}

.home-kit__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 43rem;
}

.home-kit__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.home-kit__goal,
.home-kit__discount {
  display: inline-flex;
  min-height: 2.2rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.home-kit__goal {
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(0 39 86 / 25%);
  color: rgb(255 255 255 / 82%);
}

.home-kit__discount {
  gap: 0.32rem;
  border: 1px solid rgb(242 201 76 / 50%);
  background: var(--nutra-gold-strong);
  box-shadow: 0 0.7rem 1.5rem -1rem rgb(0 0 0 / 55%);
  color: #0b1a2c;
}

.home-kit__discount strong {
  font-size: 0.9rem;
}

.home-kit .home-kicker {
  margin-bottom: 1rem;
}

.home-kit h3 {
  margin: 0;
  max-width: 12ch;
  color: var(--nutra-white);
  font-size: clamp(2.7rem, 4.55vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

.home-kit h3 span {
  color: var(--nutra-gold-strong);
}

.home-kit__description {
  max-width: 40rem;
  margin: 1.45rem 0 1.2rem;
  color: rgb(255 255 255 / 78%);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  font-weight: 500;
  line-height: 1.7;
}

.home-kit__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.2rem;
  margin: 0 0 1.6rem;
  padding: 0;
  color: rgb(255 255 255 / 92%);
  font-size: 0.78rem;
  font-weight: 700;
  list-style: none;
}

.home-kit__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.home-kit__benefits i {
  display: grid;
  width: 1.3rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: rgb(242 201 76 / 18%);
  color: var(--nutra-gold-strong);
  font-size: 0.58rem;
}

.home-kit__copy .home-button {
  gap: 0.75rem;
}

.home-kit__media {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  height: 33rem;
  place-items: center;
}

.home-kit__media img {
  width: min(114%, 38rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2.2rem 1.8rem rgb(0 0 0 / 30%));
  pointer-events: none;
  transform: translateY(0.5rem);
  user-select: none;
  -webkit-user-drag: none;
}

.home-kits__controls {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.home-kits__controls > button {
  display: grid;
  width: 3.35rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--nutra-line);
  border-radius: 50%;
  background: var(--nutra-white);
  color: var(--nutra-ink);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.home-kits__controls > button:hover,
.home-kits__controls > button:focus-visible {
  border-color: var(--nutra-blue);
  color: var(--nutra-blue);
  transform: translateY(-2px);
}

.home-kits__dots {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--nutra-line);
  border-radius: 999px;
  background: var(--nutra-white);
}

.home-kits__dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c8ccd4;
  cursor: pointer;
  transition: width 220ms ease, background 220ms ease;
}

.home-kits__dots button.is-active {
  width: 1.8rem;
  background: var(--nutra-blue);
}

.home-kits__count {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0;
  color: #9ba1ad;
  font-size: 0.68rem;
  font-weight: 700;
}

.home-kits__count strong {
  color: var(--nutra-ink);
  font-size: 0.9rem;
}

@media (hover: hover) and (pointer: fine) {
  .home-kits__viewport {
    cursor: grab;
    user-select: none;
  }

  .home-kits__viewport.is-dragging {
    cursor: grabbing;
  }

  .home-kits__viewport a {
    cursor: pointer;
  }
}

/* Video / brand story */
.home-story {
  border-top: 1px solid var(--nutra-line);
  background: var(--nutra-white);
}

.home-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.45fr);
  overflow: hidden;
  border-radius: 1.7rem;
  background: var(--nutra-ink);
  color: var(--nutra-white);
}

.home-video {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
}

.home-video__poster,
.home-video__embed,
.home-video__poster picture,
.home-video__poster img,
.home-video__embed iframe {
  width: 100%;
  height: 100%;
}

.home-video__poster {
  position: relative;
}

.home-video__poster::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(0 0 0 / 52%), transparent 54%);
  content: "";
  pointer-events: none;
}

.home-video__poster picture,
.home-video__poster img {
  display: block;
}

.home-video__poster img {
  object-fit: cover;
}

.home-video__trigger {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nutra-white);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.home-video__trigger span {
  position: relative;
  display: grid;
  width: 3.75rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--nutra-gold-strong);
  color: var(--nutra-ink);
  box-shadow: 0 10px 34px rgb(0 0 0 / 28%);
  transition: transform 180ms ease;
}

/* Pulso: anillo que late hacia afuera para que el boton no se pierda sobre
   el poster. Va en position:absolute y anima solo transform + opacity, asi
   que no ocupa espacio, no provoca reflow y se compone en GPU.
   El tope de scale(1.6) esta calculado para que .home-video (overflow:hidden)
   no recorte el anillo con el boton a 1rem del borde en movil. */
.home-video__trigger span::before {
  position: absolute;
  inset: 0;
  border: 2px solid var(--nutra-gold-strong);
  border-radius: 50%;
  animation: home-video-pulse 2.4s ease-out infinite;
  content: "";
  pointer-events: none;
}

@keyframes home-video-pulse {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

.home-video__trigger:hover span,
.home-video__trigger:focus-visible span {
  transform: scale(1.08);
}

/* Una vez el usuario lo encuentra, el pulso solo estorba. */
.home-video__trigger:hover span::before,
.home-video__trigger:focus-visible span::before {
  animation: none;
  opacity: 0;
}

.home-video__embed {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
}

.home-video__embed iframe {
  display: block;
  border: 0;
}

.home-story__facts {
  display: grid;
  grid-template-rows: repeat(3, 1fr) auto;
  padding: 1rem;
  border-left: 1px solid #2c3037;
  background:
    linear-gradient(145deg, rgb(0 113 227 / 13%), transparent 40%),
    var(--nutra-ink);
}

.home-story__facts article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.35rem 1.5rem;
  border-bottom: 1px solid #2c3037;
}

.home-story__facts strong {
  color: var(--nutra-white);
  font-size: clamp(2.35rem, 4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 0.95;
}

.home-story__facts img {
  width: auto;
  max-width: 100%;
  height: 2.6rem;
  filter: brightness(0) invert(1);
}

.home-story__facts span {
  margin-top: 0.55rem;
  color: rgb(255 255 255 / 57%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.home-story__facts > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  border-radius: 0.8rem;
  background: var(--nutra-gold-strong);
  color: var(--nutra-ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Fructose-free parallax break */
.home-fructose {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(30rem, 38vw, 35rem);
  overflow: hidden;
  background: #050608;
  color: var(--nutra-white);
}

.home-fructose__media,
.home-fructose__veil {
  position: absolute;
  inset: 0;
}

.home-fructose__media {
  z-index: -2;
  display: block;
  margin: 0;
}

.home-fructose__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.1);
}

.home-fructose__veil {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(2 4 7 / 70%) 0%, rgb(2 4 7 / 83%) 42%, rgb(2 4 7 / 91%) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 20%), rgb(0 0 0 / 58%));
}

.home-fructose__inner {
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(13rem, 0.38fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  padding-block: clamp(2.75rem, 4vw, 3.75rem);
}

.home-fructose__seal {
  display: grid;
  place-items: center;
}

.home-fructose__seal img {
  width: min(100%, 16rem);
  height: auto;
  filter: drop-shadow(0 1.5rem 2.5rem rgb(0 0 0 / 42%));
}

.home-fructose .home-kicker {
  margin-bottom: 1rem;
}

.home-fructose h2 {
  max-width: 56rem;
  margin: 0;
  color: var(--nutra-white);
  font-size: clamp(2.85rem, 5.4vw, 5.75rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.94;
}

.home-fructose h2 span {
  color: var(--nutra-gold-strong);
}

.home-fructose__copy > p {
  max-width: 53rem;
  margin: clamp(1.25rem, 2.4vw, 2rem) 0 1.75rem;
  color: rgb(255 255 255 / 72%);
  font-size: clamp(0.88rem, 1.15vw, 1.05rem);
  font-weight: 500;
  line-height: 1.75;
}

.home-fructose__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.home-fructose__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding-block: 0.8rem;
  border-bottom: 2px solid var(--nutra-gold-strong);
  color: var(--nutra-white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: gap 180ms ease, color 180ms ease;
}

.home-fructose__link:hover,
.home-fructose__link:focus-visible {
  gap: 1rem;
  color: var(--nutra-gold-strong);
}

@supports (animation-timeline: view()) {
  .home-fructose__media img {
    animation: home-fructose-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
}

@keyframes home-fructose-parallax {
  from {
    transform: translateY(-4%) scale(1.12);
  }

  to {
    transform: translateY(4%) scale(1.12);
  }
}

/* Confidence */
.home-confidence {
  padding-top: var(--home-gap);
  background: var(--nutra-white);
}

.home-confidence__panel {
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--nutra-line);
  border-radius: 1.8rem;
  background:
    radial-gradient(circle at 100% 0, rgb(0 113 227 / 12%), transparent 30rem),
    var(--nutra-surface);
}

.home-confidence__panel > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.home-confidence h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.4rem);
}

.home-confidence__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--nutra-line);
  border-radius: 1.2rem;
  background: var(--nutra-white);
  box-shadow: 0 15px 40px rgb(17 24 39 / 7%);
}

.home-confidence article {
  min-height: 13rem;
  padding: 1.5rem;
}

.home-confidence article + article {
  border-left: 1px solid var(--nutra-line);
}

.home-confidence article > span {
  display: grid;
  width: 3.25rem;
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  place-items: center;
  border: 1px solid rgb(0 113 227 / 20%);
  border-radius: 0.85rem;
  background: rgb(0 113 227 / 8%);
  color: var(--nutra-blue);
  font-size: 1.25rem;
}

.home-confidence h3 {
  margin: 0 0 0.55rem;
  color: var(--nutra-ink);
  font-size: 1rem;
  font-weight: 900;
}

.home-confidence article p {
  margin: 0;
  color: var(--nutra-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.65;
}

.home-payments {
  margin-top: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--nutra-line);
  border-radius: 1.5rem;
  background: var(--nutra-white);
  box-shadow: 0 1.2rem 3rem -2.5rem rgb(17 24 39 / 30%);
}

.home-payments__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(22rem, 0.65fr);
  align-items: center;
  gap: 1rem;
}

.home-payments__icon {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgb(0 113 227 / 20%);
  border-radius: 0.9rem;
  background: rgb(0 113 227 / 8%);
  color: var(--nutra-blue);
  font-size: 1.1rem;
}

.home-payments__header div > p {
  margin: 0 0 0.25rem;
  color: var(--nutra-blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-payments__header h3 {
  margin: 0;
  color: var(--nutra-ink);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.home-payments__header > p {
  justify-self: end;
  max-width: 29rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(0 113 227 / 14%);
  border-radius: 0.9rem;
  background: rgb(0 113 227 / 5%);
  color: #505866;
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  font-weight: 550;
  line-height: 1.55;
}

.home-payments__header > p strong {
  color: var(--nutra-blue-dark);
  font-weight: 800;
}

.home-payments__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.home-payment-method {
  display: flex;
  min-width: 0;
  min-height: 7.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--nutra-line);
  border-radius: 1rem;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 78%), transparent),
    var(--nutra-surface);
}

.home-payment-method img {
  width: auto;
  max-width: min(10rem, 90%);
  height: 2.4rem;
  object-fit: contain;
}

.home-payment-method:first-child img {
  height: 2rem;
}

.home-payment-method span {
  color: var(--nutra-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.home-refresh .home-payments__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--nutra-line);
  color: #747b87;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

.home-payments__note i {
  color: var(--nutra-blue);
}

/* Stores */
.home-stores {
  padding-top: 0;
  background: var(--nutra-white);
}

.home-stores__panel {
  position: relative;
  display: grid;
  min-height: 31rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 16% 18%, rgb(229 187 71 / 18%), transparent 22rem),
    linear-gradient(115deg, #141311, #0a0d14 62%, #061a38);
  color: var(--nutra-white);
  isolation: isolate;
}

.home-stores__panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 73% 42%, rgb(0 113 227 / 16%), transparent 28%),
    radial-gradient(circle at 82% 63%, rgb(229 187 71 / 7%), transparent 24%);
  content: "";
  pointer-events: none;
}

.home-stores__panel::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(8 10 14 / 20%), transparent 48%, rgb(3 15 34 / 12%));
  content: "";
  pointer-events: none;
}

.home-stores__map {
  position: absolute;
  top: 50%;
  left: 57%;
  z-index: 0;
  width: clamp(18rem, 31vw, 27rem);
  height: auto;
  opacity: 0.72;
  filter: drop-shadow(0 1.5rem 2.5rem rgb(0 0 0 / 42%));
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.home-stores__map-outline {
  fill: url("#home-stores-map-fill");
  stroke: rgb(229 187 71 / 74%);
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.home-stores__map-route {
  fill: none;
  stroke: rgb(255 255 255 / 34%);
  stroke-dasharray: 5 8;
  stroke-linecap: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.home-stores__map-marker circle:first-child {
  fill: rgb(229 187 71 / 18%);
}

.home-stores__map-marker circle:last-child {
  fill: var(--nutra-gold-strong);
  stroke: var(--nutra-white);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.home-stores__copy,
.home-stores__cities {
  position: relative;
  z-index: 2;
}

.home-stores h2 {
  color: var(--nutra-white);
}

.home-stores__copy > p:not(.home-kicker) {
  max-width: 35rem;
  margin: 1.4rem 0 1.8rem;
  color: rgb(255 255 255 / 68%);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
}

.home-stores__cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 1.25rem;
  background: rgb(7 10 16 / 74%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-stores__cities-title {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.15rem;
  color: rgb(255 255 255 / 72%);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-stores__cities-title i {
  color: var(--nutra-gold-strong);
  font-size: 0.85rem;
}

/* El <ul> no genera caja propia: sus <li> siguen siendo items directos
   del grid de .home-stores__cities, igual que los <span> anteriores. */
.home-stores__cities-list {
  display: contents;
  list-style: none;
}

.home-stores__cities li {
  position: relative;
  padding: 0.95rem 1rem 0.95rem 2.4rem;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 0.8rem;
  background: rgb(255 255 255 / 6%);
  color: var(--nutra-white);
  font-size: clamp(0.88rem, 1.4vw, 1rem);
  font-weight: 700;
}

.home-stores__cities li::before {
  position: absolute;
  top: 50%;
  left: 1rem;
  width: 0.55rem;
  aspect-ratio: 1;
  border: 2px solid var(--nutra-gold-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem rgb(229 187 71 / 12%);
  content: "";
  transform: translateY(-50%);
}

/* Floating contact */
.home-whatsapp {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 20;
  display: grid;
  width: 3.75rem;
  aspect-ratio: 1;
  place-items: center;
  border: 3px solid var(--nutra-white);
  border-radius: 50%;
  background: #16a864;
  color: var(--nutra-white);
  font-size: 1.7rem;
  text-decoration: none;
  box-shadow: 0 12px 30px rgb(0 0 0 / 24%);
  transition: transform 180ms ease;
}

.home-whatsapp:hover,
.home-whatsapp:focus-visible {
  color: var(--nutra-white);
  transform: translateY(-3px) scale(1.04);
}

/* Progressive reveal */
[data-reveal] {
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.75rem);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keep the shared navigation above the hero */
.container-x,
.container-movile {
  z-index: 100 !important;
}

.header,
.container-movile {
  font-family: "Montserrat", Arial, sans-serif;
  font-synthesis: none;
}

/* Match the original homepage: transparent over the hero, dark after scroll
   through the shared .expansive class managed by menu.js. */
.container-movile {
  background: transparent;
}

@media (min-width: 601px) {
  .home-hero {
    background-image: url("/video/intro-2026/poster-nutramerican-desktop.webp");
  }
}

@media (prefers-reduced-motion: reduce) {
  .js:not(.home-fonts-ready) .home-hero__copy,
  .js:not(.home-fonts-ready) .home-hero__proof > div,
  .js:not(.home-fonts-ready) .home-hero__quick a {
    transform: none;
  }

  .js.home-fonts-ready .home-hero__copy,
  .js.home-fonts-ready .home-hero__proof > div,
  .js.home-fonts-ready .home-hero__quick a {
    transition: none;
  }
}

@media (max-width: 1100px) {
  .home-hero__copy {
    width: min(46rem, 84vw);
  }

  .home-hero__proof {
    display: none;
  }

  .goal-card--lead,
  .goal-card--feature {
    min-height: 31rem;
  }

  .goal-card--compact {
    grid-column: span 6;
  }

  .goal-card--panel {
    grid-column: span 12;
  }

  .goal-card--panel .goal-card__copy {
    width: 55%;
  }

  .goal-card--panel .goal-card__product {
    top: 50%;
    right: 4%;
    width: 39%;
  }

  .home-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-kit {
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
  }

  .home-kit__media {
    height: 30rem;
  }

  .home-kit__media img {
    width: min(110%, 34rem);
  }

  .home-story__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
  }

  .home-confidence__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-confidence article:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--nutra-line);
  }

  .home-confidence article:nth-child(4) {
    border-top: 1px solid var(--nutra-line);
  }
}

@media (max-width: 900px) {
  :root {
    --home-gap: 4.75rem;
  }

  .home-section__heading {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .home-section__heading h2 {
    font-size: clamp(2.65rem, 8vw, 4.5rem);
  }

  .home-section__heading > p {
    max-width: 43rem;
  }

  .home-recipes__copy {
    width: min(67%, 37rem);
  }

  .home-recipes__media img {
    object-position: 58% center;
  }

  .home-fructose__inner {
    grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 0.68fr);
    gap: clamp(1.75rem, 5vw, 3rem);
  }

  .home-fructose__seal img {
    width: min(100%, 13rem);
  }

  .home-ticker__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-ticker span:nth-child(3) {
    border-top: 1px solid #2b2e35;
    border-left: 0;
  }

  .home-ticker span:nth-child(4) {
    border-top: 1px solid #2b2e35;
  }

  .goal-card--lead,
  .goal-card--feature,
  .goal-card--compact {
    grid-column: span 6;
    min-height: 29rem;
  }

  .goal-card__copy,
  .goal-card--compact .goal-card__copy {
    width: 75%;
  }

  .goal-card__product,
  .goal-card--compact .goal-card__product {
    top: 35%;
    right: -4%;
    width: 60%;
  }

  .goal-card:hover .goal-card__product,
  .goal-card--compact:hover .goal-card__product {
    transform: translateY(-52%) scale(1.035);
  }

  .home-kit {
    min-height: 49rem;
    grid-template-columns: 1fr;
    align-content: start;
    padding: 3rem 3rem 0;
  }

  .home-kit__copy {
    max-width: none;
  }

  .home-kit h3 {
    max-width: 13ch;
    font-size: clamp(3rem, 8vw, 4.4rem);
  }

  .home-kit__description {
    max-width: 42rem;
  }

  .home-kit__media {
    height: 29rem;
    margin-top: -1rem;
  }

  .home-kit__media img {
    width: min(78%, 34rem);
    max-height: calc(100% - 3rem);
    transform: none;
  }

  .home-kit::before {
    top: 24%;
    right: -12%;
    width: 72%;
  }

  .home-story__grid {
    grid-template-columns: 1fr;
  }

  .home-story__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
    border-top: 1px solid #2c3037;
    border-left: 0;
  }

  .home-story__facts article {
    min-height: 10rem;
    border-bottom: 0;
  }

  .home-story__facts article + article {
    border-left: 1px solid #2c3037;
  }

  .home-story__facts > a {
    grid-column: 1 / -1;
  }

  .home-stores__panel {
    grid-template-columns: 1fr;
  }

  .home-payments__header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-payments__header > p {
    grid-column: 2;
    justify-self: start;
  }

  .home-payments__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-stores__map {
    top: 45%;
    right: -2%;
    left: auto;
    width: min(54vw, 25rem);
    opacity: 0.42;
    transform: translateY(-50%) rotate(-4deg);
  }

  .home-stores__cities {
    width: min(100%, 43rem);
  }
}

@media (max-width: 640px) {
  :root {
    --home-pad: 1rem;
    --home-gap: 3.75rem;
  }

  .home-kicker {
    font-size: 0.62rem;
  }

  .home-section__heading,
  .home-section__heading--compact {
    display: grid;
    grid-template-columns: 1fr;
  }

  .home-section__heading h2,
  .home-confidence h2,
  .home-stores h2 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
    line-height: 0.96;
  }

  .home-text-link {
    width: max-content;
  }

  .home-button {
    width: 100%;
  }

  .home-recipes {
    min-height: 39rem;
  }

  .home-recipes__media img {
    object-position: 66% center;
    transform: none;
  }

  .home-recipes__veil {
    background:
      linear-gradient(0deg, rgb(4 6 10 / 98%) 0%, rgb(4 6 10 / 92%) 38%, rgb(4 6 10 / 50%) 69%, rgb(4 6 10 / 18%) 100%),
      linear-gradient(90deg, rgb(4 6 10 / 24%), rgb(4 6 10 / 5%));
  }

  .home-recipes__inner {
    align-items: flex-end;
    padding-top: 12rem;
    padding-bottom: 3rem;
  }

  .home-recipes__copy {
    width: 100%;
  }

  .home-recipes__intro {
    gap: 0.9rem;
    margin-bottom: 1rem;
  }

  .home-recipes__logo {
    width: 4.7rem;
  }

  .home-recipes h2 {
    font-size: clamp(2.9rem, 14vw, 3.8rem);
    line-height: 0.92;
  }

  .home-recipes__copy > p {
    margin: 1.15rem 0 1.5rem;
    font-size: 0.88rem;
    line-height: 1.65;
  }

  .home-fructose {
    min-height: 43rem;
  }

  .home-fructose__media img {
    object-position: 48% center;
    transform: scale(1.06);
  }

  .home-fructose__veil {
    background:
      linear-gradient(0deg, rgb(2 4 7 / 98%) 0%, rgb(2 4 7 / 92%) 48%, rgb(2 4 7 / 40%) 78%, rgb(2 4 7 / 12%) 100%),
      linear-gradient(90deg, rgb(0 0 0 / 18%), rgb(0 0 0 / 5%));
  }

  .home-fructose__inner {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 0.9rem;
    padding-top: 9.25rem;
    padding-bottom: 2.5rem;
  }

  .home-fructose__seal {
    justify-items: start;
  }

  .home-fructose__seal img {
    width: 6rem;
  }

  .home-fructose h2 {
    font-size: clamp(2.2rem, 9.3vw, 2.65rem);
    line-height: 0.94;
  }

  .home-fructose__copy > p {
    margin: 1.1rem 0 1.4rem;
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .home-fructose__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .home-fructose__link {
    width: max-content;
  }

  .home-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .home-hero {
    min-height: 100svh;
  }

  .home-hero__video {
    object-position: center;
  }

  .home-hero__veil {
    background:
      linear-gradient(0deg, rgb(4 5 8 / 92%) 0%, rgb(4 5 8 / 62%) 48%, rgb(4 5 8 / 20%) 78%),
      linear-gradient(90deg, rgb(0 113 227 / 16%), transparent);
  }

  .home-hero__content {
    min-height: 100svh;
    align-items: flex-end;
    padding-top: 6rem;
    padding-bottom: 10.25rem;
  }

  .home-hero__copy {
    width: 100%;
  }

  .home-hero__lead {
    max-width: 32rem;
    margin: 1.2rem 0 1.4rem;
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .home-hero__quick a {
    min-height: 5.75rem;
    flex-direction: column;
    gap: 0.45rem;
    padding-inline: 0.35rem;
    font-size: 0.58rem;
    text-align: center;
  }

  .home-ticker__inner {
    padding-inline: 0;
  }

  .home-ticker span {
    min-height: 4.5rem;
    padding-inline: 0.5rem;
    font-size: 0.57rem;
    text-align: center;
  }

  .home-goals__grid {
    grid-template-columns: 1fr;
  }

  .goal-card--lead,
  .goal-card--feature,
  .goal-card--compact,
  .goal-card--panel {
    grid-column: 1;
    min-height: 36.5rem;
  }

  .goal-card,
  .product-card,
  .home-story__grid {
    border-radius: 1.25rem;
  }

  .goal-card__copy,
  .goal-card--compact .goal-card__copy,
  .goal-card--panel .goal-card__copy {
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 1.5rem;
  }

  .goal-card__details {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    margin-top: 0;
  }

  .goal-card h3,
  .goal-card--compact h3,
  .goal-card--panel h3 {
    max-width: 19rem;
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .goal-card__details > p:not(.goal-card__eyebrow) {
    max-width: 20rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
  }

  .goal-card__product,
  .goal-card--compact .goal-card__product,
  .goal-card--panel .goal-card__product {
    top: 2.7rem;
    right: 50%;
    width: min(65%, 15.5rem);
    transform: translateX(50%);
  }

  .goal-card:hover .goal-card__product,
  .goal-card--compact:hover .goal-card__product,
  .goal-card--panel:hover .goal-card__product {
    transform: translateX(50%) scale(1.025);
  }

  .home-products__grid {
    grid-template-columns: 1fr;
  }

  .product-card__media {
    aspect-ratio: 4 / 3;
  }

  .product-card__media img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .home-kits__viewport,
  .home-stores__panel,
  .home-confidence__panel {
    border-radius: 1.35rem;
  }

  .home-kit {
    min-height: 49rem;
    padding: 1.8rem 1.5rem 0;
  }

  .home-kit__meta {
    align-items: stretch;
    margin-bottom: 1.1rem;
  }

  .home-kit__goal,
  .home-kit__discount {
    min-height: 2rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.58rem;
  }

  .home-kit h3 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 12vw, 3.4rem);
  }

  .home-kit__description {
    margin-block: 1.2rem 1rem;
    font-size: 0.86rem;
  }

  .home-kit__benefits {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
  }

  .home-kit__copy .home-button {
    width: 100%;
  }

  .home-kit__media {
    height: 20rem;
    margin-top: 0;
  }

  .home-kit__media img {
    width: min(104%, 26rem);
    max-height: none;
  }

  .home-kit::before {
    top: 42%;
    right: -32%;
    width: 118%;
  }

  .home-kits__controls {
    margin-top: 1rem;
  }

  .home-kits__controls > button {
    width: 3rem;
  }

  .home-video {
    min-height: 20rem;
  }

  .home-video__trigger {
    bottom: 1rem;
    left: 1rem;
  }

  .home-video__trigger span {
    width: 3.25rem;
  }

  .home-story__facts {
    grid-template-columns: 1fr;
  }

  .home-story__facts article {
    min-height: 8rem;
  }

  .home-story__facts article + article {
    border-top: 1px solid #2c3037;
    border-left: 0;
  }

  .home-confidence__panel {
    padding: 1.5rem;
  }

  .home-confidence__panel > header {
    display: block;
  }

  .home-confidence__grid {
    grid-template-columns: 1fr;
  }

  .home-confidence article {
    display: grid;
    min-height: auto;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }

  .home-confidence article + article,
  .home-confidence article:nth-child(3),
  .home-confidence article:nth-child(4) {
    border-top: 1px solid var(--nutra-line);
    border-left: 0;
  }

  .home-confidence article > span {
    margin-bottom: 0;
  }

  .home-payments {
    padding: 1rem;
    border-radius: 1.25rem;
  }

  .home-payments__header {
    align-items: start;
  }

  .home-payments__header > p {
    grid-column: 1 / -1;
    max-width: none;
  }

  .home-payments__grid {
    gap: 0.6rem;
    margin-top: 1.1rem;
  }

  .home-payment-method {
    min-height: 6.75rem;
    padding: 0.8rem 0.55rem;
  }

  .home-payment-method img {
    max-width: 90%;
    height: 2rem;
  }

  .home-refresh .home-payments__note {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .home-stores__panel {
    min-height: auto;
    padding: 2.25rem 1.5rem;
  }

  .home-stores__map {
    top: 8rem;
    right: -9rem;
    width: 23rem;
    opacity: 0.26;
    transform: rotate(-5deg);
  }

  .home-stores__cities {
    grid-template-columns: 1fr;
    padding: 0.8rem;
  }

  .home-whatsapp {
    width: 3.3rem;
    font-size: 1.45rem;
  }

  .home-whatsapp.is-over-hero {
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .home-fructose__media img {
    animation: none;
    transform: scale(1.06);
  }

  /* Sin latido, pero conservando el enfasis: anillo estatico en vez de nada,
     para que el boton de reproducir siga destacando sobre el poster. */
  .home-video__trigger span::before {
    animation: none;
    opacity: 0.55;
    transform: scale(1.25);
  }
}


/* Enlace redundante sobre la imagen de la tarjeta de objetivo.
   display:contents hace que el <a> no genere caja propia, así que el <picture>
   conserva exactamente la misma maquetación que tenía suelto y ningún selector
   de .goal-card__product deja de aplicar. */

.goal-card__enlace-imagen {
  display: contents;
  cursor: pointer;
}

.goal-card__enlace-imagen img {
  cursor: pointer;
}