/**
 * Bootstrap Scoping CSS
 *
 * This file protects Tailwind-styled elements (header/footer) from Bootstrap's
 * global styles. Bootstrap should only affect content inside .legacy-content
 *
 * NOTE: Bootstrap sets html { font-size: 10px } which breaks Tailwind's rem-based
 * spacing (--tw-spacing: 0.25rem calculates to 2.5px instead of 4px).
 * We fix this by overriding specific values with px equivalents (N * 4px).
 */

/* ==========================================================================
   FONT VARIATION SETTINGS - Allotrope variable font for new design elements
   ========================================================================== */

/* What Ceys section heading */
.section-heading {
    font-family: "allotrope-variable", sans-serif !important;
    font-variation-settings: "wdth" 66, "wght" 700 !important;
}

/* What Ceys card titles */
.multi-card-slide {
    font-family: "allotrope-variable", sans-serif !important;
    font-variation-settings: "wdth" 66, "wght" 700 !important;
}

/* ==========================================================================
   FLEXBOX PROTECTION - Critical for header/footer layout
   ========================================================================== */

/* Protect all flex containers in header and footer */
.tw-scope header [class*="tw:flex"],
.tw-scope footer [class*="tw:flex"],
.tw-scope #mobile-menu [class*="tw:flex"] {
    display: flex !important;
}

.tw-scope header [class*="tw:flex-col"],
.tw-scope footer [class*="tw:flex-col"],
.tw-scope #mobile-menu [class*="tw:flex-col"] {
    flex-direction: column !important;
}

.tw-scope header [class*="tw:items-center"],
.tw-scope footer [class*="tw:items-center"],
.tw-scope #mobile-menu [class*="tw:items-center"] {
    align-items: center !important;
}

.tw-scope header [class*="tw:justify-between"],
.tw-scope footer [class*="tw:justify-between"],
.tw-scope #mobile-menu [class*="tw:justify-between"] {
    justify-content: space-between !important;
}

.tw-scope header [class*="tw:justify-center"],
.tw-scope footer [class*="tw:justify-center"],
.tw-scope #mobile-menu [class*="tw:justify-center"] {
    justify-content: center !important;
}

.tw-scope header [class*="tw:flex-grow"],
.tw-scope footer [class*="tw:flex-grow"] {
    flex-grow: 1 !important;
}

/* ==========================================================================
   DISPLAY UTILITIES
   ========================================================================== */

/* Hide elements with tw:hidden - but not if they have responsive show classes */
.tw-scope header [class*="tw:hidden"]:not([class*="tw:sm:block"]):not([class*="tw:lg:flex"]):not([class*="tw:lg:block"]),
.tw-scope footer [class*="tw:hidden"]:not([class*="tw:sm:block"]):not([class*="tw:lg:flex"]):not([class*="tw:lg:block"]),
.tw-scope #mobile-menu [class*="tw:hidden"]:not([class*="tw:sm:block"]):not([class*="tw:lg:flex"]):not([class*="tw:lg:block"]) {
    display: none !important;
}

/* lg:flex should show on large screens */
@media (min-width: 1024px) {
    .tw-scope header [class*="tw:lg:flex"],
    .tw-scope footer [class*="tw:lg:flex"] {
        display: flex !important;
    }

    .tw-scope header [class*="tw:lg:hidden"],
    .tw-scope footer [class*="tw:lg:hidden"] {
        display: none !important;
    }
}

/* sm:block should show on small+ screens */
@media (min-width: 640px) {
    .tw-scope header [class*="tw:sm:block"],
    .tw-scope footer [class*="tw:sm:block"] {
        display: block !important;
    }
}

/* ==========================================================================
   IMAGE PROTECTION
   ========================================================================== */

.tw-scope header img,
.tw-scope footer img,
.tw-scope #mobile-menu img {
    max-width: none;
    height: auto;
    vertical-align: middle;
}

/* Specific height class for logo */
.tw-scope header img[class*="tw:h-14"] {
    height: 56px !important; /* 3.5rem at 16px base */
    width: auto !important;
}

/* ==========================================================================
   SPACING/GAP PROTECTION
   ========================================================================== */

.tw-scope header [class*="tw:gap-2"],
.tw-scope footer [class*="tw:gap-2"] {
    gap: 8px !important; /* 0.5rem at 16px base */
}

.tw-scope header [class*="tw:gap-4"],
.tw-scope footer [class*="tw:gap-4"] {
    gap: 16px !important; /* 1rem at 16px base */
}

