/* --- Variables de Marca y Estilos Globales --- */
:root {
    --primary-color: #0A74DA;
    --accent-color: #d92c2c;
    --dark-color: #2c3e50;
    --light-color: #ffffff;
    --bg-color: #f4f7f9;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Roboto', sans-serif;
    --container-width: 1200px;
}

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

body {
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--dark-color);
    background-color: var(--light-color);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 3.5rem; }
h2 { font-size: 2.5rem; text-align: center; }
h3 { font-size: 1.5rem; }

/* --- Botones --- */
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--light-color);
}
.btn-primary:hover {
    background-color: #085da9;
    transform: translateY(-2px);
}

.btn-accent {
    background-color: var(--accent-color);
    color: var(--light-color);
}
.btn-accent:hover {
    background-color: #b02323;
    transform: translateY(-2px);
}


/* --- Header / Navegación --- */
.main-header {
    background: var(--light-color);
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-toggle {
    display: none;
}

.logo {
    height: 50px;
}

.main-nav a {
    color: var(--dark-color);
    margin: 0 15px;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
}
.main-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}
.main-nav a:not(.btn):hover::after {
    width: 100%;
}
.main-nav a.btn {
    margin-left: 20px;
}

/* --- Sección Héroe --- */
.hero {
    background: linear-gradient(rgba(10, 25, 47, 0.6), rgba(10, 25, 47, 0.6)), url('https://images.unsplash.com/photo-1517430816045-df4b7de11d1d?q=80&w=2071') no-repeat center center/cover;
    color: var(--light-color);
    text-align: center;
    padding: 120px 0;
}
.hero h1 {
    margin-bottom: 1.5rem;
}
.hero p {
    font-size: 1.25rem;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    opacity: 0.9;
}

/* --- Sección de Servicios Destacados --- */
.featured-services {
    padding: 80px 0;
    background-color: var(--bg-color);
}
.services-grid {
    display: grid;
    /* Cambiamos a 3 columnas fijas en escritorio */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 3rem;
}

@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}
.service-card {
    background: var(--light-color);
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.07);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.15);
}
.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* --- Sección CTA --- */
.cta-section {
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: 80px 0;
    text-align: center;
}
.cta-section p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

/* --- Footer --- */
.main-footer {
    background-color: #1e2a36;
    color: #a0b3c6;
    padding-top: 60px;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding-bottom: 40px;
}
.footer-logo {
    height: 50px;
    margin-bottom: 1rem;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
}
.footer-section h3 {
    color: var(--light-color);
    margin-bottom: 1.5rem;
}
.footer-section ul {
    list-style: none;
}
.footer-section ul li a {
    color: #a0b3c6;
    text-decoration: none;
    margin-bottom: 10px;
    display: inline-block;
    transition: color 0.3s ease;
}
.footer-section ul li a:hover {
    color: var(--light-color);
}
.footer-section.contact a {
    color: #a0b3c6;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
.footer-section.contact a:hover {
    color: var(--light-color);
}
.footer-section.contact i {
    margin-right: 10px;
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #314458;
    font-size: 0.9rem;
}

/* --- Media Queries para Responsividad --- */
@media (max-width: 768px) {
    
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }

    /* --- Header y Navegación Móvil --- */
    .menu-toggle {
        display: block;
        font-size: 1.5rem;
        color: var(--dark-color);
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 81px;
        left: 0;
        width: 100%;
        background-color: var(--light-color);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        text-align: center;
    }

    .main-nav.is-active {
        display: flex;
    }

    .main-nav a {
        padding: 1rem 0;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
    }
    .main-nav a:not(.btn)::after {
        display: none;
    }
    .main-nav a.btn {
        margin: 1rem auto;
        width: 80%;
    }

    /* --- Secciones --- */
    .hero {
        padding: 80px 0;
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1.1rem;
    }

    .featured-services, .cta-section {
        padding: 60px 0;
    }

    /* --- Footer --- */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-section.about, .footer-section.contact {
        align-items: center;
    }
    .footer-section ul {
        padding: 0;
    }
}

/* ========================================================== */
/*           ESTILOS PARA TODAS LAS PÁGINAS INTERNAS          */
/* ========================================================== */

