/* Las tipografias se cargan desde assets/fuentes/fuentes.css, enlazado en el
   <head>. Aca habia un @import a fonts.googleapis.com que pedia lo mismo por
   red en cada visita. */

/* === VARIABLES GENERADAS (inicio) ===
   Generadas por landing/build/generar-marca.mjs desde crm/config/client.json.
   No editar a mano entre estos dos marcadores: se pisan en el próximo
   `npm run marca`. Cada color trae dos variables: la de -rgb (tres números,
   sin "rgb()") la usan tailwind.config.js y los rgba()/rgb() de este mismo
   archivo para poder aplicar opacidad; la simple es para el resto de los usos
   de var(...) en CSS plano. */
:root {
  --fondo-rgb: 3 3 3;
  --fondo: #030303;
  --fondo-panel-rgb: 9 9 12;
  --fondo-panel: #09090C;
  --fondo-card-rgb: 15 15 20;
  --fondo-card: #0F0F14;
  --fondo-card-seleccionado-rgb: 23 18 42;
  --fondo-card-seleccionado: #17122A;
  --fondo-card-hover-rgb: 20 20 27;
  --fondo-card-hover: #14141B;
  --fondo-hundido-rgb: 6 6 8;
  --fondo-hundido: #060608;
  --fondo-footer-rgb: 0 0 0;
  --fondo-footer: #000000;
  --fondo-avatar-rgb: 14 14 19;
  --fondo-avatar: #0E0E13;
  --fondo-deshabilitado-rgb: 10 10 13;
  --fondo-deshabilitado: #0A0A0D;
  --acento-rgb: 167 139 250;
  --acento: #A78BFA;
  --acento-solido-rgb: 102 12 222;
  --acento-solido: #660CDE;
  --acento-hover-rgb: 122 43 240;
  --acento-hover: #7A2BF0;
  --glow-rgb: 122 43 240;
  --glow: #7A2BF0;
  --plateado-rgb: 205 208 216;
  --plateado: #CDD0D8;
  --plateado-suave-rgb: 143 146 156;
  --plateado-suave: #8F929C;
  --borde-rgb: 35 35 44;
  --borde: #23232C;
  --borde-hover-boton-rgb: 58 58 72;
  --borde-hover-boton: #3A3A48;
  --borde-hover-tarjeta-rgb: 74 74 92;
  --borde-hover-tarjeta: #4A4A5C;
  --texto-rgb: 255 255 255;
  --texto: #FFFFFF;
  --texto-secundario-rgb: 168 168 180;
  --texto-secundario: #A8A8B4;
  --dim-rgb: 138 138 152;
  --dim: #8A8A98;
  --texto-deshabilitado-rgb: 94 94 106;
  --texto-deshabilitado: #5E5E6A;
  --texto-muy-apagado-rgb: 74 74 86;
  --texto-muy-apagado: #4A4A56;
}
/* === VARIABLES GENERADAS (fin) === */

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------
   Menu mobile (boton hamburguesa + drawer): tamanos fluidos, no fijos.

   Estaba todo en px fijos via Tailwind (w-6 h-6, p-2, p-6, text-xs,
   space-y-3), calibrado a ojo contra un ancho tipo iPhone (~375-390px). A ese
   ancho se ve bien, pero un Android mas ancho (hasta ~430px en modelos
   grandes) tiene el mismo texto/icono/padding fijos ocupando una porcion mas
   chica de la pantalla, y se lee como "chico" aunque en px sea identico.

   --t va de 0 a 1 entre 360px (el Android mas angosto comun) y 430px (los mas
   anchos), clamped afuera de ese rango -- por debajo de 360 no se achica mas,
   por arriba de 430 no sigue creciendo. Cada tamano interpola MIN..MAX segun
   --t, asi que escala con el viewport real en vez de quedar pegado al ancho
   de referencia con el que se diseño. */
:root {
  /* OJO: el divisor necesita unidad (70px), no un numero pelado (70) -- de lo
     contrario "longitud / numero" da otra LONGITUD (ej. 1px), no la
     proporcion 0..1 sin unidad que hace falta para multiplicar despues por
     un rem mas abajo (rem * longitud no es valido, calc() lo tira entero). */
  --t: clamp(0, (100vw - 360px) / 70px, 1);
}

#mobile-menu-btn {
  padding: calc(0.375rem + (0.625rem - 0.375rem) * var(--t));
}

