/* =========================================================================
   productos.css — Página de productos con selector lateral (data-driven).
   Estructura inspirada en grupoacon.com/bananos: hero + info + datos +
   premium + 3 columnas. El contenido lo inyecta js/productos.js.
   ========================================================================= */

.prod-page { background: #fff; }

/* ---------------------------------------------------------------- HERO */
.prod-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: #0f5132;
}
.prod-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
}
.prod-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,61,46,.72) 0%, rgba(15,81,50,.78) 100%);
}
.prod-hero__inner {
  position: relative;
  z-index: 2;
  padding: 5rem 1.5rem 6rem;
  /* Antes era 40ch (~356px): demasiado angosto para el nombre en Vast Shadow,
     que es una display muy ancha, y por eso "Tomate" se partía en dos líneas.
     Ese límite estaba pensado para el subtítulo, que ya tiene su propio 28ch. */
  max-width: min(92vw, 860px);
}
.prod-hero__name {
  font-family: "Vast Shadow", "Poppins", system-ui, serif;
  font-weight: 400;   /* Vast Shadow solo tiene un grosor */
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: 1.08;  /* la sombra de la fuente pide un poco más de aire */
  margin: 0;
  /* site.css aplica `overflow-wrap: break-word` a todos los h1..h4 para que
     ningún título desborde en pantallas angostas. Acá hay que exceptuarlo: el
     nombre del producto nunca debe cortarse a mitad de palabra ("Toma / te"). */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
.prod-hero__subtitle {
  margin: 1rem auto 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,.82);
  max-width: 28ch;
}
.prod-hero__chevron {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 1.6rem;
  color: rgba(255,255,255,.75);
  animation: prod-bounce 1.8s ease-in-out infinite;
}
@keyframes prod-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }
/* Onda blanca inferior del hero */
.prod-hero__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  z-index: 2;
  width: 100%;
  height: 70px;
  display: block;
}

