.elementor-widget-container [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-container [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-2605 .elementor-element.elementor-element-24a8c8b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-html [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-html [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-html .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-shortcode [data-tippy-root] > .tippy-box{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-shortcode [data-tippy-root] > .tippy-box .tippy-arrow{color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input:not([type="submit"]){background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 select{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 textarea{background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 label{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode ::placeholder{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7-submit{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-shortcode .wpcf7 input[type="submit"]:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}:root{--page-title-display:none;}/* Start custom CSS */#miModalExterno {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.75);
    
    /* Centrado Defensivo con Flexbox */
    display: flex !important; /* Forzamos Flexbox */
    justify-content: center !important; /* Centrado Horizontal */
    align-items: center !important;   /* Centrado Vertical */
    
    /* 💡 ESTADO INICIAL: OCULTAR. (Se muestra al hacer clic) */
    visibility: hidden !important; /* Usamos visibility en lugar de display para mantener el layout de flex */
    opacity: 0; /* Para una transición suave */
    transition: opacity 0.3s, visibility 0.3s;
}
/* Opcional: Estilos para el contenido interno (el iframe o la caja blanca dentro del modal) */
#miModalExterno .modal-content {
    /* DIMENSIONAMIENTO */
    width: auto;
    max-width: 95%;
    /*min-width: 600px; /* Tamaño máximo deseado para la caja */
    /* Altura máxima para evitar que sea demasiado grande */
    max-height: 95vh; /* 90% de la altura visible de la ventana */
    
    /* APARIENCIA */
    background: white;
    padding: 10px 10px; /* Ajusta el padding interno */
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para efecto 3D */
    
    /* GESTIÓN DE CONTENIDO */
    overflow-y: auto; /* Permite scroll si el contenido es más alto que 90vh */
}

#miModalExterno .modal-content iframe {
    width: 100%; /* Ocupa todo el ancho del .modal-content */
    height: 600px; /* Asigna una altura específica al iframe, o usa 100% si el .modal-content tiene height fijo */
    display: block;
}

#miModalExterno.is-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    
    /* Asegurar que el contenido del modal sea responsive */
    #miModalExterno .modal-content {
        /* Darle un ancho más estrecho y relativo para móviles */
        width: 90%; 
        max-width: 90%; /* Asegura que no se salga de los límites de la pantalla */
        min-width: unset; /* IMPORTANTE: Asegura que anula el min-width de escritorio */
        
        padding: 10px; /* Reduce el padding para ahorrar espacio */
    }
    
    /* Ajustar el IFRAME dentro del modal para móviles */
    #miModalExterno .modal-content iframe {
        /* Si tu iframe era muy alto, redúcelo aquí */
        height: 400px; 
    }
}

@media (min-width: 769px) {
    #miModalExterno .modal-content {
        min-width: 600px; /* Aplica esta regla SOLO en escritorio */
    }
}

.cerrar-modal {
    /* Posicionamiento y diseño */
    position: absolute;
    top: 15px;      /* Distancia desde la parte superior de la caja */
    right: 15px;    /* Distancia desde la derecha de la caja */
    font-size: 28px; /* Haz la "X" visible */
    font-weight: bold;
    color: #999;     /* Color discreto */
    cursor: pointer; /* Muestra el puntero para indicar que es clickeable */
    
    /* Asegurar que el ícono esté por encima del contenido del iframe */
    z-index: 10000;
    
    /* Efecto al pasar el ratón */
    transition: color 0.2s;
}

.cerrar-modal:hover {
    color: #333; /* Cambia de color al pasar el ratón */
}

.footer-wrapper {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas exactas en PC */
    align-items: start;
  }

  /* Ajustes para Móvil */
  @media (max-width: 768px) {
    .footer-wrapper {
      grid-template-columns: 1fr 1.2fr; /* 2 columnas en móvil */
      gap: 15px;
    }

    /* Forzamos a los bloques a posicionarse donde queremos */
    .footer-col-contacto { 
      grid-column: 1; 
      grid-row: 1; 
    }
    .footer-col-app { 
      grid-column: 1; 
      grid-row: 2; 
    }
    .footer-col-links { 
      grid-column: 2; 
      grid-row: 1 / span 2; /* Ocupa toda la altura derecha */
      border-left: 1px solid #eee;
      padding-left: 15px;
    }

    /* Ajuste de texto para que no se amontone */
    .footer-col-links a {
      font-size: 12px !important;
      line-height: 1.3;
      margin-bottom: 10px;
      display: block;
    }
    
    .hide-mobile { display: none; }
  }
  
  .bl-beneficios-container {
    /*background-color: :#111827; /* Reemplaza con tu imagen de fondo si prefieres: background-image: url('fondo.jpg'); */
    background-image: url('https://wp.biencel.mx/wp-content/uploads/2026/01/0.png');
    background-size: cover;
    background-position: center;
    border-radius: 60px; /* Bordes muy redondeados como en la imagen */
    padding: 30px 20px;
    margin: 20px auto;
    max-width: 1200px;
}

/* Grid para distribuir los 6 elementos */
.bl-beneficios-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columnas en desktop */
    gap: 10px;
}

/* Estilo de cada bloque (Imagen + Texto) */
.bl-beneficio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
}

.bl-icon-wrap {
    width: 150px;  /* Ajusta este tamaño según necesites */
    height: 130px; /* Debe ser igual al ancho para ser cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.bl-icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene la proporción sin deformar */
}


/* --- RESPONSIVE --- */

/* Tablets: 3 columnas */
@media (max-width: 992px) {
    .bl-beneficios-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px 10px;
    }
}

/* Móviles: 2 columnas */
@media (max-width: 480px) {
    .bl-beneficios-container {
        border-radius: 25px; /* Bordes menos pronunciados en móvil */
        padding: 20px 10px;
    }
    .bl-beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 5px;
    }
    .bl-icon-wrap {
    width: 100px;  /* Ajusta este tamaño según necesites */
    height: 100px; /* Debe ser igual al ancho para ser cuadrado */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
    .bl-icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Mantiene la proporción sin deformar */
}
}/* End custom CSS */