:root{--papel:#F5F7F3;--ficha:#FFFFFF;--tinta:#17211C;--tinta2:#55635B;--linea:#DCE2DB;--pino:#2B6A4D;--pino-suave:#E3EFE7;--madera:#B98D54;--madera-suave:#F3EADB;
--titular:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--texto:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--papel:#111713;--ficha:#19211C;--tinta:#E7ECE7;--tinta2:#9BA9A0;--linea:#2C3731;--pino:#7CC79E;--pino-suave:#1F3329;--madera:#D6B584;--madera-suave:#33291B;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);font:17px/1.6 var(--texto)}
.pag{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:20px 56px;display:flex;flex-direction:column;gap:18px}
.pag h1,.pag h2,.pag h3{font-family:var(--titular);line-height:1.15;margin:0;text-wrap:balance}
.pag h1{font-size:1.9rem}.pag h2{font-size:1.3rem;margin-top:18px}.pag h3{font-size:1.08rem;font-weight:500;line-height:1.3}
.pag p{margin:0;max-width:65ch}.pag a{color:var(--pino);font-weight:700}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--titular);font-weight:700;color:var(--tinta);text-decoration:none}
.eti{font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta2)}
.sub{color:var(--tinta2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border:1px solid var(--linea);background:var(--ficha);border-radius:999px;padding:5px 12px;font-size:.88rem}
.botones{display:flex;flex-wrap:wrap;gap:10px}
.pag a.btn{background:var(--pino);color:var(--papel);border-radius:10px;padding:13px 20px;text-decoration:none;display:inline-block}
.pag a.btn.sec{background:none;color:var(--tinta);border:1px solid var(--linea)}
.q{border-top:1px solid var(--linea);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.q ol{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:4px}
.q details{border:1px dashed var(--tinta2);border-radius:10px;padding:10px 14px}
.q summary{cursor:pointer;font-weight:700;color:var(--pino)}
.q blockquote{margin:8px 0 0;color:var(--tinta2)}
.temas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.temas a{display:block;border:1px solid var(--linea);background:var(--ficha);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--tinta);font-weight:400;height:100%}
.temas a b{display:block;font-family:var(--titular)}.temas a span{color:var(--tinta2);font-size:.88rem}
.faq details{border-top:1px solid var(--linea);padding:12px 0}.faq summary{cursor:pointer;font-family:var(--titular);font-weight:500}
.faq p{margin-top:8px;color:var(--tinta2)}
.portada{max-width:720px;margin:0 auto;padding-inline:16px;padding-block:22px 0;display:flex;flex-direction:column;gap:10px}
.portada h1{font-family:var(--titular);font-size:1.7rem;line-height:1.12;margin:0;text-wrap:balance}
.portada p{margin:0;color:var(--tinta2);max-width:60ch}
.pie{color:var(--tinta2);font-size:.88rem;border-top:1px solid var(--linea);padding-top:14px}
.puerta{display:flex;flex-direction:column;gap:10px;max-width:420px}
.puerta label{font-family:var(--titular);font-weight:500}
.puerta input{font:inherit;font-size:1.15rem;letter-spacing:.06em;padding:13px 14px;border:2px solid var(--linea);border-radius:10px;background:var(--ficha);color:var(--tinta)}
.puerta .btn{background:var(--pino);color:var(--papel);border:0;border-radius:10px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer}
.puerta #aviso{color:#B1432F;min-height:1.5em}
:focus-visible{outline:3px solid var(--pino);outline-offset:2px}
.ley{background:var(--ficha);border:1px solid var(--linea);border-radius:10px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.pasos{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid var(--linea);padding-top:14px}
.indice{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}.indice .sub{font-size:.9rem}
.pag h2 a{color:inherit}
/* En la web, el aviso de muestra va tras la sesión del día y el anillo se encoge en móvil: el botón de empezar queda arriba. */
#v .aviso{order:9}
@media (max-width:460px){#v .hoy{grid-template-columns:auto 1fr;gap:14px;padding:16px}#v .anillo{width:68px;height:68px}.portada h1{font-size:1.45rem}.portada{padding-block:16px 0;gap:8px}}