/*
Theme Name: SKT Chemical Pro Child
Theme URI: https://forquinsa.com
Description: Child theme for SKT Chemical Pro — Forquinsa custom branding, layout overrides, and functionality.
Author: Forquinsa
Author URI: https://forquinsa.com
Template: skt-chemical-pro
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skt-chemical-pro-child
*/

/* ===========================================
   FORQUINSA.COM — Consolidated CSS (V2.0)
   Complete UI Overhaul: Header, Hero & Footer
   Date: March 10, 2026
   =========================================== */

/* ============ IMPORTS ============ */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Oswald:ital,wght@0,400;0,500;0,700;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&family=Open+Sans:wght@400;600&display=swap');


/* =============================================
   §1. DESIGN TOKENS
   Central color/spacing/font values used
   throughout the stylesheet.
   ============================================= */
:root {
    --fq-green: #00A651;
    --fq-green-dark: #007A3D;
    --fq-green-bright: #00B14F;
    --fq-black: #111111;
    --fq-gray-900: #1A1A1A;
    --fq-gray-800: #222222;
    --fq-gray-700: #333333;
    --fq-gray-500: #666666;
    --fq-gray-300: #CCCCCC;
    --fq-gray-100: #F8F9FA;
    --fq-white: #FFFFFF;
    --fq-font-heading: 'Montserrat', sans-serif;
    --fq-font-body: 'Open Sans', sans-serif;
    --fq-radius-sm: 4px;
    --fq-radius-pill: 50px;
    --fq-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --fq-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
    --fq-shadow-glow: 0 4px 15px rgba(0, 166, 81, 0.3);
    --fq-transition: 0.3s ease;
}


/* =============================================
   §2. GLOBAL BASE STYLES
   Body defaults, headings, links.
   ============================================= */
html {
    overflow-x: hidden;
}

body {
    font-family: var(--fq-font-body) !important;
    color: var(--fq-gray-700) !important;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.section-title,
.widget-title {
    font-family: var(--fq-font-heading) !important;
    color: var(--fq-black) !important;
}

a {
    color: var(--fq-green) !important;
    transition: color var(--fq-transition) !important;
}

a:hover {
    color: var(--fq-green-dark) !important;
}


/* =============================================
   §3. SITEWIDE CTA BUTTONS
   All theme/Elementor buttons: green pill style.
   ============================================= */
.theme-flavor-flavor .flavor_flavor_button a,
.flavor_flavor_button a,
.flavor_flavor_theme_button,
.flavor_flavor_theme_button a,
input[type="submit"],
button[type="submit"],
.elementor-button,
.wpcf7-submit {
    background-color: var(--fq-green) !important;
    color: var(--fq-white) !important;
    border: none !important;
    border-radius: var(--fq-radius-sm) !important;
    font-family: var(--fq-font-heading) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all var(--fq-transition) !important;
}

.theme-flavor-flavor .flavor_flavor_button a:hover,
.flavor_flavor_button a:hover,
.flavor_flavor_theme_button:hover,
.flavor_flavor_theme_button a:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.elementor-button:hover,
.wpcf7-submit:hover {
    background-color: var(--fq-green-dark) !important;
    color: var(--fq-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.4) !important;
}


/* =============================================
   §4. HEADER — STRUCTURE & GLASSMORPHISM
   Fixed frosted glass bar on all pages.
   Replaces old Sections 1, 36a, 37c, 39, 45,
   52, 56, 60.
   ============================================= */

/* Kill all parent-theme backgrounds */
body .header.type2,
body .header.type2 .topmenu-bar,
body .header.type2 .container,
body .header.type2 .top-nav,
body .header.type2 .logoimga,
body .header_wrap.layer_wrapper,
.topmenu-bar,
.header_wrap {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Frosted glass — all pages */
body .header.type2,
body.home .header.type2,
body.not_frontpage .header.type2,
body:not(.home) .header.type2,
body.page .header.type2,
body.single .header.type2,
body.archive .header.type2 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    padding: 10px 0 !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.08) !important;
    transition: background var(--fq-transition), box-shadow var(--fq-transition) !important;
}

/* WP Admin bar offset */
body.admin-bar .header.type2 {
    top: 32px !important;
}

/* Subpage content offset for fixed header */
body:not(.home) .flavor_flavor_page_header,
body:not(.home) .page-header-area,
body:not(.home) .flavor_flavor_breadcrumb_section {
    margin-top: 80px !important;
}

body:not(.home):not(:has(.flavor_flavor_page_header)):not(:has(.page-header-area)):not(:has(.flavor_flavor_breadcrumb_section)) main,
body:not(.home):not(:has(.flavor_flavor_page_header)):not(:has(.page-header-area)):not(:has(.flavor_flavor_breadcrumb_section)) #content {
    margin-top: 80px !important;
}

/* Flex row for header content */
.header.type2 .center {
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    min-height: auto !important;
}

.header.type2 .topmenu-bar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* =============================================
   §5. HEADER — LOGO
   Controlled sizing with hover animation.
   Replaces old Sections 2, 3, 37a, 37b, 40, 44, 53.
   ============================================= */
.header .logo,
.header .logoimga,
.header.type2 .logo {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: auto !important;
}

html body .header.type2 .logo img,
html body .header.type2 .logoimga img,
html body .header .logo img,
html body .header .logoimga img,
.site-logo img,
img.custom-logo {
    max-height: 80px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)) !important;
    transition: filter var(--fq-transition), transform var(--fq-transition) !important;
}

.header .logo img:hover,
.header .logoimga img:hover {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) !important;
    transform: scale(1.04) !important;
}

/* Hide tagline */
.header .logo .desc,
.header .logoimga+.desc,
.logo .desc {
    display: none !important;
}


/* =============================================
   §6. HEADER — NAVIGATION LINKS
   Clean dark text on frosted glass, green hover.
   Replaces old Sections 5-7, 36a nav, 37d, 38,
   41, 47, 49-51, 57.
   ============================================= */

/* Default state — dark text, all pages */
body #topmenu #menu-header>li>a,
body .header.type2 #topmenu #menu-header li a,
body .header.type2 .menu-header li.menu-item>a,
body .header.type2 nav ul li a,
body.home.has_trans_header #topmenu #menu-header>li>a,
body.home.has_trans_header .header.type2 #topmenu #menu-header li a,
body.home.has_trans_header .header.type2 nav ul li a,
body:not(.home) .header.type2 .menu-header li.menu-item>a {
    color: var(--fq-black) !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6) !important;
    padding: 8px 18px !important;
    border-radius: var(--fq-radius-sm) !important;
    transition: all var(--fq-transition) !important;
    position: relative !important;
}

/* Hover state — green text */
body #topmenu #menu-header>li>a:hover,
body .header.type2 #topmenu #menu-header li a:hover,
body .header.type2 .menu-header li.menu-item>a:hover,
body .header.type2 nav ul li a:hover,
body.home.has_trans_header #topmenu #menu-header>li>a:hover,
body.home.has_trans_header .header.type2 #topmenu #menu-header li a:hover,
body.home.has_trans_header .header.type2 nav ul li a:hover,
body:not(.home) .header.type2 .menu-header li.menu-item>a:hover {
    color: var(--fq-green-bright) !important;
    text-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Active/current state — green text + subtle bottom accent */
body #topmenu #menu-header>li.current-menu-item>a,
body #topmenu #menu-header>li.current-menu-ancestor>a,
body #topmenu #menu-header>li.current_page_item>a,
body #topmenu #menu-header>li.current_page_parent>a,
body .header.type2 .menu-header li.current-menu-item>a,
body .header.type2 .menu-header li.current-menu-ancestor>a,
body.home.has_trans_header #topmenu #menu-header>li.current-menu-item>a,
body.home.has_trans_header #topmenu #menu-header>li.current-menu-ancestor>a,
body.home.has_trans_header #topmenu #menu-header>li.current_page_parent>a,
body.home.has_trans_header .header.type2 #topmenu #menu-header>li.current-menu-item>a,
body.home.has_trans_header .header.type2 #topmenu #menu-header>li.current-menu-ancestor>a,
body.home.has_trans_header .header.type2 #topmenu #menu-header>li.current_page_parent>a,
body:not(.home) #topmenu #menu-header>li.current-menu-item>a,
body:not(.home) #topmenu #menu-header>li.current-menu-ancestor>a,
body:not(.home) .header.type2 .menu-header li.current-menu-item>a,
body:not(.home) .header.type2 .menu-header li.current_page_item>a {
    color: var(--fq-green-bright) !important;
    font-weight: 700 !important;
    background: transparent !important;
    background-color: transparent !important;
    text-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 2px solid var(--fq-green-bright) !important;
}

/* Kill ::before pseudo accent from theme */
body #topmenu #menu-header>li.current-menu-item>a::before,
body #topmenu #menu-header>li.current-menu-ancestor>a::before,
body #topmenu #menu-header>li.current_page_item>a::before,
body .header.type2 .menu-header li.current-menu-item>a::before {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}


/* =============================================
   §7. HEADER — DROPDOWN SUBMENUS
   White bg, dark text, green hover.
   Replaces old Section 8, 42.
   ============================================= */
#menu-header li ul.sub-menu {
    background-color: var(--fq-white) !important;
    border-radius: 8px !important;
    box-shadow: var(--fq-shadow-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}

body #topmenu #menu-header ul.sub-menu li a,
body #topmenu ul.children li a,
body.home.has_trans_header #topmenu #menu-header ul.sub-menu li a,
body.home.has_trans_header #topmenu ul.children li a,
#menu-header li ul.sub-menu li a,
#topmenu ul.sub-menu li a {
    color: var(--fq-gray-700) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    padding: 10px 20px !important;
    transition: color var(--fq-transition), background-color var(--fq-transition) !important;
    border-bottom: none !important;
}

body #topmenu #menu-header ul.sub-menu li a:hover,
body #topmenu ul.children li a:hover,
body.home.has_trans_header #topmenu #menu-header ul.sub-menu li a:hover,
body.home.has_trans_header #topmenu ul.children li a:hover,
#menu-header li ul.sub-menu li a:hover,
#topmenu ul.sub-menu li a:hover {
    color: var(--fq-white) !important;
    background-color: var(--fq-green) !important;
}


/* =============================================
   §8. HEADER — CTA BUTTON (CONTÁCTENOS)
   Pill-shaped green button with glow.
   Replaces old Sections 9-11, 37e, 43, 46, 48.
   ============================================= */

/* Kill theme backgrounds on CTA wrappers */
.header.type2 .header-extras,
.header.type2 .header_right_btn,
.header.type2 .headbtn,
.header.type2 .head-cont-btn,
.header.type2 .header-extras::before,
.header.type2 .header-extras::after,
.header.type2 .headbtn::before,
.header.type2 .headbtn::after,
.header.type2 .head-cont-btn::before,
.header.type2 .head-cont-btn::after,
.header.type2 .header_right_btn::before,
.header.type2 .header_right_btn::after,
.topmenu-bar::before,
.topmenu-bar::after {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.header.type2 .header-extras,
.header.type2 .headbtn,
.header.type2 .head-cont-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 15px !important;
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
}

/* The actual CTA link */
body .header.type2 .header-extras a,
body .header.type2 .headbtn a,
body .header.type2 .header_right_btn a,
body .header.type2 .head-cont-btn a,
body .header.type2 a.header-btn {
    background-color: var(--fq-green) !important;
    color: var(--fq-white) !important;
    padding: 10px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    border-radius: var(--fq-radius-pill) !important;
    font-family: var(--fq-font-heading) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    transition: all var(--fq-transition) !important;
    border: none !important;
    border-bottom: none !important;
    height: auto !important;
    white-space: nowrap !important;
    box-shadow: var(--fq-shadow-glow) !important;
    text-shadow: none !important;
}

