/* ═══════════════════════════════════════════════════════════════════════════
   WAX & NAILS · Dirección "Cantera y Esmalte", piel "MALVA DE CANTERA"
   Hoja propia de la landing. Depende de css/base.css (cargada antes).

   REGLA DE ORIGEN: la piel es pastel, pero ningún hex se eligió por gusto.
   El color dueño sale del mismo material de siempre —la cantera rosa de los
   portales del centro de Aguascalientes— leída a la hora azul, cuando el rosa
   de la piedra vira a malva. Los pasteles de apoyo son los tonos que de verdad
   salen de una mesa de manicura: durazno, salvia, azul hielo y miel de cera.

   REGLA QUE SOSTIENE TODO EL DISEÑO:
   los pasteles son SUPERFICIES, nunca texto. El texto y las acciones van en la
   versión profunda del mismo tono. Un pastel sobre pastel es ilegible; un
   pastel de fondo con tinta profunda encima se ve caro.

   Todos los pares están verificados a AA con código antes de entregar
   (143/143). Ningún hex crudo fuera del bloque :root, salvo los tres
   initial-value de @property, que es donde tienen que estar.

   MOVIMIENTO: todos los valores salen de _design/sistema/tabla-de-movimiento.md.
   No hay una sola duración ni un solo easing inventado aquí.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────────────
   0 · @property — el Abanico reescribe el acento en runtime.
   Sin registrar el tipo, el navegador no sabe interpolar un color y el cambio
   sería un corte seco. Con esto, los 420ms de la fila W5 son un fundido real.

   Con la piel pastel el Abanico escribe DOS valores por esmalte:
   --acento-suave  = el pastel  (superficies, velos, fondos)
   --acento        = su par profundo (texto encima, botones, bordes activos)
   ─────────────────────────────────────────────────────────────────────────── */
@property --acento       { syntax: '<color>';  inherits: true; initial-value: #5B3B74; }
@property --acento-suave { syntax: '<color>';  inherits: true; initial-value: #D6C3E2; }
@property --acento-texto { syntax: '<color>';  inherits: true; initial-value: #FFFDFF; }
@property --abanico-apertura { syntax: '<number>'; inherits: true; initial-value: 0.08; }


/* ───────────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ───── COLOR DUEÑO · MALVA DE CANTERA ─────
     El 60% de las superficies del sitio vive en esta familia, incluidos los
     neutros: el papel y la tinta están tintados de malva, no son grises. */
  --malva-100: #F2EBF7;   /* fondo de sección */
  --malva-200: #E6D9EF;   /* superficie elevada, chip inactivo */
  --malva-300: #D6C3E2;   /* EL COLOR DUEÑO. Bloques grandes. Solo tinta encima (9.26:1) */
  --malva-500: #9B7FAE;   /* valor medio: solo dibujo (marcador de foto). Nunca texto */
  --malva-700: #5B3B74;   /* acento profundo por defecto. Blanco encima: 8.93:1 */

  /* ───── COLOR · familia pastel de APOYO (ritmo cromático del scroll) ───── */
  --durazno-100: #FCF1E9;  --durazno-200: #F7DCC8;  --durazno-700: #8A4A1C;
  --salvia-100:  #EDF3ED;  --salvia-200:  #D8E6D9;  --salvia-700:  #33603F;
  --hielo-100:   #EDF3F8;  --hielo-200:   #D5E3EF;  --hielo-700:   #2B5578;

  /* ───── COLOR · familia CERA (miel pastel; solo depilación) ───── */
  --cera-100: #FDF6E6;
  --cera-200: #F7E7C4;
  --cera-500: #B98A2E;
  --cera-700: #7A5411;

  /* ───── COLOR · neutros tintados de malva (nunca grises fríos) ───── */
  --papel:       #FCFAFD;
  --papel-2:     #F6F2F8;
  --linea:       #E8DFEE;   /* hairline decorativo */
  --linea-fuerte:#8E7C9C;   /* borde funcional: 3.67:1 sobre papel */
  --tinta:       #2C2136;   /* tinta profunda derivada del malva. 14.68:1 sobre papel */
  --tinta-2:     #574A63;   /* 7.86:1 sobre papel, 4.97:1 sobre el color dueño */
  --tinta-inv:   #FFFDFF;

  /* ───── COLOR · funcionales (UI, no marca) ───── */
  --ok:     #2F6446;
  --alerta: #97243F;
  --aviso:  #7A5411;

  /* ───── COLOR · roles semánticos ───── */
  --fondo:        var(--papel);
  --fondo-elev:   var(--papel-2);
  --fondo-alt:    var(--malva-100);
  --texto:        var(--tinta);
  --texto-2:      var(--tinta-2);
  --borde:        var(--linea);
  --borde-fuerte: var(--linea-fuerte);
  --acento:       #5B3B74;
  --acento-suave: #D6C3E2;
  --acento-texto: #FFFDFF;
  --foco:         var(--tinta);
  --scrim:        rgba(44, 33, 54, .46);

  /* ───── TIPOGRAFÍA · familias (con fallback local decente sin internet) ───── */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --f-texto:   "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-datos:   "Spline Sans Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* ───── TIPOGRAFÍA · escala ───── */
  --t-micro: 0.75rem;
  --t-cap:   0.8125rem;
  --t-sm:    0.9375rem;
  --t-base:  1.0625rem;
  --t-lg:    1.25rem;
  --t-xl:    1.5625rem;
  --t-2xl:   clamp(1.75rem, 1.15rem + 2.4vw, 2.5rem);
  --t-3xl:   clamp(2.25rem, 1.35rem + 3.8vw, 3.75rem);
  --t-4xl:   clamp(3rem,   1.5rem  + 6.4vw, 6.5rem);
  --t-cita:  clamp(1.375rem, 1rem + 1.6vw, 2rem);

  /* ───── TIPOGRAFÍA · line-height ───── */
  --lh-hero: 0.94;
  --lh-3xl:  1.02;
  --lh-2xl:  1.12;
  --lh-xl:   1.25;
  --lh-lg:   1.45;
  --lh-base: 1.65;
  --lh-sm:   1.55;
  --lh-mono: 1.2;

  /* ───── TIPOGRAFÍA · tracking ───── */
  --tr-hero:  -0.034em;
  --tr-3xl:   -0.026em;
  --tr-2xl:   -0.018em;
  --tr-xl:    -0.012em;
  --tr-base:   0em;
  --tr-micro:  0.10em;

  /* ───── ESPACIADO (base 4px) ───── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10:128px; --s-11:192px;
  --seccion-y: clamp(96px, 6vw + 48px, 192px);

  /* ───── RADIOS (derivados del arco de cantera) ───── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   14px;
  --r-arco: 999px 999px 14px 14px;
  --r-pill: 999px;

  /* ───── ELEVACIÓN (luz única desde arriba; teñida con el COLOR DUEÑO) ─────
     Sobre pastel, una sombra negra ensucia y se ve barata: se ve gris sobre
     un fondo que tiene croma. Todas las sombras van teñidas con el malva
     profundo (91,59,116) y a opacidad más baja que en la piel anterior. */
  --e0: none;
  --e1: 0 1px 2px rgba(91,59,116,.05), 0 2px 8px rgba(91,59,116,.06);
  --e2: 0 2px 4px rgba(91,59,116,.05), 0 10px 24px -6px rgba(91,59,116,.13);
  --e3: 0 12px 48px -12px rgba(91,59,116,.22);
  --e-gloss: inset 0 1px 0 rgba(255,255,255,.72);
  --anillo-foco: 0 0 0 2px var(--papel), 0 0 0 4px var(--foco);

  /* ───── LAYOUT ───── */
  --ancho-max:     1180px;
  --ancho-lectura: 62ch;
  --margen:        20px;
  --gutter:        16px;

  /* ───── Z-INDEX ───── */
  --z-sticky: 10; --z-header: 20; --z-abanico: 30; --z-popover: 40;
  --z-fab: 50;    --z-scrim: 60; --z-drawer: 70;   --z-toast: 80;

  /* ───── MOVIMIENTO (tabla-de-movimiento.md) ───── */
  --d-1: 100ms; --d-2: 140ms; --d-3: 200ms; --d-4: 260ms;
  --d-5: 320ms; --d-6: 420ms; --d-7: 520ms; --d-8: 700ms;
  --ease-salida:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-entra-sale: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-cajon:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-color:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-toast-in:   cubic-bezier(0.21, 1.02, 0.73, 1);
  --ease-toast-out:  cubic-bezier(0.06, 0.71, 0.55, 1);
  --stagger: 60ms;
  --desplazamiento-revelado: 16px;

  /* ───── FIRMA · El Abanico ───── */
  --abanico-apertura: 0.08;   /* JS lo lleva a 1 */
  --abanico-palillos: 12;
  --abanico-paso:     7deg;
  --abanico-inicio:   -6deg;
  --pal-w:   34px;
  --pal-h:   168px;
  --pal-piv: 156px;
  --pal-r:   17px;

  /* ═════ PUENTE hacia base.css y la librería compartida ═════
     base.css, ui.js, booking.js y whatsapp.js leen tokens públicos con
     nombres genéricos. Aquí se les da el valor de la piel Malva de Cantera.
     Sin este bloque la librería se vería en gris neutro.
     OJO: --color-acento recibe el par PROFUNDO, nunca el pastel: booking.js
     pinta el botón de confirmar y el día elegido con él y les pone
     --color-sobre-acento encima. */
  --color-fondo:        var(--papel);
  --color-fondo-alt:    var(--malva-100);
  --color-superficie:   var(--papel-2);
  --color-texto:        var(--tinta);
  --color-texto-suave:  var(--tinta-2);
  --color-borde:        var(--linea);
  --color-acento:       var(--acento);
  --color-sobre-acento: var(--acento-texto);
  --color-exito:        var(--ok);
  --color-error:        var(--alerta);
  --color-backdrop:     var(--scrim);
  --color-whatsapp:     #128C7E;   /* color oficial de WhatsApp: no se altera */
  --fuente-texto:       var(--f-texto);
  --fuente-titulos:     var(--f-display);
  --radio-sm:           var(--r-xs);
  --radio-md:           var(--r-sm);
  --radio-lg:           var(--r-md);
  --sombra-media:       var(--e2);
  --sombra-alta:        var(--e3);
  --ancho-contenedor:         var(--ancho-max);
  --ancho-contenedor-angosto: 760px;
  --offset-ancla:             5.5rem;
  --reveal-desplazamiento:    var(--desplazamiento-revelado);

  /* El repintado del Abanico vive AQUÍ y en ningún otro lado: se cambia una
     sola custom property en :root y todos los consumidores la heredan ya
     interpolada. Fila W5 de la tabla: 420ms, --ease-color. */
  transition:
    --acento       var(--d-6) var(--ease-color),
    --acento-suave var(--d-6) var(--ease-color),
    --acento-texto var(--d-6) var(--ease-color);
}

@media (min-width: 768px) { :root { --margen: 32px; --gutter: 20px; } }
@media (min-width: 1024px){ :root { --gutter: 24px; } }

/* En puntero grueso el abanico crece 1.3× para que cada palillo supere los
   44px de objetivo táctil. La proporción de la geometría no cambia. */
@media (pointer: coarse) {
  :root { --pal-w: 44px; --pal-h: 218px; --pal-piv: 202px; --pal-r: 22px; }
}


/* ───────────────────────────────────────────────────────────────────────────
   2 · BASE
   ─────────────────────────────────────────────────────────────────────────── */
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 500; }

/* Foco: nunca se anima y nunca depende del acento. El Abanico puede poner
   Blanco Leche y un anillo de acento dejaría de verse. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--acento); color: var(--acento-texto); }

.seccion { padding-block: var(--seccion-y); }
.seccion--alt { background: var(--fondo-alt); }

/* RITMO CROMÁTICO · el scroll no puede ser todo del mismo pastel o se vuelve
   un solo bloque plano de 6000px. Cada sección recibe un tono de la familia,
   y el color dueño vuelve tres veces —abanico, presencia y los dos bloques
   de malva-300— para que la memoria lo fije. Los fondos son SUPERFICIE:
   el texto de todos ellos es --tinta o --tinta-2, nunca un pastel. */
#abanico   { background: var(--malva-100); }     /* dueño */
#trabajos  { background: var(--papel); }
#servicios { background: var(--malva-100); }     /* dueño · aquí van tarjetas de papel */
#reservar  { background: var(--salvia-100); }
#opiniones { background: var(--papel); }
#duena     { background: var(--hielo-100); }
#presencia { background: var(--malva-100); }     /* dueño */
#ubicacion { background: var(--durazno-100); }

.contenedor, .contenedor-angosto {
  width: min(100% - (var(--margen) * 2), var(--ancho-contenedor));
}
.contenedor-angosto { width: min(100% - (var(--margen) * 2), var(--ancho-contenedor-angosto)); }


/* ───────────────────────────────────────────────────────────────────────────
   3 · TIPOGRAFÍA DE COMPOSICIÓN
   ─────────────────────────────────────────────────────────────────────────── */
.etiqueta {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  line-height: var(--lh-mono);
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: var(--s-4);
}
.etiqueta--cera { color: var(--cera-700); }

.titulo-1, .hero__titulo {
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
  text-wrap: balance;
}
.titulo-2 {
  font-size: var(--t-3xl);
  font-weight: 400;
  line-height: var(--lh-3xl);
  letter-spacing: var(--tr-3xl);
  font-variation-settings: "opsz" 72, "SOFT" 70, "WONK" 1;
  text-wrap: balance;
}
.titulo-3 {
  font-size: var(--t-2xl);
  font-weight: 500;
  line-height: var(--lh-2xl);
  letter-spacing: var(--tr-2xl);
  font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 1;
  text-wrap: balance;
}
.titulo-4 {
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: var(--lh-xl);
  letter-spacing: var(--tr-xl);
  font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0;
}

.parrafo {
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--texto-2);
  max-width: var(--ancho-lectura);
  text-wrap: pretty;
}
.parrafo--destacado { font-size: var(--t-lg); line-height: var(--lh-lg); color: var(--texto); }
.parrafo + .parrafo { margin-top: var(--s-4); }