/* --- Wrapper general para centrar y limitar el ancho del contenido de texto --- */
.content-wrapper {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Encabezado General de Páginas Internas --- */
.page-header {
    color: var(--light-color);
    text-align: center;
    padding: 80px 20px;
    position: relative;
    background-size: cover;
    background-position: center;
}
.page-header h1 {
    font-size: 3rem;
}

/* --- Estilos para Secciones de Contenido General --- */
.content-section {
    padding: 100px 0;
}
.sub-services-section {
    padding: 100px 0;
    background-color: var(--bg-color);
}
.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

/* ========================================================== */
/*           TEMA OSCURO INMERSIVO (PARA SERVICIO ERP)         */
/* ========================================================== */

/* --- Fondo General del <main> --- */
main.dark-theme-service {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
main.dark-theme-service::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 25, 47, 0.92);
    z-index: 1;
}
main.dark-theme-service > section {
    position: relative;
    z-index: 2;
}

/* --- Encabezado Especial para ERP --- */
.service-hero-erp {
    padding: 150px 0;
}
.service-hero-erp h1,
.service-hero-erp p {
    color: var(--light-color);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease-out;
}
.service-hero-erp .container {
    perspective: 1000px;
}
.service-hero-erp .container:hover h1 { transform: translateZ(5px); }
.service-hero-erp .container:hover p { transform: translateZ(2px); }

/* --- Textos en Tema Oscuro --- */
.dark-theme-service .section-title,
.dark-theme-service .service-card h3,
.dark-theme-service .testimonial-section blockquote,
.dark-theme-service .pricing-header h3,
.dark-theme-service .pricing-features li,
.dark-theme-service .pricing-cost .price {
    color: var(--light-color);
}
.dark-theme-service,
.dark-theme-service .about-intro p,
.dark-theme-service .methodology-list li,
.dark-theme-service .ideal-for-item span,
.dark-theme-service .section-subtitle,
.dark-theme-service .pricing-features .includes-text,
.dark-theme-service .pricing-cost .details,
.dark-theme-service .cta-contact p {
    color: rgba(255, 255, 255, 0.85);
}
.dark-theme-service .about-intro p {
    font-size: 1.15rem;
    text-align: justify;
}
.dark-theme-service .methodology-list li {
    font-size: 1.15rem;
}

/* --- Fondos de Secciones y Tarjetas en Tema Oscuro --- */
.dark-theme-service .sub-services-section,
.dark-theme-service .pricing-section,
.dark-theme-service .testimonial-section {
    background: transparent;
}
.dark-theme-service .service-card,
.dark-theme-service .ideal-for-item {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme-service .service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(10, 116, 218, 0.25);
}

/* --- Componentes Específicos en Tema Oscuro --- */
.dark-theme-service .pricing-card {
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme-service .pricing-card.featured {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}
.dark-theme-service .cta-contact {
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Responsividad del Tema Oscuro --- */
@media (max-width: 768px) {
    main.dark-theme-service {
        background-attachment: scroll;
    }
    .service-hero-erp {
        padding: 100px 0;
    }
}



.cta-contact {
    text-align: center;
    background-color: var(--bg-color);
    padding: 40px;
    border-radius: 8px;
    margin-top: 4rem;
}
.service-card-link {
    text-decoration: none;
    color: inherit; /* Hereda el color del texto para que no se vea azul */
}

/* --- Estilos para Páginas Animadas (Construcción y 404) --- */
.animation-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60vh; /* Asegura que ocupe buen espacio vertical */
}

.animation-container h1 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.animation-container p {
    max-width: 500px;
    color: #555;
}

/* --- Estilos para la Página "Nosotros" (Diseño Híbrido) --- */

/* Estilos para la introducción */
.about-intro {
    max-width: 800px;
    margin: 0 auto;
    margin-bottom: 4rem;
}
.about-intro h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}
.about-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

/* Estilos para Misión y Visión */
.vision-mision-section {
    padding: 80px 0;
    background-color: var(--bg-color);
}
.vision-mision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.vision-mision-card {
    text-align: center;
}
.vision-mision-card i {
    font-size: 3.5rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}
.vision-mision-card h2 {
    text-align: center;
    font-size: 2rem;
}

