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

:root {
    /* Paleta de Colores Refinada */
    --soft-black: #1a1a1a;
    /* Fondo principal oscuro y elegante */
    --deep-burgundy: #7D1542;
    /* Un toque rico y sensual */
    --gold: #D4AF37;
    /* Acento lujoso y cálido */
    --light-gold: #f0d78c;
    /* Dorado más suave para hovers/detalles */
    --off-white: #f8f4f4;
    /* Texto principal claro para contraste */
    --grey-text: #bdbdbd;
    /* Texto secundario o sutil */
    --error-red: #e53935;
    /* Para mensajes de error */
    --success-green: #4CAF50;
    /* Para mensajes de éxito */
    --placeholder-bg: rgba(255, 255, 255, 0.05);
    /* Fondo sutil para placeholders */
    --placeholder-border: rgba(212, 175, 55, 0.2);
    /* Borde sutil dorado */

    /* Tipografía */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;

    /* Transiciones */
    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.4s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --transition-slow: all 0.6s ease-in-out;

    /* Sombras */
    --shadow-subtle: 0 4px 10px rgba(0, 0, 0, 0.2);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.3);
    --shadow-gold: 0 0 15px rgba(212, 175, 55, 0.3);
    --shadow-gold-hover: 0 0 25px rgba(212, 175, 55, 0.5);

    /* Radios de borde */
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 15px;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--soft-black);
    color: var(--off-white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* --- RESTAURADO: Fondo general del body para otras páginas --- */
    background-image:
        linear-gradient(rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.95)),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M12.5 0 L0 12.5 L12.5 25 L25 12.5 Z M37.5 0 L25 12.5 L37.5 25 L50 12.5 Z M62.5 0 L50 12.5 L62.5 25 L75 12.5 Z M87.5 0 L75 12.5 L87.5 25 L100 12.5 Z M12.5 50 L0 62.5 L12.5 75 L25 62.5 Z M37.5 50 L25 62.5 L37.5 75 L50 62.5 Z M62.5 50 L50 62.5 L62.5 75 L75 62.5 Z M87.5 50 L75 62.5 L87.5 75 L100 62.5 Z" fill="%23333" fill-opacity="0.08"/></svg>');
    background-attachment: fixed;
    /* ----------------------------------------------------------- */
}

/* --- Tipografía Base --- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 0.8em;
    line-height: 1.3;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

h1 {
    font-size: clamp(2.5rem, 6vw, 3.8rem);
    letter-spacing: 2px;
    text-transform: uppercase;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--light-gold);
}

h4 {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--off-white);
    font-weight: 600;
}

p {
    margin-bottom: 1.5em;
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    color: var(--grey-text);
}

a {
    color: var(--light-gold);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--gold);
    text-decoration: underline;
    outline: none;
    /* Reemplazado por focus-visible */
}

/* --- Accesibilidad --- */
*:focus-visible {
    outline: 2px dashed var(--gold);
    outline-offset: 3px;
}

.btn:focus-visible {
    /* Estilo específico para botones */
    box-shadow: 0 0 0 3px var(--soft-black), 0 0 0 5px var(--gold);
}

/* --- Header --- */
#main-header {
    background-color: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-subtle);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0.8rem clamp(1rem, 5vw, 4rem);
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    /* Limita el ancho del contenido del header */
    margin: 0 auto;
}

.logo-column img {
    max-width: 200px;
    /* Ajuste para responsividad */
    height: auto;
    display: block;
}

.menu-column {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    gap: clamp(1rem, 3vw, 2rem);
    list-style: none;
}

.nav-menu li a {
    color: var(--off-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: clamp(0.8rem, 1.5vw, 0.9rem);
    font-weight: 400;
    position: relative;
    padding: 0.5em 0;
    text-decoration: none;
}

.nav-menu li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--gold);
    transition: var(--transition-medium);
}

.nav-menu li a:hover,
.nav-menu li a:focus {
    color: var(--gold);
    text-decoration: none;
}

.nav-menu li a:hover::after,
.nav-menu li a:focus::after {
    width: 100%;
}

/* --- Mobile Menu Toggle --- */
.menu-toggle {
    display: none;
    /* Oculto por defecto */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1100;
    /* Encima del menú */
    margin-left: 1rem;
    /* Espacio respecto a la nav */
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--off-white);
    margin: 5px 0;
    transition: var(--transition-medium);
    border-radius: 2px;
}

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

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

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Footer --- */
#main-footer {
    background-color: rgba(26, 26, 26, 0.9);
    padding: 2rem clamp(1rem, 5vw, 4rem);
    margin-top: auto;
    /* Empuja el footer hacia abajo */
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    font-size: 0.9rem;
    color: var(--grey-text);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Para pantallas pequeñas */
    gap: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-nav a {
    color: var(--grey-text);
    margin: 0 0.5em;
}

.footer-nav a:hover {
    color: var(--light-gold);
}

/* --- Contenedor Principal y Secciones --- */
main {
    flex-grow: 1;
}

/* Asegura que ocupe el espacio disponible */

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(2rem, 5vh, 4rem) 0;
    /* Espaciado vertical */
}

.content-section {
    padding-top: 120px;
    /* Espacio para el header fijo */
    padding-bottom: 60px;
}

h1 span,
h2 span {
    /* Para resaltar palabras en títulos */
    color: var(--off-white);
    font-style: italic;
}

.section-subtitle {
    text-align: center;
    color: var(--grey-text);
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-top: -1em;
    margin-bottom: 3em;
}

/* --- Página de Inicio (Index) --- */

/* Estilos para el eslogan (MODIFICADO para parecerse al H1 pero más pequeño) */
.slogan {
    font-family: 'Playfair Display', serif;
    /* Misma fuente que H1 */
    color: var(--gold);
    /* Mismo color que H1 */
    font-size: 2.2rem;
    /* Ligeramente más pequeño que H1 (que es 3rem) */
    font-weight: bold;
    /* H1 es bold por defecto, mantenemos consistencia */
    text-transform: uppercase;
    /* Mismo text-transform que H1 */
    letter-spacing: 2px;
    /* Ligeramente menos que H1 (que tiene 3px) para proporción */
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.45);
    /* Sombra similar a H1, pero un poco más sutil */
    margin-top: 0;
    /* Quitamos el margen superior por defecto del párrafo, el espacio con el logo lo da el logo */
    margin-bottom: 0;
    /* Quitamos el margen inferior por defecto, el espacio con H1 lo da el contenedor .logo-slogan-container */
    line-height: 1.3;
    /* Buena legibilidad para este tipo de texto */
}

