@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Montserrat:wght@600;700;800&family=Raleway:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ========== ANIMACIONES KEYFRAMES ========== */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(199, 92, 62, 0.3);
    }
    50% {
        box-shadow: 0 6px 20px rgba(199, 92, 62, 0.6);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}
@keyframes flotar {
    0% { transform: translate(-50%, -50%) translateY(0px); }
    50% { transform: translate(-50%, -50%) translateY(-15px); }
    100% { transform: translate(-50%, -50%) translateY(0px); }
}

/* Variables de Color */
:root {
    --color-primary: #c75c3e;
    --color-secondary: #8b5a3c;
    --color-accent: #d4a574;
    --color-light: #f5ede5;
    --color-dark: #2c2c2c;
    --color-text: #333;
}

/* Reset y Estilos Globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: #FFF;
    background-image: url(../images/fondo.webp);
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: auto;
    zoom: 0.75;
    padding-top: 120px;
    margin: 0;
    padding: 0;
}

/* Estilos globales para encabezados */
h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
}

.main-site-wrapper {
    
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    overflow: visible;
}
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    background-color: #EFDEB1;
    
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Contenedores específicos por sección */
.sponsors-container {
    max-width: 1200px;
    /*margin: 0 auto 30px auto;*/
    margin: 30px;
    padding: 15px 40px;
    width: 100%;
    overflow: hidden;   
    border-radius: 15px;
    border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    flex-direction: column;
    gap: 25px;
    background: #E5D1A6;

}

.page-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    background: #EFDEB1;
}

.promo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.maestros-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header y Navegación */
.header {
    background-color: #F3E8C7;
    padding: 10px 0;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 100;
    overflow: visible;
}

/* Clase que se activará con JS */
.header.scrolled {
    background: rgba(197, 194, 194, 0.9);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.header.scrolled .logo {
    width: 50px; /* Tamaño pequeño */
    height: 50px;
    top: 5px; /* Regresa a su posición alineada */
    border: 2px solid transparent; /* Quitamos el borde */
    box-shadow: none; /* Quitamos la sombra */
    transform: translateY(0);
}

/* El texto regresa a su posición normal */
.header.scrolled .festival-info {
    margin-left: 65px; /* 50px del logo + 15px espacio */
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: auto;
}

.logo-section {
    /*display: flex;
    align-items: center;
    gap: 15px;*/
    position: relative; /* Necesario para que el logo absoluto se posicione aquí */
    display: flex;
    align-items: center;
    /* Forzamos la altura original para que el header no crezca */
    height: 60px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

.logo {
    /*width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--color-primary);*/
    width: 85px; /* Aumentamos el tamaño (antes era 60px) */
    height: 85px;
    border-radius: 50%;
    background-color: var(--color-primary);
    
    /* MAGIA PARA QUE SOBRESALGA */
    position: absolute; /* Aquí está la magia: sale del flujo normal */
    top: -10px; /* Lo empujamos hacia abajo para que caiga sobre el banner */
    left: 0;
    z-index: 1100; /* Asegura que quede por encima del banner y otros elementos */
    
    /* ESTÉTICA DE MEDALLA */
    /* Estilo de medalla */
    border: 6px solid #F3E8C7;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Sombra para dar profundidad */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
}

/* 3. Empujamos el texto a la derecha porque el logo "flotante" ya no ocupa espacio físico */
.festival-info {
    margin-left: 115px; /* 100px del logo + 15px de espacio */
    transition: margin-left 0.4s ease;
    text-align: left;
}

.festival-info h1 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    text-align: left;
}

.festival-info p {
    font-size: 12px;
    color: var(--color-secondary);
    margin: 0;
    text-align: left;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
}

.navbar a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 5px;
}

.navbar a.navbar-reserva {
    color: white !important;
}

.navbar a:hover {
    color: var(--color-primary);
}

.navbar a.navbar-reserva:hover {
    color: white !important;
}

/* ========== SELECTOR DE IDIOMA ========== */

.language-switcher {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    position: absolute;
    right: -49px;
    top: 33%;
    /*transform: translateY(-50%);*/
    z-index: 99;
    transition: right 0.28s ease;
    overflow: visible;
    pointer-events: auto;
}

/* Contenedor que muestra la imagen de la bandera */

.language-switcher .flag-wrapper {
    width: auto;
    display: inline-flex;
    align-items: center;
    overflow: visible;
    cursor: pointer;
    position: relative;
    z-index: 1000;    
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.language-switcher img.header-lang-img {
    height: 30px;
    width: auto;
    display: block;
    object-fit: contain;
    /*transform: translateX(0);*/
   /* transition: transform 0.28s ease, filter 0.28s ease;*/
    background-color: transparent;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.language-switcher:hover .flag-wrapper {
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

.language-switcher:active .flag-wrapper {
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* Botón de idioma para móvil (oculto en desktop) */
.language-switcher-mobile {
    display: none !important;
}

/* Banner Principal */
.banner {
    background: #ECDBB3;
    background-image: url(../images/banner/banner.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-programa {
    background: #ECDBB3;
    background-image: url(../images/banner/banner-programa.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-historia {
    background: #ECDBB3;
    background-image: url(../images/banner/banner-historia.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-tienda {
    background: #ECDBB3;
    background-image: url(../images/banner/banner-tienda.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-academia {
     background: #ECDBB3;
    background-image: url(../images/banner/banner-academia.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-reserva {
     background: #ECDBB3;
    background-image: url(../images/banner/banner-reserva.webp);
    background-size: cover;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    height: 285px;
}

.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 1.1fr 1.9fr;
    gap: 0px;
    align-items: flex-start;
    box-sizing: border-box;
    
}

.banner-text {
    /*background: linear-gradient(135deg, rgba(212, 165, 116, 0.3) 0%, rgba(212, 165, 116, 0.1) 100%);*/
    padding: 20px;
    border-radius: 15px;
    align-items: flex-start;
    /*border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);*/
}

.banner-subtitle {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-secondary);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.banner-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.1;
    margin-bottom: 8px;
}

.banner-description {
    color: var(--color-text);
    margin-bottom: 15px;
    font-size: 15px;
    text-align: left;
}

/* Estilos específicos para el banner del index (blanco con sombra) */
.banner .banner-subtitle {
    color: var(--color-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner .banner-title {
    color: var(--color-text);
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.banner .banner-description {
    color: var(--color-text);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.btn-primary {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background-color: var(--color-secondary);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(199, 92, 62, 0.5);
}

.btn-primary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(199, 92, 62, 0.4);
}

.banner-link {
    margin-bottom: 0;
    font-size: 14px;
    text-align: left;
}

.banner-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid var(--color-primary);
    transition: all 0.3s ease;
}

.banner-link a:hover {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
}

.banner-visual {
    background: #EFDEB1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 265px;
    padding: 0 30px;
    overflow: hidden;
    z-index: -1;
}

.banner-visual h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--color-primary);
    margin: 0 0 10px 0;
    text-align: center;
}

.banner-visual p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--color-secondary);
    text-align: center;
    margin: 0;
}

.video-container {
    position: relative; /* Esencial para posicionar el botón sobre el video */
    width: 340px;
    height: 220px;  
    overflow: hidden; /* Asegura que nada se salga */
    border-radius: 3px; /* Si quieres bordes redondeados */
    z-index: 1;
    /*position: absolute;
    */
    /*animation: flotar 4s ease-in-out infinite;*/
}

.video-container video {
    width: 340px;
    height: 220px; 
    border-radius: 3px;
    display: block;
    /*box-shadow: 15px 15px rgba(0,0,0,0.2);*/
}

.video-controls-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 220px; 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; 
    visibility: hidden; /* Evita que se pueda hacer clic si no se ve */
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* Cuando el mouse entra al contenedor del video, mostramos el botón */
.video-container:hover .video-controls-overlay {
    opacity: 1;
    visibility: visible;
}

/* Opcional: Ocultar el overlay al pasar el mouse si el video está en Play */
.video-container:hover .video-controls-overlay.paused {
    background-color: transparent;
}
/* Si el video está reproduciéndose (clase .playing), solo se ve al hacer hover */
.video-controls-overlay.playing {
    opacity: 0;
}

.video-container:hover .video-controls-overlay.playing {
    opacity: 1;
}

/* Si el video está pausado (clase .paused), que se quede siempre visible */
.video-controls-overlay.paused {
    opacity: 1;
    visibility: visible;
    /*background-color: rgba(0, 0, 0, 0.2); /* Un fondo más suave para no tapar */
}

/* Estilos del botón de Play/Pause */
#playPauseBtn {
    background-color: rgba(255, 255, 255, 0.2); /* Fondo transparente blanco */
    border: 2px solid white;
    border-radius: 50%; /* Lo hace redondo */
    width: 40px; /* Tamaño del botón */
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

#playPauseBtn:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Más blanco al pasar el mouse */
    transform: scale(1.05); /* Ligeramente más grande al pasar el mouse */
}

/* Estilos para los iconos SVG */
#playPauseBtn svg {
    fill: white; /* Color del icono */
    width: 35px; /* Tamaño del icono */
    height: 35px;
    transition: opacity 0.3s ease;
}

/* Mostrar solo el icono de Play por defecto */
#playPauseBtn .icon-pause {
    display: none;
}

/* Cuando el botón está en estado "paused" (clase 'paused' en el overlay), mostramos el Play */
.video-controls-overlay.paused #playPauseBtn .icon-play {
    display: block;
}
.video-controls-overlay.paused #playPauseBtn .icon-pause {
    display: none;
}

/* Cuando el botón está en estado "playing" (clase 'playing' en el overlay), mostramos el Pause */
.video-controls-overlay.playing #playPauseBtn .icon-play {
    display: none;
}
.video-controls-overlay.playing #playPauseBtn .icon-pause {
    display: block;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 15px 15px 0;
    position: absolute;
    right: 0;
    top: 0;
}

.banner-image-container {
    width: 100%;
    height: 100%;
    display: flex; /* Para asegurar que la imagen llene el contenedor */
}

/* Wrapper para Programa y Bienvenida lado a lado */
.programa-bienvenida-wrapper {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    background-color: #E9D9B1;
    margin-bottom: 0;

}

.section-container-small {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: #E9D9B1;

}

/* Sección Bienvenida Extendida */
.bienvenida-extended {
    background-color: #E9D9B1;
    padding: 20px;
    text-align: left;
    border-radius: 10px;
}

.bienvenida-extended .section-title {
    font-size: 24px;
    text-align: left;
    line-height: 1.3;
    margin-bottom: 15px;
}

.bienvenida-extended .section-description {
    font-size: 13px;
    text-align: left;
    line-height: 1.5;
}

.section-description {
    font-size: 16px;
    color: var(--color-text);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-secondary {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    margin-top: 15px;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: right 0.5s ease;
}

.btn-secondary:hover::before {
    right: 100%;
}

.btn-secondary:hover {
    background-color: var(--color-secondary);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(199, 92, 62, 0.5);
}

.btn-secondary:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 3px 8px rgba(199, 92, 62, 0.4);
}



.navbar-reserva {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 18px !important;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    animation: subtlePulse 2s ease-in-out infinite;
}

.navbar-reserva:hover {
    background-color: var(--color-secondary);
    color: white;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 16px rgba(199, 92, 62, 0.4);
}

.navbar-reserva:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 3px 8px rgba(199, 92, 62, 0.4);
}


@keyframes subtlePulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(199, 92, 62, 0.3);
    }
    50% {
        box-shadow: 0 4px 16px rgba(199, 92, 62, 0.5);
    }
}

/* Sección Actividades */
.actividades {
    padding: 0;
    background-color: #E9D9B1;
    background: linear-gradient(135deg, #E9D9B1, rgba(212, 165, 116, 0.1) 100%);
    padding: 20px;
    border-radius: 15px;
    align-items: flex-start;
    border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 40px;
    text-align: center;
    
}

.actividades .section-title {
    font-size: 21px;
    text-align: left;
    margin-bottom: 15px;
}

.programa-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.programa-header .btn-link {
    margin-top: 0;
    white-space: nowrap;
}

.actividades-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.actividad-card {
    background-color: #F8E6C7;
    padding: 10px 8px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.actividad-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.actividad-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 24px rgba(199, 92, 62, 0.3);
}

.actividad-card:hover::after {
    opacity: 1;
}

.actividad-card:active {
    transform: translateY(-3px) scale(1.02);
}

.actividad-icon {
    font-size: 40px;
    margin-bottom: 15px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.actividad-icon-img {
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    object-fit: contain;
    position: relative;
    z-index: -1;
}

.actividad-card:hover .actividad-icon {
    transform: scale(1.3) rotate(10deg);
}

.actividad-card:hover .actividad-icon-img {
    transform: scale(1.3) rotate(10deg);
}

.actividad-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.2;
    text-align: center
}

.actividad-card p {
    color: var(--color-secondary);
    font-size: 11px;
}

/* ============================================================
   NUEVOS ESTILOS PARA LISTADO DE ACTIVIDADES (PROGRAMA)
   ============================================================ */

.actividad-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.actividad-item {
    display: flex;
    justify-content: space-between; /* Alinea actividad a la izquierda y hora a la derecha */
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #c75c3e; /* Línea punteada color teja (vintage) */
    transition: background 0.3s ease;
}

.actividad-item:hover {
    background: rgba(199, 92, 62, 0.05); /* Efecto sutil al pasar el mouse */
    padding-left: 5px;
}

.actividad-item:last-child {
    border-bottom: none;
}

.actividad-name {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #2c2c2c;
    flex: 1; /* Ocupa el espacio disponible */
    text-align: left;
    font-size: 1.05rem;
}

.actividad-time {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #c75c3e; /* Color naranja/teja de tu paleta */
    background: #fdfaf0; /* Color crema de fondo */
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #c75c3e;
    font-size: 0.9rem;
    white-space: nowrap; /* Evita que la hora se parta en dos líneas */
    margin-left: 15px;
}

.btn-link {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    position: relative;
    padding-bottom: 5px;
    white-space: nowrap;
}

.btn-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-link:hover {
    color: var(--color-secondary);
    transform: translateX(5px);
}

.btn-link:hover::after {
    transform: scaleX(1);
}

/* ========== SECCIÓN MAESTROS Y GUAGUANCÓ (LADO A LADO) ========== */
.maestros-guaguanco-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin: 0 auto;
    background-color: #EADCB3;
    padding: 0px 40px;
    max-width: 1200px;
    width: 100%;
    box-sizing: border-box;
}

