:root{
  --primary:#005EA2;
  --accent:#004D40;
  --bg:#FFFFFF;
  --text:#0F172A;
  --muted:#64748B;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji';line-height:1.6}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--primary);color:#fff;font-weight:600;box-shadow:var(--shadow);transition:.2s}
.btn:hover{transform:translateY(-1px);opacity:.95}
.btn-secondary{background:var(--accent)}
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid #eef2f7}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.logo img{width:34px;height:34px;border-radius:8px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
nav a{color:#0b1220;font-weight:600}
.hero{padding:72px 0 48px}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 12px}
.hero p{font-size:18px;color:var(--muted);margin:0 0 22px}
.badge{display:inline-flex;gap:8px;align-items:center;background:#f5faff;border:1px solid #e5f0ff;padding:6px 10px;border-radius:999px;color:#1e3a8a;font-weight:600;font-size:12px;margin-bottom:12px}
.section{padding:56px 0}
.section h2{font-size:28px;margin:0 0 10px}
.section p.lead{color:var(--muted);margin:0 0 26px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);transition:.2s}
.card:hover{transform:translateY(-2px)}
.card h3{margin:10px 0 8px;font-size:18px}
.card p{color:var(--muted);margin:0}
.features{display:grid;gap:14px;margin-top:10px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature b{color:#0b1220}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
footer{padding:24px 0;border-top:1px solid #eef2f7;color:var(--muted);font-size:14px;margin-top:24px}
.hero-illus{aspect-ratio:16/10;background:linear-gradient(180deg,#f8fbff,transparent);border:1px dashed #e8eef8;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#3b82f6}
/* services nav pills */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.pill{padding:8px 12px;border-radius:999px;background:#f3f4f6;border:1px solid #e5e7eb;font-weight:600;color:#111827}
/* responsive */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .hero h1{font-size:34px}
}

/* Contact form */
form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .row .full{grid-column:1/-1}
input,textarea{width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;font:inherit}
textarea{min-height:140px;resize:vertical}
label{font-weight:600;display:block;margin:10px 0 6px}
.form-note{font-size:12px;color:var(--muted)}
.success{background:#ecfdf5;border:1px solid #86efac;color:#065f46;padding:12px;border-radius:10px}
.error{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;padding:12px;border-radius:10px}
/* Tamaño de los íconos en las tarjetas de servicios */
.card img {
  width: 80px;         /* Cambia este valor para ajustar tamaño */
  height: 80px;
  object-fit: contain;  /* Evita distorsión */
  margin-bottom: 12px;  /* Espacio entre ícono y texto */
}
/* === BOTÓN FLOTANTE === */
.wsp-multi-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 62px;
  height: 62px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.25s ease;
}
.wsp-multi-btn:hover {
  transform: scale(1.08);
}
.wsp-multi-btn img {
  width: 32px;
  height: 32px;
}

/* === PANEL CENTRADO (MODAL) === */
#wsp-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 92%;
  max-width: 340px;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
}

#wsp-panel.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.wsp-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.wsp-panel-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.close-panel {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
}

.wsp-option {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 14px;
  cursor: pointer;
  background: #fafafa;
  transition: 0.2s ease;
}

.wsp-option:hover {
  background: #e8f5e9;
  border-color: #25D366;
}

.wsp-option .emoji {
  font-size: 28px;
}