/* Estilos para el Acordeón de Valores */
.accordion-section {
    padding-bottom: 80px;
}
.accordion {
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}
.accordion-item:last-child {
    border-bottom: none;
}
.accordion-header {
    width: 100%;
    background-color: var(--light-color);
    border: none;
    padding: 20px 25px;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}
.accordion-header:hover {
    background-color: var(--bg-color);
}
.accordion-header i {
    transition: transform 0.3s ease;
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: var(--bg-color);
    padding: 0 25px;
}
.accordion-item.is-open .accordion-header {
    background-color: var(--bg-color);
    color: var(--primary-color);
}
.accordion-item.is-open .accordion-header i {
    transform: rotate(180deg);
}
.valores-list {
    padding: 25px 0;
}
.valor-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}
.valor-item i {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-top: 5px;
}
.valor-item strong {
    display: block;
    color: var(--dark-color);
}
.valor-item span {
    color: #555;
}

/* Responsividad para la sección Misión/Visión */
@media (max-width: 768px) {
    .vision-mision-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}
/* --- Estilos para Páginas de Detalle de Servicio --- */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.sub-services-section {
    padding: 80px 0;
    background-color: var(--bg-color);
}
.sub-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.methodology-list {
    list-style: none;
    max-width: 800px;
    margin: 0 auto;
    padding-left: 0;
}
.methodology-list li {
    display: flex;
    align-items: flex-start;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.methodology-list i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-right: 15px;
    margin-top: 3px;
}

.cta-section-service {
    background-color: var(--light-color);
    padding-bottom: 80px;
}

/* === MEJORAS VISUALES PARA PÁGINAS DE SERVICIO === */

/* 1. Fondo del banner con gradiente y overlay */
.service-hero-overlay {
    position: relative;
    background-size: cover;
    background-position: center;
}
.service-hero-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente oscuro que intensifica el fondo */
    background: linear-gradient(45deg, rgba(10, 37, 68, 0.8), rgba(44, 62, 80, 0.9));
    z-index: 1;
}
.service-hero-overlay .container {
    position: relative;
    z-index: 2; /* Pone el texto por encima del overlay */
}

/* 2. Sección de Estadísticas de Confianza */
.stats-section {
    padding: 40px 0;
    background-color: var(--dark-color);
    color: var(--light-color);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}
.stat-item .stat-number {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    display: block;
    color: var(--primary-color);
}
.stat-item .stat-text {
    font-size: 1rem;
    opacity: 0.8;
}

