/* =================================================================
   _TOKENS.CSS - Sistema de Variables Centralizado
   ================================================================= */

:root {
   /* =========================================
       COLORES DE MARCA
       ========================================= */
   --bunker-blanco: #F6F6F6;
   --bunker-negro: #121212;
   --bunker-beige: #E8E1D0;
   --bunker-oliva: #9AB17C;
   --bunker-lavanda: #ADADD6;
   --bunker-carbon: #1A1A1A;

   /* Aliases semánticos */
   --bg-body: var(--bunker-blanco);
   --text-main: var(--bunker-negro);
   --color-accent: var(--bunker-lavanda);

   /* =========================================
       GRISES SEMÁNTICOS
       ========================================= */
   --text-primary: #121212;
   --text-secondary: #4a4a4a;
   /* Darkened from #555555 for better contrast */
   --text-muted: #717171;
   /* Darkened from #888888 for better contrast */
   --text-disabled: #999999;
   /* Darkened from #AAAAAA */

   /* Bordes */
   --border-light: rgba(18, 18, 18, 0.45);
   --border-medium: rgba(18, 18, 18, 0.15);
   --border-strong: rgba(18, 18, 18, 0.25);

   /* Sobre fondos oscuros */
   --text-on-dark: #FFFFFF;
   --text-secondary-on-dark: rgba(255, 255, 255, 0.85);
   /* Increased from 0.7 for better contrast */
   --text-muted-on-dark: rgba(255, 255, 255, 0.7);
   /* Increased from 0.5 */
   --border-on-dark: rgba(255, 255, 255, 0.15);
   --border-medium-on-dark: rgba(255, 255, 255, 0.3);

   /* Colores de Gráficos/Métricas */
   --chart-success: #10B981;
   --chart-error: #EF4444;
   --chart-neutral: #6B7280;

   /* =========================================
       TIPOGRAFÍA
       ========================================= */
   --font-family: 'Manrope', sans-serif;

   /* Escala tipográfica fluida */
   --text-hero: clamp(3rem, 8vw, 9rem);
   --text-display: clamp(2rem, 5vw, 3.75rem);
   --text-h1: clamp(2.5rem, 5vw, 4.5rem);
   --text-h2: clamp(1.75rem, 4vw, 3rem);
   --text-h3: clamp(1.5rem, 3vw, 2rem);
   --text-body-lg: 1.25rem;
   /* Increased from 1.125rem for better readability */
   --text-body: 1.0625rem;
   /* Increased from 1rem (17px) */
   --text-small: 0.9375rem;
   /* Increased from 0.875rem (15px) */
   --text-caption: 0.8125rem;
   /* Increased from 0.75rem (13px) */
   --text-micro: 0.6875rem;
   /* Increased from 0.625rem (11px) */

   /* Line heights */
   --leading-none: 1;
   --leading-tight: 1.1;
   --leading-snug: 1.2;
   --leading-normal: 1.6;
   --leading-relaxed: 1.8;

   /* Letter spacing */
   --tracking-tighter: -0.05em;
   --tracking-tight: -0.03em;
   --tracking-normal: 0;
   --tracking-wide: 0.05em;
   --tracking-wider: 0.1em;
   --tracking-widest: 0.15em;

   /* Weights */
   --font-regular: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
   --font-extrabold: 800;
   --font-black: 900;

   /* =========================================
       SPACING (4px grid)
       ========================================= */
   --space-1: 0.25rem;
   /* 4px */
   --space-2: 0.5rem;
   /* 8px */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-5: 1.25rem;
   /* 20px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-10: 2.5rem;
   /* 40px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */
   --space-40: 10rem;
   /* 160px */
   --space-60: 15rem;
   /* 240px */

   /* Secciones */
   --section-py: clamp(4rem, 10vw, 6rem);

   /* Container */
   --container-px-mobile: 1.25rem;
   --container-px-tablet: 3rem;
   --container-max-lg: 94%;
   --container-max-xl: 85%;

   /* =========================================
       RADIOS Y SOMBRAS
       ========================================= */
   --radius-sm: 0.5rem;
   --radius-md: 1rem;
   --radius-lg: 1.5rem;
   --radius-xl: 2rem;
   --radius-2xl: 2.5rem;
   --radius-full: 9999px;

   --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.03);
   --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.2);
   --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 30px 60px -20px rgba(0, 0, 0, 0.2);
   --shadow-2xl: 0 40px 80px -20px rgba(0, 0, 0, 0.15);

   /* =========================================
       TRANSICIONES
       ========================================= */
   --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

   --duration-fast: 0.2s;
   --duration-normal: 0.3s;
   --duration-slow: 0.4s;

   /* =========================================
       NAV ESPECÍFICOS
       ========================================= */
   --nav-height-mobile: 80px;
   --nav-height-desktop: 90px;
   --nav-height-scrolled-mobile: 70px;
   --nav-height-scrolled-desktop: 80px;
}/* =================================================================
   _RESET.CSS - Base Styles & Lenis
   ================================================================= */

/* Lenis smooth scroll */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Body base */
body {
    font-family: var(--font-family);
    background-color: var(--bg-body);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Selection */
::selection {
    background-color: var(--bunker-lavanda);
    color: var(--bunker-negro);
}

/* Headings base */
h1,
h2,
h3,
h4 {
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
}

/* Ocultar scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}/* =================================================================
   _NAV.CSS - Navegación Unificada (Source: Index)
   ================================================================= */

/* -----------------------------------------------------------------
   BARRA PRINCIPAL
   ----------------------------------------------------------------- */
.main-nav-dynamic {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height-mobile);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-slow) var(--ease-out);
    background: transparent;
    border-bottom: 1px solid var(--border-on-dark);
    color: var(--text-on-dark);
}

@media (min-width: 1024px) {
    .main-nav-dynamic {
        height: var(--nav-height-desktop);
    }
}

/* Estado scrolled */
.main-nav-dynamic.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    height: var(--nav-height-scrolled-mobile);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
    .main-nav-dynamic.scrolled {
        height: var(--nav-height-scrolled-desktop);
    }
}

/* -----------------------------------------------------------------
   NAV WRAPPER
   ----------------------------------------------------------------- */