#mobile-menu-btn svg {
  width: calc(1.375rem + (1.625rem - 1.375rem) * var(--t));
  height: calc(1.375rem + (1.625rem - 1.375rem) * var(--t));
}

#mobile-drawer {
  padding: calc(1.25rem + (1.75rem - 1.25rem) * var(--t));
}

#mobile-drawer a {
  font-size: calc(0.75rem + (0.875rem - 0.75rem) * var(--t));
}

#mobile-drawer a + a {
  margin-top: calc(0.75rem + (1rem - 0.75rem) * var(--t));
}

body {
  background-color: var(--fondo);
  color: var(--texto);
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Serif Headline Typography */
h1, h2, h3, .font-serif-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--fondo);
}

::-webkit-scrollbar-thumb {
  background: var(--borde);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--acento);
}

/* Radio button style circles */
.radio-circle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--borde-hover-tarjeta);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}

.radio-circle.selected {
  border-color: var(--acento);
  background-color: var(--acento-solido);
  color: var(--texto);
}

/* Calendar Date Grid */
.calendar-day {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 150ms ease;
}

.calendar-day:hover:not(.disabled):not(.selected) {
  background-color: rgb(var(--acento-rgb) / 0.15);
  color: var(--acento);
}

.calendar-day.selected {
  background-color: var(--acento-solido);
  color: var(--texto);
  font-weight: 700;
}

.calendar-day.disabled {
  color: var(--texto-muy-apagado);
  cursor: not-allowed;
}

/* Red Medium Button */
.btn-red {
  background-color: var(--acento-solido);
  color: var(--texto);
  font-weight: 700;
  transition: all 200ms ease;
}

.btn-red:hover {
  background-color: var(--acento-hover);
  transform: translateY(-1px);
}

/* El indicador de paso, pegado arriba mientras se completa la reserva.
   Solo en pantallas chicas: ahi las cuatro columnas quedan apiladas y el
   auto-avance deja la barra fuera de la vista justo cuando dice en que paso
   vas. En escritorio las cuatro entran juntas y no hace falta.

   Va a mano y no con clases de Tailwind porque `sticky lg:static` y el fondo
   arbitrario no estan en el CSS compilado, y compilarlo de nuevo por una regla
   de cuatro lineas no se justifica. Si se agrega a index.html, sumarla tambien
   a PROPIAS en build/verificar-clases.mjs. */
@media (max-width: 1023px) {
  .stepper-pegado {
    position: sticky;
    /* El header del sitio tambien es sticky (h-20 + borde = 81px) y va en
       z-40. La barra se pega DEBAJO de el; con top:0 los dos primeros pasos
       quedaban tapados. */
    top: 81px;
    z-index: 20;
    background-color: var(--fondo-panel);
  }

  /* Pegada, la barra se come pantalla: 159px sobre 844 mas los 81 del header.
     Las bajadas ("Elige el servicio") son las que sobran — el titulo de cada
     paso ya dice lo mismo en una linea. */
  .stepper-pegado > div > div > span:last-child {
    display: none;
  }
}

/* El auto-avance del wizard usa scrollIntoView, que deja el bloque pegado al
   borde de arriba de la ventana. Pero arriba hay DOS barras pegadas: el header
   del sitio (81px) y el indicador de paso (121px). Sin este margen el bloque
   aterriza debajo de las dos y su encabezado —"Resumen de la reserva", el
   nombre del servicio, el barbero— queda tapado justo despues de elegirlo.
   Solo en celular: en escritorio el indicador no se pega y no se scrollea. */
@media (max-width: 1023px) {
  #col-servicio,
  #col-barbero,
  #col-fecha,
  #bloque-horarios,
  #col-resumen {
    /* El mismo --cromo que mide el JS, y no un numero escrito a mano.
    
       Aca hubo un numero fijo y quedo mal tres veces: 210 con 4 pasos, corto al
       pasar a 5, largo al volver a 4. Y encima el stepper NO mide lo mismo en
       toda esta franja: en telefono son dos filas (121px) y en tablet una sola
       (~73px), asi que ningun numero unico podia servir para las dos. Medido,
       se ajusta solo. */
    scroll-margin-top: calc(var(--cromo, 202px) + 8px);
  }
}
/* ---------------------------------------------------------------------------
   El calendario gira y muestra los horarios en la misma tarjeta.

   SOLO ESCRITORIO. Todas las reglas del giro viven dentro de la media query,
   asi que en celular la clase `girado` existe pero no significa nada: el
   calendario y los horarios quedan apilados como estaban. Por eso rotar el
   telefono a mitad de la reserva no puede romper nada — el estado es una sola
   clase y quien decide que significa es el CSS, no el JS.

   Va a mano y no con Tailwind porque preserve-3d, backface-visibility y
   rotateY no estan en el CSS compilado. Todo se engancha por id, asi que no
   hace falta tocar PROPIAS en build/verificar-clases.mjs; si alguna vez se
   agrega una clase propia al HTML de este bloque, si.
   --------------------------------------------------------------------------- */

