:root{
  --azul:#03152f;
  --azul-sec:#07224b;
  --dorado:#c9973d;
  --dorado-hover:#b7852f;
  --gris:#f5f7fa;
  --gris2:#eef1f5;
  --texto:#1f2937;
  --blanco:#ffffff;
  --sombra:0 10px 25px rgba(0,0,0,.08);
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins',sans-serif;
  color:#1f2937;
  line-height:1.7;
  overflow-x:hidden;
}

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

a{
  text-decoration:none;
}

ul{
  list-style:none;
}

.container{
  width:90%;
  max-width:1300px;
  margin:auto;
}

.btn-principal,
.btn-consulta,
.btn-servicio,
.btn-consulta-grande{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  background:var(--dorado);
  color:#fff;
  border-radius:8px;
  font-weight:600;
  transition:.3s;
}

.btn-principal:hover,
.btn-consulta:hover,
.btn-servicio:hover,
.btn-consulta-grande:hover{
  background:var(--dorado-hover);
}

.header{
  position:sticky;
  top:0;
  z-index:999;
  background:linear-gradient(90deg,#021125,#05234d);
}

.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
}

/* DESPUÉS */
.logo img{
  height: 160px; /* ◄ Sube este número a tu gusto (ej. 130px, 140px, 150px) */
  width: auto;   /* Asegura que no se deforme horizontalmente */
}



.menu{
  display:flex;
  gap:35px;
  align-items:center;
}

.menu a{
  color:#fff;
  font-size:15px;
  font-weight:500;
}

/* --- SUBMENU CORREGIDO --- */
.dropdown {
  position: relative; /* el padre es referencia */
}

.submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  min-width:320px;
  opacity:0;
  visibility:hidden;
  box-shadow:var(--sombra);
  border-radius:10px;
  z-index:1000; /* asegura que quede encima */
}

.dropdown:hover .submenu{
  opacity:1;
  visibility:visible;
}

.submenu a{
  display:block;
  padding:12px 18px;
  color:#333;
   text-align:justify; /* texto justificado */
}

/* --- EFECTO AL PASAR EL MOUSE --- */
.submenu a:hover {
  background: var(--gris2);
  color: var(--dorado);
}

footer{
  background:#010d1f;
  color:#fff;
  text-align:center;
  padding:25px;
}






/* =========================================
TABLET
========================================= */
@media (max-width:991px){

  .container{
    width:95%;
  }

  .menu{
    gap:20px;
  }

  .logo img{
    height: 95px; /* ◄ Escala un poco más grande en tablet */
    width: auto; }

}

/* =========================================
MOVIL
========================================= */
@media (max-width:768px){

  .header .container{
    flex-direction:column;
    gap:15px;
  }

  .menu{
    flex-wrap:wrap;
    justify-content:center;
    gap:15px;
  }

  .menu a{
    font-size:14px;
  }

 .logo img{
    height: 75px; /* ◄ Tamaño ideal para que no se coma toda la pantalla del teléfono */
    width: auto;
  }
  
  .btn-principal{
    width:100%;
    max-width:300px;
  }

}