:root {
    --bg: #000;
    --card-surface: #1a1a1a;
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.5);
    --accent: #8A2BE2;
    /* Default */
    --font-heading: 'Syne', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-alt: 'Montserrat', sans-serif;
    --font-mono: 'Space Mono', monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
    /* Strictly force no default cursor everywhere */
}

a,
button,
[role="button"] {
    cursor: none !important;
    /* Force no cursors on interactive elements */
}

body {
    background-color: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Preloader */
body.preloading {
    overflow: hidden;
    /* Stop scrolling during preload */
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Let GSAP handle transitions to avoid conflicts */
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-panels {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 0;
}

.preloader-panel {
    flex: 1;
    height: 100%;
    background-color: #080808;
    /* Ultra-deep sleek off-black for Kode feel */
    will-change: transform;
}

.loader-inner {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 500px;
    padding: 0 40px;
    text-align: center;
}

.loader-logo {
    width: 160px;
    height: auto;
    margin-bottom: 50px;
    opacity: 0;
    /* Hidden initially for GSAP */
    animation: loaderBreathe 4s ease-in-out infinite;
}

@keyframes loaderBreathe {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.04);
        opacity: 1;
    }
}

.loader-corner-info {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    z-index: 10;
    opacity: 0;
    /* Hidden initially for GSAP */
}

#loader-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* Stay ABOVE .preloader-panels which are z-index 0 */
    opacity: 1;
}

.loader-corner-info.tl {
    top: 40px;
    left: 80px;
}

.loader-corner-info.tr {
    top: 40px;
    right: 80px;
}

.loader-corner-info.bl {
    bottom: 40px;
    left: 80px;
}

.loader-corner-info.br {
    bottom: 40px;
    right: 80px;
}

/* Clean, premium background without aggressive scanlines */
.loader-bg-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle at center, rgba(20, 20, 20, 0) 0%, #000 100%);
}

#enter-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.70rem;
    /* Slightly smaller to fit Better */
    letter-spacing: 0.45em;
    /* Reduced from 0.6em */
    padding: 18px 45px;
    text-transform: uppercase;
    white-space: nowrap;
    /* Force single line */
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: none !important;
}

#enter-btn:hover {
    background: white;
    color: black;
    border-color: white;
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.1);
}

/* Custom Inerital Cursor */
#custom-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000000;
    /* Increased to be above preloader (999999) */
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s ease;
    transform: translate(-50%, -50%);
}

#custom-cursor.active {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0.5;
}


#custom-cursor.text-input-active {
    width: 2px !important;
    height: 24px !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 0.9 !important;
}

/* Animated Organic Waves */
#hero-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Below content (z-index: 2), above red background */
    pointer-events: none;
    opacity: 0.4;
    /* Increased opacity so waves are much more visible */
}

/* Minimalist Header – Premium Liquid Glass (iOS 26 inspired) */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 30px 40px;
    /* Aligned with WhatsApp left margin (40px) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: transparent;
    border-bottom: 0.5px solid transparent;
    backdrop-filter: blur(0px) saturate(100%);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

header.scrolled {
    padding: 30px 40px;
}

header.footer-glass {
    padding: 30px 40px;
    background: rgba(10, 10, 10, 0.25);
    backdrop-filter: blur(12px) saturate(220%) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(220%) brightness(1.1);
    border-bottom: none !important;
    /* Absolute clean transition */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* Disable liquid glass effect when hamburger menu is open */
