/* ==========================================================================
   SOL · landing pública (asolate.app)

   Todo lo que hay acá sale de marca/SISTEMA.md, que es la ley del sistema
   gráfico. Las tres reglas que más se notan:

     1. Una sola familia tipográfica, Archivo, con su eje de ancho. NO HAY
        NINGUNA MONOESPACIADA en el proyecto, ni como respaldo: las horas van
        en Archivo con cifras tabulares, que es lo que da el alineado de
        columnas sin el aspecto de terminal. Prohibidas también Inter,
        Newsreader y la lista entera del punto 1 de SISTEMA.md.
     2. Los ocho colores de la tabla de SISTEMA.md y ninguno más. Ningún
        degradé en toda la hoja (el único de la página está adentro del SVG
        del símbolo, que es la marca). Ninguna sombra proyectada: la
        profundidad es el papel 2. Ningún #000 ni #fff.
     3. Esquinas de 2 px en lo chico y 12 px en tarjetas, nunca más. Las
        fotos van a esquina recta, siempre.
   ========================================================================== */

:root {
  /* color · SISTEMA.md, punto 3 */
  --papel:        #f2ece1;
  --papel-2:      #e7dece;
  --tinta:        #14100b;
  --sol:          #e8500c;   /* acento, y se usa poco */
  --sol-texto:    #b03a08;   /* el naranja cuando es texto */
  --sombra:       #2b3550;
  --filete:       rgba(20, 16, 11, 0.18);
  --tinta-media:  rgba(20, 16, 11, 0.62);

  /* tipografía · SISTEMA.md, punto 2 */
  --fuente: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* forma · SISTEMA.md, punto 6. Grilla de 4 px. */
  --aire-poco:   1.5rem;                       /* 24 px */
  --aire-medio:  clamp(2rem, 5vw, 3rem);       /* 32 a 48 px */
  --aire-mucho:  clamp(3rem, 9vw, 6rem);       /* 48 a 96 px */
  --borde:       clamp(1.25rem, 5vw, 3rem);
  --lectura:     34rem;   /* hasta 65 caracteres por línea */
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-color: var(--filete); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--sol); }

:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus {
  left: var(--borde); top: 0.75rem; z-index: 10;
  background: var(--tinta); color: var(--papel);
  padding: 0.5rem 0.9rem; text-decoration: none; font-size: 0.875rem;
}

/* ── la etiqueta del sistema: Archivo Narrow 600, versalitas falsas ────── */

.kicker, .rotulo {
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.kicker {
  display: block;
  margin: 0 0 var(--aire-poco);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--filete);   /* la rúbrica, en vez de más tracking */
}

/* ── cabecera ─────────────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem var(--borde);
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
}

/* El símbolo es marca/logo-simbolo.jpg tal cual, sin recolorear ni contornear.
   El radio recorta exactamente la esquina de la placa del archivo (14/64 del
   lado), así que sobre el papel queda solo el disco con su sombra corrida. */
.marca-simbolo {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 21.9%;
}

