/* ==========================================================================
   ChacoNET · Secciones y páginas
   ========================================================================== */

/* ---------- Banda de anuncios (estilo "ribbon") ---------- */
.ribbon{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  padding:13px var(--gutter); text-align:center;
  background:linear-gradient(90deg,rgba(122,91,255,.14),rgba(0,212,255,.12));
  border-bottom:1px solid var(--line);
  font-size:.86rem; color:var(--text-2);
}
.ribbon b{ color:var(--text); }

/* ---------- Escaparate de canales ---------- */
.chan-tile{
  position:relative; flex:0 0 auto;
  width:172px; height:98px; border-radius:var(--r-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:linear-gradient(160deg,var(--card-hi),var(--card));
  border:1px solid var(--line);
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.chan-tile:hover{ transform:translateY(-4px) scale(1.03); border-color:var(--line-2); }
.chan-tile__logo{
  position:relative; width:96px; height:40px; display:grid; place-items:center; border-radius:8px;
  font-family:var(--font-display); font-weight:800; font-size:.86rem; letter-spacing:-.02em;
  color:#fff; text-align:center; line-height:1; padding:0 6px;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.chan-tile__num{ font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--text-4); }

/* ---------- Televisor (mockup 100% CSS/SVG) ---------- */
.tv{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg);
  background:linear-gradient(150deg,#171232,#08071A);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-lg),0 0 0 10px rgba(255,255,255,.028);
  overflow:hidden;
}
.tv__screen{ position:absolute; inset:0; padding:clamp(12px,2.2vw,26px); display:flex; flex-direction:column; gap:clamp(10px,1.6vw,18px); }
.tv__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tv__hero{
  flex:1; border-radius:var(--r-md); position:relative; overflow:hidden;
  background:linear-gradient(120deg,rgba(122,91,255,.4),rgba(0,212,255,.24));
  display:grid; place-items:center;
}
.tv__hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-100%); animation:tv-sheen 5.5s var(--e-out) infinite;
}
@keyframes tv-sheen{ 0%,60%{ transform:translateX(-100%); } 100%{ transform:translateX(100%); } }
.tv__play{
  width:clamp(40px,6vw,64px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.92); color:#1A0F52;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.6); position:relative; z-index:1;
}
.tv__play svg{ width:38%; height:38%; margin-left:8%; }
.tv__row{ display:flex; gap:clamp(8px,1.2vw,14px); }
.tv__cell{
  flex:1; aspect-ratio:16/10; border-radius:10px;
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.04));
  border:1px solid var(--line);
}
.tv__cell--a{ background:linear-gradient(150deg,rgba(255,201,74,.3),rgba(255,201,74,.08)); }
.tv__cell--b{ background:linear-gradient(150deg,rgba(0,212,255,.28),rgba(0,212,255,.06)); }
.tv__cell--c{ background:linear-gradient(150deg,rgba(122,91,255,.32),rgba(122,91,255,.08)); }

/* ---------- Familias de producto (portada) ---------- */
.family{
  position:relative; display:flex; flex-direction:column; gap:var(--sp-4);
  padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg);
  background:linear-gradient(170deg,var(--card-hi),var(--card) 46%,transparent);
  border:1px solid var(--line); overflow:hidden;
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.family:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:var(--sh-lg); }
.family--featured{
  border-color:rgba(122,91,255,.5);
  box-shadow:0 0 0 1px rgba(122,91,255,.22),0 30px 70px -34px rgba(122,91,255,.7);
}
.family__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; }
.family__price{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  padding-block:var(--sp-4); border-block:1px solid var(--line);
}
.family__price b{
  font-family:var(--font-display); font-size:clamp(1.4rem,2.2vw,1.7rem);
  font-weight:800; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
.family__list{ display:flex; flex-direction:column; gap:9px; font-size:.875rem; color:var(--text-2); flex:1; }
.family__list li{ display:flex; gap:9px; }
.family__list svg{ width:15px; height:15px; flex:0 0 auto; margin-top:4px; color:var(--cyan-300); }
.family > .btn{ align-self:stretch; }

/* ---------- Rejilla de servicios ---------- */
.svc{
  position:relative; display:flex; flex-direction:column; gap:var(--sp-4);
  padding:clamp(22px,2.4vw,32px); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line); overflow:hidden;
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}
.svc:hover{ transform:translateY(-5px); border-color:var(--line-2); background:var(--card-hi); }
.svc__icon{
  width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(122,91,255,.3),rgba(0,212,255,.13));
  border:1px solid var(--line-2); color:var(--brand-200);
}
.svc__icon svg{ width:24px; height:24px; }
.svc__price{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; color:var(--gold-300); }
.svc__list{ display:flex; flex-direction:column; gap:9px; font-size:.875rem; color:var(--text-2); }
.svc__list li{ display:flex; gap:9px; }
.svc__list svg{ width:15px; height:15px; flex:0 0 auto; margin-top:4px; color:var(--cyan-300); }

/* ---------- Cobertura ---------- */
.map{
  position:relative; width:100%; aspect-ratio:16/11; border-radius:var(--r-lg);
  background:radial-gradient(70% 70% at 50% 45%,rgba(58,33,153,.42),transparent 72%),var(--bg-2);
  border:1px solid var(--line); overflow:hidden;
}
.map__dot{
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--cyan-400); box-shadow:0 0 0 0 rgba(0,212,255,.6);
  animation:pulse-dot 2.6s var(--e-out) infinite;
}
.map__dot--main{ width:17px; height:17px; background:var(--gold-400); box-shadow:0 0 0 0 rgba(255,201,74,.6); }
.map__label{
  position:absolute; translate:-50% 0; padding:5px 11px; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--line-2); font-size:var(--fs-2xs); font-weight:600;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); white-space:nowrap;
}
.map__svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

