@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../assets/fonts/Lato-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

* {
    box-sizing: border-box !important;
}

body {
    margin: 0; 
    overflow-x: hidden;
    background-color: #000; 
    font-family: 'Lato', 'Segoe UI', 'Roboto', sans-serif;
}

/* GLOBAL VARIABLES */ :root {
    --color-primary: #9a2e35;
    --color-text: #ffffff;
    --color-text-dim: #cccccc;
    --color-bg-dark: #0a0a0a;
    --color-card-bg: rgba(10, 10, 10, 0.8);
    --color-card-border: rgba(154, 46, 53, 0.2);
    --color-overlay-bg: #000;
}

body.light-mode {
    --color-text: #1a1a1a;
    --color-text-dim: #444444;
    --color-bg-dark: #ffffff;
    --color-card-bg: rgba(255, 255, 255, 0.85); 
    --color-card-border: rgba(154, 46, 53, 0.3);
    --color-overlay-bg: #ffeaea; /* Light red fade for animations/overlays */
    background-color: var(--color-bg-dark);
    color: var(--color-text);
}

body.light-mode .intro-text, body.light-mode .section-title, body.light-mode .subsection-title, body.light-mode .cta-title, body.light-mode .social-title, body.light-mode .accordion-title {
    color: #1a1a1a !important;
    text-shadow: none;
}

body.light-mode .lead-text, body.light-mode .info-card p, body.light-mode .feature-item p, body.light-mode .system-description, body.light-mode .clients-description, body.light-mode .modal-body {
    color: #333333;
}

body.light-mode .info-card, body.light-mode .social-media-box, body.light-mode .form-wizard, body.light-mode .clients-section, body.light-mode .system-section, body.light-mode .module-card {
    background: var(--color-card-bg);
    border-color: var(--color-card-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

body.light-mode .feature-item, body.light-mode .social-link, body.light-mode .tech-box, body.light-mode .module-accordion-item {
    background: rgba(0, 0, 0, 0.03); 
    border-color: rgba(0,0,0,0.1);
}

body.light-mode .modal-content {
    background: #ffffff;
    border-color: #ddd;
    color: #333;
}

body.light-mode .modal-close {
    color: #333;
}

/* Light Mode Input Fields */ body.light-mode input, body.light-mode select, body.light-mode textarea {
    background: rgba(0,0,0,0.05);
    border: 1px solid #ddd;
    color: #333;
}

body.light-mode input:focus, body.light-mode select:focus, body.light-mode textarea:focus {
    background: #fff;
    border-color: var(--color-primary);
}

/* Light Mode Navbar */ body.light-mode .nav-island {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

body.light-mode .nav-icon {
    color: #555;
}

body.light-mode .nav-icon:hover, body.light-mode .nav-icon.active {
    background: rgba(154, 46, 53, 0.1);
    color: var(--color-primary);
}

canvas {
    display: block; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 1;
}

/* INTRO OVERLAY */ #intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-bg-dark); /* Changed from #000 to variable */
    z-index: 5; /* Below UI Layer (10) */
    display: none;
}

/* UI Layer - Texto y Botón */ #ui-layer {
    position: absolute;
    top: 75%; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 100%;
    transition: opacity 0.5s;
    pointer-events: none; /* CRUCIAL: Permite que el mouse detecte el 3D detrás */
}

.intro-text {
    color: #ffffff;
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    font-weight: 300;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    line-height: 1.1;
    margin-bottom: 20px;
}

.brand-title {
    margin: 0;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
    line-height: 1;
}

.brand-subtitle {
    margin-top: 10px;
    font-size: 1rem;
    letter-spacing: 0.5em;
    color: #9a2e35;
    font-weight: 500;
    border-top: 1px solid #ffffff;
    display: inline-block;
    padding-top: 10px;
    padding-left: 0.5em;
    margin-bottom: 30px;
}

.highlight-letter {
    color: #ffffff; 
    font-weight: 700; 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

/* BOTÓN ENTRAR */ /* PULSATING ANIMATION - BOX SHADOW (BEHIND) */ @keyframes pulse-red-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(154, 46, 53, 0.7);
    }
    70% {
        box-shadow: 0 0 20px 20px rgba(154, 46, 53, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(154, 46, 53, 0);
    }
}

#enter-btn {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8); /* Darker background for contrast */
    color: #fff;
    border: 2px solid #9a2e35; /* Explicit red border */
    padding: 15px 50px;
    font-size: 1.3rem;
    font-weight: 700; /* Bolder text */
    letter-spacing: 0.25em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-transform: uppercase;
    position: relative;
    backdrop-filter: blur(10px);
    margin-top: 20px;
    z-index: 100;
    
    /* Animation applied directly - shadow renders behind border/bg */
    animation: pulse-red-glow 2s infinite;
}

#enter-btn:hover {
    background: #9a2e35;
    color: #000; /* Better contrast on red */
    box-shadow: 0 0 40px rgba(154, 46, 53, 1);
    transform: translateY(-4px) scale(1.05);
    animation: none; /* Stop pulsing on hover */
}

/* Cleanup: Removed the ::before pseudo-element associated with the old animation */ /* NAVBAR PLACEHOLDER */ #future-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 100;
    display: none;
}

/* PANTALLA DE INFORMACIÓN (Main Screen) */ #main-info-screen {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 80%;
    max-width: 1000px;
    height: 70vh; /* Reduced further per user feedback */
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid #333;
    border-top: 2px solid #9a2e35;
    box-shadow: 0 0 50px rgba(0,0,0,0.9);
    z-index: 100; /* Force on top of everything */
    opacity: 0;
    display: flex;
    flex-direction: column;
    color: #eee;
    backdrop-filter: blur(10px);
    overflow: hidden; 
    display: none; 
    pointer-events: auto; /* Ensure events are captured */
}

.screen-header {
    padding: 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(154, 46, 53, 0.1);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.screen-header h2 {
    margin: 0; 
    font-weight: 300; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    font-size: 1rem;
    white-space: nowrap;
}

/* Common Wrapper Style */ .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    min-height: 0;
}

/* Video Placehoder & Container Strategy */ .video-placeholder {
    width: 100%;
    /* 16:9 Aspect Ratio */
    padding-top: 56.25%; 
    position: relative;
    background: #000;
    flex: none; /* Don't shrink */
    z-index: 10;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-bottom: 1px solid #333;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

/* Desktop: Unified Scroll + Specific Window Positioning */ @media (min-width: 769px) {
    /* Anchored Top, Grow Down */
    #main-info-screen {
        top: 12vh; /* Anchor near top */
        bottom: auto;
        transform: translateX(-50%); /* Only horizontal center */
        height: 85vh; /* Larger */
    }

    .content-wrapper {
        overflow-y: auto !important; 
        display: block; 
        scrollbar-width: thin;
        scrollbar-color: #9a2e35 #333;
    }
    
    /* Mini Mode: Video Escapes Placeholder */
    #main-info-screen.mini-mode .video-placeholder {
        position: static; /* Allows absolute child to reference screen */
        background: transparent; /* Invisible placeholder */
    }

    #main-info-screen.mini-mode .video-container {
        padding-top: 0;
        position: absolute;
        top: 80px; /* Position below the header/ribbon */
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        width: 280px;
        height: 157px;
        z-index: 50; 
        border: 2px solid #333;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }

    #main-info-screen.mini-mode .video-overlay {
        padding: 10px;
    }
    #main-info-screen.mini-mode .video-control-btn {
        width: 30px;
        height: 30px;
    }
    #main-info-screen.mini-mode .video-control-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* Mobile: Fixed Video (Content scrolls) - Unchanged behavior */ @media (max-width: 768px) {
    /* Inherits base #main-info-screen pos (centered) + mobile override below */
    
    .content-wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .video-placeholder {
        /* On mobile, placeholder is just the container wrapper */
        flex-shrink: 0; 
        z-index: 10;
    }

    .screen-content {
        overflow-y: auto !important; 
        flex: 1;
        padding: 10px 40px 40px 40px;
        -webkit-overflow-scrolling: touch;
    }
}

.video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Don't crop, show full video */
    z-index: 1;
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-container:hover .video-overlay {
    opacity: 1;
}

/* On mobile, controls should be always visible or easily toggled. For simplicity, we keep the hover logic which works as 'tap' on mobile usually, but we can also force it visible if paused. */ .video-container.paused .video-overlay {
    opacity: 1;
}

.video-control-btn {
    background: rgba(154, 46, 53, 0.2);
    border: 1px solid rgba(154, 46, 53, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(5px);
}

.video-control-btn:hover {
    background: #9a2e35;
    transform: scale(1.1);
}

.video-control-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #9a2e35;
    animation: spin 1s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
    display: none; /* Hidden by default */
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Utility to show spinner */ .video-container.loading .loading-spinner {
    display: block;
}

.feature-card strong {
    color: #9a2e35; /* Make title pop */
    font-size: 1rem;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================ SECCIÓN NOSOTROS ============================================ */ #nosotros-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 25;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Light mode background */
body.light-mode #nosotros-section {
    background: #f5f5f5;
}

.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px 60px;
    position: relative;
    z-index: 30;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    animation: fadeInDown 0.8s ease-out;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 800;
}

