:root {
  --bg: #ffffff;
  --surface: #0b1220;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --primary: #7c3aed;      /* violeta */
  --secondary: #f59e0b;    /* naranja del logo */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f19;
    --surface: #0b1220;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #1f2937;
  }
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* Utilidades */
.container { max-width: 1200px; margin: auto; padding: 1rem; }
.section-title { font-size: 2rem; margin-bottom: 1rem; }
.section-sub { color: var(--muted); margin-bottom: 2rem; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.2rem; border-radius: 999px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.2s ease;
}
.btn-primary {
  background: var(--primary); color: #fff;
  box-shadow: 0 8px 20px rgba(124,58,237,.25);
}
.btn-primary:hover { background: #5b21b6; }
.btn-secondary {
  background: var(--secondary); color: #fff;
  box-shadow: 0 8px 20px rgba(245,158,11,.25);
}
.btn-secondary:hover { background: #d97706; }
.btn-outline {
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.btn-outline:hover { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.3); }

/* ======== HEADER / NAV ======== */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(8px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: .75rem; }
.brand-logo-img { display: block; height: 48px; width: auto; }

nav ul { display: none; gap: 1rem; list-style: none; margin: 0; padding: 0; }
nav a { font-weight: 600; color: var(--muted); }
nav a:hover { color: var(--text); }
.nav-cta { display: none; gap: .75rem; }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
}

/* Desktop */
@media (min-width:900px) {
  nav ul { display: flex; }
  .nav-cta { display: flex; }
  .menu-btn { display: none; }
}

/* ======== HERO ======== */
.hero {
  padding-block: clamp(3rem,8vw,6rem);
  background: var(--surface); color: #e6eefc;
}
.hero .container {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(1.5rem,4vw,3rem); align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: #c7d2fe;
  background: rgba(124,58,237,.15);
  border: 1px solid rgba(124,58,237,.35);
  padding: .35rem .7rem; border-radius: 999px;
}
.hero h1 {
  margin: .5rem 0 0;
  font-size: clamp(2rem,5vw,3.25rem);
  line-height: 1.1;
}
.grad {
  background: linear-gradient(135deg, #22d3ee, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { color: #b6c1e1; }
.hero-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.stats {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem; margin-top: 2rem;
}
.stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: .9rem; border-radius: 16px; text-align: center;
}
.stat b { display: block; color: #fff; }

/* MOCKUP */
.mockup {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(2,8,23,.45);
}
.mockup .bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem;
  background: rgba(2,6,23,.6); padding: .6rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dots { display: inline-flex; gap: .35rem; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: #ef4444; }
.dot:nth-child(2) { background: #f59e0b; }
.dot:nth-child(3) { background: #22c55e; }
.mockup .badge {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.22);
  color: #dbeafe; padding: .2rem .6rem;
  border-radius: 999px; font-size: .85rem;
}
.mockup .screen {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.35));
}

/* ======== SECCIONES ======== */
section { padding-block: clamp(2.5rem,6vw,4.5rem); }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.card {
  border: 1px solid var(--border);
  padding: 1rem; border-radius: 8px;
  background: var(--bg);
}

/* ======== PORTAFOLIO ======== */
.folio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 1rem; }
.folio-card {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--bg); text-align: center; transition: transform .2s ease;
}
.folio-card:hover { transform: translateY(-6px); }
.folio-card h3 { padding: .8rem; }

/* ======== PLANES ======== */
/* ====== PLANES (mejoras + ribbon) ====== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 1rem;
}
.price-card {
  position: relative;            /* necesario para ubicar el ribbon */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  background: var(--bg);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-card:hover { transform: translateY(-3px); }

.price-card.recommend {
  border: 2px solid var(--secondary);
  box-shadow: 0 14px 32px rgba(245,158,11,.18);
}

/* Etiqueta “Más vendido” */
.ribbon{
  position:absolute;
  top:-12px; right:16px;
  background: linear-gradient(135deg, var(--secondary), #f97316);
  color:#fff; font-weight:700; font-size:.8rem;
  padding:.3rem .65rem; border-radius:999px;
  box-shadow:0 8px 18px rgba(245,158,11,.28);
  border:1px solid rgba(255,255,255,.25);
}

/* Precio un poco más protagonista */
.price{
  font-size:1.75rem;
  font-weight:800;
  margin-top:.35rem;
/* Texto bajo el precio */
.price-meta{
  margin-top:.15rem;
  font-size:.9rem;
  color:var(--muted);
}

.price-desc{
  margin:.6rem 0 1rem;
  color:var(--text);
  opacity:.9;
}

/* Botón 3D */
.btn-3d{
  --btn: var(--primary);
  --btn-dark: #5b21b6;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.2rem;
  color:#fff; background:linear-gradient(180deg, var(--btn), var(--btn-dark));
  border:none; border-radius:12px; font-weight:700;
  box-shadow:0 10px 0 rgba(0,0,0,.15), 0 20px 30px rgba(0,0,0,.18);
  transform:translateY(0); transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-3d:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 0 rgba(0,0,0,.15), 0 26px 36px rgba(0,0,0,.22);
  filter:saturate(110%);
}
.btn-3d:active{
  transform:translateY(2px);
  box-shadow:0 6px 0 rgba(0,0,0,.2), 0 14px 20px rgba(0,0,0,.2);
}

/* Variante 3D en plan destacado (más naranja) */
.price-card.recommend .btn-3d{
  --btn: var(--secondary);
  --btn-dark: #d97706;
}
/* ====== PLANES (tarjetas + ribbon + botón 3D) ====== */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.25rem;
  align-items:stretch;
}

.price-card{
  position:relative;                    /* para el ribbon */
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.5rem 1.25rem;
  box-shadow:0 6px 16px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.price-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(2,8,23,.10);
}

.price-card.recommend{
  border:2px solid var(--secondary);
  box-shadow:0 20px 48px rgba(245,158,11,.18);
}

/* ribbon “Más vendido” */
.ribbon{
  position:absolute; top:-12px; right:16px;
  background:linear-gradient(135deg, var(--secondary), #f97316);
  color:#fff; font-weight:700; font-size:.8rem;
  padding:.32rem .7rem; border-radius:999px;
  box-shadow:0 10px 22px rgba(245,158,11,.28);
  border:1px solid rgba(255,255,255,.25);
}

.price{ font-size:2rem; font-weight:800; margin-top:.35rem; }
.price-meta{ margin-top:.15rem; font-size:.9rem; color:var(--muted); }
.price-desc{ margin:.65rem 0 1.1rem; color:var(--text); opacity:.9; }

/* Botón 3D (mejorado, más visible) */
.btn-3d{
  --btn: var(--primary);
  --btn-dark: #5b21b6;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.4rem;
  color:#fff;
  background:linear-gradient(180deg, var(--btn), var(--btn-dark));
  border:none;
  border-radius:999px;              /* más redondeado tipo píldora */
  font-weight:700;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.15), 0 14px 20px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
  width:auto;                       /* ya no ocupa todo el ancho */
  min-width:140px;                  /* ancho mínimo */
  text-align:center;
}
.btn-3d:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 0 rgba(0,0,0,.15), 0 20px 28px rgba(0,0,0,.22);
  filter:saturate(115%);
}
.btn-3d:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 rgba(0,0,0,.20), 0 10px 16px rgba(0,0,0,.20);
}