/* Estilos para el contenedor del logo y eslogan (revisar el margin-bottom si es necesario) */
.logo-slogan-container {

    text-align: center;
    margin-bottom: 1.5rem;
    /* Ajusta este valor para el espacio entre el eslogan y el H1 "Próxima Fiesta" */
    /* Originalmente era 25px. 1.5rem es ~24px. Si quieres más espacio, auméntalo. */
    /* Si quieres menos espacio, redúcelo. */
}

/* Estilos para el logo (sin cambios, solo para referencia de espaciado) */
.hero-logo {
    width: 200px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 10px;

    /* Espacio entre el logo y el eslogan */
    transform-origin: center center;
    /* Aplicamos la animación */
    animation: heartbeat 2.5s ease-in-out infinite;
}

/* Definición de la animación 'heartbeat' */
@keyframes heartbeat {
    0% {
        transform: scale(1);
        /* Estado inicial */
    }

    10% {
        transform: scale(1.03);
        /* Pequeña expansión */
    }

    20% {
        transform: scale(1);
        /* Vuelta al tamaño original */
    }

    30% {
        transform: scale(1.05);
        /* Expansión un poco mayor */
    }

    40% {
        transform: scale(1);
        /* Vuelta al tamaño original */
    }

    /* Pausa - el corazón no late constantemente sin parar */
    100% {
        transform: scale(1);
        /* Asegura que termine en el estado original */
    }
}

/* Es posible que quieras ajustar el margin-top del H1 principal si el nuevo eslogan lo hace sentir muy separado */
/* Por ejemplo, si el H1 genérico tiene mucho margin-top */
/*.hero-section h1 {
    /* Puedes mantener los márgenes originales del H1 o ajustarlos aquí si es necesario */
/* margin-top: 2rem; */
/* Ejemplo: reducir el margen superior del H1 en esta sección específica */






.full-height-container {
    /* Contenedor específico para la página de inicio */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centra hero-section verticalmente */
    align-items: center;
    /* Centra hero-section horizontalmente */
    /* padding-top: 80px; */
    /* No necesita padding si hero-section ocupa todo */
    /* text-align: center; */
    /* No necesita si hero-section lo maneja */
    /* min-height: calc(100vh - 80px); */
    /* Ajustado por hero-section */
    /* Se asegura que el contenedor principal en index ocupe espacio si es necesario */
    width: 100%;
    /* Puede ocupar todo el ancho */
}

.hero-section {
    /* Estilos específicos para la sección hero en index.html */
    width: 100%;
    /* Ocupa todo el ancho disponible */
    min-height: 100vh;
    /* Ocupa al menos toda la altura de la ventana */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centra el contenido verticalmente */
    align-items: center;
    /* Centra el contenido horizontalmente */
    position: relative;
    z-index: 1;
    padding: 4rem 1rem;
    /* Espaciado interno */
    text-align: center;

    /* --- Background Image Styles --- */
    background-image:
        linear-gradient(rgba(26, 26, 26, 0.4), rgba(26, 26, 26, 0.4)),
        url('../img/portada1.jpg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Mantiene el fondo fijo */
    /* IMPORTANTE: Este background sobreescribirá el del body en la página de inicio */
}

.hero-section h1 {
    margin-bottom: 0.5em;
    text-shadow: 0 0 25px rgba(212, 175, 55, 0.5), 0 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-section .subtitle {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--off-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#countdown {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}

.countdown-item {
    background: rgba(125, 21, 66, 0.2);
    border: 1px solid rgba(125, 21, 66, 0.4);
    border-radius: var(--border-radius-medium);
    padding: clamp(0.8rem, 2vw, 1.2rem) clamp(1rem, 3vw, 2rem);
    min-width: 90px;
    text-align: center;
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow-subtle);
}

.countdown-item span {
    display: block;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 0.2em;
}

.countdown-item p {
    font-size: clamp(0.7rem, 1.5vw, 0.8rem);
    text-transform: uppercase;
    color: var(--grey-text);
    margin-bottom: 0;
    letter-spacing: 1px;
}

.hero-section p.subtitle:nth-of-type(2),
.hero-section p.subtitle:nth-of-type(3) {
    color: var(--off-white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 0.5rem;
}

.hero-btn {
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

/* --- Botón General --- */
.btn {
    display: inline-block;
    padding: 0.8em 2em;
    background: transparent;
    border: 2px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: var(--transition-medium);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: clamp(0.9rem, 1.8vw, 1rem);
    text-align: center;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--gold);
    transition: var(--transition-medium);
    z-index: -1;
}

.btn:hover,
.btn:focus {
    color: var(--soft-black);
    text-decoration: none;
    box-shadow: var(--shadow-gold);
}

.btn:hover::before,
.btn:focus::before {
    width: 100%;
}

.btn-small {
    padding: 0.6em 1.5em;
    font-size: 0.9rem;
}

.btn-link {
    background: none;
    border: none;
    color: var(--light-gold);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0;
    margin-top: 0.5rem;
}

.btn-link:hover {
    color: var(--gold);
}


/* --- Sección Quiénes Somos & Información --- */

/* --- Estilos para Imágenes de Información (informacion.html) --- */

.info-image-container {
    /* Anulamos estilos de placeholder que no necesitamos */
    padding: 0;
    /* Quitamos padding interno */
    background-color: transparent;
    /* Sin fondo de placeholder */
    border: 1px solid var(--placeholder-border);
    /* Mantenemos un borde sutil opcional */
    /* Si no quieres borde: border: none; */
    display: flex;
    /* Para centrar imagen si no ocupa todo */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Muy importante para contener la imagen y animaciones */
    /* Mantenemos el aspecto y flex que ya tenía .media-placeholder */
    flex: 1;
    aspect-ratio: 16 / 10;
    border-radius: var(--border-radius-medium);
    min-height: 250px;
    /* Asegura altura mínima */
}

/* Quitamos animación shimmer de los placeholders de imagen */
.info-image-container::before {
    display: none;
}

.info-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cubre el contenedor sin distorsionar */
    border-radius: inherit;
    /* Hereda el borde redondeado del contenedor */
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
        /* Transición suave para hover */
        filter 0.5s ease-in-out;
    /* Transición para filtro */
    /* Aplicamos la animación */
    animation: subtlePulse 8s infinite ease-in-out alternate;
    /* Initial slightly desaturated look */
    filter: saturate(0.85) brightness(0.95);
}

/* Animación Sutil 'Pulse' */
@keyframes subtlePulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
        /* Ligeramente menos opaco al inicio/fin del ciclo */
    }

    50% {
        transform: scale(1.03);
        /* Escala muy ligeramente en la mitad */
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

/* Efecto Hover: Zoom ligero y restauración de color */
.info-image-container:hover .info-image {
    transform: scale(1.08);
    /* Un poco más de zoom al pasar el ratón */
    animation-play-state: paused;
    /* Pausamos la animación base en hover */
    filter: saturate(1) brightness(1);
    /* Restaura saturación y brillo completos */
}

/* Aseguramos que en pantallas pequeñas el contenedor sigue funcionando */
@media (max-width: 992px) {
    .info-image-container {
        /* Quizás necesites ajustar el tamaño o ratio aquí si el layout cambia mucho */
        /* Por ejemplo, si quieres que sea más cuadrado: */
        /* aspect-ratio: 1 / 1; */
        max-width: 80%;
        /* Ejemplo: limita el ancho en vista de columna */
        margin-left: auto;
        margin-right: auto;
    }
}


/* (Estos estilos aplican a las páginas que los usen) */
#quienes-somos p.intro-paragraph,
.info-block p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--off-white);
    font-size: clamp(1.1rem, 2vw, 1.2rem);
    margin-bottom: 2em;
}

