/* REGLAS DE PRIORIDAD MÁXIMA ECO 1 (v45.4) */

/* 1. Centrado Radical del Footer */
footer, .footer, #footer, .footer-grid, .footer-col {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.footer-col * { text-align: center !important; margin: 5px auto !important; width: 100% !important; }

/* 2. Independización de Series en Móvil */
@media (max-width: 1024px) {
    .series-grid-main { display: block !important; width: 100% !important; }
    .series-item { width: 100% !important; max-width: none !important; display: block !important; margin-bottom: 50px !important; }
    .series-image { width: 100% !important; height: auto !important; aspect-ratio: 16/9; }
}

/* 3. Elevación de Texto Home */
@media (max-width: 1250px) {
    .hero-content h1, .hero-content h2 { transform: translateY(-70px) !important; }
    .hero-btns { transform: translateY(0) !important; margin-top: 60px !important; }
}

/* 4. Contornos de Texto */
.hero-content h1, .hero-content h2, .hero-content p, .page-hero h1, .page-hero p {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 3px 15px rgba(0,0,0,0.9) !important;
}
:root {
    --primary: #00bcd4;
    --primary-dark: #0097a7;
    --secondary: #263238;
    --text: #37474f;
    --light: #eceff1;
    --white: #ffffff;
    --accent: #00e5ff;
    --glass: rgba(255, 255, 255, 0.9);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@font-face {
    font-family: 'Orbitron';
    src: url('../assets/fonts/orbitron.woff2') format('woff2');
    font-weight: 400 900;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--white);
    overflow-x: hidden;
}

p {
    text-align: justify;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Header & Nav */
.header {
    position: fixed;
    top: 25px; /* Floating from the top */
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 95%;
    z-index: 1000;
    padding: 0;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 8px 30px; /* Consistent padding */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Slightly tighter for better fit */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    width: max-content; /* Ensure it expands to fit all items */
    max-width: 98vw;
}

/* Medium Screen Optimization (Laptops / Tablets Landscape) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .header-container {
        padding: 5px 15px !important;
        gap: 8px !important;
    }
    .nav-list {
        gap: 5px !important;
    }
    .nav-list a {
        font-size: 0.6rem !important;
        padding: 6px 10px !important;
    }
    /* Hide icons on medium screens to save space */
    .nav-list a i {
        display: none !important;
    }
}

.header.scrolled {
    top: 10px;
}

.header.scrolled .header-container {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.05);
    padding: 5px 25px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.header-logo {
    flex-shrink: 0;
}

.header-logo img {
    height: 60px;
    width: auto;
    transition: height 0.3s ease;
}

.header.scrolled .header-logo img {
    height: 50px;
}

.logo {
    display: none;
    /* Logo movido al Hero */
}

.nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 15px; /* Reduced gap for contours */
    align-items: center;
}

.nav-list li {
    position: relative;
}

.nav-list a {
    text-decoration: none;
    color: var(--secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    white-space: nowrap;
}

.nav-list a:hover {
    color: #000000; /* Bold Black instead of aqua */
    background: rgba(255, 255, 255, 0.5); /* Slightly brighter for contrast */
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    backdrop-filter: blur(5px);
    /* Removed font-weight change to prevent menu bouncing */
}

.nav-list a.active {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.4);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-large {
    background-color: var(--primary);
    color: var(--white);
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-outline {
    border: 2px solid var(--white);
    color: var(--white);
    background: transparent;
    padding: 14px 30px;
}

.btn-outline:hover {
    background: var(--white);
    color: var(--secondary);
}

/* Page Hero (for subpages) */
.page-hero {
    height: 50vh;
    margin-bottom: 30px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Sibling overrides to reduce padding by half immediately after page-hero */
.page-hero + .services,
.page-hero + .contact-page {
    padding-top: 48px !important; /* Half of 96px */
}

@media (max-width: 1024px) {
    .page-hero + .services,
    .page-hero + .contact-page {
        padding-top: 30px !important; /* Half of 60px */
    }
}

.page-hero h1 {
    font-size: 3rem;
    position: relative;
    z-index: 1;
}

/* Show hero elements again */
.hero-logo, .hero-free-estimate {
    display: block !important;
}

.hero-logo {
    position: absolute;
    top: 110px; /* Lowered to clear the header island */
    left: 40px; /* Moved slightly inwards for better framing */
    z-index: 100;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.hero-free-estimate {
    position: absolute;
    top: 110px; /* Lowered to clear the header island */
    right: 40px; /* Moved slightly inwards for better framing */
    z-index: 100;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
}

.hero-free-estimate:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    color: var(--white);
}

.hero-logo-img {
    height: 140px !important;
    width: auto;
    object-fit: contain;
}

/* Language Selector */
/* Language Selector Wrapper */
.header-actions {
    display: flex;
    align-items: center;
}

.lang-selector-wrapper {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 4px 4px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.lang-selector-wrapper:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--primary);
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
}

.lang-btn {
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    padding: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lang-btn:hover {
    background: rgba(0, 188, 212, 0.1);
    color: var(--primary);
    transform: scale(1.1);
}

.lang-btn.active {
    background: var(--primary);
    color: var(--white);
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5);
}

.lang-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 2px;
}

/* Responsive Navigation Font Size */
@media (max-width: 1200px) {
    .nav-list {
        gap: 15px;
    }
    .nav-list a {
        font-size: 0.75rem;
    }
}

/* Hero Carousel Section */
.hero-carousel {
    width: 100vw;
    max-width: 100vw;
    height: 95vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.carousel-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    /* Asegurar centrado */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.carousel-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
    z-index: -1;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-content h2 {
    color: #00bcd4 !important; /* Solid Aqua Blue */
    text-shadow: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Featured Series (Home) */
.series-grid-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 60px 0;
}

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

.series-image {
    height: 400px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow);
}

.series-info h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--secondary);
}

/* Categories Section */
.categories {
    padding: 120px 0;
    /* Más espacio */
    background: var(--white);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.category-card {
    text-decoration: none;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 350px;
    box-shadow: var(--shadow);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-card:hover {
    transform: scale(1.03);
}

.category-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s;
}

.category-card:hover .category-image {
    transform: scale(1.1);
}

.category-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: var(--white);
}

.category-info h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.category-info span {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 40px 0;
}

.gallery-item {
    border-radius: 8px;
    overflow: hidden;
    height: 250px;
    box-shadow: var(--shadow);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    cursor: pointer;
}

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

/* Series Highlights */
.series-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.series-card {
    background: var(--light);
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--primary);
}