.seccion__cabeza { margin-bottom: var(--s-7); }
.seccion__cabeza .parrafo { margin-top: var(--s-4); }

.tabular { font-variant-numeric: tabular-nums; }


/* ───────────────────────────────────────────────────────────────────────────
   4 · ICONOS · una sola familia, trazo 1.75, nunca emoji
   ─────────────────────────────────────────────────────────────────────────── */
.ico {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-estrella { width: 1.05em; height: 1.05em; fill: var(--malva-700); stroke: none; }
.ico-estrella--media {
  /* Media estrella real, no una estrella "casi": se recorta a la mitad. */
  clip-path: inset(0 50% 0 0);
}
.estrellas { display: inline-flex; gap: 2px; vertical-align: -0.16em; }
.estrellas--fila { gap: 3px; }

/* Relleno y trazo para los SVG en línea. Se hace por clase y no con
   fill="var(--x)" porque los atributos de presentación con var() no son
   fiables en todos los motores; una figura sin color en la junta es un
   riesgo que no vale la pena correr. */
.f-papel   { fill: var(--papel); }
.f-papel2  { fill: var(--papel-2); }
.f-c100    { fill: var(--malva-100); }
.f-c200    { fill: var(--malva-200); }
.f-c400    { fill: var(--malva-300); }
.f-c400-55 { fill: var(--malva-300); opacity: .62; }
.f-linea   { fill: var(--linea); }
.f-acento  { fill: var(--acento); }
.s-linea   { stroke: var(--linea); fill: none; }
.s-papel   { stroke: var(--papel); fill: none; }
.s-lineaf  { stroke: var(--linea-fuerte); fill: none; }


/* ───────────────────────────────────────────────────────────────────────────
   5 · BOTONES
   Press 140ms / release 100ms, escala .97 (fila 2 y 3 de la tabla).
   El hover vive dentro de @media (hover: hover) para que un tap en móvil no
   dispare un estado que después se queda pegado.
   ─────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--r-sm);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Ojo: el botón primario NO transiciona `background-color`. Su fondo es
     var(--acento), que ya viene interpolado desde :root; ponerle otra
     transición encima produciría una doble curva y un fundido sucio. */
  transition: transform var(--d-2) var(--ease-salida),
              filter var(--d-2) var(--ease-color);
}
.btn:active { transform: scale(.97); transition-duration: var(--d-1); }