.nav-wrapper {
    width: 100%;
    max-width: 1400px;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

@media (min-width: 768px) {
    .nav-wrapper {
        padding: 0 var(--space-8);
    }
}

/* -----------------------------------------------------------------
   LOGO (Image)
   ----------------------------------------------------------------- */
.nav-logo {
    text-decoration: none;
    color: inherit;
    transition: opacity var(--duration-normal);
    padding-right: 0;
    border-right: none;
    display: flex;
    align-items: center;
    max-width: 115px;
    mix-blend-mode: exclusion;
}

.nav-logo img {
    height: 24px;
    width: auto;
}

@media (min-width: 1024px) {
    .nav-logo {
        padding-right: var(--space-8);
        border-right: 1px solid var(--border-on-dark);
    }

    .nav-logo img {
        height: 28px;
    }
}

.scrolled .nav-logo {
    border-right-color: var(--border-medium);
}

.nav-logo:hover {
    opacity: 0.7;
}

/* -----------------------------------------------------------------
   NAV LINKS
   ----------------------------------------------------------------- */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

@media (min-width: 1280px) {
    .nav-links {
        gap: var(--space-12);
    }
}

/* -----------------------------------------------------------------
   NAV ITEM
   ----------------------------------------------------------------- */
.nav-item {
    font-family: var(--font-family);
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2) 0;
    position: relative;
    opacity: 0.8;
    transition: all var(--duration-normal) ease;
}

.nav-item:hover,
.nav-item.active,
.nav-item-dropdown:hover .nav-item {
    opacity: 1;
}

/* Dot indicator */
.nav-item::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    transition: transform var(--duration-normal) ease;
}

.nav-item:hover::after,
.nav-item.active::after {
    transform: translateX(-50%) scale(1);
}

/* -----------------------------------------------------------------
   DROPDOWN
   ----------------------------------------------------------------- */
.nav-item-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    position: absolute;
    top: calc(100%);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--text-on-dark);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast) ease-in-out;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: var(--text-on-dark);
    border-left: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
}

.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-link {
    display: block;
    padding: 0.8rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 4px;
    transition: all var(--duration-fast) ease;
}

.dropdown-link:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

/* Estado activo para servicio actual */
.dropdown-link.active {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
    font-weight: var(--font-bold);
}

/* -----------------------------------------------------------------
   CTA BUTTON
   ----------------------------------------------------------------- */
.nav-cta-btn {
    font-family: var(--font-family);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--duration-normal) ease;
    background: transparent;
    color: var(--text-on-dark);
    border: 1px solid var(--border-medium-on-dark);
}

@media (min-width: 1024px) {
    .nav-cta-btn {
        padding: 0.7rem 1.8rem;
    }
}

.nav-cta-btn:hover {
    background: var(--text-on-dark);
    color: var(--text-primary);
    border-color: var(--text-on-dark);
}

/* Scrolled state */
.scrolled .nav-cta-btn {
    color: var(--text-primary);
    border-color: var(--border-medium);
}

.scrolled .nav-cta-btn:hover {
    background: var(--text-primary);
    color: var(--text-on-dark);
    border-color: var(--text-primary);
}

/* -----------------------------------------------------------------
   MOBILE TOGGLE - Hamburger to X Animation
   ----------------------------------------------------------------- */
.nav-mobile-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    z-index: 250;
    position: relative;
}

@media (min-width: 1024px) {
    .nav-mobile-toggle {
        display: none;
    }
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: currentColor;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    position: absolute;
}

.hamburger-line:first-child {
    transform: translateY(-6px);
}

.hamburger-line:last-child {
    transform: translateY(6px);
}

/* Hamburger → X Animation when menu is open */
.nav-mobile-toggle.is-active .hamburger-line:first-child {
    transform: rotate(45deg);
}

.nav-mobile-toggle.is-active .hamburger-line:last-child {
    transform: rotate(-45deg);
}

/* =================================================================
   MOBILE MENU - CLEAN CSS ONLY (No Tailwind Dependencies)
   ================================================================= */
.mobile-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport for mobile browsers */
    background-color: #FDFDFD;
    z-index: 200;

    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Initially hidden */
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);

    /* Smooth transition */
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        visibility 0s linear 0.4s;
}

/* Active state - visible */
.mobile-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .mobile-menu {
        display: none !important;
    }
}

/* -----------------------------------------------------------------
   MOBILE MENU - CLOSE BUTTON
   ----------------------------------------------------------------- */
.mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #121212;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu__close:hover {
    transform: scale(1.1);
}

.mobile-menu__close svg {
    width: 24px;
    height: 24px;
}

/* -----------------------------------------------------------------
   MOBILE MENU - NAVIGATION
   ----------------------------------------------------------------- */
.mobile-menu__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.mobile-menu__link {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.2;
}

/* Primary links - larger */
.mobile-menu__link--primary {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    color: #121212;
}

.mobile-menu__link--primary:hover {
    color: #7A7E51;
}

/* Service links - smaller */
.mobile-menu__link--service {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 700;
    color: #6B7280;
}

.mobile-menu__link--service:hover {
    color: #121212;
}

/* -----------------------------------------------------------------
   MOBILE MENU - SOCIAL LINKS
   ----------------------------------------------------------------- */
.mobile-menu__social {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 32px;
}

.mobile-menu__social a {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4B5563;
    /* Darkened from #9CA3AF for better contrast on white background */
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu__social a:hover {
    color: #121212;
}

/* -----------------------------------------------------------------
   MOBILE MENU - SERVICES ACCORDION
   ----------------------------------------------------------------- */
.mobile-menu__accordion {
    width: 100%;
    text-align: center;
}

.mobile-menu__accordion-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #121212;
    padding: 0;
    transition: color 0.3s ease;
}

.mobile-menu__accordion-btn:hover {
    color: #7A7E51;
}

.mobile-menu__accordion-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.mobile-menu__accordion.is-expanded .mobile-menu__accordion-icon {
    transform: rotate(180deg);
}

.mobile-menu__accordion-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    padding: 0;
}

.mobile-menu__accordion.is-expanded .mobile-menu__accordion-content {
    max-height: 300px;
    padding-top: 16px;
}

.mobile-menu__accordion-content a {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #6B7280;
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-menu__accordion-content a:hover {
    color: #121212;
}

/* =================================================================
   LEGACY SUPPORT - For existing #mobileMenu elements
   ================================================================= */
#mobileMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background-color: #FDFDFD;
    z-index: 200;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);

    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        visibility 0s linear 0.4s;
}

#mobileMenu.active,
#mobileMenu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition:
        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.3s ease,
        visibility 0s linear 0s;
}

@media (min-width: 1024px) {
    #mobileMenu {
        display: none !important;
    }
}

#closeMobileMenu {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    padding: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #121212;
    transition: transform 0.2s ease;
}

#closeMobileMenu:hover {
    transform: scale(1.1);
}

#closeMobileMenu svg {
    width: 24px;
    height: 24px;
}

#mobileMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

