/* Fondo negro y texto blanco sin romper el diseño */
html, body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Estilo para los botones (inicio, galería, preguntas, contacto) */
.MenuItem .MenuItemLabel p {
    color: #000000 !important; /* Texto negro */
    font-size: 14px; /* Tamaño de fuente adecuado */
    margin: 0; /* Eliminar márgenes */
    line-height: normal; /* Ajustar la altura de la línea */
    display: flex; /* Usar flexbox para centrar el texto */
    justify-content: center; /* Centrar el texto horizontalmente */
    align-items: center; /* Centrar el texto verticalmente */
    height: 100%; /* Asegurar que el texto ocupe toda la altura del contenedor */
    white-space: nowrap; /* Evitar que el texto se divida o se corte */
}

/* Fondo gris claro para todos los botones */
.MenuItem {
    background-color: #d3d3d3; /* Gris claro para el fondo */
    color: #000000; /* Texto negro */
    padding: 10px 20px; /* Espaciado adecuado para que no se corte el texto */
    border-radius: 9px; /* Bordes menos redondeados */
    text-decoration: none; /* Eliminar subrayado */
    display: inline-flex; /* Usar flexbox para alinear el contenido */
    justify-content: center; /* Asegurar que el contenido dentro del botón esté centrado */
    align-items: center; /* Asegurar que el contenido esté centrado verticalmente */
    font-weight: bold; /* Hacer el texto más destacado */
    transition: all 0.3s ease; /* Transición suave para los efectos hover */
    width: auto; /* Asegurarse de que el tamaño de los botones sea adecuado */
}

/* Cambiar el fondo a gris más oscuro cuando el puntero pasa sobre el botón (hover) */
.MenuItem:hover {
    background-color: #a9a9a9; /* Gris oscuro al pasar el puntero */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transform: scale(1.05); /* Efecto de agrandar un poco el botón */
}

/* Mejorar la legibilidad en dispositivos móviles */
@media (max-width: 768px) {
    .MenuItem {
        font-size: 16px; /* Aumentar el tamaño del texto en dispositivos pequeños */
        padding: 12px 30px; /* Hacer más grande el área del botón */
        width: 100%; /* Asegurarse de que el botón ocupe todo el ancho disponible */
    }

    /* Ajustar el tamaño del texto para evitar que se corte en botones pequeños */
    .MenuItem .MenuItemLabel p {
        font-size: 14px; /* Reducir ligeramente el tamaño del texto si es necesario */
        padding: 5px 0; /* Asegurar que haya suficiente espacio para el texto */
    }
}

/* Asegurarse que los enlaces tengan el color adecuado */
a {
    color: #ff5733 !important; /* Naranja claro */
    text-decoration: none !important; /* Sin subrayado */
}

/* Cambiar el color de los enlaces cuando el usuario pasa el ratón (hover) */
a:hover {
    color: #d3d3d3 !important; /* Gris claro */
    text-decoration: underline !important; /* Subrayado al pasar el ratón */
}

__________

/* Asegurarse que todos los títulos tengan un tamaño adecuado */
h1, h2, h3, h4, h5, h6 {
    font-size: 16px; /* Ajusta el tamaño de acuerdo a tu diseño */
}

/* Asegurarse que todos los títulos tengan un tamaño adecuado */
h1, h2, h3, h4, h5, h6 {
    font-size: 16px; /* Asegura que los encabezados sean legibles */
}

/* Asegurarse de que todos los párrafos dentro del bloque tengan un tamaño adecuado */
#u12468-40 p {
    font-size: 14px; /* Asegura que el texto sea mayor a 12px para ser legible */
    line-height: 1.6; /* Mejora el espaciado entre las líneas para facilitar la lectura */
}

/* Aumentar los elementos con tamaño de 10px a 12px */
#u12468-10, #u12468-12, #u12468-14, #u12468-16, #u12468-18,
#u12468-2, #u12468-20, #u12468-22, #u12468-25, #u12468-30, 
#u12468-32, #u12468-33, #u12468-36, #u12468-4, #u12468-6, 
#u12468-8, #u12469-10, #u12469-12, #u12469-14, #u12469-16, 
#u12469-18, #u12469-2, #u12469-21, #u12469-27, #u12469-29,
#u12469-31, #u12469-32, #u12469-34, #u12469-37, #u12469-4,
#u12469-6, #u12469-8, #u12470-10, #u12470-12, #u12470-14,
#u12470-16, #u12470-18, #u12470-2, #u12470-20, #u12470-24,
#u12470-30, #u12470-32, #u12470-33, #u12470-35, #u12470-4,
#u12470-6, #u12470-8, #u12471-10, #u12471-12, #u12471-14,
#u12471-16, #u12471-18, #u12471-2, #u12471-24, #u12471-29,
#u12471-31, #u12471-35, #u12471-37, #u12471-4, #u12471-40,
#u12471-6, #u12471-8, #u12472-30, #u21018-10, #u21018-12,
#u21018-14, #u21018-19, #u21018-2, #u21018-23, #u21018-24,
#u21018-26, #u21018-27, #u21018-29, #u21018-32, #u21018-4,
#u21018-6, #u21018-8 {
    font-size: 12px; /* Asegurar que el texto no sea más pequeño que 12px */
}

