@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Karla:wght@400;500;700&display=swap');

/* =========================================================================
   FRUTTIMANIA - hoja de estilos (borrador privado v2)
   Paleta y tipografia del brief (hex exactos del arte de empaque).
   Vanilla CSS: custom properties, tema claro/oscuro, y movimiento ligado al
   scroll con animation-timeline (con respaldo estatico donde no se soporte).
   ========================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --cream:        #FCF6CF;
  --cacao:        #4A2E1E;
  --mango:        #F9B233;
  --olive:        #82995C;
  --coral:        #F08370;
  --pink:         #D44A6B;
  --gold:         #DA9F3A;
  --flag-green:   #1E5B34;
  --pure-white:   #FFFFFF;

  --band-mango:      #F9B233;
  --band-pineapple:  #82995C;
  --band-banana:     #DA9F3A;
  --band-dragon:     #D44A6B;
  --band-gum-banana: #65453F;
  --band-gum-pina:   #82995C;
  --band-gum-guava:  #F08370;

  /* Semanticos - TEMA CLARO (crema de marca) */
  --bg:            var(--cream);
  --surface:       #FFFDF2;
  --surface-2:     #FBF3D6;
  --text:          var(--cacao);
  --text-muted:    color-mix(in srgb, var(--cacao) 66%, var(--cream));
  --text-on-color: #FFFDF2;
  --border:        color-mix(in srgb, var(--cacao) 18%, transparent);
  --border-strong: color-mix(in srgb, var(--cacao) 32%, transparent);
  --accent:        var(--mango);

  --about-bg:   #47592E;
  --gummies-bg: #3B2418;
  --footer-bg:  #2B1B12;
  --nav-bg:     color-mix(in srgb, var(--cream) 85%, transparent);

  /* Vidrio (glassmorphism): superficie translucida + veta de luz en el borde */
  --glass-bg:     rgba(255, 253, 242, .55);
  --glass-border: rgba(255, 255, 255, .55);
  --glass-hi:     rgba(255, 255, 255, .5);
  --glass-shadow: rgba(74, 46, 30, .16);

  --shadow-sm: 0 1px 2px rgba(74,46,30,.10), 0 4px 14px rgba(74,46,30,.07);
  --shadow-md: 0 12px 34px rgba(74,46,30,.14);
  --shadow-lg: 0 30px 70px rgba(74,46,30,.22);

  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-pill: 999px;

  --pad-section: clamp(4rem, 9vw, 7.5rem);
  --maxw: 1180px;
  --maxw-narrow: 960px;

  --font-display: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2B1B12; --surface: #35271C; --surface-2: #3B2C20;
    --text: var(--cream);
    --text-muted: color-mix(in srgb, var(--cream) 66%, var(--cacao));
    --text-on-color: #FFFDF2;
    --border: color-mix(in srgb, var(--cream) 16%, transparent);
    --border-strong: color-mix(in srgb, var(--cream) 30%, transparent);
    --accent: var(--mango);
    --about-bg: #3C4C29; --gummies-bg: #46331F; --footer-bg: #1F1006;
    --nav-bg: color-mix(in srgb, #2B1B12 84%, transparent);
    --glass-bg: rgba(53, 39, 28, .5); --glass-border: rgba(255,255,255,.12); --glass-hi: rgba(255,255,255,.08); --glass-shadow: rgba(0,0,0,.5);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 4px 16px rgba(0,0,0,.30);
    --shadow-md: 0 12px 38px rgba(0,0,0,.44);
    --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg: #2B1B12; --surface: #35271C; --surface-2: #3B2C20;
  --text: var(--cream);
  --text-muted: color-mix(in srgb, var(--cream) 66%, var(--cacao));
  --text-on-color: #FFFDF2;
  --border: color-mix(in srgb, var(--cream) 16%, transparent);
  --border-strong: color-mix(in srgb, var(--cream) 30%, transparent);
  --accent: var(--mango);
  --about-bg: #3C4C29; --gummies-bg: #46331F; --footer-bg: #1F1006;
  --nav-bg: color-mix(in srgb, #2B1B12 84%, transparent);
  --glass-bg: rgba(53, 39, 28, .5); --glass-border: rgba(255,255,255,.12); --glass-hi: rgba(255,255,255,.08); --glass-shadow: rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.34), 0 4px 16px rgba(0,0,0,.30);
  --shadow-md: 0 12px 38px rgba(0,0,0,.44);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
}

/* ---- 2. Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* la fruta decorativa asoma fuera del marco; recortamos el desborde horizontal */
html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
/* grano de papel: solo pseudo fijo, sin pintar en contenedores que scrollean */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .04; mix-blend-mode: multiply;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .03; }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; max-width: 62ch; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--mango); color: var(--cacao); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); position: relative; }
.container--narrow { max-width: var(--maxw-narrow); }

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  background: var(--cacao); color: var(--cream);
  padding: .6rem 1rem; border-radius: var(--r-pill); font-weight: 700;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
#topSentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ---- 3. Marcador de color (estilo Heyday) -------------------------- */
.mark {
  --mark: var(--mango);
  background: var(--mark); color: var(--cacao);
  padding: 0.02em 0.26em; border-radius: 7px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline;
}
.mark--rot { display: inline-block; transform: rotate(-1.4deg); }