body.light-mode .section-header h2 {
    color: #222;
}

.section-header p {
    font-size: 1.2rem;
    color: #cccccc;
    line-height: 1.6;
}

body.light-mode .section-header p {
    color: #555;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    letter-spacing: 0.3em;
    margin: 15px 0 0 0;
    text-transform: uppercase;
}

.section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(154, 46, 53, 0.5);
}

.section-divider {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #9a2e35, transparent);
    margin: 20px auto 0;
    box-shadow: 0 0 10px rgba(154, 46, 53, 0.8);
}

.section-content {
    animation: fadeInUp 1s ease-out 0.3s backwards;
}

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

.intro-text-section {
    flex: 1;
    text-align: left; /* Align text left when next to logo */
}

.lead-text {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    color: #ccc;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
}

.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.info-card {
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
}

.info-card:hover {
    border-color: rgba(154, 46, 53, 0.6);
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(154, 46, 53, 0.2);
    background: rgba(15, 15, 15, 0.9);
}

.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: rgba(154, 46, 53, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.info-card:hover .card-icon {
    background: rgba(154, 46, 53, 0.2);
    box-shadow: 0 0 30px rgba(154, 46, 53, 0.3);
    transform: scale(1.1);
}

.icon-large {
    width: 40px;
    height: 40px;
    color: #ff5555;
    fill: #ff5555;
    filter: drop-shadow(0 0 8px rgba(154, 46, 53, 0.8));
}

.info-card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin: 0 0 15px 0;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.info-card p {
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
    margin: 0;
}

.features-section {
    margin-bottom: 60px;
}

.subsection-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #fff;
    margin: 0 0 30px 0;
    font-weight: 600;
    letter-spacing: 0.03em;
    position: relative;
    padding-left: 20px;
}

.subsection-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #9a2e35, #ff5555);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(154, 46, 53, 0.6);
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.02);
    padding: 25px;
    border-radius: 8px;
    border-left: 3px solid rgba(154, 46, 53, 0.4);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: #9a2e35;
    transform: translateX(10px);
}

.feature-bullet {
    width: 12px;
    height: 12px;
    background: #9a2e35;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 0 10px rgba(154, 46, 53, 0.8);
}

.feature-item p {
    color: #ccc;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

.cta-section {
    text-align: center;
    margin: 80px 0 60px;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(154, 46, 53, 0.1), rgba(154, 46, 53, 0.05));
    border-radius: 12px;
    border: 1px solid rgba(154, 46, 53, 0.3);
}

.cta-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #fff;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-shadow: 0 0 20px rgba(154, 46, 53, 0.6);
}

.clients-section {
    margin: 60px 0;
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 50px 40px 50px 100px;
    backdrop-filter: blur(10px);
    position: relative;
}

/* Step badge - red circular number on the left */
.step-badge {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: #9a2e35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(154, 46, 53, 0.5);
}

/* Entregables label */
.entregables-label {
    color: #9a2e35;
    font-size: 1.1rem;
    margin: 20px 0 10px 0;
    font-weight: 700;
}

/* Checklist with empty circle bullets */
.step-checklist {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

.step-checklist li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 1rem;
    color: #aaa;
    line-height: 1.6;
}

.step-checklist .check-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 12px;
    stroke: #9a2e35;
}

.circle-bullet {
    display: inline-block;
    font-size: 1.5rem;
    color: #9a2e35;
    margin-right: 10px;
    line-height: 1;
}

/* Note box at the bottom */
.note-box {
    margin-top: 25px;
    padding: 15px 20px;
    background: rgba(154, 46, 53, 0.08);
    border-left: 3px solid #9a2e35;
    border-radius: 6px;
    font-size: 1rem;
    color: #ccc;
}

.note-label {
    color: #ffffff;
}

body.light-mode .step-badge {
    background: #9a2e35;
    box-shadow: 0 4px 15px rgba(154, 46, 53, 0.3);
}

body.light-mode .step-checklist li {
    color: #555;
}

body.light-mode .circle-bullet {
    color: #9a2e35;
}

body.light-mode .note-box {
    background: rgba(154, 46, 53, 0.1);
    color: #444;
}

body.light-mode .note-label {
    color: #1a1a1a;
}

.clients-content {
    max-width: 900px;
    margin: 0 auto;
}

.clients-image-container {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(154, 46, 53, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
}

.clients-image-container:hover {
    border-color: rgba(154, 46, 53, 0.6);
    box-shadow: 0 15px 50px rgba(154, 46, 53, 0.2);
    transform: translateY(-5px);
}

.clients-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.clients-description {
    font-size: 1.1rem;
    color: #aaa;
    text-align: center;
    line-height: 1.8;
    margin: 0;
    font-style: italic;
}

.system-section {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.system-content {
    max-width: 700px;
    margin: 0 auto;
}

.system-description {
    font-size: 1.2rem;
    color: #ccc;
    line-height: 1.8;
    margin: 0 0 30px 0;
}

.cta-button {
    background: linear-gradient(135deg, #9a2e35, #ff5555);
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(154, 46, 53, 0.4);
    text-transform: uppercase;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(154, 46, 53, 0.6);
    background: linear-gradient(135deg, #ff5555, #ff6666);
}

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

.cta-button:hover .icon {
    transform: translateX(5px);
}

/* Responsive */ @media (max-width: 768px) {
    .section-container {
        padding: 80px 20px 120px; /* Increased bottom padding to prevent buttons from being cut off */
    }
    
    .section-title {
        font-size: 2rem; /* Reduced for mobile */
    }
    
    .info-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-item {
        padding: 20px;
    }
    
    .system-section {
        padding: 30px 20px;
    }
    
    /* Fix Intro Text Overflow & Visibility */
    .intro-text{
        font-size: 1.8rem;
        padding: 0 10px;
        word-wrap: break-word; 
        color: #ffffff !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        position: relative;
        z-index: 50;
    }

    /* Mobile Adjustments for Main Window */
    #main-info-screen {
        top: 56%; /* Lower on mobile as requested (was 50%) */
        height: 75vh; /* Slightly taller on mobile for better visibility */
    }

    .screen-header h2 {
        font-size: 0.8rem; /* Smaller text on mobile */
    }

    .section-header {
        position: relative;
        z-index: 20; /* Ensure above grid/canvas */
    }

    /* Fix Brand Titles Overflow & Visibility */
    .brand-title {
        font-size: 2.2rem; 
        word-wrap: break-word;
        color: #fff;
    }

    /* Optimize Social Media links for mobile */
    .social-media-box {
        background: transparent;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
        padding: 20px 0;
        margin: 0 auto;
    }

    .social-links {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* Force single row strictly */
        justify-content: center;
        gap: 15px; /* Reduced gap to ensure fit */
        width: 100%;
    }
    
    .social-link {
        min-width: unset !important;
        width: 50px;
        height: 50px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        margin: 0; /* Remove potential margins */
    }
    
    .social-link span {
        display: none;
    }
    
    .social-link .social-icon {
        width: 24px;
        height: 24px;
        margin: 0;
    }
    
    /* Ensure form button is visible */
    .form-navigation {
        padding-bottom: 20px;
    }
    
    /* Mobile responsive for Nosotros section - stack logo and text vertically */
    .nosotros-intro-wrapper {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    
    .nosotros-logo-container {
        flex: none;
        width: 100%;
    }
    
    .nosotros-logo {
        max-width: 200px;
    }
    
    .intro-text-section {
        text-align: center;
    }
}

/* ============================================ MÓDULOS CAROUSEL & GRID ============================================ */ .modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    width: 100%;
    margin-top: 40px;
    padding-bottom: 40px;
}

.modules-grid .module-card {
    width: 100%;
    height: 100%;
    opacity: 1 !important; /* Force visibility in case GSAP fails */
    transform: none !important;
}

.modules-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 40px;
    padding: 20px 0;
    /* Fade masks for edges to look smoother */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.modules-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* Will be animated by GSAP */
}

.module-card {
    width: 320px; /* Fixed width for carousel items */
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ============================================ ACCORDION LIST VIEW ============================================ */ .modules-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 900px;
    margin: 40px auto 10px auto; /* Reduced bottom margin */
    padding-bottom: 10px; /* Reduced padding */
    /* FIX: Force remove any mask inherited or applied */
    mask-image: none !important;
    -webkit-mask-image: none !important;
    mask: none !important;
    -webkit-mask: none !important;
    /* FIX: Ensure z-index is above any potential background gradients */
    z-index: 10;
    position: relative;
    opacity: 1 !important;
}

.modules-cta-container {
    text-align: center;
    margin-top: 20px; /* Reduced from 60px */
    padding-bottom: 20px;
    position: relative;
    z-index: 20;
}

.module-accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.module-accordion-item.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(154, 46, 53, 0.5);
}

.accordion-header {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    user-select: none;
}

.accordion-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.accordion-icon {
    width: 40px;
    height: 40px;
    margin-right: 20px;
    /* Removed opacity to show full image brightness */
}

.accordion-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed filter to show original image colors */
}