/* La vuelta al calendario solo existe girado. En celular el calendario esta
   justo arriba, visible, y un boton "cambiar fecha" no querria decir nada. */
#cabecera-horarios {
  display: none;
}

@media (min-width: 1024px) {
  /* Las tres cajas principales del asistente terminan en la misma linea.
     Medidas antes de esto: servicios 343px, barberos 333px, tarjeta del flip
     338px, o sea tres bordes inferiores distintos a 10px uno del otro, que se
     lee como que una columna "se corrio".

     348 y no 338: los servicios miden 343 hoy, y bajarlos a 338 los haria
     scrollear por 5px. Con 348 no scrollea ninguno, barberos gana algo de aire
     abajo y la cara de horarios gana 10px, que le venian bien.

     Si el CRM sumara servicios la lista scrollea, igual que ya pasaba con el
     max-h-[380px] que traia. Lo que no cambia es donde termina la caja.

     Va solo de 1024 para arriba: en celular las cajas miden su contenido y esa
     es justamente la mecanica del paso por pantalla, que no se toca.

     Los 348px de abajo eran para las tres cajas, pero servicios y barberos
     quedaron afuera: estaban calculados para que 5 items entraran sin
     scrollear con la altura de item de ese momento (61px). Al subir esa
     altura a 84px (alineacion fila a fila, min-h-[84px] en app.js) 5 items
     pasaron a medir ~460px y la lista scrolleaba en silencio, cortando el
     ultimo servicio sin que se notara que habia una barra. Ahora miden su
     contenido real: pueden terminar en una linea distinta a la del
     calendario, pero eso ya era aceptable (ver el intento fallido de
     "equal height columns", revertido). #flip-fecha si necesita el alto
     fijo, por su cara absoluta. */
  #flip-fecha {
    height: 348px;
  }

  #flip-fecha {
    perspective: 1200px;
    /* El alto de arriba tambien resuelve lo de siempre: las caras van absolutas
       y no empujan al contenedor, asi que sin un alto fijo la tarjeta saltaria
       al cambiar de mes (un mes de 6 filas mide 305px y uno de 5, 269px). Manda
       la cara de horarios, que necesita 338px para los 18 huecos de un dia
       tipico sin cortar la ultima fila. Al calendario le sobra y va centrado. */
  }

  #flip-caras {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* space-y-5 le pone margin-top a la segunda cara; con las caras absolutas
     eso la baja 20px de mas. El margen solo sirve apiladas, en celular. */
  #flip-caras > * {
    margin-top: 0;
  }

  #cara-calendario,
  #cara-horarios {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    visibility: visible;
    transition: visibility 0s linear 0s;
  }

  /* Al calendario le sobra alto. Centrado dejaba 37px arriba y 37 abajo, y el
     hueco de arriba —53px entre el titulo de la columna y el mes— se leia como
     que la columna arrancaba mas abajo que las otras.

     Arrimado arriba quedan 15px arriba y 58 abajo. No se corta nada ni puede
     llegar a cortarse: el mes mas alto posible (6 filas, como enero, mayo y
     octubre de 2027) mide 212px de grilla y 275 en total, contra 320px de
     interior. Sobran 45px en el peor caso. */
  #cara-calendario {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #cara-horarios {
    transform: rotateY(180deg);
    /* Apilada no es una tarjeta: es un label y una grilla sueltos. La tarjeta
       se la damos solo aca, para que las dos caras sean la misma caja. */
    background-color: var(--fondo-card);
    border: 1px solid var(--borde);
    border-radius: 0.75rem;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* backface-visibility esconde, pero NO saca del orden de tabulacion: se podia
     tabular hasta un horario invisible y elegirlo a ciegas. El delay es para
     que la cara desaparezca recien cuando el giro termino. */
  #flip-caras:not(.girado) #cara-horarios,
  #flip-caras.girado #cara-calendario {
    visibility: hidden;
    transition-delay: 600ms;
  }

  #flip-caras.girado {
    transform: rotateY(180deg);
  }

  #cabecera-horarios {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* Girada, la tarjeta da mucho mas alto que el max-h-[140px] del bloque
     suelto. Se sube desde aca y no cambiando la clase de Tailwind, que
     tendria que existir en el CSS compilado. */
  #cara-horarios #bloque-horarios {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Cuatro columnas en vez de las tres del bloque apilado: la tarjeta girada
     tiene ancho de sobra y asi entran 24 huecos sin scrollear. Con tres, un
     dia de 21 turnos (lo que da produccion) pedia 7 filas y cortaba la ultima
     al ras del borde, que se lee como un error de dibujo y no como "hay mas".
     En celular siguen siendo tres: ahi no sobra ancho. */
  #cara-horarios #dashboard-slots-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    align-content: start;
  }
}

