/* VARIABLES V15 (STABLE FIX) */
:root {
    --bg-dark: #050505;
    --bg-card: #111111;
    --text-white: #FFFFFF;
    --text-muted: #999999;
    --gold: #D4AF37;
    --gold-grad: linear-gradient(135deg, #E3C676 0%, #C5A059 50%, #8A6E2F 100%);
    --font-head: 'Syne', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

/* RESET TOTAL PARA EVITAR TEMBLEQUES */
html {
    width: 100%;
	scroll-padding-top: 0px; /* <--- MAGIA: Compensa la altura del menú en toda la web */
    scroll-behavior: smooth;   /* <--- MAGIA 2: Hace que el viaje al hacer clic sea suave y elegante */

}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    /* Removido overflow-x: hidden para permitir position: sticky */
    position: relative;
    overflow-x: clip;
}

* {
    box-sizing: border-box;
}

/* Force clip on all main sections to prevent overflow from children */
section {
    max-width: 100vw;
    overflow: hidden;
}

h1,
h2,
h3,
h4 {
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 0;
}

/* Ocultar cursor nativo solo si hay ratón fino (PC) */
@media (hover: hover) and (pointer: fine) {
    * {
        cursor: none !important;
    }
}

/* --- CURSOR (Cubiertos) --- */
.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    display: none;
    /* Oculto por defecto para seguridad */
}

