/* mov.css — piezas visuales comunes del movimiento v5 (24-oct-2026). Acompaña a mov.js.
   Usa los tokens de la página que lo carga (--cream, --fg-1, --bg…) con respaldo propio.
   Polvo: --polvo y --polvo-2 son canales RGB que cada producto fija en su :root. */

:root {
  --polvo: 245, 229, 186; --polvo-2: 214, 55, 67;
  --m-o4: cubic-bezier(.16, 1, .3, 1);          /* sale rápido y frena largo */
  --m-io: cubic-bezier(.625, .05, 0, 1);        /* el «osmo»: arranque contenido, final suave */
  --m-in: cubic-bezier(.55, 0, .75, 0);
}
html[data-tema="claro"] { --polvo: 120, 22, 30; --polvo-2: 145, 7, 19; }

/* ── Estela del puntero ─────────────────────────────────────────────────────────── */
.sf-polvo { position: fixed; inset: 0; z-index: 150; pointer-events: none; }

/* ── Cielo: halos que derivan despacio, grano y viñeta ───────────────────────────────
   Un halo por producto (burdeos, ámbar, verde azulado) en vez de la retícula de la v4. */
.cielo { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg, #0d0a0b); }
html.sf-rueda .cielo i { animation-play-state: paused; }
.cielo i { position: absolute; border-radius: 50%; opacity: .5; will-change: transform;
  background: radial-gradient(circle closest-side, var(--h) 0%, transparent 100%);
  animation: cielo-deriva 34s ease-in-out infinite alternate; }
.cielo i:nth-child(1) { --h: rgba(145, 7, 19, .34); width: 72vw; height: 72vw; left: -20vw; top: -30vw; }
.cielo i:nth-child(2) { --h: rgba(232, 198, 106, .10); width: 58vw; height: 58vw; right: -18vw; top: 8vh; animation-delay: -12s; animation-duration: 41s; }
.cielo i:nth-child(3) { --h: rgba(79, 179, 165, .09); width: 64vw; height: 64vw; left: 22vw; bottom: -38vw; animation-delay: -6s; animation-duration: 38s; }
.cielo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 55%, rgba(0, 0, 0, .5) 100%); }
.grano { position: fixed; inset: 0; z-index: 120; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes cielo-deriva { to { transform: translate3d(6vw, 4vh, 0) scale(1.08); } }
html[data-tema="claro"] .cielo i:nth-child(1) { --h: rgba(145, 7, 19, .10); }
html[data-tema="claro"] .cielo i:nth-child(2) { --h: rgba(201, 154, 46, .12); }
html[data-tema="claro"] .cielo i:nth-child(3) { --h: rgba(47, 138, 125, .09); }
html[data-tema="claro"] .cielo::after { background: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 60%, rgba(60, 35, 25, .08) 100%); }
html[data-tema="claro"] .grano { opacity: .035; mix-blend-mode: multiply; }

/* ── Texto que rueda ([data-rueda]) ─────────────────────────────────────────────── */
.rd { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.15; }
.rd-a, .rd-b { grid-area: 1 / 1; transition: transform .55s var(--m-io); }
.rd-b { transform: translateY(105%); }
@media (hover: hover) {
  :is(a, button):hover > .rd .rd-a, :is(a, button):hover .rd-t > .rd .rd-a { transform: translateY(-105%); }
  :is(a, button):hover > .rd .rd-b, :is(a, button):hover .rd-t > .rd .rd-b { transform: none; }
}
:is(a, button):focus-visible .rd .rd-a { transform: translateY(-105%); }
:is(a, button):focus-visible .rd .rd-b { transform: none; }

/* ── Cifras de marcador ([data-cifra]) ─────────────────────────────────────────── */
.cf-c { display: inline-block; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.08em; }
.cf-t { display: block; white-space: pre; will-change: transform; }
.cf-f { display: inline-block; }

/* ── Botones de la casa ───────────────────────────────────────────────────────────
   Píldora alta (54-58 px), flecha que avanza y etiqueta que rueda. La crema rellena es
   la acción principal; el fantasma, la secundaria; .bt--p toma el color del producto. */
