/* Neovision Marketing: la web como una sala de entrenamiento.
   Colores de marca (magenta, cian, azul marino, negro y lavanda) con
   tipografía condensada de pizarra de box y texto en Manrope. */

@font-face {
  font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sc-canvas:     #08070c;
  --sc-surface:    #14121b;
  --sc-ink:        #f6f4fb;
  --sc-ink-soft:   #bab5ca;
  --sc-accent:     #ff6dd6;
  --sc-accent-ink: #08070c;
  --sc-font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;

  --magenta: #c72c77;
  --magenta-deep: #ae0975;
  --pink: #ff6dd6;
  --cyan: #1ab4d2;
  --navy: #091361;
  --navy-hover: #0f1d86;
  --navy-edge: #3e5dfb;
  --lav: #f3f0fa;
  --lav-2: #e8e3f6;
  --rubber: #121118;

  --r: 14px;
}

body { background: var(--sc-canvas); }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }

.tone-dark  { --sc-ink: #f6f4fb; --sc-ink-soft: #bab5ca; --sc-hairline: rgb(255 255 255 / .1); --hl: var(--pink); color: var(--sc-ink); background: var(--sc-canvas); }
.tone-light { --sc-ink: #110f18; --sc-ink-soft: #4a4560; --sc-hairline: rgb(17 15 24 / .12); --hl: var(--magenta-deep); color: var(--sc-ink); background: var(--lav); }

::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: #000; padding: .6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw)); margin-inline: auto; }

/* ------------------------------------------------------------ tipografía */
.display {
  font-family: var(--sc-font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .9;
  margin: 0;
  text-wrap: balance;
}
.display--hero { font-size: clamp(3.6rem, 2rem + 8vw, 9.5rem); }
.display--xl   { font-size: clamp(2.7rem, 1.6rem + 4.6vw, 6rem); }
.display--lg   { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.2rem); }
.display--md   { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 800; line-height: .95; }
.hl { color: var(--hl, var(--pink)); }
.tone-dark .hl {
  background: linear-gradient(92deg, var(--pink) 10%, var(--magenta) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.tag {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.4rem;
  font-family: var(--sc-font-display); font-weight: 800;
  font-size: 1rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan);
}
.tag::before { content: ""; width: 2.2rem; height: 4px; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, transparent 6px 10px); }

.body { margin: 1.2rem 0 0; max-width: 46ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.55; }
.lede { margin: 1.6rem 0 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }

/* --------------------------------------------------------------- botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .85rem 1.6rem;
  border-radius: 10px; border: 2px solid transparent;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-base), border-color var(--sc-d-base);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--primary { background: var(--navy); color: #fff; border-color: var(--navy-edge); box-shadow: 0 6px 18px -6px rgb(62 93 251 / .6); }
.btn--primary:hover { background: var(--navy-hover); }
.btn--ghost { color: var(--sc-ink); border-color: var(--sc-hairline-strong, rgb(255 255 255 / .28)); background: transparent; }
.btn--ghost:hover { border-color: var(--cyan); }
.btn--sm { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: 1rem; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* ------------------------------------------------------------- cabecera */
.bar {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; gap: 2rem;
  padding: .85rem var(--sc-gutter);
  background: linear-gradient(to bottom, rgb(8 7 12 / .82), rgb(8 7 12 / 0));
  color: #f6f4fb;
}
.bar__brand img { width: 150px; height: auto; }
.bar__links { display: flex; gap: 1.8rem; margin-left: auto; }
.bar__links a {
  color: #d9d5e6; text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.bar__links a:hover { color: #fff; }
@media (max-width: 860px) {
  .bar { gap: 1rem; }
  .bar__links { display: none; }
  .bar .btn { margin-left: auto; }
  .bar__brand img { width: 122px; }
}

[data-sc-progress] { background: linear-gradient(90deg, var(--magenta), var(--pink)); }

/* ----------------------------------------------------------------- héroe */
.hero {
  position: relative; overflow: hidden;
  touch-action: pan-y; /* el gesto horizontal gira la sala, el vertical desplaza la página */
  min-height: 100svh;
  display: grid; align-items: center;
  padding: 7rem var(--sc-gutter) 5rem;
  background:
    radial-gradient(60% 70% at 72% 40%, rgb(199 44 119 / .22), transparent 70%),
    radial-gradient(40% 50% at 92% 85%, rgb(26 180 210 / .14), transparent 70%),
    var(--sc-canvas);
  border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  cursor: grab;
}
.hero:active { cursor: grabbing; }
.hero__canvas, .system__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 500ms var(--sc-ease-out);
}
.gym-ready .hero__canvas, .gym-ready .system__canvas { opacity: 1; }
/* Imagen fija de la sala con el mismo encuadre que el 3D: se ve desde el
   primer momento y se funde con la escena en cuanto esta arranca. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/hero-sala.webp") center / cover no-repeat;
  transition: opacity 500ms var(--sc-ease-out);
}
.gym-ready .hero::before { opacity: 0; }
@media (max-width: 860px) { .hero::before { background-image: url("../img/hero-sala-movil.webp"); } }
.hero__copy { position: relative; z-index: 2; max-width: 40rem; cursor: auto; }
@media (max-width: 860px) {
  .hero { align-items: end; padding-top: min(45svh, 390px); padding-bottom: 3rem; }
  .hero__copy { max-width: none; }
}


/* --------------------------------------------------------------- problema */
.problem, .result, .voices { padding: clamp(3.5rem, 6vw, 6rem) 0; }
.problem__grid, .result__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.result__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 960px) {
  .problem__grid, .result__grid { grid-template-columns: 1fr; }
  .result__text { order: -1; }
}
.result__text .btn { margin-top: 2rem; }

/* ------------------------------------- sala de ejemplo (12 esterillas) */
.studio { margin: 0; display: grid; gap: 1.4rem; justify-items: center; }
.studio__room {
  width: min(100%, 34rem); aspect-ratio: 1 / 0.84;
  perspective: 1100px; perspective-origin: 50% 0%;
  display: grid; place-items: center;
}
.studio__floor {
  position: relative;
  width: 66%; aspect-ratio: 1 / 1.05;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7% 9%;
  padding: 9%;
  transform: rotateX(56deg) rotateZ(-32deg);
  transform-style: preserve-3d;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 20%),
    radial-gradient(80% 70% at 50% 40%, #241f2f, #121018);
  box-shadow: 0 0 0 6px #1d1a26, 0 40px 60px -20px rgb(30 10 50 / .7);
}
.studio__floor::before {
  content: ""; position: absolute; inset: auto 0 -6px 0; height: 6px; border-radius: 0 0 18px 18px;
  background: repeating-linear-gradient(135deg, var(--magenta) 0 12px, #1d1a26 12px 20px);
}
.mat {
  position: relative; transform-style: preserve-3d;
  border-radius: 6px;
  border: 2px dashed rgb(255 255 255 / .22);
  transform: translateZ(0);
  transition: background 420ms var(--sc-ease-out), border-color 420ms, box-shadow 420ms, transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}
/* Plaza ocupada: la esterilla sube con su color y la persona crece encima. */
.mat.is-on {
  border-color: transparent;
  background: linear-gradient(160deg, var(--pink), var(--magenta));
  box-shadow: 0 2px 0 var(--magenta-deep), 0 10px 0 -2px var(--magenta-deep), 0 18px 14px -6px rgb(0 0 0 / .5);
  transform: translateZ(12px);
}
.fig {
  position: absolute; left: 50%; bottom: 50%;
  width: 42%; height: 170%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotateZ(32deg) rotateX(-56deg) translateY(30%) scale(0);
  opacity: 0;
  transition: transform 560ms cubic-bezier(.34, 1.56, .64, 1), opacity 240ms;
  color: #f6f1ff;
}
.fig svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 6px 6px rgb(0 0 0 / .45)); }
.mat.is-on .fig { transform: translateX(-50%) rotateZ(32deg) rotateX(-56deg) translateY(0) scale(1); opacity: 1; }
.studio figcaption { display: flex; align-items: center; gap: 1rem; color: var(--sc-ink-soft); }
.studio__count { flex: none; white-space: nowrap; font-family: var(--sc-font-display); font-weight: 900; font-size: 3.4rem; line-height: 1; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.studio__count b { color: var(--hl); display: inline-block; min-width: 1.1ch; text-align: right; }
.studio figcaption > span:last-child { max-width: 15rem; line-height: 1.35; font-weight: 500; }
.studio figcaption em { display: block; font-style: normal; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; opacity: .8; }
[data-studio="half"] .mat.is-on { background: linear-gradient(160deg, #59d3ea, var(--cyan)); box-shadow: 0 2px 0 #0f88a2, 0 10px 0 -2px #0f88a2, 0 18px 14px -6px rgb(0 0 0 / .5); }
[data-studio="half"] .studio__count b { color: #0f88a2; }
.studio.is-full .studio__floor { box-shadow: 0 0 0 6px #1d1a26, 0 0 60px rgb(255 109 214 / .35), 0 40px 60px -20px rgb(30 10 50 / .7); }
@media (max-width: 520px) { .studio__count { font-size: 2.6rem; } }

/* ------------------------------------------------- el sistema (la barra) */
.system { background: var(--sc-canvas); }
.system__stage {
  background:
    radial-gradient(55% 60% at 70% 45%, rgb(199 44 119 / .16), transparent 70%),
    var(--sc-canvas);
}
.system__copy { position: absolute; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; }
.system__copy .cue {
  position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(34rem, 40vw);
}
.system__copy .body { max-width: 30ch; }
.plate-no {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .8rem;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c);
}
.plate-no::before {
  content: ""; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: radial-gradient(circle, var(--sc-canvas) 0 22%, var(--c) 24%);
}
@media (max-width: 860px) {
  .system__copy .cue { top: auto; bottom: 2.2rem; translate: none; width: auto; right: var(--sc-gutter); }
  .system__copy .cue::before {
    content: ""; position: absolute; inset: -6rem calc(-1 * var(--sc-gutter)) -2.2rem; z-index: -1;
    background: linear-gradient(to top, var(--sc-canvas) 55%, transparent);
  }
}

/* Sin WebGL: los cinco discos en fila, en color. */
.plates-fallback { display: none; }
.no-webgl .plates-fallback {
  display: flex; align-items: center; gap: .5rem;
  position: absolute; right: 6%; top: 50%; translate: 0 -50%;
  list-style: none; margin: 0; padding: 0;
}
.no-webgl .plates-fallback li {
  width: 3.4rem; height: 11rem; border-radius: 12px;
  background: var(--c); box-shadow: inset 0 0 0 4px rgb(0 0 0 / .25);
  writing-mode: vertical-rl; display: grid; place-items: center;
  font-family: var(--sc-font-display); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
@media (max-width: 860px) { .no-webgl .plates-fallback { right: 50%; translate: 50% 0; top: 18%; } .no-webgl .plates-fallback li { width: 2.6rem; height: 8rem; font-size: .8rem; } }

/* ------------------------------------------------------- plan (fichas) */
.plan__stage { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.6rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: 0 0 min(30rem, 80vw); align-self: center; padding-right: 2rem; }
.card {
  flex: 0 0 clamp(17rem, 26vw, 22rem);
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  background: #f3f0fa; color: #110f18;
  border-radius: var(--r);
  position: relative;
  box-shadow: 0 2px 4px rgb(0 0 0 / .3), 0 22px 44px -18px rgb(0 0 0 / .7);
}
.card::before {
  content: ""; position: absolute; top: -9px; left: 50%; translate: -50% 0;
  width: 4.5rem; height: 18px; border-radius: 5px;
  background: linear-gradient(#cfcad9, #a9a3b8);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2);
}
.card__phase {
  margin: 0 0 1rem;
  font-family: var(--sc-font-display); font-weight: 900; font-size: 3.2rem; line-height: .85;
  text-transform: uppercase; color: var(--magenta-deep);
}
.card h3 { color: #110f18; }
.card > p:not(.card__phase) { margin: .9rem 0 1.2rem; color: #4a4560; font-size: .98rem; line-height: 1.55; }
.card dl { margin: auto 0 0; padding-top: 1rem; border-top: 2px dashed #cfc8e0; display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.card dt { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #6b6585; }
.card dd { margin: 0; font-weight: 700; text-align: right; }
.card:nth-of-type(2n) .card__phase { color: #0f88a2; }
/* En escritorio las fichas llenan la altura de la pantalla. */
@media (min-width: 861px) {
  .card { flex-basis: clamp(21rem, 30vw, 29rem); min-height: min(58vh, 36rem); padding: 2.6rem 2.4rem 2.2rem; }
  .card__phase { font-size: clamp(4rem, 5.6vw, 5.8rem); margin-bottom: 1.6rem; }
  .card .display--md { font-size: clamp(2.1rem, 2.8vw, 3rem); }
  .card > p:not(.card__phase) { font-size: clamp(1.2rem, 1.6vw, 1.6rem); line-height: 1.45; margin: 1.4rem 0 1.8rem; }
  .card dl { font-size: 1rem; }
}


/* ------------------------------------------------------------ testimonios */
.voices__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.voices__head .body { margin: 0; }
.voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.voice--lift { margin-top: -2.5rem; }
.voice h3 { margin: 1rem 0 .1rem; font-family: var(--sc-font-display); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; line-height: 1; }
.voice p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; }
.voice__play {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; background: #000;
  box-shadow: 0 2px 4px rgb(20 10 40 / .2), 0 26px 50px -22px rgb(60 10 70 / .6);
}
.voice__play img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--sc-ease-out); }
.voice__play:hover img { transform: scale(1.04); }
.voice__play iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.voice__icon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: rgb(9 19 97 / .88); border: 2px solid var(--navy-edge);
  display: grid; place-items: center;
}
.voice__icon::before { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
@media (max-width: 760px) {
  .voices__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
  .voice { scroll-snap-align: start; }
  .voice--lift { margin-top: 0; }
}

/* ------------------------------------------------------------------ equipo */
.team {
  position: relative; overflow: hidden;
  padding: var(--sc-section) 0;
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  background:
    radial-gradient(45% 55% at 0% 30%, rgb(26 180 210 / .28), transparent 70%),
    radial-gradient(45% 55% at 100% 70%, rgb(199 44 119 / .32), transparent 70%),
    var(--sc-canvas);
}
/* Fondo en movimiento: dos luces de marca que respiran y dos bandas de
   texto de pizarra de box que cruzan en sentidos opuestos. */
.team__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.team__glow { position: absolute; width: 60vmax; aspect-ratio: 1; border-radius: 50%; opacity: .6; will-change: transform; }
.team__glow--a { background: radial-gradient(circle, rgb(26 180 210 / .4), transparent 62%); left: -22vmax; top: -18vmax; animation: glow-a 18s ease-in-out infinite alternate; }
.team__glow--b { background: radial-gradient(circle, rgb(199 44 119 / .45), transparent 62%); right: -22vmax; bottom: -22vmax; animation: glow-b 22s ease-in-out infinite alternate; }
@keyframes glow-a { to { transform: translate(28vw, 30vh) scale(1.15); } }
@keyframes glow-b { to { transform: translate(-30vw, -26vh) scale(.9); } }
.team__marquee { position: absolute; left: 0; top: 14%; display: flex; width: max-content; animation: marquee 60s linear infinite; will-change: transform; }
.team__marquee p {
  margin: 0; padding-right: .3em; white-space: nowrap;
  font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; line-height: 1;
  font-size: clamp(6rem, 14vw, 13rem); letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .16);
}
@keyframes marquee { to { transform: translateX(-50%); } }
/* Figuras sueltas (discos, aros, triángulos, cruces) que flotan al azar.
   site.js reparte posición, tamaño, recorrido y ritmo de cada una. */
.team__shapes { position: absolute; inset: 0; }
.shape {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1;
  opacity: var(--o, .5); color: var(--c);
  animation: drift var(--t) ease-in-out var(--d) infinite alternate;
  will-change: transform;
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(var(--dx1), var(--dy1)) rotate(var(--r1)); }
  100% { transform: translate(var(--dx2), var(--dy2)) rotate(var(--r2)); }
}
.shape--plate { border-radius: 50%; background: radial-gradient(circle, transparent 0 17%, currentColor 18% 30%, transparent 31% 37%, currentColor 38% 100%); opacity: calc(var(--o, .5) * .55); }
.shape--ring { border-radius: 50%; border: 2px solid currentColor; }
.shape--tri { background: currentColor; clip-path: polygon(50% 6%, 96% 90%, 4% 90%); opacity: calc(var(--o, .5) * .6); }
.shape--plus { background: linear-gradient(currentColor, currentColor) center / 22% 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 22% no-repeat; }
.shape--square { border: 2px solid currentColor; border-radius: 4px; }
.team.is-paused .team__bg * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .team__glow, .team__marquee, .shape { animation: none; } }

.team__grid { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.team__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; }
.team__text h2 { grid-row: span 2; }
.team__text .body { margin: 0; }
.team__people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); order: 2; }
.person { margin: 0; }
.person img { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r); box-shadow: 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px -24px rgb(0 0 0 / .85); }
.person figcaption { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.person strong { font-family: var(--sc-font-display); font-weight: 900; font-size: 2rem; text-transform: uppercase; line-height: 1; }
.person span { color: var(--cyan); font-weight: 700; }
.person em { flex-basis: 100%; font-style: normal; color: var(--sc-ink-soft); font-size: .98rem; line-height: 1.5; max-width: 44ch; }
@media (max-width: 860px) {
  .team__text { grid-template-columns: 1fr; }
  .team__text h2 { grid-row: auto; }
  .team__people { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- cierre */
.close { position: relative; overflow: hidden; padding: var(--sc-section) 0 0; }
.close__bg { position: absolute; inset: 0; }
.close__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.close__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 7 12 / .92) 0%, rgb(8 7 12 / .72) 45%, rgb(8 7 12 / .45) 100%),
              linear-gradient(to top, var(--sc-canvas) 0, transparent 30%);
}
.close__grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.close__text .display--xl { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.8rem); }
.close__direct { margin: 1.6rem 0 0; color: var(--sc-ink-soft); }
.close__direct a { color: #fff; font-weight: 700; text-decoration-color: var(--pink); text-underline-offset: .2em; }
@media (max-width: 860px) {
  .close__grid { grid-template-columns: minmax(0, 1fr); }
  .close__bg::after { background: linear-gradient(to bottom, rgb(8 7 12 / .7), rgb(8 7 12 / .92) 50%, var(--sc-canvas)); }
}

.booking {
  position: relative;
  padding: clamp(1.3rem, 3vw, 2rem);
  background: rgb(18 16 25 / .94);
  border: 1px solid rgb(255 255 255 / .1); border-radius: var(--r);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9);
}
.booking::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: var(--r) var(--r) 0 0;
  background: repeating-linear-gradient(135deg, var(--magenta) 0 14px, transparent 14px 22px);
}
.booking__kicker { margin: 0 0 1.2rem; font-family: var(--sc-font-display); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .95rem; color: var(--cyan); }
.bk-pick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem 2rem; }
.bk-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.bk-cal__month { margin: 0; font-family: var(--sc-font-display); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; }
.bk-arrow {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .18);
  background: transparent; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.bk-arrow:hover:not(:disabled) { border-color: var(--cyan); }
