/* FONDO PRINCIPAL */
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background-color: #0b0f19; /* Fondo sólido elegante */
      color: #fff;
    }

    /* Botones */
    .btn-primary {
      background: #fff; color: #25D366;
      padding: 12px 24px; border-radius: 6px;
      font-weight: 500; cursor: pointer; transition: transform .2s;
      border: none;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
    }
    .btn-outline {
      background: transparent; border: 2px solid #fff;
      color: #fff; padding: 12px 24px; border-radius: 6px;
      font-weight: 500; cursor: pointer; transition: transform .2s;
    }
    .btn-outline:hover {
      transform: translateY(-3px);
    }

    /* Hero Portada */
    #hero-landing {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 80px 5%;
      background: linear-gradient(135deg, #25d366, #0b5130);
      color: #fff;
      flex-wrap: wrap;
      gap: 20px;
    }
    #hero-landing .hero-text {
      max-width: 50%;
      animation: fadeInUp 1s ease-out;
    }
    #hero-landing h1 { font-size: 3rem; margin-bottom: 20px; }
    #hero-landing p { font-size: 1.25rem; line-height: 1.5; margin-bottom: 30px; }

    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Secciones */
    section {
      padding: 60px 5%;
      max-width: 1200px;
      margin: 0 auto 40px auto;
      background: rgba(17,17,17,0.85);
      border-radius: 10px;
      box-shadow: 0 8px 16px rgba(0,0,0,0.6);
    }
    section h2 {
      color: #25D366;
      margin-bottom: 20px;
      text-align: center;
      font-size: 2.2rem;
    }
    section p {
      font-size: 1.1rem;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto 30px auto;
      color: #ddd;
    }

    /* Features */
    .features, .feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .feature, .feature-item {
      background: #111;
      padding: 20px;
      border-radius: 8px;
      flex: 1 1 280px;
      box-shadow: 0 5px 12px rgba(0,0,0,0.5);
      text-align: center;
      transition: transform .3s;
    }
    .feature:hover, .feature-item:hover {
      transform: translateY(-5px);
    }
    .feature h3, .feature-item h3 { margin-bottom: 10px; color: #25D366; }

    /* Tablas */
    .data-table, .ganancia-table, .prediccion-table {
      width: 100%; border-collapse: collapse; margin: 20px auto;
    }
    th, td {
      padding: 12px;
      text-align: center;
      border: 1px solid #25D366;
    }
    th {
      background: #25D366;
      color: #000;
    }
    td {
      background: #111;
      color: #fff;
    }
    tr:nth-child(even) td {
      background: rgba(255,255,255,0.05);
    }

    /* Animación de Scroll */
    .animate-on-scroll {
      opacity: 0;
      transform: translateY(50px);
      transition: all .8s ease-out;
    }
    .animate-on-scroll.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* MODALES de Login/Registro */
    .modal {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .modal-content {
      background: #1c1f26;
      padding: 40px;
      border-radius: 12px;
      text-align: center;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 0 30px #25D366;
      position: relative;
    }
    .modal-content h2 {
      color: #25D366;
      margin-bottom: 20px;
    }
    .modal-content input {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border-radius: 6px;
      border: 1px solid #25D366;
      background: #111;
      color: #fff;
    }
    .modal-content button {
      width: 100%;
      padding: 12px;
      margin-top: 15px;
      background: #25D366;
      color: #000;
      border: none;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
    }
    .close-modal {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 20px;
      color: #fff;
      cursor: pointer;
    }
/* Ajustes para la imagen del hero */
#hero-landing .hero-img {
  flex: 0 0 45%;          /* Ocupar como máximo 45% del ancho */
  display: flex;
  justify-content: center;
  align-items: center;
}
#hero-landing .hero-img img {
  max-width: 100%;        /* No superar el ancho del contenedor */
  max-height: 350px;      /* Altura máxima fija */
  object-fit: contain;    /* Escala la imagen sin recortar */
  opacity: 0.8;           /* Hace la imagen un poco opaca */
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,255,140,0.4);
}
#whatsapp-contactos {
  text-align: center;   /* Centra todo el contenido en la sección */
}

#contact-list {
  display: inline-block; /* Hace que el ul se ajuste a su contenido */
  padding: 0;            /* Elimina padding predeterminado */
  margin: 0;             /* Reinicia márgenes */
  text-align: left;      /* Mantiene los li alineados a la izquierda dentro */
}

/* Contenedor icon+input */
.input-icon {
  display: flex;
  align-items: center;
  background: #111;
  border: 1px solid #25D366;
  border-radius: 6px;
  margin: 10px 0;
  padding: 8px 12px;
}
.input-icon i {
  color: #25D366;
  margin-right: 8px;
  font-size: 1.1rem;
}
.input-icon input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  padding: 8px 4px;
  font-size: 1rem;
}
.input-icon input:focus {
  outline: none;
}

/* Botones con iconos */
.modal-content button i {
  margin-right: 6px;
}

/* Ajuste en títulos de modal */
.modal-content h2 i {
  margin-right: 8px;
  color: #25D366;
}

/* Animación de flotación lenta */
@keyframes floatImage {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Aplicas esta clase a tu imagen */
.hero-img img {
  animation: floatImage 4s ease-in-out infinite;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,255,140,0.4);
  opacity: 0.9; /* para que no sea tan brillante */
}
/* Mensaje de error sencillo */
.form-error {
  color: #c00;            /* rojo estándar */
  background: transparent;/* sin fondo destacado */
  text-shadow: none;      /* sin sombra de texto */
  border: none;           /* sin bordes adicionales */
  padding: 0;             /* sin acolchado extra */
  margin: 10px 0;         /* espaciado arriba y abajo */
  font-weight: bold;      /* opcional: más legible */
  font-size: 0.95rem;     /* tamaño cómodo */
}

/* Mensaje de éxito sencillo */
.form-success {
  color: green;           /* verde estándar */
  background: transparent;
  text-shadow: none;
  border: none;
  padding: 0;
  margin: 10px 0;
  font-weight: bold;
  font-size: 0.95rem;
}



/* Pantalla completa negra */
.welcome-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Texto central */
.welcome-text {
  color: #25D366;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  text-align: center;
  opacity: 0;
}

/* Animación de fade in/out para cada mensaje */
@keyframes messageFade {
  0%   { opacity: 0; transform: scale(0.8); }
  10%  { opacity: 1; transform: scale(1); }
  90%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* Clase que activa la animación */
.fade-message {
  animation: messageFade 1.5s ease-in-out;
}
/* overlay full‑screen para la animación de bienvenida */
#welcome-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;  height: 100vh;
  background: #000;
  display: none; /* se mostrará vía JS */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* cuando body tenga esta clase, ocultamos TODO excepto #welcome-screen */
body.hide-landing > *:not(#welcome-screen) {
  display: none !important;
}

/* === Igualar tamaño de botones de header === */
header nav .btn-outline,
header nav .btn-primary {
  box-sizing: border-box;           /* que el border no sume «fuera» del ancho/alto */
  height: 44px;                      /* fija la misma altura para ambos */
  display: inline-flex;             /* facilita centrar el contenido */
  align-items: center;
  justify-content: center;
  padding: 0 24px;                   /* mantiene el mismo padding horizontal */
}