/* descrpcion pagina */
.contenedor-sobre-nosotros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px;
  gap: 40px; 
}

.image {
  flex: 1;
  max-width: 30%;
}

.contenido-textos {
  flex: 2;
  padding-left: 20px;
  text-align: justify;
}

/* Ajustes para pantallas más pequeñas */
@media (max-width: 768px) {
  .contenedor-sobre-nosotros {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }
  
  .image {
    max-width: 100%;
    margin: 0; /* Elimina el margen en pantallas pequeñas */
  }
  
  .contenido-textos {
    padding-left: 0;
    padding-top: 10px;
    margin: 0; /* Elimina el margen en pantallas pequeñas */
  }
}



.contenido-text h3{
    margin-bottom: 15px;
}

.texto_h1{
    font-family:Montserrat, sans-serif;
    font-size: 50px;
    background: #84c474;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    padding: 2px;
    margin-right: 5px;
    font-weight: 300; /* Medium */
    font-style: italic;
}

.contenido-textos h3 span{
    font-family:Montserrat Italic, sans-serif;
    background:#8ac66f;
    color: #fdf9f9;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .5);
    margin-right: 5px;

}

.contenido-textos {
    font-family: Montserrat Medium Italic, sans-serif;
    font-size: 17.5px;
    color: #3a4268;
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;

}

.contenido-texto {
    font-family: Montserrat Medium Italic, sans-serif;
    font-size: 17.5px;
    color: #777777;
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;
    transition: transform 0.3s ease; /* Transición suave para el cambio de transformaciones */
}


.contenido-texto:hover {
      animation: saltar 0.6s ease; /* Aplica la animación al pasar el cursor */
    }

@keyframes saltar {
      0% {
        transform: translateY(0); /* Posición inicial */
      }
      50% {
        transform: translateY(-10px); /* Eleva el texto 10 píxeles */
      }
      100% {
        transform: translateY(0); /* Regresa a la posición inicial */
      }
    }


/* modales  */



/* Contenedor de modales */
.modal-co {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap; /* Permite que los modales se envuelvan en múltiples líneas si es necesario */
    justify-content: center; /* Centra los modales horizontalmente */
    gap: 40px; /* Espaciado entre modales */
    padding: 20px;
    box-sizing: border-box;
}

/* Estilo para cada modal individual */
.modal-content {
    background-color: #fff;
    border: 2px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    max-width: 320px; /* Ancho máximo del modal */
    width: 100%; /* Asegura que el modal ocupe todo el ancho disponible */
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

     /* Transición suave para el cambio de transformaciones */



.modal-content:hover {
      animation: saltar 0.6s ease; /* Aplica la animación al pasar el cursor */
    }

/* Muestra el modal cuando se le da la clase 'show' */
.modal-content.show {
    display: block;
}

/* Consultas de medios para pantallas pequeñas */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%; /* El modal ocupa el ancho completo en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    .modal-co {
        padding: 10px; /* Reduce el padding en pantallas más pequeñas */
        gap: 10px; /* Reduce el espaciado entre modales en pantallas más pequeñas */
    }

    .modal-content {
        max-width: 100%; /* Asegura que el modal no exceda el ancho de la pantalla */
        padding: 15px; /* Reduce el padding interno del modal */
    }
}


.texto_titulo_modal {
    font-family: Montserrat, sans-serif;
    display: flex;
    align-items: center; /* Centra verticalmente el ícono y el texto */
    font-size: 1.3em; /* Ajusta el tamaño de la fuente si es necesario */
    font-weight: 300; /* Medium */
    font-style: italic;
}

.iconos {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    font-size: 2em; /* Ajusta el tamaño del ícono */
    color:#b5c53f; /* Ajusta el color del ícono si es necesario */
    font-style: normal
}


.texto_modal{


  font-family: Montserrat ExtraLight, sans-serif;
  position: relative; /* Cambiado de 'absolute' a 'relative' */
  width: 100%; /* Asegura que el elemento se ajuste al contenedor */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.71429;
  color:#777777;
  text-align: left; /* Usa 'justify' si tienes un ancho definido */
  padding: 10px; /* Añade algo de espacio alrededor del texto */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  margin-left: 25px;


}




