/* Xhris The Barber · estilos
   Tema «Backstage VIP» (oscuro, por defecto) y «Daylight Studio» (claro, sigue al sistema o al botón).
   Formas: lo pulsable es píldora, los paneles 18 px, los campos 12 px. */

/* ---------- Fuentes alojadas ---------- */
@font-face { font-family: 'Syne'; font-weight: 800; font-display: swap; src: url(recursos/fuentes/syne-800.woff2) format('woff2'); }
/* Cinzel (licencia OFL): la letra del logotipo de Los Barberos de las Estrellas, solo para su nombre */
@font-face { font-family: 'Cinzel'; font-weight: 700; font-display: swap; src: url(recursos/fuentes/cinzel-700.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 300 700; font-display: swap; src: url(recursos/fuentes/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-weight: 300 700; font-display: swap; src: url(recursos/fuentes/outfit-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: 'Archivo'; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url(recursos/fuentes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url(recursos/fuentes/archivo-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; }

/* Fuentes de reserva ajustadas (web.dev, «size-adjust»): mientras llegan Syne, Outfit y Cinzel se usa Arial / Times
   escaladas para ocupar lo mismo, así el texto no salta al cambiar de fuente. Métricas calculadas con fontTools sobre el
   texto real de la web (titulares, texto corrido y rótulo) y el mismo peso. */
@font-face { font-family: 'Syne Reserva'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold');
  size-adjust: 162.53%; ascent-override: 56.91%; descent-override: 16.92%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Reserva'; font-weight: 300 500; src: local('Arial'), local('ArialMT'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 98.71%; ascent-override: 101.30%; descent-override: 26.34%; line-gap-override: 0%; }
@font-face { font-family: 'Outfit Reserva'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Helvetica Bold');
  size-adjust: 94.32%; ascent-override: 106.03%; descent-override: 27.57%; line-gap-override: 0%; }
@font-face { font-family: 'Cinzel Reserva'; font-weight: 700; src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT'), local('Times Bold');
  size-adjust: 100.63%; ascent-override: 96.99%; descent-override: 36.97%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --bg-primario: oklch(13.03% 0.0073 285.34) /* #07070A */;
  --bg-secundario: oklch(17.89% 0.0104 276.38) /* #101116 */;
  --acento-oro: oklch(76.65% 0.1387 91.06) /* #D4AF37 */;
  --acento-champan: oklch(91.93% 0.0760 96.15) /* #F3E5AB */;
  --acento-cromo: oklch(92.88% 0.0126 255.51) /* #E2E8F0 */;
  --texto-principal: oklch(98.42% 0.0034 247.86) /* #F8FAFC */;
  --texto-secundario: oklch(71.07% 0.0351 256.79) /* #94A3B8 */;

  --bg: var(--bg-primario);
  --bg-2: var(--bg-secundario);
  --bg-3: oklch(21.55% 0.0138 278.77) /* #181920 */;
  --texto: var(--texto-principal);
  --suave: var(--texto-secundario);
  --tenue: oklch(61.25% 0.0307 265.31) /* #7B8497: 5:1 sobre #101116 (texto pequeño) */;
  --oro: var(--acento-oro);
  --oro-texto: oklch(79.10% 0.1338 92.51) /* #D9B848 */;
  --linea: color-mix(in oklch, var(--acento-champan) 12%, transparent);
  --linea-2: color-mix(in oklch, var(--acento-champan) 24%, transparent);
  --cromo-borde: rgb(226 232 240 / .42);
  --cabecera-fondo: rgb(7 7 10 / .78);
  --campo-rgb: 212 175 55;
  --palabra: color-mix(in oklch, var(--acento-oro) 24%, transparent);
  --foco-luz: color-mix(in oklch, var(--acento-oro) 16%, transparent);
  --foco: var(--acento-oro);              /* anillo de foco: en claro se oscurece para llegar a 3:1 */
  --estrella-cinta: var(--acento-champan);
  --abierto: #34D399;
  --cerrado: #F59E0B;
  /* Sombras (Josh Comeau): una sola luz arriba a la izquierda (desplazamiento vertical = 2 × horizontal), capas que se
     duplican y el tono del fondo en vez de negro puro. 1 = botones y paneles, 2 = flotantes y hover, 3 = elementos destacados. */
  --sombra-color: 6% 0.008 285;          /* componentes OKLCH: el negro azulado del fondo */
  --sombra-a: .34;
  --sombra-1: .5px 1px 1px oklch(var(--sombra-color) / var(--sombra-a)), 1px 2px 2px oklch(var(--sombra-color) / var(--sombra-a)), 2px 4px 4px oklch(var(--sombra-color) / var(--sombra-a));
  --sombra-2: .5px 1px 1px oklch(var(--sombra-color) / calc(var(--sombra-a) * .8)), 1px 2px 2px oklch(var(--sombra-color) / calc(var(--sombra-a) * .8)), 2px 4px 4px oklch(var(--sombra-color) / calc(var(--sombra-a) * .8)),
    4px 8px 8px oklch(var(--sombra-color) / calc(var(--sombra-a) * .8)), 8px 16px 16px oklch(var(--sombra-color) / calc(var(--sombra-a) * .8));
  --sombra-3: 1px 2px 2px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7)), 2px 4px 4px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7)), 4px 8px 8px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7)),
    8px 16px 16px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7)), 16px 32px 32px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7)), 24px 48px 64px oklch(var(--sombra-color) / calc(var(--sombra-a) * .7));
  --sombra: var(--sombra-3);
  --oro-degradado: linear-gradient(180deg, #EDD27A 0%, #D4AF37 52%, #B38E1E 100%);

  --display: 'Syne', 'Syne Reserva', 'Archivo', system-ui, sans-serif;
  --cuerpo: 'Outfit', 'Outfit Reserva', 'Archivo', system-ui, sans-serif;
  --marca: 'Cinzel', 'Cinzel Reserva', 'Times New Roman', serif;
  --radio: 18px;
  --radio-campo: 12px;
  --ancho: 1320px;
  --margen: clamp(16px, 5vw, 64px);
  --cab-h: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
@media (max-width: 820px) { :root { --cab-h: 64px; } }

/* Daylight Studio: gris frío luminoso (nada de crema), dorado oscurecido para que se lea */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="oscuro"]) {
    --bg: oklch(96.12% 0.0041 271.37) /* #F1F2F5 */; --bg-2: oklch(100% 0 0) /* #FFFFFF */; --bg-3: oklch(92.79% 0.0071 268.54) /* #E5E7EC */;
    --texto: oklch(15.51% 0.0087 274.28) /* #0B0C10 */; --suave: oklch(44.42% 0.0323 262.16) /* #4A5466 */; --tenue: oklch(49.20% 0.0325 265.19) /* #586174 */;
    --oro-texto: oklch(52.72% 0.1041 86.74) /* #85660C */;
    --linea: rgb(11 12 16 / .1); --linea-2: rgb(11 12 16 / .2);
    --cromo-borde: rgb(11 12 16 / .32);
    --cabecera-fondo: rgb(241 242 245 / .82);
    --campo-rgb: 133 102 12; --palabra: rgb(133 102 12 / .2); --foco-luz: color-mix(in oklch, var(--acento-oro) 22%, transparent);
    --foco: oklch(52.72% 0.1041 86.74) /* #85660C */; --estrella-cinta: var(--oro-texto);
    --abierto: #059669; --cerrado: #A04A08;
    --sombra-color: 46% 0.03 268; --sombra-a: .1;      /* gris azulado del fondo claro, muy suave */
    color-scheme: light;
  }
}
:root[data-theme="claro"] {
  --bg: oklch(96.12% 0.0041 271.37) /* #F1F2F5 */; --bg-2: oklch(100% 0 0) /* #FFFFFF */; --bg-3: oklch(92.79% 0.0071 268.54) /* #E5E7EC */;
  --texto: oklch(15.51% 0.0087 274.28) /* #0B0C10 */; --suave: oklch(44.42% 0.0323 262.16) /* #4A5466 */; --tenue: oklch(49.20% 0.0325 265.19) /* #586174 */;
  --oro-texto: oklch(52.72% 0.1041 86.74) /* #85660C */;
  --linea: rgb(11 12 16 / .1); --linea-2: rgb(11 12 16 / .2);
  --cromo-borde: rgb(11 12 16 / .32);
  --cabecera-fondo: rgb(241 242 245 / .82);
  --campo-rgb: 133 102 12; --palabra: rgb(133 102 12 / .2); --foco-luz: color-mix(in oklch, var(--acento-oro) 22%, transparent);
  --foco: oklch(52.72% 0.1041 86.74) /* #85660C */; --estrella-cinta: var(--oro-texto);
  --abierto: #059669; --cerrado: #A04A08;
  --sombra-color: 46% 0.03 268; --sombra-a: .1;
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--texto); scroll-padding-top: calc(var(--cab-h) + 12px); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 400 16px/1.6 var(--cuerpo); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button, a, [role="button"], label.opcion { touch-action: manipulation; }
button, .boton, .filtro, .opcion, .capitulos a { user-select: none; -webkit-user-select: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
input, select, textarea { font: inherit; font-size: 16px; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in oklch, var(--acento-oro) 35%, transparent); }
.i { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
[hidden] { display: none !important; }
.saltar { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--oro); color: #0B0B0F; padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.saltar:focus { top: 12px; }
.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--cuerpo); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: scale .16s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
/* 'scale' y no transform: GSAP escribe transform en línea en los botones magnéticos y lo anularía. Además GSAP 3.12
   fija 'scale: none' en línea en todo lo que mueve: de ahí el !important (aquí, en .icono-b, .filtro, .pases__flecha y el cursor) */
