/* ============================================================
   css/style.css
   ============================================================
   Estilos del sitio Snooping. Organizado por secciones, en el
   mismo orden en que aparecen en index.html. Buscá el comentario
   de la sección que quieras tocar.

   PALETA DE COLORES (por si querés ajustar algo):
   - Fondo principal:      #0A0E14  (azul-negro muy oscuro)
   - Fondo de tarjetas:    #11161D
   - Bordes:               #1A2129
   - Acento (cian):        #2DE2E6
   - Texto principal:      #E8EDF2
   - Texto secundario:     #8B97A5
   - Texto apagado:        #6E7989

   TIPOGRAFÍAS:
   - Outfit          -> títulos (h1, h2, h3, logo)
   - Plus Jakarta Sans -> texto general
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0A0E14;
  color: #E8EDF2;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1.5;
}

h1, h2, h3 { font-family: 'Outfit', sans-serif; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

/* ============================================================
   NAVEGACIÓN SUPERIOR
   ============================================================ */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 64px;
  border-bottom: 1px solid #1A2129;
  position: relative;
  z-index: 100;
}

.logo {
  font-family: 'Outfit', sans-serif;
  font-size: 19px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2DE2E6;
  box-shadow: 0 0 10px #2DE2E6;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 14px;
  color: #8B97A5;
}

.nav-links a:hover { color: #E8EDF2; }

/* Botón "Mi cuenta" que abre el modal de consulta de saldo */
.nav-login {
  border: 1px solid #2DE2E6;
  color: #2DE2E6;
  padding: 9px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.nav-login:hover { background: rgba(45,226,230,0.08); }

/* ============================================================
   HERO + CARRUSEL
   ============================================================ */

.hero-carousel {
  position: relative;
  height: 560px;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.15);
}

.hero-slide-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #0A0E14 0%,
    rgba(10,14,20,0.85) 25%,
    rgba(10,14,20,0.35) 50%,
    rgba(10,14,20,0) 75%
  );
}

.hero-slide-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 64px;
}

.hero-text { max-width: 600px; }

.hero-eyebrow {
  font-size: 13px;
  color: #2DE2E6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 500;
}

.hero-text h1 {
  font-size: 50px;
  font-weight: 300;
  line-height: 1.14;
  margin-bottom: 20px;
}

.hero-text h1 strong {
  color: #2DE2E6;
  font-weight: 500;
}

.hero-text p {
  font-size: 16px;
  color: #AAB4C0;
  max-width: 420px;
  line-height: 1.6;
  margin-bottom: 30px;
}

.hero-actions { display: flex; gap: 12px; }