/* ---------------------------------------------------------------- LAYOUT */
.prod-layout {
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* Selector lateral */
.prod-nav {
  position: sticky; top: calc(var(--header-h, 64px) + 1.25rem);
  /* Imprescindible: por defecto un item de grid tiene `min-width: auto`, así que
     el track `1fr` no puede encoger por debajo del min-content de su contenido.
     En móvil la lista de productos pasa a fila horizontal y sus 6 botones
     `white-space: nowrap` inflaban la columna a ~730px: la página entera se
     ensanchaba y el header (fixed) se estiraba con ella, dejando la hamburguesa
     fuera de pantalla. Con min-width:0 el track sí encoge y el `overflow-x:auto`
     del `ul` puede hacer su trabajo. (`.prod-content` ya lo tenía.) */
  min-width: 0;
}
.prod-nav__label {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 .9rem;
  padding-left: .25rem;
}
.prod-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.prod-nav button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: .75rem 1rem;
  border-radius: .6rem;
  font: inherit;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  transition: background .18s ease, color .18s ease;
}
.prod-nav button:hover { background: #f1f5f2; color: #2e7d32; }
.prod-nav button.is-active {
  background: #2e7d32;
  color: #fff;
  box-shadow: 0 8px 18px rgba(46,125,50,.28);
}
.prod-nav__icon {
  width: 26px; height: 26px; flex: none;
  object-fit: contain;
  transition: transform .18s ease;
}
.prod-nav button:hover .prod-nav__icon { transform: scale(1.12); }
.prod-nav button.is-active .prod-nav__icon { transform: scale(1.1); }

/* ---------------------------------------------------------------- INTRO */
.prod-content { min-width: 0; }
.prod-intro {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.prod-intro__eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #2e7d32; font-weight: 600; margin: 0 0 .5rem;
}
.prod-intro__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #16324f;
  margin: 0 0 1.2rem;
}
.prod-intro__text p { color: #4b5563; line-height: 1.7; margin: 0 0 1rem; font-size: 1.02rem; }

/* Entrada: el título viene desde el fondo hacia el frente */
.prod-intro__title {
  transform: scale(.55);
  opacity: 0;
  transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .7s ease;
}
.prod-intro.is-in .prod-intro__title { transform: scale(1); opacity: 1; }

/* Entrada: las imágenes llegan desde la izquierda */
.prod-intro__media {
  transform: translateX(-90px);
  opacity: 0;
  transition: transform 1s cubic-bezier(.22,.61,.36,1) .15s, opacity .8s ease .15s;
}
.prod-intro.is-in .prod-intro__media { transform: translateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .prod-intro__title, .prod-intro__media { transition: none; transform: none; opacity: 1; }
}
/* Igual que en nosotros.css: la entrada lateral de -90px deja la imagen
   aparcada fuera del borde izquierdo hasta que el scroll la revela. En una
   pantalla de 360px eso es un cuarto del ancho, así que en móvil/tablet la
   entrada pasa a ser vertical. */
@media (max-width: 1024px) {
  .prod-intro__media { transform: translateY(40px); }
  .prod-intro.is-in .prod-intro__media { transform: translateY(0); }
}
.prod-intro__media { position: relative; display: flex; justify-content: center; }
.prod-intro__media::before {
  content: "";
  position: absolute;
  width: 78%; aspect-ratio: 1;
  right: 2%; top: -6%;
  background: #8bc34a;
  border-radius: 50%;
  z-index: 0;
  opacity: .9;
}
.prod-blob {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 46% 54% 58% 42% / 46% 44% 56% 54%;
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

/* Intro "plano": producto sobre fondo blanco, sin marco, con sombra debajo */
.prod-intro__media.is-plain::before { display: none; }   /* quita el círculo verde */
.prod-intro__media.is-plain .prod-blob {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px; height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;   /* funde el blanco del JPG con el fondo y deja ver la sombra */
}
/* Sombra suave de apoyo bajo el producto */
.prod-intro__media.is-plain::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  transform: translateX(-50%);
  width: 52%; height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  filter: blur(16px);
  z-index: 0;
}

/* Slideshow del intro (varias fotos, sin marco/blob) */
.prod-intro__media.is-slideshow::before { display: none; }          /* quita el círculo verde */
.prod-intro__media.is-slideshow .prod-blob { display: none; }       /* quita el marco/blob blanco */
.prod-intro__media.is-slideshow { width: 100%; }
.prod-slideshow {
  position: relative;
  width: 100%; max-width: none;   /* llena toda la columna */
  aspect-ratio: 1 / 1;            /* más alto: cubre el espacio de la sección */
  margin: 0 auto;
}
.prod-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity 1s ease;
}
.prod-slide.is-active { opacity: 1; }

/* Variante: slideshow conservando la forma del marco (blob) — sección premium */
.prod-slideshow--blob { max-width: 420px; aspect-ratio: 1 / 1; }
.prod-slideshow--blob .prod-slide {
  border-radius: 54% 46% 42% 58% / 52% 56% 44% 48%;
}

/* Variante "figura flotante": ananás recortados que se transforman, con glow verde
   (la animación que antes estaba en la ficha técnica). */
.prod-intro__media.is-figure { position: relative; }
.prod-intro__media.is-figure::before {   /* glow verde radial detrás */
  content: ""; display: block; position: absolute; inset: 0; margin: auto;
  width: 88%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,195,74,.45) 0%, rgba(139,195,74,0) 68%);
  z-index: 0;
}
.prod-intro__media.is-figure .prod-slideshow {
  position: relative; z-index: 1;
  max-width: 340px; aspect-ratio: 3 / 4;
  animation: prod-float 6s ease-in-out infinite;
}
.prod-intro__media.is-figure .prod-slide {
  object-fit: contain; border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,.28));
}

/* Intro a una sola columna (categorías sin imagen) */
.prod-intro.is-solo { grid-template-columns: 1fr; }
.prod-intro.is-solo .prod-intro__text { max-width: 68ch; }
.prod-intro.is-solo .prod-intro__media { display: none; }  /* sin marco vacío */