body .header.type2 .header-extras a:hover,
body .header.type2 .headbtn a:hover,
body .header.type2 .header_right_btn a:hover,
body .header.type2 .head-cont-btn a:hover,
body .header.type2 a.header-btn:hover {
    background-color: var(--fq-green-dark) !important;
    color: var(--fq-white) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.5) !important;
    transform: translateY(-2px) !important;
}


/* =============================================
   §9. HEADER — HIDE DUPLICATE CONTACTO LINK
   Keep only the green CTA button.
   Replaces old Section 30.
   ============================================= */
/* Hide the duplicate "CONT�CTENOS" custom link from the nav menu.
   The theme already renders it as the green CTA button in .header-extras;
   this prevents it from also showing in the main <ul> list (#menu-item-999). */
#menu-item-999,
#topmenu #menu-header > li.menu-item-type-custom > a[href*="contacto"],
#topmenu ul > li.menu-item > a[href*="contacto"],
/* Mobile sidr hamburger menu — hide the duplicate Contact link (keep the CTA button) */
#sidr-main ul li.menu-item-type-custom:has(a[href*="contacto"]),
#sidr-main ul li:has(a[href*="forquinsa.com/contacto"]) {
    display: none !important;
}


/* =============================================
   §10. HEADER — MOBILE RESPONSIVE
   Centered logo, CTA left, hamburger right.
   Replaces old Sections 22, 54, 55, 58, 59, 61.
   ============================================= */
@media (max-width: 980px) {

    /* Slim mobile bar */
    body .header.type2 {
        padding: 6px 0 !important;
        position: fixed !important;
        top: 0 !important;
    }

    body.admin-bar .header.type2 {
        top: 46px !important;
    }

    /* Flex row layout */
    body .header.type2 .center {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        position: relative !important;
    }

    /* Center logo absolutely */
    body .header.type2 .logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: auto !important;
        z-index: 2 !important;
    }

    /* Logo sizing on mobile */
    body .header.type2 .logo img,
    body .header.type2 .logoimga img,
    html body .header.type2 .logo img,
    html body .header .logo img {
        max-height: 50px !important;
    }

    /* CTA flush left */
    body .header.type2 .header-extras {
        display: flex !important;
        align-items: center !important;
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: 1 !important;
    }

    body .header.type2 .header-extras a {
        font-size: 10px !important;
        padding: 6px 12px !important;
        border-radius: 16px !important;
        letter-spacing: 0.8px !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    /* Hamburger flush right */
    body .header.type2 .header-menu {
        order: 3 !important;
        margin-left: auto !important;
        z-index: 3 !important;
    }

    a#simple-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
    }

    a#simple-menu i.fa-bars,
    #simple-menu i,
    #simple-menu .fa,
    #simple-menu .fa-bars {
        font-size: 26px !important;
        color: var(--fq-black) !important;
        line-height: 1 !important;
        display: inline-block !important;
    }

    /* Mobile dropdown */
    #menu-header {
        display: none;
    }

    #menu-header.show,
    .header-menu.open #menu-header {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        z-index: 9998 !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
        border-radius: 0 0 12px 12px !important;
    }

    #menu-header.show li a,
    .header-menu.open #menu-header li a {
        padding: 14px 20px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Kill the active-state bottom border in mobile dropdown */
    body #topmenu #menu-header>li.current-menu-item>a,
    body .header.type2 .menu-header li.current-menu-item>a {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-left: 3px solid var(--fq-green-bright) !important;
    }
}


/* =============================================
   §11. HERO SECTION — FULL VIEWPORT SLIDER
   NivoSlider full-screen with cinematic gradient.
   ============================================= */

/* Full viewport container — transparent bg so #home_slider bg-image shows through */
.slider-main,
.theme_flavor-slider,
#slider,
.nivoSlider,
.slider-wrapper {
    height: 100vh !important;
    max-height: 100vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
}

/* Images cover the viewport — including first slide before JS init */
.nivoSlider {
    position: relative !important;
    background: transparent !important;
}

/* Override parent theme loading placeholder */
.theme-default .nivoSlider {
    background: transparent !important;
}

/* Main display image — absolutely positioned to fill container */
.nivoSlider .nivo-main-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1 !important;
}

/* Hidden slide images (NivoSlider hides them by default) */
.nivoSlider img:not(.nivo-main-image) {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Transition slices — force full viewport height to prevent black gap */
.nivo-slice {
    height: 100vh !important;
}

.nivo-slice img {
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Gradient overlay removed — was creating perceived dark bar at bottom */


/* =============================================
   §12. HERO SECTION — CAPTIONS
   Vertically centered text over the slider.
   ============================================= */
.nivo-caption {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 70%, transparent 100%) !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 90px 0 60px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 50 !important;
    opacity: 1 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    text-align: center !important;
}

/* Reset all theme-enforced child positioning */
.nivo-caption .slidetitle,
.nivo-caption .title,
.nivo-caption .title large,
.nivo-caption .slidedesc,
.nivo-caption .slidelink {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 700px !important;
    display: block !important;
    padding: 0 40px !important;
}

/* Title typography — clean, bold, modern */
.nivo-caption .slidetitle,
.nivo-caption .title,
.nivo-caption .title large {
    font-family: var(--fq-font-heading) !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    color: var(--fq-white) !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
}

/* Description text — lighter, spaced */
.nivo-caption .slidedesc {
    font-family: var(--fq-font-body) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    color: rgba(255, 255, 255, 0.85) !important;
    max-width: 700px !important;
    margin-bottom: 36px !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.2px !important;
}

/* CTA button — green pill with glow */
.nivo-caption a.slidelink,
.nivo-caption .slidelink a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: var(--fq-green) !important;
    color: var(--fq-white) !important;
    padding: 18px 48px !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    border-radius: var(--fq-radius-pill) !important;
    box-shadow: 0 8px 30px rgba(0, 166, 81, 0.4) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    text-decoration: none !important;
    border: none !important;
}

.nivo-caption a.slidelink:hover,
.nivo-caption .slidelink a:hover {
    background-color: var(--fq-green-dark) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 44px rgba(0, 166, 81, 0.55) !important;
    color: var(--fq-white) !important;
}


/* =============================================
   §13. HERO SECTION — SLIDER NAVIGATION
   Clean prev/next arrows + pill-shaped dots.
   ============================================= */

/* Arrow navigation */
.nivo-directionNav a {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 60 !important;
    transition: all 0.3s ease !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.nivo-directionNav a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.15) !important;
}

/* Dot navigation — pill bar */
.nivo-controlNav,
.slider-wrapper .nivo-controlNav,
.slider-main .nivo-controlNav,
.theme-default .nivo-controlNav,
.theme_flavor-slider .nivo-controlNav,
div.nivo-controlNav {
    bottom: 32px !important;
    z-index: 60 !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Individual dots */
.nivo-controlNav a {
    width: 10px !important;
    height: 10px !important;
    background: rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    border: none !important;
    transition: all 0.35s ease !important;
    text-indent: -9999px !important;
    display: block !important;
    cursor: pointer !important;
}

.nivo-controlNav a:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    transform: scale(1.15) !important;
}

/* Active dot — pill shape with green */
.nivo-controlNav a.active {
    width: 28px !important;
    height: 10px !important;
    background: var(--fq-green) !important;
    border-radius: 5px !important;
    box-shadow: 0 0 10px rgba(0, 166, 81, 0.5) !important;
}


/* =============================================
   §14. HERO SECTION — MOBILE RESPONSIVE
   Scale down typography for smaller screens.
   ============================================= */
@media (max-width: 768px) {

    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 32px !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        padding: 0 24px !important;
    }

    .nivo-caption .slidedesc {
        font-size: 15px !important;
        padding: 0 28px !important;
        margin-bottom: 28px !important;
        line-height: 1.5 !important;
    }

    .nivo-caption .slidelink a {
        padding: 15px 36px !important;
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
    }

    .nivo-caption {
        padding-bottom: 80px !important;
    }

    .nivo-directionNav a {
        width: 40px !important;
        height: 40px !important;
    }

    .nivo-controlNav {
        bottom: 24px !important;
        padding: 6px 12px !important;
    }

    .nivo-controlNav a {
        width: 8px !important;
        height: 8px !important;
    }

    .nivo-controlNav a.active {
        width: 22px !important;
        height: 8px !important;
    }
}

@media (max-width: 480px) {

    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 24px !important;
        padding: 0 20px !important;
    }

    .nivo-caption .slidedesc {
        font-size: 13px !important;
        padding: 0 20px !important;
        margin-bottom: 24px !important;
    }

    .nivo-caption .slidelink a {
        padding: 13px 28px !important;
        font-size: 11px !important;
    }

    .nivo-caption {
        padding-bottom: 65px !important;
    }
}


/* =============================================
   §15. HERO CAROUSEL — ELEMENTOR CTA BUTTONS
   Green hover effects for Elementor slide buttons.
   ============================================= */
.theme_flavor-slider .slide-element-text a,
.theme_flavor-slider .slide-element-text .theme_flavor-button,
.elementor-slides .elementor-slide-button,
.elementor-slides a.elementor-button {
    transition: all var(--fq-transition) !important;
}

.theme_flavor-slider .slide-element-text a:hover,
.theme_flavor-slider .slide-element-text .theme_flavor-button:hover,
.elementor-slides .elementor-slide-button:hover,
.elementor-slides a.elementor-button:hover {
    background-color: var(--fq-green-dark) !important;
    color: var(--fq-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.4) !important;
}


/* =============================================
   §16. FOOTER — STRUCTURE & THEME
   Light background, clean layout.
   Replaces old Sections 16, 64, 65.
   ============================================= */
#footer,
#footer.footer-type4,
.footer-menu-box {
    background: var(--fq-gray-100) !important;
    background-color: var(--fq-gray-100) !important;
}

/* Kill dark overlay pseudo-element */
#footer::before,
#footer.footer-type4::before {
    background: transparent !important;
    background-color: transparent !important;
}

/* Kill the green box on second column */
#footer .footer-menu-box .footercols4:nth-child(2),
#footer .footer-menu-box .footercols4:nth-child(2)[style],
.footer-menu-box .footercols4:nth-child(2),
.footer-menu-box .footercols4:nth-child(2)[style] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Previously dark-themed footer rules — now overridden */
.footer,
.footer-wrapper,
footer,
#footer,
.site-footer,
.flavor_flavor_footer_area {
    background-color: var(--fq-gray-100) !important;
    color: var(--fq-gray-700) !important;
}


/* =============================================
   §17. FOOTER — HEADINGS
   Dark headings with green accent underline.
   Replaces old Sections 31, 34, 35, 62.
   ============================================= */
#footer h3,
#footer .footercols4 h3,
.footer-menu-box h3,
footer h3,
footer h4,
footer .widget-title,
.footercols4 h1,
.footercols4 h2,
.footercols4 h3,
.footercols4 h4,
.footer-menu-box h1,
.footer-menu-box h2,
.footer-menu-box h3,
.footer-menu-box h4,
footer .elementor-heading-title,
footer .elementor-widget-heading .elementor-heading-title {
    color: var(--fq-black) !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    position: relative !important;
}

/* Green accent underline via ::after */
#footer .footercols4 h3::after {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    background: var(--fq-green-bright) !important;
    margin-top: 10px !important;
    border-radius: 2px !important;
}


/* =============================================
   §18. FOOTER — LINKS & TEXT
   Consistent typography and hover effects.
   Replaces old Sections 66, 68, 70.
   ============================================= */