header.menu-open.footer-glass {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

header.footer-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

.header-left,
.header-center,
.header-right {
    display: flex;
    align-items: center;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#header-logo {
    height: 52px;
    width: auto;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.menu-open .header-center {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



.header-right {
    min-width: 60px;
    /* Balance against hamburger width */
    justify-content: flex-end;
}

.logo img {
    height: 75px;
    width: auto;
    transition: opacity 0.3s ease;
}

.logo:hover img {
    opacity: 0.8;
}

.header-right {
    gap: 20px;
}

/* Hamburger Button */
.hamburger-menu {
    position: relative;
    width: 28px;
    height: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1001;
}

.hamburger-menu .bar {
    width: 100%;
    height: 2px;
    background-color: var(--text-primary);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
    transform-origin: center;
}

/* We removed the 3rd bar in html, update active logic */
.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
    transform: translateY(-5px) rotate(-45deg);
}

/* Fullscreen Menu */
.fullscreen-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #CC1F1A;
    /* Same Vibrant Vanguard Red as the loader and hero */
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s ease;
}

.fullscreen-menu-content {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1400px;
    align-items: center;
    /* Centered layout feels more premium */
}

.fullscreen-menu-left {
    flex: 1.2;
}

.fullscreen-menu-right {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fullscreen-menu.active .fullscreen-menu-right {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.menu-right-col h4,
.menu-right-col label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 25px;
    color: #ffffff;
    text-transform: uppercase;
    text-align: right;
    display: block;
}

.menu-right-col ul {
    list-style: none;
    text-align: right;
}

.menu-right-col ul li {
    margin-bottom: 12px;
}

.menu-right-col a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: 400;
    transition: opacity 0.3s;
}

.menu-right-col a:hover {
    opacity: 0.5;
}

.menu-subscribe {
    max-width: 350px;
    width: 100%;
}

.fullscreen-menu.active {
    opacity: 1;
    pointer-events: all;
}

.fullscreen-menu-links {
    list-style: none;
    text-align: left;
    /* Align text to the left */
    padding: 0;
}

.fullscreen-menu-links li {
    margin: 5px 0;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

.fullscreen-menu.active .fullscreen-menu-links li {
    transform: translateY(0);
    opacity: 1;
}

/* Staggered animation */
.fullscreen-menu.active .fullscreen-menu-links li:nth-child(1) {
    transition-delay: 0.1s;
}

.fullscreen-menu.active .fullscreen-menu-links li:nth-child(2) {
    transition-delay: 0.2s;
}

.fullscreen-menu.active .fullscreen-menu-links li:nth-child(3) {
    transition-delay: 0.3s;
}

.fullscreen-menu.active .fullscreen-menu-links li:nth-child(4) {
    transition-delay: 0.4s;
}

.fullscreen-menu.active .fullscreen-menu-links li:nth-child(5) {
    transition-delay: 0.5s;
}

.fullscreen-menu.active .fullscreen-menu-links li:nth-child(6) {
    transition-delay: 0.6s;
}

.menu-link {
    font-family: var(--font-heading);
    color: #ffffff;
    /* Forced white text */
    text-decoration: none;
    font-size: 2.2rem;
    /* Reduced for a more elegant, gallery-like feel */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    transition: color 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    display: inline-block;
}

.menu-link:hover {
    color: var(--bg);
    /* Black background color on hover */
    transform: translateX(10px);
    /* Reduced slide on hover */
    opacity: 1;
}

/* Hero Section */
main {
    padding-top: 0;
}

.red-hero {
    background-color: #CC1F1A;
    /* Vibrant Vanguard Red mapping to Artist */
    height: 100vh;
    width: 100vw;
    position: relative;
    padding: 0 10%;
    display: flex;
    align-items: center;
    overflow: hidden;
    will-change: opacity;
    z-index: 5;
}

.hero-content,
.hero-play,
.social-sidebar,
#hero-waves {
    will-change: opacity, transform;
}

/* Removed watermark text */

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: left;
}

.hero-tag {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-bottom: 30px;
    display: block;
    color: rgba(255, 255, 255, 0.8);
}

.scene-navigation .current {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    margin-right: -4px;
}

.red-hero h1 {
    font-family: var(--font-heading);
    font-size: 5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
    color: white;
}

.dynamic-word-wrap {
    position: relative;
    display: inline-block;
    vertical-align: top;
    /* Align with top of line */
}

.dynamic-word {
    display: inline-block;
    color: white;
    white-space: nowrap;
    /* Force 1 exact line to prevent splitting "el entretenimiento" */
    font-weight: 800;
}

.dynamic-word.dummy {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.dynamic-word.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    will-change: transform, opacity;
}

.hero-link {
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s;
}

.hero-link:hover {
    opacity: 0.7;
}