.accordion-title {
    flex-grow: 1;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

/* Active Title State */
.module-accordion-item.active .accordion-title {
    text-align: center;
    color: #ff5555 !important;
    font-weight: 800;
}
body.light-mode .module-accordion-item.active .accordion-title {
    color: #9a2e35 !important;
}

.accordion-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
    opacity: 0.5;
    /* Use a simple character if image not avail, or an svg later */
}

.accordion-arrow::after {
    content: '▼';
    font-size: 14px;
    color: white;
}

.active .accordion-arrow {
    transform: rotate(180deg);
}

.active .accordion-arrow::after {
    color: #9a2e35;
}

.accordion-content {
    height: 0;
    overflow: hidden;
    /* Padding is handled by inner wrapper to avoid jumpy animation */
}

/* .accordion-content-inner style replaced/moved above */ .accordion-content h3 {
    color: #9a2e35;
    font-size: 1rem;
    margin: 15px 0 10px 0;
}

.accordion-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}

/* Dropdown Content Layout (Image Left) */ .accordion-content-inner {
    display: flex;
    gap: 30px;
    padding: 20px 30px 30px 30px;
    align-items: flex-start;
    color: #eee; /* Restore text color */
}

/* Light Mode Accordion Overrides */
body.light-mode .accordion-title {
    color: #1a1a1a;
}
body.light-mode .accordion-content-inner {
    color: #333;
}
body.light-mode .accordion-content ul {
    color: #444;
}

/* Red Bullet Points */
.accordion-content ul li::marker {
    color: #9a2e35 !important;
}

.accordion-image-container {
    flex-shrink: 0;
    width: 150px;
}

/* Accordion H2 Style (Copied from .module-title) */
.accordion-content h2 {
    color: #fff;
    font-size: 1.1rem; /* Slightly smaller than card title (1.2rem) to fit context */
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}

body.light-mode .accordion-content h2 {
    color: #1a1a1a;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-module-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}

.accordion-text-content {
    flex: 1;
}

/* Modal Image */ .modal-image-header {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.modal-module-image {
    width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(154, 46, 53, 0.4));
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 60px;
    }
}

.module-card:hover {
    background: rgba(154, 46, 53, 0.1);
    border-color: #9a2e35;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(154, 46, 53, 0.2);
}

.module-icon {
    width: 140px; /* Increased from 80px */
    height: 140px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Removed border-radius, background, and border to show only the image */
}

.module-card:hover .module-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(154, 46, 53, 0.6));
    /* Removed background to prevent red circle appearing */
}

.module-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed filter to show original image colors */
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); /* Optional shadow for depth */
}

/* ============================================ NOSOTROS SECTION IMAGES ============================================ */ /* ============================================ NOSOTROS SECTION IMAGES & LAYOUT ============================================ */ .nosotros-intro-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.nosotros-logo-container {
    flex: 0 0 300px; /* Fixed width for logo area */
    display: flex;
    justify-content: center;
    /* margin-bottom removed as it's handled by wrapper or flex */
    margin-bottom: 0;
}

.nosotros-logo {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

.terminal-banner-container {
    width: 100%;
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.terminal-banner {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.techpack-section {
    margin: 50px 0;
    text-align: center;
}

.techpack-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Make boxes same height */
    gap: 30px;
    flex-wrap: wrap;
}

.tech-box {
    /* flex: 1;  Removed generic flex-1 */
    min-width: 250px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 1/3 width for Logo */ .tech-box-logo {
    flex: 1;
}

/* 2/3 width for Tech Stack */ .tech-box-stack {
    flex: 2;
}

.tech-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}

.tech-logo {
    max-width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
}

.techpack-image {
    width: 100%; /* Ensure it takes full width of its larger box */
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.module-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.light-mode .module-title {
    color: #1a1a1a;
}

.module-desc {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.5;
}

body.light-mode .module-desc {
    color: #555555;
}

.view-toggle-btn {
    background: transparent;
    border: 1px solid #9a2e35;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.view-toggle-btn:hover {
    background: #9a2e35;
    box-shadow: 0 0 15px rgba(154, 46, 53, 0.4);
}

.view-toggle-btn .icon {
    font-size: 1.1rem;
}

/* MODAL STYLES */ .module-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.module-modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: #111;
    border: 1px solid #333;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(154, 46, 53, 0.2);
}

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

.modal-close:hover {
    color: #9a2e35;
}

.modal-body {
    padding: 40px;
    overflow-y: auto;
    color: #ddd;
    line-height: 1.6;
}

.modal-body h2 {
    color: #9a2e35;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-weight: 300;
    text-transform: uppercase;
}

.modal-body h3 {
    color: #fff;
    margin-top: 25px;
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: 600;
}

.modal-body ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.modal-body li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px;
    color: #bbb;
}

.modal-body li::before {
    content: "•";
    color: #9a2e35;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
    line-height: 1;
}

/* Light Mode Overrides for Modal Content */
body.light-mode .modal-body {
    color: #333;
}

body.light-mode .modal-body h2 {
    border-bottom: 1px solid #ccc;
    /* Color #9a2e35 is fine on white */
}

body.light-mode .modal-body h3 {
    color: #111;
}

body.light-mode .modal-body li {
    color: #444;
}

.modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    border: 1px solid #333;
}

.modal-body p {
    margin-bottom: 20px;
}

/* ============================================ SECCIÓN CONTACTO - FORMULARIO MULTI-ETAPA ============================================ */ #contacto-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 25;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Light mode background */
body.light-mode #contacto-section {
    background: #f5f5f5;
}

.contact-email {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 1.1rem;
}

.contact-email .icon {
    width: 24px;
    height: 24px;
    color: #ff5555;
    fill: #ff5555;
}

.contact-email a {
    color: #ff5555;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-email a:hover {
    color: #ff6666;
    text-decoration: underline;
}

/* Mensaje de Error en Formulario */ .error-message {
    background: rgba(154, 46, 53, 0.1);
    border: 1px solid rgba(154, 46, 53, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #ff5555;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.error-message::before {
    content: "⚠";
    font-size: 1.2rem;
}

/* Redes Sociales */ .social-media-box {
    max-width: 800px;
    margin: 40px auto 30px;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 20px 50px;
    backdrop-filter: blur(10px);
    text-align: center;
}

.social-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.social-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    min-width: 120px;
}

.social-link:hover {
    background: rgba(154, 46, 53, 0.1);
    border-color: #9a2e35;
    color: #ff5555;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(154, 46, 53, 0.3);
}

.social-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.social-link span {
    font-size: 0.9rem;
    font-weight: 500;
}

.form-wizard {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02); /* Slight bg for box feel */
    border-radius: 12px;
    padding: 20px; /* Internal spacing */
}

/* Barra de Progreso */ .form-progress {
    margin-bottom: 50px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 30px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #9a2e35, #ff5555);
    width: 25%;
    transition: width 0.4s ease;
    box-shadow: 0 0 10px rgba(154, 46, 53, 0.6);
}

.progress-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.step.active, .step.completed {
    opacity: 1;
}

.step-number {
    background: #9a2e35;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
    box-shadow: 0 4px 10px rgba(154, 46, 53, 0.3);
}

.step.active .step-number {
    background: rgba(154, 46, 53, 0.2);
    border-color: #9a2e35;
    box-shadow: 0 0 20px rgba(154, 46, 53, 0.4);
    color: #ff5555;
}

.step.completed .step-number {
    background: #9a2e35;
    border-color: #9a2e35;
}

.step-label {
    font-size: 0.85rem;
    color: #ccc;
    text-align: center;
    font-weight: 500;
}

.step.active .step-label {
    color: #ff5555;
}

/* Formulario */ .contact-form {
    position: relative;
    min-height: 400px;
}

.form-step {
    display: none;
    animation: fadeIn 0.5s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-title {
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 30px 0;
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    color: #ccc;
    font-size: 0.95rem;
    font-weight: 500;
}

.form-group input, .form-group select, .form-group textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 16px;
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: #9a2e35;
    background: rgba(154, 46, 53, 0.05);
    box-shadow: 0 0 15px rgba(154, 46, 53, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
}

.form-group select option {
    background: #000;
    color: #fff;
    padding: 10px;
}

.form-group input::placeholder, .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Navegación del Formulario */ .form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 15px;
}

