/* ==========================================================================
   BENEFICIOS · LHA · EXPERIENCIAS · FAQ · CTA FINAL · FOOTER
   ========================================================================== */

/* --- Beneficios: un producto por sistema --- */
.benefits { padding: var(--s-11) 0; background: var(--ink-950); }
.benefits__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.benefits__head .lead { max-width: 52ch; }
/* Editorial: sin tarjetas. Columnas separadas por líneas finas, numeral grande, icono, nombre, sistema. */
.systems { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.sys { --c: var(--accent); border-bottom: 1px solid var(--line); }
.sys:nth-child(odd) { border-right: 1px solid var(--line); }
.sys__link {
  display: grid; grid-template-rows: auto auto auto auto 1fr; gap: var(--s-2); justify-items: center; text-align: center;
  padding: var(--s-7) var(--s-4) var(--s-6); min-height: 100%;
  position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--dur-base) var(--ease-out);
}
/* Numeral editorial gigante detrás del icono (contorno del color del producto) */
.sys__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 45% at 50% 32%, color-mix(in oklab, var(--c) 30%, transparent), transparent 70%); opacity: 0.35; transition: opacity var(--dur-slow) var(--ease-out); }
.sys__link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); opacity: 0.85; transform: scaleX(0.55); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base); }
.sys__link:hover::before, .sys__link:focus-visible::before { opacity: 1; }
.sys__link:hover::after, .sys__link:focus-visible::after { transform: scaleX(1); opacity: 1; }
.sys__link:hover .sys__icon, .sys__link:focus-visible .sys__icon { transform: translateY(-6px) scale(1.08); }
/* Icono protagonista: grande, centrado, con halo de su color y sombra de contacto */
.sys__icon { height: clamp(6rem, 12vw, 9rem); width: auto; margin: var(--s-2) 0 var(--s-5); transition: transform var(--dur-slow) var(--ease-out); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); }
.sys__n { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.22em; color: var(--c); font-variant-numeric: tabular-nums; }
.sys__name { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.sys__sys { color: var(--fg-muted); font-size: var(--fs-small); }
/* Ficha comparativa (solo datos del empaque y de los PDF: sabor, activos, cepas) */
.sys__spec { align-self: end; margin: var(--s-4) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); width: 100%; text-align: left; }
.sys__spec > div { display: grid; grid-template-columns: 7.25rem 1fr; gap: var(--s-2); align-items: baseline; }
.sys__spec dt { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.sys__spec dd { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.45; }
.sys__spec dd i { color: var(--fg); font-style: italic; }
.sys__link:hover .sys__spec dd, .sys__link:focus-visible .sys__spec dd { color: var(--fg); }
@media (min-width: 1024px) {
  .systems { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sys { border-right: 1px solid var(--line); }
  .sys:last-child { border-right: 0; }
  .sys__link { padding: var(--s-9) var(--s-6) var(--s-8); }
  .sys__icon { height: clamp(7rem, 9vw, 10rem); }
}

/* --- LHA: brand moment (atmósfera + producto + marca + frase + datos reales) --- */
.lha { position: relative; padding: var(--s-11) 0; overflow: clip; isolation: isolate; background: var(--ink-900); min-height: 90svh; display: grid; align-items: center; }
.lha__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.4; }
.lha__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); }
.lha::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--ink-950), transparent 30%, transparent 70%, var(--ink-950)), radial-gradient(50% 50% at 30% 50%, color-mix(in oklab, var(--brand-blue) 14%, transparent), transparent 70%); }
.lha__grid { display: grid; gap: var(--s-8); align-items: center; }
.lha__mark { position: relative; width: min(60vw, 16rem); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.lha__iso { width: 66%; height: auto; animation: breathe 6s var(--ease-in-out) infinite; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lha__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed var(--line-strong); animation: orbit 40s linear infinite; }
.lha__orbit--2 { inset: 12%; border-style: solid; border-color: var(--line); animation-duration: 28s; animation-direction: reverse; }
.lha__orbit::before, .lha__orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; left: 50%; translate: -50% 0; }
.lha__orbit--1::before { top: -4px; background: var(--p-fortix); box-shadow: 0 0 12px var(--p-fortix); }
.lha__orbit--1::after { bottom: -4px; background: var(--p-v); box-shadow: 0 0 12px var(--p-v); }
.lha__orbit--2::before { top: -4px; background: var(--p-pro); box-shadow: 0 0 12px var(--p-pro); }
.lha__orbit--2::after { bottom: -4px; background: var(--p-aura); box-shadow: 0 0 12px var(--p-aura); }
@keyframes orbit { to { transform: rotate(360deg); } }
.lha__copy { display: grid; gap: var(--s-5); }
.lha__title { margin: 0 0 var(--s-3); width: min(100%, 40rem); }
.lha__title img { width: 100%; height: auto; display: block; }
.lha__claim { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: 300; line-height: 1.3; max-width: 44ch; text-wrap: pretty; }
.lha__claim strong { font-weight: 700; color: var(--fg); }
.lha__claim, .lha__title { text-shadow: 0 2px 18px rgb(7 10 20 / 0.85); }
.lha__claim .reg { font-size: 0.45em; vertical-align: super; line-height: 0; margin-left: 0.05em; }
.lha__copy .lead { max-width: 48ch; }
.lha__data { display: grid; grid-template-columns: repeat(2, auto); gap: var(--s-4) var(--s-7); margin: var(--s-5) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); justify-content: start; }
.lha__data > div { display: grid; gap: 0.2rem; }
.lha__data dd { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lha__data dt { font-size: 0.875rem; }
.lha__site a { color: var(--fg); border-bottom: 1px solid var(--line-strong); transition: border-color var(--dur-fast); }
.lha__site a:hover { border-color: var(--fg); }
.lha__line { position: absolute; left: 60%; bottom: -4%; translate: -50% 0; width: min(78vw, 60rem); z-index: -1; opacity: 0.36; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.lha__line img { width: 100%; height: auto; }
@media (min-width: 1024px) { .lha__grid { grid-template-columns: 1fr 2fr; gap: var(--s-10); } .lha__mark { width: min(100%, 22rem); } .lha__data { grid-template-columns: repeat(4, auto); } .lha__copy { padding-right: min(6vw, 5rem); } }
@media (max-width: 1023px) { .lha__line { width: 120vw; bottom: -6%; opacity: 0.34; } }

/* --- Experiencias --- */
.stories { padding: var(--s-10) 0; background: var(--ink-950); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stories__inner { display: grid; gap: var(--s-4); text-align: center; justify-items: center; }
.stories__title { font-size: var(--fs-h2); max-width: 22ch; }
.stories__note { color: var(--fg-muted); max-width: 48ch; }
.stories__social a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }

/* --- FAQ --- */
.faq { padding: var(--s-11) 0; background: var(--ink-900); }
.faq__grid { display: grid; gap: var(--s-8); }
.faq__head { display: grid; gap: var(--s-4); }
.faq__list { display: grid; }
/* Cada pregunta toma un color del logo (--qc), en orden horario azul → verde → fucsia → morado */
.qa { --qc: var(--p-fortix); border-top: 1px solid var(--line); }
.qa:nth-child(4n+2) { --qc: var(--p-pro); } .qa:nth-child(4n+3) { --qc: var(--p-v); } .qa:nth-child(4n+4) { --qc: var(--p-aura); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0; font-size: var(--fs-lead); font-weight: 400; transition: color var(--dur-fast);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--qc); }
.qa summary:focus-visible { outline-offset: -2px; }
.qa__icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); position: relative; transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--fg); width: 0.75rem; height: 1.5px; transform: translate(-50%, -50%); transition: transform var(--dur-slow) var(--ease-out); }
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(180deg); background: color-mix(in srgb, var(--qc) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 65%, transparent); }
.qa summary:hover .qa__icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 65%, transparent); }
.qa[open] .qa__icon::after { transform: translate(-50%, -50%) rotate(0); }
.qa__body { overflow: hidden; }
.qa__body p { padding: 0 0 var(--s-5); color: var(--fg-muted); max-width: 60ch; line-height: 1.6; }
.qa__body a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.faq__head .lead { max-width: 44ch; }
.faq__list { max-width: 56rem; }
.qa summary { position: relative; padding-left: var(--s-4); }
.qa summary::before { content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 2px; background: var(--qc); translate: 0 -50%; transition: height var(--dur-base) var(--ease-out); }
.qa[open] summary::before { height: 1.25rem; }
.qa[open] summary { color: var(--fg); }
.qa__body p { padding-left: var(--s-4); }
@media (min-width: 1024px) { .faq__grid { grid-template-columns: 1fr; gap: var(--s-7); } .faq__head { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--s-9); } .faq__head .eyebrow { grid-column: 1 / -1; } .faq__list { margin-inline: 0; } }

