:root {
    --bg-color: #000000;
    --text-color: #e0e0e0;
    --accent-color: #c5a47e;
    /* Gold/Bronze */
    --secondary-text: #888;
    --font-heading: 'Playfair Display', serif;
    --font-subheading: 'Cormorant Garamond', serif;
    --font-body: 'Inter', sans-serif;

    --spacing-container: 5vw;
    --spacing-section: 90px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.1;
}

.section-label {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--accent-color);
    display: block;
    margin-bottom: 20px;
}

.editorial-heading {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 30px;
}

.lead-text {
    font-family: var(--font-subheading);
    font-size: 1.5rem;
    font-style: italic;
    color: #fff;
    margin-bottom: 30px;
}

/* Cursor */
.cursor-dot,
.cursor-outline {
    display: none;
}

/* Navigation */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px var(--spacing-container);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    mix-blend-mode: difference;
    transition: background-color 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
}

.main-nav.scrolled {
    background-color: rgba(30, 30, 30, 0.85); /* Franja gris transparente */
    padding: 15px var(--spacing-container);
    mix-blend-mode: normal; /* Cambia el modo de mezcla cuando se ha hecho scroll */
    backdrop-filter: blur(10px);
}

.logo {
    font-family: 'Baskerville', 'Times New Roman', Times, serif;
    font-size: 2rem; /* Aumentado el tamaño de la fuente */
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre las palabras */
}

.logo-first-name {
    font-weight: 150; /* Grosor más fino para EMILIO */
    letter-spacing: 6px; /* Espaciado entre letras */
}

.logo-last-name {
    font-weight: 550; /* Grosor más grueso para PILA */
    letter-spacing: 6px; /* Espaciado entre letras */
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center; /* Alinea verticalmente los elementos */
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding: 10px 0; /* Añade padding vertical para alinear con el botón */
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #fff;
    transition: width 0.3s ease;
}

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

.nav-links .book-btn {
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 15px 50px !important; /* Más espacio interno para que el texto no toque los bordes */
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
}

.nav-links .book-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

.menu-toggle {
    display: none;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0 var(--spacing-container) 15vh;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.hero-content {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: block;
    opacity: 0;
    animation: fadeUp 1s ease 0.5s forwards;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 30px;
}

.hero-title span {
    display: block;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards;
}

.hero-title .line-1 {
    animation-delay: 0.8s;
}

.hero-title .line-2 {
    animation-delay: 1s;
}

.hero-subtitle {
    font-family: var(--font-subheading);
    font-size: 1.8rem;
    font-style: italic;
    opacity: 0;
    animation: fadeUp 1s ease 1.2s forwards;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    right: var(--spacing-container);
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    flex-direction: row-reverse;
}

.scroll-indicator .line {
    width: 50px;
    height: 1px;
    background-color: #fff;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* Editorial Layouts */
.editorial-section {
    padding: var(--spacing-section) 0;
}

/* One Night Section Styles */
.crooner-section {
    padding: 30px;
}

.container {
    padding: 0 var(--spacing-container);
    max-width: 1400px;
    margin: 0 auto;
}

.editorial-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.editorial-grid.reverse .editorial-text {
    order: -1;
}

.text-right {
    text-align: right;
}

.text-right .artist-list {
    justify-content: flex-end;
}

.text-right .price-tag {
    display: block;
    margin-bottom: 20px;
}

.text-right .text-link {
    display: inline-block;
}

.editorial-image {
    position: relative;
    overflow: hidden;
}

.editorial-image img {
    width: 60%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.image-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    backdrop-filter: blur(5px);
    display: flex;
    gap: 20px;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.text-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
    color: var(--secondary-text);
}

.quote-block {
    border-left: 1px solid var(--accent-color);
    padding-left: 30px;
    margin-top: 40px;
}

.quote-block blockquote {
    font-family: var(--font-subheading);
    font-size: 1.3rem;
    font-style: italic;
    color: #fff;
    margin-bottom: 15px;
}

.quote-block cite {
    font-size: 0.9rem;
    color: var(--accent-color);
}

.subtitle {
    font-family: var(--font-subheading);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.feature-list {
    list-style: none;
    margin: 30px 0;
}

.feature-list li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    color: var(--secondary-text);
}

.feature-list li::before {
    content: '•';
    color: var(--accent-color);
    position: absolute;
    left: 0;
}

.artist-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 30px 0;
}

.artist-list span {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--accent-color);
    font-size: 1.1rem;
    position: relative;
}

.artist-list span:not(:last-child)::after {
    content: '/';
    margin-left: 15px;
    color: #333;
    font-style: normal;
}

.context-text {
    margin-bottom: 30px;
    color: var(--secondary-text);
}

.editorial-media-wrapper {
    position: relative;
}

.video-container {
    position: relative;
    width: 100%;
    background-color: transparent;
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.caption {
    margin-top: 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    text-align: right;
}

.women-section .caption {
    text-align: left;
}

.text-link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px;
    transition: color 0.3s;
}

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

.price-tag {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 30px;
}

/* Gallery Button - Styled like text-link for consistency */
.gallery-btn {
    background: transparent;
    border: none;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.3s;
    margin: 20px 0;
    display: inline-block;
}

.lightbox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95);
    justify-content: center;
    align-items: center;
    display: none; /* Ocultar por defecto */
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    margin: auto;
    display: block;
    max-width: 85%;
    max-height: 85%;
    animation: zoom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    object-fit: contain;
}

.lightbox-video {
    max-width: 90%;
    max-height: 90%;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 45px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--accent-color);
    text-decoration: none;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 3rem;
    font-weight: bold;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1001;
    border-radius: 4px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background-color: rgba(197, 164, 126, 0.6);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-counter {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.2rem;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    z-index: 1001;
    font-family: var(--font-body);
}

/* Bio Section Extended Styles */
.bio-section {
    margin: 0;
    padding-bottom: 0 !important;
}