.btn-primary, .btn-secondary {
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-primary {
    background: linear-gradient(135deg, #9a2e35, #ff5555);
    color: #fff;
    box-shadow: 0 4px 20px rgba(154, 46, 53, 0.4);
    margin-left: auto;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(154, 46, 53, 0.6);
}

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

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

/* --- CONTACT LAYOUT --- */ .contact-layout-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 30px;
}

.contact-form-column {
    flex: 3;
    min-width: 0; /* Prevent flex overflow */
}

.contact-info-column {
    flex: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 900px) {
    .contact-layout-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    
    .contact-form-column, .contact-info-column {
        width: 100%;
        flex: auto;
    }
}

/* --- CONTACT DETAILS CARD --- */ .contact-details-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
    backdrop-filter: blur(5px);
}

.info-group {
    margin-bottom: 25px;
}

.info-group:last-child {
    margin-bottom: 0;
}

.info-title {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-text {
    color: #e0e0e0 !important; /* Force light color */
    line-height: 1.6;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Better readability */
}

.contact-link {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.highlight-label {
    color: var(--color-text);
    font-weight: 600;
}

/* --- CONTACT INFO GRID --- */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(154, 46, 53, 0.3);
    transform: translateY(-2px);
}

.contact-icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.contact-label {
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.contact-link {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
    word-break: break-all;
}

.contact-link:hover {
    color: var(--color-primary);
}

/* Light mode adjustments */
body.light-mode .contact-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .contact-item:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(154, 46, 53, 0.3);
}

body.light-mode .contact-link {
    color: #333;
}

body.light-mode .contact-link:hover {
    color: var(--color-primary);
}

body.light-mode .contact-label {
    color: #666;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* --- MAP CONTAINER --- */ .map-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 300px;
}

.map-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    /* Dark Mode Filter for Google Maps */
    filter: invert(90%) hue-rotate(180deg) brightness(90%) contrast(110%);
}

/* --- DIAGNOSTIC INFO BOX --- */
.diagnostic-info-box {
    width: 100%;
    background: rgba(154, 46, 53, 0.08);
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 30px;
    backdrop-filter: blur(5px);
    margin-top: 20px;
}

.diagnostic-title {
    color: var(--color-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.diagnostic-text {
    color: #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0 0 15px 0;
}

.diagnostic-text:last-child {
    margin-bottom: 0;
}

/* Light mode adjustments */
body.light-mode .diagnostic-info-box {
    background: rgba(154, 46, 53, 0.05);
    border-color: rgba(154, 46, 53, 0.25);
}

body.light-mode .diagnostic-title {
    color: var(--color-primary);
}

body.light-mode .diagnostic-text {
    color: #333;
}


/* Center Form in its column */ .contact-form-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- SOCIAL LINKS EMBED --- */ .social-links-embed {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-link-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

.social-link-icon:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

.social-link-icon .icon {
    width: 20px;
    height: 20px;
    fill: #ffffff;
}

/* Adjust Intro Text for form column */ .contact-form-column .intro-text-section {
    text-align: left;
    margin-bottom: 30px;
}

.contact-form-column .intro-text-section .lead-text {
    max-width: 100%;
    margin: 0;
}

.btn-primary .icon, .btn-secondary .icon {
    width: 18px;
    height: 18px;
}

/* Mensaje de Éxito */ .success-message {
    text-align: center;
    padding: 60px 40px;
    animation: fadeIn 0.8s ease;
}

.success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
    background: rgba(154, 46, 53, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-icon .icon-large {
    width: 60px;
    height: 60px;
    color: #ff5555;
    fill: #ff5555;
    filter: drop-shadow(0 0 15px rgba(154, 46, 53, 1));
}

.success-message h3 {
    font-size: 2rem;
    color: #fff;
    margin: 0 0 15px 0;
}

/* ========================================
   LIGHT MODE - CONTACT SECTION
   ======================================== */

/* Contact Details Card */
body.light-mode .contact-details-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Info Text */
body.light-mode .info-text {
    color: #333 !important;
    text-shadow: none;
}

/* Info Title */
body.light-mode .info-title {
    color: var(--color-primary);
}

/* Contact Actions Buttons */
.contact-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.btn-action .icon {
    width: 16px;
    height: 16px;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(154, 46, 53, 0.3);
}

.btn-action.call {
    background: rgba(154, 46, 53, 0.1);
    border-color: rgba(154, 46, 53, 0.3);
}

.btn-action.call:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-action.email {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-action.email:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

body.light-mode .btn-action {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

body.light-mode .btn-action:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

body.light-mode .btn-action.call {
    background: rgba(154, 46, 53, 0.08);
    border-color: rgba(154, 46, 53, 0.2);
    color: var(--color-primary);
}

body.light-mode .btn-action.call:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Social Links */
body.light-mode .social-link-icon {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .social-link-icon:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

body.light-mode .social-link-icon .icon {
    fill: #333;
}

body.light-mode .social-link-icon:hover .icon {
    fill: #fff;
}

/* Form Wizard */
body.light-mode .form-wizard {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Form Progress */
body.light-mode .progress-bar {
    background: rgba(0, 0, 0, 0.1);
}

body.light-mode .progress-fill {
    background: var(--color-primary);
}

body.light-mode .step-number {
    background: rgba(0, 0, 0, 0.1);
    color: #fff;
}

body.light-mode .step.active .step-number,
body.light-mode .step.completed .step-number {
    background: var(--color-primary);
    color: #fff;
}

body.light-mode .step-label {
    color: #666;
}

body.light-mode .step.active .step-label,
body.light-mode .step.completed .step-label {
    color: var(--color-primary);
}

/* Form Inputs */
body.light-mode .form-group label {
    color: #333;
}

body.light-mode .form-group input,
body.light-mode .form-group select,
body.light-mode .form-group textarea {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

body.light-mode .form-group input:focus,
body.light-mode .form-group select:focus,
body.light-mode .form-group textarea:focus {
    background: rgba(154, 46, 53, 0.05);
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(154, 46, 53, 0.15);
}

body.light-mode .form-group input::placeholder,
body.light-mode .form-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

body.light-mode .form-group select option {
    background: #fff;
    color: #333;
}

/* Form Step Title */
body.light-mode .step-title {
    color: #1a1a1a;
}

/* Error Message */
body.light-mode .error-message {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-color: rgba(220, 53, 69, 0.3);
}

/* Buttons */
body.light-mode .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #333;
}

body.light-mode .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.25);
}

/* Success Message */
body.light-mode .success-message h3 {
    color: #1a1a1a;
}

body.light-mode .success-message p {
    color: #333;
}

body.light-mode .success-icon {
    background: rgba(154, 46, 53, 0.1);
}

/* Lead Text */
body.light-mode .contact-form-column .lead-text {
    color: #333;
}


.success-message p {
    font-size: 1.1rem;
    color: #ccc;
    margin: 0 0 30px 0;
}

/* Responsive Contacto */ @media (max-width: 768px) {
    .form-wizard {
        padding: 30px 20px;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .progress-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .step-label {
        font-size: 0.75rem;
    }
    
    .form-navigation {
        flex-direction: column;
    }
    
    .btn-primary {
        margin-left: 0;
    }
}

/* --- MOBILE CONTACT SHORTCUT (INLINE) --- */ .mobile-contact-inline-btn {
    width: 100%;
    margin-bottom: 25px;
    background: rgba(154, 46, 53, 0.15);
    border: 1px solid rgba(154, 46, 53, 0.4);
    color: #fff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.95rem;
}

.mobile-contact-inline-btn:active {
    background: rgba(154, 46, 53, 0.3);
    transform: scale(0.98);
}

.mobile-contact-inline-btn .icon {
    width: 18px;
    height: 18px;
    fill: #ff5555;
}

/* --- ACTION BUTTONS (DESKTOP & MOBILE) --- */ .contact-actions {
    display: flex; /* Visible by default */
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-action .icon {
    width: 18px;
    height: 18px;
}

.btn-action.call {
    background: #fff;
    color: #000;
}

.btn-action.call .icon {
    fill: #000;
}

.btn-action.email {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Remove desktop specific hiding since we want it everywhere */ @media (max-width: 900px) {
    /* Adjustments if needed, but flex column works for both */
}

/* --- INTRO OVERLAY --- */ #intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    z-index: 2000; /* Above everything */
    display: none; /* Hidden by default */
}

.intro-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2001;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.intro-brand-text {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(30px);
    text-shadow: 0 0 20px rgba(229, 121, 121, 0.4);
    position: absolute;
    bottom: 20%;
}

/* ============================================ HOME SECTION ENHANCEMENTS (Marquee & Buttons) ============================================ */ /* MARQUEE CAROUSEL */ .modules-marquee-container {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(240, 234, 235, 0) 0%, rgba(154, 46, 53, 0.05) 50%, rgba(154, 46, 53,0) 100%);
    border-top: 1px solid rgba(154, 46, 53, 0.2);
    border-bottom: 1px solid rgba(154, 46, 53, 0.2);
    padding: 15px 0;
    margin: 15px 0 30px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    transition: all 0.3s ease;
}

.modules-marquee-container:hover {
    background: rgba(154, 46, 53, 0.08);
    border-color: rgba(154, 46, 53, 0.4);
}

.marquee-track {
    display: flex;
    gap: 40px; /* Space between items */
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
    padding-left: 0;
    background: #964545; /* Default dark background */
    padding: 20px 40px;
    border-radius: 50px;
}

/* Light mode: white background, black text */
body.light-mode .marquee-track {
    background: #ffffff;
}

body.light-mode .marquee-item {
    color: #000000;
}

/* Dark mode: light gray background, white text */
body.dark-mode .marquee-track {
    background: #d3d3d3;
}

body.dark-mode .marquee-item {
    color: #ffffff;
}

/* Pause on hover for better readability */ .modules-marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-item {
    font-size: 1rem;
    color: #e0e0e0;
    font-weight: 500;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 15px; /* Space between text and bullet */
    text-transform: uppercase;
}

.marquee-bullet {
    color: #9a2e35;
    font-size: 1.2rem;
    text-shadow: 0 0 10px #9a2e35;
}

/* HOME ACTION BUTTONS */ .home-actions-container {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.home-action-btn {
    flex: 1;
    min-width: 200px;
    padding: 16px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 4px; /* Slightly sharper styling */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
}

.home-action-btn .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

/* Primary Button Style (Modulos) */ .home-action-btn.primary {
    border-color: #9a2e35;
    background: linear-gradient(135deg, rgba(154, 46, 53, 0.1), rgba(154, 46, 53, 0.2));
    box-shadow: 0 4px 15px rgba(154, 46, 53, 0.1);
}

.home-action-btn.primary:hover {
    background: #9a2e35;
    color: #000;
    box-shadow: 0 0 30px rgba(154, 46, 53, 0.6);
    transform: translateY(-2px);
}

/* Secondary Button Style (Contacto) */ .home-action-btn.secondary {
    border-color: rgba(255, 255, 255, 0.3);
}

.home-action-btn.secondary:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.home-action-btn:hover .icon {
    transform: scale(1.2);
}

/* Mobile Adjustments */ @media (max-width: 768px) {
    .home-actions-container {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 40px; /* Extra space at bottom */
    }
}

/* ============================================ GRID FEATURES (Home Section Compact Layout) ============================================ */ .grid-features {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: space-between;
    margin: 20px 0;
    width: 100%;
}

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Subtle border */
    border-radius: 8px;
    padding: 15px;
    flex: 1; /* Distribute space equally */
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex blowout */
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(154, 46, 53, 0.3);
    transform: translateY(-3px);
}

.feature-card p {
    color: #ccc;
    font-size: 0.85rem; /* Compact text */
    line-height: 1.5;
    margin: 0;
}

/* Mobile: Stack them again or 2x2 grid if needed, but stack is safer for text amount */ @media (max-width: 768px) {
    .grid-features {
        flex-direction: column;
        gap: 10px;
    }
    
    .feature-card {
        width: 100%;
    }
}

/* Marquee Icon (Replaces Bullet) */ .marquee-separator-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    filter: drop-shadow(0 0 5px rgba(154, 46, 53, 0.5));
}

/* ============================================ NEW HOME PAGE SECTION ============================================ */ #new-home-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f9f9f9; /* Neutral background for scrolling area */
    z-index: 25;
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    display: none;
    flex-direction: column; /* Stack sections vertically */
    align-items: center;
    justify-content: flex-start; /* Start from top */
}

/* Desktop: Add padding to prevent navbar overlap */
@media (min-width: 769px) {
    #new-home-page {
        padding-top: 80px;
    }
}

/* ============================================
   DARK MODE DEFAULT (when body has NO light-mode class)
   ============================================ */
#new-home-page {
    background: linear-gradient(135deg, #0a0a0a 60%, #9a2e35 150%);
}

#new-home-page .new-home-hero {
    color: #ffffff;
}

#new-home-page .new-home-description {
    color: #cccccc;
}

#new-home-page .new-home-btn.secondary {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    background: transparent;
}

#new-home-page .new-home-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ============================================
   LIGHT MODE OVERRIDES (when body HAS light-mode class)
   ============================================ */
body.light-mode #new-home-page {
    background: linear-gradient(135deg, #ffffff 60%, #9a2e35 150%);
}

body.light-mode #new-home-page .new-home-hero {
    color: #1a1a1a;
}

