/* ══════════════════════════════════════════════════════════════════
   Contrapelo · barbería
   ------------------------------------------------------------------
   Ejemplo de web CON RESERVAS para meglio.

   Es una web sencilla: mirar, coger hora, saber dónde está. Lo que la
   hace distinta no es tener funciones raras, es cómo se coge la hora:
   sobre una hoja de libro rayada, con las horas al margen y una
   columna por cada barbero, en vez de un desplegable como todos.

   Materiales de una barbería de verdad, que son los que dan la paleta:
   caoba oscura, azulejo blanco, cuero, latón en los espejos y acero en
   las herramientas. Lo único frío de la casa son los aparatos, y por
   eso el acero se reserva a los datos que están vivos.

   Distinta de los otros dos ejemplos a propósito: si tres demos
   comparten esqueleto y color, no demuestran nada.

     meglio     azul noche, ámbar, curvas
     Almácigo   papel claro, verde y magenta, arcos
     Contrapelo caoba, latón y una hoja de libro como pieza central

   Todas las animaciones van de estado visible a estado visible. Nunca
   se usa animation-fill-mode con retardo: si una animación no llegara
   a ejecutarse, el elemento se quedaría invisible para siempre.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
  --fondo:  #17110E;   /* caoba muy oscura, la madera del local */
  --fondo2: #1E1712;   /* secciones alternas */
  --panel:  #291F18;   /* tarjetas */

  --papel:  #EFE7D6;   /* la hoja del libro */
  --raya:   rgba(38, 32, 26, .16);
  --tintaP: #26201A;   /* lo escrito en la hoja */

  --texto:  #F2EAE0;   /* crema */
  --humo:   rgba(242, 234, 224, .66);
  --tenue:  rgba(242, 234, 224, .42);
  --linea:  rgba(242, 234, 224, .15);
  --linea2: rgba(242, 234, 224, .3);

  --rojo:   #A8202C;   /* rellenos: botón, tu renglón */
  --rojo2:  #E4707A;   /* aclarado, para texto pequeño sobre oscuro */
  --laton:  #C79A4E;   /* la letra del cristal y los detalles */
  --acero:  #9FB0BA;   /* solo datos vivos */
  --sobre:  #FDF6EE;   /* texto encima del rojo */

  --disp: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --txt:  'Archivo', 'Segoe UI', system-ui, sans-serif;

  --e1: 8px;  --e2: 16px; --e3: 24px;
  --e4: 40px; --e5: 64px; --e6: 96px;

  /* Curvas de Emil Kowalski. Las de serie no tienen carácter. */
  --curva: cubic-bezier(.23, 1, .32, 1);
  --suave: cubic-bezier(.32, .72, 0, 1);
  --seco:  cubic-bezier(.77, 0, .175, 1);
}

/* ─── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Una clase con display gana al [hidden] del navegador. Sin esto,
   cualquier elemento oculto que tenga display en CSS sigue viéndose. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--txt);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
  margin: 0;
}
p { margin: 0 0 var(--e2); }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--texto); }
:focus-visible { outline: 2.5px solid var(--laton); outline-offset: 3px; }

.salto { position: absolute; left: -9999px; padding: 12px 18px; background: var(--texto); color: var(--fondo); }
.salto:focus { left: var(--e2); top: var(--e2); z-index: 99; }

.h2 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.4rem); margin-bottom: var(--e3); }
.h2 em { font-style: normal; color: var(--laton); }

/* ─── Aviso de ejemplo ──────────────────────────────────────────── */
.demo {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--e2);
  padding: 8px var(--e3);
  background: var(--texto);
  color: var(--fondo);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}