.boton:active { scale: .97 !important; }
.boton--oro { background: var(--oro-degradado); color: #0B0B0F; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), var(--sombra-1); }
.boton--cromo { color: var(--texto); border-color: var(--cromo-borde); background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .01)); }
.boton--cromo .i { color: var(--oro-texto); }
.boton--borde { color: var(--texto); border-color: var(--linea-2); }
.boton--peq { min-height: 42px; padding: 0 18px; font-size: 14px; }
@media (pointer: coarse) { .boton--peq { min-height: 44px; } }
/* El botón grande puede partirse en dos líneas si no cabe en una a 320 px */
.boton--grande { min-height: 58px; font-size: 16px; width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }
@media (hover: hover) and (pointer: fine) {
  .boton--oro:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), var(--sombra-2); filter: brightness(1.06); }
  .boton--cromo:hover, .boton--borde:hover { border-color: var(--acento-champan); }
}
.enlace { display: inline-flex; align-items: center; gap: .45em; color: var(--oro-texto); font-weight: 600; text-decoration: none; }
.enlace .i { transition: transform .2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .enlace:hover .i { transform: translate(2px, -2px); } }

/* ---------- Cabecera ---------- */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: linear-gradient(var(--cabecera-fondo), transparent); transition: background-color .3s; }
.cabecera.con-borde { background: var(--cabecera-fondo); box-shadow: 0 1px 0 var(--linea); }
/* Sobre la barbería 3D (siempre de noche) la cabecera usa los colores del tema oscuro */
.con-historia .cabecera:not(.fuera-historia) { --texto: oklch(98.42% 0.0034 247.86) /* #F8FAFC */; --suave: #C3CBD8; --tenue: #8A93A4; --foco: var(--acento-oro); --linea: color-mix(in oklch, var(--acento-champan) 14%, transparent); --linea-2: color-mix(in oklch, var(--acento-champan) 26%, transparent); --bg-3: oklch(21.55% 0.0138 278.77) /* #181920 */; --cabecera-fondo: rgb(7 7 10 / .8); --abierto: #34D399; color-scheme: dark; }
.con-historia .cabecera:not(.fuera-historia) .nav { --bg: oklch(13.03% 0.0073 285.34) /* #07070A */; }
html:not(.js) .idioma, html:not(.js) #tema { display: none; }   /* sin JavaScript no hacen nada */
/* El desenfoque va en una capa por debajo (::before) y no en la propia cabecera: backdrop-filter convierte su elemento
   en el bloque contenedor de los hijos fijos, y el .nav del menú del móvil quedaba encerrado en la franja de la cabecera
   en cuanto se bajaba por la página (también durante el fundido al cerrarlo) */
html:not(.con-historia) .cabecera.con-borde::before, .cabecera.con-borde.fuera-historia::before { content: ''; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); pointer-events: none; }
.cabecera__in { height: var(--cab-h); max-width: 1480px; margin-inline: auto; padding-inline: var(--margen); display: flex; align-items: center; gap: 20px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); flex: none; }
.marca__x { width: 34px; height: 37px; color: var(--oro); }
.marca__texto { display: grid; line-height: 1; }
.marca__texto b { font: 800 19px/1 var(--display); letter-spacing: .06em; }
.marca__texto small { font: 500 9.5px/1 var(--cuerpo); letter-spacing: .42em; color: var(--suave); margin-top: 4px; }
.marca__verificado { width: 17px; height: 17px; color: #1D9BF0; fill: currentColor; align-self: flex-start; margin-top: 2px; }
.nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav > a { padding: 8px 12px; border-radius: 999px; color: var(--suave); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .nav > a:hover { color: var(--texto); } }
.nav__extra { display: none; }
.herramientas { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.nav + .herramientas { margin-left: 0; }
.estado-tienda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--suave); white-space: nowrap; padding: 7px 12px; border: 1px solid var(--linea); border-radius: 999px; }
[data-estado] i { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); flex: none; }
[data-estado].abierto i { background: var(--abierto); box-shadow: 0 0 0 3px rgb(52 211 153 / .18); }
[data-estado].cerrado i { background: var(--cerrado); }
.idioma { display: flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; }
.idioma__b { min-width: 34px; height: 30px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.idioma__b[aria-pressed="true"] { background: var(--bg-3); color: var(--texto); }
.icono-b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto); }
.icono-b .i { width: 19px; height: 19px; }
.icono-b:active { scale: .94 !important; }
/* Pantallas táctiles: 44 px para el pulgar (ES/EN: el grupo mide 44 de alto). En menos de 360 px vuelven a 40 (ver abajo) */
@media (pointer: coarse) { .icono-b { width: 44px; height: 44px; } .idioma__b { height: 36px; } }
#tema .i-luna { display: none; }
[data-tema-efectivo="claro"] #tema .i-sol { display: none; }
[data-tema-efectivo="claro"] #tema .i-luna { display: block; }
#menu .i-cerrar { display: none; }
.menu-abierto #menu .i-lista { display: none; }
.menu-abierto #menu .i-cerrar { display: block; }
.solo-movil { display: none; }
.progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; opacity: 0; }
.con-historia .progreso { opacity: 1; }
.progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro), var(--acento-champan)); transform-origin: 0 50%; transform: scaleX(0); }

