/* ==========================================================================
   PROBIFY — páginas interiores: fichas de producto, /donde-comprar y /como-preparar.
   Reutiliza tokens, .container, .eyebrow, .display, .lead, .btn, .reveal, .pp-ufc, .faq/.qa y .prep.
   ========================================================================== */

/* --- Ruta (breadcrumb) --- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--fs-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-subtle); }
.crumbs a { color: var(--fg-muted); border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.crumbs a:hover { color: var(--fg); border-color: var(--line-strong); }
.crumbs [aria-current] { color: var(--fg); }

/* --- Cabecera de página interior --- */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(7rem, 16vh, 10rem) 0 var(--s-8); background: linear-gradient(180deg, var(--ink-800), var(--ink-950)); }
.page-hero::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; width: min(70vw, 52rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%); pointer-events: none; }
.page-hero__inner { display: grid; gap: var(--s-5); }
.page-hero .display { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); }
.page-hero .lead { max-width: 52ch; }

/* --- Ficha de producto --- */
.ficha { position: relative; isolation: isolate; overflow: hidden; padding: clamp(6.5rem, 14vh, 9rem) 0 var(--s-9); background: linear-gradient(180deg, var(--ink-800), var(--ink-950)); }
.ficha__halo { position: absolute; z-index: -1; right: -12%; top: 4%; width: min(80vw, 56rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 30%, transparent), color-mix(in oklab, var(--accent) 8%, transparent) 45%, transparent 72%); pointer-events: none; }
.ficha__grid { display: grid; gap: var(--s-6); }
.ficha__copy { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.ficha__title { font-size: clamp(2.75rem, 1.4rem + 5vw, 5.5rem); }
.ficha__title strong { color: color-mix(in oklab, var(--accent) 62%, white); }
.ficha .lead { max-width: 46ch; }
.ficha .pp-ufc { max-width: 30rem; }
.ficha__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--line); max-width: 34rem; }
.ficha__meta dt { font-size: 0.875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: var(--s-1); font-weight: 500; }
.ficha__meta dd { margin: 0; font-size: 1.0625rem; color: var(--fg); line-height: 1.4; }
.ficha__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }
.ficha__ctas .btn--ghost .btn__arrow, .buy-card .btn--ghost .btn__arrow { transform: none; }
.ficha__note { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); max-width: 52ch; line-height: 1.5; }
.ficha__note a, .rich a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.ficha__pack { position: relative; margin: 0; display: grid; place-items: center; order: -1; }
.ficha__pack::before { content: ""; position: absolute; inset: 12% 8% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 40%, transparent), transparent 72%); filter: blur(8px); }
.ficha__pack img { display: block; width: auto; height: clamp(17rem, 46svh, 34rem); filter: drop-shadow(0 40px 50px rgb(0 0 0 / 0.55)); transform: rotate(4deg); }
.ficha__copy .crumbs { margin-bottom: var(--s-2); }
@media (min-width: 1024px) {
  .ficha__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--s-8); }
  .ficha__pack { order: 0; }
  .ficha__pack img { height: clamp(26rem, 68svh, 42rem); }
}

/* --- Bloques de contenido --- */
.block { padding: var(--s-9) 0; background: var(--ink-950); }
.block--alt { background: var(--ink-900); }
.block__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
.block__head .display { font-size: var(--fs-h2); }
.block__head .lead { max-width: 56ch; }
.rich p { color: var(--fg-muted); line-height: 1.7; max-width: 72ch; margin: 0 0 var(--s-4); }
.rich strong { color: var(--fg); font-weight: 500; }
.comp__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .comp__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.comp__h { font-size: 0.875rem; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, var(--accent) 60%, white); font-weight: 600; margin: 0 0 var(--s-4); }
.strains { width: 100%; border-collapse: collapse; }
.strains caption { text-align: left; }
.strains th, .strains td { padding: 0.9rem 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: baseline; }
.strains tr:last-child th, .strains tr:last-child td { border-bottom: 1px solid var(--line); }
.strains thead th { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-subtle); border-top: 0; padding-top: 0; }
.strains tbody th { font-style: italic; font-size: 1.0625rem; color: var(--fg); padding-right: var(--s-4); overflow-wrap: anywhere; }
.strains td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: color-mix(in oklab, var(--accent) 55%, white); white-space: nowrap; }
.strains thead th:last-child { text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.chips li { padding: 0.45rem 0.9rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, var(--line)); font-size: var(--fs-small); color: var(--fg); }