/* ---- 4. Barra superior fija -------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  box-shadow: inset 0 -1px 0 var(--glass-hi);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--glass-border); box-shadow: inset 0 -1px 0 var(--glass-hi), var(--shadow-sm); }
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 clamp(1.1rem, 4vw, 2.2rem);
  height: 80px; display: flex; align-items: center; gap: 1.5rem;
  transition: height .3s var(--ease);
}
.nav[data-scrolled="true"] .nav__inner { height: 62px; }

.wordmark {
  display: inline-flex; align-items: baseline; gap: .04em; flex: none;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--text); text-transform: lowercase; text-decoration: none;
  white-space: nowrap; position: relative;
  transition: color .4s var(--ease), font-size .3s var(--ease);
}
.nav[data-scrolled="true"] .wordmark { font-size: 1.5rem; }
.wordmark .dot { /* el punto suelto sobre la i de "mania" */
  width: .16em; height: .16em; border-radius: 50%;
  background: var(--mango); display: inline-block;
  transform: translateY(-1.05em); margin-left: -0.34em; margin-right: .18em;
}

.nav__links {
  display: flex; gap: 1.4rem; margin: 0 0 0 auto; padding: 0; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
}
.nav__links a {
  text-decoration: none; padding: .3rem 0; position: relative; white-space: nowrap;
  color: var(--text-muted); transition: color .18s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--accent); border-radius: 2px; transition: right .22s var(--ease);
}
.nav__links a:hover::after { right: 0; }
.nav__links a.is-active { color: var(--text); }
.nav__links a.is-active::after { right: 0; }

.nav__controls { display: flex; align-items: center; gap: .5rem; flex: none; }
.pill-btn {
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; letter-spacing: .04em;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  padding: .46rem .7rem; border-radius: var(--r-pill); cursor: pointer;
  min-width: 44px; min-height: 38px;
  transition: background-color .18s var(--ease), transform .12s var(--ease);
}
.pill-btn:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.pill-btn:active { transform: translateY(1px) scale(.98); }

.nav__toggle {
  display: none; width: 42px; height: 38px; border: 1px solid var(--border-strong);
  background: transparent; border-radius: var(--r-sm); cursor: pointer; padding: 0; place-items: center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after  { position: absolute; top: 6px; }
.nav[data-open="true"] .nav__toggle span { background: transparent; }
.nav[data-open="true"] .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__toggle { display: grid; }
  .nav__inner { height: 68px; }
  .nav[data-scrolled="true"] .nav__inner { height: 60px; }
  .wordmark, .nav[data-scrolled="true"] .wordmark { font-size: 1.5rem; }
  .nav__links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0; margin: 0;
    background: var(--bg); border-bottom: 1px solid var(--border);
    padding: .5rem clamp(1.1rem, 4vw, 2.2rem) 1.25rem;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease); font-size: 1.15rem;
  }
  .nav[data-open="true"] .nav__links { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav__links li { border-bottom: 1px solid var(--border); }
  .nav__links a { display: block; padding: .95rem .2rem; color: var(--text); }
  .nav__links a::after { display: none; }
}

/* ---- 5. Botones --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  padding: .82rem 1.5rem; border-radius: var(--r-pill);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .12s var(--ease), box-shadow .2s var(--ease), background-color .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--cacao); color: var(--cream); box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .btn--primary { background: var(--mango); color: var(--cacao); }
.btn--ghost { border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.btn--wa { background: #1FA855; color: #fff; }
.btn--wa:hover { background: #1c9a4e; box-shadow: var(--shadow-md); }

/* ---- 6. Separador rasgado (motivo de marca) --------------------- */
/* Primer hijo de cada seccion de color: dos capas de papel roto
   (una crema/blanca y una del color de la seccion) para dar profundidad. */
.tear--self {
  position: absolute; left: -1px; right: -1px; top: 0;
  transform: translateY(-99%); line-height: 0; pointer-events: none; z-index: 2;
}
.tear--self svg { display: block; width: 100%; height: clamp(30px, 5vw, 64px); }
.tear--self .tear-back { fill: var(--pure-white); opacity: .5; }
.tear--self .tear-front { fill: var(--tear-fill, var(--bg)); }
:root[data-theme="dark"] .tear--self .tear-back { fill: var(--cream); opacity: .1; }

/* ---- 7. Secciones base ----------------------------------------- */
section { position: relative; }
.section-pad { padding-block: var(--pad-section); }
.eyebrow {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: .78rem; color: var(--text-muted); margin: 0 0 1rem;
}
.section-title { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 20ch; }
.section-lead { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--text-muted); max-width: 52ch; margin-top: .4rem; }

/* ---- 8. Hero --------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(80px + clamp(1.5rem, 5vw, 3.5rem));
  padding-bottom: clamp(2rem, 6vw, 4rem);
  min-height: clamp(560px, 88dvh, 900px);
  display: flex; align-items: center; overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center; width: 100%;
}

/* Filas de texto que fluyen sin parar detras del heroe (estilo "rails" de
   marquesina horizontal, alternando sentido fila por fila). Puramente
   decorativo: aria-hidden y sin eventos de puntero. */
.hero__rails {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-evenly;
  pointer-events: none;
}
.hero__rail { display: flex; width: max-content; }
.hero__track {
  display: inline-block; white-space: nowrap; flex: none; padding-right: 2.2rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.1rem, 8vw, 5.2rem); line-height: 1; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--text) 12%, transparent);
}
/* una palabra por fila lleva un acento pastel del color de un producto:
   se mezcla con el propio fondo (no con blanco) para que en ambos temas
   quede igual de discreta, nunca mas fuerte que el resto del texto. */
