/* ============================================================
   DONCUT'S BARBERÍA — LANDING PAGE
   Sistema de diseño "Mármol, filo y oro"
   ------------------------------------------------------------
   Dirección: clásico-contemporáneo. Negro profundo, oro DE FILO
   (líneas y bordes, nunca degradados metálicos con brillo — esa
   decisión viene de la Ronda 15 de la plataforma, donde el oro
   con brillo especular se descartó por "lucir viejo"), neutros
   fríos y mármol fotográfico como textura, no como color.

   El glassmorfismo se usa SOLO donde hay mármol detrás que
   desenfocar —nav, consola de agenda, tarjetas sobre textura—;
   sobre negro plano se usan paneles "tallados" (borde + sombra
   interior). Así el efecto se lee real y la página no se satura.
   ============================================================ */

/* ---------------- 1. Tokens ----------------
   La página tiene dos temas. El oscuro es el de casa —mármol negro con
   filo de oro— y el claro es su contraparte en mármol blanco, no un
   "modo día" genérico.

   Los dos salen del mismo juego de tokens: el CSS de abajo no vuelve a
   nombrar un color literal. Tres de ellos son familias enteras y hacen
   casi todo el trabajo:

     --lift-rgb    lo que ACLARA sobre el fondo: filos, bordes, superficies
                   apenas levantadas. Blanco sobre negro; tinta sobre marfil.
     --velo-rgb    lo que TAPA la fotografía de mármol para que el texto
                   caiga sobre plano. Negro en oscuro; marfil en claro.
     --sombra-rgb  de qué color es la sombra proyectada.

   Como sólo cambia el color y no el alfa, cada regla conserva la
   intensidad que se le afinó, en los dos temas.
   ------------------------------------------------------------------- */
:root{
  /* Neutros fríos */
  --negro:      #07080A;
  --onix:       #0C0E11;
  --grafito:    #14171B;
  --humo:       #1C2026;
  --humo-alto:  #262B32;

  /* Oro de filo. `--oro` es el relleno de marca y no cambia entre temas;
     `--oro-texto` es el que lleva letra encima y sí tiene que cambiar,
     porque el dorado de marca sobre marfil da 1.9:1 y es ilegible. */
  --oro:        #C9A94F;
  --oro-claro:  #E7CE8C;
  --oro-hondo:  #8A6D2A;
  --oro-texto:      #C9A94F;   /* 8.1:1 sobre --negro */
  --oro-texto-alto: #E7CE8C;
  --oro-linea:  rgba(201,169,79,.34);
  --oro-tenue:  rgba(201,169,79,.12);
  --sobre-oro:  #101215;       /* la letra que va ENCIMA del dorado */

  /* Tinta clara */
  --marfil:     #F5F6F8;
  --gris-100:   #DFE2E7;
  --gris-300:   #B2B8C0;
  --gris-500:   #868D96;   /* 5.4:1 sobre --negro */
  --gris-700:   #565C64;   /* SÓLO para estados inhabilitados: no cumple 4.5:1 y no debe llevar texto informativo */

  /* Familias que giran con el tema */
  --lift-rgb:   255,255,255;
  --velo-rgb:   7,8,10;
  --sombra-rgb: 0,0,0;

  /* Semáforo */
  --vivo:          #4ADE80;
  --aviso:         #E8A33D;
  --alerta:        #F09090;
  --alerta-texto:  #F5B5B5;
  --alerta-linea:  rgba(240,144,144,.35);
  --alerta-fondo:  rgba(240,144,144,.09);

  /* Secundarios: los colores reales del poste de barbero del logo.
     Se usan en dosis mínimas — acentos, no superficies. */
  --poste-rojo: #B0313C;
  --poste-azul: #33538F;

  /* Vidrio */
  --vidrio-bg:     linear-gradient(155deg, rgba(var(--lift-rgb),.078), rgba(var(--lift-rgb),.022) 46%, rgba(var(--lift-rgb),.05));
  --vidrio-borde:  rgba(var(--lift-rgb),.11);
  --vidrio-sombra: 0 34px 80px -30px rgba(var(--sombra-rgb),.92), 0 2px 10px -4px rgba(var(--sombra-rgb),.6);
  --vidrio-luz:    inset 0 1px 0 rgba(var(--lift-rgb),.14);

  /* Fotografía de fondo: cada tema usa su propio mármol. Van en dos
     tokens separados porque el admin puede sustituirlos desde la
     plataforma, y el guion escribe sobre `--hero-*` sin tener que saber
     qué tema está puesto en ese momento. */
  --hero-oscuro:    url('assets/hero-marmol.webp');
  --hero-claro:     url('assets/marmol-dorado.webp');
  --marmol-hero:    var(--hero-oscuro);
  --textura-fuerza: 1;
  /* La veta del cierre es decoración pura, así que va como fondo de CSS
     y no como <img>: no necesita texto alterno y cambiar de tema no
     cuesta una descarga más. */
  --textura-cierre: url('assets/noche.webp');

  /* Tipografía */
  --display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --texto:   'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Ritmo */
  --ancho:      1240px;
  --ancho-texto: 62ch;
  --radio:      18px;
  --radio-sm:   12px;
  --seccion:    clamp(5.5rem, 11vw, 10.5rem);
  --transicion: 480ms cubic-bezier(.22,.61,.36,1);

  color-scheme: dark;
}

/* ---- Tema claro: mármol blanco ----
   Las vetas siguen siendo la misma fotografía, pero muy bajada de
   opacidad: sobre marfil leen como el veteado gris del mármol real en
   lugar de como una foto oscura mal iluminada. */
:root[data-tema="claro"]{
  --negro:      #F3F0E9;
  --onix:       #EAE6DD;
  --grafito:    #E1DCD1;
  --humo:       #D4CEC0;
  --humo-alto:  #C2BBA9;

  --oro-texto:      #7C6220;   /* 4.9:1 sobre --negro */
  --oro-texto-alto: #5E4A16;   /* 7.6:1 */
  --oro-linea:  rgba(124,98,32,.40);
  --oro-tenue:  rgba(124,98,32,.10);

  --marfil:     #16181C;       /* la tinta */
  --gris-100:   #2C3037;
  --gris-300:   #4C535C;       /* 7.4:1 */
  --gris-500:   #565D66;       /* 5.2:1 sobre el vidrio claro, que es el peor caso */
  --gris-700:   #9AA0A8;       /* sólo inhabilitados */

  --lift-rgb:   22,25,29;
  --velo-rgb:   243,240,233;
  --sombra-rgb: 96,86,64;

  --vivo:          #1B7F3F;
  --aviso:         #8A5A0B;
  --alerta:        #A32A2A;
  --alerta-texto:  #8E2020;
  --alerta-linea:  rgba(163,42,42,.34);
  --alerta-fondo:  rgba(163,42,42,.07);

  /* Sobre marfil, el vidrio vuelve a ser blanco esmerilado: teñirlo de
     tinta lo hundiría en vez de levantarlo. */
  --vidrio-bg:     linear-gradient(155deg, rgba(255,255,255,.72), rgba(255,255,255,.44) 46%, rgba(255,255,255,.62));
  --vidrio-borde:  rgba(22,25,29,.13);
  --vidrio-sombra: 0 30px 70px -34px rgba(96,86,64,.42), 0 2px 10px -4px rgba(96,86,64,.28);
  --vidrio-luz:    inset 0 1px 0 rgba(255,255,255,.9);

  --marmol-hero:    var(--hero-claro);
  --textura-cierre: url('assets/rombos-oro.webp');
  --textura-fuerza: .34;

  color-scheme: light;
}

