/* ==========================================================================
   1. VARIABLES, CONFIGURACIÓN BASE Y TIPOGRAFÍAS (PC)
   ========================================================================== */
:root {
    --dorado: #c5a059;
    --oscuro: #121212;
    --texto: #ffffff;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    font-family: 'Raleway', sans-serif;
    /* Capa muy tenue al 88% de opacidad oscura */
    background: linear-gradient(rgba(18, 18, 18, 0.88), rgba(18, 18, 18, 0.88)), 
                url('../img/fondo-mago.webp'); /* Extensión WebP actualizada */
    background-attachment: fixed; 
    background-size: cover;        
    background-position: center center; /* Centrado perfecto horizontal y vertical */
    color: var(--texto);
    scroll-behavior: smooth;
}

/* Secciones Generales */
.section { 
    padding: 80px 10%; 
    text-align: center; 
}

.section h2 { 
    font-family: 'Cinzel', serif; 
    font-size: 2.5rem; 
    margin-bottom: 40px; 
    color: var(--dorado); 
}

/* Botones Generales de la Web */
.btn {
    background: var(--dorado); 
    color: black; 
    padding: 15px 30px;
    text-decoration: none; 
    font-weight: bold; 
    border-radius: 5px; 
    transition: 0.3s; 
    display: inline-block;
}

.btn:hover { 
    background: #e2b86a; 
    transform: translateY(-3px); 
}

/* ==========================================================================
   2. MENÚ DE NAVEGACIÓN (PC)
   ========================================================================== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 15px 5%;
    position: fixed;
    width: 100%;
    background: rgba(0, 0, 0, 0.9); 
    z-index: 1000;
}

nav ul { 
    display: flex; 
    list-style: none; 
}

nav ul li a { 
    color: white; 
    text-decoration: none; 
    margin-left: 20px; 
    font-weight: bold; 
}

.logo img {
    height: 40px; 
    width: auto;  
    display: block;
}

/* ==========================================================================
   3. HERO SECTION / BIENVENIDA (PC)
   ========================================================================== */
.hero {
    background: none; /* Eliminamos el fondo degradado antiguo */
    background-color: transparent; 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px 20px 20px;
    overflow: hidden;
}

.hero h1 { 
    font-family: 'Cinzel', serif; 
    font-size: 3.5rem; 
    color: var(--dorado); 
}

.hero-content {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-avatar {
    max-height: 52vh; 
    width: auto;      
    display: block;
    margin: 0 auto 15px auto; 
    filter: drop-shadow(0px 10px 25px rgba(255, 215, 0, 0.15)); 
}

.hero p.hero-text {
    font-family: 'Raleway', sans-serif; 
    font-size: 1.25rem; 
    line-height: 1.5;
    margin-bottom: 25px; 
    color: #d4c3a3; 
    font-weight: 400; 
}

.hero p.hero-text strong {
    font-weight: 700; 
    color: #ffffff;    
}

/* Contenedor relativo para poder posicionar el brillo encima */
.avatar-contenedor {
    position: relative;
    display: inline-block;
}

/* El destello mágico */
.brillo-ojo {
    position: absolute;
    /* Ajuste de posición para pantallas de ordenador */
    top: 25.0%; 
    left: 45.0%;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #ffffff 15%, rgba(255,215,0,0.8) 45%, rgba(255,255,255,0) 70%);
    clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
    opacity: 0;
    transform: scale(0) rotate(0deg);
    animation: destelloMagico 1.5s ease-out forwards;
    animation-delay: 0.5s; /* Espera medio segundo tras cargar antes de brillar */
    pointer-events: none;
}

/* Animación del brillo */
@keyframes destelloMagico {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    40% {
        opacity: 1;
        transform: scale(2.2) rotate(120deg); /* Crece y gira continuamente */
    }
    70% {
        opacity: 1;
        transform: scale(1.8) rotate(180deg); /* Mantiene el brillo mientras rota un poco más */
    }
    100% {
        opacity: 0;
        transform: scale(0) rotate(270deg); /* Se desvanece de golpe hacia el final */
    }
}

/* ==========================================================================
   4. SECCIÓN SERVICIOS / ELIGE FORMATO (PC)
   ========================================================================== */
#servicios {
    scroll-margin-top: 80px; 
    padding-top: 130px;      
}

.grid { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
    max-width: 1000px; 
    margin: 0 auto; 
}

.card { 
    background: rgba(30, 30, 30, 0.65); /* Fondo negro al 65% de opacidad para que se lea el texto sobre la ilustración */
    padding: 30px; 
    border: 1px solid var(--dorado); 
    border-radius: 8px; 
    backdrop-filter: blur(5px); /* Efecto cristal esmerilado opcional muy moderno */
}

.card h3 {
    margin-bottom: 15px; 
    color: var(--dorado); 
    font-size: 1.4rem;
}

/* ==========================================================================
   5. GALERÍA DE IMÁGENES (PC)
   ========================================================================== */
.galeria-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* 4 fotos por fila en PC */
    gap: 15px; 
    max-width: 1140px; 
    margin: 0 auto; 
}

.foto { 
    background-color: #333; 
    background-size: cover; 
    background-position: center;
    border-radius: 6px; 
    border: 1px solid var(--dorado);
    aspect-ratio: 3 / 2; /* Ratio 9:6 (3:2) impecable */
    transition: transform 0.3s ease;
}

.foto:hover {
    transform: scale(1.02);
    cursor: pointer;
}
/* ==========================================================================
   6. FORMULARIO DE CONTACTO Y FOOTER (PC)
   ========================================================================== */