/* Solo activamos el cursor custom en PC */
@media (hover: hover) and (pointer: fine) {

    .cursor-dot,
    .cursor-outline {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.cursor-dot {
    width: 35px;
    height: 35px;
    background: var(--gold);
    color: #000;
    font-size: 14px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
}

.cursor-outline {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: width 0.2s ease-out, height 0.2s ease-out, background-color 0.2s;
}

body.hovering .cursor-outline {
    width: 80px;
    height: 80px;
    border-color: var(--gold);
    opacity: 0.5;
}

/* RUIDO */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.04;
    background: 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.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* UTILITIES */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

.mobile-only {
    display: none !important;
}


@media screen and (min-width: 769px) and (max-width: 1024px) {
    .mobile-only {
        display: block !important;
    }

    .desktop-only {
        display: none !important;
    }

    .nav-links {
        display: none !important;
    }

    .hamburger-menu {
        display: flex !important;
    }
}

/* --- NAV --- */
.navbar {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    margin-top: 0 !important;
    margin: 0 !important;
    z-index: 1000;
    padding: 30px 0;
    transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* FIX SPECIFIC FOR CLIENT AREA */
.client-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

/* MERGED TECH SECTION */
.merged-tech {
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.center-block {
    margin-bottom: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.center-block .tech-label {
    margin-bottom: 15px;
}

.tech-grid-unified {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.tech-unified-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, border-color 0.3s;
    text-align: left;
    height: 100%;
}

.tech-unified-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
}

.tech-icon-large {
    font-size: 2.5rem;
    color: var(--gold);
    margin-bottom: 25px;
    opacity: 0.8;
}

.tech-unified-card h3 {
    font-family: var(--font-head);
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #fff;
    font-weight: 700;
}

.tech-unified-card p {
    color: #999;
    font-size: 1rem;
    line-height: 1.6;
}

.navbar.scrolled {
    padding: 15px 0;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(212, 175, 55, 0.2);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

/* BRAND IDENTITY */
.brand-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 45px;
}

/* Logo Home Link */
.qa-home-link {
    text-decoration: none;
    color: inherit;
    font: inherit;
    display: inline-block;
}

/* Common Box Style */
.qa-box {
    border: 1px dashed var(--gold);
    background: rgba(0, 0, 0, 0.5);
    /* Slight tint */
    padding: 5px 8px;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.4rem;
    color: #fff !important;
    /* Force color during edit */
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 1px;
    text-transform: uppercase;
    /* V8: Force Uppercase */
    outline: none;
    /* V8: Remove default focus outline */
    caret-color: transparent;
    /* V9: Hide system caret */
}

/* Cursor Animation */
.cursor-blink {
    color: var(--gold);
    font-weight: 300;
    animation: blink-cursor 1s infinite steps(2, start);
    margin-left: 2px;
}

@keyframes blink-cursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Full Version */
.logo-full {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: left center;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
}

.brand-text span {
    font-family: var(--font-head);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}

/* Icon Version */
.logo-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* SCROLL BEHAVIOR (Managed via JS class .scrolled on navbar) */
.navbar.scrolled .logo-full {
    opacity: 0;
    transform: scale(0.9) translateX(-20px);
    pointer-events: none;
}

.navbar.scrolled .logo-icon {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* MOBILE OVERRIDE */
/* MOBILE OVERRIDE moved to end of file */

.mobile-overlay {
    display: none;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-item {
    text-decoration: none;
    color: #bbb;
    text-transform: uppercase;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 2px;
    position: relative;
    padding: 5px 0;
    transition: 0.3s;
}

.nav-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s;
}

.nav-item:hover {
    color: #fff;
}

.nav-item:hover::after {
    width: 100%;
}

.btn-login {
    background: linear-gradient(135deg, #222, #111);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 25px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 2px;
    font-weight: 700;
    border-radius: 4px;
    transition: all 0.3s;
}

.btn-login:hover {
    background: var(--gold-grad);
    color: #000;
    border-color: transparent;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

/* HERO */
/* HERO */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    position: relative;
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Symmetrical Professional Layout */
    gap: 0 60px;
    /* Zero vertical gap, 60px horizontal */
    /* Separación horizontal clara */
    max-width: 1400px;
    /* ALINEACIÓN CORREGIDA (antes 1200px) */
    /* Contenido contenido, no disperso */
    margin: 0 auto;
    padding: 0 5vw;
    align-items: center;
    width: 100%;
}



/* CONTENEDOR DE TEXTO (Bloque Izquierdo) */
.hero-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    /* Por encima de cualquier elemento flotante */
}

/* HERO MAIN TITLE (FULL WIDTH) */
.hero-main-title {
    grid-column: 1 / -1;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin-bottom: -60px;
    margin-top: 60px;
    background: linear-gradient(to right, #666 0%, #fff 50%, #666 100%);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s infinite linear;
    width: 100%;
    text-align: left;
}

/* ENGINEERING STEPS LIST */
.engineering-steps-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Base state for reveal on PC */
@media (min-width: 993px) {
    .eng-step {
        opacity: 0;
        transform: translateY(15px);
        transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1) !important;
        pointer-events: none;
    }

    .menu-engineering.phase-lift .eng-step:nth-child(1),
    .menu-engineering.phase-move .eng-step:nth-child(2),
    .menu-engineering.phase-final .eng-step:nth-child(3) {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.eng-step {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

.eng-step:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold);
    transform: translateX(10px);
}

.eng-num {
    background: var(--gold);
    color: #000;
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.8rem;
}

.eng-text {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.3;
}

.eng-text strong {
    color: #fff;
    font-weight: 700;
}

/* SECONDARY TITLE (The 2-col part) */
.hero-secondary-title {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: clamp(2.5rem, 4vw, 4.2rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-top: -25px;
    /* Moved up 25px on PC */
    margin-bottom: 25px;
    /* Unified Style with Main Header */
    background: linear-gradient(to right, #666 0%, #fff 50%, #666 100%);
    background-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 5s infinite linear;
}

.line-short {
    display: block;
    max-width: 85%;
    /* Staggered effect */
    margin-bottom: 30px;
    /* Separator for "Header" look */
}

.highlight {
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
    display: block;
    /* Force new line */
}

.highlight-silver {
    background: linear-gradient(to right, #666 0%, #fff 50%, #666 100%) !important;
    background-size: 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: shine 5s infinite linear !important;
}

/* ANIMACIÓN DE LEVITACIÓN (WOW FACTOR) */
.floating-wrapper {
    animation: float 6s ease-in-out infinite;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Align right to push against text */
    /* Padding removed for cleaner control */
    margin-left: -50px;
    /* Subtle, professional overlap */
    margin-top: 100px;
    /* Push down relative to text */
    position: relative;
    z-index: 1;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.hero-sub {
    color: #666666;
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 40px;
    display: block;
    line-height: 1.25;
    /* Reduced from 1.35 */
}

.hero-sub strong {
    color: #fff;
    font-weight: 400;
}

.hero-sub span {
    display: block;
    margin-bottom: 1px;
    /* Reduced from 2px */
}

.cta-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    margin-top: 10px;
    /* Moved down 10px on PC */
}

.gold-cta {
    position: relative;
    display: inline-block;
    padding: 15px 35px;
    /* Reduced from 20px 45px */
    background: var(--gold-grad);
    color: #000;
    text-decoration: none;
    /* clip-path removed to prevent jitter */
    /* clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); */
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.3);
    overflow: hidden;
}

.gold-cta:hover {
    transform: scale(1.05);
}

.btn-content {
    position: relative;
    z-index: 2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    /* Reduced from 0.9rem */
}

.shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    100% {
        left: 200%;
    }
}

.whatsapp-tag {
    font-family: var(--font-head);
    font-size: 0.75rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 600;
}

.whatsapp-tag .icon {
    color: #25D366;
    font-size: 0.6rem;
    animation: pulse 2s infinite;
}

/* 3D MOCKUP */
.phone-frame {
    width: 290px;
    /* Smaller as requested (340 - 50) */
    height: auto;
    aspect-ratio: 300 / 580;
    /* Classic Ratio */
    max-width: 85vw;
    /* Safe margin on mobile */
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 40px;
    /* Rescale radius slightly */
    position: relative;
    overflow: hidden;
    transform: rotate(-5deg);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9);
    /* Deep shadow */
    margin: 0 auto;
    padding: 12px;
    box-sizing: border-box;
}

.hero-visual:hover .phone-frame {
    transform: rotate(0deg) scale(1.02);
}

.screen-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: #000;
}

.chef-signature {
    font-family: var(--font-serif);
    color: var(--gold);
    font-style: italic;
    margin-bottom: 10px;
}

.screen-content h3 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.dish-price {
    font-size: 1.5rem;
    font-weight: 700;
}

/* MARQUEE (Loop Infinito Perfecto) */
.marquee-clean {
    background: #000;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 15px 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 5;
    display: flex;
    /* Flex para el track */
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee 40s linear infinite;
    /* Más lento para elegancia */
    width: fit-content;
    /* Se ajusta al contenido */
}

.marquee-track span {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #444;
    padding-right: 0;
    /* Ya incluido en el HTML (&nbsp;) */
    display: block;
}

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

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

    /* Mueve exactamente la mitad */
}

/* Optimizado */

/* MANIFESTO */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #080808;
    min-height: 700px;
    width: 100%;
}

.split-visual {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.parallax-img {
    width: 100%;
    height: 110%;
    object-fit: cover;
    object-position: center;
}

.split-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
    position: relative;
}

.section-label {
    font-size: 0.7rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
    border: 1px solid var(--gold);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    width: fit-content;
}

.split-content h2 {
    font-family: var(--font-head);
    font-size: clamp(3rem, 6vw, 5rem);
    /* Increased size */
    line-height: 0.9;
    margin-bottom: 10px;
}

.outline-text {
    font-family: var(--font-head);
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 0.9;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
    color: transparent;
    margin-bottom: 30px;
}

.highlight-p {
    color: #fff;
    font-size: 1.1rem;
    border-left: 2px solid var(--gold);
    padding-left: 20px;
    margin-left: 5px;
}

/* STEPS */
.steps-section {
    padding: 100px 0;
    width: 100%;
}

.section-title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 3vw, 3.5rem);
    margin-bottom: 60px;
    letter-spacing: -1px;
}

.center {
    text-align: center;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
}

.step-card {
    background: var(--bg-card);
    padding: 40px 30px;
    border-radius: 10px;
    border: 1px solid #222;
    transition: 0.3s;
}

.step-card:hover {
    border-color: var(--gold);
    transform: translateY(-10px);
}

.step-icon {
    font-family: var(--font-head);
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 20px;
    opacity: 0.5;
}

.step-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.step-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* CINEMATIC */
.cinematic-section {
    padding: 120px 0;
    width: 100%;
}

.feature-row {
    display: grid;
    /* GRID REAL solicitado */
    grid-template-columns: 1fr 1fr;
    /* Dos columnas iguales */
    max-width: 1400px;
    /* Alineación global con Header */
    margin: 0 auto;
    gap: 80px;
    /* Gap generoso solicitado */
    padding: 0 5vw;
    align-items: start;
}

.feature-item {
    position: relative;
    padding-top: 20px;
    /* Más aire superior */
    text-align: left;
}

.big-num-outline {
    font-family: var(--font-head);
    font-size: 8rem;
    line-height: 0.8;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
    /* Más sutil */
    position: absolute;
    top: -50px;
    left: -10px;
    /* Leve ajuste visual */
    z-index: 0;
    transition: 0.5s;
    opacity: 0.6;
    /* Hacemos el número menos intrusivo por defecto */
}

/* Efecto de iluminación al scroll */
.big-num-outline.illuminate {
    -webkit-text-stroke: 1px var(--gold);
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(211, 175, 55, 0.4));
    transform: scale(1.1);
}