/* Transiciones apagadas mientras cambia el tema.
   No es un capricho de rendimiento: el navegador no reinicia una
   transición cuando lo que cambió fue el valor de una variable y no la
   declaración. El valor declarado sigue siendo `var(--gris-300)`, así
   que para el motor "no cambió nada" y el elemento se queda con el
   color anterior — tinta clara sobre fondo claro, ilegible.

   El guion pone esta clase, cambia el tema, fuerza el recálculo y la
   quita en el siguiente cuadro. Con las transiciones apagadas el valor
   nuevo se aplica de golpe, y al reactivarlas ya no hay nada que
   animar. Los hover siguen intactos. */
.sin-transicion,
.sin-transicion *,
.sin-transicion *::before,
.sin-transicion *::after{
  transition: none !important;
  animation-duration: 1ms !important;
}

/* ---------------- 2. Base ---------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  background: var(--negro);
  color: var(--gris-100);
  font-family: var(--texto);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Grano analógico sobre toda la página: rompe la planitud del negro
   digital y le da al mármol un acabado de impresión. */
body::after{
  content:'';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* height:auto es obligatorio: las <img> llevan width/height intrínsecos para
   reservar espacio y evitar saltos de layout, y sin esto el atributo height
   gana sobre el ancho en CSS y deforma la imagen. */
img{ max-width:100%; height:auto; display:block; }
/* Un <svg> con <use> no tiene tamaño intrínseco: sin una medida explícita el
   navegador le asigna 300×150 y revienta el botón. Las reglas por clase que
   vienen más abajo tienen más especificidad y siguen mandando donde aplican. */
button svg, a svg, .aviso-sync svg, .nota-productos svg{ width: 1.05em; height: 1.05em; flex: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection{ background: var(--oro); color: var(--sobre-oro); }

.contenedor{ width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
@media (max-width: 640px){ .contenedor{ width: min(100% - 1.75rem, var(--ancho)); } }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.salto-contenido{
  position:absolute; top:.5rem; left:.5rem; z-index: 10000;
  padding:.65rem 1.1rem; background: var(--oro); color: var(--sobre-oro);
  font-weight:700; border-radius: 8px; transform: translateY(-160%);
  transition: transform 180ms ease;
}
.salto-contenido:focus{ transform: translateY(0); }

/* ---------------- 3. Tipografía ---------------- */
h1, h2, h3, h4{
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--marfil);
  margin: 0;
  font-variation-settings: 'opsz' 96, 'SOFT' 0, 'WONK' 0;
}
h1{ font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem); letter-spacing: -.03em; }
h2{ font-size: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); letter-spacing: -.022em; }
h3{ font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); letter-spacing: -.01em; }
p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }

.italica-oro{
  font-style: italic;
  color: var(--oro-texto);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
}

/* Rótulo pequeño en versalitas — la firma tipográfica de la página */
.rotulo{
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--texto);
  font-size: .69rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--oro-texto);
  margin: 0 0 1.4rem;
}
.rotulo::before{
  content:''; width: 34px; height:1px; flex:none;
  background: linear-gradient(90deg, transparent, var(--oro));
}
.rotulo.centrado{ justify-content:center; }
.rotulo.centrado::after{
  content:''; width: 34px; height:1px; flex:none;
  background: linear-gradient(90deg, var(--oro), transparent);
}