/* Footer link lists */
#footer .footercols4 ul li a,
#footer .footmenu li a,
.footer-menu-box a {
    color: var(--fq-gray-500) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
    transition: color var(--fq-transition), padding-left var(--fq-transition) !important;
}

#footer .footercols4 ul li a:hover,
#footer .footmenu li a:hover,
.footer-menu-box a:hover {
    color: var(--fq-green-bright) !important;
    padding-left: 4px !important;
}

/* Paragraphs */
#footer .footercols4 p,
#footer .footer-about p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--fq-gray-500) !important;
}

/* List cleanup */
#footer .footercols4 ul li,
#footer .footmenu li {
    margin-bottom: 6px !important;
    padding: 0 !important;
}

#footer .footercols4 ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Kill bullet arrows */
#footer .footercols4 ul li a::before {
    content: none !important;
    display: none !important;
}

/* Contact info text — force dark on light bg */
#footer .footercols4 p[style],
#footer .footercols4 p[style*="color"],
#footer .footercols4 span,
#footer .footercols4 span[style],
#footer .footercols4 span[style*="color"],
#footer .footercols4 a[style],
#footer .footercols4 a[style*="color"] {
    color: var(--fq-gray-500) !important;
}

/* General footer links */
.footer a,
.footer-wrapper a,
footer a,
#footer a,
.site-footer a {
    color: var(--fq-gray-500) !important;
    transition: color var(--fq-transition) !important;
}

.footer a:hover,
.footer-wrapper a:hover,
footer a:hover,
#footer a:hover,
.site-footer a:hover {
    color: var(--fq-green-bright) !important;
}

/* About column text/logo */
.footer-about p,
.footer-about .footer-social-icons a {
    color: var(--fq-gray-500) !important;
}


/* =============================================
   §19. FOOTER — COLUMN DIVIDERS
   Subtle vertical separators between columns.
   Replaces old Section 69.
   ============================================= */
@media (min-width: 768px) {
    #footer .footercols4:not(:last-child) {
        border-right: 1px solid #E0E0E0 !important;
    }

    /* Last content column — no border */
    #footer .footer-menu-box .footercols4:nth-child(3) {
        border-right: none !important;
    }
}


/* =============================================
   §20. FOOTER — SOCIAL ICONS
   Circular containers with hover animation.
   Replaces old Section 70.
   ============================================= */
#footer .footer-about a,
#footer .footer-about a i,
#footer .footer-about .fa,
#footer .footer-about [class*="fa-"] {
    color: var(--fq-gray-500) !important;
    font-size: 18px !important;
    transition: all var(--fq-transition) !important;
}

#footer .footer-about a:hover,
#footer .footer-about a:hover i {
    color: var(--fq-green-bright) !important;
    transform: translateY(-2px) !important;
}


/* =============================================
   §21. FOOTER — AWT TRUST BADGE
   Replaces old Section 67.
   ============================================= */
.awt-trust-badge {
    display: block;
    max-width: 140px;
    margin-top: 20px;
    opacity: 0.85;
    transition: opacity var(--fq-transition);
}

.awt-trust-badge:hover {
    opacity: 1;
}


/* =============================================
   §22. FOOTER — LOGO
   Replaces old Section 37f.
   ============================================= */
.footer-infobox-left img,
#footer .logo img,
.footer-logo img,
.footer-infobox img {
    max-height: 75px !important;
    width: auto !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)) !important;
}


/* =============================================
   §23. FOOTER — COPYRIGHT BAR
   Dark bar with centered text.
   Replaces old Sections 63, 32.
   ============================================= */
.flavor_flavor_copyright,
.flavor_flavor_copyright_area,
.copyright-area,
.footer-bottom,
#copyright {
    background-color: var(--fq-gray-900) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 16px 0 !important;
}

#copyright .copytext {
    color: rgba(255, 255, 255, 0.6) !important;
}

#copyright .copytext a,
#copyright .copytext a[style] {
    color: var(--fq-green-bright) !important;
    text-decoration: none !important;
    transition: color var(--fq-transition) !important;
}

#copyright .copytext a:hover {
    color: var(--fq-white) !important;
}

.footer-bottom-area .elementor-heading-title,
.copyright-text,
footer .site-info,
.footer-copyright .elementor-heading-title {
    display: block !important;
}

footer a[href*="softgamez"],
.footer-bottom-area a,
.copyright-text a,
footer .site-info a {
    color: var(--fq-green-bright) !important;
    opacity: 1 !important;
    text-decoration: none !important;
}


/* =============================================
   §24. FOOTER — MOBILE RESPONSIVE
   Stack columns, center text, collapse dividers.
   ============================================= */
@media (max-width: 768px) {
    #footer .footercols4 {
        border-right: none !important;
        text-align: center !important;
        padding: 24px 20px !important;
        border-bottom: 1px solid #E8E8E8 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    #footer .footercols4:last-child {
        border-bottom: none !important;
    }

    /* Center the green accent underline below ALL heading levels */
    #footer .footercols4 h1::after,
    #footer .footercols4 h2::after,
    #footer .footercols4 h3::after,
    #footer .footercols4 h4::after {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center AWT badge */
    .awt-trust-badge,
    #footer .footercols4 img[src*="awt"],
    #footer .footercols4 img[src*="AWT"] {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Center ALL images in footer columns */
    #footer .footercols4 img,
    .footer-infobox-left img,
    #footer .logo img,
    .footer-logo img {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Center the "about" wrapper column */
    #footer .footer-about,
    #footer .footercols4 .footer-about {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Non-anchor children take full width (stack vertically) */
    #footer .footer-about > h1,
    #footer .footer-about > h2,
    #footer .footer-about > h3,
    #footer .footer-about > h4,
    #footer .footer-about > p,
    #footer .footer-about > img,
    #footer .footer-about > div {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Generic child divs not footer-about or icon containers use column */
    #footer .footercols4 > div:not(.footer-about):not(.footer-social-icons):not(.footer-contact-icons) {
        text-align: center !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Center Elementor widgets inside footer columns */
    #footer .elementor-widget-wrap,
    #footer .elementor-element,
    #footer .elementor-widget {
        text-align: center !important;
        width: 100% !important;
    }

    #footer .elementor-widget-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Center social / contact icon rows */
    #footer .elementor-social-icons-wrapper,
    #footer .elementor-icon-list-items,
    #footer .footer-social-icons,
    #footer .footer-contact-icons {
        justify-content: center !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Social icon anchor links — keep them inline/horizontal */
    #footer .footercols4 a:has(> .fa),
    #footer .footercols4 a:has(> .fab),
    #footer .footercols4 a:has(> .fas),
    #footer .footercols4 a:has(> i) {
        display: inline-flex !important;
        flex-direction: row !important;
    }

    /* Fix paragraphs back to block */
    #footer .footercols4 p {
        display: block !important;
    }

    /* Center list items */
    #footer .elementor-icon-list-item,
    #footer .footercols4 ul li {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Prevent left-push on hover in mobile */
    #footer .footercols4 ul li a:hover,
    #footer .footmenu li a:hover {
        padding-left: 0 !important;
    }
}


/* =============================================
   §25. HOMEPAGE: HIDE DEMO SECTIONS
   Elementor data-id targeting for placeholder
   content, deleted CPTs, and lorem ipsum.
   ============================================= */

/* About Chemical Industry (light bg) — hidden */
[data-id="219bce8c"] {
    display: none !important;
}

/* Company Features */
[data-id="56cd39fd"] {
    display: none !important;
}

/* Special Products CTA */
[data-id="6855f5c0"] {
    display: none !important;
}

/* Precision and Efficiency */
[data-id="718a267e"] {
    display: none !important;
}

/* Our Projects (deleted CPT) */
[data-id="324feb03"] {
    display: none !important;
}

/* Our Team (deleted CPT) */
[data-id="599db63"] {
    display: none !important;
}

/* Why Choose Us */
[data-id="609f3633"] {
    display: none !important;
}

/* Testimonials (deleted CPT) */
[data-id="6f00f708"] {
    display: none !important;
}

/* From the Blog */
[data-id="b7ad00f"] {
    display: none !important;
}

/* Our Clients */
[data-id="7c00e505"] {
    display: none !important;
}

/* Services Section (SOLUCIONES/QUÍMICAS) — hidden */
[data-id="5632d77b"] {
    display: none !important;
}

/* Projects Carousel — hidden */
[data-id="151e3c60"] {
    display: none !important;
}


/* =============================================
   §26. ABOUT SECTION (DARK BG) — BRAND COLORS
   Green override for counters and buttons on
   section 44473cc2.
   ============================================= */

/* Subheading: green */
[data-id="44473cc2"] .elementor-element-3070d502 .elementor-heading-title {
    color: var(--fq-green) !important;
}

/* Main heading: white */
[data-id="44473cc2"] .elementor-element-353b18ca .elementor-heading-title {
    color: var(--fq-white) !important;
}

/* All headings: white */
[data-id="44473cc2"] .elementor-heading-title {
    color: var(--fq-white) !important;
}

[data-id="44473cc2"] .elementor-widget-heading .elementor-heading-title[style*="color"] {
    color: var(--fq-green) !important;
}

/* Counter numbers — large green impact */
.elementor-section[data-id="44473cc2"] .elementor-counter-number-wrapper,
[data-id="44473cc2"] .elementor-counter .elementor-counter-number,
[data-id="44473cc2"] .elementor-counter-number-wrapper span,
[data-id="44473cc2"] .elementor-counter-number-suffix {
    color: var(--fq-green-bright) !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 52px !important;
    font-weight: 900 !important;
}

/* Counter titles — uppercase, spaced */
.elementor-section[data-id="44473cc2"] .elementor-counter-title,
[data-id="44473cc2"] .elementor-counter .elementor-counter-title {
    color: var(--fq-green-bright) !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: 8px !important;
}

/* Counter icons — green */
[data-id="44473cc2"] .elementor-icon i,
[data-id="44473cc2"] .elementor-icon svg {
    color: var(--fq-green-bright) !important;
    fill: var(--fq-green-bright) !important;
}

/* Stats box border — refined with radius */
[data-id="44473cc2"] .e-con {
    border-color: var(--fq-green) !important;
    border-width: 2px !important;
    border-radius: 12px !important;
}

/* Description text in about section */
[data-id="44473cc2"] .elementor-widget-text-editor,
[data-id="44473cc2"] .elementor-text-editor p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
}

/* Button — pill with glow */
[data-id="44473cc2"] .elementor-button {
    background-color: var(--fq-green) !important;
    border-color: var(--fq-green) !important;
    border-radius: var(--fq-radius-pill) !important;
    padding: 16px 40px !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.3) !important;
    transition: all var(--fq-transition) !important;
}

[data-id="44473cc2"] .elementor-button .elementor-button-text,
[data-id="44473cc2"] .elementor-button .elementor-button-icon,
[data-id="44473cc2"] .elementor-button .elementor-button-icon i {
    color: var(--fq-white) !important;
}

[data-id="44473cc2"] .elementor-button:hover {
    background-color: var(--fq-green-dark) !important;
    border-color: var(--fq-green-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 166, 81, 0.45) !important;
}

/* Force green on any element with inline amber color */
[style*="#F5A623"],
[style*="#f5a623"],
[style*="rgb(245, 166, 35)"] {
    color: var(--fq-green) !important;
}