/* ========== SECCIÓN MAESTROS ========== */
.maestros-section {
    padding: 0;
    background-color: transparent;
}

.maestros-section .maestros-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.maestros-content {
    display: flex;
    flex-direction: column;
}

.maestros-content .section-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-primary);
}

.maestros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
    justify-content: center;
}

.maestro-card {
    text-align: center;
    padding: 15px;
    background-color: #EADCB3;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.maestro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.maestro-card:hover {
    transform: translateY(-12px) scale(1.04);
}

.maestro-card:hover::before {
    opacity: 1;
}

.maestro-card:active {
    transform: translateY(-6px) scale(1.02);
}

/* Foto circular del maestro */
.maestro-foto {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-primary);
    margin: 0 auto 15px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    box-shadow: 0 14px 28px rgba(199, 92, 62, 0.3);
}

.maestro-card:hover .maestro-foto {
    transform: scale(1.15) rotate(-5deg);
    border-color: var(--color-secondary);
    box-shadow: 0 10px 25px rgba(199, 92, 62, 0.4);
}

.maestro-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-dark);
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}

.maestro-card p {
    text-align: center;
}

.maestro-especialidad  {
    font-family: 'Raleway', sans-serif;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

.separator-line {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, transparent, var(--accent-color), transparent);
    margin: 60px auto;
    width: 80%;
    opacity: 0.6;
}

/* Sección de Cursos */
.section-header {
    color: #c75c3e;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    text-align: center;
    margin-bottom: 40px;
}
.section-subtitle {
    color: #353434!important;
    font-size: 20px;
    text-align: center;
    font-style: italic;
    color: var(--primary-text);
    margin-bottom: 30px;
    opacity: 0.8;
}

/* Ajuste de la cuadrícula de cursos */
.courses-grid {
    display: grid;
    /* Cambiamos para que las columnas no se estiren infinitamente */
    grid-template-columns: repeat(auto-fit, minmax(250px, 320px)); 
    gap: 30px;
    justify-content: center; /* Centra las tarjetas en la pantalla */
    margin-top: 40px;
}

/* Ajuste del ancho de la tarjeta */
.course-card {
    background-color: #F3E8C7;
    max-width: 320px; /* Limitamos el ancho para que sea más estrecha */
    margin: 0 auto;   /* Asegura que estén centradas en su columna */
    padding: 25px 20px;
    border-radius: 12px;
    text-align: center;
    font-style: italic; /* Mantenemos la cursiva que pediste */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);*/
    cursor: pointer;
    overflow: hidden;
}

.course-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.course-card:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 24px rgba(199, 92, 62, 0.3);
}

.course-card:hover::after {
    opacity: 1;
}

.course-card:active {
    transform: translateY(-3px) scale(1.02);
}

.course-image {
    width: 100%;      /* Que ocupe todo el ancho disponible de la tarjeta estrecha */
    height: 160px;    /* Reducimos un poco la altura para mantener la proporción */
    border-radius: 8px;
    margin-bottom: 15px;
    background-size: cover;
    background-position: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

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

.course-card:hover .course-image,
.course-card:active .course-image {
    transform: scale(1.1) rotate(1deg);
    box-shadow: 0 8px 16px rgba(199, 92, 62, 0.25);
}

.course-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--color-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.course-card:hover .course-badge {
    transform: scale(1.1);
}

/* Colores representativos para las imágenes de los cursos */
.percussion-bg { background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://via.placeholder.com/300x200?text=Tambores'); }
.dance-bg { background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://via.placeholder.com/300x200?text=Baile'); }
.singing-bg { background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://via.placeholder.com/300x200?text=Canto'); }

.course-card h3 {
    margin: 10px 0;
    font-size: 1.4rem;
    color: var(--accent-color);
    text-align: center;
}

.course-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    height: 3rem; /* Limita el texto para uniformidad */
    text-align: center;
}

/* Contenedor del precio y botón */
.course-footer {
    display: flex;
    flex-direction: column; /* Alinea los elementos en vertical */
    align-items: center;    /* Centra los elementos */
    gap: 15px;              /* Espacio entre el precio y el botón */
    width: 100%;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0,0,0,0.1);
    
}

.course-price {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary-text);
    font-style: normal; /* El precio se lee mejor si no está en cursiva */
}

/* Estilo del Botón (Siempre visible) */
.btn-enroll {
    background-color: var(--accent-color);
    color: white !important; /* Asegura que el texto sea blanco */
    margin: 20px auto;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    width: 80%;
    max-width: 200px;
    opacity: 1 !important;    /* Forzamos a que sea totalmente visible siempre */
    visibility: visible !important; 
    transition: all 0.3s ease; /* Animación de color suave */
    background-color: #c75c3e;
}

/* Animación: cambio de color y tamaño sutil */
.btn-enroll:hover {
    background-color: #9c5535; /* Un tono más oscuro de terracota */
    transform: scale(1.05);    /* Crece un poquito al pasar el mouse */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ESTILOS DEL MODAL */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(3px);
}

.modal-content {
    background-color: #fdf6e3a2; /* Color crema suave */
    background-image: url('https://www.transparenttextures.com/patterns/felt.webp'); /* Textura vintage */
    margin: 5% auto;
    padding: 30px;
    border: 2px solid var(--accent-color);
    width: 90%;
    max-width: 500px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.close-modal {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: var(--accent-color);
}

.modal-header h2 {
    color: var(--accent-color);
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 1.5rem;
}

/* ESTILOS DEL FORMULARIO */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

label {
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--primary-text);
}

input, select, textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fffdf9;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px rgba(188, 108, 71, 0.2);
}

.btn-submit {
    width: 100%;
    background-color: var(--accent-color);
    color: var(--color-text);
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}

.btn-submit:hover {
    color: white;
    background-color: #9c5535;
}

/* ========== SECCIÓN PROMOCIÓN GUAGUANCÓ (SIDEBAR) ========== */
.guaguanco-promo-section-sidebar {
    padding: 0;
    background-color: transparent;
}

.guaguanco-promo-section-sidebar .promo-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

.guaguanco-promo-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background: linear-gradient(135deg, rgba(212, 165, 116, 0.3) 0%, rgba(212, 165, 116, 0.1) 100%);
    padding: 35px;
    border-radius: 15px;
    border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.guaguanco-promo-text {
    display: flex;
    flex-direction: column;
}

.guaguanco-promo-text .section-title {
    font-size: 28px;
    text-align: left;
    margin-bottom: 15px;
    color: var(--color-primary);
    line-height: 1.3;
}

.guaguanco-promo-text p {
    color: var(--color-text);
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 14px;
}

