/* Rosalie Montsavano. Hoja unica del sitio. v001, 25 de agosto de 2026.
   Los tokens se generan desde `tools/contraste_wcag_v001.py`, que es donde el
   contraste esta medido: esta hoja no tiene copia propia de la paleta y por eso
   no puede alejarse de la de la cubierta.
   Cero JavaScript, cero recursos de terceros, cero cookies. */

/* Tipografias autoalojadas, en subconjunto latino. Nunca enlazadas a un tercero:
   el enlace transferiria la IP del visitante sin su consentimiento. */
@font-face { font-family:"Fraunces"; src:url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight:100 900; font-display:swap; }
@font-face { font-family:"Literata"; src:url("../fonts/literata-var.woff2") format("woff2");
  font-weight:200 900; font-display:swap; }
@font-face { font-family:"Alegreya Sans SC"; src:url("../fonts/alegreya-sc-500.woff2") format("woff2");
  font-weight:500; font-display:swap; }
@font-face { font-family:"Alegreya Sans SC"; src:url("../fonts/alegreya-sc-700.woff2") format("woff2");
  font-weight:700; font-display:swap; }

:root {
  --lino-50: #FAF5EA;
  --lino-100: #F2E9D8;
  --lino-200: #E4D7BF;
  --lino-300: #CFBEA1;
  --tinta-900: #1E2A26;
  --tinta-700: #2F433C;
  --tinta-500: #4C635A;
  --tinta-300: #77897F;
  --crepusculo-900: #16222C;
  --crepusculo-700: #2A4D5C;
  --crepusculo-500: #4E7897;
  --crepusculo-300: #7397B0;
  --candil-100: #FBE7B0;
  --candil-300: #EFC982;
  --candil-500: #D2A464;
  --candil-700: #9A6B2F;
  --candil-900: #6B4718;
  --vol-01: #9E7431;
  --vol-02: #5E8B7A;
  --vol-03: #3E6B8C;
  --sombra-900: #0A110F;
  --fondo: var(--lino-50);
  --panel: var(--lino-100);
  --texto: var(--tinta-900);
  --suave: var(--tinta-500);
  --acento: var(--candil-900);
  --filete: var(--lino-300);
  --f-display:"Fraunces",Georgia,serif;
  --f-texto:"Literata",Georgia,serif;
  --f-rotulo:"Alegreya Sans SC","Trebuchet MS",system-ui,sans-serif;
  --ancho: 68rem;
  --lectura: 62ch;
}

/* El anochecer no es un tema alternativo: es la otra mitad de la coleccion. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--crepusculo-900);
    --panel: #1C2C38;
    --texto: var(--lino-50);
    --suave: var(--lino-200);
    --acento: var(--candil-300);
    --filete: var(--crepusculo-700);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { animation:none !important; transition:none !important; }
}
body { margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--f-texto); font-size:1.0625rem; line-height:1.66;
  -webkit-text-size-adjust:100%; }
img { max-width:100%; height:auto; display:block; }

.saltar { position:absolute; left:-9999px; }
.saltar:focus { left:1rem; top:1rem; z-index:20; background:var(--panel);
  color:var(--texto); padding:.7rem 1rem; border:2px solid var(--candil-500); }

a { color:var(--acento); text-decoration:underline;
  text-decoration-color:var(--candil-500); text-underline-offset:.18em;
  text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--candil-500); outline-offset:3px; }

.env { width:min(100% - 2.5rem, var(--ancho)); margin-inline:auto; }

.borrador { background:var(--candil-900); color:var(--lino-50);
  font-family:var(--f-rotulo); font-size:.9rem; letter-spacing:.06em;
  text-align:center; padding:.6rem 1rem; }
.borrador a { color:var(--candil-100); }

header.sitio { padding:1.6rem 0; border-bottom:1px solid var(--filete); }
header.sitio .env { display:flex; flex-wrap:wrap; gap:1rem 1.6rem;
  align-items:center; justify-content:space-between; }
.marca { display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:var(--texto); }
.marca img { width:30px; height:30px; }
.marca span { font-family:var(--f-rotulo); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.95rem; }
nav.sitio ul { list-style:none; display:flex; flex-wrap:wrap; gap:1.3rem;
  margin:0; padding:0; }
nav.sitio a { font-family:var(--f-rotulo); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; font-size:.86rem; text-decoration:none;
  color:var(--suave); border-bottom:1px solid transparent; padding-bottom:2px; }
nav.sitio a:hover, nav.sitio a:focus-visible { color:var(--texto);
  border-bottom-color:var(--candil-500); }
.lengua { font-family:var(--f-rotulo); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; font-size:.86rem; }
/* En estrecho, la barra se reordena en dos filas limpias: marca y lengua arriba,
   navegacion completa debajo. Sin esto, el ultimo enlace y el cambio de lengua
   caen sueltos en lineas propias y la cabecera ocupa un tercio de la pantalla. */
@media (max-width: 60rem) {
  header.sitio .env { row-gap:1.1rem; }
  .marca { order:1; }
  .lengua { order:2; }
  nav.sitio { order:3; flex-basis:100%; }
  nav.sitio ul { gap:.9rem 1.15rem; }
}
/* Por debajo de 26rem la marca y el cambio de lengua no caben juntos en una
   fila: se aprieta la marca en vez de romper la cabecera en cuatro filas. */