/* ELIMINADO: .right .big-num-outline { left: auto; right: 0; } */

.feature-item:hover .big-num-outline {
    -webkit-text-stroke: 1px var(--gold);
    opacity: 0.8;
}

.feature-item h3 {
    font-family: var(--font-head);
    font-size: 2.8rem;
    font-weight: 800;
    /* Bold claro */
    text-transform: uppercase;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.feature-item p {
    color: #999;
    /* Mejor contraste */
    font-size: 1.1rem;
    line-height: 1.6;
    /* Lectura facilitada */
    position: relative;
    z-index: 1;
    max-width: 500px;
    /* Permitimos más ancho al haber más gap */
    margin: 0;
}

/* ELIMINADO: .feature-item.right p { margin-left: auto; } */

/* COMPARISON */
.comparison-section {
    padding: 100px 0 80px;
    width: 100%;
}
#comparison .section-title {
    margin-bottom: 30px; /* Reducido a la mitad (antes heredaba 60px) */
}

.mobile-legend {
    display: none;
    /* Oculto en PC */
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.legend-item {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.legend-item .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
}

.legend-item .dot.red {
    background: #ff4444;
}

.legend-item .dot.gold {
    background: var(--gold);
}

.comparison-table {
    max-width: 1000px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 20px;
    width: 100%;
}

.comp-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    padding: 18px 30px;
    gap: 40px;
    margin-bottom: 10px;
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    align-items: center;
    transition: all 0.3s ease;
}

.comp-row.header {
        margin-bottom: 5px; /* Acerca los títulos a los datos */
    }

.comp-row:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: #161616;
    transform: translateX(10px);
}