.series-card h3 {
    margin-bottom: 10px;
    color: var(--secondary);
}

.content-text {
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
}

.content-text p {
    text-align: justify;
    margin-bottom: 15px;
}

/* Features Section */
.features {
    padding: 60px 0;
    background: var(--light);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.feature-item h3 {
    margin-bottom: 10px;
    color: var(--primary-dark);
}

/* Specialized Categories Grid */
.category-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.cat-item {
    background: var(--white);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s;
}

.cat-item:hover {
    transform: translateY(-5px);
}

.cat-item h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--secondary);
}

.cat-item p {
    font-size: 0.85rem;
    color: #666;
}

/* Services Section */
.services {
    padding: 120px 0;
    /* Mucho más aire */
}

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

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--secondary);
}

.services-gallery,
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.service-card h3 {
    padding: 20px;
    text-align: center;
    font-size: 1.25rem;
}

.bg-alt {
    background-color: #f8fdff;
}

/* Contact & Map */
.contact {
    padding: 120px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-details {
    list-style: none;
    margin-top: 30px;
}

.contact-details li {
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.contact-page {
    padding: 120px 0;
}

/* Technical Catalog & Grid */
.technical-catalog {
    margin: 60px 0;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.catalog-item {
    background: var(--white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow-sm);
    border-left: 5px solid var(--primary);
    transition: transform 0.3s;
}

.catalog-item:hover {
    transform: translateX(10px);
}

.catalog-item h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--secondary);
    text-transform: uppercase;
}

.catalog-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* Utility Classes */
.accent-title {
    color: var(--primary);
    font-weight: 700;
    margin-top: 30px;
}

.uppercase-bold {
    text-transform: uppercase;
    font-weight: 700;
    margin: 20px 0;
    /* Centered manually via text-center */
}

/* Modal Overlay & Content */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s;
}

.modal-close:hover {
    color: var(--primary);
}

.modal-content h2 {
    color: var(--white);
    margin-bottom: 10px;
}

.modal-content p {
    color: #cfd8dc;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

/* Alignment Rules */
.section-header, .text-center, .services .container, .team-story .container, .contact-page .container {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2, .text-center h1, .text-center h2, .text-center h3, 
.services h1, .services h2, .team-story h2, .contact-page h2 {
    text-align: center !important;
    margin-bottom: 25px;
}

.section-header p, .text-center p, .services .container > p {
    text-align: justify;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

/* Long text blocks should be justified but centered on the page */
.content-text, .justified-block {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

.content-text p, .justified-p {
    text-align: justify !important;
    margin-bottom: 20px;
}
.footer {
    background: var(--secondary);
    color: var(--white);
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
}

.footer-col h3,
.footer-col h4 {
    margin-bottom: 20px;
}

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

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

.footer-col a {
    color: #cfd8dc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px 0;
    text-align: center !important; /* Force centering */
    font-size: 0.9rem;
    color: #90a4ae;
}

.footer-bottom p {
    text-align: center !important; /* Override global justification */
    margin-bottom: 0;
}

/* Mobile Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .features-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero-logo {
        top: 20px;
        left: 20px;
    }

    .hero-logo-img {
    height: 140px !important;
        /* Reducido proporcionalmente */
    }
}

/* --- Side Navigation (Standardized) --- */
.side-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 168, 225, 0.2);
        background: rgba(255, 255, 255, 0.1);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 168, 225, 0.6);
        background: rgba(255, 255, 255, 0.2);
    }
}

/* Contact Card Simple (Centering emergency lines) */
.contact-card-simple {
    text-align: center;
    margin: 40px auto;
    padding: 30px;
    background: rgba(236, 239, 241, 0.5);
    border-radius: 12px;
    max-width: 600px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-card-simple h3 {
    margin-bottom: 20px;
    color: var(--secondary);
}

.contact-card-simple p {
    text-align: center !important;
    margin-bottom: 10px;
}

/* Contact Page Congruency */
.contact-grid {
    align-items: stretch !important;
}

.contact-card {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.contact-card h2 {
    margin-bottom: 30px;
    color: var(--secondary);
    font-family: 'Orbitron', sans-serif;
    font-size: 1.6rem;
    text-align: center !important; /* Centered as requested */
}

/* Lightbox Zoom Feature */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.lightbox-overlay.active .lightbox-img {
    transform: scale(1);
}

.gallery-item img, .gallery-grid img {
    cursor: zoom-in;
    transition: transform 0.3s ease;
}

.gallery-item img:hover, .gallery-grid img:hover {
    transform: scale(1.03);
}

.contact-details {
    list-style: none;
    padding: 0;
}

.contact-details li {
    margin-bottom: 15px;
    font-size: 1.1rem;
    line-height: 1.4;
}

.custom-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.custom-form label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: var(--secondary);
}

.custom-form input, 
.custom-form select, 
.custom-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    transition: all 0.3s ease;
}

