/* Colores corporativos */
:root{
  --azul:#2e99d5;
  --amarillo:#fbbd02;
  --azul-prof:#37497B;
  --texto:#1d2b4f;
  --bg:#f9fafc;
  --card:#ffffff;
}

*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--texto)}

.header{
  background:#ffffff; /* header blanco */
  border-bottom:4px solid var(--azul);
}
.header .wrap{
  max-width:1100px;margin:auto;display:flex;gap:18px;align-items:center;padding:16px;
}
.logo{height:70px;object-fit:contain}
.tagline h1{margin:0;color:var(--azul-prof);font-size:2rem}
.tagline p{margin:.25rem 0 0;color:#5b6b8e}

.container{max-width:1100px;margin:auto;padding:24px}

.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr)); /* dos columnas */
  gap:16px;
}
.card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);padding:18px;border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.card h2{margin:0 0 4px 0;color:var(--azul)}
.card p{margin:0;opacity:.9}
.icon{width:56px;height:56px;border-radius:12px;border:3px solid var(--amarillo)}

.footer{background:var(--azul-prof);color:#fff;padding:24px}
.footer a{color:#fff;text-decoration:none}

/* Botón flotante WhatsApp */
.whatsapp-fab{
  position:fixed;right:18px;bottom:18px;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;font-size:26px;text-decoration:none;
  border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .12s ease;
}
.whatsapp-fab:hover{transform:scale(1.06)}

/* Responsive */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .logo{height:56px}
  .tagline h1{font-size:1.6rem}
}