:root{
  --color-principal:#3B597B;
  --color-secundario:#E0E4E7;
  --color-acento:#A0B9C9;
  --texto:#333;
  --blanco:#fff;
}
body{font-family:'Poppins',sans-serif;color:var(--texto);background:var(--blanco);}
header{background:var(--blanco);border-bottom:2px solid var(--color-secundario);}
.navbar-brand{font-weight:700;color:var(--color-principal)!important;}
.nav-link{color:var(--texto);font-weight:500;}
.nav-link:hover,.nav-link.active{color:var(--color-principal);}
/* Hero */
#hero{position:relative;height:90vh;overflow:hidden;}
#hero .carousel-item{height:90vh;background-size:cover;background-position:center;}
#hero .carousel-caption{bottom:25%;text-shadow:1px 1px 5px rgba(0,0,0,.6);}
#hero h1{font-size:3rem;font-weight:700;}
#hero p{font-size:1.2rem;}
/* Servicios */
#servicios{padding:100px 0;background:#f9fafb;}
#servicios h2{color:var(--color-principal);margin-bottom:50px;font-weight:600;}
.servicio-box{background:#fff;border-radius:10px;border:1px solid var(--color-secundario);padding:30px;transition:.3s;}
.servicio-box:hover{transform:translateY(-5px);box-shadow:0 8px 16px rgba(0,0,0,.1);}
.servicio-box h4{color:var(--color-principal);font-weight:600;margin-bottom:15px;}
/* Nosotros */
#nosotros{padding:100px 0;}
#nosotros h2{color:var(--color-principal);margin-bottom:30px;}
#nosotros p{font-size:1.1rem;}
/* Contacto */
#contacto{padding:100px 0;background:var(--color-secundario);}
#contacto h2{color:var(--color-principal);margin-bottom:40px;}
.btn-enviar{background:var(--color-principal);color:#fff;font-weight:600;border:none;}
.btn-enviar:hover{background:#2e4461;}
/* Footer */
footer{background:var(--color-principal);color:#fff;text-align:center;padding:30px 0;font-size:.9rem;}
/* Dark mode */
body.modo-oscuro{background:#1c1f24;color:#e2e6ea;}
body.modo-oscuro header,body.modo-oscuro footer{background:#2a2e35;color:#fff;}
body.modo-oscuro .servicio-box{background:#2f343a;color:#e2e6ea;border-color:#38404a;}
body.modo-oscuro #servicios{background:#1f2329;}

/* === Corrección: visibilidad del menú en modo oscuro === */
body.modo-oscuro .navbar,
body.modo-oscuro header {
  background-color: #2a2e35 !important;
}

body.modo-oscuro .nav-link,
body.modo-oscuro .navbar-brand {
  color: #f1f1f1 !important;
}

body.modo-oscuro .nav-link:hover,
body.modo-oscuro .nav-link.active {
  color: var(--color-acento) !important;
}

body.modo-oscuro .navbar-toggler {
  filter: invert(100%);
}

/* === Correcci¨®n de visibilidad para los labels del formulario === */
#contacto label {
  color: var(--color-principal);
  font-weight: 500;
}

body.modo-oscuro #contacto label {
  color: #f1f1f1;
}


/* === Soluci¨®n definitiva: visibilidad completa de labels === */
#contacto label {
  color: var(--color-principal) !important;
  font-weight: 500;
  opacity: 1 !important;
}

body.modo-oscuro #contacto label {
  color: #f1f1f1 !important;
  opacity: 1 !important;
}