/* --- CTA final: producto + mensaje + acción en una pantalla --- */
.cta { position: relative; overflow: clip; isolation: isolate; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--s-7) + 3.5rem) 0 var(--s-8); background: var(--ink-950); }
.cta__light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 38% at 62% 58%, color-mix(in srgb, var(--p-v) 30%, transparent), transparent 70%),
    radial-gradient(26% 34% at 78% 52%, color-mix(in srgb, var(--p-fortix) 24%, transparent), transparent 70%),
    radial-gradient(22% 30% at 88% 62%, color-mix(in srgb, var(--p-pro) 18%, transparent), transparent 70%),
    radial-gradient(24% 32% at 50% 60%, color-mix(in srgb, var(--p-aura) 22%, transparent), transparent 70%),
    radial-gradient(70% 60% at 50% 100%, var(--ink-900), transparent 70%); }
.cta__inner { display: grid; gap: var(--s-5); align-items: center; }
.cta__copy { display: grid; gap: var(--s-4); text-align: center; justify-items: center; }
.cta__title { max-width: 12ch; }
.cta__lead { max-width: 34ch; display: none; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.cta__shop { font-size: var(--fs-small); color: var(--fg-muted); }
.cta__shop a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }
.cta__shop a:hover { text-decoration-color: var(--accent, var(--brand-lime)); }
/* abanico: eco del Hero, quieto */
.cta__fan { position: relative; display: flex; justify-content: center; align-items: flex-end; height: clamp(14rem, 38svh, 30rem); order: -1; }
.cta__fan.reveal { transform: translateY(1.5rem); }
.cta__fan.reveal.is-in { transform: none; }
.cta__stick { position: relative; width: clamp(5rem, 13svh, 9rem); margin: 0 clamp(-1.4rem, -2.2vw, -0.6rem); transform: rotate(var(--rot)) translateY(calc(var(--i) * 0px)); transform-origin: 50% 100%;
  transition: transform var(--dur-slow) var(--ease-out); z-index: calc(2 + var(--i)); }
