/* ==========================================================================
   HALITEL — enhance.css
   Intro splash + audio + pulido (Emil Kowalski) + secciones nuevas.
   Se carga después de styles.css: reutiliza sus tokens (--blue, etc).
   ========================================================================== */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-io: cubic-bezier(.4,0,.2,1);
}

/* Bloquea scroll mientras el splash está activo */
html.intro-lock, html.intro-lock body{ overflow:hidden; height:100%; }

/* ==========================================================================
   INTRO SPLASH
   ========================================================================== */
#intro{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  background:#04060b;
  opacity:1; transition:opacity .9s var(--ease-io), visibility .9s;
}
#intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#intro .intro-bg{
  position:absolute; inset:0;
  background-image:url("../assets/img/bogota-night.jpg");
  background-size:cover; background-position:center 60%;
  transform:scale(1.12); filter:brightness(.9) saturate(1.25) contrast(1.05);
  animation:introZoom 9s ease-out forwards;
}
#intro .intro-grade{ /* grade oscuro-azul + viñeta */
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(22,103,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(4,6,11,.28), rgba(4,6,11,.10) 42%, rgba(4,6,11,.74)),
    radial-gradient(150% 130% at 50% 44%, transparent 60%, rgba(2,4,8,.7));
}
#intro .intro-scan{ /* líneas tech sutiles */
  position:absolute; inset:0; opacity:.5; mix-blend-mode:screen;
  background-image:linear-gradient(rgba(47,134,255,.06) 1px, transparent 1px);
  background-size:100% 4px;
  animation:introScan 8s linear infinite;
}
@keyframes introZoom{ to{ transform:scale(1); } }
@keyframes introScan{ to{ background-position:0 400px; } }

#intro .intro-inner{ position:relative; z-index:3; padding:24px; }
#intro .intro-logo{ width:120px; height:120px; margin:0 auto 22px; filter:drop-shadow(0 0 26px rgba(47,134,255,.6)); opacity:0; transform:translateY(14px) scale(.9); animation:introPop .9s var(--ease-spring) .15s forwards; }
#intro .intro-logo svg{ width:100%; height:100%; }
#intro .intro-name{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,7vw,4rem); color:#fff; letter-spacing:.06em; text-transform:uppercase; line-height:1; }
#intro .intro-name .ch{ display:inline-block; opacity:0; transform:translateY(20px); animation:introChar .6s var(--ease-out-expo) forwards; }
#intro .intro-sub{ color:var(--blue-bright); font-family:var(--font-body); font-weight:700; letter-spacing:.34em; text-transform:uppercase; font-size:.7rem; margin-top:14px; opacity:0; animation:introFade .8s ease 1.1s forwards; }
#intro .intro-tag{ color:#aeb9c9; font-size:.85rem; margin-top:16px; opacity:0; animation:introFade .8s ease 1.3s forwards; }

#intro .intro-bar{ width:min(280px,70vw); height:3px; border-radius:3px; background:rgba(255,255,255,.12); margin:26px auto 0; overflow:hidden; opacity:0; animation:introFade .5s ease 1.1s forwards; }
#intro .intro-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--blue-bright)); box-shadow:0 0 12px var(--glow); animation:introLoad 2.4s var(--ease-io) 1.2s forwards; }

#intro .intro-enter{
  margin-top:30px; opacity:0; transform:translateY(10px);
  animation:introFade .6s ease 2.4s forwards;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 30px; border-radius:12px; border:1px solid var(--border-blue);
  background:linear-gradient(180deg,var(--blue-bright),var(--blue)); color:#fff;
  font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
  cursor:pointer; box-shadow:0 10px 30px rgba(22,103,255,.4);
  transition:transform .2s var(--ease-spring), box-shadow .25s;
}
#intro .intro-enter:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 16px 40px rgba(22,103,255,.6); }
#intro .intro-enter:active{ transform:translateY(0) scale(.98); }
#intro .intro-credit{ position:absolute; bottom:12px; right:14px; z-index:3; font-size:.6rem; color:rgba(180,190,205,.5); letter-spacing:.04em; }
#intro .intro-credit a{ color:inherit; text-decoration:underline; }