/* Botón naranja para el plan recomendado */
.price-card.recommend .btn-3d{
  --btn: var(--secondary);
  --btn-dark: #d97706;
}
}

/* ======== CONTACTO ======== */
.cta {
  background: linear-gradient(135deg, rgba(124,58,237,.1), rgba(34,211,238,.1));
  border: 1px solid var(--border); border-radius: 12px;
  padding: 2rem;
}
form { display: grid; gap: .75rem; }
input, textarea {
  padding: .8rem; border-radius: 8px;
  border: 1px solid var(--border); font-family: inherit;
}
textarea { min-height: 120px; }
/* Contacto: asegurar layout correcto */
.cta { padding:2rem; }
form{ display:grid; gap:.75rem; }
input, textarea{ width:100%; }


/* ======== FOOTER ======== */
footer {
  border-top: 1px solid var(--border);
  padding: 1rem; text-align: center;
  color: var(--muted);
}

/* ======== BOTÓN VOLVER ARRIBA ======== */
#btnTop {
  position: fixed; bottom: 20px; right: 20px;
  width: 50px; height: 50px; border-radius: 50%;
  background: linear-gradient(135deg,#8b5cf6,#6d28d9);
  color: #fff; border: none; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25); cursor: pointer;
}
#btnTop .arrow {
  font-size: 20px;
  animation: arrow-rise 1.4s ease-in-out infinite;
}
@keyframes arrow-rise {
  0% { transform: translateY(12px); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(-16px); opacity: 0; }
}