.bio-description {
    margin-bottom: 0; /* Removed default margin-bottom */
}

.bio-description p:last-child {
    margin-bottom: 0; /* Remove bottom margin from last paragraph */
}

.bio-description p {
    margin-bottom: 20px;
    color: var(--secondary-text);
    line-height: 1.8;
}

.editorial-subheading {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #fff;
    margin-top: 80px;
    margin-bottom: 30px;
}

.bio-repertoire-intro {
    color: var(--secondary-text);
    margin-bottom: 40px;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Bio Grid 2x2 - Refactored to Independent Columns */
.bio-grid-2x2 {
    display: flex;
    flex-direction: row;
    gap: 40px;
    margin-bottom: 0;
    align-items: stretch; /* Ensure columns are same height if needed, or flex-start */
}

.bio-col-left,
.bio-col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* No gap between items inside column, or adjust as needed */
}

/* Make image 1 grow to fill space and be taller */
.bio-bloque-imagen1 {
    flex-grow: 1;
    min-height: 450px; /* Reduced from 800px */
    margin-top: 70px;
}

.bio-grid-item {
    position: relative;
    width: 100%;
}

.bio-grid-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bio-bloque-texto1 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.bio-bloque-texto1 > * {
    margin-top: 20px;
    margin-bottom: 20px;
}

.bio-bloque-texto-2 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.bio-bloque-imagen1,
.bio-bloque-imagen2 {
    /* min-height: 400px; REMOVED to let content dictate height */
}

.bio-bloque-imagen1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.bio-bloque-imagen2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.bio-bloque-imagen2 img {
    width: auto;
    height: 80%;
    max-width: 100%;
    object-fit: contain;
    object-position: center; /* Centrado */
    margin: 0;
}

.bio-bloque-imagen1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 20px 0; /* Cambiado de 30px a 20px */
}

.bio-image-mobile {
    display: none; /* Hidden by default on desktop */
}

.bio-image-mobile img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 30px;
}

