:root {
    /* Paleta de Colores de Realeza Urbana */
    --color-wine-dark: #6B0F1A;
    --color-wine: #8B1A2A;
    --color-black: #0A0A0A;
    --color-gold: #C9A84C;
    --color-gold-light: #F0D060;
    --color-bone: #F5F0E8;

    /* Tipografías */
    --font-heading: 'Cinzel Decorative', serif;
    --font-subheading: 'Playfair Display', serif;
    --font-body: 'DM Sans', sans-serif;

    /* Gradientes */
    --grad-bg: linear-gradient(135deg, var(--color-black) 30%, var(--color-wine-dark) 100%);
    --grad-gold: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
}

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

html {
    overflow-x: hidden;
}

body {
    background-color: var(--color-black);
    color: var(--color-bone);
    font-family: var(--font-body);
    overflow-x: hidden;
    scroll-behavior: smooth;
    cursor: auto;
}

/* Tipografías Utilitarias */
.cinzel {
    font-family: var(--font-heading);
}

.playfair {
    font-family: var(--font-subheading);
    font-style: italic;
}

.dm-sans {
    font-family: var(--font-body);
}

/* tsParticles Full Background */
#tsparticles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Navegación */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    z-index: 1000;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, padding 0.3s ease;
    background: transparent;
    /* Evitar layout shift en carga */
    will-change: background-color, padding;
    contain: layout style;
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.logo-small {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-gold);
    letter-spacing: 2px;
}

.lang-toggle {
    background: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    padding: 0.3rem 0.8rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lang-toggle:hover {
    background: var(--color-gold);
    color: var(--color-black);
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--color-bone);
    text-decoration: none;
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--color-gold);
    opacity: 1;
}

.nav-link:hover::after {
    width: 100%;
}

/* X cerrar (solo móvil) */
.nav-close {
    display: none;
}

/* Hamburger (mobile only) */
.nav-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-size: 1.3rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.nav-hamburger:hover {
    background: var(--color-gold);
    color: var(--color-black);
}

/* Mobile nav */
@media (max-width: 768px) {
    .nav-hamburger {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        position: fixed;
        top: 0;
        right: 0;
        width: 70vw;
        max-width: 300px;
        height: 100vh;
        background: rgba(10, 10, 10, 0.97);
        backdrop-filter: blur(10px);
        border-left: 1px solid rgba(201, 168, 76, 0.3);
        padding: 5rem 2rem 2rem;
        z-index: 999;
        transition: transform 0.3s ease;
    }

    .nav-links.open {
        display: flex;
    }

    .nav-link {
        font-size: 1rem;
    }

    /* Botón X para cerrar el menú */
    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 1.2rem;
        right: 1.2rem;
        width: 36px;
        height: 36px;
        background: transparent;
        border: 1px solid rgba(201, 168, 76, 0.5);
        border-radius: 50%;
        color: var(--color-gold);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .nav-close:hover {
        background: var(--color-gold);
        color: var(--color-black);
    }
}

/* --- Gallery Section --- */
.gallery-section {
    background: var(--color-black);
    position: relative;
    overflow: hidden; /* Contiene el marco barroco que sobresale */
    overflow-x: hidden;
}

/* Hero Section */
/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2a0508;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 Q35 15 30 20 Q25 15 30 5Z M30 55 Q35 45 30 40 Q25 45 30 55Z M5 30 Q15 35 20 30 Q15 25 5 30Z M55 30 Q45 35 40 30 Q45 25 55 30Z M20 20 Q30 18 30 30 Q18 30 20 20Z M40 20 Q42 30 30 30 Q30 18 40 20Z M20 40 Q18 30 30 30 Q30 42 20 40Z M40 40 Q30 42 30 30 Q42 30 40 40Z' fill='none' stroke='%23C9A84C' stroke-width='0.6' opacity='0.18'/%3E%3Ccircle cx='30' cy='30' r='3' fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.2'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23C9A84C' stroke-width='0.3' opacity='0.12'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    overflow: hidden;
    z-index: 1;
}

/* Difuminado en los 4 bordes - más agresivo */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom, #330a0e 0%, transparent 12%, transparent 75%, #28070a 100%),
        linear-gradient(to right, #28070a 0%, transparent 0%, transparent 100%, #470d13 100%);
    z-index: 1;
}

/* Video - desktop */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.hero-content {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    width: 90%;
    max-width: 600px;
    padding: 0 1rem;
}

/* === MOBILE FIX === */
@media (max-width: 768px) {
    .hero {
        height: 100svh;
        align-items: center;
        background-color: #2a0508;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 Q35 15 30 20 Q25 15 30 5Z M30 55 Q35 45 30 40 Q25 45 30 55Z M5 30 Q15 35 20 30 Q15 25 5 30Z M55 30 Q45 35 40 30 Q45 25 55 30Z M20 20 Q30 18 30 30 Q18 30 20 20Z M40 20 Q42 30 30 30 Q30 18 40 20Z M20 40 Q18 30 30 30 Q30 42 20 40Z M40 40 Q30 42 30 30 Q42 30 40 40Z' fill='none' stroke='%23C9A84C' stroke-width='0.6' opacity='0.18'/%3E%3Ccircle cx='30' cy='30' r='3' fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.2'/%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='%23C9A84C' stroke-width='0.3' opacity='0.12'/%3E%3C/svg%3E");
        background-size: 60px 60px;
    }

    .hero-video {
        object-fit: contain;
        width: 160%;
        height: 100%;
        top: 45;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero::after {
        background:
            linear-gradient(to bottom, #2a0508 0%, transparent 12%, transparent 88%, #2a0508 100%),
            linear-gradient(to right, #2a0508 0%, transparent 3%, transparent 97%, #2a0508 100%);
    }

    .hero-content {
        margin-top: 55vh;
        padding: 1rem;
    }
}

.hero-title {
    font-size: clamp(4rem, 10vw, 9rem);
    /* Hero Title Masivo */
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: 8px;
    color: var(--color-gold-light);
    /* Sombras doradas y brillantes */
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.4), 0 0 40px rgba(201, 168, 76, 0.2);
}

.hero-subtitle {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--color-bone);
    margin-bottom: 3rem;
    letter-spacing: 2px;
    font-weight: 400;
    color: rgba(245, 240, 232, 0.9);
}

/* Botón Primary CTA - Dorado Sólido */
.btn-primary {
    display: inline-block;
    background: var(--grad-gold);
    background-color: var(--color-gold);
    border: 2px solid var(--color-gold-light);
    color: var(--color-black);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    padding: 1.2rem 3rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.4);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-light), #fff8dc, var(--color-gold-light));
    transition: all 0.4s ease;
    z-index: 0;
    opacity: 0;
}

.btn-primary span,
.btn-primary {
    position: relative;
    z-index: 1;
}

.btn-primary:hover {
    color: var(--color-black);
    box-shadow: 0 0 35px rgba(240, 208, 96, 0.7);
    transform: translateY(-2px);
}

.btn-primary:hover::before {
    left: 0;
    opacity: 1;
}

/* Responsive inicial */
@media (max-width: 768px) {
    .hero-title {
        letter-spacing: 4px;
    }

    /* Botón hero más compacto en móvil */
    .btn-primary {
        font-size: 0.9rem;
        padding: 1rem 2rem;
        letter-spacing: 1.5px;
    }

    /* SVG social icons más grandes en móvil */
    .social-icon {
        width: 52px;
        height: 52px;
    }

    .social-icon svg {
        width: 24px;
        height: 24px;
    }
}