@media (max-width: 1240px) { .estado-tienda span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } }
/* Justo por encima del menú del móvil todo va al límite: enlaces y huecos más apretados para que «Pedir cita» no se corte */
@media (min-width: 1181px) and (max-width: 1279px) { .cabecera__in { gap: 14px; } .nav { gap: 0; } .nav > a { padding-inline: 8px; } .herramientas { gap: 8px; } }
@media (max-width: 1180px) {
  .solo-movil { display: grid; }
  .solo-escritorio { display: none; }
  /* El hueco de la cabecera es un borde del color del fondo: si el menú no cabe (móvil en horizontal) se desplaza por
     dentro y los enlaces no pasan por debajo del logotipo */
  .nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: flex-start; justify-content: center; justify-content: safe center; gap: 2px;
    border-top: calc(var(--cab-h) + env(safe-area-inset-top, 0px)) solid var(--bg); overflow-y: auto; overscroll-behavior: contain;
    padding: 24px var(--margen) calc(32px + env(safe-area-inset-bottom, 0px)); margin: 0;
    background: var(--bg); visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
  .menu-abierto .nav { visibility: visible; opacity: 1; transition: opacity .25s; }
  .nav > a { font: 800 min(clamp(30px, 8vw, 46px), 7.5vh)/1.15 var(--display); color: var(--texto); padding: 6px 0; letter-spacing: -.02em; }
  .nav__extra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .menu-abierto { overflow: hidden; }
  /* El menú es una capa fija: los botones vuelven a la derecha */
  .nav + .herramientas { margin-left: auto; }
  /* Sin JavaScript el botón de menú no hace nada: se oculta y los enlaces quedan en una fila desplazable bajo la cabecera */
  html:not(.js) { scroll-padding-top: calc(var(--cab-h) + 60px); }
  html:not(.js) .cabecera { background: var(--cabecera-fondo); }
  html:not(.js) #menu, html:not(.js) .nav__extra { display: none; }
  html:not(.js) .nav { position: absolute; inset: 100% 0 auto; z-index: auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px;
    border-top: 0; padding: 4px calc(var(--margen) - 12px); overflow: auto hidden; scrollbar-width: none;
    background: var(--cabecera-fondo); box-shadow: 0 1px 0 var(--linea); visibility: visible; opacity: 1; }
  html:not(.js) .nav::-webkit-scrollbar { display: none; }
  html:not(.js) .nav > a { flex: none; font: 500 14.5px/1.4 var(--cuerpo); color: var(--suave); padding: 10px 12px; letter-spacing: normal; }
}
@media (max-width: 900px) { .estado-tienda { display: none; } }
@media (max-width: 420px) { .cabecera__in { gap: 10px; } .marca { gap: 8px; } .marca__texto small { letter-spacing: .3em; } .herramientas { gap: 6px; } .idioma__b { min-width: 30px; } }
/* Móviles de 360 a 389 px: sin el sello caben los botones de 44 px (antes el del menú se salía 16 px por la derecha) */
@media (max-width: 389px) { .marca__verificado { display: none; } }
/* Móviles de 320 px: logotipo algo menor y botones de 40 px, o el del menú se cortaba por la derecha */
@media (max-width: 359px) { .cabecera__in { gap: 8px; } .marca__x { width: 28px; height: 30px; } .marca__texto b { font-size: 16px; } .herramientas { gap: 4px; }
  .icono-b { width: 40px; height: 40px; } .idioma__b { height: 32px; } }

/* =========================================================
   Historia con scroll
   ========================================================= */
.marco-historia { position: relative; }
.escenario { position: relative; }
.escena3d, .velo, .fondo-escena, .capitulos, .modo-lectura, .final__fondo { display: none; }

/* Vista sin animación (sin JS, reducir movimiento o ?estatico=1) */
.historia:not(.animada) .escenario { padding-top: calc(var(--cab-h) + env(safe-area-inset-top, 0px)); }
.historia:not(.animada) .portada { max-width: none; padding: clamp(72px, 12vw, 150px) max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen))) 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; color: #F8FAFC;
  --texto: oklch(98.42% 0.0034 247.86) /* #F8FAFC */; --suave: #C3CBD8; --oro-texto: #E2C35C; --cromo-borde: rgb(226 232 240 / .5); --foco: var(--acento-oro);
  background: linear-gradient(90deg, rgb(7 7 10 / .94) 0%, rgb(7 7 10 / .7) 60%, rgb(7 7 10 / .35)), url(recursos/img/barberia-portada.webp?v=20261019) 70% 50% / cover, #07070A; }
