* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI';
  }
  
  .titulo-superpuesto {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para mejorar la legibilidad */
    color: #fff; /* Color del texto */
    padding: 20px 30px;
    border-radius: 10px;
    font-size: 4em;
    text-align: center;
 }
 .sucursal-imagen {
   position: relative;
    text-align: center;
    margin-bottom: 10px;
 }
 
 .sucursal-imagen img {
    width: 100%; /* Ajusta el ancho de la imagen */
    height: 300px; /* Ajusta la altura de la imagen */
    border-radius: 10px;
    object-fit: cover; /* Asegura que la imagen mantenga su proporción */
 }
 
 .sucursal-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     padding: 50px;
     background-color: #fff; /* Fondo blanco */
     color: #333;
     border: 10px solid #ddd; /* Borde */
     border-radius: 10px; /* Bordes redondeados */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
     margin: -15px 0; /* Margen superior e inferior */
     background-color: #ddd;
  }
  
  
  .sucursal-mapa {
     flex: 1;
     padding: 20px;
  }

  
  .sucursal-datos {
     flex: 1;
     padding: 20px;
     text-align: justify; /* Justificar el texto */
     position: relative;
  }
  .titulo-datos {
    text-align: center; /* Centrar el texto */
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
 }
 
  .sucursal-datos h3 {
     font-size: 1.5em;
     margin-bottom: 10px;
  }
  .sucursal-datos .dato {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
 }
 
 .sucursal-datos .dato svg {
    width: 50px; /* Ajusta el tamaño del ícono */
    height: 50px; /* Ajusta el tamaño del ícono */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
 }
  
  .sucursal-datos p {
     font-size: 1em;
     margin: 5px 0;
  }

  #tienda {
   padding: 20px;
}

  .tienda-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     padding: 50px;
     background-color: #fff; /* Fondo blanco */
     color: #333;
     border: 10px solid #ddd; /* Borde */
     border-radius: 10px; /* Bordes redondeados */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
     margin: 20px 0; /* Margen superior e inferior */
     background-color: #ddd;
  }
  
  .tienda-mapa {
     flex: 1;
     padding: 20px;
  }
  
  .tienda-datos {
     flex: 1;
     padding: 20px;
  }
  .tienda-datos h3 {
     font-size: 1.5em;
     margin-bottom: 10px;
  }
  
  .tienda-datos p {
     font-size: 1em;
     margin: 5px 0;
  }
  .sucursal-datos p, .tienda-datos p {
     text-align: justify; /* Justificar el texto */
 }
 #sucursales h2, #tienda h2 {
    font-size: 2.5em;
    color: #ffffff; /* Color dorado */
    text-align: center;
    margin-bottom: 20px;
 }
 /* Estilos para los contenedores de las secciones */
 #sucursales, #tienda {
    padding: 0;
    background-color: #f9f9f9;
 }
 
  .footer {
     background-color: #000000; /* Cambia a #000 para negro o #0000FF para azul */
     color: #fff;
     padding: 20px;
     text-align: center;
  }
  
  .footer-container {
     max-width: 1200px;
     margin: 0 auto;
  }
  
  .footer h2 {
     font-size: 2em;
     margin-bottom: 10px;
  }
  
  .footer p {
     font-size: 1em;
     margin: 5px 0;
  }
  .redes-sociales .icono {
   display: inline-block;
   width: 40px; /* Tamaño del ícono */
   height: 40px;
   transition: transform 0.3s ease; /* Efecto suave al pasar el mouse */
}

.redes-sociales .icono img {
   width: 100%; /* Asegura que la imagen ocupe todo el contenedor */
   height: 100%;
   object-fit: cover; /* Ajusta la imagen al contenedor */
   border-radius: 50%; /* Hace los íconos circulares */
}

.redes-sociales .icono:hover {
   transform: scale(1.1); /* Aumenta ligeramente el tamaño al pasar el mouse */
}

  .separador {
    width: 100%;
    height: 2px; /* Ajusta la altura del separador según tus necesidades */
    background-color: #333; /* Color del separador */
    margin: 20px 0; /* Margen superior e inferior */
 }
 
 .separador-triangulos {
    width: 100%;
    height: 0;
    border-left: 50% solid transparent;
    border-right: 50% solid transparent;
    border-bottom: 20px solid #ffd900; /* Color del primer triángulo */
    position: relative;
    margin: 20px 0; /* Margen superior e inferior */
 }