/* Responsive Bio Grid */
@media (max-width: 900px) {
    .bio-grid-2x2 {
        flex-direction: column; /* Stack columns vertically */
        gap: 0; /* Remove gap to control spacing via margins */
        margin-bottom: 0 !important; /* Remove bottom margin on mobile */
    }

    .bio-col-left,
    .bio-col-right {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .bio-section {
        padding-bottom: 0 !important; /* Remove bottom padding on mobile */
    }

    .bio-section .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none;
    }

    .bio-bloque-texto1,
    .bio-bloque-texto-2,
    .bio-bloque-imagen2,
    .bio-quote-mobile {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .bio-description {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Mobile image inside padded container, no negative margins needed if we want it aligned with text */
    .bio-image-mobile {
        display: block;
        margin-top: 50px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    
    .bio-bloque-imagen1,
    .bio-bloque-imagen2 {
        min-height: 300px;
    }

    /* Hide desktop image column on mobile */
    .bio-bloque-imagen1 {
        display: none;
    }

    /* Align bottom image to edges on mobile (Reverted to follow container padding) */
    .bio-bloque-imagen2 {
        min-height: auto; /* Allow auto height */
        margin-top: 30px !important; /* Restored margin */
        margin-bottom: 30px !important;
    }

    /* Remove margins from adjacent text blocks to give image control */
    .bio-bloque-texto1 {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .bio-bloque-texto-2 {
        padding-top: 0 !important;
    }

    .bio-quote-container {
    }

    .bio-bloque-imagen2 img {
        width: 100%;
        height: auto;
    }

    /* Show mobile image inside text column */
    .bio-image-mobile {
        display: block;
        margin-top: 50px; /* Reverted to 50px */
    }

    .bio-description p {
        text-align: justify;
    }

    .bio-subtitle-elegant,
    .intro-quote {
        text-align: center;
        margin-bottom: 0; /* Remove bottom margin to rely on image top margin */
        margin-left: 0; /* Reset left margin */
        line-height: 1.1;
        font-size: 2.2rem !important;
    }

    .shows-intro-bloque-quote blockquote {
        font-size: 1rem !important;
    }

    /* Full-width containers on mobile */
    .shows-intro-separator {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-top: 40px !important;
        padding-bottom: 0 !important;
    }

.crooner-section {
    padding-top: 100px !important;
    padding-bottom: 0 !important;
}

    .shows-intro-separator {
    }

    /* Repositioned quote container styling on mobile */
    .bio-quote-artistic {
        margin: 0 !important; /* Remove margins to touch edges */
        border: none !important;
        padding: 25px 20px 0 !important; /* Bottom padding to 0 */
    }

    .intro-divider {
        margin-top: 60px !important;
        margin-bottom: 60px !important;
    }

    /* Add internal padding to content so text doesn't touch the screen edges */
    .shows-intro-content,
    .editorial-text,
    .editorial-media-wrapper {
        padding: 0 20px !important; 
    }

    /* One Night & Women I Sing Specific Mobile Styles */
    .crooner-section .editorial-heading,
    .women-section .editorial-heading {
        text-align: center;
    }

    /* Description and Context Text - Justified */
    .crooner-section .editorial-text p,
    .crooner-section .context-text,
    .women-section .editorial-text p,
    .women-section .context-text {
        text-align: justify;
    }

    /* Subtitle - Centered (overrides p justify) */
    .crooner-section .subtitle,
    .women-section .subtitle {
        text-align: center !important;
    }

    /* Artists - Smaller and Centered */
    .crooner-section .artist-list,
    .women-section .artist-list {
        justify-content: center;
    }
    
    .crooner-section .artist-list span,
    .women-section .artist-list span {
        font-size: 0.9rem;
    }

    /* Price - Hidden */
    .crooner-section .price-tag,
    .women-section .price-tag {
        display: none;
    }

    /* REORDERING ONE NIGHT SECTION */
    .crooner-section .editorial-grid {
        gap: 0 !important;
    }

    .crooner-section .editorial-text,
    .crooner-section .editorial-media-wrapper {
        display: contents;
    }

    .crooner-section .editorial-heading { order: 1; margin-bottom: 15px !important; }
    .crooner-section .subtitle { order: 2; margin-bottom: 15px !important; }
    .crooner-section .video-container { order: 3; margin-bottom: 15px; }
    /* caption removed */
    .crooner-section .crooner-desc { order: 5; margin-bottom: 15px; }
    .crooner-section .artist-list { order: 6; margin: 15px 0; }
    .crooner-section .accordion-carousel { order: 7; width: 100%; margin: 15px auto; }
    .crooner-section .context-text { order: 8; margin-bottom: 15px; }
    .crooner-section .text-link { order: 9; margin-top: 10px; }

    /* REORDERING WOMEN I SING SECTION */
    .women-section .editorial-grid {
        gap: 0 !important;
    }

    .women-section .editorial-text,
    .women-section .editorial-media-wrapper {
        display: contents;
    }

    .women-section .editorial-heading { order: 1; margin-bottom: 15px !important; }
    .women-section .subtitle { order: 2; margin-bottom: 15px !important; }
    .women-section .video-container { order: 3; margin-bottom: 15px; }
    .women-section .media-gallery { display: none !important; }
    .women-section .women-desc { order: 5; margin-bottom: 15px; }
    .women-section .artist-list { order: 6; margin: 15px 0; }
    .women-section .accordion-carousel { order: 7; width: 100%; margin: 15px auto; }
    .women-section .context-text { order: 8; margin-bottom: 15px; }
    .women-section .text-link { order: 9; margin-top: 10px; text-align: left; align-self: flex-start; }
}

/* Bio Hero Title - Large & Dramatic */
.bio-hero-title-large {
    font-family: 'Playfair Display', serif;
    font-size: 7rem;
    font-weight: 900;
    line-height: 0.9;
    color: #fff;
    margin: 30px 0 20px;
    letter-spacing: -0.04em;
}

.bio-subtitle-elegant,
.intro-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* Escalado fluido */
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 30px 0;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
}

/* Artistic Quote Block - Magazine Style */
.bio-quote-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Top aligned */
    overflow: visible;
}

.bio-quote-artistic {
    padding: 60px 40px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    text-align: right;
    overflow: visible;
}

.bio-quote-mobile {
    display: none;
}

@media (max-width: 900px) {
    .bio-quote-desktop {
        display: none;
    }

    .bio-quote-mobile {
        display: block;
        text-align: center;
        border: none;
        font-family: 'Cormorant Garamond', serif;
    }

    .bio-quote-mobile blockquote {
        font-style: italic;
    }

    .bio-quote-mobile cite {
        text-transform: none;
    }
}

.quote-mark-open,
.quote-mark-close {
    font-size: 4rem;
    font-family: 'Playfair Display', serif;
    color: var(--accent-color);
    opacity: 0.6;
    line-height: 1; /* Reset to 1 to avoid squashing */
    vertical-align: middle;
    display: inline-block;
    padding: 0 10px; /* Add horizontal space to prevent clipping */
    width: auto;
    font-style: normal; /* Force normal style to avoid slant clipping */
}

.quote-mark-open {
    margin-right: 10px;
}

.quote-mark-close {
    margin-left: 10px;
}

.bio-quote-artistic blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    line-height: 1.3;
    color: #fff;
    font-weight: 300;
    font-style: italic;
    margin: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.bio-quote-artistic cite {
    display: block;
    margin-top: 25px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Responsive Typography */
@media (max-width: 1024px) {
    .bio-hero-title-large {
        font-size: 5rem;
    }
    
    .bio-quote-artistic blockquote {
        font-size: 1.8rem;
    }
    
    .quote-mark-open,
    .quote-mark-close {
        font-size: 3rem;
    }
}

@media (max-width: 768px) {
    .bio-hero-title-large {
        font-size: 3.5rem;
    }
    
    .bio-quote-artistic {
        padding: 40px 20px 30px;
    }
    
    .bio-quote-artistic blockquote {
        font-size: 1.5rem;
    }
    
    .quote-mark-open,
    .quote-mark-close {
        font-size: 2.5rem;
        padding: 0 5px;
        line-height: 1;
    }
}

/* Shows Section */
.bio-shows-section {
    margin-top: 80px;
}

.bio-shows-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 30px;
}

.bio-show-card {
    background-color: rgb(15, 15, 15);
    border: 1px solid #222;
    padding: 30px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.bio-show-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(197, 164, 126, 0.2);
}

.bio-show-card h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.bio-show-card:hover h4 {
    color: #fff;
}

.bio-show-card p {
    color: var(--secondary-text);
    line-height: 1.7;
}

/* Technical Section */
.bio-tech-section {
    margin-top: 80px;
}

.bio-tech-subtitle {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 30px;
}

.bio-tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 30px;
}

.bio-tech-card {
    background-color: rgba(197, 164, 126, 0.05);
    border: 1px solid rgba(197, 164, 126, 0.2);
    padding: 30px;
}

.bio-tech-card h5 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    text-align: center;
}

.bio-tech-card p {
    color: var(--secondary-text);
    line-height: 1.7;
    font-size: 0.9rem;
    text-align: justify;
}

/* Projects Section */
.bio-projects-section, .beyond-section {
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 20px 20px 0 20px;
}

.bio-projects-section>p {
    color: var(--secondary-text);
    margin-bottom: 40px;
    line-height: 1.8;
}

.bio-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 0;
}

.bio-project-item {
    padding: 30px 0 0 0;
    border-top: 1px solid #222;
}

.bio-project-item h4 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.bio-project-item p {
    color: var(--secondary-text);
    line-height: 1.7;
    margin-bottom: 20px;
}

.bio-project-item .gallery-btn {
    margin-bottom: 0;
}

.bio-meta {
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    padding-top: 40px;
    border-top: 1px solid #222;
}