/* Para los elementos que están con un tamaño de 9px */
#u12470-38, #u12471-33, #u12472-10, #u12472-12, #u12472-14, 
#u12472-16, #u12472-18, #u12472-2, #u12472-20, #u12472-22, 
#u12472-24, #u12472-28, #u12472-33, #u12472-34, #u12472-37, 
#u12472-4, #u12472-40, #u12472-6, #u12472-8 {
    font-size: 12px; /* Aumentar el tamaño de estos textos a 12px */
}

____ Pquete mini

/* Ajustar el color del texto de los párrafos de esta sección */
#u21018-34 p {
    color: #ffffff; /* Texto blanco por defecto */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Colocar el texto de "5 horas de servicio" y "no incluye pista" en rojo */
#u21018-26 {
    color: #ff0000; /* Texto rojo */
    font-weight: bold; /* Negrita para resaltar */
}

/* Colocar el texto de 'PROMOCIÓN' en color diferente */
#u21018-16 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Naranja para resaltar 'PROMOCIÓN' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u21018-34 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1; /* Ajustar la altura de la línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }
}


___ paquete basic 1


/* Ajustar el color del texto a blanco para los párrafos de esta sección */
#u12471-42 p {
    color: #ffffff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Ajustar el color de texto para el enlace 'Precio Promoción' */
#u12471-21 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Color de texto para resaltar 'PRECIO PROMOCION' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u12471-42 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1; /* Ajustar la altura de la línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }
}


_____ paquete 2


/* Ajustar el color del texto a blanco para los párrafos de esta sección */
#u12470-40 p {
    color: #ffffff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1.5; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Ajustar el color de texto para el enlace 'Precio Promoción' */
#u12470-23 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Color de texto para resaltar 'PRECIO PROMOCIÓN' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u12470-40 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1.4; /* Ajustar la altura de la línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }
}


____ paquete led basico 


/* Ajustar el color del texto a blanco para los párrafos de esta sección */
#u12469-39 p {
    color: #ffffff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Ajustar el color de texto para el enlace 'Precio Promoción' */
#u12469-20 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Color de texto para resaltar 'PRECIO PROMOCION' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u12469-39 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1; /* Ajustar la altura de la línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }
}




control del texto del paquete led

/* Ajustar el color del texto a blanco para los párrafos de esta sección */
#u12468-40 p {
    color: #ffffff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Ajustar el color de texto para el enlace 'Precio Promoción' */
#u12468-24 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Color de texto para resaltar 'PRECIO PROMOCION' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u12468-40 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1; /* Ajustar la altura de línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }
}

_____paquete pluss

/* Ajustar el color del texto a blanco para los párrafos de esta sección */
#u12472-42 p {
    color: #ffffff; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    line-height: 1; /* Reducir el espacio entre las líneas */
    margin: 5px 0; /* Añadir un margen vertical entre los párrafos */
}

/* Ajustar el color de texto para el enlace 'Precio Promoción' */
#u12472-27 {
    font-weight: bold; /* Hacer el texto en negrita */
    color: #ff5733; /* Color de texto para resaltar 'PRECIO PROMOCION' */
}

/* Mejorar la legibilidad y el diseño en dispositivos móviles */
@media (max-width: 768px) {
    #u12472-42 p {
        font-size: 12px; /* Reducir el tamaño de la fuente en dispositivos pequeños */
        line-height: 1; /* Ajustar la altura de la línea para mejor legibilidad */
        margin: 3px 0; /* Ajustar el margen para que esté más compacto */
    }


_____ este son los botones de paquete Paquete Led   |   Paquete Basico Led   |   Paquete 2   |   Paquete 1     paquete Plus
/* Asegurar que los enlaces dentro de los párrafos tengan color blanco */
#u8784-20 a,
#pu384 a,
#u7014-17 a,
#u9231-14 a,
#u12469-39 a,
#u21018-34 a,
#u12471-42 a,
#u12470-40 a,
#u12472-42 a {
    color: #ffffff !important; /* Texto blanco */
    text-decoration: none !important; /* Eliminar subrayado */
    font-weight: bold !important; /* Texto en negrita */
}