.btn--primario {
  background: var(--acento);
  color: var(--acento-texto);
  box-shadow: var(--e-gloss);   /* top coat: la única capa especular con el palillo */
  border: 1px solid transparent;
}
.btn--secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  /* Este sí: ni su fondo ni su borde dependen del acento. */
  transition: transform var(--d-2) var(--ease-salida),
              background-color var(--d-2) var(--ease-color),
              border-color var(--d-2) var(--ease-color);
}
.btn--cera { background: var(--cera-700); color: var(--tinta-inv); border: 1px solid transparent; }
.btn--grande { min-height: 54px; padding: 16px 28px; font-size: var(--t-lg); }

@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover { filter: brightness(.94); }
  .btn--secundario:hover { border-color: var(--texto); background: var(--papel-2); }
  .btn--cera:hover { filter: brightness(1.08); }
}


/* ───────────────────────────────────────────────────────────────────────────
   6 · CABECERA
   ─────────────────────────────────────────────────────────────────────────── */
.cab {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-3) var(--ease-entra-sale),
              box-shadow var(--d-3) var(--ease-entra-sale);
}
.cab[data-compacta="true"] { border-bottom-color: var(--linea); box-shadow: var(--e1); }

.cab__interior {
  width: min(100% - (var(--margen) * 2), var(--ancho-max));
  margin-inline: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.cab__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  margin-right: auto;
}
/* El encabezado ya no lleva monograma + texto compuesto: lleva el LOGOTIPO
   horizontal, dibujado en paths. La altura se fija (no el ancho) para que la
   proporción del dibujo mande y el trazo nunca se deforme. */
.cab__logotipo {
  display: block;
  height: 30px;
  width: auto;
}
@media (min-width: 880px) { .cab__logotipo { height: 34px; } }

.cab__logo { border-radius: var(--r-xs); }
.cab__nombre {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: var(--tr-xl);
  font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
}
.cab__amp { color: var(--malva-300); padding-inline: 1px; }

.cab__nav { display: none; gap: var(--s-5); }
.cab__nav a {
  font-size: var(--t-sm);
  color: var(--texto-2);
  text-decoration: none;
  padding-block: 12px;
  transition: color var(--d-2) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) {
  .cab__nav a:hover { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; }
}
.cab__cta { display: none; }

@media (min-width: 880px) {
  .cab__nav { display: flex; }
  .cab__cta { display: inline-flex; min-height: 42px; padding: 10px 18px; font-size: var(--t-sm); }
}


/* ───────────────────────────────────────────────────────────────────────────
   7 · HERO
   Sin revelado por scroll: el hero debe ser legible en el frame 1.
   La única excepción de movimiento es el descubrimiento de la pieza visual
   por clip-path (fila 23): 700ms, una sola vez por página.
   ─────────────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 5vw + 24px, 104px) var(--seccion-y); }
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }

.hero__titulo { margin-bottom: var(--s-5); }
.hero__entrada {
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
  color: var(--texto-2);
  max-width: 46ch;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__prueba {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.hero__prueba li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__prueba strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.hero__visual { position: relative; }
.hero__arco {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 380px;
  margin-inline: auto;
  border-radius: var(--r-arco);
  overflow: hidden;
  box-shadow: var(--e2);
  animation: heroDescubrir var(--d-8) var(--ease-entra-sale) 120ms both;
}
.hero__piedra { width: 100%; height: 100%; }

@keyframes heroDescubrir {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Insinuación del Abanico dentro del hero: cinco palillos apoyados en el arco.
   Es decoración anclada al motivo, no un adorno suelto: el control real vive
   más abajo y usa exactamente la misma forma. */
.hero__mazo {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 0;
  height: 0;
}
.hero__palillo {
  position: absolute;
  left: -13px;
  bottom: 0;
  width: 26px;
  height: 116px;
  border-radius: 13px 13px 3px 3px;
  background: var(--papel);
  border: 1px solid var(--linea);
  transform-origin: 50% 108px;
  transform: rotate(calc(-28deg + var(--i) * 14deg));
  box-shadow: var(--e1);
}
.hero__palillo i {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  border-radius: 0 0 3px 3px;
  box-shadow: var(--e-gloss);
}


/* ───────────────────────────────────────────────────────────────────────────
   8 · BANDA DE CITA
   ─────────────────────────────────────────────────────────────────────────── */
