/* ==========================================================================
   HALITEL COMUNICACIONES — Estilos
   Paleta y tokens extraídos del mockup (dark-tech / azul eléctrico).
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Fondos */
  --bg-900:#04060b;          /* fondo más profundo */
  --bg-850:#060912;          /* base general */
  --bg-800:#080c16;          /* secciones navy */
  --bg-750:#0a0f1b;          /* seccion alterna */
  --card:#0d131f;            /* card grafito */
  --card-2:#101827;          /* card hover / elevada */
  --card-3:#0b111c;

  /* Bordes */
  --border:#182234;
  --border-2:#1d2941;
  --border-blue:#204a86;

  /* Azules de marca */
  --blue:#1667ff;            /* azul eléctrico de acción */
  --blue-600:#0f5bf0;
  --blue-bright:#2f86ff;     /* azul brillante glow */
  --blue-400:#4f9bff;
  --blue-deep:#0a2e73;
  --glow:rgba(31,120,255,.45);
  --glow-soft:rgba(31,120,255,.18);

  /* Texto */
  --white:#f3f6fb;
  --text:#c4cedd;            /* texto principal claro */
  --muted:#8a93a5;           /* secundario */
  --muted-2:#5c6577;         /* terciario */

  /* Tipografía */
  --font-display:"Saira Condensed", "Arial Narrow", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Métricas */
  --maxw:1240px;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --gap:24px;
  --section-py:88px;

  --shadow-card:0 18px 40px rgba(0,0,0,.45);
  --shadow-glow:0 0 40px var(--glow-soft);
}

/* ---------- Reset / base ------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg-900);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Fondo futurista interactivo: canvas fijo detrás de todo el contenido.
   z-index:-1 → sobre el fondo del body, debajo de todas las secciones.
   Las secciones usan fondos semi-transparentes para que se vea a través. */
#bgfx{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; pointer-events:none; display:block;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; color:var(--white); line-height:1.02; letter-spacing:.01em; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  color:var(--blue-bright);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0 0 14px;
}
.section-title{
  font-size:clamp(1.7rem,3.4vw,2.5rem);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.06;
}
.section-title span{ display:block; }
.text-blue{ color:var(--blue-bright); }

/* Botón principal ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  letter-spacing:.12em; text-transform:uppercase;
  padding:14px 24px; border-radius:10px; border:1px solid transparent;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
  color:#fff;
}
.btn-primary{
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  box-shadow:0 8px 22px rgba(22,103,255,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(22,103,255,.55); }
.btn-primary .ico{ width:16px; height:16px; }
.btn-outline{
  background:rgba(22,103,255,.06);
  border:1px solid var(--border-blue);
  color:var(--white);
}
.btn-outline:hover{ background:rgba(22,103,255,.14); box-shadow:0 0 22px var(--glow-soft); transform:translateY(-2px); }

/* ==========================================================================
   1. Barra superior
   ========================================================================== */
