/* ==========================================================================
   HALITEL — orden.css
   Mismo recorrido que moviltechroma (secciones nuevas: promo y garantía) +
   capa de interacción. Todo en la paleta dark-tech de Halitel.
   ========================================================================== */

/* ============================================================ PROMO BAND == */
.promo-band{ padding:34px 0 0; position:relative; }
.promo-inner{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.05fr .95fr .7fr .9fr; align-items:center; gap:26px;
  padding:30px 34px; border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(47,134,255,.22), transparent 58%),
    linear-gradient(120deg, #0b1730 0%, #081120 52%, #060c18 100%);
  border:1px solid var(--border-blue);
  box-shadow:0 26px 60px rgba(0,0,0,.5), inset 0 0 60px rgba(31,120,255,.10);
}
.promo-inner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(90deg, rgba(47,134,255,.10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(47,134,255,.07) 0 1px, transparent 1px 46px);
  mask-image:linear-gradient(100deg, #000 10%, transparent 62%);
  -webkit-mask-image:linear-gradient(100deg, #000 10%, transparent 62%);
}
.promo-inner > *{ position:relative; z-index:2; }

.promo-copy .eyebrow{ margin:0 0 8px; }
.promo-title{
  font-family:var(--font-display); font-weight:800; letter-spacing:.01em;
  font-size:clamp(22px,2.5vw,32px); line-height:1.05; color:var(--white); margin:0 0 10px;
  text-transform:uppercase;
}
.promo-title span{ color:var(--blue-bright); text-shadow:0 0 24px var(--glow); }
.promo-fine{ margin:0; font-size:13px; line-height:1.6; color:var(--muted); max-width:34ch; }

.promo-off{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(20px,2.2vw,27px); line-height:1; color:var(--white); margin:0 0 8px;
}
.promo-off b{ color:var(--blue-bright); text-shadow:0 0 26px var(--glow); }
.promo-sub{ margin:0; font-size:12.5px; color:var(--text); }

.promo-code{
  text-align:center; padding:14px 18px; border-radius:var(--radius);
  border:1px dashed rgba(79,155,255,.55); background:rgba(8,16,32,.6);
}
.promo-code-label{ margin:0 0 6px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.promo-code-value{
  margin:0; font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:.06em;
  color:var(--white); text-shadow:0 0 22px var(--glow);
}
.promo-art{ position:relative; min-height:150px; }
.promo-art img{ width:100%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }

/* ============================================================== GARANTÍA == */
.warranty .warranty-intro{
  margin:10px 0 26px; font-size:14px; line-height:1.7; color:var(--muted); max-width:62ch;
}
.warranty-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
}
.warranty-card{
  position:relative; overflow:hidden;
  padding:24px 20px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg, var(--card) 0%, var(--card-3) 100%);
  border:1px solid var(--border); box-shadow:var(--shadow-card);
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.warranty-card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--blue), var(--blue-bright));
  transition:width .5s ease;
}
.warranty-card:hover{ transform:translateY(-6px); border-color:var(--border-blue); box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 34px var(--glow-soft); }
.warranty-card:hover::after{ width:100%; }
.warranty-ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px; margin-bottom:14px;
  background:linear-gradient(140deg, rgba(31,120,255,.22), rgba(31,120,255,.06));
  border:1px solid rgba(79,155,255,.28); color:var(--blue-bright);
  transition:transform .35s ease;
}
.warranty-ico svg{ width:22px; height:22px; }
.warranty-card:hover .warranty-ico{ transform:scale(1.1) rotate(-6deg); }
.warranty-card h3{
  margin:0 0 8px; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:15px; letter-spacing:.02em; color:var(--white);
}
.warranty-card p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--muted); }

.warranty-note{
  margin-top:22px; padding:18px 22px; border-radius:var(--radius);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:rgba(10,18,34,.7); border:1px solid var(--border-2);
}
.warranty-note svg{ width:26px; height:26px; color:var(--blue-bright); flex:none; }
.warranty-note p{ margin:0; flex:1 1 300px; font-size:13px; line-height:1.6; color:var(--text); }

/* ================================================================== FX ==== */
.fxBar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:400; pointer-events:none;
  background:linear-gradient(90deg, var(--blue), var(--blue-bright) 60%, #7cc4ff);
  box-shadow:0 0 16px rgba(47,134,255,.7);
  transition:width .08s linear;
}

