/* Premium Logo Wipe Animation */
.logo-wipe-reveal {
    animation: dqLogoWipe 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

@keyframes dqLogoWipe {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transform: scale(0.95) translateX(-10px); /* Added scale */
    }
    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: scale(1) translateX(0); /* Final state */
    }
}

/* Precise Line Reveal */
@keyframes dqTextReveal {
    from {
        opacity: 0;
        transform: translateY(110%); /* Start fully below the mask */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dqFormEntrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Enhancing field focus for the glass card */
.fluentform .ff-el-form-control:focus {
    background: rgba(255, 255, 255, 0.15); /* Slightly brighten the glass */
    border-color: var(--at-primary-light);
    box-shadow: 0 0 15px rgba(68, 84, 224, 0.4);
    transition: all 0.4s ease;
}

/* ============================================================
   1. THE ENTRANCE REVEAL (Apply .entrance-reveal to Parent #brxe-ocjavw)
   ============================================================ */
.entrance-reveal {
    opacity: 0;
    animation: dqRevealUp 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 1000ms; /* Starts after headline cascade */
    will-change: transform, opacity;
}

@keyframes dqRevealUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ============================================================
   2. THE ACRYLIC CARD (Apply .glass-form-card to Inner #brxe-ophshh)
   ============================================================ */
.glass-form-card {
    position: relative;
    /* Using a deep semi-transparent tint to ground it against the fixed background */
    background: rgba(255, 255, 255, 0.06) !important; 
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    
    /* Separation of transform for Native Bricks Tilt compatibility */
    transition: transform 0.3s ease-out;
    overflow: visible;
}

/* 3. PREMIUM TOP-LIT BORDER GRADIENT */
.glass-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit; 
    padding: 1.5px; /* Border thickness */
    
    /* Creating the 'Studio Light' effect from top-left */
    background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.5) 0%, 
                rgba(255, 255, 255, 0.05) 50%,
                rgba(0, 26, 114, 0.3) 100%); /* Fades into deep blue at bottom */
    
    /* The Mask Trick for Gradient Borders */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* ============================================================
   4. FORM INPUTS & READABILITY
   ============================================================ */
/* Improving contrast for the Fluent Form inside the acrylic card */
.glass-form-card .ff-el-form-control {
    background: rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

.glass-form-card .ff-el-form-control:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    outline: none;
}

.glass-form-card input::placeholder, 
.glass-form-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}




/* Scroll Reveal Base - Hidden until triggered */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* When Advanced Themer or Bricks adds the 'is-in-view' class */
.scroll-reveal.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Image Specific: Horizontal Slide */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.is-in-view {
    opacity: 1;
    transform: translateX(0);
}


/*
.bricks-nav-menu .sub-menu {
   line-height: 40px!important;
}*/

/* 1. THE STICKY CONTAINER */
/* Ensure the Query Loop's parent has this class or ID */
.blog-stagger-container {
    /* Important: Must NOT have overflow: hidden or the cards won't stick */
    padding-top: 50px;
    padding-bottom: 200px; /* Gives space for the last card to finish its scroll */
}

/* 2. THE STICKY CARD */
.blog-stack-card {
    position: -webkit-sticky;
    position: sticky;
    
    /* This creates the vertical overlap as you scroll */
    margin-bottom: 60px; 
    
    background-color: #f0f0f0;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Subtle shadow to separate the layers */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
}

/* 3. STICKY OFFSETS (The "Manychat" reveal depth) */
/* This makes sure each card stops slightly lower than the one before it */
.blog-stack-card:nth-child(1) { top: 100px; z-index: 1; }
.blog-stack-card:nth-child(2) { top: 130px; z-index: 2; }
.blog-stack-card:nth-child(3) { top: 160px; z-index: 3; }
.blog-stack-card:nth-child(4) { top: 190px; z-index: 4; }

/* 4. ODD COLOR & HOVER (From your previous design) */
.blog-stack-card:nth-child(odd) {
    background-color: #e8e8e8;
}