.header {
    background: transparent;
    border: none;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header .comp-col {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    letter-spacing: 2px;
}

.comp-col:nth-child(1) {
    color: var(--gold);
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.comp-col:nth-child(2) {
    color: #ff6666;
    text-align: center;
}

.comp-col:nth-child(3) {
    color: #fff;
    text-align: center;
    font-weight: 600;
}

.comp-col strong {
    color: inherit;
    font-size: 1rem;
}

/* PRICING */
.pricing-section {
    padding: 100px 0 150px;
    text-align: center;
    position: relative;
    width: 100%;
}

.background-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    perspective: 1000px;
    position: relative;
    z-index: 2;
}

.credit-card {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 500px;
    border-radius: 24px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.3s;
    position: relative;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gold-card {
    background: linear-gradient(135deg, #111, #0a0a0a);
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.gold-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.card-top {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    letter-spacing: 2px;
    color: #666;
    font-size: 0.8rem;
    margin-bottom: 40px;
}

.gold-card .card-top {
    color: var(--gold);
}

.card-number {
    font-family: monospace;
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: #fff;
    margin-bottom: 40px;
    opacity: 0.8;
    word-break: break-all;
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.label {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
}

.col strong {
    font-size: 0.9rem;
}

.card-list {
    list-style: none;
    padding: 0;
    margin-bottom: auto;
}

.card-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 0;
    color: #aaa;
    font-size: 0.9rem;
}

.gold-card .card-list li {
    color: #ddd;
    border-color: rgba(255, 255, 255, 0.1);
}

.card-btn {
    text-align: center;
    padding: 15px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.8rem;
    margin-top: 30px;
    transition: 0.3s;
}

.glass-card .card-btn {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
}

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

.gold-btn {
    background: var(--gold-grad);
    color: #000;
    border: none;
}

.gold-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

footer {
    padding: 60px 0;
    border-top: 1px solid #222;
    text-align: center;
    color: #888;
    width: 100%;
}

.footer-content .logo {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

/* --- FAQ SECTION --- */
.faq-accordion {
    width: 100%;
}

.faq-item {
    border-bottom: 1px solid #333;
    padding: 20px 0;
    cursor: pointer;
}

.faq-question h3 {
    font-size: 1.2rem;
    font-family: var(--font-head);
    margin: 0;
    color: #eee;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer p {
    margin-top: 15px;
    color: #999;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    /* Suficiente para el contenido */
}

.faq-item.active .fa-plus {
    transform: rotate(45deg);
}

/* ANIMACIONES */
.reveal-right,
.reveal-left,
.reveal,
.reveal-down {
    opacity: 0;
    transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
}

.reveal-right {
    transform: translateX(-30px);
}

.reveal-left {
    transform: translateX(30px);
}

.reveal-down {
    transform: translateY(-20px);
}

.reveal {
    transform: translateY(30px);
}

.active {
    opacity: 1;
    transform: translate(0);
}

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

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

.delay-3 {
    transition-delay: 0.6s;
}

/* UTILITIES */
.text-nowrap {
    white-space: nowrap;
}

/* =========================================
   CLIENT AREA (Pre-Dashboard)
   ========================================= */
.client-body {
    background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
    top: 0 !important;
}

/* CLIENT HERO SECTION (Home Clone) */
.client-hero-section {
    min-height: auto !important;
    /* Override full height, keep padding */
    display: block;
    /* Remove flex center alignment if needed, or keep flex but align left */
    /* .hero already provides padding: 140px 0 80px */
}

.client-hero-section .container {
    padding-top: 0 !important;
    padding: 0 5vw !important;
    /* Alignment fix: 5vw desktop */
    text-align: left;
}

/* CLIENT TITLE (Home Clone Typography - Desktop Defaults) */
.client-title {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--text-white);
    text-transform: uppercase;
    line-height: 1.1;
    text-align: left;
    margin: 0;
    font-size: 3.5rem;
    /* Desktop default */
    padding-left: 0;
}

.power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 40px auto 0 auto;
    /* Margin top 40px added */
    width: 100%;
    padding: 20px;
}

.power-card {
    background: linear-gradient(145deg, #111, #0a0a0a);
    border-radius: 20px;
    padding: 40px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

@keyframes gold-pulse {
    0% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
    }

    100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.2);
    }
}

.client-body .nav-right .btn-login {
    animation: gold-pulse 3s infinite ease-in-out;
    border-color: rgba(212, 175, 55, 0.5) !important;
    transition: all 0.3s ease;
}

.power-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 25px;
    color: #444;
    transition: 0.3s;
}

.power-card h2 {
    font-family: var(--font-head);
    font-size: 2.2rem;
    /* Increased from 1.8rem */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.power-card p {
    color: #666;
    font-size: 0.9rem;
}

/* Variant A: Editor */
.power-card.editor {
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.power-card.editor:hover {
    border-color: var(--gold);
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.15);
}

.power-card.editor:hover .card-icon {
    color: var(--gold);
}

/* Variant B: Management */
.power-card.management {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.power-card.management:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.power-card.management:hover .card-icon {
    color: #fff;
}

/* MODAL DEL EDITOR */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    /* Fix: Above everything */
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: opacity 0.3s ease;
    cursor: auto !important;
    /* Fix for missing cursor */
}

/* Force system cursor inside modal elements */
.modal-overlay * {
    cursor: auto !important;
}

.modal-content {
    background: #1a1a1a;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #333;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    pointer-events: auto;
    /* Ensure content is interactive */
}

/* LOGIN MODAL */
.login-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.login-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.login-box {
    background: #111;
    border: 1px solid var(--gold);
    padding: 50px;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

/* SHAKE ANIMATION & PREMIUM ERROR */
@keyframes shake-modal {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    50% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-10px);
    }

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

.modal-shake .modal-content {
    animation: shake-modal 0.4s ease-in-out;
    border-color: #ff4444 !important;
}

.error-premium {
    margin-top: 20px;
    padding: 20px;
    background: rgba(255, 68, 68, 0.1);
    border: 1px solid #ff4444;
    border-radius: 8px;
    color: #ffcccc;
    animation: fadeIn 0.3s ease;
}

.gold-x-icon {
    font-size: 3rem;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.retry-btn {
    margin-top: 15px;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.retry-btn:hover {
    background: var(--gold);
    color: #000;
}



.login-modal-overlay.active .login-box {
    transform: scale(1);
}

.login-title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    letter-spacing: 2px;
}

.login-form input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    padding: 15px 0;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: 0.3s;
}

.login-form input:focus {
    border-color: var(--gold);
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #666;
    font-size: 1.2rem;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #fff;
}



@media (max-width: 380px) {
    h1.spotlight-text {
        font-size: 1.5rem;
    }

    /* Letra pequeña para pantallas mini */
    .section-title {
        font-size: 1.6rem;
    }

    .phone-frame {
        max-width: 220px;
    }
}

/* =========================================
   FACTURAS PAGE STYLES (Lujo Industrial)
   ========================================= */

/* Sincronización para PC */
.client-body .container {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
    max-width: 1400px;
    margin: 0 auto;
}

/* BACK LINK */
.back-link {
    display: inline-block;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.back-link:hover {
    color: #fff;
    opacity: 1;
    transform: translateX(-5px);
}

/* INFO CONTAINER GRID (Desktop Defaults - 2 Cols) */
.info-container {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Cols for Profile & Fiscal */
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    /* Maximize screen usage */
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-block {
    border-left: 2px solid var(--gold);
    /* Increased width for visibility */
    padding-left: 20px;
    transition: 0.3s;
}

.info-block:hover {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, transparent 100%);
}

.info-label {
    font-size: 0.7rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    font-weight: 600;
}

.info-value {
    font-size: 1.2rem;
    color: var(--text-white);
    font-family: var(--font-body);
    font-weight: 400;
}

/* INVOICE LIST */
.invoice-list {
    margin-top: 50px;
    max-width: 800px;
    /* Limit width for readability */
}

.invoice-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #222;
    transition: all 0.3s ease;
    cursor: pointer;
}

.invoice-item:hover {
    border-bottom-color: var(--gold);
    background: rgba(255, 255, 255, 0.02);
    padding-left: 10px;
    /* Subtle movement */
    padding-right: 10px;
    cursor: default;
    /* Remove default pointer/help cursor */
}



/* =========================================
   ADMIN CONTROLS (Floating)
   ========================================= */
/* =========================================
   ADMIN & EDITOR CONTROLS
   ========================================= */
.admin-controls,
#admin-controls {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    display: none;
    /* Hidden by default, shown via .mode-editing or logic */
    flex-direction: column;
    gap: 15px;
}

@media (max-width: 900px) {

    .admin-controls,
    #admin-controls {
        bottom: 20px;
        right: 20px;
    }
}

.admin-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #111;
    border: 1px solid var(--gold);
    color: var(--gold);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
}

.admin-btn:hover {
    background: var(--gold);
    color: #000;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    transform: scale(1.1) rotate(5deg);
}

.admin-btn.primary {
    background-color: var(--gold);
    color: #000;
}

.admin-btn.save {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.admin-btn.editing {
    background-color: var(--gold);
    box-shadow: 0 0 15px var(--gold);
}

/* Tooltip for buttons */
.admin-btn::after {
    content: attr(title);
    position: absolute;
    right: 70px;
    background: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s;
    font-family: var(--font-body);
    white-space: nowrap;
}

.admin-btn:hover::after {
    opacity: 1;
    right: 75px;
}

/* Delete Button on Items */
.delete-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--bg-card);
    font-size: 0.9rem;
    z-index: 10;
}

.mode-editing .delete-btn {
    display: flex;
    animation: popIn 0.3s ease;
}

.delete-btn:hover {
    background-color: #d32f2f;
    transform: scale(1.1);
}

/* Add Item Button */
.add-item-container {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.mode-editing .add-item-container {
    display: flex;
}

.add-item-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--gold);
    border: 2px dashed var(--gold);
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.add-item-btn:hover {
    background-color: rgba(212, 175, 55, 0.1);
    transform: scale(1.1);
}

/* ADMIN MODE CONTROL LOGIC */
.mode-editing .admin-controls,
.mode-editing #admin-controls {
    display: flex !important;
}

/* MODE EDITING STYLES (Strict for Data) */
.mode-editing .info-value {
    outline: 2px dashed var(--gold);
    outline-offset: 10px;
    cursor: text;
    background: rgba(212, 175, 55, 0.05);
    position: relative;
    border-radius: 4px;
}

.mode-editing .info-value::after {
    content: "\f303";
    /* Pen icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 0.8rem;
    color: var(--gold);
    background: #000;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* TOAST NOTIFICATION */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #111;
    border: 1px solid var(--gold);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10000;
    white-space: nowrap;
}

