/* Hachazo Limpio · estilos
   Tema oscuro cinematográfico. Todo color, tamaño, curva y duración sale de :root. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  /* Color */
  --bg: #0d0b0a;
  --surface: #15120f;
  --surface-2: #1e1a16;
  --ink: #efe9df;
  --muted: #a69a8d;
  --accent: #c0301f;
  --accent-hover: #a3271a;
  --accent-light: #e2553f;
  --accent-ink: #ffffff;
  --paper: #f3ede3;
  --paper-ink: #1b1410;
  --focus: var(--ink);

  /* Tipografía: una familia, dos anchos */
  --font: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --step-tiny: 0.8125rem;
  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --step-h3: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --step-h2: clamp(2.5rem, 1.4rem + 4.2vw, 5rem);
  --step-hero: clamp(3.25rem, 1rem + 6.4vw, 8.75rem);

  /* Espacio */
  --m: clamp(16px, 2.4vw, 40px);
  --pad: max(var(--m), calc((100vw - 1400px) / 2));
  --gap-sec: clamp(96px, 11vw, 176px);

  /* Movimiento (curvas de Emil Kowalski) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-throw: cubic-bezier(0.55, 0, 0.9, 0.45);
  --dur-press: 140ms;
  --dur-ui: 200ms;
  --dur-reveal: 560ms;
  --dur-img: 1000ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.6; font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, figure, dl, dd { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 60; background: var(--ink); color: var(--bg); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* Titulares: Archivo condensada y pesada */