/* Mismo criterio que avanzarA(): si el visitante pidio menos movimiento, la
   cara cambia igual pero sin girar. */
@media (prefers-reduced-motion: reduce) {
  #flip-caras {
    transition: none;
  }

  #cara-calendario,
  #cara-horarios {
    transition-delay: 0s !important;
  }
}
/* ===========================================================================
   MOBILE: una pantalla por paso, con deslizamiento horizontal.

   SOLO hasta 767px. La franja de tablet (768-1023px) sigue con las columnas
   apiladas y escritorio con su grilla de cuatro: ninguno de los dos se toca.

   ---------------------------------------------------------------------------
   NO VERIFICADO EN iOS REAL
   ---------------------------------------------------------------------------
   Esto se probo en Chrome emulado a 390x844 y 375x667, que reproduce el layout
   pero NO el compositor de Safari ni su barra de URL.

   Al pasar a cajas del alto del contenido, DOS de los cuatro riesgos que
   estaban listados aca dejaron de existir y por eso ya no figuran:
     - no hay mas 100dvh, asi que la barra de URL de Safari no mueve nada;
     - no hay mas scroll interno: ninguna caja pasa de ~470px, scrollea la
       pagina. El overflow adentro de un subarbol transformado era lo mas
       fragil en Safari y salio de juego. mobile-pasos.mjs lo verifica
       recorriendo TODO el subarbol, no solo las cuatro caras — mirar solo
       las caras fue lo que dejo pasar el max-h-[140px] de la grilla.

   Queda sin comprobar:

     1. El swipe de borde (atras) de iOS. No vinculamos NINGUN gesto, asi que
        deberia ser inerte — pero "deberia" no es "verificado".
     2. Que el salto de alto al cambiar de paso se vea bien. Cambia de golpe
        porque no se puede animar hacia o desde auto sin depender de cosas
        que Safari todavia no hace; el contenido se desliza al mismo tiempo,
        asi que deberia disimularse.

   ---------------------------------------------------------------------------
   Decisiones tomadas para no pisar bugs conocidos de Safari
   ---------------------------------------------------------------------------
   - Sin preserve-3d y sin backface-visibility. Son la fuente conocida de los
     bugs de scroll dentro de capas 3D en iOS. Por eso ACA se desliza y no se
     gira, al reves que el calendario de escritorio. Cuando se decidio, esta
     pista SI tenia scroll adentro de las caras; ya no, pero la decision sigue
     valiendo: es gratis y saca de encima toda una familia de bugs.
   - translateX 2D, sin translate3d y sin will-change. Forzar capa de GPU es lo
     que dispara los repintados raros con hijos scrolleables.
   - Sin -webkit-overflow-scrolling: touch, que esta obsoleto y en iOS moderno
     causa bugs en vez de arreglarlos.
   - La transicion va SOLO sobre transform. Si transicionara la altura, el
     colapso de la barra de Safari la animaria y quedaria temblando.
   - Ningun position:fixed adentro de la pista. #customer-modal y
     #toast-container cuelgan del body, fuera de #pasos-mobile. NO MOVERLOS
     ACA ADENTRO: un ancestro con transform les rompe el posicionamiento.
   - Ningun gesto propio: se avanza eligiendo y se vuelve tocando. Un swipe
     horizontal competiria con el gesto de atras de iOS, que Safari se reserva
     y no se puede cancelar con preventDefault.
   =========================================================================== */

/* Fuera de mobile no hay a donde volver: las cuatro columnas estan a la vista. */
.paso-volver {
  display: none;
}

