/* ==========================================================================
   CIENCIA · FORMULACIÓN · CÓMO PREPARARLO
   ========================================================================== */

/* Reveal genérico al entrar en viewport (IntersectionObserver en reveal.ts) */
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }


/* --- Ciencia V4: una escena por producto (tabs 01–04, órbita de cepas con %, activos, tarjeta de utilidad terapéutica) --- */
.science { --accent: var(--p-fortix); padding: var(--s-10) 0 var(--s-11); background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-900) 78%, var(--ink-950) 100%); position: relative; overflow: clip; }
.science::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 50%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%); pointer-events: none; transition: background var(--dur-cine) var(--ease-out); }
.science > * { position: relative; }
.science__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.science__title { max-width: 14ch; font-size: var(--fs-h2); }
.science__head .lead { max-width: 48ch; }
/* Tabs (misma familia que el selector de Los 4, en horizontal) */
.science__tabs { display: flex; gap: var(--s-2); margin-bottom: var(--s-6); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.science__tabs::-webkit-scrollbar { display: none; }
.sci-tab { --c: var(--fg); flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: var(--s-2); padding: 0.7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg-muted); font: inherit; cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base), transform var(--dur-base) var(--ease-out); }
.sci-tab__n { font-size: 0.8125rem; letter-spacing: 0.2em; font-weight: 500; color: var(--c); }
.sci-tab__name { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.02em; }
.sci-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.sci-tab[aria-selected="true"] { color: var(--fg); border-color: color-mix(in oklab, var(--c) 70%, transparent); background: color-mix(in oklab, var(--c) 14%, transparent); box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 25%, transparent), 0 8px 24px -12px color-mix(in oklab, var(--c) 70%, transparent); }
.sci-tab { transition: color var(--dur-base), border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base); }
.sci-tab:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 2px; }
/* Escena */
.science__scene { position: relative; }
.sci-panel { display: grid; gap: var(--s-6); align-items: center; }
.sci-panel[hidden] { display: none; }
.sci-panel.is-in .sci-orbit, .sci-panel.is-in .sci-cards { animation: sci-in var(--dur-cine) var(--ease-out) both; }
.sci-panel.is-in .sci-cards { animation-delay: 120ms; }
.sci-panel.is-out { opacity: 0; transform: scale(0.985); transition: opacity 360ms var(--ease-in-out), transform 360ms var(--ease-in-out); pointer-events: none; }
@keyframes sci-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.985); } }
.sci-orbit { position: relative; width: min(100%, 34rem); aspect-ratio: 1; margin-inline: auto; }
.sci-orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sci-orbit__ring { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-out) 0.2s; }
.sci-orbit__ring--inner { stroke: var(--line); stroke-dasharray: 0.02 0.02; stroke-dashoffset: 0; transition: none; opacity: 0.8; }
.reveal.is-in .sci-orbit__ring:not(.sci-orbit__ring--inner) { stroke-dashoffset: 0; }
.sci-panel.is-in .sci-orbit__ring:not(.sci-orbit__ring--inner):not(.sci-orbit__ring--outer) { animation: sci-ring 1.8s var(--ease-out) both; stroke: color-mix(in oklab, var(--accent) 45%, var(--line-strong)); }
@keyframes sci-ring { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sci-panel { --ang: -10.8deg; --tilt: 0deg; --lift: 0px; }
.sci-orbit__trail { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.16 0.84; stroke-dashoffset: 0.1; opacity: 0.22; transform: rotate(var(--ang)); transform-origin: 300px 300px; transition: transform 900ms var(--ease-out), stroke var(--dur-cine); }
.sci-orbit__scan { fill: none; stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--accent)); stroke-linecap: round; stroke-dasharray: 0.06 0.94; opacity: 0.9; transform: rotate(var(--ang)); transform-origin: 300px 300px; transition: transform 900ms var(--ease-out), stroke var(--dur-cine); filter: drop-shadow(0 0 6px var(--accent)); }
.sci-orbit__ring--inner { animation: sci-spin 80s linear infinite; transform-origin: 300px 300px; }
.sci-orbit__ring--outer { stroke: color-mix(in oklab, var(--accent) 55%, var(--line)); stroke-dasharray: 0.004 0.03; stroke-dashoffset: 0; opacity: 0.6; transition: none; animation: sci-spin 140s linear infinite reverse; transform-origin: 300px 300px; }
@keyframes sci-spin { to { transform: rotate(360deg); } }
.sci-link { stroke: var(--accent); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.75; transition: stroke var(--dur-cine); filter: drop-shadow(0 0 3px color-mix(in oklab, var(--accent) 70%, transparent)); }
.sci-link.is-draw { animation: sci-draw 700ms var(--ease-out) 120ms both; }
@keyframes sci-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sci-orbit__ripple { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.sci-orbit__ripple.is-on { animation: sci-ripple 1100ms var(--ease-out) both; }
@keyframes sci-ripple { 0% { opacity: 0.9; transform: scale(1); stroke-width: 2.5; } 100% { opacity: 0; transform: scale(7); stroke-width: 0.4; } }
.sci-orbit__particles { position: absolute; inset: -8%; width: 116%; height: 116%; pointer-events: none; opacity: 0.95; mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.sci-orbit__beam { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 42%, transparent), transparent 72%); animation: sci-beam 5s var(--ease-in-out) infinite; transition: background var(--dur-cine); }
@keyframes sci-beam { 50% { transform: scale(1.12); opacity: 0.75; } }
.sci-orbit__product { position: absolute; left: 50%; top: 50%; width: 21%; translate: -50% -50%; perspective: 900px; }
.sci-orbit__product picture, .sci-orbit__product { transform-style: preserve-3d; }
.sci-orbit__product img { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)); transform: rotateY(var(--tilt)) translateY(var(--lift)); transition: transform 900ms var(--ease-out); animation: sci-breathe 6s var(--ease-in-out) infinite; }
@keyframes sci-breathe { 50% { translate: 0 -1.5%; scale: 1.02; } }
.sci-orbit__product::after { content: ""; position: absolute; inset: -30% -60%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 55%, transparent), transparent 70%); z-index: -1; }
.sci-orbit__product.is-hit::after { animation: sci-hit-glow 900ms var(--ease-out) both; }
.sci-orbit__product.is-hit img { animation: sci-breathe 6s var(--ease-in-out) infinite, sci-hit 700ms var(--ease-out) both; }
@keyframes sci-hit-glow { 0% { opacity: 0; transform: scale(0.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes sci-hit { 0% { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)) brightness(1); } 30% { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)) brightness(1.28) drop-shadow(0 0 14px color-mix(in oklab, var(--accent) 60%, transparent)); } 100% { filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55)) brightness(1); } }
.reveal .sci-orbit__product { transform: scale(0.92); opacity: 0; transition: transform 1.4s var(--ease-out) 0.3s, opacity 1.2s var(--ease-out) 0.3s; }
.reveal.is-in .sci-orbit__product { transform: none; opacity: 1; }
/* Nodos: cepas (círculo) y otros activos (cuadrado) */
.sci-node { cursor: pointer; outline: none; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); transition-delay: calc(0.4s + var(--i) * 80ms); }
.reveal.is-in .sci-node, .sci-panel.is-in .sci-node { opacity: 1; }
.sci-node__dot { fill: var(--ink-950); stroke: var(--fg); stroke-width: 1.5; transition: fill var(--dur-base), stroke var(--dur-base), r var(--dur-base); }
.sci-node__sq { fill: var(--ink-950); stroke: var(--fg-muted); stroke-width: 1.25; transition: fill var(--dur-base), stroke var(--dur-base); }
.sci-node__halo { fill: var(--accent); opacity: 0; transform-origin: center; transform-box: fill-box; transition: opacity var(--dur-base); }
.sci-node__label { font-family: var(--font-sans); font-size: 19px; font-weight: 500; font-style: italic; fill: var(--fg-muted); transition: fill var(--dur-base); paint-order: stroke; stroke: var(--ink-900); stroke-width: 4px; stroke-linejoin: round; }
.sci-node__label--other { font-style: normal; font-size: 16px; letter-spacing: 0.04em; }
.sci-node__genus { font-style: normal; fill: var(--fg-subtle); }
.sci-node__pct { font-family: var(--font-sans); font-size: 17px; font-weight: 700; letter-spacing: 0.06em; fill: var(--accent); paint-order: stroke; stroke: var(--ink-900); stroke-width: 4px; opacity: 0.9; transition: fill var(--dur-cine); }
.sci-node:hover .sci-node__dot, .sci-node:focus-visible .sci-node__dot, .sci-node.is-live .sci-node__dot { fill: var(--accent); stroke: var(--accent); }
.sci-node:hover .sci-node__sq, .sci-node:focus-visible .sci-node__sq, .sci-node.is-live .sci-node__sq { fill: var(--accent); stroke: var(--accent); }
.sci-node:hover .sci-node__halo, .sci-node:focus-visible .sci-node__halo { opacity: 0.18; }
.sci-node.is-live .sci-node__halo { opacity: 0.22; animation: sci-pulse 2.4s var(--ease-in-out) infinite; }
@keyframes sci-pulse { 50% { opacity: 0.08; transform: scale(1.25); } }
.sci-node:hover .sci-node__label, .sci-node:focus-visible .sci-node__label { fill: var(--fg); }
.sci-node.is-live .sci-node__label { fill: var(--fg); font-weight: 500; }
.sci-node__label, .sci-node__pct { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-base) var(--ease-out), fill var(--dur-base); }
.sci-node.is-live .sci-node__label { transform: scale(1.08); }
.sci-node.is-live .sci-node__pct { opacity: 1; transform: scale(1.1); }
.sci-node.is-live .sci-node__dot { r: 7; }
.sci-node.is-live .sci-node__dot, .sci-node.is-live .sci-node__sq { filter: drop-shadow(0 0 6px var(--accent)); }
.sci-node:focus-visible .sci-node__dot, .sci-node:focus-visible .sci-node__sq { stroke-width: 3; }
.sci-panel:has(.sci-node:hover) .sci-node:not(:hover):not(.is-live) { opacity: 0.5; transition-delay: 0s; }
/* Tarjeta de utilidad terapéutica */
.sci-cards { display: grid; gap: var(--s-3); align-content: start; min-height: 16rem; }
.sci-cards__hint { font-size: 0.8125rem; }
.sci-card { position: relative; overflow: hidden; display: grid; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r-md); background: color-mix(in oklab, var(--ink-950) 70%, transparent); }
.sci-card[hidden] { display: none; }
.sci-card.is-in { animation: sci-card-in 520ms var(--ease-out) both; }
@keyframes sci-card-in { from { opacity: 0; transform: translateX(0.75rem); clip-path: inset(0 0 0 100%); } 60% { clip-path: inset(0 0 0 0); } }
.sci-card.is-in .sci-card__name { animation: sci-li 560ms var(--ease-out) both; animation-delay: 80ms; }
.sci-card.is-in::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--accent) 18%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: sci-sheen 1100ms var(--ease-out) 120ms both; }
@keyframes sci-sheen { from { background-position: 120% 0; opacity: 1; } to { background-position: -40% 0; opacity: 0; } }
.sci-card__kind { font-size: 0.8125rem; }
.sci-card__name { font-size: var(--fs-h3); font-weight: 300; line-height: 1.2; font-style: italic; letter-spacing: -0.01em; }
.sci-card__pct { font-style: normal; font-size: 0.875rem; color: var(--accent); margin-left: 0.4em; vertical-align: middle; }
.sci-card__claims { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.sci-card__claims li { position: relative; padding-left: 1.1rem; font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.45; }
.sci-card.is-in .sci-card__claims li { animation: sci-li 420ms var(--ease-out) both; animation-delay: calc(140ms + var(--k, 0) * 70ms); }
@keyframes sci-li { from { opacity: 0; transform: translateX(0.5rem); } }
.sci-card__idx { float: right; color: var(--fg-subtle); letter-spacing: 0.1em; }
.sci-cards__hint { position: relative; padding-bottom: var(--s-2); }
.sci-cards__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--line); overflow: hidden; }
.sci-cards__bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.sci-cards__bar.is-run::after { animation: sci-bar var(--tour, 35000ms) linear both; }
@keyframes sci-bar { to { transform: scaleX(1); } }
.sci-card__claims li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.sci-comp { grid-column: 1 / -1; font-size: 1rem; line-height: 1.65; color: var(--fg-subtle); max-width: 78ch; }
.sci-comp .data { display: block; margin-bottom: 0.4rem; font-size: 0.9375rem; }
/* DATA */
.science__data { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.science__data > div { display: grid; gap: var(--s-2); }
.sci-num { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.sci-num__v::before { content: "0"; opacity: 0.35; }
.sci-num__v.is-two::before { content: none; }
.sci-num__unit { font-size: 0.4em; font-weight: 500; letter-spacing: 0.08em; margin-left: 0.15em; color: var(--fg-muted); }
.science__foot { font-size: var(--fs-lead); color: var(--fg-muted); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); }
.science__foot > * { max-width: 44ch; }
.science__foot strong { color: var(--fg); font-weight: 500; }
.science__legal { font-size: 0.875rem; }
@media (min-width: 768px) {
  /* Órbita a la izquierda ocupando dos filas; a la derecha, tarjeta arriba y composición debajo: el bloque aprovecha el alto de la órbita */
  .sci-panel { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr); grid-template-rows: auto 1fr; gap: var(--s-5) var(--s-7); align-items: start; }
  .sci-orbit { grid-row: 1 / span 2; align-self: center; }
  .sci-cards { grid-column: 2; grid-row: 1; }
  .sci-comp { grid-column: 2; grid-row: 2; max-width: none; padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .science__data { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .science { padding: var(--s-10) 0 var(--s-10); }
  .science__head { grid-template-columns: 1fr 1fr; align-items: end; }
  .science__head .eyebrow { grid-column: 1 / -1; }
  .sci-orbit { width: min(100%, clamp(30rem, 64vh, 42rem)); }
  .sci-node__label { font-size: 18px; }
  .sci-tab { padding: 0.8rem 1.35rem; }
}
@media (max-width: 767px) {
  .sci-node__label { font-size: 25px; stroke-width: 8px; }
  .sci-node__label--other { font-size: 22px; }
  .sci-node__pct { font-size: 23px; stroke-width: 7px; }
  .sci-orbit { width: min(100%, 26rem); margin-block: var(--s-3); }
  .sci-orbit__svg { inset: 5% 15% 5% 15%; width: 70%; height: 90%; }
  .sci-orbit { aspect-ratio: 1 / 0.95; }
  .sci-node__dot { r: 8; stroke-width: 2.5; }
  .sci-node__halo { r: 34; }
  .sci-node__sq { width: 14px; height: 14px; }
  .sci-orbit__product { width: 15%; }
  .sci-cards { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sci-orbit__scan { animation: none; }
  .sci-orbit__ring { transition: none; stroke-dashoffset: 0; }
  .sci-node, .reveal .sci-orbit__product, .sci-panel.is-in .sci-orbit, .sci-panel.is-in .sci-cards, .sci-card.is-in, .sci-orbit__product img, .sci-node.is-live .sci-node__halo, .sci-orbit__ring--inner, .sci-orbit__ring--outer, .sci-orbit__beam, .sci-link, .sci-card.is-in .sci-card__claims li, .sci-cards__bar::after { transition: none; animation: none; opacity: 1; transform: none; }
  .sci-link { stroke-dashoffset: 0; }
  .sci-orbit__particles { display: none; }
  .sci-orbit__ripple, .sci-orbit__product::after, .sci-card.is-in::after, .sci-card.is-in .sci-card__name, .sci-orbit__trail, .sci-panel.is-in .sci-orbit__ring { animation: none !important; transition: none; }
  .sci-orbit__trail { opacity: 0; } .sci-orbit__ripple { opacity: 0; }
  .sci-orbit__scan { filter: none; }
  .sci-panel.is-out { transition: none; }
}
@media (min-width: 1600px) { .sci-node__label { font-size: 17px; } .sci-orbit { width: min(100%, clamp(34rem, 68vh, 46rem)); } }
html[data-quality="low"] .sci-node.is-live .sci-node__halo, html[data-quality="low"] .sci-orbit__ring--inner, html[data-quality="low"] .sci-orbit__ring--outer, html[data-quality="low"] .sci-orbit__beam { animation: none; }
html[data-quality="low"] .sci-orbit__particles { display: none; }
html[data-quality="low"] .sci-orbit__scan, html[data-quality="low"] .sci-link { filter: none; }
html[data-quality="low"] .sci-orbit__product::after, html[data-quality="low"] .sci-card.is-in::after { animation: none; }

/* Nota al pie de la tarjeta (asterisco del título "Toca una cepa o un componente…") */
.sci-cards__note { margin: var(--s-2) 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--fg-muted); }