/* ════════════════════════════════════════════════════════════════
   GRUPO TÓMBOLA — sitio temporal
   CSS propio, sin dependencias. Se edita a mano.

   PALETA — 6 valores. Regla de los dos ámbares:
     --ambar        NUNCA es texto (3.9:1). Solo relleno y filetes.
     --ambar-tinta  NUNCA es relleno. Solo cuando el ámbar es texto (5.3:1).
     Sobre --tinta  NINGUNO de los dos sirve como texto: el ámbar da 3.4:1
                    y el ámbar oscuro 2.5:1. En superficie oscura el texto
                    va en --papel y el ámbar se queda en filetes.

   Opacidad mínima del texto sobre papel: .68 (5.0:1). Por debajo de eso
   no pasa AA — .62 se ve mejor y falla.

   TIPOGRAFÍA — dos ideas que sostienen el diseño:
     1. Lo grande va en peso 400, no 700. Grande y ligero se lee caro;
        grande y negrita se lee ruidoso.
     2. Los rótulos son VERSALITAS REALES de Source Serif (smcp + c2sc),
        no mayúsculas con tracking. El texto del HTML queda tal cual.
   ════════════════════════════════════════════════════════════════ */

:root {
  --tinta:       #0E2A42;   /* texto y superficies oscuras   13.3:1 sobre papel */
  --azul:        #1F4E78;   /* azul institucional, enlaces    7.8:1 sobre papel */
  --papel:       #F2F5F8;   /* fondo                                            */
  --linea:       #C3CFDA;   /* filetes de 1px — nunca texto, nunca foco          */
  --ambar:       #C65911;   /* ámbar institucional — solo relleno  3.9:1 gráfico */
  --ambar-tinta: #A8480C;   /* ámbar de texto                 5.3:1 sobre papel */

  --display: "Archivo Expanded", "Arial Black", system-ui, sans-serif;
  --texto:   "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Escala explícita. Rango de 11px a 60px en el titular. */
  --t-micro: 0.6875rem;
  --t-xs:    0.8125rem;
  --t-s:     0.9375rem;
  --t-base:  1.0625rem;
  --t-m:     1.375rem;
  --t-l:     2rem;
  --t-unidad: clamp(1.875rem, 3.6vw, 2.75rem);
  --t-hero:   clamp(2.25rem, 5vw, 3.75rem);

  --ancho: 78rem;
  --aire:  clamp(1.5rem, 6vw, 5.5rem);

  --esc-logo: .84;          /* escala de los logos de unidad en pantalla chica */
}

@media (min-width: 30rem) { :root { --esc-logo: 1; } }

/* ── Fuentes autoalojadas ───────────────────────────────────────
   Subconjunto Latin con versalitas. Licencia SIL OFL, ver /fonts/  */

@font-face {
  font-family: "Archivo Expanded";
  src: url("/fonts/archivo-exp-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("/fonts/archivo-exp-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/serif-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/serif-400-italica.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ── Base ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-base);
  line-height: 1.6;
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, dt, ol, ul, address, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: var(--azul); }

:focus-visible {
  outline: 3px solid var(--ambar-tinta);
  outline-offset: 3px;
  border-radius: 1px;
}

.env { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--aire); }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1.25rem; text-decoration: none;
}
.saltar:focus { left: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.05em; height: 1.05em; flex: none; margin-right: .45em; }

/* Rótulo en versalitas reales. */
.rot {
  display: block;
  font-family: var(--texto);
  font-weight: 600;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .16em;
  font-size: var(--t-s);
  color: var(--azul);
}

/* Filete de sarape del logotipo. Fino a propósito: es un remate
   tejido, no una bandera. */
.sarape {
  height: 3px;
  background: url("/img/sarape.png") repeat-x center / 150px 100%;
}

/* ── Barra ────────────────────────────────────────────────────── */

.barra { padding-block: 1.6rem 0; }
.barra__logo { display: block; width: clamp(132px, 26vw, 168px); height: auto; }

/* ── Hero ─────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 7vw, 5rem); }
.hero__rej { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 60rem) {
  .hero__rej {
    grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.hero .rot { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.hero h1 {
  font-family: var(--display);
  font-weight: 400;                 /* grande y ligero */
  font-size: var(--t-hero);
  line-height: .96;
  letter-spacing: -.028em;
  overflow-wrap: break-word;
}
.hero__sub {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46ch;
  font-size: var(--t-m);
  line-height: 1.5;
}
.hero__sub em { font-style: italic; color: var(--azul); }

.hero__foto img { display: block; width: 100%; height: auto; }
.hero__foto figcaption {
  margin-top: .85rem;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .14em;
  font-size: var(--t-s);
  opacity: .68;
}