.hero__track b {
  font-weight: inherit; font-style: normal;
  color: color-mix(in srgb, var(--rail-color, var(--text)) 34%, var(--bg) 66%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__rail--l { animation: railL linear infinite; }
  .hero__rail--r { animation: railR linear infinite; }
  .hero__rail:nth-child(1) { animation-duration: 23s; }
  .hero__rail:nth-child(2) { animation-duration: 28s; }
  .hero__rail:nth-child(3) { animation-duration: 33s; }
  .hero__rail:nth-child(4) { animation-duration: 19s; }
  @keyframes railL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes railR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero__rail--l { transform: translateX(-15%); }
  .hero__rail--r { transform: translateX(-32%); }
}
@media (max-width: 640px) { .hero__rails { opacity: .8; } }
.hero__since {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .8rem; color: var(--text-muted); margin: 0 0 1.1rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.hero__since::before { content: ""; width: 1.6rem; height: 2px; background: var(--mango); border-radius: 2px; }

/* Logo grande: bloque de dos lineas, como el lockup real del empaque */
.hero__logo {
  display: block; margin: 0 0 .7rem; will-change: transform, opacity;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.4rem, 13vw, 7.5rem); line-height: .86;
  letter-spacing: -0.045em; text-transform: lowercase; color: var(--text);
}
.hero__tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem); line-height: 1.15;
  letter-spacing: -0.01em; margin: 0 0 1.1rem; color: var(--text); max-width: 22ch;
}
.hero__tagline .mark { margin-top: .1em; }
.hero__sub { font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--text-muted); max-width: 42ch; margin-bottom: 1.7rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* entrada al cargar la pagina (no ligada al scroll: el hero ya esta a la vista) */
@media (prefers-reduced-motion: no-preference) {
  .load-in { animation: loadIn .85s var(--ease) both; }
  .hero__logo.load-in    { animation-delay: .02s; }
  .hero__tagline.load-in { animation-delay: .15s; }
  .hero__sub.load-in     { animation-delay: .26s; }
  .hero__cta.load-in     { animation-delay: .37s; }
  @keyframes loadIn { from { opacity: 0; transform: translateY(20px); } }
}

.hero__pouches { position: relative; aspect-ratio: 1 / 0.94; will-change: transform; }
.hero__pouches img {
  position: absolute; height: auto; transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 16px 26px rgba(74,46,30,.2));
}
.hero__pouches img:nth-child(1) { left: 2%;   top: 20%; --r: -8deg; z-index: 2; width: 40%; }
.hero__pouches img:nth-child(2) { left: 34%;  top: 6%;  --r: 3deg;  z-index: 3; width: 44%; }
.hero__pouches img:nth-child(3) { right: 0%;  top: 38%; --r: 10deg; z-index: 1; width: 36%; }
/* respiracion continua, independiente del parallax de scroll del contenedor */
@media (prefers-reduced-motion: no-preference) {
  .hero__pouches img { animation: floatIdle 6s ease-in-out infinite; }
  .hero__pouches img:nth-child(1) { animation-delay: -1s; }
  .hero__pouches img:nth-child(2) { animation-delay: -3s; }
  .hero__pouches img:nth-child(3) { animation-delay: -5s; }
  @keyframes floatIdle {
    0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%      { transform: translateY(-10px) rotate(var(--r, 0deg)); }
  }
}
/* al rotar de producto, la funda cae y gira un poco al salir, y entra
   cayendo desde arriba con un leve giro tambien (en vez de un simple fundido).
   Va DESPUES del bloque de arriba y fija su propio animation-delay: el
   ":nth-child" de la respiracion continua tiene la misma especificidad y,
   si esta regla quedara antes en la hoja, ese retraso negativo (heredado del
   floatIdle) haria que la transicion saltara directo al final sin verse. */
@media (prefers-reduced-motion: no-preference) {
  .hero__pouches img.is-out {
    animation: pouchOut .38s cubic-bezier(.4,0,.7,1) both;
    animation-delay: 0s;
  }
  .hero__pouches img.is-in {
    animation: pouchIn .55s cubic-bezier(.22,1.12,.4,1) both;
    animation-delay: 0s;
  }
  @keyframes pouchOut {
    from { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
    to   { transform: translateY(55px) rotate(calc(var(--r, 0deg) + 10deg)); opacity: 0; }
  }
  @keyframes pouchIn {
    from { transform: translateY(-70px) rotate(calc(var(--r, 0deg) - 10deg)); opacity: 0; }
    to   { transform: translateY(0) rotate(var(--r, 0deg)); opacity: 1; }
  }
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding-top: calc(68px + 2rem); }
  .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__logo { font-size: clamp(3rem, 20vw, 5.5rem); }
  .hero__pouches { width: 100%; aspect-ratio: 16 / 10; max-width: 460px; margin-inline: auto; order: 2; }
}

/* ---- 9. La linea completa (fila horizontal) ------------------- */
.line { background: var(--surface); --tear-fill: var(--surface); }
.line__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-bottom: 2rem; flex-wrap: wrap;
}
.line__title { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0; }
.line__head--sub { margin-top: 1.4rem; margin-bottom: 1.2rem; }
.line__subtitle {
  font-family: var(--font-body); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  font-size: .95rem; color: var(--text-muted); margin: 0;
}
.line__track--gummies { padding-top: 0; }
.line__nav { display: flex; align-items: center; gap: .7rem; }
.line__hint { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--text-muted); }
.line__nav button {
  width: 46px; height: 46px; border-radius: var(--r-pill); cursor: pointer;
  border: 2px solid var(--border-strong); background: var(--bg); color: var(--text);
  font-size: 1.2rem; display: grid; place-items: center;
  transition: background-color .16s var(--ease), transform .12s, opacity .16s;
}
.line__nav button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.line__nav button:active { transform: scale(.94); }
.line__nav button[disabled] { opacity: .35; cursor: default; }

