/* Importar fuentes desde Google Fonts según solicitado [3, 16] */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Geologica:ital,wght@1,400&display=swap');

/* Reset básico e identidad visual */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Facilita el cálculo del Box Model [3, 12] */
}

body {
    background-color: #000; /* Fondo principal [14, 18] */
    color: #fff;
    font-family: 'Geologica', sans-serif; /* Tipografía de texto [2, 18] */
    font-style: italic; /* Estilo cursiva solicitado */
    text-align: center;
    position: relative;
    overflow-x: hidden;
}

/* Tipografía de títulos Bangers [1] */
h1, h2, .main-nav a {
    font-family: 'Bangers', cursive;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Envolventes de texto (Mejora estética) */
.historia-text, .blog-text {
    background-color: #1a1a1a; /* Fondo oscuro para contraste [14, 19] */
    padding: 30px; /* Margen interno para el envolvente [12, 20] */
    border-radius: 15px; /* Bordes redondeados estéticos [13, 21] */
    max-width: 550px;
    text-align: left; /* Lectura más natural [22, 23] */
    line-height: 1.6; /* Interlineado para legibilidad [24, 25] */
}

/* Distribución Imagen y Texto con Flexbox [26-28] */
.historia-content, .blog-entry {
    display: flex;
    flex-wrap: wrap; /* Adaptabilidad a pantallas pequeñas [27] */
    justify-content: center;
    align-items: center; /* Centrado vertical entre imagen y texto [28] */
    gap: 50px; /* Espacio uniforme entre la imagen y el envolvente [27, 29] */
    margin-top: 40px;
}

/* Ajustes de imágenes */
.historia-image img, .blog-entry img {
    max-width: 450px;
    width: 100%;
    height: auto;
    border: 2px solid #fff; /* Estilo consistente de bordes [30, 31] */
    border-radius: 10px;
}

/* Navegación Principal */
.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
}

.main-nav a {
    text-decoration: none;
    color: #fff;
    padding: 10px 25px;
    border: 2px solid #fff;
    transition: 0.3s; /* Efecto suave de transición [30] */
}

.main-nav a:hover {
    background-color: #fff; /* Cambio visual al pasar el cursor [13, 32] */
    color: #000;
}

/* Portafolio y Videos (Grids) [30, 33] */
.portfolio-grid, .videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Diseño responsivo [34] */
    gap: 30px;
    padding: 40px;
}

.portfolio-item img {
    width: 100%;
    border: 2px solid #fff;
}

/* Footer [9, 15] */
footer {
    background-color: #1a1a1a;
    padding: 25px;
    margin-top: 80px;
    border-top: 2px solid #fff;
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  .container { padding: 10px; }
  /* ajusta botones, imágenes, etc. */
}