/* Teika — estilos. Oscuro por defecto; [data-theme=light] para claro */
:root{--bg:#1a1220;--bg2:#2a1a33;--fg:#f1e9f4;--mut:#bba9c1;--line:rgba(220,161,226,.22);--p:rgb(220,161,226);--p2:#9d5c8f;--ac:rgb(220,161,226);--gt:#f0b62d;--btn-fg:#1a1220;--r:2px;--fh:"Ubuntu",system-ui,sans-serif}
[data-theme=light]{--bg:#f4edf5;--bg2:#e7d6ea;--fg:#2a1a33;--mut:#625066;--line:rgba(122,70,112,.3);--p:#7a4670;--p2:#9d5c8f;--ac:#7a4670;--gt:#8a6200;--btn-fg:#fff}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.75 "Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);background:var(--bg);background-image:radial-gradient(900px 500px at 10% -10%,color-mix(in srgb,var(--p2) 35%,transparent),transparent 70%),linear-gradient(180deg,transparent 40%,var(--bg2));background-attachment:fixed;min-height:100dvh;padding-bottom:calc(84px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--gt);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--p);color:var(--btn-fg);padding:10px 14px;border-radius:var(--r);font-weight:600}
.skip:focus{top:8px}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--line)}
.logo{width:44px;height:44px}
.icon-btn{display:grid;place-items:center;background:none;border:1px solid var(--line);color:var(--fg);width:44px;height:44px;border-radius:var(--r);cursor:pointer}
.icon-btn:hover{border-color:var(--gt);color:var(--gt)}

main,footer{max-width:920px;margin:0 auto;padding:0 20px}
.hero{padding:8vh 0 6vh}
h1{font-family:var(--fh);font-size:clamp(2.1rem,8.5vw,4rem);line-height:1.1;font-weight:500;letter-spacing:-.01em;max-width:15ch;margin-bottom:18px}
.lead{color:var(--mut);font-size:1.125rem;max-width:46ch;margin-bottom:10px}
.cta-line{font-weight:600;color:var(--ac);margin-bottom:28px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiles a{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:color-mix(in srgb,var(--p2) 16%,transparent);transition:transform .2s,border-color .2s,background .2s}
.tiles i{font-size:1.7rem;color:var(--ac)}
.tiles span{font-size:.82rem;color:var(--mut);line-height:1.35}
.tiles b{display:block;font-family:var(--fh);font-size:1.08rem;font-weight:500;color:var(--fg)}
.tiles a:hover,.tiles a:focus-visible{transform:translateY(-3px);border-color:var(--gt);background:color-mix(in srgb,var(--p2) 30%,transparent)}

.block{padding:56px 0;border-top:1px solid var(--line)}
.bh{margin-bottom:20px}
h2{font-family:var(--fh);font-size:clamp(1.65rem,6vw,2.3rem);font-weight:500;line-height:1.15;margin-bottom:10px}
h2 i{color:var(--ac);margin-right:12px;font-size:.8em}
h3.tag{font-family:var(--fh);font-size:clamp(1.15rem,4vw,1.4rem);font-weight:400;line-height:1.4;color:var(--ac);margin-bottom:10px}
.block p{color:color-mix(in srgb,var(--fg) 82%,transparent);max-width:56ch}
.block p.sub{font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gt);margin-bottom:10px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font-size:.92rem;font-weight:600;border:1px solid var(--p);background:var(--p);color:var(--btn-fg);border-radius:var(--r);cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--gt)}
.btn.ghost{background:none;color:var(--fg);border-color:var(--line)}

footer{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:20px;border-top:1px solid var(--line);color:var(--mut);font-size:.85rem}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.dock a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0;font-size:.68rem;font-weight:500;color:var(--mut);border-top:2px solid transparent;margin-top:-1px}
.dock i{font-size:1.1rem}
.dock a.on{color:var(--gt);border-top-color:var(--gt)}

dialog{margin:auto;width:min(560px,calc(100% - 24px));padding:22px;background:var(--bg);color:var(--fg);border:1px solid var(--p);border-radius:var(--r);box-shadow:8px 8px 0 var(--p2)}
dialog::backdrop{background:rgba(10,5,14,.7);backdrop-filter:blur(3px)}
.qhead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
#qtitle{font-family:var(--fh);font-size:1.2rem;font-weight:500;line-height:1.3}
.bar{height:4px;background:var(--line);margin:16px 0 20px}.bar i{display:block;height:100%;width:0;background:var(--gt);transition:width .3s}
.opt{display:block;width:100%;text-align:left;color:inherit;background:none;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:10px;cursor:pointer;min-height:48px}
.opt:hover{border-color:var(--gt);background:color-mix(in srgb,var(--p2) 22%,transparent)}
#qbody h4{font-size:1.05rem;font-weight:600;outline:none}
#qbody .res{font-family:var(--fh);font-size:1.9rem;font-weight:500;line-height:1.15;color:var(--gt);margin:6px 0 10px}
#qbody small{display:block;margin-top:14px;color:var(--mut)}

@media(min-width:800px){.block{display:grid;grid-template-columns:5fr 7fr;gap:48px;padding:72px 0}.bh{margin:0}}
@media(min-width:720px){.tiles{grid-template-columns:repeat(4,1fr)}.hero{padding-top:11vh}.tiles b{font-size:1.02rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}