/* Estilos generales y reseteo */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #ffffff;
  color: #555;
  overflow-x: hidden; 
}

.page-container {
    max-width: 1440px; 
    margin: 0 auto; 
    position: relative;
    padding-bottom: 220px; 
}

/* ===== ENCABEZADO Y EFECTO DE MENÚ FINAL ===== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 7.5%; 
    position: relative;
}

.header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 7.5%;
    right: 7.5%;
    height: 1px;
    background-color: #eeeeee;
}

.logo img {
    width: 200px; 
}

.navbar {
    position: relative;
    display: flex;
}

.navbar a {
    text-decoration: none;
    color: #203f50;
    font-weight: 600;
    margin-left: 35px; 
    font-size: 15px;
    padding-bottom: 8px;
    transition: color 0.3s ease;
}

.navbar a:hover { 
    color: #000; 
}

/* La línea azul, creada ahora por JavaScript */
.nav-underline {
    position: absolute;
    /* TU AJUSTE DE PRECISIÓN: */
    bottom: -25px; 
    left: 0;
    height: 3px; 
    background-color: #203f50;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}


/* ... (El resto de tus estilos se mantienen igual) ... */
.main-content { position: relative; z-index: 10; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; padding: 70px 7.5% 150px; gap: 20px; }
.hero-text { flex: 0 1 480px; padding-top: 10px; }
.hero-text h1 { color: #203f50; font-size: 2.75rem; font-weight: 700; line-height: 1.25; margin-bottom: 35px; }
.hero-text p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 30px; color: #444444; }
.hero-image { flex: 1 1 55%; position: relative; min-width: 0; }
.dashboard-img { width: 100%; position: relative; z-index: 1; }
.mobile-img { position: absolute; width: 48%; right: 0; bottom: -115px; z-index: 2; }
.wave-container { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 5; }
.wave-container svg { width: 100%; height: auto; display: block; transform: scaleX(-1); }
.cta-button { position: absolute; z-index: 15; left: 7.5%; bottom: 160px; background-color: #008C8C; color: white; padding: 14px 40px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 5px 15px rgba(0, 71, 71, 0.4); border: 2px solid #33a6a6; transition: transform 0.2s ease-in-out; }
.cta-button:hover { transform: translateY(-3px); }

/* ===== ESTILOS PARA EL MENÚ MÓVIL (HAMBURGUESA) ===== */
.hamburger { display: none; cursor: pointer; background: transparent; border: none; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: #203f50; transition: all 0.3s ease-in-out; }

/* --- Media Queries --- */
@media (max-width: 1024px) {
    .header::after { display: none; } 
    .hamburger { display: block; }
    .nav-underline { display: none; }
    .hero { flex-direction: column; align-items: center; text-align: center; padding-top: 40px; padding-bottom: 100px; }
    .hero-image { margin-top: 40px; width: 100%; max-width: 600px; }
    .mobile-img { bottom: -60px; }
    .page-container { padding-bottom: 150px; }
    .cta-button { left: 50%; transform: translateX(-50%); width: 250px; text-align: center; bottom: 120px; }
    .cta-button:hover { transform: translateX(-50%) translateY(-3px); }

    .navbar { position: absolute; display: block; padding-bottom: 0; top: 89px; left: -100%; background-color: #fff; width: 100%; text-align: center; transition: 0.3s; box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05); z-index: 20; }
    .navbar a { margin: 16px 0; display: block; }
    .navbar.show { left: 0; }
}