#mobileMenu .nav-mobile-link {
    display: block;
    font-family: 'Manrope', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.2;
}/* =================================================================
   _COMPONENTS.CSS - Componentes Reutilizables
   ================================================================= */

/* -----------------------------------------------------------------
   NOISE OVERLAY
   ----------------------------------------------------------------- */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.015;
    mix-blend-mode: overlay;
    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.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------
   BOTONES
   ----------------------------------------------------------------- */

/* Magnetic button */
.btn-magnetic {
    transition: transform var(--duration-slow) var(--ease-smooth),
        box-shadow var(--duration-normal) ease;
}

.btn-magnetic:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Liquid button */
.btn-liquid {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color var(--duration-slow) ease;
}

.btn-liquid::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bunker-negro);
    transition: top var(--duration-slow) var(--ease-smooth);
    z-index: -1;
    border-radius: var(--radius-full);
}

.btn-liquid:hover::before {
    top: 0;
}

.btn-liquid-white::before {
    background-color: var(--text-on-dark);
}

.btn-liquid-white:hover {
    color: var(--bunker-negro) !important;
}

/* Ensure hero CTA always shows dark text on white background for hover/focus */
.btn-hero {
    /* keep transitions consistent */
    transition: background-color var(--duration-normal) var(--ease-smooth), color var(--duration-normal) var(--ease-smooth);
}

.btn-hero:hover,
.btn-hero:focus,
.btn-hero:focus-visible {
    background-color: #ffffff !important;
    color: var(--bunker-negro) !important;
    box-shadow: var(--shadow-md);
}

/* Avoid white-on-white flash for buttons that animate an overlay.
   Ensure the overlay sits behind the visible content and color changes
   happen together and quickly. */
.btn-magnetic.group,
.btn-magnetic.group.button,
.btn-magnetic.group/button {
    position: relative;
    overflow: hidden;
}

.btn-magnetic.group * {
    position: relative;
    z-index: 2;
    /* keep text/icons above overlays */
}

.btn-magnetic.group .absolute,
.btn-magnetic .absolute.inset-0.bg-white {
    z-index: 1;
    /* overlays sit behind */
}

/* Ensure any overlay used for white reveal doesn't capture pointer events */
.btn-magnetic .absolute.inset-0.bg-white {
    pointer-events: none;
}

/* Ensure children that are not overlays sit above overlays */
.btn-magnetic>*:not(.absolute) {
    position: relative;
    z-index: 2;
}

/* Add accessible focus-visible style for grouped buttons */
.btn-magnetic:focus-visible,
.btn-magnetic.group:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 0 2px rgba(18, 18, 18, 0.12);
}

/* Speed color transition so text changes at the same time the overlay animates */
.btn-magnetic {
    transition: background-color 160ms ease, color 160ms ease, transform var(--duration-slow) var(--ease-smooth), box-shadow var(--duration-normal) ease;
}

/* -----------------------------------------------------------------
   SECTION TAG (Pre-títulos)
   ----------------------------------------------------------------- */
.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 0.5em 1.25em;
    border: 1px solid rgba(18, 18, 18, 0.45);
    border-radius: 100px;
    font-family: var(--font-family);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: #121212;
    /* Strict Black */
    background-color: transparent;
    margin-bottom: var(--space-8);
    transition: all var(--duration-normal) ease;
}

.section-tag:hover {
    background-color: var(--bunker-negro);
    color: var(--text-on-dark);
    border-color: var(--bunker-negro);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Variación para fondo oscuro */
.bg-bunker-black .section-tag,
.bg-bunker-carbon .section-tag {
    border-color: var(--border-medium-on-dark);
    color: var(--text-on-dark);
}

.bg-bunker-black .section-tag:hover,
.bg-bunker-carbon .section-tag:hover {
    background-color: var(--text-on-dark);
    color: var(--bunker-negro);
    border-color: var(--text-on-dark);
}

/* -----------------------------------------------------------------
   TEXT FILL ANIMATION
   ----------------------------------------------------------------- */
.text-fill-anim {
    color: rgba(18, 18, 18, 0.15);
    background-image: linear-gradient(var(--bunker-negro), var(--bunker-negro));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.text-fill-anim.active {
    background-size: 100% 100%;
}

/* -----------------------------------------------------------------
   MARQUEE ANIMATION
   ----------------------------------------------------------------- */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

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

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* -----------------------------------------------------------------
   VERTICAL TEXT
   ----------------------------------------------------------------- */
.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}

/* -----------------------------------------------------------------
   SERVICE BULLET ITEMS
   ----------------------------------------------------------------- */
.service-bullet,
.service-bullet li,
.service-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.service-bullet-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--bunker-oliva);
    color: var(--text-on-dark);
    font-size: 14px;
    font-weight: var(--font-bold);
    line-height: 1;
}

/* -----------------------------------------------------------------
   GALLERY COMPONENTS
   ----------------------------------------------------------------- */

/* Marquee horizontal */
.horizontal-marquee-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.horizontal-track {
    display: flex;
    width: max-content;
    gap: var(--space-6);
    animation: scrollHorizontal 25s linear infinite;
}

@media (min-width: 768px) {
    .horizontal-track {
        gap: var(--space-10);
    }
}

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

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

.horizontal-marquee-wrap:hover .horizontal-track {
    animation-play-state: paused;
}

/* Gallery Card */
.gallery-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 9/16;
    flex-shrink: 0;
    cursor: pointer;
    width: 85vw;
    background: #000;
}

@media (min-width: 768px) {
    .gallery-card {
        width: 400px;
    }
}

.gallery-card img,
.gallery-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: all 0.5s ease;
}

.gallery-card:hover img,
.gallery-card:hover video {
    opacity: 1;
    transform: scale(1.05);
}

.gallery-card .card-overlay {
    position: absolute;
    inset: 0;
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 20;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    transition: opacity var(--duration-normal) ease;
}

.gallery-card .card-tag {
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-on-dark);
    border: 1px solid var(--border-medium-on-dark);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    width: fit-content;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    margin-bottom: var(--space-3);
}

.gallery-card .card-title {
    font-size: var(--space-6);
    font-weight: var(--font-extrabold);
    color: var(--text-on-dark);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 9/16;
}

.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover video {
    transform: scale(1.05);
}

/* -----------------------------------------------------------------
   LIGHTBOX
   ----------------------------------------------------------------- */
#portfolio-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) ease;
}

#portfolio-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
}

.lightbox-content img,
.lightbox-content video {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: var(--space-8);
    right: var(--space-8);
    color: var(--text-on-dark);
    background: none;
    border: none;
    cursor: pointer;
    transition: transform var(--duration-normal) ease;
    z-index: 10000;
}