.contacto-form { 
    max-width: 600px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
}

.contacto-form input, .contacto-form textarea {
    padding: 15px; 
    background: rgba(30, 30, 30, 0.8); 
    border: 1px solid #333; 
    color: white; 
    border-radius: 5px;
}

.contacto-directo {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Permite que en móviles se divida en dos líneas si no cabe */
    font-family: 'Raleway', sans-serif;
    font-size: 1.1rem;
    color: #d4c3a3; /* Tono champagne elegante */
}

.telefono-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: var(--texto);
}

.icono-tel {
    width: 20px;
    height: 20px;
    fill: var(--dorado); /* Icono en color dorado mágico */
}

.separador {
    color: var(--dorado);
    font-weight: 300;
}

.email-texto strong {
    color: var(--texto);
}

footer {
    padding: 20px;
    background: transparent;
}

/* ==========================================================================
   7. BOTÓN FLOTANTE DE WHATSAPP (PC Y MÓVIL)
   ========================================================================== */
.btn-whatsapp {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    z-index: 1000;
    transition: transform 0.3s ease;
    animation: pulsar 2s infinite;
    display: block;
}

.btn-whatsapp:hover {
    transform: scale(1.1);
}

.whatsapp-icon {
    width: 100%;
    height: 100%;
    background-image: url('../img/whatsapp.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); border-radius: 50%; }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); border-radius: 50%; }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); border-radius: 50%; }
}

/* ==========================================================================
   8. ANIMACIONES POR SCROLL (JAVASCRIPT)
   ========================================================================== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.card:nth-child(2) { transition-delay: 0.2s; }
.card:nth-child(3) { transition-delay: 0.4s; }
.card:nth-child(4) { transition-delay: 0.6s; }

/* Estilos para el Footer y Enlaces Legales */
footer {
    padding: 30px 20px;
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(5px);
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #d4c3a3;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #ffffff;
}

/* Casilla legal del Formulario */
.legal-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    font-size: 0.9rem;
    color: #e0e0e0;
    cursor: pointer;
    margin-bottom: 5px;
}

.legal-checkbox input {
    margin-top: 3px;
    cursor: pointer;
}

.legal-checkbox a {
    color: var(--dorado);
    text-decoration: underline;
}

/* ==========================================================================
   10. EFECTO LIGHTBOX (PANTALLA COMPLETA)
   ========================================================================== */
.lightbox {
    display: none; /* Invisible por defecto */
    position: fixed;
    z-index: 2000; /* Por encima de todo, incluido el menú y el WhatsApp */
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(10, 10, 10, 0.95); /* Fondo oscuro mágico muy denso */
    backdrop-filter: blur(8px); /* Difumina suavemente la web de fondo */
    align-items: center;
    justify-content: center;
}

/* La imagen ampliada */
.lightbox-contenido {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 80vh;
    border: 2px solid var(--dorado);
    border-radius: 6px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.8);
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Clase que activa JavaScript al abrir */
.lightbox.activo {
    display: flex;
}

.lightbox.activo .lightbox-contenido {
    transform: scale(1);
    opacity: 1;
}

/* Botón de cerrar (X) */
.lightbox-cerrar {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-cerrar:hover {
    color: var(--dorado);
}

/* ==========================================================================
   9. FILTRO EXCLUSIVO PARA MÓVILES (Abajo del todo)
   ========================================================================== */
@media (max-width: 600px) {
    /* Menú móvil */
    nav {
        padding: 10px 3%; 
    }
    .logo img {
        height: 30px; 
    }
    nav ul li a {
        margin-left: 12px; 
        font-size: 0.85rem; 
    }
    
    /* Inicio móvil */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 70px;
    }
    .hero-avatar {
        max-height: 50vh; 
        margin-top: 0;
        margin-bottom: 15px;
    }
    .hero p.hero-text {
        font-size: 1.05rem; 
        margin-bottom: 30px; 
        line-height: 1.6;
    }
    .hero .btn {
        width: auto; 
    }
    
    /* Servicios móvil (Tu ajuste perfecto) */
    #servicios.section {
        scroll-margin-top: 20px;
        padding: 60px 5% 20px 5%; 
    }
    #servicios.section h2 {
        margin-bottom: 20px; 
        font-size: 2rem;     
    }
    .grid { 
        grid-template-columns: 1fr !important; 
        gap: 12px; 
    }
    .card {
        padding: 15px 12px; 
    }
    .card h3 {
        font-size: 1.15rem;
        margin-bottom: 5px; 
    }
    .card p {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    /* --- AQUÍ SE COLOCA LA GALERÍA DE MÓVILES --- */
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
	
    .contacto-directo {
        font-size: 0.95rem;
        flex-direction: column; /* En móviles pone el email debajo del teléfono */
        gap: 8px;
    }
    .separador {
        display: none; /* Esconde la barra vertical en móviles para que no estorbe */
    }

    /* Ajuste de posición del brillo para smartphones */
    .brillo-ojo {
        top: 25.0%;
        left: 45.0%;
        width: 28px; /* Un poco más pequeño en móviles */
        height: 28px;
    }

    /* --- AQUÍ AÑADES LAS REGLAS DEL LIGHTBOX PARA MÓVIL --- */
    .lightbox-contenido {
        max-width: 95%;
        max-height: 70vh;
    }
    .lightbox-cerrar {
        top: 15px;
        right: 25px;
        font-size: 35px;
    }
}