/* Aplicar la fuente Poppins a toda la página */
        * {
            font-family: 'Poppins', sans-serif;
        }

        /* Configurar estilos de fuente para títulos y texto */
        h1, h2, h3, h4, h5, h6 {
            font-weight: 700; /* Negrita para títulos */
        }

        p, a, li, span {
            font-weight: 400; /* Normal para otros textos */
        }

       
        .nav-menu-desktop li a {
            text-decoration: none;
            color: #0c0c40;
            font-weight: 600; /* O puedes usar 700 para una negrita más pronunciada */
            font-size: 16px;
            padding: 5px 10px;
        }

        .hero h1, .services .section-title {
            font-weight: 900; /* Muy negrita para los títulos destacados */
        }

        /* Otros estilos CSS */
        /* Continúa con tus otros estilos... */
    

/* Estilos básicos del header */
.header {
  background-color: #ffffff; /* Fondo blanco */
  padding: 15px 0; /* Espaciado superior e inferior */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
  position: relative; /* Posicionamiento relativo */
  z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}

/* Contenedor principal del header */
.header-container {
  max-width: 1200px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centrando el contenedor */
  display: flex; /* Flexbox para alinear los elementos horizontalmente */
  justify-content: space-between; /* Espacio entre el logo, menú y botón */
  align-items: center; /* Alinea verticalmente el contenido */
  padding: 0 20px; /* Padding lateral */
}