.cta__stick:nth-child(1), .cta__stick:nth-child(4) { translate: 0 0.6rem; }
.cta__stick img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.cta__stick::before { content: ""; position: absolute; inset: 24% -10% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%); opacity: 0.8; }
@media (hover: hover) { .cta__stick:hover { transform: rotate(var(--rot)) translateY(-0.75rem) scale(1.04); z-index: 9; } }
@media (min-width: 1024px) {
  .cta { padding-top: var(--s-9); }
  .cta__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); }
  .cta__copy { text-align: left; justify-items: start; }
  .cta__actions { justify-content: flex-start; }
  .cta__lead { display: block; }
  .cta__fan { order: 0; height: clamp(22rem, 68vh, 44rem); }
  .cta__stick { width: clamp(8rem, 20.5vh, 14rem); margin: 0 clamp(-2.2rem, -2.8vw, -0.9rem); }
  .cta__title { font-size: var(--fs-display); }
  .cta__inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr); }
}
@media (prefers-reduced-motion: reduce) { .sys__icon, .lha__iso, .lha__orbit { animation: none; } .cta__stick { transition: none; } }

/* --- Footer: cierra la narrativa con los cuatro sobres --- */
.footer { background: var(--ink-950); border-top: 1px solid var(--line); padding: var(--s-9) 0 var(--s-6); }
.footer__line { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-9); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.footer__stick { display: grid; justify-items: center; gap: var(--s-3); position: relative; isolation: isolate; padding: var(--s-4) 0; border-radius: var(--r-md); }
.footer__stick img { width: clamp(3rem, 8vw, 5.5rem); height: auto; transition: transform var(--dur-slow) var(--ease-out); }
.footer__stick::before { content: ""; position: absolute; inset: 10% 0 20%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 45%, transparent), transparent 70%); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.footer__stick:hover img, .footer__stick:focus-visible img { transform: translateY(-8px) scale(1.06); }
.footer__stick:hover::before, .footer__stick:focus-visible::before { opacity: 1; }
.footer__stick .data { font-size: 0.875rem; color: var(--fg-muted); white-space: nowrap; }
@media (max-width: 420px) { .footer__stick .data { font-size: 0.8125rem; letter-spacing: 0.1em; } }
.footer__cta { margin-top: var(--s-3); }
.footer__grid { display: grid; gap: var(--s-8); }
.footer__brand { display: grid; gap: var(--s-3); justify-items: start; }
.footer__lab { font-size: var(--fs-small); color: var(--fg-muted); }
.footer__site { font-size: var(--fs-small); color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); }
.footer__nav a { font-size: var(--fs-small); color: var(--fg-muted); transition: color var(--dur-fast); }
.footer__nav a:hover { color: var(--fg); }
.footer__social { display: grid; gap: var(--s-3); align-content: start; }
.footer__handle { font-weight: 600; font-size: 1.0625rem; letter-spacing: 0.01em; }
.social { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.social a { display: grid; justify-items: center; gap: 0.45rem; color: var(--fg-muted); text-decoration: none; font-size: 0.875rem; letter-spacing: 0.08em; transition: color var(--dur-base); }
.social img { width: 3rem; height: 3rem; border-radius: 0.9rem; display: block; box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.8); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.social a:hover img, .social a:focus-visible img { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 2px var(--c), 0 14px 30px -10px color-mix(in oklab, var(--c) 60%, transparent); }
.social a:hover, .social a:focus-visible { color: var(--fg); outline: none; }
.social__name { line-height: 1; }
.footer__note { font-size: 0.875rem; color: var(--fg-subtle); }
.footer__foot { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); color: var(--fg-subtle); }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer__legal a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: rgba(244,245,250,0.35); transition: color var(--dur-fast), text-decoration-color var(--dur-fast); }
.footer__legal a:hover { color: var(--fg); text-decoration-color: var(--brand-lime); }
@media (max-width: 599px) {
  .sys__link { padding-inline: var(--s-3); }
  .sys__spec > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .sys__spec dd { font-size: 0.9375rem; overflow-wrap: anywhere; }
}

/* Columnas de Beneficios: en pantallas medianas la etiqueta va encima del valor para que las cuatro fichas quepan */
@media (max-width: 1279px) { .sys__spec > div { grid-template-columns: 1fr; gap: 0.15rem; } .sys__spec dd { overflow-wrap: anywhere; } }