:root{--fondo:#F3EBDE;--sup:#FFFDF9;--tinta:#1D1812;--suave:#5E5244;--tenue:#675B4C;--acento:#A34D12;--acento-lavado:rgba(163,77,18,.12);--sobre:#fff;--vidrio:rgba(253,250,244,.68);--borde:rgba(255,255,255,.62);--linea:rgba(46,35,21,.10);--bien:#177A52;--cobre:rgba(232,138,74,.55);--arena:rgba(242,200,140,.85);--terra:rgba(205,110,92,.38);--cafe:rgba(150,110,80,.26)}
@media (prefers-color-scheme:dark){:root{--fondo:#120D09;--sup:#1C1813;--tinta:#EFE9E1;--suave:#C2B7A8;--tenue:#A99C89;--acento:#F09B5C;--acento-lavado:rgba(240,155,92,.16);--sobre:#1C1005;--vidrio:rgba(34,27,21,.66);--borde:rgba(255,226,196,.1);--linea:rgba(255,226,196,.08);--bien:#63CF9E;--cobre:rgba(232,138,74,.42);--arena:rgba(240,170,90,.22);--terra:rgba(180,70,60,.4);--cafe:rgba(110,76,50,.4)}}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--fondo);color:var(--tinta);font:17px/1.55 "Instrument Sans",-apple-system,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:-10%;z-index:-1;background:radial-gradient(38% 30% at 14% 6%,var(--cobre),transparent 70%),radial-gradient(34% 30% at 92% 22%,var(--arena),transparent 70%),radial-gradient(44% 34% at 28% 78%,var(--terra),transparent 70%),radial-gradient(40% 30% at 90% 96%,var(--cafe),transparent 70%);filter:blur(8px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:var(--acento)}
.envoltura{max-width:1120px;margin:0 auto;padding:0 20px}
header.barra{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
.marca{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:30px;letter-spacing:-.5px;color:var(--tinta);text-decoration:none}.marca span{color:var(--acento)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;font-weight:600;text-decoration:none;border:0;cursor:pointer;font:600 16px/1 "Instrument Sans",sans-serif}
.btn.primario{background:var(--acento);color:var(--sobre);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px -14px rgba(163,77,18,.7)}
.btn.vidrio{background:var(--vidrio);color:var(--tinta);border:1px solid var(--borde);backdrop-filter:blur(18px)}
.btn:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.heroe{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:40px 0 70px}
h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(44px,7vw,84px);line-height:1;letter-spacing:-2px;margin:0 0 18px}
h2{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-1px;margin:0 0 14px}
h3{font-size:19px;margin:0 0 6px}
.bajada{font-size:20px;color:var(--suave);max-width:540px;margin:0 0 28px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.tarjeta{background:var(--vidrio);border:1px solid var(--borde);border-radius:26px;padding:24px;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 22px 40px -30px rgba(46,35,21,.55)}
.orbe{display:flex;justify-content:center}.orbe canvas{width:min(420px,80vw);height:min(420px,80vw)}
.grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 80px}
.grilla p{margin:0;color:var(--suave);font-size:16px}
.icono{width:44px;height:44px;border-radius:22px;background:var(--acento-lavado);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.escena{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start;margin:0 0 90px}
.pasos{display:flex;flex-direction:column;gap:12px;min-height:200px}
.paso{opacity:0;transform:translateY(10px);transition:opacity .38s ease-out,transform .38s ease-out}.paso.ver{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.paso{transition:none}}
.paso .quien{font-size:14px;color:var(--tenue);display:flex;justify-content:space-between;gap:10px}.paso .agente{font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--acento);background:var(--acento-lavado);padding:3px 9px;border-radius:999px}
.paso .dice{margin:6px 0 10px;color:var(--suave)}.paso .hace{background:var(--acento-lavado);border-radius:14px;padding:12px 14px;font-weight:600}
footer{border-top:1px solid var(--linea);padding:28px 0 40px;color:var(--tenue);font-size:14px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.texto{max-width:760px;padding:30px 0 60px}.texto h2{margin-top:34px}.texto p,.texto li{color:var(--suave)}
@media (max-width:860px){.heroe,.escena{grid-template-columns:1fr}.grilla{grid-template-columns:1fr}.orbe{order:-1}}