/* Logo */
.logo {
  display: block;
  width: 50px;
  height: 50px;
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/logo-abogados-expertos-fondo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Menú de Navegación para Escritorio */
.nav-desktop {
  display: flex; /* Flexbox para alinear los elementos horizontalmente */
}

.nav-menu-desktop {
  list-style: none; /* Elimina la lista de estilos */
  padding: 0; /* Elimina el padding */
  margin: 0; /* Elimina el margen */
  display: flex; /* Flexbox para alinear los elementos horizontalmente */
  gap: 20px; /* Espacio entre los elementos del menú */
}

.nav-menu-desktop li a {
  text-decoration: none; /* Sin subrayado */
  color: #0c0c40; /* Color del texto */
  font-weight: 600; /* Grosor del texto */
  font-size: 16px; /* Tamaño de fuente */
  padding: 5px 10px; /* Espaciado interno */
}

/* Botón de Agendar Visita para Escritorio */
.btn-agenda-desktop {
  background-color: transparent; /* Fondo transparente */
  color: #0c0c40; /* Color del texto */
  padding: 10px 20px; /* Espaciado interno */
  border: 2px solid #0c0c40; /* Borde del botón */
  border-radius: 5px; /* Bordes redondeados */
  font-size: 14px; /* Tamaño de fuente */
  font-weight: 600; /* Grosor del texto */
  text-decoration: none; /* Sin subrayado */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}

.btn-agenda-desktop:hover {
  background-color: #0c0c40; /* Cambio de fondo al pasar el cursor */
  color: #ffffff; /* Color de texto al pasar el cursor */
}

/* Icono de Menú (Hamburguesa) para móvil */
.menu-icon {
  display: none; /* Oculto por defecto en pantallas grandes */
  cursor: pointer; /* Cursor de puntero para el ícono */
  z-index: 2000; /* Asegura que el menú hamburguesa esté por encima del menú desplegable */
}

.menu-icon-line {
  width: 25px; /* Ancho de las líneas del icono */
  height: 3px; /* Altura de las líneas del icono */
  background-color: #0c0c40; /* Color de las líneas */
  margin: 4px 0; /* Espacio entre las líneas */
}

/* Menú de Navegación para Móvil */
.nav-mobile {
  display: none; /* Oculto por defecto en pantallas grandes */
  position: absolute; /* Posicionamiento absoluto para el menú desplegable */
  top: 100px; /* Espaciado superior desde el top del header */
  left: 0; /* Alineación izquierda */
  width: 100%; /* Ancho completo del menú */
  background-color: #ffffff; /* Fondo blanco para el menú desplegable */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  z-index: 1000; /* Asegura que el menú esté por encima de otros elementos */
  padding: 20px; /* Espaciado interno para el menú */
}

/* Estilos de la lista del menú móvil */
.nav-menu-mobile {
  list-style: none; /* Elimina la lista de estilos */
  padding: 0; /* Elimina el padding */
  margin: 0; /* Elimina el margen */
  display: flex; /* Flexbox para alinear los elementos verticalmente */
  flex-direction: column; /* Cambia la dirección del menú a columna */
  align-items: flex-start; /* Alinea el texto del menú a la izquierda */
}

.nav-menu-mobile li {
  padding: 10px 0; /* Espaciado interno para los elementos del menú desplegable */
  width: 100%; /* Asegura que cada elemento ocupe todo el ancho */
}

/* Estilos de los enlaces del menú móvil */
.nav-menu-mobile li a {
  text-decoration: none; /* Sin subrayado */
  color: #d9534f; /* Color del texto en el menú desplegable */
  font-weight: 600; /* Grosor del texto */
  font-size: 16px; /* Tamaño de fuente */
  padding: 10px; /* Espaciado interno para los enlaces del menú desplegable */
  display: block; /* Hace que el enlace ocupe toda la línea */
  width: 100%; /* Asegura que el enlace ocupe todo el ancho del contenedor */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .nav-desktop, .btn-agenda-desktop {
    display: none; /* Oculta el menú de escritorio y el botón en pantallas pequeñas */
  }

  .menu-icon {
    display: block; /* Muestra el ícono de menú en pantallas pequeñas */
  }

  .nav-mobile {
    display: none; /* Oculto por defecto en pantallas pequeñas */
  }

  .nav-mobile.show {
    display: flex; /* Muestra el menú cuando se activa */
    flex-direction: column; /* Alinea el menú verticalmente */
  }
}


/* Estilos para el contenedor de la sección hero */
.hero {
  position: relative; /* Posiciona el contenedor relativo para que el pseudo-elemento ::before funcione correctamente */
  background: url('https://puntogasfiter.cl/contenido-gasfiter/general/58265.jpg') no-repeat center center/cover; /* Imagen de fondo centrada y cubierta */
  color: #fff; /* Color de texto blanco para todo el contenido dentro del contenedor .hero */
  padding-top: 12%; /* Espaciado superior para controlar la altura del contenedor */
  padding-bottom: 12%; /* Espaciado inferior para controlar la altura del contenedor */
  display: flex; /* Flexbox para centrar verticalmente el contenido */
  align-items: center; /* Centra el contenido verticalmente */
  justify-content: flex-start; /* Alinea el contenido a la izquierda */
  overflow: hidden; /* Asegura que cualquier contenido adicional no se desborde */
  font-family: 'Arial', sans-serif; /* Fuente por defecto, puede ser cambiada */
}

/* Pseudo-elemento para superposición negra */
.hero::before {
  content: ''; /* Pseudo-elemento vacío para la superposición */
  position: absolute; /* Posición absoluta para cubrir todo el contenedor .hero */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Superposición negra con opacidad */
  z-index: 1; /* Ubicación detrás del contenido */
}

/* Estilos para el contenido dentro del héroe */
.hero-content {
  position: relative; /* Necesario para asegurar que el z-index funcione */
  z-index: 2; /* Aparece por encima de la superposición */
  width: auto; /* Permite al contenedor expandirse libremente */
  max-width: 100%; /* Ancho máximo del contenedor para el texto */
  margin-left: 19%; /* Margen izquierdo para separar el contenido del borde de la pantalla */
  margin-right: 6%;
  text-align: left; /* Alinea el texto a la izquierda */
  padding: 0 20px; /* Padding adicional para móviles */
}

/* Subtítulo pequeño */
.subheading {
  display: block;
  font-size: 16px;
  margin-bottom: 16px; /* Espaciado inferior para separar del título */
}

/* Estilos para el título principal */
.hero h1 {
  font-family: 'Poppins', sans-serif; /* Aplica la fuente Poppins */
  font-size: 50px; /* Tamaño de fuente del título principal */
  margin-bottom: 10px; /* Espaciado inferior para separar del subtítulo */
  font-weight: 900; /* Grosor de la fuente */
  text-transform: uppercase; /* Texto en mayúsculas */
  color: #fff; /* Color del texto */
  white-space: nowrap; /* Evita que el texto se envuelva en varias líneas */
  overflow: visible; /* Permite que el contenido se extienda más allá de los límites del contenedor */

}

/* Estilos para el subtítulo */
.hero h2 {
  font-size: 32px; /* Tamaño de fuente del subtítulo */
  margin-bottom: 24px; /* Espaciado inferior para separar del párrafo */
  font-weight: bold;
  text-transform: uppercase; /* Texto en mayúsculas */
  color: #fff;  /* Color texto */
}

/* Estilos para el párrafo */
.hero p {
  font-size: 18px; /* Tamaño de fuente del párrafo */
  margin: 0 0 32px; /* Margen inferior ajustable, sin márgenes laterales */
  line-height: 1.5; /* Altura de línea para mejorar la legibilidad */
  max-width: 600px; /* Ancho máximo del párrafo para limitar la longitud de la línea */
}

/* Contenedor para los botones */
.buttons {
  display: flex; /* Usado para alinear los botones horizontalmente */
  gap: 15px; /* Espaciado entre botones */
  margin-top: 20px; /* Espacio superior para separar del párrafo */
  flex-wrap: wrap; /* Permite que los botones se ajusten en pantallas más pequeñas */
      margin-right: 50px;
}

/* Estilos para los botones */
.btn {
  display: inline-block; /* Botón en línea pero tratado como bloque */
  padding: 10px 30px; /* Espaciado interno del botón */
  font-size: 16px; /* Tamaño de fuente del botón */
  text-decoration: none; /* Sin subrayado en los enlaces */
  text-transform: uppercase; /* Texto del botón en mayúsculas */
  cursor: pointer; /* Cambio de cursor al pasar sobre el botón */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el cambio de color al pasar el cursor */
  border-radius: 8px; /* Bordes redondeados */
  margin-bottom: 10px; /* Espaciado inferior entre botones para móviles */
}

/* Botón primario */
.btn.primary {
  color: #fff; /* Color de texto blanco */
  background-color: #0d6efd; /* Color de fondo del botón primario */
  border: none; /* Sin borde */
}

.btn.primary:hover {
  background-color: #0056b3; /* Cambio de color de fondo al pasar el cursor */
}

/* Botón secundario */
.btn.secondary {
  color: #fff; /* Color de texto blanco */
  background-color: transparent; /* Fondo transparente */
  border: 2px solid #fff; /* Borde blanco */
}

.btn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente al pasar el cursor */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .hero-content {
    margin-left: 1%; /* Aumenta el margen para pantallas pequeñas */
    max-width: 90%; /* Reduce el ancho máximo del contenedor en pantallas más pequeñas */
  }

  .hero h1 {
    font-size: 32px; /* Reduce el tamaño del título en pantallas más pequeñas */
    white-space: normal; /* Permite que el título se ajuste automáticamente en pantallas más pequeñas */
  }

  .hero h2 {
    font-size: 24px; /* Reduce el tamaño del subtítulo en pantallas más pequeñas */
  }

  .hero p {
    font-size: 16px; /* Reduce el tamaño del párrafo en pantallas más pequeñas */
  }

  .buttons {
    flex-direction: column; /* Apila los botones verticalmente en pantallas pequeñas */
    align-items: flex-start; /* Alinea los botones a la izquierda */
  }

  .btn {
    width: 100%; /* Asegura que los botones ocupen todo el ancho disponible */
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 24px; /* Ajusta el tamaño del título para pantallas muy pequeñas */
  }

  .hero h2 {
    font-size: 18px; /* Ajusta el tamaño del subtítulo para pantallas muy pequeñas */
  }

  .hero p {
    font-size: 14px; /* Ajusta el tamaño del párrafo para pantallas muy pequeñas */
  }
}