/* Mobile counters */
@media (max-width: 768px) {

    .elementor-section[data-id="44473cc2"] .elementor-counter-number-wrapper,
    [data-id="44473cc2"] .elementor-counter .elementor-counter-number {
        font-size: 36px !important;
    }

    [data-id="44473cc2"] .elementor-counter-title {
        font-size: 11px !important;
    }

    [data-id="44473cc2"] .elementor-button {
        padding: 12px 28px !important;
        font-size: 12px !important;
    }
}


/* =============================================
   §27. SECTION BACKGROUNDS (Alternating)
   ============================================= */
.flavor-section:nth-child(even),
.elementor-section:nth-child(even) {
    background-color: #F5F9F6 !important;
}


/* =============================================
   §28. PAGE HEADER BANNERS — Premium Overlay
   Dark gradient over the industrial background
   image for white-text legibility.
   ============================================= */
.page_head,
.flavor_flavor_page_header,
.page-header-area,
.flavor_flavor_breadcrumb_section,
body:not(.home) .flavor_flavor_page_header {
    position: relative !important;
    min-height: 280px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Dark gradient overlay */
.page_head::before,
.flavor_flavor_page_header::before,
.page-header-area::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.45) 50%,
            rgba(0, 0, 0, 0.55) 100%) !important;
    z-index: 1 !important;
}

/* Banner image — fill container */
.page_head>img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}

/* Title wrapper — above overlay */
.page_head .cattitle_wrap,
.page_head .cattitle_wrap .center {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    text-align: center !important;
}

/* Title text — white, centered, above overlay */
.page_head h1,
.page_head .cattitle_wrap h1,
.flavor_flavor_page_header h1,
.page-header-area h1,
.flavor_flavor_breadcrumb_section h1,
.flavor_flavor_page_header .page-title,
.page-header-area .page-title {
    color: var(--fq-white) !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 42px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

/* Breadcrumb styling */
.flavor_flavor_breadcrumb_section a,
.breadcrumb a {
    color: var(--fq-green-bright) !important;
    position: relative !important;
    z-index: 2 !important;
}

.flavor_flavor_breadcrumb_section,
.breadcrumb {
    color: rgba(255, 255, 255, 0.7) !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile banner height */
@media (max-width: 768px) {

    .page_head,
    .flavor_flavor_page_header,
    .page-header-area {
        min-height: 200px !important;
    }

    .page_head h1,
    .page_head .cattitle_wrap h1,
    .flavor_flavor_page_header h1,
    .page-header-area h1 {
        font-size: 28px !important;
        letter-spacing: 2px !important;
    }
}


/* =============================================
   §29. TOPBAR TEXT
   ============================================= */
.topmenu-bar a,
.topmenu-bar .top-contact-info,
.topmenu-bar .top-contact-info i {
    color: var(--fq-black) !important;
}

.topmenu-bar a:hover {
    color: var(--fq-green) !important;
}


/* =============================================
   §30. SERVICES SECTION — TYPOGRAPHY
   (Hidden but preserved for potential future use)
   ============================================= */
[data-id="5632d77b"] .elementor-heading-title {
    font-family: 'Oswald', sans-serif !important;
    visibility: visible !important;
}

[data-id="5632d77b"] .elementor-heading-title::after {
    content: none !important;
    display: none !important;
}

/* Vertical text (SOLUCIONES) */
.elementor-element-653e76cd .elementor-heading-title {
    font-size: 130px !important;
    font-weight: 700 !important;
    letter-spacing: -6px !important;
    color: #282828 !important;
}

/* Stacked text (QUÍMICAS) */
.elementor-element-37e7f039 .elementor-heading-title {
    font-size: 154px !important;
    font-weight: 700 !important;
    letter-spacing: -2px !important;
    line-height: 169px !important;
    color: #282828 !important;
}

/* Right column headings */
[data-id="5632d77b"] .e-con-inner>.e-con:last-child .elementor-element:first-child .elementor-heading-title {
    color: var(--fq-white) !important;
    font-size: 23px !important;
    font-weight: 400 !important;
}

[data-id="5632d77b"] .e-con-inner>.e-con:last-child .elementor-element:nth-child(2) .elementor-heading-title {
    color: var(--fq-white) !important;
    font-size: 58px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: -2px !important;
    line-height: 58px !important;
}

/* Mobile scaling */
@media (max-width: 768px) {
    .elementor-element-653e76cd .elementor-heading-title {
        font-size: 60px !important;
        letter-spacing: -3px !important;
    }

    .elementor-element-37e7f039 .elementor-heading-title {
        font-size: 80px !important;
        line-height: 88px !important;
        letter-spacing: -1px !important;
    }

    [data-id="5632d77b"] .e-con-inner>.e-con:last-child .elementor-element:first-child .elementor-heading-title {
        font-size: 16px !important;
    }

    [data-id="5632d77b"] .e-con-inner>.e-con:last-child .elementor-element:nth-child(2) .elementor-heading-title {
        font-size: 32px !important;
        line-height: 34px !important;
    }
}


/* =============================================
   §31. SERVICES SECTION — FULLY HIDDEN
   ============================================= */
.elementor-icon-list-item a[href*="servicios"],
.elementor-icon-list-item a[href*="nuestros-servicios"] {
    display: none !important;
}


/* =============================================
   §32. WHATSAPP FLOATING BUTTON
   ============================================= */
.whatsapp-float {
    position: fixed !important;
    bottom: 100px !important;
    right: 30px !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #25D366 !important;
    color: var(--fq-white) !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 30px !important;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4) !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all var(--fq-transition) !important;
}

.whatsapp-float:hover {
    background-color: #128C7E !important;
    transform: scale(1.1) translateY(-3px) !important;
    color: var(--fq-white) !important;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5) !important;
}

.whatsapp-float svg {
    width: 32px !important;
    height: 32px !important;
    fill: var(--fq-white) !important;
}


/* =============================================
   §33. FOOTER — NUESTROS SERVICIOS COLUMN CLEANUP
   Hide service-related list items in footer.
   ============================================= */
.elementor-location-footer .elementor-widget-icon-list ul li a[href*="servicio"],
[data-elementor-type="footer"] .elementor-widget-icon-list ul li a[href*="servicio"],
footer .elementor-widget-icon-list ul li a[href*="our-service"] {
    display: none !important;
}

.elementor-location-footer .elementor-icon-list-item:has(a[href*="servicio"]),
[data-elementor-type="footer"] .elementor-icon-list-item:has(a[href*="servicio"]),
footer .elementor-icon-list-item:has(a[href*="our-service"]) {
    display: none !important;
}


/* =============================================
   §34. CONTACT FORM SECTION — ELEVATED INPUTS
   Premium form styling for homepage contact
   section (2cd44695) and all CF7/Elementor forms.
   ============================================= */

/* Form inputs — clean bottom-border style */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.elementor-field-textual input,
.elementor-field-textual textarea,
[data-id="2cd44695"] input[type="text"],
[data-id="2cd44695"] input[type="email"],
[data-id="2cd44695"] input[type="tel"],
[data-id="2cd44695"] textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #DDDDDD !important;
    border-radius: 0 !important;
    padding: 14px 4px !important;
    font-family: var(--fq-font-body) !important;
    font-size: 15px !important;
    color: var(--fq-gray-700) !important;
    transition: border-color var(--fq-transition), box-shadow var(--fq-transition) !important;
    outline: none !important;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus,
.elementor-field-textual input:focus,
.elementor-field-textual textarea:focus,
[data-id="2cd44695"] input:focus,
[data-id="2cd44695"] textarea:focus {
    border-bottom-color: var(--fq-green) !important;
    box-shadow: 0 2px 0 0 var(--fq-green) !important;
}

/* Form labels */
.wpcf7 label,
.elementor-field-label,
[data-id="2cd44695"] label {
    font-family: var(--fq-font-heading) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--fq-gray-500) !important;
}

/* Submit button — green pill matching site system */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit,
[data-id="2cd44695"] button[type="submit"],
[data-id="2cd44695"] .elementor-button {
    background-color: var(--fq-green) !important;
    color: var(--fq-white) !important;
    border: none !important;
    border-radius: var(--fq-radius-pill) !important;
    padding: 16px 50px !important;
    font-family: var(--fq-font-heading) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.3) !important;
    transition: all var(--fq-transition) !important;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover,
[data-id="2cd44695"] button[type="submit"]:hover,
[data-id="2cd44695"] .elementor-button:hover {
    background-color: var(--fq-green-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0, 166, 81, 0.45) !important;
}

/* Contact section world map background — subtle overlay */
[data-id="2cd44695"] {
    position: relative !important;
}

[data-id="2cd44695"]::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(248, 249, 250, 0.85) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

[data-id="2cd44695"]>* {
    position: relative !important;
    z-index: 1 !important;
}

/* Contact section text */
[data-id="2cd44695"] .elementor-heading-title {
    font-family: var(--fq-font-heading) !important;
    font-weight: 800 !important;
    color: var(--fq-black) !important;
}

[data-id="2cd44695"] .elementor-text-editor p,
[data-id="2cd44695"] .elementor-widget-text-editor {
    color: var(--fq-gray-500) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =============================================
   §35. PRODUCT CARDS — HOVER EFFECTS
   Premium card treatment for the products grid
   on /productos/ and homepage.
   ============================================= */

/* Product grid cards */
.theme_flavor-blog-box,
.projects-box,
.our_projects_box,
.elementor-post,
article.our_projects {
    background: var(--fq-white) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.theme_flavor-blog-box:hover,
.projects-box:hover,
.our_projects_box:hover,
.elementor-post:hover,
article.our_projects:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;
    border-color: rgba(0, 166, 81, 0.15) !important;
}

/* Card images — zoom on hover */
.theme_flavor-blog-box img,
.projects-box img,
.our_projects_box img,
article.our_projects img,
article.our_projects .post-thumbnail img {
    transition: transform 0.5s ease !important;
    border-radius: 12px 12px 0 0 !important;
}

.theme_flavor-blog-box:hover img,
.projects-box:hover img,
.our_projects_box:hover img,
article.our_projects:hover img,
article.our_projects:hover .post-thumbnail img {
    transform: scale(1.05) !important;
}

/* Card title */
.theme_flavor-blog-box h3,
.projects-box h3,
.our_projects_box h3,
article.our_projects h2,
article.our_projects .entry-title {
    font-family: var(--fq-font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fq-black) !important;
    transition: color var(--fq-transition) !important;
    padding: 16px 20px 8px !important;
}

.theme_flavor-blog-box:hover h3,
.projects-box:hover h3,
.our_projects_box:hover h3,
article.our_projects:hover h2,
article.our_projects:hover .entry-title {
    color: var(--fq-green) !important;
}

/* Card content area */
.theme_flavor-blog-box .post-content,
.projects-box .post-content,
article.our_projects .entry-content,
article.our_projects .entry-summary {
    padding: 0 20px 20px !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--fq-gray-500) !important;
}


/* =============================================
   §36. QUIÉNES SOMOS — CONTENT AREA STYLING
   Better readability with constrained width,
   styled mission/vision headings.
   ============================================= */

/* Watermark text — reduce opacity */
body.page-template-default .elementor-widget-heading .elementor-heading-title[style*="opacity"],
body.page .elementor-heading-title[style*="font-size: 150"],
body.page .elementor-heading-title[style*="font-size: 120"] {
    opacity: 0.04 !important;
}

/* Body text — better readability */
body.page .elementor-widget-text-editor .elementor-text-editor,
body.page .elementor-widget-text-editor p {
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: var(--fq-gray-700) !important;
    max-width: 850px !important;
}

/* Mission/Vision style headings — green left accent */
body.page .elementor-widget-heading .elementor-heading-title {
    font-family: var(--fq-font-heading) !important;
    font-weight: 700 !important;
}