@media (min-width: 640px) { .demo { padding: 9px var(--e3); font-size: .86rem; } }
.demo p { margin: 0; }
.demo strong { color: #8E1B26; }
.demo a { color: var(--fondo); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ─── Botones ───────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 26px;
  border: 2px solid var(--rojo);
  background: var(--rojo);
  color: var(--sobre);
  font-family: var(--txt);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .16s var(--curva), background-color .2s var(--curva),
              border-color .2s var(--curva), color .2s var(--curva);
}
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
}
.btn--linea { background: transparent; color: var(--texto); border-color: var(--linea2); }
@media (hover: hover) and (pointer: fine) {
  .btn--linea:hover { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
}
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .88rem; }
/* Cuando ya hay hora cogida el botón de la barra cambia de papel. */
.btn--tienes { background: transparent; border-color: var(--laton); color: var(--laton); }
.btn--tienes:hover { background: var(--laton); border-color: var(--laton); color: var(--fondo); }

/* ─── Cabecera ──────────────────────────────────────────────────── */
.cab {
  position: sticky;
  top: 38px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 12px clamp(var(--e2), 5vw, var(--e5));
  background: rgba(23, 17, 14, .9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca__ico { width: 30px; height: 30px; flex: none; }
.mi-filo { stroke: var(--texto); stroke-width: 2.6; stroke-linecap: round; fill: none; }
.mi-eje  { fill: var(--laton); }
.marca span { font-family: var(--disp); font-size: 1.34rem; text-transform: uppercase; }

.cab__nav { display: none; margin-left: auto; gap: var(--e3); }
.cab__nav a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--humo);
  padding: 4px 0;
  transition: color .2s var(--curva);
}
/* El subrayado crece desde la izquierda, no aparece de golpe. */
.cab__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--laton);
  transition: right .3s var(--curva);
}
.cab__nav a:hover { color: var(--texto); }
.cab__nav a:hover::after { right: 0; }
.cab .btn { margin-left: auto; }
@media (min-width: 900px) {
  .cab__nav { display: flex; }
  .cab .btn { margin-left: 0; }
}
@media (max-width: 470px) { .marca span { font-size: 1.1rem; } }

/* ═══════════════════════ EL ESCAPARATE ════════════════════════════
   El nombre va rotulado sobre el cristal, como el letrero dorado de
   cualquier barbería de siempre: relleno crema con filete de latón.
   ══════════════════════════════════════════════════════════════════ */
.cristal { position: relative; isolation: isolate; }

.cristal__foto { margin: 0; line-height: 0; }
.cristal__foto img {
  width: 100%;
  height: clamp(430px, 74vh, 740px);
  object-fit: cover;
  object-position: 50% 56%;
}
/* Dos velos: uno general para que la letra se lea y otro por abajo
   para que la foto muera en el color de la página. */
.cristal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(23, 17, 14, .74) 0%, rgba(23, 17, 14, .38) 38%,
    rgba(23, 17, 14, .8) 78%, var(--fondo) 100%);
  pointer-events: none;
}

.cristal__vidrio {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-56%);
  padding: 0 clamp(var(--e2), 5vw, var(--e5));
  text-align: center;
}
.cristal__desde, .cristal__sub {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--laton);
  margin: 0;
}
.cristal__sub { color: var(--humo); letter-spacing: .22em; margin-top: var(--e2); }

.rotulo {
  position: relative;
  display: block;
  font-size: clamp(3.2rem, .5rem + 12.5vw, 11rem);
  line-height: .84;
  margin: var(--e2) 0;
  color: var(--texto);
  -webkit-text-stroke: 1.4px var(--laton);
  text-shadow: 0 0 46px rgba(23, 17, 14, .75);
}
.rotulo__a, .rotulo__b { display: block; }
/* Las dos mitades se solapan medio punto: cortando al 50% exacto el
   redondeo a subpíxeles deja una costura cruzando las letras. */
.rotulo__a { clip-path: inset(0 0 49.5% 0); animation: tajoArriba 1.6s var(--suave); }
.rotulo__b {
  position: absolute;
  inset: 0;
  clip-path: inset(49.5% 0 0 0);
  animation: tajoAbajo 1.6s var(--suave);
}
/* Estado natural: las dos mitades a cero. La animación sale de ahí y
   vuelve, así que sin animación el rótulo se lee igual. */