.entradilla{
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  color: var(--gris-300);
  max-width: var(--ancho-texto);
  line-height: 1.72;
}
.encabezado-seccion{ max-width: 44rem; margin-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.encabezado-seccion.centrado{ margin-inline: auto; text-align: center; }
.encabezado-seccion h2 + .entradilla{ margin-top: 1.25rem; }

/* Filete dorado */
.filete{
  height:1px; border:0; margin:0;
  background: linear-gradient(90deg, transparent, var(--oro-linea) 18%, var(--oro-linea) 82%, transparent);
}

/* Poste de barbero animado — el guiño auténtico al oficio, en dosis mínima */
.poste{
  width: 132px; height: 5px; margin: 0 auto;
  border-radius: 99px; overflow: hidden;
  border: 1px solid var(--oro-linea);
  background-image: repeating-linear-gradient(115deg,
      var(--poste-rojo) 0 9px, #E9EAEC 9px 18px, var(--poste-azul) 18px 27px, #E9EAEC 27px 36px);
  background-size: 36px 100%;
  animation: girar-poste 2.6s linear infinite;
  opacity: .8;
}
@keyframes girar-poste{ to{ background-position: -36px 0; } }

/* ---------------- 4. Vidrio y paneles ---------------- */
.vidrio{
  background: var(--vidrio-bg);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  box-shadow: var(--vidrio-sombra), var(--vidrio-luz);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .vidrio{ background: rgba(16,19,23,.9); }
}
/* Filo dorado superior: el detalle que convierte el vidrio en algo caro */
.vidrio-filo{ position: relative; }
.vidrio-filo::before{
  content:''; position:absolute; inset: 0 0 auto; height:1px;
  background: linear-gradient(90deg, transparent, var(--oro) 25%, var(--oro-claro) 50%, var(--oro) 75%, transparent);
  opacity: .55;
}
/* Panel "tallado" para las secciones sobre negro plano, donde no hay
   nada que desenfocar y un vidrio falso se notaría. */
.tallado{
  background: linear-gradient(168deg, var(--grafito), var(--onix));
  border: 1px solid rgba(var(--lift-rgb),.055);
  border-radius: var(--radio);
  box-shadow: 0 26px 60px -34px rgba(var(--sombra-rgb),.95), inset 0 1px 0 rgba(var(--lift-rgb),.045);
}

/* ---------------- 5. Botones ---------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.7rem;
  border-radius: 99px;
  font-size: .93rem; font-weight: 700; letter-spacing: .04em;
  min-height: 48px;
  text-align: center;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), background-color 260ms ease,
              color 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-oro{
  background: var(--oro); color: var(--sobre-oro);
  box-shadow: 0 12px 34px -14px rgba(201,169,79,.55);
}
.btn-oro:hover{ background: var(--oro-claro); box-shadow: 0 18px 44px -14px rgba(201,169,79,.7); }

.btn-filo{
  border: 1px solid var(--oro-linea);
  color: var(--marfil);
  background: rgba(var(--lift-rgb),.028);
}
.btn-filo:hover{ border-color: var(--oro-texto); color: var(--oro-texto-alto); background: rgba(201,169,79,.09); }

.btn-fantasma{ color: var(--gris-300); padding-inline: 1.1rem; }
.btn-fantasma:hover{ color: var(--marfil); }

.btn-sm{ padding: .6rem 1.15rem; min-height: 40px; font-size: .84rem; }
.btn-ancho{ width: 100%; }
.btn[disabled]{ opacity: .38; pointer-events: none; }

/* ---------------- 6. Navegación ----------------
   El índice no es una barra pegada al borde: es una burbuja de vidrio que
   flota sobre el mármol. Por eso el contenedor `.nav` es transparente y
   todo el peso visual vive en `.nav-burbuja`.

   Al hacer scroll la burbuja se encoge y se opaca (`.pegada`): arriba
   estorba lo mínimo, y abajo —donde ya hay contenido detrás— se vuelve
   sólida para que los enlaces no compitan con la página.
   ------------------------------------------------------------------- */
.nav{
  position: fixed; inset: 0 0 auto; z-index: 900;
  padding: .85rem 0;
  pointer-events: none;                 /* sólo la burbuja recibe clics */
  transition: padding var(--transicion);
}
.nav > .contenedor{ display: flex; justify-content: center; }

.nav-burbuja{
  pointer-events: auto;
  display: flex; align-items: center; gap: 1.25rem;
  width: 100%; max-width: var(--ancho);
  padding: .5rem .5rem .5rem 1.1rem;
  border-radius: 99px;
  background: var(--vidrio-bg);
  border: 1px solid var(--vidrio-borde);
  box-shadow: 0 18px 50px -26px rgba(var(--sombra-rgb),.8), var(--vidrio-luz);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: max-width var(--transicion), background-color var(--transicion),
              border-color var(--transicion), box-shadow var(--transicion),
              padding var(--transicion);
}
/* Sin backdrop-filter el vidrio no difumina nada y el texto queda sobre la
   veta: se cambia por un fondo sólido. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .nav-burbuja{ background: rgba(var(--velo-rgb),.94); }
}
.nav.pegada{ padding: .55rem 0; }
.nav.pegada .nav-burbuja{
  max-width: calc(var(--ancho) - 140px);
  background: rgba(var(--velo-rgb),.72);
  border-color: rgba(var(--lift-rgb),.14);
  box-shadow: 0 22px 60px -28px rgba(var(--sombra-rgb),.9), var(--vidrio-luz);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .nav.pegada .nav-burbuja{ background: rgba(var(--velo-rgb),.97); }
}

.marca{ display: flex; align-items: center; gap: .72rem; margin-right: auto; }
.marca-poste{ width: 15px; height: 38px; flex: none; }
.marca-texto{ display: flex; flex-direction: column; line-height: 1; }
.marca-nombre{
  font-family: var(--display); font-weight: 700;
  font-size: 1.14rem; letter-spacing: .04em; color: var(--marfil);
}
.marca-sub{
  font-size: .66rem; font-weight: 700; letter-spacing: .3em;
  color: var(--oro-texto); margin-top: .3rem;
}

/* Dentro de una burbuja, el subrayado de sección se veía suelto; la sección
   en la que estás se marca como una burbuja más pequeña. */
.nav-enlaces{ display: flex; align-items: center; gap: .15rem; }
.nav-enlace{
  padding: .52rem .9rem; border-radius: 99px;
  font-size: .86rem; font-weight: 600; color: var(--gris-300);
  transition: color 220ms ease, background-color 220ms ease;
}
.nav-enlace:hover{ color: var(--marfil); background: rgba(var(--lift-rgb),.07); }
.nav-enlace[aria-current="true"]{ color: var(--oro-texto-alto); background: var(--oro-tenue); }

.nav-acciones{ display: flex; align-items: center; gap: .5rem; }

/* Separador entre los enlaces y las acciones. Un filo, no una caja. */
.nav-raya{
  width: 1px; align-self: stretch; margin: .35rem .3rem;
  background: rgba(var(--lift-rgb),.14); flex: none;
}
@media (max-width: 1040px){ .nav-raya{ display: none; } }

/* Interruptor de tema.
   ------------------------------------------------------------
   Un icono, no un carril con perilla: el botón enseña A DÓNDE va
   —luna si vas a oscurecer, sol si vas a aclarar— y lo dice en su
   etiqueta accesible, que es lo que de verdad lee un lector de
   pantalla. Por eso es un `button` normal con `aria-label` y no un
   `switch`: "activado/desactivado" no significa nada aquí.

   El sol y la luna son la MISMA figura. La luna se hace tapando el
   círculo con otro círculo negro que vive fuera del lienzo y entra
   deslizándose; los rayos se encogen hacia el centro al mismo
   tiempo. Nada aparece ni desaparece de golpe: una forma se
   convierte en la otra, que es lo que hace que se sienta hecho a
   mano y no un intercambio de dos PNG.
   ------------------------------------------------------------ */
.nav-tema{
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid transparent; padding: 0;
  color: var(--gris-100);
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}
.nav-tema:hover{
  background: rgba(var(--lift-rgb),.08);
  border-color: var(--oro-linea);
  color: var(--oro-texto-alto);
}
.nav-tema:active{ transform: scale(.94); }

/* El sol descansa girado 45°. Con ocho rayos a 45° de separación eso
   es visualmente idéntico a no girarlo, así que sale gratis: da medio
   giro de recorrido en la transición y deja la luna derecha al llegar,
   en vez de torcida. */
.tema-astro{
  width: 19px; height: 19px;
  transform: rotate(45deg);
  transition: transform 520ms cubic-bezier(.36,.9,.32,1);
}
/* Los dos extremos se declaran en CSS, incluido el de reposo.
   Dejar el estado "sol" sólo en los atributos del SVG parece que
   funciona —se ve bien al cargar— pero no hay nada entre lo que
   interpolar al volver, y el icono se queda clavado en la luna. */
.tema-cuerpo{
  fill: currentColor; r: 5px;
  transition: r 420ms cubic-bezier(.36,.9,.32,1);
}
.tema-sombra{
  cx: 31px; cy: 1px; r: 6.6px;
  transition: cx 520ms cubic-bezier(.36,.9,.32,1), cy 520ms cubic-bezier(.36,.9,.32,1);
}
.tema-rayo{
  transform-origin: 12px 12px;
  transform: scale(1); opacity: 1;
  transition: transform 420ms cubic-bezier(.36,.9,.32,1), opacity 260ms ease;
}
/* Los rayos no entran todos a la vez: el escalón de 26ms es lo que
   hace que el sol parezca abrirse en vez de encenderse. */
.tema-rayo:nth-child(1){ transition-delay: 0ms; }
.tema-rayo:nth-child(2){ transition-delay: 26ms; }
.tema-rayo:nth-child(3){ transition-delay: 52ms; }
.tema-rayo:nth-child(4){ transition-delay: 78ms; }
.tema-rayo:nth-child(5){ transition-delay: 104ms; }
.tema-rayo:nth-child(6){ transition-delay: 130ms; }
.tema-rayo:nth-child(7){ transition-delay: 156ms; }
.tema-rayo:nth-child(8){ transition-delay: 182ms; }

/* La luna: el mordisco entra y los rayos se meten hacia el centro.
   Se manda por clase en el botón, no por `[data-tema]` en la raíz,
   porque el guion la pone DESPUÉS de reactivar las transiciones —
   ver `ponerIcono` en landing.js. Una transición que arranca con las
   transiciones apagadas se queda clavada a medio camino. */
/* El mordisco tiene el mismo radio que el cuerpo y se desplaza 5px en
   diagonal: eso deja un creciente de 5px de grueso sobre un círculo de
   13, que es la proporción de una luna de icono. Más adentro y queda
   una uña; menos, y no se lee como luna. */
.nav-tema.es-luna .tema-astro{ transform: rotate(0deg); }
.nav-tema.es-luna .tema-cuerpo{ r: 6.6px; }
.nav-tema.es-luna .tema-sombra{ cx: 15.6px; cy: 8.4px; }
.nav-tema.es-luna .tema-rayo{ transform: scale(.25); opacity: 0; transition-delay: 0ms; }

/* Al cargar la página el icono se coloca ya puesto, sin recorrido. */
.nav-tema.sin-anim,
.nav-tema.sin-anim *{ transition: none !important; }

.nav-acceso{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .58rem 1.05rem; border-radius: 99px;
  border: 1px solid rgba(var(--lift-rgb),.14);
  font-size: .84rem; font-weight: 700; color: var(--gris-100);
  transition: border-color 240ms ease, color 240ms ease, background-color 240ms ease;
}
.nav-acceso:hover{ border-color: var(--oro-texto); color: var(--oro-texto-alto); background: var(--oro-tenue); }
.nav-acceso svg{ width: 13px; height: 13px; }

.nav-cta svg{ width: 13px; height: 13px; margin-right: .1rem; }

.nav-hamburguesa{ display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 99px; border: 1px solid rgba(var(--lift-rgb),.13); }
.nav-hamburguesa span{ display:block; width:18px; height:1.5px; background: var(--marfil); position: relative; transition: transform 300ms ease, opacity 200ms ease; }
.nav-hamburguesa span::before,
.nav-hamburguesa span::after{ content:''; position:absolute; left:0; width:18px; height:1.5px; background: var(--marfil); transition: transform 300ms ease; }
.nav-hamburguesa span::before{ top:-6px; }
.nav-hamburguesa span::after{ top:6px; }
.nav-hamburguesa[aria-expanded="true"] span{ transform: rotate(45deg); }
.nav-hamburguesa[aria-expanded="true"] span::before{ transform: translateY(6px) rotate(-90deg); }
.nav-hamburguesa[aria-expanded="true"] span::after{ opacity: 0; }

/* Menú móvil en vidrio */
.menu-movil{
  position: fixed; inset: 0; z-index: 899;
  display: none; flex-direction: column; justify-content: center; gap: .25rem;
  padding: 6rem 2rem 3rem;
  background: rgba(var(--velo-rgb),.9);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
.menu-movil.abierto{ display: flex; animation: aparecer 320ms ease both; }
.menu-movil a{
  font-family: var(--display); font-size: 2rem; font-weight: 600;
  color: var(--marfil); padding: .7rem 0;
  border-bottom: 1px solid rgba(var(--lift-rgb),.06);
}
.menu-movil a:last-of-type{ border-bottom: 0; }
.menu-movil .btn{ margin-top: 1.75rem; }
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }

@media (max-width: 1040px){
  .nav-enlaces{ display: none; }
  .nav-hamburguesa{ display: inline-flex; }
  .nav-acciones .nav-acceso span:not(.sr-only){ display: none; }
  .nav-acceso{ padding: .58rem .8rem; }
  .nav.pegada .nav-burbuja{ max-width: var(--ancho); }
}
/* En pantallas estrechas la barra fija de abajo ya ofrece "Agendar": repetirlo
   arriba apretaba la marca contra el botón de menú. */
@media (max-width: 620px){
  .nav-cta{ display: none; }
  .marca-nombre{ font-size: 1.02rem; }
  .nav-burbuja{ padding-left: .85rem; gap: .5rem; }
}

/* ---------------- 7. Hero ---------------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 7rem 0 6.5rem;
  overflow: hidden;
  isolation: isolate;
}
.hero-fondo{
  position: absolute; inset: -8%;
  background-image: var(--marmol-hero);
  background-size: cover; background-position: 58% 42%;
  z-index: -3;
  will-change: transform;
}
/* Doble velo: uno radial que abre luz al centro y otro que hunde los bordes,
   para que el texto siempre caiga sobre negro aunque la veta se mueva. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(95% 78% at 50% 46%, rgba(var(--velo-rgb),.68) 0%, rgba(var(--velo-rgb),.84) 46%, rgba(var(--velo-rgb),.97) 100%);
}
.hero::after{
  content:''; position:absolute; inset:auto 0 0; height: 42%; z-index:-1;
  background: linear-gradient(to top, var(--negro) 8%, rgba(var(--velo-rgb),.72) 45%, transparent);
}
.hero-caja{ text-align: center; max-width: 62rem; margin-inline: auto; }

.hero-logo{
  width: min(56vw, 320px);
  margin: 0 auto clamp(1.35rem, 2.6vw, 1.9rem);
  filter: drop-shadow(0 18px 46px rgba(var(--sombra-rgb),.8));
}
.hero h1{ margin-bottom: 1.5rem; }
.hero .entradilla{ margin-inline: auto; }

.hero-acciones{
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* Píldora de disponibilidad en vivo: el dato que demuestra que la agenda
   de la landing es la agenda real, no una maqueta. */
.hero-vivo{
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 2rem; padding: .6rem 1.15rem .6rem .95rem;
  border-radius: 99px;
  font-size: .84rem; color: var(--gris-100);
  background: rgba(var(--lift-rgb),.05);
  border: 1px solid rgba(var(--lift-rgb),.1);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.hero-vivo b{ color: var(--oro-texto-alto); font-weight: 700; }
.punto-vivo{
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--vivo);
  box-shadow: 0 0 0 0 rgba(74,222,128,.55);
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir{
  0%{ box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  70%{ box-shadow: 0 0 0 9px rgba(74,222,128,0); }
  100%{ box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.hero-scroll{
  position: absolute; left: 50%; bottom: 1.9rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gris-500);
}
.hero-scroll i{
  display: block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--oro), transparent);
  animation: bajar 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes bajar{ 0%,100%{ transform: scaleY(.35); opacity:.4; } 50%{ transform: scaleY(1); opacity:1; } }

/* Los archivos del logotipo son uno solo, dorado. Sobre marfil ese dorado
   cae a ~1.9:1 y el logo se desvanece, así que en tema claro se oscurece a
   bronce — misma pieza, densidad distinta. */
:root[data-tema="claro"] .hero-logo,
:root[data-tema="claro"] .pie-logo,
:root[data-tema="claro"] .oficio-sello{
  filter: brightness(.62) saturate(1.3) drop-shadow(0 10px 26px rgba(var(--sombra-rgb),.28));
}

/* ---------------- 8. Franja de credenciales ---------------- */
.credenciales{ position: relative; margin-top: -4.5rem; z-index: 5; }
.credenciales-caja{
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem);
}
.credencial{ text-align: center; padding: .5rem 1rem; position: relative; }
.credencial + .credencial::before{
  content:''; position:absolute; left:0; top: 18%; bottom: 18%; width:1px;
  background: linear-gradient(to bottom, transparent, rgba(var(--lift-rgb),.13), transparent);
}
.credencial b{
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); color: var(--oro-texto);
  line-height: 1; margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;
}
.credencial span{
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gris-500);
}
@media (max-width: 720px){
  .credenciales{ margin-top: -2.5rem; }
  .credenciales-caja{ grid-template-columns: repeat(2, 1fr); gap: .5rem 0; }
  .credencial:nth-child(3)::before{ display: none; }
  .credencial:nth-child(3), .credencial:nth-child(4){ padding-top: 1.4rem; }
  .credencial:nth-child(3)::after, .credencial:nth-child(4)::after{
    content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
    background: linear-gradient(90deg, transparent, rgba(var(--lift-rgb),.12), transparent);
  }
}

/* ---------------- 9. Secciones ---------------- */
.seccion{ position: relative; padding: var(--seccion) 0; isolation: isolate; }
.seccion-textura{ position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.seccion-textura img{ width:100%; height:100%; object-fit: cover; }
.seccion-velo{ position: absolute; inset: 0; z-index: -1; }

/* ---------------- 10. Servicios ---------------- */
.servicios{ background: var(--negro); }
.servicios .seccion-textura{ opacity: calc(.34 * var(--textura-fuerza)); }
.servicios .seccion-velo{
  background:
    radial-gradient(105% 70% at 50% 0%, rgba(var(--velo-rgb),.5), rgba(var(--velo-rgb),.93) 62%, var(--negro) 100%);
}

.rejilla-servicios{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
  gap: 1.1rem;
}
.tarjeta-servicio{
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem 1.5rem 1.35rem;
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta-servicio:hover{
  transform: translateY(-6px);
  border-color: var(--oro-linea);
  box-shadow: 0 40px 90px -34px rgba(var(--sombra-rgb),.95), var(--vidrio-luz), 0 0 0 1px rgba(201,169,79,.14);
}
/* Los tres paquetes llevan filo dorado permanente para jerarquizar sin gritar */
.tarjeta-servicio.destacada{ border-color: rgba(201,169,79,.28); }

.servicio-arte{
  position: relative;
  height: 116px; margin: -1.5rem -1.5rem 1.25rem;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--grafito), var(--onix));
  border-bottom: 1px solid rgba(var(--lift-rgb),.06);
  overflow: hidden;
}
.servicio-arte svg{ width: 42px; height: 42px; color: var(--oro-texto); position: relative; z-index: 2;
  transition: transform var(--transicion); }
.tarjeta-servicio:hover .servicio-arte svg{ transform: scale(1.09) rotate(-3deg); }
.servicio-arte::before{
  content:'D'; position:absolute; right: -.06em; bottom: -.34em;
  font-family: var(--display); font-weight: 700; font-size: 8.5rem;
  color: rgba(var(--lift-rgb),.032); line-height: 1; pointer-events: none;
}
.servicio-arte::after{
  content:''; position:absolute; inset:0;
  background-image: url('assets/veta-oro.webp');
  background-size: cover; background-position: center;
  opacity: .16; mix-blend-mode: screen;
}

/* Tarjeta con fotografía del negocio.
   La foto ocupa todo el arte y se apagan los dos adornos —la "D" gigante
   y la veta dorada en `screen`— porque encima de una fotografía son
   suciedad, no textura. El icono no desaparece: baja a sello dorado en
   la esquina, que es lo que mantiene emparentadas las tarjetas con foto
   y las que todavía no la tienen. */
.servicio-arte.con-foto{ background: var(--onix); }
.servicio-arte.con-foto::before,
.servicio-arte.con-foto::after{ display: none; }
.servicio-foto{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--transicion);
}
.tarjeta-servicio:hover .servicio-foto{ transform: scale(1.05); }
.servicio-sello{
  position: absolute; left: .85rem; bottom: .8rem; z-index: 3;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--oro);
  box-shadow: 0 4px 14px -4px rgba(var(--sombra-rgb),.8);
}
/* El sello lleva su propio tamaño: la regla de arriba pone el icono a
   42px, que dentro de un círculo de 34 se sale. */