.toast-notification.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast-notification i {
    color: var(--gold);
}


/* TECHNOLOGY SECTIONS (Zero-Wait & Compression) */
.tech-section {
    position: relative;
    background: radial-gradient(circle at 50% 50%, #0a0a0a 0%, #000 100%);
    min-height: 80vh;
    padding: 120px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Fix V15: Synchronize scroll rhythm (4 points) on PC */
@media (min-width: 993px) {
    .compression-section {
        padding-bottom: 60px !important;
        /* Reduced from 120px */
    }
}

/* Magic Section Bleed */
.tech-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to bottom, transparent, #000);
    z-index: 5;
    pointer-events: none;
}

.tech-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
}

.tech-glow {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(60px);
    z-index: 1;
}

.tech-glow.glow-reverse {
    left: 80%;
}

.menu-engineering .tech-glow {
    left: 75% !important;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.18) 0%, transparent 70%) !important;
}

.tech-header-block {
    border-left: 4px solid var(--gold);
    padding-left: 30px;
    margin-bottom: 30px;
    text-align: left;
    /* Base reset for scrollytelling sections */
}

/* Fix V12: Disable entrance animation for Menu Engineering PC */
.menu-engineering .tech-header-block {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.tech-label {
    display: inline-block;
    font-family: 'Syne', sans-serif;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.tech-title,
.challenge-main-title {
    font-family: 'Syne', sans-serif;
    font-size: 5rem;
    /* Massive size for PC */
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    letter-spacing: -1px;
    /* Reduced from 15px for a tighter, modern look */
    margin-bottom: 25px;
    text-transform: uppercase;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.05);
}

.tech-subtitle,
.challenge-subtitle {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 40px;
    opacity: 0.9;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* Magic Shimmer Effect */
.challenge-subtitle {
    background: linear-gradient(90deg, var(--gold) 0%, #fff 50%, var(--gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    /* Standard property */
    -webkit-text-fill-color: transparent;
    animation: gold-shimmer 4s linear infinite;
}

@keyframes gold-shimmer {
    to {
        background-position: 200% center;
    }
}

.tech-copy {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #aaa;
    line-height: 1.8;
}

.tech-copy p {
    margin-bottom: 25px;
}

.tech-copy strong {
    color: #fff;
    font-weight: 600;
}

.impact-text {
    font-size: 1.2rem;
    color: #fff;
    border-left: 2px solid var(--gold);
    padding-left: 20px;
    margin-top: 40px;
}

/* VISUAL ELEMENTS */
.tech-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Lightning Evolution */
.lightning-bolt {
    width: 280px;
    /* Doubled size */
    height: 280px;
    position: relative;
    filter: drop-shadow(0 0 50px rgba(212, 175, 55, 0.6));
    perspective: 1000px;
}

.lightning-bolt::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    animation: pulse-ring 3s infinite ease-out;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.lightning-bolt svg {
    width: 100%;
    height: 100%;
    animation: lightning-strike 2s infinite ease-in-out;
}

@keyframes lightning-strike {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }

    5% {
        opacity: 1;
        transform: scale(1.15) skewX(-15deg) rotate(5deg);
        filter: brightness(2) drop-shadow(0 0 80px var(--gold));
    }

    10% {
        opacity: 0.9;
        transform: scale(1.05) rotate(-2deg);
        filter: brightness(1.3);
    }
}

/* Scanline Animation */
.retina-image-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
}

.retina-image {
    width: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.9;
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.retina-image-container:hover .retina-image {
    transform: scale(1.05);
}

.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    z-index: 5;
    animation: scan 3s infinite linear;
    opacity: 0.6;
}

@keyframes scan {
    0% {
        top: -10%;
    }

    100% {
        top: 110%;
    }
}


.tech-content,
.tech-visual {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
    /* Premium blur start */
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.tech-section.reveal-active .tech-content,
.tech-section.reveal-active .tech-visual {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.tech-section.reveal-active .tech-visual {
    transition-delay: 0.3s;
    transform: scale(1.05) translateY(0);
    /* Subtle scale up on reveal */
}

/* --- MENU ENGINEERING SCROLL ANIMATION (REFINED) --- */
.menu-engineering {
    position: relative;
    height: 200vh;
    /* Track for scrollytelling */
    overflow: visible;
    z-index: 5;
    margin-top: 100;
    display: block !important;
    padding: 0 !important;
    background: #000;
}

/* Fix V15: Synchronize scroll rhythm (4 points) on PC */
@media (min-width: 993px) {
    .menu-engineering {
        margin-top: 20px !important;
        /* Replaced variable 5vh with fixed small gap */
    }
}

/* Scrollytelling Setup */
.menu-engineering .tech-container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 5vw !important;
    height: 100vh;
    display: flex;
    align-items: center;
    /* Center content vertically on PC */
    justify-content: space-between;
    position: sticky;
    top: 40px;
    /* Higher brake for faster appearance (V15) */
    margin: 0;
}

/* Hide text temporarily or overlay it? User said "experience full screen" */
/* Let's keep side-by-side but make visual HUGE */
.menu-engineering .tech-content {
    flex: 0 0 45%;
    padding-left: 5vw;
    /* Alineado con el margen del logo */
    align-self: center;
    /* Centrado vertical con la imagen */
}

.menu-engineering .tech-visual {
    flex: 0 0 50%;
    /* Menos ancho */
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centrado vertical */
    max-width: 600px;
    /* No se sale de la pantalla */
    margin-right: 5vw;
    /* Margen de seguridad a la derecha */
}

.engineering-scene-wrapper {
    position: relative;
    height: 55vh;
    /* Mucho más pequeño y elegante */
    width: 100%;
    aspect-ratio: 4/3;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fix V16: Floor Glow/Reflection Effect */
.engineering-scene-wrapper::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.15) 0%, transparent 70%);
    filter: blur(15px);
    z-index: 1;
    pointer-events: none;
}

/* RESPONSIVE FULL WIDTH ADAPTATION */
@media (max-width: 1200px) {
    .menu-engineering .tech-container {
        flex-direction: column-reverse;
        /* Text on top? Or keep Row but smaller? User said "fluid" */
        /* Let's keep row but shrink text */
        justify-content: space-between;
    }

    .menu-engineering .tech-content {
        flex: 0 0 40%;
        /* More relative space for text */
        z-index: 30;
        /* Ensure on top */
        background: rgba(0, 0, 0, 0.6);
        /* Readability if overlap */
        padding: 20px;
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

    .engineering-scene-wrapper {
        height: 70vh;
        /* Reduce height to fit comfortably */
        max-width: 100%;
    }
}

/* 4. LUXURY TRANSITIONS */
.scene-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 10;
}