.btn-primary {
  background: #2DE2E6;
  color: #0A0E14;
  padding: 13px 26px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-secondary {
  border: 1px solid #2A3340;
  color: #E8EDF2;
  padding: 13px 26px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Puntitos indicadores del carrusel, abajo a la izquierda */
.carousel-dots {
  position: absolute;
  bottom: 28px;
  left: 64px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.c-dot {
  width: 28px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  border: none;
  padding: 0;
}

.c-dot.active { background: #2DE2E6; }

/* ============================================================
   BARRA DE FEATURES (Simétrico / Sin límite / Soporte / Instalación)
   ============================================================ */

.features-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  border-bottom: 1px solid #1A2129;
}

.feature-item {
  padding: 28px 24px;
  border-right: 1px solid #1A2129;
  text-align: center;
}

.feature-item:last-child { border-right: none; }

.feature-icon {
  width: 22px;
  height: 22px;
  margin: 0 auto 10px;
  color: #2DE2E6;
}

.feature-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  font-family: 'Outfit', sans-serif;
}

.feature-item p { font-size: 12px; color: #6E7989; }

/* ============================================================
   PLANES
   ============================================================ */

.plans-section {
  padding: 76px 64px;
  text-align: center;
}

.section-eyebrow {
  font-size: 13px;
  color: #2DE2E6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 500;
}

.plans-section h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 10px;
}

.section-sub { font-size: 15px; color: #8B97A5; margin-bottom: 48px; }

.plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
}

.plan-card {
  background: #11161D;
  border: 1px solid #1A2129;
  border-radius: 10px;
  padding: 34px 30px;
  position: relative;
}

.plan-card.popular {
  border-color: #2DE2E6;
  background: linear-gradient(180deg, rgba(45,226,230,0.06), #11161D 40%);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2DE2E6;
  color: #0A0E14;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 20px;
}

.plan-speed-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: center;
  margin-bottom: 2px;
  font-family: 'Outfit', sans-serif;
}

.plan-speed {
  font-size: 44px;
  font-weight: 500;
  color: #2DE2E6;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plan-unit { font-size: 14px; color: #8B97A5; }

.plan-sublabel {
  font-size: 13px;
  color: #8B97A5;
  text-align: center;
  margin-bottom: 22px;
}

.plan-price {
  font-size: 27px;
  font-weight: 500;
  margin-bottom: 2px;
  text-align: center;
  font-family: 'Outfit', sans-serif;
}

.plan-period { font-size: 13px; color: #8B97A5; margin-bottom: 22px; text-align: center; }

.plan-features { list-style: none; }

.plan-features li {
  font-size: 14px;
  color: #B4BDC8;
  padding: 9px 0;
  border-top: 1px solid #1A2129;
  display: flex;
  align-items: center;
  gap: 9px;
}

.plan-features li:first-child { border-top: none; }

.plan-features .check {
  color: #2DE2E6;
  font-weight: 700;
  flex-shrink: 0;
}

.btn-plan {
  display: block;         /* necesario porque ahora es un <a> (inline por defecto) y no un <button> */
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  background: transparent;
  border: 1px solid #2A3340;
  color: #E8EDF2;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-plan.primary {
  background: #2DE2E6;
  color: #0A0E14;
  border: none;
}

.install-note {
  margin-top: 28px;
  font-size: 13px;
  color: #6E7989;
}

.install-note strong { color: #AAB4C0; font-weight: 600; }

/* ============================================================
   MAPA DE COBERTURA
   ============================================================ */

.map-section {
  padding: 76px 64px;
  border-top: 1px solid #1A2129;
}

.map-header { text-align: center; margin-bottom: 36px; }

.map-header h2 { font-size: 30px; font-weight: 400; margin-bottom: 10px; }

.map-header p {
  font-size: 15px;
  color: #8B97A5;
  max-width: 480px;
  margin: 0 auto;
}

.map-container {
  border: 1px solid #1A2129;
  border-radius: 10px;
  overflow: hidden;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  padding: 36px 64px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #5A6573;
  border-top: 1px solid #1A2129;
}

/* ============================================================
   MODAL "MI CUENTA" — consulta de saldo por DNI
   ============================================================
   Se abre al hacer click en el botón "Mi cuenta" del nav.
   Lógica de apertura/cierre y de la consulta en sí: js/consulta.js
*/

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.open { display: flex; }

.modal-box {
  background: #11161D;
  border: 1px solid #1A2129;
  border-radius: 12px;
  padding: 36px;
  width: 100%;
  max-width: 420px;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: #6E7989;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover { color: #E8EDF2; }

.modal-box h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
}

.modal-box .modal-sub {
  font-size: 14px;
  color: #8B97A5;
  margin-bottom: 24px;
}

.dni-label {
  font-size: 12px;
  color: #8B97A5;
  margin-bottom: 8px;
  display: block;
  font-weight: 500;
}

.dni-input {
  width: 100%;
  background: #0A0E14;
  border: 1px solid #2A3340;
  border-radius: 4px;
  padding: 13px 14px;
  color: #E8EDF2;
  font-size: 15px;
  margin-bottom: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.dni-input:focus { outline: none; border-color: #2DE2E6; }

.btn-consultar {
  width: 100%;
  background: #2DE2E6;
  color: #0A0E14;
  padding: 13px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.btn-consultar:disabled { opacity: 0.6; cursor: default; }

/* Caja de resultado dentro del modal, oculta hasta que hay una consulta */
.result-box {
  display: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #1A2129;
}

.result-box.show { display: block; }

.result-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }

.result-plan { font-size: 13px; color: #8B97A5; margin-bottom: 16px; }

.result-amount-label { font-size: 12px; color: #6E7989; margin-bottom: 4px; }

.result-amount {
  font-size: 30px;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  margin-bottom: 10px;
}

.result-amount.al-dia { color: #4ADE80; }
.result-amount.pendiente { color: #E8A35C; }
.result-amount.vencido { color: #E85C5C; }

.result-status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
}

.result-status.al-dia { background: rgba(74,222,128,0.12); color: #4ADE80; }
.result-status.pendiente { background: rgba(232,163,92,0.12); color: #E8A35C; }
.result-status.vencido { background: rgba(232,92,92,0.12); color: #E85C5C; }

/* Estado de error dentro del modal (DNI no encontrado, falla de red, etc) */
.result-box.error .result-name { color: #E85C5C; }
.result-box.error .result-plan { color: #8B97A5; }

/* ============================================================
   RESPONSIVE — pantallas chicas (celular)
   ============================================================ */

@media (max-width: 900px) {
  .nav, .hero-slide-content, .plans-section, .map-section, .footer {
    padding-left: 24px;
    padding-right: 24px;
  }

  .nav-links { display: none; }

  .hero-text h1 { font-size: 36px; }

  .features-bar { grid-template-columns: 1fr 1fr; }

  .feature-item:nth-child(2) { border-right: none; }

  .plans-grid { grid-template-columns: 1fr; }

  .footer { flex-direction: column; gap: 8px; }
}

/* Mensaje de error del DNI en el modal */
.dni-error {
  color: #ff5252;
  font-size: 13px;
  margin: 6px 0 0;
  min-height: 16px;
}