/* =============================================
   §37. GLOBAL CONTENT AREA — CONSISTENCY
   Standardized section spacing, container widths,
   and paragraph defaults across ALL pages.
   ============================================= */

/* Section vertical padding — standard */
.elementor-section,
.elementor-top-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

/* Exception: hero, header, footer, hidden sections */
.slider-main,
.header.type2,
#footer,
.flavor_flavor_copyright,
.flavor_flavor_page_header,
.page-header-area,
[style*="display: none"],
[data-id="219bce8c"],
[data-id="56cd39fd"],
[data-id="6855f5c0"],
[data-id="718a267e"],
[data-id="324feb03"],
[data-id="599db63"],
[data-id="609f3633"],
[data-id="6f00f708"],
[data-id="b7ad00f"],
[data-id="7c00e505"],
[data-id="5632d77b"],
[data-id="151e3c60"] {
    padding-top: unset !important;
    padding-bottom: unset !important;
}

/* Container max-width */
.elementor-section .elementor-container {
    max-width: 1200px !important;
}

/* Global paragraph defaults */
.elementor-widget-text-editor p,
.entry-content p,
.page-content p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: var(--fq-gray-700) !important;
    margin-bottom: 1.2em !important;
}

/* Elementor image rounding */
.elementor-widget-image img,
.elementor-image img {
    border-radius: 8px !important;
}

/* Mobile section spacing */
@media (max-width: 768px) {

    .elementor-section,
    .elementor-top-section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .elementor-widget-text-editor p,
    .entry-content p {
        font-size: 15px !important;
    }
}


/* =============================================
   §38. SCROLL-TO-TOP BUTTON
   Green circle matching the design system.
   ============================================= */
.flavor_flavor_scrollup,
.flavor-scrollup,
#scrollup,
a.to_top,
a.flavor_flavor_scrollup,
.back-to-top,
.flavor_flavor_scroll_top {
    background-color: var(--fq-green) !important;
    color: var(--fq-white) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0, 166, 81, 0.3) !important;
    transition: all var(--fq-transition) !important;
    z-index: 9997 !important;
}

.flavor_flavor_scrollup:hover,
.flavor-scrollup:hover,
#scrollup:hover,
a.to_top:hover,
a.flavor_flavor_scrollup:hover,
.back-to-top:hover,
.flavor_flavor_scroll_top:hover {
    background-color: var(--fq-green-dark) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0, 166, 81, 0.4) !important;
    color: var(--fq-white) !important;
}

.flavor_flavor_scrollup i,
.flavor-scrollup i,
#scrollup i,
a.to_top i,
.back-to-top i,
.flavor_flavor_scroll_top i {
    color: var(--fq-white) !important;
    font-size: 18px !important;
}


/* =============================================
   §39. CONTACT PAGE — FORM & MAP CLEANUP
   Specific fixes for the /contacto/ page:
   broken map placeholder and form alignment.
   ============================================= */

/* Google Maps broken iframe — clean placeholder */
.flavor_flavor_contact_map,
.maps-box,
.flavor_flavor_map_section,
iframe[src*="maps"],
.elementor-widget-google_maps iframe {
    border-radius: 12px !important;
    border: 1px solid #E0E0E0 !important;
    min-height: 300px !important;
}

/* Map container when empty — subtle grey */
.flavor_flavor_contact_map:empty,
.maps-box:empty {
    background: var(--fq-gray-100) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Contact page info cards */
body.page-template-default .elementor-icon-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    padding: 24px !important;
    border-radius: 12px !important;
    transition: all var(--fq-transition) !important;
}

body.page-template-default .elementor-icon-box-wrapper:hover {
    background: rgba(0, 166, 81, 0.04) !important;
    transform: translateY(-2px) !important;
}

/* Icon boxes — green icons */
.elementor-icon-box-icon .elementor-icon i,
.elementor-icon-box-icon .elementor-icon svg {
    color: var(--fq-green) !important;
    fill: var(--fq-green) !important;
    transition: all var(--fq-transition) !important;
}

.elementor-icon-box-wrapper:hover .elementor-icon i,
.elementor-icon-box-wrapper:hover .elementor-icon svg {
    transform: scale(1.1) !important;
}


/* =============================================
   §40. FIXED HEADER — CONTENT OFFSET
   Prevent content from hiding behind the fixed
   header on inner pages. Homepage uses 100vh
   slider so no offset needed there.
   ============================================= */
body:not(.home) .flavor_flavor_page_header,
body:not(.home) .page-header-area,
body:not(.home) .flavor_flavor_breadcrumb_section {
    padding-top: 95px !important;
}

/* Fallback for pages without a banner */
body:not(.home):not(:has(.flavor_flavor_page_header)):not(:has(.page-header-area)) .site-content,
body:not(.home):not(:has(.flavor_flavor_page_header)):not(:has(.page-header-area)) #content,
body:not(.home):not(:has(.flavor_flavor_page_header)):not(:has(.page-header-area)) main {
    padding-top: 95px !important;
}


/* =============================================
   §41. GLOBAL LINK & HOVER MICRO-INTERACTIONS
   Subtle animations that make the site feel
   alive and interactive.
   ============================================= */

/* All links — smooth color transition */
a {
    transition: color var(--fq-transition) !important;
}

/* All images — subtle entrance */
img {
    transition: opacity 0.4s ease !important;
}

/* Elementor widget containers — stagger entrance feel */
.elementor-widget-wrap>.elementor-element {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}


/* =============================================
   §42. HOMEPAGE — HIDDEN DEMO SECTIONS
   Elementor data-id selectors for unused/placeholder
   sections containing English text or deleted CPTs.
   Migrated from Customizer CSS.
   ============================================= */

/* About Chemical Industry (light bg — replaced by dark) */
[data-id="219bce8c"] {
    display: none !important;
}

/* Company Features */
[data-id="56cd39fd"] {
    display: none !important;
}

/* Special Products CTA */
[data-id="6855f5c0"] {
    display: none !important;
}

/* Precision and Efficiency */
[data-id="718a267e"] {
    display: none !important;
}

/* Our Projects (deleted CPT) */
[data-id="324feb03"] {
    display: none !important;
}

/* Our Team (deleted CPT) */
[data-id="599db63"] {
    display: none !important;
}

/* Why Choose Us */
[data-id="609f3633"] {
    display: none !important;
}

/* Testimonials (deleted CPT) */
[data-id="6f00f708"] {
    display: none !important;
}

/* From the Blog */
[data-id="b7ad00f"] {
    display: none !important;
}

/* Our Clients */
[data-id="7c00e505"] {
    display: none !important;
}

/* Services carousel */
[data-id="5632d77b"] {
    display: none !important;
}

/* Projects carousel */
[data-id="151e3c60"] {
    display: none !important;
}


/* =============================================
   §43. FOOTER & NAV CLEANUP
   Hide "Nuestros Servicios" link, duplicate menu
   items, and specific footer widget entries.
   ============================================= */

/* Hide "Nuestros Servicios" link in footer */
.footer a[href*="servicios"],
.footer a[href*="our-services"],
.elementor-icon-list-item a[href*="servicios"],
.elementor-icon-list-item a[href*="nuestros-servicios"],
.footer .elementor-icon-list-item:has(a[href*="servicios"]) {
    display: none !important;
}

/* Hide duplicate Contacto menu item */
#menu-item-185,
.menu-item-185 {
    display: none !important;
}

/* Hide specific unused footer menu items */
[data-id="fe63a85"],
[data-id="3f471b20"],
#menu-item-187,
#menu-item-326,
#menu-item-327,
#menu-item-329,
#menu-item-330,
#menu-item-331,
#menu-item-332 {
    display: none !important;
}


/* =============================================
   FOOTER OVERHAUL
   Clean, spacious, modern footer layout.
   ============================================= */

/* Main footer container */
#footer,
.footer {
    padding: 60px 0 40px !important;
    background: #fafafa !important;
    border-top: 1px solid #e8e8e8 !important;
}

/* Remove vertical lines between columns */
#footer .footercols4,
.footer .footercols4 {
    border-right: none !important;
    border-left: none !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

#footer .footercols4:first-child {
    padding-left: 0 !important;
}

#footer .footercols4:last-child {
    padding-right: 0 !important;
}

/* Footer column headings — prevent line breaks */
#footer h3,
.footer h3 {
    font-family: var(--fq-font-heading, 'Montserrat', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #1a1a1a !important;
    margin-bottom: 24px !important;
    padding-bottom: 12px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    border-bottom: 2px solid var(--fq-green, #00a651) !important;
    display: inline-block !important;
}

/* Footer body text */
#footer p,
#footer li,
#footer a,
.footer p,
.footer li,
.footer a {
    font-family: var(--fq-font-body, 'Open Sans', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #555 !important;
}

/* Footer links hover */
#footer a:hover,
.footer a:hover {
    color: var(--fq-green, #00a651) !important;
    text-decoration: none !important;
}

/* Footer menu list items spacing */
#footer .footmenu li,
#footer ul li,
.footer .footmenu li {
    margin-bottom: 10px !important;
    list-style: none !important;
    padding-left: 0 !important;
}

#footer ul,
.footer ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* Remove bullet points */
#footer li::before,
.footer li::before {
    display: none !important;
    content: none !important;
}

/* Social media icons — horizontal layout with brand styling */
#footer .fa,
#footer .fab,
#footer .fas,
#footer .fa-brands,
#footer .fa-solid,
.footer .fa,
.footer .fab,
.footer .fas {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    margin-right: 10px !important;
    margin-bottom: 8px !important;
    font-size: 16px !important;
    color: var(--fq-green, #00a651) !important;
    background: rgba(0, 166, 81, 0.08) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#footer .fa:hover,
#footer .fab:hover,
#footer .fas:hover,
.footer .fa:hover,
.footer .fab:hover,
.footer .fas:hover,
/* Also trigger hover when hovering the parent <a> wrapper */
#footer .footer-social-icons a:hover .fa,
#footer .footer-social-icons a:hover .fab,
#footer .footer-social-icons a:hover .fas,
#footer .footer-about a:hover .fa,
#footer .footer-about a:hover .fab,
#footer .footer-about a:hover .fas {
    background: var(--fq-green, #00a651) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3) !important;
}

/* Social icon anchor links — no decoration, proper cursor */
#footer .footer-social-icons a,
#footer .footer-about a:has(i.fa),
#footer .footer-about a:has(i.fab),
#footer .footer-about a:has(i.fas) {
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    border: none !important;
    background: transparent !important;
}

/* ── §43b  Contact icon anchors (SVG-based) — circular green styling ── */
#footer .footer-contact-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 166, 81, 0.1) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    flex-shrink: 0 !important;
}

#footer .footer-contact-icons a svg {
    width: 20px !important;
    height: 20px !important;
    fill: #00a651 !important;
    transition: fill 0.3s ease !important;
    flex-shrink: 0 !important;
}

#footer .footer-contact-icons a:hover {
    background: #00a651 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 4px 12px rgba(0, 166, 81, 0.35) !important;
}

#footer .footer-contact-icons a:hover svg {
    fill: #fff !important;
}

/* Footer logo sizing */
#footer img[src*="logo"],
#footer img[src*="forquin"],
.footer img[src*="logo"],
.footer img[src*="forquin"] {
    max-width: 160px !important;
    height: auto !important;
    margin-bottom: 20px !important;
}

/* AWT trust badge */
#footer img[src*="awt"],
#footer img[src*="AWT"],
.footer img[src*="awt"] {
    max-width: 120px !important;
    height: auto !important;
    margin: 20px 0 15px !important;
}

/* Footer description text */
#footer .footer-about p,
.footer .footer-about p {
    color: #666 !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
}

/* Copyright bar */
.site-info,
.copyright,
.copyrighttext,
#copyright {
    padding: 20px 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #888 !important;
    border-top: 1px solid #e8e8e8 !important;
    margin-top: 30px !important;
}

