:root{ 
  --bg:#fff9f0;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ring:#e5e7eb;
  --brand:#0e7c66;
  --brand2:#0a5b4c;
  --danger:#b91c1c;
  --shadow: 0 8px 22px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
main{padding:24px 0}
h1,h2,h3{margin:0 0 12px}
p{line-height:1.55}
.section{padding:18px 0}
.card{background:var(--card); border:1px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow)}
.card.pad{padding:16px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){ .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width: 540px){ .grid.cols-3,.grid.cols-4{grid-template-columns:1fr} }
.btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;font-weight:700}
.btn:hover{background:var(--brand2)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--brand)}
.btn.danger{background:var(--danger)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--ring);background:#fff}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--ring);text-align:left;vertical-align:top}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.input, select, textarea{width:100%;padding:10px 12px;border:1px solid var(--ring);border-radius:12px;background:#fff}
textarea{min-height:100px;resize:vertical}
.notice{padding:12px 14px;border-radius:14px;border:1px solid var(--ring);background:#fff}
.notice.ok{border-color:#bbf7d0;background:#f0fdf4}
.notice.err{border-color:#fecaca;background:#fef2f2}

/* ✅ SOLO en el header: pegar todo al borde izquierdo (sin afectar el resto del sitio) */
.site-header .container{
  max-width:100%;
  margin:0;
  padding-left:0;
  padding-right:12px;
}

.site-footer{padding:22px 0;border-top:1px solid var(--ring);background:#fff}
.footer-social{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.social-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--ring);background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.social-btn:hover{transform:translateY(-1px)}
.social-btn i{font-size:18px;color:var(--brand)}