/* ---------------------------------------------------------------------------
   Base — El Rincon del Quijote
   ---------------------------------------------------------------------------
   Puesta a cero y reglas comunes a la carta publica y al panel. Solo lo que
   comparten de verdad: tipografia, cajas, foco y areas tactiles. Cada
   aplicacion trae sus propios componentes en su carpeta.
--------------------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  /* El usuario manda: nada de bloquear el zoom ni de fijar el tamano en px. */
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--letra-texto);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }

/* El navegador ya esconde lo que lleva [hidden], pero con una regla de agente
   de usuario, y CUALQUIER display puesto aqui la gana. Sin esta linea, un
   campo con class="entrada" (display:block) y atributo hidden se sigue viendo.
   Paso con el campo de "otra hora" del panel. */
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { background: none; border: none; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* --- Foco visible ---------------------------------------------------------
   Seccion 6: el foco tiene que verse. Se pinta por fuera para que no descuadre
   la caja, y en granate para que se lea sobre crema y sobre blanco. */
:focus-visible {
  outline: 2.5px solid var(--granate);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* --- Areas tactiles -------------------------------------------------------
   44 px es el minimo del encargo. Se usa en el elemento, no en un envoltorio:
   lo que tiene que ser grande es lo que se toca. */
.toque-min { min-height: var(--toque-min); min-width: var(--toque-min); }

/* --- Solo para lectores de pantalla -------------------------------------- */
.solo-lectura-pantalla {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Salto al contenido --------------------------------------------------- */
.saltar {
  position: absolute;
  left: var(--e-2);
  top: -100px;
  z-index: 100;
  background: var(--granate);
  color: var(--crema);
  padding: var(--e-3) var(--e-4);
  font-family: var(--letra-rotulo);
  font-weight: 700;
  letter-spacing: var(--track-rotulo);
  transition: top var(--transicion);
}
.saltar:focus { top: var(--e-2); }

/* --- La onda de cobre -----------------------------------------------------
   Separador de la carta impresa. Con moderacion. */
.onda {
  height: 9px;
  background-image: var(--onda);
  background-size: 40px 9px;
  background-repeat: repeat-x;
}
.onda--clara { background-image: var(--onda-clara); }

/* --- Rotulo de seccion: cachet blanco sobre banda granate -----------------
   Es la firma del diseno, sacada literalmente de la carta impresa. Se repite
   en la carta publica y en las cabeceras de grupo del panel. */
.banda {
  background: var(--grad-banda);
  padding: 11px 0 12px;
  position: relative;
}
.cartel {
  background: var(--blanco);
  display: inline-block;
  padding: 5px 22px 4px;
  margin-left: var(--e-4);
  font-family: var(--letra-rotulo);
  font-size: 20px;
  font-weight: 700;
  color: var(--granate-osc);
  letter-spacing: var(--track-cartel);
}

/* --- Columna de escritorio ------------------------------------------------
   No hay un segundo layout: la misma columna de movil, centrada y con tope de
   720 px. Seccion 3. */
.columna {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}