/* =========================================================================
   Plena — Páginas de producto (vitamina-d3-k2, colageno-verisol, creatina)
   CSS plano, sin build, cargado junto a landing.css (reutiliza sus tokens de
   color/tipografía y componentes: header/footer reales, .btn-primary,
   .product-row/.product-img/.product-text/.blob-wrap (ficha con blob),
   .dimensions-grid/.dimension-card (píldoras) y .pillar-card (tarjetas de
   nota/seguridad). Aquí solo van las clases que NO existen en landing.css.
   ========================================================================= */

.producto-main { overflow-x:hidden; }

/* ---- Kicker genérico: etiqueta pequeña en mayúsculas, tracked.
   La home no tiene una versión genérica (cada sección trae la suya:
   .como-kicker, .app-kicker...), así que aquí sí hace falta una. ---- */
.kicker { font-family:var(--font-display); font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:13px; }

/* ---- Hero de producto: imagen a sangre + velo + copy/foto a dos columnas.
   Reutiliza la tipografía .hero-h1/.hero-sub/.hero-fine de la home (mismo
   contraste blanco sobre imagen), pero alineada a la izquierda porque aquí
   el layout es a dos columnas, no centrado. ---- */
.producto-hero { position:relative; overflow:hidden; background:var(--color-green-900); box-shadow:var(--shadow-peach); }
.producto-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.producto-hero-veil { position:absolute; inset:0; background:linear-gradient(105deg,rgba(11,65,65,.92) 0%,rgba(11,65,65,.74) 46%,rgba(11,65,65,.42) 100%); }
.producto-hero-inner { position:relative; z-index:2; max-width:1440px; margin:0 auto; padding:72px var(--layout-side-padding-sm) 96px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center; }
.producto-hero-copy { display:flex; flex-direction:column; gap:22px; }
.producto-hero-copy .kicker { color:var(--color-beige-300); }
.producto-hero-copy .hero-h1 { text-align:left; font-size:64px; line-height:1.05; max-width:16ch; }
.producto-hero-copy .hero-sub { text-align:left; max-width:34rem; }
.producto-hero-copy .hero-fine { text-align:left; max-width:32rem; }
.producto-hero-shot { position:relative; display:grid; place-items:center; min-height:16rem; }
.producto-hero-shot::before { content:''; position:absolute; width:118%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(222,159,88,.55) 0%,rgba(255,204,188,.2) 45%,rgba(11,65,65,0) 70%); }
.producto-hero-shot img { position:relative; max-height:min(30rem,52vh); width:auto; filter:drop-shadow(0 34px 54px rgba(0,0,0,.45)); }
.producto-trust { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; list-style:none; }
.producto-trust li { font-weight:600; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--color-beige-300); border:1px solid rgba(217,195,167,.42); border-radius:var(--radius-pill); padding:9px 18px; }
.producto-ingr { display:inline-flex; align-items:center; gap:14px; background:#fff; border-radius:var(--radius-pill); padding:11px 22px; box-shadow:0 14px 34px -18px rgba(0,0,0,.55); align-self:flex-start; }
.producto-ingr img { height:34px; width:auto; display:block; }
.producto-ingr span { font-family:var(--font-display); font-weight:800; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--color-sage-muted); border-left:1px solid rgba(47,59,55,.18); padding-left:14px; }

/* ---- Banda de cifras bajo el hero ---- */
.producto-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1px; background:rgba(255,255,255,.16); border-top:1px solid rgba(255,255,255,.16); position:relative; z-index:2; list-style:none; }
.producto-stat { background:var(--color-green-900); padding:28px clamp(16px,3vw,32px); text-align:center; }
.producto-stat-fig { display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(26px,3vw,36px); line-height:1.05; color:var(--color-peach-200); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.producto-stat-lbl { display:block; margin-top:7px; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--color-beige-300); opacity:.85; }