@keyframes tajoArriba {
  0%, 14% { transform: none; }
  38%     { transform: translateX(-.05em); }
  100%    { transform: none; }
}
@keyframes tajoAbajo {
  0%, 14% { transform: none; }
  38%     { transform: translateX(.05em); }
  100%    { transform: none; }
}
.rotulo__filo {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 104%;
  height: 2px;
  background: var(--laton);
  transform-origin: 0 50%;
  transform: scaleX(0);
  animation: filo 1.6s var(--seco);
}
@keyframes filo {
  0%, 10% { transform: scaleX(0); transform-origin: 0 50%;    opacity: 1; }
  40%     { transform: scaleX(1); transform-origin: 0 50%;    opacity: 1; }
  41%     { transform: scaleX(1); transform-origin: 100% 50%; opacity: 1; }
  78%     { transform: scaleX(0); transform-origin: 100% 50%; opacity: 1; }
  100%    { transform: scaleX(0); transform-origin: 100% 50%; opacity: 0; }
}

/* Lo único que quiere saber quien pasa por delante. */
.marquesina {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  background: var(--linea);
  border-block: 1px solid var(--linea);
}
@media (min-width: 780px) { .marquesina { grid-template-columns: repeat(3, 1fr); } }
.marquesina__l {
  margin: 0;
  padding: 18px clamp(var(--e2), 4vw, var(--e4));
  background: var(--fondo);
  font-size: .96rem;
  color: var(--humo);
}
.marquesina__l b { color: var(--texto); font-weight: 700; }
.marquesina__l .vivo { color: var(--acero); font-weight: 700; }
.marquesina__l .off  { color: var(--rojo2); font-weight: 700; }

/* ════════════════════════ EL LIBRO ════════════════════════════════ */
.libro { padding: var(--e6) clamp(var(--e2), 5vw, var(--e5)); background: var(--fondo2); }
.libro__cab { max-width: 46ch; margin-bottom: var(--e4); }
.libro__p { color: var(--humo); font-size: 1.05rem; margin: 0; }

/* ─── La carta: precio y selector a la vez ──────────────────────── */
.carta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--e3); }
.plato {
  display: grid;
  gap: 1px;
  min-width: 168px;
  padding: 12px 18px;
  border: 2px solid var(--linea);
  text-align: left;
  transition: background-color .25s var(--curva), border-color .25s var(--curva),
              color .25s var(--curva), transform .16s var(--curva);
}
.plato:active { transform: translateY(1px); }
.plato b { font-family: var(--disp); font-size: 1.24rem; text-transform: uppercase; }
.plato i { font-style: normal; font-size: .84rem; color: var(--tenue); transition: color .25s var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .plato:hover { border-color: var(--linea2); background: rgba(242, 234, 224, .05); }
}
.plato[aria-checked="true"] { background: var(--rojo); border-color: var(--rojo); color: var(--sobre); }
.plato[aria-checked="true"] i { color: rgba(253, 246, 238, .78); }

/* ─── La hoja ───────────────────────────────────────────────────────
   Papel crema sobre la página oscura. Es la pieza que ancla la web:
   rayada, con las horas al margen y una columna por cada uno.
   ─────────────────────────────────────────────────────────────────── */
.hoja {
  --margen: 64px;
  position: relative;
  background: var(--papel);
  color: var(--tintaP);
  padding: var(--e3) clamp(var(--e2), 3vw, var(--e4)) var(--e4);
  box-shadow: 0 36px 74px -42px rgba(0, 0, 0, .85);
}
/* Al cambiar de día la hoja pasa, no salta. Entra desde el lado al que
   vas, y como es una entrada sin fill-mode, si no llega a ejecutarse
   la hoja se queda donde está: visible. */