.custom-form input:focus, 
.custom-form select:focus, 
.custom-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.1);
    outline: none;
}
/* --- HEADER SCROLLED STATE --- */
.header.scrolled {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1) !important;
}
.header.scrolled .nav-list a { color: #111 !important; }
.header.scrolled .lang-btn { color: #111 !important; }

/* --- DESKTOP HEADER REFINEMENT --- */
@media (min-width: 1025px) {
    .header-logo-container { display: block !important; }
    .header-logo img { height: 60px !important; width: auto !important; }
    .nav-list i { display: none !important; }
    .premium-mobile-nav { display: none !important; }
    .mobile-top-bar {
 display: none !important; }
    .mobile-trigger-btn { display: none !important; }
    
    /* Side Nav Desktop Only */
    body:hover .side-nav { opacity: 0.15; }
    .side-nav:hover { opacity: 1 !important; }
}

/* --- THE FINAL ATOMIC PREMIUM MOBILE SYSTEM (v11.7) --- */
@media (max-width: 1150px) {
    /* Hide Desktop Nav completely */
    /* Reset Header for Mobile to allow Language Selector visibility */
    .header { 
        display: block !important; 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    .header-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .nav, .header-logo-container, .mobile-menu-toggle { display: none !important; }
    .side-nav { display: none !important; }

    /* Logo with Mirror Border (Symmetric) */
    .hero-logo {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 100000005 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 5px !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }
    
    .hero-logo-img { height: 60px !important; width: auto !important; }

    /* Floating Controls Group (Right) */
    .mobile-trigger-btn {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        width: 55px !important;
        height: 55px !important;
        border-radius: 50% !important;
        background: #00f2ff !important;
        color: #000 !important;
        z-index: 100000006 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px !important;
        border: 3px solid white !important;
        box-shadow: 0 5px 20px rgba(0, 242, 255, 0.5) !important;
    }

    .hero-free-estimate {
        position: fixed !important;
        top: 75px !important; /* Under Menu Button */
        right: 10px !important;
        z-index: 100000004 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 2px solid white !important;
        color: white !important;
        padding: 8px 15px !important;
        font-size: 0.7rem !important;
        border-radius: 8px !important;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        display: block !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    }

    /* Language Switcher Mobile (Floating under Estimate) */
    .header-actions {
        display: block !important;
        position: fixed !important;
        top: 10px !important; /* Al par del logotipo */
        left: 100px !important; /* Distancia prudente (Logo en 10px + ancho) */
        z-index: 100000004 !important;
    }
    
    .lang-selector-wrapper {
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 50px !important;
        padding: 2px !important;
    }
    
    .lang-btn { font-size: 0.6rem !important; padding: 4px 10px !important; color: white !important; }
    .lang-btn.active { background: #00f2ff !important; color: black !important; }

    /* Mobile Menu Sidebar */
    .premium-mobile-nav {
        display: block !important;
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 280px !important; height: 100vh !important;
        background: rgba(10, 15, 30, 0.98) !important;
        backdrop-filter: blur(25px) !important;
        z-index: 100000010 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.4s ease !important;
    }
    body.menu-active .premium-mobile-nav { transform: translateX(0) !important; }
    
    .premium-nav-list { list-style: none; padding: 20px; }
    .premium-nav-list li { margin-bottom: 10px; }
    .premium-nav-list a { color: white; text-decoration: none; font-size: 1.1rem; display: flex; align-items: center; gap: 15px; padding: 10px; border-radius: 10px; }
    .premium-nav-list a.active { background: rgba(0, 242, 255, 0.15); color: #00f2ff; }
}

/* Phones */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.2rem; }
    .features-grid, .categories-grid, .footer-grid { grid-template-columns: 1fr; }
}/* --- Side Navigation Restoration (v11.8) --- */
.side-nav {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.side-nav-btn {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.side-nav-btn:hover {
    background: #00f2ff;
    color: black;
    border-color: #00f2ff;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
}
/* Elegant Premium Button (v16.4) */
.premium-submit-btn {
    width: 100%;
    padding: 14px 30px;
    font-weight: 700;
    background: linear-gradient(135deg, #00f2ff 0%, #0097a7 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 242, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.85rem !important;
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

.premium-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 242, 255, 0.5) !important;
    filter: brightness(1.1);
}
/* Crystal Menu Logo (v17.0) */
.mobile-menu-logo div {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)) !important;
    position: relative;
    overflow: hidden;
}

.mobile-menu-logo div::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: rotate(45deg);
    animation: crystalShine 4s infinite linear;
}

@keyframes crystalShine {
    0% { transform: translate(-100%, -100%) rotate(45deg); }
    100% { transform: translate(100%, 100%) rotate(45deg); }
}

@media (max-width: 1150px) {
    /* Reset Header for Mobile */
    .header { 
        display: block !important; 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    .header-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .nav, .header-logo-container, .mobile-menu-toggle { display: none !important; }
    .side-nav { display: none !important; }

    /* Logo at top left */
    .hero-logo {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 100000005 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        padding: 5px !important;
        border-radius: 8px !important;
    }
    .hero-logo-img { height: 60px !important; width: auto !important; }

    /* Language next to logo */
    .header-actions {
        display: block !important;
        position: fixed !important;
        top: 10px !important;
        left: 100px !important;
        z-index: 100000004 !important;
    }
    
    /* Menu Toggle (Floating Blue Circle) */
    .mobile-trigger-btn {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        width: 55px !important;
        height: 55px !important;
        border-radius: 50% !important;
        background: #00f2ff !important;
        color: #000 !important;
        z-index: 100000006 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 24px !important;
        border: 3px solid white !important;
    }
}
/* --- TABLET & MOBILE REFINEMENT (v28.0) --- */
@media (max-width: 1150px) {
    /* Hide Scroll Navigation on Touch Devices */
    .side-nav { display: none !important; }
    
    /* Reposition and Shrink Hero Logo to avoid collision */
    .hero-logo {
        top: 80px !important; /* Below the floating header */
        left: 20px !important;
        transform: none !important;
    }
    .hero-logo-img {
        height: 80px !important; /* Smaller for tablets */
        width: auto !important;
    }
    
    /* Ensure Hero Content doesn't overlap with the newly moved logo */
    .hero-content {
        padding-top: 100px !important;
    }
}
/* --- THE ABSOLUTE TABLET SHIELD (v28.1) --- */
@media (max-width: 1366px) {
    /* Hide Scroll Navigation on ALL Touch/Tablet/Small Laptop views */
    .side-nav { display: none !important; }
    
    /* Force Hero Logo to top-left and shrink it */
    .hero-logo {
        position: absolute !important;
        top: 100px !important; /* Safe distance below menu */
        left: 20px !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 100 !important;
    }
    .hero-logo-img {
        height: 70px !important; /* Final small size for tablets */
        width: auto !important;
    }
}
/* --- GLASS FRAME REFINEMENT (v28.2) --- */
@media (max-width: 1366px) {
    .hero-logo {
        display: inline-flex !important;
        padding: 10px !important; /* Reduced padding for tighter fit */
        width: fit-content !important;
        height: fit-content !important;
        border-radius: 12px !important;
    }
}
/* --- HEADER CONTROLS REPOSITIONING (v28.3) --- */
@media (max-width: 1366px) {
    .header-actions {
        display: block !important;
        position: fixed !important;
        top: 20px !important;
        right: 80px !important; /* Positioned to the left of the menu button */
        left: auto !important;
        z-index: 100000006 !important;
    }
    .mobile-trigger-btn {
        right: 15px !important;
    }
}
/* --- BUTTON GAP TUNING (v28.4) --- */
@media (max-width: 1366px) {
    .header-actions {
        right: 75px !important; /* Slightly closer to menu button in Eco 1 */
    }
}
/* --- MAXIMUM PROXIMITY TUNING (v28.5) --- */
@media (max-width: 1366px) {
    .header-actions {
        right: 72px !important; /* Aggressive proximity for Eco 1 */
    }
}
/* --- FINAL HEADER TUNING (v28.6) --- */
@media (max-width: 1366px) {
    .header-actions {
        right: 70px !important; /* Touch proximity for Eco 1 */
    }
}
/* --- OVERLAP PROXIMITY (v28.7) --- */
@media (max-width: 1366px) {
    .header-actions {
        right: 65px !important; /* Moving even closer, nearly overlapping the margin of the menu button */
    }
}
/* --- LEFT SIDE ALIGNMENT (v28.8) --- */
@media (max-width: 1366px) {
    .header-actions {
        right: auto !important;
        left: 30px !important; /* Positioned horizontally next to the logo */
        top: 20px !important;
    }
}

}
/* --- SMART RESPONSIVE HEADER (v29.0) --- */
/* For Small Laptops/Large Tablets (Desktop Menu still visible) */
@media (min-width: 1025px) and (max-width: 1400px) {
    .header-actions {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        display: flex !important;
        margin-left: 20px;
        z-index: 100 !important;
    }
}

/* For Mobile/Vertical Tablet (Hamburger Menu visible) */
@media (max-width: 1150px) {
    .header-actions {
        position: fixed !important;
        top: 20px !important;
        left: 25px !important; /* Over logo ONLY when menu is hidden */
        right: auto !important;
        z-index: 100000010 !important;
    }
}
/* --- INTERMEDIATE ALIGNMENT SYNC (v29.1) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .header-actions {
        position: absolute !important;
        right: 30px !important; /* Positioned at the end of the header bar */
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        margin-left: 0 !important;
        z-index: 1000 !important;
    }
}
/* --- THE END-OF-BAR ANCHOR (v29.2) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .header { position: relative !important; }
    .header-actions {
        position: absolute !important;
        right: 40px !important; /* Fixed at the far right of the header bar */
        left: unset !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        z-index: 1000 !important;
    }
}
/* --- FLEX FLOW RESTORATION (v29.3) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .header-container {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: 95% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    .desktop-nav {
        margin-right: 20px !important;
    }
    .header-actions {
        position: static !important; /* Back to normal flow */
        transform: none !important;
        display: flex !important;
    }
}
/* --- VERTICAL COMPACTION (v29.4) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .hero-logo {
        top: 75px !important; /* Raised to almost touch the menu bar */
        left: 20px !important;
    }
    .estimate-btn, .hero-free-estimate {
        top: 75px !important; /* Raised to match the logo height */
        right: 20px !important;
        position: absolute !important;
        z-index: 100 !important;
    }
}
/* --- AGGRESSIVE VERTICAL CLIMB (v29.5) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .hero-logo {
        top: 58px !important; /* Extremely close to the header bar */
    }
    .estimate-btn, .hero-free-estimate {
        top: 58px !important; /* Matching the logo's new aggressive height */
    }
}
/* --- ZENITH CLIMB (v29.6) --- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .hero-logo {
        top: 48px !important; /* Moving even higher to the limit */
    }
    .estimate-btn, .hero-free-estimate {
        top: 48px !important; /* Moving even higher to the limit */
    }
}
/* --- 30% LOGO REDUCTION (v32.2) --- */
@media (max-width: 1150px) {
    .hero-logo, .ghost-mobile-logo {
        width: 90px !important; /* Reduced 30% from ~130px */
        padding: 8px !important;
    }
    .hero-logo img, .ghost-logo-img {
        height: 50px !important; /* Reduced 30% from 70px */
    }
}
/* --- LOGO CENTERING SYNC (v32.3) --- */
@media (max-width: 1150px) {
    .hero-logo, .ghost-mobile-logo {
        width: 90px !important;
        height: 90px !important; /* Square glass box */
        padding: 0 !important; /* Reset padding to use flex centering */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    .hero-logo img, .ghost-logo-img {
        width: 85% !important; /* Keep horizontal margins */
        height: 65px !important; /* Stretched vertically as requested for equal margins */
        object-fit: contain !important; /* Ensure it doesn't distort too much */
    }
}
/* --- MOBILE TRIGGER & LANG FIX (v32.5) --- */
@media (max-width: 1150px) {
    .desktop-nav { display: none !important; }
    
    .mobile-menu-trigger {
        display: flex !important;
        position: fixed !important;
        right: 20px !important;
        top: 25px !important;
        z-index: 100000015 !important;
    }
    
    .header-actions {
        position: static !important;
    }
    
    .lang-selector-wrapper {
        position: fixed !important;
        left: 30px !important; /* Move language to the left as requested */
        right: auto !important;
        top: 25px !important;
        z-index: 100000015 !important;
    }
}
/* --- FORCED MENU BUTTON VISIBILITY (v32.6) --- */
@media (max-width: 1150px) {
    /* Ensure the mobile top bar or the trigger is forced visible */
    .mobile-top-bar, .mobile-trigger-btn, .mobile-menu-toggle, .mobile-menu-trigger {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-trigger-btn, .mobile-menu-toggle, .mobile-menu-trigger {
        position: fixed !important;
        right: 20px !important;
        top: 25px !important;
        z-index: 100000020 !important;
        color: #007bff !important; /* Visible Blue */
        background: rgba(255, 255, 255, 0.8) !important;
        padding: 10px !important;
        border-radius: 5px !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Ensure the icon inside is also visible */
    .mobile-menu-toggle span {
        background-color: #007bff !important; /* For spans in the hamburger */
    }
    .mobile-trigger-btn i, .mobile-menu-trigger i {
        color: #007bff !important;
        background: transparent !important;
        background-color: transparent !important;
    }
}
/* --- SINGLE MENU & LOGO REFINEMENT (v32.7) --- */
@media (max-width: 1150px) {
    /* Hide duplicates */
    .mobile-menu-toggle, .mobile-menu-trigger { 
        display: none !important; 
    }
    
    /* Leave ONLY the main trigger button */
    .mobile-trigger-btn {
        display: flex !important;
        position: fixed !important;
        right: 15px !important;
        top: 15px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        font-size: 1.1rem !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        z-index: 100000025 !important;
        color: #007bff !important;
    }

    /* Logo Image Expansion: Filling the container better */
    .hero-logo img, .ghost-logo-img {
        height: 78px !important; /* Increased from 65px to fill the 90px box better */
        width: auto !important;
        object-fit: contain !important;
    }
}
/* --- THE ECO 1 RECONCILIATION (v32.8) --- */
@media (max-width: 1150px) {
    /* Remove duplicate language bar from header actions */
    .header-actions, .header-actions .lang-selector-wrapper {
        display: none !important;
    }
    
    /* Fine-tune logo size */
    .hero-logo img, .ghost-logo-img {
        height: 72px !important; /* Slightly reduced from 78px */
    }

    /* Lower Free Estimate to avoid menu button collision */
    .hero-free-estimate {
        top: 85px !important; /* Pushed down to clear the top right area */
        right: 15px !important;
    }
}
/* --- THE LOGO DESCENT (v32.9) --- */
@media (max-width: 1150px) {
    .hero-logo, .ghost-mobile-logo {
        top: 150px !important; /* Lowered from 120px to 150px as requested */
    }
}
/* --- THE LOGO FINE-TUNING (v33.0) --- */
@media (max-width: 1150px) {
    /* Correcting overall height (not too low) */
    .hero-logo, .ghost-mobile-logo {
        top: 135px !important; /* Adjusted to the perfect "un poco" lower point */
    }

    /* Centering the logo image precisely within the glass box */
    .hero-logo img, .ghost-logo-img {
        padding-top: 6px !important; /* Lowering it slightly inside the frame for perfect centering */
    }
}
/* --- THE 10PX PROXIMITY SYNC (v33.1) --- */
@media (max-width: 1150px) {
    /* Anchoring top buttons at 15px */
    .lang-selector-wrapper, .mobile-trigger-btn {
        top: 15px !important;
    }
    
    /* Logo and Free Estimate at 65px (15px top + 40px height + 10px gap) */
    .hero-logo, .ghost-mobile-logo, .hero-free-estimate {
        top: 65px !important;
    }
}
/* RE-DISEÑO DE HERO UNIVERSAL ECO 1 (v43.0) */
@media (max-width: 1250px) {
    .hero, .hero-carousel, .page-hero, .hero-section {
        padding-top: 140px !important; justify-content: flex-start !important; /* BUFFER PARA EVITAR COLISIÓN CON LOGO */
        min-height: auto !important;
        height: auto !important;
        padding-bottom: 50px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    .hero-content h1, .page-hero h1 {
        font-size: 1.8rem !important;
        margin-top: 20px !important;
    }
    .hero-content h1, .hero-content h2, .page-hero h1 {
        transform: translateY(-50px) !important; /* SUBE EL TEXTO (v43.9) */
    }
    .hero-btns {
        transform: translateY(0) !important; /* MANTIENE LOS BOTONES EN SU LUGAR */
        margin-top: 20px !important;
    }
}
/* SURGICAL STABILIZATION ECO 1 (v44.9) */

/* 1. ELEVACIÓN DE TEXTO HOME (SIN MOVER BOTONES) */
@media (max-width: 1250px) {
    .hero-content h1, .hero-content h2 {
        transform: translateY(-60px) !important; /* SUBE EL TEXTO SOLAMENTE */
    }
    .hero-btns {
        transform: translateY(0) !important; /* BLINDA LOS BOTONES EN SU SITIO */
        margin-top: 50px !important; /* ASEGURA LA HOLGANZA */
    }
}

/* 2. INDEPENDIZACIÓN DE SERIES (ANCHO TOTAL) */
@media (max-width: 991px) {
    .series-grid-main {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    .series-item {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px !important;
    }
    .series-image {
        width: 100% !important;
        height: 300px !important;
    }
}

/* 3. CENTRADO ABSOLUTO (FOTOS 3 Y 4) */
.contact-info, .about-content, .section-header, .footer-col, .page-hero .container {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.contact-details, .footer-col ul {
    list-style: none;
    padding: 0;
    text-align: center !important;
    width: 100% !important;
}

.contact-details li, .footer-col li, .footer-col p {
    text-align: center !important;
    margin: 5px auto !important;
    width: 100% !important;
}

/* 4. CONTORNOS Y SEGREGACIÓN DE ICONOS */
.hero-content h1, .hero-content h2, .hero-content p, .page-hero h1, .page-hero p {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 10px rgba(0,0,0,0.8) !important;
}

@media (min-width: 1024px) {
    .nav-list i, .premium-nav-list i { display: none !important; }
}
@media (max-width: 1023px) {
    .nav-list i, .premium-nav-list i { display: inline-block !important; color: #fff !important; margin-right: 12px !important; }
}
/* LOCK TOTAL DE DISEÑO ECO 1 (v45.0) */

/* 1. Elevación de Texto (Foto 1) */
@media (max-width: 1250px) {
    .hero-content h1, .hero-content h2 { transform: translateY(-70px) !important; }
    .hero-btns { transform: translateY(0) !important; margin-top: 60px !important; }
}

/* 2. Independización de Series (Foto 2) */
@media (max-width: 991px) {
    .series-grid-main { display: flex !important; flex-direction: column !important; width: 100% !important; }
    .series-item { width: 100% !important; max-width: none !important; margin-bottom: 40px !important; }
    .series-image { width: 100% !important; height: 350px !important; }
}

/* 3. Centrado Total (Fotos 3 y 4) */
.contact-info, .about-content, .section-header, .footer-col, .footer-grid, .page-hero .container {
    text-align: center !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    width: 100% !important;
}
.contact-details li, .footer-col li, .footer-col p { text-align: center !important; margin: 10px auto !important; }

/* 4. Contornos de Texto */
.hero-content h1, .hero-content h2, .hero-content p, .page-hero h1, .page-hero p {
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 3px 15px rgba(0,0,0,0.9) !important;
}
/* REFINAMIENTO DE DISEÑO Y SIMETRÍA ECO 1 (v45.2) */

/* 1. Footer en Escritorio (3 Columnas Centradas) */
@media (min-width: 1025px) {
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 40px !important;
        text-align: center !important;
    }
}

/* 2. Footer en Móvil (Apilado Centrado) */
@media (max-width: 1024px) {
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* 3. Reglas Universales de Centrado para Columnas del Footer */
.footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.footer-col h3, .footer-col h4, .footer-col p, .footer-col ul, .footer-col li {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 4. Elevación de Texto Home (Sin mover botones) */
@media (max-width: 1250px) {
    .hero-content h1, .hero-content h2 { transform: translateY(-70px) !important; }
    .hero-btns { transform: translateY(0) !important; margin-top: 60px !important; }
}

/* 5. Independización de Series (Ancho Total en Móvil) */
@media (max-width: 1024px) {
    .series-grid-main { display: flex !important; flex-direction: column !important; }
    .series-item { width: 100% !important; max-width: none !important; margin-bottom: 40px !important; }
}
/* OVERRIDE DEFINITIVO DE ALINEACIÓN ECO 1 (v45.3) */

/* Centrado Radical del Footer */
footer, .footer, #footer, .footer-grid, .footer-col {
    text-align: center !important;
}

.footer-col *, .footer-grid * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

.footer-col li, .footer-col p {
    width: 100% !important;
}

/* Stacking de Series Radical */
@media (max-width: 1100px) {
    .series-grid-main {
        display: block !important;
        width: 100% !important;
    }
    .series-item {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 0 50px 0 !important;
    }
    .series-image {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }
}
/* REFINAMIENTO FINAL DE HERO (v46.4) */
@media (min-width: 501px) { /* UMBRAL MÁS BAJO PARA ASEGURAR QUE EL USUARIO LO VEA */
    .hero-content p {
        font-size: 2.1rem !important; /* MÁS GRANDE (CASI EL DOBLE) */
        max-width: 500px !important;  /* ÁREA ANGOSTA PARA FORZAR MÍNIMO 2 FILAS */
        margin-left: auto !important;
        margin-right: auto !important;
        line-height: 1.2 !important;
        color: #fff !important;
        font-weight: 400 !important;
        display: block !important;
    }
    
    .hero-btns {
        margin-top: 80px !important; /* DOS ESPACIOS VACÍOS CLAROS */
        display: flex !important;
        justify-content: center !important;
    }
}

/* REFUERZO DE ESPACIADO Y ESTRUCTURA (v48.2) */
@media (min-width: 1024px) {
    body, .container, .header, .footer {
        padding-left: 50px !important;
        padding-right: 50px !important;
        max-width: 1600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .series-grid-main {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 40px 0 !important;
    }
    
    .series-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 60px !important;
        margin-bottom: 56px !important; /* Math: 20px padding-bottom + 56px margin + 20px padding-top = 96px (exactly 1 inch) */
        padding: 20px 0 !important;
    }
    
    .series-item:nth-child(even) {
        flex-direction: row-reverse !important;
    }
    
    .series-image {
        flex: 1 !important;
        height: 450px !important;
        border-radius: 20px !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
    }
    
    .series-info {
        flex: 1 !important;
    }
    
    .series-info h2 {
        font-size: 2rem !important;
        margin-bottom: 25px !important;
    }
}
/* --- RESPONSIVE LANGUAGE CONTROLS (v49.7) --- */
:root {
    --logo-inicio: 15px;
    --logo-ancho: 100px;
    --control-ancho: 85px;
}

.mobile-top-bar {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

.mobile-top-bar .lang-selector-wrapper { 
    margin-left: calc(var(--logo-inicio) + (var(--logo-ancho) - var(--control-ancho)) / 2);
}

.mobile-top-bar .mobile-trigger-btn { 
    margin-left: auto;
    margin-right: 15px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}
/* Desktop View: Hide Mobile Bar, Show Desktop Lang */
@media (min-width: 1025px) {
    .mobile-top-bar {
 display: none !important; }
    .header-actions .lang-selector-wrapper { display: flex !important; }
}
/* Mobile View: Show Mobile Bar, Hide Desktop Lang */
@media (max-width: 1024px) {
    .mobile-top-bar {
 display: flex !important; }
    .header-actions .lang-selector-wrapper { display: none !important; }
    .mobile-trigger-btn:not(.mobile-top-bar .mobile-trigger-btn) { display: none !important; } /* Hide redundant triggers */
}
/* SURGICAL WIDTH & CENTERING OVERRIDE */
body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.hero-carousel {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
.carousel-container, .carousel-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .mobile-top-bar .lang-selector-wrapper { 
        position: absolute !important;
        left: 65px !important;
        transform: translateX(-50%) !important;
        top: -22px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* SURGICAL SECTION SPACING CAP (MAX 1 INCH / 96PX) */
.series-grid-main {
    padding-bottom: 0px !important;
}
.series-item:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (min-width: 1025px) {
    .categories, .services, .contact, .contact-page {
        padding-top: 96px !important; /* Exactly 1 inch */
        padding-bottom: 96px !important; /* Exactly 1 inch */
    }
}

@media (max-width: 1024px) {
    .categories, .services, .contact, .contact-page {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    .series-item {
        margin-bottom: 30px !important; /* Balanced gap between stacked items */
    }
    .series-item:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* MOBILE & TABLET HERO FULL-SCREEN STABILIZATION */
@media (max-width: 1024px) {
    .hero-carousel {
        height: 100vh !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 150px !important; /* Safety clearance for logo */
        padding-bottom: 50px !important;
        box-sizing: border-box !important;
    }
    
    .hero-carousel .hero-content {
        margin: auto 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    .hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.2 !important;
        margin: 0 0 15px 0 !important;
        transform: none !important;
        text-align: center !important;
    }
    .hero-content h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        margin: 0 0 15px 0 !important;
        transform: none !important;
        text-align: center !important;
    }
    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin: 0 0 25px 0 !important;
        max-width: 600px !important;
        transform: none !important;
        text-align: center !important;
    }

    .hero-btns {
        transform: none !important;
        margin-top: 25px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .hero-btns a.btn {
        margin: 0 !important;
    }

    /* Stacking Contact Form and Details on Mobile & Tablet */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
        align-items: stretch !important;
    }
}

/* --- GLASS REPLACEMENT PAGE STYLES --- */
.glass-replacement-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 20px;
}
@media (max-width: 1024px) {
    .glass-replacement-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
.replacement-info-col h2 {
    color: #00f2ff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 25px;
    text-align: left !important;
}
.replacement-info-col .content-text p {
    color: #cbd5e1;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: left !important;
}
.services-list-wrapper {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px;
    border-radius: 12px;
}
.services-list-wrapper h3 {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 15px;
    text-align: left !important;
}
.replacement-services-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.replacement-services-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: #94a3b8;
    line-height: 1.5;
    text-align: left !important;
}
.replacement-services-list li::before {
    content: "•";
    position: absolute;
    left: 10px;
    color: #00f2ff;
    font-weight: bold;
}
.replacement-services-list li.disclaimer-item {
    font-style: italic;
    color: #f43f5e;
    margin-top: 15px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}
.replacement-services-list li.disclaimer-item::before {
    color: #f43f5e;
}

/* Gallery and Contact Column */
.replacement-gallery-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.replacement-gallery-col .contact-card-simple {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(0, 242, 255, 0.2);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.replacement-gallery-col .contact-card-simple h3 {
    color: #00f2ff;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 20px;
    font-size: 1.4rem;
    text-align: center !important;
}
.contact-phones p {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #cbd5e1;
    text-align: center !important;
}
.contact-hours, .contact-email {
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    color: #94a3b8;
    text-align: center !important;
}
.contact-email a {
    color: #00f2ff;
    text-decoration: none;
    display: inline-block !important;
}
.contact-email a:hover {
    text-decoration: underline;
}

/* Gallery Wrapper */
.gallery-wrapper {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
}
.gallery-wrapper .gallery-title {
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 20px;
    text-align: center !important;
    background: rgba(15, 23, 42, 0.6);
    padding: 10px;
    border-radius: 6px;
    border-bottom: 2px solid #00f2ff;
}
.gallery-grid-8 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 600px) {
    .gallery-grid-8 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.gallery-grid-8 .gallery-item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.gallery-grid-8 .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-grid-8 .gallery-item:hover {
    transform: scale(1.05);
    border-color: #00f2ff;
}

/* --- GLASS REPLACEMENT SECTION STYLE REFINEMENT --- */
.services {
    background-color: #ffffff !important;
}
.services .container {
    max-width: 1000px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    margin: 0 auto !important;
}
@media (max-width: 480px) {
    .services .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Force all text inside .services to be black */
.services h2,
.services h3,
.services h4,
.services p,
.services li,
.services a,
.services strong,
.services span {
    color: #000000 !important;
}

/* Disclaimer text also black but italic */
.replacement-services-list li.disclaimer-item {
    color: #000000 !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.15) !important;
}
.replacement-services-list li.disclaimer-item::before {
    color: #000000 !important;
}

/* Bullet list markers in black */
.replacement-services-list li::before {
    color: #000000 !important;
}

/* Card backgrounds adjusted to light theme for legibility */
.services-list-wrapper {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.replacement-gallery-col .contact-card-simple {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

.contact-hours, .contact-email {
    border-top: 1px solid #e2e8f0 !important;
}

.contact-email a {
    text-decoration: underline !important;
}

.gallery-wrapper {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.gallery-wrapper .gallery-title {
    background: #e2e8f0 !important;
    border-bottom: 2px solid #000000 !important;
}

.gallery-grid-8 .gallery-item {
    border: 1px solid #e2e8f0 !important;
}
.gallery-grid-8 .gallery-item:hover {
    border-color: #000000 !important;
}






/* GLOBAL MOBILE HERO FIX (Applied 2026-05-20) */
@media (max-width: 767px) {
    .page-hero { height: auto !important; min-height: 75vh !important; }
    .page-hero .container { padding-top: 120px !important; }
}



/* --- EXTRACTED FROM HTML HEAD --- */
/* VISTA ESCRITORIO */
@media (min-width: 768px) {
    .hero-content p {
        font-size: 1.25rem !important; 
        max-width: 600px !important;
        margin: 0 auto 40px auto !important;
        line-height: 1.4 !important;
        display: block !important;
    }
    .hero-btns { margin-top: 100px !important; }
}
/* VISTA MÓVIL */
@media (max-width: 767px) {
    .hero-logo { top: 58px !important; left: 15px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100px !important; height: 100px !important; padding: 10px !important; box-sizing: border-box !important; overflow: hidden !important; }
    .hero-logo-img { max-height: 85px !important; max-width: 85px !important; height: auto !important; width: auto !important; object-fit: contain !important; margin: 0 !important; display: block !important; }
    .hero-content p, .hero-btns { transform: none !important; }
    .hero-content p { font-size: 0.95rem !important; max-width: 82% !important; margin: 0 auto 15px auto !important; }
    .hero-btns { margin-top: 15px !important; }
}
@media (min-width: 1024px) {
    .featured-series .container, 
    .testimonials .container, 
    .areas-served .container,
    .youtube-spotlight .container {
        padding-left: 50px !important;
        padding-right: 50px !important;
        max-width: calc(100% - 100px) !important;
    }
}
@media (max-width: 767px) {
    .page-hero { 
        height: auto !important; 
        min-height: 69vh !important; 
        justify-content: center !important; 
        padding-top: 0 !important; 
    }
    .page-hero .container { padding-top: 0 !important; }
    .page-hero h1, .page-hero p { transform: none !important; }
}


/* ==========================================================================
   ECOSYSTEM 4: CYBER-GLASS FUTURISTIC THEME
   ========================================================================== */

/* 1. WebGL Canvas Background */
#webgl-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important; /* Put behind everything */
    pointer-events: none !important; /* Let clicks pass through to the page */
}

/* 2. Global Transparency & Typography */
body, html {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    font-family: 'Rajdhani', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
}

/* Strip all existing solid backgrounds so WebGL shines through */
main, section, .hero-carousel, .bg-alt, .about-section, .services, .contact-section, .gallery-section, .footer, .youtube-spotlight, .testimonials, .features {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important; /* Remove static photos */
}

/* 3. The Cyber Header */
.header, .mobile-top-bar {
    background: rgba(5, 5, 8, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 243, 255, 0.5) !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.2) !important;
}
.nav-list a {
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}
.nav-list a:hover {
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.8) !important;
}

/* 4. Cyber-Glassmorphism Cards */
.service-card, .feature-card, .testimonial-card, .about-content {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    border-radius: 4px !important; /* Sharp futuristic edges */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 20px rgba(0, 243, 255, 0.05) !important;
    color: #e2e8f0 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.service-card:hover, .feature-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(0, 243, 255, 0.8) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6), inset 0 0 30px rgba(0, 243, 255, 0.15) !important;
}
.service-card h3, .feature-card h3 {
    color: #00f3ff !important;
}

/* 5. Neon Buttons */
.btn, .btn-primary, .btn-secondary {
    background: transparent !important;
    color: #00f3ff !important;
    border: 1px solid #00f3ff !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(0, 243, 255, 0.1) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.btn:hover, .btn-primary:hover {
    background: #00f3ff !important;
    color: #050508 !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

/* 6. Hero Specific Overrides */
.hero-content h1 {
    font-size: 4rem !important;
    color: #ffffff !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.8), 0 0 40px rgba(112, 0, 255, 0.5) !important;
}
.hero-content h2, .hero-content p {
    color: #e2e8f0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}

/* 7. Logos and Images */
.hero-logo-img {
    filter: drop-shadow(0 0 15px rgba(0, 243, 255, 0.6)) brightness(1.2) !important;
}

/* 8. Fix GSAP Scroll elements (hide initially for reveal) */
.gsap-reveal {
    opacity: 0;
    transform: translateY(50px);
}

/* 9. Thematic Hero Canvas */
#thematic-canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.page-hero, .hero-carousel {
    position: relative !important;
    background: transparent !important;
    background-image: none !important; /* Force remove static backgrounds */
}
.page-hero .container, .hero-content {
    position: relative !important;
    z-index: 1 !important;
}


/* Fix black text bug by removing webkit text stroke from all headings */
h1, h2, h3, h4, h5, h6, .section-title {
    -webkit-text-stroke: 0 !important;
    color: #ffffff !important;
}
.section-title {
    color: #ffffff !important;
    text-shadow: 0 0 15px rgba(0, 243, 255, 0.8) !important;
}

/* Make Home Carousel Images ghostly and transparent */
.carousel-slide {
    opacity: 0.35 !important;
    mix-blend-mode: screen !important; /* Screen mode makes it look like a bright hologram */
    filter: none !important;
}

/* Internal Pages Ghost Backgrounds */
.ghost-bg {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    opacity: 0.35 !important;
    mix-blend-mode: screen !important;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}


/* =========================================================
   GLOBAL DARK THEME TEXT OVERRIDES (Prevent black text)
   ========================================================= */
p, span, li, label, strong, em, b, i, td, th, blockquote, div {
    color: #e2e8f0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important; /* Slight drop shadow for readability against holograms */
}

/* Ensure links are bright */
a:not(.btn) {
    color: #00f3ff !important;
    text-decoration: none !important;
}
a:not(.btn):hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px #00f3ff !important;
}

/* Make sure inputs and textareas are legible */
input, textarea, select {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Keep our headings pure white */
h1, h2, h3, h4, h5, h6, .section-title {
    color: #ffffff !important;
}

/* Keep buttons neon cyan */
.btn, .btn-primary, .btn-secondary {
    color: #00f3ff !important;
}
.btn:hover, .btn-primary:hover {
    color: #050508 !important; /* Dark text when button lights up */
}


/* =========================================================
   ULTIMATE CLEANUP: NO BLUR, NO MUDDY COLORS, PURE WHITE TEXT
   ========================================================= */

/* 1. Pure White Text Everywhere to guarantee contrast */
body, html, p, span, li, label, strong, em, b, i, td, th, blockquote, div, h1, h2, h3, h4, h5, h6, .section-title, .hero-content p, .category-info span {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important; /* Strong drop shadow instead of blurry text shadow */
    -webkit-text-stroke: 0 !important; /* Kill the black border */
}

/* 2. Fix Links and Buttons */
a { color: #38bdf8 !important; }
a:hover { color: #ffffff !important; }
.btn, .btn-primary, .btn-secondary, .hero-free-estimate {
    background-color: #0ea5e9 !important; /* Clean corporate blue instead of neon cyan */
    color: #ffffff !important;
    border: none !important;
    text-shadow: none !important;
}
.btn:hover, .btn-primary:hover, .hero-free-estimate:hover {
    background-color: #38bdf8 !important;
}

/* 3. Kill the "Difuminado" (Blur) on all cards and containers */
.service-card, .feature-card, .testimonial-card, .about-content, .category-card, .catalog-item, .cat-item, .contact-card {
    background: rgba(15, 23, 42, 0.95) !important; /* Solid dark slate, almost opaque */
    backdrop-filter: none !important; /* KILL BLUR */
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

/* 4. Fix Background Images: Clean transparency, NO crazy blend modes */
.carousel-slide {
    opacity: 0.3 !important;
    mix-blend-mode: normal !important; /* Kill the muddy screen/luminosity effect */
    filter: none !important; /* Kill grayscale */
}

.ghost-bg {
    opacity: 0.3 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* 5. Clean up the hero overlay so it doesn't darken things too much */
.hero-overlay {
    background: rgba(0, 0, 0, 0.4) !important; /* Just a simple darkening layer */
}

/* 6. Header/Nav cleanup */
.header-container {
    background: rgba(15, 23, 42, 0.98) !important;
    backdrop-filter: none !important;
}
.nav-list a {
    color: #cbd5e1 !important;
}
.nav-list a.active, .nav-list a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

/* 7. Ensure WebGL canvas is clearly visible */
#webgl-canvas {
    opacity: 1 !important;
}


/* =========================================================
   CRITICAL FIX: PUSH 3D CANVAS TO THE VERY BACK
   ========================================================= */
#webgl-canvas {
    z-index: -999 !important; /* Force it behind EVERYTHING */
    pointer-events: none !important; /* Allow clicks to pass through */
    background: #000000; /* Fallback black */
}

/* Ensure body and html are transparent so the canvas can be seen */
body, html {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure the main wrapping sections sit on top of the canvas */
main, section, header, footer {
    position: relative;
    z-index: 1;
}

/* Ensure the thematic canvas in internal pages sits behind the text but in front of the background */
#thematic-canvas {
    z-index: 0 !important; /* Behind text (z-index 1) but in front of global canvas (-999) */
    pointer-events: none !important;
}


/* =========================================================
   NUCLEAR OVERRIDE: FORCE WHITE TEXT WITH HIGH SPECIFICITY
   ========================================================= */
main p, main h1, main h2, main h3, main h4, main h5, main h6, main span, main li, main strong, main div,
section p, section h1, section h2, section h3, section h4, section h5, section h6, section span, section li, section strong, section div,
.services p, .services h2, .services h3, .services h4, .services span, .services strong,
.replacement-services-list li, .replacement-services-list li.disclaimer-item, .replacement-services-list li::before,
.content-text p, .content-text span, .content-text strong {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    -webkit-text-stroke: 0 !important;
}

/* Explicitly fix Glass Replacement and Glass Partitions specific overrides from Eco 1 */
.bg-alt, .services.bg-alt, .features {
    background: transparent !important;
    background-color: transparent !important;
}

/* Re-protect buttons */
.btn:hover, .btn-primary:hover, .hero-free-estimate:hover {
    color: #050508 !important;
    text-shadow: none !important;
}


/* =========================================================
   FIX: SCROLLED NAV MENU TEXT COLOR
   ========================================================= */
.header.scrolled .nav-list a {
    color: #38bdf8 !important; /* Sky Blue as requested */
}
.header.scrolled .nav-list a:hover, .header.scrolled .nav-list a.active {
    color: #ffffff !important; /* Pure white on hover/active */
    background: rgba(255, 255, 255, 0.1) !important;
}
.header.scrolled .lang-btn {
    color: #38bdf8 !important;
}
.header.scrolled .lang-btn.active {
    color: #ffffff !important;
}