/* 3. Hover en tarjetas de solución y colores de iconos */
.solution-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid #e0e0e0;
}
.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.15);
    border-color: var(--primary-color);
}
.solution-card h3 {
    font-size: 1.25rem; /* Ajuste para el texto de beneficio */
}
/* Colores dinámicos para los iconos */
.icon-color-primary i { color: var(--primary-color); }
.icon-color-accent i { color: var(--accent-color); }
.icon-color-warning i { color: #f39c12; } /* Naranja */
.solution-card:hover i {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}

/* 4. CTA Interno */
.internal-cta {
    text-align: center;
    margin-top: 3rem;
}
.internal-cta .btn-accent {
    font-size: 1.1rem;
    padding: 15px 40px;
}


/* 1. Fondo corporativo para la introducción */
.intro-background-section {
    position: relative;
    background-image: linear-gradient(rgba(10, 25, 47, 0.85), rgba(10, 25, 47, 0.85)), url('/images/corporate-background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax sutil */
    padding: 100px 0;
}

/* 2. Texto interactivo */
.interactive-intro-text {
    color: var(--light-color);
    font-size: 1.5rem; /* Letras grandes */
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.2s ease-out; /* Transición suave para el efecto del mouse */
}

/* Ajuste en el tamaño de fuente para las estadísticas */
.stat-item .stat-number {
    font-size: 3.5rem;
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .interactive-intro-text {
        font-size: 1.2rem;
    }
    .intro-background-section {
        padding: 60px 20px;
        background-attachment: scroll; /* Desactiva el parallax en móvil por rendimiento */
    }
}

/* === ESTILOS PARA EL NUEVO PANEL DE SOLUCIONES INTERACTIVAS === */
.sub-services-section {
    padding: 80px 0;
    background-color: var(--bg-color);
}

.interactive-solutions-panel {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Ratio 1:2 para triggers y display */
    gap: 40px;
    background-color: var(--light-color);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.solutions-triggers {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.solution-trigger {
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}
.solution-trigger:hover {
    border-color: var(--primary-color);
    background-color: #f8fafd;
}
.solution-trigger.is-active {
    border-color: var(--primary-color);
    background-color: #f0f6ff;
    box-shadow: 0 4px 15px rgba(10, 116, 218, 0.1);
}
.solution-trigger i {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}
.solution-trigger span {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
}
.icon-color-primary i { color: var(--primary-color); }
.icon-color-accent i { color: var(--accent-color); }
.icon-color-warning i { color: #f39c12; }

.solution-display-image {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.solution-display-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.solution-display-text h3 {
    font-size: 1.5rem;
}

.solution-display {
    transition: opacity 0.2s ease-in-out;
}
.solution-display.is-changing {
    opacity: 0;
}

/* Responsividad */
@media (max-width: 992px) {
    .interactive-solutions-panel {
        grid-template-columns: 1fr;
    }
}

/* --- Estilos para la Sección "Por qué elegirnos" --- */
.why-us-section {
    padding: 80px 0;
}
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 3rem;
}
.why-us-card {
    text-align: center;
}
.why-us-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

/* --- Estilos para la Sección de Clientes --- */
.clients-section {
    padding: 80px 0;
    background-color: var(--bg-color);
}
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 3rem;
}
.clients-grid img {
    max-height: 60px; /* Ajusta la altura de los logos */
    max-width: 150px;
    filter: grayscale(100%); /* Efecto blanco y negro */
    opacity: 0.7;
    transition: all 0.3s ease;
}
.clients-grid img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* === ESTILOS PARA LA TABLA DE PRECIOS ERP === */
.pricing-section {
    padding: 80px 0;
    position: relative;
    background-color: #1a1a2e; /* Color base oscuro */
    color: var(--light-color);
    background-image: linear-gradient(rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.9)), url('/images/pricing-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.pricing-section .section-title,
.pricing-section .section-subtitle {
    color: var(--light-color);
    text-align: center;
}
.pricing-section .section-subtitle {
    max-width: 600px;
    margin: 0 auto 3rem auto;
    opacity: 0.8;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: center; /* Para alinear verticalmente */
}

.pricing-card {
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card.featured {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(10, 116, 218, 0.3);
}

.pricing-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.pricing-header h3 {
    font-size: 1.8rem;
    color: var(--light-color);
}
.pricing-header p {
    opacity: 0.8;
}

.pricing-features {
    flex-grow: 1; /* Empuja el precio y el botón hacia abajo */
}
.pricing-features .includes-text {
    font-weight: 700;
    margin-bottom: 1rem;
}
.pricing-features ul {
    list-style: none;
    padding: 0;
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.pricing-features li i {
    color: var(--primary-color);
    margin-right: 10px;
    margin-top: 5px;
}

.pricing-cost {
    text-align: center;
    margin: 2rem 0;
}
.pricing-cost .price {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
}
.pricing-cost .period {
    opacity: 0.7;
}
.pricing-cost .details {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.5rem;
}

.pricing-cta {
    text-align: center;
}


/* 1. Estilos base para el banner especial del ERP */
.service-hero-erp {
    padding: 150px 0; /* Más alto para mostrar mejor el fondo */
    
    position: relative;
}

/* 2. Overlay más sutil y oscuro para el ERP */
.service-hero-erp::before {
    background: linear-gradient(rgba(10, 25, 47, 0.7), rgba(10, 25, 47, 0.8));
}

/* 3. Estilos para el texto grande y blanco del ERP */
.service-hero-erp h1,
.service-hero-erp p {
    color: var(--light-color); /* Aseguramos texto blanco */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Sombra para legibilidad */
}

/*
   No necesitamos JS para la interacción del mouse, podemos usar CSS!
   Este es un efecto más sutil y de mejor rendimiento.
   El texto se moverá ligeramente en dirección opuesta al mouse.
*/
.service-hero-erp .container:hover h1 {
    transform: translateZ(5px);
}
.service-hero-erp .container:hover p {
    transform: translateZ(2px);
}
.service-hero-erp .container {
    /* Prepara el contenedor para la perspectiva 3D */
    perspective: 1000px;
}
.service-hero-erp h1, .service-hero-erp p {
    transition: transform 0.4s ease-out; /* Animación suave */
}


/* 4. Fallback para móviles (el parallax no funciona bien en todos los móviles) */
@media (max-width: 768px) {
    .service-hero-erp {
        background-attachment: scroll; /* Desactiva el efecto fijo */
        padding: 100px 0;
    }
}
/* === ESTILOS PARA EL TEMA OSCURO INMERSIVO EN PÁGINAS DE SERVICIO === */

/* 1. Definimos el fondo en el <main> */
main.dark-theme-service {
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Mantenemos el efecto parallax */
    position: relative;
}
/* Creamos un overlay oscuro general para todo el main */
main.dark-theme-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 25, 47, 0.9); /* Overlay oscuro y denso */
    z-index: 1;
}
/* Hacemos que todo el contenido esté por encima del overlay */
main.dark-theme-service > section {
    position: relative;
    z-index: 2;
}

/* 2. Ajustamos los colores de los textos */
.dark-theme-service,
.dark-theme-service .about-intro p,
.dark-theme-service .methodology-list li {
    color: rgba(255, 255, 255, 0.8); /* Texto principal en blanco semi-transparente */
}

.dark-theme-service .section-title,
.dark-theme-service .service-card h3,
.dark-theme-service .methodology-list strong {
    color: var(--light-color); /* Títulos en blanco puro */
}

/* 3. Ajustamos los fondos de las secciones y tarjetas */
/* Quitamos el fondo a la sección de componentes */
.dark-theme-service .sub-services-section {
    background-color: transparent;
}

/* Damos a las tarjetas un fondo de "vidrio esmerilado" (glassmorphism) */
.dark-theme-service .service-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Para Safari */
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme-service .service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px); /* Un levantamiento más sutil */
    /* ¡LA MAGIA DEL GLOW! */
    box-shadow: 0 0 15px rgba(10, 116, 218, 0.3), 0 0 30px rgba(10, 116, 218, 0.2);
}

/* La sección de precios ya tiene un diseño oscuro, así que no necesita muchos cambios */
.dark-theme-service .pricing-section {
    background: transparent; /* Quitamos su fondo para usar el del main */
}

/* El CTA final también con efecto de vidrio */
.dark-theme-service .cta-contact {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--light-color);
}
.dark-theme-service .cta-contact p {
    color: rgba(255, 255, 255, 0.8);
}


/* 4. Quitamos el parallax en móvil por rendimiento */
@media (max-width: 768px) {
    main.dark-theme-service {
        background-attachment: scroll;
    }
}

/* --- Estilos para la Sección "Ideal Para" --- */
.ideal-for-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.ideal-for-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.ideal-for-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* --- Estilos para la Sección de Testimonio --- */
.testimonial-section {
    padding: 80px 0;
    background-color: transparent;
}
.testimonial-section .container {
    max-width: 800px;
    text-align: center;
}
.testimonial-section i {
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.5;
}
.testimonial-section blockquote {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    margin: 1.5rem 0;
    border: none;
    padding: 0;
}
.testimonial-section cite {
    font-weight: 700;
    font-style: normal;
    opacity: 0.8;
}

/* ========================================================== */
/* === ESTILOS REFINADOS PARA PÁGINAS DE DETALLE DE SERVICIO === */
/* ========================================================== */

/* Wrapper general para centrar y limitar el ancho del contenido de texto */
.content-wrapper {
    max-width: 850px; /* Ancho máximo para textos largos */
    margin-left: auto;
    margin-right: auto;
}

/* --- Tema Oscuro Inmersivo --- */
main.dark-theme-service {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}
main.dark-theme-service::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 25, 47, 0.92); /* Overlay un poco más opaco */
    z-index: 1;
}
main.dark-theme-service > section {
    position: relative;
    z-index: 2;
}