.banda {
  background: var(--malva-300);   /* EL COLOR DUEÑO, a bloque completo */
  padding-block: clamp(48px, 5vw, 88px);
}
.banda__interior { text-align: center; }
.banda__cita {
  font-family: var(--f-display);
  font-size: var(--t-cita);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
  color: var(--tinta);          /* sobre el color dueño solo va tinta: 9.26:1 */
  text-wrap: balance;
}
.banda__pie {
  margin-top: var(--s-4);
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--tinta-2);   /* 4.97:1 sobre el color dueño. Sin opacity: bajarle
                              la alfa a un texto sobre pastel rompe el cálculo */
}


/* ───────────────────────────────────────────────────────────────────────────
   9 · EL ABANICO · FIRMA
   Geometría de la spec: 12 palillos, pivote a 156px del borde superior,
   barrido de −6° a +71°. Se anima solo `transform`.
   ─────────────────────────────────────────────────────────────────────────── */
.abanico-seccion { overflow: hidden; }

.abanico-caja {
  margin-top: var(--s-7);
  display: grid;
  justify-items: center;
  gap: var(--s-5);
}

.abanico {
  position: relative;
  width: calc(1.05 * var(--pal-piv) + var(--pal-w));
  height: calc(var(--pal-h) + 32px);
  touch-action: pan-y;   /* el arrastre horizontal es nuestro; el vertical sigue siendo scroll */
  cursor: grab;
}
.abanico[data-modo="arrastre"] { cursor: grabbing; }

.palillo {
  position: absolute;
  left: calc(0.105 * var(--pal-piv));
  bottom: 8px;
  width: var(--pal-w);
  height: var(--pal-h);
  padding: 0;
  border-radius: var(--pal-r) var(--pal-r) 4px 4px;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  box-shadow: var(--e1);
  transform-origin: 50% var(--pal-piv);

  --ang: calc(var(--abanico-inicio) + (var(--i) * var(--abanico-paso)) * var(--apertura, var(--abanico-apertura)));
  transform: rotate(var(--ang)) translateY(calc(var(--i) * -1px));

  z-index: calc(20 - var(--i));
  /* Apertura: 520ms --ease-cajon con stagger de 26ms por índice (fila W1).
     El stagger es lo que lo convierte en abanico y no en 12 barras girando. */
  transition: transform var(--d-7) var(--ease-cajon);
  transition-delay: calc(var(--i) * 26ms);
}

/* Terminada la apertura, el stagger desaparece y la curva pasa a la de salida:
   a partir de aquí cada movimiento es una respuesta directa al usuario (W3, W4). */
.abanico[data-modo="listo"] .palillo,
.abanico[data-modo="arrastre"] .palillo {
  transition-delay: 0ms;
  transition: transform var(--d-5) var(--ease-salida);
}
/* Durante el arrastre el palillo sigue al dedo 1:1, sin transición (W2). */
.abanico[data-modo="arrastre"] .palillo { transition: none; }

.palillo__punta {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: var(--hex);
  border-radius: 0 0 3px 3px;
  box-shadow: var(--e-gloss);   /* top coat: única capa especular junto al botón */
}
/* El nombre va impreso SOBRE la punta, como en un muestrario real, y en el
   color de texto precalculado de ese esmalte (≥4.5:1 verificado). Ir a la
   parte de papel del palillo obligaba a bajar de 12px, que es el piso
   tipográfico absoluto del sistema. */
.palillo__nombre {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  line-height: var(--lh-mono);
  text-transform: uppercase;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

/* Elegido: sube al frente y se separa del mazo. La elevación es física,
   no un highlight de color (W4). */
.palillo[aria-checked="true"] {
  z-index: var(--z-abanico);
  transform: rotate(var(--ang)) translateY(calc(var(--i) * -1px - 14px)) scale(1.06);
  box-shadow: var(--e2);
}
.palillo[aria-checked="true"] .palillo__punta {
  box-shadow: var(--e-gloss), inset 0 0 0 2px var(--tinta);
}
/* La punta es pastel; el nombre impreso encima va en el par PROFUNDO de ese
   mismo esmalte (--txt), no en tinta genérica: así el rótulo es del color
   del esmalte y sigue midiendo ≥4.5:1 contra su propia punta. */
/* El anillo de foco usa tinta y no acento: con Blanco Leche seleccionado un
   anillo de acento sería invisible. Nunca se anima (fila 4). */
.palillo:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
}

/* base.css aplica `transform: scale(.97)` a TODO botón en :active y ganaría
   por especificidad, borrando la rotación del palillo a media pulsación.
   Aquí se restituye la geometría del abanico con la especificidad necesaria. */
.abanico .palillo:active:not(:disabled) {
  transform: rotate(var(--ang)) translateY(calc(var(--i) * -1px));
}
.abanico .palillo[aria-checked="true"]:active:not(:disabled) {
  transform: rotate(var(--ang)) translateY(calc(var(--i) * -1px - 14px)) scale(1.06);
}

.abanico-caja__ayuda {
  font-size: var(--t-cap);
  color: var(--texto-2);
  text-align: center;
}
.solo-tactil { display: none; }
@media (pointer: coarse) {
  .solo-tactil { display: inline; }
  .solo-puntero { display: none; }
}

.abanico-elegido {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--acento-suave);   /* el PASTEL del esmalte: superficie */
  border: 1.5px solid var(--acento); /* su PAR PROFUNDO: borde, ≥3:1 */
  color: var(--tinta);               /* tinta, no tinta-2: los 12 pasteles
                                        están verificados ≥9.2:1 con tinta */
}
.abanico-elegido strong { color: var(--tinta); font-weight: 600; }