.floating-top {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    z-index: 50;
    opacity: 0;
}

/* Layer Stacking Defaults */
.layer-1 {
    opacity: 1;
    z-index: 10;
}

.layer-2 {
    opacity: 0;
    z-index: 5;
}

.layer-3 {
    opacity: 0;
    z-index: 15;
}

/* Floating element shadow refinement V18 */
.floating-top {
    filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.4)) drop-shadow(0 15px 30px rgba(212, 175, 55, 0.25));
}


/* ANIMATION STATES (Controlled by JS) */

/* Phase 2: LIFT (Show Void + Lift Item) */
.menu-engineering.phase-lift .layer-1 {
    opacity: 0;
}

.menu-engineering.phase-lift .layer-2 {
    opacity: 1;
}

.menu-engineering.phase-lift .floating-top {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
    /* Un pelo más pequeño como se pidió */
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.9));
    /* ILUMINACIÓN REFORZADA */
}

.menu-engineering.phase-move .floating-top {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(-27%) scale(1.02);
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 1));
    /* BRILLO MÁXIMO EN MOVIMIENTO */
}

/* Phase 3: TRAVEL (Shift Left) */
.menu-engineering.phase-move .layer-1 {
    opacity: 0;
}

.menu-engineering.phase-move .layer-2 {
    opacity: 1;
}

/* DUPLICATE REMOVED to allow user's custom rule above to work */


/* Phase 4: CLOSE (Instant Swap) */
.menu-engineering.phase-final .floating-top {
    opacity: 0;
    /* transition: none; REMOVED to fix flicker */
}

.menu-engineering.phase-final .layer-1,
.menu-engineering.phase-final .layer-2 {
    opacity: 0;
}

.menu-engineering.phase-final .layer-3 {
    opacity: 1;
    z-index: 60;
}

/* Top of everything */



.challenge-section {
    background: #000;
    width: 100%;
    height: auto;
    /* Altura natural para que termine justo con las escenas */
    min-height: 0;
    position: relative;
    overflow: visible;
}

.challenge-header {
    width: 100%;
    padding: 60px 5vw 40px;
    /* Reducido un poco para ajustar el balance */
    background: #000;
    position: relative;
    z-index: 20;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}


.challenge-scrolly-grid {
    display: flex;
    width: 100%;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.future-scenes-wrapper {
    flex: 1;
    position: relative;
    z-index: 10;
}

/* Cada diapositiva dura 1 pantalla, excepto la primera que pausamos 2 scrolls */
.future-scene {
    min-height: 100vh;
    width: 100%;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.future-scene[data-scenario="0"] {
    min-height: 120vh;
    /* La primera escena se mantiene igual */
}

.future-scene[data-scenario="1"] {
    min-height: 220vh;
    /* Aumentamos el recorrido de la SEGUNDA escena */
}

.scene-sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    /* Unificado con el lado derecho */
    height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Alineado arriba */
    align-items: center;
    padding: 80px 5vw 20px;
    /* Padding unificado */
}

.past-sticky-wrapper {
    flex: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    /* Subido de 180px para que el texto frene más arriba */
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 50;
}

.replay-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--gold);
    color: var(--gold);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    pointer-events: none;
}

.replay-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.replay-btn:hover {
    background: var(--gold);
    color: #000;
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.challenge-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 4vw 40px;
    /* Reduced bottom padding from 80px */
    position: relative;
    min-height: 70vh;
    /* Reduced from 90vh to remove excess space */
}

.challenge-side.future-side {
    background: #000;
    /* Added border to the left side */
    justify-content: flex-end;
    /* Align towards center */
    padding-right: 5vw;
    opacity: 0;
    transform: translateX(-20px);
    /* Slide from left */
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.challenge-side.past-side {
    background: transparent;
    justify-content: flex-start;
    padding-left: 5vw;
    padding-top: 80px;
    /* Mantiene el "nacer abajo" pero alineado matemáticamente con el lado izquierdo (180+80 = 80+180) */
    width: 100%;
}

.challenge-side.future-side.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.challenge-side.past-side.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.side-content {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.side-header {
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.individual-scenario {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);

    /* Sticky Magic - Cada uno vive dentro de su escena */
    position: -webkit-sticky;
    position: sticky;
    top: 90px;
    z-index: 2000;

    /* Alineación */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: left;
    padding: 10px 5vw;
    background: #000;
    /* Opaco para evitar fantasmas en la transición */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;

    /* Ajuste de posición dentro de la escena */
    margin-bottom: 20px;
    transition: all 0.4s ease;
}



/* Pseudo-borde para no romper el flex */
.individual-scenario::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.5rem;
    background: var(--gold);
    margin-right: 15px;
}

.side-label {
    display: block;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 4px;
    margin: 0;
    height: 14px;
    /* Fixed height for alignment */
    opacity: 0.4;
    color: #fff;
}

.dual-timer {
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    margin-top: 30px;
    /* Esto crea el hueco justo encima de los números */
    margin-bottom: 20px;
    /* Reduced to leave space for text above video */
    height: 80px;
    /* Fixed height for clock alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
    min-width: 8ch;
    transition: color 0.3s;
}

#timer-past {
    color: #444;
}

#timer-future.future-active {
    color: var(--gold);
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.past-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-top: 110px;
}

.past-list li {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 20px;
    position: relative;
    display: table;
    /* Fit width to text for clean line */
    transition: all 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
}

.past-list li.revealed {
    opacity: 1;
    transform: translateY(0);
}

.past-list li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 55%;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}


.past-list li.struck-through::after {
    width: 100%;
}

.video-placeholder-wrapper {
    width: 250px;
    /* Slightly smaller as requested */
    height: 444px;
    /* 16:9 ratio (250 * 16 / 9) */
    margin: 0 auto 30px;
    border: 10px solid #1a1a1a;
    /* Thinner phone frame */
    border-radius: 36px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.1);
    position: relative;
}