/* imagenes modales */
.imagenes-co {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap; /* Permite que los modales se envuelvan en múltiples líneas si es necesario */
    justify-content: center; /* Centra los modales horizontalmente */
    gap: 40px; /* Espaciado entre modales */
    padding: 20px;
    box-sizing: border-box;
}

/* Estilo para cada modal individual */
.imagenes-content {
    padding: 20px;
    max-width: 320px; /* Ancho máximo del modal */
    width: 100%; /* Asegura que el modal ocupe todo el ancho disponible */
    box-sizing: border-box;
   

}

     /* Transición suave para el cambio de transformaciones */

.imagen{

   transition: transform 0.3s ease;
}

.imagen:hover {
      animation: saltar 0.6s ease; /* Aplica la animación al pasar el cursor */
    }

/* Muestra el modal cuando se le da la clase 'show' */
.imagenes-content.show {
    display: none;
}

/* Consultas de medios para pantallas pequeñas */
@media (max-width: 768px) {
    .imagenes-content {
        max-width: 100%; /* El modal ocupa el ancho completo en pantallas más pequeñas */
    }
}

@media (max-width: 480px) {
    .imagenes-co {
        padding: 10px; /* Reduce el padding en pantallas más pequeñas */
        gap: 10px; /* Reduce el espaciado entre modales en pantallas más pequeñas */
    }

    .imagenes-content {
        max-width: 100%; /* Asegura que el modal no exceda el ancho de la pantalla */
        padding: 15px; /* Reduce el padding interno del modal */
    }
}


.texto_titulo_imagenes {
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    font-size: 1.3em; /* Ajusta el tamaño de la fuente si es necesario */
    font-weight: 300; /* Medium */
    font-style: italic;
}




.texto_imagenes{
  font-family: 'Montserrat ExtraLight', sans-serif;
  position: relative; /* Cambiado de 'absolute' a 'relative' */
  width: 100%; /* Asegura que el elemento se ajuste al contenedor */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.71429;
  color:#777777;
  text-align: center; /* Usa 'justify' si tienes un ancho definido */
  padding: 10px; /* Añade algo de espacio alrededor del texto */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */


}

/* Contenedor de la imagen */
.image-cont {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* Establece una altura mínima para asegurar que la imagen se vea bien en dispositivos pequeños */
    min-height: 200px; /* Ajusta según sea necesario */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* Color de fondo opcional */
}

/* Imagen dentro del contenedor */
.img_res {
    width: 100%; /* La imagen ocupará el 100% del ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    object-fit: contain; /* Ajusta la imagen para que se muestre completa */
}

/* Medios de consulta */
@media (min-width: 1200px) { /* Pantallas super grandes */
    .image-cont {
        min-height: 300px; /* Ajusta según sea necesario para pantallas grandes */
    }
}

@media (max-width: 768px) {
    .image-cont {
        min-height: auto; /* Ajusta según sea necesario para pantallas medianas */
    }
}

@media (max-width: 480px) {
    .image-cont {
        min-height: auto; /* Ajusta según sea necesario para pantallas pequeñas */
    }
}



/* Contenedor para las imágenes */
/* Contenedor para las imágenes */
.contenedor_imagenes {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes se envuelvan en lugar de desbordarse */
    justify-content: center;
    gap: 60px; /* Espacio entre imágenes */
    padding: 20px; /* Padding opcional para mejorar el diseño deseado */
    position: relative; /* Necesario para posicionar los botones en relación a la página */
}

/* Contenedor de cada imagen y botones */
.image-wrapper {
    position: relative; /* Necesario para posicionar los botones absolutamente */
    flex: 1 1 300px; /* Permite que las imágenes sean más flexibles en diferentes pantallas */
    max-width: 500px; /* Tamaño máximo de las imágenes */
    box-sizing: border-box;
    overflow: hidden; /* Asegura que la imagen no se desborde del contenedor */
}

