/* Variables CSS */

:root {

    --primary-color-start: #8A2BE2; /* Morado */

    --primary-color-end: #00CED1; /* Azul Turquesa */

    --text-light: #f4f4f4;

    --text-gray: #c0c0e0;

    --bg-dark: #1a1a2e;

    --bg-light: #2c2c47; 

    --bg-card: #23233a;

    --cta-bg: linear-gradient(to right, var(--primary-color-start), var(--primary-color-end));

    --border-color: #4a4a6e;

    --font-primary: 'Montserrat', sans-serif;

    --font-secondary: 'Roboto', sans-serif;

}



/* Reset básico */

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

html { scroll-behavior: smooth; }



body {

    font-family: var(--font-secondary);

    line-height: 1.6;

    color: var(--text-light);

    background-color: var(--bg-dark);

    overflow-x: hidden; /* Evita scroll horizontal accidental */

}



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

.section-padding { padding: 100px 0; }



/* Títulos */

.section-title {

    font-family: var(--font-primary);

    font-size: 2.5em;

    text-align: center;

    margin-bottom: 60px;

    color: var(--text-light);

    background: -webkit-linear-gradient(45deg, #fff, var(--primary-color-end));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}



/* Botones */

.btn {

    display: inline-block;

    padding: 12px 30px;

    border-radius: 50px; /* Más moderno */

    text-decoration: none;

    font-family: var(--font-primary);

    font-weight: 600;

    transition: all 0.3s ease;

    border: none;

    cursor: pointer;

    font-size: 0.95rem;

}



.btn-primary {

    background: var(--cta-bg);

    color: white;

    box-shadow: 0 4px 15px rgba(0, 206, 209, 0.3);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 206, 209, 0.5);

}



.btn-secondary {

    background: transparent;

    border: 2px solid var(--primary-color-end);

    color: var(--primary-color-end);

}



.btn-secondary:hover {

    background: var(--primary-color-end);

    color: var(--bg-dark);

}



/* Header */

.main-header {

    background-color: rgba(26, 26, 46, 0.95);

    padding: 15px 0;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(10px);

}



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



.logo { display: flex; align-items: center; gap: 10px; }

.logo img { height: 45px; border-radius: 5px; } /* Border radius por si el jpg tiene esquinas */

.logo-text { font-family: var(--font-primary); font-weight: 700; font-size: 1.5em; letter-spacing: -0.5px; }



.main-nav ul { list-style: none; display: flex; gap: 30px; }

.main-nav a { color: var(--text-light); text-decoration: none; font-weight: 500; transition: color 0.3s; }

.main-nav a:hover { color: var(--primary-color-end); }



.header-actions { display: flex; gap: 15px; }



/* Hero Section */

.hero-section {

    position: relative;

    min-height: 90vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-color: var(--bg-dark);

    overflow: hidden;

}



/* CONFIGURACIÓN DE LA IMAGEN DE FONDO (CIRCUITOS) */

.hero-background-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    /* Nombre exacto del archivo que subiste */

    background-image: url('circuit-pattern-overlay.jpg'); 

    background-size: cover;

    background-position: center;

    /* Trucos para integrar imagen oscura sobre fondo oscuro */

    opacity: 0.3; 

    mix-blend-mode: screen; 

    pointer-events: none;

    z-index: 1;

}



.hero-content { position: relative; z-index: 2; max-width: 900px; padding-top: 40px;}

.hero-title {

    font-family: var(--font-primary);

    font-size: 4em;

    margin-bottom: 20px;

    line-height: 1.1;

    background: linear-gradient(to right, #fff, #a5f3fc);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}

.hero-subtitle { font-size: 1.4em; margin-bottom: 40px; color: var(--text-gray); max-width: 700px; margin-left: auto; margin-right: auto; }



/* Cards Generales */

.problems-grid, .solutions-grid, .why-us-grid, .steps-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

}



.problem-card, .solution-card, .why-us-item, .step-item {

    background-color: var(--bg-card);

    padding: 40px 30px;

    border-radius: 15px;

    text-align: center;

    border: 1px solid rgba(255,255,255,0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;

}



.problem-card:hover, .solution-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary-color-start);

    box-shadow: 0 15px 30px rgba(0,0,0,0.3);

}



.icon-problem, .icon-solution, .icon-why-us { font-size: 2.5em; margin-bottom: 25px; color: var(--primary-color-end); }