/* --- Ajustes Generales de Secciones --- */
.dark-theme-service .content-section,
.dark-theme-service .sub-services-section,
.dark-theme-service .pricing-section,
.dark-theme-service .testimonial-section {
    padding-top: 100px;    /* AUMENTAMOS EL ESPACIO VERTICAL */
    padding-bottom: 100px; /* ENTRE SECCIONES */
}

/* Títulos de sección */
.dark-theme-service .section-title {
    color: var(--light-color);
    margin-bottom: 4rem; /* Más espacio debajo del título */
}
.dark-theme-service .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

/* Párrafo de introducción */
.dark-theme-service .about-intro p {
    /* color: rgba(255, 255, 255, 0.85); <-- ELIMINA ESTA LÍNEA */
    text-align: justify;
    font-size: 1.3rem; /* <-- AUMENTAMOS EL TAMAÑO */
    font-weight: 400; /* Un grosor de fuente normal se lee mejor en párrafos largos */
}

/* Componentes (Tarjetas de Servicio) */
.dark-theme-service .sub-services-section {
    background-color: transparent;
}
.dark-theme-service .service-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}
.dark-theme-service .service-card h3 {
    color: var(--light-color);
}
.dark-theme-service .service-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(10, 116, 218, 0.25);
}

/* Beneficios */
.dark-theme-service .methodology-list li {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
}

