/* base.css — de la skill madebyviktor, con los tokens de Ingecon en :root */
:root {
  /* Ingecon: hueso, carbón y ocre. Geist para todo, ajustada en los titulares. */
  --ink: #16181b; --paper: #f1ede4; --paper-2: #e7e1d4; --muted: #5d584f; --accent: #84582a; --accent-fill: #a8763e;
  --dark: #121416; --dark-2: #1c1f23; --dark-ink: #f1ede4; --dark-muted: #b9b2a6;
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 80px);
  --section: clamp(64px, 9vw, 96px);
  --radius: 18px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .8, .2, 1);      /* microinteracciones y apariciones */
  --ease-soft: cubic-bezier(.22, 1, .36, 1); /* modales y bloques grandes */
  --ease-word: cubic-bezier(.215, .61, .355, 1); /* títulos palabra a palabra */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); overscroll-behavior-y: none; }
/* clip y no hidden: overflow hidden en un ancestro rompe position: sticky */
body { margin: 0; overflow-x: clip; color: var(--ink); background: var(--paper); font: 400 17px/1.5 var(--font-text); -webkit-font-smoothing: antialiased; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
input, select, textarea { font: inherit; font-size: 16px; } /* menos de 16px y iOS hace zoom al enfocar */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* Escena pegajosa. --len es el recorrido en svh: <section class="stage" style="--len:300">.
   Sin .motion (sin JS o con movimiento reducido) es una sección normal y todo su contenido se lee en orden. */
.stage { position: relative; }
.motion .stage { height: calc(var(--len, 300) * 1svh); }
.motion .stage__sticky { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.motion .deck-item { position: absolute; }

/* Piezas lejanas de una baraja: no se pintan */
.is-dormant { visibility: hidden !important; content-visibility: hidden; pointer-events: none !important; will-change: auto !important; }

/* Aparición. Solo se oculta si el JS ha arrancado: sin JS todo se ve. */
.js [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity .8s ease var(--d, 0ms), translate .8s var(--ease) var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; translate: none; }

/* Título palabra a palabra con máscara */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .06em; margin-block: -.06em; }
.w > span { display: inline-block; }
.motion .words-in .w > span { opacity: 0; }
.motion .words-in.in .w > span { opacity: 1; animation: word-up .7s var(--ease-word) both; animation-delay: calc(var(--i, 0) * 100ms + var(--delay, 100ms)); }
@keyframes word-up { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }
.word { display: inline-block; white-space: nowrap; }

/* Cinta infinita: el contenido va duplicado y se mueve un -50 % exacto */
.marquee { display: flex; overflow: hidden; }
.marquee__track { display: flex; flex: none; gap: 1.2em; padding-right: 1.2em; animation: marquee var(--marquee, 45s) linear infinite; }
.marquee__track > * { flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Paneles redondeados que suben y se apilan, sin JS */
.panel { position: relative; z-index: 2; border-radius: 26px 26px 0 0; background: var(--paper); }
.stack-card { position: sticky; top: calc(var(--header-h) - 6px); min-height: min(720px, 100svh - 96px); border-radius: var(--radius); overflow: hidden; box-shadow: 0 -14px 40px #00000014; }

/* Carrusel con inercia */
.rail { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.rail:active { cursor: grabbing; }
.rail [data-item] { position: absolute; top: 50%; left: 50%; width: var(--item-w); translate: calc(var(--x, 0px) - 50%) -50%; scale: var(--s, 1); will-change: translate; }

/* Barra de acción fija en móvil */
.cta-bar { position: fixed; inset: auto 0 0; z-index: 40; display: flex; gap: 8px; padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); translate: 0 110%; transition: translate .35s var(--ease); }
.cta-bar.is-on { translate: none; }
@media (min-width: 761px) { .cta-bar { display: none; } }

/* Teléfono real: fuera lo que más cuesta pintar. Quita mezclas, 3D de CSS y desenfoques en vivo. */
@media (max-width: 560px) and (pointer: coarse) {
  .fx-blend { mix-blend-mode: normal !important; }
  .fx-3d { perspective: none !important; transform-style: flat !important; }
  .fx-blur { filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .fx-card { contain: layout paint style; }
}

/* Movimiento reducido, caso por caso. Nunca un animation-duration global. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
}

/* Transición entre páginas en dos actos: encoge, se desliza y crece. Mejora progresiva, sin JS. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(root) { animation-duration: .9s; }
  ::view-transition-old(root) { animation: page-out .9s cubic-bezier(.86, 0, .07, 1) both; }
  ::view-transition-new(root) { animation: page-in .9s cubic-bezier(.86, 0, .07, 1) both; }
}
@keyframes page-out { 33% { transform: scale(.85); } 66%, 100% { transform: translateY(-100%) scale(.85); } }
@keyframes page-in { 0%, 33% { transform: translateY(100%) scale(.85); } 66% { transform: scale(.85); } 100% { transform: none; } }