/* Intro "foto flotante": imagen recortada, sin marco, con sombra debajo */
.prod-intro__media.is-photo::before { display: none; }     /* quita el círculo verde */
.prod-intro__media.is-photo .prod-blob {
  width: 100%; max-width: 480px; height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .35));      /* sombra suave hacia abajo */
}

/* ---------------------------------------------------------------- VARIEDADES (categorías) */
.prod-varieties { background: linear-gradient(180deg, #f7faf6 0%, #eef4ea 100%); }
.prod-varieties[hidden] { display: none; }
.prod-varieties__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.prod-varieties__eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--logo-green, #02994d); font-weight: 600; margin: 0 0 .5rem;
}
.prod-varieties__title {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem); color: #16324f; margin: 0 0 .8rem;
}
.prod-varieties__lead { color: #4b5563; line-height: 1.7; max-width: 55ch; margin: 0 auto 2.2rem; }
.prod-varieties__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
  text-align: left;
}
.prod-variety {
  margin: 0; overflow: hidden;
  background: #fff; border: 1px solid #e2ece4; border-radius: .9rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prod-variety:hover {
  transform: translateY(-4px);
  border-color: var(--logo-green, #02994d);
  box-shadow: 0 14px 28px rgba(2,153,77,.16);
}
/* Foto (con placeholder tierra mientras no exista el archivo) */
.prod-variety__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #e6d4b8 0%, #d3b98f 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.prod-variety__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-variety figcaption { padding: .9rem 1.05rem 1.1rem; }
.prod-variety h3 {
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.05rem;
  color: #16324f; margin: 0 0 .35rem;
}
.prod-variety p { color: #4b5563; font-size: .9rem; line-height: 1.5; margin: 0; }
@media (max-width: 900px) { .prod-varieties__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .prod-varieties__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .prod-varieties__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- DATOS */
.prod-stats { background: #eef3fb; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.prod-stats__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
  text-align: center;
}
.prod-stats__label {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #16324f; font-weight: 600; margin: 0 0 2rem;
}
.prod-stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.prod-stat__value {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem); color: #16324f; line-height: 1;
  display: inline-block; padding-bottom: .25rem;
  box-shadow: inset 0 -.35em 0 rgba(139,195,74,.35);
}
.prod-stat__label {
  display: block; margin-top: .7rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #16324f;
}

/* ---------------------------------------------------------------- FICHA TÉCNICA */
.prod-spec { background: linear-gradient(180deg, #f4f8f4 0%, #e9f2eb 100%); }
.prod-spec[hidden] { display: none; }
.prod-spec__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem);
  display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.prod-spec__media { position: relative; display: flex; justify-content: center; }
.prod-spec__media::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 88%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,195,74,.45) 0%, rgba(139,195,74,0) 68%);
  z-index: 0;
}
.prod-spec__media.is-plain::before { display: none; }
.prod-spec__figure {
  position: relative; z-index: 1;
  width: 100%; max-width: 320px; aspect-ratio: 3 / 4;
  animation: prod-float 6s ease-in-out infinite;
}
.prod-spec__figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;   /* foto: llena el marco */
  border-radius: 14px;
  box-shadow: 0 26px 45px rgba(0,0,0,.22);
}
.prod-spec__figure.is-plain {
  max-width: 360px;
  aspect-ratio: auto;
}
.prod-spec__figure.is-plain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 48%;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  filter: blur(14px);
  z-index: 0;
}
.prod-spec__figure.is-plain img {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.18));
  z-index: 1;
}
/* Imagen intro (encima): visible al inicio, se desvanece revelando la final */
#ph-spec-img-top { transition: opacity 1.2s ease; }
.prod-spec__figure.is-revealed #ph-spec-img-top { opacity: 0; }
#ph-spec-img-top[hidden] { display: none; }
@keyframes prod-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.prod-spec__eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #2e7d32; font-weight: 600; margin: 0 0 .5rem;
}
.prod-spec__title {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem); color: #16324f; line-height: 1.1; margin: 0 0 1rem;
}
.prod-spec__lead { color: #4b5563; line-height: 1.7; font-size: 1.02rem; margin: 0 0 1.8rem; }
.prod-spec__list {
  margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem;
}
.prod-spec__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(22,50,79,.12);
}
.prod-spec__row dt { margin: 0; color: #6b7280; font-size: .9rem; }
.prod-spec__row dd { margin: 0; color: #16324f; font-weight: 600; font-size: .92rem; text-align: right; }

/* Datos destacados (chips rápidos) dentro de la ficha técnica */
.prod-spec__list.is-chips {
  display: flex; flex-wrap: wrap; gap: .6rem; grid-template-columns: none;
}
.prod-spec__chip {
  display: inline-flex; align-items: center;
  padding: .5rem .95rem; border-radius: 999px;
  background: #eaf5ec; border: 1px solid #cfe6d4;
  color: #16324f; font-weight: 600; font-size: .9rem;
}
.prod-spec__chip::before {
  content: ""; width: 7px; height: 7px; margin-right: .55rem; border-radius: 50%;
  background: var(--logo-green, #02994d); flex: none;
}

/* ---------------------------------------------------------------- VARIANTES */
.prod-variant { border-top: 1px solid #eef1ee; }
.prod-variant:nth-of-type(even) { background: #f7faf6; }   /* alterna el fondo */
.prod-variant__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
}
/* Con imágenes: texto a la izquierda, imágenes (crossfade) a la derecha */
.prod-variant.has-media .prod-variant__inner {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.prod-variant.media-left .prod-variant__media {
  order: -1;
}
.prod-variant__media {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 1rem; overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.16);
}
.prod-variant__media .prod-slide { border-radius: 0; box-shadow: none; }
@media (max-width: 780px) {
  .prod-variant.has-media .prod-variant__inner { grid-template-columns: 1fr; }
  .prod-variant__media { order: -1; }
}
.prod-variant__eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--logo-green, #02994d); font-weight: 600; margin: 0 0 .45rem;
}
.prod-variant__title {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.2rem); color: #16324f; line-height: 1.15; margin: 0 0 .9rem;
}
.prod-variant__lead { color: #4b5563; line-height: 1.7; max-width: 72ch; margin: 0 0 1.8rem; }
.prod-variant__specs { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
.prod-variant__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(22,50,79,.1);
}
.prod-variant__row dt { margin: 0; color: #6b7280; font-size: .9rem; }
.prod-variant__row dd { margin: 0; color: #16324f; font-weight: 600; font-size: .92rem; text-align: right; }
@media (max-width: 640px) { .prod-variant__specs { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- PREMIUM */
.prod-premium[hidden] { display: none; }   /* categorías: sin sección premium */
.prod-premium {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.prod-premium__eyebrow {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  color: #16324f; font-weight: 600; margin: 0 0 .8rem;
}
.prod-premium__title {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem); color: #16324f; line-height: 1.05; margin: 0 0 1.2rem;
}
.prod-premium__copy { color: #4b5563; line-height: 1.7; font-size: 1.1rem; margin: 0; }
.prod-premium__media { position: relative; display: flex; justify-content: center; }
.prod-premium__media .prod-blob { max-width: 420px; border-radius: 54% 46% 42% 58% / 52% 56% 44% 48%; }
/* Premium "plano": PNG recortado, sin marco, con sombra que sigue la silueta */
.prod-premium__media.is-plain .prod-blob {
  width: 100%; max-width: 340px; height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .35));
}

/* ---------------------------------------------------------------- 3 COLUMNAS */
.prod-tri {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 7vw, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
}
.prod-tri.is-2col { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.prod-tri__col[hidden] { display: none; }
.prod-tri__col { position: relative; }
.prod-tri__num {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: 5rem; color: #eef1f4; line-height: .8; position: absolute; top: -1.5rem; right: 0; z-index: 0;
}
.prod-tri__col h3 {
  position: relative; z-index: 1;
  font-family: "Poppins", sans-serif; font-size: 1.7rem; color: #16324f; margin: 0 0 1rem;
}
.prod-tri__col p { color: #4b5563; line-height: 1.65; margin: 0; font-size: .98rem; }
.prod-certs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }
.prod-certs span {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: #2e7d32; background: #eaf5ec; border: 1px solid #cfe6d4;
  padding: .4rem .7rem; border-radius: .5rem;
}

/* ---------------------------------------------------------------- CTA */
.prod-cta {
  /* Color por defecto; cada producto puede sobreescribirlo con `ctaBg` (productos.js) */
  background: linear-gradient(110deg, #02994d 0%, #8fc46a 45%, #f2dd90 100%);
  color: #17240f; overflow: hidden;
}
.prod-cta__inner {
  max-width: 700px; margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  text-align: center;
}
/* Texto centrado con entrada suave (fade-up) */
.prod-cta__text {
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(24px); opacity: 0;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
}
.prod-cta.is-in .prod-cta__text { transform: translateY(0); opacity: 1; }
.prod-cta h2 { font-family: "Poppins", sans-serif; font-size: clamp(1.6rem, 4vw, 2.4rem); color: #17240f; margin: 0 0 .8rem; }
.prod-cta p { color: rgba(23,36,15,.72); margin: 0 0 1.8rem; }
.prod-cta a {
  display: inline-flex; align-items: center; padding: .6rem 1.4rem; border-radius: .5rem;
  background: #17240f; color: #fff; font-weight: 700; font-size: .9rem;
  transition: transform .2s ease, background .2s ease;
}
.prod-cta a:hover { background: #000; transform: translateY(-2px); }

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .prod-layout { grid-template-columns: 1fr; }
  .prod-nav {
    position: sticky; top: var(--header-h, 64px); z-index: 10;
    background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
    margin: 0 calc(-1 * clamp(1rem,4vw,2rem));
    padding: .6rem clamp(1rem,4vw,2rem);
    border-bottom: 1px solid #eee;
  }
  .prod-nav__label { display: none; }
  .prod-nav ul { flex-direction: row; overflow-x: auto; gap: .4rem; padding-bottom: .2rem; min-width: 0; }
  .prod-nav button { width: auto; white-space: nowrap; padding: .6rem .8rem; min-height: 42px; }
  .prod-nav__icon { width: 20px; height: 20px; }
  .prod-intro { grid-template-columns: 1fr; }
  .prod-intro__media { order: -1; }
  .prod-spec__inner { grid-template-columns: 1fr; }
  .prod-spec__media { order: -1; }
  .prod-spec__list { grid-template-columns: 1fr; }
  .prod-premium { grid-template-columns: 1fr; }
  .prod-premium__media { order: -1; }
  .prod-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .prod-tri { grid-template-columns: 1fr; gap: 2.5rem; }
  .prod-tri__num { font-size: 4rem; top: -1rem; }
}
@media (max-width: 480px) {
  .prod-stats__grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- CHIPS + TRIGGER DE CERTIFICACIÓN */
.prod-cert-chip {
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: #2e7d32; background: #eaf5ec; border: 1px solid #cfe6d4;
  padding: .45rem .75rem; border-radius: .5rem; cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.prod-cert-chip:hover {
  background: #2e7d32; color: #fff; transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(46,125,50,.28);
}
.prod-certs__more {
  margin-top: 1rem; padding: 0; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .9rem; color: #2e7d32;
  display: inline-flex; align-items: center; gap: .4rem;
}
.prod-certs__more span { transition: transform .2s ease; }
.prod-certs__more:hover span { transform: translateX(4px); }

/* ---------------------------------------------------------------- MODAL DE CERTIFICACIONES */
.cert-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 1.2rem;
  opacity: 0; transition: opacity .25s ease;
}
.cert-modal[hidden] { display: none; }
.cert-modal.is-open { opacity: 1; }
.cert-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(9, 30, 20, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cert-modal__dialog {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  background: #fff; border-radius: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  transform: translateY(14px) scale(.97); transition: transform .25s ease;
}
.cert-modal.is-open .cert-modal__dialog { transform: none; }
.cert-modal__close {
  position: absolute; top: .7rem; right: 1rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.9rem; line-height: 1; color: #9aa5a0; transition: color .18s ease;
}
.cert-modal__close:hover { color: #16324f; }

.cert-modal__card { min-height: 250px; }
.cert-modal__card.in { animation: cert-in .45s ease both; }
@keyframes cert-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cert-modal__badge {
  display: inline-grid; place-items: center;
  min-width: 3.4rem; height: 3.4rem; padding: 0 .7rem;
  border-radius: .8rem; background: #eaf5ec; color: #2e7d32;
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: .95rem;
  margin-bottom: 1rem;
}
.cert-modal__eyebrow {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #8a9691; font-weight: 600; margin: 0 0 .3rem;
}
.cert-modal__title {
  font-family: "Poppins", sans-serif; font-weight: 700;
  font-size: clamp(1.4rem, 3.5vw, 2rem); color: #16324f; line-height: 1.1; margin: 0 0 1rem;
}
.cert-modal__body { margin: 0; }
.cert-modal__body dt {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: #2e7d32; font-weight: 700; margin: 1rem 0 .25rem;
}
.cert-modal__body dd { margin: 0; color: #4b5563; line-height: 1.6; font-size: .96rem; }

.cert-modal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem;
}
.cert-modal__arrow {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  border: 1px solid #d7e3d9; background: #fff; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: #2e7d32; display: grid; place-items: center;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.cert-modal__arrow:hover { background: #2e7d32; color: #fff; transform: scale(1.06); }
.cert-modal__dots { display: flex; gap: .5rem; }
.cert-modal__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: #d3ddd6; cursor: pointer; transition: background .18s ease, transform .18s ease;
}
.cert-modal__dot.is-active { background: #2e7d32; transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  .cert-modal, .cert-modal__dialog { transition: none; }
  .cert-modal__card.in { animation: none; }
  .prod-cta__pina, .prod-cta__text { transition: none !important; transform: none !important; opacity: 1 !important; }
}

@media (max-width: 640px) {
  .prod-cta__inner { padding: clamp(2.5rem, 9vw, 3.5rem) 1.25rem; }

  .prod-hero { min-height: 54vh; }
  .prod-hero__inner { padding: 3.5rem 1.25rem 4.5rem; }
  .prod-hero__wave { height: 45px; }
  .prod-hero__chevron { bottom: 1.4rem; }

  /* El selector lateral es una tira horizontal en móvil: se le da inercia y
     se oculta la barra de scroll, que en Windows/Android tapa los botones. */
  .prod-nav ul {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .prod-nav ul::-webkit-scrollbar { display: none; }
  .prod-nav button { scroll-snap-align: start; }

  .prod-tri__num { font-size: 3.2rem; top: -.6rem; }
  .prod-tri__col h3 { font-size: 1.4rem; }
  .prod-cta a { width: 100%; justify-content: center; min-height: 46px; }

  /* Objetivos táctiles: los chips de certificación medían 30px y el enlace
     "Ver certificaciones" 20px. */
  .prod-cert-chip { min-height: 40px; padding: .5rem .85rem; }
  .prod-certs span { min-height: 40px; display: inline-flex; align-items: center; }
  .prod-certs__more { min-height: 44px; }

  /* El modal de certificaciones no debe salirse en pantallas bajas */
  .cert-modal { padding: .8rem; }
  .cert-modal__dialog { max-height: calc(100svh - 1.6rem); overflow-y: auto; }
  .cert-modal__arrow { width: 40px; height: 40px; }
}

/* Móvil pequeño: clave y valor en línea se rompían con textos largos
   (ej. "Temperatura de almacenamiento" / "7–9 °C"). */
@media (max-width: 430px) {
  .prod-spec__row,
  .prod-variant__row { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .prod-spec__row dd,
  .prod-variant__row dd { text-align: left; }
  .prod-hero__name { font-size: clamp(2rem, 11vw, 2.8rem); }
}

/* Apaisado bajo: 62vh de hero deja el título sin aire */
@media (max-height: 500px) and (orientation: landscape) {
  .prod-hero { min-height: 100svh; }
  .prod-hero__inner { padding: 3rem 1.5rem; }
  .prod-hero__chevron { display: none; }
}

@media (min-width: 1441px) {
  .prod-layout { max-width: 1500px; }
}