@font-face {
  font-family: "Bitter";
  src: url("/hilo/bitter.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/hilo/atkinson.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/hilo/atkinson-negrita.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

:root {
  --arena: #f4ecdf;
  --papel: #fffaf2;
  --tinta: #2b211c;
  --tenue: #6b5d52;
  --linea: #e2d5c3;
  --terra: #b24a2a;
  --terra-osc: #8e3a20;
  --ocre: #d79b2b;
  --verde: #3f6b4f;
  --morado: #6a4766;
  --guarda: linear-gradient(to bottom, var(--terra) 0 22%, var(--ocre) 22% 38%, var(--verde) 38% 58%, var(--morado) 58% 74%, var(--ocre) 74% 86%, var(--terra) 86%);
}

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

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

body {
  margin: 0;
  background: var(--arena);
  color: var(--tinta);
  font: 17px/1.62 "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

a { color: var(--terra-osc); text-underline-offset: 2px; }
a:hover { color: var(--terra); }

h1, h2, h3 {
  font-family: "Bitter", Georgia, serif;
  line-height: 1.18;
  color: var(--tinta);
}

.guarda { height: 12px; background: var(--guarda); }

.dintel { background: var(--papel); border-bottom: 1px solid var(--linea); }
.dintel-in { max-width: 760px; margin: 0 auto; padding: 14px 16px 12px; }
.blason {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tinta);
}
.blason-j {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--terra);
  color: var(--papel);
  font: 800 26px/1 "Bitter", Georgia, serif;
  box-shadow: inset 0 -5px 0 var(--ocre);
}
.blason-txt { display: flex; flex-direction: column; line-height: 1.15; }
.blason-txt b { font: 800 1.2rem/1.1 "Bitter", Georgia, serif; }
.blason-txt small { color: var(--tenue); font-size: .82rem; }

.ruta { margin-top: 12px; }
.ruta ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ruta a {
  display: block;
  padding: 5px 11px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--arena);
  color: var(--tinta);
  font-size: .9rem;
  text-decoration: none;
}
.ruta a:hover { border-color: var(--terra); color: var(--terra-osc); }
.ruta a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.lienzo {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 44px;
}

h1 { font-size: clamp(1.7rem, 5.4vw, 2.35rem); font-weight: 800; margin: 24px 0 10px; }
.entrada { margin: 0 0 12px; font-size: 1.04rem; }

.parte {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0 0 14px;
  color: var(--tenue);
  font-size: .92rem;
  line-height: 1.5;
}
.parte > span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.parte b { color: var(--tinta); }
@media (max-width: 599px) {
  .parte { min-height: 3em; }
  .parte > span:first-child { flex-basis: 100%; }
}