body.light-mode #new-home-page .new-home-description {
    color: #444444;
}

body.light-mode #new-home-page .new-home-btn.secondary {
    border-color: #333;
    color: #333;
    background: transparent;
}

body.light-mode #new-home-page .new-home-btn.secondary:hover {
    background: rgba(0,0,0,0.1) !important;
    color: #000 !important;
}

/* Ensure all children don't cause horizontal overflow while maintaining centering */
#new-home-page > * {
    box-sizing: border-box;
}

.new-home-container {
    max-width: 100% !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


.new-home-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1400px;
    margin-top: 20px;
}

.badge-box {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #ffffff;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.badge-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.badge-icon {
    width: 28px;
    height: 28px;
    color: #ff5555;
    flex-shrink: 0;
}

/* Light Mode Badges */
body.light-mode .badge-box {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    color: #222;
}

body.light-mode .badge-box:hover {
    background: rgba(255, 255, 255, 0.6);
}

body.light-mode .badge-icon {
    color: #9a2e35;
}

@media (max-width: 968px) {
    .process-content {
        flex-direction: column-reverse; /* Put Image on TOP? Or List Top? */
        /* If HTML is List, Image. column-reverse -> Image, List. */
        /* Actually visual hierarchy usually prefers Image first on mobile, then steps. */
        /* I will try normal column first (List then Image) as user prompt was specific about list. */
        /* But 'column-reverse' with List-Image HTML -> Image-List visual. */
        /* I'll use standard column for now (List, then Image). No reverse. */
        flex-direction: column; 
        gap: 40px;
    }
    
    .process-header {
        margin-bottom: 40px;
    }
}

.new-home-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1400px;
    width: 100%;
    padding: 40px;
}

/* Left Side - Text */ .new-home-text {
    flex: 1;
    max-width: 600px;
}

.new-home-hero {
    grid-area: hero;
    font-size: clamp(2rem, 6vw, 4.2rem) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin: 0 0 30px 0 !important;
}

.highlight-red {
    color: #9a2e35;
    text-shadow: 0 0 20px rgba(154, 46, 53, 0.6);
    font-size: 1em;
    font-weight: 600;
}

.new-home-description {
    grid-area: desc;
}

.new-home-actions {
    grid-area: actions;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.new-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.new-home-btn.primary {
    background: #9a2e35;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(154, 46, 53, 0.4);
}

.new-home-btn.primary:hover {
    background: #ff1a1a;
    box-shadow: 0 6px 25px rgba(154, 46, 53, 0.6);
    transform: translateY(-2px);
}

.new-home-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.new-home-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

body.light-mode .new-home-btn.secondary {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .new-home-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.new-home-btn .icon {
    width: 20px;
    height: 20px;
}

/* Right Side - Video */ .new-home-video {
    flex: 1;
    max-width: 700px;
    position: relative;
}

.new-home-video-player {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(154, 46, 53, 0.3);
}

body.light-mode .new-home-video-player {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive */ @media (max-width: 968px) {
    .new-home-content {
        flex-direction: column;
        gap: 40px;
        padding: 20px;
    }

    .new-home-text,
    .new-home-video {
        max-width: 100%;
    }

    .new-home-actions {
        justify-content: center;
    }

    .new-home-btn {
        font-size: 1rem;
        padding: 14px 28px;
    }
}

/* New Home Video Controls Logic */ #new-home-video-wrapper {
    /* Ensure border radius clips the overlay */
    border-radius: 12px;
    overflow: hidden;
}

/* Reuse existing overlay styles but handle visibility triggers for this specific ID */ #new-home-video-wrapper:hover .video-overlay, #new-home-video-wrapper.paused .video-overlay {
    opacity: 1;
}

/* Loading Trigger */ #new-home-video-wrapper.loading .loading-spinner {
    display: block;
}

/* Feature Checklist Styles */ .new-home-features {
    margin-top: 40px;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 25px;
}

.feature-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-checklist li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.05rem;
    color: #ffffff;
    font-weight: 500;
}

.feature-checklist li:last-child {
    margin-bottom: 0;
}

.feature-checklist .check-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: #ff5555;
    flex-shrink: 0;
}

/* Light Mode Checklist */
body.light-mode .feature-checklist li {
    color: #333;
}

body.light-mode .feature-checklist .check-icon {
    color: #9a2e35;
}