/* Contact info in footer — prevent line breaks on phone/email */
#footer a[href^="tel"],
#footer a[href^="mailto"],
.footer a[href^="tel"],
.footer a[href^="mailto"] {
    white-space: nowrap !important;
    color: var(--fq-green, #00a651) !important;
    font-weight: 600 !important;
}


/* =============================================
   NAV MENU — CENTER ALIGNMENT
   Use flexbox on the header container so logo + nav + CTA align properly.
   ============================================= */

/* Make header row a flex container */
.topmenu-bar > .center,
.header.type2 .topmenu-bar > .center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
}

/* Logo: fixed left, no float */
.topmenu-bar .logo {
    float: none !important;
    flex: 0 0 auto !important;
}

/* Nav menu: fill remaining space, center text */
.topmenu-bar .header-menu {
    flex: 1 1 auto !important;
    float: none !important;
    text-align: center !important;
}

.topmenu-bar .header-menu #topmenu,
.topmenu-bar .header-menu .menu-header {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    text-align: center !important;
}

/* CTA button: fixed right, no float */
.topmenu-bar .header-extras {
    float: none !important;
    flex: 0 0 auto !important;
}

/* Remove the clearfix div (not needed with flexbox) */
.topmenu-bar .center > .clear {
    display: none !important;
}


/* =============================================
   FOOTER COPYRIGHT — CENTER ALIGNMENT
   ============================================= */
#copyright .copytext,
.copytext {
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    text-align: center !important;
}

#copyright,
.copyright-wrapper {
    text-align: center !important;
}

#copyright .center {
    text-align: center !important;
}


/* =============================================
   RESPONSIVE TYPOGRAPHY & LAYOUT
   Scales text, spacing, and layout for all
   screen sizes from large desktop to mobile.
   ============================================= */

/* ---- Fluid hero title (scales with viewport) ---- */
.nivo-caption .slidetitle,
.nivo-caption .title,
.nivo-caption .title large {
    font-size: clamp(24px, 3.2vw, 44px) !important;
}

.nivo-caption .slidedesc {
    font-size: clamp(14px, 1.4vw, 18px) !important;
}

/* =============================================
   PREMIUM DROPDOWN SUBMENU
   Glassmorphism dark dropdown with green accent,
   smooth fade/slide animation, refined typography.
   ============================================= */

/* Dropdown container */
#topmenu li > ul.sub-menu,
.header-menu ul li > ul.sub-menu {
    background: rgba(17, 17, 17, 0.92) !important;
    backdrop-filter: blur(16px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    padding: 8px 0 !important;
    min-width: 240px !important;
    margin-top: 0 !important;
    /* Smooth entrance animation */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
    overflow: hidden !important;
}

/* Show on hover */
#topmenu li:hover > ul.sub-menu,
.header-menu ul li:hover > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Dropdown items */
#topmenu li > ul.sub-menu > li,
.header-menu ul li > ul.sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}

/* Subtle separator between items */
#topmenu li > ul.sub-menu > li + li,
.header-menu ul li > ul.sub-menu > li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Dropdown links — refined typography */
#topmenu li > ul.sub-menu > li > a,
.header-menu ul li > ul.sub-menu > li > a {
    display: block !important;
    padding: 12px 24px 12px 20px !important;
    font-family: var(--fq-font-heading, 'Inter', sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    white-space: normal !important;
}

/* Hover state — green accent */
#topmenu li > ul.sub-menu > li > a:hover,
#topmenu li > ul.sub-menu > li > a:focus,
.header-menu ul li > ul.sub-menu > li > a:hover,
.header-menu ul li > ul.sub-menu > li > a:focus {
    color: #ffffff !important;
    background: rgba(0, 166, 81, 0.12) !important;
    border-left-color: var(--fq-green, #00a651) !important;
    padding-left: 24px !important;
}

/* Active / current page */
#topmenu li > ul.sub-menu > li.current-menu-item > a,
#topmenu li > ul.sub-menu > li.current_page_item > a,
.header-menu ul li > ul.sub-menu > li.current-menu-item > a {
    color: var(--fq-green, #00a651) !important;
    border-left-color: var(--fq-green, #00a651) !important;
    background: rgba(0, 166, 81, 0.08) !important;
    font-weight: 600 !important;
}

/* Parent item arrow indicator (if present) */
#topmenu li.menu-item-has-children > a::after {
    content: '' !important;
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 4px solid currentColor !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    transition: transform 0.2s ease !important;
}
#topmenu li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg) !important;
}


/* ---- BREAKPOINT: ≤ 1200px (small desktop / large tablet) ---- */
@media screen and (max-width: 1200px) {
    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 36px !important;
    }
    .nivo-caption .slidedesc {
        font-size: 16px !important;
        max-width: 600px !important;
    }
    .nivo-caption a.slidelink,
    .nivo-caption .slidelink a {
        padding: 16px 40px !important;
        font-size: 13px !important;
    }
    .nivo-caption {
        padding: 0 0 80px 0 !important;
    }
}


/* ---- BREAKPOINT: ≤ 992px (tablet) ---- */
@media screen and (max-width: 992px) {
    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 36px !important;
        letter-spacing: 0.3px !important;
    }
    .nivo-caption .slidedesc {
        font-size: 16px !important;
        max-width: 520px !important;
        margin-bottom: 28px !important;
    }
    .nivo-caption a.slidelink,
    .nivo-caption .slidelink a {
        padding: 14px 36px !important;
        font-size: 13px !important;
        letter-spacing: 2px !important;
    }
    .nivo-caption {
        padding: 0 0 60px 0 !important;
    }

    /* Footer columns: 2-column on tablet */
    #footer .footercols4 {
        width: 50% !important;
        margin-bottom: 30px !important;
    }
    #footer h3,
    .footer h3 {
        font-size: 14px !important;
    }
}


/* ---- BREAKPOINT: ≤ 768px (large mobile / small tablet) ---- */
@media screen and (max-width: 768px) {

    /* ── HERO CAPTION ── */
    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 30px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }
    .nivo-caption .slidedesc {
        font-size: 15px !important;
        max-width: 90% !important;
        margin-bottom: 24px !important;
        line-height: 1.5 !important;
    }
    .nivo-caption a.slidelink,
    .nivo-caption .slidelink a {
        padding: 14px 32px !important;
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
    }
    .nivo-caption {
        padding: 0 20px 50px 20px !important;
    }
    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large,
    .nivo-caption .slidedesc,
    .nivo-caption .slidelink {
        padding: 0 20px !important;
        max-width: 100% !important;
    }

    /* ── FOOTER ── */
    #footer .footercols4 {
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 30px !important;
    }
    #footer h3,
    .footer h3 {
        white-space: normal !important;
    }
}


/* ---- BREAKPOINT: ≤ 1023px (MOBILE HEADER — matches parent theme hamburger trigger) ---- */
@media screen and (max-width: 1023px) {

    /* Hide desktop nav + CTA */
    .header-extras,
    .header-menu #topmenu {
        display: none !important;
    }

    /* Flex row: logo left, hamburger right */
    .topmenu-bar > .center,
    .header.type2 .topmenu-bar > .center {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 16px !important;
        min-height: 60px !important;
    }

    /* Logo — left side, clickable */
    .topmenu-bar .logo {
        float: none !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        z-index: 100 !important;
        position: relative !important;
    }
    .topmenu-bar .logo img {
        max-height: 48px !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
    .topmenu-bar .logo a {
        display: block !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 100 !important;
    }

    /* Hamburger toggle — right side */
    .header-menu {
        float: none !important;
        flex: 0 0 auto !important;
        order: 3 !important;
    }
    #simple-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 24px !important;
        color: var(--fq-dark, #1a1a1a) !important;
        text-decoration: none !important;
    }

    /* Hide clearfix */
    .topmenu-bar .center > .clear {
        display: none !important;
    }
}


/* =============================================
   SIDR MOBILE MENU — PREMIUM DARK THEME
   Full-screen slide-in menu with consistent
   typography, clickable logo, and green CTA.
   ============================================= */
#sidr,
.sidr {
    background: #111111 !important;
    width: 280px !important;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4) !important;
    padding: 0 !important;
    z-index: 99999 !important;
    border: none !important;
}

/* Sidr header — close button + logo area */
#sidr .sidr-inner,
.sidr .sidr-inner {
    padding: 0 !important;
}

/* Close button */
#sidr .sidr-class-sidr-close,
.sidr .sidr-class-sidr-close,
.sidr-class-fa-times,
#sidr a.sidr-class-sidr-close {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 16px 20px !important;
    background: transparent !important;
    border: none !important;
}

/* All menu list items */
#sidr ul,
.sidr ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

#sidr ul li,
.sidr ul li {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    list-style: none !important;
}

/* All menu links — uniform 15px uppercase */
#sidr ul li a,
.sidr ul li a {
    display: block !important;
    padding: 16px 24px !important;
    font-family: var(--fq-font-heading, 'Inter', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    border-left: 3px solid transparent !important;
}

/* Hover / active */
#sidr ul li a:hover,
#sidr ul li a:focus,
.sidr ul li a:hover,
.sidr ul li a:focus {
    color: #ffffff !important;
    background: rgba(0, 166, 81, 0.1) !important;
    border-left-color: var(--fq-green, #00a651) !important;
}

#sidr ul li.current-menu-item > a,
.sidr ul li.sidr-class-current-menu-item > a {
    color: var(--fq-green, #00a651) !important;
    border-left-color: var(--fq-green, #00a651) !important;
}

/* CONTÁCTENOS CTA inside sidr — green accent button */
#sidr .fq-mobile-cta,
.sidr .fq-mobile-cta {
    margin: 20px 24px !important;
    border-bottom: none !important;
}
#sidr .fq-mobile-cta a,
.sidr .fq-mobile-cta a {
    display: block !important;
    padding: 14px 24px !important;
    background: var(--fq-green, #00a651) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-radius: var(--fq-radius-pill, 50px) !important;
    text-align: center !important;
    border-left: none !important;
    transition: all 0.3s ease !important;
}
#sidr .fq-mobile-cta a:hover,
.sidr .fq-mobile-cta a:hover {
    background: var(--fq-green-dark, #008c44) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.4) !important;
}

/* Sidr overlay — darken background */
.sidr-open .sidr-overlay,
#sidr-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}


/* ---- BREAKPOINT: ≤ 480px (small mobile) ---- */
@media screen and (max-width: 480px) {
    .nivo-caption .slidetitle,
    .nivo-caption .title,
    .nivo-caption .title large {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }
    .nivo-caption .slidedesc {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }
    .nivo-caption a.slidelink,
    .nivo-caption .slidelink a {
        padding: 12px 28px !important;
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
    }
    .nivo-caption {
        padding: 0 16px 40px 16px !important;
    }

    /* Footer: tighter on small screens */
    #footer,
    .footer {
        padding: 40px 15px 20px !important;
    }
    #footer h3,
    .footer h3 {
        font-size: 13px !important;
        letter-spacing: 1px !important;
    }
    #footer p,
    #footer li,
    #footer a,
    .footer p,
    .footer li,
    .footer a {
        font-size: 13px !important;
    }
}


/* =============================================
   §30. QUIÉNES SOMOS PAGE — COMPLETE LAYOUT
   Hero, intro, and profile cards for the
   /quienes-somos/ page.
   ============================================= */

/* ── HERO SECTION ── */
.fq-about-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: calc(55vh + 80px);
    margin-top: -80px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.fq-about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -30%;
    background: url('https://forquinsa.com/wp-content/uploads/2026/03/AboutUs-scaled.jpg') center center / cover no-repeat;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    z-index: 0;
}

.fq-about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 40, 20, 0.45) 100%
    );
    z-index: 1;
}

.fq-about-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    padding: 20px 24px;
    max-width: 700px;
    width: 100%;
}

.fq-about-hero__badge {
    display: none;
}

.fq-about-hero__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 52px !important;
    font-weight: 900 !important;
    color: var(--fq-white) !important;
    letter-spacing: 3px;
    line-height: 1.1;
    margin: 0 0 20px !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    text-align: center !important;
}