.info-block {
    background: rgba(255, 255, 255, 0.03);
    padding: 2rem;
    border-radius: var(--border-radius-medium);
    margin-bottom: 3rem;
    border: 1px solid var(--placeholder-border);
}

.info-block h3 {
    text-align: center;
}


.text-image-container {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    margin: 4rem 0;
}

.text-container {
    flex: 1;
}

.text-container h2 {
    margin-bottom: 1em;
}

.text-container p {
    color: var(--off-white);
    text-align: left;
}

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

.para-ellos {
    flex-direction: row-reverse;
}

.para-ellos .text-container {
    text-align: right;
}

.para-ellos .text-container h2 {
    text-align: right;
}

/* Placeholder para Imagen/Video */
.media-placeholder,
.media-placeholder-large,
.gallery-placeholder {
    flex: 1;
    aspect-ratio: 16 / 10;
    border-radius: var(--border-radius-medium);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    border: 1px solid var(--placeholder-border);
    background-color: var(--placeholder-bg);
    color: var(--grey-text);
    font-style: italic;
    font-size: 0.9rem;
    min-height: 250px;
    position: relative;
    overflow: hidden;
}


/* --- Estilo Específico para Placeholder 'Para Ti, Mujer' --- */

.mujer-placeholder-bg {
    background-image: url('../img/woman3.jpg');
    /* Ruta relativa desde la carpeta CSS */
    background-size: cover;
    /* Para que la imagen cubra todo el div, puede recortar */
    /* background-size: contain; */
    /* Descomenta esta si quieres que la imagen se vea completa, puede dejar espacios */
    background-position: center center;
    /* Centra la imagen */
    background-repeat: no-repeat;
    /* Evita que se repita */

    /* Anulamos estilos de placeholder de texto/icono */
    background-color: transparent;
    /* Quitamos el color de fondo del placeholder */
    border: none;
    /* Opcional: quitar el borde si molesta con la imagen */
    /* Si el icono o texto original causara problemas (aunque lo borramos del HTML): */
    color: transparent;
    font-size: 0;
}

/* Opcional: Si el efecto de brillo animado molesta sobre la imagen */
.mujer-placeholder-bg.animated-background::before {
    display: none;
    /* Oculta la animación de brillo */
    /* O podrías ajustar su opacidad/color si prefieres mantenerlo sutil */
    /* background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); */
}

/* Asegúrate de que los estilos base de .media-placeholder aún apliquen las dimensiones */
/* .media-placeholder { ... aspect-ratio: 16 / 10; min-height: 250px; ... } */
/* No necesitas repetir esto si .mujer-placeholder-bg se aplica al mismo div */


/* --- Estilo Específico para Placeholder 'Para Ti, Hombre' --- */

.hombre-placeholder-bg {
    background-image: url('../img/hombres2.jpg');
    /* <-- CAMBIA 'man1.jpg' por tu nombre de archivo */
    background-size: cover;
    /* O 'contain' si prefieres verla completa */
    background-position: center center;
    background-repeat: no-repeat;

    /* Anulamos estilos de placeholder de texto/icono */
    background-color: transparent;
    border: none;
    /* Opcional: quitar el borde */
    padding: 0;
    /* Quitar padding interno */
    color: transparent;
    font-size: 0;
    /* Resetear flex si no es necesario */
    display: block;
    justify-content: initial;
    align-items: initial;
    text-align: initial;
}

/* Opcional: Ocultar animación de brillo si molesta */
.hombre-placeholder-bg.animated-background::before {
    display: none;
}

/* Asegúrate de que los estilos base de .media-placeholder aún apliquen las dimensiones */
/* .media-placeholder { ... flex: 1; aspect-ratio: 16 / 10; min-height: 250px; ... } */



.media-placeholder-large {
    aspect-ratio: 16 / 7;
    min-height: 300px;
    margin: 3rem 0;
}

.placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.6;
}

.animated-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.08), transparent);
    animation: shimmer 5s infinite linear;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.call-to-action {
    text-align: center;
    margin-top: 4rem;
    padding: 3rem;
    background: rgba(125, 21, 66, 0.1);
    border-radius: var(--border-radius-large);
    border: 1px solid rgba(125, 21, 66, 0.3);
}

.call-to-action h2 {
    color: var(--light-gold);
}

.call-to-action p {
    max-width: 600px;
    margin: 1em auto 2em auto;
    color: var(--off-white);
}

/* Estilos para el Selector de Idioma */
#language-selector-container {
    margin-left: 1rem;
    /* Espacio si está al lado del menú */
    display: flex;
    align-items: center;
}

#language-selector {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--off-white);
    border: 1px solid var(--placeholder-border);
    padding: 0.4em 0.6em;
    border-radius: var(--border-radius-small);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
}

#language-selector:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
}

/* Ocultar label si solo es para accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


/* --- Página Precios --- */
/* (Estos estilos aplican a precios.html) */
#precios h1,
#precios .section-subtitle {
    text-align: center;
}

.event-includes {
    margin-bottom: 4rem;
}

.event-includes h3 {
    text-align: center;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    margin-bottom: 3rem;
}

.element {
    margin-bottom: 4rem;
}

.element .element-content {
    display: flex;
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 3rem);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius-large);
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--placeholder-border);
    overflow: hidden;
}

.element.reverse-layout .element-content {
    flex-direction: row-reverse;
}

