/* Reset */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Segoe UI', sans-serif;

  background-color: #f2f2f2;

  color: #0a0a09;

  line-height: 1.6;

}



/* Header */

header {

  background: #003366;

  color: #eee;

  padding: 20px;

  text-align: center;

  position: relative;

}



.logo-img {

  width: 160px;

  position: absolute;

  top: 15px;

  left: 25px;

}



/* Navegación */

.nav-links {

  list-style: none;

  display: flex;

  justify-content: center;

  gap: 20px;

  margin-top: 15px;

}



.nav-links a {

  text-decoration: none;

  color: #fff;

  font-weight: bold;

}



.nav-links a:hover {

  color: #ff6600;

}



/* Sección principal */

#principal {

  height: 70vh;

  background-image: url("../img/oficina2.jpg");

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  font-weight: bold;

}



.contenido-principal {

  position: relative;

  z-index: 2;

  color: white;

  text-align: center;

  padding-top: 15%;

}



/* Asesoría Legal */

#asesoria {

  background-color: #f2f2f2;

  text-align: center;

  scroll-padding-top: 100px;

  padding: 30px 20px;

}



#asesoria h2 {

  font-size: 28px;

  color: #003366;

  margin-bottom: 40px;

  padding-bottom: 10px;

  border-bottom: 2px solid #ccc;

  width: fit-content;

  margin-left: auto;

  margin-right: auto;

}



#asesoria .resaltado {

  display: inline-block;

  margin: 24px auto;

  padding: 8px 16px;

  font-size: 16px;

  border: 1px solid #ccc;

  border-radius: 6px;

  background-color: #ffffff;

  color: #003366;

}



/* Servicios */

#servicios {

  background-color: #e9ecef;

  padding: 40px 20px;

  text-align: center;

}



#servicios h2 {

  font-size: 28px;

  margin-bottom: 20px;

  padding-bottom: 10px;

  border-bottom: 2px solid #ccc;

  display: inline-block;

  color: #003366;

}



#servicios h2::after {

  content: "";

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  bottom: -8px;

  width: 60px;

  height: 3px;

  background-color: #ff6600;

  border-radius: 2px;

}



.servicios-grid {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-wrap: wrap;   /* ✅ FIX DEFINITIVO */

  gap: 25px;

}



.servicio {

  background-color: #d9d9d9;

  padding: 20px;

  border-radius: 8px;

  width: 22%;

  min-width: 250px;

  text-align: center;

  box-shadow: 0 2px 6px rgba(0,0,0,0.1);

}



.servicio img {

  max-width: 100%;

  border-radius: 8px;

  margin-top: 10px;

}



/* Hover */

.servicio {

  transition: all 0.3s ease-in-out;

}



.servicio:hover {

  transform: translateY(-10px);

  background-color: #f8f9fa;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  border: 1px solid #ccc;

}



.servicio img {

  transition: transform 0.3s ease-in-out;

}



.servicio:hover img {

  transform: scale(1.05);

}



/* Sobre mí */

#sobre-mi {

  padding: 30px 20px;

  background-color: #ffffff;

  border-top: 2px solid #ccc;

}



.contenedor-sobre-mi {

  display: flex;

  align-items: flex-start;

  gap: 30px;

  max-width: 1200px;

  margin: 0 auto;

  flex-wrap: wrap;

}



.foto-sobre-mi {

  width: 350px;

  height: 300px;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0,0,0,0.1);

}



.texto-sobre-mi {

  flex: 1;

  min-width: 280px;

  font-size: 16px;

  line-height: 1.6;

  color: #333;

}



/* Contacto */

#contacto {

  padding: 30px 20px;

  background-color: #ffffff;

  text-align: center;

}



#contacto h2 {

  text-align: center;

  width: 100%;

  margin-bottom: 25px;

}



.botonera-contacto {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

}



.btn-contacto,

.btn-whatsapp {

  background-color: #005599;

  color: white;

  padding: 12px 20px;

  border-radius: 6px;

  text-decoration: none;

  width: 220px;

  text-align: center;

}



.btn-whatsapp {

  background-color: #25D366;

}



.btn-contacto:hover {

  background-color: #cfd3d7;

  color: #000;

}



/* Footer */

footer {

  background-color: #003366;

  color: white;

  text-align: center;

  padding: 20px;

  margin-top: 40px;

}



/* ✅ Ajustes móviles: corregir fondo en iPhone */

@media (max-width: 900px) {

  #principal {

    background-attachment: scroll !important;

    background-image: url("../img/oficina2.jpg") !important;

    background-size: cover !important;

    background-position: center !important;

  }

}



/* ✅ Ajustes móviles: servicios correctos */

@media (max-width: 600px) {



  .logo-img {

    width: 80px !important;

    top: 5px !important;

    left: 5px !important;

  }



  .servicios-grid {

    flex-direction: column !important;

    gap: 25px !important;

  }



  .servicio {

    width: 100% !important;

    max-width: 350px !important;

    margin: 0 auto !important;

  }



  .servicio img {

    width: 100% !important;

    height: auto !important;

  }

}