/* ======== RESPONSIVE ======== */
@media (max-width:1000px){ .hero .container{grid-template-columns:1fr} }

/* ===== Botón 3D reforzado y sin herencias ===== */
.price-card a.btn-3d{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:.85rem 1.4rem !important;
  border-radius:999px !important;
  background:linear-gradient(180deg, var(--primary), #5b21b6) !important;
  color:#fff !important;
  text-decoration:none !important;
  border:0 !important;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  width:auto; min-width:150px; text-align:center;
  box-shadow:0 6px 0 rgba(0,0,0,.15), 0 14px 20px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:transform .12s ease, box-shadow .15s ease, filter .15s ease;
  margin-top:.6rem;
}
.price-card a.btn-3d:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 0 rgba(0,0,0,.15), 0 20px 28px rgba(0,0,0,.22);
  filter:saturate(115%);
}
.price-card a.btn-3d:active{
  transform:translateY(2px);
  box-shadow:0 4px 0 rgba(0,0,0,.20), 0 10px 16px rgba(0,0,0,.20);
}

/* Versión naranja en el plan recomendado */
.price-card.recommend a.btn-3d{
  background:linear-gradient(180deg, var(--secondary), #d97706) !important;
}
/* ===== CONTACTO centrado ===== */
#contacto{
  display:flex;
  justify-content:center;
  padding:3rem 1rem;
}

#contacto .container{
  max-width:700px;
  width:100%;
  background:linear-gradient(135deg, rgba(124,58,237,.05), rgba(34,211,238,.05));
  padding:2.5rem;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  text-align:center;
}

#contacto .section-title{
  margin-bottom:1rem;
  font-size:2rem;
}

#contacto form{
  display:grid;
  gap:1rem;
  margin-top:1rem;
}

#contacto input,
#contacto textarea{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:1rem;
}

#contacto button{
  margin-top:1rem;
  justify-self:center;
  width:auto;
  min-width:160px;
  border-radius:999px;
}
/* ===== WhatsApp flotante ===== */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:88px;                 /* queda encima del #btnTop */
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;          /* verde WhatsApp */
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 12px 28px rgba(2,8,23,.25);
  z-index:60;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.whatsapp-float:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px rgba(2,8,23,.32);
  filter:saturate(115%);
}
.whatsapp-float::after{
  content:"";
  position:absolute; inset:-8px;
  border-radius:inherit;
  border:2px solid rgba(37,211,102,.35);
  animation:wa-pulse 1.8s ease-out infinite;
}
@keyframes wa-pulse{
  0%   { transform:scale(.9); opacity:.85; }
  70%  { transform:scale(1.25); opacity:0; }
  100% { transform:scale(1.25); opacity:0; }
}