.topbar{
  background:var(--bg-900);
  border-bottom:1px solid rgba(31,120,255,.55);
  box-shadow:0 1px 0 rgba(47,134,255,.25);
  font-size:.78rem;
  color:var(--muted);
  position:relative; z-index:60;
}
.topbar .container{ display:flex; align-items:center; gap:26px; min-height:44px; }
.topbar-item{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.topbar-item svg{ width:15px; height:15px; color:var(--blue-bright); flex:none; }
.topbar-spacer{ flex:1 1 auto; }
.topbar-social{ display:flex; gap:8px; }
.topbar-social a{
  width:30px; height:30px; display:grid; place-items:center; border-radius:8px;
  background:rgba(255,255,255,.03); border:1px solid var(--border-2); color:var(--text);
  transition:.2s;
}
.topbar-social a:hover{ color:#fff; border-color:var(--blue); box-shadow:0 0 14px var(--glow-soft); background:rgba(22,103,255,.15); }
.topbar-social svg{ width:15px; height:15px; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.header{
  background:linear-gradient(180deg,#070b14, #06090f);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:55;
  transition:box-shadow .3s, background .3s;
}
.header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.55); background:rgba(6,9,15,.92); backdrop-filter:blur(10px); }
.header .container{ display:flex; align-items:center; justify-content:space-between; min-height:82px; gap:20px; }

/* Logo */
.logo{ display:flex; align-items:center; gap:12px; }
.logo-mark{ width:52px; height:52px; flex:none; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-name{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:.02em; color:#fff; }
.logo-sub{ font-family:var(--font-body); font-weight:700; font-size:.6rem; letter-spacing:.42em; color:var(--blue-bright); margin-top:2px; }
.logo-tag{ font-size:.5rem; letter-spacing:.06em; color:var(--muted-2); margin-top:3px; text-transform:uppercase; }

/* Nav */
.nav{ display:flex; align-items:center; gap:34px; }
.nav-links{ display:flex; gap:30px; }
.nav-links a{
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text);
  position:relative; padding:4px 0; transition:color .2s;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--blue-bright); transition:width .25s; box-shadow:0 0 8px var(--glow); }
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{ font-size:.74rem; padding:12px 20px; }

/* Hamburguesa */
.hamburger{ display:none; background:none; border:1px solid var(--border-2); border-radius:9px; width:44px; height:44px; padding:0; place-items:center; }
.hamburger span{ display:block; width:20px; height:2px; background:#fff; margin:4px auto; transition:.3s; }
.hamburger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Menú móvil */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--bg-900);
  border-left:1px solid var(--border-blue); z-index:80; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1); padding:90px 26px 30px; display:flex; flex-direction:column; gap:6px;
  box-shadow:-20px 0 60px rgba(0,0,0,.6);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ padding:14px 8px; border-bottom:1px solid var(--border); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem; color:var(--text); }
.mobile-menu a:hover{ color:var(--blue-bright); }
.mobile-menu .btn{ margin-top:16px; justify-content:center; }
.overlay{ position:fixed; inset:0; background:rgba(2,4,8,.6); z-index:70; opacity:0; visibility:hidden; transition:.3s; backdrop-filter:blur(2px); }
.overlay.open{ opacity:1; visibility:visible; }

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 38%, rgba(22,103,255,.16), transparent 60%),
    radial-gradient(900px 500px at 20% 0%, rgba(15,60,140,.10), transparent 60%);
  border-bottom:1px solid var(--border);
}
.hero::before{ /* rejilla/circuito sutil */
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(47,134,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,134,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(90% 80% at 70% 40%, #000 30%, transparent 75%);
}
.hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.02fr 1.15fr; align-items:center; gap:40px; min-height:600px; padding-top:56px; padding-bottom:56px; }

.hero-eyebrow{ color:var(--blue-bright); font-weight:700; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; margin-bottom:22px; }
.hero-title{ font-size:clamp(2.6rem,5.3vw,4.4rem); line-height:.98; text-transform:uppercase; letter-spacing:.005em; margin-bottom:26px; }
.hero-title span{ display:block; }
.hero-desc{ color:var(--text); max-width:430px; margin-bottom:32px; font-size:1.02rem; }

/* Composición de dispositivos (CSS/SVG, reemplazable por imagen) */
.hero-visual{ position:relative; height:100%; min-height:460px; display:grid; place-items:center; }
.hero-visual img.hero-photo{ width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(22,103,255,.35)); }