/* Estilos para la sección de servicios */
.services {
  padding: 50px 0;
  text-align: center;
  background-color: #fff;
}

.section-title {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 40px;
  text-transform: uppercase;
}

/* Contenedor para las cajas de servicios */
.services-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1500px; /* Ajustado para dar más espacio horizontal */
  margin: 0 auto; /* Centrar el contenedor */
}

/* Cada caja de servicio */
.service-box {
  position: relative;
  width: 450px; /* Ajusta el ancho para hacerlo más cuadrado */
  height: 450px; /* Ajusta la altura para hacerlo más cuadrado */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  margin: 10px;
}

/* Imagen de fondo y superposición de opacidad */
.service-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* Contenido dentro de cada caja de servicio */
.service-content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 75px 20px 10px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

/* Título del servicio */
.service-content h2 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 20px;
  color: #fff;
}

/* Descripción del servicio */
.service-content p {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
}

/* Estilos específicos para cada servicio */
.service-1 { 
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-1.jpg');
}

.service-2 {
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-2.jpg');
}

.service-3 {
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-3.jpg');
}

.service-4 {
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-4.jpg');
}

.service-5 {
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-5.jpg');
}

.service-6 {
  background-image: url('https://abogadosexpertos.cl/contenido-abogado/abogado-laboral-6.jpg');
}