/* Precios */
.dark-theme-service .pricing-section {
    background: transparent;
}
.dark-theme-service .pricing-card {
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme-service .pricing-card.featured {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
}
.dark-theme-service .pricing-header h3,
.dark-theme-service .pricing-features li,
.dark-theme-service .pricing-cost .price {
    color: var(--light-color);
}
.dark-theme-service .pricing-features .includes-text,
.dark-theme-service .pricing-cost .details {
     color: rgba(255, 255, 255, 0.7);
}

/* "Ideal Para" y Testimonio */
.dark-theme-service .ideal-for-item,
.dark-theme-service .testimonial-section {
    color: rgba(255, 255, 255, 0.85);
}
.dark-theme-service .ideal-for-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme-service .testimonial-section blockquote {
    color: var(--light-color);
}

/* CTA Final */
.dark-theme-service .cta-contact {
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--light-color);
}
.dark-theme-service .cta-contact p {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Estilos para la Sección "Planes a Medida" (Soporte IT) --- */
.custom-plan-section {
    padding: 100px 0;
    text-align: center;
}
.dark-theme-service .custom-plan-section {
    background: transparent; /* Se integra con el tema oscuro si aplica */
}

/* === ESTILOS PARA PAQUETES DE PRECIOS (TEMA CLARO) === */
.pricing-section-light {
    padding: 100px 0;
    background-color: var(--bg-color);
}
.pricing-grid-light {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch; /* Asegura que las tarjetas tengan la misma altura */
}
.pricing-card-light {
    background-color: var(--light-color);
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.pricing-card-light.featured {
    border-color: var(--primary-color);
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(10, 116, 218, 0.2);
}
.pricing-header-light {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.pricing-header-light h3 {
    font-size: 1.5rem;
}
.price-container {
    display: flex;
    align-items: baseline;
    margin-top: 10px;
}
.price-container .price-symbol {
    font-size: 1.5rem;
    margin-right: 5px;
}
.price-container .price {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
}
.price-container .currency {
    font-size: 1rem;
    margin-left: 10px;
    color: #777;
}
.pricing-features-light {
    flex-grow: 1; /* Esto empuja el botón hacia abajo */
}
.pricing-features-light ul {
    list-style: none;
    padding: 0;
}
.pricing-features-light li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: #555;
}
.pricing-features-light li i {
    color: var(--primary-color);
    margin-right: 10px;
}
.pricing-cta-light {
    margin-top: 2rem;
}
.pricing-cta-light .btn {
    width: 100%;
}

/* ========================================================== */
/*           ESTILOS PARA TABLAS DE PRECIOS (TEMA OSCURO)     */
/* ========================================================== */

.dark-theme-service .pricing-section,
.dark-theme-service .pricing-section-light {
    background: transparent; /* Hereda el fondo del <main> */
}

/* Rejilla de precios */
.dark-theme-service .pricing-grid,
.dark-theme-service .pricing-grid-light {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    align-items: stretch; /* Cambio clave para misma altura */
}

/* Tarjeta de precios general en tema oscuro */
.dark-theme-service .pricing-card,
.dark-theme-service .pricing-card-light {
    background: rgba(44, 62, 80, 0.7); /* Base oscura semi-transparente */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: rgba(255, 255, 255, 0.7);
}

/* Tarjeta destacada */
.dark-theme-service .pricing-card.featured,
.dark-theme-service .pricing-card-light.featured {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary-color);
    box-shadow: 0 0 30px rgba(10, 116, 218, 0.3);
}

/* Encabezado de la tarjeta */
.dark-theme-service .pricing-header,
.dark-theme-service .pricing-header-light {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.dark-theme-service .pricing-header h3,
.dark-theme-service .pricing-header-light h3 {
    font-size: 1.8rem;
    color: var(--light-color);
}
.dark-theme-service .pricing-header p {
    opacity: 0.8;
}

/* Características de los planes */
.dark-theme-service .pricing-features,
.dark-theme-service .pricing-features-light {
    flex-grow: 1; /* Empuja el precio y el botón hacia abajo */
}
.dark-theme-service .pricing-features ul,
.dark-theme-service .pricing-features-light ul {
    list-style: none; padding: 0;
}
.dark-theme-service .pricing-features li,
.dark-theme-service .pricing-features-light li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.dark-theme-service .pricing-features li i,
.dark-theme-service .pricing-features-light li i {
    color: var(--primary-color);
    margin-right: 10px;
    margin-top: 5px;
}

/* Costo y Precio */
.dark-theme-service .pricing-cost,
.dark-theme-service .price-container {
    text-align: center;
    margin: 2rem 0;
}
.dark-theme-service .price {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--light-color);
}
.dark-theme-service .period, .dark-theme-service .details, .dark-theme-service .currency {
    opacity: 0.7;
}

/* Botón CTA */
.dark-theme-service .pricing-cta,
.dark-theme-service .pricing-cta-light {
    text-align: center;
}
.dark-theme-service .pricing-cta-light .btn {
    width: 100%;
}


/* --- Estilos para el Menú Desplegable "Sistemas" --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle i {
    font-size: 0.8em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle i {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: block; /* Cambiamos de 'none' a 'block' */
    position: absolute;
    top: 130%; /* Lo bajamos un poco para la animación */
    left: 50%;
    transform: translateX(-50%); /* Lo centramos respecto al botón */
    background-color: var(--light-color);
    min-width: 220px; /* Un poco más ancho */
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1); /* Sombra más suave */
    z-index: 100;
    border-radius: 10px; /* Bordes más redondeados */
    padding: 8px 0;
    /* ¡LA MAGIA DE LA ANIMACIÓN! */
    opacity: 0;
    visibility: hidden;
    transform-origin: top center;
    transition: opacity 0.3s ease, top 0.3s ease, visibility 0.3s;
}