.servicio-arte.con-foto .servicio-sello svg{
  width: 18px; height: 18px; color: var(--sobre-oro);
}
.tarjeta-servicio:hover .servicio-arte.con-foto .servicio-sello svg{ transform: none; }

.servicio-cinta{
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  padding: .28rem .6rem; border-radius: 99px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--oro); color: var(--sobre-oro);
}
.tarjeta-servicio h3{ margin-bottom: .4rem; }
.servicio-detalle{
  font-size: .87rem; color: var(--gris-500); line-height: 1.55;
  margin-bottom: 1.15rem; flex: 1;
}
.servicio-pie{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-top: 1rem; border-top: 1px solid rgba(var(--lift-rgb),.07);
}
.servicio-precio{
  font-family: var(--display); font-weight: 600; font-size: 1.6rem;
  color: var(--oro-texto); font-variant-numeric: tabular-nums; line-height: 1;
}
.servicio-duracion{ font-size: .78rem; color: var(--gris-500); letter-spacing: .06em; }
.servicio-agendar{
  margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .84rem; font-weight: 700; color: var(--gris-300);
  transition: color 240ms ease, gap 240ms ease;
}
.servicio-agendar svg{ width: 14px; height: 14px; }
.tarjeta-servicio:hover .servicio-agendar{ color: var(--oro-texto-alto); gap: .75rem; }