.element-text {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.element-title {
    margin-bottom: 0.5em;
    color: var(--gold);
    font-weight: 700;
    font-size: clamp(1.4rem, 2.8vw, 1.8rem);
}

.element-text p {
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    color: var(--off-white);
    margin-bottom: 0;
}

/* --- Estilos para el Slider de Villa (Página Precios) --- */

.villa-slider-container {
    flex: 1;
    /* O ajusta según cómo quieras que ocupe espacio vs el texto */
    min-width: 280px;
    /* Evita que sea demasiado pequeño */
    display: flex;
    /* Ayuda a centrar el slider si es necesario */
    align-items: center;
    justify-content: center;
}

.villa-slider {
    position: relative;
    width: 100%;
    max-width: 500px;
    /* Ajusta el ancho máximo deseado */
    aspect-ratio: 16 / 10;
    /* O define una altura fija si prefieres */
    overflow: hidden;
    border-radius: var(--border-radius-medium);
    background-color: var(--placeholder-bg);
    /* Fondo mientras cargan imgs */
    border: 1px solid var(--placeholder-border);
    box-shadow: var(--shadow-subtle);
}

.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    /* Transición suave */
}

.slider-wrapper img {
    flex-shrink: 0;
    /* Evita que las imágenes se encojan */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cubre el área sin distorsionar */
    display: block;
    transition: transform 0.3s ease-in-out;
    /* Transición para el zoom */
    cursor: pointer;
    /* Indica que se puede interactuar (aunque no hagamos nada al click) */
}

/* Efecto de zoom al pasar el ratón por CUALQUIER parte del slider afectando la imagen activa */
.villa-slider:hover .slider-wrapper img.active {
    transform: scale(1.05);
    /* Aumenta ligeramente */
}

/* --- Estilos para Contenedor de Video Vimeo (Página Precios) --- */
.vimeo-video-wrapper {
    flex: 1;
    /* Ocupa el espacio disponible en el flex container */
    min-width: 250px;
    /* Evita que se encoja demasiado, similar a los placeholders */
    max-width: 100%;
    /* Asegura que no desborde su contenedor */
    /* Podrías añadir un aspect-ratio aquí también si el padding trick no funciona como esperado, */
    /* pero el estilo inline del div interno ya lo maneja (padding: 56.25%) */
    border-radius: var(--border-radius-medium);
    /* Opcional: si quieres redondear el contenedor */
    overflow: hidden;
    /* Asegura que el iframe respete el borde redondeado si se aplica */
    background-color: var(--placeholder-bg);
    /* Fondo mientras carga */
    border: 1px solid var(--placeholder-border);
    /* Borde consistente */
}

/* Ajuste específico para el div interno del iframe de Vimeo */
.vimeo-video-wrapper>div {
    border-radius: inherit;
    /* Hereda el borde redondeado del wrapper si existe */
}

/* Ajuste para pantallas pequeñas si es necesario */
@media (max-width: 992px) {
    .element .element-content .vimeo-video-wrapper {
        /* En layout de columna, puede necesitar ajustes diferentes */
        /* Por ejemplo, quitar el flex: 1 y darle un ancho específico */
        /* flex: none; */
        /* width: 90%; */
        margin-top: 1.5rem;
        /* Añadir espacio sobre el video si viene después del texto */
    }
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(26, 26, 26, 0.6);
    /* Fondo semi-transparente */
    color: var(--gold);
    border: 1px solid var(--gold);
    border-radius: 50%;
    /* Botones redondos */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition-fast);
    padding: 0;
    line-height: 1;
    /* Asegura centrado vertical del caracter */
}

.slider-arrow:hover,
.slider-arrow:focus {
    background-color: var(--gold);
    color: var(--soft-black);
    border-color: var(--gold);
    outline: none;
    /* Quitamos outline por defecto, focus-visible lo manejará */
}

/* Añadido para accesibilidad con focus-visible */
.slider-arrow:focus-visible {
    box-shadow: 0 0 0 3px var(--soft-black), 0 0 0 5px var(--gold);
}


.slider-arrow.prev {
    left: 15px;
}

.slider-arrow.next {
    right: 15px;
}

/* Opcional: Ocultar flechas si solo hay una imagen */
.villa-slider[data-image-count="1"] .slider-arrow {
    display: none;
}

/* --- Estilos para Contenedor de Imagen Única (Genérico y Transfers) --- */
.single-image-container {
    flex: 1;
    /* Ocupa espacio en el layout flex */
    min-width: 250px;
    /* Evita que sea demasiado estrecho */
    max-width: 480px;
    /* Limita el ancho máximo (ajusta según necesites) */
    display: flex;
    /* Ayuda a centrar la imagen si tiene márgenes */
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    /* Un pequeño espacio alrededor de la imagen */
    /* Mantenemos un estilo visual similar a los placeholders */
    background-color: var(--placeholder-bg);
    border: 1px solid var(--placeholder-border);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    /* Asegura que la imagen respete el borde redondeado */
}

/* 
.transfer-image-container {
   Aquí podrías añadir estilos específicos solo para el contenedor del transfer si fuera necesario */
/* Por ejemplo: aspect-ratio: 4/3; 
}*/

.single-image-container img {
    /* Estilo para CUALQUIER imagen dentro de un single-image-container */
    display: block;
    width: 100%;
    /* La imagen ocupa todo el ancho del contenedor */
    height: auto;
    /* Mantiene la proporción original */
    max-height: 350px;
    /* Limita la altura máxima (ajusta si es necesario) */
    object-fit: cover;
    /* Cubre el área del contenedor, puede recortar si las proporciones no coinciden perfectamente */
    border-radius: calc(var(--border-radius-medium) - 4px);
    /* Radio un poco menor que el contenedor */
}

/* Ajuste para cuando pasa a layout de columna en móviles */
@media (max-width: 992px) {
    .element.reverse-layout .element-content .single-image-container {
        /* En layout de columna, quizás quieras que ocupe más ancho */
        max-width: 85%;
        margin-bottom: 1.5rem;
        /* Añadir espacio antes del texto */
        /* O quitar el flex: 1 si no lo necesitas en columna */
        /* flex: none; */
        /* width: 85%; */
    }
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 250px;
}

.gallery-placeholder {
    width: calc(50% - 0.5rem);
    aspect-ratio: 1/1;
    min-height: auto;
    padding: 1rem;
}

.grid-gallery .gallery-placeholder {
    width: calc(33.33% - 0.7rem);
}

.horizontal-gallery {
    flex-wrap: nowrap;
    justify-content: space-around;
}

