/* ============================================================
   Cuaderno Móvil — base compartida
   La cargan index.php y _legal_header.php.
   Los nombres de token son los mismos del sitio hermano:
   solo cambian los valores. Paleta grafito + bronce, elegida
   para no rozar los colores corporativos de ningún operador.
   ============================================================ */

:root{
  --paper:     #f4f2ee;
  --paper-2:   #e9e6df;
  --card:      #fdfcfa;
  --ink:       #14181c;
  --ink-2:     #3a4249;
  --ink-3:     #6b747c;
  --line:      #dcd8d0;
  --line-2:    #c3bdb2;
  --tinta:     #1e2a33;
  --tinta-2:   #2f4350;
  --tinta-soft:#e4e9ec;
  --ambar:     #a06a2c;
  --ambar-2:   #8a5822;
  --ambar-soft:#f2e8d8;
  --teja:      #8f4a35;
  --teja-soft: #f0e0da;
  --vino:      #7d2f33;
  --vino-soft: #efdcdd;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans:  "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* Sin esto la cabecera sticky se come los anclajes:
   franja (33px) + header (~71px) + holgura. */
html{scroll-padding-top:92px}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

a{color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--ambar-2)}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:700;color:var(--ink);line-height:1.22}

.container{max-width:1080px;margin:0 auto;padding:0 22px}
.reading{max-width:720px;margin:0 auto;padding:0 22px}

/* ===== Botones ===== */
.btn{
  display:inline-block;padding:13px 24px;
  font-weight:600;font-size:16px;text-decoration:none;cursor:pointer;
  border:1.5px solid var(--tinta);font-family:var(--sans);
}
.btn-fill{background:var(--tinta);color:#fff}
.btn-fill:hover{background:var(--tinta-2);border-color:var(--tinta-2);color:#fff}
.btn-line{background:transparent;color:var(--tinta)}
.btn-line:hover{background:var(--tinta-soft);color:var(--tinta)}

/* Foco visible: el sitio se navega con teclado. */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--ambar-2);
  outline-offset:3px;
}

::selection{background:var(--ambar-soft)}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}