.nota-extras{
  margin-top: 1.75rem; padding: 1.1rem 1.4rem;
  border-radius: var(--radio-sm);
  border: 1px dashed rgba(var(--lift-rgb),.12);
  font-size: .88rem; color: var(--gris-300);
}
.nota-extras strong{ color: var(--marfil); font-weight: 700; }
.nota-extras em{ font-style: normal; color: var(--oro-texto); font-weight: 700; }

/* ---------------- 11. El oficio (nosotros) ---------------- */
.oficio{ background: var(--onix); }
.oficio .seccion-textura{ opacity: calc(.2 * var(--textura-fuerza)); }
.oficio .seccion-velo{
  background: linear-gradient(105deg, var(--negro) 10%, rgba(var(--velo-rgb),.94) 52%, rgba(var(--velo-rgb),.78) 100%);
}
.oficio-caja{
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
@media (max-width: 900px){ .oficio-caja{ grid-template-columns: 1fr; } }

.oficio-retrato{ position: relative; }
.oficio-foto{
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radio);
  filter: contrast(1.04) saturate(.92);
  box-shadow: 0 40px 90px -30px rgba(var(--sombra-rgb),.95);
}
/* Marco dorado desplazado — recurso clásico de editorial de lujo */
.oficio-retrato::before{
  content:''; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border: 1px solid rgba(201,169,79,.5); border-radius: var(--radio);
  z-index: 0;
}
.oficio-foto{ position: relative; z-index: 1; }
.oficio-sello{
  position: absolute; left: 50%; bottom: -1.9rem; transform: translateX(-50%);
  width: min(76%, 270px);
  opacity: 1;
  filter: drop-shadow(0 12px 30px rgba(var(--sombra-rgb),.85));
}
@media (max-width: 900px){
  .oficio-retrato{ max-width: 420px; margin-inline: auto; }
  .oficio-sello{ position: static; transform:none; margin: 2rem auto 0; }
}

.pilares{ display: grid; gap: 1.4rem; margin-top: 2.5rem; }
.pilar{ display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.pilar-num{
  font-family: var(--display); font-size: .82rem; font-weight: 700;
  color: var(--oro-texto); letter-spacing: .1em;
  padding-top: .28rem; min-width: 2.1rem;
  border-top: 1px solid var(--oro-linea);
}
.pilar h3{ font-size: 1.08rem; margin-bottom: .3rem; }
.pilar p{ font-size: .93rem; color: var(--gris-500); line-height: 1.62; }

/* Equipo */
.equipo{ margin-top: clamp(3.5rem, 7vw, 5.5rem); }
/* Tope de 4 columnas: con 7 barberos, más columnas dejan una fila huérfana. */
.rejilla-equipo{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .9rem; max-width: 960px; margin-inline: auto;
}
.barbero{
  text-align: center; padding: 1.5rem 1rem 1.35rem;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(var(--lift-rgb),.06);
  background: linear-gradient(170deg, rgba(var(--lift-rgb),.035), rgba(var(--lift-rgb),.008));
  transition: border-color 300ms ease, transform 300ms ease;
}
.barbero:hover{ border-color: var(--oro-linea); transform: translateY(-4px); }
.barbero-medalla{
  width: 60px; height: 60px; margin: 0 auto .9rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--oro-linea);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  color: var(--oro-texto); letter-spacing: .04em;
  background: radial-gradient(circle at 32% 26%, rgba(201,169,79,.16), transparent 62%);
}
.barbero b{ display:block; font-size: .93rem; color: var(--marfil); font-weight: 700; margin-bottom: .25rem; }
.barbero span{ font-size: .76rem; color: var(--gris-500); line-height: 1.45; display:block; }
.barbero i{
  display:block; margin-top: .6rem; font-style: normal;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-texto);
}

/* ---------------- 12. Productos ---------------- */
.productos{ background: var(--negro); }
.productos .seccion-textura{ opacity: calc(.22 * var(--textura-fuerza)); }
.productos .seccion-velo{
  background: radial-gradient(90% 60% at 78% 12%, rgba(var(--velo-rgb),.55), var(--negro) 66%);
}
.rejilla-productos{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
  gap: 1rem;
}
.producto{
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.4rem 1.35rem;
  transition: transform 340ms ease, border-color 340ms ease;
}
.producto:hover{ transform: translateY(-4px); border-color: var(--oro-linea); }
.producto-cat{
  align-self: flex-start;
  padding: .24rem .6rem; border-radius: 99px;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--oro-texto); border: 1px solid var(--oro-tenue); background: rgba(201,169,79,.06);
}
.producto b{ font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--marfil); }
.producto span{ font-size: .84rem; color: var(--gris-500); line-height: 1.55; flex: 1; }
.producto strong{
  font-family: var(--display); font-weight: 600; font-size: 1.28rem; color: var(--oro-texto);
  font-variant-numeric: tabular-nums; margin-top: .35rem;
}
.nota-productos{
  margin-top: 1.75rem; font-size: .86rem; color: var(--gris-500);
  display: flex; align-items: center; gap: .6rem;
}
.nota-productos svg{ width: 15px; height: 15px; color: var(--oro-texto); flex: none; }