/* Ensure features look good on mobile */ @media (max-width: 968px) {
    .new-home-features {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    
    .feature-checklist {
        display: inline-block;
        text-align: left;
    }
}

/* Industrias Section */ .industrias-section {
    width: 100%;
    padding: 10px 10px;
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.industrias-header {
    text-align: center;
    max-width: 800px;
    margin-bottom: 60px;
}

.industrias-header h2 {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 800;
}

.industrias-header p {
    font-size: 1.2rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Light Mode Industrias */
body.light-mode .industrias-section {
    background: #b9b8b8 !important;
}

/* Dark mode background for "What is ALARO" section */
#what-is-alaro-section {
    background: #1a1a1a;
}

/* Light mode background for "What is ALARO" section */
body.light-mode #what-is-alaro-section {
    background: #ffffff !important;
}

body.light-mode .industrias-header h2 {
    color: #222;
}

body.light-mode .industrias-header p {
    color: #555;
}

.industrias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1400px;
}

.ind-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ind-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(154, 46, 53, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.ind-icon svg {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    color: #ff5555;
}

.ind-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
}

.ind-card p {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.5;
}
body.light-mode .ind-card p {
    color: #555555;
}

.ind-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.ind-list li {
    padding: 10px 0;
    font-size: 0.95rem;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ind-list li:last-child {
    border-bottom: none;
}


.ind-list .check-icon {
    width: 18px;
    height: 18px;
    color: #ff5555;
    flex-shrink: 0;
}

body.light-mode .ind-list .check-icon {
    color: #9a2e35;
}

/* Light Mode Cards */
body.light-mode .ind-card {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.05);
}

body.light-mode .ind-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Specific styles for Home Modules Preview (Facturación, Exportación, etc.) */
.home-modules-preview .ind-card p {
    text-align: left;
    font-size: 0.95rem;
    color: #cccccc;
    margin: 0;
    line-height: 1.5;
}

body.light-mode .home-modules-preview .ind-card p {
    color: #555555;
}

body.light-mode .ind-icon svg {
    color: #9a2e35;
}

body.light-mode .ind-card h3 {
    color: #1a1a1a;
}

body.light-mode .ind-list li {
    color: #444;
    border-bottom-color: rgba(0,0,0,0.05);
}



/* Responsive Grid */ @media (max-width: 1200px) {
    .industrias-grid {
        gap: 20px;
        padding: 0 10px;
    }
}

@media (max-width: 580px) {
    .industrias-grid {
        grid-template-columns: 1fr;
    }
    
    .industrias-header h2 {
        font-size: 1.8rem;
    }
}

/* 3-Column Grid Variant */
.industrias-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1400px;
}

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

/* Sticky Video Popout */ 
.new-home-video.video-popout {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 340px !important; /* Force width override */
    max-width: 50vw;
    height: auto;
    z-index: 9999;
    border-radius: 12px;
    padding: 0;
    margin: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 2px solid #9a2e35;
    background: #000; /* Prevent transparency issues */
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Modal Split Layout Styles */
/* Modal Split Layout Styles */
.modal-body .modal-main-title {
    font-size: 2rem;
    color: #ff5555;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: 800; /* Extra Bold */
    border-bottom: none; /* override h2 border if needed */
    text-transform: none; /* optional: reset from h2 uppercase if desired, or keep */
}
body.light-mode .modal-body .modal-main-title {
    color: #9a2e35;
}

.modal-separator {
    width: 60px;
    height: 3px;
    background: #9a2e35;
    margin: 0 auto 30px;
}

.modal-split-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Reverse layout class for random positioning */
.modal-split-layout.image-right {
    flex-direction: row-reverse;
}

.modal-col-image {
    flex: 0 0 35%; /* Smaller column for image */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ensure image sticks to top */
}

.modal-col-content {
    flex: 1;
}

.modal-module-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .modal-split-layout, .modal-split-layout.image-right {
        flex-direction: column;
    }
    .modal-col-image {
        flex: auto;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 20px;
    }
}

.new-home-video.video-popout .new-home-video-player {
    box-shadow: none; /* Remove inner shadow */
    border: none;
    border-radius: 10px; /* Adjust radius */
}



@keyframes popIn {
    from { transform: scale(0.8) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- RESTRUCTURED GRID LAYOUT --- */ .new-home-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "hero video"
        "desc video"
        "actions video"
        "features video";
    gap: 0 60px;
    align-items: center;
    justify-content: start;
}

.new-home-features {
    grid-area: features;
}

.new-home-video {
    grid-area: video;
    flex: unset; 
    max-width: 100%;
    width: 100%;
}

/* Mobile specific layout fixes (Flex Reorder) */ @media (max-width: 968px) {
    .new-home-content {
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-align: center;
        /* Reset Grid props */
        grid-template-columns: none;
        grid-template-areas: none;
        width: 100%;
        padding: 20px;
    }
    
    .new-home-container {
        justify-content: flex-start;
        padding-top: 120px; /* More safe space */
        height: auto; 
        min-height: 100vh;
    }
    
    /* Reorder items: Hero (1) -> Video (2) -> Desc (3) -> Actions (4) -> Features (5) */
    .new-home-hero { order: 1; width: 100%; }
    .new-home-video { 
        order: 2; 
        margin-bottom: 20px; 
        width: 100%;
        max-width: 100%;
    }
    .new-home-description { order: 3; width: 100%; }
    .new-home-actions { order: 4; justify-content: center; width: 100%; }
    .new-home-features { order: 5; width: 100%; }

    /* Fix overlapping issue by ensuring proper spacing */
    .new-home-text { display: none; } /* Ensure legacy wrapper is gone */
}

/* --- FIXES FOR MOBILE OVERLAP AND BUTTON VISIBILITY --- */ #new-home-page .new-home-btn.secondary {
    color: #111 !important;
    border-color: rgba(0,0,0,0.3) !important;
    background: rgba(255,255,255,0.4) !important;
}

/* ============================================ HOME MODULES PREVIEW SECTION ============================================ */ .home-modules-preview {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 100px 20px;
    background: linear-gradient(180deg, #982d34 0%, #50050a 100%);
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 2;
}

.home-modules-preview h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.home-modules-preview p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    opacity: 0.9;
    max-width: 700px;
    margin: 0;
    line-height: 1.6;
}

.cta-button.white-btn {
    background: white;
    color: #982d34;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.cta-button.white-btn:hover {
    background: #f0f0f0;
    color: #50050a;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* Modules Marquee Context Overrides */ .home-modules-preview .modules-marquee-container {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.1);
    margin: 40px 0;
}

.home-modules-preview .modules-marquee-container:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Ensure New Home Page stacks sections vertically */ #new-home-page {
    flex-direction: column !important;
}

/* WhatsApp Custom Button Style */ #new-home-page .new-home-btn.whatsapp-green {
    background: transparent !important;
    border-color: #25D366 !important;
    color: #25D366 !important;
}

#new-home-page .new-home-btn.whatsapp-green:hover {
    background: rgba(37, 211, 102, 0.1) !important;
    color: #20b858 !important;
    border-color: #20b858 !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}

/* Spacing Fix for Desktop Industrias CTA */ @media (min-width: 969px) {
    .industrias-grid {
        margin-bottom: 60px; /* Increased from default */
    }
}

/* ============================================ SUCCESS STORIES SECTION (Casos de éxito) ============================================ */ .home-success-stories {
    width: 100%;
    max-width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    z-index: 2;
    position: relative;
}

.success-header {
    text-align: center;
    margin-bottom: 20px;
}

.success-header h2 {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    color: #333;
    font-weight: 800;
    margin: 0 0 10px 0;
}

.success-header p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.success-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 1100px;
}

.success-card {
    background: #fdfdfd;
    border: 1px solid #eaeaea;
    border-radius: 16px;
    padding: 30px;
    flex: 1;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.success-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: rgba(154, 46, 53, 0.2);
}

.card-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #9a2e35;
    font-weight: 700;
}

.success-card h3 {
    font-size: 1.4rem;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.3;
}

.card-challenge {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: auto;
}

.card-link {
    text-decoration: none;
    color: #9a2e35;
    font-weight: 600;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    width: fit-content;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.card-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* SUCCESS LOGOS CAROUSEL */ .success-logos-carousel {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
    margin-top: 20px;
    position: relative;
    /* Mask/Fade Edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.success-logos-carousel .logos-track {
    display: flex;
    gap: 40px;
    width: max-content;
    animation: scrollLogos 30s linear infinite;
}

.success-logos-carousel .logos-track:hover {
    animation-play-state: paused;
}

.logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 100px;
    background: #1a1a1a;
    border: 1px solid rgba(154, 46, 53, 0.2);
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    text-decoration: none; /* remove link underline */
    flex-shrink: 0;
}

body.light-mode .logo-box {
    background: #fff;
    border: 1px solid #eee;
}

.logo-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #9a2e35;
}

.logo-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.logo-box:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 20px)); } /* Adjust based on track width logic */
}