.hero-play {
    position: absolute;
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.play-btn {
    width: 70px;
    height: 70px;
    background: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    cursor: none !important;
    /* Strictly no hand pointer */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.play-btn:hover {
    transform: scale(1.1);
}

/* Sidebar Social fixed at right - Centered vertically parallel with play button */
.social-sidebar {
    position: absolute;
    right: 55px;
    /* Moved back slightly left from original 40px */
    top: 50%;
    transform: translateY(-56%);
    /* Lifted up perfectly to center visually with play button despite long vertical text */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 2;
}

.social-sidebar a {
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: opacity 0.3s;
}

.social-sidebar a:hover {
    opacity: 0.5;
}

.social-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
}

.social-sidebar .social-text {
    writing-mode: vertical-lr;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--text-muted);
}

/* Floating widgets */
.floating-btn {
    position: absolute;
    bottom: 40px;
    width: 55px;
    height: 55px;
    background: #111;
    /* Or pure black */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
}

.floating-btn:hover {
    transform: scale(1.1);
}

.floating-btn img {
    width: 28px;
    filter: invert(1);
}

.floating-btn.whatsapp {
    left: 40px;
}

.floating-btn.chat {
    right: 40px;
}

/* --- Immersive Dependency Sections --- */
#dependency-immersive-wrap {
    position: relative;
    height: 100vh;
    /* Fixed: container needs height to show absolute children */
    background-color: #000;
    overflow: hidden;
}

.dependency-scene {
    position: absolute;
    /* Fixed: MUST be absolute for stacking transitions */
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.dependency-ui {
    display: none !important;
}

body.footer-active .dependency-ui {
    display: none !important;
}

.dependency-ui.visible {
    opacity: 1;
    visibility: visible;
}

.scene-number {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    /* Now dynamic */
    letter-spacing: -0.02em;
    transition: color 0.4s ease;
    text-align: right;
}

.scene-indicator .num {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
}

#current-scene {
    color: var(--text-muted);
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.scroll-indicator .line {
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
}

.scroll-indicator .dots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dot {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: background 0.3s, transform 0.3s;
}

.dot.active {
    background: white;
    transform: scale(1.5);
}

.scene-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.scene-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.dependency-scene.active .scene-bg img {
    opacity: 0.5;
    filter: grayscale(0%);
}

.ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    height: 60vh;
    background: var(--glow);
    filter: blur(150px);
    opacity: 0.15;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
}

.scene-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    padding: 0 40px;
}

.scene-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.35em;
    margin-bottom: 25px;
    color: var(--accent);
    /* Dynamic color inherited or set individually */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

.dependency-scene[id="scene-academy"] .scene-tag {
    color: #8E24AA;
}

.dependency-scene[id="scene-editorial"] .scene-tag {
    color: #039BE5;
}

.dependency-scene[id="scene-production"] .scene-tag {
    color: #FFB300;
}

.dependency-scene[id="scene-digital"] .scene-tag {
    color: #43A047;
}

.dependency-scene[id="scene-artist"] .scene-tag {
    color: #E53935;
}

.dependency-scene h2 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 10vw, 7.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: 30px;
    color: white;
}

.dependency-scene p {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Animations for scene content reveal */
.scene-content h2,
.scene-content p,
.scene-content .scene-tag {
    opacity: 0;
    transform: translateY(30px);
}


/* --- New Premium Footer --- */
#main-footer {
    position: relative;
    z-index: 100;
    padding: 120px 8% 40px;
    background-color: #000;
    border-top: none;
    /* Seamless transition */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-logo-wrap {
    text-align: center;
    margin: 40px auto 20px;
    padding-top: 30px;
    border-top: none;
    max-width: 1400px;
}

.footer-logo-text {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 8vw, 9.5rem);
    line-height: 0.9;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    margin: 20px 0 10px;
    text-transform: uppercase;
    display: block;
    width: 100%;
}

.footer-tagline {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.45em;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: uppercase;
    opacity: 0.8;
}

.footer-copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
}

.footer-copyright p {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.footer-subscribe {
    max-width: 350px;
    width: 100%;
}

.footer-subscribe label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    font-weight: 400;
    margin-bottom: 10px;
    color: white;
    text-align: right;
}

.subscribe-box {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 8px;
}

