:root{
  --bg: #FFF7EA; /* bege claro */
  --primary: #0B3D91; /* azul escuro */
  --accent: #FFD166; /* dourado */
  --muted: #6B7280;
  --card: #FFFFFF;
  --radius: 14px;
}
*{box-sizing:border-box}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; background:var(--bg); color:#0b1736; margin:0}
.wrap{width:92%; max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.site-header{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.85)); position:sticky; top:0; z-index:50; backdrop-filter:blur(6px); box-shadow:0 1px 6px rgba(11,61,145,0.06)}
.site-header .logo{font-weight:700; color:var(--primary); font-size:20px; padding:16px 0}
.nav-desktop{display:flex; gap:18px}
.nav-desktop a{padding:18px 8px; color:var(--primary); text-decoration:none; font-weight:600}
.actions{display:flex; gap:10px; align-items:center}
.btn{padding:10px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:600}
.btn.primary{background:var(--accent); color:#0b1736}
.btn.ghost{background:transparent; border:1px solid rgba(11,61,145,0.08); color:var(--primary)}
.hamburger{display:none; background:none; border:none; padding:12px; cursor:pointer}
.hamburger span{display:block; height:3px; width:22px; background:var(--primary); margin:4px 0; border-radius:3px}

/* Mobile menu */
.mobile-menu{display:none; flex-direction:column; padding:20px; gap:12px; background:linear-gradient(180deg,#fff,#fff); box-shadow:0 8px 24px rgba(11,61,145,0.06)}
.mobile-menu a{color:var(--primary); text-decoration:none; font-weight:600; padding:10px 0}
.mobile-actions{display:flex; gap:10px; margin-top:10px}

/* Main */
.container{width:92%; max-width:900px; margin:30px auto}
.hero{display:flex; gap:20px; align-items:center; justify-content:space-between}
.hero-text h1{font-size:34px; margin:0; color:var(--primary)}
.hero-text p{margin:6px 0 12px; color:var(--muted)}
.hero-art .card.small{background:var(--card); padding:20px; border-radius:12px; box-shadow:0 8px 20px rgba(11,61,145,0.04)}
.features{display:flex; gap:12px; margin:20px 0}
.feature{flex:1; background:var(--card); padding:14px; border-radius:12px; text-align:center; box-shadow:0 6px 18px rgba(11,61,145,0.04); text-decoration:none; color:var(--primary); font-weight:600}
.card{background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:0 8px 30px rgba(11,61,145,0.03); margin-bottom:18px}
.section h2{margin-top:0}
.inline-input{display:flex; gap:8px}
.inline-input input{flex:1; padding:10px; border-radius:10px; border:1px solid #e6e6e6}
.output{margin-top:12px; padding:12px; background:#fbfbff; border-radius:8px}
.muted{color:var(--muted)}

/* Footer */
.site-footer{padding:18px 0; margin-top:36px}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.footer-links a{margin-left:12px; color:var(--muted); text-decoration:none}

/* Responsivo */
@media (max-width: 900px){
  .hero{flex-direction:column; align-items:flex-start}
  .nav-desktop{display:none}
  .hamburger{display:block}
}

@media (max-width: 600px){
  .hero-text h1{font-size:28px}
  .wrap{width:96%}
  .features{flex-direction:column}
}