/* Para asegurarse que estos enlaces tengan el color correcto */
#u8784-20 a:link,
#pu384 a:link,
#u7014-17 a:link,
#u9231-14 a:link,
#u12469-39 a:link,
#u21018-34 a:link,
#u12471-42 a:link,
#u12470-40 a:link,
#u12472-42 a:link {
    color: #ffffff !important; /* Asegurarse que los enlaces tengan color blanco */
}

/* Cambiar el color de los enlaces cuando el usuario pasa el ratón (hover) */
#u8784-20 a:hover,
#pu384 a:hover,
#u7014-17 a:hover,
#u9231-14 a:hover,
#u12469-39 a:hover,
#u21018-34 a:hover,
#u12471-42 a:hover,
#u12470-40 a:hover,
#u12472-42 a:hover {
    color: #d3d3d3 !important; /* Gris claro al pasar el ratón */
    text-decoration: underline !important; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

/* Para que los enlaces no estén afectando por otras reglas de color global */
a {
    color: inherit !important; /* Asegurarse de que no se sobreescriban los colores */
    text-decoration: inherit !important;
}

_____

/* Estilo para los enlaces dentro de los párrafos en esta sección */
#u7014-17 a,
#u9231-14 a {
    color: #ffffff; /* Texto blanco */
    text-decoration: none; /* Eliminar subrayado */
    font-weight: bold; /* Texto en negrita */
}

/* Cambiar el color de los enlaces cuando el usuario pasa el ratón (hover) */
#u7014-17 a:hover,
#u9231-14 a:hover {
    color: #d3d3d3; /* Gris claro al pasar el ratón */
    text-decoration: underline; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

/* Ajustar el espaciado entre los enlaces */
#u7014-17, #u9231-14 {
    font-size: 16px; /* Tamaño de fuente adecuado */
    line-height: 1.5; /* Ajustar la altura de línea para mejor legibilidad */
    margin: 0;
}


_______________

/* Sobrescribir color de los enlaces específicos (botones) */
#u8784-20 a,
#u8784-20 a:link,
#u8784-20 a:visited {
    color: #ffffff !important; /* Establecer el color blanco */
    text-decoration: none !important; /* Eliminar el subrayado */
}

/* Cambiar el color de los enlaces cuando el usuario pasa el ratón (hover) */
#u8784-20 a:hover {
    color: #d3d3d3 !important; /* Gris claro al pasar el ratón */
    text-decoration: underline !important; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

/* Establecer el color de los enlaces en el pie de página */
#u272 a {
    color: #ffffff !important; /* Color blanco para los enlaces */
    text-decoration: none !important; /* Eliminar subrayado */
}

/* Cambiar color de los enlaces en el pie de página cuando el ratón pasa sobre ellos */
#u272 a:hover {
    color: #d3d3d3 !important; /* Gris claro al pasar el ratón */
    text-decoration: underline !important; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

_______

/* Estilo para los botones (inicio, galería, preguntas, contacto) */
.MenuItem .MenuItemLabel p {
    color: #ffffff !important; /* Texto blanco */
    font-size: 14px; /* Tamaño de fuente adecuado */
    margin: 0; /* Eliminar márgenes */
    line-height: normal; /* Ajustar la altura de la línea */
    display: flex; /* Usar flexbox para centrar el texto */
    justify-content: center; /* Centrar el texto horizontalmente */
    align-items: center; /* Centrar el texto verticalmente */
    height: 100%; /* Asegurar que el texto ocupe toda la altura del contenedor */
    white-space: nowrap; /* Evitar que el texto se divida o se corte */
}

/* Fondo gris claro para todos los botones */
.MenuItem {
    background-color: #d3d3d3; /* Gris claro para el fondo */
    color: #000000; /* Texto negro */
    padding: 10px 20px; /* Espaciado adecuado para que no se corte el texto */
    border-radius: 9px; /* Bordes menos redondeados */
    text-decoration: none; /* Eliminar subrayado */
    display: inline-flex; /* Usar flexbox para alinear el contenido */
    justify-content: center; /* Asegurar que el contenido dentro del botón esté centrado */
    align-items: center; /* Asegurar que el contenido esté centrado verticalmente */
    font-weight: bold; /* Hacer el texto más destacado */
    transition: all 0.3s ease; /* Transición suave para los efectos hover */
    width: auto; /* Asegurarse de que el tamaño de los botones sea adecuado */
}