@media (max-width: 767px) {
  #pasos-mobile {
    /* Sin alto fijo: cada caja mide lo que su contenido necesita.

       Antes esto era calc(100dvh - var(--cromo)) y las cuatro caras median lo
       mismo, con lo cual las cortas —Servicio, Barbero, Confirmar— dejaban
       hasta 227px de vacio muerto abajo que ademas no hacia nada al tocarlo.

       De paso se fue la dependencia de 100dvh, que era una de las cosas que no
       podiamos verificar en iOS: la barra de URL de Safari ya no mueve nada de
       aca. Y como ninguna caja pasa de ~470px, tampoco hace falta scroll
       adentro de ninguna — scrollea la pagina, como cualquier pagina. Eso
       saca de encima el otro riesgo grande: overflow interno adentro de un
       subarbol transformado, que es lo mas fragil en Safari.

       --cromo sigue existiendo, pero ya solo para scroll-margin-top. */
    overflow: hidden;
    overflow: clip;
  }

  #pasos-mobile > div {
    /* La grilla deja de ser grilla y pasa a ser la pista.

       NO va flex: en flex las cuatro caras son hermanas en fila y la pista
       mide lo que la MAS ALTA, asi que mostrando "Barbero" igual arrastrarias
       el alto de "Confirmar". Con las inactivas fuera de flujo, la pista mide
       exactamente la activa. */
    display: block;
    position: relative;
    gap: 0;
    transform: translateX(0);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  #pasos-mobile > div > div {
    /* Fuera de flujo: no aportan alto. Cada una corrida por su indice, y el
       translate de la pista trae la que toca. */
    position: absolute;
    top: 0;
    width: 100%;
    /* El recorte esconde las caras de al lado, pero NO las saca del orden de
       tabulacion: se podia tabular a ciegas hasta un servicio de otra
       pantalla. Misma leccion que el giro de escritorio. El retardo es para
       que la cara que sale no desaparezca a mitad del deslizamiento. */
    visibility: hidden;
    transition: visibility 0s linear 400ms;
  }

  #pasos-mobile > div > div:nth-child(1) { left: 0; }
  #pasos-mobile > div > div:nth-child(2) { left: 100%; }
  #pasos-mobile > div > div:nth-child(3) { left: 200%; }
  #pasos-mobile > div > div:nth-child(4) { left: 300%; }

  #pasos-mobile[data-paso="1"] > div { transform: translateX(0); }
  #pasos-mobile[data-paso="2"] > div { transform: translateX(-100%); }
  #pasos-mobile[data-paso="3"] > div { transform: translateX(-200%); }
  #pasos-mobile[data-paso="4"] > div { transform: translateX(-300%); }

  /* La cara que se ve vuelve al flujo: es la unica que le da alto a la pista,
     y por lo tanto al envoltorio. Ahi esta todo el truco de que cada caja mida
     lo suyo sin que el JS mida nada. El alto cambia de golpe al pasar de paso
     —no se puede animar hacia o desde auto sin depender de cosas que Safari
     todavia no hace— pero el contenido se esta deslizando al mismo tiempo. */
  #pasos-mobile[data-paso="1"] > div > div:nth-child(1),
  #pasos-mobile[data-paso="2"] > div > div:nth-child(2),
  #pasos-mobile[data-paso="3"] > div > div:nth-child(3),
  #pasos-mobile[data-paso="4"] > div > div:nth-child(4) {
    position: relative;
    visibility: visible;
    transition-delay: 0s;
  }

  /* ---- Adentro del paso 3, la misma pista una vez mas ---------------------

     Calendario y horarios YA estaban estructurados como dos caras: se las dejo
     el giro de escritorio (#flip-caras y su clase `girado`, que selectDate ya
     prende). Aca se reusa tal cual —mismo DOM, mismo JS— y la unica diferencia
     es que en vez de rotar en 3D, desliza.

     NO es un quinto paso: el stepper sigue marcando 3 en curso hasta que se
     elige la hora. Ver pasoActual(), que no se toco. */
  #flip-fecha {
    overflow: hidden;
    overflow: clip;
  }

  #flip-caras {
    display: block;
    position: relative;
    transform: translateX(0);
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* space-y-5 le pone margin-top a la segunda cara; fuera de flujo, sobra. */
  #flip-caras > * {
    margin-top: 0;
  }

  #cara-calendario,
  #cara-horarios {
    position: absolute;
    top: 0;
    width: 100%;
    visibility: hidden;
    transition: visibility 0s linear 400ms;
  }

  #cara-calendario { left: 0; }
  #cara-horarios { left: 100%; }

  #flip-caras.girado { transform: translateX(-100%); }

  #flip-caras:not(.girado) #cara-calendario,
  #flip-caras.girado #cara-horarios {
    position: relative;
    visibility: visible;
    transition-delay: 0s;
  }

  #cara-horarios {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Con los horarios a la vista el calendario deja de verse, asi que ahora SI
     hace falta la salida. Es la misma cabecera que en escritorio: dice que dia
     es y como volver, y esta tambien cuando la fecha no tiene ningun turno.
     Sin esto, "Sin turnos en esta fecha" seria un callejon sin salida. */
  /* La grilla trae max-h-[140px] con scroll propio. Tenia sentido cuando los
     horarios eran un bloque mas dentro de una columna larga; ahora la cara es
     su propia pantalla y ese tope dejaba 244px de contenido en 140px, con
     scroll interno adentro de un subarbol transformado — exactamente el patron
     mas fragil en Safari, que este cambio vino a sacar de encima. Sin tope,
     entran todos y scrollea la pagina.
  
     Se hace desde aca y no cambiando la clase de Tailwind, que tendria que
     existir en el CSS compilado y ademas afectaria a escritorio. */
  #cara-horarios #dashboard-slots-grid {
    max-height: none;
    overflow: visible;
  }
  
  #cabecera-horarios {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .paso-volver {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--texto-secundario);
    background-color: var(--fondo-card);
    border: 1px solid var(--borde);
    border-radius: 0.5rem;
  }

  /* Los pasos ya completados de la barra llevan de vuelta. Los pendientes no,
     asi que no se puede saltear. Lo decide el JS, que solo se los pone a los
     que corresponde. */
  .stepper-pegado [role="button"] {
    cursor: pointer;
  }
}