.blog-stack-card:hover {
    background-color: #ffffff !important;
    transform: scale(1.02);
    border-color: var(--at-primary) !important;
    box-shadow: 0 40px 80px rgba(0, 26, 114, 0.15);
    z-index: 99 !important; /* Pull to front on hover */
}

/* Darken cards that are "behind" the current one */
.blog-stack-card:not(:hover) {
    filter: brightness(0.95);
}

.blog-stack-card-2 {
    position: -webkit-sticky;
    position: sticky;
    
    /* This creates the vertical overlap as you scroll */
    margin-bottom: 10px; 
    
    background-color: #f0f0f0;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Subtle shadow to separate the layers */
    box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
}

.blog-stack-card-2:hover {
    background-color: #ffffff !important;
    transform: scale(1.02);
    border-color: var(--at-primary) !important;
    box-shadow: 0 40px 80px rgba(0, 26, 114, 0.15);
    z-index: 99 !important; /* Pull to front on hover */
}


/* THE FLIP ENGINE */
.btn-flip {
    cursor: pointer;
    text-decoration: none;
    /* transition for the scale effect */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Ensure the height matches your design so the absolute spans center correctly */
    min-height: 50px; 
}

.btn-flip span {
    position: absolute;
    inset: 0; /* Shorthand for top/left/width/height 100% */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    color: inherit; /* Takes color from the Link Block settings */
}

/* 1. FRONT TEXT - Starts at center */
.btn-flip .front {
    transform: translateY(0);
}

/* 2. BACK TEXT - Starts hidden below */
.btn-flip .back {
    transform: translateY(100%);
}

/* 3. HOVER - Both move up together */
.btn-flip:hover .front {
    transform: translateY(-100%);
}

.btn-flip:hover .back {
    transform: translateY(0);
}

/* 4. MANYCHAT SPRING (Scale on click) */
.btn-flip:active {
    transform: scale(0.95);
}

/* NESTED HOVER: Card Hover -> Button Change */
.blog-stack-card:hover .btn-flip {
    /* Change the button background to stand out against the white card */
    background-color: var(--at-light-grey) !important;
    
    /* Optional: Ensure the text color is dark enough to be legible */
    color: var(--at-primary) !important; 
    
    /* Add a subtle border or shadow so it doesn't look 'flat' */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Ensure the flip spans inherit the new color correctly */
.blog-stack-card:hover .btn-flip span {
    color: inherit;
}

/* NESTED HOVER: Card Hover -> Button Change */
.blog-stack-card-2:hover .btn-flip {
    /* Change the button background to stand out against the white card */
    background-color: var(--at-light-grey) !important;
    
    /* Optional: Ensure the text color is dark enough to be legible */
    color: var(--at-primary) !important; 
    
    /* Add a subtle border or shadow so it doesn't look 'flat' */
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Ensure the flip spans inherit the new color correctly */
.blog-stack-card-2:hover .btn-flip span {
    color: inherit;
}

/* FLUENT FORMS SUBMIT BUTTON FLIP */
.ff-btn-submit {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* Manychat Physics */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                background-color 0.3s ease, 
                box-shadow 0.4s ease !important;
    
    /* Ensure the button has enough height for the roll */
    min-height: 50px; 
    padding: 0 35px !important;
}

/* 1. Hiding the original text during the roll */
/* We target the actual text inside the button */
.ff-btn-submit {
    color: transparent !important; /* Hide original so pseudo can take over */
}

/* ==========================================================================
   1. CORE SUBMIT BUTTON STYLES (Shared across all forms)
   ========================================================================== */
.ff-btn-submit::before {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* Match your design text color */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(0);
}

.ff-btn-submit::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(100%);
}

/* ==========================================================================
   2. EXPLICIT & FALLBACK SELECTORS (Ensures text never renders blank)
   ========================================================================== */

/* 🇲🇽 ESPAÑOL TARGETS (Specific IDs + Page Language Fallback) */
.id_1 .ff-btn-submit::before, .id_1 .ff-btn-submit::after,
.id_3 .ff-btn-submit::before, .id_3 .ff-btn-submit::after,
.lang-es .ff-btn-submit::before, .lang-es .ff-btn-submit::after {
    content: "Enviar Mensaje" !important;
}

/* 🇺🇸 ENGLISH TARGETS (Specific IDs + Page Language Fallback) */
.id_4 .ff-btn-submit::before, .id_4 .ff-btn-submit::after,
.id_5 .ff-btn-submit::before, .id_5 .ff-btn-submit::after,
.lang-en .ff-btn-submit::before, .lang-en .ff-btn-submit::after {
    content: "Send Message" !important;
}

/* ==========================================================================
   3. THE ROLL TRIGGER & HOVER EFFECTS (Shared animations)
   ========================================================================== */
.ff-btn-submit:hover::before {
    transform: translateY(-100%);
}

.ff-btn-submit:hover::after {
    transform: translateY(0);
}

.ff-btn-submit:hover {
    transform: scale(1.03) translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 26, 114, 0.2);
}