.bk-arrow:disabled { opacity: .3; cursor: default; }
.bk-cal__dow, .bk-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.bk-cal__dow { font-family: var(--sc-font-display); font-weight: 800; color: #8d88a0; font-size: .9rem; margin-bottom: .3rem; }
.bk-cal__grid { min-height: 15rem; align-content: start; }
.bk-day {
  aspect-ratio: 1; border-radius: 10px; border: 0; background: transparent;
  font-weight: 700; font-variant-numeric: tabular-nums; color: #5d586f; font-size: .95rem;
}
.bk-day.is-free { background: rgb(255 109 214 / .12); color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(255 109 214 / .35); }
.bk-day.is-free:hover { background: rgb(255 109 214 / .25); }
.bk-day.is-today { text-decoration: underline; text-underline-offset: .25em; }
.bk-day.is-selected { background: linear-gradient(160deg, var(--pink), var(--magenta)); box-shadow: 0 3px 0 var(--magenta-deep); }
.bk-times__label { margin: .4rem 0 1rem; font-weight: 700; min-height: 1.5em; }
.bk-times__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; }
.bk-time {
  min-height: 2.8rem; border-radius: 10px; cursor: pointer;
  border: 1px solid rgb(26 180 210 / .5); background: rgb(26 180 210 / .08); color: #fff;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  transition: background var(--sc-d-fast), transform var(--sc-d-fast) var(--sc-ease-out);
}
.bk-time:hover { background: var(--cyan); color: #08070c; }
.bk-time:active { transform: scale(.97); }
.bk-status { grid-column: 1 / -1; margin: 0; color: var(--sc-ink-soft); }
.bk-status[hidden] { display: none; }
.bk-form { display: grid; gap: 1rem; }
.bk-form label { display: grid; gap: .4rem; }
.bk-form label span { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: #d9d5e6; }
.bk-form input, .bk-form select {
  width: 100%; min-width: 0; min-height: 3rem; padding: .7rem .9rem;
  background: #0d0c12; border: 1px solid rgb(255 255 255 / .16); border-radius: 10px; color: #fff;
}
.bk-form input:focus, .bk-form select:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px rgb(26 180 210 / .3); }
.bk-back { justify-self: start; padding: 0; border: 0; background: none; color: var(--cyan); font-weight: 700; cursor: pointer; }
.bk-summary { margin: 0; font-family: var(--sc-font-display); font-weight: 900; font-size: 1.7rem; text-transform: uppercase; line-height: 1.05; }
.bk-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bk-error { margin: 0; color: #ff8fc6; font-weight: 700; }
.bk-done { text-align: center; padding: 2rem 0; outline: none; }
.bk-done__mark {
  width: 4.4rem; height: 4.4rem; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--pink), var(--magenta)); font-size: 2rem; font-weight: 700;
}
.bk-done p { color: var(--sc-ink-soft); max-width: 34ch; margin: .8rem auto 0; }
.bk-step[hidden] { display: none; }
@media (max-width: 1100px) { .bk-pick { grid-template-columns: 1fr; } .bk-cal__grid { min-height: 0; } }

.foot {
  position: relative; margin-top: var(--sc-section);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  padding: 2rem 0 2.4rem; border-top: 1px solid rgb(255 255 255 / .1);
}
.foot img { width: 130px; height: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0 0 0 auto; padding: 0; }
.foot__links a { color: #d9d5e6; text-decoration: none; font-size: .92rem; }
.foot__links a:hover { color: #fff; }
.foot__small { width: 100%; margin: 0; color: #8d88a0; font-size: .82rem; }

/* ---------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .voice__play img, .mat, .fig { transition: none; }
  .hero__canvas, .system__canvas { transition: none; }
}
.hero.is-holding, .hero.is-holding:active { cursor: grabbing; }