@media (max-width: 500px) {
    .titulo-superpuesto {
        font-size: 1.5em; /* Ajusta el tamaño del texto */
        padding: 10px 20px; /* Reduce el padding */
    }

    .sucursal-container, .tienda-container {
        padding: 10px; /* Reduce el padding */
    }

    .sucursal-mapa, .sucursal-datos, .tienda-mapa, .tienda-datos {
        padding: 10px; /* Reduce el padding */
    }
    .mapa-iframe {
        width: 100%; /* Ajusta el ancho del iframe */
        height: 200px; /* Ajusta la altura del iframe */
    } 
    .mapas-iframe {
        width: 100%; /* Ajusta el ancho del iframe */
        height: 250px; /* Ajusta la altura del iframe */
    }
    .titulo-datos {
        font-size: 1.2em; /* Ajusta el tamaño del texto */
    }

    .sucursal-datos h3, .tienda-datos h3 {
        font-size: 1em; /* Ajusta el tamaño del texto */
    }
    .sucursal-datos .dato svg, .tienda-datos .dato svg {
        width: 30px; /* Ajusta el tamaño del ícono */
        height: 30px; /* Ajusta el tamaño del ícono */
    }

    .footer h2 {
        font-size: 1.2em; /* Ajusta el tamaño del texto */
    }

    .footer-social svg {
        width: 25px; /* Ajusta el tamaño según tus necesidades */
    }
}

@media (max-width: 700px) {
   .titulo-superpuesto {
       font-size: 1.5em; /* Ajusta el tamaño del texto */
       padding: 10px 20px; /* Reduce el padding */
   }

   .sucursal-container, .tienda-container {
       padding: 10px; /* Reduce el padding */
   }

   .sucursal-mapa, .sucursal-datos, .tienda-mapa, .tienda-datos {
       padding: 10px; /* Reduce el padding */
   }
   .mapa-iframe {
       width: 100%; /* Ajusta el ancho del iframe */
       height: 200px; /* Ajusta la altura del iframe */
   } 
   .mapas-iframe {
       width: 100%; /* Ajusta el ancho del iframe */
       height: 250px; /* Ajusta la altura del iframe */
   }
   .titulo-datos {
       font-size: 1.2em; /* Ajusta el tamaño del texto */
   }

   .sucursal-datos h3, .tienda-datos h3 {
       font-size: 1em; /* Ajusta el tamaño del texto */
   }
   .sucursal-datos .dato svg, .tienda-datos .dato svg {
       width: 30px; /* Ajusta el tamaño del ícono */
       height: 30px; /* Ajusta el tamaño del ícono */
   }

   .footer h2 {
       font-size: 1.2em; /* Ajusta el tamaño del texto */
   }

   .footer-social svg {
       width: 25px; /* Ajusta el tamaño según tus necesidades */
   }
}
@media (max-width: 400px) {
    .sucursal-container,
    .tienda-container {
        flex-direction: column !important;
        align-items: stretch;
        padding: 8px;
        gap: 10px;
    }
    .sucursal-mapa,
    .tienda-mapa {
        width: 100% !important;
        min-width: 0;
    }
    .mapa-iframe {
        width: 100% !important;
        min-width: 0;
        height: 180px !important;
    }
    .sucursal-datos,
    .tienda-datos {
        width: 100% !important;
        min-width: 0;
        font-size: 0.95em;
        padding: 0 2px;
        word-break: break-word;
    }
    .dato p {
        font-size: 0.95em;
        word-break: break-word;
        margin: 0 0 8px 0;
    }
    .dato svg {
        width: 22px !important;
        height: 22px !important;
        vertical-align: middle;
    }
    .titulo-datos {
        font-size: 1.1em;
    }
}

.sucursal-datos a {
    text-decoration: none;
    color: #333; /* O el color que prefieras */
    font-weight: 500;
}

.sucursal-datos a:visited {
    color: #333;
}