.rig{ position:relative; width:min(560px,100%); aspect-ratio:1/.92; }
.rig .halo{
  position:absolute; left:50%; top:44%; width:120%; height:120%; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(47,134,255,.35), rgba(47,134,255,.06) 60%, transparent 72%);
  filter:blur(6px);
}
.rig .frame-arc{
  position:absolute; left:50%; top:6%; width:78%; height:70%; transform:translateX(-50%);
  border:1px solid rgba(79,155,255,.35); border-bottom:none; border-radius:26px 26px 0 0;
  box-shadow:0 0 30px rgba(47,134,255,.25), inset 0 0 24px rgba(47,134,255,.12);
}
/* pedestal */
.pedestal{
  position:absolute; left:50%; bottom:2%; width:88%; height:120px; transform:translateX(-50%);
  background:linear-gradient(180deg,#0c1830,#060b17);
  clip-path:polygon(14% 0,86% 0,100% 46%,86% 100%,14% 100%,0 46%);
  border:1px solid rgba(79,155,255,.4);
  box-shadow:0 22px 50px rgba(0,0,0,.6), inset 0 2px 20px rgba(47,134,255,.25);
}
.pedestal::before{
  content:""; position:absolute; left:50%; top:44%; transform:translateX(-50%);
  width:76%; height:8px; border-radius:50%;
  background:linear-gradient(90deg,transparent,var(--blue-bright),transparent);
  box-shadow:0 0 26px 6px rgba(47,134,255,.7); filter:blur(.4px);
}
.devices{ position:absolute; left:50%; bottom:16%; transform:translateX(-50%); display:flex; align-items:flex-end; gap:0; }
.dev{ position:relative; background:linear-gradient(155deg,#11151d,#05070c); border:1px solid #222c3c; box-shadow:0 20px 40px rgba(0,0,0,.55); }
.dev-screen{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; }
.dev-screen::after{ content:""; position:absolute; inset:0; background:
   radial-gradient(120% 120% at 30% 20%, rgba(79,155,255,.65), transparent 55%),
   linear-gradient(120deg, #041030, #0a2f7a 45%, #061a44); }
.dev-wave{ position:absolute; left:-20%; top:30%; width:150%; height:40%;
  background:linear-gradient(90deg, transparent, rgba(120,190,255,.85), transparent);
  filter:blur(6px); transform:rotate(-12deg); animation:wave 4s ease-in-out infinite; }
@keyframes wave{ 0%,100%{ transform:rotate(-12deg) translateX(-6%);} 50%{ transform:rotate(-9deg) translateX(6%);} }

.dev.phone{ width:96px; height:200px; border-radius:20px; z-index:3; margin-right:-26px; margin-bottom:6px; }
.dev.phone .dev-screen{ border-radius:16px; margin:6px; inset:6px; }
.dev.tablet{ width:150px; height:210px; border-radius:16px; z-index:2; margin-bottom:2px; }
.dev.tablet .dev-screen{ border-radius:10px; inset:9px; }
.dev.laptop{ width:280px; z-index:1; margin-left:-24px; }
.dev.laptop .lid{ position:relative; height:180px; border-radius:14px 14px 0 0; background:linear-gradient(155deg,#11151d,#05070c); border:1px solid #222c3c; border-bottom:none; overflow:hidden; }
.dev.laptop .lid .dev-screen{ inset:8px; border-radius:6px; }
.dev.laptop .base{ height:14px; background:linear-gradient(180deg,#2a3444,#0c111b); border-radius:0 0 10px 10px; box-shadow:0 14px 24px rgba(0,0,0,.5); position:relative; }
.dev.laptop .base::before{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%); width:60px; height:5px; border-radius:0 0 6px 6px; background:#05070c; }

/* ==========================================================================
   4. Servicios
   ========================================================================== */
.section{ padding:var(--section-py) 0; }
.services{ background:rgba(6,9,18,.70); position:relative; }
.services-head{ display:grid; grid-template-columns:1.3fr 1fr; align-items:end; gap:30px; margin-bottom:44px; }
.services-intro{ color:var(--muted); font-size:.95rem; max-width:360px; justify-self:end; text-align:right; }

.cards-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.svc-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 22px; transition:transform .28s ease, border-color .28s, box-shadow .3s, background .3s;
  position:relative; overflow:hidden;
}
.svc-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:.3s;
  box-shadow:inset 0 0 0 1px rgba(47,134,255,.5), 0 20px 50px rgba(22,103,255,.18); }
.svc-card:hover{ transform:translateY(-6px); background:var(--card-2); border-color:var(--border-blue); }
.svc-card:hover::after{ opacity:1; }
.svc-icon{ width:52px; height:52px; color:var(--blue-bright); margin-bottom:22px; }
.svc-icon svg{ width:100%; height:100%; }
.svc-card h3{ font-size:1.02rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; line-height:1.15; }
.svc-card p{ color:var(--muted); font-size:.86rem; margin:0 0 20px; min-height:44px; }
.svc-more{ color:var(--blue-bright); font-weight:600; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.svc-more svg{ width:14px; height:14px; transition:transform .25s; }
.svc-card:hover .svc-more svg{ transform:translateX(4px); }

/* ==========================================================================
   5. Antes y después
   ========================================================================== */
.ba{ background:rgba(8,12,22,.66); }
.ba-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:36px; }
.ba-nav{ display:flex; gap:10px; }
.ba-arrow{ width:44px; height:44px; border-radius:10px; background:var(--card); border:1px solid var(--border-2); color:var(--text); display:grid; place-items:center; transition:.2s; }
.ba-arrow:hover{ color:#fff; border-color:var(--blue); box-shadow:0 0 16px var(--glow-soft); background:rgba(22,103,255,.12); }
.ba-arrow svg{ width:18px; height:18px; }

.ba-track-wrap{ overflow:hidden; }
.ba-track{ display:flex; gap:20px; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.ba-card{ flex:0 0 calc((100% - 60px)/4); min-width:0; }
.ba-pair{
  display:flex; gap:6px; position:relative; background:var(--card-3);
  border:1px solid var(--border-blue); border-radius:12px; padding:8px;
  box-shadow:0 0 24px rgba(22,103,255,.1);
}
.ba-half{ position:relative; flex:1 1 50%; aspect-ratio:3/4; border-radius:8px; overflow:hidden; background:#05070c; }
.ba-media{ position:absolute; inset:0; }
.ba-half img{ width:100%; height:100%; object-fit:cover; }
.ba-tag{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#cfe0ff; background:rgba(4,8,16,.7); border:1px solid var(--border-blue); padding:3px 10px; border-radius:20px; }
.ba-divider{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:50%; background:linear-gradient(180deg,var(--blue-bright),var(--blue)); display:grid; place-items:center; z-index:3; box-shadow:0 0 18px var(--glow); border:2px solid #06101f; }
.ba-divider svg{ width:16px; height:16px; color:#fff; }
/* Device mockup fallback (sin foto) */
.ba-mock{ width:100%; height:100%; display:grid; place-items:center; }
.ba-mock.broken{ background:
   linear-gradient(135deg,#0a0d14,#05070c);
}
.ba-mock .scr{ width:70%; height:82%; border-radius:10px; border:2px solid #263042; position:relative; overflow:hidden; background:linear-gradient(160deg,#0b1220,#05070c); }
.ba-mock.broken .scr::before{ content:""; position:absolute; inset:0; background:
   linear-gradient(75deg, transparent 46%, rgba(180,200,230,.5) 47%, transparent 48%),
   linear-gradient(120deg, transparent 55%, rgba(180,200,230,.45) 56%, transparent 57%),
   linear-gradient(30deg, transparent 62%, rgba(180,200,230,.4) 63%, transparent 64%); }
.ba-mock.fixed .scr{ background:radial-gradient(120% 100% at 40% 25%, rgba(79,155,255,.5), transparent 55%), linear-gradient(150deg,#062056,#041233); border-color:#2b4c86; box-shadow:inset 0 0 22px rgba(47,134,255,.35); }

/* ==========================================================================
   6. Estadísticas
   ========================================================================== */
.stats-wrap{ background:rgba(8,12,22,.66); padding-bottom:var(--section-py); }
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg, rgba(14,26,52,.55), rgba(8,14,26,.55));
  border:1px solid var(--border-blue); border-radius:var(--radius-lg);
  box-shadow:0 0 40px rgba(22,103,255,.14), inset 0 1px 0 rgba(79,155,255,.2);
  overflow:hidden;
}
.stat{ padding:30px 22px; display:flex; align-items:center; gap:16px; position:relative; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:22%; height:56%; width:1px; background:linear-gradient(180deg,transparent,var(--border-blue),transparent); }
.stat-icon{ width:46px; height:46px; color:var(--blue-bright); flex:none; }
.stat-icon svg{ width:100%; height:100%; }
.stat-num{ font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--blue-bright); line-height:1; }
.stat-label{ color:var(--muted); font-size:.82rem; margin-top:4px; }

/* ==========================================================================
   7. ¿Por qué elegirnos?
   ========================================================================== */
.why{ background:rgba(6,9,18,.70); }
.why-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; margin-top:44px; text-align:center; }
.why-item{ padding:0 8px; }
.why-icon{ width:46px; height:46px; color:var(--blue-bright); margin:0 auto 20px; }
.why-icon svg{ width:100%; height:100%; }
.why-item h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.why-item p{ color:var(--muted); font-size:.85rem; margin:0; }

/* ==========================================================================
   8. Testimonios
   ========================================================================== */
.testi{ background:rgba(8,12,22,.66); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
.testi-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; transition:.28s; }
.testi-card:hover{ border-color:var(--border-blue); box-shadow:0 16px 40px rgba(22,103,255,.12); transform:translateY(-4px); }
.stars{ display:flex; gap:4px; margin-bottom:16px; }
.stars svg{ width:17px; height:17px; color:var(--blue-bright); }
.testi-quote{ color:var(--text); font-size:.92rem; font-style:italic; margin:0 0 22px; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.testi-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; border:1px solid var(--border-blue); background:#0c1424; flex:none; }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; }
.testi-name{ color:var(--white); font-weight:600; font-size:.9rem; }
.testi-role{ color:var(--muted); font-size:.78rem; }

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.faq{ background:rgba(6,9,18,.70); }
.faq-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:stretch; }
.faq-visual{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(22,103,255,.28), transparent 55%), linear-gradient(160deg,#061634,#04050b);
  border:1px solid var(--border-blue); display:grid; place-items:center;
}
.faq-visual::before{ content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M15 0l15 8.66v17.32L15 34.64 0 25.98V8.66zM45 0l15 8.66v17.32L45 34.64 30 25.98V8.66zM30 26l15 8.66V52L30 43.32 15 52V34.66z' fill='none' stroke='%232f86ff' stroke-opacity='.18'/%3E%3C/svg%3E"); }
.faq-q-bubble{ position:relative; z-index:2; width:150px; height:150px; border-radius:36px 36px 36px 8px;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue)); display:grid; place-items:center;
  box-shadow:0 0 60px rgba(47,134,255,.55), inset 0 2px 10px rgba(255,255,255,.25); }
.faq-q-bubble span{ font-family:var(--font-display); font-weight:700; font-size:5rem; color:#fff; }
.faq-visual h3{ position:absolute; bottom:26px; left:0; right:0; text-align:center; text-transform:uppercase; letter-spacing:.05em; font-size:1.3rem; z-index:2; }

.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; transition:border-color .25s; }
.faq-item.open{ border-color:var(--border-blue); box-shadow:0 0 22px var(--glow-soft); }
.faq-qbtn{ width:100%; background:none; border:none; color:var(--white); text-align:left; padding:18px 20px; font-size:.92rem; font-weight:500; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-qbtn .pm{ width:24px; height:24px; flex:none; position:relative; color:var(--blue-bright); }
.faq-qbtn .pm::before, .faq-qbtn .pm::after{ content:""; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px; transition:.25s; }
.faq-qbtn .pm::before{ width:14px; height:2px; transform:translate(-50%,-50%); }
.faq-qbtn .pm::after{ width:2px; height:14px; transform:translate(-50%,-50%); }
.faq-item.open .pm::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a-inner{ padding:0 20px 20px; color:var(--muted); font-size:.88rem; }

/* ==========================================================================
   10. Contacto + Mapa
   ========================================================================== */
.contact{ background:rgba(8,12,22,.62); }
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:36px; align-items:stretch; margin-top:14px; }
.contact-list{ display:flex; flex-direction:column; gap:22px; margin-top:26px; }
.contact-row{ display:flex; gap:16px; align-items:flex-start; }
.contact-ico{ width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; color:var(--blue-bright); background:rgba(22,103,255,.1); border:1px solid var(--border-blue); }
.contact-ico svg{ width:20px; height:20px; }
.contact-row .val{ color:var(--white); font-weight:600; font-size:1rem; }
.contact-row .sub{ color:var(--muted); font-size:.82rem; }

.map-wrap{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-blue); min-height:400px; background:#060a12; }
.map-wrap iframe{ width:100%; height:100%; min-height:400px; border:0; filter:grayscale(.4) invert(.9) hue-rotate(180deg) brightness(.9) contrast(.9); }
.map-card{ position:absolute; right:22px; top:50%; transform:translateY(-50%); background:rgba(8,12,20,.92); border:1px solid var(--border-blue); border-radius:12px; padding:18px 20px; width:210px; backdrop-filter:blur(6px); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.map-card h4{ font-family:var(--font-body); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-bright); margin-bottom:10px; }
.map-card p{ color:var(--text); font-size:.86rem; margin:0 0 14px; line-height:1.4; }
.map-card .btn{ width:100%; justify-content:center; padding:11px 14px; font-size:.7rem; }

/* ==========================================================================
   11. Footer
   ========================================================================== */
.footer{ background:var(--bg-900); border-top:1px solid rgba(31,120,255,.55); box-shadow:0 -1px 0 rgba(47,134,255,.25); position:relative; overflow:hidden; }
.footer-main{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px; padding:56px 0 40px; position:relative; z-index:2; }
.footer-brand .logo{ margin-bottom:18px; }
.footer-about{ color:var(--muted); font-size:.86rem; max-width:250px; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.03); border:1px solid var(--border-2); color:var(--text); transition:.2s; }
.footer-social a:hover{ color:#fff; border-color:var(--blue); background:rgba(22,103,255,.15); box-shadow:0 0 14px var(--glow-soft); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--white); margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a, .footer-hours li{ color:var(--muted); font-size:.86rem; transition:color .2s; }
.footer-col a:hover{ color:var(--blue-bright); }
.footer-hours li{ margin-bottom:12px; }
.footer-hours .d{ color:var(--white); font-weight:600; font-size:.86rem; }
.footer-watermark{ position:absolute; right:-30px; bottom:-20px; width:280px; opacity:.06; z-index:1; pointer-events:none; }
.footer-bottom{ border-top:1px solid var(--border); padding:20px 0; text-align:center; color:var(--muted-2); font-size:.8rem; position:relative; z-index:2; }

/* ==========================================================================
   Animaciones de aparición
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .dev-wave, .pedestal::before{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .cards-5{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:repeat(3,1fr); row-gap:38px; }
  .ba-card{ flex-basis:calc((100% - 20px)/2); }
  .services-head{ grid-template-columns:1fr; }
  .services-intro{ justify-self:start; text-align:left; }
}
@media (max-width:900px){
  :root{ --section-py:64px; }
  .topbar-item.loc, .topbar-item.hours{ display:none; }
  .nav-links, .nav-cta{ display:none; }
  .hamburger{ display:grid; }
  .hero .container{ grid-template-columns:1fr; gap:20px; text-align:left; padding-top:44px; }
  .hero-visual{ min-height:380px; order:2; }
  .hero-desc{ max-width:none; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before{ display:none; }
  .testi-grid{ grid-template-columns:1fr; }
  .faq-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .map-wrap{ min-height:340px; }
  .footer-main{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:620px){
  .cards-5{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .ba-card{ flex-basis:100%; }
  .stats{ grid-template-columns:1fr; }
  .stat + .stat::before{ display:none; }
  .stat{ border-top:1px solid var(--border); }
  .stat:first-child{ border-top:none; }
  .footer-main{ grid-template-columns:1fr; }
  .map-card{ position:static; transform:none; width:auto; margin:14px; }
  .topbar .container{ gap:12px; justify-content:space-between; }
  .topbar-item.phone{ display:none; }
  .hero-title{ font-size:2.4rem; }
}