/* ---------------- 13. Agenda ---------------- */
.agenda{ background: var(--negro); }
.agenda .seccion-textura{ opacity: calc(.55 * var(--textura-fuerza)); }
.agenda .seccion-textura img{ object-position: center 35%; }
.agenda .seccion-velo{
  background:
    linear-gradient(to bottom, var(--negro) 0%, rgba(var(--velo-rgb),.6) 22%, rgba(var(--velo-rgb),.72) 78%, var(--negro) 100%);
}
.consola{ padding: clamp(1.5rem, 3.5vw, 2.75rem); }

/* Pasos */
.pasos{
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: .25rem;
}
.pasos::-webkit-scrollbar{ display: none; }
.paso{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .95rem; border-radius: 99px; flex: none;
  font-size: .8rem; font-weight: 600; color: var(--gris-500);
  border: 1px solid transparent;
  transition: color 260ms ease, border-color 260ms ease, background-color 260ms ease;
}
.paso-num{
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 800;
  border: 1px solid currentColor;
}
.paso[data-estado="activo"]{
  color: var(--oro-texto); border-color: var(--oro-linea); background: rgba(201,169,79,.08);
}
.paso[data-estado="hecho"]{ color: var(--gris-100); }
.paso[data-estado="hecho"] .paso-num{ background: var(--oro); border-color: var(--oro-texto); color: var(--sobre-oro); }
.pasos-sep{ width: 18px; height:1px; background: rgba(var(--lift-rgb),.12); flex: none; }
/* En móvil los cuatro pasos no caben con sus rótulos: sólo el paso actual lo
   conserva, los demás quedan como números. Así se ve el recorrido completo. */
@media (max-width: 620px){
  .paso:not([data-estado="activo"]) > span:last-child{ display: none; }
  .paso{ padding: .5rem .55rem; }
  .pasos-sep{ width: 12px; }
}

.panel-paso{ animation: entrar-paso 420ms cubic-bezier(.22,.61,.36,1) both; }
@keyframes entrar-paso{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.paso-titulo{
  font-family: var(--display); font-size: 1.28rem; font-weight: 600;
  color: var(--marfil); margin-bottom: .35rem;
}
.paso-ayuda{ font-size: .88rem; color: var(--gris-500); margin-bottom: 1.5rem; }

/* Opciones seleccionables (servicio, barbero) */
.opciones{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 252px), 1fr));
  gap: .7rem;
}
.opcion{
  position: relative; text-align: left;
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(var(--lift-rgb),.09);
  background: rgba(var(--lift-rgb),.025);
  transition: border-color 240ms ease, background-color 240ms ease, transform 240ms ease;
}
.opcion:hover{ border-color: rgba(var(--lift-rgb),.22); transform: translateY(-2px); }
.opcion[aria-pressed="true"]{
  border-color: var(--oro-texto);
  background: rgba(201,169,79,.11);
  box-shadow: 0 0 0 1px rgba(201,169,79,.35);
}
.opcion[aria-pressed="true"]::after{
  content:''; position:absolute; top: .8rem; right: .9rem;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--oro);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  mask-composite: exclude;
}
.opcion b{ font-size: .96rem; color: var(--marfil); font-weight: 700; padding-right: 1.6rem; }
.opcion span{ font-size: .8rem; color: var(--gris-500); line-height: 1.5; }
.opcion i{
  font-style: normal; font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; color: var(--oro-texto); margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}
.opcion-inicial{
  width: 38px; height: 38px; border-radius: 50%; margin-bottom: .45rem;
  display: grid; place-items: center;
  font-family: var(--display); font-size: .82rem; font-weight: 600; color: var(--oro-texto);
  border: 1px solid var(--oro-linea);
}

