/* ═══════════════════════════════════════════════════════════════════
   adrianheredia.es · SISTEMA COMÚN (BRIEF §4)
   Lo que comparten todas las páginas: papel, paleta, tipografía,
   píldora, botones, footer y las orejas quietas.
   Portado 1:1 de las maquetas. Los valores salen de tokens.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Alias de las maquetas → tokens ─────────────────────────────────
   Las maquetas escriben --base, --naranja, --tinta…; tokens.css los
   guarda como --c-base, --c-naranja, --c-tinta… Este puente deja que
   el CSS de las maquetas se porte literal sin duplicar ni un valor. */
:root{
  --base:var(--c-base);
  --crema:var(--c-crema);
  --papel:var(--c-papel);
  --tierra:var(--c-tierra);
  --rufus:var(--c-rufus);
  --naranja:var(--c-naranja);
  --agua:var(--c-agua);
  --verde:var(--c-verde);
  --verde-hondo:var(--c-verde-hondo);
  --tinta:var(--c-tinta);
  --ease:var(--ease-emerge);

  /* ── PENDIENTE (ver lista de dudas): valores que están en las maquetas
     y NO en tokens.css. Se recogen aquí, con el hex de la maqueta, para
     no inventar y para que se puedan subir a tokens.css de una vez. ── */
  --error:#A3361F;          /* texto de error de los formularios */
  --borde-campo:#9A8E78;    /* borde de input y casilla en reposo */
  --placeholder:#8C8070;    /* texto del placeholder */
  --naranja-claro:#F47A42;  /* hover del botón primario y de la píldora */
  --verde-hondo-hover:#265A4A; /* hover del botón verde (Contacto) */
  --foto-fondo:#141210;     /* fondo de los marcos de foto mientras carga */
  --punto:#CDBB9A;          /* punto apagado del carrusel del archivo */
  --borde-tarjeta-hover:#D9C7A6;
  --medida:66ch;            /* medida de lectura de las cartas */
}

/* ── Reseteo y base ── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background-color:var(--base);
  background-image:var(--washi);
  background-size:512px 512px;
  color:var(--tinta);
  font-family:var(--f-cuerpo);
  line-height:var(--lh-cuerpo);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Papel washi · valor por defecto: el respaldo (BRIEF §4.3), que sale del
   mismo generador. Se ve desde el primer instante, con o sin JS; luego
   common.js lo cambia por uno recién generado sin que se note. */
:root{--washi:url('/assets/img/papel-washi-respaldo.74af8618.webp')}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

/* ── Accesibilidad (BRIEF §10) ── */
:focus-visible{outline:3px solid var(--rufus);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--tinta);color:var(--base);padding:10px 16px;border-radius:var(--r-pill);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ── Orejas quietas (BRIEF §4.3 · animadas solo en la home) ── */
.ears{position:absolute;left:0;top:0;width:100%;height:min(72vh,660px);pointer-events:none;z-index:0}
main,footer{position:relative;z-index:1}

/* ── Píldora ── */
.pill{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:var(--z-pildora);
  display:flex;align-items:center;gap:4px;padding:5px 5px 5px 20px;
  background:rgba(254,252,248,.82);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);backdrop-filter:blur(12px) saturate(1.15);
  border:1px solid var(--papel);border-radius:var(--r-pill);
  box-shadow:var(--sh-pill);white-space:nowrap;
}
.pill-brand{font-family:var(--f-titular);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta);text-decoration:none}
.pill-sep{width:1px;height:20px;background:var(--papel);margin:0 4px 0 14px}
.pill-cta{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--r-pill);background:var(--naranja);color:var(--tinta);font:700 14px var(--f-cuerpo);text-decoration:none;transition:background var(--d-rapido)}
.pill-cta:hover{background:var(--naranja-claro)}

/* ── Botones (sistema v1.1: píldora, mín. 44 px, primario con texto en Tinta) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 26px;border-radius:var(--r-pill);border:1.5px solid transparent;
  font:700 15px var(--f-cuerpo);cursor:pointer;text-decoration:none;
  transition:background var(--d-rapido),transform .1s,border-color var(--d-rapido);
}
.btn:active{transform:scale(.98)}
.btn--primario{background:var(--naranja);color:var(--tinta)}
.btn--primario:hover{background:var(--naranja-claro)}
.btn--borde{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.btn--borde:hover{background:rgba(30,25,19,.06)}
.btn--verde{background:var(--verde-hondo);color:var(--base)}
.btn--verde:hover{background:var(--verde-hondo-hover)}
.btn[disabled]{opacity:.7;cursor:progress}

/* Spinner del botón mientras envía */
.spin{width:16px;height:16px;border:2px solid rgba(30,25,19,.25);border-top-color:var(--tinta);border-radius:50%;animation:spin .8s linear infinite;display:none}
.is-sending .spin{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Footer (el de cada maqueta; el texto lo pone footer.njk) ── */
footer{padding:34px 0 40px;text-align:center;font-size:var(--t-meta);color:var(--tierra);border-top:1px solid var(--papel)}
footer .fm{font-family:var(--f-titular);font-size:14px;color:var(--tinta);letter-spacing:.04em;margin-bottom:8px}
footer nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
footer a{color:var(--tierra);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--tinta);border-color:var(--naranja)}
/* Solo la política lo lleva: recoge el © que tenía el pie del texto legal */
footer .copy{margin:14px 0 0;font-size:12px;color:var(--tierra)}

/* ── Aparición «desde el agua» (BRIEF §4.3) ───────────────────────────
   Las maquetas usan dos nombres con matices distintos y se portan los dos:
   .reveal (El Cuaderno, Contacto) y .rise (Sobre mí, con desenfoque y
   retardo --d). El observador de common.js atiende a ambos. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .rise{opacity:0;transform:translateY(24px);filter:blur(5px);transition:opacity .7s ease var(--d,0s),transform .8s var(--ease) var(--d,0s),filter .8s ease var(--d,0s)}
.js .rise.in{opacity:1;transform:none;filter:none}

/* ── Movimiento reducido (BRIEF §4.3 · nada se mueve solo) ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js .reveal,.js .rise{opacity:1;transform:none;filter:none}
}

/* ── Píldora en pantallas estrechas (de las maquetas) ── */
@media (max-width:520px){
  .pill{padding-left:16px}
  .pill-brand{font-size:13px}
  .pill-cta{padding:0 14px;font-size:13px}
}

/* ── Turnstile (BRIEF §6.1.3) ──────────────────────────────────────────
   Modo Managed con appearance:'interaction-only' (Sistema Visual,
   12/10/2026): en una visita normal el widget no se ve y el formulario
   queda igual que la maqueta. Por eso NO se reserva alto: cuando
   Cloudflare pide un clic, la caja aparece y empuja el contenido. */
.turnstile:not(:empty){margin-top:14px}

/* Campo trampa del §6.2.5: fuera de la vista y del tabulador, pero no
   display:none, que algunos bots detectan. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}