/* Imagen responsiva */
.responsive-img {
    width: 100%; /* Ajusta el ancho de la imagen al ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s ease; /* Efecto de transición suave para hover */
}

.image-wrapper:hover .responsive-img {
    transform: translateY(-15px); /* Mueve la imagen hacia arriba al pasar el mouse */
}

/* Contenedor de botones para la primera imagen */
/* Contenedor de botones para la primera imagen */
.button-container-left {
    position: absolute;
    bottom: 30px; /* Eleva el botón 30px desde el fondo */
    left: 20px; /* Alinea el botón al lado izquierdo del contenedor */
    display: flex;
    justify-content: center;
}

/* Contenedor de botones para la segunda imagen */
.button-container-right {
    position: absolute;
    bottom: 30px; /* Eleva el botón 30px desde el fondo */
    right: 20px; /* Alinea el botón al lado derecho del contenedor */
    display: flex;
    justify-content: center;
}

/* Estilos para los botones */
.button {
    font-family: "Helvetica", "Arial", sans-serif;
    background-color: #2856a3; /* Fondo oscuro */
    color: #fff; /* Color del texto */
    border: none;
    padding: 10px 20px; /* Ajusta el tamaño del botón */
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .button {
        padding: 8px 16px; /* Reduce el tamaño del botón en pantallas pequeñas */
        font-size: 14px; /* Ajusta el tamaño de la fuente para mejor legibilidad */
    }

    .button-container-left,
    .button-container-right {
        bottom: 20px; /* Ajusta la posición del botón en pantallas pequeñas */
        left: 10px; /* Ajusta la posición del botón en pantallas pequeñas */
        right: 10px; /* Ajusta la posición del botón en pantallas pequeñas */
    }
}

/* Media query para pantallas muy pequeñas (como móviles en modo retrato) */
@media (max-width: 480px) {
    .button {
        padding: 6px 12px; /* Reduce aún más el tamaño del botón */
        font-size: 12px; /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    }

    .button-container-left,
    .button-container-right {
        bottom: 15px; /* Ajusta la posición del botón en pantallas muy pequeñas */
        left: 5px; /* Ajusta la posición del botón en pantallas muy pequeñas */
        right: 5px; /* Ajusta la posición del botón en pantallas muy pequeñas */
    }
}


/* Efecto hover para los botones */
.button:hover {
    background-color: #1a3e74; /* Fondo más oscuro al pasar el mouse */
    color: #fff;
}

/* Media Query para dispositivos más pequeños */
@media (max-width: 768px) {
    .contenedor_imagenes {
        gap: 10px; /* Reduce el espacio entre imágenes en pantallas más pequeñas */
    }

    .image-wrapper {
        flex: 1 1 100%; /* Hace que las imágenes ocupen el ancho completo del contenedor */
        position: relative; /* Necesario para el posicionamiento de los botones en móviles */
    }

    /* Ajusta los botones para que se mantengan visibles y alineados en móviles */
    .button-container-left {
        bottom: 20px; /* Eleva el botón 10px más arriba en móviles */
        left: 50%; /* Centra el botón horizontalmente en la imagen */
        transform: translateX(-50%); /* Ajusta la alineación del botón */
    }

    .button-container-right {
        bottom: 20px; /* Eleva el botón 10px más arriba en móviles */
        right: 50%; /* Centra el botón horizontalmente en la imagen */
        transform: translateX(50%); /* Ajusta la alineación del botón */
    }

    .button {
        padding: 8px 12px; /* Ajusta el tamaño del botón para pantallas más pequeñas */
    }
}

 .page-container {
            display: grid;
            place-items: center; /* Centra el contenido vertical y horizontalmente */
            height: auto; /* Altura completa de la ventana */
            margin: 0; /* Elimina márgenes por defecto del navegador */
        }