/* Mega menu content gap */
.tw-scope header [class*="tw:gap-32"] {
    gap: 128px !important; /* tw:gap-32 = 32 * 4px */
}

@media (min-width: 1280px) {
    .tw-scope header [class*="tw:xl:gap-10"],
    .tw-scope footer [class*="tw:xl:gap-10"] {
        gap: 40px !important; /* 2.5rem at 16px base */
    }

    .tw-scope header [class*="tw:xl:gap-4"],
    .tw-scope footer [class*="tw:xl:gap-4"] {
        gap: 16px !important; /* 1rem at 16px base */
    }
}

/* ==========================================================================
   LINK AND BUTTON RESETS
   ========================================================================== */

.tw-scope header a,
.tw-scope footer a,
.tw-scope #mobile-menu a {
    color: inherit;
    text-decoration: none;
}

.tw-scope header a:hover,
.tw-scope footer a:hover,
.tw-scope #mobile-menu a:hover,
.tw-scope header a:focus,
.tw-scope footer a:focus,
.tw-scope #mobile-menu a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

.tw-scope header button,
.tw-scope footer button,
.tw-scope #mobile-menu button {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* ==========================================================================
   LIST RESETS
   ========================================================================== */

.tw-scope header ul,
.tw-scope header ol,
.tw-scope footer ul,
.tw-scope footer ol,
.tw-scope #mobile-menu ul,
.tw-scope #mobile-menu ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   TYPOGRAPHY RESETS
   ========================================================================== */

.tw-scope header h1,
.tw-scope header h2,
.tw-scope header h3,
.tw-scope header h4,
.tw-scope header h5,
.tw-scope header h6,
.tw-scope footer h1,
.tw-scope footer h2,
.tw-scope footer h3,
.tw-scope footer h4,
.tw-scope footer h5,
.tw-scope footer h6 {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

.tw-scope header p,
.tw-scope footer p,
.tw-scope #mobile-menu p {
    margin: 0;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

.tw-scope header input,
.tw-scope header select,
.tw-scope header textarea,
.tw-scope footer input,
.tw-scope footer select,
.tw-scope footer textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ==========================================================================
   BOX SIZING AND FONT FAMILY
   ========================================================================== */

.tw-scope header,
.tw-scope footer,
.tw-scope #mobile-menu,
.tw-scope header *,
.tw-scope footer *,
.tw-scope #mobile-menu * {
    font-family: allotrope-variable, sans-serif !important;
}

.tw-scope header *,
.tw-scope header *::before,
.tw-scope header *::after,
.tw-scope footer *,
.tw-scope footer *::before,
.tw-scope footer *::after,
.tw-scope #mobile-menu *,
.tw-scope #mobile-menu *::before,
.tw-scope #mobile-menu *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   WIDTH CONSTRAINTS
   ========================================================================== */

.tw-scope header [class*="tw:max-w-348"] {
    max-width: 1392px !important; /* 87rem at 16px base = 1392px */
}

.tw-scope header [class*="tw:w-full"],
.tw-scope footer [class*="tw:w-full"] {
    width: 100% !important;
}

.tw-scope header [class*="tw:h-full"],
.tw-scope footer [class*="tw:h-full"] {
    height: 100% !important;
}

/* Search icon sizing */
.tw-scope header img[class*="tw:max-w-10"] {
    max-width: 40px !important; /* tw:max-w-10 = 10 * 4px */
}

.tw-scope header img[class*="tw:max-h-10"] {
    max-height: 40px !important; /* tw:max-h-10 = 10 * 4px */
}

/* Search container padding */
.tw-scope header [class*="tw:py-2\\.5"] {
    padding-top: 10px !important; /* tw:py-2.5 = 2.5 * 4px */
    padding-bottom: 10px !important;
}

@media (min-width: 1280px) {
    .tw-scope header [class*="tw:xl:px-3"] {
        padding-left: 12px !important; /* tw:xl:px-3 = 3 * 4px */
        padding-right: 12px !important;
    }
}

/* Search bar container - fix rem-based positioning */
.tw-scope header .search-bar-container {
    position: fixed !important;
    top: 92px !important; /* tw:top-23 = 23 * 4px */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: 0 !important;
    padding: 32px 16px !important; /* tw:py-8 tw:px-4 = 8*4px, 4*4px */
    background-color: #0033a1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s !important;
}

/* Search bar container - show on parent hover */
/* Only trigger on the specific search icon container (has tw:lg:flex and contains search-bar-container) */
.tw-scope header div[class*="tw:lg:flex"][class*="tw:group"]:hover > .search-bar-container {
    height: 204px !important; /* tw:group-hover:h-51 = 51 * 4px */
    opacity: 1 !important;
    visibility: visible !important;
}