/* Ajustes móviles */
@media (max-width:480px){
  .whatsapp-float{ right:16px; bottom:86px; width:52px; height:52px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}
/* ===== Servicios “pro” ===== */
.card.feature{
  position: relative;
  border-radius: 16px;
  /* Borde con brillo suave */
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(135deg, rgba(124,58,237,.25), rgba(34,211,238,.25)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding: 1.25rem 1.1rem 1.2rem;
}
.card.feature:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 38px rgba(2,8,23,.10);
  border-image: linear-gradient(135deg, rgba(124,58,237,.45), rgba(34,211,238,.45)) 1;
}

.card.feature .fe-icon{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  margin-bottom: .6rem;
  font-size: 22px; line-height: 1;
  color: #fff;
  /* Burbuja con gradiente */
  background: linear-gradient(135deg, #8b5cf6, #06b6d4);
  box-shadow: 0 10px 20px rgba(2,8,23,.18);
  transition: transform .18s ease, filter .18s ease;
}
.card.feature:hover .fe-icon{
  transform: translateY(-2px) scale(1.04) rotate(-2deg);
  filter: saturate(115%);
}

.card.feature h3{
  font-size: 1.1rem;
  margin: 0 0 .25rem;
}
.card.feature p{
  color: var(--muted);
  margin: 0;
}
/* Lista de beneficios con ✔ */
.mini-checks{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:.35rem 1rem;
  margin:.8rem 0 1.2rem;
  padding:0;
  list-style:none;
  color:var(--muted);
  font-size:.95rem;
}
.mini-checks li{
  display:flex;
  align-items:center;
}
.mini-checks li::before{
  content:"✔";
  color:#10b981;   /* verde check */
  font-weight:700;
  margin-right:.5rem;
}
/* Colores por tarjeta de Servicios (ordenadas 1,2,3...) */
#servicios .grid-3 .feature:nth-child(1) .fe-icon{
  background: linear-gradient(135deg, #8b5cf6, #6d28d9); /* violeta */
  box-shadow: 0 10px 20px rgba(139,92,246,.35);
}
#servicios .grid-3 .feature:nth-child(2) .fe-icon{
  background: linear-gradient(135deg, #06b6d4, #0284c7); /* cian/azul */
  box-shadow: 0 10px 20px rgba(2,132,199,.35);
}
#servicios .grid-3 .feature:nth-child(3) .fe-icon{
  background: linear-gradient(135deg, #10b981, #059669); /* verde */
  box-shadow: 0 10px 20px rgba(16,185,129,.35);
}

/* un toquecito de halo al hover */
#servicios .grid-3 .feature:hover .fe-icon{
  filter: saturate(115%);
}
/* ===== Servicios circulares ocupando todo el ancho ===== */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 columnas iguales */
  gap: 2.5rem;
  justify-items: center;
  align-items: center;
  margin-top: 2rem;
}

/* Cada círculo se expande proporcionalmente */
.card.feature{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  width: 100%;                /* ocupa el espacio de la columna */
  max-width: 280px;           /* límite para que no se agrande demasiado */
  aspect-ratio: 1 / 1;        /* asegura círculo */
  border-radius: 50%;

  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
  padding: 1.5rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.feature:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(2,8,23,.1);
}

.card.feature .fe-icon{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 32px;
  display: grid;
  place-items: center;
  margin-bottom: .75rem;
  color: #fff;
}
/* ===== Servicios circulares (fila estable y centrada) ===== */
#servicios .grid-3{
  display:flex;                 /* cambiamos grid -> flex para evitar estiramientos */
  justify-content:space-evenly; /* reparte el espacio de forma pareja */
  align-items:center;
  gap:2rem;
  flex-wrap:nowrap;             /* 3 en una fila en escritorio */
  margin-top:1.5rem;
}

#servicios .card.feature{
  width:clamp(200px, 24vw, 260px);  /* crece hasta 260px máximo */
  height:clamp(200px, 24vw, 260px); /* mismo alto = círculo perfecto */
  border-radius:9999px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:1.2rem 1rem;
  background:var(--bg);
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(2,8,23,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
#servicios .card.feature:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(2,8,23,.1);
}

/* Ícono dentro del círculo */
#servicios .card.feature .fe-icon{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  font-size:28px; color:#fff; margin-bottom:.65rem;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* Títulos y textos */
#servicios .card.feature h3{ margin:.2rem 0; font-size:1.08rem; }
#servicios .card.feature p{ font-size:.92rem; color:var(--muted); }