/* Tech Section */
.tech-section {
    background-color: #000;
    padding: 80px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    text-align: center;
}

.tech-item h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--accent-color);
}

.tech-item p {
    color: var(--secondary-text);
    font-size: 0.9rem;
}

/* Contact Section */
.contact-section {
    padding: var(--spacing-section) 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.contact-details {
    margin-top: 40px;
}

.contact-details p {
    margin-bottom: 10px;
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: transparent;
    border: 1px solid #333;
    padding: 15px;
    color: #fff;
    font-family: var(--font-body);
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.submit-btn {
    background-color: var(--accent-color);
    color: #000;
    border: none;
    padding: 15px 30px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.3s;
    align-self: flex-start;
}

.submit-btn:hover {
    background-color: #fff;
}

/* Footer */
footer {
    padding: 50px 0 15px 0;
    text-align: center;
    font-size: 0.8rem;
    color: #555;
}

.credits {
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .footer-signature {
        max-width: 200px !important;
        margin-bottom: 120px !important;
    }
}

/* Shows Intro Separator - Editorial Style */
.shows-intro-section {
    padding: 0;
}

.shows-intro-bloque-texto1 {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    text-align: center;
    margin-bottom: 0;
}

.shows-intro-bloque-quote {
    padding: 0 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.shows-intro-bloque-quote blockquote {
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    font-weight: 300;
    font-style: italic;
    margin: 0;
}

.shows-intro-bloque-quote cite {
    display: block;
    margin-top: 25px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    font-weight: 500;
}

.shows-intro-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.intro-eyebrow {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.75rem;
    color: var(--accent-color);
    display: block;
    margin-bottom: 40px;
    font-weight: 500;
}

.intro-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.intro-divider {
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #c5a47e 50%, transparent 100%);
    margin: 20px auto; /* 20px top and bottom */
}

/* Responsive Shows Intro */
@media (max-width: 768px) {
    .shows-intro-separator {
        padding: 80px 0;
    }
    
    .intro-description {
        font-size: 1rem;
    }
}

/* Fiesta Section - Centered Vertical Layout */
.fiesta-content-centered {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.fiesta-header {
    margin-bottom: 60px;
}

.fiesta-header .section-label {
    display: inline-block;
    margin-bottom: 20px;
}

.fiesta-header .editorial-heading {
    margin-bottom: 20px;
}

.fiesta-header .subtitle {
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.fiesta-video-wrapper {
    position: relative;
}

.fiesta-album-art {
    width: 100%;
    max-width: 294px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: none;
}

.fiesta-info {
    margin-top: 60px;
}

.fiesta-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-bottom: 30px;
}

.fiesta-info .context-text {
    margin-bottom: 40px;
    text-align: center;
}

.fiesta-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.fiesta-cta .price-tag {
    margin: 0;
}

.fiesta-cta .text-link {
    margin: 0;
}

/* Responsive Fiesta */
@media (max-width: 768px) {
    .fiesta-header .subtitle {
        font-size: 1.2rem;
    }
    
    .fiesta-description {
        font-size: 1rem;
    }
    
    .fiesta-album-art {
        max-width: 100%;
    }
}

/* Responsive */
@media (max-width: 900px) {
    .editorial-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .editorial-grid.reverse .editorial-text {
        order: 0;
    }

    .text-columns {
        grid-template-columns: 1fr;
    }

    .main-nav {
        padding: 15px var(--spacing-container); /* Reduced padding for mobile */
        top: 0 !important; /* Force sticky to top on mobile */
        position: fixed !important; /* Enforce fixed positioning */
        mix-blend-mode: normal !important; /* Disable blend mode on mobile for stability */
        background-color: rgba(0, 0, 0, 0.8); /* Ensure visibility without blend mode */
    }

    /* Hero Mobile Adjustments */
    .hero-section {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .hero-content {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
    }

    .scroll-indicator {
        left: var(--spacing-container);
        right: auto;
        flex-direction: row;
    }

    .hero-bg video {
        pointer-events: none; /* Quita la opción de ponerle play/interactuar */
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    .nav-links {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #000;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transform: translateY(-100%);
        transition: transform 0.4s ease;
        z-index: 99; /* Below nav bar z-index 100 */
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links a {
        font-size: 1.5rem;
    }

    .menu-toggle {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 101; /* Above nav links */
        position: relative;
    }

    .menu-toggle span {
        display: block;
        width: 30px;
        height: 2px;
        background-color: #fff;
        margin-bottom: 6px;
        transition: all 0.3s ease;
    }

    /* Hamburger Animation */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    /* We need a 3rd span for standard hamburger, but HTML might have only 2? 
       Checking previous read of index.php... 
       <button class="menu-toggle" aria-label="Menú">
            <span></span>
            <span></span>
       </button>
       It has only 2 spans. I should adjust animation for 2 spans or add a 3rd one.
       Let's assume standard X with 2 lines is fine, or I can add a 3rd one in PHP.
       
       Let's stick to 2 spans animation:
       Line 1: Rotate 45
       Line 2: Rotate -45
       And position them to cross.
    */
    
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(1px, -1px);
        transform-origin: center;
    }
    
    .menu-toggle.active span:nth-child(2) {
        transform: rotate(-45deg) translate(1px, -5px); /* Adjusted for spacing */
        transform-origin: center;
        margin-bottom: 0;
    }
    
    /* Better approach with 2 lines:
       Top line rotates 45 deg
       Bottom line rotates -45 deg
       Both translate to center.
       
       Let's check initial spacing. 
       margin-bottom: 6px.
       Height 2px.
       
       If I just use absolute positioning when active it might be cleaner, 
       but let's try translate.
    */
    
    .menu-toggle.active span:nth-child(1) {
        transform: translateY(4px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        transform: translateY(-4px) rotate(-45deg);
    }

    .tech-grid {
        grid-template-columns: 1fr;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .bio-shows-grid {
        grid-template-columns: 1fr;
    }

    .bio-tech-grid {
        grid-template-columns: 1fr;
    }

    .bio-projects-grid {
        grid-template-columns: 1fr;
    }
}

/* Botón fijo de Reservar para móviles */
.mobile-book-btn {
    display: none; /* Oculto por defecto en escritorio */
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    z-index: 9998; /* Debajo del chat widget */
    background-color: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-left: none;
    padding: 15px 8px 15px 2px;
    border-radius: 0 8px 8px 0;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: 0;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
}

.mobile-book-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

/* Ocultar botón en el hero section */
.mobile-book-btn.hero-visible {
    display: none;
}

/* Mostrar botón solo en móviles */
@media (max-width: 768px) {
    .mobile-book-btn {
        display: block;
    }
    
    /* Ocultar el botón de reserva original en el menú en móviles si queremos evitar duplicación */
    .nav-links .book-btn {
        display: none;
    }
}

/* ===================================== */
/* CHAT WIDGET */
/* ===================================== */
#chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: var(--font-body);
}

.chat-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.chat-icon {
    width: 28px;
    height: 28px;
}

.chat-icon.hidden {
    display: none;
}

.chat-window {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 380px;
    height: 550px;
    max-height: calc(100vh - 120px);
    background-color: var(--bg-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border: 1px solid rgba(197, 164, 126, 0.3);
}

.chat-window.hidden {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.chat-header {
    background-color: var(--accent-color);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

.chat-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.chat-close-btn:hover {
    transform: scale(1.2);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-message {
    display: flex;
    align-items: flex-start;
}

.chat-message.user {
    justify-content: flex-end;
}

.chat-message.bot {
    justify-content: flex-start;
}

.message-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    max-width: 75%;
    word-wrap: break-word;
    font-size: 0.95rem;
    line-height: 1.4;
}

.message-bubble strong {
    font-weight: 700;
}

.message-bubble em {
    font-style: italic;
}

/* ======================================== */
/* GALERÍAS DE PREVIEW */
/* ======================================== */
.media-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    width: 100%;
    margin-top: 1rem;
}

.gallery-item {
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/3;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-message.user .message-bubble {
    background-color: var(--accent-color);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.bot .message-bubble {
    background-color: rgba(197, 164, 126, 0.1);
    color: var(--text-color);
    border-bottom-left-radius: 4px;
}

.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(197, 164, 126, 0.2);
}

.chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid rgba(197, 164, 126, 0.3);
    border-radius: 24px;
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.chat-input:focus {
    border-color: var(--accent-color);
}

.chat-input::placeholder {
    color: var(--secondary-text);
}

.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease;
}

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

.chat-send-btn svg {
    width: 20px;
    height: 20px;
}

.chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-send-btn:disabled:hover {
    transform: scale(1);
}

/* Scrollbar del chat */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 3px;
}

/* Responsive Chat */
@media (max-width: 768px) {
    .chat-window {
        width: calc(100vw - 40px);
        height: calc(100vh - 120px);
        right: 20px;
        bottom: 90px;
    }
    
    .message-bubble {
        max-width: 85%;
    }

    /* Galerías en móvil: 2 columnas */
    .media-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* Fiesta Section Portada */
.fiesta-portada {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    max-width: 500px;
}

.fiesta-portada img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Fiesta Section Image Intermedia */
.fiesta-image-intermedia {
    display: flex;
    justify-content: center;
    margin: 30px auto;
    max-width: 600px;
}

.fiesta-image-intermedia img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Fiesta Section Side-by-Side Images (legacy) */
.fiesta-images-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}

.fiesta-image-side {
    width: 400px;
    height: 400px;
    object-fit: cover;
    display: block;
}

@media (max-width: 850px) {
    .fiesta-image-side {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 768px) {
    .fiesta-images-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .fiesta-image-side {
        width: 100%;
        max-width: 400px;
        height: auto;
    }
    .fiesta-description {
        text-align: justify;
    }
}

/* Accordion Carousel Styles */
.accordion-carousel {
    display: flex;
    width: 100%; /* Changed from 70% to use max-width for sizing */
    max-width: 475px; /* calculated to maintain roughly 9:16 ratio for active item */
    height: 420px; /* Reduced by 30% from 600px */
    gap: 10px;
    margin: 20px auto; /* Centered */
    overflow: hidden;
}

.accordion-item {
    flex: 1;
    position: relative;
    overflow: hidden;
    transition: flex 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border-radius: 6px;
}

.accordion-item.active {
    flex: 4; /* Expands to be wider */
    cursor: default;
}

.accordion-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
    z-index: 2;
}

/* When active, cover fades out to reveal video, but we need to handle this carefully.
   If we just fade out, the video shows. 
   Ideally, we only fade out if the user plays? 
   Or, per instructions: "uses covers... when video is not in play".
   
   Let's use a class 'playing' added via JS to hide the cover.
   Or simply: 
   - Active state expands. Cover still visible. 
   - User clicks play button (native video controls).
   - Video plays.
   
   However, the cover is overlaying the video. So user can't click play on video if cover is z-index 2.
   
   Solution:
   When active, cover gets pointer-events: none (so clicks go to video) AND opacity 0? 
   No, if opacity 0, it's invisible.
   
   If we want cover visible UNTIL play:
   We can make the VIDEO 'poster' the cover image, and remove the separate <img> tag?
   But the separate <img> allows for the accordion effect visual even on collapsed items easier.
   
   Let's try this:
   Collapsed items: Cover visible (z-index 2).
   Active item: Cover fades out (opacity 0) allowing video (z-index 1) to be seen and interacted with.
   This matches the "reveal" effect of the accordion.
*/

.accordion-item.active.playing .accordion-cover {
    opacity: 0;
    pointer-events: none;
}

.accordion-video-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #000;
    z-index: 1;
}

.accordion-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the panel */
    display: block;
}

/* Play Button Overlay Styles */
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent dark background */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3; /* Above cover */
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
}

.play-button-overlay svg {
    fill: #fff;
    width: 40px;
    height: 40px;
    margin-left: 4px; /* Optical adjustment for play triangle */
}

.play-button-overlay:hover {
    background-color: rgba(197, 164, 126, 0.8); /* Accent color on hover */
    transform: translate(-50%, -50%) scale(1.1);
}

/* Only show on active item */
.accordion-item.active .play-button-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* Hide when playing */
.accordion-item.active.playing .play-button-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Accordion Caption Styles */
.accordion-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
    color: #fff;
    font-family: 'Playfair Display', serif; /* Elegant font */
    font-style: italic;
    font-size: 0.9rem;
    text-align: center;
    padding: 20px 10px 15px; /* Padding for readability */
    z-index: 4; /* Above video and play button */
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* Let clicks pass through to video controls */
}

/* Show caption only on active item */
.accordion-item.active .accordion-caption {
    opacity: 1;
}

/* WordPress Admin Bar Compatibility */
body.admin-bar .main-nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .main-nav {
        top: 0;
    }
}

/* Nuevo Bloque Bio - Vacío por ahora */
.bio-bloque-galeria {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .bio-bloque-galeria {
        grid-column: 1;
    }
}

/* Bloque Divisor */
.bloque-divisor {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    width: 100%;
    margin: 40px 0;
}

.bloque-divisor .intro-divider {
    margin: 0; /* Reset margins as flex handles centering */
}

/* ----------------------------------------------------
   NEW ONE NIGHT SECTION (LAYOUT TEST)
   ---------------------------------------------------- */
.new-one-night-section.layout,
.new-women-i-sing-section.layout,
.new-sour-cocktail-section.layout {
  border-radius: 0;
}

.new-one-night-section,
.new-women-i-sing-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
  padding: 40px var(--spacing-container);
  max-width: 1400px;
  margin: 0 auto;
}

.new-sour-cocktail-section {
  display: flex;
  flex-direction: column;
  padding: 40px var(--spacing-container);
  max-width: 700px;
  margin: 0 auto;
}

.new-sour-cocktail-section .bloque-portada {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Sour Carousel - ratio 1600x1920 (5:6) */
.sour-carousel {
  max-width: 400px;
  height: 480px;
}

@media (max-width: 900px) {
  .sour-carousel {
    max-width: 100%;
    height: 400px;
  }
}

.new-sour-cocktail-section .sour-col-left,
.new-sour-cocktail-section .sour-col-right {
  display: contents;
}

.new-sour-cocktail-section .bloque-titulo-subtitulo { order: 1; }
.new-sour-cocktail-section .bloque-portada { order: 2; margin-top: 0; }
.new-sour-cocktail-section .bloque-primer-texto { order: 3; }
.new-sour-cocktail-section .bloque-carrusel { order: 4; }
.new-sour-cocktail-section .bloque-boton-experiencia { order: 5; }

.one-night-col-left,
.one-night-col-right,
.sour-col-left,
.sour-col-right {
    display: flex;
    flex-direction: column;
}

/* Grid Areas */
.bloque-titulo-subtitulo { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.bloque-titulo-subtitulo .editorial-heading {

    margin-bottom: 0;

}



.bloque-titulo-subtitulo .subtitle {

    margin-bottom: 0;

}



.bloque-primer-texto, 
.bloque-artistas {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.bloque-segundo-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: justify;
    padding: 20px;
}

.bloque-boton-experiencia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
}



.bloque-artistas .artist-list {
    justify-content: center;
}

.bloque-primer-texto > *,
.bloque-artistas > *,
.bloque-segundo-texto > *,
.bloque-boton-experiencia > *,
.bloque-titulo-subtitulo > * {
    margin-top: 0;
    margin-bottom: 0;
}

.bloque-portada { 
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.bloque-portada img {
    width: 100%; /* Se ajusta al ancho disponible */
    height: auto; /* Mantiene la proporción */
    display: block;
    margin: 0;
}



/* Mobile layout for new sections */
@media (max-width: 900px) {
    .new-one-night-section,
    .new-women-i-sing-section,
    .new-sour-cocktail-section {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .one-night-col-left,
    .one-night-col-right,
    .sour-col-left,
    .sour-col-right {
        display: contents !important;
    }

    .new-one-night-section .bloque-titulo-subtitulo,
    .new-women-i-sing-section .bloque-titulo-subtitulo,
    .new-sour-cocktail-section .bloque-titulo-subtitulo {
        order: 1;
        width: 100%;
        text-align: center;
    }

    .new-one-night-section .bloque-titulo-subtitulo .subtitle,
    .new-women-i-sing-section .bloque-titulo-subtitulo .subtitle,
    .new-sour-cocktail-section .bloque-titulo-subtitulo .subtitle {
        font-size: 1.5rem;
    }

    .new-one-night-section .bloque-portada,
    .new-one-night-section .bloque-primer-texto,
    .new-one-night-section .bloque-artistas,
    .new-one-night-section .bloque-carrusel,
    .new-one-night-section .bloque-segundo-texto,
    .new-one-night-section .bloque-boton-experiencia,
    .new-women-i-sing-section .bloque-portada,
    .new-women-i-sing-section .bloque-primer-texto,
    .new-women-i-sing-section .bloque-artistas,
    .new-women-i-sing-section .bloque-carrusel,
    .new-women-i-sing-section .bloque-segundo-texto,
    .new-women-i-sing-section .bloque-boton-experiencia,
    .new-sour-cocktail-section .bloque-portada,
    .new-sour-cocktail-section .bloque-primer-texto,
    .new-sour-cocktail-section .bloque-artistas,
    .new-sour-cocktail-section .bloque-carrusel,
    .new-sour-cocktail-section .bloque-segundo-texto,
    .new-sour-cocktail-section .bloque-boton-experiencia {
        width: 100%;
    }

    .new-one-night-section .bloque-portada,
    .new-women-i-sing-section .bloque-portada,
    .new-sour-cocktail-section .bloque-portada {
        order: 2;
        margin-top: 0;
    }

    .new-one-night-section .bloque-primer-texto,
    .new-women-i-sing-section .bloque-primer-texto,
    .new-sour-cocktail-section .bloque-primer-texto {
        order: 3;
        text-align: justify;
    }

    .new-one-night-section .bloque-artistas,
    .new-women-i-sing-section .bloque-artistas,
    .new-sour-cocktail-section .bloque-artistas {
        order: 4;
    }

    .new-one-night-section .bloque-artistas .artist-list span,
    .new-women-i-sing-section .bloque-artistas .artist-list span,
    .new-sour-cocktail-section .bloque-artistas .artist-list span {
        font-size: 0.85rem !important;
    }

    .new-one-night-section .bloque-carrusel,
    .new-women-i-sing-section .bloque-carrusel,
    .new-sour-cocktail-section .bloque-carrusel {
        order: 5;
        width: 100%;
        padding: 0;
    }

    .new-one-night-section .accordion-carousel,
    .new-women-i-sing-section .accordion-carousel,
    .new-sour-cocktail-section .accordion-carousel {
        max-width: 100%;
        height: 350px;
        margin: 10px 0;
    }

    .new-one-night-section .bloque-segundo-texto,
    .new-women-i-sing-section .bloque-segundo-texto,
    .new-sour-cocktail-section .bloque-segundo-texto {
        order: 6;
        text-align: justify;
    }

    .new-one-night-section .bloque-boton-experiencia,
    .new-women-i-sing-section .bloque-boton-experiencia,
    .new-sour-cocktail-section .bloque-boton-experiencia {
        order: 7;
    }
}

/* Success Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #111;
    border: 1px solid var(--accent-color);
    padding: 0;
    width: 90%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: fadeUp 0.3s ease forwards;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 1;
    transition: color 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: var(--accent-color);
    text-decoration: none;
}

.modal-header {
    padding: 30px 30px 20px;
    border-bottom: 1px solid #222;
}

.modal-header h3 {
    font-family: var(--font-heading);
    color: var(--accent-color);
    margin: 0;
    font-size: 1.8rem;
}

.modal-body {
    padding: 30px;
    color: var(--secondary-text);
}

.modal-body p {
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.6;
}

.modal-footer {
    padding: 20px 30px 30px;
    text-align: right;
    border-top: 1px solid #222;
}

.modal-btn {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 10px 25px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.modal-btn:hover {
    background-color: var(--accent-color);
    color: #000;
}

.contratar-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px; /* Espacio encima del botón */
    padding: 20px 0; /* Espacio arriba y abajo */
}

.contratar-btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: #000;
    text-decoration: none;
    padding: 18px 50px; /* Un poco menos de padding para integrarse mejor */
    font-family: var(--font-body);
    font-size: 1.1rem; /* Un poco más pequeño para integrarse mejor */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(197, 164, 126, 0.4);
}

.contratar-btn:hover {
    background-color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(197, 164, 126, 0.6);
}

/* Reviews Section */
.reviews-section {
    padding: var(--spacing-section) 0;
    background-color: var(--bg-color); /* Match site background */
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px; /* More space for clean look */
    max-width: 1200px;
    margin: 0 auto;
}

.review-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.review-item blockquote {
    font-family: 'Georgia', serif; /* Matching the intro quote font exactly */
    font-size: 1.15rem; /* Matching intro size approx */
    font-style: italic;
    color: #fff;
    margin-bottom: 0;
    line-height: 1.6;
    font-weight: 300;
}

.review-item cite {
    font-family: var(--font-body);
    font-size: 0.85rem; /* Match intro cite size */
    text-transform: uppercase;
    letter-spacing: 3px; /* Match intro spacing */
    color: rgba(255, 255, 255, 0.6);
    font-style: normal;
    font-weight: 500;
    display: block;
    margin-top: 25px; /* Match intro margin */
}

/* Adjust quote marks for reviews to match intro */
.review-item .quote-mark-open,
.review-item .quote-mark-close {
    font-size: 3rem; /* Slightly smaller than hero but proportional */
    opacity: 0.6;
    vertical-align: middle;
    color: var(--accent-color);
    font-family: 'Playfair Display', serif;
}

/* Responsive Reviews */
@media (max-width: 900px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .review-item {
        padding: 0;
        text-align: center; /* Explicitly centered */
        align-items: center;
    }

    .review-item blockquote {
        font-size: 1.1rem; /* Slightly smaller for mobile */
        text-align: center;
    }

    .review-item cite {
        text-align: center;
        margin-top: 20px;
    }
}

/* ------------------------------------- */
/* NAVIGATION DROPDOWN */
/* ------------------------------------- */

.nav-dropdown {
    position: relative;
    /* Eliminar display flex si causa conflicto con los a hermanos */
    display: inline-block; 
}

/* El botón que dispara el dropdown */
.dropdown-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 10px 15px; /* Igual que los otros links */
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.dropdown-trigger:hover {
    color: #d4af37; /* Dorado sutil */
}

/* El contenido oculto */
.dropdown-content {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0d0d0d; /* Fondo oscuro */
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    border-radius: 4px;
    padding: 10px 0;
    margin-top: 5px; 
}

/* Mostrar al hacer hover */
.nav-dropdown:hover .dropdown-content {
    display: block;
    animation: fadeInDropdown 0.3s ease;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Links dentro del dropdown */
.dropdown-content a {
    color: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.85rem;
    white-space: nowrap;
    text-align: left; /* Alinear a la izquierda para legibilidad */
    transition: background 0.3s ease, color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff; 
}

/* Ajuste Mobile: Dropdown expandido siempre o colapsable */
@media (max-width: 768px) {
    .nav-dropdown {
        display: block; /* Ocupar ancho completo */
        width: 100%;
        text-align: center;
    }
    
    .dropdown-trigger {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        font-size: 1.2rem; /* Tamaño móvil */
    }
    
    .dropdown-content {
        position: static; /* No flotar */
        display: block; /* Siempre visible en móvil para simplificar */
        transform: none;
        box-shadow: none;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
    }
    
    .dropdown-content a {
        text-align: center;
        padding: 10px 0;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.6);
    }
}

/* ------------------------------------- */
/* LANGUAGE TOGGLE SWITCH */
/* ------------------------------------- */

.lang-toggle-container {
    margin-left: 20px;
    display: flex;
    align-items: center;
    text-decoration: none !important; /* Quitar subrayado del enlace */
}

/* El contenedor (la pista del switch) */
.lang-toggle {
    position: relative;
    display: flex;
    width: 64px;
    height: 26px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    transition: all 0.3s ease;
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Las etiquetas de texto (ES / EN) */
.lang-label {
    width: 32px;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    z-index: 2;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
    user-select: none;
    line-height: 26px;
}

/* Color del texto cuando está activo (sobre el fondo blanco) */
.lang-toggle.es .label-es,
.lang-toggle.en .label-en {
    color: #1a1a1a;
}

/* La pastilla blanca que se mueve (Knob) */
.toggle-knob {
    position: absolute;
    width: 30px;
    height: 22px;
    background: #fff;
    border-radius: 11px;
    top: 1px;
    left: 1px;
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Mover la pastilla a la derecha si es EN */
.lang-toggle.en .toggle-knob {
    transform: translateX(30px);
}

/* Ajuste Mobile */
/* Utility: Mobile Break */
.mobile-br {
    display: none;
}

@media (max-width: 768px) {
    .mobile-br {
        display: block;
    }
    
    .lang-toggle-container {
        margin-left: 0;
        margin-top: 20px;
        justify-content: center;
        width: 100%;
        font-size: 1rem;
    }
}

/* ── Landing Pages ───────────────────────────────────────────────────────────── */

.landing-page {
    background: #0a0a0a;
    color: #e8e0d5;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
}

.landing-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2.5rem;
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(8px);
}

.landing-hero {
    position: relative;
    height: 70vh;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.landing-hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.landing-hero-content {
    position: relative;
    z-index: 2;
    padding: 0 1.5rem;
}

.landing-hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

.landing-hero-sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #c9a96e;
    margin: 0 0 2rem;
    font-weight: 300;
}

.landing-section {
    padding: 5rem 1.5rem;
}

.landing-content {
    max-width: 820px;
    margin: 0 auto;
}

.landing-intro {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #d5ccc2;
    margin-bottom: 3rem;
    border-left: 3px solid #c9a96e;
    padding-left: 1.5rem;
}

.landing-content h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
    color: #c9a96e;
    margin: 3rem 0 1rem;
    letter-spacing: 0.03em;
}

.landing-content p {
    line-height: 1.8;
    color: #c5bdb5;
    margin-bottom: 1.2rem;
}

.landing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.landing-list li {
    padding: 0.6rem 0 0.6rem 1.5rem;
    border-bottom: 1px solid rgba(201,169,110,0.15);
    color: #c5bdb5;
    line-height: 1.6;
    position: relative;
}

.landing-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #c9a96e;
}

.landing-quote {
    border-left: 3px solid #c9a96e;
    padding: 1.5rem 2rem;
    margin: 3rem 0;
    font-style: italic;
    color: #d5ccc2;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    line-height: 1.7;
}

.landing-quote cite {
    display: block;
    margin-top: 0.8rem;
    font-style: normal;
    font-size: 0.85rem;
    color: #c9a96e;
    letter-spacing: 0.05em;
}

.landing-cta-box {
    background: rgba(201,169,110,0.08);
    border: 1px solid rgba(201,169,110,0.3);
    padding: 2.5rem;
    text-align: center;
    margin-top: 4rem;
}

.landing-cta-box p {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: #e8e0d5;
    margin-bottom: 1.5rem;
}

.cta-btn {
    display: inline-block;
    background: #c9a96e;
    color: #0a0a0a;
    padding: 0.9rem 2.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s;
}

.cta-btn:hover {
    background: #e8c98a;
}

.landing-or {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #8a8078;
}

.landing-or a {
    color: #c9a96e;
    text-decoration: none;
}

@media (max-width: 768px) {
    .landing-nav { padding: 1rem 1.2rem; }
    .landing-section { padding: 3rem 1rem; }
    .landing-quote { padding: 1rem 1.2rem; }
    .landing-cta-box { padding: 1.5rem 1rem; }
}

/* ── Landing Pages – Imágenes ────────────────────────────────────────────────── */

.landing-img-full {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
    margin: 3rem 0;
    filter: brightness(0.92);
}

.landing-img-editorial {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: top;
    display: block;
    margin: 3rem 0 0.5rem;
    filter: brightness(0.9);
}

.landing-img-caption {
    font-size: 0.78rem;
    color: #6a6260;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.landing-shows-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 2rem 0 3rem;
    background: rgba(201,169,110,0.15);
}

.landing-shows-grid-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9/16;
}

.landing-shows-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
    filter: brightness(0.85);
}

.landing-shows-grid-item:hover img {
    transform: scale(1.04);
    filter: brightness(1);
}

.landing-shows-grid-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: linear-gradient(transparent, rgba(10,10,10,0.85));
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: #c9a96e;
    letter-spacing: 0.05em;
}

.landing-img-atmospheric {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    margin: 3rem 0;
    filter: brightness(0.7) sepia(0.15);
}

@media (max-width: 768px) {
    .landing-shows-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
    }
    .landing-shows-grid-label {
        font-size: 0.78rem;
        padding: 0.6rem;
    }
    .landing-img-full,
    .landing-img-atmospheric { max-height: 260px; }
    .landing-img-editorial { max-height: 280px; }
}