.circle-container {
            display: flex;
            justify-content: space-around;
            width: 90%; /* Ajusta el ancho del contenedor */
            max-width: 1000px; /* Ancho máximo del contenedor */
            padding: 20px; /* Padding para alejar los círculos de los bordes */
            flex-wrap: wrap; /* Permite que los círculos se ajusten en varias filas si es necesario */
            gap: 20px; /* Espacio entre los círculos */
        }

.circle {
            width: 270px; /* Tamaño del círculo */
            height: 270px; /* Tamaño del círculo */
            border-radius: 50%; /* Forma circular */
            border: 8px solid #0896cc; /* Color y grosor del borde */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */
            transition: background-image 1s ease; /* Transiciones suaves para el cambio de imagen */
            cursor: pointer; /* Cambia el cursor al pasar sobre el círculo */
            box-sizing: border-box; /* Incluye el borde en el tamaño total */
        }
        
.scrolling-container {
    width: 100%; /* Ancho completo del contenedor */
    overflow: hidden; /* Oculta el desbordamiento */
    background: linear-gradient(to right, #7db76c, #bdcf57, #68b27c, #2cb0bc); /* Fondo degradado */
    position: relative; /* Posición relativa para control de elementos hijos */
    height: 120px; /* Ajusta la altura para que se vean las imágenes completas */
    margin: 20px auto; /* Margen superior e inferior, y centrado horizontal */
    display: flex; /* Flexbox para alinear el contenido */
    justify-content: center; /* Centra horizontalmente el contenido */
    align-items: center; /* Centra verticalmente el contenido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para contraste */
}

.scrolling-images {
    display: flex; /* Alinea las imágenes en fila */
    white-space: nowrap; /* Evita que las imágenes se envuelvan */
    align-items: center; /* Centra verticalmente las imágenes */
}

.scrolling-images > * {
    width: 100px; /* Tamaño de las imágenes */
    height: 100px; /* Tamaño de las imágenes */
    border-radius: 50%; /* Hace que las imágenes sean circulares */
    margin-right: 40px; /* Espaciado entre imágenes */
}

/* Media queries para ajustar el tamaño de las imágenes en pantallas más pequeñas */
@media (max-width: 768px) {
    .scrolling-images > * {
        width: 80px; /* Tamaño más pequeño para pantallas pequeñas */
        height: 80px; /* Tamaño más pequeño para pantallas pequeñas */
        margin-right: 20px; /* Espaciado entre imágenes reducido */
    }
}

@media (max-width: 480px) {
    .scrolling-images > * {
        width: 60px; /* Tamaño aún más pequeño para pantallas muy pequeñas */
        height: 60px; /* Tamaño aún más pequeño para pantallas muy pequeñas */
        margin-right: 20px; /* Espaciado entre imágenes reducido */
    }
}

/* Estilos del contenedor principal */
.main-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 300px; /* Altura mínima fija para asegurar visibilidad en pantallas normales */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/Intercomm-Test-velocidad.jpg');
    background-size: contain; /* Asegura que la imagen esté completamente visible */
    background-position: center center; /* Centra la imagen de fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

/* Medios de consulta para pantallas medianas */
@media (max-width: 768px) {
    .main-container {
        min-height: 250px; /* Ajusta la altura mínima para pantallas medianas */
    }
}

/* Medios de consulta para pantallas pequeñas */
@media (max-width: 480px) {
    .main-container {
        min-height: 200px; /* Ajusta la altura mínima para pantallas pequeñas */
    }
}



.button-container {
    display: flex;
    flex-wrap: wrap; /* Permitir que los botones se envuelvan en pantallas más pequeñas */
    justify-content: center; /* Centrar los botones horizontalmente */
    gap: 40px; /* Espacio entre los botones */
    padding: 10px;
    max-width: 100%; /* Asegurar que el contenedor no exceda el ancho de la pantalla */
    box-sizing: border-box; /* Incluir el padding en el ancho total */
    margin-top: 10px;
}



/* Estilos de los botones */
.responsive-button {
    background: none; /* Quitar el fondo del botón */
    border: none; /* Quitar el borde del botón */
    padding: 0; /* Quitar el relleno interno del botón */
    cursor: pointer; /* Cambiar el cursor cuando se pasa por encima */
    width: 210px; /* Ancho inicial del botón */
    height: 120px; /* Alto inicial del botón (rectangular) */
    overflow: hidden; /* Ocultar cualquier contenido desbordante */
    display: flex; /* Flexbox para centrar la imagen dentro del botón */
    align-items: center; /* Centrar verticalmente la imagen */
    justify-content: center; /* Centrar horizontalmente la imagen */
    position: relative; /* Asegura que la imagen se pueda ajustar correctamente */
    box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño del botón */
}

/* Estilos de las imágenes dentro de los botones */
.responsive-button img {
    width: 100%; /* Hacer que la imagen ocupe todo el ancho del botón */
    height: 100%; /* Hacer que la imagen ocupe toda la altura del botón */
    object-fit: cover; /* Ajustar la imagen sin distorsionar su proporción */
    display: block; /* Quitar el espacio en blanco debajo de la imagen */
}

/* Bordes diferentes para los botones */
.button-one {
    border: 4px solid #0896cc; /* Borde azul para el logo del Speed Test */
    background: #202020; /* Fondo oscuro para el botón */
    border-radius: 8px; /* Bordes redondeados */
}

.button-two {
    border: 4px solid #4CAF50; /* Borde verde para el logo de NPFER */
    border-radius: 8px; /* Bordes redondeados */
}
/* Media queries para mejorar la adaptabilidad en pantallas pequeñas */
@media (max-width: 768px) {
    .button-container {
        gap: 10px; /* Reducir el espacio entre botones en pantallas medianas */
    }
    
    .responsive-button {
        width: 80px; /* Reducir el tamaño de los botones en pantallas medianas */
        height: 40px; /* Reducir el tamaño del alto en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .button-container {
        gap: 8px; /* Reducir el espacio entre botones en pantallas pequeñas */
    }
    
    .responsive-button {
        width: 70px; /* Reducir el tamaño de los botones en pantallas pequeñas */
        height: 40px; /* Reducir el tamaño del alto en pantallas pequeñas */
    }
}


/*anuncio*/

.overlay {
            position: fixed; /* Fija el overlay en toda la pantalla */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
            display: flex; /* Usa flexbox para centrar el anuncio */
            align-items: center; /* Centra el anuncio verticalmente */
            justify-content: center; /* Centra el anuncio horizontalmente */
            z-index: 10000; /* Asegura que el overlay esté encima del contenido */
        }
        



        .anuncio {
            background-color: #fff;
            border: 1px solid #888;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            padding: 20px;
            position: relative; /* Posiciona el botón de cerrar dentro del anuncio */
            max-width: 95%; /* Ajusta el tamaño máximo del contenedor */
            max-height: 90vh; /* Ajusta la altura máxima del contenedor */
            overflow: hidden; /* Oculta el contenido que desborda */
            box-sizing: border-box; /* Incluye padding y border en el ancho y alto total */
            text-align: center; /* Centra el contenido del anuncio */
            display: flex; /* Usa flexbox para ajustar el contenido */
            flex-direction: column; /* Coloca los elementos en una columna */
            align-items: center; /* Centra los elementos horizontalmente */
            justify-content: center; /* Centra los elementos verticalmente */
        }

        .cerrar {
            position: absolute; /* Posiciona el botón en la esquina superior derecha */
            top: 10px;
            right: 10px;
            background: #1d91ce; /* Fondo rojo apagado */
            border: 2px solid #26539b; /* Borde rojo oscuro */
            border-radius: 5px; /* Bordes redondeados */
            padding: 4px 8px; /* Espaciado interno del botón reducido */
            font-size: 16px; /* Tamaño del ícono reducido */
            color: #fff; /* Color del ícono blanco */
            cursor: pointer; /* Muestra el cursor de mano al pasar sobre el botón */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Sombra sutil */
            transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; /* Transiciones suaves */
            text-align: center; /* Centra el ícono dentro del botón */
            line-height: 1; /* Ajusta la altura de línea para centrar el ícono verticalmente */
        }

        .cerrar:hover,
        .cerrar:focus {
            background: #26539b;
            color: #fff;
            border-color: #1d91ce;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
        }

        .cerrar:active {
            background: #1d91ce;
            color: #fff;
            border-color: #26539b;
        }

        .anuncio-imagen {
            width: 100%; /* Ancho completo del contenedor */
            height: auto; /* Mantiene la proporción de la imagen */
            max-height: 70vh; /* Limita la altura máxima de la imagen */
            object-fit: contain; /* Mantiene las proporciones de la imagen */
            display: block;
            margin: 0 auto; /* Centra la imagen horizontalmente */
        }
        
        
        
/* Ajustes en el contenedor principal para una disposición en cuadrícula */
.layout {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en múltiples líneas */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 20px; /* Espacio entre los íconos y el video */
    padding: 20px; /* Espacio interior alrededor del contenedor */
}

/* Ajustes para el contenedor de íconos */
.metodo_pago {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los íconos y el texto horizontalmente */
    gap: 10px; /* Espacio entre el título y los íconos */
}

/* Contenedor adicional para los íconos */
.metodo_pago_icons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto auto; /* Dos filas automáticas */
    gap: 20px; /* Espacio entre los íconos */
    max-width: 100%; /* Ajusta el ancho máximo del contenedor para adaptarse al contenedor padre */
     padding-left: 150px; /* Ajusta el espaciado interno a la izquierda */
}