/* Segmentado de sucursal */
.segmentado{
  display: inline-flex; gap: .25rem; padding: .25rem;
  border-radius: 99px; border: 1px solid rgba(var(--lift-rgb),.09);
  background: rgba(var(--sombra-rgb),.3); margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.segmentado button{
  padding: .45rem 1rem; border-radius: 99px;
  font-size: .8rem; font-weight: 600; color: var(--gris-500);
  transition: color 220ms ease, background-color 220ms ease;
}
.segmentado button[aria-pressed="true"]{ background: rgba(201,169,79,.16); color: var(--oro-texto-alto); }

/* Extras */
.extras{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }
.extra{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .95rem; border-radius: 99px;
  border: 1px dashed rgba(var(--lift-rgb),.16);
  font-size: .84rem; color: var(--gris-300);
  transition: border-style 200ms ease, border-color 240ms ease, color 240ms ease, background-color 240ms ease;
}
.extra:hover{ border-color: rgba(var(--lift-rgb),.3); color: var(--marfil); }
.extra[aria-pressed="true"]{
  border-style: solid; border-color: var(--oro-texto);
  background: rgba(201,169,79,.12); color: var(--oro-texto-alto);
}
.extra em{ font-style: normal; color: var(--oro-texto); font-weight: 700; }

/* Calendario */
.agenda-fecha{ display: grid; grid-template-columns: minmax(0,320px) 1fr; gap: clamp(1.5rem, 4vw, 2.75rem); }
@media (max-width: 820px){ .agenda-fecha{ grid-template-columns: 1fr; } }

.calendario{ }
.cal-cabeza{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cal-mes{ font-family: var(--display); font-size: 1.06rem; font-weight: 600; color: var(--marfil); }
.cal-nav{
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--lift-rgb),.11); color: var(--gris-300);
  transition: border-color 220ms ease, color 220ms ease;
}
.cal-nav:hover:not([disabled]){ border-color: var(--oro-texto); color: var(--oro-texto); }
.cal-nav[disabled]{ opacity: .28; cursor: not-allowed; }
.cal-nav svg{ width: 15px; height: 15px; }
.cal-semana, .cal-rejilla{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-semana{ margin-bottom: 6px; }
.cal-semana span{
  text-align: center; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; color: var(--gris-500); padding: .3rem 0;
}
.cal-dia{
  aspect-ratio: 1; min-height: 34px;
  display: grid; place-items: center; position: relative;
  border-radius: 9px; font-size: .87rem; font-weight: 600;
  color: var(--gris-100);
  border: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.cal-dia:hover:not([disabled]){ background: rgba(var(--lift-rgb),.07); border-color: rgba(var(--lift-rgb),.14); }
.cal-dia[disabled]{ color: var(--gris-700); cursor: not-allowed; }
.cal-dia.hueco{ visibility: hidden; }
.cal-dia.hoy::after{
  content:''; position:absolute; bottom: 5px; left:50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: var(--oro);
}
.cal-dia[aria-pressed="true"]{
  background: var(--oro); border-color: var(--oro-texto); color: var(--sobre-oro); font-weight: 800;
}
.cal-dia[aria-pressed="true"]::after{ background: var(--negro); }
.cal-leyenda{
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  margin-top: 1rem; font-size: .72rem; color: var(--gris-500);
}
.cal-leyenda i{ font-style: normal; display: inline-flex; align-items: center; gap: .4rem; }
.cal-leyenda i::before{ content:''; width: 9px; height: 9px; border-radius: 3px; background: currentColor; opacity: .55; }
.cal-leyenda .lg-libre::before{ background: var(--oro); opacity: 1; }
.cal-leyenda .lg-cerrado::before{ background: var(--gris-700); }

/* Horas */
.horas-cabeza{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: 1rem;
}
.horas-fecha{ font-family: var(--display); font-size: 1.06rem; font-weight: 600; color: var(--marfil); }
.horas-escasez{ font-size: .78rem; color: var(--oro-texto); font-weight: 600; }
.horas-escasez.pocas{ color: var(--aviso); }
.rejilla-horas{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .5rem;
}
.hora{
  padding: .68rem .5rem; border-radius: 10px;
  font-size: .87rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--gris-100);
  border: 1px solid rgba(var(--lift-rgb),.1);
  background: rgba(var(--lift-rgb),.025);
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.hora:hover{ border-color: rgba(var(--lift-rgb),.26); transform: translateY(-2px); }
.hora[aria-pressed="true"]{
  background: var(--oro); border-color: var(--oro-texto); color: var(--sobre-oro); font-weight: 800;
}
.sin-horas{
  padding: 2rem 1.25rem; text-align: center; border-radius: var(--radio-sm);
  border: 1px dashed rgba(var(--lift-rgb),.12); color: var(--gris-500); font-size: .9rem;
}
.sin-horas b{ display:block; color: var(--marfil); font-family: var(--display); font-size: 1.05rem; margin-bottom: .4rem; }

/* Formulario */
.campos{ display: grid; gap: 1.1rem; max-width: 34rem; }
.campo{ display: grid; gap: .4rem; }
.campo label{ font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-500); }
.campo input{
  padding: .85rem 1rem; border-radius: 10px;
  background: rgba(var(--sombra-rgb),.32);
  border: 1px solid rgba(var(--lift-rgb),.12);
  color: var(--marfil); font-size: .96rem;
  transition: border-color 220ms ease, background-color 220ms ease;
}
.campo input::placeholder{ color: var(--gris-500); }
.campo input:focus{ outline: none; border-color: var(--oro-texto); background: rgba(var(--sombra-rgb),.5); }
.campo input:focus-visible{ outline: 2px solid var(--oro); outline-offset: 2px; }
.campo-ayuda{ font-size: .78rem; color: var(--gris-500); }
.campo-error{ font-size: .82rem; color: var(--alerta); font-weight: 600; }

/* Aviso simplificado en el punto de captura */
.aviso-corto{
  padding: 1rem 1.15rem; border-radius: var(--radio-sm);
  background: rgba(var(--lift-rgb),.04); border: 1px solid var(--vidrio-borde);
  font-size: .82rem; line-height: 1.6; color: var(--gris-500);
}
.aviso-corto b{ display:block; margin-bottom:.5rem; color: var(--oro-texto-alto); font-size:.86rem; }
.aviso-corto p{ margin: 0 0 .55rem; }
.aviso-corto a{ color: var(--oro-texto); text-decoration: underline; text-underline-offset: 3px; }
.aviso-corto svg{ width: 11px; height: 11px; margin-left: .25rem; }
.casilla i{ font-style: normal; color: var(--gris-500); font-weight: 500; }

.casilla{
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.15rem; border-radius: var(--radio-sm);
  border: 1px solid rgba(var(--lift-rgb),.09);
  background: rgba(var(--lift-rgb),.02);
  cursor: pointer;
  transition: border-color 240ms ease, background-color 240ms ease;
}
.casilla:hover{ border-color: rgba(var(--lift-rgb),.2); }
.casilla:has(input:checked){ border-color: var(--oro-linea); background: rgba(201,169,79,.06); }
.casilla input{ accent-color: var(--oro-texto); width: 17px; height: 17px; margin-top: .22rem; flex: none; }
.casilla b{ display:block; font-size: .92rem; color: var(--marfil); font-weight: 700; margin-bottom: .18rem; }
.casilla span{ font-size: .82rem; color: var(--gris-500); line-height: 1.55; }

.resumen{
  max-width: 34rem;   /* mismo ancho que el formulario: el ojo no cruza 1000px entre etiqueta y dato */
  padding: 1.35rem 1.5rem; border-radius: var(--radio-sm);
  border: 1px solid var(--oro-tenue); background: rgba(201,169,79,.045);
  margin-bottom: 1.75rem;
}
.resumen-linea{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .48rem 0; font-size: .9rem;
  border-bottom: 1px solid rgba(var(--lift-rgb),.06);
}
.resumen-linea:last-child{ border-bottom: 0; }
.resumen-linea dt{ color: var(--gris-500); }
.resumen-linea dd{ margin: 0; color: var(--marfil); font-weight: 600; text-align: right; }
.resumen-total{ padding-top: .8rem; margin-top: .3rem; border-top: 1px solid var(--oro-tenue); }
.resumen-total dd{ font-family: var(--display); font-size: 1.5rem; color: var(--oro-texto); font-variant-numeric: tabular-nums; }

.acciones-paso{
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  margin-top: 1.85rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--lift-rgb),.07);
}
.acciones-paso .btn-oro{ margin-left: auto; }
@media (max-width: 560px){
  .acciones-paso .btn-oro{ margin-left: 0; width: 100%; order: -1; }
  .acciones-paso{ flex-direction: column-reverse; align-items: stretch; }
}

/* Confirmación */
.confirmacion{ text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.sello-confirmado{
  width: 76px; height: 76px; margin: 0 auto 1.5rem;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--oro); color: var(--oro-texto);
  background: radial-gradient(circle at 34% 28%, rgba(201,169,79,.2), transparent 66%);
  animation: sellar 620ms cubic-bezier(.34,1.56,.64,1) both;
}
.sello-confirmado svg{ width: 32px; height: 32px; }
@keyframes sellar{ from{ transform: scale(.55); opacity:0; } to{ transform: scale(1); opacity:1; } }
.folio{
  display: inline-block; margin-top: .35rem; padding: .3rem .8rem;
  border-radius: 6px; border: 1px dashed var(--oro-linea);
  font-size: .78rem; letter-spacing: .12em; color: var(--oro-texto);
  font-variant-numeric: tabular-nums;
}
.confirmacion-acciones{ display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; }
.aviso-sync{
  margin-top: 1.75rem; padding: .9rem 1.2rem; border-radius: var(--radio-sm);
  background: rgba(var(--lift-rgb),.032); border: 1px solid rgba(var(--lift-rgb),.08);
  font-size: .84rem; color: var(--gris-500); text-align: left;
  display: flex; gap: .75rem; align-items: flex-start;
  max-width: 34rem; margin-inline: auto;
}
.aviso-sync svg{ width: 16px; height: 16px; color: var(--oro-texto); flex: none; margin-top: .18rem; }

.alerta{
  padding: .85rem 1.15rem; border-radius: 10px; margin-bottom: 1.25rem;
  font-size: .88rem; font-weight: 600;
  border: 1px solid var(--alerta-linea); background: var(--alerta-fondo); color: var(--alerta-texto);
}