/* Responsivo: en tablets/phones permitimos que bajen y se centren */
@media (max-width:1024px){
  #servicios .grid-3{ flex-wrap:wrap; justify-content:center; }
}
@media (max-width:680px){
  #servicios .card.feature{ width:240px; height:240px; }
}
/* Centrar lista de beneficios igual que los círculos */
#servicios .mini-checks{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas como los círculos */
  gap: 1rem;
  max-width: 900px;                      /* ancho similar al bloque de abajo */
  margin: 0 auto 2rem auto;              /* centrado y con espacio abajo */
  text-align: center;                    /* texto centrado */
  list-style: none;
  padding: 0;
}

#servicios .mini-checks li{
  font-size: .95rem;
  color: var(--muted);
  display: flex;
  justify-content: center;
  align-items: center;
}

#servicios .mini-checks li::before{
  content:"✔";
  color:#10b981;
  font-weight:700;
  margin-right:.4rem;
}
/* Responsive: en pantallas chicas apilar lista y círculos */
@media (max-width: 768px){
  #servicios .mini-checks{
    grid-template-columns: 1fr;   /* 1 sola columna */
    gap: .6rem;
    text-align: center;
  }
  #servicios .mini-checks li{
    justify-content: center;
  }

  #servicios .grid-3{
    flex-direction: column;       /* los círculos uno debajo del otro */
    gap: 1.5rem;
  }
}
/* Responsive: en pantallas chicas apilar lista y círculos con más aire */
@media (max-width: 768px){
  #servicios .mini-checks{
    grid-template-columns: 1fr;   /* 1 sola columna */
    gap: .8rem;
    text-align: center;
  }
  #servicios .mini-checks li{
    justify-content: center;
  }

  #servicios .grid-3{
    flex-direction: column;       /* los círculos uno debajo del otro */
    gap: 2.5rem;                  /* más espacio entre círculos */
  }

  #servicios .card.feature{
    margin: 0 auto;               /* que se centre cada círculo */
  }
}
/* Menú móvil: oculto por defecto */
nav ul{
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 1rem;
  position: absolute;
  top: 72px; left: 0; right: 0;
  z-index: 40;
}

/* Menú móvil abierto */
nav ul.open{
  display: flex;
}

/* Desktop: siempre visible en fila */
@media (min-width:900px){
  nav ul{
    display: flex !important;
    position: static;
    flex-direction: row;
    background: transparent;
    border: none;
    padding: 0;
  }
}
/* ===== PROCESO ===== */
.process{
  position: relative;
  padding: 3.5rem 1rem;
  background: linear-gradient(180deg, rgba(124,58,237,.03), rgba(34,211,238,.03));
}
.process .section-title{ text-align:center; }
.process .section-sub{ text-align:center; margin-bottom:2rem; color:var(--muted); }

.process-steps{
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
  max-width: 1100px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 2rem;
}

/* Línea conectora (desktop) */
.process-steps::before{
  content:"";
  position:absolute; left:5%; right:5%; top:54px;
  height:2px;
  background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(34,211,238,.25));
  z-index:0;
}