@media (min-width: 1280px) {
    .tw-scope header .search-bar-container {
        padding-left: 64px !important; /* tw:xl:px-16 = 16 * 4px */
        padding-right: 64px !important;
    }
}

/* Search bar content (article) - fix rem-based values */
.tw-scope header .search-bar-container article {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important; /* tw:gap-2 = 2 * 4px */
    max-width: 672px !important; /* tw:max-w-2xl = 42rem at 16px = 672px */
    border-bottom-width: 3px !important;
    border-bottom-style: solid !important;
    border-color: #ffda00 !important; /* tw:border-secondary */
}

@media (min-width: 1440px) {
    .tw-scope header .search-bar-container article {
        gap: 16px !important; /* tw:xxl:gap-4 = 4 * 4px */
        border-bottom-width: 4px !important; /* tw:xxl:border-b-4 */
    }
}

/* Search input - fix rem-based values and override legacy styles */
.tw-scope header .search-bar-container input {
    height: 52px !important; /* tw:h-13 = 13 * 4px */
    width: 100% !important;
    padding-left: 8px !important; /* tw:px-2 = 2 * 4px */
    padding-right: 8px !important;
    font-size: 24px !important; /* tw:text-2xl = 1.5rem at 16px = 24px */
    line-height: 120% !important;
    font-weight: 300 !important; /* tw:font-light */
    color: #f6f6f6 !important; /* tw:text-cascadingWhite */
    background: transparent !important;
    border: none !important;
    outline: none !important;
    visibility: visible !important;
    max-width: none !important;
}

.tw-scope header .search-bar-container input::placeholder {
    color: #91a7e8 !important; /* tw:placeholder:text-lighBlue */
}

@media (min-width: 1280px) {
    .tw-scope header .search-bar-container input {
        font-size: 30px !important; /* tw:xl:text-3xl = 1.875rem at 16px = 30px */
    }
}

@media (min-width: 1440px) {
    .tw-scope header .search-bar-container input {
        font-size: 32px !important; /* tw:xxl:text-[32px] */
    }
}

/* Search bar icon */
.tw-scope header .search-bar-container article img {
    width: 100% !important;
    max-width: 40px !important; /* tw:max-w-10 = 10 * 4px */
    max-height: 40px !important; /* tw:max-h-10 = 10 * 4px */
    object-fit: cover !important;
}

/* Clear search button */
.tw-scope header .search-bar-container #clearSearch {
    cursor: pointer !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Clear button when active (controlled by JS) */
.tw-scope header .search-bar-container #clearSearch.active,
.tw-scope header .search-bar-container #clearSearch[style*="opacity: 1"],
.tw-scope header .search-bar-container #clearSearch[style*="opacity:1"] {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   MEGA MENU CONTAINER
   ========================================================================== */

/* Base state - hidden */
.tw-scope header .mega-menu-container {
    position: fixed !important;
    top: 92px !important; /* tw:top-23 = 23 * 4px */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    height: 0 !important;
    background-color: #0033a1 !important; /* tw:bg-primary */
    opacity: 0 !important;
    visibility: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transition: all 0.3s !important;
}

