/* =========================================
   0. FONTS
   ========================================= */
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('fonts/PPNeueMontreal-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PP Neue Montreal';
    src: url('fonts/PPNeueMontreal-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   1. VARIABLES & CONFIGURATION
   ========================================= */
:root {
    --main-text-fam: 'Overused Grotesk', sans-serif;
    --main-title-fam: 'Overused Grotesk', sans-serif;
    --bg-dark: #011119;
    --bg-light: #DADFE1;
    --main-text-color: #000;
    --main-black: #000;
    --main-white: #fff;
    --main-easing: all 0.6s cubic-bezier(0.5, 1, 0.89, 1);
    --top-pad: calc(19.2vw + 102px);
    --margin: 40px;
}

/* =========================================
   2. RESET & BASE
   ========================================= */
* {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    background-color: var(--bg-dark);
    /* Swirl Dark Background */
    color: var(--main-black);
    overflow-x: hidden;
    min-height: 100vh;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =========================================
   3. UTILITIES
   ========================================= */
.grid {
    max-width: 1920px;
    display: block;
    margin: 0 auto;
}

.gutter {
    /* User wants edge-to-edge. 'gutter' adds 20px margin. 
       We might need to override this for the Intro or just remove margin for this specific block.
    */
    margin: 0 20px;
}

.full-width {
    width: 100%;
}

.full-height {
    min-height: 100vh;
}

.mh-screen {
    min-height: 100vh;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.fixed {
    position: fixed;
}

.abs-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.display--flex {
    display: flex;
}

/* Restored Intro Text Positioning */
.fixed-intro-text {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 40;
    /* Ensure it stays above swirl but below dark-section */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 10px 20px 0 20px;
    box-sizing: border-box;
    gap: 30px;
    pointer-events: none;
}

.fixed-intro-text .top-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    margin: 0 auto;
}

.fixed-intro-text .intro-subtitle {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.fixed-intro-text .full-impact-text {
    text-align: center;
    width: 100%;
    display: block;
}

/* Ensure GSAP curtain masks keep the text centered */
.curtain-mask,
.curtain-inner {
    text-align: center;
}

.display--block {
    display: block;
}

.display--grid {
    display: grid;
}

.jc-sb {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.go-center {
    margin: 0 auto;
}

.ta-right {
    text-align: right;
}

.ta-left {
    text-align: left;
}

.ta-center {
    text-align: center;
}

.no-margin {
    margin: 0;
}

.mt-large {
    margin-top: 40px;
}

.overflow {
    overflow: hidden;
}

.pe-none {
    pointer-events: none;
}

.z-50 {
    z-index: 50;
}

.z-150 {
    z-index: 150;
}

.z-999 {
    z-index: 999;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--main-title-fam);
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

.big-title {
    font-size: 100px;
    line-height: 1;
    letter-spacing: -5px;
    /* font-family inheritance from h1 above */
}

.fs-200 {
    font-size: 200px;
}

/* =========================================
   NEW TYPOGRAPHY CLASSES (Overused Grotesk)
   ========================================= */

/* Estilo 1: Títulos Grandes (I'm Melvin...) */
.type-big-title {
    font-family: var(--main-title-fam);
    font-weight: 500;
    /* Responsive size keeping the proportion of 133.7px */
    font-size: clamp(60px, 9vw, 133.777px);
    line-height: 0.9;
    letter-spacing: -2.67554px;
    margin: 0;
}

/* Estilo 2: Párrafos Destacados (I am delighted...) */
.type-highlight-text {
    font-family: var(--main-text-fam);
    font-weight: 400;
    font-size: clamp(18px, 1.8vw, 26.7554px);
    line-height: 1.2;
    letter-spacing: -0.267554px;
    margin: 0;
}

/* Estilo 3: Párrafos Normales (We are very happy...) */
.type-normal-text {
    font-family: var(--main-text-fam);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 16.7221px);
    line-height: 1.2;
    letter-spacing: normal;
    margin: 0;
}

/* Unified Impact Text */
.full-impact-text {
    font-family: var(--main-title-fam);
    font-size: clamp(42px, 8vw, 90px);
    /* Increased min from 28px to 42px for mobile readability */
    /* Reduced ~2pt equivalent (was 30-100) */
    /* Reduced by 50% */
    line-height: 0.85;
    /* Tight packing */
    letter-spacing: -0.03em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    /* Or justify if we really want blocky look, but center is safer */
    width: 100%;
    margin: 0;
    word-break: break-word;
    /* Handle long words */
}

/* Remove separate classes no longer needed or keep for reference? 
   We will replace H1/H2 with this single class. 
*/

/* Removed redundant .huge-title and .big-subtitle overrides */

.fw-700 {
    font-weight: 700;
}

.fw-400 {
    font-weight: 400;
}

.lh-1 {
    line-height: 1;
}

.link-ani-black a {
    position: relative;
}

.link-ani-black a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--main-black);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--main-easing);
}

.link-ani-black a:hover::after {
    transform: scaleX(1);
}

/* Responsive Typography */
@media (max-width: 1440px) {
    .big-title {
        font-size: 80px;
        letter-spacing: -3px;
    }
}

@media (max-width: 768px) {
    .big-title {
        font-size: 60px;
    }

    /* Mobile Layout Fixes */
    .intro-subtitle {
        width: 90%;
        /* Use more width on mobile */
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
        /* Add padding to prevent edge touching */
    }

    .full-impact-text {
        padding: 0 10px;
        /* Slight buffer */
    }

    .top-label {
        font-size: 13px;
        /* Force readable size */
        padding: 0 20px;
    }
}

.top-pad {
    padding-top: var(--top-pad);
}

/* =========================================
   4. LAYOUT SECTIONS
   ========================================= */



/* --- Section 1: Intro (White) --- */
.intro-section {
    background-color: transparent;
    /* Transparent so Fixed Text (z-40) shows through #smooth-wrapper (z-50) */
    /* Swirl Dark Background */
    color: var(--main-white);
    padding-bottom: 0;
    /* Remove padding, wrapper handles height */
    position: relative;
    height: auto;
    /* Content dictates height */
}

/* Ensure Swirl container fits and pushes content down */
.scene-wrapper {
    position: relative;
    /* Takes up space in flow to push Dark Section down */
    width: 100%;
    height: 200vh;
    /* Reduced from 250vh to 200vh to pull Dark Section UP (~500px) */
    z-index: 50;
    /* Higher than Text (40) so it scrolls OVER it */
    pointer-events: auto;
}

/* SWIRL CSS FROM V3 */
.scene {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 3000px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 65vh;
    /* Reduced from 85vh to move Swirl UP (~200px) */
    /* Push swirl down */
    box-sizing: border-box;
    overflow: hidden;
    cursor: grab;
}

@media (max-width: 768px) {
    .scene {
        padding-top: 80vh;
        /* Push Swirl DOWN on mobile per user request */
    }
}

.scene:active {
    cursor: grabbing;
}

.swirl-container {
    position: relative;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

.card {
    position: absolute;
    transform-style: preserve-3d;
    background: transparent;
    transform-origin: center center;
    transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1s ease-out;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: #000;
}

.face-front {
    z-index: 2;
    transform: translateZ(0.5px);
    opacity: 1 !important;
}

.face-back {
    z-index: 1;
    transform: rotateY(180deg) translateZ(-0.5px);
    opacity: 1;
    /* Opaque per user request (was 0.5) */
}

/* Darken images on the back face */
.face-back img,
.face-back video {
    filter: brightness(0.4) contrast(1.2) !important;
    /* Darkened but visible */
}

.face img,
.face video {
    width: 101%;
    height: 101%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    filter: brightness(0.9) contrast(1.1);
    transform: scale(1);
    transition: transform 0.4s, filter 0.4s;
    background: #000;
}

.card:hover .face img,
.card:hover .face video {
    transform: scale(1.15);
    filter: brightness(1.1) contrast(1.1);
}

/* Added to move title up by 100px as requested */
/* Text stays at the top, overlaying the Swirl */
/* Text stays fixed at the top, Swirl scrolls over it */
.text-block {
    position: fixed;
    /* Fixed to viewport */
    top: 50px;
    /* Buffer from top */
    left: 0;
    width: 100%;
    z-index: 40;
    /* Lower than Swirl (50) */
    margin: 0;
    pointer-events: none;
    /* Let clicks pass to Swirl */
    color: #ffffff;
    /* FORCE WHITE COLOR per user request */
    /* Optional: adds cool interaction with Swirl? Or just keep white. User asked for white. */
}

/* Intro Text Initial State for Animation */
.text-block>* {
    opacity: 0;
    transform: translateY(20px);
}

.intro-subtitle {
    font-family: var(--main-text-fam);
    font-size: clamp(14px, 1.1vw, 18px);
    /* Increased min from 10px to 16px */
    /* Small text but readable */
    max-width: 900px;
    /* Limit width */
    margin: 40px auto 0 auto;
    /* Center with top spacing */
    text-transform: none;
    /* Sentence case as requested */
    line-height: 1.5;
    color: #e0e0e0;
    /* Almost white */
    font-weight: 500;
    letter-spacing: 0.02em;
}

.top-label {
    font-family: var(--main-text-fam);
    font-size: clamp(13px, 1.2vw, 16px);
    /* Increased min from 10px to 13px */
    /* Reduced -2pt (was 12-18) */
    font-style: italic;
    color: #e0e0e0;
    margin-bottom: 20px;
    /* Space between label and MAIN TITLE */
    letter-spacing: 0.05em;
    text-transform: none;
    opacity: 0.8;
}

/* Specific Subtitle overrides as requested */
.text-block h2 {
    margin-top: 20px;
    font-weight: 400;
    /* Regular weight */
}

.video-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* background-color: var(--main-black); Removed to prevent black bars */
    margin-top: 220px;
    /* 30px (top) + 140px (logo) + 50px (gap) */
    margin-bottom: 40px;
}

.video-wrapper video {
    width: 100%;
    object-fit: cover;
}

.dark-section {
    background-color: var(--bg-light);
    /* Updated background */
    color: var(--main-black);
    /* Inverted text color for contrast */
    padding-bottom: 15vh;
    /* Extra space to ensure bottom content is fully revealed */
    position: relative;
    z-index: 150;
    /* High Z-Index to cover Fixed Text and Swirl */
    margin-top: -120px;
    /* Adjusted from -220px to -120px to reveal +100px of Swirl as requested */
}

/* Dark Hero Container */
.dark-hero {
    /* Flex centered 100vh container */
    padding: 100px 0;
}

/* Sticky Corner Labels (Menu Bar) */
.sticky-corner-labels {
    position: sticky;
    top: 0;
    /* Anchored to viewport top */
    z-index: 300;
    /* High z-index to overlay content */
    background-color: var(--bg-light);
    /* Grey band background */
    padding: 0;
    /* Removed padding to maximize marquee size within fixed bar */
    margin-bottom: 0;
    /* Remove negative margin */
    border-bottom: 1px solid var(--main-black);
    /* Added line delimiter per user request */
    overflow: hidden;
    /* Removed mix-blend-mode to ensure visibility */
}

.corner-label {
    font-family: var(--main-text-fam);
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    color: var(--main-black);
}

/* MARQUEE ANIMATION */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    /* Removed mask-image for better visibility */
}

.marquee-track {
    display: flex;
    animation: scroll-left 60s linear infinite;
    will-change: transform;
    align-items: center;
    /* Center text vertically */
    white-space: nowrap;
}

.marquee-text {
    font-family: var(--main-text-fam);
    font-size: 18px;
    font-weight: 400;
    /* Regular Montreal */
    color: #000;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.marquee-text b {
    font-weight: 700;
    /* Bold Montreal */
    margin-right: 4px;
}



@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

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

/* --- Split Layout CSS --- */

.dark-split-layout {
    width: 100%;
}

/* TOP ROW */
.split-top {
    min-height: auto;
    /* Let content dictate height */
    align-items: stretch;
    /* FULL HEIGHT columns */
    margin-bottom: 20px;
}

.indented-text {
    font-family: var(--main-text-fam);
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.4;
    margin-top: 60px;
    /* Space from title */
    margin-bottom: 0;
    /* Fix for bottom alignment */
    margin-left: 50px;
    /* Requested Indentation */
    max-width: 800px;
}

.split-text-left {
    width: 45%;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.split-image-right {
    width: 45%;
    /* Keep smaller than 50% to allow gap */
    margin-left: auto;
    /* Push to right */
    position: relative;
    margin-right: 20px;
    margin-top: 0;

    /* 3D Context */
    perspective: 1000px;
    transform-style: preserve-3d;

    /* Layout Fix: Container defines the size */
    aspect-ratio: 3 / 4;
}

/* Ensure the slider fills the container */
/* --- Video Slider Strict Styles --- */
.video-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    border-radius: 4px;
}

.slide {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    background: #000;
}

.slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.slide video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    position: absolute;
    /* Triple check positioning */
    top: 0;
    top: 0;
    left: 0;
}

/* Indicators */
.slider-indicators {
    position: absolute;
    top: 50%;
    /* 8px separation from video */
    left: auto;
    right: 100%;
    margin-right: 8px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    /* Vertical stack */
    gap: 5px;
    /* Separated by 5px */
    z-index: 10;
    pointer-events: none;
}

.indicator-line {
    width: 3px;
    /* Vertical lines */
    height: 30px;
    /* Longer lines */
    background-color: #cccccc;
    /* Inactive: Light Grey */
    transition: all 0.3s ease;
    border-radius: 2px;
}

.indicator-line.active {
    background-color: #444444;
    /* Active: Dark Grey */
    height: 45px;
    /* Slightly longer */
    box-shadow: none;
}

/* Fix images/videos inside to just fill */
.split-image-right img,
.split-image-right video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    /* Transition for smooth return */
    transition: transform 0.1s ease-out, filter 0.3s;
    box-shadow: none;
}

/* Hover State for CSS-only fallback or enhancement */
.split-image-right:hover img,
.split-image-right:hover video {
    filter: brightness(1.1);
    /* Slight highlight like Swirl */
    /* Transform handled by JS for "Swirl-like" movement */
}

/* TEXT STYLES */
.split-text-left h3,
.split-bottom h3 {
    font-family: var(--main-title-fam);
    font-size: clamp(1.5rem, 5vw, 4.5rem);
    /* Reduced by ~5pt equivalent */
    line-height: 0.9;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

/* BOTTOM ROW */
.split-bottom {
    width: 45%;
    /* Desktop constraint per user request ("solo hasta la mitad") */
    /* Matches top-left width */
    margin-top: 50px;
}

/* Indented text override for this layout */
.split-bottom .indented-text {
    margin-top: 40px;
    margin-left: 50px;
    max-width: 800px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .split-top {
        flex-direction: column;
    }

    .split-text-left {
        width: 100%;
        margin-bottom: 40px;
        margin-top: -40px;
        /* Pull text up on mobile as requested */
    }

    .bottom-text-group {
        margin-top: 20px;
        /* Separate "Y NUNCA..." text */
    }

    .split-image-right {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }

    .split-bottom {
        width: 100%;
        /* Restore full width on mobile */
    }

    .split-bottom .indented-text {
        margin-left: 0;
        /* Reset indentation on mobile */
    }
}

/* Vertical Flow Layout */
.dark-vertical-flow {
    max-width: 45%;
    /* Desktop: Constrain to < 50% width */
    margin-right: auto;
    /* Push content to left */
}

.dark-vertical-flow h3 {
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0;
    font-weight: 700;
}

.indented-text {
    font-family: var(--main-text-fam);
    font-size: clamp(14px, 1.1vw, 18px);
    line-height: 1.4;
    margin-top: 10px;
    /* Space from title */
    margin-bottom: 0;
    margin-left: 50px;
    /* Requested Indentation */
    max-width: 800px;
}

/* responsive fix for indent */
@media (max-width: 768px) {
    .indented-text {
        margin-left: 20px;
        /* Smaller indent on mobile */
    }

    /* Mobile: Allow full width */
    .dark-vertical-flow {
        max-width: 100%;
    }
}

.col-left h3 {
    font-size: clamp(2rem, 6vw, 5rem);
    /* Increased to match .services-subtitle */
    line-height: 0.9;
    /* Tighter line height */
    text-transform: uppercase;
    margin: 0;
    font-weight: 700;
}

.col-right {
    font-family: var(--main-text-fam);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    line-height: 1.4;
}



/* --- Services (Inside Dark Section) --- */
.services-wrapper {
    background-color: transparent;
    color: var(--main-black);
}

.services-title {
    font-family: var(--main-title-fam);
    font-weight: 700;
    font-size: clamp(4.8rem, 12vw, 9.6rem);
    line-height: 0.8;
    text-align: right;
    margin: 0;
    text-transform: uppercase;
    color: var(--main-black);
}

.services-line {
    width: 100%;
    height: 1px;
    background-color: var(--main-black);
    margin-top: 10px;
}

.services-subtitle {
    font-family: var(--main-title-fam);
    font-weight: 700;
    font-size: clamp(2rem, 6vw, 5rem);
    line-height: 0.9;
    text-transform: uppercase;
    margin-top: 120px;
}

.services-tagline {
    font-family: var(--main-text-fam);
    font-weight: 400;
    /* Changed from 700 to 400 per user request */
    font-size: clamp(1.2rem, 2vw, 2rem);
    text-transform: none;
    /* Changed to none per user request */
    margin-top: 60px;
    max-width: 90%;
}

.services-list {
    font-family: var(--main-text-fam);
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    margin-top: 30px;
    padding-left: 20px;
    list-style-type: disc;
}

.services-list li {
    margin-bottom: 10px;
}

/* Wrapper heights */
#smooth-wrapper {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 50;
    /* Above Fixed Text (z-40) to ensure content covers text */
}

#smooth-content {
    overflow: visible;
    width: 100%;
}

/* Ensure line-wrappers force new lines */
.line-wrapper {
    /* display: block; REMOVED per user request to allow natural width-based wrapping */
    width: 100%;
}

/* Mobile Service Images */
.mobile-service-img {
    display: none;
}

@media (max-width: 900px) {
    .mobile-service-img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        margin-top: 20px;
        margin-bottom: 20px;
        object-fit: cover;
    }

    /* Force service descriptions to be visible on mobile - REMOVED per user request to start collapsed
    .service-desc {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 20px;
    } 
    */

    /* Unhide arrow on mobile */
    .arrow-icon {
        display: block !important;
    }
}

/* --- Typography Animation Utilities --- */
.split-parent {
    overflow: hidden;
    /* Ensure lines don't collapse */
    display: block;
}

.split-child {
    display: inline-block;

    /* Allows transform */
}

/* --- PRE-FOOTER CTA SECTION --- */
.pre-footer-cta {
    background-color: #ffffff;
    /* White background requested */
    color: #000000;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10vw 5vw;
    position: relative;
    z-index: 9999 !important;
    /* Stack above background elements and pinned scroll containers */
}

.cta-content {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 15vh;
}

.cta-headline {
    font-family: var(--main-title-fam);
    font-size: clamp(3rem, 6.5vw, 8rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin: 0;
    max-width: 95%;
    text-transform: uppercase;
}

.cta-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.cta-input-group {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #000;
    /* Minimalist underline */
    padding-bottom: 10px;
    margin-bottom: 20px;
    width: 100%;
}

.cta-email-input {
    flex-grow: 1;
    background: transparent;
    border: none;
    font-family: var(--main-title-fam);
    font-size: clamp(2rem, 5vw, 6rem);
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    outline: none;
    padding: 0;
}

.cta-email-input::placeholder {
    color: rgba(0, 0, 0, 0.2);
}

.cta-submit-btn {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50px;
    /* Pill shape */
    padding: 1vw 3vw;
    font-family: var(--main-text-fam);
    font-size: clamp(14px, 1.2vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    white-space: nowrap;
    margin-left: 20px;
}

.cta-submit-btn:hover {
    background-color: #333;
    transform: scale(1.05);
}

.cta-legal {
    font-family: var(--main-text-fam);
    font-size: clamp(12px, 1vw, 14px);
    color: #000;
    margin: 0;
}

.cta-legal a {
    text-decoration: underline;
    color: #000;
}

@media (max-width: 768px) {
    .pre-footer-cta {
        padding: 40px 20px;
        min-height: 60vh;
    }

    .cta-content {
        gap: 8vh;
    }

    .cta-email-input {
        font-size: 2.5rem;
    }

    .cta-submit-btn {
        padding: 15px 25px;
    }
}


/* --- NEW STUDIO FOOTER --- */
.studio-footer {
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3vw 4%;
    min-height: 40vh;
    /* Increased slightly for better spacing */
    width: 100%;
    position: relative;
    z-index: 10;
    overflow: hidden;
    /* Prevent parallax bleed */
}

/* TOP SOCIALS SECTION */
.footer-top-socials {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: auto;
}

.highlight-social-large {
    color: #ffffff;
    font-family: var(--main-text-fam);
    font-size: clamp(28px, 4vw, 50px);
    /* Enlarged as requested */
    font-weight: 900;
    text-decoration: underline !important;
    text-underline-offset: 6px;
    transition: opacity 0.3s;
}

.highlight-social-large:hover {
    opacity: 0.7;
}

/* MIDDLE LOGO SECTION */
.footer-logo-container {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
}

.footer-logo {
    font-size: clamp(1rem, 5.5vw, 6rem);
    /* Reduced cap from 15rem (giant) to 6rem */
    color: #ffffff;
    line-height: 0.8;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    display: block;
}

/* BOTTOM SECTION (Socials + Copyright) */
.footer-bottom-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border: none !important;
    /* Force no border line */
    color: #fff;
    font-family: var(--main-text-fam);
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 700;
}

.footer-mailto-link {
    text-decoration: none !important;
    border: none !important;
}

/* MOBILE ADJUSTMENTS FOR NEW FOOTER */
@media (max-width: 768px) {
    .studio-footer {
        padding: 5vw;
    }

    .footer-row {
        flex-direction: column;
        gap: 20px;
        padding-bottom: 30px;
    }

    .footer-col-title,
    .footer-col-links {
        width: 100%;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-top: 10px;
    }
}

/* --- Migrated from Inline Styles --- */

/* Mouse Follow */
.cursor-image-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 400px;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    mix-blend-mode: normal;
    border-radius: 8px;
    overflow: hidden;
}

.cursor-image-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.cursor-img,
.cursor-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.8);
    display: block;
}

/* Services Section Layout & Accordion */
.services-list-detailed .service-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 30px 0;
}

.service-item .service-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.service-item.active .service-desc {
    max-height: 300px;
    opacity: 1;
}

.service-item h4 {
    opacity: 0.5;
    transition: opacity 0.3s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align to left */
    cursor: pointer;
}

.service-item:hover h4,
.service-item.active h4 {
    opacity: 1;
}

.service-item .arrow-icon {
    opacity: 0.5;
    transition: transform 0.3s ease, opacity 0.3s;
    flex-shrink: 0;
    order: -1;
    /* Move to Left */
    margin-right: 40px;
    /* 40px separation */
    width: 48px;
    /* Double size */
    height: 48px;
}

/* Make arrow outlined instead of filled */
.service-item .arrow-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.service-item:hover .arrow-icon,
.service-item.active .arrow-icon {
    opacity: 1;
}

.service-item.active .arrow-icon {
    transform: rotate(180deg);
}

@media (min-width: 768px) {

    .services-content {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .services-content>.services-subtitle,
    .services-content>.services-tagline,
    .services-content>.indented-text {
        max-width: 50%;
        padding-right: 40px;
        box-sizing: border-box;
    }

    .services-list-detailed {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        box-sizing: border-box;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .services-list-detailed .service-item {
        width: 100%;
        padding-left: calc(50% + 40px);
        box-sizing: border-box;
        position: relative;
    }

    .service-item .arrow-icon {
        position: absolute;
        /* Position relative to screen center (50vw).
           Move left by 50vw to hit screen edge, then add 10px margin. */
        left: calc(-50vw + 10px);
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        margin: 0;
        order: unset;
        opacity: 0.5;
        transition: transform 0.3s ease, opacity 0.3s;
    }

    .services-list-detailed .service-item h4,
    .services-list-detailed .service-item .service-desc {
        max-width: 100%;
    }

    .service-item.active .arrow-icon {
        transform: translateY(-50%) rotate(180deg);
    }
}

@media (max-width: 768px) {
    .services-content {
        margin: 0;
        width: 100%;
        padding: 0;
    }

    .services-content>.services-subtitle,
    .services-content>.services-tagline,
    .services-content>.indented-text,
    .services-list-detailed,
    .services-list-detailed .service-item h4,
    .services-list-detailed .service-item .service-desc {
        max-width: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
}

/* --- INTRO SECTION VIDEO REFINEMENT --- */
.split-image-right {
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    /* Optional: If it had a drop shadow or background color, this nullifies the corners */
}

.split-image-right .video-slider,
.split-image-right .slide {
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
}

.split-image-right video {
    border-radius: 20px;
    /* Cantos romos solicitados */
    overflow: hidden;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Elimina letterboxing (bandas negras del propio mp4) */
    display: block;
}

/* 3D VIDEO CUBE & MANIFESTO LAYOUT */
.manifesto-section {
    width: 100%;
    max-width: 100%;
    margin: 200px auto 100px auto;
    /* Reduced from 800px per user request "mas arriba" */
    padding: 0 20px;
    box-sizing: border-box;
    min-height: 100vh;
    /* Ensure full height for pinning */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
}


/* --- SWIRL IMAGE STYLES (User Request) --- */
#swirl .card .face img,
#swirl .card .face video {
    filter: brightness(80%);
    /* 20% darkening */
    transition: filter 0.3s ease;
    /* Smooth return to dark when leaving */
    /* Ensure existing transforms (zoom) are not affected by this filter */
}

@media (max-width: 768px) {

    #swirl .card .face img,
    #swirl .card .face video {
        filter: none !important;
        /* Disable expensive filter on mobile for performance */
    }
}

/* Instant restore on hover */
#swirl .card:hover .face img,
#swirl .card:hover .face video {
    filter: brightness(100%);
    transition: filter 0s;
    /* Disappear INSTANTLY */
}

/* Extend intro height to allow Swirl to descend below text */
/* Extend intro height to allow Swirl to descend below text */
.intro-section {
    min-height: 120vh !important;
    background: transparent !important;
    /* Make intro transparent so text (Z:40) shows through Wrapper (Z:50) */
}

/* Ensure Wrapper is ABOVE text, but let text show through transparent intro */
#smooth-wrapper {
    z-index: 50 !important;
}

/* Body uses original #011119 from line 48 */

.manifesto-section {
    background-color: var(--bg-dark);
    position: relative;
    z-index: 100;
    /* Must be higher than the intro text (40) but lower than pre-footer (9999) */
    width: 100%;
}

.manifesto-header {
    text-align: center;
    margin-bottom: 80px;
}

.manifesto-content-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 8vh;
}

.pixel-column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pixel-wrapper {
    width: 80%;
    /* 20% smaller */
    max-width: 384px;
    aspect-ratio: 2 / 3;
    position: relative;
    overflow: hidden;
    /* Changed to hidden to prevent pixel spill */
    background: transparent;
    margin: 0 auto;
    /* Centered */
}

@media (min-width: 1025px) {
    .manifesto-content-row {
        flex-direction: row;
        /* Split 2 columns */
        justify-content: space-between;
        align-items: flex-start;
    }

    .pixel-column {
        width: 45%;
        justify-content: center;
        /* Center horizontally */
    }

    .pixel-wrapper {
        max-width: none;
        width: 80%;
        /* 20% smaller */
        max-height: 80vh;
        margin: 0 auto;
        /* Centered within column */
    }

    .text-column {
        width: 50%;
        position: relative;
        z-index: 2;
        margin: 0;
        text-align: left;
        /* Left align text */
    }
}

#pixel-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.text-column {
    text-align: center;
    /* Mobile default */
    max-width: 700px;
    margin: 0 auto;
}

/* --- New Manifesto Text Slider Styles --- */
.manifesto-text-slider {
    position: relative;
    width: 100%;
    min-height: 350px;
    /* Increased from 250px to prevent text overflowing column */
    display: flex;
    align-items: center;
}

.manifesto-text-slide {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    opacity: 0;
}

.manifesto-text-slide.active-slide {
    opacity: 1;
}

/* Make text 3-points larger as requested, plus top/bottom borders */
.manifesto-text-slide p {
    font-size: clamp(21px, 1.8vw, 30px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* Fina linea blanca */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 20px 0;
    /* 20px de separación */
}

.text-column p {
    margin-bottom: 30px;
}

@media (min-width: 1025px) {
    .text-column {
        text-align: left;
    }

    .text-column p {
        text-align: left;
    }
}

/* Specific precise typography per user request */
.manifesto-lead-text {
    font-family: var(--main-text-fam);
    font-weight: 700;
    font-size: clamp(16px, 1.3vw, 22px);
    /* Slightly larger than body text */
    line-height: 1.4;
}

.manifesto-body-text {
    font-family: var(--main-text-fam);
    font-weight: 400;
    font-size: clamp(14px, 1.1vw, 18px);
    /* Matches reference exactly */
    line-height: 1.4;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (max-width: 1024px) {
    .manifesto-section {
        margin-top: 150px;
        margin-bottom: 50px;
        padding: 0 20px;
    }

    .manifesto-header h1.full-impact-text {
        font-size: clamp(2rem, 8vw, 4rem) !important;
        line-height: 1.1 !important;
    }

    .manifesto-content-row {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .manifesto-header {
        margin-bottom: 40px !important;
    }

    .text-column {
        width: 100%;
        max-width: 600px;
        text-align: center;
        margin: 0 auto;
    }

    .manifesto-text-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        left: 0;
    }

    .manifesto-text-slide p {
        text-align: center !important;
        width: 100%;
    }

    .pixel-column {
        width: 100%;
    }
}

/* --- Migrated Utility Classes (from inline styles) --- */
.sticky-gutter {
    overflow: hidden;
}

.corner-label.left {
    flex: 1;
    overflow: hidden;
    height: 45px;
    position: relative;
    width: 100%;
}

.corner-label.right {
    right: 20px;
    padding-right: 0;
}

/* MANIFESTO ANIMATION STATES */
.manifesto-line {
    opacity: 0;
    transform: translateY(30px);
    display: inline-block;
    /* Ensure transform works */
}

.manifesto-content-row {
    opacity: 0;
    transform: translateY(50px);
    display: flex;
    /* Ensure it's a flexbox (it was applied elsewhere globally, but just in case) */
    align-items: center;
    /* Vertically center the text to the image */
}

.marquee-container {
    display: flex;
    height: 100%;
    align-items: center;
}

.hero-indented-text {
    margin-left: 0;
    margin-top: 20px;
}

.services-wrapper.light-theme {
    background-color: var(--bg-light);
}

/* --- Added Classes for Consulting Section (Moved from inline logic) --- */
.consulting-title {
    margin-top: 0;
    text-transform: uppercase;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: -0.02em;
}

.consulting-tagline {
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 20px;
}

.manifesto-text-override {
    font-weight: 700;
}

.services-wrapper.consulting-theme {
    padding-top: 150px;
    padding-bottom: 150px;
    flex-direction: column;
}

.services-section-title {
    text-align: center;
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 700;
    font-size: 19px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 20px;
}

.services-divider {
    width: 100%;
    height: 1px;
    background-color: #000;
    margin-bottom: 60px;
}

.services-inner-split {
    display: block;
    width: 100%;
}

.services-content-override {
    padding-left: 0;
    text-align: left;
    max-width: 100%;
}

.services-big-subtitle {
    margin-top: 0;
    text-transform: uppercase;
    font-size: clamp(3.5rem, 10vw, 8rem);
    letter-spacing: -0.02em;
}

.services-intro-tagline {
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 20px;
}

.services-intro-desc {
    margin-left: 0;
    margin-bottom: 60px;
}

.services-list-container {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.service-item-title {
    margin: 0;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-item-desc-text {
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 0;
}

.cube-face-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.manifesto-impact-title {
    line-height: 0.9;
}

.manifesto-line {
    display: block;
}

.manifesto-lead-text {
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
}

.footer-email-link {
    display: inline-block;
    margin-top: 30px;
    font-size: 20px;
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
    color: #fff;
}

.footer-simple {
    margin-top: 5vh;
    text-align: center;
    padding-bottom: 5vh;
}