/* ── Tablero HOY ──────────────────────────────────────────────── */

.hoy { padding-bottom: clamp(3rem, 7vw, 5rem); }
.hoy__cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9rem; border-bottom: 1px solid var(--tinta);
}
.hoy__nota { font-size: var(--t-s); font-style: italic; opacity: .68; }
.hoy__lista li { border-bottom: 1px solid var(--linea); }

/* Móvil: número | nombre / calle / banda+estado.
   Ancho: cinco columnas de tablero. */
.hoy a {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1rem; row-gap: .3rem;
  align-items: center;
  padding-block: 1.1rem;
  text-decoration: none; color: var(--tinta);
}
.hoy b {
  grid-column: 1; grid-row: 1;
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-xs); color: var(--ambar-tinta);
}
.hoy__nom {
  grid-column: 2; grid-row: 1;
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-m); letter-spacing: -.012em;
}
.hoy__calle { grid-column: 2; grid-row: 2; font-size: var(--t-s); opacity: .68; }
.hoy__dato {
  grid-column: 2; grid-row: 3;
  display: flex; align-items: center; gap: 1rem; margin-top: .5rem;
}
.hoy__dato .banda { flex: 1 1 auto; min-width: 0; }
.hoy a:hover .hoy__nom { color: var(--azul); }

@media (min-width: 60rem) {
  .hoy a {
    grid-template-columns: 3rem minmax(0, 1.35fr) minmax(0, 1.15fr) 10rem 7.5rem;
    row-gap: 0;
  }
  .hoy__calle { grid-column: 3; grid-row: 1; }
  .hoy__dato { display: contents; }
  .hoy__dato .banda { grid-column: 4; grid-row: 1; }
  .hoy__dato .estado { grid-column: 5; grid-row: 1; }
}

/* ── Banda de 24 h, de mediodía a mediodía ────────────────────── */

.banda { display: none; width: 100%; }
.banda--lista { display: block; }
/* La pista va en --papel con filete, no rellena de --linea: así el
   ámbar queda adyacente al papel (3.9:1) y no al filete (2.7:1). */
.pista {
  position: relative; display: block; height: 8px;
  background: var(--papel); border: 1px solid var(--linea);
}
.abierto {
  position: absolute; top: 0; bottom: 0;
  left: var(--ini, 0); right: calc(100% - var(--fin, 0));
  background: var(--ambar);
}
.ahora {
  position: absolute; top: -4px; bottom: -4px;
  left: var(--ahora, 0); width: 2px; margin-left: -1px; background: var(--tinta);
}
.escala { position: relative; display: block; height: 1.15rem; margin-top: .45rem; }
.escala i {
  position: absolute; top: 0; font-style: normal;
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-micro); letter-spacing: .06em; opacity: .68;
  transform: translateX(-50%);
}
.escala i:nth-child(1) { left: 0;    transform: none; }
.escala i:nth-child(2) { left: 25%;  }
.escala i:nth-child(3) { left: 50%;  }
.escala i:nth-child(4) { left: 75%;  }
.escala i:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* Estado: lo escribe main.js. Vacío por defecto — si el JS no corre
   o no está seguro, la página calla. */
.estado {
  flex: none;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  font-weight: 600; letter-spacing: .12em;
  font-size: var(--t-s); white-space: nowrap;
}
.estado[data-estado="abierto"] { color: var(--ambar-tinta); }
.estado[data-estado="cerrado"] { color: var(--tinta); opacity: .68; }

/* ── Unidad: banda de ancho completo con el número colgado ────── */

.unidad { border-top: 1px solid var(--linea); }
.unidad__rej {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 60rem) {
  .unidad__rej {
    grid-template-columns: 4.5rem minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 5rem);
  }
}
/* Recesivo, pero no tanto: en --linea daba 1.4:1 y es texto de verdad. */
.unidad__num {
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-l); color: var(--tinta); opacity: .5; line-height: 1;
}

/* Ranura de marca: altura reservada, el logo entra sin mover nada. */
.unidad__marca { min-height: 6rem; display: flex; align-items: flex-end; gap: 1rem; }
.unidad__marca img {
  display: block; width: auto; max-width: 100%;
  height: calc(var(--logo, 64px) * var(--esc-logo));
}
/* Musa y Carranza comparten el logo de Don Tiburcio: el calificador
   va al lado para que lea "Don Tiburcio · Musa". */
.unidad__sede {
  font-family: var(--display); font-weight: 400; font-size: var(--t-m);
  padding-left: 1rem; border-left: 2px solid var(--ambar);
}