.subscribe-box .bracket {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.subscribe-box input {
    background: transparent;
    border: none;
    color: white;
    font-family: var(--font-body);
    font-size: 0.85rem;
    width: 100%;
    outline: none;
}

.subscribe-box input::placeholder {
    color: #ffffff;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.subscribe-box input:focus::placeholder {
    opacity: 0;
}

.subscribe-box button {
    background: transparent;
    border: none;
    color: white;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    cursor: none !important;
    transition: color 0.4s ease, opacity 0.3s, transform 0.4s ease;
}

.subscribe-box button:hover {
    opacity: 0.6;
}

/* Hover special color for the menu button (turns black on red background) */
.fullscreen-menu .subscribe-box button:hover {
    color: var(--bg);
    opacity: 1;
}

.newsletter-msg {
    transition: opacity 0.3s ease;
}

.newsletter-msg.success {
    color: #43A047;
    /* Vanguard Digital Green / Success */
    font-weight: 600;
}

.newsletter-msg.error {
    color: #E53935;
    /* Vanguard Artist Red / Error */
    font-weight: 600;
}

/* Specific colors for messages inside the red hamburger menu */
.fullscreen-menu .newsletter-msg.success {
    color: #ffffff;
    /* White Success on Red background */
}

.fullscreen-menu .newsletter-msg.error {
    color: #000000;
    /* Pure Black for contrast on Red background */
    font-weight: 800;
}

.subscribe-box .status-success {
    color: #43A047;
    font-weight: 800;
}

.fullscreen-menu .subscribe-box .status-success {
    color: #ffffff;
}

/* Standard footer bottom spacing */
.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-col h4 {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    margin-bottom: 25px;
    color: var(--text-muted);
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: 400;
    transition: opacity 0.3s;
}

.footer-col a:hover {
    opacity: 0.5;
}

/* --- Intro Sequence Animations --- */
header,
.hero-content .hero-tag,
.hero-content h1,
.hero-content .hero-link,
.hero-play,
.social-sidebar {
    opacity: 0;
    /* Hidden before load sequence */
}

body.loaded header {
    animation: fadeInHeader 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
}

body.loaded .hero-content .hero-tag {
    animation: slideRightText 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

body.loaded .hero-content h1 {
    animation: slideRightText 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.3s;
}

body.loaded .hero-content .hero-link {
    animation: slideRightText 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
}

body.loaded .hero-play {
    animation: puddleReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.5s;
    /* Drops like water puddle */
}

body.loaded .social-sidebar {
    animation: fadeInHeader 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.55s;
}

@keyframes dropRedHero {
    0% {
        transform: translateY(-100%);
        filter: blur(20px);
        opacity: 0;
    }

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

@keyframes fadeInHeader {
    0% {
        transform: translateY(-20px);
        opacity: 0;
        filter: blur(5px);
    }

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

@keyframes slideRightText {
    0% {
        transform: translateX(-50px);
        filter: blur(10px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes puddleReveal {
    0% {
        transform: translateY(-50%) scale(0);
        opacity: 0;
        filter: blur(10px);
    }

    50% {
        transform: translateY(-50%) scale(1.1);
        opacity: 1;
        filter: blur(0);
    }

    100% {
        transform: translateY(-50%) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

/* ----- YouTube Video Modal ----- */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10000;
    /* Above everything */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.modal-content {
    position: relative;
    width: 80%;
    max-width: 1100px;
    transform: scale(0.8);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal.show .modal-content {
    transform: scale(1);
    /* Pop-in animation */
}

/* Close Buttn */
.close-modal {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 44px;
    font-weight: 300;
    line-height: 1;
    cursor: none !important;
    transform-origin: center;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


.close-modal:hover {
    color: #cc1f1a;
    transform: rotate(90deg) scale(1.1);
}



/* Responsive iFrame Wrapper (16:9 Aspect Ratio) */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    background: #000;
    /* Since iframes capture pointer events causing the system cursor to show,
       we disable pointer events on the wrapper or iframe if we just want it to play,
       but we need controls. Best practice: let the OS cursor show ONLY inside the iframe naturally,
       while the rest of the modal has no cursor, but we'll wrap it in a custom state. */
}

/* Optional: Add an overlay IF you only want auto-play and no youtube clicks,
   but since users want to pause/play, we must allow pointer-events on iframe */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    /* Do NOT set cursor: none here, the internal youtube document has its own */
}



/* Responsive Overrides */
@media (max-width: 1024px) {
    .red-hero h1 {
        font-size: 4.5rem;
    }

    .card {
        height: 500px;
        padding: 50px 40px;
    }

    .card h2 {
        font-size: 3.5rem;
    }

    .desktop-nav {
        display: none;
    }

    /* Hide extra nav links on tablet */
}

@media (max-width: 768px) {

    /* Preloader Mobile Tweaks */
    .loader-logo {
        width: 140px;
    }

    #enter-btn {
        padding: 12px 20px;
        font-size: 0.8rem;
    }

    .loader-corner-info {
        display: none;
    }

    /* Hide extra stats so they don't block interaction on small screens */

    /* Hero Text Mobile */
    /* Ensure dynamic word fits perfectly on mobile like iPhone (390px) */
    .red-hero h1 {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .hero-play {
        display: none;
    }

    /* Simplify on mobile */
    .bg-watermark {
        font-size: 50vw;
    }

    #bridge-grid {
        grid-template-columns: 1fr;
        padding: 0 5%;
    }

    .card h2 {
        font-size: 3rem;
    }

    .card {
        border-radius: 30px;
    }

    /* Dependency Scene Typographic Scaling */
    .dependency-scene h2 {
        font-size: clamp(2.5rem, 10vw, 4rem);
    }

    .dependency-scene p {
        font-size: 1rem;
        padding: 0 15px;
    }

    .slogan {
        font-size: 2rem;
    }

    /* Header & Menu Formats */
    header {
        padding: 15px 20px;
    }

    header.scrolled {
        padding: 10px 20px;
    }

    .logo img {
        height: 30px;
    }

    .fullscreen-menu {
        padding-left: 0;
    }

    .fullscreen-menu-content {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 40px;
        width: 85%;
    }

    .fullscreen-menu-right {
        align-items: flex-start;
        gap: 30px;
    }

    .menu-right-col h4,
    .menu-right-col label,
    .menu-right-col ul {
        text-align: left;
    }

    .menu-link {
        font-size: 2.5rem;
    }

    .social-sidebar,
    #scroll-siguenos {
        display: none;
    }

    .cart-info {
        display: none;
    }

    .btn-contacto {
        display: none;
    }
}

/* Touch Devices (Phones, Tablets) Override - Disable Custom Cursor because there is no 'hover' state */
@media (hover: none) and (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }

    body,
    a,
    button,
    .play-btn,
    .menu-link,
    .floating-btn {
        cursor: auto !important;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #ffffff;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    cursor: pointer;
    /* Mandatory now that we use it as a trigger div */
}

body.whatsapp-visible .whatsapp-float,
body.menu-open .whatsapp-float {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.whatsapp-float:hover {
    transform: scale(1.1) translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.whatsapp-float:hover img {
    transform: rotate(8deg) scale(1.05);
    /* Invite to click animation */
    filter: brightness(0);
}

.whatsapp-float img {
    width: 32px;
    height: 32px;
    filter: brightness(0);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WhatsApp Chat Bubble Tooltip (Borderless Solid White Design) */
.whatsapp-tooltip {
    position: absolute;
    bottom: 85px;
    left: 20px;
    background: #FFFFFF;
    /* COLOR BLANCO puro, como solicitado */
    color: #000000;
    padding: 12px 20px;
    border-radius: 18px 18px 18px 0;
    /* Forma de burbuja */
    font-size: 0.95rem;
    /* Ligeramente más grande según la imagen */
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    /* Peso normal/medio */
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    /* Sombra suave para dar relieve SIN usar bordes */
    z-index: 1001;
    border: none;
    /* SIN BORDES */
}

/* Chat Bubble Tail (Solid White, No Borders) */
.whatsapp-tooltip::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -14px;
    /* Un píxel extra para que encaje perfectamente y no quede línea divisoria */
    width: 15px;
    height: 18px;
    background: #FFFFFF;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    /* Triángulo apuntando abajo a la izquierda */
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

@media (max-width: 768px) {

    header,
    header.scrolled,
    header.footer-glass {
        padding: 20px 20px;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }

    .whatsapp-float img {
        width: 30px;
        height: 30px;
    }
}


.whatsapp-float img {
    width: 35px;
    height: 35px;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        left: 20px;
    }

    .whatsapp-float img {
        width: 30px;
        height: 30px;
    }
}