/* ============================================================
   ESTILOS GLOBALES
   Versión: 2.7 | Última actualización: 2026-07-23
   
   REFERENCIA DE COLOR EN HTML: Debe verse en PÚRPURA
   (Si no ves púrpura al final de la pantalla, tienes caché del navegador)
   
   Variables de color y reseteo de estilos por defecto del navegador.
   Estas reglas afectan a TODO el sitio, no a una página en particular.
   ============================================================ */

/* 
   Variables de color reutilizables en todo el archivo.
   Cambiar un valor aquí lo actualiza en cualquier lugar donde se use
   var(--nombre-de-la-variable), sin tener que buscar y reemplazar
   ese color en cada regla por separado.
*/
:root {
    --primary-color: #000000;      /* Color de fondo principal (negro) */
    --secondary-color: #ffffff;    /* Color de texto principal (blanco) */
    --accent-color: #e60073;       /* Color de acento/resaltado (rosa) — usado en hovers y selección de texto */
    --overlay-dark: rgba(0, 0, 0, 0.7);   /* Capa oscura semi-transparente sobre imágenes */
    --overlay-light: rgba(255, 255, 255, 0.1); /* Capa clara semi-transparente (actualmente no está en uso) */
}

/* 
   Reseteo universal: quita el margen y padding que cada navegador
   aplica por defecto a todos los elementos, para partir de un lienzo
   limpio y controlado por nosotros.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   /* El padding y el borde se cuentan DENTRO del ancho/alto del elemento, no se suman aparte */
}

/* Estilos base del texto y fondo para toda la página */
body {
    font-family: 'Helvetica', Arial, sans-serif;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    line-height: 1.6;   /* Espaciado entre líneas de texto, para mejor lectura */
}

/* Quita el subrayado azul por defecto de los links, y hace que
   hereden el color del texto que los rodea en vez de verse siempre azules */
a {
    text-decoration: none;
    color: inherit;
}


/* ============================================================
   ANIMACIÓN INICIAL (index.html)
   La pantalla de bienvenida con el texto "OttiuX" que aparece
   antes de redirigir a home.html
   ============================================================ */

/* Contenedor que centra el texto en medio de la pantalla completa */
.initial-animation {
    display: flex;
    justify-content: center;   /* Centrado horizontal */
    align-items: center;       /* Centrado vertical */
    height: 100vh;              /* Ocupa el 100% del alto de la ventana */
    background-color: var(--primary-color);
}

/* Estilo del texto "OttiuX" dentro de esa pantalla */
.initial-animation h1 {
    font-size: 5rem;              /* Tamaño del texto una vez que termina de crecer */
    animation: fadeIn 1.5s ease-in-out;
    /* ↑ Duración de la animación. Debe coincidir con el setTimeout() de index.html,
       o el texto se cortará antes de terminar de crecer */
    text-shadow: 0 0 10px var(--secondary-color);  /* Resplandor blanco alrededor del texto */
}

/* Define cómo se ve el texto al INICIO (from) y al FINAL (to) de la animación */
@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: scale(0.8);    /* Tamaño inicial: 80% del tamaño final. 
                                      Bajar este número = zoom más notorio.
                                      Subirlo (más cerca de 1) = zoom más sutil */
    }
    to { 
        opacity: 1;
        transform: scale(1);      /* Tamaño final: 100% (tamaño normal, ver font-size arriba) */
    }
}


/* ============================================================
   PÁGINA PRINCIPAL (home.html)
   El encabezado, texto de bienvenida, y la cuadrícula (grid)
   con las 3 categorías (Bodas, Hospedajes, Flying Dress)
   ============================================================ */

/* Contenedor general que limita el ancho máximo del contenido
   y lo centra en la pantalla, dejando márgenes a los lados en pantallas grandes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Encabezado con el nombre "Otto Varela Fotografía" y el menú de navegación */
header {
    margin-bottom: 3rem;
}

/* Fila que acomoda el nombre a la izquierda y el menú a la derecha en desktop */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;            /* Permite que el menú caiga a una segunda línea si no cabe */
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* Línea sutil que separa el header del resto */
}

header h1 {
    font-size: 2rem;
    letter-spacing: 2px;       /* Separación entre letras */
    margin: 0;
}

/* El texto "Fotografía" dentro del <h1>, en una línea aparte y más pequeño */
header h1 span {
    font-weight: 300;          /* Grosor de letra más delgado que el resto del título */
    font-size: 1rem;
    display: block;            /* Fuerza que caiga en su propia línea, debajo del nombre */
}

