/* ---------- Tipografías (alojadas en la web: nada de CDNs de terceros, RGPD) ---------- */
@font-face { font-family: 'Space Mono'; src: url('../fonts/spacemono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/spacemono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --tinta: #16181d;          /* texto y titulares: casi negro */
  --tinta-suave: #4b5060;
  --gris: #8b8f9a;
  --fondo: #ffffff;
  --fondo-2: #f3f1ec;
  --papel: #ffffff;
  --linea: #e2e0da;
  --rojo: #e0262f;           /* rojo de poste */
  --azul: #1d43c9;           /* azul de poste */
  --rojo-suave: #fde3e1;
  --azul-suave: #e3e9ff;
  --crema: #f7f1e5;
  --menta: #d6f1e3;
  --menta-fuerte: #23875f;
  --amarillo: #fbe7a2;
  --rosa: #fbdde8;
  --borde: 2px solid var(--tinta);
  --radio: 14px;
  --ancho: 1180px;
  --cond: 'Archivo', system-ui, sans-serif;   /* se usa con font-stretch: 62% */
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }   /* nada puede ensanchar la página en móvil */
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 17px/1.55 var(--sans); overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Tipografía ---------- */
.titular {
  color: var(--tinta); font-family: var(--cond); font-weight: 900; font-stretch: 62%; text-transform: uppercase;
  line-height: .86; letter-spacing: -.01em; margin: 0;
}
.titular em { font-style: normal; color: var(--rojo); }
.titular .azul, .titular em.azul { color: var(--azul); }
.etiqueta {
  font-family: var(--sans); font-weight: 700; font-stretch: 118%; text-transform: uppercase;
  font-size: .72rem; letter-spacing: .1em;
}
.mono { font-family: var(--mono); }

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }

/* ---------- Botones ---------- */
.btn {
  --fondo-btn: var(--papel); --texto: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.4em; border: var(--borde); border-radius: 999px; background: var(--fondo-btn); color: var(--texto);
  font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: .03em; font-size: .88rem;
  text-decoration: none; box-shadow: 3px 3px 0 var(--tinta);
  transition: transform .12s, box-shadow .12s; white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--tinta); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.btn--rojo { --fondo-btn: var(--rojo); --texto: #fff; }
.btn--menta { --fondo-btn: var(--menta); }
.btn--papel { --fondo-btn: var(--papel); }
.btn--tinta { --fondo-btn: var(--fondo-2); }
.btn--suave { box-shadow: none; border-color: var(--linea); }
.btn--suave:hover { box-shadow: none; border-color: var(--tinta); }
.btn--peq { padding: .55em 1em; font-size: .8rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Poste de barbero ---------- */
.poste {
  --rayas: repeating-linear-gradient(-45deg, var(--rojo) 0 18px, #fff 18px 30px, var(--azul) 30px 48px, #fff 48px 60px);
  position: relative; width: 56px; border-radius: 999px; border: var(--borde); background: var(--rayas);
  background-size: 85px 85px; animation: girar 2.4s linear infinite;
  box-shadow: inset -10px 0 14px rgba(0,0,0,.18), inset 8px 0 10px rgba(255,255,255,.5);
}
@keyframes girar { to { background-position: 0 85px; } }
@media (prefers-reduced-motion: reduce) { .poste, .marquesina__pista { animation: none !important; } }

/* ---------- Marquesina ---------- */
.marquesina { overflow: hidden; border-block: 2px solid var(--tinta); background: var(--amarillo); color: var(--tinta); }
.marquesina__pista { display: flex; width: max-content; animation: desliza 36s linear infinite; }
.marquesina__pista span { padding: .7rem 1.2rem; font-family: var(--cond); font-weight: 900; font-stretch: 62%; text-transform: uppercase; font-size: 1.7rem; white-space: nowrap; }
.marquesina__pista span::after { content: '✂'; margin-left: 2.4rem; font-style: normal; color: var(--rojo); }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- Tique con troquelado ---------- */
.tique {
  position: relative; background: var(--c, var(--papel)); color: var(--tinta);
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}

/* ---------- Pegatina rotada ---------- */
.pegatina {
  display: inline-block; padding: .45em .85em; background: var(--amarillo); color: var(--tinta); border: 1.5px solid var(--tinta);
  border-radius: 8px; transform: rotate(-4deg); font-weight: 800; font-stretch: 110%; text-transform: uppercase; font-size: .8rem;
}

/* ---------- Avisos flotantes ---------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000;
  background: var(--papel); color: var(--tinta); border: var(--borde); border-radius: 12px; padding: .7rem 1.1rem;
  box-shadow: 4px 4px 0 var(--menta-fuerte); font-weight: 700; max-width: calc(100% - 32px);
}

/* ---------- Bandas ---------- */
.banda-demo {
  background: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, #fdf1c8 14px 28px); color: var(--tinta);
  text-align: center; font: 700 .78rem/1.3 var(--mono); padding: .4rem 1rem; border-bottom: 1.5px solid var(--tinta);
}
.banda-aviso { background: var(--rojo); color: #fff; text-align: center; font-weight: 700; padding: .55rem 1rem; }

/* ---------- Franja de poste (separador entre secciones) ---------- */
.rayas {
  height: 14px; border-block: 2px solid var(--tinta);
  background: repeating-linear-gradient(-45deg, var(--rojo) 0 14px, #fff 14px 22px, var(--azul) 22px 36px, #fff 36px 44px);
}