css/base.css

/* Base — reset mínimo y tipografía. Sin decisiones de diseño propias:
   todo valor sale de tokens.css. */

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--f-familia);
  font-weight: var(--f-peso-normal);
  color: var(--texto-noche);
  background: var(--c-noche-900);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; cursor: pointer; }
textarea { font: inherit; }
img { max-width: 100%; display: block; }

.visor {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--e-7);
  border: 0;
  background: var(--velo-visor);
  color: var(--texto-herramientas);
}
.visor::backdrop { background: var(--velo-visor); }
.visor__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--e-5);
  font-size: var(--f-sm);
}
.visor__imagen {
  width: 100%;
  height: calc(var(--m-visor-maximo) - var(--e-11));
  object-fit: contain;
}

.modal-intencion {
  width: min(var(--m-modal-intencion), calc(100% - var(--e-10)));
  margin: auto;
  padding: var(--e-8);
  border: 0;
  border-radius: var(--r-xl);
  background: var(--superficie-carta);
  color: var(--texto-principal);
  box-shadow: var(--sombra-carta);
}
.modal-intencion::backdrop { background: var(--velo-modal); }
.modal-intencion__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-6);
}
.modal-intencion__sobrelinea { color: var(--texto-tenue); font-size: var(--f-s); }
.modal-intencion h2 { margin: var(--e-2) 0 0; font-size: var(--f-l); font-weight: var(--f-peso-normal); }
.modal-intencion__apunte { margin: var(--e-6) 0; color: var(--texto-secundario); font-size: var(--f-sm); }
.modal-intencion__acciones { display: flex; gap: var(--e-3); margin-top: var(--e-7); }
.modal-intencion__acciones .accion { width: auto; flex: 1; }

/* Accesible pero invisible: para etiquetas que solo lee un lector de pantalla */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

[hidden] { display: none !important; }

/* Entradas escalonadas */
.entra   { animation: entra var(--t-entrada) var(--curva-suave) both; }
.entra-2 { animation: entra var(--t-entrada) var(--curva-suave) var(--t-retardo-2) both; }
.entra-3 { animation: entra var(--t-entrada) var(--curva-suave) var(--t-retardo-3) both; }

@keyframes entra {
  from { opacity: 0; transform: translateY(var(--e-4)); }
  to   { opacity: 1; transform: none; }
}

/* token-libre: anular animaciones no es una decisión de diseño */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;   /* token-libre */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;  /* token-libre */
  }
}