.bt { --bt-bg: var(--cream, #f5e5ba); --bt-fg: #160f10; --bt-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  height: clamp(50px, 46px + .4vw, 58px); padding: 0 clamp(20px, 18px + .5vw, 28px);
  border-radius: 999px; border: 1px solid var(--bt-bd); background: var(--bt-bg); color: var(--bt-fg);
  font: 600 clamp(15px, 14.4px + .2vw, 16.5px)/1 var(--sans, 'IBM Plex Sans', system-ui, sans-serif);
  text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .3s, border-color .3s, color .3s, transform .35s var(--m-io), box-shadow .35s; }
.bt .fl { display: inline-block; transition: transform .45s var(--m-io); }
@media (hover: hover) {
  .bt:hover { transform: translateY(-2px); }
  .bt:hover .fl { transform: translateX(5px); }
  .bt:not(.bt--fant):hover { box-shadow: 0 14px 34px -16px rgba(var(--bt-sh, 245, 229, 186), .55); }
}
.bt:active { transform: translateY(0) scale(.98); }
.bt:focus-visible { outline: 2px solid var(--cream, #f5e5ba); outline-offset: 3px; }
.bt--fant { --bt-bg: rgba(var(--ink, 245, 229, 186), .06); --bt-fg: var(--fg-1, #f5ecd9); --bt-bd: rgba(var(--ink, 245, 229, 186), .18); }
@media (hover: hover) { .bt--fant:hover { --bt-bg: rgba(var(--ink, 245, 229, 186), .12); --bt-bd: rgba(var(--ink, 245, 229, 186), .32); } }
.bt--p { --bt-bg: var(--p, #910713); --bt-fg: var(--p-fg, #f5e5ba); --bt-sh: var(--p-rgb, 145, 7, 19); }
.bt--chico { height: 42px; padding: 0 18px; font-size: 14px; }
html[data-tema="claro"] .bt { --bt-fg: #fbf6ec; }
html[data-tema="claro"] .bt--fant { --bt-fg: var(--fg-1, #1f1612); }

/* ── El trazo bajo la palabra de acento ───────────────────────────────────────────
   Lo que un analista subraya: un trazo de rotulador burdeos que se dibuja al entrar. */
.trazo { position: relative; white-space: nowrap; }
.trazo > svg { position: absolute; left: -2%; right: -2%; width: 104%; bottom: -.12em; height: .3em; overflow: visible; pointer-events: none; }
.trazo > svg path { fill: none; stroke: var(--trazo, #c0313d); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--m-o4) var(--td, .35s); }
.trazo.on > svg path { stroke-dashoffset: 0; }
html[data-tema="claro"] .trazo > svg path { stroke: #b3121f; }

/* ── Menú en capas ([SFMov.capas]) ────────────────────────────────────────────────── */
.capas { position: fixed; inset: 0; z-index: 140; visibility: hidden; pointer-events: none; }
.capas.on { visibility: visible; pointer-events: auto; }
.capas .velo { position: absolute; inset: 0; background: rgba(8, 6, 7, .5); opacity: 0; transition: opacity .45s var(--m-io); }
.capas.on .velo { opacity: 1; }
.capa, .capa-p { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 640px); transform: translateX(102%);
  transition: transform .6s var(--m-io); }
.capa:nth-of-type(1) { background: #e8c66a; transition-delay: .1s; }
.capa:nth-of-type(2) { background: #4fb3a5; transition-delay: .05s; }
.capa:nth-of-type(3) { background: #5d0910; transition-delay: 0s; }
.capas.on .capa:nth-of-type(1) { transition-delay: 0s; }
.capas.on .capa:nth-of-type(2) { transition-delay: .07s; }
.capas.on .capa:nth-of-type(3) { transition-delay: .14s; }
.capa-p { background: #910713; color: #f5e5ba; transition-delay: 0s; display: flex; flex-direction: column;
  padding: calc(var(--sf-top, 0px) + 22px) clamp(22px, 4vw, 52px) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; outline: none;
  transition: transform .75s var(--m-io); }
.capas.on .capa-p { transition-delay: .2s; }
.capas.on .capa, .capas.on .capa-p { transform: none; }
.capas:not(.on) .capa-p { transition-duration: .4s; transition-timing-function: var(--m-in); }
.capas:not(.on) .capa { transition-duration: .4s; transition-timing-function: var(--m-in); }
.capa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.capa-x { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(245, 229, 186, .3); background: transparent; color: inherit; font: 600 15px/1 var(--sans, system-ui); cursor: pointer; }
.capa-x:hover { background: rgba(245, 229, 186, .1); }
.capa-nav { display: flex; flex-direction: column; margin: auto 0; padding: 4vh 0; }
.capa-nav a { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; padding: 12px 0;
  text-decoration: none; color: inherit; border-bottom: 1px solid rgba(245, 229, 186, .14); }
.capa-nav a:first-child { border-top: 1px solid rgba(245, 229, 186, .14); }
.capa-nav .cm { width: 40px; height: 40px; grid-row: span 2; }
.capa-nav b { display: block; overflow: hidden; font: 500 clamp(34px, 26px + 2.6vw, 58px)/1.02 var(--serif, 'Frank Ruhl Libre', Georgia, serif); letter-spacing: -.02em; }
.capa-nav b > span { display: inline-block; transform: translateY(112%) rotate(6deg); transform-origin: 0 100%;
  transition: transform .85s var(--m-o4) calc(.32s + var(--i, 0) * .06s); }
.capas.on .capa-nav b > span { transform: none; }
.capa-nav small { display: block; font: 400 14.5px/1.35 var(--sans, system-ui); color: rgba(245, 229, 186, .72); opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease calc(.5s + var(--i, 0) * .06s), transform .5s var(--m-o4) calc(.5s + var(--i, 0) * .06s); }
.capas.on .capa-nav small { opacity: 1; transform: none; }
@media (hover: hover) { .capa-nav a:hover b > span { color: #fff3d4; } .capa-nav a:hover small { color: #f5e5ba; } }
.capa-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; font: 400 14px/1.4 var(--sans, system-ui);
  color: rgba(245, 229, 186, .7); opacity: 0; transition: opacity .5s ease .65s; }
.capas.on .capa-pie { opacity: 1; }
.capa-pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.capa-pie a { color: #f5e5ba; text-decoration: none; padding: 10px 0; }
.capa-pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.capas-abiertas { overflow: hidden; }
@media (max-width: 640px) { .capa, .capa-p { width: 100%; } }

/* ── Botón de menú con la etiqueta que rueda y dos filetes que se cruzan ───────────── */
.bt-menu { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 18px; border-radius: 999px;
  border: 1px solid rgba(var(--ink, 245, 229, 186), .2); background: rgba(var(--paper, 13, 10, 11), .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--fg-1, #f5ecd9);
  font: 600 14.5px/1 var(--sans, system-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; z-index: 141; }
.bt-menu i { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--cream, #f5e5ba); }
.bt-menu i::before, .bt-menu i::after { content: ""; position: absolute; left: 9px; right: 9px; height: 1.6px; border-radius: 2px; background: var(--bg, #0d0a0b);
  transition: transform .45s var(--m-io); }
.bt-menu i::before { top: 11.5px; } .bt-menu i::after { bottom: 11.5px; }
.bt-menu[aria-expanded="true"] { color: #f5e5ba; border-color: rgba(245, 229, 186, .3); background: transparent; }
.bt-menu[aria-expanded="true"] i { background: #f5e5ba; }
.bt-menu[aria-expanded="true"] i::before { transform: translateY(3.6px) rotate(45deg); }
.bt-menu[aria-expanded="true"] i::after { transform: translateY(-3.6px) rotate(-45deg); }
@media (hover: hover) { .bt-menu:hover i::before { transform: scaleX(.7); } .bt-menu[aria-expanded="true"]:hover i::before { transform: translateY(3.6px) rotate(45deg); } }

/* ── Movimiento reducido: todo queda en su estado final ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cielo i { animation: none; }
  .rd-a, .rd-b, .capa, .capa-p, .capa-nav b > span, .capa-nav small, .capa-pie, .trazo > svg path { transition: none !important; }
  .trazo > svg path { stroke-dashoffset: 0; }
}