/* Creamos la flecha con un pseudo-elemento */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background-color: var(--light-color);
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

.dropdown-menu a {
    color: var(--dark-color);
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: left;
    transition: background-color 0.2s ease; /* Transición suave en el hover */
}

.dropdown-menu a:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

.dropdown:hover .dropdown-menu {
    /* Al hacer hover, el menú se vuelve visible y sube a su posición final */
    opacity: 1;
    visibility: visible;
    top: 110%;
}

/* En móvil, volvemos al comportamiento simple */
@media (max-width: 768px) {
    .dropdown {
        width: 100%;
    }
    .dropdown-toggle::after {
        display: none;
    }
    .dropdown-menu {
        position: static;
        display: none; /* Lo ocultamos hasta que se abra el menú hamburguesa */
        box-shadow: none;
        border-top: 1px solid #e0e0e0;
        padding-left: 30px;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 100%;
    }
    .dropdown-menu::before {
        display: none; /* Ocultamos la flecha en móvil */
    }
    /* El JS de la hamburguesa ya se encarga de mostrar/ocultar el .main-nav, que contiene el dropdown */
    .main-nav.is-active .dropdown-menu {
        display: block;
    }
}

/* --- Estilos para Features Detalladas en Tarjetas de Precios --- */
.pricing-features {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: left;
}

.feature-category {
    margin-bottom: 1.5rem;
}

