/* ============================================================
   TabiPlan · base.css
   Lo comun a todas las paginas: las tipografias, las variables
   que ya no divergen y el marco de las ilustraciones.

   Las paginas de public/ enlazan este archivo. Una pagina nueva
   solo tiene que anadir, antes de su <style>:

     <link rel="preload" href="/fonts/lora-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
     <link rel="stylesheet" href="/css/base.css">

   ------------------------------------------------------------
   LO QUE VIVE AQUI, Y NO SE VUELVE A DECLARAR EN NINGUNA PAGINA

   La regla, para no tener que actualizar esta lista cada vez:
   **todo lo que tenga un solo valor en el proyecto vive aqui.**
   En el :root de una pagina solo va lo que diverge con motivo, y
   ese motivo se escribe al lado. Hoy solo --maxw cumple eso.

   **Si escribes una pagina nueva, NO copies estas variables a su
   :root.** Se heredan por enlazar este archivo. Volver a
   declararlas es lo que hizo falta deshacer en agosto de 2026:
   estaban repetidas en quince archivos con el mismo valor, asi
   que cambiar un color obligaba a tocar quince, y en la practica
   se tocaban unos si y otros no. De ahi salieron tres opacidades
   distintas de --line y cinco pilas tipograficas distintas, todas
   por deriva y ninguna por decision.

   Repetir @font-face ya habia producido dos fallos: cerezos-japon
   llego sin las dos cursivas de Lora, y festivales-japon las
   declaraba apuntando a los ficheros redondos.

   ------------------------------------------------------------
   LO QUE SIGUE EN CADA PAGINA, Y CON MOTIVO

   Solo --maxw, y solo porque diverge de verdad.

   --maxw   el ancho de lectura. Son cuatro y son deliberados:
            1120 px la home y las paginas de contenido, 1000 px la
            calculadora, 740 px los-gestos y 720 px la guia. Una
            pagina de prosa no se lee igual que la portada.

   Y en ejemplo.html y ejemplo-completo.html, su familia propia de
   nombres: --tk, --ac, --soft, --mute, --kt, --os, --tr y --bg2.
   Son las dos unicas paginas sin unificar. Sus valores repiten
   los de aqui con otro nombre, asi que unificarlas es renombrar,
   no recolorear, pero es una tarea aparte.

   ------------------------------------------------------------
   LOS BLANCOS QUE VERAS SUELTOS EN LAS PAGINAS NO SON --paper

   Son de dos clases, y en las dos el blanco puro es lo correcto:
   texto blanco sobre fondo oscuro -.honest strong, .badge, el
   texto de los botones- y las reglas de @media print, que se
   imprimen sobre papel. No los cambies por var(--paper).

   ------------------------------------------------------------
   Lora e Inter se sirven desde /fonts/. Descargadas de Google
   Fonts el 2026-08-07, subconjuntos latin y latin-ext, con los
   unicode-range originales para que el navegador siga bajando
   solo lo que necesita.
   ============================================================ */

:root{
  /* Radios */
  --r:16px;    /* tarjetas, bloques destacados y cajas */
  --r-s:10px;  /* piezas pequenas: etiquetas, celdas, campos */

  /* Paleta */
  --bg:#f4efe6;        /* crema, el fondo del sitio */
  --bg-2:#e8dfd0;      /* crema oscuro, para alternar secciones */
  --paper:#fffdfa;     /* blanco calido de las superficies, NO #fff */
  --ink:#1a1a1a;       /* el texto */
  --ink-soft:#2a2a2a;  /* texto secundario */
  --ink-mute:#6b6b6b;  /* texto apagado, pies y etiquetas */
  --accent:#b85c3a;    /* terracota */
  --accent-2:#4a5d3a;  /* verde */
  --ocre:#9a814f;      /* ocre, tercer acento: etiquetas de dificultad
                          media y el filete de los avisos */

  /* El filete. Un solo valor: habia tres -.12, .13 y .14- y ninguno
     se habia elegido. Compuestos sobre el crema se diferencian en 5
     puntos de 255, asi que no eran tres decisiones, era deriva. */
  --line:rgba(26,26,26,.12);

  /* Tipografia. Las pilas van completas: las versiones recortadas
     que habia en las muestras, pedido, legal y 404 eran
     subconjuntos de estas, asi que no cambia que fuente se usa,
     solo a donde cae si la propia no carga. */
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --jp:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,"Noto Serif CJK JP","Source Han Serif JP","MS Mincho",serif;
}

@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/lora-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(/fonts/lora-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:swap;
  src:url(/fonts/lora-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;
  src:url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* ============================================================
   ILUSTRACIONES

   Aqui hay componente y no solo variables, a proposito: es el
   mismo bloque en cuatro paginas y repetirlo seria volver a la
   dispersion que este archivo vino a resolver.

   SOLO EN ESCRITORIO, Y SIN DESCARGAR EN MOVIL. La media query
   va en el <source>, no en el CSS: por debajo de 701 px ningun
   <source> casa, asi que el navegador se queda con el <img> de
   reserva, que es un GIF de 1x1 embebido en la propia etiqueta.
   No hay peticion de red. Esconder con display:none una imagen
   ya descargada no serviria: en movil el itinerario se usa, no
   se mira.

   EL MARCO NO ES ADORNO. El crema de las laminas no es el de la
   web -de 7 a 19 de delta E, que salta a la vista- y sin marco
   se veria un rectangulo mas amarillo pegado en la pagina. Con
   el radio y el filete de las tarjetas se lee como el papel de
   la lamina, que es lo que es.
   ============================================================ */

.ilus{margin:0;position:relative;z-index:1}
.ilus img{display:block;width:100%;height:auto;
  border-radius:var(--r);border:1px solid var(--line)}
@media(max-width:700px){.ilus{display:none}}