/* public/styles/landing.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    /* PALETA PCB (Printed Circuit Board) */
    --pcb-dark: #00241B;       /* Fondo Verde muy oscuro (Casi negro) */
    --pcb-green: #004D40;      /* Verde Placa base */
    --track-green: #00E676;    /* Verde Neón (Pistas/Luz/Energía) */
    --gold-copper: #FFD700;    /* Dorado/Cobre (Terminales/Soldadura) */
    --gold-dark: #C5A000;      /* Dorado oscuro para hover */
    
    --light: #E0F2F1;          /* Blanco verdoso muy suave para textos secundarios */
    --white: #ffffff;
    --text-dark: #1a2f2b;      /* Texto oscuro para fondos claros */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Poppins', sans-serif; 
    background-color: var(--pcb-dark); /* Fondo general oscuro */
    color: var(--light); 
    line-height: 1.6; 
}
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* --- HEADER & NAV --- */
header {
    background: rgba(0, 36, 27, 0.95); /* Oscuro con transparencia */
    box-shadow: 0 2px 15px rgba(0,230,118,0.1); /* Sutil brillo verde */
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #004d40;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
}
.logo i { color: var(--track-green); }

.nav-links { display: flex; gap: 30px; }
.nav-links a { font-weight: 500; color: var(--light); font-size: 0.95rem; opacity: 0.9; }
.nav-links a:hover { color: var(--track-green); opacity: 1; text-shadow: 0 0 8px rgba(0,230,118,0.4); }

.auth-buttons { display: flex; gap: 15px; align-items: center; }

.btn-login {
    font-weight: 600;
    color: var(--gold-copper);
}
.btn-login:hover { color: var(--white); }

.btn-cta {
    background: linear-gradient(135deg, var(--gold-copper) 0%, #FFA000 100%); /* Degradado Dorado */
    color: #00241B; /* Texto oscuro para contraste con dorado */
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-cta:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* --- HERO SECTION --- */
.hero {
    position: relative;
    color: var(--white);
    padding: 140px 20px;
    text-align: center;
    overflow: hidden;
    
    background-color: var(--pcb-dark); /* Color de fondo de seguridad */
    
    background-image: 
        linear-gradient(to right, rgba(0, 36, 27, 0.5), rgba(0, 77, 64, 0.3)), 
        url('/images/hero-bg.jpg');
        
    background-size: cover;      
    background-position: center; 
    background-repeat: no-repeat;
    /* background-attachment: fixed; <--- a veces causa "flicker" en Chrome */
}

/* Eliminamos el ::before anterior de las líneas, ya que ahora tenemos la foto del PCB */
.hero::before {
    display: none; 
}

.hero h1 { 
    font-size: 3.5rem; 
    margin-bottom: 20px; 
    line-height: 1.2; 
    text-shadow: 0 4px 15px rgba(0,0,0,0.8); /* Sombra fuerte al texto para legibilidad */
    position: relative;
    z-index: 2;
}

.hero p { 
    font-size: 1.3rem; 
    max-width: 750px; 
    margin: 0 auto 40px; 
    opacity: 0.95; 
    font-weight: 300; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    position: relative;
    z-index: 2;
}

.hero .btn-cta {
    position: relative;
    z-index: 2;
}

.hero span { color: var(--track-green); font-weight: 700; } /* Palabras clave en neón */

/* --- FILOSOFÍA --- */
.philosophy {
    padding: 80px 20px;
    text-align: center;
    background: var(--white); /* Contraste: Sección clara */
    color: var(--text-dark);
}
.section-title {
    font-size: 2.5rem;
    color: var(--pcb-dark);
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: var(--gold-copper); /* Línea dorada */
    margin: 10px auto 0;
    border-radius: 2px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.philo-card {
    padding: 30px;
    border-radius: 15px;
    background: #f8f9fa;
    transition: 0.3s;
    border: 1px solid #eee;
}
.philo-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 15px 30px rgba(0,77,64,0.1); 
    border-color: var(--track-green);
}
.philo-icon { font-size: 3.5rem; color: var(--pcb-green); margin-bottom: 20px; }
.philo-card h3 { margin-bottom: 15px; color: var(--pcb-dark); }

/* --- CARACTERÍSTICAS (Soluciones) --- */
.features { 
    padding: 80px 20px; 
    background: var(--pcb-green); /* Verde medio */
    color: var(--white);
}
.features .section-title { color: var(--white); }
.features .section-title::after { background: var(--track-green); }

.feature-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.feature-item {
    background: rgba(0, 36, 27, 0.5); /* Oscuro semi-transparente */
    padding: 30px;
    border-radius: 10px;
    flex: 1 1 300px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border: 1px solid rgba(0, 230, 118, 0.1); /* Borde sutil neón */
    transition: 0.3s;
}
.feature-item:hover { border-color: var(--gold-copper); }
.feature-item i { font-size: 2.5rem; color: var(--gold-copper); margin-bottom: 15px; }
.feature-item h3 { margin-bottom: 10px; color: var(--white); }
.feature-item p { color: #cfd8dc; }

/* --- FOOTER --- */
footer {
    background: #001a13; /* Casi negro */
    color: #cfd8dc;
    padding: 60px 20px 20px;
    border-top: 1px solid #004d40;
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}
.footer-col h4 { color: var(--gold-copper); margin-bottom: 20px; font-size: 1.2rem; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { color: #b0bec5; font-size: 0.9rem; }
.footer-col ul li a:hover { color: var(--track-green); text-decoration: underline; cursor: pointer;}
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #004d40;
    font-size: 0.9rem;
    color: #546e7a;
}

/* --- MODALES LEGALES --- */
.legal-modal {
    display: none; 
    position: fixed; 
    z-index: 2000; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px);
}
.legal-modal-content {
    background-color: var(--white);
    color: var(--text-dark);
    margin: 5% auto; 
    padding: 40px; 
    border: 1px solid #888; 
    width: 80%; 
    max-width: 800px;
    border-radius: 10px;
    position: relative;
}
.close-legal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close-legal:hover { color: #000; }
.legal-text h2 { color: var(--pcb-dark); margin-bottom: 20px; border-bottom: 2px solid var(--gold-copper); display: inline-block; }
.legal-text h3 { color: var(--pcb-green); margin-top: 20px; margin-bottom: 10px; }
.legal-text p { margin-bottom: 10px; font-size: 0.95rem; }

/* Mobile */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero h1 { font-size: 2.5rem; }
}