/* ==========================================================================
   HALITEL — premium.css   (se carga AL FINAL, solo capa visual)
   Reencuadra la identidad: de "todo azul y plano" a negro/grafito/antracita
   con azul como acento de acción, platino en detalles, profundidad y luz
   ambiental. No cambia contenido, estructura ni funcionamiento.
   ========================================================================== */

/* ---------- 1. Paleta y tokens (override global) ----------------------- */
:root{
  /* Fondos: casi negro neutro, sin tinte navy */
  --bg-900:#050507;
  --bg-850:#070709;
  --bg-800:#0a0b0e;
  --bg-750:#0c0d11;
  --card:#0f1115;
  --card-2:#16181e;
  --card-3:#0c0e12;

  /* Bordes: grafito; el "accent border" pasa a acero sutil */
  --border:#1b1e25;
  --border-2:#252932;
  --border-blue:#2b333f;

  /* Azul de MARCA — solo para acciones (botones/CTA). Más refinado, menos neón */
  --blue:#2a5bd7;
  --blue-600:#2450c4;
  --blue-bright:#3f7bff;
  --blue-400:#6f9bff;
  --blue-deep:#0e1d3f;

  /* Glow neutro/frío (platino) en vez de azul eléctrico */
  --glow:rgba(155,175,205,.26);
  --glow-soft:rgba(150,170,200,.10);

  /* Texto */
  --white:#f5f7fa;
  --text:#c1c7d1;
  --muted:#858c98;
  --muted-2:#565c67;

  /* Nuevos acentos premium */
  --accent:#c4cdd9;        /* platino: iconos, eyebrows, labels */
  --accent-dim:#8d97a5;
  --ice:#e8eef6;
  --petrol:#16303a;
  --petrol-glow:rgba(38,116,134,.14);
  --gold:#d8b877;          /* estrellas / micro-detalle premium */

  /* Métrica: más aire, esquinas más suaves */
  --section-py:104px;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;

  --shadow-card:0 26px 64px -24px rgba(0,0,0,.75);
  --shadow-soft:0 10px 30px -14px rgba(0,0,0,.6);
}

/* ---------- 2. Fondo ORIGINAL restaurado --------------------------- */
/* El cliente pidió dejar el fondo que tenía antes: partículas del canvas
   VIBRANTES (sin desaturar) + auroras azul/cian que venían de glow.css
   (ya desenlazado, se reponen aquí). Sin grano. El resto sigue premium. */
#bgfx{ z-index:-1; opacity:1; filter:none; }

/* Header anclado al scroll: el sitio usaba overflow-x:hidden en html/body, que
   ROMPE position:sticky (vuelve a esos elementos scroll-container). overflow-x:
   clip clipa el desborde horizontal SIN crear scroll-container -> el .topstick
   (header + brandbar, ya position:sticky) queda anclado arriba al scrollear. */
html, body{ overflow-x:clip; }
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(620px 440px at 10% 6%, rgba(22,103,255,.12), transparent 62%),
    radial-gradient(720px 520px at 90% 24%, rgba(56,189,248,.10), transparent 62%),
    radial-gradient(760px 560px at 16% 72%, rgba(22,103,255,.10), transparent 62%),
    radial-gradient(680px 520px at 88% 92%, rgba(56,189,248,.08), transparent 62%);
  animation:auroraFloat 20s ease-in-out infinite alternate;
}
@keyframes auroraFloat{ from{ filter:hue-rotate(0deg); } to{ filter:hue-rotate(-12deg); } }

/* ---------- 3. Tipografía: más jerarquía y aire --------------------- */
body{ line-height:1.65; }
h1,h2,h3,h4{ letter-spacing:.005em; }
.section-title{
  font-size:clamp(1.9rem,3.6vw,2.9rem);
  letter-spacing:-.005em;
  line-height:1.04;
}
.section-title span:first-child{ color:var(--white); }
.hero-title{ font-size:clamp(2.8rem,5.6vw,4.9rem); letter-spacing:-.01em; }
/* Palabra destacada del hero: azul de marca suavizado, sólido (el wrapper
   <i> de la animación t-rise rompe background-clip:text, así que color plano) */
.text-blue{ color:var(--blue-400); -webkit-text-fill-color:currentColor; background:none; }

/* Eyebrow: shimmer platino (antes azul) */
.eyebrow{
  color:var(--accent);
  background:linear-gradient(90deg,var(--accent-dim),var(--ice),var(--accent-dim));
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:.26em;
}
/* Eyebrow del hero (clase propia .hero-eyebrow) tambien a platino */
.hero-eyebrow{ color:var(--accent); letter-spacing:.24em; }

