:root{
  --paper:#F2F1E9; --surface:#FCFBF7; --ink:#232130; --ink-soft:#615E70;
  --line:#DDD9CD; --line-soft:#E9E5DA;
  --plum:#6B2B52; --plum-soft:#F2E4EB; --sobre-plum:#FCFBF7;
  --amber:#9C6414; --amber-soft:#F7EAD2; --amber-line:#E0BE85;
  --alert:#8A3320; --alert-soft:#F7E3DD;
  --ok:#2F6045; --ok-soft:#E1EFE6;
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141319; --surface:#1D1B23; --ink:#EBE7DF; --ink-soft:#9E9AAA;
    --line:#312E3A; --line-soft:#272430;
    --plum:#E9A5C8; --plum-soft:#33202B; --sobre-plum:#1D1B23;
    --amber:#E7B872; --amber-soft:#332818; --amber-line:#5C4626;
    --alert:#F0A48D; --alert-soft:#3A2019;
    --ok:#8FCBA9; --ok-soft:#1E2E26;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; font-size:15px; line-height:1.55;
}
a{color:var(--plum)}
.env{max-width:960px; margin:0 auto; padding:0 20px 72px}
.estrecho{max-width:720px}

/* cabecera */
.cab{
  border-bottom:1px solid var(--line); margin-bottom:30px; background:var(--paper);
}
.cab .env{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; padding-top:16px; padding-bottom:14px}
.marca{
  font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px; color:var(--plum);
  text-decoration:none; letter-spacing:-.01em; margin-right:auto;
}
.cab nav{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.cab nav a, .cab nav button{
  font:inherit; font-size:13.5px; color:var(--ink-soft); text-decoration:none;
  padding:6px 11px; border-radius:100px; border:1px solid transparent;
  background:none; cursor:pointer;
}
.cab nav a:hover, .cab nav button:hover{background:var(--plum-soft); color:var(--ink)}
.cab nav a[aria-current="page"]{background:var(--plum-soft); color:var(--plum); font-weight:500}

h1{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:34px; line-height:1.13;
   letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance}
h2.seccion{font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
   font-weight:600; margin:34px 0 12px}
.intro{color:var(--ink-soft); max-width:62ch; margin:0 0 26px; font-size:15.5px}

/* botones y campos */
.btn{
  font:inherit; font-size:15px; font-weight:500; cursor:pointer; border-radius:100px;
  padding:11px 22px; border:1px solid var(--plum); background:var(--plum); color:var(--sobre-plum);
  text-decoration:none; display:inline-block; line-height:1.2;
}
.btn:hover{opacity:.9}
.btn.suave{background:transparent; color:var(--plum)}
.btn.peligro{border-color:var(--alert); background:transparent; color:var(--alert); font-size:13.5px; padding:8px 16px}
input[type=text], input[type=email]{
  font:inherit; font-size:15px; padding:10px 13px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface); color:var(--ink); min-width:0;
}
input::placeholder{color:var(--ink-soft); opacity:.7}
input:focus-visible, button:focus-visible, a:focus-visible{outline:2px solid var(--plum); outline-offset:2px}

/* formulario de familia */
.grupo{margin-bottom:20px}
.grupo > .titulo{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 8px; font-weight:500}
.fila{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:7px}
input.nombre{flex:1 1 180px}
input.trato{flex:1 1 140px; font-size:14px}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--surface)}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg label{font-size:13px; padding:9px 13px; cursor:pointer; color:var(--ink-soft); user-select:none}
.seg label + label{border-left:1px solid var(--line)}
.seg input:checked + label{background:var(--plum); color:var(--sobre-plum); font-weight:500}

/* biblioteca */
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px}
.tarjeta{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--plum);
  border-radius:var(--r); padding:18px 20px; display:flex; flex-direction:column; gap:7px;
  text-decoration:none; color:inherit;
}
a.tarjeta:hover{border-color:var(--plum)}
.tarjeta.bloqueada{border-left-color:var(--line); opacity:.72}
.tarjeta .t{font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:600; line-height:1.2}
.tarjeta .r{font-size:13.5px; color:var(--ink-soft); flex:1}
.tarjeta .pie{font-size:12px; color:var(--ink-soft)}
.tarjeta .aviso-mini{font-size:12.5px; color:var(--alert); background:var(--alert-soft);
  padding:5px 9px; border-radius:7px}

/* lector */
.hoja{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:40px 44px 46px}
@media (max-width:640px){ .hoja{padding:26px 22px 32px} }
.hoja h1{font-size:33px}
.texto{font-family:Literata,Georgia,serif; font-size:18.5px; line-height:1.8; max-width:63ch}
.texto p{margin:0 0 1.05em}
.sw{background:var(--amber-soft); border-bottom:1.5px solid var(--amber-line); border-radius:2px}
.falta{background:var(--alert-soft); color:var(--alert); font-size:.86em; padding:1px 5px; border-radius:4px}

/* mensajes */
.msg{border-radius:var(--r); padding:12px 16px; font-size:14px; margin:0 0 20px; line-height:1.5}
.msg.error{background:var(--alert-soft); color:var(--alert)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.info{background:var(--plum-soft); color:var(--ink)}
.estado{font-size:13px; color:var(--ink-soft); min-height:20px}
.estado.guardado{color:var(--ok)}

/* pasos de la portada */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:30px 0 38px}
.paso{display:flex; flex-direction:column; gap:5px}
.paso .n{font-family:Fraunces,Georgia,serif; font-size:26px; color:var(--plum); line-height:1}
.paso .d{font-size:14px; color:var(--ink-soft)}
footer.pie{border-top:1px solid var(--line); margin-top:52px; padding-top:18px;
  font-size:12.5px; color:var(--ink-soft); display:flex; gap:18px; flex-wrap:wrap}
.cargando{color:var(--ink-soft); font-size:14px; padding:14px 0}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }