/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* Custom Fonts */
@font-face {
    font-family: 'BigCaslon';
    src: url('../tipografias/BigCaslon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BigCaslon';
    src: url('../tipografias/big-caslon-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Mulish';
    src: url('../tipografias/Mulish-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Mulish';
    src: url('../tipografias/Mulish/Mulish-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: #050505;
    --text-color: #ffffff;
    --accent-color: #00d4ff;
}

body {
    background-color: var(--bg-color);
    background-image: url('../img/fondo-web.png');
    background-size: 100% auto;
    /* Full width, maintains aspect ratio */
    background-repeat: no-repeat;
    background-attachment: scroll;
    /* Scrolls with content */
    color: var(--text-color);
    font-family: 'Mulish', sans-serif;
    overflow-x: hidden;
}

/* NAVIGATION */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    /* Transparent as requested */
    transition: background 0.3s, padding 0.3s, transform 0.3s;

    /* Blur effect for top state */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

nav.nav-hidden {
    transform: translateY(-100%);
}

/* Mobile Nav Styles MOVED TO END OF FILE TO FIX CASCADE */

/* Dark Text Nav for Inner Pages */
nav.nav-dark-text .logo a,
nav.nav-dark-text .nav-group a,
nav.nav-dark-text .nav-lang a,
nav.nav-dark-text .contact-link {
    color: #1a1a1a;
}
nav.nav-dark-text .nav-lang a.inactive {
    color: rgba(26,26,26,0.6);
}
nav.nav-dark-text .menu-toggle span {
    background-color: #1a1a1a;
}
nav.nav-dark-text .logo-white {
    opacity: 0;
    visibility: hidden;
}
nav.nav-dark-text .logo-black {
    opacity: 1;
    visibility: visible;
}

/* Sticky State */
nav.scrolled {
    background: white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 15px 5%;
    /* Slightly smaller */
}

nav.scrolled .logo a,
nav.scrolled .nav-group a,
nav.scrolled .nav-lang a,
nav.scrolled .contact-link,
nav.scrolled .menu-toggle span {
    color: #1a1a1a !important;
    /* Force black text */
}

nav.scrolled .nav-group a:hover {
    color: #000 !important;
    font-weight: 600;
}

nav.scrolled .nav-lang a.inactive {
    color: #999 !important;
}

/* Logo */
.logo a {
    display: block;
    position: relative;
    width: 150px;
    /* Adjust based on valid logo size */
    height: 50px;
}

.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

.logo-white {
    opacity: 1;
    transition: opacity 0.3s;
}

.logo-black {
    opacity: 0;
    transition: opacity 0.3s;
}

/* Nav is scrolled OR Menu is Open -> Show Black Logo, Hide White Logo */
nav.scrolled .logo-white,
nav.active .logo-white {
    opacity: 0;
}

nav.scrolled .logo-black,
nav.active .logo-black {
    opacity: 1;
}

/* Sticky State - Logo Swap (redundant but explicit) */
nav.scrolled .logo-white {
    opacity: 0;
}

nav.scrolled .logo-black {
    opacity: 1;
}

/* Center Groups Layout */
.nav-center-groups {
    display: flex;
    gap: 80px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.nav-group a {
    font-family: 'Mulish', sans-serif;
    color: rgba(255, 255, 255, 0.75);
    /* Slightly different color (dimmed) */
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
    font-weight: 400;
}

.nav-group a:first-child {
    color: rgba(255, 255, 255, 0.85);
    /* Top item slightly brighter */
}

.nav-group a:hover {
    color: white;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.arrow {
    font-size: 0.8rem;
}

/* Language Selector */
.nav-lang {
    display: none !important;
}

.nav-lang a {
    font-family: 'Mulish', sans-serif;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
}

.nav-lang a.active {
    color: white;
}

.nav-lang a.inactive {
    color: rgba(255, 255, 255, 0.4);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
    background-color: white;
    /* Keep white if on black menu, or black if we want contrast */
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
    background-color: white;
}

/* Ensure menu button is visible on white background if sticky header is active */
nav.scrolled .menu-toggle span {
    background-color: #000;
}

/* But when active (menu open, black background), it should be white again */
nav.scrolled .menu-toggle.active span {
    background-color: #fff;
}

/* HERO SECTION - LEEROY STYLE */
/* HERO SECTION - REDESIGN (Bottom Right) */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    /* iOS fix: svh excludes dynamic browser UI bars */
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    /* Bottom */
    justify-content: flex-end;
    /* Right */
    padding-bottom: 80px;
    /* Space from bottom */
    padding-right: 5%;
    /* Space from right */

    /* 3D PERSPECTIVE SETUP - Keeping provided structure */
    perspective: 1500px;
    transform-style: preserve-3d;
}

.hero-canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #1a1a1a;
    /* Fallback */
}

/* Canvas generated by Three.js should fill the container */
.hero-canvas-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Corner Content */
.hero-content-corner {
    text-align: right;
    z-index: 10;
    color: white;
    /* If sticky header is white, this text is white on the video. */
}

.hero-title-corner {
    margin: 0;
    line-height: 0.9;
}

.hero-title-corner .line-1 {
    display: block;
    font-size: 3.5rem;
    margin-bottom: 0;
}

.hero-title-corner .line-2 {
    display: block;
    font-size: 3.5rem;
}

.font-italic {
    font-family: 'BigCaslon', serif;
    font-style: italic;
    font-weight: 400;
}

.font-sans {
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
}

.font-takeoff {
    font-family: 'BigCaslon', serif;
    font-weight: 400;
    font-style: italic;
}

.hero-logo-inline {
    height: 4.6rem;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    margin-left: 8px;
}

.font-takeoff span {
    font-family: inherit;
    /* will be overridden by JS */
}

/* Animations for new hero */
.hero-title-corner .line-1,
.hero-title-corner .line-2 {
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.5s;
}

.hero-title-corner .line-2 {
    animation-delay: 0.8s;
}

@media (max-width: 768px) {
    .hero-section {
        height: 100vh;
        height: 100svh;
        /* iOS fix */
        justify-content: center;
        align-items: center;
        padding: 80px 20px 0 20px;
        /* 80px top to offset fixed navbar, centering in remaining space */
        text-align: center;
    }

    .hero-content-corner {
        text-align: center;
        width: 100%;
    }

    .hero-title-corner .line-1,
    .hero-title-corner .line-2 {
        font-size: 2.4rem;
        display: block;
        white-space: normal;
    }

    /* Keep CLEAR FOR TAKE OFF. on one line */
    .hero-title-corner .line-2 {
        display: block;
    }
}

@media (max-width: 480px) {

    .hero-title-corner .line-1,
    .hero-title-corner .line-2 {
        font-size: 2rem;
    }

    .hero-section {
        padding-bottom: 100px;
    }
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    right: 5%;
    font-size: 0.8rem;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    opacity: 0.6;
}

/* Animations */
@keyframes slideUpReveal {
    0% {
        opacity: 0;
        transform: translateY(100px) skewY(5deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) skewY(0);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* HERO MARGIN ADJUSTMENT (if needed) */

/* INTERACTIVE SERVICES SECTION */
.services-interactive {
    position: relative;
    width: 100%;
    min-height: 110vh;
    /* Large height for impact */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Left aligned text */
    padding: 0 5%;
    background-color: #000;
    overflow: hidden;
}

.services-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.service-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.service-video.active {
    opacity: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Darken video */
    z-index: 2;
}

.services-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    color: white;
    padding-left: 0%;
    /* Align with other content */
}

/* Intro removed as per request */

.services-list {
    display: flex;
    flex-direction: column;
    /* Vertical list */
    align-items: flex-start;
    /* Left aligned */
    gap: 10px;
}

.service-item {
    font-size: 2.5rem;
    /* Reduced from 3rem */
    font-weight: 400;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.5);
    /* Dimmed by default */
    border: none;
    line-height: 1.1;
}

/* Alternating Typography */
.service-item:nth-child(odd) {
    font-family: 'Mulish', sans-serif;
    font-weight: 800;
    /* Bolder sans */
}

.service-item:nth-child(even) {
    font-family: 'BigCaslon', serif;
    font-style: italic;
    font-weight: 400;
}

/* Hover & Active Effect */
.service-item:hover,
.service-item.active {
    color: #000;
    /* Black text */
    background-color: white;
    /* White background restored */
    padding: 0 10px;
    /* Add padding for the box look */
    transform: translateX(20px);
    /* Slight slide right instead of scale */
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
}

.service-item.active {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    font-style: italic !important;
}

@media (max-width: 768px) {
    .services-interactive {
        justify-content: flex-end;
        align-items: flex-end;
        padding-bottom: 10%;
        min-height: 100svh;
    }

    .services-content {
        padding-left: 0;
        padding-right: 2%;
        text-align: right;
    }

    .services-list {
        align-items: flex-end;
    }

    .service-item {
        font-size: 1.5rem;
    }

    .service-item:hover,
    .service-item.active {
        transform: translateX(-20px);
    }
}

/* GRADIENT ZONE: shared background for marcas + casos sections */
.gradient-zone {
    background: radial-gradient(circle at top left, #B3541E, transparent 40%),
        radial-gradient(circle at bottom right, #3D6E54, transparent 40%),
        linear-gradient(to bottom, #F5EBE0, #E0DFDE);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* On mobile: sections inside gradient-zone become transparent,
   so the single parent background shows through both seamlessly */
@media (max-width: 900px) {

    .gradient-zone .marcas-section,
    .gradient-zone .casos-section-stack {
        background: transparent !important;
    }
}

/* MARCAS SECTION (Marquees) */
.marcas-section {
    padding: 100px 0;
    background: radial-gradient(circle at top left, #B3541E, transparent 40%),
        radial-gradient(circle at bottom right, #3D6E54, transparent 40%),
        linear-gradient(to bottom, #F5EBE0, #E0DFDE);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 120px;
    position: relative;
}

.marcas-text {
    text-align: center;
    padding: 0 20px;
    z-index: 2;
}

.marcas-text h2 {
    font-family: 'Mulish', sans-serif;
    font-size: 3rem;
    line-height: 1.2;
    color: #1a1a1a;
    font-weight: 400;
    margin: 0;
}

@media (max-width: 768px) {
    .marcas-text h2 {
        font-size: 2rem;
    }

    .marcas-section {
        gap: 60px;
        padding: 60px 0;
        /* iOS: gradient sized to viewport so colors don't stretch with content */
        background-attachment: scroll;
        background-size: 100vw 100vh;
        background-position: top left;
    }
}

.font-italic {
    font-style: italic;
}

.font-regular {
    font-style: normal;
    font-weight: 700;
    /* Make CONFÍAN bolder */
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-track {
    display: inline-flex;
    gap: 80px;
    align-items: center;
}

.marquee-track img {
    height: 40px;
    max-width: 150px;
    width: auto;
    min-width: 100px; /* Fallback width para SVGs sin dimensiones en iOS */
    flex-shrink: 0; /* Evita que Safari colapse la imagen a 0 */
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s;
    filter: invert(1) brightness(0);
}

.marquee-track img:hover {
    opacity: 1;
}

/* Specific Logo Sizing Fixes */
.marquee-track img[alt="Xoco"] {
    height: 70px;
    /* "Diminuto" -> Much larger */
}

.marquee-track img[alt="Blas"],
.marquee-track img[alt="Ellaz"] {
    height: 28px;
    /* "Un poco grandes" -> Smaller */
}

.marquee-track img[alt="Thom"] {
    height: 55px;
    /* "Más grande" */
}

.marquee-track img[alt="Vaca Argentina"] {
    height: 60px;
    /* "Más grande" */
}

/* Animations */
.scroll-left {
    animation: scrollLeft 40s linear infinite;
}

.scroll-right {
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* SERVICES SECTION */
.services-section {
    padding: var(--section-padding);
    background: #050505;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.service-card {
    background: #111;
    padding: 40px;
    border-radius: 4px;
    text-align: left;
    transition: transform 0.3s, background 0.3s;
    border: 1px solid #222;
}

.service-card:hover {
    transform: translateY(-10px);
    background: #1a1a1a;
    border-color: var(--accent-color);
}

.service-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: white;
}

.service-desc {
    color: #888;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* CASOS DE EXITO - REDESIGN */
.casos-section-stack {
    position: relative;
    width: 100%;
    display: flex;
    background: radial-gradient(circle at top left, #B3541E, transparent 40%),
        radial-gradient(circle at bottom right, #3D6E54, transparent 40%),
        linear-gradient(to bottom, #F5EBE0, #E0DFDE);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 100px;
    padding-bottom: 100px;
}

.casos-container-stack {
    display: flex;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 5%;
}

/* SIDEBAR WITH RULER */
.casos-sidebar {
    width: 30%;
    min-width: 300px;
    position: relative;
}

.casos-sticky-content {
    position: sticky;
    top: 15vh;
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: left;
}

.casos-main-title {
    font-family: 'Mulish', sans-serif;
    font-size: 3.2rem;
    font-weight: 300;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.1;
}

.casos-main-title .font-italic {
    font-family: 'BigCaslon', serif;
    font-style: italic;
    font-weight: 400;
}

.ruler-wrapper {
    position: relative;
    width: 50px;
    height: 300px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 20px;
    margin-top: 0;
    display: block;
}

.ruler-track {
    width: 100%;
    height: 100%;
    /* Create ticks using repeating gradient */
    background-image: linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 10px 20px;
    /* 1px line every 20px */
    background-repeat: repeat-y;
    width: 10px;
    opacity: 0.3;
}

.ruler-indicator {
    position: absolute;
    left: -5px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #000;
    transition: top 0.1s linear;
}

.ruler-mark {
    display: none;
    /* Hide the detailed marks from previous approach, restore track */
}

.current-counter {
    display: none;
    /* Hide counter if it was added in the revert-to state */
}

/* CARD LIST */
.casos-list {
    width: 70%;
    position: relative;
    padding-left: 0;
    perspective: 1000px;
    display: block;
    /* Reset flex center */
}

.caso-item {
    position: sticky;
    top: 10vh;
    width: 100%;
    min-height: 80vh;
    /* Ensure tall enough so they don't overlap too fast */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    margin-bottom: 100px;
    /* Space between start of next item */

    /* Stack visual logic */
    transform-origin: center top;
    will-change: transform, filter, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* The actual content container needs a background to hide previous items */
.caso-row {
    display: flex;
    width: 120%;
    /* Wider to span across */
    left: -25%;
    /* Pull left to overlap sidebar significantly */
    align-items: center;
    gap: 0;
    padding: 20px 0;
    /* Reduced vertical padding, no horizontal */
    background: transparent;
    /* No background as requested */
    border-radius: 0;
    box-shadow: none;
    /* No shadow */
    position: absolute;
    /* User requested absolute */
    top: 50%;
    transform: translateY(-50%);
    /* Center vertically in the sticky container */
    overflow: visible;
    /* Allow text to hang out if needed, though hidden usually safer for scroll */
    justify-content: center;
    /* Center the whole block */
    max-width: none;
    /* Unconstrain width */
    margin: 0;
    /* Reset margin */
}

.caso-text-col {
    flex: 1;
    min-width: 40%;
    /* adjust widths */
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #1a1a1a;
    z-index: 10;
    /*margin-right: -150px;*/
    /* More overlap */
    text-shadow: none;
    /* Vertically center content */
    justify-content: center;
}

.client-name {
    font-family: 'Mulish', sans-serif;
    font-size: 4rem;
    /* Even larger */
    font-weight: 900;
    margin: 0;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.client-sub {
    font-family: 'BigCaslon', serif;
    /* Maybe mix it up? Or stick to Mulish? Reference is Sans. Stick to Mulish for now, or use BigCaslon for elegance if user requested global fonts. User requested GLOBAL fonts. Let's use BigCaslon for the 'fancy' part if applicable. Reference is stark sans serif. I'll stick to Mulish for the big title as reference suggests. */
    font-size: 2rem;
    font-weight: 300;
    margin: 0;
    text-transform: uppercase;
    color: #1a1a1a;
    display: none;
    /* Reference image doesn't show this part clearly separate from title, title is massive. I'll hide sub or make it part of title logic */
}

/* Let's keep the .description visible */
.description {
    font-family: 'Mulish', sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
    max-width: 450px;
    text-align: justify;
}

.caso-image-col {
    flex: 1.2;
    height: 500px;
    /* Taller */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    /* Optional: Fade left side? */
    mask-image: linear-gradient(to right, transparent 0%, black 20%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
}

.caso-image-col {
    flex: 1.5;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
    .caso-image-col {
        height: 300px;
        flex: none;
        width: 100%;
    }

    .client-name {
        font-size: 3rem;
    }

    .description {
        font-size: 1rem;
    }
}

.caso-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Footer Button in Section */
.casos-global-footer {
    padding-top: 50px;
    text-align: left;
    width: 100%;
}

.btn-outline-dark {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-outline-dark:hover {
    background: #1a1a1a;
    color: white;
}

@media (max-width: 900px) {
    .casos-container-stack {
        flex-direction: column;
    }

    .casos-section-stack {
        background: radial-gradient(circle at top left, #B3541E, transparent 40%),
            radial-gradient(circle at bottom right, #3D6E54, transparent 40%),
            linear-gradient(to bottom, #F5EBE0, #E0DFDE);
        background-attachment: scroll;
        background-size: 100vw 100vh;
        background-position: top left;
        background-repeat: no-repeat;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        position: relative;
        /* base para el sidebar absoluto */
    }

    .casos-sidebar {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        pointer-events: none;
        z-index: 1;
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    .casos-sticky-content {
        position: relative;
        top: auto;
        z-index: 1;
        background: transparent;
        padding: 0 5% 10px;
        pointer-events: none;
    }

    .ruler-wrapper {
        display: none;
    }

    .casos-list {
        width: 100%;
        padding: 0;
        padding-top: 20px;
        position: relative;
        z-index: 10;
    }

    .caso-item {
        position: sticky !important;
        top: 22vh !important;
        min-height: 65vh !important;
        margin-bottom: 20px !important;
        align-items: center;
        z-index: 1;
        /* relative to .casos-list */
        will-change: transform, filter, opacity;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Último caso: no sticky, sin espacio extra, deja ver el botón */
    .caso-item:last-of-type {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        margin-bottom: 40px !important;
    }

    .casos-global-footer {
        text-align: center;
        padding-top: 20px;
        position: relative;
        z-index: 10;
    }

    .caso-row {
        position: relative !important;
        top: auto !important;
        transform: none !important;
        left: auto !important;
        width: 100% !important;
        flex-direction: column;
        /* Image first, then text */
        text-align: center;
        padding: 0;
        gap: 20px;
    }

    .caso-text-col {
        margin-right: 0;
        min-width: 100%;
        gap: 15px;
        align-items: center;
        text-align: center;
    }

    .client-name {
        font-size: 2.5rem;
        letter-spacing: -1px;
    }

    .description {
        text-align: center;
        max-width: 100%;
    }

    .caso-image-col {
        width: 100%;
        height: 260px;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .casos-global-footer {
        text-align: center;
    }
}


/* ANTES Y DESPUES SLIDER & NAV */
.comparison-section {
    padding: 0;
    background: transparent;
}

.comparison-section .section-header {
    display: none;
    /* Hide original header as requested implicitly by design change */
}

.comparison-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comparison-brand-nav {
    width: 100%;
    background: #f0f0f0;
    /* Light gray/white bar */
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid #ddd;
}

.brand-nav-item {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    transition: color 0.3s, font-weight 0.3s;
    letter-spacing: 1px;
}

.brand-nav-item.active {
    color: #000;
    font-weight: 700;
}

.comparison-brand-nav .divider {
    color: #ccc;
}

.comparison-container {
    position: relative;
    width: 100%;
    max-width: none;
    height: 80vh;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    border: none;
    cursor: ew-resize;
}

.comp-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.comp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* FIX: Prevent distortion on the clipped Before image */
.comp-before img {
    width: 100vw;
    max-width: none;
}

.comp-after {
    z-index: 1;
    /* Ensure it stays below comp-before */
}

.comp-before {
    z-index: 2;
    width: 50%;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    /* Subtle border for the split line */
}

/* CENTERED TEXT - The Magic Trick */
/* CENTERED TEXT - The Magic Trick -> REMOVED. Now positioned in corners as BUTTONS. */
.center-text {
    position: absolute;
    font-family: 'Mulish', sans-serif;
    font-size: 0.75rem;
    /* Smaller text */
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    margin: 0;
    letter-spacing: 1px;
    z-index: 10;
    width: auto;
    text-align: left;

    /* Button Style */
    /*background: #fff;*/
    color: #000;
    padding: 6px 14px;
    border-radius: 30px;
    /* Pill shape */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);*/
}

.text-after {
    top: 30px;
    right: 30px;

    /* Reset bottom/left from previous override if needed, though 'auto' is default usually */
    bottom: auto;
    left: auto;
    transform: none;
}

.text-before {
    top: 30px;
    left: 30px;

    bottom: auto;
    right: auto;
    transform: none;
}

/* 
   Since .comp-before clips content, "El Antes" at top-left is naturally inside it.
   "El Después" at top-right is naturally outside the clip (in comp-after).
*/
.comp-before .center-text {
    left: 30px;
    top: 30px;
    bottom: auto;
}

/* SLIDER HANDLE */
.comp-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: transparent;
    /* Invisible handle, relying on border of comp-before or just cursor */
    z-index: 100;
    pointer-events: none;
    transform: translateX(-50%);
}

.handle-line {
    display: none;
    /* Hide the visible white line handle if requested to match the reference style where split is subtle */
}

/* Restore handle functionality visibly if needed? 
       The user image shows a clean split line. 
       I added border-right to .comp-before which acts as the line.
    */

/* FOOTER */
footer {
    padding: 60px 5%;
    background: #050505;
    border-top: 1px solid #111;
    text-align: center;
    color: #666;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 15vw;
    }

    .center-text {
        background: #fff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }

    /* Comparison container responsive adjustments if needed, 
       but removing grid-template as it is not grid anymore */
    .comparison-container {
        height: 50vh;
        /* Smaller height on mobile */
    }

    .nav-links {
        display: none;
    }
}

/* FOOTER REDESIGN */
.footer-section {
    position: relative;
    padding: 80px 5% 40px;
    background: linear-gradient(135deg, #E6DACE 0%, #D4C5B0 40%, #A3B5A6 100%);
    /* Fallback approximation */
    background: conic-gradient(from 180deg at 50% 50%, #B5651D 0deg, #EADDCD 90deg, #4A7056 220deg, #B5651D 360deg);
    /* Improve gradient to match image: warm orange/brown corners, light center, green bottom right */
    background: radial-gradient(circle at top left, #B3541E, transparent 40%),
        radial-gradient(circle at bottom right, #3D6E54, transparent 40%),
        linear-gradient(to bottom, #F5EBE0, #E0DFDE);
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    border-top: none;
}

/* Ensure footer text color overrides generic dark mode text */
.footer-section h2,
.footer-section p,
.footer-section span,
.footer-section a,
.footer-section input::placeholder {
    color: #1a1a1a;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 60px;
    gap: 40px;
}

.footer-headline-col {
    flex: 1;
    min-width: 300px;
}

.footer-title {
    font-family: 'BigCaslon', serif;
    font-size: 3.2rem;
    line-height: 1.1;
    text-transform: uppercase;
    color: #000;
    display: flex;
    flex-direction: column;
}

.footer-title .line-1 {
    font-weight: 400;
    /* Regular serif */
}

.footer-title .line-2 {
    font-style: italic;
    font-weight: 400;
}

.footer-title .line-3 {
    font-weight: 400;
    height: 1.2em;
    line-height: 1.2;
    display: block;
}

.footer-form-col {
    flex: 1;
    max-width: 500px;
    min-width: 300px;
}

.footer-contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-group {
    position: relative;
}

.footer-contact-form input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #555;
    padding: 10px 0;
    font-size: 1rem;
    color: #000;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.footer-contact-form input::placeholder {
    color: #666;
}

.footer-contact-form input:focus {
    border-bottom-color: #000;
}

.btn-footer {
    align-self: flex-end;
    margin-top: 20px;
    padding: 12px 30px;
    background: transparent;
    border: 1px solid #000;
    border-radius: 50px;
    font-size: 0.9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #000;
}

.btn-footer:hover {
    background: #000;
    color: #fff;
}

.footer-divider {
    border: 0;
    height: 1px;
    background: #555;
    margin-bottom: 40px;
    opacity: 0.5;
}

/* Bottom Info */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.9rem;
    color: #333;
}

.footer-brand {
    font-weight: 700;
}

.footer-location {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-email {
    text-decoration: none;
    color: #333;
}

.footer-social-copyright {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.social-icons {
    display: flex;
    gap: 15px;
    font-size: 1.5rem;
    /* For placeholder icons */
}

.social-icons a {
    color: #000;
    text-decoration: none;
}

/* Temporary Fix for icons if SVGs not present */
.social-icons a:empty::after {
    content: "•";
}

.footer-copyright {
    margin-top: 20px;
    font-size: 0.75rem;
    color: #555;
    width: 100%;
}


@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
    }

    .footer-headline-col {
        width: 100%;
        text-align: center;
    }

    .footer-title {
        font-size: 3em !important;
        align-items: center;
        text-align: center !important;
    }

    .footer-form-col {
        width: 100%;
        margin: 0 auto;
    }

    .footer-contact-form input {
        text-align: center;
    }

    .btn-footer {
        width: 100%;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .footer-location {
        text-align: left;
    }
}

/* FIX: Ensure Keyframes are Global and not nested */
.scroll-left {
    animation: scrollLeft 40s linear infinite;
}

.scroll-right {
    animation: scrollRight 40s linear infinite;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Global Hover Animation */
@keyframes subtlerotate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.02) rotate(2deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

/* MOBILE MENU STYLES */
@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
        z-index: 2001;
        /* Above overlay */
    }

    /* Hide the nav groups by default on mobile */
    .nav-center-groups {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: url('../img/fondo-mainnav.jpg') center/cover no-repeat;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0;
        transform: translateY(-100%);
        /* Hidden top */
        transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
    }

    .nav-center-groups.active {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    /* Re-layout inner groups for mobile */
    .nav-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
        margin-bottom: 25px;
    }

    .nav-group a,
    .nav-group a.contact-link {
        font-size: 2.8rem;
        text-transform: lowercase;
        /* Big text */
        color: white !important;
        /* Force white */
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        line-height: 1;
        text-align: center;
        width: 100%;
        display: block !important;
    }

    .nav-group a .arrow {
        display: none !important;
    }
    
    /* Alternating Typography for Mobile Menu (By Letter) */
    .nav-group a .mobile-char.font-caslon { 
        font-family: 'BigCaslon', serif !important; 
        font-style: italic !important; 
        font-weight: 400 !important; 
    }
    .nav-group a .mobile-char.font-mulish { 
        font-family: 'Mulish', sans-serif !important; 
        font-style: italic !important; 
        font-weight: 400 !important; 
    }

    /* Staggered Animation for links */
    .nav-center-groups.active .nav-group a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Override nav.scrolled black text when mobile menu is open */
    nav.scrolled .nav-center-groups.active .nav-group a,
    nav.scrolled .nav-center-groups.active .nav-group a.contact-link {
        color: white !important;
    }

    .nav-center-groups.active .nav-group:nth-child(1) a:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-center-groups.active .nav-group:nth-child(1) a:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-center-groups.active .nav-group:nth-child(2) a:nth-child(1) {
        transition-delay: 0.3s;
    }

    .nav-center-groups.active .nav-group:nth-child(2) a:nth-child(2) {
        transition-delay: 0.4s;
    }

    /* Make nav-lang visible on mobile inside the menu */
    .nav-lang {
        display: none !important;
    }

    .nav-lang a {
        font-size: 1.2rem;
    }

    /* Override colors so it's always visible on the dark overlay */
    .nav-lang a.active {
        color: #fff !important;
    }
    
    .nav-lang a.inactive {
        color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Show when the menu is active */
    .nav-center-groups.active ~ .nav-lang {
        opacity: 1;
        pointer-events: all;
    }
}

/* Page Title Animation Fix */
.page-title {
    height: 1.2em;
    line-height: 1.2;
    display: block;
    overflow: hidden;
}

/* Force black logo only on inner pages */
.project-inner-page nav .logo-white {
    opacity: 0 !important;
    visibility: hidden !important;
}

.project-inner-page nav .logo-black {
    opacity: 1 !important;
    visibility: visible !important;
}



/* =========================================
   ENTRANCE ANIMATIONS
   (Delete this block to disable all entrance animations)
   ========================================= */

/* Base class for all animated elements */
.animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* State when element is in viewport */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

/* Animation Variants */

/* Fade Up (Default) */
.fade-up {
    transform: translateY(30px);
}

/* Fade In (Simple) */
.fade-in {
    transition: opacity 1s ease-out;
}

/* Scale Up */
.scale-up {
    transform: scale(0.95);
}

/* Staggered delays for groups (optional) */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}


.detail-col li {
    list-style: disc;
}

/* =========================================
   PILLAR CSS FOR EQUIPO SECTION (from Servicios design)
========================================= */
.equipo-section {
    background-color: transparent;
    padding-bottom: 80px;
}

.equipo-hero-independent {
    width: 100%;
    height: 75vh;
    min-height: 400px;
    margin-bottom: 100px;
    overflow: hidden;
}

.equipo-hero-independent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: transform 0.8s ease;
}

.equipo-hero-independent:hover img {
    transform: scale(1.02);
    filter: grayscale(0%) !important;
}

@media (max-width: 900px) {
    .equipo-hero-independent {
        height: auto;
        min-height: auto;
        aspect-ratio: 16/9;
    }
}

.pillar {
    margin-bottom: 120px;
}

.pillar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pillar-right {
    position: relative;
}

.pillar-image {
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    border-radius: 2px;
}

.pillar-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.pillar-image:hover img {
    transform: scale(1.03);
}

.pillar.reverse .pillar-inner {
    direction: rtl;
}

.pillar.reverse .pillar-inner>* {
    direction: ltr;
}

.pillar-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 40px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pillar-number {
    font-family: 'BigCaslon', serif;
    font-style: italic;
    font-size: 1rem;
    color: #888;
    flex-shrink: 0;
}

.pillar-title {
    font-family: 'Mulish', sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    color: #fff;
}

.pillar-title em {
    font-family: 'BigCaslon', serif;
    font-style: italic;
}

.equipo-map-section:hover {
    filter: grayscale(0%) invert(0%) !important;
}

@media (max-width: 900px) {
    .pillar-inner {
        grid-template-columns: 1fr;
    }

    .pillar.reverse .pillar-inner {
        direction: ltr;
    }
}

/* Home Page Responsive Video Toggle */
.mobile-video {
    display: none;
}

@media (max-width: 768px) {
    .desktop-video {
        display: none;
    }

    .mobile-video {
        display: block;
    }

    .hero-logo-inline {
        height: 4.3rem;
    }
}