
:root{
  --accent:#7b1e2e; /* granate */
  --accent-light:#a83242;
  --bg:#fdfaf5; /* beige claro */
  --card:#fffdf9;
  --muted:#7d756b;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; margin:0; background:var(--bg); color:#2d2a26;}
.container{max-width:980px;margin:0 auto;padding:28px;}
.hero{background:linear-gradient(180deg, #fffdf9 0%, #f7f3ec 100%);border-bottom:2px solid #e6ddd2;padding:24px 0;text-align:center;}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.logo{width:90px;height:90px;color:var(--accent)}
.brand h1{margin:0;font-size:26px;color:var(--accent)}
.tag{margin:0;color:var(--muted);font-size:15px}
.nav{margin-top:14px}
.nav a{margin:0 10px;color:var(--accent);text-decoration:none;font-weight:600}
.nav a:hover{color:var(--accent-light)}
.card{background:var(--card);padding:20px;margin:18px 0;border-radius:var(--radius);box-shadow:0 6px 16px rgba(50,40,30,0.06)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:12px}
.icon{width:40px;height:40px;color:var(--accent);margin-bottom:8px}
h2{margin-top:0;color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;border:none;cursor:pointer;font-weight:600}
.btn:hover{background:var(--accent-light)}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)}
form label{display:block;margin:10px 0;font-size:14px}
input, select, textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #d6cec2;background:#fff}
.radios{display:flex;gap:12px;align-items:center;border:none;padding:0;margin:8px 0}
.actions{display:flex;gap:10px;margin-top:10px}
.note{color:var(--muted);font-size:13px}
.footer{border-top:2px solid #e6ddd2;padding:18px 0;background:#f7f3ec;color:#5b5248}
.footer .container{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.footer a{color:var(--accent);text-decoration:none}
@media(max-width:600px){
  .footer .container{flex-direction:column;align-items:flex-start}
}