.fq-about-hero__line {
    width: 60px;
    height: 4px;
    background: var(--fq-green);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.fq-about-hero__subtitle {
    font-family: var(--fq-font-body);
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    text-align: center !important;
}


/* ── INTRO SECTION ── */
.fq-about-intro {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-gray-100);
    padding: 80px 24px;
}

.fq-about-intro__inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.fq-about-intro__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--fq-black) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 12px !important;
    position: relative;
    display: inline-block;
}

.fq-about-intro__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fq-green);
    margin: 16px auto 0;
    border-radius: 2px;
}

.fq-about-intro__text {
    font-family: var(--fq-font-body);
    font-size: 16px;
    line-height: 1.85;
    color: var(--fq-gray-500);
    margin: 24px 0 0;
    text-align: left;
}

.fq-about-intro__text strong {
    color: var(--fq-black) !important;
    font-weight: 700;
}


/* ── PROFILE SECTION (Cards Grid) ── */
.fq-about-profile {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-white);
    padding: 80px 24px 100px;
}

.fq-about-profile__inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.fq-about-profile__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--fq-black) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 50px !important;
    position: relative;
    display: inline-block;
}

.fq-about-profile__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fq-green);
    margin: 16px auto 0;
    border-radius: 2px;
}

.fq-about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.fq-about-card {
    background: var(--fq-white);
    border-radius: 12px;
    padding: 40px 28px 36px;
    text-align: center;
    border-top: 4px solid var(--fq-green);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}

.fq-about-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 166, 81, 0.15);
}

.fq-about-card__icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 166, 81, 0.3);
}

.fq-about-card__icon i {
    font-size: 26px;
    color: var(--fq-white) !important;
}

.fq-about-card__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--fq-black) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px !important;
}

.fq-about-card__text {
    font-family: var(--fq-font-body);
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--fq-gray-500);
    margin: 0;
}


/* ── RESPONSIVE: Tablet ── */
@media (max-width: 960px) {
    .fq-about-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 600px;
        margin: 0 auto;
    }
    .fq-about-hero__title {
        font-size: 38px !important;
    }
}

/* ── RESPONSIVE: Mobile ── */
@media (max-width: 600px) {
    .fq-about-hero {
        min-height: 45vh;
    }
    .fq-about-hero__content {
        padding: 60px 20px 40px;
        width: 100% !important;
        text-align: center !important;
    }
    .fq-about-hero__title {
        font-size: 30px !important;
        letter-spacing: 1.5px;
    }
    .fq-about-hero__subtitle {
        font-size: 15px;
    }
    .fq-about-hero__badge {
        font-size: 11px;
        padding: 6px 16px;
    }
    .fq-about-intro {
        padding: 50px 20px;
    }
    .fq-about-intro__heading {
        font-size: 22px !important;
    }
    .fq-about-intro__text {
        font-size: 15px;
    }
    .fq-about-profile {
        padding: 50px 16px 60px;
    }
    .fq-about-profile__heading {
        font-size: 24px !important;
    }
    .fq-about-card {
        padding: 32px 20px 28px;
    }
}


/* =============================================
   §31. PRODUCTOS PAGE — COMPLETE LAYOUT
   Hero, intro heading, and product grid for the
   /productos/ page.
   ============================================= */

/* ── HERO SECTION ── */
.fq-productos-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: calc(55vh + 80px);
    margin-top: -80px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.fq-productos-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -30%;
    background: url('https://forquinsa.com/wp-content/uploads/2026/03/0.-Main-Header-scaled.jpg') center center / cover no-repeat;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    z-index: 0;
}

.fq-productos-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 40, 20, 0.45) 100%
    );
    z-index: 1;
}

.fq-productos-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    padding: 20px 24px;
    max-width: 700px;
    width: 100%;
}

.fq-productos-hero__badge {
    display: none;
}

.fq-productos-hero__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 52px !important;
    font-weight: 900 !important;
    color: var(--fq-white) !important;
    letter-spacing: 3px;
    line-height: 1.1;
    margin: 0 0 20px !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    text-align: center !important;
}

.fq-productos-hero__line {
    width: 60px;
    height: 4px;
    background: var(--fq-green);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.fq-productos-hero__subtitle {
    font-family: var(--fq-font-body);
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    text-align: center !important;
}


/* ── PRODUCTS GRID SECTION ── */
.fq-productos-grid {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-gray-100);
    padding: 80px 24px 100px;
}

.fq-productos-grid__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.fq-productos-grid__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: var(--fq-black) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px !important;
    position: relative;
    display: inline-block;
}

.fq-productos-grid__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fq-green);
    margin: 16px auto 0;
    border-radius: 2px;
}

.fq-productos-grid__intro {
    font-family: var(--fq-font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--fq-gray-500);
    max-width: 750px;
    margin: 24px auto 50px;
}

/* Ensure the shortcode grid items sit within our container */
.fq-productos-grid__items {
    max-width: 1200px;
    margin: 0 auto;
}

/* Force the shortcode grid to use our layout inside the new wrapper */
.fq-productos-grid__items .theme_flavor-projects-grid,
.fq-productos-grid__items .projects-grid,
.fq-productos-grid__items .our_projects_wrap {
    max-width: 100% !important;
    padding: 0 !important;
}


/* ── RESPONSIVE: Tablet ── */
@media (max-width: 960px) {
    .fq-productos-hero__title {
        font-size: 38px !important;
    }
    .fq-productos-grid__heading {
        font-size: 26px !important;
    }
    .fq-productos-grid {
        padding: 60px 20px 70px;
    }
}

/* ── RESPONSIVE: Mobile ── */
@media (max-width: 600px) {
    .fq-productos-hero {
        min-height: 45vh;
    }
    .fq-productos-hero__content {
        padding: 60px 20px 40px;
        width: 100% !important;
        text-align: center !important;
    }
    .fq-productos-hero__title {
        font-size: 30px !important;
        letter-spacing: 1.5px;
    }
    .fq-productos-hero__subtitle {
        font-size: 15px;
    }
    .fq-productos-hero__badge {
        font-size: 11px;
        padding: 6px 16px;
    }
    .fq-productos-grid {
        padding: 50px 16px 60px;
    }
    .fq-productos-grid__heading {
        font-size: 22px !important;
    }
    .fq-productos-grid__intro {
        font-size: 15px;
        margin-bottom: 30px;
    }
}


/* =============================================
   §32. PRODUCT LINE PAGES — COMPLETE LAYOUT
   Hero, intro, product cards, CTA, and
   cross-navigation for individual product line
   pages (our_projects CPT singles).
   ============================================= */

/* ── HERO SECTION ── */
.fq-linea-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: calc(55vh + 80px);
    margin-top: -80px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.fq-linea-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -30%;
    background: center center / cover no-repeat;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    z-index: 0;
}

.fq-linea-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 40, 20, 0.45) 100%
    );
    z-index: 1;
}

.fq-linea-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    padding: 20px 24px;
    max-width: 700px;
    width: 100%;
}

.fq-linea-hero__badge {
    display: none;
}

.fq-linea-hero__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    color: var(--fq-white) !important;
    letter-spacing: 3px;
    line-height: 1.15;
    margin: 0 0 20px !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    text-align: center !important;
}

.fq-linea-hero__line {
    width: 60px;
    height: 4px;
    background: var(--fq-green);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.fq-linea-hero__subtitle {
    font-family: var(--fq-font-body);
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    text-align: center !important;
}


/* ── INTRO SECTION ── */
.fq-linea-intro {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-gray-100, #f5f6f8);
    padding: 70px 24px;
}

.fq-linea-intro__inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.fq-linea-intro__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark, #008c44));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 30px rgba(0, 166, 81, 0.3);
}

.fq-linea-intro__icon i {
    font-size: 32px;
    color: #ffffff !important;
}

.fq-linea-intro__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--fq-black, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 12px !important;
    position: relative;
    display: inline-block;
}

.fq-linea-intro__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fq-green);
    margin: 16px auto 0;
    border-radius: 2px;
}

.fq-linea-intro__text {
    font-family: var(--fq-font-body);
    font-size: 16px;
    line-height: 1.85;
    color: var(--fq-gray-500, #666);
    margin: 24px 0 0;
}


/* ── PRODUCT CATEGORIES & CARDS ── */
.fq-linea-products {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-white, #ffffff);
    padding: 70px 24px 30px;
}

.fq-linea-products:nth-child(even) {
    background: var(--fq-gray-100, #f5f6f8);
}

.fq-linea-products__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* Category title bar */
.fq-linea-category {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 166, 81, 0.15);
}

.fq-linea-category__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark, #008c44));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 166, 81, 0.25);
}

.fq-linea-category__icon i {
    font-size: 24px;
    color: #ffffff !important;
}

.fq-linea-category__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--fq-black, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 !important;
}

/* Product cards grid */
.fq-linea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    margin-bottom: 40px;
}