/* Note: For perfect loop, need to know exact overlap. With 2 sets of items, moving -50% works if strict duplication. Since I inject 6 items twice (total 12), and gap is consistent. */ /* ============================================ PROCESS SECTION (Como Trabajamos) ============================================ */ .home-process-section {
    width: 100%;
    padding: 80px 20px;
    background: #fcfcfc;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.process-header {
    text-align: center;
    margin-bottom: 60px;
}

.process-header h2 {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    color: #222;
    margin: 0 0 10px 0;
    font-weight: 800;
}

.process-header p {
    font-size: 1.2rem;
    color: #555;
    margin: 0 0 8px 0;
}

.process-header .highlight-text {
    color: #9a2e35;
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    display: block; /* Ensure it breaks line if needed */
}

.process-content {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.process-steps {
    flex: 1;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.process-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.step-info h3 {
    font-size: 1.15rem;
    color: #222;
    margin: 0 0 5px 0;
    font-weight: 700;
}

.step-info p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.process-image {
    flex: 1.5 !important;
}

.process-image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    /* Subtle hover effect */
    transition: transform 0.4s ease;
}

.process-image img:hover {
    transform: scale(1.02);
}

/* Fix Process Section to be Full Bleed inside Container */ .home-process-section {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
}

/* SIZE OVERRIDES (User Request) */ .logo-box {
    width: 220px !important;
    height: 130px !important;
}

/* Remove box styling from Process Image */ .process-image img {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* LOGO SIZE UPDATE (User Request 2) */ .logo-box {
    width: 280px !important;
    height: 180px !important;
    padding: 10px !important; /* Less padding = bigger logo appearance */
}

/* Update Carousel Animation width compensation if needed */ /* Since items are wider, the track needs to be wider. Flex handles this. */ /* But 'translateX(-50%)' loop logic depends on duplicated set being equal length. */ /* It remains valid regardless of item width. */ /* LOGO SIZE UPDATE 3 (User Request: 50% Bigger again) */ .logo-box {
    width: 420px !important;
    height: 270px !important;
}



/* ============================================ FINAL CTA SECTION ============================================ */ .home-final-cta-section {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 80px 20px;
    background: #fff5f5; /* Light Red Background */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    text-align: center;
}

.home-final-cta-section h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: #9a2e35;
    margin: 0 0 20px 0;
    max-width: 900px;
    font-weight: 800;
    line-height: 1.2;
}

.home-final-cta-section p {
    font-size: 1.2rem;
    color: #555;
    margin: 0 0 40px 0;
    max-width: 800px;
    line-height: 1.6;
}

.final-cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 600px) {
    .final-cta-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ============================================ REUSABLE FOOTER COMPONENT ============================================ */ .site-footer {
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    background: #fdfdfd; 
    border-top: 1px solid #eee;
    padding: 60px 20px 40px 20px;
    z-index: 10;
    position: relative;
    font-size: 0.95rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
}

/* Column 1: Brand */ .footer-col.brand-col {
    flex: 1.5;
    min-width: 280px;
}

.footer-logo {
    width: 140px;
    margin-bottom: 20px;
    display: block;
}

.footer-tagline {
    color: #444;
    font-weight: 700;
    margin-bottom: 5px;
    display: block;
}

.footer-subtagline {
    color: #666;
    font-size: 0.9rem;
}

/* Column 2: Links */ .footer-col.links-col {
    flex: 1;
    min-width: 200px;
}

.footer-heading {
    color: #9a2e35;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links li a {
    text-decoration: none;
    color: #555;
    transition: color 0.2s;
}

.footer-links li a:hover {
    color: #9a2e35;
}

/* Column 3: Contact */ .footer-col.contact-col {
    flex: 1.2;
    min-width: 250px;
}

.contact-info p {
    margin: 0 0 10px 0;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-info p strong {
    color: #333;
    min-width: 80px;
}

/* Footer Copyright Bar */ .footer-copyright {
    width: 100%;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 40px;
    padding-top: 20px;
    color: #999;
    font-size: 0.85rem;
}

/* ============================================ PREVENT HORIZONTAL SCROLL ON MOBILE ============================================ */ html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

#new-home-page {
    max-width: 100vw !important;
}

/* ============================================ MOBILE: FIX HORIZONTAL OVERFLOW ============================================ */ @media (max-width: 768px) {
    /* Reset all full-bleed sections on mobile */
    .home-industrias-section,
    .home-modules-section,
    .home-casos-section,
    .home-process-section,
    .home-final-cta-section,
    .site-footer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100vw !important;
    }
}

/* ============================================ FORCE NO HORIZONTAL SCROLL - AGGRESSIVE FIX ============================================ */ body {
    position: relative !important;
    width: 100vw !important;
}

/* ============================================ MOBILE: FASTER CAROUSEL ANIMATIONS ============================================ */ @media (max-width: 768px) {
    body, html, #new-home-page, .new-home-container {
        position: relative;
        overflow-x: hidden !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }
    
    /* Speed up modules marquee on mobile */
    .marquee-track {
        animation: marquee-scroll 25s linear infinite !important;
    }
    
    /* Speed up logos carousel on mobile */
    .logos-track {
        animation: scrollLogos 10s linear infinite !important;
    }
}

/* ============================================ MOBILE: PROCESS SECTION PADDING FIX ============================================ */ @media (max-width: 768px) {
    .home-process-section {
        padding: 40px 20px !important;
        box-sizing: border-box !important;
    }
    
    .process-content {
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    .process-steps,
    .process-image {
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .process-image img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }
}



/* ========================================== */
/* CRITICAL FIXES (Merged from critical-fixes.css) */
/* ========================================== */

/* === CRITICAL FIXES - HIGHEST PRIORITY === */

/* 1. FIX CONTAINER OVERLAP - Allow container to grow while keeping scroll */
@media (max-width: 968px) {
    /* Keep page as scroll container */
    #new-home-page {
        height: 100vh !important;
        overflow-y: auto !important;
    }
    
    /* Allow container to grow beyond viewport */
    .new-home-container {
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 60px !important;
    }
}

/* 2. FIX BUTTON VISIBILITY - Force dark styling */
#new-home-page .new-home-btn.secondary,
body.light-mode #new-home-page .new-home-btn.secondary {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #000 !important;
    border: 2px solid rgba(0, 0, 0, 0.2) !important;
}

#new-home-page .new-home-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}

/* 3. FIX VIDEO PLACEHOLDER - Match all properties */
#video-placeholder {
    flex-shrink: 0 !important;
}

/* 4. GLOBAL CONTAINER FIX - Prevent Overflow on Desktop */
.new-home-container {
    height: auto !important;
    min-height: 100vh !important;
    justify-content: flex-start !important; /* Top align to prevent vertical centering spill */
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* 5. WHATSAPP BUTTON OVERRIDE (High Specificity) */
body #new-home-page .new-home-btn.whatsapp-green,
body.light-mode #new-home-page .new-home-btn.whatsapp-green,
#new-home-page .new-home-btn.whatsapp-green {
    background: transparent !important;
    border: 2px solid #25D366 !important;
    color: #25D366 !important;
}

#new-home-page .new-home-btn.whatsapp-green svg {
    fill: #25D366 !important; /* Force icon color */
}

#new-home-page .new-home-btn.whatsapp-green:hover {
    background: rgba(37, 211, 102, 0.1) !important;
    color: #20b858 !important;
    border-color: #20b858 !important;
}
/* ============================================
   DARK MODE FOR NEW HOME PAGE - ALL SECTIONS
   Add this at the end of styles.css
   ============================================ */

/* SUCCESS STORIES DARK MODE */
.home-success-stories {
    background: #0f0f0f;
}

.success-header h2 {
    color: #ffffff;
}

.success-header p {
    color: #cccccc;
}

