/* =========================
   SECCIÓN HERO (PORTADA)
   ========================= */

/* Contenedor principal de la portada */
.hero {
    display: flex;
    /* Activa Flexbox para organizar los elementos internos */

    flex-direction: column;
    /* Organiza logo y título en columna (uno debajo del otro) */

    align-items: center;
    /* Centra horizontalmente los elementos */

    margin: 4em 0em 3.5em 0em;
    /* Espaciado exterior:
       arriba: 4em
       derecha: 0
       abajo: 3.5em
       izquierda: 0 */
}


/* =========================
   LOGO
   ========================= */

/* Imagen del logo */
.logo {
    width: 80px;
    /* Ancho fijo del logo */

    height: 80px;
    /* Alto fijo (forma cuadrada) */

    margin-bottom: 0.667em;
    /* Espacio inferior respecto al título */

    display: block;
    /* Elimina comportamiento inline por defecto */
}


/* =========================
   TÍTULO PRINCIPAL
   ========================= */

/* Sobrescribe el h1 general definido en styles.css */
h1 {
    font-size: 3em;
    /* Tamaño grande para reforzar jerarquía visual en la home */

    text-align: center;
    /* Centrado del texto */

    margin: 0em;
    /* Elimina márgenes por defecto del navegador */
}


/* =========================
   COMPORTAMIENTO DEL BODY
   ========================= */

/* Evita que aparezca scroll */
body {
    overflow: hidden;
    /* Oculta cualquier contenido que desborde la ventana.
       Útil si el diseño está pensado como pantalla fija */
}