.lightbox-close:hover {
    transform: rotate(90deg) scale(1.1);
    color: var(--bunker-oliva);
}

.lightbox-close svg {
    width: 40px;
    height: 40px;
}

/* -----------------------------------------------------------------
   UNIFIED FOOTER
   ----------------------------------------------------------------- */
.site-footer {
    background-color: var(--bunker-carbon);
    color: var(--text-on-dark);
    padding: clamp(4rem, 8vw, 8rem) var(--space-6) clamp(2rem, 4vw, 4rem);
    position: relative;
    overflow: hidden;
}

.site-footer__container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* CTA Section */
.site-footer__cta {
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

.site-footer__cta-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-tighter);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-8);
}

.site-footer__cta-title span {
    color: var(--text-muted);
}

.site-footer__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-8);
    background-color: var(--bunker-oliva);
    color: var(--bunker-negro);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    transition: all var(--duration-normal) ease;
}

.site-footer__cta-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 0 40px rgba(154, 177, 124, 0.4);
}

/* Divider */
.site-footer__divider {
    width: 1px;
    height: clamp(3rem, 6vw, 5rem);
    background: linear-gradient(to bottom, transparent, var(--border-medium-on-dark), transparent);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* Links Section */
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.site-footer__link {
    font-size: var(--text-caption);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted-on-dark);
    transition: color var(--duration-normal) ease;
}

.site-footer__link:hover {
    color: var(--text-on-dark);
}

/* Bottom Bar */
.site-footer__bottom {
    width: 100%;
    padding-top: var(--space-8);
    border-top: 1px solid var(--border-light-on-dark);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

@media (min-width: 768px) {
    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.site-footer__logo {
    width: 80px;
    opacity: 0.6;
    transition: opacity var(--duration-normal) ease;
}

.site-footer__logo:hover {
    opacity: 1;
}

.site-footer__copyright {
    font-size: 10px;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--text-muted-on-dark);
}/* =================================================================
   _UTILITIES.CSS - Clases de Utilidad
   ================================================================= */

/* -----------------------------------------------------------------
   CONTAINER
   ----------------------------------------------------------------- */
.container-refined {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px-mobile);
    padding-right: var(--container-px-mobile);
}

@media (min-width: 768px) {
    .container-refined {
        padding-left: var(--container-px-tablet);
        padding-right: var(--container-px-tablet);
    }
}

@media (min-width: 1024px) {
    .container-refined {
        max-width: var(--container-max-lg);
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1440px) {
    .container-refined {
        max-width: var(--container-max-xl);
    }
}

/* -----------------------------------------------------------------
   BACKGROUND COLORS
   ----------------------------------------------------------------- */
.bg-bunker-white {
    background-color: var(--bunker-blanco);
}

.bg-bunker-black {
    background-color: var(--bunker-negro);
    color: var(--text-on-dark);
}

.bg-bunker-accent {
    background-color: var(--bunker-lavanda);
    color: var(--bunker-negro);
}

.bg-bunker-beige {
    background-color: var(--bunker-beige);
    color: var(--bunker-negro);
}

.bg-bunker-oliva {
    background-color: var(--bunker-oliva);
    color: var(--text-on-dark);
}

.bg-bunker-carbon {
    background-color: var(--bunker-carbon);
    color: var(--text-on-dark);
}

/* -----------------------------------------------------------------
   TEXT COLORS
   ----------------------------------------------------------------- */
.text-bunker-black {
    color: var(--bunker-negro);
}

.text-bunker-white {
    color: var(--bunker-blanco);
}

.text-bunker-accent {
    color: var(--bunker-lavanda);
}

.text-bunker-oliva {
    color: var(--bunker-oliva);
}

.text-bunker-beige {
    color: var(--bunker-beige);
}

/* Grises semánticos */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

/* Overrides para texto gris en fondos claros (contrast fix) */
.text-gray-400 {
    color: #717171;
    /* WCAG AA Large Text safe on white */
}

.text-gray-500 {
    color: #555555;
    /* Darkened for better contrast */
}

/* -----------------------------------------------------------------
   BUTTON OVERRIDES POR CONTEXTO
   NOTA: Estos overrides fueron removidos para permitir que los 
   estilos inline de Tailwind tengan prioridad.
   Si necesitas overrides específicos, agrégalos directamente 
   en el HTML con clases de Tailwind.
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   SPACING UTILITIES
   ----------------------------------------------------------------- */
.section-padding {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.mb-section {
    margin-bottom: var(--space-24);
}

/* -----------------------------------------------------------------
   TYPOGRAPHY UTILITIES
   ----------------------------------------------------------------- */
.text-hero {
    font-size: var(--text-hero);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

.text-display {
    font-size: var(--text-display);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.text-title {
    font-size: var(--text-h2);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.text-body {
    font-size: var(--text-body);
}/* =================================================================
   STYLES.CSS - INDEX PAGE
   Imports + Estilos específicos de la Home
   ================================================================= */

/* -----------------------------------------------------------------
   IMPORTS - Sistema Modular
   ----------------------------------------------------------------- */
@import url('styles/_tokens.css');
@import url('styles/_reset.css');
@import url('styles/_nav.css');
@import url('styles/_components.css');
@import url('styles/_utilities.css');


/* -----------------------------------------------------------------
   HERO (Index)
   ----------------------------------------------------------------- */
.hero-scroll-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    cursor: pointer;
    transition: transform var(--duration-normal) ease;
}

.hero-scroll-trigger:hover {
    transform: translateY(5px);
    opacity: 0.8;
}

.scroll-label {
    font-family: var(--font-family);
    font-size: var(--text-caption);
    font-weight: var(--font-extrabold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-on-dark);
    opacity: 0.8;
}

.scroll-icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid var(--border-medium-on-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-dark);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
}

/* -----------------------------------------------------------------
   SERVICIOS (Index)
   ----------------------------------------------------------------- */
.service-list-item {
    position: relative;
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-medium);
    margin-bottom: var(--space-4);
    background-color: transparent;
    transition: all var(--duration-slow) var(--ease-smooth);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .service-list-item {
        padding: var(--space-12) var(--space-10);
        margin-bottom: var(--space-6);
    }
}

/* Service Multi-Color Assignment */
.service-list-item:nth-child(1),
.service-list-item:nth-child(4) {
    --service-accent: var(--bunker-lavanda);
    --service-glow: rgba(173, 173, 214, 0.25);
}

.service-list-item:nth-child(2),
.service-list-item:nth-child(5) {
    --service-accent: var(--bunker-oliva);
    --service-glow: rgba(154, 177, 124, 0.25);
}

.service-list-item:nth-child(3),
.service-list-item:nth-child(6) {
    --service-accent: var(--bunker-beige);
    --service-glow: rgba(232, 225, 208, 0.25);
}

.service-list-item.active,
.service-list-item:hover {
    border-color: var(--service-accent);
    transform: scale(1.01);
    box-shadow: 0 20px 40px -10px var(--service-glow);
    z-index: 10;
    cursor: pointer;
}

@media (min-width: 1024px) {

    .service-list-item.active,
    .service-list-item:hover {
        transform: scale(1.02);
    }
}

.service-bg-absolute {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.service-bg-absolute img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 6s ease;
    filter: grayscale(100%);
}

.service-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: background-color var(--duration-slow) ease;
    mix-blend-mode: multiply;
}

.service-list-item.active .service-bg-absolute,
.service-list-item:hover .service-bg-absolute {
    opacity: 1;
    visibility: visible;
}

.service-list-item.active .service-bg-absolute img,
.service-list-item:hover .service-bg-absolute img {
    transform: scale(1);
}

.arrow-orb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border-medium);
    border-radius: 50%;
    transition: all var(--duration-slow) var(--ease-smooth);
    background-color: transparent;
    color: var(--bunker-negro);
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .arrow-orb {
        width: 3.5rem;
        height: 3.5rem;
    }
}