.ff-btn-submit:active {
    transform: scale(0.96);
}


/* THE LOGO WIPE DEFINITION */
@keyframes footerWipeReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateX(-15px);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
        transform: translateX(0);
    }
}



/* THE FOOTER LOGO ENGINE */

/* 1. INITIAL STATE (Sitting in the dark) */
.footer-logo-wipe {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-15px);
    visibility: hidden;
    
    /* Cinematic 1.5s reveal */
    transition: opacity 1.5s ease, 
                clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1), 
                transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 2. TRIGGER STATE (When Bricks sets the attribute) */
.footer-logo-wipe[data-show="true"] {
    opacity: 1 !important;
    clip-path: inset(0 0% 0 0) !important;
    transform: translateX(0) !important;
    visibility: visible !important;
}


.fluentform .ff-el-group select {
    color: var(--at-white-t-3) !important;
    font-family: "MozillaText";
    font-size: 1.4rem !important;
}

#brxe-vdzxhu[data-mode="button"] .bricks-button {
    padding: 12px 30px !important;
}

#brxe-vdzxhu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px; /* Adjust spacing between buttons */
    padding: 0;
    list-style: none; /* Removes any default bullet points */
}

#brxe-vdzxhu li {
    margin: 0; /* Clear default list margins */
}

/*body, html {
    overflow-x: hidden; /* Stops horizontal scrolling */
/*}*/

/*#brx-footer, .brx-footer {
    overflow: hidden !important; /* Prevents hidden animated blocks from stretching the page height */
/*}*/

/* Apply this instead if you ever need to kill side-scrolling safely */
#brx-content {
    overflow: hidden;
}

@media (max-width: 767px) {
    #brxe-doiqhe .bricks-nav-menu .sub-menu {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

/* ==========================================================================
   PARENT ID-DRIVEN FAILSAFE FOR ENGLISH FOOTER LINKS
   ========================================================================== */

/* 1. Force the parent block container to stack its children vertically */
#footer-links-eng {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    align-items: flex-start !important;
}

/* 2. Force the base style for ALL text links inside this container */
#footer-links-eng a {
    display: block !important;
    color: var(--at-light-grey) !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    text-decoration: none !important;
}

/* 3. Force the absolute white color and weight on hover (crushes line 758) */
#footer-links-eng a:hover {
    color: var(--at-white) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   PARENT ID-DRIVEN FAILSAFE FOR SPANISH FOOTER LINKS
   ========================================================================== */

/* 1. Force the parent block container to stack vertically */
#footer-links-esp {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    align-items: flex-start !important;
}

/* 2. Force the base style for ALL Spanish text links */
#footer-links-esp a {
    display: block !important;
    color: var(--at-light-grey) !important;
    font-weight: 400 !important;
    font-size: 1.4rem !important;
    text-decoration: none !important;
}

/* 3. Force the absolute white color and weight on hover */
#footer-links-esp a:hover {
    color: var(--at-white) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}


/* ==========================================================================
   UNIFIED BRICKS NESTED NAV LAYER SAFETY FRAMEWORK (EN & ES)
   ========================================================================== */

/* 1. Elevate the primary parent list wrappers globally and individually */
.brx-nav-nested-items,
#brxe-idmila,
#brxe-f74906 {
    position: relative !important;
    z-index: 2000 !important;
}