/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .services-container {
    flex-direction: column;
    align-items: center;
  }

  .service-box {
    width: 80%;
    margin-bottom: 20px;
  }

  .service-content {
    padding: 30px;
  }
}


/* Estilos para la sección de expertos */
.experts {
  padding: 80px 0; /* Espaciado superior e inferior */
  text-align: center; /* Centra todo el texto dentro de la sección */
  background-color: #fff; /* Fondo blanco para la sección */
}

/* Contenedor de contenido de expertos */
.experts-content {
  width: 100%; /* Ajusta el ancho del contenedor a un porcentaje */
  margin: 0 auto 01px; /* Centrando el contenedor y añadiendo margen inferior */
  padding: 0 20px; /* Padding lateral para dispositivos móviles */
}

/* Título de la sección de expertos */
.experts-title {
  font-size: 42px; /* Tamaño de fuente del título */
  font-weight: 800; /* Grosor del título */
  color: #2b2b2b; /* Color del texto del título */
  margin-bottom: 20px; /* Espaciado inferior para separar del párrafo */
  text-transform: uppercase; /* Texto en mayúsculas */
  letter-spacing: 1px; /* Espaciado entre letras */
}

/* Descripción de la sección de expertos */
.experts-description {
  font-size: 18px; /* Tamaño de fuente del párrafo */
  line-height: 1.8; /* Altura de línea para mejorar la legibilidad */
  color: #666; /* Color del texto del párrafo */
  margin-bottom: 50px; /* Espaciado inferior para separar del contenedor de estadísticas */
  text-align: justify; /* Alineación centrada del texto */
  max-width: 100%; /* Permite que el párrafo ocupe el 100% del contenedor */
}

/* Contenedor de estadísticas */
.stats-container {
  display: flex; /* Flexbox para alineación horizontal */
  justify-content: center; /* Centra los elementos dentro del contenedor */
  gap: 40px; /* Espacio entre los elementos */
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas más pequeñas */
  padding: 0 20px; /* Padding lateral para dispositivos móviles */
}

/* Caja de estadísticas individuales */
.stat-box {
  text-align: center; /* Centra el texto dentro de cada caja */
  padding: 20px; /* Espaciado interno */
  flex: 1 1 200px; /* Flexibilidad de tamaño para cajas */
  min-width: 150px; /* Ancho mínimo para cada caja */
  max-width: 220px; /* Ancho máximo para cada caja */
}

/* Número de estadísticas */
.stat-number {
  display: block; /* Asegura que el número esté en su propia línea */
  font-size: 48px; /* Tamaño de fuente del número */
  font-weight: 700; /* Grosor del número */
  color: #4c4c4c; /* Color del número */
  margin-bottom: 5px; /* Espaciado inferior para separar del texto de la estadística */
}

/* Texto de estadísticas */
.stat-text {
  font-size: 16px; /* Tamaño de fuente del texto de la estadística */
  color: #999; /* Color del texto de la estadística */
  font-weight: 500; /* Grosor del texto */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .experts-content {
    width: 90%; /* Aumenta el ancho del contenedor en pantallas pequeñas */
  }

  .experts-title {
    font-size: 32px; /* Tamaño de fuente ajustado para el título en pantallas pequeñas */
    margin-bottom: 15px; /* Ajusta el espaciado inferior */
  }

  .experts-description {
    font-size: 16px; /* Tamaño de fuente ajustado para el párrafo en pantallas pequeñas */
    margin-bottom: 30px; /* Ajusta el espaciado inferior */
  }

  .stat-number {
    font-size: 36px; /* Tamaño de fuente ajustado para los números en pantallas pequeñas */
  }

  .stat-text {
    font-size: 14px; /* Tamaño de fuente ajustado para el texto de la estadística en pantallas pequeñas */
  }

  .stats-container {
    gap: 20px; /* Reduce el espacio entre las estadísticas en pantallas pequeñas */
  }
}