/* Reducción específica para las escenas 0 y 1 solicitada por el usuario */
.future-scene[data-scenario="0"] .video-placeholder-wrapper,
.future-scene[data-scenario="1"] .video-placeholder-wrapper {
    width: 210px;
    height: 373px;
}

/* Speaker gap for mobile aesthetic */
.video-placeholder-wrapper::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    z-index: 10;
}

.video-container {
    width: 100%;
    height: 100%;
    background: #000;
}

.video-container video,
.video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the frame */
}

.panic-text {
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
    opacity: 0.8;
}

/* =========================================
   UNIFIED MOBILE & TABLET (v4.3 FIXED)
   ========================================= */
@media (max-width: 992px) {

    /* RESET & SCROLL */
    html,
    body {
        touch-action: auto !important;
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    /* NAVBAR COMPACTA */
    .navbar {
        padding: 10px 0 !important;
        background: rgba(5, 5, 5, 0.95) !important;
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(212, 175, 55, 0.2);
        z-index: 4000 !important;
        /* ABOVE OVERLAY */
    }

    .nav-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
        width: 100% !important;
    }

    .logo-icon {
        display: flex !important;
        transform: scale(0.85) !important;
        transform-origin: left center;
        position: relative !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        margin: 0 !important;
    }

    .logo-full {
        display: none !important;
    }

    .nav-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 15px;
    }

    /* HERO: ESTILO REFINADO */
    .hero {
        padding: 55px 0 50px !important;
        /* Final push upwards house */
        min-height: auto !important;
        display: flex !important;
    }

    .hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 0 !important;
    }

    h1.hero-main-title {
        font-size: clamp(1.5rem, 8vw, 2.8rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0px !important;
        margin-top: 50px !important;
        text-align: left !important;
        transform: none !important;
        letter-spacing: -1.5px !important;
        /* Compacting slightly to fit on one line */
        overflow-wrap: break-word;
        /* Safety: wrap if still too long */
        /* FORCING SILVER house */
        background: linear-gradient(to right, #666 0%, #fff 50%, #666 100%) !important;
        background-size: 200% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        animation: shine 5s infinite linear !important;
    }

    .hero-secondary-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        margin-bottom: 30px !important;
        text-align: left !important;
        display: block !important;
        /* FORCING SILVER house */
        background: linear-gradient(to right, #666 0%, #fff 50%, #666 100%) !important;
        background-size: 200% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        animation: shine 5s infinite linear !important;
    }

    .hero-sub {
        font-size: 1rem !important;
        text-align: left !important;
        margin-bottom: 40px !important;
        max-width: 100% !important;
    }

    .cta-wrapper {
        align-items: flex-start !important;
        width: 100%;
    }

    .gold-cta {
        width: 100%;
        text-align: center;
        padding: 18px 30px !important;
    }

    /* TECH & CHALLENGE SECTIONS */
    .tech-container,
    .challenge-scrolly-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        text-align: center !important;
    }

    .tech-title {
        font-size: 2.2rem !important;
        margin-bottom: 15px !important;
    }

    .tech-subtitle {
        font-size: 1.2rem !important;
        margin-bottom: 25px !important;
    }

    .tech-visual {
        margin-top: 30px;
        order: 2;
    }

    .tech-content {
        order: 1;
    }

    .dual-timer {
        font-size: 2.5rem !important;
        height: auto !important;
        margin-top: 15px !important;
    }

    .video-placeholder-wrapper {
        width: 250px !important;
        height: 320px !important;
        margin-top: 20px !important;
    }

    /* COMPARISON */
    .comparison-table {
        padding: 20px !important;
        overflow-x: hidden !important;
        background: transparent !important;
        border: none !important;
    }

    .comp-row {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        border: 1px solid #222;
        padding: 25px !important;
        margin-bottom: 20px;
        border-radius: 16px;
        background: #0a0a0a;
        min-width: 0 !important;
        text-align: left !important;
    }

    .comp-row.header {
        display: none !important;
    }

    .comp-col:first-child {
        font-weight: 800;
        color: var(--gold);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 5px;
    }

    .comp-col:nth-child(2),
    .comp-col:nth-child(3) {
        text-align: left !important;
        padding-left: 0;
        font-size: 1rem;
    }

    .comp-col:nth-child(2) {
        color: #ff6666;
    }

    .comp-col:nth-child(3) {
        color: #fff;
        font-weight: 600;
    }

    /* PRICING */
    .cards-container {
        gap: 25px !important;
        padding: 0 10px;
    }

    .credit-card {
        padding: 30px !important;
        min-height: auto !important;
        width: 100% !important;
    }

    /* VISUAL ELEMENTS */
    .hero-visual {
        order: 2;
        width: 100% !important;
        margin-top: 10px !important;
        /* Pulling closer to content house house house house house house house house house house house 2 house house house house house house house house */
        display: flex !important;
        justify-content: center !important;
        /* Centering horizontally house house house house house house house house house house house 2 house house house house house house house house */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* Enable interaction for tilt if needed */
    }

    .phone-frame {
        max-width: 280px !important;
        /* Slightly larger for better visibility */
        transform: rotate(-5deg) translateY(0) !important;
        transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
        margin: 0 auto !important;
        /* Centering the frame itself house house house house house house house house house house house 2 house house house house house house house house */
    }

    .phone-frame.scroll-straight {
        transform: rotate(0deg) translateY(0) !important;
    }
}

/* DEEP MOBILE REFINEMENTS (< 480px) */
@media (max-width: 480px) {
    .navbar {
        padding: 8px 0 !important;
    }

    h1.hero-main-title {
        font-size: 1.4rem !important;
        letter-spacing: -0.5px !important;
    }

    .hero-secondary-title {
        font-size: 1.3rem !important;
    }

    .step-card {
        padding: 30px 20px !important;
    }

    .feature-item h3 {
        font-size: 1.8rem !important;
    }
}

/* FIXED HERO TAGLINE */
.hero-tagline {
    font-family: var(--font-body);
    font-size: 0.75rem;
    opacity: 0.9;
    display: block;
    margin-top: 20px;
    -webkit-text-fill-color: #ddd;
    color: #ddd;
    letter-spacing: 4px;
    font-weight: 600;
    text-transform: uppercase;
    animation: none !important;
    background: none !important;
}

/* Utility to hide mobile-only elements on desktop */
.mobile-only {
    display: none;
}

/* Desktop Grid Helper */
.desktop-only-grid {
    display: grid;
}

/* Import Mobile Styles at the end */
@import url('mobile-styles.css');

