:root {
    /* Fuentes personalizadas para encabezados y párrafos */
    --fuenteHeading: 'Playfair Display', serif;
    /* Cambio a fuente elegante */
    --fuenteParrafos: 'Open Sans', sans-serif;

    /* Colores principales del sitio */
    --primario: #78403C;
    --blanco: #ffffff;
    --negro: #000000;

}

html {
    /* Establece el modelo de caja border-box para facilitar el cálculo de tamaños */
    box-sizing: border-box;
    /* Ajuste tamaño de fuente base: 62.5% de 16px = 10px -> 1rem = 10px */
    font-size: 62.5%;
}

/* Aplica box-sizing a todos los elementos y pseudoelementos */
*,
::before,
::after {
    box-sizing: inherit;
}

body {
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    /* 16px */
    line-height: 2;
    /* Altura de línea para mejorar legibilidad */
}

/* =========================================
   Estilos Globales y Utilidades
   ========================================= */

.contenedor {
    max-width: 120rem;
    /* Ancho máximo de 1200px */
    width: 90%;
    /* Ancho fluido */
    margin: 0 auto;
    /* Centrar horizontalmente */
}

a {
    text-decoration: none;
    /* Elimina subrayado de enlaces */
}

/* =========================================
   Tipografía
   ========================================= */

h1,
h2,
h3,
h4 {
    font-family: var(--fuenteHeading);
}

h1 {
    font-size: 4.8rem;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3.2rem;
}

h4 {
    font-size: 2.8rem;
}

/* =========================================
   Imágenes
   ========================================= */

img {
    max-width: 100%;
    /* Imágenes responsivas */
}

/* =========================================
   Clases de Utilidad
   ========================================= */

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.centrar-texto {
    text-align: center;
}

/* =========================================
   Header
   ========================================= */

.header {
    background-image: url("../img/banner.jpg");
    height: 80vh;
    /* Aumentado de 60vh a 80vh para mayor impacto visual */
    background-size: cover;
    /* Cubrir todo el contenedor */
    background-repeat: no-repeat;
    background-position: center center;
}

.header__texto {
    text-align: center;
    color: var(--blanco);
    margin-top: 5rem;
    /* Separación superior opcional si es necesaria */
}

/* Se agrega estilos para la barra de navegación para mejorar la distribución */
.barra {
    padding-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navegacion {
    display: flex;
    gap: 2rem;
    /* Espacio entre enlaces */
}

.navegacion__enlace {
    color: var(--blanco);
    font-size: 1.8rem;
    font-family: var(--fuenteHeading);
    /* Usar la fuente elegante también en navegación */
}

.navegacion__enlace:hover {
    text-decoration: underline;
    /* Feedback visual simple al pasar el mouse */
}

.logo {
    color: var(--blanco);
}

.logo_nombre {
    font-weight: 400;
}

.logo_bold {
    font-weight: 700;
}

.navegacion__enlace {
    display: block;
    text-align: center;
    color: var(--blanco);
    font-size: 1.8rem;
}

@media (min-width: 768px) {
    .contenido-principal {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 4rem;
    }
}

/* =========================================
   Botones
   ========================================= */

/*boton principal */
.boton {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 1.2rem 19.8rem;
    background-color: var(--primario);
    color: var(--blanco);
    font-size: 1.8rem;
    font-family: var(--fuenteHeading);
    font-weight: 700;
}

/*fuente anterior para botones*/
.boton:hover {
    background-color: var(--negro);
    color: var(--blanco);
}

/*boton secundario marron de nuestros cursos y talleres */
.boton--secundario {
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1.2rem 2.8rem;
}

/* quitar las viñetas de lista*/
.cursos {
    list-style: none;
}

/* agregar lineas que dividen los cursos*/
.cursos__linea {
    display: flex;
    width: 100%;
    height: 1px;
    background-color: var(--primario);
}