/* ---- Cabecera de sección genérica (kicker + h2 + texto de apoyo,
   centrada) — patrón de marca: el kicker va más grande que el h2. ---- */
.sec-head { display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; max-width:54rem; margin:0 auto; }
.sec-head .kicker { font-size:var(--text-h1); line-height:var(--text-h1-lh); color:var(--color-sage-muted); }
.sec-head h2 { font-family:var(--font-display); font-weight:800; font-size:var(--text-h3); line-height:var(--text-h3-lh); }
.sec-desc { font-size:var(--text-xl); line-height:var(--text-xl-lh); max-width:747px; }

/* ---- Sección genérica con padding (equivalente a las .section-* de la
   home, pero reutilizable por cualquier bloque de producto). ---- */
.producto-section { padding:clamp(56px,7vw,104px) var(--layout-side-padding-sm); }

/* ---- Banda a sangre con foto de fondo + velo + frase centrada.
   st-wood = imagen de los 3 pilares; st-teal = imagen del hero general. ---- */
.statement { position:relative; overflow:hidden; padding:clamp(72px,11vw,144px) var(--layout-side-padding-sm); display:grid; place-items:center; text-align:center; }
.statement .bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.statement .veil { position:absolute; inset:0; }
.statement-inner { position:relative; z-index:2; max-width:46rem; display:flex; flex-direction:column; gap:22px; align-items:center; }
.statement h2 { font-family:var(--font-display); font-weight:800; font-size:clamp(30px,5vw,56px); line-height:1.06; color:#fff; letter-spacing:-.028em; }
.statement p { font-size:var(--text-xl); line-height:var(--text-xl-lh); color:#fff; opacity:.92; }
.statement .kicker { color:var(--color-beige-300); }
.st-wood .bg { background-image:url('/images/landing/c-3pilares.png'); }
.st-wood .veil { background:linear-gradient(180deg,rgba(11,65,65,.78) 0%,rgba(47,59,55,.86) 100%); }
.st-teal .bg { background-image:url('/images/landing/c-hero.png'); }
.st-teal .veil { background:linear-gradient(180deg,rgba(11,65,65,.86) 0%,rgba(34,88,102,.82) 100%); }

/* ---- Estacionalidad (vitamina D) ---- */
.season { max-width:46rem; margin:3rem auto 0; }
.season > .kicker { display:block; text-align:center; color:var(--color-sage-muted); font-size:12px; }
.season-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:5px; margin:1.1rem 0 .9rem; }
.season-grid span { font-weight:600; font-size:13px; text-align:center; padding:1rem 0; border-radius:10px; background:var(--color-beige-100); color:var(--color-sage-muted); }
.season-grid span.on { background:var(--color-sand); color:#fff; box-shadow:0 8px 20px -10px rgba(222,159,88,.9); }
.season-key { display:flex; gap:1.5rem; flex-wrap:wrap; justify-content:center; font-size:13px; color:var(--color-sage-muted); }
.season-key i { display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:.45rem; vertical-align:-1px; font-style:normal; }
.season-key i.a { background:var(--color-sand); }
.season-key i.b { background:var(--color-beige-100); }

/* ---- Desglose de la toma en barra (colágeno) ---- */
.split { max-width:52rem; margin:3rem auto 0; }
.split > .kicker { display:block; text-align:center; color:var(--color-sage-muted); font-size:12px; }
.bar { display:flex; height:74px; border-radius:14px; overflow:hidden; margin:1.1rem 0 1rem; box-shadow:0 14px 34px -18px rgba(11,65,65,.5); }
.bar span { display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:13px; color:#fff; text-align:center; padding:0 4px; line-height:1.2; }
.bar .b1 { flex:2500; background:var(--color-teal-800); }
.bar .b2 { flex:200; background:var(--color-sand); }
.bar .b3 { flex:31; background:var(--color-coral); }
.bar .b4 { flex:269; background:var(--color-beige-300); color:var(--color-forest-700); }
.bar-key { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; font-size:13px; color:var(--color-sage-muted); list-style:none; }
.bar-key i { display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-right:.45rem; vertical-align:-1px; font-style:normal; }
.bar-key .k1 { background:var(--color-teal-800); }
.bar-key .k2 { background:var(--color-sand); }
.bar-key .k3 { background:var(--color-coral); }
.bar-key .k4 { background:var(--color-beige-300); }
.split-note { text-align:center; font-size:17px; line-height:1.6; color:var(--color-forest-700); max-width:40rem; margin:1.6rem auto 0; }
.split-note strong { font-family:var(--font-display); font-weight:800; color:var(--color-green-900); }

/* ---- Preguntas frecuentes (acordeón) ---- */
.faq { max-width:47rem; margin:3rem auto 0; }
.faq details { border-top:1px solid rgba(47,59,55,.13); padding:18px 0; }
.faq details:last-of-type { border-bottom:1px solid rgba(47,59,55,.13); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.45; color:var(--color-green-900); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--color-sand); font-size:22px; line-height:1; font-weight:800; }
.faq details[open] summary::after { content:"\2013"; }
.faq p { margin-top:14px; font-size:16px; line-height:1.65; color:var(--color-forest-700); max-width:44rem; }
.faq p + p { margin-top:12px; }

/* ---- Explicación a dos columnas con "notas" laterales (creatina).
   Las notas reutilizan .pillar-card/.pillar-title/.pillar-desc de la home,
   con .pillar-cards--grid en columna simple (ver landing.css). ---- */
.twocol { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4.4vw,64px); align-items:start; max-width:1160px; margin:0 auto; }
.prose p { font-size:16px; line-height:1.6; color:var(--color-forest-700); margin-bottom:15px; max-width:66ch; }
.prose p:last-child { margin-bottom:0; }
.prose strong { font-weight:700; color:var(--color-green-900); }
.twocol-notes { display:flex; flex-direction:column; gap:16px; }

/* ---- Lista de especificaciones (dl) dentro de .product-text-inner, junto
   a .product-badge/.product-title/.product-desc reutilizados de la home. ---- */
.specs { display:flex; flex-wrap:wrap; gap:0; margin:6px 0 4px; border-top:1px solid rgba(47,59,55,.13); }
.specs div { flex:1 1 8rem; padding:14px 16px 14px 0; border-bottom:1px solid rgba(47,59,55,.08); }
.specs dt { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--color-sage-muted); }
.specs dd { font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--color-green-900); margin-top:2px; }