/* Ajuste para pantallas medianas */
@media (max-width: 1024px) {
    .metodo_pago_icons {
        padding-left: 50px; /* Menor espaciado a la izquierda en pantallas medianas */
    }
}

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .metodo_pago_icons {
        padding-left: 20px; /* Menor espaciado a la izquierda en pantallas pequeñas */
    }
}

/* Ajuste para pantallas móviles */
@media (max-width: 480px) {
    .metodo_pago_icons {
        padding-left: 10px; /* Menor espaciado a la izquierda en dispositivos móviles */
    }
}


/* Ajusta el tamaño de los íconos */
.img_metodo {
    width: 100px; /* Tamaño fijo para los íconos */
    height: 100px; /* Tamaño fijo para los íconos */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga del contenedor */
    border-radius: 50%; /* Hace la imagen circular */
    background-color: #f0f0f0; /* Fondo para mejorar la visibilidad de la imagen */
    transition: transform 0.3s ease; /* Transición suave para el efecto hover */
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
    
}

/* Aumenta el tamaño del icono al pasar el ratón sobre él */
.img_metodo:hover {
    transform: scale(1.1); /* Aumenta el tamaño del icono al 120% */
}

/* Centra los íconos en la fila superior */
.metodo_pago_icons > :nth-child(1) {
    grid-column: 2; /* Segundo ícono en la segunda columna */
    grid-row: 1; /* Fila superior */
    justify-self: center; /* Centra el ícono en su celda */
}