@media (max-width: 26rem) {
  .marca span { font-size:.85rem; letter-spacing:.09em; }
  .marca img { width:26px; height:26px; }
  .lengua { font-size:.8rem; }
}

.hero { padding:5rem 0 4rem; }
.hero .env { display:grid; gap:3rem; grid-template-columns:1.25fr .75fr;
  align-items:center; }
@media (max-width: 54rem) { .hero .env { grid-template-columns:1fr; } }
.kicker { font-family:var(--f-rotulo); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; font-size:.9rem; color:var(--acento); margin:0 0 1.1rem; }
h1 { font-family:var(--f-display); font-variation-settings:"opsz" 144,"SOFT" 32,"WONK" 1;
  font-weight:600; font-size:clamp(2.4rem,6vw,3.7rem); line-height:1.04;
  margin:0 0 1.4rem; letter-spacing:-.01em; }
.lead { font-size:1.28rem; line-height:1.52; font-weight:300; max-width:38ch;
  margin:0 0 1.1rem; }
.hero-nota { color:var(--suave); max-width:42ch; margin:0 0 2rem; }
.matiz { display:block; margin-top:.5rem; font-style:italic; }
.cta { display:inline-block; font-family:var(--f-rotulo); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-size:.92rem;
  text-decoration:none; color:var(--fondo); background:var(--acento);
  padding:.85rem 1.7rem; border-radius:3px; }
.cta:hover { background:var(--candil-700); }
.hero figure { margin:0; }
.hero figure img { border-radius:2px; box-shadow:0 18px 44px rgba(10,17,15,.28);
  margin-inline:auto; }
figcaption { font-size:.82rem; color:var(--suave); margin-top:.8rem;
  text-align:center; }

section { padding:3.6rem 0; border-top:1px solid var(--filete); }
h2 { font-family:var(--f-display); font-variation-settings:"opsz" 72,"SOFT" 24;
  font-weight:600; font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.14;
  margin:0 0 1.6rem; }
section p { max-width:var(--lectura); }

.libros { list-style:none; margin:2rem 0 1.6rem; padding:0; display:grid;
  gap:2rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.libro { background:var(--panel); border:1px solid var(--filete); border-radius:3px;
  padding:1.4rem; display:flex; flex-direction:column; gap:.9rem; }
.libro img { border-radius:2px; }
.port { position:relative; }
.provisional { position:absolute; left:0; bottom:0; right:0;
  font-family:var(--f-rotulo); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; font-size:.7rem; text-align:center;
  background:var(--candil-900); color:var(--lino-50); padding:.35rem .4rem; }
.libro .num { font-family:var(--f-rotulo); font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; font-size:.78rem; color:var(--acento); }
.libro h3 { font-family:var(--f-display); font-variation-settings:"opsz" 32,"SOFT" 20;
  font-weight:600; font-size:1.32rem; line-height:1.2; margin:0; }
.libro h3.pendiente { color:var(--suave); font-style:italic; }
.libro p { margin:0; font-size:.97rem; }
.libro .estado { font-family:var(--f-rotulo); font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; font-size:.76rem; color:var(--suave);
  border-top:1px solid var(--filete); padding-top:.8rem; margin-top:auto; }

.cartas { background:var(--panel); border:1px solid var(--filete); border-radius:3px;
  padding:2rem; max-width:44rem; }
.cartas form { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.4rem 0 .9rem;
  align-items:flex-end; }
.campo { display:flex; flex-direction:column; gap:.4rem; flex:1 1 16rem; }
.campo label { font-family:var(--f-rotulo); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; font-size:.8rem; color:var(--suave); }
.campo input { font-family:var(--f-texto); font-size:1rem; padding:.75rem .9rem;
  border:1px solid var(--filete); border-radius:3px; background:var(--fondo);
  color:var(--texto); }
.cartas button { font-family:var(--f-rotulo); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; font-size:.9rem; padding:.8rem 1.6rem; border:0;
  border-radius:3px; background:var(--acento); color:var(--fondo); cursor:pointer; }
.cartas button:hover { background:var(--candil-700); }
.cartas button[disabled] { background:var(--suave); cursor:not-allowed; }
.menudo { font-size:.86rem; color:var(--suave); margin:0; }

.aviso-pendiente { border-left:3px solid var(--candil-500); background:var(--fondo);
  padding:.8rem 1rem; font-size:.88rem; color:var(--suave); margin:1rem 0 0; }

footer.sitio { border-top:1px solid var(--filete); padding:2.6rem 0 3.4rem;
  margin-top:1rem; }
footer.sitio .env { display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:center; }
footer.sitio p, footer.sitio ul { margin:0; font-size:.9rem; color:var(--suave); }
footer.sitio ul { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem; }

.legal { padding:3.4rem 0 2rem; }
.legal h1 { font-size:clamp(2rem,4.4vw,2.7rem); }
.legal h2 { font-size:1.34rem; margin:2.4rem 0 .7rem; }
.legal p, .legal li { max-width:var(--lectura); }
.legal dl { max-width:var(--lectura); }
.legal dt { font-family:var(--f-rotulo); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; font-size:.8rem; color:var(--suave); margin-top:1rem; }
.legal dd { margin:.2rem 0 0; }
.hueco { font-family:var(--f-rotulo); font-weight:700; letter-spacing:.1em;
  background:var(--candil-100); color:var(--candil-900); padding:.08em .5em;
  border-radius:2px; }
@media (prefers-color-scheme: dark) {
  .hueco { background:var(--candil-900); color:var(--candil-100); }
}