@keyframes introPop{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes introChar{ to{ opacity:1; transform:translateY(0); } }
@keyframes introFade{ to{ opacity:1; transform:translateY(0); } }
@keyframes introLoad{ to{ width:100%; } }

/* ==========================================================================
   BOTÓN DE AUDIO (música tech)
   ========================================================================== */
#audiobtn{
  position:fixed; left:20px; bottom:20px; z-index:120;
  width:52px; height:52px; border-radius:50%;
  background:rgba(8,12,20,.8); border:1px solid var(--border-blue);
  backdrop-filter:blur(8px); display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.5); color:var(--blue-bright);
  transition:transform .2s var(--ease-spring), box-shadow .25s, border-color .2s;
}
#audiobtn:hover{ transform:scale(1.08); box-shadow:0 10px 30px rgba(22,103,255,.4); border-color:var(--blue); }
#audiobtn:active{ transform:scale(.94); }
#audiobtn .eq{ display:flex; align-items:flex-end; gap:3px; height:20px; }
#audiobtn .eq i{ width:3px; height:6px; background:currentColor; border-radius:2px; }
#audiobtn.playing .eq i{ animation:eq .9s ease-in-out infinite; }
#audiobtn.playing .eq i:nth-child(2){ animation-delay:.15s; }
#audiobtn.playing .eq i:nth-child(3){ animation-delay:.3s; }
#audiobtn.playing .eq i:nth-child(4){ animation-delay:.45s; }
#audiobtn .mutedslash{ position:absolute; width:30px; height:2px; background:#8892a3; transform:rotate(-45deg); border-radius:2px; display:none; }
#audiobtn.muted .mutedslash{ display:block; }
#audiobtn.muted{ color:#8892a3; }
@keyframes eq{ 0%,100%{ height:5px; } 50%{ height:18px; } }

/* ==========================================================================
   PULIDO EMIL KOWALSKI — micro-interacciones
   ========================================================================== */
/* Botones: press físico + foco accesible */
.btn{ transition:transform .18s var(--ease-spring), box-shadow .25s var(--ease-io), background .25s; will-change:transform; }
.btn:active{ transform:translateY(0) scale(.97); }
a:focus-visible, button:focus-visible, .btn:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:3px; border-radius:8px; }

/* Sheen (barrido de luz) en cards al hover */
.svc-card, .testi-card{ position:relative; }
.svc-card::before, .testi-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(120,190,255,.10) 45%, transparent 60%);
  transform:translateX(-120%); transition:transform .8s var(--ease-io); z-index:1;
}
.svc-card:hover::before, .testi-card:hover::before{ transform:translateX(120%); }
.svc-card > *, .testi-card > *{ position:relative; z-index:2; }

/* Tilt 3D (lo controla enhance.js con variables) */
.tilt{ transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition:transform .25s var(--ease-io); transform-style:preserve-3d; }

/* Reveal de títulos: cada línea sube con clip (line-rise) */
.t-rise span{ display:block; overflow:hidden; }
.t-rise span > i{ display:block; font-style:inherit; transform:translateY(115%); opacity:0; transition:transform .8s var(--ease-out-expo), opacity .8s var(--ease-io); }
.t-rise.in span > i{ transform:translateY(0); opacity:1; }
.t-rise span:nth-child(2) > i{ transition-delay:.09s; }
.t-rise span:nth-child(3) > i{ transition-delay:.18s; }
.t-rise span:nth-child(4) > i{ transition-delay:.27s; }
.hero-title.t-rise span > i{ transition-duration:.9s; }

/* Variantes de reveal */
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .7s var(--ease-io), transform .7s var(--ease-out-expo); }
.reveal-scale.in{ opacity:1; transform:none; }