.horizontal-gallery .gallery-placeholder {
    width: clamp(120px, 15vw, 180px);
}

.vertical-gallery .gallery-placeholder {
    width: 100%;
    aspect-ratio: 16/6;
}

.diagonal-gallery,
.scattered-gallery,
.hexagon-gallery,
.wave-gallery {
    justify-content: space-around;
}

.diagonal-gallery .gallery-placeholder:first-child {
    transform: rotate(-5deg);
}

.diagonal-gallery .gallery-placeholder:last-child {
    transform: rotate(5deg) translateY(10px);
}

.final-note {
    text-align: center;
    font-size: 1.2rem;
    color: var(--light-gold);
    padding: 2rem;
    background: rgba(125, 21, 66, 0.1);
    border-radius: var(--border-radius-medium);
    font-style: italic;
    margin-top: 3rem;
}

.pricing-section h1 {
    margin-top: 4rem;
    margin-bottom: 1rem;
}

.availability-notice {
    text-align: center;
    font-size: 1.3rem;
    color: var(--deep-burgundy);
    margin-bottom: 3rem;
    font-weight: 600;
}

.precios-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
}

.precio-box {
    background: rgba(125, 21, 66, 0.15);
    border: 1px solid rgba(125, 21, 66, 0.4);
    border-radius: var(--border-radius-medium);
    padding: 2.5rem 1.5rem 2rem;
    text-align: center;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.precio-box:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 25px rgba(125, 21, 66, 0.3);
    border-color: var(--gold);
}

.precio-box h3 {
    font-size: 1.6rem;
    color: var(--off-white);
    margin-bottom: 0.5em;
}

.precio {
    font-size: clamp(2.2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--gold);
    display: block;
    margin: 0.8em 0 0.1em; /* Reduced bottom margin */
    line-height: 1.2;
    position: relative;
}

.precio-original {
    display: block;
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* Adjusted font size */
    color: var(--grey-text);
    text-decoration: line-through;
    opacity: 0.8;
    margin-top: 0.1em; /* Small top margin */
    margin-bottom: 0.5em; /* Bottom margin before availability text */
    line-height: 1.2;
}

/* Estilos para las etiquetas de descuento (diseño nube/flotante) */
.descuento-tag {
    position: absolute;
    top: 35px; /* Alineado cerca del título h3. Ajustar según sea necesario. */
    left: calc(50% + 70px); /* Posicionado a la derecha del centro del título. Ajustar. */
    /* Alternativa: right: 15px; si se prefiere alinear con el borde derecho del box, ajustando top */
    background: linear-gradient(135deg, #7D1542, #9a1b53);
    color: white;
    padding: 10px 18px;
    border-radius: 30px; /* Forma de píldora/nube suave */
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto; /* Ancho automático basado en contenido */
    min-width: 130px; /* Ancho mínimo */
    max-width: 160px; /* Ancho máximo */
    height: auto;
    min-height: 65px;
    /* transform: translateX(-50%); Considerar si 'left: 50%' se usa para centrar el tag mismo */
}

.descuento-porcentaje {
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.descuento-texto {
    font-size: 0.7em;
    opacity: 0.9;
    line-height: 1.1;
    margin-bottom: 2px;
}

.descuento-ahorro {
    font-size: 0.75em;
    font-weight: 500;
    opacity: 0.95;
    line-height: 1.1;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
    margin-top: 3px;
    /* Se quita el fondo y padding extra para un look más limpio en la nube */
}

.precio-box p {
    font-size: 1rem;
    margin-bottom: 1.5em;
    color: var(--grey-text);
}

.precio-box p.availability {
    font-weight: 600;
    color: var(--light-gold);
}

.precio-box .btn {
    margin-top: auto;
}

.disclaimer {
    text-align: center;
    font-size: 0.9rem;
    color: var(--grey-text);
    margin-top: 2rem;
    font-style: italic;
}




/* --- Página de Contacto --- */

/* --- Estilos para el Captcha de Emojis --- */

#emoji-target-sequence span {
    display: inline-block;
    /* Para que los emojis se alineen */
    font-size: 1.8em;
    /* Tamaño más grande para los emojis */
    margin: 0 5px;
    /* Espacio entre emojis */
    padding: 0px;
    user-select: none;
    /* Evitar selección de texto */
    vertical-align: middle;
    /* Alinear con el texto */
}

#emoji-source-area {
    border: 2px dashed #ccc;
    /* Borde más prominente para indicar área de drop */

    margin-top: 5px;
    /* Reducido margen superior */
    min-height: 60px;
    /* Altura mínima */
    background-color: #291111;
    border-radius: 5px;
    text-align: center;
    /* Centrar emojis inicialmente */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    /* Transición suave para drag over */
}

#emoji-source-area span {
    display: inline-block;
    /* Alinear */
    font-size: 2em;
    /* Ligeramente más grandes para arrastrar */
    margin: 0 2px;
    /* Más espacio */
    padding: 1px;
    cursor: grab;
    /* Indicador visual para arrastrar */
    user-select: none;
    /* Evitar selección de texto */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease, opacity 0.2s ease;
    /* Transición suave */
    vertical-align: middle;
    /* Mejor alineación vertical */
}

/* Estilo cuando se está arrastrando (JS añadirá/quitará esta clase) */
.emoji-dragging {
    opacity: 0.4 !important;
    /* Forzar opacidad baja */
    cursor: grabbing !important;
    /* Forzar cursor */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    /* Hacerlo un poco más grande al arrastrar */
}

/* Estilo para indicar que se puede soltar sobre el área (JS añadirá/quitará esta clase al área) */
.drag-over-active {
    background-color: #e8f4ff;
    border-color: #90caf9;
}

/* Placeholder visual opcional mientras arrastras (requiere JS más avanzado si se quiere implementar) */
/*
.emoji-drag-placeholder {
     display: inline-block;
     width: 2.2em;
     height: 1.5em;
     background-color: #e0e0e0;
     border: 1px dotted #aaa;
     margin: 0 8px;
     vertical-align: middle;
     border-radius: 3px;
}
*/

.emoji-captcha-label {
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
    /* Espacio antes de las etiquetas */
    font-weight: 600;
    color: #555;
    font-size: 0.95em;
}

#emoji-captcha-container .btn-link {
    /* Estilo específico para el botón de recarga de emojis */
    margin-top: 10px;
    display: inline-block;
    /* Para que el margen funcione bien */
}

#emoji-captcha-error {
    /* Asegurarse de que el error sea visible */
    margin-top: 10px;
}