/* Hover state - show menu when parent button.header-li-items is hovered */
.tw-scope header button.header-li-items:hover .mega-menu-container {
    height: calc(100dvh - 80px) !important; /* tw:group-hover:h-[calc(100dvh-80px)] */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Menu triggers list (left sidebar in mega menu) */
.tw-scope header .mega-menu-container ul.menu-triggers {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 429px !important; /* tw:max-w-107.25 = 107.25 * 4px */
    padding-top: 40px !important; /* tw:pt-10 = 10 * 4px */
    font-size: 14px !important; /* tw:text-sm = 0.875rem at 16px base */
    line-height: 1.43 !important;
    background-color: #002472 !important; /* tw:bg-longHaulFlight */
    overflow: auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    list-style: none !important;
}

/* Hide scrollbar but keep functionality */
.tw-scope header .mega-menu-container ul.menu-triggers::-webkit-scrollbar {
    display: none !important;
}

.tw-scope header .mega-menu-container ul.menu-triggers {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Mega menu wrapper (main content container) */
.tw-scope header .mega-menu-container .mega-menu-wrapper {
    position: relative !important;
    display: flex !important;
    flex-grow: 1 !important;
    width: 100% !important;
    max-width: 1920px !important; /* tw:max-w-480 = 480 * 4px */
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
}

/* Menu item links in mega menu sidebar */
.tw-scope header .mega-menu-container .header-menu-item {
    display: block !important;
    padding-left: 16px !important; /* padding-inline: 4 * 4px */
    padding-right: 16px !important;
    padding-top: 14px !important; /* padding-block: 3.5 * 4px */
    padding-bottom: 14px !important;
    font-size: 18px !important; /* tw:text-lg = 1.125rem at 16px = 18px */
    line-height: 120% !important;
    font-weight: 500 !important; /* tw:font-medium */
    color: white !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* Mega menu right content panel */
.tw-scope header .mega-menu-container > .mega-menu-wrapper > div[class*="tw:bg-primary"][class*="tw:pt-10"] {
    display: flex !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    width: 100% !important;
    padding-top: 40px !important; /* tw:pt-10 = 10 * 4px */
    padding-left: 58px !important; /* tw:pl-14.5 = 14.5 * 4px */
    padding-right: 54px !important; /* tw:pr-13.5 = 13.5 * 4px */
    background-color: #0033a1 !important; /* tw:bg-primary */
    overflow: auto !important;
}

/* Hide scrollbar on right panel */
.tw-scope header .mega-menu-container > .mega-menu-wrapper > div[class*="tw:bg-primary"][class*="tw:pt-10"]::-webkit-scrollbar {
    display: none !important;
}

.tw-scope header .mega-menu-container > .mega-menu-wrapper > div[class*="tw:bg-primary"][class*="tw:pt-10"] {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Right menu panels in mega menu (content that shows when hovering menu items) */
.tw-scope header .mega-menu-container .right-menu {
    display: block !important;
}

/* Mega menu product image - fix rem-based values */
.tw-scope header .mega-menu-container img[class*="tw:max-w-38"] {
    max-width: 153px !important; /* tw:max-w-38.25 = 38.25 * 4px */
}

.tw-scope header .mega-menu-container img[class*="tw:max-h-70"] {
    max-height: 283px !important; /* tw:max-h-70.75 = 70.75 * 4px */
}

.tw-scope header .mega-menu-container img[class*="tw:mb-7"] {
    margin-bottom: 30px !important; /* tw:mb-7.5 = 7.5 * 4px */
}

.tw-scope header .mega-menu-container .right-menu.tw\:hidden,
.tw-scope header .mega-menu-container .right-menu[class*="tw:hidden"] {
    display: none !important;
}

/* Mega menu title (h3 in right panel) - override Bootstrap h3 styles */
.tw-scope header .mega-menu-container .mega-menu-li-item-title {
    margin-top: 0 !important;
    margin-bottom: 37px !important; /* calc(--tw-spacing * 9.25) = 9.25 * 4px */
    padding-left: 16px !important; /* padding-inline: 4 * 4px */
    padding-right: 16px !important;
    text-align: start !important;
    font-size: 40px !important;
    line-height: 110% !important;
    font-weight: 700 !important; /* tw:font-bold */
    letter-spacing: 0.4px !important;
    color: white !important;
    text-transform: uppercase !important;
}

/* Submenu content heading (h4) - override Bootstrap h4 styles */
.tw-scope header .mega-menu-container .submenu-content-heading {
    margin: 0 !important;
    text-align: center !important;
    font-size: 18px !important; /* tw:text-lg = 1.125rem at 16px = 18px */
    line-height: 120% !important;
    font-weight: 500 !important; /* tw:font-medium */
    color: #f6f6f6 !important; /* tw:text-cascadingWhite */
    text-transform: uppercase !important;
}

/* Submenu content description (p) - fix rem-based values */
.tw-scope header .mega-menu-container .submenu-content-description {
    margin-top: 6px !important; /* margin-block: 1.5 * 4px */
    margin-bottom: 6px !important;
    text-align: center !important;
    font-size: 16px !important; /* tw:text-base = 1rem at 16px = 16px */
    line-height: 130% !important;
    font-weight: 300 !important; /* tw:font-light */
    color: #f6f6f6 !important; /* tw:text-cascadingWhite */
}

/* Submenu content sub-description (span) - fix rem-based values */
.tw-scope header .mega-menu-container .submenu-content-sub-description {
    text-align: center !important;
    font-size: 16px !important; /* tw:text-base = 1rem at 16px = 16px */
    line-height: 130% !important;
    font-weight: 400 !important; /* tw:font-normal */
    color: #f6f6f6 !important; /* tw:text-cascadingWhite */
}

/* Submenu content container - fix rem-based max-width */
.tw-scope header .mega-menu-container .submenu-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 260px !important; /* tw:max-w-65 = 65 * 4px */
}

/* Primary menu item links in mega menu right panel */
.tw-scope header .mega-menu-container .header-menu-item-primary {
    display: block !important;
    padding-left: 16px !important; /* padding-inline: 4 * 4px */
    padding-right: 16px !important;
    padding-top: 14px !important; /* padding-block: 3.5 * 4px */
    padding-bottom: 14px !important;
    font-size: 18px !important; /* tw:text-lg = 1.125rem at 16px = 18px */
    line-height: 120% !important;
    font-weight: 500 !important; /* tw:font-medium */
    color: white !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

/* ==========================================================================
   PADDING PROTECTION
   ========================================================================== */

.tw-scope header [class*="tw:px-4"],
.tw-scope footer [class*="tw:px-4"] {
    padding-left: 16px !important; /* 1rem at 16px base */
    padding-right: 16px !important;
}

.tw-scope header [class*="tw:py-4"],
.tw-scope footer [class*="tw:py-4"] {
    padding-top: 16px !important; /* 1rem at 16px base */
    padding-bottom: 16px !important;
}

/* ==========================================================================
   POSITIONING
   ========================================================================== */

.tw-scope header [class*="tw:relative"],
.tw-scope footer [class*="tw:relative"] {
    position: relative !important;
}

.tw-scope header [class*="tw:absolute"],
.tw-scope footer [class*="tw:absolute"] {
    position: absolute !important;
}

.tw-scope header [class*="tw:sticky"] {
    position: sticky !important;
    top: 0 !important;
}

.tw-scope header [class*="tw:fixed"],
.tw-scope #mobile-menu[class*="tw:fixed"],
.tw-scope #menu-overlay[class*="tw:fixed"] {
    position: fixed !important;
}

/* ==========================================================================
   SPECIFIC HEADER FIXES
   ========================================================================== */

/* Main header inner container - force flex layout */
.tw-scope header > div > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Logo + Nav container */
.tw-scope header > div > div > div:first-child {
    display: flex !important;
    align-items: center !important;
}

/* Nav element */
.tw-scope header nav {
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important; /* tw:text-sm = 0.875rem at 16px base */
    font-weight: 500 !important; /* tw:font-medium */
    line-height: 1.43 !important;
}

/* Nav item spacing - fix tw:space-x-4 and tw:xl:space-x-10 */
/* Using margin-inline-end to match Tailwind's logical properties */
.tw-scope header nav > *:not(:last-child) {
    margin-inline-start: 0 !important;
    margin-inline-end: 16px !important; /* tw:space-x-4 = 4 * 4px */
}

@media (min-width: 1280px) {
    .tw-scope header nav > *:not(:last-child) {
        margin-inline-end: 40px !important; /* tw:xl:space-x-10 = 10 * 4px */
    }
}

/* Header nav buttons (Productos, Manos a la obra, etc.) */
.tw-scope header nav button.header-li-items,
.tw-scope header nav a.header-li-items {
    display: inline-block !important;
    position: relative !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* Don't reset margin-inline-end - let spacing rules apply */
    border: none !important;
    background: transparent !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* Header nav items underline effect (::after pseudo-element) */
.tw-scope header nav .header-li-items::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important; /* tw:bottom-0 */
    left: 0 !important; /* tw:left-0 */
    width: 0 !important; /* tw:w-0 - starts at 0, expands on hover */
    height: 2px !important; /* tw:h-0.5 = 0.5 * 4px */
    background-color: #ffda00 !important; /* tw:bg-secondary */
    transition: all 0.3s ease-in-out !important; /* tw:duration-300 tw:ease-in-out */
}

.tw-scope header nav .header-li-items:hover::after {
    width: 100% !important; /* tw:group-hover:w-full */
}

@media (min-width: 1024px) {
    .tw-scope header nav {
        font-size: 18px !important; /* tw:lg:text-lg = 1.125rem at 16px base */
        line-height: 1.56 !important;
    }
}

@media (min-width: 1280px) {
    .tw-scope header nav {
        font-size: 20px !important; /* tw:xl:text-xl = 1.25rem at 16px base */
        line-height: 1.4 !important;
    }
}

/* Actions container (right side) */
.tw-scope header > div > div > div:last-child {
    display: flex !important;
    align-items: center !important;
}

/* PRO/BRICO container fix */
.tw-scope header #header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    max-width: 110px !important; /* tw:max-w-27.5 = 27.5 * 4px = 110px */
    height: 40px !important; /* tw:h-10 = 10 * 4px = 40px */
    padding: 4px !important; /* tw:p-1 = 1 * 4px = 4px */
    background-color: #ffda00 !important; /* tw:bg-secondary */
    gap: 24px !important; /* tw:gap-6 = 6 * 4px = 24px */
}

/* PRO/BRICO buttons */
.tw-scope header #header-actions button {
    position: relative !important;
    z-index: 10 !important;
    width: 50% !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 14px !important; /* tw:text-sm = 0.875rem at 16px base */
    text-transform: uppercase !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: transparent !important;
}

/* PRO button specific */
.tw-scope header #header-actions button[data-move="pro"] {
    color: white !important;
    padding-left: 8px !important; /* tw:pl-2 = 2 * 4px */
}

