/* =========================================================
   DISEÑO WEB — estilos propios de esta página.
   Reutiliza las variables e identidad definidas en style.css
   (colores, tipografías, .btn, .svc-grid, .why-grid, etc.)
   y solo agrega los componentes que no existían: pasos de
   proceso y tarjetas de planes de diseño web.
   ========================================================= */

/* ---------- Página activa en el menú ---------- */
nav.links a.active{color:var(--navy-900);}
nav.links a.active::after{width:100%;}

/* ---------- Hero secundario (interno) ---------- */
.hero-alt{padding:84px 0 76px;}
.hero-alt .hero-sub{max-width:50ch;}

/* ---------- Franja de beneficios extra dentro del hero-panel ---------- */
.hero-need .ic.accent{background:rgba(176,141,87,0.18);border-color:rgba(176,141,87,0.3);}

/* ---------- Proceso de trabajo ---------- */
.process-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.process-step{background:#fff;padding:30px 22px;position:relative;}
.process-num{
  font-family:'Fraunces',serif;font-weight:600;font-size:28px;color:var(--steel-300);
  -webkit-text-stroke:1.4px var(--navy-900);color:transparent;
  display:block;margin-bottom:14px;
}
.process-step h3{font-size:15px;font-family:'Inter',sans-serif;font-weight:600;color:var(--navy-900);margin-bottom:8px;line-height:1.3;}
.process-step p{font-size:13.2px;color:var(--slate-500);line-height:1.55;}
@media (max-width:960px){.process-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.process-grid{grid-template-columns:1fr;}}

/* ---------- Planes de diseño web ---------- */
.webplans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.webplan-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:32px 28px;display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow-card);transition:transform .2s ease, box-shadow .2s ease;
}
.webplan-card:hover{transform:translateY(-3px);}
.webplan-card.featured{
  background:var(--navy-900);border-color:var(--navy-900);color:#fff;
  box-shadow:var(--shadow-soft);
}
.webplan-top{display:flex;flex-direction:column;gap:6px;}
.webplan-badge{
  align-self:flex-start;background:var(--gold);color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;
  font-family:'Inter',sans-serif;margin-bottom:6px;
}
.webplan-card h3{font-size:19px;}
.webplan-card.featured h3{color:#fff;}
.webplan-card .webplan-tag{
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--blue-500);letter-spacing:0.04em;
}
.webplan-card.featured .webplan-tag{color:var(--steel-300);}
.webplan-price{
  font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--navy-900);
}
.webplan-card.featured .webplan-price{color:#fff;}
.webplan-price small{
  display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:12px;
  color:var(--slate-500);margin-top:2px;
}
.webplan-card.featured .webplan-price small{color:#9FB0C2;}
.webplan-list{display:flex;flex-direction:column;gap:11px;flex:1;}
.webplan-list li{
  list-style:none;display:flex;gap:9px;align-items:flex-start;
  font-size:13.6px;color:var(--ink-700);line-height:1.5;
}
.webplan-card.featured .webplan-list li{color:#D7E0EA;}
.webplan-list svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--ok);}
.webplan-card.featured .webplan-list svg{color:#7CD98C;}
.webplan-card .btn{width:100%;}
@media (max-width:960px){.webplans-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}}

/* ---------- Franja "por qué dominio propio" ---------- */
.domain-strip{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;
  background:var(--steel-100);border:1px solid var(--line);border-radius:18px;
  padding:44px;
}
.domain-strip h3{font-size:22px;margin-bottom:14px;}
.domain-strip p{color:var(--slate-500);font-size:14.5px;line-height:1.65;}
.domain-mock{
  background:var(--navy-950);border-radius:12px;padding:14px;
  box-shadow:var(--shadow-card);
}
.domain-mock .bar{
  display:flex;align-items:center;gap:6px;padding:0 6px 12px;
}
.domain-mock .bar span{width:8px;height:8px;border-radius:50%;background:#3B4A5C;}
.domain-mock .url{
  margin-top:2px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
  border-radius:7px;padding:10px 14px;font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;color:#C9D4E0;
}
.domain-mock .url b{color:#fff;}
@media (max-width:860px){
  .domain-strip{grid-template-columns:1fr;padding:28px;}
}

/* ---------- CTA reunión ---------- */
.meeting-modes{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;}
.meeting-mode{
  flex:1;min-width:220px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;padding:22px;
}
.meeting-mode .ic{
  width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.meeting-mode .ic svg{width:17px;height:17px;color:#fff;}
.meeting-mode h4{color:#fff;font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;margin-bottom:6px;}
.meeting-mode p{color:#9FB0C2;font-size:13px;line-height:1.55;}