/* ---------- 4. Acentos: de azul a platino (oro en estrellas) --------- */
.svc-icon, .why-icon, .stat-icon, .svc-more, .shop-cta,
.topbar-item svg, .faq-qbtn .pm{ color:var(--accent); }
.svc-more:hover, .shop-cta:hover{ color:var(--white); }
.logo-sub{ color:var(--accent-dim); }
.stars svg{ color:var(--gold); filter:drop-shadow(0 0 6px rgba(216,184,119,.35)); }

/* Pods de icono: glass neutro en vez de caja azul */
.contact-ico, .acard-ico, .trust-ico{
  color:var(--accent);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.stat-num{ color:var(--white); }

/* Subrayado de nav: hairline azul de acción, fino y elegante */
.nav-links a::after{ height:1.5px; background:linear-gradient(90deg,var(--blue-bright),var(--accent)); box-shadow:none; }

/* ---------- 5. Header / topbar / brandbar: glass y bordes neutros ---- */
.topbar{ background:rgba(6,7,10,.9); border-bottom:1px solid var(--border-2); box-shadow:none; backdrop-filter:blur(8px); }
.topbar-item svg{ color:var(--accent-dim); }
/* Header anclado por sí mismo (el carrusel salió del topstick -> ya no lo
   ancla). overflow-x:clip (arriba) permite que este sticky funcione. */
.header{ position:sticky; top:0; z-index:55; background:rgba(7,8,11,.82); border-bottom:1px solid var(--border); -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15); }
.header.scrolled{ background:rgba(6,7,10,.86); box-shadow:0 14px 40px -18px rgba(0,0,0,.8); }
.brandbar{ background:linear-gradient(180deg,rgba(10,11,14,.9),rgba(6,7,10,.9)); border-top:1px solid var(--border); border-bottom:1px solid var(--border-2); box-shadow:0 10px 26px -16px rgba(0,0,0,.7); }
.brandbar-label{ color:var(--accent); background:rgba(8,9,12,.96); border-right:1px solid var(--border-2); }
.brandbar-track span{ color:#727a89; }
.brandbar-track span:hover{ color:var(--accent); }

/* ---------- 6. Botones premium -------------------------------------- */
.btn{ position:relative; overflow:hidden; border-radius:12px; letter-spacing:.14em; }
.btn-primary{
  background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  box-shadow:0 12px 34px -12px rgba(42,91,215,.6), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.04);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(63,123,255,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary::before, .btn-outline::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 46%,transparent 62%);
  transform:translateX(-135%); transition:transform .75s var(--ease-io,cubic-bezier(.4,0,.2,1));
}
.btn-primary:hover::before, .btn-outline:hover::before{ transform:translateX(135%); }
.btn-outline{
  background:rgba(255,255,255,.035);
  border:1px solid var(--border-2);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--white);
}
.btn-outline:hover{ background:rgba(255,255,255,.07); border-color:var(--border-blue); box-shadow:0 0 26px -6px var(--glow-soft); }

/* ---------- 7. Secciones ------------------------------------------- */
/* Se DEJAN los fondos de sección y del hero ORIGINALES (el cliente quiere el
   fondo de antes). Solo se conserva el float sutil de la imagen del hero. */
.section{ position:relative; }
.hero-photo{ animation:floaty 7s ease-in-out infinite; will-change:transform; }

/* ---------- 8. Cards premium (glass + profundidad + hover frío) ------ */
.svc-card, .testi-card, .pcard, .acard, .faq-item, .prod-card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006)), var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.svc-card:hover, .testi-card:hover, .pcard:hover, .acard:hover, .prod-card:hover{
  transform:translateY(-6px);
  border-color:var(--border-blue);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85), 0 0 46px -14px var(--glow-soft);
}
.svc-card::after{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -22px rgba(0,0,0,.7); }

/* Hover NEÓN en los recuadros (restaurado a pedido del cliente): al pasar el
   mouse, borde cian + glow azul. Solo en hover, no afecta el estado normal. */