.puntas {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.puntas li {
  min-width: 0;
  padding: 8px 4px 7px;
  border-radius: 10px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--c, var(--terra));
  text-align: center;
}
.puntas a { color: inherit; text-decoration: none; display: block; }
.puntas small { display: block; color: var(--tenue); font-size: .74rem; line-height: 1.2; overflow-wrap: anywhere; }
.puntas b { display: block; font-size: 1.12rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.puntas .vacio b { color: var(--tenue); }

.tirada {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
}
.tirada thead th:first-child { border-top-left-radius: 11px; }
.tirada thead th:last-child { border-top-right-radius: 11px; }
.tirada caption {
  caption-side: top;
  text-align: left;
  padding: 0 2px 8px;
}
.tirada caption strong {
  font: 700 1.18rem/1.2 "Bitter", Georgia, serif;
  border-left: 6px solid var(--c, var(--terra));
  padding-left: 8px;
}
.tirada caption span { color: var(--tenue); font-size: .9rem; margin-left: 6px; }
.tirada caption em {
  display: block;
  height: 1.4em;
  margin-top: 3px;
  padding-left: 14px;
  overflow: hidden;
  color: var(--tenue);
  font-size: .86rem;
  line-height: 1.4;
  font-style: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tirada th {
  padding: 6px 2px;
  background: #f6ecdc;
  color: var(--tenue);
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
}
.tirada td {
  height: 2.6em;
  padding: 0 2px;
  line-height: 1.2;
  border-top: 1px solid var(--linea);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tirada td + td { border-left: 1px solid var(--linea); }
.tirada .pto {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 3px;
  color: var(--tenue);
  font-size: .72rem;
  text-align: right;
}
.tirada td b { font-size: 1.1rem; letter-spacing: .03em; }
.tirada td.mayor { background: #f7e3bd; }
.tirada td.mayor b { color: var(--terra-osc); }
.tirada.sin-extracto td b { color: #a3958a; font-weight: 400; }

[data-t="previa"] { --c: var(--terra); }
[data-t="primera"] { --c: var(--ocre); }
[data-t="matutino"] { --c: var(--verde); }
[data-t="vespertino"] { --c: var(--morado); }
[data-t="nocturno"] { --c: var(--tinta); }

.pirca {
  display: block;
  max-width: 440px;
  margin: 18px auto;
  text-align: center;
}
.pirca[hidden] { display: none; }
.pirca-enlace { display: block; }
.pirca img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 764 / 960;
  border-radius: 12px;
}
.pirca small { display: block; margin-top: 4px; color: var(--tenue); font-size: .72rem; }

@media (min-width: 1140px) {
  .pirca {
    position: absolute;
    top: 24px;
    bottom: 44px;
    left: calc(100% + 24px);
    width: min(300px, calc((100vw - 760px) / 2 - 44px));
    max-width: none;
    margin: 0;
  }
  .pirca-enlace { position: sticky; top: 16px; }
  .pirca img { aspect-ratio: 736 / 1760; }
}

.relato { margin-top: 26px; }
.relato h2 { font-size: 1.42rem; font-weight: 700; margin: 34px 0 10px; }
.relato h3 { font-size: 1.12rem; margin: 22px 0 8px; }
.relato p, .relato li { overflow-wrap: break-word; }
.relato ol, .relato ul { padding-left: 1.3em; }
.relato li { margin: 5px 0; }

.desliza { max-width: 100%; overflow-x: auto; margin: 16px 0; }
.grilla {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--papel);
  font-size: .95rem;
}
.grilla caption { caption-side: top; text-align: left; color: var(--tenue); font-size: .86rem; padding: 0 0 6px; }
.grilla th, .grilla td {
  padding: 8px 10px;
  border: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.grilla thead th { background: var(--tinta); color: var(--papel); border-color: var(--tinta); font-weight: 700; }
.grilla tbody th { font-weight: 700; }

.recuadro {
  margin: 20px 0;
  padding: 12px 14px;
  background: var(--papel);
  border-left: 5px solid var(--ocre);
  border-radius: 0 10px 10px 0;
  font-size: .95rem;
}

.consulta {
  margin: 18px 0;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 12px;
}
.consulta label { display: block; font-weight: 700; margin-bottom: 4px; }
.consulta .fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.consulta .campo { flex: 1 1 140px; min-width: 0; }
.consulta input, .consulta select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cbb9a2;
  border-radius: 8px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 1.05rem;
}
.consulta button {
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--terra);
  color: var(--papel);
  font: 700 1rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif;
  cursor: pointer;
}
.consulta button:hover { background: var(--terra-osc); }
.consulta output, .consulta .salida { display: block; margin-top: 12px; }
.salida ul { margin: 6px 0 0; padding-left: 1.2em; }

.onirica td:first-child, .onirica th:first-child { width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

.zocalo { margin-top: 10px; background: var(--tinta); color: #eadfcf; }
.zocalo a { color: #f3c77a; }
.zocalo-in { max-width: 760px; margin: 0 auto; padding: 22px 16px 28px; font-size: .9rem; }
.zocalo p { margin: 0 0 10px; }
.zocalo ul { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }

.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
  container-type: inline-size;
}
.velo[hidden] { display: none; }
.velo-fondo { position: absolute; inset: 0; background: rgba(28, 20, 15, .74); }
.velo-carta { position: relative; width: fit-content; max-width: 100%; }
.velo-carta a { display: block; }
.velo-carta img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(764px, 100cqi);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.velo-cruz {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 46px;
  height: 46px;
  border: 3px solid var(--papel);
  border-radius: 50%;
  background: var(--terra);
  color: var(--papel);
  font: 700 30px/1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.velo-cruz:hover { background: var(--terra-osc); }
@media (min-width: 1140px) {
  .velo-carta img { max-width: min(736px, 100cqi); }
}