*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f2ede2;--wh:#ffffff;--lt:#f8f5ef;--bdr:#d8d2c6;--tx:#1a2630;--txd:#6a7a88;--txb:#0e1820;--ol:#4d6b3a;--old:#3a5229;--oll:#edf2e8;--gd:#b8920a}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:'Lato',sans-serif;line-height:1.6;font-size:16px}
.shell{max-width:1120px;margin:auto;padding-left:24px;padding-right:24px}
.nav{height:80px;background:#fff;border-bottom:2px solid #4d6b3a;display:flex;align-items:center;position:sticky;top:0;z-index:20}
.nav-inner{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:54px}
.brand strong{display:block;font:700 19px Rajdhani,sans-serif;letter-spacing:3px;color:#3a5229}
.brand small{display:block;font:10px "Share Tech Mono",monospace;letter-spacing:1.5px;color:#647583}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links-inner{display:contents}
.nav-links a{text-decoration:none;font:700 14px Rajdhani,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#536472}
.nav-links .nav-cta{background:#4d6b3a;color:white;padding:11px 18px}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-cta{background:#4d6b3a;color:white;padding:11px 18px;text-decoration:none;font:700 14px Rajdhani,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;flex-shrink:0}
.nav-burger span{display:block;width:24px;height:2px;background:#0e1820;transition:transform .2s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
footer{background:#0e1820;color:#ffffff88;padding:56px 0 0;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid #ffffff1a}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col strong{font:700 18px Rajdhani,sans-serif;letter-spacing:1px;color:#fff}
.footer-col p{color:#ffffff88;font-size:13px;margin:0}
.footer-col-title{font:700 11px "Share Tech Mono",monospace;letter-spacing:1.5px;text-transform:uppercase;color:#d5ad3f;margin-bottom:2px}
.footer-col a{color:#ffffffa8;text-decoration:none;font-size:14px}
.footer-col a:hover{color:#fff}
.footer-bottom{padding:20px 0;font-size:13px;color:#ffffff66}
@media(max-width:820px){.nav-burger{display:flex}.nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:2px solid #4d6b3a;display:grid;grid-template-rows:0fr;align-items:stretch}.nav-links.open{grid-template-rows:1fr}.nav-links-inner{display:block;overflow:hidden;min-height:0}.nav-links a{display:block;padding:16px 24px;border-top:1px solid #d8d2c6}.footer-grid{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media(max-width:520px){.brand small{display:none}.nav{height:72px}.footer-grid{grid-template-columns:1fr}}

/* === Estados de interacción (D2) ===
   hover/press quedan dentro de prefers-reduced-motion:no-preference,
   igual que .reveal. focus-visible es un indicador de accesibilidad,
   no una animación decorativa, y por eso vive fuera de ese gate. */
@media(prefers-reduced-motion:no-preference){
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in-view{opacity:1;transform:none}
.nav-links{transition:grid-template-rows .18s cubic-bezier(.16,1,.3,1)}
.nav-links a,.footer-col a{transition:color .16s ease}
.nav-links a:hover{color:var(--ol)}
.button,.nav-cta,.cta,.cta-btn,.blog-cta,.card,.blog-card,.pain-card,.price-card,.product-card,.roadmap-card,.skill-card,.testimonial-card,.step,.status{transition:transform .16s cubic-bezier(.16,1,.3,1),opacity .16s ease,box-shadow .16s ease}
.button:hover,.nav-cta:hover,.cta:hover,.cta-btn:hover,.blog-cta:hover{transform:translateY(-2px)}
.card:hover,.blog-card:hover,.pain-card:hover,.price-card:hover,.product-card:hover,.roadmap-card:hover,.skill-card:hover,.testimonial-card:hover,.step:hover{transform:translateY(-3px)}
.button:active,.nav-cta:active,.cta:active,.cta-btn:active,.blog-cta:active{transform:translateY(0) scale(.97)}
.button.primary:active{transform:translateY(0) scale(.94);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.card:active,.blog-card:active,.pain-card:active,.price-card:active,.product-card:active,.roadmap-card:active,.skill-card:active,.testimonial-card:active,.step:active{transform:translateY(-1px)}
}
/* Anillo de foco estándar del sitio (D2): separador blanco de 2px +
   anillo dorado de 3px. Un solo anillo dorado es casi invisible sobre
   fondos/rellenos dorados (.button.primary, .cta-btn) — el separador
   blanco garantiza contraste sin importar el color del elemento
   enfocado. Tratamiento adoptado para todo el sitio y la app;
   reutilizar esta combinación en vez de reinventarla en D3/D5 o en
   superficies nuevas. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--gd);border-radius:2px;transition:box-shadow .12s ease}