.arrow-orb svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--duration-slow) ease;
}

@media (min-width: 768px) {
    .arrow-orb svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.service-list-item.active .arrow-orb svg,
.service-list-item:hover .arrow-orb svg {
    transform: rotate(-45deg);
}

/* --- Unified Service Styles (Dark Theme) --- */

.service-list-item .service-bg-overlay {
    background-color: rgba(18, 18, 18, 0.75);
}

.service-list-item.active .relative.z-10 div .service-title,
.service-list-item:hover .relative.z-10 div .service-title {
    color: var(--text-on-dark) !important;
}

.service-list-item.active .text-gray-400,
.service-list-item:hover .text-gray-400 {
    color: var(--service-accent) !important;
}

.service-list-item.active .arrow-orb,
.service-list-item:hover .arrow-orb {
    background-color: var(--service-accent) !important;
    color: var(--bunker-negro) !important;
    border-color: var(--service-accent) !important;
    transform: scale(1.1);
}

.service-list-item.active .tags,
.service-list-item:hover .tags {
    color: var(--text-on-dark) !important;
    border-color: var(--service-accent) !important;
}

/* Tags visibles en scroll/active */
@media (min-width: 1024px) {
    .service-list-item.active .flex.flex-wrap {
        opacity: 1 !important;
    }
}

/* MOBILE: Show overlays permanently for better contrast without hover */
@media (max-width: 1023px) {
    .service-list-item .service-bg-overlay {
        background-color: rgba(18, 18, 18, 0.85);
    }

    /* Text colors when active */
    .service-list-item.active .service-title {
        color: var(--text-on-dark) !important;
    }

    /* Pills/tags text color when active - ensuring proper contrast */
    .service-list-item.active .tags,
    .service-list-item.active .text-gray-500 {
        color: var(--text-on-dark) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }
}

/* =================================================================
   FAQ 2.0 (Clean System)
   ================================================================= */

/* Estilo base del contenedor */
.faq-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    /* rounded-2xl */
    background-color: transparent;
    transition: all 0.4s ease;
    overflow: hidden;
}

/* --- ESTADO ACTIVO (Abierto) --- */

/* 1. Expandir contenido (Grid trick) */
.faq-item.active .faq-body {
    grid-template-rows: 1fr !important;
}

/* 2. Rotar icono */
.faq-item.active .faq-icon {
    transform: rotate(45deg);
    background-color: #121212;
    color: white;
    border-color: #121212;
}

/* --- COLORES PERSONALIZADOS AL ABRIR --- */

/* Item 1: Lavanda */
.faq-item:nth-child(1).active {
    background-color: #ADADD6;
    /* var(--bunker-lavanda) */
    border-color: #ADADD6;
}

/* Item 2: Negro (Texto blanco manejado con clases group utility en HTML) */
.faq-item:nth-child(2).active {
    background-color: #121212;
    /* var(--bunker-negro) */
    border-color: #121212;
}

/* Excepción icono blanco para fondo negro */
.faq-item:nth-child(2).active .faq-icon {
    background-color: white;
    color: black;
    border-color: white;
}

/* Item 3: Oliva */
.faq-item:nth-child(3).active {
    background-color: #9AB17C;
    /* var(--bunker-oliva) */
    border-color: #9AB17C;
}

/* Item 4: Beige */
.faq-item:nth-child(4).active {
    background-color: #E8E1D0;
    /* var(--bunker-beige) */
    border-color: #E8E1D0;
}

/* Hover sutil en desktop */
@media (hover: hover) {
    .faq-item:hover {
        border-color: #121212;
    }
}


/* -----------------------------------------------------------------
   CASOS DE ÉXITO - STACK CARDS
   ----------------------------------------------------------------- */
article.sticky {
    position: sticky;
    margin: 0 auto var(--space-6) auto !important;
    width: 100%;
    max-width: 1200px;
    min-height: auto;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.15);
    transform-origin: center top;
    transition: transform var(--duration-normal) ease;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    article.sticky {
        flex-direction: row;
        min-height: 55vh;
        height: auto;
        border-radius: var(--radius-2xl);
    }
}

/* Z-index y posiciones */
article.sticky:nth-child(1) {
    z-index: 10;
    top: 6rem;
}

article.sticky:nth-child(2) {
    z-index: 20;
    top: 7rem;
}

article.sticky:nth-child(3) {
    z-index: 30;
    top: 8rem;
}

@media (min-width: 768px) {
    article.sticky:nth-child(1) {
        top: 8rem;
    }

    article.sticky:nth-child(2) {
        top: 10rem;
    }

    article.sticky:nth-child(3) {
        top: 10rem;
    }
}

/* Contenedor de contenido */
.case-content-wrapper {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
    flex-shrink: 0;
    z-index: 20;
}

@media (min-width: 768px) {
    .case-content-wrapper {
        padding: var(--space-12);
        width: 45%;
    }
}

@media (min-width: 1024px) {
    .case-content-wrapper {
        padding: var(--space-16);
        width: 45%;
    }
}

/* Contenedor de imagen */
.case-image-wrapper {
    position: relative;
    overflow: hidden;
    display: none;
    width: 0;
    height: 0;
}

@media (min-width: 768px) {
    .case-image-wrapper {
        display: block;
        width: 55%;
        min-height: 400px;
        height: auto;
        flex-shrink: 0;
        align-self: stretch;
    }
}

