/* ============================================================================
   HOTEL AVENIDA — base
   v1 · 2026-09-07

   PORTABLE. Reset, tipografía y primitivas de disposición.
   Depende de tokens.css. No declara ningún color literal.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-md);
  line-height: var(--alto-texto);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--marca);
  font-weight: 700;              /* Arvo Bold */
  line-height: var(--alto-titulo);
  letter-spacing: var(--track-titulo);
}

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul.limpia { margin: 0; padding: 0; list-style: none; }

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

/* Foco visible siempre. Nunca se quita sin reemplazo. */
:focus-visible { outline: var(--foco); outline-offset: 3px; }

/* --- Disposición ---------------------------------------------------------- */

.env {
  width: min(100% - 2 * var(--s5), var(--ancho));
  margin-inline: auto;
}

.seccion { padding-block: var(--s8); }

@media (max-width: 640px) {
  .seccion { padding-block: var(--s7); }
}

/* Salto al contenido: visible solo con teclado. */
.salto {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--tinta);
  color: var(--blanco);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-control);
  z-index: 100;
  text-decoration: none;
  font-weight: 600;
}
.salto:focus { left: var(--s5); }

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

/* Cifras alineadas en columnas de números. */
.cifra { font-variant-numeric: tabular-nums; }

/* --- Una única entrada orquestada, al cargar ------------------------------
   No hay animaciones de scroll ni transiciones en cada tarjeta: eso es ruido.
   Solo entra la placa de llegada, una vez.                                 */
@media (prefers-reduced-motion: no-preference) {
  .anima { animation: entrar .5s cubic-bezier(.2, .7, .3, 1) both; }
  .anima--b { animation-delay: .09s; }
  @keyframes entrar {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}