.hoja.is-pasa-desp .hoja__cuerpo { animation: pasaDesp .42s var(--curva); }
.hoja.is-pasa-antes .hoja__cuerpo { animation: pasaAntes .42s var(--curva); }
@keyframes pasaDesp {
  0%   { opacity: 0; transform: translateX(26px); }
  100% { opacity: 1; transform: none; }
}
@keyframes pasaAntes {
  0%   { opacity: 0; transform: translateX(-26px); }
  100% { opacity: 1; transform: none; }
}

.hoja__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px var(--e2);
  padding-bottom: var(--e2);
  margin-bottom: var(--e2);
  border-bottom: 2px solid var(--tintaP);
}
.hoja__mv {
  width: 36px; height: 36px;
  border: 2px solid rgba(38, 32, 26, .3);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--tintaP);
  transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva);
}
.hoja__mv:hover:not(:disabled) { background: var(--tintaP); color: var(--papel); border-color: var(--tintaP); }
.hoja__mv:disabled { opacity: .26; cursor: default; }
.hoja__fecha {
  font-family: var(--disp);
  font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem);
  text-transform: uppercase;
  margin: 0;
  min-width: 11ch;
}
.hoja__ya {
  margin-left: auto;
  padding: 8px 14px;
  border-bottom: 2px solid var(--rojo);
  color: #8E1B26;
  font-weight: 700;
  font-size: .9rem;
  transition: background-color .2s var(--curva);
}
.hoja__ya:hover:not(:disabled) { background: rgba(168, 32, 44, .1); }
.hoja__ya:disabled { opacity: .35; cursor: default; }

.hoja__cuerpo { position: relative; }

/* La cabecera de columnas y los renglones comparten rejilla: el margen
   de las horas más una columna por barbero. */
.hoja__manos,
.reng {
  display: grid;
  grid-template-columns: var(--margen) repeat(var(--manos, 3), 1fr);
  gap: 0 6px;
}
.hoja__manos {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(38, 32, 26, .32);
}
.hoja__manos span {
  font-family: var(--disp);
  font-size: .84rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(38, 32, 26, .74);
}
.hoja__manos span:first-child { text-align: left; }

.reng { border-bottom: 1px solid var(--raya); transition: background-color .18s var(--curva); }
/* Pasar por un renglón lo enciende entero, de la hora a la última
   columna: así se ve la fila a la que vas sin tener que apuntar. */
@media (hover: hover) and (pointer: fine) {
  .reng:hover { background: rgba(38, 32, 26, .05); }
  .reng:hover .reng__h { color: var(--tintaP); }
}
.reng--cerrado { background: repeating-linear-gradient(-45deg,
    transparent 0 6px, rgba(38, 32, 26, .06) 6px 12px); }

.reng__h {
  display: flex;
  align-items: center;
  padding: 10px 0;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(38, 32, 26, .55);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--curva);
}
.reng--enPunto .reng__h { color: var(--tintaP); }

.celda {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 4px 8px;
  font-size: .84rem;
  text-align: center;
  transition: background-color .2s var(--curva), color .2s var(--curva);
}
.celda--dada { color: rgba(38, 32, 26, .46); }
/* Un trazo de bolígrafo tachando lo que ya está dado. */
.celda--dada::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 50%;
  height: 1.5px;
  background: rgba(38, 32, 26, .3);
  transform: rotate(-1.4deg);
}
.celda--cerrada { color: rgba(38, 32, 26, .26); }