.line__track {
  display: flex; gap: clamp(.9rem, 2.5vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(1.1rem, 4vw, 2.2rem);
  padding: .5rem clamp(1.1rem, 4vw, 2.2rem) 1.6rem;
  margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2.2rem));
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.line__track::-webkit-scrollbar { height: 8px; }
.line__track::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

/* tarjeta de producto: un boton completo, clickeable */
.media-frame {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(0,0,0,.06));
  padding: 8%;
  overflow: hidden;
}
.media-frame img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.pcard {
  scroll-snap-align: start; flex: 0 0 auto;
  width: clamp(190px, 44vw, 244px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: transparent; border: 0; padding: .4rem; margin: 0; cursor: pointer;
  font: inherit; color: inherit; border-radius: var(--r-md);
  transition: transform .28s var(--ease);
}
.pcard .media-frame { width: 100%; }
.pcard img { width: auto; max-width: 100%; height: auto; transition: transform .3s var(--ease); }
.pcard:hover .media-frame img { transform: scale(1.03); }
.pcard__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: .7rem;
  padding-bottom: .3rem; border-bottom: 4px solid var(--pc-band, var(--accent));
}
.pcard__more {
  margin-top: .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted); opacity: 0; transform: translateY(4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pcard:hover .pcard__more, .pcard:focus-visible .pcard__more { opacity: 1; transform: none; }

/* ---- 10. Quienes somos (banda oliva) ------------------------- */
.about { background: var(--about-bg); color: var(--text-on-color); --tear-fill: var(--about-bg); }
.about__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.about__title { font-size: clamp(2rem, 4.8vw, 3rem); }
.about__body { font-size: clamp(1.08rem, 2vw, 1.24rem); max-width: 52ch; }
.about__facts { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; }
.about__facts li { padding-left: 1.6rem; position: relative; font-weight: 500; }
.about__facts li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .7rem;
  background: var(--mango); border-radius: 50%;
}
@media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } }

/* ---- 11. Hueco de foto (el cliente enviara las reales) ------- */
.photo-slot {
  border: 2px dashed color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--r-lg);
  display: grid; place-content: center; text-align: center; gap: .3rem;
  padding: 2rem 1.5rem; aspect-ratio: var(--ratio, 4 / 3);
  background: color-mix(in srgb, currentColor 7%, transparent); color: inherit;
}
.photo-slot b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.photo-slot span { font-size: .82rem; opacity: .8; letter-spacing: .03em; }

/* ---- 12. Los deshidratados (cuadricula de 4) --------------- */
.dried { --tear-fill: var(--bg); }
.dried__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.6vw, 1.6rem); margin-top: 2.6rem; }
.dried-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem 1.5rem; box-shadow: var(--shadow-sm);
  border-top: 6px solid var(--dc-band, var(--accent));
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dried-card:hover, .gum-card:hover { box-shadow: var(--shadow-lg); }
.dried-card .media-frame { margin: .2rem auto .8rem; }
.dried-card img { width: auto; max-width: 100%; height: auto; transition: transform .3s var(--ease); }
.dried-card:hover .media-frame img { transform: scale(1.04); }
.dried-card h3 { font-size: 1.4rem; margin: 0 0 .1rem; }
.dried-card__kind, .gum-card__ing { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--text-muted); margin-bottom: .9rem; }
.dried-card dl { margin: auto 0 0; display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; font-size: .92rem; }
.dried-card dt { font-weight: 700; color: var(--text-muted); }
.dried-card dd { margin: 0; }
.dried-card__more, .gum-card__more {
  margin-top: 1rem; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  color: var(--text); border-bottom: 2px solid var(--dc-band, var(--accent));
  padding-bottom: 1px;
}
/* boton invisible que cubre la tarjeta */
.card-open {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: transparent; border: 0; cursor: pointer; border-radius: inherit;
  font: inherit; color: transparent;
}
.card-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.seal {
  align-self: flex-start; display: inline-flex; align-items: center;
  background: var(--flag-green); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 6px; margin-bottom: .9rem;
}
@media (max-width: 900px) { .dried__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dried__grid { grid-template-columns: 1fr; } .dried-card img { width: 60%; } }

