/* Updated Utility class for the green text highlight */
.rayden-highlight {
    position: relative;
    z-index: 1;
    
    /* Change 1: Use 'inline' instead of 'inline-block' for multi-line support */
    display: inline; 
    
    /* Change 2: Use box-decoration-break to ensure the highlight 
       starts/stops cleanly on wrapped lines */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    /* Styling the highlight as a background instead of a ::before pseudo-element
       is more reliable for mobile text wrapping */
    background-image: linear-gradient(var(--at-secondary), var(--at-secondary));
    background-size: 104% 60%; /* Your original thickness */
    background-repeat: no-repeat;
    background-position: -2% 88%; /* Adjusts the "underline" position */
    
    /* Optional: Padding to give the text breathing room on the sides */
    padding: 0 4px;
}

/* Clear the old ::before styles if you are replacing the previous code */
.rayden-highlight::before {
    content: none !important;
}

@media (max-width: 768px) {
    .rayden-highlight {
        background-size: 102% 45%; /* Slightly thinner line for mobile */
        background-position: 0% 90%; /* Moves it slightly lower */
    }
}

.rayden-solar-card {
    clip-path: polygon(
        26% 0%, 
        100% 0%, 
        100% 74%, 
        74% 100%, 
        0% 100%,
        0% 26%);
}

.rayden-industrial-row {
    
    clip-path: polygon(
        5% 0%,     /* Top-left cut starts */
        100% 0%,   /* Top-right corner */
        100% 70%,  /* Bottom-right cut starts */
        95% 100%,  /* Bottom-right cut ends */
        0% 100%,   /* Bottom-left corner */
        0% 30%      /* Top-left cut ends */
    );
}

/* --- Rayden Header Transitions --- */

/* 1. Base Styles */
#brx-header {
    /* Transitions go on the base state */
    transition: background-color 0.3s ease;
}

/* Target the container inside the header for padding */
#brx-header #brxe-bitbrz {
    padding-top: 30px; /* Your original top padding */
    padding-bottom: 30px; /* Your original bottom padding */
    transition: padding 0.3s ease-in-out;
}

#brx-header .brxe-logo img {
    width: 200px;
    transition: width 0.3s ease-in-out;
    height: auto;
}

/* 2. Scrolling State (Triggered by Bricks) */
#brx-header.scrolling #brxe-bitbrz {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

#brx-header.scrolling .brxe-logo img {
    width: 120px;
}

/* 1. The Glassmorphism State */
#brx-header.scrolling {
    /* 10px padding was already set previously */
    /*padding-top: 10px !important;
    padding-bottom: 10px !important;*/

    /* Apple Glass Effect */
    background-color: var(--at-primary-t-3) !important; /* White at 70% opacity */
    backdrop-filter: blur(15px) saturate(180%); /* The 'Frosted' look */
    -webkit-backdrop-filter: blur(15px) saturate(180%); /* Safari support */
    
    /* Subtle Border & Shadow for Depth */
    border-bottom: 1px solid var(--at-primary-t-2);
    /*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);*/
}

/* 2. Optional: Dark Mode Version */
/* If your site uses the deep teal brand color as the header background: */
/*
#brx-header.scrolling {
    background-color: rgba(3, 64, 72, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
*/

/* Target the specific Contacto link ID when it is active */
#brxe-dblsra[aria-current="page"],
#brxe-dblsra > a[aria-current="page"] {
    border-color: var(--at-secondary) !important;
}

/* If the border is on the list item itself instead of the link */
#brxe-aknarv .brx-nav-nested-items > li:last-child:has([aria-current="page"]) {
    border-color: var(--at-secondary) !important;
}

.whatsapp-float {
    position: fixed;
    bottom: 40%;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    border-radius: 10px;
    text-align: center;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128C7E;
    transform: scale(1.1);
}

@media (max-width: 767px) {
 .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}

/* 1. Parent Card Boundary */
.proyecto-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 2. The Link - This is the most important part */
/* This targets the <a> tag generated by your 'Leer más' button or Title */
.proyecto-card a {
    text-decoration: none;
    color: inherit;
}

/* The 'Invisible Shield' that catches the click for the whole card */
.proyecto-card a::after {
    content: "";
    position: absolute;
    /* This forces the link to span the entire .proyecto-card */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 50; /* Higher than images and text content */
}

/* 3. The 'Leer más' Visual Button */
/* Give your button the class .proyecto-card__link-button */
.proyecto-card__link-button {
    position: absolute;
    bottom: 25px;
    right: -150px; /* Start hidden */
    z-index: 51; /* One level above the 'shield' so it looks sharp */
    transition: right 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Branding */
    background-color: #ACFF40;
    color: #034048;
    padding: 10px 18px;
    border-radius: 4px;
    font-weight: 700;
    pointer-events: none; /* Clicks pass through to the <a> shield below */
}