.metodo_pago_icons > :nth-child(2) {
    grid-column: 3; /* Tercer ícono en la tercera columna */
    grid-row: 1; /* Fila superior */
    justify-self: center; /* Centra el ícono en su celda */
}

/* Ajusta los íconos en la fila inferior */
.metodo_pago_icons > :nth-child(n+3) {
    grid-column: span 1; /* Los íconos restantes ocupan una columna cada uno */
    grid-row: 2; /* Fila inferior */
}

/* Estilo para el contenedor de la imagen emergente */
#image-popup {
    display: none;
    position: fixed; /* Fijo para mantener el popup en la pantalla */
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
    z-index: 1000;
    max-width: 90vw; /* Ajusta el ancho máximo del popup */
    max-height: 90vh; /* Ajusta la altura máxima del popup */
    overflow: auto;   /* Permite el desplazamiento si el contenido excede el tamaño del contenedor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra para mejor visibilidad */
    border-radius: 8px; /* Bordes redondeados para un diseño más moderno */
    transition: opacity 0.3s ease-in-out; /* Suaviza la transición de visibilidad */
    left: 50%; /* Centra horizontalmente */
    top: 50%;  /* Centra verticalmente */
    transform: translate(-50%, -50%); /* Ajusta el popup al centro del viewport */
}

