/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1752336356
Updated: 2025-07-12 13:05:56

*/


/* Ajustes en toda la web */
/* Fuentes locales */
/* 300 */
@font-face {
  font-family: 'Roboto';
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Roboto-Light.woff2') format('woff2');
}

/* 400 */
@font-face {
  font-family: 'Roboto';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Roboto-Regular.woff2') format('woff2');
}

/* 500 */
@font-face {
  font-family: 'Roboto';
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Roboto-Medium.woff2') format('woff2');
}

/* 700 */
@font-face {
  font-family: 'Roboto';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Roboto-Bold.woff2') format('woff2');
}

/* Aplicación global */
body, h1, h2, h3, h4, h5, h6, p, a, span, li {
    font-family: 'Roboto', sans-serif !important;
}

/*Color título Acordeón abierto*/
summary[aria-expanded="true"] .e-n-accordion-item-title-text {
  color: #3F8DD8;
}
summary[aria-expanded="true"] span.e-opened svg {
  fill: #3F8DD8!important;
}

/* Aplica el colchón a todas las secciones del menú */
#inicio,
#soluciones,
#industrias,
#contacto,
#faqs{
    scroll-margin-top: 100px;
}

/* Y una regla global para el scroll suave */
html {
    scroll-behavior: smooth;
}

h2 span.fontajust2{font-size:1.5rem;}
h3 span{font-size:1.25rem;}
h3 span.fontajust {font-size:1.125rem;}
.detail-color{color:#000}
.detail-color2{color:#3F8DD8}
.detail-size-space{font-size:16px;margin:0 6px;}
.boton-dual .elementor-button {
    display: flex;
    justify-content: center;
    width: 150px; /* El ancho que quieras */
    min-height: 50px; /* El alto que quieras */
    padding: 0;
    align-items: center;
}

/* Fijar la cabecera al techo del popup */
.header-popup-sticky {
    position: sticky !important;
    top: 0;
    z-index: 999;
    background-color: #ffffff; /* Asegurate de ponerle un fondo para que no sea transparente al scrollear */
}

/* Ajuste necesario para el contenedor interno de Elementor */
.dialog-lightbox-message, 
.dialog-lightbox-content {
    overflow-y: auto !important;
}

/* Evitar que el contenido se pise si el popup tiene padding */
.elementor-popup-modal .elementor-widget-container {
    height: 100%;
}

/* Este código se aplica al CONTENEDOR del Hero */
#inicio {
    position: relative; /* Esencial para que el efecto se posicione bien */
    overflow: hidden;   /* Para que el efecto no se salga del contenedor */
}

#inicio::after {
    content: "";
    position: absolute;
    bottom: 0;       /* Empieza desde la parte inferior */
    left: 0;
    width: 100%;     /* Abarca todo el ancho */
    height: 25%;     /* Ajusta la altura del efecto (cuánto sube) */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    z-index: 2;      /* Asegúrate de que esté por ENCIMA del iPad y el texto */
    pointer-events: none; /* Crucial para que puedas hacer clic en lo que está detrás */
}

/* Forzamos que el contenido del Hero esté detrás del efecto */
#inicio .elementor-widget-wrap {
    position: relative;
    z-index: 1; /* El contenido se queda en el nivel 1 */
}

/* Si tienes la imagen del iPad, asegúrate que esté en z-index: 1 */
#inicio img {
    position: relative;
    z-index: 1;
}

/* --- Grid Especial para sección Industria --- */
/* 1. CONTENEDOR PRINCIPAL */
.grid-industrias-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 395px;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 100px auto 20px auto; 
    align-items: start;
    padding-bottom: 0;
}

/* 2. ESTILO DE LAS CARDS */
.card-ind {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    height: 100%;
    cursor: pointer;
}

/* 3. OVERLAYS (CAPAS DE COLOR) */
.card-ind::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    z-index: 1;
}

.card-ind::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(63, 141, 216, 0.95) 0%, rgba(63, 141, 216, 0.5) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.card-ind:hover::after { opacity: 1; }

/* 4. TEXTO Y ANIMACIÓN */
.card-ind-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: #ffffff;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-ind:hover .card-ind-content { transform: translateY(-20px); }

.card-ind-content h3 { margin: 0 0 10px 0; font-size: 24px; font-weight: bold; color: #fff; }
.card-ind-content p { margin: 0; font-size: 15px; line-height: 1.5; color: #fff; }

/* 5. LÓGICA DE ESCRITORIO (3 COLUMNAS) */
.grid-industrias-container div:nth-child(3n+2),
.grid-industrias-container div:nth-child(10) {
    transform: translateY(-60px);
}
.grid-industrias-container div:nth-child(10) {
    grid-column: 2;
}

/* --- PREVENCIÓN DE ERRORES EN RESPONSIVE --- */

/* TABLET (Hasta 1024px) */
@media (max-width: 1024px) {
    .grid-industrias-container {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: 400px;
        width: 90%;
        margin: 40px auto !important;
        gap: 20px;
    }
    /* Quitamos desfases y forzamos alineación */
    .grid-industrias-container div:nth-child(n) {
        transform: none !important;
        grid-column: auto !important;
    }
}

/* MOBILE (Hasta 767px) */
@media (max-width: 767px) {
    .grid-industrias-container {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 320px;
        width: 92%;
        margin: 20px auto !important;
        gap: 15px;
    }
    .grid-industrias-container div:nth-child(n) {
        transform: none !important;
        grid-column: auto !important;
    }
    .card-ind-content { padding: 20px; }
    .card-ind-content h3 { font-size: 20px; }
}