/* =====================
   Dark Gradient System
   ===================== */
:root{
  --bg:#0a0b14;
  --bg-1:#0b1020;
  --bg-2:#10142b;
  --ink:#e5e7eb;
  --muted:#a1a1aa;
  --indigo:#4f46e5;
  --violet:#8b5cf6;
  --sky:#38bdf8;
  --cyan:#22d3ee;
  --card: rgba(17,24,39,.55);
  --border: rgba(99,102,241,.25);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --header-h: 64px; /* el JS la ajusta a la altura real */
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--ink);
  background:linear-gradient(120deg,var(--bg-1),var(--bg-2));
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
.container{width:min(1160px, 92%); margin:0 auto}

/* Aurora fondo */
.bg-animated{
  position:fixed; inset:-20% -20% auto -20%;
  height:120vh;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(99,102,241,.30), transparent 60%),
    radial-gradient(35% 45% at 85% 25%, rgba(56,189,248,.28), transparent 60%),
    radial-gradient(50% 60% at 50% 80%, rgba(167,139,250,.25), transparent 60%);
  filter:saturate(120%) blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-4%,0) scale(1.05)}}

/* =====================
   Header
   ===================== */
.site-header{
  position:sticky; top:0; 
  z-index:9999; /* HEADER SIEMPRE ARRIBA */
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(7,10,22,.35);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h);
  padding:10px 0;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700;letter-spacing:.3px}
.logo-dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(90deg,var(--sky),var(--violet));box-shadow:0 0 20px rgba(56,189,248,.6)}
.brand-text .accent{color:var(--sky)}

.site-nav{display:flex;gap:22px;align-items:center; z-index:9998;} /* por debajo del header */
.site-nav a{color:var(--ink);text-decoration:none;opacity:.85;transition:.25s}
.site-nav a:hover{opacity:1}
.btn--nav{padding:.55rem .9rem;border:1px solid var(--border);border-radius:10px}