.ba-pair, .map-card, .pay-tile, .faq-item{ transition:box-shadow .3s, border-color .3s, transform .3s; }
.svc-card:hover, .acard:hover, .pcard:hover, .testi-card:hover, .prod-card:hover,
.pay-tile:hover, .faq-item:hover, .faq-item.open, .map-card:hover, .ba-card:hover .ba-pair{
  border-color:#5fe0ff;
  box-shadow:
    0 0 0 1px rgba(95,224,255,.9),
    0 0 14px rgba(95,224,255,.6),
    0 0 34px rgba(56,189,248,.5),
    0 0 66px rgba(22,103,255,.42),
    0 22px 54px rgba(22,103,255,.3);
}
.svc-card:hover .svc-icon, .why-item:hover .why-icon{ filter:drop-shadow(0 0 16px rgba(95,224,255,.6)); }
.svc-icon svg, .why-icon svg{ filter:drop-shadow(0 0 12px rgba(150,170,200,.25)); }

/* ---------- 9. Stats / FAQ / contacto / mapa ------------------------ */
.stats{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  border:1px solid var(--border-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 34px 80px -34px rgba(0,0,0,.8);
}
.stat + .stat::before{ background:linear-gradient(180deg,transparent,var(--border-2),transparent); }
.faq-visual{
  background:radial-gradient(120% 120% at 30% 18%, var(--petrol-glow), transparent 55%), linear-gradient(160deg,#0c0f14,#060709);
  border:1px solid var(--border-2);
}
.faq-q-bubble{ background:linear-gradient(180deg,var(--blue-bright),var(--blue)); box-shadow:0 0 60px -6px rgba(63,123,255,.4), inset 0 2px 12px rgba(255,255,255,.25); }
/* (el borde/glow del faq abierto lo maneja la regla NEÓN de la sección 8) */
.contact-ico{ border-radius:14px; }
.map-wrap{ border:1px solid var(--border-2); }
.map-card{ background:rgba(9,10,13,.9); border:1px solid var(--border-2); box-shadow:0 24px 50px -20px rgba(0,0,0,.7); }
.map-card h4{ color:var(--accent); }

/* ---------- 10. Formularios / inputs (drawer, buscador) ------------- */
input, textarea, select{ transition:border-color .2s, box-shadow .2s, background .2s; }
input:focus, textarea:focus, select:focus{ box-shadow:0 0 0 3px rgba(63,123,255,.16); }

/* ---------- 11. Footer premium ------------------------------------- */
.footer{ background:linear-gradient(180deg,#08090c,#050507); border-top:1px solid var(--border); box-shadow:none; }
.footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(160,180,210,.35),transparent);
}
.footer-col a:hover{ color:var(--accent); }
.footer-social a:hover{ border-color:var(--border-blue); background:rgba(255,255,255,.06); box-shadow:0 0 18px -4px var(--glow-soft); color:#fff; }

/* ---------- 12. Animaciones ---------------------------------------- */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* Reveal con desenfoque (blur reveal) + más recorrido */
.reveal{ transform:translateY(30px); filter:blur(8px); transition:opacity .8s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)), transform .8s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)), filter .8s ease; }
.reveal.in{ filter:blur(0); }

/* Stagger en grillas: cada card entra un pelín después */
.cards-5 > .reveal:nth-child(2), .why-grid > .reveal:nth-child(2), .acc-grid > .reveal:nth-child(2), .phones-grid > .reveal:nth-child(2), .testi-grid > .reveal:nth-child(2){ transition-delay:.06s; }
.cards-5 > .reveal:nth-child(3), .why-grid > .reveal:nth-child(3), .acc-grid > .reveal:nth-child(3), .phones-grid > .reveal:nth-child(3), .testi-grid > .reveal:nth-child(3){ transition-delay:.12s; }
.cards-5 > .reveal:nth-child(4), .why-grid > .reveal:nth-child(4), .acc-grid > .reveal:nth-child(4){ transition-delay:.18s; }
.cards-5 > .reveal:nth-child(5), .why-grid > .reveal:nth-child(5){ transition-delay:.24s; }

/* ---------- 13. Intro splash: neutralizar el tinte azul ------------- */
#intro{ background:#050507; }
#intro .intro-grade{ background:
  radial-gradient(120% 90% at 50% 38%, var(--petrol-glow), transparent 55%),
  linear-gradient(180deg, rgba(4,5,7,.30), rgba(4,5,7,.12) 42%, rgba(4,5,7,.78)),
  radial-gradient(150% 130% at 50% 44%, transparent 60%, rgba(2,3,5,.72)); }
#intro .intro-sub{ color:var(--accent); }
#intro .intro-logo{ filter:drop-shadow(0 0 26px rgba(150,170,200,.45)); }
#intro .intro-bar span{ background:linear-gradient(90deg,var(--accent-dim),var(--ice)); box-shadow:0 0 12px rgba(150,170,200,.4); }
#intro .intro-enter{ background:linear-gradient(180deg,var(--blue-bright),var(--blue)); border:1px solid transparent; box-shadow:0 12px 34px -12px rgba(42,91,215,.55); }