/* BRICO button specific */
.tw-scope header #header-actions button[data-move="brico"] {
    color: black !important;
    padding-right: 4px !important; /* tw:pr-1 = 1 * 4px */
}

/* PRO/BRICO sliding background */
.tw-scope header #header-actions #active-bg {
    position: absolute !important;
    top: 4px !important; /* tw:top-1 = 1 * 4px */
    left: 4px !important; /* tw:left-1 = 1 * 4px */
    height: 32px !important; /* tw:h-8 = 8 * 4px = 32px */
    width: 50% !important; /* tw:w-[50%] */
    background-color: #0033a1 !important; /* tw:bg-primary */
    transition: all 0.3s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 4px 8px 0 rgba(0, 21, 68, 0.25) !important; /* tw:shadow-brico approximation */
}

/* SUSCRIBIRME button - ensure correct styling */
.tw-scope header button[class*="tw:bg-white"][class*="tw:sm:block"] {
    background-color: white !important;
    color: black !important;
    padding: 8px 20px !important; /* 0.5rem 1.25rem at 16px base */
    font-weight: 700 !important;
    font-size: 16px !important; /* tw:text-base = 1rem at 16px base */
    line-height: 1.5 !important;
    display: none !important; /* Hidden by default (mobile) */
    transition-duration: 0.3s !important;
    cursor: pointer !important;
}