.problem-card h3, .solution-card h3, .why-us-item h3 { font-size: 1.4em; margin-bottom: 15px; color: #fff; }

.problem-card p, .solution-card p, .why-us-item p { color: var(--text-gray); font-size: 0.95em; }



/* Estilos específicos Steps */

.step-item { position: relative; border: none; background: transparent; }

.step-number {

    font-size: 4em; font-weight: 700; color: rgba(255,255,255,0.05);

    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 0;

}

.step-item h3, .step-item p { position: relative; z-index: 1; }



/* Contacto */

.contact-section { background: linear-gradient(to bottom, var(--bg-dark), var(--bg-light)); }

.contact-intro { text-align: center; margin-bottom: 50px; font-size: 1.2em; color: var(--text-gray); }



.contact-grid {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 60px;

    background: var(--bg-card);

    padding: 50px;

    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.2);

}



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

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



/* Inputs mejorados */

.contact-form input, .contact-form textarea {

    background-color: rgba(255,255,255,0.05);

    border: 1px solid var(--border-color);

    padding: 15px 20px;

    border-radius: 8px;

    color: #fff;

    font-family: var(--font-secondary);

    font-size: 1em;

    transition: border-color 0.3s, background-color 0.3s;

}



.contact-form input:focus, .contact-form textarea:focus {

    outline: none;

    border-color: var(--primary-color-end);

    background-color: rgba(255,255,255,0.1);

}



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

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }



.contact-info-aside { display: flex; flex-direction: column; justify-content: center; text-align: center; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 40px;}

.contact-info-aside p { margin: 10px 0; color: var(--text-light); font-size: 1.1em; }

.contact-info-aside i { color: var(--primary-color-end); margin-right: 10px; }

.highlight-text { font-weight: 600; color: var(--primary-color-start) !important; margin-top: 20px !important;}



/* Footer */

.main-footer { background-color: #11111f; padding: 40px 0; margin-top: 50px; border-top: 1px solid #222; font-size: 0.9em; color: #666; }

.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.footer-links a, .social-links a { color: #888; margin-left: 20px; text-decoration: none; transition: color 0.3s;}

.footer-links a:hover, .social-links a:hover { color: var(--primary-color-end); }



/* ANIMACIONES (Clases que usará el JS) */

.animate-on-scroll {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    will-change: opacity, transform;

}



.animate-on-scroll.is-visible {

    opacity: 1;

    transform: translateY(0);

}



/* Responsive */

@media (max-width: 992px) {

    .header-content { flex-direction: column; gap: 20px; }

    .contact-grid { grid-template-columns: 1fr; padding: 30px; }

    .contact-info-aside { border-left: none; border-top: 1px solid rgba(255,255,255,0.1); padding-left: 0; padding-top: 30px; margin-top: 30px;}

    .hero-title { font-size: 3em; }

}



@media (max-width: 768px) {

    .hero-title { font-size: 2.5em; }

    .header-actions { display: none; } /* Ocultar botones header en móvil simple */

    .main-nav ul { padding: 0; gap: 15px; font-size: 0.9em;}

}

/* ... (El resto de tu CSS anterior permanece igual) ... */



/* Contacto - Estilos específicos para el logo grande */

.contact-info-aside {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center; /* Centrar el contenido vertical y horizontalmente */

    text-align: center;

    border-left: 1px solid rgba(255,255,255,0.1);

    padding-left: 40px;

}



.aside-main-logo {

    margin-bottom: 30px; /* Espacio debajo del logo */

}



.contact-logo-big {

    width: 200px; /* Ajusta este valor para controlar el tamaño del logo */

    height: auto;

    border-radius: 15px; /* Para que el logo se vea bien si tiene esquinas */

    filter: drop-shadow(0 5px 15px rgba(0, 206, 209, 0.4)); /* Sombra para que resalte */

}



/* ... (El resto de tu CSS anterior permanece igual) ... */



/* Responsive para la sección de contacto */

@media (max-width: 992px) {

    /* ... (Estilos responsive anteriores) ... */



    .contact-info-aside {

        border-left: none;

        border-top: 1px solid rgba(255,255,255,0.1);

        padding-left: 0;

        padding-top: 30px;

        margin-top: 30px;

        /* Alinear al centro si se convierte en columna */

        align-items: center; 

    }

}