.fq-linea-card {
    background: var(--fq-white, #ffffff);
    border-radius: 16px;
    padding: 32px 28px 28px;
    border-top: 4px solid var(--fq-green);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle green glow on hover */
.fq-linea-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--fq-green), var(--fq-green-dark, #008c44));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fq-linea-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 166, 81, 0.15);
}

.fq-linea-card:hover::before {
    opacity: 1;
}

.fq-linea-card__icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    background: rgba(0, 166, 81, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.fq-linea-card:hover .fq-linea-card__icon {
    background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark, #008c44));
}

.fq-linea-card__icon i {
    font-size: 22px;
    color: var(--fq-green) !important;
    transition: color 0.3s ease;
}

.fq-linea-card:hover .fq-linea-card__icon i {
    color: #ffffff !important;
}

.fq-linea-card__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--fq-black, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px !important;
    line-height: 1.35;
}

.fq-linea-card__text {
    font-family: var(--fq-font-body);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--fq-gray-500, #666);
    margin: 0;
}

/* Alternating card background for even product sections */
.fq-linea-products:nth-child(even) .fq-linea-card {
    background: var(--fq-white, #ffffff);
}


/* ── AWT MEMBERSHIP BADGE ── */
.fq-awt-badge {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #0a1628 0%, #142240 100%);
    padding: 70px 20px;
    position: relative;
    overflow: hidden;
}
.fq-awt-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, #2ecc71, transparent);
}
.fq-awt-badge__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}
.fq-awt-badge__logo {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid rgba(46,204,113,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.fq-awt-badge__logo:hover {
    transform: scale(1.05);
    border-color: rgba(46,204,113,0.5);
}
.fq-awt-badge__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.fq-awt-badge__content {
    flex: 1;
}
.fq-awt-badge__heading {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.fq-awt-badge__heading i {
    color: #2ecc71;
    font-size: 1.3rem;
}
.fq-awt-badge__text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
    margin: 0;
}
.fq-awt-badge__text strong {
    color: #2ecc71;
    font-weight: 600;
}

@media (max-width: 768px) {
    .fq-awt-badge { padding: 50px 20px; }
    .fq-awt-badge__inner {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .fq-awt-badge__logo {
        width: 160px;
        height: 160px;
    }
    .fq-awt-badge__heading {
        font-size: 1.2rem;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }
    .fq-awt-badge__text { font-size: 0.95rem; }
}

/* ── CTA SECTION ── */
.fq-linea-cta {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%);
    padding: 70px 24px;
    text-align: center;
}

.fq-linea-cta__inner {
    max-width: 700px;
    margin: 0 auto;
}

.fq-linea-cta__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px !important;
}

.fq-linea-cta__text {
    font-family: var(--fq-font-body);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 36px;
}

.fq-linea-cta__buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.fq-linea-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    font-family: var(--fq-font-heading) !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.fq-linea-cta__btn--primary {
    background: var(--fq-green) !important;
    color: #ffffff !important;
    border: 2px solid var(--fq-green) !important;
}

.fq-linea-cta__btn--primary:hover,
.fq-linea-cta__btn--primary:focus {
    background: var(--fq-green-dark, #008c44) !important;
    border-color: var(--fq-green-dark, #008c44) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 166, 81, 0.4);
}

.fq-linea-cta__btn--primary:hover i,
.fq-linea-cta__btn--primary:focus i {
    color: #ffffff !important;
}

.fq-linea-cta__btn--outline {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.fq-linea-cta__btn--outline:hover,
.fq-linea-cta__btn--outline:focus {
    border-color: #ffffff !important;
    background: #ffffff !important;
    color: #1a1a2e !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.fq-linea-cta__btn--outline:hover i,
.fq-linea-cta__btn--outline:focus i {
    color: #1a1a2e !important;
}

.fq-linea-cta__btn i {
    font-size: 16px;
    color: inherit !important;
}


/* ── CROSS NAVIGATION ── */
.fq-linea-nav {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: var(--fq-gray-100, #f5f6f8);
    padding: 70px 24px 80px;
}

.fq-linea-nav__inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.fq-linea-nav__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    color: var(--fq-black, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 12px !important;
    position: relative;
    display: inline-block;
}

.fq-linea-nav__heading::after {
    content: '';
    display: block;
    width: 50px;
    height: 3px;
    background: var(--fq-green);
    margin: 16px auto 0;
    border-radius: 2px;
}

.fq-linea-nav__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.fq-linea-nav__card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--fq-white, #ffffff);
    border-radius: 14px;
    padding: 24px 22px;
    text-decoration: none !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.fq-linea-nav__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 166, 81, 0.12);
    border-color: rgba(0, 166, 81, 0.2);
}

.fq-linea-nav__card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: rgba(0, 166, 81, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.fq-linea-nav__card:hover .fq-linea-nav__card-icon {
    background: linear-gradient(135deg, var(--fq-green), var(--fq-green-dark, #008c44));
}

.fq-linea-nav__card-icon i {
    font-size: 20px;
    color: var(--fq-green) !important;
    transition: color 0.3s ease;
}

.fq-linea-nav__card:hover .fq-linea-nav__card-icon i {
    color: #ffffff !important;
}

.fq-linea-nav__card-title {
    font-family: var(--fq-font-heading) !important;
    font-size: 13px;
    font-weight: 700;
    color: var(--fq-black, #1a1a1a) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
    flex: 1;
    text-align: left;
}

.fq-linea-nav__card-arrow {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 166, 81, 0.06);
    transition: all 0.3s ease;
}

.fq-linea-nav__card:hover .fq-linea-nav__card-arrow {
    background: var(--fq-green);
}

.fq-linea-nav__card-arrow i {
    font-size: 13px;
    color: var(--fq-green) !important;
    transition: all 0.3s ease;
}

.fq-linea-nav__card:hover .fq-linea-nav__card-arrow i {
    color: #ffffff !important;
    transform: translateX(2px);
}


/* ── RESPONSIVE: Tablet (≤960px) ── */
@media (max-width: 960px) {
    .fq-linea-hero__title {
        font-size: 36px !important;
    }
    .fq-linea-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
    .fq-linea-category__title {
        font-size: 22px !important;
    }
    .fq-linea-nav__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 500px;
        margin: 40px auto 0;
    }
    .fq-linea-cta__heading {
        font-size: 24px !important;
    }
}

/* ── RESPONSIVE: Mobile (≤600px) ── */
@media (max-width: 600px) {
    .fq-linea-hero {
        min-height: 45vh;
    }
    .fq-linea-hero__content {
        padding: 60px 20px 40px;
        width: 100% !important;
        text-align: center !important;
    }
    .fq-linea-hero__title {
        font-size: 26px !important;
        letter-spacing: 1.5px;
    }
    .fq-linea-hero__subtitle {
        font-size: 15px;
    }
    .fq-linea-intro {
        padding: 50px 20px;
    }
    .fq-linea-intro__heading {
        font-size: 20px !important;
    }
    .fq-linea-intro__text {
        font-size: 15px;
    }
    .fq-linea-intro__icon {
        width: 64px;
        height: 64px;
        margin-bottom: 20px;
    }
    .fq-linea-intro__icon i {
        font-size: 26px;
    }
    .fq-linea-products {
        padding: 50px 16px 20px;
    }
    .fq-linea-category {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .fq-linea-category__title {
        font-size: 20px !important;
    }
    .fq-linea-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .fq-linea-card {
        padding: 24px 20px 22px;
    }
    .fq-linea-cta {
        padding: 50px 20px;
    }
    .fq-linea-cta__heading {
        font-size: 22px !important;
    }
    .fq-linea-cta__btn {
        padding: 14px 28px;
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }
    .fq-linea-nav {
        padding: 50px 16px 60px;
    }
    .fq-linea-nav__heading {
        font-size: 22px !important;
    }
    .fq-linea-nav__card {
        padding: 18px 16px;
    }
    .fq-linea-nav__card-title {
        font-size: 12px;
    }
}


/* =============================================
   §34. CONTACT PAGE (/contacto/)
   ============================================= */

/* ── HERO SECTION ── */
.fq-contacto-hero {
    position: relative;
    width: 100%;
    min-height: calc(55vh + 80px);
    margin-top: -80px;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}
.fq-contacto-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    bottom: -30%;
    background: center center / cover no-repeat;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    z-index: 0;
}

.fq-contacto-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 40, 20, 0.5) 100%
    );
    z-index: 1;
}

.fq-contacto-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    padding: 20px 24px;
    max-width: 700px;
    width: 100%;
}

.fq-contacto-hero__title {
    font-family: var(--fq-font-heading) !important;
    font-size: 52px !important;
    font-weight: 900 !important;
    color: var(--fq-white) !important;
    letter-spacing: 3px;
    line-height: 1.1;
    margin: 0 0 20px !important;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    text-align: center !important;
}

.fq-contacto-hero__line {
    width: 60px;
    height: 4px;
    background: var(--fq-green);
    margin: 0 auto 20px;
    border-radius: 2px;
}

.fq-contacto-hero__subtitle {
    font-family: var(--fq-font-body);
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    text-align: center !important;
}


/* ── INFO CARDS ── */
.fq-contacto-info {
    background: var(--fq-light-bg, #f0f4f3);
    padding: 60px 24px;
    width: 100%;
}

.fq-contacto-info__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.fq-contacto-info__card {
    background: var(--fq-white, #fff);
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.fq-contacto-info__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.fq-contacto-info__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--fq-green, #27ae60);
    color: var(--fq-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.3);
}

.fq-contacto-info__card-title {
    font-family: var(--fq-font-heading) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fq-dark-text, #1a1a2e) !important;
    margin: 0 0 12px !important;
    letter-spacing: 0.5px;
}

.fq-contacto-info__card-text {
    font-family: var(--fq-font-body);
    font-size: 15px;
    color: var(--fq-body-text, #555);
    line-height: 1.7;
    margin: 0 !important;
}

.fq-contacto-info__card-text a {
    color: var(--fq-green, #27ae60) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.fq-contacto-info__card-text a:hover {
    color: var(--fq-green-dark, #1e8e4e) !important;
    text-decoration: underline;
}

.fq-contacto-info__hours {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: #888;
    font-style: italic;
}


/* ── MAP + FORM SECTION ── */
.fq-contacto-main {
    padding: 70px 24px;
    width: 100%;
    background: var(--fq-white, #fff);
}

.fq-contacto-main__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.fq-contacto-main__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--fq-dark-text, #1a1a2e) !important;
    margin: 0 0 24px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fq-contacto-main__heading i {
    color: var(--fq-green, #27ae60);
    font-size: 22px;
}

.fq-contacto-main__map-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
}

.fq-contacto-main__map-wrap iframe {
    display: block;
    width: 100%;
    min-height: 450px;
}


/* ── CONTACT FORM ── */
.fq-contacto-form__group {
    margin-bottom: 20px;
}

.fq-contacto-form__group label {
    display: block;
    font-family: var(--fq-font-heading) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--fq-dark-text, #1a1a2e) !important;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fq-contacto-form__group label span {
    color: #e74c3c;
}

.fq-contacto-form__group input,
.fq-contacto-form__group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-family: var(--fq-font-body);
    font-size: 15px;
    color: #333;
    background: #fafafa;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.fq-contacto-form__group input:focus,
.fq-contacto-form__group textarea:focus {
    border-color: var(--fq-green, #27ae60);
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.12);
    background: #fff;
}

.fq-contacto-form__group input::placeholder,
.fq-contacto-form__group textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.fq-contacto-form__group textarea {
    resize: vertical;
    min-height: 120px;
}

.fq-contacto-form__submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--fq-green, #27ae60);
    color: var(--fq-white, #fff) !important;
    border: none;
    border-radius: 50px;
    font-family: var(--fq-font-heading) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.3);
}

.fq-contacto-form__submit:hover {
    background: var(--fq-green-dark, #1e8e4e);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(39, 174, 96, 0.4);
}

.fq-contacto-form__submit:active {
    transform: translateY(0);
}


/* ── CTA BANNER ── */
.fq-contacto-cta {
    width: 100%;
    padding: 60px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3d2e 100%);
    text-align: center;
}

.fq-contacto-cta__inner {
    max-width: 700px;
    margin: 0 auto;
}

.fq-contacto-cta__heading {
    font-family: var(--fq-font-heading) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: var(--fq-white, #fff) !important;
    margin: 0 0 12px !important;
}

.fq-contacto-cta__text {
    font-family: var(--fq-font-body);
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 28px !important;
}

.fq-contacto-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: #25D366;
    color: #fff !important;
    border-radius: 50px;
    font-family: var(--fq-font-heading) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
}

.fq-contacto-cta__btn:hover {
    background: #20b858;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
}

.fq-contacto-cta__btn i {
    font-size: 22px;
}


/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .fq-contacto-info__inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .fq-contacto-info__card {
        padding: 30px 20px;
    }
    .fq-contacto-main__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .fq-contacto-main__map-wrap iframe {
        min-height: 300px;
    }
    .fq-contacto-hero__title {
        font-size: 36px !important;
    }
    .fq-contacto-hero__content {
        padding: 60px 20px 40px;
        width: 100% !important;
        text-align: center !important;
    }
    .fq-contacto-cta__heading {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .fq-contacto-hero__title {
        font-size: 30px !important;
    }
    .fq-contacto-main__heading {
        font-size: 22px !important;
    }
    .fq-contacto-form__submit {
        width: 100%;
        justify-content: center;
    }
    .fq-contacto-cta__btn {
        width: 100%;
        justify-content: center;
    }
}