/* Hamburguesa (encima de todo para poder cerrar) */
.nav-toggle{
  display:none; background:transparent; border:0; width:38px; height:30px; position:relative;
  z-index:10001; /* > header y > nav */
}
.nav-toggle span{position:absolute; left:6px; right:6px; height:2px; background:#fff; border-radius:1px; transition:.25s}
.nav-toggle span:nth-child(1){top:7px}
.nav-toggle span:nth-child(2){top:14px}
.nav-toggle span:nth-child(3){top:21px}

/* =====================
   Hero
   ===================== */
.hero{padding:80px 0 40px}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.hero-copy h1{font-size:clamp(32px, 5vw, 56px); line-height:1.05; margin:0 0 12px; letter-spacing:.2px}
.lead{font-size:clamp(16px, 2vw, 18px); color:var(--muted); max-width:62ch}
.cta-group{display:flex; gap:14px; margin:22px 0 16px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; text-decoration:none; border-radius:12px; padding:.9rem 1.2rem; transition:transform .15s ease, box-shadow .3s ease, background .3s ease}
.btn--primary{background:linear-gradient(90deg,var(--indigo),var(--violet)); border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 25px rgba(79,70,229,.35)}
.btn--primary:hover{transform:translateY(-1px)}
.hero .btn--primary,
.hero .btn--primary:visited{ color:#fff; }
.hero .btn--primary:hover,
.hero .btn--primary:focus{ color:#fff; }

.btn--ghost{background:transparent; border:1px solid var(--border)}
.trust-list{display:flex; gap:14px; padding:0; list-style:none; color:#c7c9d1;flex-wrap:wrap}
.trust-list li{display:flex; gap:8px; align-items:center}
.hero-visual{position:relative; perspective:900px}
.hero-svg{width:100%; height:auto}
.stroke-glow{fill:transparent; stroke:url(#grad1); stroke-width:2; opacity:.9; filter:drop-shadow(0 8px 30px rgba(99,102,241,.35))}

/* =====================
   Features
   ===================== */
.section{padding:74px 0}
.section-head h2{font-size:clamp(24px, 4.2vw, 40px); margin:0 0 8px}
.section-head p{color:var(--muted); margin:0 auto 18px; max-width:72ch}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:22px}
.card{
  background:linear-gradient(180deg, rgba(17,24,39,.65), rgba(12,16,30,.65));
  border:1px solid var(--border);
  border-radius:20px;
  padding:22px;
  box-shadow:var(--shadow);
  transform-style:preserve-3d;
  transition:transform .25s ease, box-shadow .35s ease, border-color .35s ease;
}
.card:hover{transform:translateY(-6px) rotateX(2deg); box-shadow:0 16px 48px rgba(0,0,0,.5); border-color:rgba(167,139,250,.5)}
.card-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px;background:linear-gradient(135deg, rgba(79,70,229,.35), rgba(167,139,250,.35)); border:1px solid var(--border)}
.card-icon svg{width:28px;height:28px;fill:#cfd1ff}
.card h3{margin:4px 0 10px}
.bullet{color:#cfd1d9; padding-left:18px}
.bullet li{margin:.45rem 0}
.btn--card{margin-top:.7rem; background:transparent; border:1px solid var(--border); padding:.65rem 1rem; border-radius:10px}
.btn--card:hover{background:rgba(99,102,241,.15); border-color:rgba(99,102,241,.45)}

/* =====================
   Footer
   ===================== */
.site-footer{padding:58px 0 18px; border-top:1px solid rgba(255,255,255,.06); background:rgba(7,10,22,.35); backdrop-filter:saturate(160%) blur(8px)}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:26px; align-items:start}
.footer-left h3{margin:0 0 6px}
.footer-left p{color:var(--muted)}
.contact-list{list-style:none; padding:0; margin:14px 0 0}
.contact-list a{color:var(--ink); opacity:.9; text-decoration:none}
.footer-form{display:grid; gap:12px}
.footer-form input,.footer-form textarea{
  width:100%; background:rgba(12,16,30,.75); color:var(--ink);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.9rem 1rem;
  outline:0; transition:border-color .25s ease, box-shadow .25s ease;
}
.footer-form input:focus, .footer-form textarea:focus{border-color:rgba(99,102,241,.6); box-shadow:0 0 0 4px rgba(99,102,241,.2)}
.footer-form .hp{display:none !important}
#formMsg{min-height:20px; font-size:.95rem}
.copy{opacity:.75; text-align:center; margin-top:24px; font-size:.9rem}

/* =====================
   Reveal
   ===================== */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.in-view{opacity:1; transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}
.delay-3{transition-delay:.24s}

/* =====================
   Hero Elegant Frame
   ===================== */
.hero-frame{
  position: relative;
  border-radius: 28px;
  padding: clamp(18px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(12,16,30,.65));
  border: 1px solid rgba(167,139,250,.25);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(125%);
  overflow: hidden;
}
.hero-frame::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 180deg at 10% -10%,
    rgba(56,189,248,.55),
    rgba(139,92,246,.55) 35%,
    rgba(79,70,229,.55) 65%,
    rgba(56,189,248,.55)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin 14s linear infinite;
  opacity:.35;
  pointer-events:none;
}
.hero-frame::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:
    radial-gradient(80% 60% at 60% 10%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(70% 55% at 0% 100%, rgba(56,189,248,.08), transparent 55%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.9;
}
@keyframes spin{to{ transform: rotate(360deg); }}
.hero .hero-inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 720px){
  .nav-toggle{ display:block; }

  /* Panel móvil fijo a pantalla completa, pero con padding-top del header */
  .site-nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 100vh;
    background: rgba(7,10,22,.96);
    border-bottom: 1px solid rgba(255,255,255,.06);

    /* El panel aparece DESDE arriba, pero dejamos espacio para el header */
    padding-top: calc(var(--header-h, 64px) + env(safe-area-inset-top));

    /* Off-canvas vertical simple */
    transform: translateY(-100%);
    transition: transform .28s ease;

    display: flex; flex-direction: column; gap: 0;
    overflow: auto;
    z-index: 9998; /* por debajo del header y de la hamburguesa */
  }
  .site-nav.open{ transform: translateY(0); }

  .site-nav a{
    display:block; padding:14px 20px; margin:0;
    line-height:1.15;
    border-top:1px solid rgba(255,255,255,.05);
    text-decoration:none;
  }
  .site-nav a:first-child{ border-top:0; }

  /* Animación hamburguesa -> X cuando el JS agrega .is-open */
  .nav-toggle span{ transition: transform .25s ease, opacity .2s ease }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
  .nav-toggle.is-open span:nth-child(2){ opacity:0 }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

  /* Overlay clicable para cerrar (no tapa el header) */
  .nav-overlay{
    position: fixed;
    inset: 0; /* top:0; left:0; right:0; bottom:0 */
    background: rgba(5,8,18,.6);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9997; /* por debajo del nav y MUCHO por debajo del header */
  }
  .nav-overlay.show{ opacity:1; visibility:visible; }

  /* Tarjetas full width en móvil */
  .cards{ grid-template-columns: 1fr; }
}

/* ==== CTA WhatsApp llamativa ==== */
:root{
  --wa1:#25D366; /* WhatsApp */
  --wa2:#128C7E;
}
.footer-left .btn--whatsapp{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  padding: .95rem 1.15rem;
  border-radius: 14px;
  color:#fff; text-decoration:none;
  background: linear-gradient(90deg, var(--wa1), var(--wa2));
  box-shadow: 0 12px 28px rgba(37,211,102,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  position:relative; overflow:hidden; border:0;
  transition: transform .15s ease, box-shadow .35s ease, filter .2s ease;
}
.footer-left .btn--whatsapp .ico{ width:20px; height:20px; fill:#fff; opacity:.95 }
.footer-left .btn--whatsapp::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.footer-left .btn--whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(37,211,102,.45);
}
.footer-left .btn--whatsapp:hover::after{ transform: translateX(120%); }

/* Separación en el bloque izquierdo */
.footer-left .contact-list{ margin-top: 14px }
.footer-left .social{ display:flex; gap:10px; margin-top: 12px }
.footer-left .social a{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(17,24,39,.6), rgba(12,16,30,.6));
  border:1px solid var(--border);
  transition: transform .2s ease, border-color .25s ease, box-shadow .3s ease;
}
.footer-left .social a:hover{
  transform: translateY(-2px);
  border-color: rgba(167,139,250,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.footer-left .social .ico{ width:20px; height:20px; }

/* ===== Footer: gutters cómodos y mejor espaciado ===== */

/* Añade relleno interno sólo al contenedor del footer */
.site-footer .footer-inner{
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Pequeño acolchado dentro de la columna izquierda (sin cambiar fondos) */
.footer-left{
  padding-left: clamp(6px, 1.6vw, 14px);
  padding-right: clamp(6px, 1.6vw, 14px);
}

/* Ritmo vertical consistente dentro de .footer-left */
.footer-left > * + *{ margin-top: 12px; }
.footer-left .btn--whatsapp{ margin-top: 10px; }
.footer-left .social{ margin-top: 10px; }

/* En móvil, CTA a todo el ancho y centrada visualmente */
@media (max-width: 720px){
  .site-footer .footer-inner{
    padding-inline: clamp(18px, 6vw, 24px);
  }
  .footer-left .btn--whatsapp{
    width: 100%;
    justify-content: center;
  }
}

/* Espaciado cómodo del footer */
.site-footer .footer-inner{ padding-inline: clamp(16px, 4vw, 32px); }
.footer-left{ padding-left: clamp(6px, 1.6vw, 14px); padding-right: clamp(6px, 1.6vw, 14px); }
.footer-left > * + *{ margin-top: 12px; }

/* Pila de CTAs alineada y separada del formulario */
.footer-left .cta-stack{
  display: grid;
  gap: 10px;
  margin-bottom: 12px; /* separa aún más del form a la derecha */
}

/* Botón WhatsApp (ya lo tenías) */
:root{ --wa1:#25D366; --wa2:#128C7E; }
.footer-left .btn--whatsapp{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  padding:.95rem 1.15rem; border-radius:14px;
  color:#fff; text-decoration:none; border:0; position:relative; overflow:hidden;
  background: linear-gradient(90deg, var(--wa1), var(--wa2));
  box-shadow: 0 12px 28px rgba(37,211,102,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .15s ease, box-shadow .35s ease;
}
.footer-left .btn--whatsapp .ico{ width:20px; height:20px; fill:#fff; opacity:.95 }
.footer-left .btn--whatsapp:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(37,211,102,.45);
}

/* Botón Instagram con gradiente propio */
.footer-left .btn--instagram{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.2px;
  padding:.95rem 1.15rem; border-radius:14px;
  color:#fff; text-decoration:none; border:0; position:relative; overflow:hidden;
  background: linear-gradient(90deg,#f58529,#dd2a7b,#8134af,#515bd4);
  box-shadow: 0 12px 28px rgba(129,52,175,.35), inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .15s ease, box-shadow .35s ease;
}
.footer-left .btn--instagram .ico{ width:20px; height:20px; }
.footer-left .btn--instagram:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(129,52,175,.45);
}

/* En móvil: que ambos botones ocupen todo el ancho y no queden pegados a los bordes */
@media (max-width: 720px){
  .footer-left .cta-stack .btn--whatsapp,
  .footer-left .cta-stack .btn--instagram{
    width:100%;
    justify-content:center;
  }
  .site-footer .footer-inner{ padding-inline: clamp(18px, 6vw, 24px); }
}

/* Que el ancla no quede oculto por el header sticky */
#contacto{ scroll-margin-top: calc(var(--header-h, 64px) + 16px); }

/* ===== Footer centrado con card elegante ===== */
.site-footer{
  padding: 72px 0 28px;
}
.site-footer .footer-inner{
  display: flex;
  justify-content: center;
  padding-inline: clamp(16px, 4vw, 32px);
}
.footer-card{
  width: 100%;
  max-width: 860px;                 /* ancho total de la tarjeta */
}
.footer-card .footer-left{
  margin: 0 auto;
  padding: clamp(20px, 3vw, 28px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(17,24,39,.55), rgba(12,16,30,.55));
  border: 1px solid var(--border);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.footer-left h3{
  margin: 0 0 6px;
  text-align: center;
}
.footer-left p{
  color: var(--muted);
  text-align: center;
  margin: 0 auto 16px;
  max-width: 62ch;
}

/* pila de CTAs centrada y con mismo ancho visual */
.footer-left .cta-stack{
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 6px 0 16px;
}
.footer-left .cta-stack .btn--whatsapp,
.footer-left .cta-stack .btn--instagram{
  width: min(560px, 100%);
  justify-content: center;
}

/* formulario: compacto y alineado */
.footer-form{
  display: grid;
  gap: 12px;
}
.footer-form input,
.footer-form textarea{
  width: 100%;
  background: rgba(12,16,30,.85);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: var(--ink);
  padding: .9rem 1rem;
}
.footer-form .btn--primary{
  width: 100%;
}

/* 2 columnas en pantallas grandes */
@media (min-width: 900px){
  .footer-form{
    grid-template-columns: 1fr 1fr;
  }
  .footer-form textarea,
  .footer-form .btn--primary,
  .footer-form #formMsg{
    grid-column: 1 / -1;
  }
}

/* copy centrado */
.copy{ text-align: center; opacity: .8; margin-top: 18px; }

/* En móvil, botones a todo el ancho */
@media (max-width: 720px){
  .footer-left .cta-stack .btn--whatsapp,
  .footer-left .cta-stack .btn--instagram{
    width: 100%;
  }
}