.marca-nombre {
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1.375rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.cabecera-pie { margin: 0; font-size: 0.9375rem; color: var(--tinta-media); }

/* ── el parte de hoy ──────────────────────────────────────────────────── */

.parte {
  display: grid;
  gap: var(--aire-medio);
  padding: var(--aire-poco) 0 var(--aire-mucho);
}

.parte-dato { padding: 0 var(--borde); }

.cifra {
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(4.25rem, 17vw, 8.5rem);
  line-height: 0.84;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
}

.cifra-nombre {
  font-weight: 700;
  font-size: clamp(1.125rem, 3.4vw, 1.375rem);
  line-height: 1.2;
  margin: 0 0 0.5rem;
  max-width: var(--lectura);
}

.cifra-linea {
  margin: 0 0 var(--aire-medio);
  max-width: var(--lectura);
  color: var(--tinta-media);
}
.cifra-linea .hora { color: var(--tinta); font-weight: 700; }

/* El margen de error va acá arriba y no en la letra chica del pie: es el dato
   que dice que esto lo midió alguien. SISTEMA.md, punto 7. */
.salvedad {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--filete);
  max-width: var(--lectura);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* ── fotos ────────────────────────────────────────────────────────────── */

figure { margin: 0; }

figure img { display: block; width: 100%; height: auto; }

.parte-foto img { aspect-ratio: 16 / 11; object-fit: cover; }

figcaption {
  padding: 0.75rem var(--borde) 0;
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

figcaption .rotulo { display: block; margin-bottom: 0.25rem; }

.banda { padding-bottom: var(--aire-mucho); }
.banda img { aspect-ratio: 1000 / 620; object-fit: cover; }

/* ── qué es ───────────────────────────────────────────────────────────── */

.quees { padding: 0 var(--borde) var(--aire-medio); }

.lead {
  margin: 0;
  max-width: var(--lectura);
  font-size: clamp(1.25rem, 3.6vw, 1.625rem);
  line-height: 1.28;
  font-weight: 400;
  text-wrap: pretty;
}

/* ── el sábado ────────────────────────────────────────────────────────── */

.sabado, .bajar { padding: 0 var(--borde) var(--aire-mucho); }

.intro {
  margin: 0 0 var(--aire-poco);
  max-width: var(--lectura);
  color: var(--tinta-media);
}

.tabla { max-width: 46rem; border-top: 1px solid var(--tinta); }

.fila {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--filete);
}

.fila-nombre { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.fila-zona { display: block; font-size: 0.875rem; color: var(--tinta-media); }

.fila-horas {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fila:first-child .fila-horas { color: var(--sol-texto); }

.nota {
  margin: 1rem 0 0;
  max-width: var(--lectura);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* ── bajate la app ────────────────────────────────────────────────────── */

.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--aire-poco);
  max-width: 46rem;
}

.boton {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1 1 13rem;
  padding: 0.875rem 1.25rem 1rem;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.boton-titulo { font-weight: 700; line-height: 1.2; }
.boton-pie { font-size: 0.875rem; color: var(--tinta-media); }

.boton-vivo { background: var(--tinta); color: var(--papel); }
.boton-vivo .boton-pie { color: var(--papel-2); }
.boton-vivo:hover { background: var(--sol); border-color: var(--sol); }
.boton-vivo:hover .boton-pie { color: var(--papel); }

.boton-tienda[aria-disabled="true"] {
  border-color: var(--filete);
  color: var(--tinta-media);
  cursor: default;
  pointer-events: none;
}
.boton-tienda:hover { background: var(--papel-2); }

/* ── pie ──────────────────────────────────────────────────────────────── */

.pie {
  padding: var(--aire-medio) var(--borde) var(--aire-mucho);
  border-top: 1px solid var(--filete);
  display: grid;
  gap: var(--aire-poco);
}

.pie-item, .pie-fuentes { margin: 0; }

.pie-item { font-size: 0.9375rem; }

.pie-item .rotulo, .pie-fuentes .rotulo { display: block; margin-bottom: 0.25rem; }

.pie-fuentes {
  max-width: 46rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

.pie-firma {
  margin: 0;
  font-stretch: 75%;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* ── escritorio: el parte al lado de la foto ──────────────────────────── */

@media (min-width: 62rem) {
  .parte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--aire-mucho);
    padding-top: var(--aire-medio);
  }

  .banda img { aspect-ratio: 1000 / 500; }
  .parte-dato { padding-right: 0; }
  .parte-foto figcaption { padding-left: 0; padding-right: var(--borde); }
  .parte-foto img { aspect-ratio: 4 / 3; }

  .pie {
    grid-template-columns: repeat(2, minmax(0, 14rem)) minmax(0, 1fr);
    gap: var(--aire-medio);
    align-items: start;
  }
  .pie-firma { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}

@media print {
  .botones, .saltar { display: none; }
}