/* ───────────────────────────────────────────────────────────────────────────
   10 · GALERÍA
   Formato 4:5 (el de Instagram) para que las fotos reales entren sin recortar.
   ─────────────────────────────────────────────────────────────────────────── */
.galeria {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 42vw, 260px), 1fr));
  gap: var(--gutter);
}
.galeria__pieza {
  position: relative;
  border-radius: var(--r-arco);
  overflow: hidden;
  background: var(--papel-2);
  border: 1px solid var(--linea);
  /* W6: las piezas que no son de la familia elegida bajan a .45. No se
     reordena el DOM con animación de posición: eso marearía. */
  transition: opacity var(--d-4) var(--ease-color), border-color var(--d-4) var(--ease-color);
}
.galeria__pieza[data-atenuada="true"] { opacity: .45; }
.galeria__pieza[data-destacada="true"] { border-color: var(--acento); border-width: 1.5px; }
.galeria__pieza img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.galeria__etiqueta {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  right: var(--s-3);
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel);   /* opaca: sobre una foto real, un fondo al 90%
                                 deja el contraste al azar de lo que haya abajo */
  box-shadow: var(--e1);
  padding: 6px 10px;
  border-radius: var(--r-xs);
}
.galeria__nota {
  margin-top: var(--s-5);
  font-size: var(--t-cap);
  color: var(--texto-2);
  min-height: 1.4em;
}


/* ───────────────────────────────────────────────────────────────────────────
   11 · FILTROS Y CARTA DE SERVICIOS
   ─────────────────────────────────────────────────────────────────────────── */
.filtros { margin-bottom: var(--s-6); }
.filtros__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.chip {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--malva-200);
  border: 1px solid transparent;
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  /* Fila 27 de la tabla: el color de una selección cambia instantáneo. El
     usuario compara muchas opciones seguidas y animarlo lo vuelve lento. */
  transition: transform var(--d-2) var(--ease-salida);
}
.chip[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]) {
    transition: transform var(--d-2) var(--ease-salida),
                background-color var(--d-2) var(--ease-color);
  }
  .chip:not([aria-pressed="true"]):hover { background: var(--malva-300); }
}

.filtros__linea {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
}
.filtros__campo { display: block; }
.filtros__campo .etiqueta { margin-bottom: var(--s-2); }

.select, .rango {
  width: 100%;
  min-height: 48px;
  border-radius: var(--r-sm);
  background: var(--papel-2);
  border: 1px solid var(--borde-fuerte);
  color: var(--texto);
  font-size: var(--t-sm);
}
.select { padding: 12px 14px; }
.rango { accent-color: var(--acento); border: 0; background: transparent; }

.filtros__conteo {
  margin-top: var(--s-4);
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--texto-2);
}

.carta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}
.svc {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
  transition: box-shadow var(--d-3) var(--ease-salida),
              border-color var(--d-3) var(--ease-color);
}
.svc[data-preseleccionado="true"] { border: 1.5px solid var(--acento); }
@media (hover: hover) and (pointer: fine) { .svc:hover { box-shadow: var(--e2); } }

.svc--cera { background: var(--cera-200); border-color: color-mix(in srgb, var(--cera-500) 32%, transparent); }
.svc--cera .svc__meta { color: var(--cera-700); }

.svc__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.svc__nombre {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: var(--lh-xl);
  letter-spacing: var(--tr-xl);
  font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 0;
}
.svc__precio {
  font-family: var(--f-datos);
  font-size: var(--t-lg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.svc__desc { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--texto-2); }
.svc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.svc__propuesta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  background: var(--cera-200);
  color: var(--cera-700);
}
.svc__pie { margin-top: auto; padding-top: var(--s-2); }
.svc__accion {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--borde-fuerte);
  background: transparent;
  color: var(--texto);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: background-color var(--d-2) var(--ease-color),
              border-color var(--d-2) var(--ease-color),
              transform var(--d-2) var(--ease-salida);
}
@media (hover: hover) and (pointer: fine) {
  .svc__accion:hover { border-color: var(--acento); background: var(--acento-suave); }
}

.carta__vacio, .aviso-js {
  margin-top: var(--s-5);
  padding: var(--s-5);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-md);
  color: var(--texto-2);
  font-size: var(--t-sm);
}

@media (min-width: 640px) {
  .carta { grid-template-columns: repeat(2, 1fr); }
  .filtros__linea { grid-template-columns: repeat(3, 1fr); align-items: end; }
}
@media (min-width: 1024px) { .carta { grid-template-columns: repeat(3, 1fr); } }


/* ───────────────────────────────────────────────────────────────────────────
   12 · DEPILACIÓN CON CERA
   El ámbar existe para separar cromáticamente el servicio más privado del
   catálogo: cuando ves ámbar, sabes que estás en depilación.
   ─────────────────────────────────────────────────────────────────────────── */
.cera { background: var(--cera-100); }
.cera__grid { display: grid; gap: var(--s-8); align-items: start; }

.pasos {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  gap: var(--s-5);
}
.pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-top: var(--s-4);
  border-top: 1px solid color-mix(in srgb, var(--cera-500) 34%, transparent);
}
/* Único lugar del sitio donde la numeración 01–04 está permitida:
   aquí sí hay una secuencia real. */