/* ---------- 14. Audio btn / detalles ------------------------------- */
#audiobtn{ background:rgba(9,10,13,.82); border:1px solid var(--border-2); color:var(--accent); }
#audiobtn:hover{ border-color:var(--border-blue); box-shadow:0 10px 30px -10px var(--glow); }

/* ---------- 15. Espaciado / aire extra (solo desktop) -------------- */
@media (min-width:1025px){
  .services-head{ margin-bottom:56px; }
  .why-grid, .testi-grid, .process-grid{ margin-top:52px; }
  .cards-5{ gap:22px; }
  .hero .container{ gap:52px; }
}
/* En móvil/tablet: recuperar el ritmo compacto (no inflar el padding) */
@media (max-width:900px){ :root{ --section-py:66px; } }
@media (max-width:620px){ :root{ --section-py:54px; } }

/* ---------- 15b. Barra de progreso de scroll (glow.js crea #scrollbar) */
#scrollbar{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:200; pointer-events:none;
  background:linear-gradient(90deg,var(--blue-bright),var(--accent));
  box-shadow:0 0 10px rgba(63,123,255,.45); transition:width .1s linear;
}

/* ---------- 15c. Detalles que quedan al quitar glow.css ------------- */
/* Iconos de servicio/beneficio: línea platino limpia (sin pod), estilo minimal */
.svc-icon{ width:46px; height:46px; }
.stat-num{ background:none; -webkit-text-fill-color:var(--white); }
.stars svg{ -webkit-text-fill-color:currentColor; }
/* Números de stats: peso y glow sutil neutro */
.stat-num{ filter:drop-shadow(0 0 10px rgba(150,170,200,.18)); }
.cta-band{ background:linear-gradient(120deg,#0a1526,#12233f 48%,#0a1526); border-color:var(--border-2); }
.cta-inner h2 span{ color:var(--blue-400); }

/* ---------- 15d. Aviso de tope de stock en el carrito -------------- */
.prod-add.warn{ background:linear-gradient(135deg,#b9791f,#e0a63a); box-shadow:none; }
.ci-max{ font-size:.64rem; font-weight:700; letter-spacing:.02em; color:#e6b24a; margin-left:6px; }
.ci-qty button[disabled]{ opacity:.35; cursor:not-allowed; }

/* ---------- 15e. Botón "Ver catálogo completo" (home) -------------- */
/* Más pequeño y presentable: pill glass con borde azul + hover glow. */
.acc-more{ margin-top:30px !important; }
.acc-more .btn{
  padding:10px 22px; font-size:.72rem; letter-spacing:.14em; border-radius:999px; gap:9px;
  color:var(--white);
  background:linear-gradient(180deg, rgba(63,123,255,.18), rgba(63,123,255,.05));
  border:1px solid var(--border-blue);
  box-shadow:0 8px 22px -12px rgba(63,123,255,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.acc-more .btn:hover{
  transform:translateY(-2px);
  border-color:#5fe0ff;
  background:linear-gradient(180deg, rgba(63,123,255,.3), rgba(63,123,255,.12));
  box-shadow:0 12px 28px -12px rgba(63,123,255,.65), 0 0 22px -8px rgba(95,224,255,.5);
}
.acc-more .btn svg{ width:15px; height:15px; transition:transform .25s; }
.acc-more .btn:hover svg{ transform:translateX(4px); }

/* ---------- 15f. Botones flotantes (carrito + WhatsApp) ------------ */
.float-actions{
  position:fixed; right:22px; bottom:22px; z-index:120;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.float-btn{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; position:relative; border:1px solid transparent;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6);
  transition:transform .2s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)), box-shadow .25s, background .2s, border-color .2s;
}
.float-btn svg{ width:26px; height:26px; }
.float-btn:hover{ transform:translateY(-3px) scale(1.06); }
.float-btn:active{ transform:scale(.95); }
/* WhatsApp (abajo) — verde de marca */
.float-wa{ background:linear-gradient(180deg,#29d366,#1faa53); color:#fff; box-shadow:0 14px 32px -8px rgba(37,211,102,.55); }
.float-wa:hover{ box-shadow:0 18px 40px -8px rgba(37,211,102,.7); }
/* Carrito (arriba) — glass oscuro con acento azul */
.float-cart{ background:rgba(13,17,24,.92); border-color:var(--border-blue); color:var(--white); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.float-cart:hover{ border-color:#5fe0ff; box-shadow:0 16px 36px -10px rgba(63,123,255,.5), 0 0 24px -8px rgba(95,224,255,.55); }
.float-cart.bumped{ animation:cartBump .32s ease; }
@keyframes cartBump{ 40%{ transform:translateY(-3px) scale(1.16); } }
.float-cart .cart-badge{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:linear-gradient(180deg,var(--blue-bright),var(--blue)); color:#fff;
  font-family:var(--font-body); font-weight:700; font-size:.66rem; line-height:20px; text-align:center;
  border:2px solid var(--bg-900); box-shadow:0 4px 10px -2px rgba(63,123,255,.6);
  opacity:0; transform:scale(.5); transition:transform .2s var(--ease-spring,ease), opacity .2s;
}
.float-cart .cart-badge.show{ opacity:1; transform:scale(1); }
@media (max-width:600px){ .float-actions{ right:14px; bottom:14px; gap:10px; } .float-btn{ width:52px; height:52px; } .float-btn svg{ width:24px; height:24px; } }

/* ---------- 15g. Contacto: botón "Cómo llegar" bajo el mapa -------- */
/* El botón sale de ADENTRO del mapa y queda pegado debajo (por fuera),
   formando una sola pieza con el mapa y proporcionado con la caja de al lado. */
.map-col{ display:flex; flex-direction:column; height:100%; }
.map-col .map-wrap{ flex:1 1 auto; border-radius:14px 14px 0 0; border-bottom:none; }
.map-cta{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 18px; border-radius:0 0 14px 14px;
  font-family:var(--font-body); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; background:linear-gradient(180deg,var(--blue-bright),var(--blue));
  border:1px solid var(--border-blue); border-top:none;
  box-shadow:0 12px 28px -14px rgba(63,123,255,.55);
  transition:filter .2s, box-shadow .25s;
}
.map-cta svg{ width:17px; height:17px; flex:none; }
.map-cta:hover{ filter:brightness(1.08); box-shadow:0 16px 34px -14px rgba(63,123,255,.75); }

/* ---------- 15h. "Ver local" + galería DENTRO del recuadro del mapa - */
/* Chips: "Ver local" (sobre el mapa) y "Ver mapa" (dentro de la galería) */
.ver-local, .lg-back{
  position:absolute; z-index:8;
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(8,12,20,.85); border:1px solid var(--border-blue); color:#cfe0ff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--font-body); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 13px; border-radius:9px; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4); transition:.2s;
}
.ver-local{ left:14px; bottom:14px; }
.ver-local svg, .lg-back svg{ width:15px; height:15px; }
.ver-local:hover, .lg-back:hover{ background:rgba(22,103,255,.28); border-color:#5fe0ff; color:#fff; box-shadow:0 8px 22px -6px rgba(63,123,255,.55); }

/* Galería contenida en el mismo recuadro del mapa (no fullscreen) */
.local-gallery{ position:absolute; inset:0; z-index:9; display:none; background:#05070c; }
.local-gallery.open{ display:block; }
.local-gallery .lg-stage{ position:absolute; inset:0; }
.local-gallery img{ width:100%; height:100%; object-fit:contain; display:block; }
.lg-back{ left:10px; top:10px; z-index:4; }
.lg-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:40px; height:40px; border-radius:50%;
  background:rgba(8,12,20,.78); border:1px solid var(--border-blue); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; transition:.2s; }
.lg-prev{ left:10px; } .lg-next{ right:10px; }
.lg-nav:hover{ background:rgba(63,123,255,.4); border-color:#5fe0ff; }
.lg-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:7px; justify-content:center; z-index:4; }
.lg-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); border:none; cursor:pointer; padding:0; transition:.2s; }
.lg-dot.active{ background:var(--blue-bright); box-shadow:0 0 8px var(--blue-bright); transform:scale(1.3); }

/* ---------- 18. Hero en recuadro con borde NEÓN futurista ---------- */
.hero-frame{
  position:relative; border-radius:22px; padding:clamp(12px,2.2vw,22px);
  background:linear-gradient(160deg, rgba(16,23,38,.5), rgba(7,10,16,.55));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:
    0 34px 80px -34px rgba(0,0,0,.85),
    0 0 26px rgba(63,123,255,.55),
    0 0 60px rgba(63,123,255,.45),
    0 0 110px -6px rgba(95,224,255,.45);
  overflow:hidden;
  animation:floaty 7s ease-in-out infinite, framePulse 3.4s ease-in-out infinite;
  will-change:transform, box-shadow;
}
@keyframes framePulse{
  0%,100%{ box-shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 0 24px rgba(63,123,255,.5), 0 0 55px rgba(63,123,255,.4), 0 0 100px -8px rgba(95,224,255,.4); }
  50%{ box-shadow:0 34px 80px -34px rgba(0,0,0,.85), 0 0 40px rgba(95,224,255,.75), 0 0 85px rgba(63,123,255,.6), 0 0 150px -4px rgba(95,224,255,.6); }
}
.hero-frame .hero-photo{ position:relative; z-index:1; width:100%; height:auto; display:block; border-radius:13px;
  animation:none; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
/* Borde neón animado (gradiente cian/azul que fluye alrededor) */
.hero-frame::before{
  content:""; position:absolute; inset:0; border-radius:22px; padding:2.2px; pointer-events:none; z-index:3;
  background:linear-gradient(115deg, #2f6bff, #7fe9ff, #2f6bff, #7fe9ff, #2f6bff);
  background-size:300% 100%;
  filter:drop-shadow(0 0 6px rgba(95,224,255,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:heroBorder 6s linear infinite;
}
@keyframes heroBorder{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }
/* Esquinas HUD */
.hf-c{ position:absolute; width:26px; height:26px; z-index:4; pointer-events:none; border:2.5px solid #8ff0ff; filter:drop-shadow(0 0 8px rgba(95,224,255,1)) drop-shadow(0 0 3px rgba(255,255,255,.6)); }
.hf-c.tl{ left:7px; top:7px; border-right:0; border-bottom:0; border-radius:11px 0 0 0; }
.hf-c.tr{ right:7px; top:7px; border-left:0; border-bottom:0; border-radius:0 11px 0 0; }
.hf-c.bl{ left:7px; bottom:7px; border-right:0; border-top:0; border-radius:0 0 0 11px; }
.hf-c.br{ right:7px; bottom:7px; border-left:0; border-top:0; border-radius:0 0 11px 0; }
/* Barrido tipo escáner */
.hf-scan{ position:absolute; left:0; right:0; top:0; height:36%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(95,224,255,.12), transparent);
  animation:heroScan 4.8s ease-in-out infinite; }
@keyframes heroScan{ 0%{ transform:translateY(-40%); opacity:0; } 25%{ opacity:1; } 100%{ transform:translateY(300%); opacity:0; } }

/* ---------- 19. FAQ: emblema HUD futurista (estilo applemacsolutions) */
.faq-visual{ overflow:hidden; }
/* Halo cónico girando detrás del emblema */
.faq-visual::after{
  content:""; position:absolute; left:50%; top:50%; width:360px; height:360px; transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, transparent, rgba(63,123,255,.20), transparent 42%, rgba(95,224,255,.16), transparent 72%);
  border-radius:50%; filter:blur(8px); animation:faqSpin 16s linear infinite;
}
@keyframes faqSpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
/* Emblema: anillos concéntricos + gauge de ticks + barrido tipo radar */
.faq-emblem{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90%,330px); aspect-ratio:1; z-index:1; pointer-events:none; overflow:visible; }
.fe-ring{ fill:none; transform-box:fill-box; transform-origin:center; }
.fe-out{ stroke:rgba(95,224,255,.25); stroke-width:1; }
.fe-in{ stroke:rgba(63,123,255,.32); stroke-width:1; }
.fe-ticks{ stroke:rgba(95,224,255,.5); stroke-width:7; stroke-dasharray:1.4 9; filter:drop-shadow(0 0 3px rgba(95,224,255,.5)); animation:feSpin 40s linear infinite; }
.fe-dash{ stroke:rgba(95,224,255,.45); stroke-width:1.4; stroke-dasharray:10 13; animation:feSpin 22s linear infinite reverse; }
.fe-sweep{ stroke:#7fe9ff; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:55 720; filter:drop-shadow(0 0 6px rgba(95,224,255,.95)); animation:feSpin 5.5s linear infinite; }
@keyframes feSpin{ to{ transform:rotate(360deg); } }
/* "?" al centro sobre un NÚCLEO circular futurista (orbe glass + rim cian) */
.faq-q-bubble{
  position:relative; z-index:2;
  width:130px !important; height:130px !important; border-radius:50% !important;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 38%, rgba(63,123,255,.42), rgba(9,14,24,.92) 68%) !important;
  border:1.6px solid rgba(95,224,255,.6) !important;
  box-shadow:0 0 34px -6px rgba(63,123,255,.6), inset 0 0 28px -4px rgba(95,224,255,.4), inset 0 2px 10px rgba(255,255,255,.14) !important;
  animation:faqBubble 4s ease-in-out infinite;
}
@keyframes faqBubble{
  0%,100%{ box-shadow:0 0 30px -6px rgba(63,123,255,.55), inset 0 0 26px -4px rgba(95,224,255,.38), inset 0 2px 10px rgba(255,255,255,.14); }
  50%{ box-shadow:0 0 50px -4px rgba(95,224,255,.8), inset 0 0 36px -2px rgba(95,224,255,.5), inset 0 2px 10px rgba(255,255,255,.16); }
}
.faq-q-bubble span{ font-size:3.8rem; color:#eaf6ff; text-shadow:0 0 26px rgba(95,224,255,.9), 0 0 12px rgba(255,255,255,.6); }
.faq-visual h3{ z-index:3; }
/* Esquinas HUD del panel */
.faq-visual .faq-c{ position:absolute; width:26px; height:26px; z-index:3; pointer-events:none; border:2px solid #5fe0ff; filter:drop-shadow(0 0 6px rgba(95,224,255,.85)); }
.faq-c.tl{ left:14px; top:14px; border-right:0; border-bottom:0; border-radius:12px 0 0 0; }
.faq-c.tr{ right:14px; top:14px; border-left:0; border-bottom:0; border-radius:0 12px 0 0; }
.faq-c.bl{ left:14px; bottom:14px; border-right:0; border-top:0; border-radius:0 0 0 12px; }
.faq-c.br{ right:14px; bottom:14px; border-left:0; border-top:0; border-radius:0 0 12px 0; }
@media (prefers-reduced-motion:reduce){
  .hero-frame, .hf-scan, .hero-frame::before, .faq-visual::after, .faq-q-bubble, .fe-ticks, .fe-dash, .fe-sweep{ animation:none; }
}

/* ---------- 20. Fondo cohesivo (sin bandas entre secciones) -------- */
/* Todas las secciones compartían opacidades distintas (.5–.7) -> costuras y
   fondo disparejo. Se unifica la translucidez para que las partículas + auroras
   se vean PAREJAS en toda la página. */
.services, .process, .shop-phones, .shop-acc, .ba, .stats-wrap,
.why, .testi, .faq, .contact{ background:rgba(6,9,16,.58); }
.trust-band, .brands{ background:rgba(6,9,16,.40); }
/* Base con leve profundidad vertical (se ve entre partículas) */
body{ background:linear-gradient(180deg, #070a12 0%, #05070d 50%, #070a12 100%); }

/* ---------- 21. Hero: typewriter de palabras clave ----------------- */
.hero-type{
  display:flex; align-items:center; flex-wrap:wrap; gap:.45ch;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(1.05rem,2vw,1.55rem); line-height:1.1;
  margin:2px 0 22px; color:var(--muted);
}
.hero-type .ht-static{ color:var(--white); }
.hero-type .ht-word{ color:var(--blue-400); text-shadow:0 0 18px rgba(63,123,255,.55); }
.hero-type .ht-cursor{
  width:3px; height:1.05em; margin-left:2px; border-radius:1px; display:inline-block;
  background:var(--blue-bright); box-shadow:0 0 8px var(--blue-bright);
  animation:htBlink 1s steps(1) infinite;
}
@keyframes htBlink{ 50%{ opacity:0; } }

/* ---------- 22. Banda CTA: formulario -> WhatsApp ------------------ */
.cta-inner{ align-items:center; gap:40px; }
@media (min-width:901px){ .cta-inner{ display:grid; grid-template-columns:1fr 1fr; } }
.cta-sub{ color:var(--text); margin-top:12px; font-size:.96rem; max-width:420px; }
.cta-form{
  display:flex; flex-direction:column; gap:12px; width:100%;
  background:linear-gradient(180deg, rgba(13,19,31,.55), rgba(7,11,19,.62));
  border:1px solid var(--border-blue); border-radius:18px; padding:22px;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.8), 0 0 42px -18px rgba(63,123,255,.38), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.cta-form .cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cta-form input, .cta-form textarea{
  background:rgba(6,10,18,.6); border:1px solid var(--border-2); border-radius:12px; padding:13px 15px;
  color:var(--white); font-family:var(--font-body); font-size:.92rem; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.cta-form input::placeholder, .cta-form textarea::placeholder{ color:var(--muted-2); }
.cta-form input:focus, .cta-form textarea:focus{ outline:none; border-color:var(--blue-bright); box-shadow:0 0 0 3px rgba(63,123,255,.16); background:rgba(6,10,18,.85); }
.cta-form textarea{ resize:vertical; min-height:58px; line-height:1.4; }
.cta-send{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg,#29d366,#1faa53); color:#fff; border:none; border-radius:12px;
  padding:14px 20px; font-family:var(--font-body); font-weight:700; font-size:.9rem; letter-spacing:.02em; cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(37,211,102,.5); transition:filter .2s, box-shadow .25s, transform .1s;
}
.cta-send svg{ width:20px; height:20px; }
.cta-send:hover{ filter:brightness(1.06); box-shadow:0 16px 38px -10px rgba(37,211,102,.65); }
.cta-send:active{ transform:translateY(1px); }
@media (max-width:900px){ .cta-form .cf-row{ grid-template-columns:1fr; } }

/* ---------- 23. Tiles de imagen/logo: menos blanco, con azulito ---- */
/* Los recuadros blancos (fotos de producto + logos de pago) se veían muy
   "blanco y negro" contra el tema oscuro -> tile azul claro + borde azul. */
.acard-img, .shop-phones .pcard-visual, .ba-half .ba-media, .prod-media, .pay-logo{
  background:linear-gradient(160deg, #e3ecfb, #c9d9f1) !important;
  border:1px solid rgba(63,123,255,.32) !important;
  box-shadow:inset 0 0 22px -8px rgba(63,123,255,.35);
}

/* ---------- 24. Stats centradas dentro del panel/banda ------------- */
.stats .stat{ justify-content:center; }
/* El recuadro quedaba pegado arriba de su banda oscura (padding solo abajo);
   se reparte el padding para centrarlo verticalmente entre arriba y abajo. */
.stats-wrap{ padding-top:calc(var(--section-py)/2); padding-bottom:calc(var(--section-py)/2); }

/* ---------- 25. Botón "Agregar al carrito" en accesorios del home -- */
.acard-add{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:var(--font-body); font-size:.82rem; font-weight:700; letter-spacing:.02em; color:#fff;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-bright));
  border:0; border-radius:var(--radius-sm); padding:11px 14px; cursor:pointer;
  transition:filter .18s, transform .1s, box-shadow .2s;
}
.acard-add svg{ width:17px; height:17px; }
.acard-add:hover{ filter:brightness(1.08); box-shadow:0 10px 26px -12px var(--blue); transform:translateY(-1px); }
.acard-add:active{ transform:translateY(1px); }
.acard-add.added{ background:linear-gradient(135deg,#17a34a,#22c55e); }
.acard-add.warn{ background:linear-gradient(135deg,#b9791f,#e0a63a); box-shadow:none; }

/* ---------- 26. FAQ: emblema flotante — sin panel/fondo ni delineado -- */
/* El "?" HUD queda suelto sobre el fondo global de la sección. */
.faq-visual{ background:none !important; border:0 !important; box-shadow:none !important; overflow:visible; }
.faq-visual::before{ display:none !important; }   /* textura hexagonal del fondo */
.faq-visual .faq-c{ display:none !important; }     /* esquinas HUD (delineado alrededor) */

/* ---------- 16. Accesibilidad / rendimiento ------------------------ */
@media (prefers-reduced-motion:reduce){
  body::before{ animation:none; }
  .hero-photo{ animation:none; }
  .reveal{ filter:none; }
}

/* ==========================================================================
   17. TÍTULOS DE SECCIÓN — efecto holográfico (a pedido del cliente)
   Texto platino tipo cromo con un barrido de luz cian/azul que lo recorre en
   bucle + un glow que "respira". Va sobre el <i> (el texto real tras el wrap
   t-rise de enhance.js). Encaja con la paleta (platino + acento cian/azul).
   ========================================================================== */
.section-title span, .section-title span > i, .faq-visual h3{
  background:linear-gradient(100deg,
    #ffffff 0%, #ffffff 26%,
    #6f9dff 42%, #2f6bff 50%, #6f9dff 58%,
    #ffffff 74%, #ffffff 100%);
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:titleSheen 9s linear infinite;
}
.section-title, .faq-visual h3{ will-change:filter; animation:titleGlow 9s ease-in-out infinite; }
@keyframes titleSheen{ from{ background-position:200% center; } to{ background-position:-60% center; } }
@keyframes titleGlow{
  0%,100%{ filter:drop-shadow(0 0 7px rgba(63,123,255,.12)); }
  50%{ filter:drop-shadow(0 0 20px rgba(47,107,255,.28)); }
}
@media (prefers-reduced-motion:reduce){
  .section-title span > i, .faq-visual h3{ animation:none; }
  .section-title, .faq-visual h3{ animation:none; filter:none; }
}