/* Asegura que la imagen se ajuste correctamente dentro del contenedor emergente */
#image-popup img {
    max-width: 100%; /* Asegura que la imagen no exceda el contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda el contenedor */
    object-fit: contain; /* Ajusta la imagen para que se muestre completa sin recortes */
}

/* Ajustes para pantallas de tamaño pequeño (hasta 768px de ancho) */
@media (max-width: 768px) {
    #image-popup {
        max-width: 95vw; /* Aumenta el ancho máximo para dispositivos móviles */
        max-height: 95vh; /* Aumenta la altura máxima para dispositivos móviles */
        top: 50%; /* Ajusta la posición vertical para que se muestre más centrado */
        transform: translate(-50%, -50%); /* Ajusta la posición del popup */
    }

    .layout {
        flex-direction: column; /* Apila los elementos en una columna en pantallas pequeñas */
        gap: 20px; /* Ajusta el espacio entre los íconos y el video */
    }

    .metodo_pago {
        gap: 10px; /* Reduce el espacio entre los íconos en pantallas pequeñas */
    }

    .video-area {
        max-width: 100%; /* Permite que el video use todo el ancho disponible en pantallas pequeñas */
    }

    .metodo_pago_icons {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas pequeñas */
        grid-template-rows: repeat(5, auto); /* Cinco filas en pantallas pequeñas */
        max-width: 100%; /* Ajusta el ancho máximo del contenedor para adaptarse al contenedor padre */
        justify-items: center; /* Centra los íconos horizontalmente dentro de sus celdas */
    }

    .metodo_pago_icons > :nth-child(1),
    .metodo_pago_icons > :nth-child(2) {
        grid-column: span 1; /* Cada uno de los dos primeros íconos ocupa una columna */
        grid-row: 1; /* Fila superior */
        justify-self: center; /* Centra los íconos en su celda */
    }

    .metodo_pago_icons > :nth-child(n+3) {
        grid-column: span 1; /* Los íconos restantes ocupan una columna cada uno */
        grid-row: span 1; /* Cada ícono en su propia fila */
        justify-self: center; /* Centra los íconos en su celda */
    }
}

/* Ajustes para pantallas de tamaño muy pequeño (hasta 480px de ancho) */
@media (max-width: 480px) {
    #image-popup {
        max-width: 95vw; /* Aumenta el ancho máximo para dispositivos móviles más pequeños */
        max-height: 90vh; /* Aumenta la altura máxima para dispositivos móviles más pequeños */
        top: 50%; /* Ajusta la posición vertical para que se muestre más centrado */
        transform: translate(-50%, -50%); /* Ajusta la posición del popup */
    }

    .metodo_pago_icons {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas muy pequeñas */
        grid-template-rows: repeat(5, auto); /* Cinco filas en pantallas muy pequeñas */
        max-width: 100%; /* Ajusta el ancho máximo del contenedor para adaptarse al contenedor padre */
        justify-items: center; /* Centra los íconos horizontalmente dentro de sus celdas */
    }

    .metodo_pago_icons > :nth-child(1),
    .metodo_pago_icons > :nth-child(2) {
        grid-column: span 1; /* Cada uno de los dos primeros íconos ocupa una columna */
        grid-row: 1; /* Fila superior */
        justify-self: center; /* Centra los íconos en su celda */
    }

    .metodo_pago_icons > :nth-child(n+3) {
        grid-column: span 1; /* Los íconos restantes ocupan una columna cada uno */
        grid-row: span 1; /* Cada ícono en su propia fila */
        justify-self: center; /* Centra los íconos en su celda */
    }
}