/* Estilos para la sección de llamada a la acción */
.cta-section {
  background-color: #0c0c40; /* Color de fondo morado oscuro */
  padding: 20px 0; /* Espaciado superior e inferior */
}

/* Contenedor flex para el contenido de la sección */
.cta-container {
  max-width: 1200px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
  padding: 0 20px; /* Espaciado interno lateral para el contenedor */
  display: flex; /* Usar Flexbox para alinear elementos horizontalmente */
  justify-content: space-between; /* Alinea el texto a la izquierda y el botón a la derecha */
  align-items: center; /* Centra verticalmente el contenido */
}

/* Estilo del texto de llamada a la acción */
.cta-text {
  color: #ffffff; /* Color del texto en blanco */
  font-size: 18px; /* Tamaño de fuente */
  font-weight: 400; /* Peso de la fuente */
  margin: 0; /* Sin margen alrededor del texto */
}

/* Estilo del botón de llamada a la acción */
.cta-button {
  background-color: #0d6efd; /* Color de fondo del botón */
  color: #ffffff; /* Color del texto del botón */
  padding: 10px 20px; /* Espaciado interno del botón */
  font-size: 16px; /* Tamaño de fuente del botón */
  font-weight: 600; /* Peso de la fuente */
  text-decoration: none; /* Sin subrayado para el enlace */
  border-radius: 5px; /* Bordes redondeados para el botón */
  border: 1px solid transparent; /* Borde del botón */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Transición suave para hover */
}

/* Efecto hover para el botón */
.cta-button:hover {
  background-color: #0b5ed7; /* Color de fondo al pasar el cursor */
  border-color: #ffffff; /* Cambia el color del borde al pasar el cursor */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column; /* Cambia la dirección del contenedor a columna */
    text-align: center; /* Centra el texto y el botón en pantallas pequeñas */
  }

  .cta-button {
    margin-top: 10px; /* Añade un margen superior para el botón */
  }
}


/* Estilos para la sección de pestañas */
.tabs-section {
  padding: 70px 0;
  background-color: #fff;
}

