*,*::before,*::after{box-sizing:border-box}
:root{--fondo:#f7efe4;--texto:#2f211a;--suave:#6f5a4d;--cafe:#3d241b;--cafe-hover:#2f1b14;--crema:#fbf2e7;--badge:#efe0cd;--acento:#8a5a2b}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fondo);color:var(--texto);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}
img{max-width:100%;height:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #e5e7eb}
.brand img{display:block;width:64px;height:64px;object-fit:contain}
.site-nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.site-nav a{color:var(--texto);text-decoration:none;font-weight:600}
.site-nav a:hover{color:var(--acento)}
main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1rem}
.doc{max-width:860px}
.doc h1{font-size:2rem;line-height:1.2;margin:0 0 1rem}
.doc h2{font-size:1.3rem;margin:2rem 0 .5rem}
.doc ul,.doc ol{padding-left:1.4rem}
.doc li{margin:.25rem 0}
.toc{background:#fff;border-radius:.75rem;padding:1rem 1.25rem;margin:0 0 2rem}
.toc ol{margin:.5rem 0 0}
.hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2.5rem}
.hero-text{flex:1 1 340px;max-width:600px}
.badge{display:inline-block;background:var(--badge);color:var(--acento);font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px}
.hero h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1.1;margin:1rem 0}
.hero p{color:var(--suave);font-size:1.1rem}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.store-badge img{display:block;width:168px;height:48px;border-radius:.3rem;background:#000;object-fit:cover}
.button{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 1.25rem;background:var(--cafe);color:var(--crema);border-radius:.3rem;text-decoration:none;font-weight:600}
.button:hover{background:var(--cafe-hover);color:#fff}
.social{display:flex;gap:1rem;margin-top:1.5rem}
.social a{color:var(--suave)}
.social a:hover{color:var(--cafe)}
.demo{position:relative;display:block;flex:1 1 300px;max-width:520px}
.demo img{display:block;width:100%}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.6);color:#fff;font-weight:700;padding:.6rem 1.1rem;border-radius:999px;white-space:nowrap}
.demo:hover .play{background:rgba(0,0,0,.8)}
.site-footer{background:var(--cafe);color:var(--crema);text-align:center;padding:1.25rem 1rem;font-size:.9rem}
.site-footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem 1.25rem;margin-bottom:.5rem}
.site-footer a{color:var(--crema)}
.site-footer p{margin:0}