/* ---- Ficha con tabla simple (usada por creatina en su sección de
   producto, junto al blob reutilizado de la home) ---- */
.data-table { width:100%; border-collapse:collapse; margin:22px 0 26px; font-family:var(--font-ui); font-size:15px; }
.data-table th, .data-table td { text-align:left; padding:13px 4px; border-bottom:1px solid rgba(139,152,129,.34); vertical-align:top; }
.data-table th { font-weight:500; color:var(--color-sage-muted); width:47%; }
.data-table td { font-weight:600; color:var(--color-green-900); }

/* ---- "Lo que no prometemos" — banda oscura con tarjetas ---- */
.sec-dark { background:var(--color-green-900); color:var(--color-beige-100); }
.sec-dark .sec-head .kicker { color:var(--color-sage-500); }
.sec-dark .sec-head h2 { color:var(--color-beige-300); }
.sec-dark .sec-desc { color:var(--color-beige-100); opacity:.9; }
.honest { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:2rem; max-width:76rem; margin:3.5rem auto 0; list-style:none; }
.honest li { border-top:2px solid var(--color-teal-600); padding-top:1.2rem; }
.honest h3 { font-family:var(--font-display); font-size:20px; line-height:1.3; color:var(--color-peach-200); margin-bottom:9px; }
.honest p { font-size:16px; line-height:1.6; color:var(--color-beige-100); opacity:.88; }
.honest-lead { font-size:var(--text-xl); line-height:var(--text-xl-lh); color:rgba(255,255,255,.86); max-width:48rem; margin:14px auto 0; text-align:center; }

/* ---- Seguridad — banda melocotón con hojas decorativas ---- */
.sec-peach { position:relative; background:var(--color-peach-shadow); overflow:hidden; }
.leaf { position:absolute; pointer-events:none; opacity:.6; z-index:0; }
.leaf-l { left:-5rem; bottom:-4rem; width:min(30vw,17rem); }
.leaf-r { right:-5rem; top:-4rem; width:min(30vw,17rem); transform:scaleX(-1); }
.sec-peach .sec-head .kicker { color:var(--color-sage-500); }
.sec-peach .sec-head h2 { color:var(--color-teal-600); }
.safety { max-width:47rem; margin:2.75rem auto 0; display:flex; flex-direction:column; gap:18px; font-size:17px; line-height:1.65; color:var(--color-green-900); position:relative; z-index:1; }
.safety strong { font-weight:600; }
.safety-cards { max-width:76rem; margin:2.75rem auto 0; position:relative; z-index:1; }
.safety-cards .pillar-title { color:var(--color-green-900); }

.btn-row { display:flex; gap:16px; flex-wrap:wrap; }

/* ---- Ficha de producto (.product-row): en desktop el texto va pegado
   a la imagen (0 arriba/abajo, 40px a la izquierda) — normalmente esto se
   ponía como inline style en cada vista, pero un inline style tiene más
   especificidad que las reglas mobile .product-text-l/.product-text-r de
   landing.css (32px a 1024px, 24px/20px a 640px) y las anulaba siempre.
   Al acotarlo aquí a desktop, en mobile/tablet manda landing.css. ---- */
@media (min-width:1025px) {
  .product-ficha-text { padding:0 0 0 40px; }
}

@media (max-width:56rem) {
  .producto-hero-inner { grid-template-columns:1fr; text-align:center; justify-items:center; padding-left:32px; padding-right:32px; }
  .producto-hero-copy { align-items:center; }
  .producto-hero-copy .hero-h1, .producto-hero-copy .hero-sub, .producto-hero-copy .hero-fine { text-align:center; max-width:100%; }
  .producto-hero-copy .btn-row, .producto-trust { justify-content:center; }
  .producto-hero-shot { order:-1; min-height:0; }
  .producto-hero-shot img { max-height:15rem; }
  .producto-hero-veil { background:linear-gradient(180deg,rgba(11,65,65,.9) 0%,rgba(11,65,65,.82) 100%); }
  .twocol { grid-template-columns:1fr; }
  .producto-section, .statement { padding-left:32px; padding-right:32px; }

  /* .sec-head .kicker se apoya en --text-h1 (48px) para actuar como
     "mini-titular" — a ese tamaño, con mayúsculas + letter-spacing:.12em,
     un kicker de una sola palabra (p. ej. "Transparencia",
     "Estacionalidad") no tiene dónde partir la línea y se sale por los
     lados en mobile. Se reduce en los dos breakpoints existentes igual
     que ya se hace con el resto de titulares de landing.css. ---- */
  .sec-head .kicker { font-size:30px; line-height:1.2; letter-spacing:.08em; }
  .sec-head h2 { font-size:28px; line-height:1.25; }
}

@media (max-width:640px) {
  .producto-hero-copy .hero-h1 { font-size:36px; line-height:44px; }
  .producto-hero-inner { padding-left:20px; padding-right:20px; }
  .producto-section, .statement { padding-left:20px; padding-right:20px; }
  .sec-head .kicker { font-size:23px; line-height:1.25; letter-spacing:.06em; }
  .sec-head h2 { font-size:23px; line-height:1.3; }
}