/* ---- 13. Gomitas (bloque sobre fondo cacao) --------------- */
.gummies { background: var(--gummies-bg); color: var(--text-on-color); --tear-fill: var(--gummies-bg); }
.gummies .seal { margin-top: 1.2rem; }
.gummies__title { font-size: clamp(1.9rem, 4.8vw, 2.9rem); max-width: 20ch; }
.gummies .section-lead { color: color-mix(in srgb, var(--text-on-color) 78%, transparent); }
.gummies__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-top: 2.6rem; }
.gum-card {
  position: relative; text-align: center; display: flex; flex-direction: column; align-items: center;
  padding: 1rem .8rem 1.4rem; border-radius: var(--r-lg);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.gum-card:hover { background: color-mix(in srgb, #fff 6%, transparent); }
.gum-card .media-frame { margin: 0 auto; }
.gum-card img { width: auto; max-width: 100%; height: auto; transition: transform .3s var(--ease); }
.gum-card:hover .media-frame img { transform: scale(1.03); }
.gum-card h3 { font-size: 1.2rem; margin: .9rem 0 .1rem; padding-bottom: .3rem; border-bottom: 4px solid var(--gc-band, var(--coral)); }
.gum-card__more { color: var(--text-on-color); border-bottom-color: var(--gc-band, var(--coral)); }
@media (max-width: 760px) { .gummies__grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

/* ---- 14. Para compradores (B2B, tono sobrio) ------------- */
.buyers { background: var(--surface); --tear-fill: var(--surface); }
.buyers__intro { font-size: 1.12rem; color: var(--text-muted); max-width: 60ch; }
.buyers__clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2.8rem; }
.b-cluster h3 {
  font-size: 1.02rem; text-transform: uppercase; letter-spacing: .1em;
  font-family: var(--font-body); font-weight: 700;
  padding-bottom: .6rem; border-bottom: 2px solid var(--border-strong); margin-bottom: 1rem;
}
.b-cluster dl { margin: 0; display: grid; gap: .85rem; }
.b-cluster dt { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.b-cluster dd { margin: .1rem 0 0; font-size: .95rem; color: var(--text-muted); }
.b-cluster .note {
  margin-top: .3rem; font-size: .88rem; color: var(--text);
  background: var(--surface-2); border-left: 3px solid var(--mango);
  padding: .5rem .7rem; border-radius: 0 8px 8px 0;
}
@media (max-width: 860px) { .buyers__clusters { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- 15. Contacto --------------------------------------- */
.contact { --tear-fill: var(--bg); }
.contact__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.contact__title { font-size: clamp(2.4rem, 6vw, 3.6rem); }
.contact__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.contact__card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem; box-shadow: var(--shadow-sm); line-height: 1.9;
}
.contact__card .row { display: flex; gap: .6rem; }
.contact__card .k { font-weight: 700; color: var(--text-muted); min-width: 4.5rem; }
.contact__card a { text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.contact__card a:hover { border-color: var(--accent); }
@media (max-width: 780px) { .contact__grid { grid-template-columns: 1fr; } }

/* ---- 16. Pie de pagina -------------------------------- */
.footer { position: relative; background: var(--footer-bg); color: color-mix(in srgb, var(--cream) 90%, transparent); --tear-fill: var(--footer-bg); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; justify-content: space-between; padding-block: 3rem; }
.footer .wordmark { color: var(--cream); font-size: 1.7rem; }
.footer .wordmark .dot { background: var(--mango); }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-display); font-weight: 500; font-size: .95rem; }
.footer__nav a { text-decoration: none; opacity: .8; }
.footer__nav a:hover { opacity: 1; }
.footer__meta { width: 100%; border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .84rem; opacity: .72; }

/* ---- 17. Ventana de detalle (<dialog>) ---------------- */
.modal {
  border: 0; padding: 0; background: transparent;
  max-width: min(880px, 94vw); width: 100%; margin: auto;
  color: var(--text);
}
.modal::backdrop {
  background: color-mix(in srgb, var(--cacao) 62%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal__card {
  display: grid; grid-template-columns: 0.9fr 1.1fr; grid-template-rows: minmax(0, 1fr);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-lg);
  border: 1px solid var(--glass-border);
  position: relative; max-height: 92dvh;
}
.modal__body { overflow-y: auto; min-height: 0; }
.modal__media {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--modal-band, var(--mango)) 38%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 55%, transparent);
  display: grid; place-items: center; padding: 2rem;
}
.modal__media img { width: 78%; filter: drop-shadow(0 18px 30px rgba(74,46,30,.28)); }
.modal__body { padding: clamp(1.4rem, 3vw, 2.4rem); }
.modal__kind { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--text-muted); margin: 0 0 .2rem; }
.modal__name { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 .5rem; }
.modal__name::after { content: ""; display: block; width: 3rem; height: 5px; border-radius: 3px; background: var(--modal-band, var(--mango)); margin-top: .5rem; }
.modal__blurb { font-size: 1.02rem; color: var(--text); }
.modal__specs { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 1.2rem 0; font-size: .94rem; }
.modal__specs dt { font-weight: 700; color: var(--text-muted); }
.modal__specs dd { margin: 0; }
.modal__chips { margin-bottom: 1.4rem; }
.modal__chips-head { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--text-muted); margin: 0 0 .5rem; }
.chip {
  display: inline-block; margin: 0 .4rem .4rem 0; padding: .32rem .75rem;
  border: 1px solid var(--glass-border); border-radius: var(--r-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-size: .82rem; font-weight: 600;
}
.modal__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background-color .16s var(--ease), transform .12s;
}
.modal__close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.modal__close:active { transform: scale(.92); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modalIn .3s var(--ease); }
  .modal[open]::backdrop { animation: fadeIn .3s var(--ease); }
  @keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
  @keyframes fadeIn { from { opacity: 0; } }
}
@media (max-width: 720px) {
  .modal__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .modal__media { padding: 1.6rem 2rem .4rem; }
  .modal__media img { width: 52%; }
}

/* ---- 18. Movimiento ------------------------------------ */

/* Fruta que asoma por los lados y entra/sale al hacer scroll.
   MAQUETA: hasta que llegue el arte por capas, es un marcador con etiqueta. */