.pasos__n {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  color: var(--cera-700);
  padding-top: 3px;
}
.pasos__t { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500; }
.pasos__d { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--tinta-2); margin-top: 3px; }

.cera__ficha {
  padding: var(--s-6);
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--cera-500) 30%, transparent);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
}
.ficha-datos { margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.ficha-datos > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--linea);
}
.ficha-datos dt {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--texto-2);
}
.ficha-datos dd { margin: 0; font-size: var(--t-sm); text-align: right; }

@media (min-width: 900px) { .cera__grid { grid-template-columns: 1.35fr 1fr; gap: var(--s-9); } }


/* ───────────────────────────────────────────────────────────────────────────
   13 · MOTOR DE RESERVAS — piel sobre los componentes de booking.js
   ─────────────────────────────────────────────────────────────────────────── */
.reservas-caja {
  padding: var(--s-6) var(--s-5);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--e2);
}
@media (min-width: 640px) { .reservas-caja { padding: var(--s-7); } }

.nota-demo {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: var(--t-cap);
  color: var(--texto-2);
}
.nota-demo .ico { margin-top: 2px; }

.nota-validar {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--cera-700);    /* 5.54:1 sobre cera-200 */
  background: var(--cera-200);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-cap);
  color: var(--cera-700);
}
.nota-validar strong { color: var(--tinta); }
.nota-validar--corta { margin-top: var(--s-4); }


/* ───────────────────────────────────────────────────────────────────────────
   14 · PRUEBA SOCIAL
   18 opiniones es poco y el diseño es honesto con eso: tres citas grandes y
   dignas, con aire, en vez de doce tarjetas idénticas medio vacías.
   ─────────────────────────────────────────────────────────────────────────── */
.marcadores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gutter);
  margin-bottom: var(--s-8);
}
.marcador {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: var(--s-5);
  background: var(--papel-2);
  border-radius: var(--r-md);
}
.marcador__num {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-2xl);
  font-variation-settings: "opsz" 40, "SOFT" 60, "WONK" 1;
}
.marcador__pie { font-size: var(--t-cap); color: var(--texto-2); }

.resenas { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-7); }
.resena { padding-top: var(--s-6); border-top: 1px solid var(--linea); }
.resena__cita {
  font-family: var(--f-display);
  font-size: var(--t-cita);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
  max-width: 34ch;
  text-wrap: pretty;
}
.resena__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  color: var(--texto-2);
}
.resena__origen {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
}
.resenas__pie { margin-top: var(--s-7); font-size: var(--t-cap); color: var(--texto-2); max-width: 56ch; }

@media (min-width: 768px) { .marcadores { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .resenas { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }


/* ───────────────────────────────────────────────────────────────────────────
   15 · LA DUEÑA
   ─────────────────────────────────────────────────────────────────────────── */
.duena__grid { display: grid; gap: var(--s-8); align-items: center; }
.duena__foto { margin: 0; max-width: 380px; }
.duena__foto img {
  width: 100%;
  border-radius: var(--r-arco);
  border: 1px solid var(--linea);
}
.duena__foto figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-cap);
  color: var(--texto-2);
}
.duena__lista { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); }
.duena__lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  line-height: var(--lh-sm);
  color: var(--texto-2);
}
.duena__lista .ico { color: var(--malva-700); margin-top: 3px; }

@media (min-width: 900px) { .duena__grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--s-9); } }


/* ───────────────────────────────────────────────────────────────────────────
   16 · ANTES / DESPUÉS DE LA PRESENCIA DIGITAL
   ─────────────────────────────────────────────────────────────────────────── */
.comparativa__cabeza { display: none; }
.comparativa__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gutter); }

.brecha {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--papel);
}
.brecha__lado { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.brecha__rotulo {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.brecha__lado--hoy .brecha__rotulo { background: color-mix(in srgb, var(--alerta) 12%, transparent); color: var(--alerta); }
.brecha__lado--con .brecha__rotulo { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.brecha__texto { font-size: var(--t-sm); line-height: var(--lh-sm); }
.brecha__lado--hoy .brecha__texto { color: var(--texto-2); }

.presencia__remate {
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--malva-100);
  border-radius: var(--r-md);
  border-left: 4px solid var(--malva-700);   /* 7.75:1 sobre malva-100 */
}

@media (min-width: 820px) {
  .comparativa__cabeza {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    margin-bottom: var(--s-3);
  }
  .comparativa__rotulo {
    font-family: var(--f-datos);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--texto-2);
    padding-inline: var(--s-5);
  }
  .brecha { grid-template-columns: 1fr 1fr; align-items: start; }
  .brecha__lado--hoy { border-right: 1px solid var(--linea); padding-right: var(--s-5); }
}


/* ───────────────────────────────────────────────────────────────────────────
   17 · UBICACIÓN, MAPA Y HORARIO
   ─────────────────────────────────────────────────────────────────────────── */
.ubicacion__grid { display: grid; gap: var(--s-8); align-items: start; }
.ubicacion__grid .parrafo { margin-top: var(--s-4); }

.mapa {
  margin-top: var(--s-6);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--e1);
}
.mapa__svg { width: 100%; height: auto; display: block; }
.mapa__calle {
  font-family: var(--f-datos);
  font-size: 13px;
  letter-spacing: 0.12em;
  fill: var(--tinta-2);
}
.mapa__nombre {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  fill: var(--tinta);
}
.mapa__pin { filter: drop-shadow(0 4px 8px rgba(91,59,116,.24)); }