.historia:not(.animada) .textos { max-width: var(--ancho); margin-inline: auto; padding: 24px var(--margen) 72px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.historia:not(.animada) .texto { background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.historia:not(.animada) .final { max-width: var(--ancho); margin: 0 auto 64px; padding-inline: var(--margen); }
.historia:not(.animada) .final__in { border: 1px solid var(--linea-2); border-radius: var(--radio); padding: clamp(32px, 6vw, 64px); text-align: center; display: grid; justify-items: center; gap: 18px;
  background: radial-gradient(70% 90% at 50% 0%, color-mix(in oklch, var(--acento-oro) 16%, transparent), transparent 70%), var(--bg-2); }

.portada__etiqueta { font: 600 12px/1.4 var(--cuerpo); letter-spacing: .2em; text-transform: uppercase; color: var(--oro-texto); }
.portada__titulo { font: 800 clamp(38px, 4.4vw, 70px)/.98 var(--display); letter-spacing: -.035em; text-transform: uppercase; margin-top: 18px; }
.mascara { display: block; overflow: hidden; padding-bottom: .04em; }
.mascara > span { display: block; }
.portada__titulo .mascara:last-child > span { color: var(--oro-texto); }
.portada__sub { color: var(--suave); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; max-width: 30.2em /* 46ch */; margin-top: 24px; }
.portada__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.texto__tipo { display: flex; align-items: center; gap: 10px; color: var(--oro-texto); font: 600 12px/1.3 var(--cuerpo); letter-spacing: .18em; text-transform: uppercase; }
.texto__tipo .i { width: 18px; height: 18px; }
.texto .texto__titulo { font: 800 clamp(28px, 3.6vw, 58px)/1.03 var(--display); letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word; }
/* En la rejilla sin animación las tarjetas miden 290-330 px: el titular de 58 px se salía de ellas en pantallas grandes */
.historia:not(.animada) .texto .texto__titulo { font-size: clamp(28px, 2.4vw, 38px); }
.texto > p:not(.texto__tipo):not(.sello-sg):not(.texto__titulo) { color: var(--suave); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; max-width: 28.9em /* 44ch */; }
.sello-sg { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea-2); background: color-mix(in oklch, var(--acento-oro) 8%, transparent); font-size: 14px; font-weight: 600; justify-self: start; }
.sello-sg .i { color: var(--oro); }

/* Escenario animado: la barbería 3D ocupa toda la pantalla y los textos van encima, con un velo para leerse */
.historia.animada .escenario { height: 100svh; overflow: hidden; isolation: isolate; background: #07070A; }
.historia.animada .escena3d { display: block; position: absolute; inset: 0; z-index: 0; background: #07070A; }
.escena3d__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.escena3d.modelo-listo .escena3d__poster { visibility: hidden; }
.escena3d__lienzo { position: absolute; inset: 0; display: block; }
.historia.animada .velo { display: block; position: absolute; z-index: 2; pointer-events: none; }
.velo--izq { inset: 0 45% 0 0; background: linear-gradient(90deg, rgb(7 7 10 / .9) 0%, rgb(7 7 10 / .62) 55%, transparent); }
.velo--der { inset: 0 0 0 45%; background: linear-gradient(270deg, rgb(7 7 10 / .9) 0%, rgb(7 7 10 / .62) 55%, transparent); opacity: 0; }
.velo--sup { inset: 0 0 auto 0; height: 24%; background: linear-gradient(rgb(7 7 10 / .75), transparent); }
.historia.animada .fondo-escena { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.palabras { position: absolute; inset: 0; display: grid; place-items: center; }
.palabras span {
  grid-area: 1 / 1; white-space: nowrap; font: 800 120px/1 var(--display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.2px color-mix(in oklch, var(--acento-champan) 20%, transparent); visibility: hidden; translate: 0 8%;
}
/* Sobre la escena (siempre de noche) los textos usan los colores del tema oscuro */
.historia.animada .escenario { --texto: oklch(98.42% 0.0034 247.86) /* #F8FAFC */; --suave: #C3CBD8; --tenue: #8A93A4; --oro-texto: #E2C35C;
  --bg-2: oklch(17.89% 0.0104 276.38) /* #101116 */; --bg-3: oklch(21.55% 0.0138 278.77) /* #181920 */; --foco: var(--acento-oro); --estrella-cinta: var(--acento-champan); --linea: color-mix(in oklch, var(--acento-champan) 14%, transparent); --linea-2: color-mix(in oklch, var(--acento-champan) 26%, transparent); --cromo-borde: rgb(226 232 240 / .5); color: var(--texto); }
.historia.animada .portada, .historia.animada .textos {
  position: absolute; left: 0; right: 0; top: calc(var(--cab-h) + 30px); bottom: 104px; z-index: 6;
  max-width: 1480px; margin-inline: auto; padding-inline: var(--margen);
  display: grid; align-content: center; pointer-events: none;
}
.historia.animada .portada > *, .historia.animada .texto { pointer-events: auto; }
.historia.animada .portada__titulo, .historia.animada .portada__sub, .historia.animada .portada__ctas { max-width: min(640px, 50vw); }
.historia.animada .portada__titulo, .historia.animada .texto .texto__titulo { text-shadow: 0 2px 30px rgb(0 0 0 / .45); }
.historia.animada .texto { grid-area: 1 / 1; width: min(500px, 40%); display: grid; gap: 18px; align-content: start; visibility: hidden; }
.historia.animada .texto[data-lado="der"] { justify-self: end; }
.historia.animada .texto .boton { justify-self: start; }
.historia.animada .capitulos { display: flex; position: absolute; left: var(--margen); right: var(--margen); bottom: 22px; z-index: 9; gap: 8px; border-top: 1px solid var(--linea); padding-top: 12px; max-width: calc(1480px - 2 * var(--margen)); margin-inline: auto; }
.capitulos a { flex: 1; display: flex; align-items: baseline; gap: 8px; color: var(--tenue); text-decoration: none; font-size: 12.5px; font-weight: 500; padding: 6px 0; min-height: 36px; transition: color .25s; }
@media (pointer: coarse) { .capitulos a { min-height: 44px; } }
.capitulos a span { font: 800 11px/1 var(--display); letter-spacing: .06em; }
.capitulos a[aria-current] { color: var(--texto); }
.capitulos a[aria-current] span { color: var(--oro-texto); }
.historia.animada .modo-lectura { display: block; position: absolute; right: var(--margen); bottom: 70px; z-index: 9; font-size: 12px; color: var(--tenue); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .capitulos a:hover { color: var(--texto); } }

/* Cinta: solo bajo la portada; dentro de la historia se apoya en el borde inferior */
.cinta { overflow: hidden; border-block: 1px solid var(--linea-2); background: var(--bg-2); }
.cinta__pista { display: flex; width: max-content; }
.cinta__pista span { font: 800 13px/1 var(--display); letter-spacing: .18em; color: var(--oro-texto); padding: 15px 0; white-space: nowrap; }
.cinta__pista span::after { content: '★'; display: inline-block; margin-inline: 22px; color: var(--estrella-cinta); font-family: var(--cuerpo); }
.historia.animada .cinta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; }

/* Final de la historia */
.final__logo { width: 64px; height: 70px; color: var(--oro); }
.final h2 { font: 800 clamp(40px, 6.4vw, 100px)/.98 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.final p { color: var(--suave); font-size: clamp(16px, 1.3vw, 19px); max-width: 28.9em /* 44ch */; line-height: 1.6; }
.final__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.historia.animada .final { position: absolute; inset: 0; z-index: 10; visibility: hidden; display: grid; place-items: center; padding: calc(var(--cab-h) + 20px) var(--margen) 90px; }
.historia.animada .final__fondo { display: block; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, color-mix(in oklch, var(--acento-oro) 20%, transparent), transparent 70%), rgb(7 7 10 / .9); }
.historia.animada .final__in { position: relative; display: grid; justify-items: center; text-align: center; gap: 20px; }

/* Rendimiento: solo se promociona lo que se mueve */
.historia.animada .portada > *, .historia.animada .texto > *, .historia.animada .palabras span, .historia.animada .final__fondo,
.historia.animada .final__in > *, .historia.animada .cinta, .historia.animada .velo { will-change: transform, opacity; }

/* Historia en pantallas medianas */
@media (max-width: 1100px) and (min-width: 821px) {
  .historia.animada .texto { width: min(440px, 44%); }
  .historia.animada .portada__titulo { font-size: 5.6vw; }
}

/* Historia en el móvil: texto arriba con velo; la barbería se encuadra en el hueco de abajo (xhrisEncajar) */
@media (max-width: 820px) {
  .historia.animada .velo--izq, .historia.animada .velo--der { display: none; }
  .velo--sup { height: calc(var(--hueco-top, 48%) + 60px); background: linear-gradient(rgb(7 7 10 / .9) 0%, rgb(7 7 10 / .78) 65%, transparent); }
  .escena3d__poster { object-position: 50% 70%; }
  .historia.animada .portada, .historia.animada .textos { top: calc(var(--cab-h) + 14px + env(safe-area-inset-top, 0px)); bottom: auto; align-content: start; padding-inline: 20px; }
  .historia.animada .portada__titulo, .historia.animada .portada__sub, .historia.animada .portada__ctas { max-width: none; }
  .portada__etiqueta { font-size: 10px; letter-spacing: .16em; }
  .portada__titulo { margin-top: 12px; }
  .historia.animada .portada__titulo { font-size: clamp(31px, 9.4vw, 52px); }
  .historia.animada .portada__sub { font-size: 14px; line-height: 1.55; margin-top: 14px; }
  .historia.animada .portada__ctas { margin-top: 18px; gap: 8px; }
  .historia.animada .portada__ctas .boton { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
  .historia.animada .texto { width: 100%; gap: 10px; }
  .historia.animada .texto .texto__titulo { font-size: clamp(26px, 7.6vw, 40px); }
  .historia.animada .texto > p:not(.texto__tipo):not(.sello-sg):not(.texto__titulo) { font-size: 14.5px; line-height: 1.55; }
  .texto__tipo { font-size: 11px; }
  .historia.animada .capitulos { left: 16px; right: 16px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-top: 6px; gap: 4px; }
  .capitulos a { justify-content: center; font-size: 11px; }
  .capitulos a b { display: none; }
  .capitulos a[aria-current] { flex: 2.6; justify-content: flex-start; }
  .capitulos a[aria-current] b { display: inline; }
  .historia.animada .modo-lectura { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .historia.animada .modo-lectura:focus { width: auto; height: auto; clip-path: none; bottom: 64px; }
  .cinta__pista span { font-size: 11px; padding: 12px 0; }
  .historia.animada .final { padding-bottom: 70px; }
  .escenario.texto-compacto .portada__sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .escenario.texto-compacto .texto .texto__titulo { font-size: clamp(24px, 6.8vw, 32px); }
  .escenario.texto-compacto .texto > p:not(.texto__tipo):not(.sello-sg):not(.texto__titulo) { font-size: 13.5px; }
  .escenario.texto-compacto .texto .enlace, .escenario.texto-compacto .sello-sg { font-size: 13px; }
  /* En pantallas bajas no queda hueco libre para las palabras gigantes: cruzaban los párrafos */
  .escenario.texto-compacto .palabras { display: none; }
  /* Vista sin animación: a 38 px «ESTRELLAS.» no cabía en 320-375 px y ensanchaba la portada */
  .historia:not(.animada) .portada__titulo { font-size: clamp(28px, 9vw, 38px); }
}
@media (max-width: 380px) {
  .historia.animada .portada__titulo { font-size: 29px; }
  .historia.animada .portada__sub { font-size: 13px; }
}

/* =========================================================
   Secciones
   ========================================================= */
.seccion { position: relative; padding-block: clamp(84px, 11vw, 150px); }
.titular { font: 800 clamp(34px, 5vw, 76px)/1.02 var(--display); letter-spacing: -.04em; text-wrap: balance; max-width: 16.0em /* 15ch */; }
.entradilla { color: var(--suave); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; max-width: 35.4em /* 54ch */; margin-top: 20px; }
.revela { clip-path: inset(0 0 100% 0); translate: 0 .35em; transition: clip-path 1s var(--ease), translate 1s var(--ease); }
.revela.revelado { clip-path: inset(0 0 -10% 0); translate: 0 0; }
/* Donde el navegador lo sabe hacer (Chrome/Edge 115+, Safari 26), el titular se revela con una animación ligada al scroll
   en CSS puro: va fuera del hilo principal y no necesita JavaScript (experiencia.js no le pone .revela). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .seccion .titular { animation: titular-entra linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  }
}
@keyframes titular-entra { from { clip-path: inset(0 0 100% 0); translate: 0 .35em; } to { clip-path: inset(0 0 -10% 0); translate: 0 0; } }

/* ---------- Hall of Fame: pases VIP en 3D ---------- */
.estrellas { overflow: hidden; background: radial-gradient(50% 40% at 50% 0%, color-mix(in oklch, var(--acento-oro) 10%, transparent), transparent 70%); }
.estrellas__cab { display: grid; gap: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filtro { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linea-2); color: var(--suave); font-size: 14px; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.filtro[aria-pressed="true"] { background: var(--oro-degradado); border-color: transparent; color: #0B0B0F; }
.filtro:active { scale: .97 !important; }
@media (pointer: coarse) { .filtro { min-height: 44px; } }
.pases { position: relative; margin-top: 34px; }
.pases__pista {
  --pase-w: clamp(272px, 25vw, 340px);
  display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 40px calc(50vw - var(--pase-w) / 2) 50px; perspective: 1500px; overscroll-behavior-x: contain; outline: none;
}
.pases__pista::-webkit-scrollbar { display: none; }
.pases__pista:focus-visible { outline: 2px solid var(--foco); outline-offset: -6px; border-radius: var(--radio); }
.pase { flex: none; width: var(--pase-w); scroll-snap-align: center; transform-style: preserve-3d;
  transform: rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px)) scale(var(--sc, 1)); opacity: var(--op, 1); }
.pase__tarjeta {
  position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; color: #F8FAFC;
  background: linear-gradient(165deg, #1C1D24 0%, #0D0D11 55%, #121216 100%);
  border: 1px solid color-mix(in oklch, var(--acento-champan) 20%, transparent); box-shadow: var(--sombra-3), inset 0 1px 0 rgb(255 255 255 / .06);
  transform: rotateX(var(--tx, 0deg)) rotateY(var(--tyy, 0deg)); transition: transform .5s var(--ease);
}
.pase__tarjeta::before { content: ''; position: absolute; z-index: 3; left: 50%; top: 10px; width: 46px; height: 7px; translate: -50% 0; border-radius: 9px; background: #050506; box-shadow: inset 0 1px 2px rgb(0 0 0 / .8), 0 1px 0 rgb(255 255 255 / .08); }
/* Holograma: el brillo sigue al puntero (o al deslizar en el móvil) */
.pase__tarjeta::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--holo, .18);
  background:
    radial-gradient(60% 45% at var(--mx, 50%) var(--my, 30%), rgb(255 255 255 / .5), transparent 70%),
    linear-gradient(115deg, transparent 20%, color-mix(in oklch, var(--acento-champan) 55%, transparent) 38%, rgb(167 220 255 / .35) 46%, rgb(255 170 230 / .3) 54%, transparent 70%) var(--hx, 50%) 0 / 260% 100%;
  transition: opacity .4s;
}
/* Letra de texto (como el pase de la reserva online): en Syne «Backstage pass» y «All access» no caben en una línea en 272 px */
.pase__cab { display: flex; align-items: center; gap: 8px; padding: 26px 16px 12px; font: 700 11px/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: #CBD5E1; }
.pase__cab span { white-space: nowrap; }
.pase__cab b { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: var(--oro-degradado); color: #0B0B0F; font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.pase__logo { width: 18px; height: 20px; color: #D4AF37; }
.pase__foto { margin-inline: 12px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 5; position: relative; background: #0B0B0F; }
.pase__foto img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.04); }
.pase__foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(0 0 0 / .45)); }
.pase__cuerpo { padding: 16px 16px 6px; display: grid; gap: 8px; }
.pase__rol { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #E2C45A; }
.pase__nombre { font: 800 27px/1 var(--display); letter-spacing: -.02em; }
.pase__cita { font-size: 14px; line-height: 1.45; color: #B6C0CF; }
.pase__look { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: #E2E8F0; }
.pase__look span:first-child { padding: 3px 8px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--acento-champan) 35%, transparent); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #F3E5AB; }
.pase__acciones { display: flex; align-items: center; gap: 10px; padding: 12px 16px 4px; margin-top: auto; }
.pase__acciones .boton { flex: 1; padding-inline: 14px; }
.pase__ig { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--acento-champan) 25%, transparent); color: #F8FAFC; flex: none; }
@media (pointer: coarse) { .pase__ig { width: 44px; height: 44px; } }
.pase__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 16px; font-size: 11px; color: #94A3B8; letter-spacing: .06em; }
.pase__pie i { width: 74px; height: 18px; flex: none; opacity: .5; background: repeating-linear-gradient(90deg, #CBD5E1 0 2px, transparent 2px 4px, #CBD5E1 4px 5px, transparent 5px 8px, #CBD5E1 8px 11px, transparent 11px 12px); }
.pase--mini .pase__caras { margin: 4px 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 10px; border-radius: 12px; background: radial-gradient(80% 80% at 50% 0%, color-mix(in oklch, var(--acento-oro) 16%, transparent), transparent 70%), #0B0B0F; }
.pase__caras figure { display: grid; justify-items: center; gap: 7px; text-align: center; }
.pase__caras img, .pase__monograma { width: 70px; height: 70px; border-radius: 50%; border: 2px solid color-mix(in oklch, var(--acento-oro) 60%, transparent); object-fit: cover; }
.pase__monograma { display: grid; place-items: center; font: 800 20px/1 var(--display); color: #0B0B0F; background: var(--oro-degradado); }
.pase__caras figcaption { font-size: 12px; font-weight: 600; color: #E2E8F0; }
.pases__flecha { position: absolute; z-index: 5; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--linea-2); color: var(--texto); box-shadow: var(--sombra); }
.pases__flecha .i { width: 20px; height: 20px; }
.pases__flecha--izq { left: max(var(--margen), calc(50% - var(--pase-w, 340px) / 2 - 90px)); }
.pases__flecha--der { right: max(var(--margen), calc(50% - var(--pase-w, 340px) / 2 - 90px)); }
.pases__flecha:active { scale: .94 !important; }
.pases__flecha:disabled { opacity: .3; cursor: default; }
.nota-fuente { margin-top: 8px; font-size: 13px; color: var(--tenue); text-align: center; }
@media (hover: hover) and (pointer: fine) { .pase__tarjeta:hover { --holo: .55; } .pase__ig:hover { border-color: #F3E5AB; } .filtro:not([aria-pressed="true"]):hover { border-color: var(--acento-champan); color: var(--texto); } .pases__flecha:not(:disabled):hover { border-color: var(--acento-champan); } }
@media (max-width: 820px) { .pases__flecha { display: none; } }

/* Backstage en vídeo */
.backstage { margin-top: clamp(40px, 6vw, 72px); }
.backstage__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.backstage__t { font: 800 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.02em; }
.backstage__pausa { display: inline-flex; align-items: center; gap: 8px; }
.backstage__lista { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.reel-vip { position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 9 / 16; background: #0B0B0F; border: 1px solid color-mix(in oklch, var(--acento-champan) 18%, transparent); }
.reel-vip__video { width: 100%; height: 100%; object-fit: cover; }
.reel-vip::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgb(7 7 10 / .85)); }
.reel-vip__pie { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 16px; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; color: #F8FAFC; text-decoration: none; }
.reel-vip__pie b { font: 800 18px/1.15 var(--display); }
.reel-vip__pie span { grid-column: 1; font-size: 13px; color: #CBD5E1; }
.reel-vip__pie .i { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 22px; height: 22px; color: #E2C35C; }
.backstage__mas { margin-top: 18px; }
@media (max-width: 820px) {
  .backstage__lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen); overscroll-behavior-x: contain; }
  .backstage__lista::-webkit-scrollbar { display: none; }
  .reel-vip { flex: none; width: 62vw; max-width: 260px; scroll-snap-align: center; }
}

/* ---------- Carta de servicios ---------- */
.servicios__cab { margin-bottom: clamp(36px, 5vw, 64px); }
.carta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.carta__grupo { background: var(--bg-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px; box-shadow: var(--sombra-1); }
.carta__grupo--tendencia { grid-column: 1 / -1; background: none; border: 0; padding: 0; }
.carta__cat { font: 800 13px/1.2 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-texto); margin-bottom: 18px; }
.carta__lista { display: grid; gap: 22px; }
.carta__grupo--tendencia .carta__lista { grid-template-columns: 1fr 1fr; gap: 18px; }
.servicio { position: relative; display: grid; gap: 8px; transition: scale .16s var(--ease); }
.servicio__cab { display: flex; align-items: baseline; gap: 12px; }
.servicio__cab::after { content: ''; order: 1; flex: 1; border-bottom: 1px dotted var(--linea-2); translate: 0 -5px; min-width: 20px; }
.servicio__nombre { font: 600 17px/1.3 var(--cuerpo); }
.servicio__precio { order: 2; white-space: nowrap; font-family: var(--display); color: var(--oro-texto); }
.servicio__precio b { font-size: 22px; }
.servicio__precio span { font-size: 14px; }
.servicio__consultar { font: 600 14px var(--cuerpo); }
.servicio__desc { color: var(--suave); font-size: 14.5px; line-height: 1.55; max-width: 30.2em /* 46ch */; }
.servicio__pie { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.servicio__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.servicio__meta .i { width: 15px; height: 15px; }
.servicio__reservar { min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-2); font-size: 13.5px; font-weight: 600; color: var(--texto); margin-left: auto; }
@media (pointer: coarse) { .servicio__reservar { min-height: 44px; } }
/* «Toca un servicio para reservarlo»: el botón se extiende a toda la tarjeta. Sin transform en el botón al pulsar
   (lo haría bloque contenedor del ::after y el clic se perdería): se hunde la tarjeta entera */
@media (pointer: coarse) {
  .servicio__reservar::after { content: ''; position: absolute; inset: 0; }
  .servicio:has(.servicio__reservar:active) { scale: .985; }
}
.servicio--destacado { position: relative; overflow: hidden; border-radius: var(--radio); padding: clamp(26px, 3vw, 40px); min-height: 340px; align-content: end; color: #F8FAFC; border: 1px solid color-mix(in oklch, var(--acento-champan) 22%, transparent);
  background: linear-gradient(180deg, rgb(7 7 10 / .1), rgb(7 7 10 / .92) 72%), var(--foto) center 30% / cover, #101116; }
.servicio--destacado[data-servicio="corte-tendencia"] { --foto: url(recursos/img/vip-antony.webp); }
.servicio--destacado[data-servicio="corte-barba"] { --foto: url(recursos/img/corte-hotel.webp); }
.servicio--destacado .servicio__cab { flex-direction: column; align-items: flex-start; gap: 6px; }
.servicio--destacado .servicio__cab::after { display: none; }
.servicio--destacado .servicio__nombre { font: 800 clamp(24px, 2.4vw, 34px)/1.05 var(--display); letter-spacing: -.02em; order: 2; }
.servicio--destacado .servicio__precio { order: 1; color: #E8C95A; }
.servicio--destacado .servicio__precio b { font-size: clamp(64px, 7vw, 104px); line-height: .9; letter-spacing: -.04em; }
.servicio--destacado .servicio__precio span { font-size: 28px; }
.servicio--destacado .servicio__desc { color: #CBD5E1; }
.servicio--destacado .servicio__meta { color: #94A3B8; }
.servicio--destacado .servicio__reservar { background: var(--oro-degradado); border-color: transparent; color: #0B0B0F; min-height: 44px; padding: 0 22px; }
@media (hover: hover) and (pointer: fine) { .servicio__reservar:hover { border-color: var(--oro); } }
@media (max-width: 980px) { .carta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .carta, .carta__grupo--tendencia .carta__lista { grid-template-columns: 1fr; } .servicio--destacado { min-height: 300px; } .carta__grupo { padding: 22px; } }

/* ---------- El estudio (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(190px, auto); gap: 16px; margin-top: clamp(36px, 5vw, 60px); }
.bento__celda { position: relative; overflow: hidden; border-radius: var(--radio); border: 1px solid var(--linea); box-shadow: var(--sombra-1); background: var(--bg-2); padding: 26px; display: grid; align-content: end; gap: 10px; }
.bento__celda h3 { font: 800 clamp(20px, 1.8vw, 26px)/1.1 var(--display); letter-spacing: -.02em; }
.bento__celda p { color: var(--suave); font-size: 15px; line-height: 1.55; }
.bento__icono { width: 34px; height: 34px; color: var(--oro); align-self: start; }
.bento__ceo { grid-column: 1 / 6; grid-row: span 2; min-height: 520px; color: #F8FAFC; border-color: color-mix(in oklch, var(--acento-champan) 20%, transparent); background: #0B0B0F; }
.bento__ceo img, .bento__vip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bento__ceo::after, .bento__vip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(7 7 10 / .9)); }
.bento__vip img { object-position: center 12%; }
.bento__vip::after { background: linear-gradient(180deg, transparent 22%, rgb(7 7 10 / .78) 55%, rgb(7 7 10 / .96)); }
.bento__texto { position: relative; z-index: 1; display: grid; gap: 6px; }
.bento__ceo p, .bento__vip p { color: #CBD5E1; }
.bento__ceo .enlace { color: #E8C95A; }
.bento__sg { grid-column: 6 / 10; align-content: space-between; background: radial-gradient(100% 90% at 100% 0%, color-mix(in oklch, var(--acento-oro) 20%, transparent), transparent 60%), var(--bg-2); }
.bento__equipo { grid-column: 10 / 13; align-content: space-between; }
.bento__visita { grid-column: 6 / 10; align-content: start; }
.bento__vip { grid-column: 10 / 13; color: #F8FAFC; background: #0B0B0F; border-color: color-mix(in oklch, var(--acento-champan) 20%, transparent); }
.visita__dir { color: var(--texto) !important; font-size: 17px !important; font-weight: 500; }
.visita__estado { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--texto) !important; }
.horario { display: grid; gap: 6px; margin: 6px 0 4px; font-size: 14.5px; }
.horario div { display: flex; justify-content: space-between; gap: 12px; }
.horario dt { flex: none; color: var(--suave); }
.horario dd { text-align: right; font-variant-numeric: tabular-nums; }
.horario dd span { color: var(--tenue); margin-inline: 3px; }
.horario .tramo { font-weight: inherit; white-space: nowrap; }      /* cada tramo horario siempre entero */
@media (max-width: 400px) { .horario dd span { display: none; } .horario .tramo { display: block; } }   /* en móvil estrecho, un tramo por línea */
.visita__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__ceo { grid-column: 1 / -1; min-height: 460px; grid-row: auto; }
  .bento__sg, .bento__equipo, .bento__visita, .bento__vip { grid-column: auto; }
  .bento__vip { min-height: 340px; }
}
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento__celda { padding: 22px; } }

/* ---------- Formación y VIP ---------- */
.dobles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(36px, 5vw, 60px); }
.doble { position: relative; overflow: hidden; min-height: 600px; border-radius: var(--radio); box-shadow: var(--sombra-1); border: 1px solid color-mix(in oklch, var(--acento-champan) 20%, transparent); background: #0B0B0F; color: #F8FAFC; display: grid; align-content: end; transform-style: preserve-3d; }
.doble__video, .doble__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.doble::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(7 7 10 / .15) 20%, rgb(7 7 10 / .94) 80%); }
.doble__capa { position: relative; z-index: 1; padding: clamp(26px, 3.4vw, 46px); display: grid; gap: 14px; justify-items: start; }
.doble__tipo { display: flex; align-items: center; gap: 9px; color: #E8C95A; font: 800 12px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; }
.doble h3 { font: 800 clamp(28px, 3.2vw, 46px)/1.04 var(--display); letter-spacing: -.03em; }
.doble p { color: #CBD5E1; max-width: 28.9em /* 44ch */; line-height: 1.6; }
.doble .boton { margin-top: 6px; max-width: 100%; }
@media (max-width: 400px) { .doble .boton { padding: 0 18px; font-size: 14px; } }   /* cabe en una línea hasta 360 px */
.doble .boton--cromo { color: #F8FAFC; border-color: rgb(226 232 240 / .45); }
@media (max-width: 900px) { .dobles { grid-template-columns: 1fr; } .doble { min-height: 520px; } }

/* ---------- Reserva ---------- */
.reservar { background: radial-gradient(60% 40% at 30% 0%, color-mix(in oklch, var(--acento-oro) 10%, transparent), transparent 70%); }
.reservar__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.reservar__cab { grid-column: 1 / -1; margin-bottom: clamp(20px, 3vw, 40px); }
.config { display: grid; gap: 14px; }
.config__paso { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--bg-2); box-shadow: var(--sombra-1); padding: 24px; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.config__paso legend { display: flex; align-items: center; gap: 12px; float: left; width: 100%; font: 800 18px/1.2 var(--display); margin-bottom: 4px; }
.config__paso legend + * { clear: both; }
.config__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--oro-degradado); color: #0B0B0F; font-size: 14px; flex: none; }
.config__servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
/* Barberos: foto o iniciales en oro; «Sin preferencia» con el icono del equipo */
.config__barberos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.config__barberos .opcion { justify-content: flex-start; gap: 12px; min-height: 62px; padding: 10px 16px 10px 10px; border-radius: 18px; }
.config__barberos .opcion > span { display: grid; gap: 3px; min-width: 0; line-height: 1.2; }
.config__barberos .opcion > span b { font: 600 15px/1.2 var(--cuerpo); color: var(--texto); white-space: normal; }
.config__barberos .opcion small { font-size: 12.5px; color: var(--suave); }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; }
.avatar--letras { display: grid; place-items: center; font: 800 15px/1 var(--display); font-style: normal; color: #0B0B0F; background: var(--oro-degradado); }
.avatar--letras .i { width: 52%; height: 52%; }
.config__calendario { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; }   /* puede partirse a 320 px */
.opcion { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--linea-2); cursor: pointer; font-size: 14.5px; font-weight: 500; transition: border-color .2s, background-color .2s; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion b { font: 700 13.5px/1 var(--cuerpo); color: var(--oro-texto); white-space: nowrap; }
.opcion:has(input:checked) { border-color: var(--oro); background: color-mix(in oklch, var(--acento-oro) 12%, transparent); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.opcion:has(input:disabled) { opacity: .38; cursor: not-allowed; }
.opcion:active { transform: scale(.98); }
.config__dias { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 2px; margin-inline: -4px; padding-inline: 4px; overscroll-behavior-x: contain; }
.config__dias::-webkit-scrollbar { display: none; }
.config__dias .opcion { flex: none; flex-direction: column; justify-content: center; gap: 2px; min-width: 84px; border-radius: 16px; padding: 10px 12px; scroll-snap-align: start; }
.config__dias .opcion span { font-size: 12px; color: var(--suave); text-transform: capitalize; }
.config__dias .opcion strong { font: 800 18px/1 var(--display); }
.config__franjas, .config__horas { display: flex; flex-wrap: wrap; gap: 8px; }
.config__horas .opcion { min-height: 42px; padding: 0 14px; font-variant-numeric: tabular-nums; }
.config__label { font-size: 14px; font-weight: 600; color: var(--suave); }
.config__input { width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--radio-campo); border: 1px solid var(--linea-2); background: var(--bg); color: var(--texto); }
.config__input:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
.config__resumen { border-radius: 14px; padding: 16px; background: var(--bg); border: 1px dashed var(--linea-2); font-size: 15px; line-height: 1.55; }
.config__resumen b { color: var(--oro-texto); }
.config__resumen .falta { color: var(--cerrado); display: flex; align-items: center; gap: 8px; }
.config__nota { font-size: 13px; color: var(--tenue); }
.config__priv { margin-top: -6px; font-size: 12.5px; line-height: 1.5; color: var(--tenue); }
main[tabindex="-1"]:focus-visible, section[tabindex="-1"]:focus-visible { outline: none; }
.config__llama a { color: var(--oro-texto); font-weight: 600; }
.config__priv a, .pie__legal a { color: var(--suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.config__vacio { color: var(--suave); font-size: 14px; }
.ficha { position: sticky; top: calc(var(--cab-h) + 20px); border: 1px solid var(--linea-2); border-radius: var(--radio); box-shadow: var(--sombra-2); padding: 26px; background: radial-gradient(90% 60% at 100% 0%, color-mix(in oklch, var(--acento-oro) 14%, transparent), transparent 60%), var(--bg-2); }
.ficha h3 { font: 800 22px/1.1 var(--display); margin-bottom: 18px; }
.ficha__lista { display: grid; gap: 18px; }
.ficha__lista li { display: flex; gap: 14px; }
.ficha__lista li > .i { width: 22px; height: 22px; color: var(--oro); margin-top: 2px; }
.ficha__lista div { display: grid; gap: 3px; font-size: 15px; }
.ficha__lista b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); font-weight: 600; }
.ficha__lista a { text-decoration: none; font-weight: 500; }
.ficha__lista small { color: var(--suave); font-size: 13.5px; }
.ficha__estado { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.redes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.redes a { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea); text-decoration: none; min-height: 56px; }
.redes .i { grid-row: span 2; width: 22px; height: 22px; color: var(--oro); }
.redes span { font-weight: 600; font-size: 14px; }
.redes small { color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .opcion:hover { border-color: var(--acento-champan); } .redes a:hover, .ficha__lista a:hover { color: var(--oro-texto); } }
@media (max-width: 980px) { .reservar__in { grid-template-columns: 1fr; } .ficha { position: static; } }
@media (max-width: 520px) { .config__paso, .ficha { padding: 20px; } .redes { grid-template-columns: 1fr; } .config__servicios { grid-template-columns: 1fr; } }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--linea); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); }
.pie__in { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; }
.pie__marca { display: flex; align-items: center; gap: 14px; }
.pie__x { width: 40px; height: 44px; color: var(--oro); }
.pie__marca p { display: grid; line-height: 1.3; }
.pie__marca b { font: 800 17px var(--display); }
.pie__marca span { font: 700 13px/1.3 var(--marca); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-texto); }
.pie__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
/* WCAG 2.5.8: objetivo táctil de 24 px como mínimo (antes 23 px); en el móvil, 44 px de alto para el pulgar */
.pie__nav a { display: inline-flex; align-items: center; min-height: 24px; color: var(--suave); text-decoration: none; font-size: 14.5px; }
@media (pointer: coarse) { .pie__nav { gap: 0 22px; } .pie__nav a { min-height: 44px; } }
.pie__legal { color: var(--tenue); font-size: 13px; }
.pie__firma { justify-self: end; font-size: 13px; }
.pie__firma a { color: var(--tenue); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie__nav a:hover, .pie__firma a:hover, .pie__legal a:hover, .config__priv a:hover { color: var(--oro-texto); } }
@media (max-width: 760px) { .pie__in { grid-template-columns: 1fr; } .pie__firma { justify-self: start; } }

/* ---------- Botón flotante de cita (móvil) ---------- */
.cita-flotante { position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--oro-degradado); color: #0B0B0F; font-weight: 700; text-decoration: none; box-shadow: var(--sombra-3), inset 0 1px 0 rgb(255 255 255 / .5);
  translate: 0 140%; opacity: 0; transition: translate .4s var(--ease), opacity .3s; }
.cita-flotante.visible { translate: 0 0; opacity: 1; }
.cita-flotante:active { scale: .97; }
@media (max-width: 820px) { .cita-flotante { display: inline-flex; } }

/* ---------- Capa de experiencia ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.cursor.visible { opacity: 1; }
.cursor__aro { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid color-mix(in oklch, var(--acento-oro) 75%, transparent); transition: width .3s var(--ease), height .3s var(--ease), left .3s var(--ease), top .3s var(--ease), background-color .3s, border-color .3s; }
.cursor__punto { position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); }
.cursor.sobre .cursor__aro { left: -31px; top: -31px; width: 62px; height: 62px; background: color-mix(in oklch, var(--acento-oro) 10%, transparent); border-color: var(--acento-champan); }
.destello { position: fixed; z-index: 95; pointer-events: none; width: 0; height: 0; }
.destello svg { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; color: var(--acento-champan); }
.destello i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid color-mix(in oklch, var(--acento-oro) 70%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .destello svg { animation: destello-estrella .7s var(--ease) forwards; }
  .destello i { animation: destello-aro .7s var(--ease) forwards; }
  .destello b { position: absolute; left: -1px; top: -18px; width: 2px; height: 36px; background: linear-gradient(transparent, var(--acento-champan), transparent); transform: rotate(var(--g, 0deg)) translateY(0); animation: destello-rayo .6s var(--ease) forwards; }
}
@keyframes destello-estrella { from { transform: scale(.2) rotate(0); opacity: 1; } to { transform: scale(1.5) rotate(90deg); opacity: 0; } }
@keyframes destello-aro { from { transform: scale(.2); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@keyframes destello-rayo { from { opacity: 1; transform: rotate(var(--g)) translateY(-6px) scaleY(.4); } to { opacity: 0; transform: rotate(var(--g)) translateY(-34px) scaleY(1); } }
.relieve { transform-style: preserve-3d; }
.relieve::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(40% 40% at var(--gx, 50%) var(--gy, 50%), color-mix(in oklch, var(--acento-champan) 18%, transparent), transparent 70%); }
@media (hover: hover) and (pointer: fine) { .relieve:hover::before { opacity: 1; } }

/* ---------- Movimiento reducido: todo quieto, todo visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .revela { clip-path: none; translate: none; }
  .pase { transform: none; opacity: 1; }
}

@media print { .cabecera, .capitulos, .modo-lectura, .escena3d, .velo, .cita-flotante, .cinta, .fondo-escena { display: none !important; } .historia .escenario { height: auto !important; } }