/* ── About: texto oscuro sobre fondo blanco ── */
.about-area {
    background-color: #ffffff !important;
}

/* Override: asegurar que `.text-white` muestre texto en blanco sobre fondos oscuros */
.text-white {
    color: #ffffff !important;
}

.text-black {
    color: black !important;
}

/* Nuevo estilo: texto blanco con mayor contraste para títulos */
.text-white-strong {
    color: #ffffff !important;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.about-area, .about-area .title-area .sub-title, .about-area .sec-title,
.about-area .about-text .text, .about-area .box-desig, .about-area .signature {
    color: #000 !important;
}
.about-area .sec-title { color: #000 !important; }

#testi-sec    { background-color: #f8f8f8; }

/* ── Header nav: black shadow so links are readable over any hero image ── */
.main-menu > ul > li > a {
    text-shadow:
        0 1px 4px rgba(0,0,0,0.9),
        0 2px 10px rgba(0,0,0,0.7);
}

/* No shadow inside dropdowns (white background) */
.main-menu ul.sub-menu a,
.main-menu ul.mega-menu a {
    text-shadow: none;
}

/* ════════════════════════════════════════
   RESPONSIVE MOBILE / TABLET  ≤ 991px
════════════════════════════════════════ */
@media (max-width: 991px) {

    /* ── Forzar estado FINAL de todas las animaciones del tema en móvil ──
       El JS de menú mueve el DOM después de que los IntersectionObservers
       ya corrieron, por eso imágenes y texto quedan en opacity:0/clip-path
       cerrado. Los siguientes overrides los fuerzan a su estado visible.     */

    /* Imágenes con clip-path animado */
    .th-clip-anim .th-anim-img,
    .th-clip-anim .gallery_img,
    .gallery_img {
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        -webkit-clip-path: inset(0 0 0 0) !important;
        transform: none !important;
        animation: none !important;
        -webkit-animation: none !important;
    }

    /* Reveal animations del tema (img-anim-*) */
    .img-anim-right,
    .img-anim-left,
    .img-anim-top {
        animation: none !important;
        -webkit-animation: none !important;
        opacity: 1 !important;
        clip-path: inset(0 0 0 0) !important;
        -webkit-clip-path: inset(0 0 0 0) !important;
        transform: none !important;
    }

    /* Lazy loading: forzar visibilidad */
    .lazy-loading {
        opacity: 1 !important;
        transition: none !important;
    }

    /* WOW / fadeInUp stuck en invisible */
    .wow {
        visibility: visible !important;
        animation-name: none !important;
        -webkit-animation-name: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Sin efectos de entrada en responsive (solo títulos y descripciones) */
    .split-text,
    .text-anime,
    .sec-title,
    .sub-title,
    .hero-title,
    .about-text .text,
    .faq-text,
    .testi-card .box-text,
    .title-area p,
    .wow {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
    }

    .split-text .word,
    .split-text .char,
    .text-anime .word,
    .text-anime .char,
    .split-line {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
    }

    /* FAQ acordeón: asegurarse de que no quede colapsado visualmente */
    #faq-sec .accordion-collapse {
        height: auto !important;
    }

    /* ── Header ── */
    .th-header .menu-area { padding: 10px 0; }
    .header-logo .header-logo-img { width: 110px !important; max-width: 100%; height: auto; }
    .th-header .th-menu-toggle {
        width: 44px; height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* ── Hamburguesa móvil ── */
    .mobile-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
    }

    .mobile-burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
        transform-origin: center;
    }

    /* Animación X cuando está abierto */
    .mobile-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mobile-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .mobile-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Menú móvil simple — oculto por defecto */
    .mobile-simple-menu {
        display: none;
        width: 100%;
        padding: 8px 0 6px;
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .mobile-simple-menu.is-open {
        display: block;
    }

    .mobile-simple-menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mobile-simple-menu li {
        margin: 0;
    }

    .mobile-simple-menu a {
        display: block;
        text-align: center;
        padding: 9px 4px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 6px;
        color: #fff !important;
        font-size: 10px;
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        transition: background 0.2s;
    }

    .mobile-simple-menu a:hover,
    .mobile-simple-menu a:active {
        background: rgba(255, 255, 255, 0.18);
        color: #fff !important;
    }

    /* Botón CTA destacado en el menú móvil */
    .mobile-simple-menu li.mobile-cta a {
        background: var(--theme-color, #e8272a);
        border-color: var(--theme-color, #e8272a);
        color: #fff !important;
        font-weight: 700;
    }

    .mobile-simple-menu li.mobile-cta a:hover {
        background: #c01f22;
        border-color: #c01f22;
    }

    /* Hero */
    .th-hero-wrapper.hero-7 .hero-inner { min-height: 84vh; }

    /* Spacing sections */
    .about-area.space,
    #service-sec.space,
    #testi-sec.space,
    #project-sec.space {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* About images: quitar transforms que desbordan en móvil */
    .about-area .img-box3_wrapp { margin: 0 auto; max-width: 100%; }
    .about-area .img-box3.style2 .img1,
    .about-area .img-box3.style2 .img2,
    .about-area .img-box3.style2 .about-shape { transform: none !important; }

    /* Services section */
    #project-sec .marquee.project-marquee { margin-bottom: 14px; }
    #project-sec .rotating-slider__content { padding-left: 0; padding-right: 0; }
    #project-sec .rotating-slider__wrapper { height: clamp(250px, 50vw, 360px); }
    #project-sec .project-btn { margin-top: 18px; text-align: center; }
    #project-sec .project-btn .th-btn { width: 100%; justify-content: center; }

    /* Gallery */
    .gallery-row .filter-item { width: 100%; max-width: 420px; }
    .gallery-card .box-img { min-height: 240px; }

    /* Testimonials */
    #testi-sec .testi-image_wrapp { margin-bottom: 18px; }
    #testi-sec .testi-card.style1 { padding: 24px 18px; }
    #testi-sec .slider-arrow.style4 { width: 44px; height: 44px; }

    /* States section */
    #service-sec .gallery-card.style4 { height: 100%; }
    #service-sec .gallery-card .card-body { padding: 18px 16px; }
    #service-sec .gallery-card .d-flex { flex-wrap: wrap; }

    /* FAQ */
    #faq-sec .faq-area.style4 { padding: 26px 18px; }
    #faq-sec .faq-image { margin-top: 22px; }

    /* Box shadows para separación visual */
    #about-sec,
    #project-sec,
    #testi-sec,
    #service-sec,
    #faq-sec { box-shadow: 0 -4px 16px rgba(0,0,0,0.12); }
}

/* ════════════════════════════════════════
   RESPONSIVE MOBILE  ≤ 767px
════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Header */
    .th-header .menu-area .row { --bs-gutter-x: 10px; }
    .th-header .header-logo { max-width: 55vw; }

    /* Tipografía */
    .title-area .sec-title,
    .title-area .split-text { line-height: 1.15; word-break: break-word; }
    .title-area .sub-title { line-height: 1.35; }

    .about-area .about-text .text,
    #service-sec .title-area p,
    #testi-sec .testi-card .box-text { font-size: 15px; line-height: 1.6; }

    /* Services slider */
    #project-sec .rotating-slider__navigation { justify-content: center; gap: 10px; margin-top: 14px; }
    #project-sec .rotating-slider__title { margin-top: 14px; }
    #project-sec .rotating-slider__title .item { font-size: 18px; }

    /* Testimonials controls */
    #testi-sec .icon-box { justify-content: center; }

    /* States badges */
    #service-sec .state-badge { top: 10px; right: 10px; }

    /* FAQ */
    #faq-sec .accordion-card .accordion-button { font-size: 15px; line-height: 1.4; padding: 14px 12px; }
    #faq-sec .accordion-card .accordion-body { padding: 0 12px 14px; }

    /* Partners logos */
    .brand-card img { max-height: 44px; }
}