.case-image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

article.sticky:hover .case-image-wrapper img {
    transform: scale(1.1);
}

/* Thumbnail mobile */
.case-thumbnail-mobile {
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    display: block;
}

@media (min-width: 768px) {
    .case-thumbnail-mobile {
        display: none;
    }
}

.case-thumbnail-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tipografía cards */
article.sticky h3 {
    font-size: var(--text-h2) !important;
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight) !important;
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
    article.sticky h3 {
        font-size: var(--text-display) !important;
        margin-bottom: var(--space-6);
    }
}

article.sticky p {
    font-size: var(--text-small) !important;
    line-height: var(--leading-normal) !important;
    font-weight: var(--font-medium);
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    article.sticky p {
        font-size: var(--text-body) !important;
        line-height: 1.7 !important;
    }
}

@media (min-width: 1024px) {
    article.sticky p {
        font-size: var(--text-body-lg) !important;
        line-height: var(--leading-relaxed) !important;
        margin-bottom: 0 !important;
    }
}

/* Tags unificados */
article.sticky span.inline-block {
    padding: var(--space-1) var(--space-3) !important;
    border-radius: var(--radius-full);
    font-size: var(--text-micro) !important;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    article.sticky span.inline-block {
        font-size: var(--text-caption) !important;
        padding: var(--space-2) var(--space-4) !important;
    }
}

/* Botón CTA */
article.sticky button.btn-magnetic {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: var(--radius-full);
    transition: all var(--duration-normal) ease;
}

@media (min-width: 768px) {
    article.sticky button.btn-magnetic {
        width: 6rem !important;
        height: 6rem !important;
    }
}

article.sticky button.btn-magnetic svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

@media (min-width: 768px) {
    article.sticky button.btn-magnetic svg {
        width: 2rem !important;
        height: 2rem !important;
    }
}

/* Mobile optimizations */
@media (max-width: 767px) {
    article.sticky {
        margin-bottom: var(--space-6) !important;
        min-height: auto;
        height: auto;
    }

    .case-content-wrapper {
        padding: var(--space-6) !important;
    }
}

/* =========================================
   OPTIMIZACIÓN MOBILE (Performance)
   ========================================= */
@media (max-width: 1024px) {

    /* 1. Desactivar Blur costoso en móviles */
    .hero-scroll-trigger .scroll-icon-container,
    .main-nav-dynamic.scrolled,
    .gallery-card .card-tag {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Reemplazo visual: Fondo sólido con ligera transparencia */
    .main-nav-dynamic.scrolled {
        background: rgba(255, 255, 255, 0.98) !important;
    }

    .hero-scroll-trigger .scroll-icon-container {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* 2. Sombras más simples */

}

/* =================================================================
   FAQ SECTION - PERFORMANCE OPTIMIZED (Zero Lag)
   ================================================================= */

/* --- 1. CONFIGURACIÓN DE LA SECCIÓN --- */
.pure-faq-section {
    width: 100%;
    padding: 100px 24px;
    background-color: #ffffff;
    font-family: 'Manrope', sans-serif;
    box-sizing: border-box;
    color: #121212;
}

/* --- 2. CABECERA --- */
.pure-faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px auto;
}

.pure-faq-tag {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #121212;
    margin-bottom: 24px;
    text-transform: uppercase;
    opacity: 0.6;
}

.pure-faq-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #121212;
    margin: 0 0 30px 0;
}

@media (min-width: 768px) {
    .pure-faq-title {
        font-size: 5rem;
    }
}

@media (min-width: 1024px) {
    .pure-faq-title {
        font-size: 6.5rem;
    }
}

.pure-faq-desc {
    font-size: 1.125rem;
    line-height: 1.6;
    color: #374151;
    /* High contrast gray */
    font-weight: 500;
    max-width: 650px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .pure-faq-desc {
        font-size: 1.25rem;
    }
}

/* --- 3. CONTENEDOR FAQ --- */
.pure-faq-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- 4. ITEM INDIVIDUAL (Tarjeta) --- */
.pure-faq-item {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.4);
    /* High contrast border */
    border-radius: 24px;
    overflow: hidden;
    /* OPTIMIZACIÓN: Solo animar lo necesario, no 'all' */
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    /* Prepara el navegador para pintar cambios */
    transform: translateZ(0);
}

/* --- 5. BOTÓN DE LA PREGUNTA --- */
.pure-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: #121212;
    font-family: inherit;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
}

.pure-faq-question span {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .pure-faq-question span {
        font-size: 1.5rem;
    }
}

/* Icono (+) */
.pure-faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid #e5e7eb;
    /* Keep light gray for icon circle */
    border-radius: 50%;
    margin-left: 24px;
    flex-shrink: 0;
    color: #121212;
    background: transparent;
    /* OPTIMIZACIÓN: Transiciones específicas */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.pure-faq-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
}

/* --- 6. ANIMACIÓN DE APERTURA (Grid System Optimizado) --- */
.pure-faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    /* OPTIMIZACIÓN: Aceleración de hardware para el grid */
    will-change: grid-template-rows;
    /* Curva de animación más ágil al inicio */
    transition: grid-template-rows 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pure-faq-inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    /* Movimiento más sutil */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* El texto */
.pure-faq-inner p {
    margin: 0;
    padding: 0 32px 32px 32px;
    font-size: 1rem;
    line-height: 1.7;
    color: #1f2937;
    /* Gray 800 - Very dark gray for max contrast */
    /* Renderizado de texto optimizado */
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
    .pure-faq-inner p {
        font-size: 1.125rem;
    }
}

/* --- 7. ESTADOS ACTIVOS (OPEN) --- */