.side-fruit {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(110px, 13vw, 190px); aspect-ratio: 1;
  border-radius: 46% 54% 58% 42% / 55% 48% 52% 45%;
  border: 2px dashed color-mix(in srgb, currentColor 42%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  display: grid; place-items: center; text-align: center;
  will-change: transform, opacity;
}
.side-fruit__tag {
  font-family: var(--font-display); font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: color-mix(in srgb, currentColor 62%, transparent);
}
.side-fruit--l { left: 0;  transform: translateX(-40%) rotate(var(--rot, -12deg)); }
.side-fruit--r { right: 0; transform: translateX(40%)  rotate(var(--rot, 12deg)); }
@media (max-width: 760px) { .side-fruit { display: none; } }

/* Revelado universal (IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(26px) scale(.98); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .75s var(--ease), transform .75s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
  .reveal--d1 { transition-delay: .06s; }
  .reveal--d2 { transition-delay: .12s; }
  .reveal--d3 { transition-delay: .18s; }

  /* Movimiento ligado al scroll (mejora progresiva; respaldo = estatico) */
  @supports (animation-timeline: view()) {
    .hero__pouches {
      animation: heroPara linear both;
      animation-timeline: scroll(root);
      animation-range: 0 82vh;
    }
    @keyframes heroPara { to { transform: translateY(-46px); } }

    .side-fruit { animation: linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .side-fruit--l { animation-name: sideInL; }
    .side-fruit--r { animation-name: sideInR; }
    @keyframes sideInL {
      0%       { transform: translateX(-120%) rotate(calc(var(--rot, -12deg) - 12deg)); opacity: 0; }
      34%, 66% { transform: translateX(-22%)  rotate(var(--rot, -12deg));                opacity: 1; }
      100%     { transform: translateX(-105%) rotate(calc(var(--rot, -12deg) + 8deg));  opacity: 0; }
    }
    @keyframes sideInR {
      0%       { transform: translateX(120%)  rotate(calc(var(--rot, 12deg) + 12deg)); opacity: 0; }
      34%, 66% { transform: translateX(22%)   rotate(var(--rot, 12deg));               opacity: 1; }
      100%     { transform: translateX(105%)  rotate(calc(var(--rot, 12deg) - 8deg));  opacity: 0; }
    }
  }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---- 19. Utilidades ---------------------------------- */
[hidden] { display: none !important; }
/* el contenido siempre por encima de la fruta decorativa de los bordes */
main > section > .container { position: relative; z-index: 1; }
.footer .container { position: relative; z-index: 1; }

/* ---- 20. Inclinacion de las fichas al pasar el cursor ---- */
.tilt {
  transform: perspective(880px)
             rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
             translateY(var(--tlift, 0px));
  transition: transform .22s var(--ease);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tilt:hover { --tlift: -5px; transition: transform .1s linear; }
}
@media (prefers-reduced-motion: reduce) { .tilt { transform: none; } }

/* ---- 21. Boton flotante de WhatsApp -------------------- */
.wa-fab {
  position: fixed; z-index: 90;
  right: clamp(1rem, 3.5vw, 1.7rem);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(1rem, 3.5vw, 1.7rem));
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .42), 0 2px 6px rgba(0,0,0,.2);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.wa-fab:hover { transform: scale(1.07); box-shadow: 0 14px 34px rgba(37, 211, 102, .5), 0 2px 6px rgba(0,0,0,.2); }
.wa-fab:active { transform: scale(.96); }
.wa-fab:focus-visible { outline: 3px solid var(--cacao); outline-offset: 3px; }
@media print { .wa-fab { display: none; } }

/* ---- 22. Como lo hacemos (proceso) --------------------- */
.process { background: var(--surface-2); --tear-fill: var(--surface-2); }
.process__steps {
  list-style: none; margin: 2.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 3vw, 2.2rem);
  counter-reset: step;
}
.p-step { position: relative; padding-top: .4rem; }
.p-step__n {
  font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 1;
  color: var(--accent); display: block; margin-bottom: .5rem;
}
:root[data-theme="dark"] .p-step__n { color: var(--mango); }
.p-step h3 { font-size: 1.25rem; margin: 0 0 .3rem; }
.p-step p { font-size: .96rem; color: var(--text-muted); margin: 0; }
@media (max-width: 900px) { .process__steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .process__steps { grid-template-columns: 1fr; } }

/* ---- 22b. Diagrama animado: fruta -> horno -> empaque -> barco -> plato --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.process__diagram {
  --pd-badge: clamp(52px, 9vw, 80px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.2rem);
}
.pd-track { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.pd-line-wrap {
  position: absolute; top: 50%; height: 3px; margin-top: -1.5px;
  left: calc(var(--pd-badge) / 2); right: calc(var(--pd-badge) / 2);
}
.pd-line { position: absolute; inset: 0; border-top: 3px dashed var(--border); }
.pd-fill { position: absolute; top: 0; left: 0; height: 0; width: 0; border-top: 3px solid var(--accent); }
.pd-dot {
  position: absolute; top: -6px; left: 0; width: 15px; height: 15px; margin-left: -7.5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
}
.pd-node { position: relative; z-index: 1; width: var(--pd-badge); display: flex; justify-content: center; }
.pd-badge {
  position: relative; width: var(--pd-badge); height: var(--pd-badge); border-radius: 50%;
  background: var(--surface); border: 2.5px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  overflow: visible;
}
.pd-badge svg { width: 55%; height: 55%; overflow: visible; }
.pd-badge svg .pd-stroke { stroke: currentColor; fill: none; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.pd-ship .pd-stroke { stroke-width: 3; }
.pd-ship .pd-porthole { fill: currentColor; stroke: none; }
.pd-fruit-glow {
  position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 70%);
  opacity: 0;
}
.pd-spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; }
.pd-spark.s1 { top: 8px; left: 14px; }
.pd-spark.s2 { top: 12px; right: 10px; }
.pd-spark.s3 { bottom: 10px; left: 8px; }
.pd-heat { opacity: 0; }
.pd-celebrate { opacity: 0; }
.pd-ship-hull { transform-origin: 50% 90%; }
.pd-sea-wave { transform-origin: 50% 50%; }

/* En reposo no pasa nada. initReveal() añade .is-visible al wrapper .reveal cuando
   entra en pantalla; en ese instante todas las reglas de abajo se activan a la vez,
   así el punto/línea y los 5 íconos arrancan sincronizados. Van dentro de
   no-preference porque initReveal() también marca .is-visible con reduce-motion
   (para mostrar el contenido), pero ahí no queremos que nada se mueva.
   Todas comparten timing-function linear: con "ease" (el valor por defecto) la
   velocidad no es constante entre paradas y el punto llega desincronizado de la
   animación de cada ícono. */