.feature-category h4 {
    font-family: var(--font-heading);
    color: var(--light-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.feature-category ul {
    padding-left: 0;
    list-style: none;
}

.feature-category li {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem;
}

/* ========================================================== */
/*      ESTILOS PARA TABLAS DE PRECIOS GIRATORIAS (FLIP)      */
/* ========================================================== */

/* ========================================================== */
/*      ESTILOS PARA TABLAS DE PRECIOS GIRATORIAS (FLIP)      */
/* ========================================================== */

/* --- Contenedor Principal de la Tarjeta Giratoria --- */
.flip-card {
    background-color: transparent;
    perspective: 1500px;
    min-height: 580px;
}

/* Contenedor interno que rota */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform-style: preserve-3d;
}

/* Clase que se añade con JS para girar */
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* --- Estilos Base para AMBAS Caras (Frontal y Trasera) --- */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    background: rgba(44, 62, 80, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

/* La cara trasera está rotada por defecto */
.flip-card-back {
    transform: rotateY(180deg);
}

/* --- Estilos para la Tarjeta Destacada --- */
.pricing-card.featured {
    border-color: var(--primary-color);
    box-shadow: 0 0 25px rgba(10, 116, 218, 0.25);
}

/* --- Estilos Específicos de cada Cara --- */
.flip-card-front .pricing-features-summary {
    flex-grow: 1; /* Empuja los botones hacia abajo */
    text-align: left;
    margin-top: 1.5rem;
}
.pricing-features-summary ul { list-style: none; padding: 0; }
.pricing-features-summary li { display: flex; align-items: center; gap: 10px; margin-bottom: 0.5rem; }
.pricing-features-summary li i { color: var(--primary-color); }

.flip-card-back .pricing-header {
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.flip-card-back .pricing-features-detailed {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 15px;
    margin-right: -15px;
    text-align: left;
}
/* Scrollbar estilizada */
.flip-card-back .pricing-features-detailed::-webkit-scrollbar { width: 8px; }
.flip-card-back .pricing-features-detailed::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.flip-card-back .pricing-features-detailed::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 4px; }

/* --- Estilos para Botones --- */
.pricing-cta {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: auto;
    padding-top: 1rem;
}
.pricing-cta .btn {
    flex: 1;
}
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--light-color);
}
.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
/* Botón "Volver" rojo en la cara trasera */
.flip-card-back .btn-secondary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.flip-card-back .btn-secondary:hover {
    background-color: #b02323;
}


/*Desvanecimiento*/
.featured-services,
.why-us-section,
.clients-section,
.cta-section,
.content-section,
.sub-services-section,
.pricing-section,
.testimonial-section {
    padding: 100px 0;
    overflow-x: hidden; /* Evita cualquier desbordamiento horizontal inesperado */
}

/* ========================================================== */
/*           ANIMACIÓN DE CARGA (SPLASH SCREEN)               */
/* ========================================================== */

/* --- Estado Inicial --- */

#splash-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: var(--light-color);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.6s ease-out;
}

body.home #splash-screen {
    display: flex;
}

#splash-screen .logo-container img {
    max-height: 600px; /* Logo inicial más grande */
    transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

body.home #page-wrapper {
    opacity: 0;
    transition: opacity 0.8s ease-in 0.5s;
}
body.home {
    overflow: hidden; 
}


/* --- Estado Final (cuando se añade la clase .loaded) --- */

body.loaded #splash-screen {
    opacity: 0;
    pointer-events: none;
}

body.loaded #splash-screen .logo-container img {
    animation: move-logo 1.2s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

body.loaded #page-wrapper {
    opacity: 1;
}

body.loaded {
    overflow: auto;
}

@keyframes move-logo {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(calc(-50vw + 100px), calc(-50vh + 40px)) scale(0.75);
    }
}

/* --- Estilos para el texto del logo animado --- */

.main-header .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--dark-color);
}

.logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    /* La animación del texto esperará 1.2s para empezar */
    transition: opacity 0.5s ease-out 1.2s, transform 0.5s ease-out 1.2s;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;  /* Para compatibilidad con Chrome/Safari */
background-clip: text;
color: transparent;
}

/* Ocultamos el texto SOLO en la página de inicio ANTES de que cargue */
body.home .logo-text {
    opacity: 0;
    transform: translateX(-10px);
}

/* Cuando la página de inicio HA CARGADO, hacemos aparecer el texto */
body.home.loaded .logo-text {
    opacity: 1;
    transform: translateX(0);
}