button.celda { border: 0; background: transparent; cursor: pointer; color: #8E1B26; font-weight: 700; }
button.celda::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px dashed rgba(168, 32, 44, .3);
  transition: border-color .2s var(--curva), background-color .2s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  button.celda:hover { color: #8E1B26; }
  button.celda:hover::before { border-color: var(--rojo); background: rgba(168, 32, 44, .08); }
}
button.celda:focus-visible { outline: none; color: #8E1B26; }
button.celda:focus-visible::before { border-color: var(--rojo); background: rgba(168, 32, 44, .12); }

/* Está en blanco pero no te vale: lo que vienes a hacerte no cabe. */
button.celda:disabled { cursor: default; color: rgba(38, 32, 26, .22); font-weight: 400; }
button.celda:disabled::before { border-color: transparent; }

/* Tu hora, escrita encima. La clase va doblada porque `button.celda`
   pesa (0,1,1) y le ganaria a una clase sola. */
.celda.celda--mia {
  background: var(--rojo);
  color: var(--sobre);
  font-weight: 700;
  animation: escribe .45s var(--curva);
}
.celda.celda--mia.celda--sigue { color: rgba(253, 246, 238, .6); font-weight: 400; }
@keyframes escribe {
  0%   { opacity: .15; transform: translateY(-7px); }
  100% { opacity: 1; transform: none; }
}

/* La cinta del libro, marcando por dónde va el día. */
.cinta {
  position: absolute;
  left: calc(var(--margen) * -1 - 10px);
  top: calc(var(--y, 0) * 1px);
  width: calc(100% + var(--margen) + 10px);
  height: 2px;
  background: var(--rojo);
  pointer-events: none;
  transition: top .5s var(--suave);
}
.cinta i {
  position: absolute;
  left: 0;
  top: -9px;
  width: 26px;
  height: 20px;
  background: var(--rojo);
  /* La punta en pico del marcapáginas. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 66%, 0 100%);
}

.hoja__vacio {
  padding: var(--e5) 0;
  text-align: center;
  color: rgba(38, 32, 26, .6);
  font-size: 1.02rem;
  margin: 0;
}

/* ─── Apuntado ──────────────────────────────────────────────────── */
.apuntado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  margin-top: var(--e3);
  padding: var(--e3);
  background: var(--rojo);
  color: var(--sobre);
  animation: sube .5s var(--curva);
}
.apuntado__txt { display: grid; gap: 4px; }
.apuntado__t {
  font-family: var(--disp);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(253, 246, 238, .74);
  margin: 0;
}
.apuntado__d { font-size: 1.24rem; font-weight: 700; margin: 0; }
.apuntado__n { font-size: .86rem; color: rgba(253, 246, 238, .76); margin: 0; max-width: 54ch; }
.apuntado .btn--linea { color: var(--sobre); border-color: rgba(253, 246, 238, .45); margin-left: auto; }
.apuntado .btn--linea:hover { background: var(--sobre); color: var(--rojo); border-color: var(--sobre); }

/* ─── Franja de foto ────────────────────────────────────────────── */
.franja { margin: 0; line-height: 0; position: relative; }
.franja img { width: 100%; height: clamp(200px, 30vw, 380px); object-fit: cover; object-position: 50% 50%; }
.franja::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--fondo2) 0%, rgba(23, 17, 14, .3) 26%,
              rgba(23, 17, 14, .35) 72%, var(--fondo) 100%);
}

/* ═══════════════════════ QUIÉN CORTA ══════════════════════════════ */
.manos { padding: var(--e6) clamp(var(--e2), 5vw, var(--e5)); }
.manos__cab { max-width: 46ch; margin-bottom: var(--e4); }
.manos__p { color: var(--humo); margin: 0; }

.fichas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
@media (min-width: 860px) { .fichas { grid-template-columns: repeat(3, 1fr); gap: var(--e3); } }

.ma {
  display: grid;
  gap: 6px;
  padding: var(--e3);
  border: 1px solid var(--linea);
  background: var(--panel);
  transition: border-color .3s var(--curva), transform .3s var(--curva);
}
@media (hover: hover) and (pointer: fine) {
  .ma:hover { border-color: var(--laton); transform: translateY(-4px); }
}
.ma__n { font-family: var(--disp); font-size: 1.7rem; text-transform: uppercase; }
.ma__q { color: var(--humo); font-size: .95rem; }
.ma__l { font-size: .86rem; color: var(--acero); font-weight: 600; }