.tabs-container {
  max-width: 900px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tabs-menu {
  display: flex;
  flex-wrap: wrap; /* Ajusta el layout para versiones móviles */
  background-color: #0d6efd;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.tab-button {
  flex: 1;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-button .dashicons {
  margin-right: 8px; /* Espaciado entre el ícono y el texto */
  font-size: 20px; /* Ajusta el tamaño del icono */
}

.tab-button.active, .tab-button:hover {
  background-color: #0a58ca;
}

.tabs-content {
  padding: 20px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.tab-content {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.tab-content.active {
  display: block;
  position: relative;
}

.tab-content ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
  color: #333;
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .tabs-menu {
    flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
    align-items: stretch;
  }

  .tab-button {
    padding: 10px;
    justify-content: flex-start; /* Ajusta el texto a la izquierda */
  }
}


        /* Estilos para la sección de contacto */
        .contact-section {
            background-color: #0c0c40; /* Fondo azul oscuro */
            padding: 60px 0; /* Espaciado superior e inferior */
            display: flex; /* Flexbox para la alineación horizontal */
            justify-content: center; /* Centra el contenido horizontalmente */
            align-items: center; /* Centra el contenido verticalmente */
            color: #fff; /* Color de texto blanco */
        }

        .contact-container {
            max-width: 1200px; /* Ancho máximo del contenedor */
            display: flex; /* Flexbox para la alineación horizontal */
            justify-content: space-between; /* Espacio entre los elementos */
            align-items: center; /* Alinea los elementos verticalmente */
            width: 100%; /* Ancho completo del contenedor */
            padding: 0 20px; /* Padding lateral */
        }

        .contact-info {
            background-color: #fff; /* Fondo blanco para el cuadro de contacto */
            color: #000; /* Color de texto negro */
            padding: 40px; /* Espaciado interno */
            border-radius: 10px; /* Bordes redondeados */
            width: 40%; /* Ancho del cuadro de contacto */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        }

        .contact-info h2 {
            margin-bottom: 20px; /* Espaciado inferior del título */
            font-size: 24px; /* Tamaño de fuente del título */
        }

        .contact-info ul {
            list-style: none; /* Elimina el estilo de lista */
            padding: 0; /* Sin padding */
        }

        .contact-info li {
            display: flex; /* Flexbox para la alineación de icono y texto */
            align-items: center; /* Alinea verticalmente */
            margin-bottom: 20px; /* Espaciado inferior entre elementos */
        }

        .contact-info li span {
            font-size: 24px; /* Tamaño de fuente del icono */
            margin-right: 10px; /* Espaciado derecho del icono */
        }

        .contact-info strong {
            font-weight: bold; /* Negrita para los títulos */
            display: block; /* Cada título en una nueva línea */
            margin-bottom: 5px; /* Espaciado inferior de los títulos */
        }

        .contact-map {
            width: 55%; /* Ancho del mapa */
            border-radius: 10px; /* Bordes redondeados del mapa */
            overflow: hidden; /* Oculta el desbordamiento */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        }

        .contact-map iframe {
            width: 100%; /* Ancho completo del iframe */
            height: 100%; /* Altura completa del iframe */
            border: none; /* Sin borde */
        }

        /* Media queries para pantallas más pequeñas */
        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column; /* Cambia la dirección del contenedor a columna */
                align-items: center; /* Centra los elementos en pantallas pequeñas */
            }

            .contact-info {
                width: 90%; /* Ancho del cuadro de contacto en pantallas pequeñas */
                margin-bottom: 20px; /* Espaciado inferior en pantallas pequeñas */
            }

            .contact-map {
                width: 100%; /* Ancho completo del mapa en pantallas pequeñas */
            }
        }
    

        /* Estilos para la sección de contacto */
        .contact-section {
            background-color: #0c0c40; /* Fondo azul oscuro */
            padding: 60px 0; /* Espaciado superior e inferior */
            display: flex; /* Flexbox para la alineación horizontal */
            justify-content: center; /* Centra el contenido horizontalmente */
            align-items: center; /* Centra el contenido verticalmente */
            color: #fff; /* Color de texto blanco */
        }

        .contact-container {
            max-width: 1200px; /* Ancho máximo del contenedor */
            display: flex; /* Flexbox para la alineación horizontal */
            justify-content: space-between; /* Espacio entre los elementos */
            align-items: center; /* Alinea los elementos verticalmente */
            width: 100%; /* Ancho completo del contenedor */
            padding: 0 20px; /* Padding lateral */
        }

        .contact-info {
            background-color: #fff; /* Fondo blanco para el cuadro de contacto */
            color: #000; /* Color de texto negro */
            padding: 40px; /* Espaciado interno */
            border-radius: 10px; /* Bordes redondeados */
            width: 40%; /* Ancho del cuadro de contacto */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
        }

        .contact-info h2 {
            margin-bottom: 20px; /* Espaciado inferior del título */
            font-size: 24px; /* Tamaño de fuente del título */
            font-weight: 700; /* Grosor del título */
        }

        .contact-info ul {
            list-style: none; /* Elimina el estilo de lista */
            padding: 0; /* Sin padding */
            margin: 0; /* Sin margen */
        }

        .contact-info li {
            display: flex; /* Flexbox para la alineación de icono y texto */
            align-items: center; /* Alinea verticalmente */
            margin-bottom: 20px; /* Espaciado inferior entre elementos */
        }

        .contact-info li img {
            width: 40px; /* Ancho del icono */
            height: 40px; /* Altura del icono */
            background-color: #55c0f2; /* Color de fondo del icono */
            padding: 10px; /* Espaciado interno del icono */
            border-radius: 50%; /* Bordes redondeados para icono circular */
            margin-right: 15px; /* Espaciado derecho del icono */
        }

        .contact-info strong {
            font-weight: bold; /* Negrita para los títulos */
            display: block; /* Cada título en una nueva línea */
            margin-bottom: 5px; /* Espaciado inferior de los títulos */
        }

        .contact-map {
            width: 55%; /* Ancho del mapa */
            border-radius: 10px; /* Bordes redondeados del mapa */
            overflow: hidden; /* Oculta el desbordamiento */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
            height: 400px; /* Altura fija del mapa */
        }

        .contact-map iframe {
            width: 100%; /* Ancho completo del iframe */
            height: 100%; /* Altura completa del iframe */
            border: none; /* Sin borde */
        }

        /* Media queries para pantallas más pequeñas */
        @media (max-width: 768px) {
            .contact-container {
                flex-direction: column; /* Cambia la dirección del contenedor a columna */
                align-items: center; /* Centra los elementos en pantallas pequeñas */
            }

            .contact-info {
                width: 90%; /* Ancho del cuadro de contacto en pantallas pequeñas */
                margin-bottom: 20px; /* Espaciado inferior en pantallas pequeñas */
            }

            .contact-map {
                width: 100%; /* Ancho completo del mapa en pantallas pequeñas */
                height: 300px; /* Altura ajustada para pantallas pequeñas */
            }
        }
    

/* Estilos para el pie de página */
.footer {
  background-color: #0d47a1; /* Color de fondo azul */
  color: #ffffff; /* Color de texto blanco */
  padding: 30px 20px; /* Espaciado interno */
  text-align: center; /* Centrado del texto */
}

.footer-container {
  display: flex; /* Flexbox para alinear las columnas horizontalmente */
  flex-wrap: wrap; /* Ajuste en pantallas pequeñas */
  justify-content: space-around; /* Espacio alrededor de las columnas */
  max-width: 1200px; /* Ancho máximo del contenedor */
  margin: 0 auto; /* Centrado del contenedor */
}

.footer-logo {
  flex: 1; /* Flexibilidad para la columna del logo */
  margin-bottom: 20px; /* Espaciado inferior */
}

.footer-logo img {
  max-width: 150px; /* Ancho máximo del logo */
}

.footer-column {
  flex: 1; /* Flexibilidad para las columnas de contenido */
  margin-bottom: 20px; /* Espaciado inferior */
}

.footer-column h3 {
  font-size: 18px; /* Tamaño de fuente del título */
  margin-bottom: 15px; /* Espaciado inferior */
  color: #ffffff; /* Color del texto del título */
}

.footer-menu, .footer-contact, .footer-payment {
  list-style: none; /* Sin estilo de lista */
  padding: 0; /* Sin padding */
  margin: 0; /* Sin margen */
  text-align: left; /* Texto alineado a la izquierda */
}

.footer-menu li, .footer-contact li, .footer-payment li {
  margin-bottom: 10px; /* Espaciado inferior entre elementos */
}

.footer-menu li a {
  color: #ffffff; /* Color de los enlaces */
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s ease; /* Transición suave */
}

.footer-menu li a:hover {
  color: #ff6f00; /* Color al pasar el cursor */
}

.dashicons {
  margin-right: 8px; /* Espaciado a la derecha de los íconos */
  vertical-align: middle; /* Alineación vertical de los íconos */
}

/* Créditos del pie de página */
.footer-credits {
  margin-top: 20px; /* Espaciado superior */
  font-size: 14px; /* Tamaño de fuente pequeño */
  color: #ffffff; /* Color del texto */
}

.footer-credits hr {
  border-color: rgba(255, 255, 255, 0.2); /* Color de la línea divisoria */
  margin: 10px 0; /* Espaciado superior e inferior */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Alineación en columna para pantallas pequeñas */
    text-align: center; /* Centrado del texto */
  }

  .footer-column {
    margin-bottom: 20px; /* Espaciado inferior en columnas */
  }

  .footer-menu, .footer-contact, .footer-payment {
    text-align: center; /* Centrado del texto en pantallas pequeñas */
  }
}

/* Estilos generales para los botones de contacto */
.contact-button {
  position: fixed;
  left: 10px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Estilos específicos para cada botón */
#whatsapp-button {
  bottom: 120px;
  background-color: #25D366; /* Fondo verde de WhatsApp */
}

#phone-button {
  bottom: 40px;
  background-color: #FFD700; /* Fondo amarillo para la llamada */
}

/* Estilos para los iconos dentro de los botones */
.contact-button img {
  width: 60%; /* Ajusta el tamaño del icono */
  height: auto;
}

/* Estilos para la notificación */
.notification-badge {
  position: absolute;
  top: -5px;  /* Ajusta la posición vertical */
  right: -5px; /* Ajusta la posición horizontal */
  width: 22px;
  height: 22px;
  background-color: red;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

/* Estilos de herramientas centrar */

.centrado {
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}