.success-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.success-card:hover {
    border-color: rgba(154, 46, 53, 0.4);
    box-shadow: 0 15px 40px rgba(154, 46, 53, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.card-category {
    color: #ff5555;
}

.success-card h3 {
    color: #ffffff;
}

.card-challenge {
    color: #cccccc;
}

.card-link {
    color: #ff5555;
}

/* LIGHT MODE OVERRIDES - SUCCESS STORIES */
body.light-mode .home-success-stories {
    background: #ffffff;
}

body.light-mode .success-header h2 {
    color: #333;
}

body.light-mode .success-header p {
    color: #666;
}

body.light-mode .success-card {
    background: #fdfdfd;
    border-color: #eaeaea;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

body.light-mode success-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    border-color: rgba(154, 46, 53, 0.2);
}

body.light-mode .card-category {
    color: #9a2e35;
}

body.light-mode .success-card h3 {
    color: #1a1a1a;
}

body.light-mode .card-challenge {
    color: #555;
}

body.light-mode .card-link {
    color: #9a2e35;
}

/* PROCESS SECTION DARK MODE */
.home-process-section {
    background: #1a1a1a;
}

.process-header h2,
.process-header p,
.process-header .highlight-text {
    color: #ffffff;
}

.process-header p {
    color: #cccccc;
}

.step-number {
    background: #ff5555;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(154, 46, 53, 0.5);
}

.step-info h3 {
    color: #ffffff;
}

.step-info p {
    color: #cccccc;
}

/* LIGHT MODE - PROCESS */
body.light-mode .home-process-section {
    background: #f2f2f2;
}

body.light-mode .process-header h2,
body.light-mode .process-header p,
body.light-mode .process-header .highlight-text {
    color: #222;
}

body.light-mode .process-header p {
    color: #666;
}

body.light-mode .step-number {
    background: #9a2e35;
    box-shadow: 0 4px 10px rgba(154, 46, 53, 0.3);
}

body.light-mode .step-info h3 {
    color: #222;
}

body.light-mode .step-info p {
    color: #666;
}

/* FINAL CTA SECTION DARK MODE */
.home-final-cta-section {
    background: linear-gradient(to bottom, #3a1114, #0a0a0a);
}

.home-final-cta-section h2 {
    color: #ffffff;
}

.home-final-cta-section p {
    color: #cccccc;
}

/* LIGHT MODE - FINAL CTA */
body.light-mode .home-final-cta-section {
    background: linear-gradient(to bottom, #ffffff, #ffecec);
}

body.light-mode .home-final-cta-section h2 {
    color: #222;
}

body.light-mode .home-final-cta-section p {
    color: #555;
}

/* FOOTER DARK MODE */
.site-footer {
    background: #0a0a0a;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.footer-heading,
.footer-tagline,
.footer-subtagline {
    color: #ffffff;
}

.footer-links a,
.contact-info p,
.contact-info a {
    color: #ffffff;
}

.footer-links a:hover,
.contact-info a:hover {
    color: #ff5555;
}

.footer-copyright {
    color: #999999;
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* LIGHT MODE - FOOTER */
body.light-mode .site-footer {
    background: #ffffff;
    border-top-color: #eee;
}

body.light-mode .footer-heading,
body.light-mode .footer-tagline,
body.light-mode .footer-subtagline {
    color: #1a1a1a;
}

body.light-mode .footer-links a,
body.light-mode .contact-info p,
body.light-mode .contact-info a {
    color: #444;
}

body.light-mode .footer-links a:hover,
body.light-mode .contact-info a:hover {
    color: #9a2e35;
}

body.light-mode .footer-copyright {
    color: #666;
    border-top-color: #eee;
}

/* SUCCESS ACTIONS BUTTON AREA */
.success-actions {
    margin-top: 20px;
}

/* FLOATING WHATSAPP BUTTON */
.float-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: none; /* Initially hidden, shown by JS */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    text-decoration: none;
    transition: transform 0.3s ease;
    animation: pulse-whatsapp 2s infinite;
}

.float-whatsapp:hover {
    transform: scale(1.1);
    background: #1fab55;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.float-whatsapp .icon {
    width: 35px;
    height: 35px;
    fill: currentColor;
}

@keyframes pulse-whatsapp {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .float-whatsapp {
        bottom: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
    
    .float-whatsapp .icon {
        width: 28px;
        height: 28px;
    }
}

/* ============================================ IMPLEMENTATION GRID SECTION ============================================ */
.implementation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 20px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.implementation-card {
    display: flex;
    align-items: flex-start;
    padding: 25px 30px 0px 20px;
    border-radius: 16px;
    /* Default Dark Mode Gradient: Red left, Predominant Black right */
    background: linear-gradient(90deg, rgba(154, 46, 53, 0.5) 0%, rgba(10, 10, 10, 0.95) 30%);
    border: 1px solid rgba(154, 46, 53, 0.25);
    gap: 15px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.implementation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(154, 46, 53, 0.3);
    border-color: rgba(154, 46, 53, 0.5);
    background: linear-gradient(90deg, rgba(154, 46, 53, 0.6) 0%, rgba(10, 10, 10, 0.95) 30%);
}

.card-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: 0;
    margin-right: 0;
}

.card-icon svg {
    width: 36px;
    height: 36px;
    display: block;
    color: #ff5555;
    stroke-width: 3;
}

.card-text {
    color: #eee;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

/* Light Mode Styles */
body.light-mode .implementation-card {
    /* Red left, Predominant White right */
    background: linear-gradient(90deg, rgba(154, 46, 53, 0.35) 0%, rgba(255, 255, 255, 0.98) 30%);
    border: 1px solid rgba(154, 46, 53, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

body.light-mode .implementation-card:hover {
    background: linear-gradient(90deg, rgba(154, 46, 53, 0.45) 0%, rgba(255, 255, 255, 0.98) 30%);
    box-shadow: 0 8px 20px rgba(154, 46, 53, 0.15);
}

body.light-mode .card-text {
    color: #1a1a1a;
}

body.light-mode .card-icon svg {
    color: #9a2e35;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .implementation-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .implementation-card {
        padding: 25px 30px 0px 20px;
    }
    
    .card-text {
        font-size: 0.95rem;
    }
}

/* Industrias Section Redesign */
.industrias-rows-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.industry-row {
    display: flex;
    align-items: center;
    gap: 60px;
    min-height: 400px;
}

.industry-row.reverse {
    flex-direction: row-reverse;
}

.industry-text-col {
    flex: 1;
}

.industry-img-col {
    flex: 1;
    height: 400px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border: 1px solid rgba(154, 46, 53, 0.3);
}

.industry-img-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.industry-row:hover .industry-img-col img {
    transform: scale(1.05);
}

.industry-title {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.ind-row-icon {
    width: 50px;
    height: 50px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ind-row-icon svg {
    width: 100%;
    height: 100%;
}

.industry-title h2 {
    font-size: 2rem;
    color: var(--color-primary) !important;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-shadow: none !important;
}

.ind-desc {
    font-size: 1.1rem;
    color: var(--color-text-dim);
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 90%;
}

.ind-lists-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ind-list-group h3 {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.light-mode .ind-list-group h3 {
    color: #333;
}

.ind-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ind-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: var(--color-text-dim);
    line-height: 1.4;
}

.check-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .industry-row, .industry-row.reverse {
        flex-direction: column;
        gap: 30px;
        min-height: auto;
    }
    
    .industry-img-col {
        width: 100%;
        height: 250px;
        order: -1; 
    }

    .ind-lists-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .industry-title h2 {
        font-size: 1.5rem;
    }
    
    .industry-text-col {
        width: 100%;
    }
}


/* Presencia en M�xico Section */
.presencia-section {
    padding: 20px 20px;
    background-color: #1e1e1e;
    border-radius: 12px;
    text-align: center;
}

body.light-mode .presencia-section {
    background-color: #f4f4f4;
}

.presencia-header {
    margin-bottom: 40px;
}

.presencia-header h2 {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

body.light-mode .presencia-header h2 {
    color: #333;
}

.presencia-header p {
    font-size: 1.1rem;
    color: var(--color-text-dim);
}

.states-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.state-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    transition: transform 0.3s ease, background-color 0.3s ease;
    flex: 1 1 180px; /* Grow, shrink, base width */
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.light-mode .state-card {
    background-color: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.state-card:hover {
    transform: translateY(-5px);
    background-color: rgba(154, 46, 53, 0.2);
    border-color: var(--color-primary);
}

body.light-mode .state-card:hover {
    background-color: #fff;
    border-color: var(--color-primary);
}

/* Mobile Responsiveness for Presencia Section */
@media (max-width: 768px) {
    .presencia-section {
        padding: 40px 15px;
    }

    .presencia-header h2 {
        font-size: 1.8rem;
    }
    
    .states-grid {
        gap: 15px;
    }
    
    .state-card {
        flex: 1 1 calc(50% - 15px); /* 2 columns on mobile */
        font-size: 0.9rem;
        padding: 12px 10px;
    }
}


/* Privacy Policy Note Style */
.privacy-note {
    background-color: rgba(154, 46, 53, 0.1);
    border-left: 4px solid var(--color-primary);
    padding: 15px;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #fff;
    font-size: 0.95rem;
}

body.light-mode .privacy-note {
    background-color: rgba(154, 46, 53, 0.05);
    color: #333;
    border-left-color: var(--color-primary);
}

.privacy-note strong {
    color: var(--color-primary);
}


/* Fix for Dark Mode Text in Aviso de Privacidad */
#aviso-privacidad-section .section-content {
    color: #fff;
}

body.light-mode #aviso-privacidad-section .section-content {
    color: #333;
}

#aviso-privacidad-section .section-content h3 {
    color: var(--color-primary);
    margin-top: 30px;
    margin-bottom: 15px;
}

#aviso-privacidad-section .section-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

#aviso-privacidad-section .section-content ul li {
    margin-bottom: 8px;
}


#aviso-privacidad-section .section-content p {
    margin-bottom: 25px;
    line-height: 1.8;
}