.proyecto-card:hover .proyecto-card__link-button {
    right: 25px;
}

/* 4. Background Image Zoom */
.proyecto-card__image-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.proyecto-card:hover .proyecto-card__image-wrap {
    transform: scale(1.1);
}

@media (max-width: 767px) {
    /* 1. Reset the button position so it is always visible */
    .proyecto-card .proyecto-card__link-button {
        right: 20px !important;
        bottom: 20px !important;
        font-size: 12px;
        padding: 8px 14px;
    }

    /* 2. Disable the zoom to save mobile CPU/Battery */
    .proyecto-card:hover .proyecto-card__image-wrap {
        transform: none !important;
    }

    /* 3. Ensure the text remains readable without hover */
    /* If you have a dark overlay, make it slightly more visible by default on mobile */
    .proyecto-card__overlay {
        background: linear-gradient(0deg, rgba(3, 64, 72, 0.9) 0%, rgba(3, 64, 72, 0.2) 100%);
    }
    
    /* 4. Optional: Reduce card height for smaller screens if needed */
    .proyecto-card {
        aspect-ratio: 4/3; /* Makes cards a bit shorter on mobile */
    }
}


/* --- Rayden Global Animation Framework (Final Suite) --- */

/* 1. Standard Transitions (40px Desktop / 20px Mobile) */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  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); }
}

/* 2. Impact Hero Entrance (Scale + Fade + Slide) */
@keyframes heroScaleUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 3. Mobile Adaptations */
@keyframes fadeInUpMobile {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 4. Desktop & Tablet Stagger Logic (768px+) */
@media (min-width: 768px) {
  .stagger-wrapper > .brx-animated,
  .hero-impact.brx-animated {
    opacity: 0;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--block-index, 1) * 0.1s);
  }

  /* Mapping Classes */
  .stagger-wrapper > .brx-animated.fadeInUp { animation-name: fadeInUp; }
  .stagger-wrapper > .brx-animated.fadeInLeft { animation-name: fadeInLeft; }
  .stagger-wrapper > .brx-animated.fadeInRight { animation-name: fadeInRight; }
  
  /* Apply Hero Scale to elements with .hero-impact and .fadeInUp */
  .hero-impact.brx-animated.fadeInUp { animation-name: heroScaleUp; animation-duration: 1.5s; animation-delay: 0.5s;}

  /* Automatic Indexing */
  .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; }
}

/* 5. Mobile Logic */
@media (max-width: 767px) {
  .stagger-wrapper > .brx-animated,
  .hero-impact.brx-animated {
    opacity: 0;
    animation: fadeInUpMobile 0.7s ease-out forwards;
    animation-delay: 0.1s;
  }
}

/* 6. Builder Visibility Fix */
[data-bricks-is-frontend="false"] .stagger-wrapper > *,
[data-bricks-is-frontend="false"] .brx-animated {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* 1. Background Layer - The "Deep Blur" State */
.rayden-banner__bg {
    /* Long duration (1.5s) + Custom 'Out' Easing */
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), 
                filter 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    
    transform: scale(1);
    filter: blur(0px);
    will-change: transform, filter; /* Tells the browser to use the GPU */
}

/* 2. Content Layer - The "Lifting" Logo */
.rayden-banner__content {
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
                filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    
    filter: drop-shadow(0 0 0px rgba(0, 0, 0, 0.6));
}

/* 3. The Hover Trigger */
section:hover .rayden-banner__bg {
    transform: scale(1.12); /* Subtle scale is smoother than a large one */
    filter: blur(12px);     /* Increased blur for a dreamier look */
}

section:hover .rayden-banner__content {
    transform: scale(1.04);
    /* Soft Deep Teal Shadow */
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}

/* --- PROJECTS ALTERNATING LAYOUT --- */
@media (min-width: 768px) {
    /* 1. Base Setup (First row: Image Left, Text Right) */
    .project-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        /*gap: 80px; /* Increased gap for a cleaner look */
        padding-top: 40px; /* Spacing between project rows */
    }

    /* 2. Target the children to ensure they take up equal space */
    .project-wrapper > .brxe-block {
        flex: 1;
        width: 50%;
    }

    /* 3. The Flip Logic (Targets even items within the loop) */
    /* Using nth-of-type(even) is safer if there are other divs nearby */
    .project-wrapper:nth-of-type(even) {
        flex-direction: row-reverse !important;
    }
}

/* Mobile: Stack them normally */
@media (max-width: 767px) {
    .project-wrapper {
        display: flex;
        flex-direction: column !important;
        gap: 30px;
        margin-bottom: 60px;
    }
    .project-wrapper > .brxe-block {
        width: 100%;
    }
}