/* ════════════════════════ LA CASA ═════════════════════════════════ */
.casa { padding: var(--e6) clamp(var(--e2), 5vw, var(--e5)); background: var(--fondo2); }
.casa__rejilla { display: grid; gap: var(--e5); margin-bottom: var(--e6); }
@media (min-width: 900px) { .casa__rejilla { grid-template-columns: 1fr 1fr; gap: var(--e6); } }
.casa__p { color: var(--humo); max-width: 42ch; margin-bottom: var(--e3); }
.casa__semana h3 { font-size: 1.2rem; letter-spacing: .04em; margin-bottom: 4px; }
.casa__nota { color: var(--tenue); font-size: .9rem; margin-bottom: var(--e3); }

/* La semana como una tira: siete columnas y dentro las horas abiertas
   donde caen. De un vistazo se ve cuándo hay alguien dentro, cosa que
   una tabla de horarios nunca enseña. */
.semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--e3); }
.sd { display: grid; gap: 6px; justify-items: center; }
.sd__b {
  position: relative;
  width: 100%;
  height: 132px;
  background: rgba(242, 234, 224, .06);
  overflow: hidden;
}
.sd__t {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--ini) * 100%);
  height: calc(var(--dur) * 100%);
  background: var(--linea2);
}
.sd--hoy .sd__t { background: var(--acero); }
.sd__n { font-size: .74rem; font-weight: 700; letter-spacing: .04em; color: var(--tenue); text-transform: uppercase; }
.sd--hoy .sd__n { color: var(--acero); }

.semana__texto { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--humo); font-size: .92rem; }
.semana__texto b { color: var(--texto); }

/* En una barbería la mitad de la gente sigue llamando: esconder el
   teléfono en letra pequeña es tonto. */
.grito { border-top: 1px solid var(--linea); padding-top: var(--e4); }
.grito__t { font-family: var(--disp); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase; color: var(--laton); margin-bottom: var(--e1); }
.grito__n {
  display: block;
  font-family: var(--disp);
  font-size: clamp(2.3rem, 1rem + 6.2vw, 5.2rem);
  line-height: .95;
  text-decoration: none;
  transition: color .25s var(--curva);
}
.grito__n:hover { color: var(--laton); }
.grito__w { display: inline-block; margin-top: var(--e2); color: var(--humo); font-size: .95rem; text-underline-offset: 4px; }

/* ─── Pie ───────────────────────────────────────────────────────── */
.pie {
  display: grid;
  gap: 4px;
  padding: var(--e5) clamp(var(--e2), 5vw, var(--e5));
  border-top: 1px solid var(--linea);
  color: var(--humo);
  font-size: .9rem;
}
.pie p { margin: 0; }
.pie__marca { font-family: var(--disp); font-size: 2rem; color: var(--texto); text-transform: uppercase; }
.pie__meglio { margin-top: var(--e2); }
.pie__meglio a { color: var(--laton); font-weight: 700; }

/* ─── Aparición al entrar en pantalla ───────────────────────────── */
/* El escalonado va DENTRO de los keyframes, nunca con fill-mode: both.
   Con `both`, si la animación no llega a correr el elemento se queda
   invisible para siempre. Así el estado natural es visible. */
.sube { animation: sube .7s var(--curva); }
@keyframes sube {
  0%, 8% { opacity: 0; transform: translateY(20px); }
  100%   { opacity: 1; transform: none; }
}

/* ─── Móvil ─────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .hoja { --margen: 50px; padding-inline: var(--e2); }
  .celda { min-height: 42px; font-size: .76rem; padding-inline: 3px; }
  .reng__h { font-size: .74rem; }
  .hoja__ya { margin-left: 0; }
  .plato { min-width: 132px; padding: 10px 14px; }
  .plato b { font-size: 1.06rem; }
  .cinta { left: calc(var(--margen) * -1 - 4px); width: calc(100% + var(--margen) + 4px); }
  .semana { gap: 4px; }
  .sd__b { height: 104px; }
  .sd__n { font-size: .66rem; }
}

/* ─── Movimiento reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rotulo__filo { display: none; }
}