/* ---------- Pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:var(--sp-5); counter-reset:s; }
.step{ position:relative; padding-top:var(--sp-6); }
.step::before{
  counter-increment:s; content:counter(s,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--font-display); font-size:.86rem; font-weight:800; letter-spacing:.06em;
  color:transparent; background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
}
.step::after{
  content:""; position:absolute; top:9px; left:34px; right:0; height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent);
}

/* ---------- Formas de pago ---------- */
.pay{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
  transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
.pay:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.pay__num{
  font-family:var(--font-mono); font-size:1.22rem; font-weight:600; letter-spacing:.03em;
  color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.copy{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  border:1px solid var(--line); color:var(--text-3);
  transition:color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.copy:hover{ color:var(--text); border-color:var(--line-2); background:var(--card-hi); }
.copy.is-done{ color:#7BF0B8; border-color:rgba(60,220,140,.4); }
.copy svg{ width:15px; height:15px; }

/* ---------- Comparador ---------- */
.compare{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.compare__col{ padding:var(--sp-5); background:var(--card); display:flex; flex-direction:column; gap:var(--sp-4); }
.compare__col + .compare__col{ border-left:1px solid var(--line); }
.compare__col--featured{ background:linear-gradient(170deg,rgba(122,91,255,.16),rgba(122,91,255,.03)); }
@media (max-width:640px){ .compare__col + .compare__col{ border-left:0; border-top:1px solid var(--line); } }
.compare__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:10px; border-bottom:1px solid var(--line); font-size:.875rem; }
.compare__row:last-child{ border-bottom:0; }

/* ---------- Testimonios ---------- */
.quote{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:var(--sp-5); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
}
.quote__text{ font-size:.98rem; line-height:1.66; color:var(--text-2); }
.quote__who{ display:flex; align-items:center; gap:12px; padding-top:var(--sp-3); border-top:1px solid var(--line); }
.quote__ava{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:#fff;
  background:var(--grad-brand);
}
.quote__stars{ display:flex; gap:2px; color:var(--gold-400); }
.quote__stars svg{ width:14px; height:14px; }

/* ---------- Banda CTA ---------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:clamp(38px,6vw,80px) clamp(24px,5vw,64px);
  background:linear-gradient(140deg,rgba(122,91,255,.28),rgba(0,212,255,.14) 62%,rgba(255,201,74,.12));
  border:1px solid var(--line-2);
  text-align:center;
}
.cta-band::before{
  content:""; position:absolute; inset:-40% -10% auto;
  height:120%; background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.12),transparent 40%);
  animation:spin 22s linear infinite; pointer-events:none;
}
.cta-band > *{ position:relative; }

/* ---------- Cinta de confianza ---------- */
.trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(20px,4vw,56px); opacity:.72; }
.trust span{
  font-family:var(--font-display); font-size:clamp(.9rem,1.4vw,1.06rem); font-weight:700;
  letter-spacing:-.02em; color:var(--text-2); white-space:nowrap;
}

/* ---------- Bloque de contacto ---------- */
.contact-card{
  display:flex; flex-direction:column; gap:var(--sp-4);
  padding:clamp(22px,2.6vw,34px); border-radius:var(--r-lg);
  background:var(--card); border:1px solid var(--line);
}
.contact-card a{ display:flex; align-items:center; gap:13px; }
.contact-card a:hover{ color:var(--cyan-300); }
.contact-card__icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--card-hi); border:1px solid var(--line); color:var(--cyan-300);
}
.contact-card__icon svg{ width:19px; height:19px; }

/* En héroes de dos columnas el titular necesita un cuerpo menor para no
   desbordar la columna con palabras largas ("complicaciones", "velocidad"). */
.page-hero .grid--2 .display-1{ font-size:clamp(2.05rem,4.1vw,3.9rem); }
.page-hero .grid--2 .lead{ font-size:clamp(1rem,1.25vw,1.15rem); }
@media (max-width:1100px){
  .page-hero .grid--2 .display-1{ font-size:clamp(2rem,6.4vw,3.2rem); }
}

/* ---------- Varios ---------- */
/* El velocímetro anclado se acorta en pantallas chicas */
@media (max-width:760px){ .pin-track{ height:165vh; } }

.hero--compact{ min-height:auto; padding-top:calc(var(--header-h) + clamp(64px,10vw,130px)); padding-bottom:clamp(40px,7vw,90px); }
.hl{ color:var(--cyan-300); }
.hl-gold{ color:var(--gold-300); }
.nowrap{ white-space:nowrap; }
.mw-60{ max-width:60ch; }
.mw-46{ max-width:46ch; }
.mw-70{ max-width:70ch; }
.aspect-tv{ aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; }
.fill{ position:absolute; inset:0; }

.timeline{ display:flex; flex-direction:column; gap:0; }
.tl-item{ position:relative; padding:0 0 var(--sp-6) var(--sp-7); border-left:1px solid var(--line); }
.tl-item:last-child{ border-left-color:transparent; padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-5px; top:5px; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:2px solid var(--brand-400);
}
.tl-item--gold::before{ border-color:var(--gold-400); }