/* --- Variables CSS (opcional pero muy útil) --- */
/* Te permiten definir colores y fuentes una vez y usarlos en todo el CSS. */
:root {
    --color-background: #0D1117; /* Un gris oscuro casi negro para fondo */
    --color-text: #E6E6E6;      /* Texto claro para buen contraste */
    --color-primary: #8A2BE2;   /* Azul violeta vibrante para destacar */
    --color-accent: #FFD700;    /* Dorado para detalles o enlaces activos */
    --font-heading: 'Roboto', sans-serif; /* Puedes usar Google Fonts */
    --font-body: 'Open Sans', sans-serif;
    --spacing-unit: 1rem;       /* Unidad base para espaciado (16px por defecto) */
}

/* --- Estilos Generales y Reset Básico --- */
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6; /* Mejora la legibilidad del texto */
    -webkit-font-smoothing: antialiased; /* Suaviza las fuentes en WebKit */
    -moz-osx-font-smoothing: grayscale;  /* Suaviza las fuentes en Firefox */
}


/* Para que las imágenes no se desborden en pantallas pequeñas */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra debajo de las imágenes */
}

/* Estilos para todos los encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary); /* Un color que destaque tus títulos */
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center; /* Centrar títulos por defecto en móvil */
}
/*h1 {
    font-size: 4.5rem; 
}*/

/* Enlaces */
a {
    color: var(--color-primary); /* Color llamativo para enlaces */
    text-decoration: none; /* Quita el subrayado por defecto */
    transition: color 0.3s ease; /* Transición suave al pasar el ratón */
}

a:hover, a:focus {
    color: var(--color-accent); /* Cambia de color al interactuar */
}

/* --- Layout Básico (Mobile First) --- */
/* Todo el contenido dentro de una sección tendrá un padding lateral */
section, footer {
    padding: var(--spacing-unit) 1.5rem; /* Relleno superior/inferior y lateral */
    margin-bottom: 2rem; /* Espacio entre secciones */
}

/* --- Header (Cabecera) --- */
header {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */
    color: var(--color-text);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between; /* El logo a un lado, el botón de menú al otro */
    align-items: center;
    position: sticky; /* Sticky para que la cabecera se mantenga visible al hacer scroll */
    top: 0;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    backdrop-filter: blur(5px); /* Efecto de desenfoque para un aspecto moderno */
}

.header .logo h1 {
    margin: 0;
    font-size: 4.5rem; /* Tamaño de fuente para el título/logo */
    color: var(--color-text); /* El título del logo blanco */
}

/* Navegación (Menú Hamburguesa para Móvil) */
.main-nav .nav-toggle {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 2rem;
    cursor: pointer;
    display: block; /* Visible en móvil */
    padding: 0.5rem;
}

.main-nav .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Oculto por defecto en móvil */
    flex-direction: column;
    position: absolute;
    top: 100%; /* Justo debajo del header */
    left: 0;
    width: 100%;
    background-color: var(--color-background);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.main-nav .nav-links.active { /* Clase que se activará con JavaScript */
    display: flex; /* Muestra el menú cuando está activo */
}