.step{
  position:relative;
  background: var(--bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding: 4.2rem 1rem 1.2rem;  /* espacio arriba para icono */
  text-align:center;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(2,8,23,.10);
}

/* Número pequeño (badge) */
.step .badge{
  position:absolute; left:50%; transform:translateX(-50%);
  top:36px; z-index:2;
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  font-weight:800; font-size:.9rem; color:#fff;
  background:#11182799; backdrop-filter: blur(4px);
  box-shadow: 0 6px 12px rgba(0,0,0,.18);
}

/* Icono circular grande */
.p-icon{
  position:absolute; left:50%; transform:translateX(-50%);
  top:-20px; z-index:3;

  width:86px; height:86px; border-radius:999px;
  display:grid; place-items:center;
  font-size:36px; color:#fff;
  box-shadow: 0 18px 38px rgba(2,8,23,.20);
  border:2px solid rgba(255,255,255,.35);
}

/* Colores por tipo */
.p-icon.is-violet{ background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.p-icon.is-cyan  { background: linear-gradient(135deg,#06b6d4,#0284c7); }
.p-icon.is-green { background: linear-gradient(135deg,#10b981,#059669); }
.p-icon.is-orange{ background: linear-gradient(135deg,#f59e0b,#d97706); }

/* Textos */
.step h3{ margin:.5rem 0 .35rem; font-size:1.08rem; }
.step p { margin:0; color:var(--muted); font-size:.95rem; }

/* CTA final */
.process-cta{
  display:flex; gap:.75rem; justify-content:center; margin-top:.5rem;
}
.process-cta .btn-3d{ min-width:190px; }

/* ===== Responsive ===== */
@media (max-width: 1000px){
  .process-steps{
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem;
  }
  .process-steps::before{ display:none; } /* no muestres línea global */
}

@media (max-width: 640px){
  .process-steps{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .step{
    padding-top: 4.4rem;
  }

  /* Línea vertical sutil por tarjeta en móvil (opcional) */
  .step::before{
    content:"";
    position:absolute; left:50%; transform:translateX(-50%);
    top:22px; height:36px; width:2px; z-index:0;
    background: linear-gradient(180deg, rgba(124,58,237,.25), rgba(34,211,238,.25));
  }
}
/* ===== Animación de aparición para Proceso ===== */
.process-steps .step{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

/* escalonamos con delays sutiles */
.process-steps .step:nth-child(1){ transition-delay: .05s; }
.process-steps .step:nth-child(2){ transition-delay: .12s; }
.process-steps .step:nth-child(3){ transition-delay: .19s; }
.process-steps .step:nth-child(4){ transition-delay: .26s; }

/* estado visible */
.process-steps .step.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* pequeño pop en el icono cuando entra */
.process-steps .step .p-icon{
  transform: translateX(-50%) scale(.92);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.process-steps .step.in-view .p-icon{
  transform: translateX(-50%) scale(1);
}
/* ===== Animación fade-up para Servicios y Planes ===== */
#servicios .feature,
 lanes .price-card{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

#servicios .feature.in-view,
#planes .price-card.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* pop sutil en iconos de servicios */
#servicios .feature .fe-icon{
  transform: scale(.92);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
#servicios .feature.in-view .fe-icon{
  transform: scale(1);
}

/* pop sutil en botones de planes */
#planes .price-card .btn-3d{
  transform: translateY(0) scale(.95);
  transition: transform .35s ease;
}
#planes .price-card.in-view .btn-3d{
  transform: translateY(0) scale(1);
}
/* Bloque de planes: título centrado y aire */
.pricing{ padding: 3rem 1rem; }
.pricing .section-title{ text-align:center; margin-bottom:.25rem; }
.pricing .section-sub{ text-align:center; color:var(--muted); margin-bottom:1.75rem; }

/* Offset para ancla (#planes) con header fijo */
#planes{ scroll-margin-top: 88px; }  /* ajusta 72–96px según la altura de tu header */
/* Estilo unificado para encabezados de sección */
.section-title{
  text-align:center;
  font-size:2rem;
  margin-bottom:.25rem;
}

.section-sub{
  text-align:center;
  color:var(--muted);
  margin-bottom:1.75rem;
  font-size:1rem;
}
/* CTA botones en Proceso */
.process-cta .btn{
  font-weight:600;
  padding:.85rem 1.6rem;
  border-radius:999px;
  transition: all .18s ease;
}

/* Outline elegante */
.btn-outline{
  border:2px solid var(--text);
  color:var(--text);
  background:transparent;
}
.btn-outline:hover{
  background: var(--text);
  color:#fff;
}

/* Botón 3D WhatsApp */
.btn-3d.btn-whatsapp{
  background: linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  box-shadow:0 6px 14px rgba(37,211,102,.35);
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn-3d.btn-whatsapp:hover{
  transform: translateY(-3px);
  box-shadow:0 10px 22px rgba(37,211,102,.45);
  filter:saturate(115%);
}
.btn-3d.btn-whatsapp:active{
  transform: translateY(1px);
}

/* Ícono dentro */
.btn-whatsapp .wa-icon{
  font-size:1.2rem;
  line-height:1;
}
/* Centrar texto dentro de botones en móvil */
@media (max-width: 768px){
  .process-cta .btn{
    justify-content: center;   /* centra el contenido horizontal */
    text-align: center;        /* asegura que el texto quede centrado */
    width: 100%;               /* opcional: ancho completo en mobile */
    max-width: 280px;          /* límite para no hacerlos gigantes */
    margin: 0 auto;            /* centrados dentro del contenedor */
  }
}
/* Evita scroll de fondo cuando el menú está abierto */
body.menu-open{ overflow: hidden; }

/* ==== MENÚ MÓVIL (estable) ==== */

/* En móvil usamos panel deslizante, SIN display:none */
@media (max-width: 900px){
  header .container.nav{ position: relative; }

  .menu-btn{ display:block; }

  header nav ul{
    position: absolute;
    left: 0; right: 0;
    top: calc(100% + 8px);
    z-index: 40;

    display: flex;             /* siempre flex */
    flex-direction: column;
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: .75rem 1rem;

    /* animación slide-down */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height .25s ease, opacity .25s ease, transform .25s ease;
  }

  header nav ul.open{
    max-height: 60vh;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* En escritorio menú normal en línea */
@media (min-width: 900px){
  .menu-btn{ display:none; }
  header nav ul{
    position: static;
    display: flex;
    flex-direction: row;
    background: transparent;
    border: 0;
    padding: 0;
    max-height: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}
/* ==== MENÚ MÓVIL FIABLE (pisa todo lo anterior) ==== */
@media (max-width: 900px){
  header{ position: sticky; top: 0; z-index: 2000; }
  header .container.nav{ position: relative; }

  /* muestra el botón en móvil */
  .menu-btn{ display: inline-flex; align-items:center; justify-content:center; }

  /* panel del menú */
  header nav ul{
    /* fuerza visibilidad y formato en móvil */
    display: flex !important;
    flex-direction: column;
    gap: .75rem;

    position: fixed;
    left: 0; right: 0;
    top: calc( (var(--header-h, 64px)) ); /* por si defines una var de altura */
    top: 64px;                            /* fallback */
    bottom: 0;
    padding: 1rem 1.25rem;

    background: var(--bg, #0b1220);
    border-top: 1px solid var(--border, rgba(255,255,255,.08));
    z-index: 3000;

    /* animación */
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  header nav ul.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* Escritorio: menú normal en línea */
@media (min-width: 900px){
  .menu-btn{ display:none !important; }
  header nav ul{
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
}
/* ==== MENÚ MÓVIL: panel completo y por encima de todo ==== */
:root { --header-h: 64px; }  /* se sobreescribe por JS arriba */

@media (max-width: 900px){
  header{ position: sticky; top:0; z-index: 5000; } /* header sobre el contenido */

  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }

  header nav ul{
    /* Panel fijo que empieza debajo del header y ocupa toda la pantalla */
    position: fixed;
    left: 0; right: 0;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    z-index: 9999;                  /* por encima de cualquier flotante */
    overflow: auto;                 /* scroll interno si hace falta */

    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;

    background: var(--bg, #0b1220);
    border-top: 1px solid var(--border, rgba(255,255,255,.08));

    /* animación de aparición */
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
  }

  header nav ul.open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Evita que el fondo se desplace si abres el menú (opcional) */
  body.menu-open{ overflow: hidden; }
}

@media (min-width: 900px){
  .menu-btn{ display:none !important; }
  header nav ul{
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: auto !important;
  }
}
/* ===== FAQs ===== */
#faqs{ scroll-margin-top: 88px; } /* compensa header fijo */
.faqs{ padding: 3.5rem 1rem; }

.faq-list{
  max-width: 900px;
  margin: 1.25rem auto 0;
  display: grid;
  gap: .75rem;
}

/* item */
.faq{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
  overflow: hidden;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.faq.in-view{ opacity:1; transform: translateY(0); }

.faq h3{ margin:0; }
.faq-btn{
  width: 100%;
  text-align:left;
  padding: 1rem 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  display:flex; align-items:center; justify-content:space-between;
  gap: .75rem;
  background: transparent; color: var(--text);
  border: 0; cursor: pointer;
}
.faq-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }

.faq-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  padding: 0 1.1rem;
  color: var(--muted);
}
.faq[open] .faq-panel{ /* por si usas <details> en algún momento */
  max-height: 500px;
  padding-bottom: .9rem;
}
.faq.expanded .faq-panel{
  max-height: 500px;
  padding-bottom: .9rem;
}

/* chevron animado */
.faq-btn .chev{ transition: transform .25s ease; }
.faq.expanded .chev{ transform: rotate(180deg); }

/* CTA debajo */
.faqs-cta{
  margin-top: 1.25rem;
  display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap;
}

/* responsive */
@media (max-width: 640px){
  .faq-btn{ padding: .9rem .95rem; }
}
/* Links dentro de respuestas (FAQ) */
.faq-panel a{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.faq-panel a:hover{
  filter: saturate(115%);
  text-decoration-thickness: 2px;
}
/* ===== FAQ tools ===== */
.faq-tools{
  max-width: 900px;
  margin: .5rem auto 1rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}
#faqSearch{
  flex: 1 1 320px;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
}
#faqSearch::placeholder{ color: var(--muted); }
.faq-actions{ display: flex; gap: .5rem; }

.faq.hide{ display: none !important; }

/* (Opcional) resalte si implementas highlight */
mark.faq-hit{
  background: rgba(124,58,237,.22);
  color: inherit;
  padding: 0 .15em;
  border-radius: 4px;
}
/* Bloquear scroll del body cuando el menú está abierto */
.no-scroll {
  overflow: hidden;
  height: 100vh;   /* evita “scroll fantasma” en móviles */
}

/* Overlay del menú */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;      /* NO captura clics cuando está oculto */
  transition: opacity .2s ease;
  z-index: 80;               /* debajo del nav, encima del contenido */
}

.nav-overlay.show {
  opacity: 1;
  pointer-events: auto;      /* SÍ captura clics cuando está visible */
}

/* Menú móvil abierto/cerrado (ajusta a tu nav real) */
@media (max-width: 900px) {
  header nav {
    position: fixed;
    top: var(--header-h, 64px);  /* alto de tu header */
    left: 0;
    right: 0;
    transform: translateY(-110%);
    transition: transform .25s ease;
    z-index: 90;                 /* encima del overlay */
  }
  header nav.is-open {
    transform: translateY(0);
  }
}
/* ====== Menú móvil FULL y seguro ====== */
:root{ --header-h: 64px; }  /* la JS ya lo recalcula exacto */

@media (max-width:900px){
  /* Header arriba de todo (botón nunca desaparece) */
  header{
    position: fixed;
    top:0; left:0; right:0;
    z-index: 10020;
    background: var(--bg);
  }

  /* Botón hamburguesa siempre clickeable */
  .menu-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10021; /* por encima del overlay */
  }

  /* Panel del menú (usamos el <ul>) */
  header nav ul{
    position: fixed !important;
    left: 0; right: 0;
    top: var(--header-h);                 /* arranca debajo del header */
    bottom: 0;
    z-index: 10018;                       /* por debajo del header, encima del overlay */
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
    overflow: auto;

    /* Animación: oculto por transform, NO por display */
    transform: translateY(-110%);
    transition: transform .25s ease;
  }
  header nav ul.open{                     /* se abre cuando .open está en el UL */
    transform: translateY(0);
  }

  /* Overlay por debajo del header y por encima del contenido */
  .nav-overlay{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 10015;                        /* debajo del menú (10018) y del header (10020) */
  }
  .nav-overlay.show{
    opacity: 1;
    pointer-events: auto;
  }

  /* Bloquear scroll del fondo cuando el menú está abierto */
  body.no-scroll{ overflow: hidden; height: 100vh; }
}

/* Escritorio: menú normal en línea (pisa cualquier cosa) */
@media (min-width:900px){
  .menu-btn{ display:none !important; }
  header{
    position: sticky; top:0; z-index: 10; /* lo que prefieras en desktop */
  }
  header nav ul{
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
  }
}