@media (prefers-reduced-motion: no-preference) {
  .process__diagram-wrap.is-visible .pd-fill { animation: pdFillGrow 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-dot { animation: pdDotMove 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-n1 .pd-badge { animation: pdPulse1 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-n2 .pd-badge { animation: pdPulse2 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-n3 .pd-badge { animation: pdPulse3 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-n4 .pd-badge { animation: pdPulse4 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-n5 .pd-badge { animation: pdPulse5 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-fruit-glow { animation: pdFruitGlow 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-fruit-icon { animation: pdFruitGrow 9s linear infinite; transform-origin: 50% 50%; }
  .process__diagram-wrap.is-visible .pd-spark.s1 { animation: pdSparkPop 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-spark.s2 { animation: pdSparkPop 9s linear infinite .12s; }
  .process__diagram-wrap.is-visible .pd-spark.s3 { animation: pdSparkPop 9s linear infinite .24s; }
  .process__diagram-wrap.is-visible .pd-heat { animation: pdHeatWave 9s ease-in-out infinite; }
  .process__diagram-wrap.is-visible .pd-oven-window { animation: pdOvenGlow 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-mini-fruit { animation: pdFruitDrop 9s linear infinite; transform-origin: 50% 50%; }
  .process__diagram-wrap.is-visible .pd-piece { animation: pdPieceFall 9s linear infinite; transform-origin: 50% 50%; }
  .process__diagram-wrap.is-visible .pd-piece.p2 { animation-delay: .09s; }
  .process__diagram-wrap.is-visible .pd-piece.p3 { animation-delay: .18s; }
  .process__diagram-wrap.is-visible .pd-ship { animation: pdShipSail 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-ship-hull { animation: pdShipBob 2.6s ease-in-out infinite; }
  .process__diagram-wrap.is-visible .pd-sea-wave { animation: pdWaterRipple 2.2s ease-in-out infinite; }
  .process__diagram-wrap.is-visible .pd-sea-wave.w2 { animation-duration: 2.5s; animation-delay: .3s; }
  .process__diagram-wrap.is-visible .pd-package-in { animation: pdPackageArrive 9s linear infinite; transform-origin: 50% 100%; }
  .process__diagram-wrap.is-visible .pd-plate { animation: pdPlateSettle 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-celebrate { animation: pdSparkPop2 9s linear infinite; }
  .process__diagram-wrap.is-visible .pd-celebrate.c2 { animation-delay: .1s; }
  .process__diagram-wrap.is-visible .pd-celebrate.c3 { animation-delay: .2s; }
}

@keyframes pdDotMove {
  0% { left: 0%; opacity: 1; } 78% { left: 100%; opacity: 1; } 90% { left: 100%; opacity: 1; }
  96% { left: 100%; opacity: 0; } 97% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 1; }
}
@keyframes pdFillGrow {
  0% { width: 0%; opacity: 1; } 78% { width: 100%; opacity: 1; } 90% { width: 100%; opacity: 1; }
  96% { width: 100%; opacity: 0; } 97% { width: 0%; opacity: 0; } 100% { width: 0%; opacity: 1; }
}
@keyframes pdPulse1 { 0% { border-color: var(--accent); } 6%, 100% { border-color: var(--text-muted); } }
@keyframes pdPulse2 { 0%, 16% { border-color: var(--text-muted); } 19.5% { border-color: var(--accent); } 27%, 100% { border-color: var(--text-muted); } }
@keyframes pdPulse3 { 0%, 35% { border-color: var(--text-muted); } 39% { border-color: var(--accent); } 47%, 100% { border-color: var(--text-muted); } }
@keyframes pdPulse4 { 0%, 54% { border-color: var(--text-muted); } 58.5% { border-color: var(--accent); } 67%, 100% { border-color: var(--text-muted); } }
@keyframes pdPulse5 {
  0%, 74% { border-color: var(--text-muted); } 78% { border-color: var(--accent); }
  82%, 96% { border-color: var(--accent); } 99%, 100% { border-color: var(--text-muted); }
}
@keyframes pdFruitGlow { 0% { opacity: 1; } 9%, 100% { opacity: 0; } }
@keyframes pdFruitGrow {
  0% { transform: scale(1.4); color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent)); }
  9%, 100% { transform: scale(1); color: var(--text-muted); filter: none; }
}
@keyframes pdSparkPop { 0% { opacity: 0; transform: scale(.3); } 3% { opacity: 1; transform: scale(1); } 10%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes pdHeatWave { 0%, 15%, 30%, 100% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; transform: translateY(-3px); } }
@keyframes pdOvenGlow { 0%, 15%, 29%, 100% { fill: transparent; } 20% { fill: color-mix(in srgb, var(--accent) 60%, transparent); } }
@keyframes pdFruitDrop {
  0%, 14% { opacity: 0; transform: translateY(-16px) scale(.55); }
  19.5% { opacity: 1; transform: translateY(-2px) scale(.5); }
  25%, 100% { opacity: 0; transform: translateY(8px) scale(.25); }
}
@keyframes pdPieceFall {
  0%, 34% { opacity: 0; transform: translateY(-18px) scale(.5); }
  39% { opacity: 1; transform: translateY(-2px) scale(.9); }
  43% { opacity: 1; transform: translateY(3px) scale(1); }
  48%, 100% { opacity: 0; transform: translateY(3px) scale(1); }
}
@keyframes pdShipSail {
  0%, 53% { transform: translate(0,0); opacity: 1; }
  58.5% { transform: translate(4px,0); opacity: 1; }
  67% { transform: translate(50px,2px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 0; }
}
@keyframes pdShipBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2px) rotate(-1.4deg); } }
@keyframes pdWaterRipple { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.6px); } }
@keyframes pdPackageArrive {
  0%, 73% { opacity: 0; transform: translate(-34px,0) scale(.8); }
  78% { opacity: 1; transform: translate(-3px,0) scale(1.05); }
  82%, 96% { opacity: 1; transform: translate(0,0) scale(1); }
  99%, 100% { opacity: 0; transform: translate(-34px,0) scale(.8); }
}
@keyframes pdPlateSettle { 0%, 76% { color: var(--text-muted); } 79% { color: var(--accent); } 90%, 100% { color: var(--text-muted); } }
@keyframes pdSparkPop2 { 0%, 77% { opacity: 0; transform: scale(.3); } 79% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.3); } }

/* con reduce-motion el bloque no-preference de arriba no aplica, así que nada se
   mueve; esto solo deja una vista estática razonable: primer paso marcado, el
   resto en reposo. */
@media (prefers-reduced-motion: reduce) {
  .process__diagram .pd-fill { width: 8%; opacity: 1; }
  .process__diagram .pd-dot { left: 8%; opacity: 1; }
  .process__diagram .pd-n1 .pd-badge { border-color: var(--accent); }
}

/* ---- 23. Como la disfrutas ---------------------------- */
.enjoy { background: var(--bg); --tear-fill: var(--bg); }
.enjoy__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 5vw, 3.5rem); align-items: center; }
.enjoy__ways { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.enjoy__ways li {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  padding: .55rem 1rem; border-radius: var(--r-pill);
  border: 2px solid var(--border-strong); color: var(--text);
}
@media (max-width: 820px) { .enjoy__grid { grid-template-columns: 1fr; } }

/* ---- 24. Marca blanca (dentro de compradores) --------- */
.buyers__pl {
  margin-top: clamp(2rem, 5vw, 3.2rem);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(1.2rem, 4vw, 2.5rem); align-items: center;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mango) 18%, transparent), transparent 60%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem);
}
.buyers__pl h3 { font-size: 1.4rem; text-transform: none; letter-spacing: -0.01em; font-family: var(--font-display); border: 0; margin: 0 0 .4rem; padding: 0; }
.buyers__pl p { margin: 0; color: var(--text); max-width: 52ch; }
.buyers__pl-cta { display: flex; flex-direction: column; gap: .7rem; }
.buyers__pl-cta .btn { justify-content: center; }
@media (max-width: 820px) { .buyers__pl { grid-template-columns: 1fr; } .buyers__pl-cta { flex-direction: row; flex-wrap: wrap; } }