/* 
   RESTORED DESKTOP CHALLENGE CSS (SCROLLYTELLING) 
   From backup cs3/styles.css 
*/

.challenge-section {
    background: #000;
    width: 100%;
    height: auto;
    min-height: 0;
    position: relative;
    overflow: visible;

}

.challenge-header {
    width: 100%;
    padding: 60px 5vw 40px;
    background: #000;
    position: relative;
    z-index: 20;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.challenge-scrolly-grid {
    display: flex;
    width: 100%;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.future-scenes-wrapper {
    flex: 1;
    position: relative;
    z-index: 10;
}

.future-scene {
    min-height: 100vh;
    width: 100%;
    position: relative;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.future-scene[data-scenario="0"] {
    min-height: 120vh;
    /* La primera escena mantiene su ritmo */
}

.future-scene[data-scenario="1"] {
    min-height: 120vh;
    /* Aumentamos drásticamente la "pista" de la segunda escena */
}

.scene-sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 80px 5vw 20px;
}

.past-sticky-wrapper {
    flex: 1;
    position: -webkit-sticky;
    position: sticky;
    top: 150px;
    /* Aligned with Left Side (150px) */
    height: calc(90vh - 100px);
    /* Adjusted for visual balance */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 50;
}

.challenge-side {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 4vw 40px;
    position: relative;
    min-height: 70vh;
}





.side-content {
    max-width: 450px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.side-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.side-label {
    font-family: var(--font-head);
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.individual-scenario {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: var(--font-head);
    font-size: 1.2rem;
    color: var(--gold);
    opacity: 0.5;
    z-index: 5;
}

.dual-timer {
    font-family: 'Courier New', monospace;
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -2px;
    line-height: 1;
    text-shadow: 0 0 50px rgba(255, 255, 255, 0.4);
    transition: all 0.3s;
}

.dual-timer.future-active {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.past-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.past-list li {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s ease-out;
}

.past-list li::before {
    content: '✖';
    color: #ff4444;
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.9rem;
}

.past-list li.revealed {
    opacity: 1;
    transform: translateX(0);
}

.video-placeholder-wrapper {
    width: 100%;
    aspect-ratio: 9/16;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
}

.video-container {
    width: 100%;
    height: 100%;
    position: relative;
}

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

/* FIX: Move "OCULTAR UN PLATO" label 100px higher */
#scenario-label-0 {
    top: -90px !important;
    margin-top: 80px;
}

/* FIX: Move "CAMBIAR UN PRECIO" label 100px higher */
#scenario-label-1 {
    top: -90px !important;
    z-index: 2005;
    margin-top: 80px;
    margin-bottom: 60px;
}

/* =========================================
   DESKTOP CHALLENGE VIDEO REFINEMENTS
   (Simulating Mobile Smartphone Look)
   ========================================= */

/* Ensure the video container looks like a modern smartphone */
.desktop-only-grid .video-placeholder-wrapper {
    width: 100% !important;
    max-width: 300px;
    /* Slightly smaller as requested */
    height: auto !important;
    /* Override fixed height */
    aspect-ratio: 9/15.2 !important;
    /* Lowered to match shorter video */
    margin: 20px auto 0;
    border: 12px solid #1a1a1a;
    /* Dark bezel */
    border-radius: 40px;
    /* Smooth corners */
    background: #000;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.desktop-pulse {
    animation: gold-shadow-premium-desktop 2s ease-in-out;
}

/* Remove "Speaker" / Notch elements if present as pseudo-elements */
.desktop-only-grid .video-placeholder-wrapper::before,
.desktop-only-grid .video-placeholder-wrapper::after {
    display: none !important;
    content: none !important;
}

/* Video fill */
.desktop-only-grid .video-container {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    /* Inner radius to match bezel */
    overflow: hidden;
    background: #000;
}

.desktop-only-grid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the screen */
    display: block;
}

/* HEARTBEAT ANIMATION (Ported from Mobile) */
@keyframes gold-shadow-premium-desktop {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
        border-color: #333;
    }

    50% {
        box-shadow: 0 0 30px 5px rgba(212, 175, 55, 0.4);
        border-color: #444;
        /* Subtle lighten of bezel */
    }

    100% {
        box-shadow: 0 0 50px 10px rgba(212, 175, 55, 0);
        border-color: #333;
    }
}

/* =========================================
   NEW SECTIONS (SOCIAL PROOF, TESTIMONIALS, FAQ, FINAL CTA)
   ========================================= */

/* --- TRUSTED BY STRIP --- */
.trusted-by-strip {
    background: #0a0a0a;
    border-bottom: 1px solid #222;
    padding: 20px 0;
    width: 100%;
}

/* --- TESTIMONIALS --- */
.testimonials-section {
    width: 100%;
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: #0a0a0a;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

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

.testimonial-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 4px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
}

.author-info strong {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* --- FAQ SECTION --- */
.faq-section {
    width: 100%;
    padding: 120px 0;
    background: #080808;
}

.faq-accordion {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.3s;
}

.faq-item:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.faq-question {
    padding: 25px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #e0e0e0;
    margin-bottom: 0px;
}

.faq-answer {
    padding: 0 40px;
    overflow: hidden;
    max-height: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    /* Sufficient space */
    padding-bottom: 25px;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
    color: var(--gold);
}

/* --- FINAL CTA --- */
.final-cta {
    border-top: 1px solid #222;
    padding: 120px 0;
    background: linear-gradient(to top, #000, #111);
    text-align: center;
}

.final-cta .container {
    max-width: 1600px;
    /* Permitimos más ancho para que el título no rompa */
}

.final-cta h2 {
    margin-bottom: 40px;
    white-space: normal;
}

@media (min-width: 1025px) {
    .final-cta h2 {
        white-space: nowrap;
        /* En pantallas grandes, forzamos una línea */
    }

    /* Ensure Tecnologia cards are on a separate line below the header on PC */
    #tecnologia {
        background: #0a0a0a !important;
        /* Visual break */
    }

    #tecnologia .tech-container {
        display: block !important;
        width: 100% !important;
    }

    #tecnologia .tech-grid-unified {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        max-width: 1100px;
        margin: 60px auto 0 !important;
        width: 100%;
    }

    /* Change background for Menu Engineering and remove the gap */
    .menu-engineering {
        margin-top: 0 !important;
        /* Remove the "mysterious line" gap */
        background: #000 !important;
        /* Pure black to differentiate */
    }
}