/* --- Pasos en texto (ficha) --- */
.steps3 { display: grid; gap: var(--s-4); margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: s; }
.steps3 li { counter-increment: s; display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); background: color-mix(in oklab, var(--accent) 5%, transparent); }
.steps3 li::before { content: "0" counter(s); font-size: 0.875rem; letter-spacing: 0.24em; color: color-mix(in oklab, var(--accent) 60%, white); font-weight: 600; }
.steps3 h3 { margin: 0; font-size: 1.25rem; font-weight: 500; }
.steps3 p { margin: 0; color: var(--fg-muted); line-height: 1.5; }
@media (min-width: 768px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Tarjetas de producto (otras presentaciones / dónde comprar) --- */
.pcards { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pcard { --accent: var(--c); position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-3); justify-items: center; text-align: center; padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.pcard::before { content: ""; position: absolute; z-index: -1; inset: 8% -20% 30%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 30%, transparent), transparent 72%); opacity: 0.7; transition: opacity var(--dur-base) var(--ease-out); }
a.pcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 60%, var(--line)); }
a.pcard:hover::before { opacity: 1; }
a.pcard:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.pcard img { height: clamp(11rem, 26svh, 15rem); width: auto; display: block; filter: drop-shadow(0 22px 28px rgb(0 0 0 / 0.5)); }
.pcard__n { font-size: 0.875rem; letter-spacing: 0.24em; color: var(--c); font-weight: 600; }
.pcard__name { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.04em; }
.pcard__tag { margin: 0; color: var(--fg-muted); font-size: var(--fs-small); }
.pcard__meta { margin: 0; font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle); }
.buy-card .pcard__actions { display: grid; gap: var(--s-2); width: 100%; margin-top: var(--s-2); }
.buy-card .btn { width: 100%; justify-content: center; }
.buy-card .pcard__link { font-size: var(--fs-small); color: var(--fg-muted); border-bottom: 1px solid var(--line-strong); justify-self: center; }
.buy-card .pcard__link:hover { color: var(--fg); }
.buy-card .pcard__price { margin: 0; font-size: 1.0625rem; color: var(--fg); font-variant-numeric: tabular-nums; }

/* --- /como-preparar: la sección .prep existente como contenido principal --- */
.page-prep .prep { padding-top: clamp(7rem, 16vh, 10rem); }
.page-prep .prep__head .display { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); }

@media (prefers-reduced-motion: reduce) { .pcard, .pcard::before { transition: none; } }

/* ==========================================================================
   Fichas dinámicas (10-nov): ambiente, entrada, producto con física, frase, ciencia y CTA por producto.
   Mismo lenguaje que la portada; nada nuevo de contenido.
   ========================================================================== */

/* --- Ambiente del encabezado --- */
.ficha { min-height: min(100svh, 62rem); display: grid; align-items: center; }
.ficha__ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ficha__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.ficha__light { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; will-change: transform; }
.ficha__light--a { width: 46vw; height: 46vw; right: -8vw; top: -6vw; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 60%, transparent), transparent); animation: ficha-drift 18s ease-in-out infinite alternate; }
.ficha__light--b { width: 34vw; height: 34vw; left: -10vw; bottom: -12vw; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 34%, var(--brand-violet) 20%), transparent); opacity: 0.35; animation: ficha-drift 22s ease-in-out -6s infinite alternate-reverse; }
.ficha__molecules { position: absolute; right: -6%; top: 50%; width: min(70vw, 62rem); translate: 0 -50%; opacity: 0.22; mix-blend-mode: screen; transform: translateY(calc(var(--sp, 0) * -60px)); }
.ficha__molecules img { width: 100%; height: auto; display: block; }
.ficha__halo { transform: scale(calc(1 + var(--sp, 0) * 0.25)); opacity: calc(1 - var(--sp, 0) * 0.6); }
@keyframes ficha-drift { to { transform: translate3d(-4vw, 3vw, 0) scale(1.12); } }