.pure-faq-item.active {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

/* Abrir Grid */
.pure-faq-item.active .pure-faq-answer-wrapper {
    grid-template-rows: 1fr;
}

/* Mostrar Contenido */
.pure-faq-item.active .pure-faq-inner {
    opacity: 1;
    transform: translateY(0);
    /* Pequeño delay para que aparezca justo cuando el grid abre un poco */
    transition-delay: 0.05s;
}

/* Rotar Icono */
.pure-faq-item.active .pure-faq-icon {
    transform: rotate(45deg);
    border-color: transparent;
    background-color: #121212;
    color: #ffffff;
}

/* --- 8. COLORES DE MARCA --- */

/* Item 1: Lavanda */
.pure-faq-item:nth-child(1).active {
    background-color: #ADADD6;
}

/* Item 2: Negro */
.pure-faq-item:nth-child(2).active {
    background-color: #121212;
}

.pure-faq-item:nth-child(2).active .pure-faq-question {
    color: #ffffff;
}

.pure-faq-item:nth-child(2).active .pure-faq-inner p {
    color: #d1d5db;
}

.pure-faq-item:nth-child(2).active .pure-faq-icon {
    background-color: #ffffff;
    color: #121212;
}

/* Item 3: Oliva */
.pure-faq-item:nth-child(3).active {
    background-color: #9AB17C;
}

/* Item 4: Beige */
.pure-faq-item:nth-child(4).active {
    background-color: #E8E1D0;
}/* ================================
   CUSTOM.CSS - Override & Accessibility Layer
   Solo reglas que NO están en los parciales (/styles/).
   Los componentes (section-tag, gallery, lightbox,
   service-bullet) están definidos en _components.css.
   ================================ */

/* ================================
   AAA CONTRAST OVERRIDES
   Gray text on dark backgrounds - LIGHT GRAY FOR CONTRAST
   Colors chosen for ~10:1 contrast ratio on #121212 background
================================ */

/* Lighter grays (200-400) become light gray */
.bg-bunker-black .text-gray-200,
.bg-bunker-negro .text-gray-200,
.bg-bunker-carbon .text-gray-200,
.bg-bunker-oliva .text-gray-200,
.bg-bunker-black .text-gray-300,
.bg-bunker-negro .text-gray-300,
.bg-bunker-carbon .text-gray-300,
.bg-bunker-oliva .text-gray-300,
.bg-bunker-black .text-gray-400,
.bg-bunker-negro .text-gray-400,
.bg-bunker-carbon .text-gray-400,
.bg-bunker-oliva .text-gray-400,
[class*="bg-bunker-black"] .text-gray-200,
[class*="bg-bunker-black"] .text-gray-300,
[class*="bg-bunker-black"] .text-gray-400 {
    color: #d0d5dd !important;
    /* Light gray - good visual hierarchy */
}

/* Darker grays (500-600) become slightly brighter */
.bg-bunker-black .text-gray-500,
.bg-bunker-negro .text-gray-500,
.bg-bunker-carbon .text-gray-500,
.bg-bunker-oliva .text-gray-500,
.bg-bunker-black .text-gray-600,
.bg-bunker-negro .text-gray-600,
.bg-bunker-carbon .text-gray-600,
.bg-bunker-oliva .text-gray-600,
[class*="bg-bunker-black"] .text-gray-500,
[class*="bg-bunker-black"] .text-gray-600 {
    color: #e8ecf0 !important;
    /* Brighter for secondary text */
}

/* Footer and dark section paragraphs */
.bg-bunker-black p,
.bg-bunker-negro p,
.bg-bunker-carbon p,
.bg-bunker-oliva p {
    color: #d0d5dd;
}

/* Make sure white text class is truly white */
.text-white {
    color: #ffffff;
    /* Removed !important to allow hover states to work */
}



/* Restored Logo Avatar Styles */
.logo-avatar {
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    border-radius: 9999px;
    /* rounded-full */
    object-fit: cover;
    border: 2px solid white;
    background-color: white;
    /* Ensure background for transparent logos */
    position: relative;
    z-index: 1;
    border: 1px solid #00000033;
}

.logo-timeline-omicron {
    max-width: 150px;
    height: auto;
    display: inline-block;
    margin-right: 15px;
    filter: brightness(0) saturate(100%) invert(76%) sepia(13%) saturate(1146%) hue-rotate(200deg) brightness(98%) contrast(89%);
}


@media (max-width: 1024px) {

    .logo-timeline-omicron {
        max-width: 100px;
        /*        margin: 0;*/
    }
}

/* Text Fill Animation */
.text-fill-anim {
    /* Layer 1 (Top): Filled color (Black) - Width animated via JS */
    /* Layer 2 (Bottom): Unfilled color (Gray 400) - Width 100% */
    background-image:
        linear-gradient(#121212, #121212),
        linear-gradient(#9ca3af, #9ca3af);
    background-size: 0% 100%, 100% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Ensure clean rendering */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-right: 0.1em;
    /* Fix clipping on some italics/fonts */
}

/* ================================
   WHATSAPP FLOATING BUTTON
================================ */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    background-color: var(--bunker-oliva);
    color: #FFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 24px rgba(154, 177, 124, 0.4);
    z-index: 9999;
    text-decoration: none;
    /* Soft breathing idle animation */
    animation: whatsappPulse 2.5s ease-in-out infinite;
    /* transition for hover */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

@keyframes whatsappPulse {
    0% { transform: scale(1); box-shadow: 0 8px 24px rgba(154, 177, 124, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 10px 28px rgba(154, 177, 124, 0.55); }
    100% { transform: scale(1); box-shadow: 0 8px 24px rgba(154, 177, 124, 0.4); }
}

.whatsapp-float:hover {
    animation-play-state: paused; /* Pause breathing on hover */
    transform: scale(1.08); /* Immediate pop */
    /* Lighten the background slightly on hover using a brightness filter or explicit brighter color. We'll use filter */
    filter: brightness(1.1);
    box-shadow: 0 12px 28px rgba(154, 177, 124, 0.6);
    color: #FFF;
}

.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Tooltip (Desktop Only) */
.whatsapp-float::before {
    content: "Hablemos!";
    position: absolute;
    right: 75px;
    background-color: rgba(18, 18, 18, 0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    font-family: 'Manrope', sans-serif;
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {
    .whatsapp-float:hover::before {
        opacity: 1;
        transform: translateX(0);
    }
}

/* WhatsApp Hidden State for Scroll Logic */
.whatsapp-float.whatsapp-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* WhatsApp Mobile Size Adjustment */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 51px;
        height: 51px;
    }
    .whatsapp-float svg {
        width: 27px !important;
        height: 27px !important;
    }
}

/* ================================
   LOGO CAROUSEL MOBILE ADJUSTMENTS
================================ */
@media (max-width: 767px) {
    .animate-marquee {
        gap: 3.5rem !important; /* Reduces gap-24 (6rem) by ~40% */
    }
}/* =================================================================
   CONTACTO.CSS - Página de Contacto
   ================================================================= */

/* -----------------------------------------------------------------
   IMPORTS - Sistema Modular
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   HERO CENTERED (VIDEO BG)
   ----------------------------------------------------------------- */
.hero-centered {
    position: relative;
    height: 70vh;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-light);
}

.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.15;
    filter: grayscale(100%) blur(6px);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    transition: opacity 1s ease;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 var(--space-6);
}

.hero-title {
    font-size: var(--text-hero);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-weight: var(--font-medium);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

/* -----------------------------------------------------------------
   SECCIÓN DE OPCIONES (Split)
   ----------------------------------------------------------------- */
.options-section {
    padding: 80px 0 120px 0;
    position: relative;
    z-index: 20;
}

/* Cards de Opciones */
.option-card {
    background: var(--text-on-dark);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-10);
    transition: all var(--duration-slow) var(--ease-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.option-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--bunker-oliva);
}

.icon-box {
    width: 4rem;
    height: 4rem;
    background: var(--bunker-blanco);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--text-primary);
    transition: all var(--duration-normal) ease;
    flex-shrink: 0;
}

.option-card:hover .icon-box {
    background: var(--bunker-oliva);
    color: var(--text-on-dark);
    transform: scale(1.1) rotate(-3deg);
}

.option-card .card-content h3 {
    font-size: 1.5rem;
    font-weight: var(--font-extrabold);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-tight);
}

