/* =====================================================================
   base.css: ajustes generales, tipografía, contenedores de pantalla y movimiento.
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--letra-texto);font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img,svg,video{display:block}
video{width:100%;height:100%;object-fit:cover}
[hidden]{display:none!important}

::selection{background:rgba(232,161,58,.3)}
:where(input,textarea){caret-color:var(--ambar)}
input[type="checkbox"]{accent-color:var(--ambar);width:20px;height:20px}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--anillo-foco)}

/* Botones y filas pulsables se hunden un poco al tocarlos (como en la web). */
:where(button,[data-accion]){transition:transform 380ms var(--curva),background-color 220ms var(--curva),color 220ms var(--curva),opacity 220ms var(--curva)}
:where(button,[data-accion]):active:not(:disabled){transform:scale(.97);transition-duration:90ms}

#app{position:fixed;inset:0;overflow:hidden}

/* ---------- Pantallas ---------- */
/* Cada pantalla tiene su propio scroll; la página no se desplaza nunca entera. */
.pantalla{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--seguro-arriba) + 14px) var(--margen) calc(var(--alto-barra) + 32px);
  /* Halo ámbar arriba a la derecha; se desplaza con el contenido. */
  background:radial-gradient(120% 340px at 100% 0,var(--brillo),transparent 70%) no-repeat local,var(--fondo)}
.pantalla--sin-barra{padding-bottom:calc(var(--seguro-abajo) + 32px)}
.pantalla--centrada{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding-inline:32px}

/* ---------- Tipografía ---------- */
.titulo-pantalla{font-family:var(--letra-titulo);font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.035em;margin:0;text-wrap:balance}
.titulo-seccion{font-family:var(--letra-titulo);font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0}
.texto-2{color:var(--tinta-2)}
.texto-3{color:var(--tinta-3)}
.texto-peque{font-size:13.5px}

/* Cabecera de pantalla: título a la izquierda, acción redonda a la derecha. */
.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.cabecera .titulo-pantalla{padding-top:18px}

/* Sección: título con su dato o enlace a la derecha, y el contenido debajo. */
.seccion{margin-top:34px}
.seccion-cabecera{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.seccion-dato{font-size:14px;color:var(--tinta-2)}

/* Etiqueta pequeña encima de un título ("SÁBADO 26 SEPT."). */
.antetitulo{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin:0}

/* ---------- Movimiento ---------- */
@keyframes aparecer{from{opacity:0}}
@keyframes hoja-sube{from{transform:translateY(100%)}}
@keyframes entrar-lateral{from{transform:translateX(100%)}}
@keyframes subir{from{opacity:0;transform:translateY(14px)}}
/* Al cambiar de pantalla, los bloques entran escalonados (solo entonces, no en cada repintado). */
.pantalla--entrando > *{animation:subir 480ms var(--curva-salida) both}
.pantalla--entrando > :nth-child(2){animation-delay:40ms}
.pantalla--entrando > :nth-child(3){animation-delay:80ms}
.pantalla--entrando > :nth-child(4){animation-delay:120ms}
.pantalla--entrando > :nth-child(5){animation-delay:160ms}
.pantalla--entrando > :nth-child(n+6){animation-delay:200ms}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
}