:root{
  /* Dark theme */
  --bg:#0b1220;         /* fondo principal (como la pantalla de Gracias) */
  --bg-2:#121b32;       /* variante para secciones alternas */
  --card:#18233b;       /* tarjetas/boxes */
  --line:#1e2a48;       /* bordes sutiles */

  --text:#e8eefc;       /* texto principal */
  --muted:#9bb0d0;      /* texto atenuado */

  --accent:#ff7a00;     /* NARANJA: bot車n principal */
  --accent-2:#1e6fff;   /* AZUL: enlaces y secundarios */

  --green:#25D366;      /* WhatsApp */
  --msblue:#0078FF;     /* Messenger */
}

/* Reset & base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:2.2rem}
h2{font-size:1.6rem;margin-bottom:1rem}
h3{font-size:1.05rem}
p{margin:.5rem 0}
ul{padding-left:1rem}
a{color:var(--accent-2);text-decoration:none}

/* Buttons */
a.btn, .btn, .btn-lg{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.7rem 1.1rem; border-radius:.55rem; font-weight:700;
  border:1px solid transparent;
}
.btn-lg{padding:.9rem 1.3rem; font-size:1.05rem}
.btn-cta{background:var(--accent-2); font-weight:700}
.btn-wh{background:var(--green); color:#001}    /* WhatsApp green */
.btn-ms{background:var(--msblue); color:#fff}  /* Messenger blue */

a.btn:hover,.btn:hover,.btn-lg:hover{filter:brightness(1.08)}

/* Nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,#0b1220,#0f1830);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(6px);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; height:60px; gap:14px
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text)
}
.brand-logo{
  width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid var(--line)
}
.brand-text{font-weight:800}
.nav-links a{margin-left:16px; white-space:nowrap}

/* Hero */
.hero{
  padding:48px 0; border-bottom:1px solid var(--line);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(30,111,255,.28), transparent),
    radial-gradient(1200px 600px at 80% -180px, rgba(255,122,0,.18), transparent),
    var(--bg);
}
.hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center}
.bullets{margin:1rem 0; color:var(--muted)}
.hero-media .mockup{
  background:linear-gradient(135deg,#14203a,#101a30);
  border:1px solid var(--line); border-radius:12px; padding:40px; text-align:center; font-weight:700;
  color:#cfe0ff;
}
.hero-ctas{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

/* Sections */
.section{padding:48px 0; background:var(--bg); color:var(--text)}
.section.alt{background:var(--bg-2)}
.section.highlight{
  background:linear-gradient(180deg, rgba(255,122,0,.06), rgba(30,111,255,.06));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)
}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px;
  color:var(--text);
}

/* Pricing */
.card-price .price{color:var(--accent); font-weight:800; font-size:1.4rem}
.card-price .mini-list{margin:.5rem 0 1rem 1rem; color:var(--muted)}
.card-price.featured{border:2px solid var(--accent); box-shadow:0 10px 28px rgba(0,0,0,.18)}

/* Promo grid */
.promo{
  display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center
}
.promo-cta{display:flex; flex-direction:column; gap:6px}
.promo-img{
  width:100%; height:auto; border-radius:10px; border:1px solid var(--line); background:#0f1730
}

/* Contact */
.contact-buttons{display:flex; gap:12px; margin:.5rem 0 1rem 0}

/* Form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.form input,.form select,.form textarea{
  width:100%; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#0f1730; color:var(--text)
}
.form input::placeholder,.form textarea::placeholder{color:#7e92b8}
.form textarea{grid-column:1/-1}
.form button{grid-column:1/-1}

/* Footer */
.footer{border-top:1px solid var(--line); padding:24px 0; margin-top:24px; background:var(--bg-2); color:var(--muted)}
.footer-inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}

/* Floating Action Buttons (chat) */
.fab{
  position:fixed; right:16px; width:54px; height:54px; border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.28); z-index:60; border:1px solid rgba(255,255,255,.12)
}
.fab-wh{
  bottom:84px; background:var(--green) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M20.52 3.48A11.8 11.8 0 0 0 12.01 0C5.38 0 .02 5.36.02 11.99c0 2.11.55 4.18 1.59 5.99L0 24l6.2-1.62a11.93 11.93 0 0 0 5.8 1.49h.01c6.63 0 12-5.36 12-11.99a11.9 11.9 0 0 0-3.29-8.39ZM12 21.3h-.01a9.9 9.9 0 0 1-5.04-1.38l-.36-.21-3.68.96.98-3.59-.23-.37A9.88 9.88 0 0 1 2.02 12C2.02 6.48 6.49 2 12.01 2c2.64 0 5.12 1.03 6.99 2.9a9.86 9.86 0 0 1 2.9 7.09c0 5.52-4.47 10-9.9 10Zm5.67-7.49c-.3-.15-1.78-.88-2.06-.98-.28-.1-.48-.15-.69.15-.2.3-.79.98-.97 1.18-.18.2-.36.23-.66.08-.3-.15-1.26-.46-2.4-1.47-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.33.45-.5.15-.17.2-.29.3-.49.1-.2.05-.38-.02-.53-.08-.15-.69-1.65-.95-2.27-.25-.6-.5-.52-.69-.53h-.59c-.2 0-.53.07-.8.38-.28.3-1.05 1.03-1.05 2.5s1.08 2.9 1.23 3.11c.15.2 2.12 3.24 5.14 4.55.72.31 1.28.5 1.72.64.72.23 1.37.2 1.88.12.57-.08 1.78-.73 2.04-1.43.25-.7.25-1.3.18-1.43-.08-.13-.28-.2-.58-.34Z"/></svg>') no-repeat center/58%;
}
.fab-ms{
  bottom:20px; background:var(--msblue) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6 2 11.3c0 2.78 1.23 5.29 3.23 7l-.53 3.7 3.74-1.98c1.14.32 2.34.5 3.56.5 5.52 0 10-4.7 10-10.22C22 6 17.52 2 12 2zm5.08 8.2-3.26 3.47-1.88-1.87-3.97 2.27 3.26-3.47 1.88 1.87 3.97-2.27z"/></svg>') no-repeat center/58%;
}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .promo{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

@media (max-width: 640px){
  .nav-inner{height:56px}
  .nav-links a{margin-left:10px; font-size:.93rem}
  .btn-cta{padding:.45rem .65rem; font-size:.86rem; border-radius:999px}  /* compact top-right CTA */
  .btn-lg{padding:.7rem 1.0rem; font-size:.98rem}
  .brand-logo{width:28px; height:28px}
  .brand-text{font-size:.98rem}
}

/* === Ajustes móviles adicionales === */
@media (max-width: 640px) {
  /* Centrar el contenido del hero */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Ajuste del botón superior “Quiero información” */
  .btn-cta {
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;
    transform: translateY(-1px);
  }

  /* Centrar el mockup (Tu TV + Internet = IPTV) */
  .hero-media .mockup {
    margin: 20px auto 0;
    width: 90%;
    max-width: 320px;
  }

  /* Reducir padding en secciones */
  .section {
    padding: 32px 0;
  }

  /* Mejor alineación de logo y texto en nav */
  .nav-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    height: auto;
    padding: 6px 0;
  }

  .brand-text {
    font-size: 0.95rem;
  }
}