.hero__title, .h2, .h3, .precio__line, .contacto__mail, .score dd, .hero__facts dd, .pie__wm text { font-family: var(--font); font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: -0.005em; }
.h2 { font-size: var(--step-h2); line-height: .92; text-wrap: balance; }
.h3 { font-size: var(--step-h3); line-height: 1; font-weight: 700; }
.lead { font-size: var(--step-lead); line-height: 1.45; color: var(--ink); max-width: 38ch; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; font-family: var(--font); font-weight: 600; font-size: var(--step-small); text-decoration: none; cursor: pointer; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease, color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }
.btn:active { transform: scale(0.97); }
.btn--big { min-height: 56px; padding: 0 30px; font-size: var(--step-body); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ink { background: var(--paper-ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(239, 233, 223, .55); }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: text-underline-offset var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--accent-hover); }
  .btn--ink:hover { background: #000; }
  .btn--ghost:hover { background: var(--ink); color: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .link:hover { text-underline-offset: 8px; }
}

/* ---------- CABECERA ---------- */
.top { position: fixed; z-index: 40; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 16px var(--pad); padding-top: calc(16px + env(safe-area-inset-top, 0px)); background: transparent; transition: background-color var(--dur-ui) ease, padding var(--dur-ui) var(--ease-out); }
.top.is-solid { background: var(--bg); padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
.brand { margin-right: auto; text-decoration: none; }
.brand__cut { display: flex; align-items: flex-start; font-stretch: 72%; font-weight: 800; font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; }
/* el nombre partido: la segunda palabra cae un poco, con el borde cortado en diagonal */
.brand__w2 { margin-left: .18em; padding-left: .22em; transform: translateY(.14em); color: var(--accent-light); clip-path: polygon(.3em 0, 100% 0, 100% 100%, 0 100%); }
.top__nav { display: flex; gap: clamp(16px, 2vw, 32px); font-size: var(--step-small); font-weight: 500; }
.top__nav a { position: relative; text-decoration: none; padding: 8px 0; color: var(--ink); opacity: .82; transition: opacity var(--dur-ui) ease; }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .top__nav a:hover { opacity: 1; }
  .top__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.top__cta { min-height: 42px; padding: 0 20px; }

/* ---------- PORTADA ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13, 11, 10, .94) 0%, rgba(13, 11, 10, .72) 32%, rgba(13, 11, 10, .1) 62%, rgba(13, 11, 10, 0) 100%),
              linear-gradient(0deg, rgba(13, 11, 10, .9) 0%, rgba(13, 11, 10, 0) 34%); }
.hero__body { align-self: end; padding: 140px var(--pad) 56px; max-width: calc(var(--pad) + 760px); }
.hero__title { font-size: var(--step-hero); line-height: .88; text-wrap: balance; max-width: 11ch; }
.hero__lead { margin-top: 28px; font-size: var(--step-lead); line-height: 1.45; max-width: 34ch; color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px var(--m); padding: 28px var(--pad) 36px; background: rgba(13, 11, 10, .72); }
.hero__facts div { display: flex; flex-direction: column-reverse; gap: 4px; }
.hero__facts dt { font-size: var(--step-small); color: var(--muted); }
.hero__facts dd { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: settle 2400ms var(--ease-out) both; }
  .hero__title { animation: rise 800ms var(--ease-out) 120ms both; }
  .hero__lead { animation: rise 800ms var(--ease-out) 220ms both; }
  .hero__actions { animation: rise 800ms var(--ease-out) 300ms both; }
  .hero__facts { animation: fade-in 900ms ease 450ms both; }
  .top { animation: fade-in 700ms ease 200ms both; }
}
@keyframes settle { from { transform: scale(1.07); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- entradas al hacer scroll (solo con JS; sin JS todo se ve) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal--img { opacity: 1; transform: none; }
.js .reveal--img > * { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-img) var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal--img.in > * { clip-path: inset(0 0 0 0); }
.js .reveal--print { opacity: 1; transform: none; overflow: hidden; }
.js .reveal--print .slip { transform: translateY(-100%); transition: transform 1000ms var(--ease-drawer); transition-delay: calc(var(--d, 0ms) + 120ms); }
.js .reveal--print.in .slip { transform: none; }

/* ---------- LA SESIÓN ---------- */
.sesion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); padding: var(--gap-sec) var(--pad); align-items: start; }
.sesion__intro { grid-column: 1 / 7; }
.sesion__intro .lead { margin-top: 32px; }
.points { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; max-width: 44ch; }
.points li { position: relative; padding-left: 26px; color: var(--muted); }
.points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; background: var(--accent); }
.points b { color: var(--ink); font-weight: 600; }
.slip-wrap { grid-column: 8 / 13; }
.slip { background: var(--paper); color: var(--paper-ink); padding: 36px 32px 60px; font-variant-numeric: tabular-nums; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 96.66% 100%, 93.33% calc(100% - 14px), 90% 100%, 86.66% calc(100% - 14px), 83.33% 100%, 80% calc(100% - 14px), 76.66% 100%, 73.33% calc(100% - 14px), 70% 100%, 66.66% calc(100% - 14px), 63.33% 100%, 60% calc(100% - 14px), 56.66% 100%, 53.33% calc(100% - 14px), 50% 100%, 46.66% calc(100% - 14px), 43.33% 100%, 40% calc(100% - 14px), 36.66% 100%, 33.33% calc(100% - 14px), 30% 100%, 26.66% calc(100% - 14px), 23.33% 100%, 20% calc(100% - 14px), 16.66% 100%, 13.33% calc(100% - 14px), 10% 100%, 6.66% calc(100% - 14px), 3.33% 100%, 0 calc(100% - 14px)); }
.slip__group + .slip__group { margin-top: 26px; }
.slip__head { font-weight: 700; margin-bottom: 4px; }
.slip__row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.slip__dots { flex: 1; min-width: 16px; height: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='4'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%237a6a5d'/%3E%3C/svg%3E") 0 0 / 9px 4px repeat-x; transform: translateY(-3px); }
.slip__total { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin: 30px -32px 0; min-height: 52px; padding: 10px 32px; background: var(--paper-ink); color: var(--paper); font-weight: 600; }
.slip__total span:last-child { white-space: nowrap; }

/* ---------- PRECIO ---------- */
.precio { --focus: var(--paper); position: relative; isolation: isolate; background: var(--accent); color: var(--accent-ink); padding: var(--gap-sec) var(--pad); }
.precio::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
.precio__line { font-size: clamp(3rem, 1rem + 7.4vw, 9.5rem); line-height: .9; max-width: 14ch; }
.precio__tag { position: relative; display: inline-block; padding: 0 .12em; color: var(--paper); }
.precio__fill { position: absolute; inset: .04em 0 .02em; background: var(--paper-ink); }
.precio__num { position: relative; }
.js .precio__line .precio__fill { transform: scaleX(0); transform-origin: 0 50%; transition: transform 480ms var(--ease-in-out) 160ms; }
.js .precio__line .precio__num { opacity: 0; transition: opacity 240ms ease 480ms; }
.js .precio__line.in .precio__fill { transform: none; }
.js .precio__line.in .precio__num { opacity: 1; }
.precio__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); align-items: end; margin-top: 64px; }
.precio__foot > p { grid-column: 1 / 7; font-size: var(--step-lead); line-height: 1.45; max-width: 38ch; }
.precio__acts { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }

/* ---------- PLANES ---------- */
.planes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); padding: var(--gap-sec) var(--pad); align-items: center; }
.planes__pic { grid-column: 1 / 6; }
.planes__pic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.planes__side { grid-column: 7 / 13; }
.planes__table { margin-top: 40px; }
.pl-row { position: relative; display: grid; grid-template-columns: 7.5em 1fr auto; gap: 20px; align-items: baseline; padding: 16px; margin: 0 -16px; text-decoration: none; isolation: isolate; }
.pl-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-2); opacity: 0; transition: opacity var(--dur-ui) ease; }
.pl-row + .pl-row { margin-top: 2px; }
.pl-row--feature::before { opacity: 1; background: var(--surface); }
.pl-kind { font-weight: 600; color: var(--ink); }
.pl-what { color: var(--muted); line-height: 1.45; }
.pl-val { font-weight: 600; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; transition: transform var(--dur-ui) var(--ease-out), color var(--dur-ui) ease; }
.pl-row:active::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .pl-row:hover::before { opacity: 1; }
  .pl-row:hover .pl-val { transform: translateX(-4px); color: var(--accent-light); }
}

/* ---------- JUEGO ---------- */
.juega { background: var(--surface); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); padding: var(--gap-sec) var(--pad); align-items: center; }
.juega__text { grid-column: 1 / 6; }
.juega__text > p { margin-top: 24px; max-width: 40ch; color: var(--muted); }
.score { display: flex; gap: clamp(28px, 3vw, 48px); margin-top: 40px; }
.score div { display: flex; flex-direction: column-reverse; }
.score dt { font-size: var(--step-small); color: var(--muted); margin-top: 6px; }
.score dd { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: .9; font-variant-numeric: tabular-nums; min-width: 1.2ch; }
.score dd.bump { animation: bump 260ms var(--ease-out); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
.juega__text > .record, .record { display: inline-block; margin-top: 20px; padding: 6px 12px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--step-small); transform-origin: 0 50%; }
.record:not([hidden]) { animation: pop 320ms var(--ease-out); }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(4px); } to { opacity: 1; transform: none; } }
.juega__msg { margin-top: 24px; min-height: 3.2em; font-weight: 500; }
.juega__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.juega__acts .btn { min-width: 12em; }
.btn__label, .copy__label { display: inline-block; transition: opacity 150ms ease, filter 150ms ease; }
.btn__label.swap, .copy__label.swap { opacity: 0; filter: blur(2px); }
.juega__stage { grid-column: 7 / 13; }
.target { width: 100%; max-width: 680px; margin-left: auto; cursor: crosshair; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.aim__line { opacity: 0; transition: opacity var(--dur-ui) ease; }
.aim__halo { fill: #fff; opacity: .75; }
.aim__core { fill: var(--accent); }
.aim__tick { fill: var(--accent); opacity: 0; }
.aim.on-x .aim__line--v, .aim.on-y .aim__line--v, .aim.on-y .aim__line--h { opacity: 1; }
.aim__line.locked .aim__core { animation: lock 360ms ease-out; }
.aim__line.locked .aim__tick { opacity: 1; }
@keyframes lock { 0%, 40% { fill: #111; } 100% { fill: var(--accent); } }
.thrown { animation: throw 300ms var(--ease-throw) both; }
@keyframes throw { from { transform: translate(30px, 160px) rotate(-300deg) scale(2.2); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
.hit-wobble { transform-box: fill-box; transform-origin: 50% 50%; animation: wobble 560ms var(--ease-out) 300ms both; }
@keyframes wobble { 0% { transform: rotate(0); } 20% { transform: rotate(3deg); } 42% { transform: rotate(-2deg); } 64% { transform: rotate(1deg); } 84% { transform: rotate(-.4deg); } 100% { transform: rotate(0); } }
.target.thud { animation: thud 240ms ease-out; }
@keyframes thud { 0% { transform: translate(0, 0); } 25% { transform: translate(2px, 1px); } 55% { transform: translate(-1.5px, 0); } 100% { transform: none; } }
.pts { font-family: var(--font); font-stretch: 72%; font-weight: 800; font-size: 14px; fill: #fff; paint-order: stroke; stroke: #111; stroke-width: 3px; animation: pts 1200ms var(--ease-out) 300ms both; }
@keyframes pts { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; transform: translateY(-6px); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* ---------- LA SALA ---------- */
.sala { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); padding: var(--gap-sec) var(--pad); align-items: stretch; }
.sala__pic { grid-column: 1 / 7; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.sala__frame { position: absolute; inset: 0; }
.sala__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); filter: blur(2px); transition: opacity 280ms ease, transform 600ms var(--ease-out), filter 280ms ease; }
.sala__img.is-on { opacity: 1; transform: none; filter: none; }
.sala__side { grid-column: 8 / 13; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 8px 0; }
.tabs { position: relative; display: flex; gap: 28px; }
.tabs button { background: none; border: 0; padding: 10px 0; cursor: pointer; font-size: var(--step-body); font-weight: 600; color: var(--muted); transition: color var(--dur-ui) ease; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs__ind { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.tabs__ind.ready { transition: transform 280ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) { .tabs button:hover { color: var(--ink); } }
.sala__panels { display: grid; }
.panel { grid-area: 1 / 1; }
.panel p { margin-top: 24px; max-width: 40ch; color: var(--muted); }
.panel:not([hidden]) { animation: panel-in var(--dur-ui) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sala__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.cell { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; min-height: 68px; text-decoration: none; font-weight: 600; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-ui) ease; }
.cell::after { content: "→"; transition: transform var(--dur-ui) var(--ease-out); }
.cell:active { transform: scale(0.98); }
.cell--light { background: var(--paper); color: var(--paper-ink); }
.cell--dark { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) {
  .cell--light:hover { background: #fff; }
  .cell--dark:hover { background: #2a241f; }
  .cell:hover::after { transform: translateX(4px); }
}

/* ---------- DUDAS ---------- */
.dudas { padding: var(--gap-sec) var(--pad); background: var(--surface); }
.dudas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 6vw, 96px); margin-top: 64px; }
.q { font-size: var(--step-lead); font-weight: 700; line-height: 1.25; }
.a { margin-top: 10px; color: var(--muted); max-width: 46ch; }

/* ---------- RESERVAR ---------- */
.contacto { position: relative; isolation: isolate; padding: var(--gap-sec) var(--pad); }
.contacto .lead { margin-top: 24px; }
.contacto__mail { position: relative; display: inline-block; max-width: 100%; margin-top: clamp(48px, 7vw, 96px); font-size: clamp(2.25rem, 0.8rem + 6.6vw, 8.5rem); line-height: .95; text-transform: none; text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-ui) ease; }
.contacto__mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .045em; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .contacto__mail:hover { color: var(--accent-light); }
  .contacto__mail:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}
.contacto__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; color: var(--muted); }

/* ---------- PIE ---------- */
.pie { background: var(--surface); padding: 72px var(--pad) 24px; }
.pie__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--m); font-size: var(--step-small); color: var(--muted); }
.pie__t { color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.pie__cols a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie__cols a:hover { color: var(--ink); } }
.pie__wm { width: 100%; height: auto; margin-top: clamp(64px, 12vw, 180px); overflow: visible; }
.pie__wm text { font-size: 150px; font-weight: 900; fill: var(--ink); }
.pie__wm .pie__half text { fill: var(--accent-light); }
.pie__half { transform: translate(6px, 10px); }
.js .pie__half { transform: none; }
.js .pie__wm.cut-on .pie__half { transform: translate(6px, 10px); transition: transform 260ms var(--ease-out); }
.pie__legal { margin-top: 24px; font-size: var(--step-tiny); color: var(--muted); }

/* ---------- TABLET ---------- */
@media (max-width: 1080px) {
  .top__nav { display: none; }
  .sesion__intro { grid-column: 1 / 13; }
  .slip-wrap { grid-column: 1 / 10; margin-top: 56px; }
  .planes__pic { grid-column: 1 / 13; max-width: 640px; }
  .planes__side { grid-column: 1 / 13; margin-top: 56px; }
  .juega__text { grid-column: 1 / 7; }
  .juega__stage { grid-column: 7 / 13; }
  .sala__pic { grid-column: 1 / 13; max-width: 640px; }
  .sala__side { grid-column: 1 / 13; margin-top: 40px; }
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- MÓVIL ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .top { padding-left: var(--m); padding-right: var(--m); }
  .brand__cut { font-size: 1.1875rem; }
  .top__cta { min-height: 40px; padding: 0 16px; }
  .hero__media img { object-position: 50% 30%; }
  .hero::before { background: linear-gradient(0deg, rgba(13, 11, 10, 1) 0%, rgba(13, 11, 10, .94) 45%, rgba(13, 11, 10, .55) 62%, rgba(13, 11, 10, .05) 82%, rgba(13, 11, 10, .45) 100%); }
  .hero__media img { height: 62%; }
  .hero__body { padding: 120px var(--m) 32px; }
  .hero__lead { margin-top: 20px; }
  .hero__actions { margin-top: 28px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__facts { padding: 20px var(--m) 28px; gap: 18px 16px; }
  .sesion, .planes, .juega, .sala, .precio__foot { grid-template-columns: 1fr; }
  .sesion__intro, .slip-wrap, .planes__pic, .planes__side, .juega__text, .juega__stage, .sala__pic, .sala__side, .precio__foot > p, .precio__acts { grid-column: 1; }
  .slip-wrap { margin-top: 48px; }
  .slip { padding: 28px 20px 56px; }
  .slip__total { margin: 26px -20px 0; padding: 10px 20px; }
  .precio__acts { align-items: stretch; margin-top: 32px; }
  .precio__acts .btn { width: 100%; }
  .pl-row { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .pl-kind { grid-column: 1; grid-row: 1; }
  .pl-val { grid-column: 2; grid-row: 1; }
  .pl-what { grid-column: 1 / -1; grid-row: 2; }
  .juega__stage { margin-top: 40px; }
  .juega__acts .btn { width: 100%; }
  .tabs { gap: 20px; }
  .sala__acts { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }
  .dudas__list { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .contacto__row .btn { width: 100%; }
  .pie__cols { grid-template-columns: 1fr 1fr; }
}

/* Movimiento reducido: sin desplazamientos, pero con respuesta (opacidad y color se quedan) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.in { transform: none; transition: opacity 300ms ease; transition-delay: 0ms; }
  .js .reveal--img > *, .js .reveal--print .slip { clip-path: none; transform: none; transition: none; }
  .js .reveal--img, .js .reveal--print { opacity: 0; transition: opacity 300ms ease; }
  .js .reveal--img.in, .js .reveal--print.in { opacity: 1; }
  .btn:active, .cell:active { transform: none; }
  .top__nav a::after, .contacto__mail::after, .tabs__ind.ready, .pl-val, .cell::after { transition: none; }
  .panel:not([hidden]) { animation: fade-in var(--dur-ui) ease; }
  .sala__img { transform: none; filter: none; }
  .thrown { animation: fade-in 150ms ease both; }
  .hit-wobble, .target.thud, .score dd.bump, .pts { animation: none; }
  .record:not([hidden]) { animation: fade-in var(--dur-ui) ease; }
  .js .precio__line .precio__fill { transform: none; transition: none; }
  .js .precio__line .precio__num { opacity: 1; transition: none; }
  .js .pie__wm.cut-on .pie__half { transition: none; }
}