/* Ajustes para pantallas de tamaño completo */
@media (min-width: 1200px) {
    #image-popup {
        max-width: 70vw; /* Ajusta el ancho máximo para pantallas grandes */
        max-height: 70vh; /* Ajusta la altura máxima para pantallas grandes */
        top: 70%; /* Baja el popup para centrarlo verticalmente en pantallas grandes */
        transform: translate(-50%, -70%); /* Ajusta la posición para que se vea más centrado verticalmente */
    }
}


/* Ajustes para pantallas de tamaño completo */
@media (min-width: 1200px) {
    #image-popup {
        max-width: 70vw; /* Ajusta el ancho máximo para pantallas grandes */
        max-height: 70vh; /* Ajusta la altura máxima para pantallas grandes */
        top: 70%; /* Baja el popup para centrarlo verticalmente en pantallas grandes */
        transform: translate(-50%, -70%); /* Ajusta la posición para que se vea más centrado verticalmente */
    }

    .metodo_pago_icons {
        grid-template-columns: repeat(5, 1fr); /* Cinco columnas en pantallas grandes */
        grid-template-rows: auto auto; /* Dos filas automáticas */
        max-width: 800px; /* Ajusta el ancho máximo del contenedor para pantallas grandes */
    }
}

/* Ajustes para las imágenes dentro de los íconos */
.img_metodo img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ajusta la imagen para que se ajuste sin deformarse */
    display: block;
}

/* Área del video */
.video-area {
    max-width: 700px;
    flex: 1; /* Permite que el área de video ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
    margin-right: 100px; /* Ajusta este valor según sea necesario */
}


/* Títulos y textos */
.video-area h2 {
    margin: 0;
    padding-bottom: 20px; /* Ajusta el espacio entre el título y el contenido */
    font-family: Poppins, sans-serif;
    line-height: 1.2;
    font-weight: 700;
    font-size: 17px;
    color: #275fac;
    text-align:Left; /* Alinea el texto al centro */
}

.metodo_pago h2 {
    margin: 0;
    padding-bottom: 20px; /* Ajusta el espacio entre el título y el contenido */
    font-family: Poppins, sans-serif;
    line-height: 1.2;
    font-weight: 700;
    font-size: 17px;
    color: #275fac;
    text-align: center; /* Alinea el texto al centro */
}

.texto_pequeno {
    font-family: Poppins, sans-serif;
    line-height: 1.2;
    font-size: 16px;
    text-align: justify;
}

video {
    width: 90%;
    height: auto;
}

/* Media Queries para dispositivos móviles */
@media (max-width: 768px) {
    .layout {
        flex-direction: column; /* Apila los elementos en una columna en pantallas pequeñas */
        gap: 20px; /* Ajusta el espacio entre los íconos y el video */
    }

    .metodo_pago {
        gap: 10px; /* Reduce el espacio entre los íconos en pantallas pequeñas */
    }

    .img_metodo {
        width: 100px; /* Ajusta el tamaño de los íconos en pantallas pequeñas */
        height: auto; /* Ajusta el tamaño de los íconos en pantallas pequeñas */
    }

    .video-area {
        max-width: 100%; /* Permite que el video use todo el ancho disponible en pantallas pequeñas */
    }
   
   .texto_pequeno {
    font-family: Poppins, sans-serif;
    line-height: 1.2;
    font-size: 16px;
    text-align: center;
   }

   .video-area h2 {
    margin: 0;
    padding-bottom: 20px; /* Ajusta el espacio entre el título y el contenido */
    font-family: Poppins, sans-serif;
    line-height: 1.2;
    font-weight: 700;
    font-size: 19px;
    color: #275fac;
    text-align:center; /* Alinea el texto al centro */
   }

}

@media (max-width: 768px) {
    .video-area {
        margin-right: 10px; /* Menor margen derecho en pantallas pequeñas */
    }
}

/* Ajustes para pantallas aún más pequeñas, como móviles */
@media (max-width: 480px) {
    .video-area {
        margin-right: 5px; /* Margen derecho aún menor en dispositivos móviles */
    }
}