/* --- Entrada escalonada del texto (como el hero) --- */
.ficha__copy > * { animation: ficha-up 1000ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 90ms + 120ms); }
.ficha__copy > :nth-child(1) { --k: 0; } .ficha__copy > :nth-child(2) { --k: 1; } .ficha__copy > :nth-child(3) { --k: 2; }
.ficha__copy > :nth-child(4) { --k: 3; } .ficha__copy > :nth-child(5) { --k: 4; } .ficha__copy > :nth-child(6) { --k: 5; }
.ficha__copy > :nth-child(7) { --k: 6; } .ficha__copy > :nth-child(8) { --k: 7; }
@keyframes ficha-up { from { opacity: 0; transform: translateY(1.5rem); filter: blur(6px); } }
.ficha__title strong { background: linear-gradient(100deg, #fff 0%, color-mix(in oklab, var(--accent) 70%, white) 45%, var(--accent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- Producto: entra, flota, sigue al cursor y reacciona al scroll --- */
.ficha__pack { perspective: 900px; }
.ficha__ring { position: absolute; inset: 50% auto auto 50%; width: min(78vw, 30rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 10%, color-mix(in oklab, var(--accent) 70%, transparent) 22%, transparent 34% 60%, color-mix(in oklab, var(--accent) 45%, transparent) 72%, transparent 84%);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, #000 93% 100%); mask: radial-gradient(closest-side, transparent 92%, #000 93% 100%);
  animation: ficha-spin 16s linear infinite; opacity: 0.9; }
.ficha__ring::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
@keyframes ficha-spin { to { rotate: 1turn; } }
.ficha__float { display: block; animation: ficha-in 1400ms var(--ease-out) 150ms both, ficha-float 7s ease-in-out 1550ms infinite; }
.ficha__pack img { transform: translate3d(calc(var(--px, 0) * 18px), calc(var(--py, 0) * 12px + var(--sp, 0) * -70px), 0) rotateY(calc(var(--px, 0) * 14deg)) rotateX(calc(var(--py, 0) * -8deg)) rotate(calc(4deg + var(--px, 0) * 2deg - var(--sp, 0) * 8deg)) scale(calc(1 + var(--sp, 0) * 0.06)); transition: filter var(--dur-slow) var(--ease-out); }
.ficha__pack:hover img { filter: drop-shadow(0 40px 50px rgb(0 0 0 / 0.55)) drop-shadow(0 0 40px color-mix(in oklab, var(--accent) 45%, transparent)); }
.ficha__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgb(255 255 255 / 0.22) 50%, transparent 62%); background-size: 260% 100%; mix-blend-mode: overlay;
  -webkit-mask: var(--stick-mask) center / contain no-repeat; mask: var(--stick-mask) center / contain no-repeat; animation: ficha-shine 6s ease-in-out 1.6s infinite; }
@keyframes ficha-in { from { opacity: 0; transform: translateY(4rem) rotate(-8deg) scale(0.9); filter: blur(10px); } }
@keyframes ficha-float { 50% { transform: translateY(-14px) rotate(0.6deg); } }
@keyframes ficha-shine { 0%, 60% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
.ficha__scroll { position: absolute; left: 50%; bottom: var(--s-5); translate: -50% 0; display: grid; justify-items: center; gap: var(--s-2); font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fg-subtle); opacity: calc(1 - var(--sp, 0) * 4); }
.ficha__scroll::after { content: ""; width: 1px; height: 2.5rem; background: linear-gradient(var(--accent), transparent); animation: ficha-cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes ficha-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* --- Frase del producto (copy aprobado) --- */
.statement { position: relative; isolation: isolate; overflow: hidden; padding: var(--s-10) 0; background: var(--ink-950); text-align: center; }
.statement::before { content: ""; position: absolute; z-index: -1; inset: 10% 15%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%); }
.statement__kicker { justify-content: center; }
.statement__text { margin: var(--s-4) auto 0; font-size: clamp(2.5rem, 1rem + 6.4vw, 7rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; text-wrap: balance; }
.statement__text .w { display: inline-block; opacity: 0.12; filter: blur(6px); transform: translateY(0.3em); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
.statement__text.is-in .w { opacity: 1; filter: none; transform: none; }
.statement__text .w:last-child { font-weight: 700; background: linear-gradient(100deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.statement__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.statement__facts li { padding: 0.6rem 1.1rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 40%, var(--line)); font-size: var(--fs-small); letter-spacing: 0.04em; }
.statement__facts li.reveal { transition-delay: calc(var(--d, 0) * 110ms + 400ms); }

/* --- Ciencia de un solo producto (la órbita de la portada, sin selector) --- */
.science--ficha { padding-top: var(--s-9); }
.science--ficha .science__head { margin-bottom: var(--s-6); }
.science--ficha .sci-card__kind { margin-bottom: var(--s-2); }

/* --- Preparación con el sobre del producto --- */
.page-ficha .prep { padding-bottom: var(--s-9); }

/* --- Otras presentaciones: movimiento al entrar --- */
.pcards li.reveal { transition-delay: calc(var(--d, 0) * 120ms); }
a.pcard img { transition: transform var(--dur-slow) var(--ease-out); }
a.pcard:hover img { transform: translateY(-8px) rotate(-3deg) scale(1.04); }

/* --- CTA por producto --- */
.cta--ficha .cta__fan { height: clamp(16rem, 44svh, 32rem); }
.cta--ficha .cta__stick { width: clamp(7rem, 18svh, 12rem); margin: 0; }
.cta--ficha .cta__note { margin: var(--s-4) 0 0; font-size: var(--fs-small); color: var(--fg-muted); }

@media (min-width: 1024px) {
  .ficha__ring { width: min(40vw, 38rem); }
}
@media (max-width: 1023px) {
  .ficha { min-height: 0; }
  .ficha__scroll { display: none; }
  .ficha__molecules { width: 120vw; top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha__copy > *, .ficha__float, .ficha__ring, .ficha__light, .ficha__shine, .ficha__scroll::after { animation: none !important; }
  .statement__text .w { opacity: 1; filter: none; transform: none; transition: none; }
  .ficha__pack img { transform: rotate(4deg); }
}