/* (Estos estilos aplican a contacto.html) */
.form-container {
    max-width: 700px;
    margin: 2rem auto;
    background: rgba(255, 255, 255, 0.03);
    padding: clamp(1.5rem, 5vw, 3rem);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--placeholder-border);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--light-gold);
    font-size: 0.9rem;
}

.form-group label.required::after {
    content: '*';
    color: var(--deep-burgundy);
    margin-left: 4px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
/* Añadido para los input number restantes */
.form-group select,
/* Añadido select */
.form-group textarea {
    width: 100%;
    padding: 0.8em 1em;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--placeholder-border);
    border-radius: var(--border-radius-small);
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: 1rem;
    transition: var(--transition-fast);
    /* Para select, puede que quieras añadir 'appearance: none;'
       y un icono de flecha personalizado si quieres un look más custom,
       pero esto añade complejidad. Por ahora, esto unifica el fondo, borde y texto. */
}

/* Los select pueden necesitar un ajuste de altura si el padding no se aplica igual que en los inputs */
.form-group select {
    height: calc(1.6em + 1.6em + 2px);
    /* Ajustar a 2*padding + font-size (aproximado) + 2*border */
    /* O un valor fijo si es más simple, ej: height: 45px; */
    /* Esto es para que la altura se asemeje más a los inputs si el padding no lo logra por sí solo */
    line-height: 1.7;
    /* Heredado del body, pero puede ajustarse si el texto no se ve bien centrado verticalmente */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--grey-text);
    opacity: 0.7;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    /* Añadimos select:focus aquí también */
    outline: none;
    border-color: var(--gold);
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
    color: var(--off-white);
    /* ASEGURAMOS QUE EL TEXTO SIGA SIENDO CLARO */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.error-message {
    color: var(--error-red);
    font-size: 0.85rem;
    margin-top: 0.3em;
    display: none;
}

.form-group input.invalid,
.form-group textarea.invalid {
    border-color: var(--error-red);
}

.form-group input.invalid:focus,
.form-group textarea.invalid:focus {
    box-shadow: 0 0 8px rgba(229, 57, 53, 0.3);
}

#form-status-message {
    padding: 1em;
    margin-bottom: 1.5rem;
    border-radius: var(--border-radius-small);
    text-align: center;
    font-weight: 600;
    display: none;
}

#form-status-message.success {
    background-color: rgba(76, 175, 80, 0.2);
    color: var(--success-green);
    border: 1px solid var(--success-green);
}

#form-status-message.error {
    background-color: rgba(229, 57, 53, 0.1);
    color: var(--error-red);
    border: 1px solid var(--error-red);
}

#captcha-container {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    border-radius: var(--border-radius-medium);
    margin-top: 2rem;
}

#captcha-title {
    margin-bottom: 0.5em;
    color: var(--off-white);
}

#captcha-instructions {
    font-size: 0.9rem;
    color: var(--grey-text);
    margin-bottom: 1rem;
}

#captcha-words {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.3rem;
    letter-spacing: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: var(--border-radius-small);
    margin-bottom: 1rem;
    color: var(--light-gold);
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#captcha-container label {
    margin-top: 1rem;
}

.btn-container {
    text-align: center;
    margin-top: 2rem;
}

/* Estilos para el campo de subida de fotos y previsualización */
.form-group input[type="file"] {
    /* Estilos base para el input file, que suele ser difícil de personalizar directamente */
    /* Puedes dejarlo con el estilo por defecto del navegador o intentar ocultarlo
       y usar un label estilizado como botón, pero eso añade complejidad */
    padding: 0.6em;
    /* Algo de padding para que no se vea tan apretado */
    background-color: rgba(0, 0, 0, 0.15);
    /* Un fondo sutil */
    border: 1px solid var(--placeholder-border);
    border-radius: var(--border-radius-small);
    color: var(--grey-text);
    /* Color del texto "Ningún archivo seleccionado" etc. */
    width: 100%;
    /* Ocupa el ancho */
    cursor: pointer;
}

.form-group input[type="file"]::file-selector-button {
    /* Estilizar el botón interno del input file (soporte variable entre navegadores) */
    padding: 0.6em 1em;
    margin-right: 1em;
    background-color: var(--gold);
    color: var(--soft-black);
    border: none;
    border-radius: var(--border-radius-small);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.form-group input[type="file"]::file-selector-button:hover {
    background-color: var(--light-gold);
}

.photo-upload-note {
    font-size: 0.85em;
    color: var(--grey-text);
    margin-top: 8px;
    line-height: 1.4;
}

#file-preview-container {
    display: flex;
    flex-wrap: wrap;
    /* Permite que las previsualizaciones pasen a la siguiente línea */
    gap: 10px;
    /* Espacio entre previsualizaciones */
    margin-top: 15px;
    /* Espacio sobre el contenedor de previsualización */
}

.file-preview-item {
    position: relative;
    /* Para el botón de eliminar */
    width: 100px;
    /* Tamaño de la previsualización */
    height: 100px;
    border: 1px solid var(--placeholder-border);
    border-radius: var(--border-radius-small);
    overflow: hidden;
    /* Para que la imagen no se salga */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    /* Fondo mientras carga o si no es imagen */
}

.file-preview-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /* Cubre el espacio manteniendo la proporción */
}

.file-preview-item .remove-file-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    /* Centra el texto del botón (X) */
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: flex;
    /* Para centrar la X si usas un icono */
    align-items: center;
    justify-content: center;
}

.file-preview-item .remove-file-btn:hover {
    background-color: rgba(200, 0, 0, 0.8);
}

/* Estilo para un placeholder de archivo no imagen (opcional) */
.file-preview-item .file-icon {
    font-size: 3em;
    color: var(--grey-text);
}



/* --- Animaciones Scroll Reveal --- */
/* (Aplicables globalmente) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Sección Próximos Eventos --- */


/* --- Event Card Image Styling --- */

.event-card .event-image-placeholder {
    /* Remove placeholder content */
    background-color: #e0e0e0;
    /* Fallback color */
    background-image: none;
    /* Remove potential animated background if applied */
    padding: 0;
    /* Remove padding used for icon/text */
    display: block;
    /* Ensure it takes block space */
    position: relative;
    /* For potential overlays */
    overflow: hidden;
    /* Hide anything sticking out */

    /* Define background image properties */
    background-size: cover;
    /* Scale the image to cover the area */
    background-position: center center;
    /* Center the image */
    background-repeat: no-repeat;

    /* Define size - Use aspect ratio padding hack or min-height */
    /* Option 1: Minimum Height (Simpler) */
    min-height: 250px;
    /* Adjust height as needed */

    /* Option 2: Aspect Ratio Hack (e.g., for 16:9) - Use if height needs strict ratio */
    /* height: 0; */
    /* padding-top: 56.25%; /* 9 / 16 * 100% */

    /* Hide the original placeholder text and icon */
    &>.placeholder-icon,
    &>p {
        display: none;
    }

    /* Remove the animated background effect if present */
    &.animated-background {
        background-image: none !important;
        /* Override animation */
        animation: none !important;
    }
}