.option-card .card-content p {
    font-size: var(--text-body);
    color: var(--text-secondary);
    line-height: 1.5;
}

.card-arrow {
    margin-left: auto;
    color: var(--text-disabled);
    transition: all var(--duration-normal);
    width: 1.5rem;
    height: 1.5rem;
}

.option-card:hover .card-arrow {
    color: var(--text-primary);
    transform: translateX(5px);
}

/* -----------------------------------------------------------------
   BUDGET CARD (Mega Card)
   ----------------------------------------------------------------- */
.budget-card-wrapper {
    height: 100%;
    min-height: 450px;
}

.budget-card {
    background-color: var(--bunker-negro);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s var(--ease-smooth);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

@media (min-width: 640px) {
    .budget-card {
        padding: 2rem;
    }
}

@media (min-width: 768px) {
    .budget-card {
        padding: var(--space-16);
    }
}

.budget-card:hover {
    transform: scale(1.015);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
}

.budget-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s;
}

.budget-card:hover::before {
    opacity: 1;
}

.budget-content {
    position: relative;
    z-index: 10;
    color: var(--text-on-dark);
}

.budget-title {
    font-size: 2.25rem;
    font-weight: var(--font-extrabold);
    line-height: 0.95;
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-4);
}

@media (min-width: 640px) {
    .budget-title {
        font-size: 3rem;
        margin-bottom: var(--space-6);
    }
}

@media (min-width: 768px) {
    .budget-title {
        font-size: 4rem;
        margin-bottom: var(--space-8);
    }
}

.budget-desc {
    color: var(--text-muted-on-dark);
    font-size: 1rem;
    line-height: var(--leading-normal);
    max-width: 90%;
    margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
    .budget-desc {
        font-size: 1.125rem;
        margin-bottom: var(--space-10);
    }
}

@media (min-width: 768px) {
    .budget-desc {
        font-size: 1.25rem;
        margin-bottom: var(--space-12);
    }
}

.budget-features {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-16);
}

.budget-features li {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-secondary-on-dark);
    margin-bottom: var(--space-4);
    font-size: 1.1rem;
    font-weight: var(--font-semibold);
}

.budget-features li svg {
    color: var(--bunker-oliva);
    width: 1.5rem;
    height: 1.5rem;
}

.budget-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--text-on-dark);
    color: var(--text-primary);
    padding: 1.25rem 2.5rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-size: 0.9rem;
    transition: all var(--duration-normal) ease;
}

.budget-card:hover .budget-action {
    background: var(--bunker-oliva);
    transform: translateX(10px);
}

/* -----------------------------------------------------------------
   MODAL / POPUP - REWRITTEN FOR MOBILE SCROLL
   ----------------------------------------------------------------- */

/* Overlay: fullscreen scrollable container */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* CRITICAL: Make overlay scrollable */
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Allow touch events */
    touch-action: pan-y;

    /* Animation */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Active state */
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Container: centered content box */
.modal-container {
    background: #ffffff;
    width: calc(100% - 32px);
    max-width: 750px;
    margin: 80px auto 40px auto;
    border-radius: 24px;
    padding: 40px 24px;
    position: relative;
    box-shadow: 0 25px 80px -20px rgba(0, 0, 0, 0.5);

    /* Animation */
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-container {
    transform: translateY(0);
}

/* Mobile specific - smaller padding, more room */
@media (max-width: 767px) {
    .modal-overlay {
        padding: 0;
    }

    .modal-container {
        width: calc(100% - 24px);
        margin: 60px auto 60px auto;
        padding: 60px 20px 32px 20px;
        border-radius: 20px;
    }
}

/* Desktop - larger padding */
@media (min-width: 768px) {
    .modal-container {
        padding: 64px;
        margin: 100px auto 60px auto;
        border-radius: 32px;
    }
}

/* Modal Header */
.modal-header {
    margin-bottom: var(--space-12);
    text-align: left;
}

.modal-title {
    font-size: var(--text-display);
    font-weight: var(--font-extrabold);
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    margin-top: var(--space-2);
}

.modal-subtitle {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--bunker-oliva);
}

/* Close Button */
.close-modal-btn {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bunker-blanco);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-normal);
    z-index: 20;
    color: var(--text-primary);
}

@media (min-width: 768px) {
    .close-modal-btn {
        top: var(--space-8);
        right: var(--space-8);
    }
}

.close-modal-btn:hover {
    background: var(--bunker-negro);
    color: var(--text-on-dark);
    transform: rotate(90deg);
}

/* Input Groups */
.bunker-input-group {
    margin-bottom: var(--space-8);
    position: relative;
}

.bunker-label {
    display: block;
    font-size: var(--text-caption);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.bunker-input {
    width: 100%;
    background: var(--bunker-blanco);
    border: 1px solid rgba(18, 18, 18, 0.45);
    border-radius: var(--radius-md);
    padding: 1.25rem var(--space-6);
    font-family: var(--font-family);
    font-size: var(--text-body);
    color: var(--text-primary);
    outline: none;
    transition: all var(--duration-normal);
}

.bunker-input:focus {
    background: var(--text-on-dark);
    border-color: var(--text-primary);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
}

/* Submit Button */
.btn-submit {
    width: 100%;
    background: var(--bunker-negro);
    color: var(--text-on-dark);
    padding: var(--space-6);
    border-radius: 1.2rem;
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-size: var(--text-body);
    border: none;
    cursor: pointer;
    transition: all var(--duration-normal);
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-12);
}

.btn-submit:hover {
    background: var(--bunker-oliva);
    color: var(--text-primary);
    transform: translateY(-3px);
}

/* -----------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------- */
.simple-footer {
    padding: var(--space-16) 0;
    border-top: 1px solid var(--border-light);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
}