/* ---- 25. Preguntas frecuentes ------------------------- */
.faq { background: var(--surface-2); --tear-fill: var(--surface-2); }
.faq__list { margin-top: 2.4rem; border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--accent);
  transition: transform .22s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.faq__item p { margin: 0 0 1.3rem; color: var(--text-muted); max-width: 68ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] p { animation: faqIn .3s var(--ease); }
  @keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }
}

/* ---- 26. Tabla nutricional (maqueta en la ficha) ------ */
.modal__nutri { margin-bottom: 1.4rem; }
.nutri-pending {
  display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-muted);
  font-size: .68rem; letter-spacing: .04em; vertical-align: middle;
}
.nutri-wrap { overflow-x: auto; }
table.nutri { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.nutri th, table.nutri td { text-align: right; padding: .34rem .4rem; border-bottom: 1px solid var(--border); }
table.nutri thead th { color: var(--text-muted); font-weight: 700; font-size: .78rem; }
table.nutri tbody th { text-align: left; font-weight: 600; color: var(--text); }
table.nutri tbody td { color: var(--text-muted); font-variant-numeric: tabular-nums; }
table.nutri tr.nutri--sub th { font-weight: 400; color: var(--text-muted); padding-left: 1rem; }

/* ---- 27. Barra de progreso de scroll -------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 150;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--mango), var(--pink));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress { animation: scrollProgress linear both; animation-timeline: scroll(root); }
    @keyframes scrollProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* ---- 28. Transicion fluida al cambiar tema/idioma (View Transitions) --- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- 29. Respaldo para "reducir transparencia" (accesibilidad) -------- */
@media (prefers-reduced-transparency: reduce) {
  .nav, .modal__card, .modal__close, .chip, .buyers__pl {
    background: var(--surface) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}