.guaguanco-promo-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guaguanco-promo-img {
    width: 100%;
    max-width: 220px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.guaguanco-promo-section-sidebar:hover .guaguanco-promo-img {
    transform: scale(1.12) rotate(3deg);
}

/* Responsive para layout maestros + guaguancó */
@media (max-width: 1024px) {
    .maestros-guaguanco-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 60px 30px;
        margin: 60px auto;
    }

    .maestros-content .section-title {
        font-size: 32px;
    }

    .guaguanco-promo-text .section-title {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .programa-bienvenida-wrapper {
        grid-template-columns: 1fr;
    }

    .actividades-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .actividad-card {
        padding: 8px 6px;
        background-color: #F8E6C7;
    }

    .actividad-icon-img {
        width: 80px;
        height: 80px;
        margin-bottom: 6px;
    }

    .actividad-card h3 {
        font-size: 12px;
        text-align: center;
        line-height: 1.3;
    }

    .actividad-card p {
        font-size: 10px;
    }

    /* Cursos Grid - 3 columnas en tablet */
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .course-card {
        max-width: 100%;
        padding: 15px 12px;
    }

    .course-image {
        height: 100px;
        margin-bottom: 10px;
    }

    .course-card h3 {
        margin: 8px 0;
        font-size: 1.05rem;
    }

    .course-card p {
        font-size: 0.85rem;
        height: auto;
    }

    .course-footer {
        margin-top: 10px;
        padding-top: 10px;
        gap: 10px;
    }

    .btn-enroll {
        margin: 10px auto;
        padding: 8px 16px;
        font-size: 0.85rem;
        width: 75%;
        max-width: 150px;
    }

    .course-badge {
        font-size: 0.65rem;
        top: 10px;
        right: 10px;
        padding: 4px 8px;
    }

    /* Animación de course-image en móvil */
    .course-card:focus-within .course-image {
        transform: scale(1.1) rotate(1deg);
        box-shadow: 0 8px 16px rgba(199, 92, 62, 0.25);
    }

    .maestros-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .maestro-foto {
        width: 100px;
        height: 100px;
        border: 3px solid var(--color-primary);
    }

    .maestro-card {
        padding: 12px;
    }

    .maestro-card h3 {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .maestro-especialidad {
        font-size: 10px;
    }

    .guaguanco-promo-content {
        padding: 25px;
        gap: 20px;
    }

    .guaguanco-promo-text .section-title {
        font-size: 20px;
    }

    .guaguanco-promo-text p {
        font-size: 13px;
    }
}

/* ========== SECCIÓN GALERÍA MULTIMEDIA (ANCHO COMPLETO) ========== */
.multimedia-gallery-section {
    padding: 20px 40px;
    background-color: #EDDDB4;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;

}

.gallery-full-width-container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.multimedia-gallery-section .section-title {
    font-size: 48px;
    text-align: center;
    margin-bottom: 50px;
    color: var(--color-primary);
}

/* Controles de pestañas para la galería */
.gallery-tabs-controls {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 40px;
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 20px;
    flex-wrap: wrap;
}

.gallery-tab-button {
    background: none;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-secondary);
    cursor: pointer;
    border-bottom: 4px solid transparent;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
}

.gallery-tab-button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.gallery-tab-button:hover {
    color: var(--color-primary);
    transform: translateY(-2px);
}

.gallery-tab-button:active {
    transform: translateY(0);
}

/* Contenido de pestañas */
.gallery-tab-content {
    display: none;
    animation: fadeInContent 0.5s ease;
}

.gallery-tab-content.active {
    display: block;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Grid de Masonry para la galería de fotos */
.gallery-masonry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    grid-auto-rows: 200px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-masonry-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: #EDDDB4;
}

/* Tamaños variados para el efecto masonry */
.gallery-masonry-item-large {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-masonry-item-medium {
    grid-column: span 2;
    grid-row: span 1;
}

.gallery-masonry-item-small {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery-masonry-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gallery-masonry-item:hover .gallery-masonry-image {
    transform: scale(1.12) rotate(2deg);
}

.gallery-masonry-item:hover {
    box-shadow: 0 12px 30px rgba(199, 92, 62, 0.4);
    transform: translateY(-8px);
}

.gallery-masonry-item:active {
    transform: translateY(-2px);
}

/* Mensaje "próximamente" */
.gallery-coming-soon {
    text-align: center;
    padding: 80px 20px;
    color: var(--color-secondary);
    font-size: 18px;
    font-weight: 500;
}

/* ========== NOTA: Estilos de .guaguanco-promo-section movidos a .guaguanco-promo-section-sidebar (línea 692) ========== */
/* Este selector antiguo ya no se usa. La sección Guaguancó ahora está dentro del wrapper lado a lado con Maestros */

/* Responsive para galería masonry */
@media (max-width: 768px) {
    .gallery-masonry-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: 150px;
        gap: 10px;
    }

    .gallery-masonry-item-large,
    .gallery-masonry-item-medium {
        grid-column: span 1;
        grid-row: span 1;
    }

    .guaguanco-promo-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }

    .multimedia-gallery-section .section-title {
        font-size: 32px;
    }
}

/* Sección Guaguancó (página interna) */

/* Lightbox Modal */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    animation: zoomIn 0.3s ease;
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: var(--color-accent);
}

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 15px;
    user-select: none;
    transition: color 0.3s ease;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover, .lightbox-next:hover {
    color: var(--color-accent);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Lightbox para galería de historia */
.lightbox-historia {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
    padding: 0;
    margin: 0;
}

.lightbox-historia.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-historia-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    animation: zoomIn 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-historia-img {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox-historia-close {
    position: absolute;
    top: 30px;
    right: 50px;
    font-size: 50px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 1001;
    line-height: 1;
}

.lightbox-historia-close:hover {
    color: var(--color-accent);
    transform: scale(1.2);
}

/* Footer */
.footer {
    background-color: #F2E6C6;
    box-shadow: 0px -2px 5px rgba(0,0,0,0.4);
    color: white;
    padding: 20px 20px 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    margin-top: 0;
}

.footer-grid {
    background-color: #F2E6C6;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h4 {
    background-color: #F2E6C6;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-secondary);
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 700;
}

.footer-section p {
    background-color: #F2E6C6;
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.6;
    text-align: left;
}

.footer-bottom {
    background-color: #F2E6C6;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.footer-bottom p {
    text-align: center;
}

/* ===== ESTILOS PARA SECCIÓN WHATSAPP EN FOOTER ===== */
.footer-whatsapp {
    background-color: #F2E6C6 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 !important;
}

.footer-whatsapp p {
    background-color: #F2E6C6 !important;
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    margin: 20px 0 5px 0;
}

.btn-whatsapp {
    background: var(--color-primary);
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    border: none;
    cursor: pointer;
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
    background: var(--color-secondary)
}

.btn-whatsapp:active {
    transform: translateY(0);
}

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

/* ===== ESTILOS PARA PÁGINAS INTERNAS ===== */

/* Page Header */
.page-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    
    

.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 10px;
    color: white;
}

.page-subtitle {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
    margin: 0;
    letter-spacing: 1px;
}

/* Page Content */
.page-content {
    
    padding-bottom: 20px;
    background-color: #fff;
    margin-bottom: 0 !important;
    
}

.content-block {
    margin-bottom: 60px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.content-block h2 {
    color: var(--color-primary);
    margin-bottom: 30px;
    font-size: 32px;
}

.content-block h3 {
    color: var(--color-secondary);
    margin-top: 20px;
    margin-bottom: 15px;
}

.content-block p {
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 15px;
}

.content-block ul {
    margin-left: 20px;
    color: var(--color-text);
    line-height: 1.8;
}

.content-block ul li {
    margin-bottom: 10px;
}

/* Two Columns */
.two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.column h3 {
    color: var(--color-primary);
    font-size: 24px;
}

.mission-list {
    list-style: none;
    padding-left: 0;
}

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

.mission-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.value-item {
    background-color: var(--color-light);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
}

.value-item h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.value-item p {
    font-size: 14px;
    color: var(--color-text);
}

/* Reasons List */
.reasons-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.reason-item {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.reason-item h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

/* Impact Stats */
.impact-section {
    background-color: var(--color-light);
    padding: 40px;
    border-radius: 10px;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 30px;
    text-align: center;
}

.impact-stat h3 {
    color: var(--color-primary);
    font-size: 36px;
    margin-bottom: 5px;
}

.impact-stat p {
    color: var(--color-secondary);
    font-size: 14px;
}

/* Program Items */
.program-item {
    background-color: var(--color-light);
    padding: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    border-left: 5px solid var(--color-primary);
}

.program-item h3 {
    color: var(--color-primary);
    margin-bottom: 5px;
    font-size: 24px;
}

.program-subtitle {
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 15px;
}

.program-details {
    color: var(--color-text);
    line-height: 1.8;
}

.program-details ul {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.program-details ul li {
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.program-details ul li:before {
    content: "▸";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.workshop-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.workshop-item {
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.workshop-item h4 {
    color: var(--color-primary);
    margin-bottom: 5px;
}

.workshop-item small {
    color: var(--color-secondary);
    display: block;
    margin-top: 10px;
}

/* Schedule Table */
.schedule-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.schedule-day {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    border-top: 4px solid var(--color-primary);
}

.schedule-day h4 {
    color: var(--color-primary);
    margin-bottom: 15px;
}

.schedule-day p {
    color: var(--color-text);
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Includes Grid */
.includes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.include-item {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.include-item h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.include-item p {
    font-size: 14px;
    color: var(--color-secondary);
}

/* Maestros Expandido */
.maestros-grid-expanded {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.maestro-detallado {
    background-color: var(--color-light);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.maestro-header {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 30px;
    padding: 30px;
    background: linear-gradient(135deg, var(--color-light) 0%, white 100%);
}

.maestro-foto-grande {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-primary);
}

.maestro-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.maestro-info h3 {
    color: var(--color-primary);
    margin-bottom: 5px;
    font-size: 24px;
}

.maestro-info .especialidad {
    color: var(--color-secondary);
    font-weight: 600;
    margin-bottom: 10px;
}

.maestro-info .nacionalidad {
    color: var(--color-text);
    font-size: 14px;
}

.maestro-body {
    padding: 30px;
    background-color: white;
    
}

.maestro-body h4 {
    color: var(--color-primary);
    margin-top: 20px;
    margin-bottom: 10px;
}

.maestro-body p {
    color: var(--color-text);
    line-height: 1.8;
}

.maestro-lista {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

.maestro-lista li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 8px;
    color: var(--color-text);
}

.maestro-lista li:before {
    content: "★";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.contact-maestro {
    margin-top: 20px;
    text-align: center;
}

.contact-maestro button {
    margin-top: 10px;
}

/* Artists Grid */
.artists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.artist-card {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid var(--color-accent);
}

.artist-card h4 {
    color: var(--color-primary);
    margin-bottom: 5px;
}

.artist-card p {
    color: var(--color-secondary);
    font-size: 13px;
}

/* Methodology Grid */
.methodology-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.method-item {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
}

.method-item h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.method-item p {
    color: var(--color-text);
    font-size: 14px;
}

/* Contact Info */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.contact-box {
    background-color: var(--color-light);
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    border-left: 4px solid var(--color-primary);
}

.contact-box h3 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.contact-box p {
    color: var(--color-text);
    font-size: 14px;
    margin-bottom: 5px;
}

.contact-box a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.contact-box a:hover {
    text-decoration: underline;
}

/* Contact Form */
.contact-form {
    max-width: 600px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(199, 92, 62, 0.3);
    transform: scale(1.01);
}

.form-group label input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}

/* FAQ List */
.faq-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.faq-item {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
}

.faq-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to left, rgba(199, 92, 62, 0.1), transparent);
    border-radius: 0 8px 8px 0;
    transition: width 0.4s ease;
}

.faq-item:hover {
    transform: translateX(10px);
    box-shadow: 0 6px 16px rgba(199, 92, 62, 0.2);
    border-left-color: var(--color-secondary);
}

.faq-item:hover::after {
    width: 4px;
}

.faq-item h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.faq-item p {
    color: var(--color-text);
    margin: 0;
}

/* Info Boxes */
.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.info-box {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid transparent;
}

.info-box:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 24px rgba(199, 92, 62, 0.25);
    border-color: var(--color-primary);
}

.info-box h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.info-box p {
    color: var(--color-text);
    font-size: 14px;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.cta-section h2 {
    color: white;
    margin-bottom: 10px;
    font-size: 36px;
}

.cta-section p {
    color: var(--color-accent);
    font-size: 16px;
    margin-bottom: 30px;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.pricing-card {
    background-color: white;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    cursor: pointer;
}

.pricing-card:hover {
    box-shadow: 0 15px 40px rgba(199, 92, 62, 0.25);
    transform: translateY(-10px) scale(1.02);
    border-color: var(--color-primary);
}

.pricing-card:active {
    transform: translateY(-3px) scale(1.01);
}

.pricing-card.featured {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, white 0%, var(--color-light) 100%);
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(199, 92, 62, 0.2);
}

.pricing-card.featured:hover {
    transform: scale(1.12) translateY(-10px);
    box-shadow: 0 20px 50px rgba(199, 92, 62, 0.3);
}

.pricing-card .badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    animation: slideInDown 0.6s ease-out 0.3s both;
}

.pricing-card h3 {
    color: var(--color-primary);
    margin-bottom: 5px;
    font-size: 22px;
    text-align: center;
}

.pricing-subtitle {
    color: var(--color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    
}

.price {
    margin: 20px 0;
    font-size: 24px;
}

.price .currency {
    color: var(--color-primary);
    font-weight: 600;
}

.price .amount {
    color: var(--color-primary);
    font-size: 36px;
    font-weight: 700;
}

.price .period {
    color: var(--color-secondary);
    font-size: 13px;
    display: block;
    margin-top: 5px;
}

.features-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 20px 0;
    font-size: 14px;
    color: var(--color-text);
}

.features-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.features-list li:last-child {
    border-bottom: none;
}

.btn-large {
    padding: 16px 40px;
    font-size: 18px;
}

/* Comparison Table */
.table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
}

.comparison-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: center;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.comparison-table th {
    font-weight: 600;
    font-size: 15px;
}

.comparison-table tbody tr:nth-child(odd) {
    background-color: var(--color-light);
}

.comparison-table tbody tr:hover {
    background-color: rgba(199, 92, 62, 0.15);
    transform: scale(1.01);
}

.comparison-table tbody tr:hover td {
    box-shadow: inset 0 0 10px rgba(199, 92, 62, 0.2);
}

/* Discounts Grid */
.discounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.discount-item {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 20px;
    border-radius: 5px;
}

.discount-item h4 {
    color: #856404;
    margin-bottom: 10px;
}

.discount-item p {
    color: #856404;
    font-size: 14px;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.info-item {
    background-color: var(--color-light);
    padding: 20px;
    border-radius: 8px;
}

.info-item h4 {
    color: var(--color-primary);
    margin-bottom: 10px;
}

.info-item p {
    color: var(--color-text);
    font-size: 14px;
}

/* CTA Final */
.cta-final {
    background: linear-gradient(135deg, var(--color-light) 0%, white 100%);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid var(--color-accent);
}

.cta-final h2 {
    color: var(--color-primary);
}

/* Link Active */
.navbar a.active {
    color: var(--color-primary);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 3px;
}

/* Responsive */
@media (max-width: 1024px) {
    .header-container,
    .banner-content,
    .gallery-full-width-container {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .banner-content,
    .guaguanco-layout,
    .two-columns,
    .maestro-header {
        grid-template-columns: 1fr;
    }

    .header-container {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }

    .navbar ul {
        flex-direction: column;
        gap: 10px;
    }

    .banner-title {
        font-size: 32px;
    }

    .banner-content,
    .gallery-full-width-container {
        padding: 0 20px;
    }

    .galeria-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .page-header h1 {
        font-size: 32px;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .comparison-table {
        font-size: 12px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 10px;
    }
}

/* ========== ESTILOS PÁGINA GUAGUANCÓ ========== */

/* Timeline Histórico */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-primary), var(--color-accent));
}

.timeline-item {
    position: relative;
    padding-left: 30px;
    background-color: rgba(212, 165, 116, 0.2);
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 25px;
    width: 14px;
    height: 14px;
    background-color: white;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
}

.timeline-item h3 {
    font-size: 20px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.timeline-item p {
    color: var(--color-text);
    line-height: 1.6;
}

/* Grid de Instrumentos */
.instrumentos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.instrumento-item {
    background: linear-gradient(135deg, rgba(199, 92, 62, 0.1) 0%, rgba(212, 165, 116, 0.1) 100%);
    padding: 25px;
    border-radius: 10px;
    border-left: 4px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.instrumento-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(199, 92, 62, 0.2);
}

.instrumento-item h4 {
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.instrumento-item p {
    color: var(--color-text);
    line-height: 1.6;
    font-size: 14px;
}

/* Grid de Variantes */
.variantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

.variante-card {
    background: linear-gradient(135deg, #F8E6C7 0%, #F0D9B5 100%);
    padding: 30px;
    border-radius: 12px;
    border: 2px solid rgba(199, 92, 62, 0.2);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.variante-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 25px rgba(199, 92, 62, 0.3);
    border-color: var(--color-primary);
}

.variante-card h3 {
    font-size: 22px;
    color: var(--color-primary);
    margin-bottom: 15px;
    text-align: center;
}

.variante-card p {
    color: var(--color-text);
    line-height: 1.7;
    font-size: 14px;
    text-align: center;
}

/* ========== PÁGINA DE ENTRADAS Y RESERVAS ========== */

/* ========== HERO SECTION ========== */
.entradas-hero {
    background: linear-gradient(180deg, #ECDBB3 0%, #f5ede5 100%);
    padding: 50px 40px;
    position: relative;
}

.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.hero-block {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.hero-label {
    font-family: 'Raleway', sans-serif;
    font-size: 10px;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    font-weight: 600;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--color-text);
    margin-bottom: 12px;
    line-height: 1.2;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

.hero-block .btn-secondary {
    display: inline-block;
    padding: 8px 18px;
    font-size: 11px;
}

.hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #d4a574 0%, #c75c3e 100%);
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========== ENTRADAS SECTION ========== */
.entradas-section {
    background: #ECDBB3;
    padding: 50px 40px;
}

.entradas-wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.entradas-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

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

/* ========== ENTRADA CARD ========== */
.entrada-card {
    background: white;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.entrada-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.entrada-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entrada-icon svg {
    width: 55px;
    height: 55px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.entrada-icon.general {
    background: linear-gradient(135deg, #5eb3a6 0%, #4a9a8e 100%);
}

.entrada-icon.taller {
    background: linear-gradient(135deg, #c75c3e 0%, #a84a2f 100%);
}

.entrada-icon.vip {
    background: linear-gradient(135deg, #5eb3a6 0%, #4a9a8e 100%);
}

.entrada-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--color-text);
    margin: 10px 0 10px 0;
    font-weight: 700;
}

.entrada-description {
    color: #777;
    font-size: 12px;
    line-height: 1.4;
    margin-bottom: 15px;
    min-height: auto;
}

.entrada-precio {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    color: var(--color-primary);
    margin: 12px 0;
    font-weight: 700;
}

.btn-reservar {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-reservar:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

/* Selector de Entradas (clase antigua, mantenida para compatibilidad) */
.entradas-selector {
    display: none;
}

.selector-title {
    display: none;
}

.entradas-grid {
    display: none;
}

/* ========== MÉTODOS DE PAGO ========== */
.metodos-pago {
    background: linear-gradient(90deg, #d4a574 0%, #c8945e 100%);
    padding: 30px 40px;
    margin: 0;
}

.pago-methods-bar {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.pago-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #2c2c2c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
}

.pago-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.pago-icon-item {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c2c2c;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.pago-icon-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.pago-icon-item svg {
    width: 22px;
    height: 22px;
}

.pago-botones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pago-btn {
    background: #2c2c2c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pago-btn:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

/* ========== INFORMACIÓN ADICIONAL ========== */
.entradas-info {
    padding: 50px 40px;
    background: #fff;
}

.info-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.info-column h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--color-text);
    margin-bottom: 12px;
}

.info-column p {
    color: #666;
    line-height: 1.6;
    font-size: 13px;
}

.contacto-rapido {
    background: linear-gradient(135deg, #ECDBB3 0%, #f5ede5 100%);
    padding: 35px;
    border-radius: 8px;
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

.contacto-rapido h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--color-text);
    margin-bottom: 10px;
    text-align: left;
}

.contacto-rapido p {
    font-size: 14px;
    color: #666;
    text-align: left;
    margin-bottom: 8px;
}

.contacto-rapido a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contacto-rapido a:hover {
    color: var(--color-secondary);
}

.mapa-contacto {
    width: 100%;
    height: 250px;
    background: linear-gradient(135deg, #d4a574 0%, #c75c3e 100%);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mapa-contacto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Información Adicional comentada (preservada) */
.pago-info {
    display: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .pago-methods-bar {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .pago-icons {
        width: 100%;
    }

    .pago-botones {
        justify-content: center;
        width: 100%;
    }

    .info-columns {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .entradas-hero {
        padding: 35px 20px;
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .entradas-section {
        padding: 40px 20px;
    }

    .entradas-title {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .info-columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contacto-rapido {
        grid-template-columns: 1fr;
    }

    .pago-methods-bar {
        gap: 20px;
    }

    .pago-icons {
        gap: 10px;
    }

    .pago-icon-item {
        width: 40px;
        height: 40px;
    }

    .pago-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .actividades-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .actividad-card {
        padding: 6px 4px;
        background-color: #F8E6C7;
    }

    .actividad-icon-img {
        width: 60px;
        height: 60px;
        margin-bottom: 4px;
    }

    .actividad-card h3 {
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    .actividad-card p {
        font-size: 9px;
    }

    .entradas-hero {
        padding: 30px 15px;
    }

    .hero-content {
        gap: 20px;
    }

    .hero-block {
        padding: 20px;
    }

    .hero-title {
        font-size: 22px;
    }

    .entradas-section {
        padding: 30px 15px;
    }

    .entradas-title {
        font-size: 26px;
        margin-bottom: 30px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .entrada-icon {
        width: 80px;
        height: 80px;
    }

    .entrada-icon svg {
        width: 50px;
        height: 50px;
    }

    .entrada-card {
        padding: 20px 15px;
    }

    .entrada-card h3 {
        font-size: 16px;
    }

    .entrada-precio {
        font-size: 20px;
    }

    .btn-reservar {
        padding: 7px 16px;
        font-size: 9px;
    }

    .pago-methods-bar {
        flex-direction: column;
        gap: 15px;
    }

    .pago-label {
        font-size: 11px;
    }

    .pago-icons {
        gap: 6px;
        width: 100%;
        flex-wrap: wrap;
    }

    .pago-icon-item {
        width: 35px;
        height: 35px;
    }

    .pago-icon-item svg {
        width: 18px;
        height: 18px;
    }

    .pago-botones {
        width: 100%;
        justify-content: center;
    }

    .pago-btn {
        padding: 5px 10px;
        font-size: 9px;
    }

    .info-columns {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .info-column h3 {
        font-size: 18px;
    }

    .info-column p {
        font-size: 12px;
    }

    .contacto-rapido {
        padding: 25px;
    }

    .mapa-contacto {
        height: 200px;
    }
}
        justify-content: center;
    }

    .info-columns {
        gap: 20px;
    }

    .contacto-rapido {
        padding: 25px;
    }


/* ========== ESTILOS PARA PÁGINA DE RESERVAS ========== */



/* Reserva Title Section */
.reserva-title-section {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 60px;
}

.reserva-title-section h2 {
    font-size: 42px;
    color: var(--color-dark);
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reserva-title-section p {
    font-size: 16px;
    color: #777;
    max-width: 600px;
    margin: 0 auto;
}

/* Payment Methods Section */
.payment-methods-section {
    background: linear-gradient(135deg, #d4a574 0%, #c9956b 100%);
    padding: 40px;
    border-radius: 8px;
    margin: 80px 0;
    text-align: center;
}

.payment-methods-section h3 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.payment-icons-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.payment-icon-item {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: all 0.2s ease;
}

.payment-icon-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-retro-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 40px 20px;
        margin-bottom: 40px;
    }

    .hero-retro-text h2 {
        font-size: 32px;
    }

    .hero-retro-illustration {
        height: 250px;
    }

    .illustration-icon {
        font-size: 70px;
    }

    .reserva-title-section h2 {
        font-size: 32px;
    }

    .payment-icons-grid {
        gap: 15px;
    }

    .payment-icon-item {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Contenedor de Tarjetas de Precios */
.pricing-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
    align-items: stretch;
}

.pricing-card {
    background-color: white;
    border: none;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: space-between;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.pricing-card:hover {
    box-shadow: 0 15px 40px rgba(199, 92, 62, 0.25);
    transform: translateY(-10px) scale(1.02);
}

/* Colores de planes */
.pricing-card.basic-plan {
    background-color: #1a9999;
    color: white;
}

.pricing-card.full-plan {
    background-color: #e07533;
    color: white;
}

.pricing-card.vip-plan {
    background-color: #1a9999;
    color: white;
}

.pricing-card.featured {
    border: none;
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(224, 117, 51, 0.3);
}

.pricing-card.featured:hover {
    transform: scale(1.1) translateY(-10px);
    box-shadow: 0 20px 50px rgba(224, 117, 51, 0.4);
}

.featured-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #e07533 0%, #d65a1e 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(224, 117, 51, 0.3);
}

.plan-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.pricing-card h3 {
    color: inherit;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 700;
}

.pricing-card p li {
    text-align: center;
}

.plan-description {
    color: inherit;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.95;
    text-align: center;
}

.linea-decorativa {
    width: 90%;
    height: 3px;
    margin: 30px auto;
    background: linear-gradient(to right, transparent, #29c79f, transparent);
    border-radius: 50%; /* Le da un toque orgánico */
}

.plan-features-simple {
    list-style: none;
    padding: 0;
    margin: 18px 0;
    margin-bottom: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    color: inherit;
    text-align: center;
}

.plan-features-simple li {
    padding: 5px 0;
    border: none;
}

.pricing-btn {
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    background-color: #f5e6d3;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
    align-self: center;
    width: 100%;
    max-width: 180px;
}

.pricing-btn:hover {
    background-color: #e8d4b8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pricing-btn-featured {
    background-color: #f5e6d3;
    color: #333;
}

/* Tabla Comparativa */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin: 25px 0;
}

.comparison-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
}

.comparison-table th {
    padding: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-table td {
    padding: 18px;
    text-align: center;
    border: 1px solid #e8e8e8;
    font-size: 14px;
    color: var(--color-text);
}

.comparison-table tbody tr:nth-child(odd) {
    background-color: var(--color-light);
}

.comparison-table tbody tr:hover {
    background-color: rgba(199, 92, 62, 0.1);
}

.comparison-table tbody tr td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-primary);
}

/* Info Boxes */
.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.info-box {
    background: linear-gradient(135deg, white 0%, var(--color-light) 100%);
    border-left: 4px solid var(--color-primary);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(199, 92, 62, 0.15);
}

.info-box h3 {
    color: var(--color-primary);
    margin-bottom: 12px;
    font-size: 18px;
}

.info-box p {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.faq-item {
    background-color: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 25px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 15px rgba(199, 92, 62, 0.15);
    transform: translateY(-3px);
}

.faq-item h4 {
    color: var(--color-primary);
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}

.faq-item p {
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    padding: 50px 30px;
    border-radius: 12px;
    text-align: center;
    margin-top: 50px;
}

.cta-section h2 {
    color: white;
    margin-bottom: 15px;
    font-size: 36px;
}

.cta-section p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 700;
    background-color: white;
    color: var(--color-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
    background-color: var(--color-light);
}

/* Responsive */
@media (max-width: 1024px) {
    .pricing-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-card.featured {
        transform: scale(1.02);
    }
    
    .pricing-card.featured:hover {
        transform: scale(1.05) translateY(-10px);
    }
}

@media (max-width: 768px) {
    .pricing-cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .pricing-card {
        padding: 25px 20px;
    }
    
    .pricing-price {
        font-size: 36px;
    }
    
    .comparison-table {
        font-size: 12px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px;
    }
    
    .info-boxes {
        grid-template-columns: 1fr;
    }
    
    .faq-section {
        grid-template-columns: 1fr;
    }
    
    .cta-section {
        padding: 40px 20px;
    }
    
    .cta-section h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .pricing-cards-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 0 5px;
    }
    
    .pricing-card {
        padding: 12px 6px;
    }
    
    .plan-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }
    
    .pricing-card h3 {
        font-size: 14px;
        margin-bottom: 8px;
    }
    
    .plan-description {
        font-size: 11px;
        line-height: 1.3;
        margin-bottom: 10px;
    }
    
    .linea-decorativa {
        margin: 10px auto;
        height: 2px;
    }
    
    .plan-features-simple {
        margin: 8px 0;
        margin-bottom: 12px;
        gap: 4px;
        font-size: 10px;
    }
    
    .plan-features-simple li {
        padding: 2px 0;
    }
    
    .pricing-btn {
        padding: 8px 12px;
        font-size: 10px;
        max-width: 130px;
    }
    
    .pricing-card.featured {
        transform: scale(1);
    }
    
    .pricing-card.featured:hover {
        transform: scale(1.02) translateY(-5px);
    }
    
    .page-content-container {
        padding: 0 10px;
    }
    
    .info-boxes {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .info-box {
        padding: 15px 10px;
    }
    
    .faq-section {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .faq-item {
        padding: 15px 10px;
    }
}

/* ========== SECCIÓN DE PATROCINADORES ========== */

.sponsors-section {
    background: #EFDEB1;
    max-width: 1200px;
    max-width: 100%;
    padding: 0;
    margin: 0;
    margin-top: -2px;
    border-top: 2px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.sponsors-section h2 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 40px;
    font-size: 32px;
    font-weight: 700;
}

.sponsors-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sponsors-carousel {
    display: flex;
    gap: 40px;
    animation: scrollSponsors 30s linear infinite;
    width: max-content;
    margin-bottom: 20px;
}

@keyframes scrollSponsors {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.sponsors-carousel:hover {
    animation-play-state: paused;
}

.sponsor-logo {
    min-width: 150px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    filter: grayscale(100%);
    opacity: 0.7;
}

.sponsor-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 15px rgba(199, 92, 62, 0.6));
}

.sponsor-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .sponsors-section {
        padding: 40px 0;
    }
    
    .sponsors-section h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .sponsor-logo {
        min-width: 120px;
        height: 60px;
    }
    
    .sponsors-carousel {
        gap: 30px;
        animation: scrollSponsors 20s linear infinite;
    }
}

/* ========== SOCIAL MEDIA LINKS ========== */
.social-media-links {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /*background-color: rgba(212, 165, 116, 0.1);*/
    transition: all 0.3s ease;
    cursor: pointer;
}

.social-icon:hover {
    background-color: rgba(212, 165, 116, 0.3);
    transform: translateY(-3px);
}

.social-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
}

/* ========== FOOTER MAP ========== */
.footer-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.footer-map-image {
    width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.footer-map-image:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    .social-media-links {
        gap: 12px;
    }
    
    .social-icon {
        width: 60px;
        height: 60px;
    }
    
    .social-logo {
        width: 28px;
        height: 28px;
    }
    
    .footer-map-image {
        min-height: 280px;
        max-height: 350px;
    }
}

/* ========== ESTILOS VINTAGE/RETRO PARA PROGRAMA ========== */

/* Fondo vintage con textura de papel envejecido */
.vintage-section {
    background: #EFDEB1;
    background-attachment: fixed;
    position: relative;
    padding: 0px 0;
    overflow: hidden;
}

.vintage-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(150, 130, 100, 0.03) 2px,
            rgba(150, 130, 100, 0.03) 4px
        ),
        radial-gradient(ellipse at 20% 50%, rgba(200, 100, 0, 0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 100, 120, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.vintage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    position: relative;
    z-index: 1;
}

/* Título Principal */
.vintage-title-block {
    margin-bottom: 50px;
    padding-left: 20px;
    border-left: 4px solid #c97a5f;
}

.vintage-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #4a4a4a;
    margin: 0;
    text-transform: none;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Grid Principal */
.vintage-main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Grid Principal 3 Columnas */
.vintage-main-grid-3 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Sección de Tarjetas */
.vintage-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* Sección de Tarjetas 3 Columnas */
.vintage-cards-grid-3 {
    display: grid;
   /*grid-template-columns: 1fr;*/
  grid-template-columns: repeat(3, 1fr);
   
    gap: 25px;
    width: 100%;
    max-width: 1000px;
}

/* Tarjetas Vintage */
.vintage-card {
    background: #F2E8C8;
    border: 2px solid #d4c4b0;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: 5px solid #c75c3e;
}

.vintage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(200, 150, 100, 0.02) 2px,
            rgba(200, 150, 100, 0.02) 4px
        );
    pointer-events: none;
}

.vintage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-color: #c97a5f;
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #4a4a4a;
    margin: 0 0 15px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #d4a574;
    position: relative;
    z-index: 1;
}

.card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.day-title {
    margin-bottom: 15px;
    border-bottom: 2px solid #c75c3e;
    display: inline-block;
    padding-bottom: 5px;
}

.card-list li {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.list-icon {
    position: absolute;
    left: 0;
    color: #a78a6f;
    font-weight: bold;
    font-size: 16px;
}

/* Sección Derecha */
.vintage-right-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Grupo de Iconos */
.vintage-icons-group {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.icon-pair {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.vintage-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border: 4px solid;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.vintage-icon.terracotta {
    background: linear-gradient(135deg, #d4845f 0%, #c97a5f 100%);
    border-color: #a85f45;
    color: white;
}

.vintage-icon.teal {
    background: linear-gradient(135deg, #6b9ca8 0%, #5a8896 100%);
    border-color: #4a6876;
    color: white;
}

.vintage-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.icon-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    margin: 0;
    padding-top: 5px;
    align-self: center;
}

/* Botón Pequeño */
.vintage-btn-small {
    background: #c97a5f;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(201, 122, 95, 0.3);
}

.vintage-btn-small:hover {
    background: #b56a4f;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(201, 122, 95, 0.4);
}

/* Banner CTA Inferior */
.vintage-cta-banner {
    /*background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);*/
    background: #EFDEB1;
    /*background-image: 
        linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );*/
    padding: 15px 0px 30px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vintage-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(ellipse at 20% 50%, rgba(201, 122, 95, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(107, 156, 168, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.cta-content {
    display: flex;
    flex-direction: column; /* Alinea los elementos uno debajo del otro */
    align-items: center;    /* Centra horizontalmente el contenido */
    text-align: center;
    background-color: #fdfaf0; /* Color crema de la imagen de referencia */
    /*border-radius: 12px;*/
    max-width: 650px;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 5px solid #2B333E;
   /* max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 40px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    background-image: 
        linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );*/
}

/* NUEVO: Bloque superior para el texto */
.cta-text-container {
    background-image: url(../images/fondo-boton-programa.webp);
    width: 100%;
    padding: 5px 10px;
    border-bottom: 2px solid #000000; /* Separación negra */
}

/* Bloque inferior para el botón */
.cta-button-container {
    background: #EFDEB1;
    width: 100%;
    padding: 20px 20px;
    display: flex;
    justify-content: center;
}

.vintage-cta-banner h2 {
    font-size: px;
    font-weight: 800;
    color: white;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Botón CTA */
.vintage-btn-cta {
    background: linear-gradient(135deg, #d4845f 0%, #c97a5f 100%);
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(201, 122, 95, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.vintage-btn-cta:hover {
    background: linear-gradient(135deg, #c97a5f 0%, #b5704f 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(201, 122, 95, 0.5);
}

.vintage-btn-cta:active {
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
    .vintage-main-grid {
        grid-template-columns: 1fr;
    }

    .vintage-cards-grid {
        grid-template-columns: 1fr;
    }

    .vintage-cards-grid-3 {
        grid-template-columns: 1fr;
    }

    .vintage-title {
        font-size: 32px;
    }

    .vintage-cta-banner h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .vintage-container {
        padding: 20px;
    }
}
/* ========== ESTILOS RETRO MID-CENTURY PARA P�GINA HISTORIA ========== */

.nota-importante {
    background-color: #FCF8F3;
    border: 1px solid #D4A574;
    border-radius: 12px;
    padding: 24px;
}

.nota-importante h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #2d2d2d;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nota-importante p {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.nota-boton {
    background-color: #C75C3E;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nota-boton:hover {
    background-color: #B5704F;
}

.retro-banner-cierre {
    background-color: #1a1a1a;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    padding: 70px 40px;
    text-align: center;
    filter: contrast(110%) brightness(95%);
}

.retro-banner-contenido {
    max-width: 800px;
    margin: 0 auto;
}

.retro-banner-cierre h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 900;
    color: white;
    margin: 0 0 16px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.retro-banner-cierre p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.boton-retro-grande {
    background-color: #C75C3E;
    color: white;
    border: none;
    padding: 18px 60px;
    border-radius: 30px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 6px 20px rgba(199, 92, 62, 0.4);
}

.boton-retro-grande:hover {
    background-color: #B5704F;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .retro-historia-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cronologia-columna {
        grid-template-columns: repeat(2, 1fr);
    }
    .retro-historia-titulo {
        font-size: 42px;
    }
}

@media (max-width: 768px) {
    .retro-historia-section {
        padding: 50px 20px;
    }
    .retro-historia-titulo {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .retro-historia-grid {
        gap: 30px;
    }
    .cronologia-columna {
        grid-template-columns: 1fr;
    }
    .tarjeta-cronologia {
        padding: 18px;
    }
    .tarjeta-titulo {
        font-size: 12px;
    }
    .puntos-cronologia li {
        font-size: 11px;
    }
    .iconos-circulares {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
    }
    .icono-circular {
        width: 80px;
        height: 80px;
        font-size: 36px;
    }
    .retro-banner-cierre {
        padding: 50px 20px;
    }
    .retro-banner-cierre h3 {
        font-size: 32px;
    }
    .retro-banner-cierre p {
        font-size: 14px;
    }
    .boton-retro-grande {
        padding: 14px 40px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .retro-historia-titulo {
        font-size: 26px;
        margin-bottom: 30px;
    }
    .tarjeta-cronologia {
        padding: 15px;
    }
    .tarjeta-titulo {
        font-size: 11px;
    }
    .puntos-cronologia li {
        font-size: 10px;
        margin-bottom: 7px;
    }
    .iconos-circulares {
        flex-direction: row;
        justify-content: center;
    }
    .icono-circular {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
    .nota-importante {
        padding: 15px;
    }
    .nota-importante h4 {
        font-size: 12px;
    }
    .nota-importante p {
        font-size: 12px;
    }
    .retro-banner-cierre h3 {
        font-size: 24px;
    }
    .retro-banner-cierre p {
        font-size: 13px;
    }
    .boton-retro-grande {
        padding: 12px 30px;
        font-size: 12px;
    }
}

/* ========== ESTILOS GUARDIANES DE LA CLAVE - P�GINA MAESTROS ========== */

.guardianes-section {
    background-color: #ECDBB3;
    background-image: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(194, 78, 49, 0.02) 2px,
            rgba(194, 78, 49, 0.02) 5px
        ),
        radial-gradient(circle at 2% 50%, rgba(194, 78, 49, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 98% 50%, rgba(194, 78, 49, 0.03) 0%, transparent 50%);
    padding: 90px 40px;
    position: relative;
    overflow: hidden;
}

.guardianes-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(194, 78, 49, 0.04) 10px,
        rgba(194, 78, 49, 0.04) 12px
    );
    opacity: 0.5;
}

.guardianes-section::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(194, 78, 49, 0.04) 10px,
        rgba(194, 78, 49, 0.04) 12px
    );
    opacity: 0.5;
}

.guardianes-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.guardianes-titulo {
    color: #c75c3e;
    font-family: 'Montserrat', serif;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -1px;
    text-align: center;
    margin: 0 0 20px 0;
    line-height: 1.1;
}

.guardianes-subtitulo {
    font-style: italic;
    font-size: 20px;
    color: #353434;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 70px;
    line-height: 1.7;
    font-weight: bold;
}

.maestros-circulares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-bottom: 80px;
}

.maestro-circular {
    text-align: center;
    transition: transform 0.3s ease;
}

.maestro-circular:hover {
    transform: translateY(-8px); 
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.15);
    filter: drop-shadow(0 0 15px rgba(199, 92, 62, 0.6)); 
}

.maestro-retrato {
    width: 240px;
    height: 240px;
    margin: 0 auto 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #C24E31;
    background-color: #f0f0f0;
    box-shadow: 0 8px 24px rgba(194, 78, 49, 0.2);
    filter: grayscale(100%) contrast(1.1);
    /*transition: filter 0.4s ease;*/
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.maestro-retrato:hover {
    filter: grayscale(0%) contrast(1.1);
    transform: scale(1.15) rotate(-5deg);
}

.maestro-retrato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.maestro-nombre {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
    text-align: center;
}

.maestro-apodo {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #C24E31;
    margin: 0 0 18px 0;
    font-style: italic;
    font-weight: 600;
    text-align: center;
}

.maestro-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #5a5a5a;
    margin: 0 0 22px 0;
    line-height: 1.7;
    text-align: center;
}

.maestro-especialidades {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.especialidad-tag {
    background-color: #C24E31;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-block;
}

.guardianes-cta {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}

.btn-entrenar {
    background-color: #C24E31;
    color: white;
    border: none;
    padding: 22px 80px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(194, 78, 49, 0.3);
}

.btn-entrenar:hover {
    background-color: #a84028;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(194, 78, 49, 0.4);
}

.btn-entrenar:active {
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 1024px) {
    .maestros-circulares {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .guardianes-titulo {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .guardianes-section {
        padding: 60px 20px;
    }

    .guardianes-titulo {
        font-size: 36px;
        margin-bottom: 16px;
    }

    .guardianes-subtitulo {
        font-style: italic;
        font-size: 14px;
        margin-bottom: 50px;
    }

    .maestros-circulares {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .maestro-retrato {
        width: 140px;
        height: 140px;
        border: 3px solid #C24E31;
        margin: 0 auto 18px;
    }

    .maestro-nombre {
        font-size: 16px;
        margin: 0 0 5px 0;
    }

    .maestro-apodo {
        font-size: 13px;
        margin: 0 0 10px 0;
    }

    .maestro-descripcion {
        font-size: 13px;
        margin: 0 0 12px 0;
        line-height: 1.5;
    }

    .maestro-especialidades {
        gap: 6px;
    }

    .especialidad-tag {
        font-size: 10px;
        padding: 5px 10px;
    }

    .btn-entrenar {
        padding: 18px 50px;
        font-size: 14px;
    }

    .guardianes-section::before,
    .guardianes-section::after {
        width: 40px;
    }
}

@media (max-width: 480px) {
    /* Maestros Grid - 3 columnas en móvil */
    .maestros-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .maestro-card {
        padding: 6px;
    }

    .maestro-foto {
        width: 80px;
        height: 80px;
        border: 2px solid var(--color-primary);
        margin: 0 auto 8px;
    }

    .maestro-card h3 {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .maestro-especialidad {
        font-size: 8px;
        line-height: 1.2;
    }

    /* Guardianes section para 480px */
    .guardianes-section {
        padding: 20px 10px;
    }

    .guardianes-titulo {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .guardianes-subtitulo {
        font-size: 13px;
        margin-bottom: 40px;
    }

    .maestros-circulares {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .maestro-retrato {
        width: 125px;
        height: 125px;
        border-width: 3px;
        margin: 0 auto 12px;
    }

    .maestro-nombre {
        font-size: 14px;
        margin: 0 0 3px 0;
    }

    .maestro-apodo {
        font-size: 11px;
        margin: 0 0 7px 0;
    }

    .maestro-descripcion {
        font-size: 12px;
        margin: 0 0 10px 0;
        line-height: 1.4;
    }

    .maestro-especialidades {
        gap: 4px;
    }

    .especialidad-tag {
        font-size: 9px;
        padding: 4px 8px;
    }

    .btn-entrenar {
        padding: 16px 40px;
        font-size: 13px;
    }

    .guardianes-section::before,
    .guardianes-section::after {
        display: none;
    }

    /* Cursos Grid - 3 columnas en móvil */
    .courses-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .course-card {
        max-width: 100%;
        padding: 12px 8px;
    }

    .course-image {
        height: 70px;
        margin-bottom: 8px;
    }

    .course-card h3 {
        margin: 6px 0;
        font-size: 0.95rem;
        line-height: 1.2;
    }

    .course-card p {
        font-size: 0.8rem;
        height: auto;
        line-height: 1.3;
    }

    .course-footer {
        margin-top: 8px;
        padding-top: 8px;
        gap: 8px;
    }

    .btn-enroll {
        margin: 8px auto;
        padding: 6px 12px;
        font-size: 0.85rem;
        width: 70%;
        max-width: 120px;
    }

    .course-badge {
        font-size: 0.7rem;
        top: 8px;
        right: 8px;
        padding: 3px 6px;
    }
}

/* ========== ESTILOS TIENDA VINTAGE RETRO ========== */

.tienda-vintage-section {
    background-color: #EFDEB1;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
        );
    padding: 40px 40px;
    position: relative;
}

.tienda-vintage-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* SECCI�N 1: HERO CON PRODUCTOS R�PIDOS */
.tienda-hero {
    margin-bottom: 100px;
}

.hero-grid-categorias {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background-color: #E5D2AA;
    border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 10px 20px 20px 20px;
}

.categoria-bloque {
    background-color: #E5D2AA;
    border-radius: 12px;
    padding: 25px 25px 10px 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.categoria-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    text-transform: uppercase;
    text-align: left;
}

.categoria-lista {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--color-dark);
    margin: 0 0 20px 0;
    line-height: 1.4;
    font-weight: 500;
    text-align: left;
}

.categoria-imagen {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    flex-grow: 1;
    margin-top: auto;
    align-self: center;
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 900;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hero-boton {
    background-color: #C24E31;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 25px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.3s ease;
}

.hero-boton:hover {
    background-color: #a84028;
    transform: translateY(-2px);
}

.hero-right {
    display: flex;
    justify-content: flex-end;
}

.quick-products {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 400px;
}

.quick-product {
    width: 70px;
    background-color: white;
    border: 2px solid #C24E31;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.quick-product:hover {
    transform: translateY(-4px);
}

.quick-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.quick-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #C24E31;
    margin: 0;
}

/* SECCI�N 2: EXPLORA NUESTRA TIENDA */
.tienda-explora {
    margin-bottom: 100px;
}

.tienda-seccion-titulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 50px 30px;
    text-align: left;
    letter-spacing: -0.5px;
}

.tienda-grid-productos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.tienda-producto-card {
    background-color: transparent;
    padding: 24px;
    text-align: center;
    transition: transform 0.3s ease;
}

.tienda-producto-card:hover {
    transform: translateY(-6px);
}

.producto-foto {
    height: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #ffffff;
    padding: 5px;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.producto-foto:hover {
    filter: grayscale(0%);
    transform: rotate(-2deg) scale(1.05);
}

.tienda-producto-card:hover .producto-foto {
    filter: grayscale(0%);
    transform: rotate(-2deg) scale(1.05);
}

.producto-nombre, .producto-precio {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.tienda-producto-card:hover .producto-nombre,
.tienda-producto-card:hover .producto-precio {
    color: #C24E31;
    font-size: 17px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.producto-foto {
    cursor: pointer;
}

/* SECCI�N 3: NUEVAS LLEGADAS */
.tienda-nuevas-llegadas {
    margin-bottom: 60px;
}

.nuevas-llegadas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.llegada-bloque {
    background-color: white;
    border: 1px solid #D4A574;
    border-radius: 8px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.bloque-contenido {
    text-align: center;
    padding: 20px;
}

.bloque-icono {
    font-size: 48px;
    margin-bottom: 12px;
}

.llegada-bloque h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.bloque-texto {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.bloque-foto {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.foto-vintage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%) sepia(20%) contrast(1.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-grid-categorias {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-right {
        justify-content: center;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(2, 1fr);
    }

    .nuevas-llegadas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tienda-vintage-section {
        padding: 40px 15px;
    }

    .tienda-hero {
        gap: 20px;
        margin-bottom: 60px;
    }

    .hero-grid-categorias {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        padding: 10px 15px 15px 15px;
    }

    .categoria-bloque {
        padding: 15px 12px 8px 12px;
    }

    .categoria-titulo {
        font-size: 18px;
    }

    .categoria-lista {
        font-size: 12px;
    }

    .categoria-imagen {
        height: 150px;
    }

    .hero-titulo {
        font-size: 36px;
    }

    .quick-products {
        max-width: 100%;
    }

    .tienda-explora {
        margin-bottom: 60px;
    }

    .tienda-seccion-titulo {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .tienda-grid-productos {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nuevas-llegadas-grid {
        grid-template-columns: 1fr;
    }

    .tienda-producto-card {
        padding: 18px;
    }

    .producto-imagen {
        height: 140px;
    }

    .producto-ilustracion {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .tienda-vintage-section {
        padding: 20px 10px;
    }

    .hero-grid-categorias {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 10px 12px 12px 12px;
    }

    .categoria-bloque {
        padding: 12px 10px 8px 10px;
    }

    .categoria-imagen {
        height: 120px;
    }

    .hero-titulo {
        font-size: 28px;
    }

    .quick-product {
        width: 60px;
        padding: 10px 6px;
    }

    .quick-icon {
        font-size: 24px;
    }

    .quick-price {
        font-size: 10px;
    }

    .tienda-seccion-titulo {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .tienda-producto-card {
        padding: 15px;
    }

    .producto-imagen {
        height: 120px;
        margin-bottom: 15px;
    }

    .producto-ilustracion {
        font-size: 40px;
    }

    .producto-nombre {
        font-size: 14px;
    }

    .producto-precio {
        font-size: 12px;
    }

    .llegada-bloque {
        min-height: 150px;
    }

    .bloque-icono {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .llegada-bloque h4 {
        font-size: 14px;
    }

    .bloque-texto {
        font-size: 12px;
    }
}

.programa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    
}

/* ========== SECCIÓN 2: ARTISTAS INVITADOS ========== */

.artistas-programa {
    background-color: #EFDEB1;
    padding: 60px 0;
    margin: 0;
}

.artistas-header-programa {
    margin-bottom: 50px;
    padding-left: 20px;
    border-left: 4px solid #c97a5f;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #4a4a4a;
    margin: 0;
    text-transform: none;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.artistas-grid-programa {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
}

.artista-card-programa {
    background-color: #EFDEB1;
    border-radius: 10px;
    overflow: visible;

    transition: all 0.3s ease;
    text-align: center;
    padding: 20px;
}

.artista-card-programa:hover {
    transform: translateY(-8px);
}

.artista-imagen-programa {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #ffffff; /* El color del marco blanco */
    padding: 5px;             /* El grosor del marco blanco */
    box-sizing: border-box;    /* Asegura que el padding no agrande el cuadrado */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
    margin-bottom: 12px;
    transition: transform 0.3s ease; /* Para un efecto extra al pasar el mouse */
}

.artista-img-programa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    display: block;
}

.artista-card-programa:hover .artista-img-programa {
    filter: grayscale(0%);
    transform: rotate(-2deg) scale(1.05);
}

.artista-nombre-programa h3{
    font-family: 'Montserrat', sans-serif;
    color: var(--color-dark);
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}



.artista-instrumento-programa {
    font-family: 'Raleway', sans-serif;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
}

/* Responsive - Artistas */
@media (max-width: 1024px) {
    .artistas-grid-programa {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .artistas-grid-programa {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .artista-card-programa {
        padding: 15px;
    }

    .artista-imagen-programa {
        height: 120px;
    }

    .artista-nombre-programa {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .artistas-grid-programa {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .artista-card-programa {
        padding: 12px;
    }

    .artista-imagen-programa {
        height: 100px;
        margin-bottom: 10px;
    }

    .artista-nombre-programa {
        font-size: 13px;
    }

    .artista-instrumento-programa {
        font-size: 10px;
    }

    .artistas-header-programa {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========== SECCIÓN 3: TALLERES INTERACTIVOS ========== */

.talleres-programa {
    background-color: #EFDEB1;
    padding: 60px 0;
    margin: 0;
}

.talleres-header-programa {
    margin-bottom: 50px;
    padding-left: 20px;
    border-left: 4px solid #c97a5f;
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #4a4a4a;
    margin: 0;
    text-transform: none;

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.talleres-grid-programa {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    max-width: 1200px;
    margin: 30px auto 15px auto;
    padding: 15px 40px;
    width: 100%;
    overflow: hidden;   
    border-radius: 15px;
    border: 2px solid rgba(199, 92, 62, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background: #E6D4AA;
    align-items: stretch;
    gap: 25px;
}

.taller-bloque-programa {
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.29);
    transition: all 0.3s ease;
}

.taller-bloque-programa:hover {
    box-shadow: 0 8px 20px rgba(178, 34, 34, 0.15);
    transform: translateY(-5px);
}

/* Clases específicas para cada taller */
.taller-bloque-percussion {
    padding: 10px;
    /*border-radius: 10px;*/
   /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.29);*/
   /*transition: all 0.3s ease;*/
}

/*.taller-bloque-percussion:hover {
    box-shadow: 0 8px 20px rgba(178, 34, 34, 0.15);
    transform: translateY(-5px);
}*/

.taller-bloque-baile {
    padding: 10px;
    border-radius: 10px;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.29);*/
    /*transition: all 0.3s ease;*/
}

/*.taller-bloque-baile:hover {
    box-shadow: 0 8px 20px rgba(178, 34, 34, 0.15);
    transform: translateY(-5px);
}*/

.taller-titulo-superior {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #B22222;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.taller-contenido-triple {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
    align-items: center;
}

.taller-contenido-doble {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 20px;
    align-items: center;
}

/* Variante: Imagen a la izquierda, texto a la derecha */
.taller-contenido-doble-izquierda {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 20px;
    align-items: center;
}

/* Variante: Imagen a la derecha, texto a la izquierda */
.taller-contenido-doble-derecha {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 20px;
    align-items: center;
}

.taller-columna-foto {
    display: flex;
    justify-content: center;
    align-items: center;
}

.taller-columna-contenido {
    padding: 0 5px;
}

/* Estilos para el header del taller */
.taller-header-contenido {
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(199, 122, 95, 0.2);
}

.taller-contenido-programa {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.taller-contenido-programa h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

/* Variante: Imagen a la izquierda */
.taller-ilustracion-programa-izquierda {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Variante: Imagen a la derecha */
.taller-ilustracion-programa-derecha {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.taller-img-programa {
    width: 90%;
    height: 90%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Variante de imagen para la derecha - sin recorte */
.taller-ilustracion-programa-derecha .taller-img-programa {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.taller-bloque-programa:hover .taller-img-programa {
    transform: scale(1.05);
}

.taller-columna-contenido p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.taller-lista-programa {
    list-style: none;
    margin: 0;
    padding: 0;
}

.taller-lista-programa li {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #555555;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    line-height: 1.2;
}

.taller-lista-programa li:before {
    content: '♪';
    position: absolute;
    left: 0;
    color: #B22222;
    font-weight: bold;
    font-size: 14px;
}

.taller-divisor {
    height: 2px;
    background: linear-gradient(90deg, transparent, #c97a5f, transparent);
    margin: 40px 0;
    opacity: 0.5;
}

.taller-divisor-vertical {
    width: 2px;
    background: linear-gradient(180deg, transparent, #c97a5f, transparent);
    margin: 0;
    opacity: 0.5;
    height: auto;
    position: relative;
    line-height: 1.6;
}

.taller-lista-programa li:before {
    content: '♪';
    position: absolute;
    left: 0;
    color: #B22222;
    font-weight: bold;
    font-size: 14px;
}

/* Responsive - Talleres */
@media (max-width: 1024px) {
    .talleres-grid-programa {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .taller-divisor-vertical {
        display: none;
    }

    .taller-contenido-triple {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .talleres-grid-programa {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .taller-divisor-vertical {
        display: none;
    }

    .taller-contenido-triple {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .taller-contenido-doble {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .taller-ilustracion-programa {
        height: 150px;
    }

    .taller-bloque-percussion,
    .taller-bloque-baile {
        padding: 20px;
    }

    .taller-contenido-programa {
        font-size: 22px;
    }

    .taller-contenido-programa h3 {
        font-size: 22px;
    }

    .taller-columna-contenido p {
        font-size: 13px;
    }

    .taller-lista-programa li {
        font-size: 12px;
    }

    .programa-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .talleres-grid-programa {
        gap: 20px;
    }

    .taller-ilustracion-programa {
        height: 150px;
    }

    .taller-contenido-programa {
        padding: 15px;
    }

    .taller-contenido-programa h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .taller-descripcion-programa {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .taller-lista-programa li {
        font-size: 12px;
        margin-bottom: 8px;
    }
}
/* ========== EFECTO SCROLL REVEAL - TODAS LAS PÁGINAS ========== */
/* 
   Este efecto se aplica automáticamente a elementos que entran al viewport
   Proporciona una animación suave de aparición con transición translateY
   Funciona en todas las páginas del sitio
*/

/* Clases reutilizables para efectos de scroll reveal */
.scroll-reveal-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-fast {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-reveal-slow {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Variantes de dirección del reveal */
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Estado activo - el elemento está visible después del scroll */
.scroll-reveal-item.active,
.scroll-reveal-fast.active,
.scroll-reveal-slow.active,
.scroll-reveal-left.active,
.scroll-reveal-right.active {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* Instrucciones CSS para elementos específicos con transiciones staggered */
/* Cuando hay múltiples elementos en una lista o grid, se pueden estaggerear las animaciones */

/* Para listas con múltiples items - cada uno aparece con delay */
.scroll-reveal-list > li:nth-child(1) {
    transition-delay: 0s;
}

.scroll-reveal-list > li:nth-child(2) {
    transition-delay: 0.1s;
}

.scroll-reveal-list > li:nth-child(3) {
    transition-delay: 0.2s;
}

.scroll-reveal-list > li:nth-child(4) {
    transition-delay: 0.3s;
}

.scroll-reveal-list > li:nth-child(5) {
    transition-delay: 0.4s;
}

/* Para grids con múltiples items - aparecen en cascada */
.scroll-reveal-grid > div:nth-child(1) {
    transition-delay: 0s;
}

.scroll-reveal-grid > div:nth-child(2) {
    transition-delay: 0.1s;
}

.scroll-reveal-grid > div:nth-child(3) {
    transition-delay: 0.2s;
}

.scroll-reveal-grid > div:nth-child(4) {
    transition-delay: 0.3s;
}

.scroll-reveal-grid > div:nth-child(5) {
    transition-delay: 0.4s;
}

.scroll-reveal-grid > div:nth-child(6) {
    transition-delay: 0.5s;
}

/* Asegurar que el scroll reveal no afecte negativamente al layout inicial */
/* Los elementos ocultos deben tener dimensiones correctas desde el inicio */
.actividad-card,
.maestro-card,
.perfil,
.gallery-masonry-item,
.evento-columna-programa,
.artista-card-programa,
.taller-bloque-programa,
.course-card,
.maestro-detallado,
.maestro-circular,
.especialidad-tag,
.timeline-item,
.tarjeta-cronologia,
.instrumento-item,
.variante-card,
.tienda-producto-card,
.llegada-bloque,
.quick-product,
.entrada-card,
.pricing-card,
.contact-box,
.info-box,
.faq-item,
.program-item,
.workshop-item,
.include-item,
.content-block,
.value-item,
.reason-item,
.artist-card,
.method-item,
.schedule-day,
.vintage-card,
.guaguanco-promo-content,
.section-header {
    /* Estos elementos pueden estar invisibles inicialmente sin afectar el layout */
    will-change: opacity, transform;
}

/* ========== PÁGINA HISTORIA - NUEVAS SECCIONES ========== */

/* Container general para historia */
.historia-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px 40px 30px;
    box-sizing: border-box;
    background-color: #EADCB3;
}

/* ========== SECCIÓN 1: ORÍGENES DEL FESTIVAL ========== */

.origenes-festival-section {
    background: linear-gradient(135deg, #F5E6BE 0%, #EDE0C7 100%);
    background-image: 
        linear-gradient(135deg, #F5E6BE 0%, #EDE0C7 100%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(194, 78, 49, 0.02) 2px,
            rgba(194, 78, 49, 0.02) 4px
        );
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.origenes-grid {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: 60px;
    align-items: center;
}

/* Grid para mapa e hitos apilados verticalmente */
.origenes-visual-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.origenes-visual-stack > * {
    width: 100%;
}

.origenes-marco-wrapper {
    display: flex;
    align-items: center;
}

/* Hitos Cronológicos */
.hitos-cronologicos {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hitos-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #2C2C2C;
    margin: 0 0 10px 0;
}

.hito-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #EDE0C7;
}

.hito-item:last-child {
    border-bottom: none;
}

.hito-ano {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #C24E31;
}

.hito-item p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #555555;
    margin: 0;
    line-height: 1.5;
}

.origenes-overline {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #C24E31;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.origenes-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 800;
    color: #2C2C2C;
    margin: 0 0 25px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.origenes-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 30px 0;
    text-align: left;
}

.origenes-boton {
    background-color: #C24E31;
    color: white;
    border: none;
    padding: 14px 32px;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(194, 78, 49, 0.3);
}

.origenes-boton:hover {
    background-color: #A84028;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(194, 78, 49, 0.4);
}

/* Marco de Imagen */
.origenes-marco {
    position: relative;
    border: 3px solid #D4A574;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 8px 8px 0px rgba(194, 78, 49, 0.2);
    margin-bottom: 40px;
    background-color: #F3E0B3;
    filter: sepia(15%) contrast(1.05);
}

.origenes-imagen {
    width: 200;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

/* Contenedor principal de la sección orígenes */
.historia-container-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 1rem;
}

/* Columna de texto */
.origenes-texto {
    font-family: 'Playfair Display', serif;
    flex: 0 1 25%;
    margin: 10px 0 0 30px;
}

/* Envoltorio del mapa */
.origenes-marco-wrapper {
    margin: 10px;
    align-self: center;
}

/* Hitos Cronológicos - Contenedor Principal */
.hitos-cronologicos {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Encabezado de Hitos */
.hitos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    order: -1;
    margin: 10px 0 0 0;
    padding-bottom: 0px;
}

.hitos-header.hitos-header h3{
    font-family: 'Montserrat', serif;
    margin: 0px;
    padding: 0px;
}

/* Grid de Hitos */
.hitos-grid-3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

.hitos-grid-3 h2 {
    font-family: 'Montserrat', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 10px 0;

    
}

.hitos-grid-3 h3{
    font-family: 'Montserrat', serif;
}

.hitos-grid-3 h2, h3, p{
    text-align: center;  
}


.hitos-item-text {
    flex: 1;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
    margin: 10px;
}

.hito-item {
    background-color: rgba(255, 255, 255, 0.8);
    border-left: 4px solid #C24E31;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.hito-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(194, 78, 49, 0.15);
}

.hito-ano {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: #C24E31;
    display: block;
    margin-bottom: 8px;
}

.hito-item h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #2C2C2C;
    margin: 0 0 8px 0;
}

.hito-item p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    color: #777777;
    margin: 0;
    line-height: 1.5;
}

/* Responsive - Orígenes */
@media (max-width: 1024px) {
    .origenes-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .origenes-titulo {
        font-size: 36px;
        margin: 0px !important;
        padding: 0px !important;
    }

    .hitos-cronologicos {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .origenes-festival-section {
        padding: 50px 0;
    }

    .historia-container {
        padding: 0 20px;
    }

    .historia-container-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
        padding: 0 15px;
    }

    .origenes-texto {
        grid-column: 1;
        margin: 0 !important;
    }

    .origenes-marco-wrapper {
        grid-column: 2;
        margin: 0 !important;
    }

    .hitos-cronologicos {
        grid-column: 1 / -1;
        gap: 15px;
        margin-top: 20px;
    }

    .origenes-titulo {
        font-size: 28px;
        margin-bottom: 15px !important;
    }

    .origenes-descripcion {
        font-size: 14px;
        margin: 0 0 20px 0 !important;
        padding: 0px !important;
    }

    .origenes-boton {
        margin-top: 15px;
    }

    .hito-item {
        padding: 15px;
    }

    .hito-ano {
        font-size: 20px;
    }

    .hito-item h4 {
        font-size: 13px;
    }

    .hito-item p {
        font-size: 11px;
    }
}

/* ========== SECCIÓN 2 Y 3: MAESTROS Y CORAZÓN DE LA RUMBA (lado a lado) ========== */

.maestros-corazon-wrapper {
    background-color: #EEDAAE;
    padding: 40px 40px 10px 10px;
    position: relative;
    margin-bottom: -20px;
}

.maestros-corazon-wrapper h2 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 800;
    color: var(--color-primary);
    text-align: center;
    margin: 0 0 60px 0;
    letter-spacing: -0.5px;
}

/* Grid para colocar maestros a la izquierda y corazón a la derecha */
.maestros-corazon-grid {
    display: grid;
    gap: 60px;
    align-items: start;
    margin: 0 30px 50px 30px;
}

/* Sección de maestros (izquierda) */
.maestros-historia-seccion {
    display: flex;
    flex-direction: column;
}

.maestros-historia-seccion h3 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 40px;
    text-align: center;
}

.maestros-historia-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.maestros-fila {
    grid-template-columns: repeat(3, 1fr) !important;
}

.maestro-historia-card {
    text-align: center;
    transition: all 0.3s ease;
}

.maestro-historia-card:hover {
    transform: translateY(-10px);
}

.maestro-historia-card img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid #C24E31;
    display: block;
}

.maestro-historia-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    color: #2C2C2C;
    margin: 0 0 8px 0;
}

.maestro-historia-card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #C24E31;
    margin: 0;
    font-style: italic;
}

.maestro-historia-nombre {
    color: var(--color-dark);
    line-height: 1.2;
    margin-bottom: 5px;
}

.maestro-historia-desc {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #555555;
    margin: 0;
    font-style: normal;
}

/* Sección de corazón de la rumba (derecha) */
.corazon-rumba-seccion {
    display: flex;
    flex-direction: column;
}

.corazon-rumba-seccion h3 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: #2C2C2C;
    margin-bottom: 40px;
    text-align: center;
}

.corazon-rumba-seccion p {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Estructura interna del corazón - sin columna decorativa */
.corazon-grid {
    display: block;
}

.corazon-decorativo {
    display: none;
}

.corazon-contenido {
    flex: 1;
}

.corazon-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 44px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.corazon-subtitulo {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #C24E31;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.corazon-descripcion {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    color: #555555;
    line-height: 1.8;
    margin: 0 0 40px 0;
}

/* Galería Mosaico */
.galeria-corazon-mosaico {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
    gap: 15px;
    margin-top: 30px;
}

.galeria-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    z-index: 1;
}

.galeria-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    pointer-events: none;
}

.galeria-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(194, 78, 49, 0.3);
}

.galeria-item:hover::before {
    opacity: 1;
}

.galeria-item:active {
    transform: translateY(-4px);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) sepia(20%);
    transition: filter 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.galeria-item:hover img {
    filter: grayscale(30%) sepia(10%);
    transform: scale(1.08);
}

/* Tamaños variables para el mosaico */
.galeria-grande {
    grid-column: span 2;
    grid-row: span 1;
    overflow: hidden;
}

.galeria-pequeno {
    grid-column: span 1;
    grid-row: span 1;
}

.maestro-historia-avatar {
    width: 180px;
    height: 180px;
    margin: 0 auto 25px;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
    box-shadow: 0 14px 28px rgba(199, 92, 62, 0.3);
    overflow: hidden;
}

.maestro-historia-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.maestro-historia-card:hover .maestro-historia-avatar {
    transform: scale(1.15) rotate(-5deg);
    border-color: var(--color-secondary);
    box-shadow: 0 10px 25px rgba(199, 92, 62, 0.4);
}


/* Responsive - Maestros y Corazón */
@media (max-width: 1024px) {
    .origenes-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .origenes-visual-stack {
        gap: 30px;
    }

    .maestros-fila {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .maestros-corazon-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .maestros-corazon-wrapper h2 {
        font-size: 36px;
    }

    .maestro-historia-card img {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    .origenes-grid {
        grid-template-columns: 1fr;
    }

    .origenes-visual-stack {
        gap: 20px;
    }

    .hitos-titulo {
        font-size: 20px;
    }

    .hito-ano {
        font-size: 16px;
    }

    .hito-item p {
        font-size: 13px;
    }

    .maestros-corazon-wrapper {
        padding: 50px 20px;
    }

    .maestros-corazon-wrapper h2 {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .maestros-historia-seccion h3,
    .corazon-rumba-seccion h3 {
        font-size: 24px;
    }

    .maestro-historia-card img {
        width: 140px;
        height: 140px;
        border-width: 3px;
    }

    .maestro-historia-card h4 {
        font-size: 20px;
    }

    .maestro-historia-card p {
        font-size: 13px;
    }

    .maestros-fila {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .origenes-grid {
        gap: 20px;
    }

    .origenes-visual-stack {
        gap: 15px;
    }

    .hitos-titulo {
        font-size: 18px;
    }

    .maestros-corazon-wrapper {
        padding: 40px 15px;
    }

    .maestros-corazon-wrapper h2 {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .maestros-historia-seccion h3,
    .corazon-rumba-seccion h3 {
        font-size: 20px;
        margin-bottom: 25px;
    }

    .maestro-historia-card img {
        width: 120px;
        height: 120px;
    }

    .maestro-historia-card h4 {
        font-size: 18px;
    }

    .maestro-historia-card p {
        font-size: 12px;
    }

    .maestros-fila {
        grid-template-columns: 1fr !important;
    }
}

/* ========== ESTILOS PÁGINA ARTISTAS DETALLE ========== */
.artista-detalle-section {
    padding: 40px 20px;
    background-color: #EADCB3;
}

.artista-detalle-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px;
    background: #EADCB3;
    margin-bottom: 60px;
    scroll-margin-top: 120px;
}

.artista-detalle-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 3px solid #cc4125;
    padding-bottom: 30px;
}

.artista-detalle-imagen {
    text-align: center;
}

.artista-detalle-imagen img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.artista-detalle-info h2 {
    font-size: 2.2em;
    color: #2c1810;
    margin-bottom: 10px;
}

.artista-especializacion {
    font-size: 1.1em;
    color: #cc4125;
    font-weight: bold;
    margin-bottom: 15px;
}

.artista-ubicacion {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

.artista-detalle-contenido {
    line-height: 1.8;
    color: #333;
}

.artista-seccion {
    margin-bottom: 30px;
}

.artista-seccion h3 {
    font-size: 1.3em;
    color: #cc4125;
    margin-bottom: 12px;
    border-left: 4px solid #cc4125;
    padding-left: 15px;
}

.artista-seccion p {
    margin-bottom: 12px;
    text-align: justify;
}

.artista-lista {
    list-style: none;
    padding: 0;
}

.artista-lista li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
    margin-bottom: 8px;
}

.artista-lista li:before {
    content: "♪";
    position: absolute;
    left: 0;
    color: #cc4125;
}

.back-to-programa {
    text-align: center;
    margin-top: 60px;
}

.back-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-primary);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.back-button:hover {
    background-color: #a63820;
}

/* ========== BOTÓN VOLVER A HISTORIA ========== */
.back-to-historia {
    text-align: center;
    margin-top: 60px;
    padding-top: 40px;

}

/* ========== BOTÓN FLOTANTE PATROCINADORES ========== */
.sponsor-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    background: linear-gradient(135deg, #cc4125 0%, #a63820 100%);
    border: none;
    padding: 15px 20px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(204, 65, 37, 0.4);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-weight: 700;
    color: white;
    font-size: 14px;
    white-space: nowrap;
    animation: float 3s ease-in-out infinite;
}

.sponsor-floating-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(204, 65, 37, 0.6);
}

.sponsor-floating-btn:active {
    transform: translateY(-2px) scale(0.98);
}

.sponsor-star {
    font-size: 20px;
    color: white;
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.5));
    display: inline-block;
}

.sponsor-btn-text {
    display: inline;
    font-family: 'Montserrat', sans-serif;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .sponsor-floating-btn {
        bottom: 20px;
        right: 10px;
        padding: 10px 14px;
        font-size: 11px;
        gap: 6px;
        animation: float-mobile 3s ease-in-out infinite;
    }
    
    .sponsor-star {
        font-size: 14px;
    }

    .sponsor-btn-text {
        display: inline;
    }
}

@keyframes float-mobile {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-2px);
    }
}

@media (max-width: 480px) {
    .sponsor-floating-btn {
        bottom: 15px;
        left: auto;
        right: 5px;
        padding: 10px 14px;
        font-size: 11px;
        gap: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: float-mobile 3s ease-in-out infinite;
    }
    
    .sponsor-star {
        font-size: 14px;
        margin: 0;
    }

    .sponsor-btn-text {
        display: inline;
    }

    /* Redes Sociales en Footer */
    .social-media-links {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
    }
    
    .social-icon {
        width: 65px !important;
        height: 65px !important;
    }
    
    .social-logo {
        width: 45px !important;
        height: 45px !important;
    }

    /* Centrar textos del footer */
    .footer-section h4 {
        text-align: center;
        background-color: #F2E6C6;
    }

    .footer-section p {
        text-align: center;
        background-color: #F2E6C6;
    }

    .footer-grid {
        text-align: center;
    }
}

/* ========== ESTILOS ENLACES EN TARJETAS DE ARTISTAS ========== */
.artista-card-programa {
    text-decoration: none;
    color: inherit;
    display: block;
}

.artista-card-programa,
.artista-card-programa:visited,
.artista-card-programa:hover,
.artista-card-programa:active {
    text-decoration: none;
    color: inherit;
}

.artista-card-programa h3,
.artista-card-programa h3:visited,
.artista-card-programa h3:hover,
.artista-card-programa h3:active,
.artista-card-programa .artista-nombre-programa,
.artista-card-programa .artista-nombre-programa:visited,
.artista-card-programa .artista-nombre-programa:hover,
.artista-card-programa .artista-nombre-programa:active {
    text-decoration: none;
    color: var(--color-dark) !important;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}

.artista-card-programa p,
.artista-card-programa p:visited,
.artista-card-programa p:hover,
.artista-card-programa p:active,
.artista-card-programa .artista-instrumento-programa,
.artista-card-programa .artista-instrumento-programa:visited,
.artista-card-programa .artista-instrumento-programa:hover,
.artista-card-programa .artista-instrumento-programa:active {
    text-decoration: none;
    color: var(--color-primary) !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
    text-align: center;
}

.artista-card-programa:hover h3,
.artista-card-programa:hover p {
    text-decoration: none;
}

@media (max-width: 768px) {
    .artista-detalle-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .artista-detalle-info h2 {
        font-size: 1.8em;
    }

    .artista-detalle-container {
        padding: 20px;
    }
}

/* Aplique mismo estilo de fuente que `.section-subtitle` */
.guardianes-subtitulo {
    text-align: center;
    font-style: italic;
    color: var(--primary-text);
    opacity: 0.8;
}

/* ========== MEDIA QUERIES - RESPONSIVE DISEÑO ========== */

/* Mobile XS (max-width: 575.98px) */
@media (max-width: 575.98px) {
    /* Video Container - Sin flotación */
    .video-container {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin: 15px 0 !important;
        bottom: auto !important;
        left: auto !important;
        z-index: auto !important;
        border-radius: 8px;
    }
    
    .video-container video {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
    }
    
    .video-controls-overlay {
        width: 100% !important;
        height: 100%;
    }

    /* Header - Ocultar/mostrar con scroll en móvil */
    .header {
        transition: transform 0.3s ease-in-out;
    }

    .header.header-hidden {
        transform: translateY(-100%);
    }
    
    /* Header Container - Hamburger visible */
    .header-container {
        padding: 0 2px !important;
        flex-wrap: wrap;
        height: 60px;
        align-items: center;
    }
    
    .logo-section {
        width: auto;
        height: 60px;
    }
    .cart-icon-btn {
        padding: 4px 6px;
        order: 4;
    }
    
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 101;
        margin-left: auto;
        margin-right: 12px;
        padding: 0;
        order: 2;
    }

    .hamburger-btn span {
        display: block;
        width: 28px;
        height: 4px;
        margin: 4px 0;
        background: #c75c3e;
        border-radius: 2px;
        transition: all 0.3s;
    }

    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }
    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Navbar - Compact mobile menu */
    .navbar {
        display: none;
        position: fixed;
        top: 60px;
        right: 10px;
        left: auto;
        width: 50vw;
        max-width: 200px;
        background: #F3E8C7;
        flex-direction: column;
        z-index: 99;
        border-top: 1px solid rgba(0,0,0,0.1);
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        border-radius: 0 0 12px 12px;
        transition: all 0.3s;
    }
    .navbar.active {
        display: flex;
    }
    .navbar ul {
        flex-direction: column;
        padding: 0;
        margin: 0;
        gap: 0;
    }
    .navbar li {
        border-bottom: 1px solid rgba(199, 92, 62, 0.1);
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .navbar a {
        padding: 16px 12px;
        display: block;
        color: var(--color-text);
        font-size: 0.95em;
        text-align: left;
        line-height: 1.2;
        margin: 0;
    }

    .navbar a.navbar-reserva {
        background-color: transparent !important;
        border-radius: 0;
        padding: 16px 12px !important;
        font-size: 0.95em;
        color: var(--color-text) !important;
        animation: none !important;
    }

    .navbar a.navbar-reserva:hover {

        color: var(--color-primary) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    .navbar a:hover {
        background-color: var(--color-primary-light);
    }

    /* Ocultar bandera lateral en móvil */
    .language-switcher {
        display: none !important;
    }

    /* Botón de idioma compacto para móvil */
    .language-switcher-mobile {
        position: absolute;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px 6px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        bottom: -30px;
        right: 4px;
        z-index: 10;
        margin: 0;
    }

    .language-switcher-mobile img {
        height: 20px;
        width: auto;
        display: block;
        object-fit: contain;
        border-radius: 3px;
        transition: transform 0.3s ease;
        transform: rotate(90deg);
    }

    .language-switcher-mobile:hover img {
        transform: scale(1.1);
    }

    .language-switcher-mobile:active img {
        transform: scale(0.95);
    }
    
    /* Banner - Full width text */
    .banner-container {
        flex-direction: column;
        padding: 20px 15px !important;
    }
    
    .banner-text {
        display: none;
        width: 100% !important;
        padding: 20px 0;
    }
    
    .banner-title {
        font-size: 1.6em !important;
    }
    
    /* Section Container Small - Flexbox for video ordering */
    .section-container-small {
        display: flex;
        flex-direction: column;
        padding: 0 15px !important;
    }
    
    .section-container-small .section-title {
        order: 1;
    }
    
    .section-container-small .btn-secondary {
        order: 3;
    }
    
    /* Maestros Grid - 3 columnas en móvil */
    .maestros-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    
    .maestro-card {
        padding: 10px !important;
        min-height: auto;
    }

    .maestro-foto {
        width: 110px !important;
        height: 110px !important;
        border: 3px solid var(--color-primary) !important;
        margin: 0 auto 10px !important;
    }

    .maestro-card h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .maestro-especialidad {
        font-size: 11px !important;
    }
    
    /* Social Icons - Larger */
    .social-icon {
        width: 65px !important;
        height: 65px !important;
    }
    
    /*tamaño del logo*/
    .social-logo {
        width: 55px !important;
        height: 55px !important;
    }
    
    /* ========== OPTIMIZACIÓN DE MODALES PARA MÓVIL ========== */
    
    /* Modal principal (formularios) */
    .modal-content {
        width: 95%;
        max-width: 80px;
        margin: 10% auto;
        padding: 20px;
        border-radius: 12px;
    }
    
    .close-modal {
        right: 15px;
        top: 12px;
        font-size: 24px;
    }
    
    .modal-header h2 {
        font-size: 1.2rem;
        margin-bottom: 3px;
    }
    
    /* Formulario en modal */
    .form-group {
        margin-bottom: 12px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    label {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    
    input, select, textarea {
        padding: 8px;
        font-size: 14px;
    }
    
    .btn-submit {
        padding: 10px;
        font-size: 0.9rem;
    }
    
    /* Lightbox modal */
    .lightbox-close {
        top: 15px;
        right: 20px;
        font-size: 32px;
    }
    
    .lightbox-prev, .lightbox-next {
        font-size: 24px;
        padding: 8px 12px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    /* Carrito modal ya está optimizado en media query 480px */
}

/* Desktop (min-width: 769px) */
@media (min-width: 769px) {
    .hamburger-btn {
        display: none !important;
    }
    
    .navbar {
        display: flex !important;
    }
}

/* ========== ESTILOS DEL CARRITO DE COMPRAS ========== */

/* Botón del carrito en el header */
.cart-icon-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

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

.cart-icon {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    stroke: var(--color-primary);
}

.cart-count {
    position: absolute;
    top: -5px;
    right: 0;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
}

/* Modal del carrito */
.modal-carrito {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease;
}

.modal-carrito.active {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(400px);
    }
    to {
        transform: translateX(0);
    }
}

.carrito-content {
    background-color: white;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
}

.carrito-header {
    padding: 20px;
    border-bottom: 2px solid var(--color-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.carrito-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.carrito-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--color-dark);
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carrito-close:hover {
    color: var(--color-primary);
    transform: rotate(90deg);
}

.carrito-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.carrito-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.carrito-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}

.carrito-item {
    display: flex;
    gap: 12px;
    padding: 15px;
    background-color: var(--color-light);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.carrito-item-info {
    flex: 1;
}

.carrito-item-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-dark);
    margin: 0 0 8px 0;
}

.carrito-item-price {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: var(--color-text);
    margin: 0 0 8px 0;
}

.carrito-item-cantidad {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cantidad-btn {
    background-color: white;
    border: 1px solid #ddd;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cantidad-btn:hover {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.cantidad-input {
    width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    font-size: 13px;
}

.carrito-item-remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.carrito-item-remove:hover {
    color: var(--color-primary);
}

.carrito-footer {
    padding: 20px;
    border-top: 2px solid var(--color-light);
    background-color: #f9f9f9;
}

.carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

.carrito-total span {
    font-weight: 700;
    color: var(--color-text);
    font-size: 14px;
}

.carrito-total h3 {
    font-size: 24px;
    color: var(--color-primary);
    margin: 0;
}

.btn-checkout {
    width: 100%;
    padding: 14px 20px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-checkout:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 92, 62, 0.3);
}

.btn-checkout:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Botón Agregar al Carrito */
.btn-agregar-carrito {
    width: 100%;
    padding: 10px 16px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.btn-agregar-carrito:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 92, 62, 0.3);
}

.btn-agregar-carrito:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(199, 92, 62, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .carrito-content {
        max-width: 100%;
    }

    .carrito-header h2 {
        font-size: 20px;
    }

    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .tienda-grid-productos {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .carrito-content {
        width: 90%;
        max-width: 340px;
        height: auto;
        max-height: 85vh;
        border-radius: 12px 12px 0 0;
        display: flex;
        flex-direction: column;
    }
    
    .carrito-header {
        padding: 15px;
        flex-shrink: 0;
    }
    
    .carrito-header h2 {
        font-size: 18px;
    }
    
    .carrito-body {
        padding: 10px;
        flex: 1;
        overflow-y: auto;
        min-height: 100px;
        max-height: 55vh;
    }
    
    .carrito-item {
        padding: 10px;
        margin-bottom: 8px;
    }
    
    .carrito-item-name {
        font-size: 14px;
    }
    
    .carrito-item-price {
        font-size: 13px;
    }
    
    .cantidad-input {
        max-width: 40px;
        font-size: 13px !important;
    }
    
    .cantidad-btn {
        padding: 4px 8px;
        font-size: 13px;
    }
    
    .carrito-footer {
        padding: 12px;
        flex-shrink: 0;
    }
    
    .carrito-total {
        font-size: 13px;
    }
    
    .btn-checkout {
        padding: 10px;
        font-size: 12px;
    }
    
    /* ========== OPTIMIZACIÓN EXTREMA DE MODALES PARA 480PX ========== */
    
    /* Modal principal - Máxima compactación */
    .modal-content {
        width: 90%;
        max-width: 330px;
        margin: 15% auto;
        padding: 15px;
        border: 1px solid var(--accent-color);
        border-radius: 10px;
    }
    
    .close-modal {
        right: 12px;
        top: 10px;
        font-size: 22px;
    }
    
    .modal-header h2 {
        font-size: 1.1rem;
        margin-bottom: 2px;
    }
    
    /* Formulario en modal - Compactación */
    .form-group {
        margin-bottom: 10px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    label {
        font-size: 0.75rem;
        margin-bottom: 3px;
    }
    
    input, select, textarea {
        padding: 6px;
        font-size: 13px;
        border-radius: 4px;
    }
    
    textarea {
        min-height: 80px;
        resize: vertical;
    }
    
    .btn-submit {
        padding: 8px;
        font-size: 0.85rem;
        margin-top: 8px;
    }
    
    /* Lightbox modal - Altamente optimizado */
    .lightbox-content {
        max-width: 95%;
        max-height: 85vh;
    }
    
    .lightbox-close {
        top: 12px;
        right: 15px;
        font-size: 28px;
    }
    
    .lightbox-prev, .lightbox-next {
        font-size: 20px;
        padding: 6px 10px;
        font-weight: normal;
    }
    
    .lightbox-prev {
        left: 5px;
    }
    
    .lightbox-next {
        right: 5px;
    }
    
    /* Carrito ya está 100% ancho en esta media query */
}

/* ========== MODAL DE MAPA INTERACTIVO ========== */
.map-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s ease-in-out;
}

.map-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-modal-content {
    background-color: transparent !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.map-modal-close {
    position: fixed !important;
    right: 30px !important;
    top: 30px !important;
    font-size: 40px !important;
    font-weight: bold !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    color: #333 !important;
    cursor: pointer !important;
    z-index: 1001 !important;
    transition: all 0.2s !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    padding: 0 !important;
}

.map-modal-close:hover {
    background: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

.map-modal-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: auto !important;
}

/* Tooltip dinámico para descripciones de POI */
.poi-tooltip {
    position: fixed;
    background: #fff;
    border: 2px solid #ff6b6b;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    max-width: 280px;
    font-family: 'Playfair Display', serif;
    animation: slideInUp 0.3s ease-out;
}

.poi-tooltip-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 12px;
    display: block;
}

.poi-tooltip-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.poi-tooltip-description {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    text-align: justify;
}

.map-modal-title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    color: #333;
    font-family: 'Playfair Display', serif;
}

.matanzas-map {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto 30px;
    border-radius: 8px;
    background: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para el contenedor del mapa interactivo con imagen y zoom */
.map-interactive-container {
    position: relative !important;
    width: 90% !important;
    max-width: 1000px !important;
    height: 80vh !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: auto !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    cursor: grab !important;
}

.map-interactive-container:active {
    cursor: grabbing !important;
}

/* Wrapper interno para el zoom */
.map-zoom-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.map-background-image {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    user-select: none !important;
    pointer-events: none !important;
}

/* Capa de superposición para los marcadores */
.map-overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: all;
}

/* Elementos de puntos de interés */
.poi-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s ease;
}

.poi-marker {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff6b6b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
    animation: pulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
}

.poi-overlay:hover .poi-marker {
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 16px rgba(255, 107, 107, 0.8);
}

/* Indicador de nivel de zoom */
.map-zoom-indicator {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.map-zoom-indicator.show {
    opacity: 1;
    visibility: visible;
}

.zoom-percentage {
    font-weight: 700;
    color: #ff6b6b;
}

/* Tarjeta del tooltip mejorada - aparece al hacer click */
.poi-tooltip {
    position: fixed !important;
    background: white;
    border-radius: 12px;
    padding: 0;
    width: 320px;
    max-height: 500px;
    overflow: hidden;
    z-index: 2000 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 
                0 0 0 1px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: scale(0.7) translateY(20px);
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    animation: tooltipPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes tooltipPopIn {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(30px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mostrar tooltip activo */
.poi-tooltip.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
}

.poi-tooltip-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0;
    animation: imageSlideDown 0.6s ease-out;
}

@keyframes imageSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contenedor del texto */
.poi-tooltip-content {
    padding: 18px 16px 16px;
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

.poi-tooltip-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-align: center;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.3px;
    animation: textFadeIn 0.6s ease-out 0.2s both;
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.poi-tooltip-description {
    font-size: 12px;
    color: #555;
    line-height: 1.5;
    text-align: justify;
    margin: 0;
    animation: textFadeIn 0.6s ease-out 0.35s both;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 4px;
}

.poi-tooltip-description::-webkit-scrollbar {
    width: 5px;
}

.poi-tooltip-description::-webkit-scrollbar-track {
    background: transparent;
}

.poi-tooltip-description::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

.poi-tooltip-description::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Botón de cierre del tooltip */
.poi-tooltip-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(255, 107, 107, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    line-height: 1;
    padding: 0;
}

.poi-tooltip-close:hover {
    background: #ff6b6b;
    transform: rotate(90deg) scale(1.1);
}

.matanzas-map .poi-marker {
    transition: r 0.2s, opacity 0.2s;
}

.matanzas-map .poi-marker:hover {
    r: 25;
    opacity: 0.8;
}

.map-description-panel {
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
    border-left: 4px solid #c75c3e;
    padding: 20px;
    border-radius: 6px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-description-panel h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.map-description-panel p {
    color: #666;
    line-height: 1.6;
    font-size: 15px;
}

#map-description-text {
    margin: 0;
}

/* ========== RESPONSIVE MAP MODAL ========== */
@media (max-width: 768px) {
    .map-modal-content {
        width: 100% !important;
        max-height: 100% !important;
        height: 100% !important;
    }
    
    .map-modal-container {
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .map-interactive-container {
        width: 95% !important;
        height: 85vh !important;
    }
    
    .map-modal-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    .map-description-panel {
        min-height: 120px;
        padding: 15px;
    }
    
    .map-description-panel h3 {
        font-size: 18px;
    }
    
    .map-description-panel p {
        font-size: 14px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Banner responsivo para dispositivos móviles */
@media (max-width: 768px) {
    .banner,
    .banner-programa,
    .banner-historia,
    .banner-tienda,
    .banner-academia,
    .banner-reserva {
        background-image: url(../images/banner/banner-movil.webp);
        height: 200px;
    }
}