/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   AGD Consultores — Ajustes responsive (UX/UI mobile + tablet)
   Breakpoints del sitio: el menú colapsa a hamburguesa en <=1024px (tablet
   incluida). Los botones Clientes/Contacto del header se ocultan en <=1024px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CTA "Contacto" en el menú hamburguesa (mobile + tablet, <=1024px)
   Se agregó "Contacto" al Main Menu (#7) con la clase .menu-cta-contacto.
   -------------------------------------------------------------------------- */

/* En desktop (>1024) ya existen los botones del header -> ocultar el item del menú */
@media (min-width: 1025px) {
    li.menu-cta-contacto { display: none !important; }
}

/* En <=1024 (dropdown/hamburguesa): Contacto como botón CTA azul marino */
@media (max-width: 1024px) {
    li.menu-cta-contacto { margin: 14px 16px 6px !important; }
    li.menu-cta-contacto > a.elementor-item {
        background-color: #002842 !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        text-align: center !important;
        justify-content: center !important;
        font-weight: 600 !important;
    }
    li.menu-cta-contacto > a.elementor-item:hover,
    li.menu-cta-contacto > a.elementor-item:focus {
        background-color: #013a5e !important;
        color: #ffffff !important;
    }
}

/* --------------------------------------------------------------------------
   Fix #4: título "Crece Profesionalmente con Nosotros" (sección global de
   reclutamiento, widget .elementor-element-a46a347) se desbordaba en mobile
   porque "PROFESIONALMENTE" (32px) no cabía en el contenedor (~247px).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .elementor-element-a46a347 .elementor-heading-title {
        font-size: 22px !important;
        line-height: 1.2 !important;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* --------------------------------------------------------------------------
   Fix #3: en "Legales y Contables" el accordion de servicios
   (.elementor-element-c1a627d) tiene width-initial y se encoge al ancho de su
   contenido (~186px), dejando hueco muerto. Lo forzamos a ancho completo en
   mobile y tablet.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .elementor-element-c1a627d { width: 100% !important; }
    .elementor-element-c1a627d .e-n-accordion,
    .elementor-element-c1a627d .e-n-accordion-item,
    .elementor-element-c1a627d .e-n-accordion-item-title { width: 100% !important; }
}

/* --------------------------------------------------------------------------
   Fix: sección "Conectemos" (global, .elementor-element-af5e690). El heading
   (#f7f6771) y el texto (#912fc90) tenían width-initial y quedaban a ~173-247px,
   provocando que el texto (24px) rompiera a una palabra por línea. Full-width.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .elementor-element-f7f6771,
    .elementor-element-912fc90 { width: 100% !important; }
}
/* La sección Conectemos tenía 64px de padding lateral (ok en desktop, excesivo
   en móvil: dejaba el contenido en ~247px). Lo reducimos en pantallas chicas. */
@media (max-width: 767px) {
    .elementor-element-af5e690 { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --------------------------------------------------------------------------
   Fix menores
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Foto de perfil en la ficha de miembro (Team Single #90, widget #1c37ae0):
       en mobile colapsaba a ~49px. La llevamos a un tamaño legible. El contenedor
       (width-initial) medía 49px y su max-width:100% capaba la imagen. */
    .elementor-element-1c37ae0 { width: 120px !important; max-width: 120px !important; }
    .elementor-element-1c37ae0 img {
        width: 120px !important;
        height: 120px !important;
        max-width: 120px !important;
        object-fit: cover;
    }
    /* Tap target de los links tipo texto "Conocer Servicio" (.elementor-button-link):
       tenían 16px de alto. Les damos área táctil más cómoda sin cambiar el estilo. */
    a.elementor-button-link {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   Carruseles con imagen colapsada en mobile (mismo patrón): cada slide tiene un
   contenedor de imagen (background, vacío) y un panel de texto. En mobile se
   apilan pero el de la imagen colapsaba a una tira fina y la foto no se veía.
   Le damos una banda de 300px con la imagen; el texto queda pegado (arriba o
   abajo según el orden del slide) y el sobrante del swiper va al fondo.
     - Hero home:      imagen c0e00d4/fca145b/7b0e134 · slide c9b73af/9f7d7f6/4f75fed · texto c8fdd75/d2d770b/d9ab885
     - Testimonios:    imagen cf735a2/6238634/09e359b · slide 69186b3/d774be1/55c764e · texto 2574047/9c2dc9e/6aef61c
     - CTAs Crece/Conectemos: imagen 54a4178/0d6ed4e · slide 30d944a/e0c1162 · texto 4f6a735/af5e690
   Aplica hasta 1024px (mobile + tablet/iPad): en ese rango la imagen quedaba como
   columna angosta al lado del texto. En desktop (>1024) se deja lado a lado.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    /* Contenedores de imagen -> banda de 300px full-width, altura bloqueada con
       max-height (el swiper iguala la altura de los slides; sin el tope este
       contenedor absorbía el excedente). */
    .elementor-element-c0e00d4,
    .elementor-element-fca145b,
    .elementor-element-7b0e134,
    .elementor-element-cf735a2,
    .elementor-element-6238634,
    .elementor-element-09e359b,
    .elementor-element-54a4178,
    .elementor-element-0d6ed4e {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        width: 100% !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        align-self: stretch !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    /* Contenedores de slide: forzamos columna para que imagen y texto se apilen
       de forma consistente en todo el rango mobile+tablet (en tablet el layout
       original quedaba lado a lado con la imagen angosta). justify-content
       flex-start las pega arriba y el sobrante del swiper queda al fondo. */
    .elementor-element-c9b73af,
    .elementor-element-9f7d7f6,
    .elementor-element-4f75fed,
    .elementor-element-69186b3,
    .elementor-element-d774be1,
    .elementor-element-55c764e,
    .elementor-element-30d944a,
    .elementor-element-e0c1162 {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }
    /* Paneles de texto: alinear su contenido pegado a la imagen. */
    .elementor-element-c8fdd75,
    .elementor-element-d2d770b,
    .elementor-element-d9ab885,
    .elementor-element-2574047,
    .elementor-element-9c2dc9e,
    .elementor-element-6aef61c,
    .elementor-element-4f6a735,
    .elementor-element-af5e690 {
        justify-content: flex-start !important;
    }
}

/* --------------------------------------------------------------------------
   Logo del header (widget .elementor-element-178551e) en tablet: en el rango
   768–1024 saltaba a ~650–880px de ancho (le falta el límite en ese breakpoint).
   Lo capeamos a un tamaño proporcional (desktop ~231px, mobile ~190px).
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element-178551e img {
        max-width: 210px !important;
        width: 210px !important;
        height: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Selector de idioma "solo bandera" en la navbar (shortcode [agd_lang_flag],
   dentro del container de botones #d0564b5 de los headers #109/#1450).
   - Desktop (>1024): a la derecha del botón CONTACT.
   - iPad/mobile (<=1024): los botones se ocultan y la banderita queda a la
     IZQUIERDA de la hamburguesa (logo a la extrema izquierda).
   -------------------------------------------------------------------------- */
.elementor-widget.agd-lang-widget { width: auto; margin: 0; align-self: center; }
.agd-lang-widget .elementor-widget-container { margin: 0; }

.agd-lang-switch {
    display: flex;
    align-items: center;
    margin-left: 16px; /* separación respecto al botón CONTACT en desktop */
}
.agd-lang-flag {
    display: inline-flex;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}
.agd-lang-flag img {
    display: block;
    width: 30px;
    height: 20px;
    object-fit: cover;
}
.agd-lang-flag:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

/* Footer: AMBAS banderas (shortcode [agd_lang_flag show="both"]) en una línea
   propia, centradas, debajo de la fila del copyright/links (container #3ec380b). */
.elementor-element-3ec380b { flex-wrap: wrap; }
.elementor-widget.agd-lang-footer {
    flex: 0 0 100%;
    width: 100%;
    margin: 14px 0 0;
}
.agd-lang-footer .elementor-widget-container { margin: 0; }
.agd-lang-switch--both {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

/* Ocultar el "footer language switcher" automático de WPML (texto + banderas
   viejas UK/España). Lo reemplazamos por las banderas de arriba. */
.wpml-ls-statics-footer { display: none !important; }

@media (max-width: 1024px) {
    .elementor-element-4ff7366 > .e-con-inner > .elementor-element-178551e { order: 1; margin-right: auto; }
    .elementor-element-4ff7366 > .e-con-inner > .elementor-element-d0564b5 {
        order: 2;
        display: flex !important;
        align-items: center;
    }
    .elementor-element-4ff7366 > .e-con-inner > .elementor-element-36de9f5 { order: 3; flex: 0 0 auto; width: auto; }
    .agd-lang-switch { margin-left: 0; margin-right: 14px; }
}