*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--c-negro); color: var(--c-crema);
  font: 400 var(--t-base) / 1.45 var(--f-texto);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
h1, h2, h3, h4, p, ul, pre { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
img { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-ambar); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
h2, h3, h4, .cartel__desc, .fila__desc, .ficha__desc { text-wrap: balance; }
p { text-wrap: pretty; }

/* La estrella del logo, hecha con clip-path */
.estrella {
  display: inline-block; width: 18px; height: 18px; background: currentColor; flex: none;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Las rayas del logo: líneas finas a cada lado de la estrella */
.rayas { display: flex; align-items: center; gap: 12px; height: 18px; color: var(--c-texto); }
.rayas::before, .rayas::after {
  content: ""; flex: 1; height: 10px;
  background: repeating-linear-gradient(180deg, currentColor 0 1.5px, transparent 1.5px 4px);
}