/* --- Estilos Adicionales para Solicitud de Plaza --- */

/* Estilo para el contenedor de checkboxes con label inline (ej. "He leído...") */
.form-group-checkbox-inline {
    display: flex;
    /* Ayuda a alinear el checkbox y el label */
    align-items: flex-start;
    /* Alinea en la parte superior si el label tiene varias líneas */
    margin-bottom: 1.5rem;
    /* Consistente con otros form-group */
}

.form-group-checkbox-inline input[type="checkbox"] {
    margin-right: 10px;
    /* Espacio entre checkbox y label */
    margin-top: 4px;
    /* Ajuste vertical fino para alinear mejor con la primera línea del texto */
    flex-shrink: 0;
    /* Evita que el checkbox se encoja */
}

.form-group-checkbox-inline label {
    display: inline;
    /* Permite que el texto fluya */
    font-weight: normal;
    /* Anula el bold por defecto de los labels si no se quiere */
    font-size: 0.95em;
    /* Ligeramente más pequeño si se prefiere */
    color: var(--off-white);
    /* Asegurar color del texto */
}

.form-group-checkbox-inline label.required::after {
    /* Si quieres que el asterisco aparezca pegado al texto y no al final del bloque */
    display: inline;
}


/* Título para la sección de consentimiento LOPD */
.lopd-consent-title {
    color: var(--light-gold);
    font-family: var(--font-heading);
    /* O la fuente que uses para subtítulos */
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
    /* Tamaño adecuado para un subtítulo de sección */
    margin-bottom: 1em;
    margin-top: 1.5em;
    /* Espacio antes del título */
    border-bottom: 1px solid var(--placeholder-border);
    /* Línea sutil debajo */
    padding-bottom: 0.5em;
}

/* Contenedor de cada item de consentimiento */
.lopd-consent-item {
    margin-bottom: 1.2em;
    display: flex;
    align-items: flex-start;
    /* Mejor para labels multilínea */
}

.lopd-consent-item input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 3px;
    /* Ajuste vertical */
    flex-shrink: 0;
}

/* Labels para los consentimientos LOPD */
.lopd-consent-label {
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--grey-text);
    /* O var(--off-white) si prefieres más contraste */
    font-weight: normal;
    /* Para que no sea bold por defecto */
}

.lopd-consent-label a {
    color: var(--gold);
    /* Enlace destacado */
    text-decoration: underline;
}

.lopd-consent-label a:hover {
    color: var(--light-gold);
}

.lopd-consent-label.required::after {
    /* El asterisco ya debería funcionar si la clase 'required' está en el label */
    /* Puedes ajustar su color o posición si es necesario */
    color: var(--deep-burgundy);
    margin-left: 3px;
}


/* Nota informativa debajo del campo ETS */
.ets-info-note {
    font-size: 0.85em;
    color: var(--grey-text);
    margin-top: 8px;
    line-height: 1.4;
    padding-left: 5px;
    /* Pequeña sangría si se desea */
}

/* Contenedor del botón de pago y su texto */
.payment-button-container {
    margin-top: 2.5rem;
    text-align: center;
    /* Asegura que el botón (si es inline-block) y el texto se centren */
}

/* Texto de aviso debajo del botón de pago */
.payment-disclaimer {
    font-size: 0.85em;
    color: var(--grey-text);
    margin-top: 1.2rem;
    line-height: 1.6;
    max-width: 500px;
    /* Limita el ancho para mejor legibilidad */
    margin-left: auto;
    margin-right: auto;
}

/* Ajuste para el label 'required' del input[type="checkbox"] de lectura_actividades */
/* Asegúrate de que el HTML tiene <div class="form-group form-group-checkbox-inline"> para el checkbox de lectura_actividades */
/* y que el label tiene la clase 'required' */
.form-group-checkbox-inline label.required::after {
    /* Por defecto, los ::after en labels se muestran. Esto es para asegurar consistencia. */
    content: '*';
    color: var(--deep-burgundy);
    margin-left: 4px;
}

/* Si quieres que los inputs de checkbox no hereden el padding del form-group general: */
.form-group input[type="checkbox"] {
    width: auto;
    /* Ancho automático */
    padding: 0;
    /* Sin padding interno */
    margin-right: 8px;
    /* Espacio a la derecha */
    vertical-align: middle;
    /* Alineación vertical */
    /* Puedes necesitar !important si otros estilos son muy específicos */
}




/* Assign specific images to each event card */
/* Make sure the paths ('../img/') are correct relative to your CSS file */

/* Evento Ibiza */
.event-card:nth-of-type(1) .event-image-placeholder {
    /* Or add a specific class like .event-ibiza */
    background-image: url(/img/event-ibiza.jpg);
}

/* Evento Paris */
.event-card:nth-of-type(2) .event-image-placeholder {
    /* Or add a specific class like .event-paris */
    background-image: url(/img/event-ibiza2.jpg);
}

/* Evento Frankfurt */
.event-card:nth-of-type(3) .event-image-placeholder {
    /* Or add a specific class like .event-frankfurt */
    background-image: url(/img/event-ibiza3.jpg);
}

/* Evento Roma */
.event-card:nth-of-type(4) .event-image-placeholder {
    /* Or add a specific class like .event-rome */
    background-image: url('../img/event-roma.jpg');
    /* Assuming image name is event-roma.jpg */
}













/* (Estilos para la página de eventos si existe, o una sección) */
.event-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.event-card {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--placeholder-border);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-medium);
    box-shadow: var(--shadow-subtle);
}

.event-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium), 0 0 15px rgba(212, 175, 55, 0.2);
    border-color: rgba(212, 175, 55, 0.4);
}

.event-image-placeholder {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    border-bottom: 1px solid var(--placeholder-border);
    min-height: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    /* Re-aplica estilos comunes de placeholder si es necesario */
    border: 1px solid var(--placeholder-border);
    background-color: var(--placeholder-bg);
    color: var(--grey-text);
    font-style: italic;
    position: relative;
    overflow: hidden;
}