.tw-scope header button[class*="tw:bg-white"][class*="tw:sm:block"]:hover {
    background-color: #ffda00 !important; /* tw:hover:bg-secondary */
}

@media (min-width: 640px) {
    .tw-scope header button[class*="tw:bg-white"][class*="tw:sm:block"] {
        display: block !important; /* Show on sm+ screens */
    }
}

@media (min-width: 1280px) {
    .tw-scope header button[class*="tw:bg-white"][class*="tw:sm:block"] {
        font-size: 18px !important; /* tw:xl:text-lg = 1.125rem at 16px base */
        max-width: 151px !important; /* tw:xl:max-w-37.75 = 37.75 * 4px */
        width: 100% !important;
    }
}

/* ==========================================================================
   FOOTER SPECIFIC FIXES
   Bootstrap's html { font-size: 10px } breaks rem-based Tailwind spacing.
   These overrides convert rem to px (N * 4px) for footer elements.
   ========================================================================== */

/* Footer main container - custom-container class */
.tw-scope footer .custom-container {
    width: 100% !important;
    max-width: 1392px !important; /* 348 * 4px */
    padding-left: 16px !important; /* 4 * 4px */
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Footer inner container with flex layout */
.tw-scope footer [class*="tw:pt-16"][class*="tw:pb-6"] {
    padding-top: 64px !important; /* 16 * 4px */
    padding-bottom: 24px !important; /* 6 * 4px */
}

.tw-scope footer [class*="tw:gap-6"] {
    gap: 24px !important; /* 6 * 4px */
}

@media (min-width: 640px) {
    .tw-scope footer [class*="tw:sm:flex-row"] {
        flex-direction: row !important;
    }
}

@media (min-width: 1024px) {
    .tw-scope footer [class*="tw:lg:flex-row"] {
        flex-direction: row !important;
    }
}

@media (min-width: 1280px) {
    .tw-scope footer [class*="tw:xl:gap-4"] {
        gap: 16px !important; /* 4 * 4px */
    }
}

/* Footer padding fixes */
.tw-scope footer [class*="tw:pb-6"] {
    padding-bottom: 24px !important; /* 6 * 4px */
}

/* Footer border styles */
.tw-scope footer [class*="tw:border-b"] {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

.tw-scope footer [class*="tw:border-AdventureTheSeas"] {
    border-color: #335cb4 !important; /* --tw-color-AdventureTheSeas */
}

/* Footer responsive sm: breakpoint fixes */
@media (min-width: 640px) {
    .tw-scope footer [class*="tw:sm:hidden"] {
        display: none !important;
    }

    /* Override Bootstrap's .hidden when tw:sm:block is present */
    .tw-scope footer .hidden[class*="tw:sm:block"],
    .tw-scope footer [class*="tw:sm:block"] {
        display: block !important;
    }

    .tw-scope footer [class*="tw:sm:justify-between"] {
        justify-content: space-between !important;
    }

    .tw-scope footer [class*="tw:sm:border-transparent"] {
        border-color: transparent !important;
    }

    .tw-scope footer [class*="tw:sm:pb-0"] {
        padding-bottom: 0 !important;
    }
}

/* Footer typography fixes */
.tw-scope footer [class*="tw:font-bold"] {
    font-weight: 700 !important;
}

.tw-scope footer [class*="tw:text-2xl"] {
    font-size: 24px !important; /* 1.5rem at 16px base */
    line-height: 1.33 !important;
}

.tw-scope footer [class*="tw:text-cascadingWhite"] {
    color: #f6f6f6 !important;
}

/* Footer margin fixes */
.tw-scope footer [class*="tw:mb-4"] {
    margin-bottom: 16px !important; /* 4 * 4px */
}

.tw-scope footer [class*="tw:mb-6"] {
    margin-bottom: 24px !important; /* 6 * 4px */
}

/* Footer font weight */
.tw-scope footer [class*="tw:font-medium"] {
    font-weight: 500 !important;
}

/* Footer space-y utilities (vertical spacing between children) */
/* Tailwind v4 uses margin-block-end on :not(:last-child), we override with fixed px */
.tw-scope footer [class*="tw:space-y-3"] > *:not(:last-child) {
    margin-block-end: 12px !important; /* 3 * 4px */
    margin-block-start: 0 !important;
}

.tw-scope footer [class*="tw:space-y-4"] > *:not(:last-child) {
    margin-block-end: 16px !important; /* 4 * 4px */
    margin-block-start: 0 !important;
}

/* Footer line-height */
.tw-scope footer [class*="tw:leading-"] {
    line-height: 120% !important;
}

/* Footer max-width fixes */
@media (min-width: 1024px) {
    .tw-scope footer [class*="tw:lg:max-w-139"] {
        max-width: 557px !important; /* 139.25 * 4px */
    }
}

/* Footer link hover underline styles */
.tw-scope footer a[class*="tw:hover:underline"] {
    text-decoration: none !important;
}

.tw-scope footer a[class*="tw:hover:underline"]:hover {
    text-decoration: underline !important;
}

.tw-scope footer a[class*="tw:decoration-secondary"] {
    text-decoration-color: #ffda00 !important; /* --tw-color-secondary */
}

.tw-scope footer a[class*="tw:underline-offset-4"] {
    text-underline-offset: 4px !important;
}

/* Footer space-y-2 fix (Tailwind v4 uses margin-block-end) */
.tw-scope footer [class*="tw:space-y-2"] > *:not(:last-child) {
    margin-block-end: 8px !important; /* 2 * 4px */
    margin-block-start: 0 !important;
}

/* Footer text-lg fix */
.tw-scope footer [class*="tw:text-lg"] {
    font-size: 18px !important; /* 1.125rem at 16px base */
    line-height: 1.75 !important; /* Tailwind's default for text-lg */
}

/* Footer padding fixes */
.tw-scope footer [class*="tw:p-4"] {
    padding: 16px !important; /* 4 * 4px */
}

/* Footer min-height fixes */
.tw-scope footer [class*="tw:min-h-49"] {
    min-height: 196px !important; /* 49 * 4px */
}

/* Footer background colors */
.tw-scope footer [class*="tw:bg-wetLatex"] {
    background-color: #001544 !important; /* --tw-color-wetLatex */
}

/* Footer cursor */
.tw-scope footer [class*="tw:cursor-pointer"] {
    cursor: pointer !important;
}

/* Footer positioning fixes */
.tw-scope footer [class*="tw:-right-9"] {
    right: -36px !important; /* -9 * 4px */
}

.tw-scope footer [class*="tw:bottom-0"] {
    bottom: 0 !important;
}

/* Footer group-hover effects */
.tw-scope footer [class*="tw:sm:group"]:hover [class*="tw:group-hover:right-0"],
.tw-scope footer [class*="tw:group"]:hover [class*="tw:group-hover:right-0"] {
    right: 0 !important;
}

/* Footer transition duration */
.tw-scope footer [class*="tw:duration-300"] {
    transition-duration: 0.3s !important;
}

/* Footer margin-bottom fix */
.tw-scope footer [class*="tw:mb-3"] {
    margin-bottom: 12px !important; /* 3 * 4px */
}

/* Footer border-b-4 fix (override the 1px generic rule) */
.tw-scope footer [class*="tw:border-b-4"] {
    border-bottom-width: 4px !important;
    border-bottom-style: solid !important;
}

/* Footer border colors */
.tw-scope footer [class*="tw:border-transparent"] {
    border-color: transparent !important;
}

/* Footer group-hover border color */
.tw-scope footer [class*="tw:sm:group"]:hover [class*="tw:group-hover:border-secondary"],
.tw-scope footer [class*="tw:group"]:hover [class*="tw:group-hover:border-secondary"] {
    border-color: #ffda00 !important; /* --tw-color-secondary */
}

/* Footer width fit-content */
.tw-scope footer [class*="tw:w-fit"] {
    width: fit-content !important;
}

/* Footer sub-heading responsive font sizes */
.tw-scope footer .sub-heading {
    font-size: 24px !important; /* --tw-text-2xl base */
    line-height: 120% !important;
    font-weight: 700 !important;
    color: #f6f6f6 !important; /* --tw-color-cascadingWhite */
    text-transform: uppercase !important;
}

@media (min-width: 375px) {
    .tw-scope footer .sub-heading {
        font-size: 32px !important;
    }
}

@media (min-width: 768px) {
    .tw-scope footer .sub-heading {
        font-size: 36px !important; /* --tw-text-4xl = 2.25rem */
    }
}

@media (min-width: 1024px) {
    .tw-scope footer .sub-heading {
        font-size: 36px !important;
    }
}

@media (min-width: 1280px) {
    .tw-scope footer .sub-heading {
        font-size: 48px !important;
    }
}

/* Footer button height fixes */
.tw-scope footer [class*="tw:h-10"] {
    height: 40px !important; /* 10 * 4px */
}

@media (min-width: 1024px) {
    .tw-scope footer [class*="tw:lg:h-12"] {
        height: 48px !important; /* 12 * 4px */
    }
}

/* Footer bottom positioning */
.tw-scope footer [class*="tw:bottom-6"] {
    bottom: 24px !important; /* 6 * 4px */
}

/* Footer right positioning */
.tw-scope footer [class*="tw:right-0"] {
    right: 0 !important;
}

/* Footer border-radius fixes */
.tw-scope footer [class*="tw:rounded-lg"] {
    border-radius: 8px !important; /* --tw-radius-lg = 0.5rem */
}

@media (min-width: 640px) {
    .tw-scope footer [class*="tw:sm:rounded-none"] {
        border-radius: 0 !important;
    }
}

/* Footer primary-btn styles */
.tw-scope footer .primary-btn {
    background-color: #ffda00 !important; /* --tw-color-secondary */
    padding-left: 16px !important; /* 4 * 4px */
    padding-right: 16px !important;
    font-size: 18px !important; /* --tw-text-lg */
    font-weight: 700 !important;
    color: #000 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition-duration: 0.2s !important;
    border: none !important;
}

/* Footer width fixes */
.tw-scope footer [class*="tw:w-10"] {
    width: 40px !important; /* 10 * 4px */
}

/* Footer background colors */
.tw-scope footer [class*="tw:bg-white"] {
    background-color: #fff !important;
}

/* Footer hover background */
.tw-scope footer [class*="tw:hover:bg-secondary"]:hover {
    background-color: #ffda00 !important; /* --tw-color-secondary */
}

/* Footer transition duration */
.tw-scope footer [class*="tw:duration-200"] {
    transition-duration: 0.2s !important;
}

/* Footer text-sm fix */
.tw-scope footer [class*="tw:text-sm"] {
    font-size: 14px !important; /* 0.875rem at 16px base */
    line-height: 1.43 !important; /* --tw-text-sm--line-height */
}

/* Footer gap-3 fix */
.tw-scope footer [class*="tw:gap-3"] {
    gap: 12px !important; /* 3 * 4px */
}

/* Footer xl breakpoint fixes */
@media (min-width: 1280px) {
    .tw-scope footer [class*="tw:xl:gap-6"],
    .tw-scope footer [class*="tw:xl-gap-6"] {
        gap: 24px !important; /* 6 * 4px */
    }

    .tw-scope footer [class*="tw:xl:items-start"],
    .tw-scope footer [class*="xltw::items-start"] {
        align-items: flex-start !important;
    }

    .tw-scope footer [class*="tw:xl:max-w-110"],
    .tw-scope footer [class*="tw:xl-max-w-110"] {
        max-width: 443px !important; /* 110.75 * 4px */
    }
}