.main-nav .nav-links li {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav .nav-links li:last-child {
    border-bottom: none;
}

.main-nav .nav-links a {
    display: block;
    padding: 1rem;
    color: var(--color-text);
    font-size: 1.1rem;
}

.main-nav .nav-links a:hover {
    background-color: var(--color-primary);
    color: var(--color-accent)
}

/* --- Hero Gallery (Galería destacada) --- */
.hero-gallery {
    text-align: center;

    padding-top: 7rem; /* Más espacio arriba para que el contenido no se pegue al header sticky */
    padding-bottom: 1rem;
}



/* --- Category Grid (Galerías por Categoría) --- */
.category-grid {
    padding-top: 7rem;
}

.category-grid .categories {
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto en móvil */
    gap: 2rem; /* Espacio entre elementos */
    padding-top: 0.2rem; /* Espacio superior para que no se pegue al header */
    padding-bottom: 14rem; /* Espacio inferior para que no se pegue al footer */
}

.category-item {
    background-color: #1a1e24; /* Fondo más claro para la tarjeta */
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.category-item:hover {
    transform: translateY(-5px); /* Pequeño efecto al pasar el ratón */
}

.category-item img {
    width: 100%;
    height: 180px; /* Altura fija para miniaturas */
    object-fit: cover;
}

.category-item h3 {
    margin-top: 17%;
    font-size: 1.2rem;
    color: var(--color-text); /* Las categorías en texto blanco */
}

/* --- About Me y Contact Info --- */
.about-me, .contact-info {
    text-align: center;
    background-color: #1a1e24;
    border-radius: 8px;
    max-width: 600px; /* Limita el ancho del texto para legibilidad */
    margin-left: auto;
    margin-right: auto;
     padding-top: 4rem; /* Más espacio arriba para que el contenido no se pegue al header sticky */
    padding-bottom: 1rem;
}

.about-me p, .contact-info p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

/* --- Footer (Pie de Página) --- */
footer {
    background-color: #0F131A;
    color: #999;
    text-align: center;
    padding: 2rem 1.5rem;
    font-size: 0.9rem;
    margin-top: 3rem;
    margin-bottom: 0; /* Asegura que el footer se pegue al final */
}

.footer .social-links a {
    margin: 0 0.8rem;
    font-size: 1.2rem;
    color: #999;
}

.footer .social-links a:hover {
    color: var(--color-accent);
}

/* --- Media Queries (Para pantallas más grandes: Tablets y Escritorio) --- */

/* Tabletas (Ancho mínimo de 768px) */
@media screen and (min-width: 768px) {
    /* Ajustes para el header */
    header {
        padding: 1rem 1rem;
    }

    .main-nav .nav-toggle {
        display: none; /* Oculta el botón hamburguesa en tablets y escritorio */
    }

    .main-nav .nav-links {
        position: static; /* Quita el posicionamiento absoluto */
        display: flex !important; /* Muestra siempre el menú */
        /* Elementos en línea */ 
        flex-direction: row;
        width: 100%;
        background: none;
        box-shadow: none;
        border-bottom: none;
    }

    .main-nav .nav-links li {
        border-bottom: none;
    }

    .main-nav .nav-links a {
        padding: 0.5rem 1rem;
    }

    /* Contenedores de contenido más anchos */
    section, footer {
        padding: var(--spacing-unit) 3rem; /* Más padding lateral */
    }

    /* Categorías - Dos columnas */
    .category-grid .categories {
        grid-template-columns: 4fr 2fr; /* Dos columnas */
        max-width: 900px; /* Limita el ancho para centrar */
        margin-top: 7%;
    }
}

/* Escritorio (Ancho mínimo de 1024px) */
@media screen and (min-width: 1024px) {
    header {
        padding: 1rem 5rem;
    }

    /* Contenedores de contenido aún más anchos y centrados */
    section, footer {
        padding: var(--spacing-unit) 5rem;
        max-width: 1200px; /* Ancho máximo para el contenido principal */
        margin-left: auto;
        margin-right: auto;
    }

    /* Categorías - Tres columnas */
    .category-grid .categories {
        grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    }
}

/* --- Estilos para Páginas de Galería (galaxias.html, nebulosas.html, etc.) --- */

.gallery-page h2 {
    margin-bottom: 0.5rem;
}

.gallery-page .gallery-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem auto;
    font-size: 1.1rem;
    color: #CCC;
}

.image-grid {
    display: grid;
    /* Móvil por defecto: Ahora con minmax muy bajo para 4 columnas */
    grid-template-columns: repeat(auto-fit, minmax(125px, 3fr)); /* ¡Mínimo 65px de ancho por imagen para móvil! */
    gap: 0.1rem; /* Espacio muy reducido entre imágenes */
    padding: 0 0.1rem; /* Padding lateral mínimo */
    max-width: 1200px; /* Ancho máximo para la cuadrícula */
    margin: 0 auto; /* Centrar la cuadrícula */
}

.gallery-item {
    background-color: #1a1e24;
    border-radius: 4px; /* Bordes un poco menos redondeados */
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); /* Sombra más sutil */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    /* min-height ya no es tan crítico si las imágenes y texto tienen su altura */
}

.gallery-item:hover {
    transform: translateY(-2px); /* Efecto hover más sutil */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.gallery-item img {
    width: 100%;
    /* Mantengo 1:1 ya que en la última captura se ven cuadradas. */
    /* ¡CONFIRMA ESTO! Si tus miniaturas reales son 3:2 o 16:9, cámbialo aquí. */
    aspect-ratio: 3 / 2; 
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsión */
    display: block;
}

.gallery-item figcaption {
    padding: 0.2rem; /* ¡Padding muy ajustado para el texto! */
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 25px; /* Altura mínima para el figcaption */
    /* Propiedades defensivas contra el texto vertical. Mantenerlas. */
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: none;
}

.gallery-item figcaption h3 {
    margin: 0;
    font-size: 0.75rem; /* ¡Tamaño de fuente ajustado para el título en móvil! Más pequeño para que quepa bien. */
    color: var(--color-primary);
    line-height: 1.1; /* Un poco de espacio entre líneas, necesario */
    overflow-wrap: break-word; /* Rompe palabras largas */
    word-break: break-word; /* Asegura el quiebre de palabras */
    transform: none !important; /* Desactiva cualquier rotación forzada */
}

/* El párrafo ya no está en el HTML, pero lo mantenemos oculto por si acaso */
.gallery-item figcaption p {
    display: none;
}


/* --- Media Queries para la Cuadrícula de Imágenes --- */

/* Teléfonos grandes / Mini-tabletas (Ancho mínimo de 480px, para 4 o 5 columnas) */
@media screen and (min-width: 480px) {
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(75px, 1fr)); /* Mínimo 75px */
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    .gallery-item figcaption h3 {
        font-size: 0.85rem;
    }
}


/* Tabletas (Ancho mínimo de 768px, para 5 o 6 columnas) */
@media screen and (min-width: 768px) {
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); /* Mínimo 90px */
        gap: 0.7rem;
        padding: 0 0.7rem;
    }
    .gallery-item figcaption h3 {
        font-size: 0.95rem;
        display:flex;
    }

    
}

/* Escritorio (Ancho mínimo de 1024px, para 6 o 7 columnas) */
@media screen and (min-width: 1024px) {
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* Mínimo 110px */
        gap: 0.9rem;
        padding: 0;
        
    }
    .gallery-item figcaption {
        padding: 0.35rem;
    }
    .gallery-item figcaption h3 {
        font-size: 1.05rem;
    }
}

/* Escritorio muy grande (Ancho mínimo de 1440px, para 7 o 8 columnas) */
@media screen and (min-width: 1440px) {
    .image-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Mínimo 130px */
        gap: 1.1rem;
    }
    .gallery-item figcaption {
        padding: 0.4rem;
    }
    .gallery-item figcaption h3 {
        font-size: 1.15rem;
    }
}