/* ESTILOS GENERALES (MODO OSCURO) */
:root {
    --bg-color: #020b14; /* Azul muy oscuro/Negro */ 
    --card-bg: #0a1929; /* Azul un poco más claro para 
    cajas */ --text-primary: #ffffff; --text-secondary: 
    #b0b8c4;
    --accent-cyan: #00e5ff; /* Cian neón */ 
    --accent-purple: #bd34fe; /* Morado neón */ 
    --gradient: linear-gradient(90deg, #00e5ff 0%, 
    #bd34fe 100%);
}
body { font-family: 'Segoe UI', Roboto, Helvetica, 
    Arial, sans-serif; background-color: 
    var(--bg-color); color: var(--text-primary); 
    margin: 0; padding: 0; line-height: 1.6;
}
/* CONTENEDOR PRINCIPAL */ .container { max-width: 
    800px; margin: 0 auto; padding: 20px;
}
/* CABECERA */ header { text-align: center; padding: 
    60px 20px; background: radial-gradient(circle at 
    center, #112d4e 0%, var(--bg-color) 70%);
}
h1 { font-size: 2.5rem; margin-bottom: 10px; 
    text-transform: uppercase; letter-spacing: 2px;
}
.highlight { background: var(--gradient); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; font-weight: 
    800;
}
.subtitle { font-size: 1.2rem; color: 
    var(--accent-cyan); font-weight: 300;
}
/* SECCIONES DE TEXTO */ section { margin-bottom: 50px;
}
h2 { font-size: 1.8rem; color: var(--accent-purple); 
    border-left: 4px solid var(--accent-cyan); 
    padding-left: 15px; margin-bottom: 20px;
}
p { color: var(--text-secondary); font-size: 1.1rem; 
    margin-bottom: 20px;
}
strong { color: var(--text-primary);
}
/* CAJA DE CARACTERÍSTICAS (GRID RESPONSIVO CLAVE) */ 
.features-grid {
    display: grid; /* La magia de la responsividad: 
    crea tantas columnas como quepan, sin ser menores a 
    170px */ grid-template-columns: repeat(auto-fit, 
    minmax(170px, 1fr)); gap: 20px; margin-top: 30px;
}
.feature-card { background-color: var(--card-bg); 
    padding: 25px; border-radius: 15px; border: 1px 
    solid rgba(0, 229, 255, 0.1); transition: transform 
    0.3s ease;
}
.feature-card:hover { transform: translateY(-5px); 
    border-color: var(--accent-cyan);
}
.feature-icon { font-size: 2rem; margin-bottom: 15px; 
    display: block;
}
.feature-title { display: block; font-size: 1.2rem; 
    color: var(--accent-cyan); margin-bottom: 10px; 
    font-weight: bold;
}
/* CIERRE Y FOOTER */ .closing { text-align: center; 
    padding: 50px 20px; background-color: 
    var(--card-bg); border-radius: 20px; margin-top: 
    60px;
}
.closing p { font-size: 1.3rem; color: 
    var(--text-primary);
}
.btn { display: inline-block; background: 
    var(--gradient); color: #fff; padding: 15px 30px; 
    border-radius: 50px; text-decoration: none; 
    font-weight: bold; margin-top: 20px; box-shadow: 0 
    4px 15px rgba(0, 229, 255, 0.3); transition: 
    opacity 0.3s;
}
.btn:hover { opacity: 0.9;
}
footer { text-align: center; padding: 40px; color: 
    #555;
    font-size: 0.9rem; border-top: 1px solid #112233;
}
/* RESPONSIVE: Ajustes específicos para pantallas 
pequeñas (600px o menos) */ @media (max-width: 600px) {
    h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } 
    .container { padding: 15px; }
    
    /* Para móviles, forzamos la grid a una sola 
    columna para la máxima legibilidad */ 
    .features-grid {
        grid-template-columns: 1fr;
    }
}