/* ============================================================
   AYCOMER · Reajuste del navegador y utilidades
   Archivo: base.css
   No edites colores aquí: todos viven en tokens.css
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--texto-f);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.sin-scroll{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.08;letter-spacing:-.02em;font-weight:800}
:focus-visible{outline:3px solid var(--fucsia);outline-offset:2px;border-radius:6px}
::selection{background:var(--miel);color:var(--tinta)}
.contenedor{width:min(100% - 32px,var(--max));margin-inline:auto}
.oculto{display:none !important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- utilidades de marca ---------- */
.texto-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.regla-grad{height:3px;background:var(--grad);border:0;margin:0}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}


/* ============================================================
   FOCO DEL TECLADO

   Se ve, y se ve en los dos temas. Mucha gente navega con
   tabulador —por costumbre, por una lesión en la mano, o con
   lector de pantalla— y sin este anillo no sabe dónde está
   parada. Las pautas piden 3:1 contra el fondo; el doble
   anillo lo garantiza contra fondos claros y oscuros a la vez.

   Se usa :focus-visible y no :focus para que el anillo NO
   aparezca al hacer clic con el mouse, solo al navegar con
   teclado. Es lo que evita que la interfaz se vea "sucia".
   ============================================================ */
:focus{ outline:none }
:focus-visible{
  outline:3px solid var(--fucsia-txt);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 5px rgba(253,251,248,.9);
}
[data-tema="noche"] :focus-visible{
  box-shadow:0 0 0 5px rgba(18,22,43,.9);
}

/* ============================================================
   LECTURA CÓMODA

   Tres ajustes que reducen el cansancio en textos largos:
   · interlineado amplio (1.65) — el ojo salta de renglón sin
     perderse
   · ancho máximo de 68 caracteres — pasado ese punto, volver
     al inicio del renglón cuesta
   · sin justificar — el texto justificado abre "ríos" de
     espacio en blanco que dificultan la lectura
   ============================================================ */
p, li{ line-height:1.65; text-align:left }
.texto-largo{ max-width:68ch }

/* El texto seleccionado se lee: sin esto, el azul del sistema
   sobre el fucsia de la marca queda ilegible. */
::selection{ background:rgba(175,39,125,.22); color:var(--texto) }

/* ============================================================
   RESPETO POR LA CONFIGURACIÓN DE LA PERSONA
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}