/* Sin animacion, el cambio de pantalla es instantaneo pero igual de correcto. */
@media (prefers-reduced-motion: reduce) {
  /* El bloque de reduced-motion del giro esta MAS ARRIBA que la media query
     de celular, asi que aquella regla lo pisaba y la pista interna seguia
     animando. Se repite aca, al final, donde gana. */
  #flip-caras,
  #pasos-mobile > div {
    transition: none;
  }

  #pasos-mobile > div > div {
    transition-delay: 0s !important;
  }
}


/* ==========================================================================
   MVR Barber Estudios: direccion visual. Negro profundo, violeta como luz,
   plateado para titulares y filetes. Todos los colores salen de los tokens
   generados desde client.json (nada de hex aca).
   ========================================================================== */

/* Fondo del hero: un resplandor violeta suave detras del emblema. Es luz, no
   un bloque de color: el gradiente muere en transparente antes del borde. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(48% 55% at 50% 22%, rgb(var(--glow-rgb) / 0.20), transparent 70%),
    radial-gradient(40% 50% at 80% 50%, rgb(var(--glow-rgb) / 0.10), transparent 70%);
}

@media (min-width: 1024px) {
  .hero-glow {
    background:
      radial-gradient(34% 70% at 78% 50%, rgb(var(--glow-rgb) / 0.22), transparent 72%);
  }
}

.hero-emblema {
  filter: drop-shadow(0 0 28px rgb(var(--glow-rgb) / 0.28));
}

/* Titular: serif en mayusculas, espaciado amplio, plateado. */
.hero-titular {
  font-size: clamp(0.9rem, 4.9vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: 0.07em;
}

/* Filete: linea fina plateada que se desvanece en los extremos. */
.filete {
  height: 1px;
  width: 7.5rem;
  background: linear-gradient(90deg, transparent, rgb(var(--plateado-suave-rgb) / 0.9), transparent);
}

/* Boton principal: violeta lleno con un brillo sutil; el texto es blanco. */
.btn-access {
  border: 1px solid rgb(var(--acento-rgb) / 0.45);
  box-shadow: 0 0 22px rgb(var(--glow-rgb) / 0.30);
}

.btn-access:hover {
  box-shadow: 0 0 30px rgb(var(--glow-rgb) / 0.45);
}

.btn-access:focus-visible,
#btn-confirmar-reserva:focus-visible {
  outline: 2px solid rgb(var(--acento-rgb));
  outline-offset: 3px;
}

/* Las anclas del menu quedan debajo del header fijo (h-20 = 5rem). */
#inicio, #dashboard-booking, #barberos, #contacto {
  scroll-margin-top: 5rem;
}