/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/hello-theme/
Description:  Child theme de Hello Elementor — CDA Ingenieros.
Author:       CDA Ingenieros
Template:     hello-elementor
Version:      1.1.2
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* ============================================================
   CORRECCIONES RESPONSIVAS — CDA Ingenieros
   ============================================================ */

/* 1. Prevenir overflow horizontal en móvil */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 2. Imágenes 100% responsivas por defecto */
img {
    max-width: 100%;
    height: auto;
}

/* 3. Texto mínimo legible en móvil */
@media (max-width: 767px) {
    body,
    p,
    li,
    td {
        font-size: max(15px, 1rem);
        line-height: 1.6;
    }

    h1 { font-size: clamp(1.6rem, 5vw, 2.5rem); }
    h2 { font-size: clamp(1.3rem, 4vw, 2rem); }
    h3 { font-size: clamp(1.1rem, 3.5vw, 1.5rem); }
}

/* 4. Botones con área táctil mínima de 44x44px */
@media (max-width: 767px) {
    .elementor-button,
    .elementor-button-wrapper a,
    button,
    input[type="submit"],
    input[type="button"],
    a.button,
    .woocommerce a.button,
    .woocommerce button.button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* 5. Tablas responsivas */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* 6. Elementor: secciones con padding lateral en móvil */
@media (max-width: 767px) {
    .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 7. Videos e iframes responsivos */
.elementor-video-wrapper,
.wp-has-aspect-ratio {
    position: relative;
    width: 100%;
}

/* ============================================================
   8. IMAGEN #cda-lcp-hero-img
   Oculta en desktop, visible como fondo en móvil.
   ============================================================ */
#cda-lcp-hero-img {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    body {
        position: relative;
    }

    #cda-lcp-hero-img {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100svh !important;
        object-fit: cover;
        object-position: center center;
        z-index: 0;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .cda-hero-section {
        background-image: none !important;
    }

    .cda-hero-section > .elementor-background-video-container {
        display: none !important;
    }
}

/* ============================================================
   9. REVSLIDER MÓVIL
   ============================================================ */
.cda-revslider-mobile-static {
    display: none;
}

@media (max-width: 767px) {
    .cda-revslider-mobile-static {
        display: block;
        width: 100%;
    }

    .cda-revslider-mobile-static img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* ============================================================
   10. BOTÓN FLOTANTE DE WHATSAPP
   ============================================================ */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.whatsapp-button:hover {
    transform: scale(1.1);
}

.whatsapp-button img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

/* ============================================================
   11. FIX IMAGEN CERTIFICACIONES (wp-image-16052)
   ──────────────────────────────────────────────────────────
   El widget de Elementor define ancho 27% vía CSS async,
   pero el atributo HTML width="800" fuerza 800px antes de
   que ese CSS llegue, causando un salto visual al cargar.

   Esta regla usa el ID de widget de Elementor (1c13844)
   que está en el HTML desde el servidor (no async),
   más la clase wp-image-16052 para máxima especificidad.

   Resultado: la imagen nunca aparece a 800px, ni por un
   instante, independientemente del orden de carga del CSS.
   ============================================================ */
.elementor-element-1c13844 img.wp-image-16052,
.elementor-element-1c13844 img {
    width: 45% !important;
    max-width: 45% !important;
    height: auto !important;
    aspect-ratio: unset !important;
}

/* En móvil la imagen puede ser más ancha */
@media (max-width: 767px) {
    .elementor-element-1c13844 img.wp-image-16052,
    .elementor-element-1c13844 img {
        width: 60% !important;
        max-width: 60% !important;
    }
}