/* Lista de links del menú, en fila (uno al lado del otro) en pantallas grandes */
.main-nav {
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

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

/* 
   El checkbox real que guarda si el menú está abierto/cerrado se oculta
   de la vista, pero sigue funcionando (se puede marcar con el label de abajo)
*/
.nav-toggle {
    display: none;
}

/* Ícono de hamburguesa (☰): oculto en desktop, solo aparece en móvil (ver @media al final del archivo) */
.hamburger {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
}

/* Footer con el link "Conóceme mejor →" hacia about.html */
.site-footer {
    text-align: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.about-link {
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.about-link:hover {
    color: var(--accent-color);
}


/* ============================================================
   PÁGINAS DE CATEGORÍA (bodas.html, hospedajes.html, etc.)
   La cuadrícula de fotos individuales dentro de cada categoría,
   y el botón para volver a home.html
   ============================================================ */

/* Cuadrícula de fotos dentro de una categoría.
   auto-fill (a diferencia de auto-fit usado arriba) deja espacios vacíos
   si no hay suficientes fotos para llenar una fila completa */
.gallery-portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1rem 0;
}

.gallery-portfolio a {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.gallery-portfolio img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;   /* Suaviza el zoom al pasar el mouse */
}

/* Regla específica solo para flying-dress.html (.original-image es exclusivo de esa página) */
.gallery-portfolio .original-image {
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Efecto de zoom en la imagen individual al pasar el mouse */
.gallery-portfolio a:hover img {
    transform: scale(1.05);
}

/* Botón "← Volver" que aparece en la parte superior de cada categoría */
.back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;                /* Espacio entre la flecha y el texto */
    margin-bottom: 2rem;
    color: var(--secondary-color);
    transition: color 0.3s ease;
}

.back-button:hover {
    color: var(--accent-color);  /* Cambia a color de acento (rosa) al pasar el mouse */
}


/* ============================================================
   LIGHTBOX PERSONALIZADO
   Ajustes visuales sobre la librería externa Lightbox2
   (usada actualmente en bodas.html para ver las fotos en grande)
   ============================================================ */

/* Agrega un marco blanco y bordes redondeados alrededor de la
   imagen ampliada, sobrescribiendo el estilo por defecto de Lightbox2 */
.lb-container .lb-image {
    border: 10px solid var(--secondary-color) !important;
    border-radius: 4px !important;
}

/* Invierte los colores del ícono de cerrar (X) para que se vea
   blanco en vez de negro, ya que el fondo del sitio es oscuro */
.lb-data .lb-close {
    filter: invert(1);
}


/* ============================================================
   RESPONSIVE
   Ajustes que se aplican SOLO en pantallas de 768px de ancho
   o menos (celulares y tablets en vertical)
   ============================================================ */
@media (max-width: 768px) {
    /* Reducir padding del contenedor en móvil al mínimo para eliminar márgenes negros */
    .container {
        padding: 0.2rem;
    }

    /* Texto de la animación inicial más pequeño en pantallas chicas */
    .initial-animation h1 {
        font-size: 3rem;
    }

    /* Muestra el ícono de hamburguesa, oculto por defecto en desktop */
    .hamburger {
        display: block;
    }

    /* 
       El menú empieza oculto (height 0) y con el contenido desbordado escondido.
       Ocupa TODO el ancho y cae debajo del nombre/hamburguesa (por eso nav-bar tiene flex-wrap)
    */
    .main-nav {
        flex-direction: column;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        gap: 0;
        transition: max-height 0.3s ease;   /* Suaviza el despliegue/cierre */
    }

    .main-nav a {
        padding: 0.75rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* 
       Truco central del menú sin JavaScript:
       cuando el checkbox #nav-toggle está marcado (usuario tocó la hamburguesa),
       el selector de abajo encuentra el <nav> que le sigue y le da altura,
       revelando los links
    */
    .nav-toggle:checked ~ .main-nav {
        max-height: 300px;
    }

    /* Las categorías pasan de varias columnas a una sola, apiladas verticalmente */
    .gallery {
        grid-template-columns: 1fr;
    }

    /* Tarjetas un poco más bajas que en desktop (400px) para no ocupar tanto scroll */
    .gallery .color-card .original-image {
        height: 300px;
    }

    /* 
       El nombre de la categoría (3rem en desktop) se reduce en pantallas chicas
       para que nombres largos como "Flying Dress" no se salgan del ancho de la tarjeta
    */
    .gallery .color-card .color-text {
        font-size: 2rem;
    }

    /* Las fotos dentro de una categoría también pasan a una sola columna */
    .gallery-portfolio {
        grid-template-columns: 1fr;
    }

    /* En flying-dress.html: forzar aspect-ratio 16:9 en móvil (evita que otras reglas lo pisen) */
    .gallery-portfolio .original-image {
        aspect-ratio: 16 / 9 !important;
    }
}


/* ============================================================
   EFECTOS ESPECIALES
   Detalles visuales menores que no pertenecen a ninguna página
   en particular, sino al comportamiento general del navegador
   ============================================================ */

/* Color de fondo cuando el usuario selecciona (resalta) texto con el mouse */
::selection {
    background-color: var(--accent-color);
    color: var(--secondary-color);
}

/* Estilo de la barra de scroll — SOLO funciona en navegadores basados en Chrome
   (Chrome, Edge, Opera). Firefox y Safari la ignoran y muestran su barra por defecto */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--primary-color);   /* El "riel" por donde se desliza la barra */
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);    /* La barra en sí, la parte que se arrastra */
    border-radius: 5px;
}