:root{
  --green:#1F6B3A;
  --green-dark:#154D2A;
  --teal:#0F6E56;
  --ink:#1A1A1A;
  --line:#E7E5DD;
  --bg:#FFFFFF;
  --offbg:#F7F6F1;
  --accent:#1958C1;
  --red:#C0392B;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

.topbar{background:var(--green);color:#fff;font-size:12px;padding:9px 0;text-align:center;font-weight:500;}

nav{border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;}
.logo-wrap{display:flex;align-items:center;gap:8px;}
.logo-mark{width:28px;height:28px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;}
.logo-text{font-size:18px;font-weight:700;line-height:1;color:var(--ink);}
.logo-text small{display:block;font-size:9px;font-weight:500;color:#8a8a8a;letter-spacing:0.03em;}

.ic{width:19px;height:19px;stroke:#333;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:6px;border:none;cursor:pointer;}
.btn-green{background:var(--green);}

/* MOBILE FIRST: todo apilado en columna por defecto */
.grid-2{display:grid;grid-template-columns:1fr;gap:16px;}
.grid-4{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.offbg-box{background:var(--offbg);border-radius:10px;padding:18px;}

footer{border-top:1px solid var(--line);padding:24px 0;margin-top:30px;font-size:12px;color:#888;text-align:center;}

/* A partir de aquí, pantallas más grandes (tablet y escritorio) */
@media (min-width: 768px){
  .grid-2{grid-template-columns:1fr 1fr;gap:24px;}
  .grid-4{grid-template-columns:repeat(4,1fr);gap:14px;}
  .nav-inner{padding:16px 0;}
}