.event-image-placeholder p {
    font-size: 0.85rem;
}

.event-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.event-content h3 {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    color: var(--off-white);
    margin-bottom: 0.5em;
}

.event-content h3 span {
    color: var(--gold);
    font-style: normal;
    font-weight: 700;
    display: block;
    font-size: 0.9em;
    margin-top: 0.2em;
}

.event-date-status {
    font-size: 0.9rem;
    color: var(--grey-text);
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
}

.event-status {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: var(--border-radius-small);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-status.open {
    background-color: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.event-status.soon {
    background-color: rgba(255, 167, 38, 0.15);
    color: #ffb74d;
    border: 1px solid rgba(255, 167, 38, 0.3);
}

.event-description {
    font-size: clamp(0.9rem, 1.6vw, 1rem);
    color: var(--off-white);
    line-height: 1.6;
    margin-bottom: 1.5em;
    flex-grow: 1;
}

.event-card .btn {
    margin-top: auto;
    align-self: flex-start;
}

.btn-disabled {
    border-color: var(--grey-text);
    color: var(--grey-text);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-disabled::before {
    display: none;
}

.btn-disabled:hover {
    color: var(--grey-text);
    box-shadow: none;


}



/* --- Banner de Consentimiento de Cookies --- */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(20, 20, 20, 0.95);
    /* Un poco más oscuro que el header para destacar */
    color: var(--grey-text);
    padding: 1.2rem clamp(1rem, 5vw, 4rem);
    /* Padding responsivo */
    z-index: 2000;
    /* Muy alto para estar por encima de todo */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--placeholder-border);
    font-size: clamp(0.85rem, 1.6vw, 0.95rem);
    /* Tamaño de fuente responsivo */
    line-height: 1.6;
    display: flex;
    /* Para centrar el contenido si es necesario */
    justify-content: center;
    align-items: center;
    /* Animación sutil al aparecer */
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}

.cookie-consent-banner.visible {
    transform: translateY(0);
}

.cookie-consent-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    max-width: 1100px;
    /* Límite para que no sea demasiado ancho en pantallas grandes */
    text-align: center;
}

.cookie-consent-content p {
    margin-bottom: 0.5em;
    /* Menos margen para el párrafo dentro del banner */
    color: var(--grey-text);
}

.cookie-consent-content a {
    color: var(--gold);
    text-decoration: underline;
    font-weight: 500;
    /* Un poco más de énfasis */
}

.cookie-consent-content a:hover {
    color: var(--light-gold);
}

.cookie-consent-actions {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
    /* Para que los botones se ajusten en pantallas pequeñas */
    justify-content: center;
}

.btn-cookie-accept,
.btn-cookie-manage {
    /* Hereda de .btn y .btn-small, pero podemos ajustar aquí */
    padding: 0.6em 1.2em;
    /* Un poco más pequeños que el .btn-small general */
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.btn-cookie-accept {
    background-color: var(--gold);
    /* Botón principal destacado */
    color: var(--soft-black);
    border-color: var(--gold);
}

.btn-cookie-accept:hover {
    background-color: var(--light-gold);
    border-color: var(--light-gold);
    color: var(--soft-black);
}

.btn-cookie-manage {
    background-color: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    /* Borde más sutil */
}

.btn-cookie-manage:hover {
    background-color: rgba(212, 175, 55, 0.1);
    /* Fondo sutil dorado al pasar el ratón */
    color: var(--light-gold);
    border-color: var(--light-gold);
}

/* Media query para cuando el contenido se apila */
@media (min-width: 769px) {

    /* Ajusta este breakpoint si es necesario */
    .cookie-consent-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .cookie-consent-content p {
        margin-right: 1.5rem;
        /* Espacio entre texto y botones */
        margin-bottom: 0;
        /* Quitar margen inferior si está en línea */
    }

    .cookie-consent-actions {
        margin-top: 0;
        flex-shrink: 0;
        /* Evita que los botones se encojan demasiado */
    }
}

/* --- Media Queries (Responsividad) --- */
@media (max-width: 992px) {
    .text-image-container {
        flex-direction: column !important;
        gap: 2rem;
    }

    .text-image-container .text-container,
    .para-ellos .text-container {
        text-align: center;
    }

    .text-image-container h2,
    .para-ellos .text-container h2 {
        text-align: center;
    }

    .element .element-content,
    .element.reverse-layout .element-content {
        flex-direction: column;
        align-items: center;
    }

    .element-text {
        text-align: center;
    }

    .image-gallery {
        margin-top: 1.5rem;
    }

    .grid-gallery .gallery-placeholder {
        width: calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 1.7rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    .menu-toggle {
        display: block;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        flex-direction: column;
        background-color: rgba(26, 26, 26, 0.98);
        width: 80%;
        max-width: 300px;
        height: 100vh;
        padding: 6rem 2rem 2rem 2rem;
        transition: right 0.4s ease-in-out;
        gap: 1.5rem;
        align-items: flex-start;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.4);
        border-left: 1px solid rgba(212, 175, 55, 0.1);
        z-index: 1050;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu li a {
        font-size: 1.1rem;
        padding: 0.8em 0;
        width: 100%;
    }

    .nav-menu li a::after {
        left: 0;
        transform: translateX(0);
    }

    .logo-column img {
        max-width: 160px;
    }

    #main-header {
        padding: 0.5rem clamp(1rem, 5vw, 2rem);
    }

    .hero-section {
        min-height: unset;
        /*padding: 3rem 1rem;*/
    }

    /* Ajusta padding y altura en móvil */

    #countdown {
        gap: 0.5rem;
    }

    .countdown-item {
        padding: 0.8rem 1rem;
        min-width: 75px;
    }

    .countdown-item span {
        font-size: 1.8rem;
    }

    .countdown-item p {
        font-size: 0.7rem;
    }

    .precios-container {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .container {
        width: 95%;
    }

    .form-container {
        padding: 1.5rem;
    }

    .btn {
        padding: 0.7em 1.5em;
        font-size: 0.9rem;
    }

    .precios-container {
        gap: 1rem;
    }

    .precio-box {
        padding: 1.5rem 1rem;
    }

    #captcha-words {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .hero-section {
        padding: 2rem 0.5rem;
    }

    .countdown-item {
        padding: 0.6rem 0.8rem;
        min-width: 65px;
    }

    .countdown-item span {
        font-size: 1.5rem;
    }

    .event-list {
        gap: 1.5rem;
    }

    .event-content {
        padding: 1rem;
    }

    .event-date-status {
        flex-direction: column;
        align-items: flex-start;
    }
}