/* 2. Elevate the dropdown parent list nodes to stay clear of content boxes */
.brxe-dropdown,
#brxe-xsvqrj,
#brxe-893f3b {
    position: relative !important;
    z-index: 3000 !important;
}

/* 3. Force absolute mega-menus to render on top of form containers (z-index: 10) */
.brx-dropdown-content,
.brx-submenu-positioned,
#brxe-naxcnw,
#brxe-d40bd9 {
    position: absolute !important;
    z-index: 99999 !important;
}

/* ============================================================
   COMPLETE ANIMATION ENGINE: DQ Coatings + MANUAL HELPERS
   ============================================================ */

/* 1. KEYFRAMES */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes heroScaleUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. CORE ENGINE (Desktop & Tablet 768px+) */
@media (min-width: 768px) {

  /* Target both Manual (.hero-impact) and Automatic (.stagger-wrapper) elements */
  .hero-impact.brx-animated,
  .stagger-wrapper > .brx-animated {
    opacity: 0;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: forwards;
  }

  /* Logic for Automatic Stagger (Rayden Method) */
  .stagger-wrapper > .brx-animated {
    animation-delay: calc(var(--block-index, 1) * 0.1s);
  }

  /* Logic for Manual Stagger (Hero Method) */
  .hero-impact.brx-animated {
    animation-delay: var(--delay, 0.3s) !important;
  }

  /* Mapping Animation Names */
  .fadeInUp { animation-name: fadeInUp; }
  .fadeInLeft { animation-name: fadeInLeft; }
  .fadeInRight { animation-name: fadeInRight; }
  .heroScaleUp { animation-name: heroScaleUp; }

  /* Automatic Indexing for .stagger-wrapper children */
  .stagger-wrapper > *:nth-child(1) { --block-index: 1; }
  .stagger-wrapper > *:nth-child(2) { --block-index: 2; }
  .stagger-wrapper > *:nth-child(3) { --block-index: 3; }
  .stagger-wrapper > *:nth-child(4) { --block-index: 4; }
  .stagger-wrapper > *:nth-child(5) { --block-index: 5; }
  .stagger-wrapper > *:nth-child(6) { --block-index: 6; }
}

/* 3. MANUAL STAGGER HELPERS (For your Hero) */
.delay-1 { --delay: 0.3s !important; }
.delay-2 { --delay: 0.5s !important; }
.delay-3 { --delay: 0.7s !important; }
.delay-4 { --delay: 0.9s !important; }
.delay-5 { --delay: 1.1s !important; }

/* 4. 🎯 CLEAN MOBILE MASTER RESET (0px to 767px) - ISOLATED FIXED VERSION */
@media (max-width: 767px) {
  /* Only strip animations from elements intended to move, leaving structural components alone */
  .hero-impact,
  .stagger-wrapper > .brx-animated,
  .scroll-reveal,
  .reveal-left {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* 5. BUILDER VISIBILITY FIX */
[data-bricks-is-frontend="false"] .hero-impact,
[data-bricks-is-frontend="false"] .stagger-wrapper > *,
[data-bricks-is-frontend="false"] .brx-animated {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}


/* FORCE BRICKS HERO BACKGROUND VIDEO TO CENTER STAGE */
.bricks-background-video-wrapper video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    
    /* Backup positional constraints */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}


/* ==========================================================================
   BRICKS HERO BACKGROUND VIDEO FAIL-SAFE
   ========================================================================= */

/* Hide any browser-injected native controls/play overlays */
.bricks-background-video-wrapper video::-webkit-media-controls,
.bricks-background-video-wrapper video::-webkit-media-controls-panel,
.bricks-background-video-wrapper video::-webkit-media-controls-play-button,
.bricks-background-video-wrapper video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Lock click events so the user cannot accidentally invoke a system menu */
.bricks-background-video-wrapper video {
    pointer-events: none !important;
}

/* Strip entrance & scroll animations on mobile devices */
@media (max-width: 767px) {
  .brx-animated,
  .scroll-reveal,
  .reveal-left,
  .hero-impact,
  .bc-blade-title__inner,
  [data-interactions] {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}