.ubicacion__acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.ubicacion__horario {
  padding: var(--s-6);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--e1);
}
.estado-hoy {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-5);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
}
.estado-hoy[data-abierto="true"]  { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.estado-hoy[data-abierto="false"] { background: var(--papel-2); color: var(--texto-2); }
.estado-hoy::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.tabla-horario { width: 100%; font-size: var(--t-sm); }
.tabla-horario tr { border-bottom: 1px solid var(--linea); }
.tabla-horario tr:last-child { border-bottom: 0; }
.tabla-horario th, .tabla-horario td { padding: 12px 0; text-align: left; font-weight: 400; }
.tabla-horario td { text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.tabla-horario tr[data-hoy="true"] { background: var(--acento-suave); }
.tabla-horario tr[data-hoy="true"] th,
.tabla-horario tr[data-hoy="true"] td { font-weight: 600; color: var(--tinta); padding-inline: var(--s-3); }
.tabla-horario tr[data-hoy="true"] th { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.tabla-horario tr[data-hoy="true"] td { border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.tabla-horario tr[data-cerrado="true"] td { text-decoration: line-through; }

@media (min-width: 900px) { .ubicacion__grid { grid-template-columns: 1.4fr 1fr; gap: var(--s-8); } }


/* ───────────────────────────────────────────────────────────────────────────
   18 · CTA FINAL
   ─────────────────────────────────────────────────────────────────────────── */
.cta-final {
  padding-block: var(--seccion-y);
  background: var(--malva-300);   /* remate: vuelve el color dueño */
}
.cta-final__interior { text-align: center; }
.cta-final .parrafo { margin-inline: auto; margin-top: var(--s-4); color: var(--tinta-2); }
.cta-final__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.cta-final .btn--secundario { border-color: var(--tinta); }


/* ───────────────────────────────────────────────────────────────────────────
   19 · PIE
   ─────────────────────────────────────────────────────────────────────────── */
.pie {
  background: var(--tinta);
  color: var(--papel);
  padding-block: var(--s-8) var(--s-6);
}
.pie__grid { display: grid; gap: var(--s-7); }
.pie__marca {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
  margin-bottom: var(--s-3);
}
.pie__titulo {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--malva-300);
  margin-bottom: var(--s-4);
}
.pie__linea { font-size: var(--t-sm); line-height: var(--lh-sm); color: color-mix(in srgb, var(--papel) 74%, transparent); }
.pie__linea + .pie__linea { margin-top: var(--s-3); }
.pie__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); font-size: var(--t-sm); }
.pie__lista a { color: var(--papel); text-decoration: underline; text-decoration-color: var(--malva-300); text-underline-offset: 0.22em; }
.pie__lista--horario li { display: flex; justify-content: space-between; gap: var(--s-4); color: color-mix(in srgb, var(--papel) 78%, transparent); }

.schema {
  margin-top: var(--s-8);
  border: 1px solid color-mix(in srgb, var(--papel) 20%, transparent);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.schema__resumen {
  cursor: pointer;
  font-family: var(--f-datos);
  font-size: var(--t-cap);
  letter-spacing: 0.04em;
  color: var(--malva-200);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.schema__intro { margin: var(--s-4) 0; font-size: var(--t-cap); color: color-mix(in srgb, var(--papel) 74%, transparent); max-width: 62ch; }
.schema__codigo {
  font-family: var(--f-datos);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--malva-200);
  background: rgba(255, 253, 255, .05);
  padding: var(--s-4);
  border-radius: var(--r-sm);
  overflow-x: auto;
  max-height: 340px;
  white-space: pre;
}

.pie__legal {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, var(--papel) 18%, transparent);
  display: grid;
  gap: var(--s-3);
  font-size: var(--t-cap);
  color: color-mix(in srgb, var(--papel) 62%, transparent);
}
.pie a:focus-visible, .schema__resumen:focus-visible { outline-color: var(--papel); }

@media (min-width: 760px) {
  .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .pie__legal { grid-template-columns: 1fr auto; align-items: center; }
}


/* ───────────────────────────────────────────────────────────────────────────
   20 · LAYOUT MAYOR
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s-9); }
}


/* ───────────────────────────────────────────────────────────────────────────
   21 · MOVIMIENTO REDUCIDO
   Menos movimiento, no cero: se conservan opacidad y color porque informan;
   se elimina el desplazamiento, que es lo que provoca malestar vestibular.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 0ms;  --d-2: 0ms;  --d-3: 120ms; --d-4: 120ms;
    --d-5: 140ms;--d-6: 160ms;--d-7: 160ms; --d-8: 160ms;
    --stagger: 0ms;
    --desplazamiento-revelado: 0px;
    --abanico-apertura: 1;    /* el abanico nace abierto */
  }

  html { scroll-behavior: auto; }

  /* El palillo conserva su transform —es la geometría del abanico, no una
     animación— pero deja de animarse: sin apertura, sin stagger, sin snap. */
  .palillo { transition: none !important; transition-delay: 0ms !important; }

  .hero__arco { animation: none; clip-path: none; }

  [data-loop], .marquesina, .esqueleto { animation: none !important; }
}