/* Don Tiburcio es una ilustración, no un logotipo: necesita más alto. */
#dtm .unidad__marca img, #dtc .unidad__marca img { --logo: 88px; }
#mnc .unidad__marca img { --logo: 66px; }
#lac .unidad__marca img { --logo: 66px; }
#csh .unidad__marca img { --logo: 56px; }
#ace .unidad__marca img { --logo: 70px; }

.unidad__nom {
  margin-top: 1.4rem;
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-unidad); line-height: 1.04; letter-spacing: -.022em;
  overflow-wrap: break-word;
}
.unidad__con { margin-top: 1rem; max-width: 40ch; font-size: var(--t-m);
  line-height: 1.5; opacity: .8; }
.unidad__dir { margin-top: 1.6rem; overflow-wrap: break-word; }
.unidad__dir span { display: block; font-size: var(--t-s); opacity: .68; margin-top: .15rem; }
.unidad__vecino { margin-top: .75rem; font-size: var(--t-s); font-style: italic; color: var(--azul); }

/* Horario como tabla alineada, no como renglón corrido. */
.horas { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; row-gap: .4rem; }
.horas dt {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  font-weight: 600; letter-spacing: .1em; font-size: var(--t-s); opacity: .72;
}
.horas dd { font-weight: 600; }
.unidad__banda { margin-top: 1.5rem; }
.unidad__estado { margin-top: 1.1rem; min-height: 1.6rem; }

.enlaces { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; }
.enlaces a {
  display: inline-flex; align-items: center; min-height: 2.6rem;
  font-size: var(--t-s); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--linea);
}
.enlaces a:hover { border-bottom-color: var(--ambar); }
.enlaces a[href*="wa.me"] { color: var(--ambar-tinta); }

/* ── La casa: sección oscura a sangre ─────────────────────────── */

.casa {
  background: var(--tinta); color: var(--papel);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
  border-top: 1px solid var(--linea);
}
/* El ámbar no alcanza AA sobre tinta: el rótulo va en papel y el ámbar
   se queda donde sí funciona, en el filete de arriba. */
.casa .rot {
  color: var(--papel);
  padding-top: 1rem;
  border-top: 3px solid var(--ambar);
  width: fit-content;
}
.casa__rej { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 60rem) {
  .casa__rej { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.casa p { font-size: var(--t-m); line-height: 1.55; max-width: 46ch; }
.casa p + p { margin-top: 1.25rem; }
.casa em { font-style: italic; }
.casa p.casa__fecha {
  max-width: none;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: .95; letter-spacing: -.03em;
}
.casa__fecha span {
  display: block; margin-top: 1.1rem;
  font-family: var(--texto); font-size: var(--t-s);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .16em; opacity: .72;
}
.casa p.casa__val {
  max-width: none;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid rgba(242, 245, 248, .22);
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .14em; font-size: var(--t-s); line-height: 2; opacity: .9;
}

/* ── Trabaja con nosotros ─────────────────────────────────────── */

.trabajo { padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.trabajo__rej { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) {
  .trabajo__rej { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}
.trabajo__texto { margin-top: 1.25rem; max-width: 48ch; font-size: var(--t-m); line-height: 1.5; }
.trabajo__vias { display: grid; gap: 1rem; align-content: start; }
.via {
  display: block; padding: 1.35rem;
  border: 1px solid var(--linea); border-left: 3px solid var(--ambar);
  text-decoration: none; color: var(--tinta);
}
.via__unidades { display: block; font-size: var(--t-s); opacity: .68; }
.via__num {
  display: flex; align-items: center; margin-top: .6rem;
  font-family: var(--display); font-weight: 400; font-size: var(--t-m); color: var(--azul);
}
.via:hover { border-color: var(--ambar); }
.via:hover .via__num { text-decoration: underline; text-underline-offset: .2em; }

/* ── Pie ──────────────────────────────────────────────────────── */

.pie { background: var(--tinta); color: var(--papel); padding-block: clamp(3rem, 7vw, 4.5rem); }
.pie :focus-visible { outline-color: var(--ambar); }
.pie__rej { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: start; }
@media (min-width: 44rem) {
  .pie__rej { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 5rem); }
}
.pie__logo { display: block; width: clamp(148px, 34vw, 184px); height: auto; }
.pie__dir { max-width: 46ch; line-height: 1.65; }
.pie__fila {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.35rem;
  border-top: 1px solid rgba(242, 245, 248, .22);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: .5rem 1.5rem; font-size: var(--t-s);
}

/* ── Movimiento ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hoy a, .via, .enlaces a { transition: color .15s linear, border-color .15s linear; }
}