/* Cambiar el fondo a gris más oscuro cuando el puntero pasa sobre el botón (hover) */
.MenuItem:hover {
    background-color: #a9a9a9; /* Gris oscuro al pasar el puntero */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
    transform: scale(1.05); /* Efecto de agrandar un poco el botón */
}

/* Mejorar la legibilidad en dispositivos móviles */
@media (max-width: 768px) {
    .MenuItem {
        font-size: 16px; /* Aumentar el tamaño del texto en dispositivos pequeños */
        padding: 12px 30px; /* Hacer más grande el área del botón */
        width: 100%; /* Asegurarse de que el botón ocupe todo el ancho disponible */
    }

    /* Ajustar el tamaño del texto para evitar que se corte en botones pequeños */
    .MenuItem .MenuItemLabel p {
        font-size: 14px; /* Reducir ligeramente el tamaño del texto si es necesario */
        padding: 5px 0; /* Asegurar que haya suficiente espacio para el texto */
    }
}

/* Color blanco para los enlaces dentro de los botones */
#u8784-20 a,
#pu384 a,
#u7014-17 a,
#u9231-14 a,
#u12469-39 a,
#u21018-34 a,
#u12471-42 a,
#u12470-40 a,
#u12472-42 a {
    color: #ffffff !important; /* Texto blanco */
    text-decoration: none !important; /* Eliminar subrayado */
    font-weight: bold !important; /* Texto en negrita */
}

/* Cambiar el color de los enlaces cuando el usuario pasa el ratón (hover) */
#u8784-20 a:hover,
#pu384 a:hover,
#u7014-17 a:hover,
#u9231-14 a:hover,
#u12469-39 a:hover,
#u21018-34 a:hover,
#u12471-42 a:hover,
#u12470-40 a:hover,
#u12472-42 a:hover {
    color: #d3d3d3 !important; /* Gris claro al pasar el ratón */
    text-decoration: underline !important; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

/* Asegurarse de que los enlaces dentro de u8784-20 tengan color blanco por defecto */
#u8784-20 a:link,
#u8784-20 a:visited {
    color: #ffffff !important; /* Texto blanco por defecto */
}

/* Para asegurarse que estos enlaces tengan el color correcto */
#u8784-20 a:hover {
    color: #d3d3d3 !important; /* Gris claro al pasar el ratón */
    text-decoration: underline !important; /* Subrayar los enlaces cuando el ratón pasa por encima */
}

/* Para que los enlaces no estén afectando por otras reglas de color global */
a {
    color: inherit !important; /* Asegurarse de que no se sobreescriban los colores */
    text-decoration: inherit !important;
}
______


a.enlace-blanco {
  color: white !important; /* Esto asegura que se aplique el color blanco */
  text-decoration: none; /* Opcional, para eliminar el subrayado si lo prefieres */
}

________

/* Estilos de la Galería */
#galeria {
  text-align: center;
}

#galeria h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #294457;
}

/* Contenedor de la galería */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Asegura que siempre haya al menos 250px por imagen */
  gap: 20px;
  justify-items: center; /* Centra las imágenes dentro de su contenedor */
  padding: 20px; /* Agrega un poco de espacio dentro de la galería */
}

/* Estilo para las imágenes */
.gallery img {
  width: 100%;  /* Hace que las imágenes ocupen todo el ancho disponible en su celda */
  height: auto;  /* Mantiene las proporciones de la imagen */
  border-radius: 10px;  /* Bordes redondeados */
  transition: transform 0.3s ease; /* Reduce la transición a solo el transform */
  object-fit: cover; /* Esto asegura que la imagen no se deforme */
}

/* Efecto de hover sobre las imágenes (solo en pantallas grandes) */
@media (min-width: 768px) {
  .gallery img:hover {
    transform: scale(1.05);  /* Aumenta un poco el tamaño */
  }
}

/* Aseguramos que la galería sea responsiva */
@media screen and (max-width: 768px) {
  /* Para pantallas más pequeñas, 2 o 1 imágenes por fila */
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));  /* Las imágenes se ajustan a mínimo 300px */
  }
}

@media screen and (max-width: 480px) {
  /* Para pantallas muy pequeñas (móviles), una imagen por fila */
  .gallery {
    grid-template-columns: 1fr;  /* Una imagen por fila */
  }

  /* Para móviles, hacemos las imágenes más pequeñas para evitar que se vean forzadas */
  .gallery img {
    max-width: 90%;  /* Las imágenes no ocupan el 100% del ancho disponible en pantallas móviles */
    height: auto;  /* Mantiene las proporciones de la imagen */
  }
}

/* Lazy loading para mejorar la carga de las imágenes */
.gallery img {
  loading: lazy; /* Solo carga imágenes cuando estén visibles */
}
______