/* Importar las fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700;900&display=swap');

/* Definir variables de color y tipografía para fácil acceso */
:root {
    --ened-red: #a51c3b;
    --ened-gray: #393b3a;
    --ened-green: #185334; /* Lo guardamos por si lo necesitamos después */
    
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Lato', sans-serif;
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6, .display-3 {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* ====== Clases de Color Personalizadas ====== */
.bg-dark-ened {
    background-color: var(--ened-gray) !important;
}

.text-ened-red {
    color: var(--ened-red) !important;
}

/* ====== Estilos de Botones Personalizados ====== */
.btn-primary-ened {
    background-color: var(--ened-red);
    border-color: var(--ened-red);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-primary-ened:hover {
    background-color: #8b1730; /* Un rojo un poco más oscuro */
    border-color: #8b1730;
    color: #fff;
}

.btn-outline-primary-ened {
    color: var(--ened-red);
    border-color: var(--ened-red);
    font-weight: 700;
}

.btn-outline-primary-ened:hover {
    background-color: var(--ened-red);
    color: #fff;
}


/* ====== Estilos de Secciones ====== */

/* Estilo de la sección Héroe */
.hero-section {
    position: relative;
    height: 70vh; /* Altura del 70% de la ventana */
    background: url('https://images.pexels.com/photos/1206101/pexels-photo-1206101.jpeg') no-repeat center center;
    background-size: cover;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Capa oscura para legibilidad del texto */
}

/* Asegurar que el contenido del héroe esté por encima de la capa oscura */
.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-section h1 {
    font-weight: 900; /* La fuente más gruesa que importamos */
}

/* Estilo de las tarjetas de curso */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}