/* Gradiente animado (cambios de color, dentro de la gama azul) */
@keyframes hueShift{ 0%,100%{ filter:hue-rotate(0deg); } 50%{ filter:hue-rotate(-18deg); } }
.eyebrow{ background:linear-gradient(90deg,var(--blue-bright),#63b3ff,var(--blue-bright)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:eyebrowFlow 6s linear infinite; }
@keyframes eyebrowFlow{ to{ background-position:200% center; } }

/* Cursor-glow para links de nav (spring underline ya existe) */

/* ==========================================================================
   SECCIÓN: banda de confianza (bajo el hero)
   ========================================================================== */
.trust-band{ background:rgba(8,12,22,.55); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:26px 0; }
.trust-item{ display:flex; align-items:center; gap:16px; padding:8px 12px; }
.trust-item + .trust-item{ border-left:1px solid var(--border); }
.trust-ico{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--blue-bright); background:rgba(22,103,255,.1); border:1px solid var(--border-blue); }
.trust-ico svg{ width:22px; height:22px; }
.trust-item h4{ font-family:var(--font-body); font-weight:700; font-size:.95rem; color:#fff; margin:0 0 2px; }
.trust-item p{ margin:0; color:var(--muted); font-size:.8rem; }

/* ==========================================================================
   SECCIÓN: Cómo trabajamos (proceso 3 pasos)
   ========================================================================== */
.process{ background:rgba(6,9,18,.62); }
.process-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; position:relative; }
.process-grid::before{ content:""; position:absolute; top:38px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,transparent,var(--border-blue),var(--border-blue),transparent); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; padding:0 10px; }
.step-num{ width:76px; height:76px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.8rem; color:#fff; background:linear-gradient(180deg,#0c1830,#070d1a); border:1px solid var(--border-blue); box-shadow:0 0 0 6px rgba(6,9,18,.9), 0 0 26px var(--glow-soft); position:relative; }
.step-num .sico{ position:absolute; right:-4px; bottom:-4px; width:30px; height:30px; border-radius:50%; background:linear-gradient(180deg,var(--blue-bright),var(--blue)); display:grid; place-items:center; color:#fff; box-shadow:0 4px 12px rgba(22,103,255,.5); }
.step-num .sico svg{ width:15px; height:15px; }
.step h3{ font-size:1.05rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
.step p{ color:var(--muted); font-size:.88rem; margin:0; }

/* ==========================================================================
   SECCIÓN: Marcas que reparamos (marquee)
   ========================================================================== */
.brands{ background:rgba(8,12,22,.5); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:30px 0; }
.brands .eyebrow{ text-align:center; margin-bottom:20px; }
.marquee{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track{ display:flex; gap:56px; width:max-content; animation:marquee 26s linear infinite; }
.brands:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:.04em; color:#7f8ba0; white-space:nowrap; transition:color .3s; }
.marquee-track span:hover{ color:var(--blue-bright); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   SECCIÓN: banda CTA WhatsApp
   ========================================================================== */
.cta-band{ position:relative; overflow:hidden; padding:56px 0; background:linear-gradient(120deg,#071638,#0a2b6b 45%,#071638); border-top:1px solid var(--border-blue); border-bottom:1px solid var(--border-blue); }
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.5; background:radial-gradient(60% 120% at 20% 30%, rgba(47,134,255,.35), transparent 60%), radial-gradient(50% 120% at 85% 70%, rgba(22,103,255,.3), transparent 60%); animation:hueShift 8s ease-in-out infinite; }
.cta-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cta-inner h2{ font-size:clamp(1.5rem,3vw,2.1rem); text-transform:uppercase; color:#fff; line-height:1.05; max-width:640px; }
.cta-inner h2 span{ color:#8dc0ff; }
.cta-inner .btn{ font-size:.9rem; padding:16px 30px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .trust-grid{ grid-template-columns:1fr; gap:0; }
  .trust-item + .trust-item{ border-left:none; border-top:1px solid var(--border); }
  .trust-item{ padding:16px 12px; }
  .process-grid{ grid-template-columns:1fr; gap:34px; }
  .process-grid::before{ display:none; }
  .cta-inner{ flex-direction:column; text-align:center; }
  #audiobtn{ width:46px; height:46px; left:14px; bottom:14px; }
}
@media (prefers-reduced-motion:reduce){
  #intro .intro-bg{ animation:none; transform:scale(1); }
  #intro .intro-scan{ animation:none; }
  .marquee-track{ animation:none; }
  .eyebrow{ animation:none; }
  #audiobtn.playing .eq i{ animation:none; }
}

/* intro-textshadow-fix */
#intro .intro-name{ text-shadow:0 3px 26px rgba(0,0,0,.72); }
#intro .intro-sub{ text-shadow:0 2px 14px rgba(0,0,0,.8); }
#intro .intro-tag{ text-shadow:0 2px 14px rgba(0,0,0,.85); }

/* ==========================================================================
   HALITEL — Secciones Teléfonos y Accesorios (shop.js)
   ========================================================================== */
.shop-phones{ background:rgba(6,9,18,.66); }
.shop-acc{ background:rgba(8,12,22,.60); }
.shop-intro{ color:var(--muted); max-width:540px; margin-top:14px; font-size:.95rem; }
.shop-grid{ display:grid; gap:18px; margin-top:40px; }
.phones-grid{ grid-template-columns:repeat(4,1fr); }
.acc-grid{ grid-template-columns:repeat(3,1fr); }

.pcard, .acard{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:relative; overflow:hidden;
  transition:transform .28s var(--ease-io), border-color .28s, box-shadow .3s, background .3s; }
.pcard:hover, .acard:hover{ transform:translateY(-6px); border-color:var(--border-blue); background:var(--card-2); box-shadow:0 20px 46px rgba(22,103,255,.16); }
.pcard::before, .acard::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(115deg,transparent 30%,rgba(120,190,255,.10) 45%,transparent 60%); transform:translateX(-120%); transition:transform .8s var(--ease-io); }
.pcard:hover::before, .acard:hover::before{ transform:translateX(120%); }
.pcard > *, .acard > *{ position:relative; z-index:2; }

.pcard-visual{ position:relative; aspect-ratio:4/3; border-radius:12px; margin-bottom:18px; overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 100% at 50% 20%, rgba(22,103,255,.18), transparent 60%), linear-gradient(160deg,#0b1220,#05070c); border:1px solid var(--border); }
.pcard-visual img{ width:100%; height:100%; object-fit:cover; }
.pcard-badge{ position:absolute; top:10px; left:10px; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#cfe0ff;
  background:rgba(22,103,255,.18); border:1px solid var(--border-blue); padding:4px 9px; border-radius:20px; }
.pphone{ width:74px; height:132px; border-radius:16px; background:linear-gradient(155deg,#11151d,#05070c); border:1px solid #222c3c; box-shadow:0 12px 30px rgba(0,0,0,.5); display:grid; place-items:center; }
.pphone-scr{ width:calc(100% - 12px); height:calc(100% - 12px); border-radius:10px; box-shadow:inset 0 0 20px rgba(47,134,255,.35);
  background:radial-gradient(120% 100% at 40% 25%, rgba(79,155,255,.6), transparent 55%), linear-gradient(150deg,#062056,#041233); }

.pcard h3, .acard h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
.pcard p, .acard p{ color:var(--muted); font-size:.85rem; margin:0 0 16px; min-height:38px; }

.acard-ico{ width:56px; height:56px; display:grid; place-items:center; border-radius:14px; color:var(--blue-bright); margin-bottom:18px;
  background:rgba(22,103,255,.1); border:1px solid var(--border-blue); }
.acard-ico svg{ width:26px; height:26px; }
.acard-img{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; margin-bottom:16px; }
.acard-img img{ width:100%; height:100%; object-fit:cover; }

.shop-cta{ color:var(--blue-bright); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.shop-cta svg{ width:14px; height:14px; transition:transform .25s; }
.pcard:hover .shop-cta svg, .acard:hover .shop-cta svg{ transform:translateX(4px); }

@media (max-width:1080px){ .phones-grid{ grid-template-columns:repeat(2,1fr); } .acc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .phones-grid, .acc-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   HALITEL — Barra de marcas anclada bajo el header (brandbar.js)
   ========================================================================== */
.topstick{ position:sticky; top:0; z-index:56; }
.header{ position:static; top:auto; }   /* la stickyness la maneja .topstick */

.brandbar{ background:linear-gradient(180deg,#070c17,#05080f); border-top:1px solid rgba(31,120,255,.35);
  border-bottom:1px solid rgba(31,120,255,.5); box-shadow:0 8px 22px rgba(0,0,0,.45); }
.brandbar-inner{ display:flex; align-items:stretch; height:44px; }
.brandbar-label{ flex:none; display:flex; align-items:center; padding:0 20px; white-space:nowrap; position:relative; z-index:2;
  font-family:var(--font-body); font-weight:700; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-bright); background:rgba(8,12,20,.96); border-right:1px solid var(--border-blue); }
.brandbar-view{ position:relative; flex:1 1 auto; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.brandbar-track{ display:flex; align-items:center; gap:52px; height:100%; width:max-content; white-space:nowrap; will-change:transform;
  animation:bbMarquee var(--bb-dur,30s) linear infinite; }
.brandbar-track span{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.05em; color:#8b96ab; transition:color .25s; }
.brandbar-track span:hover{ color:var(--blue-bright); }
@keyframes bbMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

@media (max-width:620px){
  .brandbar-label{ display:none; }
  .brandbar-inner{ height:40px; }
  .brandbar-track{ gap:40px; }
  .brandbar-track span{ font-size:.92rem; }
}
@media (prefers-reduced-motion:reduce){ .brandbar-track{ animation:none; } }

/* product-tiles — fotos reales de producto (fondo blanco) en tile claro ---- */
.shop-phones .pcard-visual{ background:#f4f6fa; border-color:#dfe4ec; }
.shop-phones .pcard-visual img{ object-fit:contain; padding:14px; }
.acard{ display:flex; flex-direction:column; }
.acard-img{ background:#f4f6fa; border:1px solid #dfe4ec; display:grid; place-items:center; }
.acard-img img{ object-fit:contain; padding:12px; }