/* ---------------- 14. Preguntas ---------------- */
.preguntas{ background: var(--onix); }
.lista-preguntas{ max-width: 52rem; margin-inline: auto; }
.pregunta{ border-bottom: 1px solid rgba(var(--lift-rgb),.07); }
.pregunta:first-child{ border-top: 1px solid rgba(var(--lift-rgb),.07); }
.pregunta-btn{
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.45rem .25rem;
  font-family: var(--display); font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem);
  font-weight: 600; color: var(--marfil);
  transition: color 240ms ease;
}
.pregunta-btn:hover{ color: var(--oro-texto-alto); }
.pregunta-mas{
  width: 26px; height: 26px; flex: none; position: relative;
  border-radius: 50%; border: 1px solid var(--oro-linea);
}
.pregunta-mas::before, .pregunta-mas::after{
  content:''; position:absolute; left:50%; top:50%; background: var(--oro);
  transform: translate(-50%,-50%); transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.pregunta-mas::before{ width: 11px; height: 1.5px; }
.pregunta-mas::after{ width: 1.5px; height: 11px; }
.pregunta-btn[aria-expanded="true"] .pregunta-mas::after{ transform: translate(-50%,-50%) rotate(90deg); }
.pregunta-cuerpo{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(.22,.61,.36,1);
}
.pregunta-cuerpo.abierta{ grid-template-rows: 1fr; }
.pregunta-cuerpo > div{ overflow: hidden; }
.pregunta-cuerpo p{
  padding: 0 3rem 1.6rem .25rem;
  font-size: .95rem; color: var(--gris-500); line-height: 1.72;
}

/* ---------------- 15. Cierre y pie ---------------- */
.cierre{ position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; text-align: center; isolation: isolate; }
.cierre .seccion-textura{
  opacity: calc(.5 * var(--textura-fuerza));
  background-image: var(--textura-cierre);
  background-size: cover;
  background-position: center;
}
/* Los rombos son una figura, no un veteado: si se quedaran al 17% como
   el resto de las vetas no se verían, así que en claro el cierre pesa
   más que las demás secciones. */
:root[data-tema="claro"] .cierre .seccion-textura{ opacity: .42; }
.cierre .seccion-velo{
  background: linear-gradient(to bottom, var(--negro), rgba(var(--velo-rgb),.72) 40%, rgba(var(--velo-rgb),.86) 100%);
}

.pie{ background: var(--negro); border-top: 1px solid rgba(var(--lift-rgb),.07); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; }
.pie-caja{
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 3rem;
}
@media (max-width: 900px){ .pie-caja{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .pie-caja{ grid-template-columns: 1fr; } }

.pie-logo{ width: min(100%, 240px); margin-bottom: 1.25rem; opacity: .95; }
.pie-lema{ font-size: .88rem; color: var(--gris-500); line-height: 1.65; max-width: 26rem; }
.pie h4{
  font-family: var(--texto); font-size: .68rem; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase; color: var(--oro-texto);
  margin: 0 0 1.1rem;
}
.pie ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie li{ font-size: .88rem; color: var(--gris-500); line-height: 1.5; }
/* WCAG 2.2 AA pide objetivos de 24×24 px como mínimo: los enlaces del pie
   medían 19 px de alto. El relleno vertical los sube sin mover el ritmo visual. */
.pie a{ display: inline-block; padding-block: .2rem; min-height: 24px; }
.pie a:hover{ color: var(--oro-texto-alto); }
.pie-sede b{ display:block; color: var(--gris-100); font-weight: 700; font-size: .88rem; }
.pie-sede span{ font-size: .8rem; }

/* Marca de dato pendiente de confirmar con el cliente */
.pendiente{
  color: var(--oro-texto); font-style: italic;
  border-bottom: 1px dotted var(--oro-hondo); cursor: help;
}

.pie-fondo{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(var(--lift-rgb),.07);
  font-size: .78rem; color: var(--gris-500);
}
.pie-fondo a{ color: var(--gris-500); }
.pie-redes{ display: flex; gap: .5rem; }
.pie-redes a{
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--lift-rgb),.1); color: var(--gris-300);
  transition: border-color 240ms ease, color 240ms ease, transform 240ms ease;
}
.pie-redes a:hover{ border-color: var(--oro-texto); color: var(--oro-texto); transform: translateY(-2px); }
.pie-redes svg{ width: 16px; height: 16px; }

/* ---------------- 16. Barra móvil ---------------- */
.barra-movil{
  position: fixed; inset: auto 0 0; z-index: 880;
  display: none; gap: .6rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(var(--velo-rgb),.82);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid rgba(var(--lift-rgb),.08);
  transform: translateY(110%);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.barra-movil.visible{ transform: translateY(0); }
.barra-movil .btn{ flex: 1; }
@media (max-width: 780px){ .barra-movil{ display: flex; } body{ padding-bottom: 0; } }

/* ---------------- 17. Revelado al hacer scroll ---------------- */
.revelar{ opacity: 0; transform: translateY(26px); }
.revelar.visible{
  opacity: 1; transform: none;
  transition: opacity 760ms cubic-bezier(.22,.61,.36,1), transform 760ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--retraso, 0ms);
}

/* ---------------- 18. Movimiento reducido ---------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .revelar{ opacity: 1; transform: none; }
  .hero-fondo{ transform: none !important; }
  .poste{ animation: none; }
  /* El interruptor entra en la regla general de arriba: quien pidió no
     ver movimiento tampoco ve el sol convertirse en luna. */
}

/* ---------------- 19. Impresión ---------------- */
@media print{
  .nav, .barra-movil, .hero-scroll, .menu-movil, body::after{ display: none !important; }
  body{ background: #fff; color: #000; }
  .seccion-textura, .seccion-velo, .hero-fondo{ display: none !important; }
}

/* ============================================================
   20. Página de documento (Aviso de Privacidad)
   Medida de lectura corta y jerarquía tranquila: es un texto que
   la gente sí tiene que poder leer, no un adorno de marca.
   ============================================================ */
.documento{
  position: relative; isolation: isolate;
  padding: calc(var(--seccion) * .8) 0 var(--seccion);
  background: var(--negro);
}
.documento .seccion-textura{ opacity: calc(.2 * var(--textura-fuerza)); }
.documento .seccion-velo{
  background: radial-gradient(110% 60% at 50% 0%, rgba(var(--velo-rgb),.6), var(--negro) 58%);
}
.doc-caja{ max-width: 46rem; }
.doc-titulo{
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem);
  margin-bottom: 1rem;
}
.doc-meta{
  font-size: .84rem; color: var(--gris-500);
  padding-bottom: 1.75rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--oro-tenue);
}
.doc-alerta{
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1.1rem 1.3rem; margin-bottom: 2.5rem;
  border-radius: var(--radio-sm);
  border: 1px solid var(--oro-tenue); background: rgba(201,169,79,.06);
  font-size: .88rem; line-height: 1.65; color: var(--gris-300);
}
.doc-alerta svg{ width: 17px; height: 17px; color: var(--oro-texto); flex: none; margin-top: .2rem; }
.doc-alerta b{ color: var(--marfil); }

.doc-bloque{ margin-bottom: 2.1rem; }
.doc-bloque h2{
  font-size: clamp(1.12rem, 1.05rem + .35vw, 1.32rem);
  margin-bottom: .55rem;
  letter-spacing: -.01em;
}
.doc-bloque p{
  font-size: .96rem; line-height: 1.78; color: var(--gris-300);
  margin: 0;
}
.doc-pie{
  display: flex; flex-wrap: wrap; gap: .8rem;
  padding-top: 2.25rem; margin-top: 1rem;
  border-top: 1px solid rgba(var(--lift-rgb),.08);
}

/* Casilla del consentimiento: la única obligatoria del formulario, así que se
   marca en rojo cuando falta en vez de fallar en silencio. */
.casilla-aviso a{
  color: var(--oro-texto); font-weight: 600;
  display: inline-flex; align-items: center; gap: .3rem;
  border-bottom: 1px solid var(--oro-tenue);
}
.casilla-aviso a:hover{ color: var(--oro-texto-alto); border-bottom-color: var(--oro-texto); }
.casilla-aviso a svg{ width: .8em; height: .8em; }
.casilla.con-error{ border-color: rgba(240,144,144,.55); background: rgba(240,144,144,.06); }