.fxSpot{
  position:fixed; top:0; left:0; width:460px; height:460px; margin:-230px 0 0 -230px;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(circle, rgba(47,134,255,.16), rgba(47,134,255,.05) 45%, transparent 70%);
}
.fxSpot.is-on{ opacity:1; }

.fx-rv{ opacity:0; will-change:transform,opacity; }
.fx-rv[data-fx="up"]{ transform:translateY(30px); }
.fx-rv[data-fx="left"]{ transform:translateX(-38px); }
.fx-rv[data-fx="right"]{ transform:translateX(38px); }
.fx-rv[data-fx="zoom"]{ transform:scale(.9); }
.fx-rv[data-fx="flip"]{ transform:perspective(900px) rotateX(14deg) translateY(24px); }
.fx-rv.fx-in{
  opacity:1; transform:none;
  transition:opacity .75s cubic-bezier(.16,.84,.44,1), transform .75s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--fx-d,0ms);
}

/* ripple en botones */
.fxRipple{
  position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background:rgba(140,196,255,.45); transform:scale(0);
  animation:fxRip .65s ease-out forwards;
}
@keyframes fxRip{ to{ transform:scale(3.4); opacity:0; } }

/* brillo que sigue el mouse dentro de las cards */
.fx-card{ position:relative; }
.fx-card > .fxGlow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  opacity:0; transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--fx-mx,50%) var(--fx-my,50%), rgba(47,134,255,.16), transparent 62%);
}
.fx-card:hover > .fxGlow{ opacity:1; }

/* imágenes */
.fxImg{ overflow:hidden; }
.fxImg img{ transition:transform .7s cubic-bezier(.16,.84,.44,1), filter .5s ease; }
.fxImg:hover img{ transform:scale(1.06); filter:saturate(1.15) brightness(1.06); }
.fxZoom{ cursor:zoom-in; }

.fxLb{
  position:fixed; inset:0; z-index:500; display:grid; place-items:center;
  background:rgba(4,6,11,.9); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .32s ease;
}
.fxLb.is-on{ opacity:1; pointer-events:auto; }
.fxLb img{
  max-width:92vw; max-height:86vh; border-radius:16px; transform:scale(.94);
  border:1px solid var(--border-blue); box-shadow:0 30px 90px rgba(0,0,0,.8), 0 0 60px var(--glow-soft);
  transition:transform .38s cubic-bezier(.16,.84,.44,1);
}
.fxLb.is-on img{ transform:scale(1); }
.fxLb__x{
  position:absolute; top:22px; right:24px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-blue); background:rgba(13,19,31,.9); color:var(--white);
  font-size:22px; line-height:1; cursor:pointer; transition:transform .25s ease;
}
.fxLb__x:hover{ transform:rotate(90deg) scale(1.08); }

/* header que se esconde al bajar */
.header{ transition:transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease; }
.header.fx-hide{ transform:translateY(-130%); }

/* botón flotante de WhatsApp que llama la atención */
.float-wa.fx-call{ animation:fxCall 1.1s cubic-bezier(.16,.84,.44,1); }
@keyframes fxCall{
  0%,100%{ transform:scale(1) rotate(0); }
  20%{ transform:scale(1.14) rotate(-9deg); }
  45%{ transform:scale(1.09) rotate(8deg); }
  70%{ transform:scale(1.11) rotate(-5deg); }
}

/* detalles con vida */
.svc-card,.why-item,.testi-card,.ba-card,.acc-card,.shop-card{
  transition:transform .35s cubic-bezier(.16,.84,.44,1), border-color .35s ease, box-shadow .35s ease;
}
.faq-item{ transition:border-color .3s ease, box-shadow .3s ease; }
.faq-item.open{ box-shadow:0 0 34px var(--glow-soft); }
.contact-list a:hover{ transform:translateX(5px); }
.contact-list a{ transition:transform .28s ease; }

@media (max-width:1024px){
  .promo-inner{ grid-template-columns:1fr 1fr; gap:22px; }
  .promo-art{ grid-column:1 / -1; }
  .warranty-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .promo-inner{ grid-template-columns:1fr; padding:24px 20px; text-align:left; }
  .warranty-grid{ grid-template-columns:1fr; }
  .fxSpot{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .fx-rv{ opacity:1 !important; transform:none !important; }
  .fxSpot{ display:none; }
  .float-wa.fx-call{ animation:none; }
}