/* ==========================================================================
   VARIABLES Y RESET FUNDAMENTALES
   ========================================================================== */
:root {
    /* Paleta de colores principal (consistente con tu elección) */
    --primary-color: #EC3FDA; /* Rosa Principal */
    --secondary-color: #a83af1; /* Morado Secundario */
    --accent-color: #ffd700; /* Amarillo Acento */
    --dark-color: #000000; /* Negro Profundo */
    --light-color: #ffffff; /* Blanco Puro */
    
    /* Extras */
    --rgb-primary-color: 236, 63, 218;   /* #EC3FDA */
    --rgb-secondary-color: 168, 58, 241; /* #a83af1 */
    --rgb-accent-color: 255, 215, 0;     /* #ffd700 */
    
    /* Tonos de texto */
    --text-color-light: #f0f0f0; /* Texto claro sobre fondos oscuros */
    --text-color-dark: #333333;  /* Texto oscuro sobre fondos claros */
    --text-color-muted: #777777; /* Texto para detalles o menos énfasis */

    /* Fuentes Tipográficas */
    --font-display: 'Dancing Script', cursive; /* Para títulos grandes y decorativos */
    --font-heading: 'Montserrat', sans-serif;   /* Para encabezados de sección y subtítulos */
    --font-body: 'Poppins', sans-serif;        /* Para el cuerpo del texto y párrafos */

    /* Degradados Mejorados */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, #6a0dad 100%); /* Morado más oscuro */
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #ff8a00 100%); /* Amarillo a Naranja */
    --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, var(--dark-color) 100%); /* Negro sutil */
    --gradient-bg-section: linear-gradient(to bottom, rgba(26, 26, 46, 0.02) 0%, rgba(26, 26, 46, 0.05) 100%);

    /* Sombras Suavizadas y con Profundidad */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.3);
    
    --shadow-primary-glow: 0 0 15px var(--primary-color), 0 0 30px var(--primary-color);
    --shadow-secondary-glow: 0 0 15px var(--secondary-color), 0 0 30px var(--secondary-color);
    --shadow-accent-glow: 0 0 15px var(--accent-color), 0 0 30px var(--accent-color);

    /* Transiciones Fluidas */
    --transition-fast: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Radios de Borde */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-circle: 50%;

    /* Espaciado */
    --spacing-xs: 0.5rem;  /* 8px */
    --spacing-sm: 1rem;    /* 16px */
    --spacing-md: 1.5rem;  /* 24px */
    --spacing-lg: 2rem;    /* 32px */
    --spacing-xl: 3rem;    /* 48px */
    --section-padding: 100px 0;
}

/* Reset Básico y Estilos Globales */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base para REM */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

html{
  scroll-behavior: smooth;
}


body {
    
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-color-light);
    background-color: rgba(10, 10, 10, 0.9);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.3;
    margin-bottom: var(--spacing-md);
    color: var(--text-color-light);
}

h1 { font-size: 3.5rem; font-family: var(--font-display); } /* 56px */
h2 { font-size: 2.5rem; } /* 40px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.25rem; } /* 20px */

p {
    margin-bottom: var(--spacing-sm);
    color: var(--text-color-light);
}

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

a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

/* Contenedor principal para secciones */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

/* Estilos de Sección Base */
section {
    padding: var(--section-padding);
    position: relative;
    overflow: hidden; /* Evitar desbordamientos por animaciones */
}

/* Encabezado de Sección Estilizado */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    position: relative;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: 3.5rem; /* Aumentado para más impacto */
    font-weight: 700;
    color: var(--light-color);
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
    padding-bottom: var(--spacing-xs);
    text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--secondary-color);
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gradient-accent);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-accent-glow);
}

.header-decoration { /* Usado en HTML, mejorado */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--spacing-xs); /* Reducir espacio si h2 ya tiene ::after */
}

.header-decoration .decoration-line {
    width: 60px;
    height: 2px;
    background: var(--primary-color);
    opacity: 0.5;
}

.header-decoration .decoration-icon {
    margin: 0 var(--spacing-sm);
    color: var(--accent-color);
    font-size: 1.5rem;
    opacity: 0.8;
}

/* ==========================================================================
   PRELOADER CON SOBRE ANIMADO
   ========================================================================== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-color); /* Fondo oscuro sólido */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}

.preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.invitation-envelope {
    position: relative;
    width: 220px; /* Un poco más grande */
    height: 140px;
    margin-bottom: var(--spacing-lg);
}

.envelope {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    z-index: 1;
    transform-origin: bottom center;
    animation: envelopeFlap 2.5s ease-in-out infinite; /* Animación de la solapa */
}

.envelope::before, .envelope::after { /* Crear solapas del sobre */
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    z-index: 0; /* Detrás de la carta */
}
.envelope::before { /* Solapa superior */
    top: 0;
    left: 0;
    border-width: 70px 110px 0 110px; /* Mitad de height, mitad de width */
    border-color: var(--secondary-color) transparent transparent transparent;
    transform-origin: top center;
    animation: envelopeTopFlapOpen 2.5s ease-in-out infinite;
}
.envelope::after { /* Solapa inferior (cuerpo) */
    bottom: 0;
    left:0;
    width: 100%;
    height: 70px;
    background: var(--primary-color);
    border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.letter {
    position: absolute;
    width: 90%;
    height: 80%; /* Un poco más pequeña para que quepa bien */
    background: var(--light-color);
    border-radius: var(--border-radius-sm);
    top: 10%; /* Centrada */
    left: 5%;
    z-index: 2;
    transform: translateY(100%); /* Empieza abajo */
    opacity: 0;
    animation: letterReveal 2.5s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-sm) inset; /* Sombra interna */
}

.letter-content {
    text-align: center;
    padding: var(--spacing-xs);
}

.letter-content h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.letter-content p {
    color: var(--secondary-color);
    font-size: 0.9rem;
    margin: 0;
}

.preloader > p { /* Texto "Cargando la magia..." */
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-color-light);
    margin-top: var(--spacing-md);
    opacity: 0.8;
    letter-spacing: 1px;
    animation: pulseText 1.5s infinite alternate;
}

@keyframes envelopeFlap {
    0%, 10% { transform: perspective(500px) rotateX(0deg); } /* Cerrado */
    40%, 60% { transform: perspective(500px) rotateX(-20deg); } /* Ligeramente abierto */
    90%, 100% { transform: perspective(500px) rotateX(0deg); } /* Cerrado */
}
@keyframes envelopeTopFlapOpen { /* Animación para la solapa superior */
    0%, 10% { transform: perspective(500px) rotateX(0deg); }
    40% { transform: perspective(500px) rotateX(180deg); } /* Solapa abierta */
    60% { transform: perspective(500px) rotateX(180deg); }
    90%, 100% { transform: perspective(500px) rotateX(0deg); }
}

@keyframes letterReveal {
    0%, 20% { transform: translateY(100%); opacity: 0; } /* Empieza abajo y oculta */
    40% { transform: translateY(-10%); opacity: 1; } /* Sube y aparece */
    60% { transform: translateY(0); opacity: 1; } /* Se asienta */
    80%, 100% { transform: translateY(100%); opacity: 0; } /* Vuelve a bajar y ocultarse */
}

@keyframes pulseText {
    from { opacity: 0.5; }
    to { opacity: 1; }
}


/* ==========================================================================
   NAVEGACIÓN FLOTANTE ELEGANTE
   ========================================================================== */
.floating-nav {
    position: fixed;
    top: 50%;
    right: var(--spacing-lg);
    transform: translateY(-50%);
    z-index: 1000;
    background: rgba(20, 20, 30, 0.8); /* Más oscuro y sutil */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-md) var(--spacing-xs);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-medium);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.floating-nav:hover {
    background: rgba(30, 30, 50, 0.9);
    box-shadow: 0 0 30px rgba(var(--rgb-secondary-color), 0.5); /* Usar --secondary-color con opacidad */
}

.floating-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md); /* Más espacio entre íconos */
}

.nav-link {
    color: var(--text-color-light);
    text-decoration: none;
    font-size: 1rem; /* Ajustado para que el span quepa mejor */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden; /* Para efectos internos */
}

.nav-link i {
    font-size: 1.5rem; /* Íconos más grandes */
    margin-bottom: var(--spacing-xs);
    transition: var(--transition-fast);
    z-index: 1;
}

.nav-link span { /* Texto del tooltip */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: absolute;
    left: calc(-100% - var(--spacing-md) - 10px); /* A la izquierda del ícono */
    top: 50%;
    transform: translateY(-50%) translateX(10px); /* Empieza un poco desplazado */
    background-color: var(--dark-color);
    color: var(--light-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    box-shadow: var(--shadow-sm);
    pointer-events: none; /* Evita que el tooltip interfiera con el hover del link */
}

.nav-link:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.nav-link.active i,
.nav-link:hover i {
    color: var(--primary-color);
    transform: scale(1.1); /* Efecto de zoom sutil */
}

.nav-link.active {
    background-color: rgba(255, 77, 141, 0.1); /* Fondo sutil para el activo */
}

/* Eliminado .nav-highlight para simplificar, el estado activo se maneja con color y fondo */

/* ==========================================================================
   SECCIÓN HERO (PRINCIPAL) REMASTERIZADA
   ========================================================================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--spacing-xl) var(--spacing-md);
    background: var(--gradient-dark); /* Usando el degradado oscuro definido */
    text-align: center;
    overflow: hidden;
}

.hero-content {
    max-width: 1000px;
    animation: fadeIn 1.5s ease-out 0.5s both;
}

.main-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 7rem); /* Responsive font size */
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs) var(--spacing-sm);
}

.title-word {
    display: inline-block;
    animation: textPopIn 1s ease-out forwards;
}

.title-word-1 {
    color: var(--primary-color);
    text-shadow: 0 0 8px var(--primary-color), 0 0 15px var(--primary-color), 0 0 25px rgba(255, 77, 141, 0.7);
    animation-delay: 0.8s;
}

.title-word-2 {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-color), 0 0 15px var(--secondary-color), 0 0 25px rgba(168, 58, 241, 0.7);
    animation-delay: 1.2s;
}

.title-separator {
    color: var(--accent-color);
    font-size: clamp(2.5rem, 8vw, 6rem);
    text-shadow: 0 0 8px var(--accent-color), 0 0 15px var(--accent-color);
    animation: scaleIn 1s ease-out 1s forwards;
    margin: 0; /* Eliminado margen original para que el gap controle */
}

.subtitle {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 4vw, 2rem);
    color: var(--text-color-light);
    opacity: 0.9;
    margin-bottom: var(--spacing-lg);
    letter-spacing: 1px;
    animation: fadeInFromBottom 1s ease-out 1.5s both;
}

.date-countdown {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    animation: fadeInFromBottom 1s ease-out 1.8s both;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-lg);
    min-width: 90px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition-medium);
}
.countdown-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.1);
}

.countdown-number {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 700;
    color: var(--light-color);
    line-height: 1;
}

.countdown-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent-color);
    font-weight: 600;
    margin-top: var(--spacing-xs);
}

.hero-image {
    position: relative;
    width: 100%;
    max-width: 700px; /* Ajustado */
    height: auto; /* Altura automática basada en el aspect-ratio */
    aspect-ratio: 16 / 10; /* Proporción para las fotos */
    margin: var(--spacing-xl) auto 0;
    display: flex; /* Para controlar las floating-frame si es necesario */
    justify-content: center;
    align-items: center;
}

.floating-frame {
    position: absolute;
    width: clamp(180px, 30vw, 280px); /* Responsive width */
    height: clamp(250px, 42vw, 390px); /* Responsive height */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl); /* Sombra más pronunciada */
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255,255,255,0.05); /* Fondo sutil para el marco */
}

.frame-left {
    top: 5%;
    left: 5%;
    transform: rotate(-8deg) scale(0.95);
    animation: floatFrame 6s ease-in-out infinite alternate;
    z-index: 1;
}
.frame-left:hover {
    transform: rotate(-5deg) scale(1.05);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.frame-right {
    bottom: 5%;
    right: 5%;
    transform: rotate(8deg) scale(0.95);
    animation: floatFrame 6s ease-in-out infinite alternate-reverse; /* Movimiento opuesto */
    z-index: 2; /* Wendy al frente */
}
.frame-right:hover {
    transform: rotate(5deg) scale(1.05);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: var(--transition-slow);
    filter: contrast(1.1) saturate(1.1); /* Ligeramente más vibrante */
}
.photo:hover {
    transform: scale(1.1);
    filter: contrast(1.2) saturate(1.2) brightness(1.05);
}

/* RUTAS LOCALES PARA IMÁGENES - DEBES CREAR LA CARPETA 'img' Y COLOCAR TUS FOTOS */
.photo-wendy {
    background-image: url('img/hero-wendy.jpg'); /* Reemplaza con tu foto */
}

.photo-ruby {
    background-image: url('img/hero-ruby.jpg'); /* Reemplaza con tu foto */
}

.center-flower { /* Sutil, elegante y animado */
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0; /* Detrás de los marcos */
}
.center-flower::before, .center-flower::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    border-radius: var(--border-radius-circle) var(--border-radius-sm);
    opacity: 0.3;
}
.center-flower::before {
    background: var(--gradient-primary);
    animation: rotateFlower 20s linear infinite, pulseFlower 3s ease-in-out infinite;
}
.center-flower::after {
    background: var(--gradient-accent);
    animation: rotateFlower 25s linear infinite reverse, pulseFlower 3s ease-in-out infinite 0.5s;
    transform: scale(0.8) rotate(45deg);
}

.music-control {
    position: fixed;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    z-index: 1002; /* Aumentamos z-index */
}

@media (max-width: 768px) {
    .music-control {
        bottom: 80px; /* Nueva posición en móvil */
        left: 25px; /* Conserva posición horizontal */
    }
}

.music-control button {
    background: var(--gradient-primary);
    color: var(--light-color);
    border: none;
    padding: 12px 20px;
    border-radius: 30px; /* Redondeo moderado (50px sería perfectamente circular) */
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition-bounce);
    border: 2px solid rgba(255,255,255,0.3); /* Borde sutil */
}

.music-control button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--primary-color);
    border-color: var(--light-color);
}

.music-control button i {
    font-size: 1.1rem;
}


@keyframes textPopIn {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeInFromBottom {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes floatFrame {
    0% { transform: translateY(0px) rotate(-8deg) scale(0.95); }
    50% { transform: translateY(-15px) rotate(-10deg) scale(0.97); }
    100% { transform: translateY(0px) rotate(-8deg) scale(0.95); }
}
@keyframes rotateFlower {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulseFlower {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ==========================================================================
   SECCIÓN NOSOTRAS (ABOUT) CON ESTILO REFINADO
   ========================================================================== */
.about-section {
    background-color: #101015; /* Un poco más claro que el body para diferenciar */
    background-image: var(--gradient-bg-section);
}

.about-content {
    max-width: 1100px;
    margin: 0 auto;
    display: grid; /* Para organizar las tarjetas y la info de familia */
    gap: var(--spacing-xl);
}

.about-card {
    display: flex;
    background: rgba(30, 30, 45, 0.7); /* Fondo oscuro translúcido */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* Para pseudo-elementos decorativos */
}
.about-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.about-card-left { flex-direction: row; }
.about-card-right { flex-direction: row-reverse; }

.card-image {
    flex: 0 0 45%; /* Ancho fijo para la imagen */
    min-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición de zoom más suave */
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); /* Forma angular sutil */
}
.about-card-right .card-image {
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}
.about-card:hover .card-image {
    transform: scale(1.1);
}

/* RUTAS LOCALES PARA IMÁGENES DE "NOSOTRAS" */
.card-image-wendy { background-image: url('img/about-wendy.jpg'); }
.card-image-ruby { background-image: url('img/about-ruby.jpg'); }

.card-content {
    flex: 1;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content h3 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
    color: var(--primary-color);
}
.about-card-right .card-content h3 { color: var(--secondary-color); }

.card-content h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: currentColor; /* Usa el color del h3 */
    border-radius: var(--border-radius-sm);
    opacity: 0.7;
}

.card-content p { /* ESTILO CORREGIDO PARA TEXTO DE DESCRIPCIÓN */
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0; /* Último párrafo no necesita margen inferior */
    color: var(--text-color-dark); /* Texto oscuro sobre el fondo claro de la tarjeta */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo claro para el texto */
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xs) inset;
}

.family-info {
    background: rgba(30, 30, 45, 0.7);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-top: var(--spacing-lg); /* Separación de las tarjetas de Wendy/Ruby */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.family-info h3 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-lg);
}

.parents {
    display: flex;
    justify-content: space-around;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.parent {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(var(--rgb-accent-color), 0.3); /* Usar accent-color */
    flex: 1;
}

.parent h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.parent p {
    font-size: 1rem;
    color: var(--text-color-light);
    margin-bottom: 0;
}

.together-content {
    text-align: center;
    margin-top: var(--spacing-lg);
}
.together-content h3 { /* Estilo para "Hermanas" dentro de family-info */
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}
.together-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-color-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}


/* ==========================================================================
   SECCIÓN EVENTOS CON DISEÑO MAGNÍFICO
   ========================================================================== */
.events-section {
    background-color: #0c0c10; /* Ligeramente diferente del about */
    background-image: var(--gradient-bg-section);
}

.events-container {
    max-width: 1200px;
    margin: var(--spacing-xl) auto 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-xl);
}

.event-card {
    background: rgba(35, 35, 55, 0.7);
    border-radius: var(--border-radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative; /* Para efectos de borde */
}
.event-card::before { /* Borde brillante al hacer hover */
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: inherit;
    border: 2px solid transparent;
    transition: var(--transition-medium);
    pointer-events: none;
    z-index: 1;
}
.event-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}
.event-card:hover::before {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-primary-glow);
}


.event-date {
    position: absolute;
    top: -15px; /* Superponer un poco */
    left: var(--spacing-lg);
    width: 75px;
    height: 75px;
    background: var(--gradient-primary);
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--light-color);
    box-shadow: var(--shadow-md);
    z-index: 2;
    transition: var(--transition-medium);
    border: 2px solid var(--dark-color); /* Borde para destacar */
}
.event-card:hover .event-date {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: var(--shadow-primary-glow);
}

.date-day {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.date-month {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: var(--spacing-xs);
    font-weight: 600;
}

.event-content {
    padding: var(--spacing-xl);
    padding-top: calc(var(--spacing-xl) + 30px); /* Espacio para la fecha */
    flex-grow: 1; /* Para que el contenido ocupe espacio si la tarjeta es más alta */
}

.event-content h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.event-content p {
    margin-bottom: var(--spacing-sm);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    color: var(--text-color-light);
    opacity: 0.9;
}
.event-content p i {
    margin-right: var(--spacing-sm);
    color: var(--accent-color);
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.dress-code {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-sm);
    border-left: 3px solid var(--accent-color);
}
.dress-code h4 {
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dress-code p {
    font-size: 0.9rem;
    margin-bottom: 0;
    color: var(--text-color-light);
}

.event-map-btn {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gradient-accent);
    color: var(--dark-color); /* Texto oscuro sobre acento */
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-fast);
    align-self: flex-start; /* Alineado al inicio si es flex container */
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.event-map-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-accent-glow);
    color: #000; /* Asegurar contraste */
}

/* Itinerario de la Fiesta - Estilo Mejorado */
.itinerary {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: rgba(30, 30, 45, 0.7);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}

.itinerary h3 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-lg);
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md) 0;
    --timeline-gap: 40px; /* separación entre tarjeta y línea morada */
}

.timeline::before { /* Línea central del timeline */
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-primary-glow);
}

.timeline-item {
    position: relative;
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: var(--spacing-lg);

    /* >>> aquí se arregla el espacio respecto a la línea <<< */
    width: calc(50% - var(--timeline-gap));
    margin-left: calc(50% + var(--timeline-gap)); /* por defecto, lado derecho */

    /* >>> aquí centramos todo el contenido de la tarjeta <<< */
    text-align: center;
    transition: var(--transition-medium);
}

.timeline-item:nth-child(odd) { /* Items impares a la izquierda */
    margin-left: 0;
    margin-right: calc(50% + var(--timeline-gap));
}

.timeline-item:hover {
    transform: scale(1.03);
    border-color: var(--primary-color);
}

/* Círculo en la línea central, centrado verticalmente */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border: 3px solid var(--dark-color);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1;
    box-shadow: var(--shadow-accent-glow);
}

/* Ajuste de la posición del círculo para coincidir con la línea morada */
.timeline-item:nth-child(even)::after { 
    left: calc(-1 * var(--timeline-gap) - 9px); 
}
.timeline-item:nth-child(odd)::after { 
    right: calc(-1 * var(--timeline-gap) - 9px); 
}

/* Hora centrada y lejos del círculo */
.timeline-time {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
    display: block;
    text-align: center;
}

/* Título y texto */
.timeline-content h4 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}

.timeline-item:nth-child(odd) .timeline-content h4 {
    color: var(--secondary-color);
}

.timeline-content p {
    font-size: 0.9rem;
    color: var(--text-color-light);
    opacity: 0.8;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Mesa de Regalos */
.gift-info {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: rgba(30, 30, 45, 0.7);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
}
.gift-info h3 {
    text-align: center;
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-lg);
}

.gift-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.gift-option {
    text-align: center;
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255,255,255,0.08);
    transition: var(--transition-medium);
}
.gift-option:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
}

.gift-option i {
    font-size: 2.5rem; /* Iconos más grandes */
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
    transition: var(--transition-fast);
}
.gift-option:hover i {
    transform: scale(1.2) rotate(-10deg);
    filter: drop-shadow(var(--shadow-accent-glow));
}

.gift-option h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}
.gift-option p {
    font-size: 0.9rem;
    color: var(--text-color-light);
    opacity: 0.8;
    margin-bottom: var(--spacing-xs);
}
.gift-option p:last-child { margin-bottom: 0; }

/* Modal de Mapa */
.event-map-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-medium);
    backdrop-filter: blur(8px);
}
.event-map-modal.active { opacity: 1; visibility: visible; }

.map-modal-content {
    position: relative;
    width: 90%;
    max-width: 700px;
    background: var(--dark-color);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-xl);
    animation: scaleInModal 0.5s ease-out forwards;
    border: 1px solid rgba(255,255,255,0.1);
}

.close-map {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    font-size: 2rem;
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition-fast);
    background: none; border: none; padding: 0;
}
.close-map:hover {
    transform: rotate(90deg) scale(1.2);
    color: var(--accent-color);
}

.map-location-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.map-container {
    width: 100%;
    height: 400px;
    background: #222; /* Fondo oscuro para el placeholder del mapa */
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color-muted);
    font-style: italic;
}

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


/* ==========================================================================
   SECCIÓN GALERÍA CON EFECTOS ESPECTACULARES
   ========================================================================== */
.gallery-section {
    background-color: #101015;
    background-image: var(--gradient-bg-section);
}

.gallery-container {
    max-width: 1300px; /* Un poco más ancho para la galería */
    margin: 0 auto;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Items un poco más grandes */
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.gallery-item {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-medium);
    aspect-ratio: 1 / 1; /* Items cuadrados */
    cursor: zoom-in; /* Cursor para indicar click */
    border: 2px solid transparent; /* Borde inicial transparente */
}
.gallery-item:hover {
    transform: scale(1.05) rotate(2deg); /* Ligera rotación al hacer hover */
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color); /* Borde se vuelve visible */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s ease;
    filter: saturate(1);
}
.gallery-item:hover img {
    transform: scale(1.15); /* Zoom más pronunciado en la imagen */
    filter: saturate(1.2) brightness(1.1);
}

.item-overlay {
    position: absolute;
    bottom: 0; /* Siempre visible pero sutil */
    left: 0;
    width: 100%;
    padding: var(--spacing-md);
    background: linear-gradient(to top, rgba(10, 10, 10, 0.9) 0%, transparent 100%);
    transition: var(--transition-medium);
    z-index: 2;
    transform: translateY(100%); /* Oculto por defecto */
    opacity: 0;
}
.gallery-item:hover .item-overlay {
    transform: translateY(0);
    opacity: 1;
}

.item-overlay h3 {
    font-family: var(--font-heading);
    color: var(--light-color);
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.item-overlay p { /* Eliminado en HTML, pero si se añade, aquí estaría el estilo */
    color: rgba(240, 240, 240, 0.8);
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* Icono de zoom (no está en HTML, si se añade) */
.item-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-circle);
    background: rgba(var(--rgb-primary-color), 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
    font-size: 1.8rem;
    opacity: 0;
    transition: var(--transition-fast);
    z-index: 3;
    pointer-events: none; /* Para que no interfiera con el click del item */
}
.gallery-item:hover .item-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hashtag {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: rgba(30,30,45,0.5);
    border-radius: var(--border-radius-md);
}
.hashtag h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--light-color);
    opacity: 0.9;
    margin-bottom: var(--spacing-sm);
}
.hashtag p {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--primary-color);
    text-shadow: var(--shadow-primary-glow);
    margin-bottom: 0;
}

/* Lightbox de la Galería Mejorado */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.9); /* Más oscuro */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Encima de todo */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(10px);
}
.gallery-lightbox.active { opacity: 1; visibility: visible; }

.lightbox-content {
    position: relative;
    max-width: 90vw; /* Responsive width */
    max-height: 90vh; /* Responsive height */
    display: flex;
    align-items: center; /* Centrar la imagen verticalmente */
    animation: fadeInLightbox 0.5s ease-out forwards;
}

.close-lightbox {
    position: fixed; /* Fijo en la pantalla, no relativo al content */
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    color: var(--light-color);
    font-size: 2.5rem;
    cursor: pointer;
    transition: var(--transition-fast);
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    z-index: 2001; /* Encima de la imagen */
}
.close-lightbox:hover {
    color: var(--primary-color);
    transform: rotate(180deg) scale(1.1);
    background: rgba(0,0,0,0.5);
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-xl);
    object-fit: contain; /* Asegura que toda la imagen sea visible */
}

/* ==========================================================================
   GALERÍA - Reposicionamiento de botones de navegación
   ========================================================================== */
/* Contenedor de botones */
.lightbox-nav {
    position: absolute;
    bottom: 20px; /* Pegado al margen inferior */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 30px; /* Separación entre botones */
    z-index: 10;
}

/* Estilo para ambos botones */
.lightbox-prev, 
.lightbox-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.lightbox-prev, 
.lightbox-next {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Efecto hover */
.lightbox-prev:hover, 
.lightbox-next:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}



/* ===== Lightbox cuadrado SOLO en escritorio ===== */
@media (min-width: 769px) {
    .gallery-lightbox .lightbox-content {
        /* Hacemos el contenedor SIEMPRE cuadrado */
        width: min(70vmin, 620px);
        height: min(70vmin, 620px);
        max-width: none;
        max-height: none;
        justify-content: center;
    }

    .gallery-lightbox .lightbox-image {
        /* La imagen rellena el cuadro, tipo portada */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}




/* Ajuste para móviles */
@media (max-width: 768px) {
    .lightbox-nav {
        bottom: 15px;
        gap: 20px;
    }
    
    .lightbox-prev, 
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

@keyframes fadeInLightbox {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   SECCIÓN RSVP (CONFIRMAR) CON FORMULARIO DE LUJO
   ========================================================================== */
.rsvp-section {
    background-color: #0c0c10;
    background-image: var(--gradient-bg-section);
}

.rsvp-container {
    max-width: 900px; /* Un poco más estrecho para centrar el contenido */
    margin: var(--spacing-xl) auto 0;
    display: grid;
    grid-template-columns: 1fr; /* Una columna por defecto */
    gap: var(--spacing-xl);
}

@media (min-width: 768px) { /* En pantallas más grandes, dos columnas */
    .rsvp-container {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         /* Si hay 2 elementos principales (form y trivia/playlist/contact) */
    }
}


.rsvp-form {
    background: rgba(30, 30, 45, 0.8);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden; /* Para el borde animado */
}
.rsvp-form::before { /* Borde animado superior */
    content: '';
    position: absolute;
    top: 0; left: -100%; /* Empieza fuera a la izquierda */
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transition: left 0.5s ease-in-out 0.2s; /* Animación de barrido */
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}
.rsvp-form:hover::before {
    left: 0; /* Barrido al hacer hover */
}


.form-group {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

/* ===== Formulario RSVP rediseñado ===== */

.form-group {
    margin-bottom: var(--spacing-lg);
}

.input-label {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-color-muted);
}

/* Contenedor visual del campo */
.input-shell {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.2rem 0.9rem 2.8rem;
    background: radial-gradient(circle at top left,
        rgba(236, 63, 218, 0.08),
        rgba(10, 10, 18, 0.95));
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-medium);
}

/* Versión para textarea (un poco más alta y flexible) */
.input-shell-textarea {
    align-items: flex-start;
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}

/* Icono dentro del campo */
.input-icon {
    position: absolute;
    left: 1rem;
    font-size: 0.95rem;
    color: var(--accent-color);
    opacity: 0.9;
}

/* Inputs reales */
.input-shell input,
.input-shell textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-color-light);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.input-shell textarea {
    resize: vertical;
    min-height: 90px;
}

/* Placeholder */
.input-shell input::placeholder,
.input-shell textarea::placeholder {
    color: var(--text-color-muted);
    opacity: 0.9;
}

/* Efecto al enfocar */
.input-shell:focus-within {
    border-color: rgba(236, 63, 218, 0.7);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 25px rgba(236, 63, 218, 0.55);
    transform: translateY(-1px);
}

/* ===== Botón de envío brutal ===== */

.submit-btn {
    margin-top: var(--spacing-lg);
    width: 100%;
    padding: 1.1rem 1.6rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--light-color);
    background-image: linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(236, 63, 218, 0.8);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Brillo que cruza el botón */
.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );
    transform: skewX(-20deg);
    opacity: 0;
    transition: left 0.5s ease, opacity 0.5s ease;
}

/* Hover */
.submit-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.7),
        0 0 35px rgba(236, 63, 218, 0.9);
}

.submit-btn:hover::before {
    left: 130%;
    opacity: 1;
}

/* Click */
.submit-btn:active {
    transform: translateY(0) scale(0.99);
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.5),
        0 0 18px rgba(236, 63, 218, 0.7);
}

/* Icono dentro del botón */
.submit-icon i {
    font-size: 1.1rem;
}


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

.form-group label {
    display: none; /* usamos solo el placeholder visualmente */
}

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


/* Ocultamos el placeholder visualmente, solo se usa para :placeholder-shown */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
}

/* Label se mueve arriba si el campo tiene foco o ya tiene texto */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--primary-color);
}


.form-group input:focus,
.form-group textarea:focus {
    border-bottom-color: var(--primary-color); /* Línea se vuelve primaria al enfocar */
}

.underline { /* Efecto de línea que se expande */
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0; /* Empieza sin ancho */
    background: var(--gradient-primary);
    transition: width var(--transition-medium) ease-out;
    z-index: 2; /* Encima de la línea base */
}
.form-group input:focus ~ .underline,
.form-group textarea:focus ~ .underline {
    width: 100%; /* Se expande al enfocar */
}

.submit-btn {
    display: inline-flex; /* Para que el ancho se ajuste al contenido */
    align-items: center;
    justify-content: center;
    width: 100%; /* Ocupa todo el ancho del contenedor del form */
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-primary);
    color: var(--light-color);
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-bounce); /* Transición con rebote */
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}
.submit-btn:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: var(--shadow-primary-glow);
}
.submit-btn:active {
    transform: translateY(-2px) scale(0.98);
}

.submit-btn span { z-index: 1; }
.submit-icon {
    margin-left: var(--spacing-sm);
    font-size: 1.2rem;
    transition: var(--transition-fast);
    z-index: 1;
}
.submit-btn:hover .submit-icon {
    transform: translateX(5px) rotate(15deg);
}

/* Trivia, Playlist, WhatsApp Links */
.trivia-container, .playlist-link, .whatsapp-contact {
    padding: var(--spacing-lg);
    background: rgba(30, 30, 45, 0.7);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition-medium);
}
.trivia-container:hover, .playlist-link:hover, .whatsapp-contact:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-color);
}

.trivia-container h3, .playlist-link h3, .whatsapp-contact h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
}
.playlist-link h3 { color: #1DB954; } /* Color Spotify */
.whatsapp-contact h3 { color: #25D366; } /* Color WhatsApp */

.trivia-container p, .playlist-link p, .whatsapp-contact p {
    font-size: 0.95rem;
    color: var(--text-color-light);
    opacity: 0.9;
    margin-bottom: var(--spacing-md);
}

/* Trivia Específica */
.trivia-question { margin-bottom: var(--spacing-lg); }
.trivia-question p {
    font-weight: 600;
    color: var(--text-color-light);
    margin-bottom: var(--spacing-sm);
}
.trivia-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
.trivia-option {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-light);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: left;
    font-family: var(--font-body);
}
.trivia-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
}
.trivia-option.selected { /* Para cuando se selecciona una opción */
    background: var(--accent-color);
    color: var(--dark-color);
    font-weight: 600;
}

/* Correcta / incorrecta SOLO cuando ya se mandó la trivia */
.trivia-option.correct-revealed {
    background: rgba(40, 167, 69, 0.3);  /* Verde */
    border-color: rgba(40, 167, 69, 0.7);
}

.trivia-option.wrong-revealed {
    background: rgba(220, 53, 69, 0.25); /* Rojo */
    border-color: rgba(220, 53, 69, 0.7);
}


#submitTrivia { /* Botón de Trivia usa la clase .submit-btn pero puede tener variaciones */
    margin-top: var(--spacing-lg);
    background: var(--gradient-accent);
    color: var(--dark-color);
}
#submitTrivia:hover { box-shadow: var(--shadow-accent-glow); }

/* Leaderboard */
.leaderboard { margin-top: var(--spacing-lg); }
.leaderboard-header, .leaderboard-item {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}
.leaderboard-header { font-weight: bold; color: var(--accent-color); }
.leaderboard-content { margin-top: var(--spacing-sm); }
.leaderboard-item:last-child { border-bottom: none; }


/* Contenedor de resultados centrado */
.trivia-results {
    margin-top: var(--spacing-xl);
    text-align: center;
}

/* Centrar la tabla de posiciones */
.trivia-results .leaderboard {
    max-width: 420px;
    margin: 0 auto;          /* centra el bloque */
}

/* Que los textos dentro queden centrados también */
.leaderboard-header,
.leaderboard-item {
    text-align: center;
    justify-items: center;
}


/* Botones de Playlist y WhatsApp */
/* ===== Botón de Spotify ===== */
.playlist-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px; /* Redondeo moderado (antes era 50px) */
    font-weight: 600;
    font-family: var(--font-heading);
    text-decoration: none;
    transition: var(--transition-medium);
    margin-top: 12px;
    box-shadow: var(--shadow-sm);
    background: #1DB954; /* Verde Spotify */
    color: white;
    border: 2px solid transparent;
}


/* ===== Botón para subir fotos ===== */
.photos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 999px; /* Súper redondo, estilo premium */
    font-weight: 700;
    font-family: var(--font-heading);
    text-decoration: none;
    margin-top: 16px;
    box-shadow: var(--shadow-lg);
    background: var(--gradient-primary);
    color: var(--light-color);
    border: 2px solid rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.95rem;
    transition: var(--transition-bounce);
}

.photos-btn i {
    font-size: 1.2rem;
}

.photos-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: var(--shadow-primary-glow);
    border-color: var(--accent-color);
}

.photos-btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: var(--shadow-sm);
}


/* ===== Botón de WhatsApp ===== */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px; /* Igual que Spotify */
    font-weight: 600;
    font-family: var(--font-heading);
    text-decoration: none;
    transition: var(--transition-medium);
    margin-top: 12px;
    box-shadow: var(--shadow-sm);
    background: #25D366; /* Verde WhatsApp */
    color: white;
    border: 2px solid transparent;
}

/* ===== Efectos al pasar el mouse ===== */
.playlist-btn:hover, 
.whatsapp-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    border-color: white; /* Borde blanco al hover */
}

/* ===== Versión móvil ===== */
@media (max-width: 768px) {
    .playlist-btn, 
    .whatsapp-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}


/* ==========================================================================
   FOOTER CON DISEÑO ELEGANTE
   ========================================================================== */
.footer-section {
        padding-bottom: 100px; /* Espacio extra para los botones flotantes */
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-lg);
    background: var(--gradient-dark); /* Un degradado sutil para el footer */
    color: var(--text-color-light);
    text-align: center;
    position: relative;
}

@media (max-width: 768px) {
    .footer-section {
        padding-bottom: 160px !important; /* Más espacio en móvil */
    }
}

.footer-section::before { /* Elemento decorativo superior */
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 5px;
    background: var(--gradient-primary);
    opacity: 0.5;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    align-items: center; /* Alinear verticalmente los items */
}

.footer-names h3 {
    font-family: var(--font-display);
    font-size: 3rem; /* Más grande y llamativo */
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color); /* Usar color primario */
    text-shadow: var(--shadow-primary-glow);
}
.footer-names p {
    font-size: 1rem;
    font-family: var(--font-heading);
    opacity: 0.8;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.footer-details p {
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    color: var(--text-color-light);
    opacity: 0.9;
}
.footer-details i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}
.social-icon {
    width: 45px;
    height: 45px;
    border-radius: var(--border-radius-circle);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-color-light);
    transition: var(--transition-bounce);
    box-shadow: var(--shadow-sm);
    border: 1px solid transparent;
}
.social-icon:hover {
    transform: translateY(-5px) scale(1.15) rotate(10deg);
    background: var(--primary-color);
    box-shadow: var(--shadow-primary-glow);
    color: var(--light-color);
    border-color: var(--light-color);
}

.footer-copyright {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.footer-copyright p {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}
.footer-copyright i.fa-heart { color: var(--primary-color); animation: pulseHeart 1.5s infinite; }

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

/* ==========================================================================
   CONTADOR (COUNTDOWN) - Ajuste para móviles
   ========================================================================== */
.date-countdown {
    display: flex;
    justify-content: center;
    gap: 0.5rem; /* Reducimos el espacio entre elementos */
    margin: 1.5rem auto;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
}

.countdown-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.8rem; /* Reducimos el padding */
    border-radius: 12px;
    min-width: 70px; /* Ancho mínimo reducido */
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.countdown-number {
    font-size: clamp(1.8rem, 8vw, 2.5rem); /* Tamaño más ajustado */
    font-weight: 700;
    color: var(--light-color);
    line-height: 1;
}

.countdown-label {
    font-size: 0.7rem; /* Texto más compacto */
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-color);
    margin-top: 0.3rem;
}

/* Ajustes específicos para pantallas muy pequeñas */
@media (max-width: 480px) {
    .date-countdown {
        gap: 0.3rem;
        margin: 1rem auto;
    }
    
    .countdown-item {
        min-width: 60px;
        padding: 0.6rem;
    }
    
    .countdown-number {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    
    .countdown-label {
        font-size: 0.6rem;
    }
}


/* ==========================================================================
   BOTÓN VOLVER ARRIBA
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius-circle);
    background: var(--gradient-primary);
    color: var(--light-color);
    border: none;
    font-size: 1.5rem; /* Icono más grande */
    cursor: pointer;
    transition: var(--transition-medium);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 999;
}

@media (max-width: 768px) {
    .back-to-top {
        bottom: 80px; /* Igual que el botón de música */
        right: 25px; /* Conserva posición horizontal */
    }
}

.back-to-top.active { opacity: 1; visibility: visible; }
.back-to-top:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: var(--shadow-primary-glow);
}

/* ==========================================================================
   ESTILOS PARA ELEMENTOS GENERADOS POR JS (Alertas, Confeti)
   ========================================================================== */
/* Alertas del Formulario RSVP */
.alert-box {
    position: fixed;
    top: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--light-color);
    z-index: 2000; /* Encima de casi todo */
    box-shadow: var(--shadow-lg);
    opacity: 0;
    animation: showAlertBox 0.5s ease-out forwards, hideAlertBox 0.5s ease-in 3s forwards;
    min-width: 250px;
    text-align: center;
}
.alert-box.success { background-color: #28a745; /* Verde éxito */ }
.alert-box.error { background-color: #dc3545; /* Rojo error */ }

@keyframes showAlertBox {
    from { top: 0; opacity: 0; }
    to { top: var(--spacing-lg); opacity: 1; }
}
@keyframes hideAlertBox {
    from { opacity: 1; top: var(--spacing-lg); }
    to { opacity: 0; top: -50px; }
}

/* Confeti (estilo base, JS maneja animación y posicionamiento) */
.confetti { /* Usado por la función specialEffects en JS */
    position: absolute; /* JS lo posicionará dentro del botón */
    width: 8px;
    height: 8px;
    opacity: 0.8;
    pointer-events: none; /* Para que no interfiera */
    z-index: 10; /* Encima del contenido del botón */
}


/* ==========================================================================
   ANIMACIONES PERSONALIZADAS (Revisadas y algunas nuevas)
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animaciones de entrada para secciones (usadas por JS con Intersection Observer) */
@keyframes slideInFromLeft {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromRight {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInFromBottom { /* Renombrado de fadeInFromBottom para claridad */
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Efecto Flicker para Neón (si se usa directamente en CSS) */
@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 1;
        text-shadow: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 40px var(--secondary-color), 0 0 80px var(--secondary-color);
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.7;
        text-shadow: 0 0 3px var(--primary-color), 0 0 8px var(--primary-color), 0 0 15px var(--secondary-color);
    }
}

/* Efecto Ripple para botones (JS crea el span .ripple) */
.ripple {
    position: absolute;
    border-radius: var(--border-radius-circle);
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: rippleEffect 0.7s linear;
    pointer-events: none;
}
@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ==========================================================================
   DISEÑO RESPONSIVE (Ajustes Adicionales)
   ========================================================================== */

/* Base (ya definido arriba) */

@media (max-width: 992px) { /* Tablets y escritorios pequeños */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    .section-header h2 { font-size: 3rem; }
    .main-title { font-size: clamp(2.5rem, 8vw, 5rem); }
    .subtitle { font-size: clamp(1rem, 3vw, 1.5rem); }

    .floating-nav {
        right: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-xs);
    }
    .floating-nav ul { gap: var(--spacing-sm); }
    .nav-link i { font-size: 1.3rem; }

    .about-card { flex-direction: column; }
    .about-card-right { flex-direction: column; } /* Mantiene consistencia */
    .card-image {
        flex-basis: 250px; /* Altura fija para la imagen en modo columna */
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%); /* Ajuste de clip-path */
    }
    .about-card-right .card-image {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
    }
    .card-content { padding: var(--spacing-lg); }

    .timeline::before { left: 20px; transform: translateX(0); }
    .timeline-item, .timeline-item:nth-child(odd) {
        width: calc(100% - 40px - var(--spacing-xl)); /* Ajustar ancho para layout izquierdo */
        margin-left: calc(20px + var(--spacing-xl));
        margin-right: 0;
        text-align: left; /* Todos a la izquierda */
    }
    .timeline-item::after, .timeline-item:nth-child(odd)::after {
        left: -9px; /* Ajustar posición del círculo */
        right: auto;
        top: 20px; /* Alinear con el tiempo o título */
        transform: translateY(0);
    }
    .timeline-item:nth-child(odd) .timeline-content h4 { color: var(--primary-color); } /* Mismo color */
}


/* ===== Versión para Móvil (nuevo estilo) ===== */
@media (max-width: 768px) {
    .floating-nav {
        top: auto;
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 90%;
        max-width: 300px;
        padding: 10px;
        border-radius: 12px; /* Esquinas ligeramente redondeadas (como en PC) */
        flex-direction: row;
        justify-content: space-around;
    }

    .floating-nav ul {
        flex-direction: row;
        gap: 8px;
        width: 100%;
        justify-content: space-evenly;
    }

    .nav-link {
        padding: 10px 12px;
        flex-direction: column;
        border-radius: 8px;
    }

    .nav-link i {
        margin-bottom: 0;
        font-size: 1.2rem;
    }

    .nav-link span {
        display: none; /* Ocultar texto en móvil */
    }
}

/* ==========================================================================
   MODAL DE CONSENTIMIENTO MUSICAL
   ========================================================================== */
.music-consent-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 1.5s forwards; /* Aparece después del preloader */
}

.consent-content {
    background: linear-gradient(135deg, rgba(50, 30, 70, 0.95) 0%, rgba(20, 20, 40, 0.95) 100%);
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    animation: slideUp 0.6s ease-out 1.8s forwards;
    border: 1px solid var(--primary-color);
}

.consent-header {
    margin-bottom: 20px;
}

.consent-header h3 {
    font-family: var(--font-display);
    color: var(--accent-color);
    margin-top: 15px;
    font-size: 1.8rem;
}

.consent-header .pulse-icon {
    font-size: 3rem;
    color: var(--primary-color);
    animation: pulse 2s infinite;
}

.consent-content p {
    color: var(--text-color-light);
    margin-bottom: 25px;
    font-size: 1.1rem;
    line-height: 1.6;
}

.consent-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.consent-btn {
    padding: 12px 25px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-bounce);
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

#consent-yes {
    background: var(--gradient-primary);
    color: white;
}

#consent-no {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color-light);
}

.consent-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

/* Animaciones personalizadas */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

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


/* ==========================================================================
   TÍTULO PRINCIPAL Y HERO SECTION - Versión móvil corregida
   ========================================================================== */

/* Tamaño base para todos los dispositivos */
.main-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 15vw, 9rem);
    margin-bottom: var(--spacing-sm);
    line-height: 1.1;
    text-align: center;
    padding: 0 var(--spacing-md);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Ajuste para tablets */
@media (max-width: 768px) {
    .main-title {
        font-size: clamp(3.5rem, 18vw, 8rem);
        margin-top: var(--spacing-lg);
    }
    
    .subtitle {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }
}

/* Ajuste para móviles pequeños (menos de 480px) */
@media (max-width: 480px) {
    .main-title {
        font-size: clamp(3rem, 16vw, 7rem) !important;
        letter-spacing: -1px;
    }
    
    .subtitle {
        font-size: clamp(1.3rem, 5vw, 2rem);
    }
    
    .title-word,
    .title-separator {
        display: inline-block;
        font-size: inherit !important;
    }
    
    .hero-image {
        width: 90%;
        max-width: 320px;
        height: 280px;
    }
}

/* ==========================================================================
   ESTILOS PARA MAPAS
   ========================================================================== */
.map-container {
    width: 100%;
    height: 400px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.map-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 45, 0.8);
    color: var(--accent-color);
    z-index: 2;
}

.map-loading i {
    font-size: 3rem;
    margin-bottom: 15px;
    animation: pulse 1.5s infinite;
}

/* Ajustes de mapas para móvil */
@media (max-width: 768px) {
    .map-container {
        height: 300px;
    }
    
    .map-loading i {
        font-size: 2rem;
    }
}

/* ====== FIX ITINERARIO ESCRITORIO Y MÓVIL (OVERRIDE) ====== */

/* --- Desktop / Laptop (>=769px) --- */
@media (min-width: 769px) {
    .timeline {
        position: relative;
        max-width: 900px;
        margin: 0 auto;
        padding: var(--spacing-md) 0;
    }

    .timeline::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 3px;
        background: var(--gradient-primary);
        transform: translateX(-50%);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-primary-glow);
    }

    .timeline-item {
        position: relative;
        width: calc(50% - 60px); /* espacio respecto a la línea morada */
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-md) var(--spacing-xl);
        background: rgba(255, 255, 255, 0.05);
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-sm);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: var(--transition-medium);
    }

    /* Lado izquierdo */
    .timeline-item:nth-child(odd) {
        margin-right: auto;
        margin-left: 0;
        text-align: right;
    }

    /* Lado derecho */
    .timeline-item:nth-child(even) {
        margin-left: auto;
        margin-right: 0;
        text-align: left;
    }

    /* Punto de la línea */
    .timeline-item::after {
        content: '';
        position: absolute;
        top: 24px; /* alineado con la hora */
        width: 18px;
        height: 18px;
        background: var(--accent-color);
        border: 3px solid var(--dark-color);
        border-radius: 50%;
        box-shadow: var(--shadow-accent-glow);
        z-index: 2;
    }

    .timeline-item:nth-child(odd)::after {
        right: -40px; /* despega bien del rectángulo hacia la línea */
    }

    .timeline-item:nth-child(even)::after {
        left: -40px;
    }

    /* Hora centrada dentro de la tarjeta (ya no debajo del punto) */
    .timeline-time {
        display: block;
        text-align: center;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--accent-color);
        margin-bottom: var(--spacing-xs);
    }
    
    
        /* Centrar TODO el contenido dentro de cada tarjeta del timeline */
    .timeline-item {
        text-align: center;
    }

    .timeline-time {
        text-align: center;
    }

    .timeline-content {
        text-align: center;
    }

    .timeline-content h4,
    .timeline-content p {
        margin-left: auto;
        margin-right: auto;
    }
    
}

/* --- Móvil / Tablet pequeña (<=768px) --- */
@media (max-width: 768px) {
    .timeline {
        max-width: 100%;
        margin: 0 auto;
        padding: var(--spacing-md) 0;
    }

    .timeline::before {
        left: 20px;          /* línea al lado izquierdo */
        transform: none;
    }

    /* Todas las tarjetas del mismo lado, como antes */
    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        width: auto;
        margin-left: 40px;   /* espacio desde la línea hacia la tarjeta */
        margin-right: 0;
        margin-bottom: var(--spacing-lg);
        text-align: left;
    }

    .timeline-item::after,
    .timeline-item:nth-child(odd)::after,
    .timeline-item:nth-child(even)::after {
        left: -30px;         /* pegado a la línea, sin tocar texto */
        right: auto;
        top: 20px;
    }

    .timeline-time {
        text-align: left;    /* en móvil la hora queda a la izquierda del texto */
    }
}

/* ==== FORZAR VISIBILIDAD DE LOS LABELS NUEVOS ==== */

.input-label {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 6px !important;
    font-size: 0.9rem !important;
    color: var(--text-color-light) !important;
    pointer-events: auto !important;
}

/* Desactivar totalmente cualquier comportamiento flotante viejo */
.form-group label {
    position: relative !important;
    transform: none !important;
}

.form-group input:focus ~ label,
.form-group input:valid ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:valid ~ label {
    transform: none !important;
}

.photos-btn,
.photos-btn:hover,
.photos-btn:focus,
.photos-btn:active {
    text-decoration: none !important;
}

/* ===========================
   FIX ETIQUETA DE PUNTO – PC
=========================== */

@media (min-width: 769px) {
    .timeline-item {
        position: relative;
        width: 45%;
    }

    .timeline-item.left .timeline-content {
        margin-left: 0;
        margin-right: auto;
    }

    .timeline-item.right .timeline-content {
        margin-left: auto;
        margin-right: 0;
    }

    /* Ajustar el punto para que "pegue" al rectángulo */
    .timeline-time::before {
        content: "";
        width: 16px;
        height: 16px;
        background: #FFD700;
        border: 3px solid #000;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 12px #ffd700;
        z-index: 10;
    }

    /* Punto pegado al borde del rectángulo izquierdo */
    .timeline-item.left .timeline-time::before {
        right: -18px; /* se pega al borde derecho del rectángulo */
    }

    /* Punto pegado al borde del rectángulo derecho */
    .timeline-item.right .timeline-time::before {
        left: -18px; /* se pega al borde izquierdo del rectángulo */
    }
}

/* Quitar los puntos viejos de la línea vertical */
.timeline-item::before {
    display: none !important;
}

/* Puntito tipo etiqueta dentro de la tarjeta (versión PC) */
@media (min-width: 769px) {
    .timeline-time {
        position: relative;
        padding-left: 28px; /* espacio para el punto */
        text-align: left;   /* la hora alineada a la izquierda */
    }

    .timeline-time::before {
        content: "";
        position: absolute;
        left: 0;            /* pegado al borde izquierdo del rectángulo */
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ffd700;
        border: 2px solid #000;
        box-shadow: 0 0 12px #ffd700;
        z-index: 2;
    }
}

.timeline-content::before {
    display: none !important;
}

/* Puntos grandes ajustados según tu imagen */
.timeline-item::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: yellow;
    border-radius: 50%;
    box-shadow: 0 0 12px yellow;
}

/* Para los elementos de la izquierda */
.timeline-item.left::before {
    right: -35px; /* mueve el punto justo al borde del rectángulo */
}

/* Para los elementos de la derecha */
.timeline-item.right::before {
    left: -35px; /* alineado como los puntos rojos que marcaste */
}

/* =========================================================
   ARREGLO FINAL ITINERARIO (PUNTOS GRANDES / SIN PUNTOS CHICOS)
   ========================================================= */

/* 1) Quitar los puntos pequeños junto a la hora */
.timeline-time::before {
    content: none !important;
}

/* 2) Ajustar solo en versión escritorio (dos columnas) */
@media (min-width: 900px) {

    .timeline-item {
        position: relative; /* seguro que el ::before se posicione relativo a la tarjeta */
    }



}

/* =========================
   ITINERARIO – MARCADORES
   ========================= */

/* Cada tarjeta del timeline */
.timeline-item {
    position: relative;
}

/* Punto amarillo con glow */
.timeline-item::before {
    content: "";
    position: absolute;
    top: 18px;              /* altura del punto respecto a la tarjeta */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #ffd93b 0%,
        #ffd93b 45%,
        #ffb300 60%,
        #000000 61%,
        #000000 70%,
        transparent 71%);
    box-shadow:
        0 0 16px rgba(255, 217, 59, 0.9),
        0 0 26px rgba(255, 0, 255, 0.45);
    z-index: 3;
}

/* Izquierda: punto hacia la derecha (pegado a la línea) */
.timeline-item:nth-child(odd)::before {
    right: -36px;   /* <- AQUÍ MUEVES LOS DE LA IZQUIERDA */
}

/* Derecha: punto hacia la izquierda (pegado a la línea) */
.timeline-item:nth-child(even)::before {
    left: -36px;    /* <- AQUÍ MUEVES LOS DE LA DERECHA */
}

/* Versión móvil: todos a la izquierda alineados con la línea */
@media (max-width: 768px) {
    .timeline::before {
        left: 24px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 4.5rem;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        text-align: left;
    }

    .timeline-item::before {
        left: 16px;   /* punto encima de la línea en móvil */
        right: auto;
    }
}

/* Subir el botón flotante SOLO en móviles */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 95px !important;  /* Súper seguro que sube */
    }
}


/* Apartir de aqui agg cosas experimentales*/


/* GLOW ANIMADO EN TÍTULOS */
.section-header h2 {
    position: relative;
    text-shadow: 0 0 12px rgba(255, 255, 0, 0.5);
    animation: titleGlow 3.2s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(255, 255, 0, 0.6),
            0 0 25px rgba(255, 0, 200, 0.5);
        transform: translateY(0);
    }
    50% {
        text-shadow:
            0 0 18px rgba(255, 255, 0, 0.9),
            0 0 35px rgba(255, 0, 200, 0.9);
        transform: translateY(-2px);
    }
}


/*MEJORA DEL CSS DE LA SECCION MENSAJES*/
/* Contenedor principal */
.messages-card {
  margin-top: 18px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efecto de borde sutil */
.messages-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 59, 227, 0.4), 
    rgba(168, 58, 241, 0.4), 
    transparent
  );
}

/* Encabezado */
.messages-header {
  margin-bottom: 22px;
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(255, 59, 227, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.messages-header h3 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ff3be3, #a83af1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.messages-header p {
  margin: 0;
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Botón principal */
.messages-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  background: linear-gradient(135deg, 
    rgba(255, 59, 227, 0.98), 
    rgba(168, 58, 241, 0.98)
  );
  box-shadow:
    0 4px 20px rgba(255, 59, 227, 0.25),
    0 8px 30px rgba(168, 58, 241, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 320px;
}

/* Efecto de brillo en hover */
.messages-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s ease;
}

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

/* Elementos del botón */
.btn-icon {
  font-size: 18px;
  transition: transform 0.3s ease;
}

.btn-text {
  flex-grow: 1;
  text-align: center;
}

.btn-arrow {
  font-size: 14px;
  opacity: 0.8;
  transition: transform 0.3s ease;
}

/* Estados del botón */
.messages-btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
  box-shadow:
    0 10px 30px rgba(255, 59, 227, 0.35),
    0 15px 40px rgba(168, 58, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

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

.messages-btn:hover .btn-arrow {
  transform: translateX(4px);
}

.messages-btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

/* Nota de privacidad */
.privacy-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.privacy-note i {
  color: rgba(255, 59, 227, 0.8);
  font-size: 14px;
}

/* Accesibilidad */
.messages-btn:focus {
  outline: none;
}

.messages-btn:focus-visible {
  outline: 2px solid rgba(255, 59, 227, 0.8);
  outline-offset: 4px;
  outline-style: dashed;
}

/* Animación sutil al cargar */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.messages-card {
  animation: fadeInUp 0.5s ease-out;
}





/* TARJETAS NEÓN ANIMADAS */
.about-card,
.event-card,
.timeline-item .timeline-content,
.rsvp-card,
.gallery-item,
.playlist-link,
.whatsapp-contact {
    position: relative;
    overflow: hidden;
}

.about-card::before,
.event-card::before,
.timeline-item .timeline-content::before,
.rsvp-card::before,
.gallery-item::before,
.playlist-link::before,
.whatsapp-contact::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        #ffdd00,
        #ff00ff,
        #8a2be2,
        #ffdd00
    );
    background-size: 250% 250%;
    -webkit-mask: 
       linear-gradient(#000 0 0) content-box, 
       linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: borderRun 7s linear infinite;
    opacity: 0.7;
}

@keyframes borderRun {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Flotadito al pasar el mouse (solo PC) */
.about-card:hover,
.playlist-link:hover,
.whatsapp-contact:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* BOTONES SUPER NEÓN (SIN TOCAR back-to-top) */
.submit-btn,
.photos-btn,
.whatsapp-btn,
.event-map-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}

.submit-btn::before,
.photos-btn::before,
.whatsapp-btn::before,
.event-map-btn::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(
        from 0deg,
        #ffe600,
        #ff00ff,
        #00ffff,
        #ffe600
    );
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: -1;
}

.submit-btn::after,
.photos-btn::after,
.whatsapp-btn::after,
.event-map-btn::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #ff3cfb, #ffb900);
    z-index: -1;
}

.submit-btn:hover::before,
.photos-btn:hover::before,
.whatsapp-btn:hover::before,
.event-map-btn:hover::before {
    opacity: 1;
    transform: scale(1);
}

.submit-btn:hover,
.photos-btn:hover,
.whatsapp-btn:hover,
.event-map-btn:hover {
    box-shadow: 0 0 25px rgba(255, 0, 200, 0.7),
                0 0 40px rgba(255, 230, 0, 0.7);
    transform: translateY(-2px);
}

/* AURA PRO EN TÍTULOS */
.section-header h2,
.main-title {
    position: relative;
    text-shadow:
        0 0 10px rgba(255, 0, 200, 0.8),
        0 0 20px rgba(255, 185, 0, 0.9),
        0 0 35px rgba(255, 0, 200, 0.7);
    animation: titleBreath 4s ease-in-out infinite;
}

.section-header h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.8rem;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff00ff, #ffe600, #00ffff);
    filter: blur(1px);
    box-shadow:
        0 0 10px rgba(255, 0, 200, 0.8),
        0 0 18px rgba(255, 230, 0, 0.9);
}

@keyframes titleBreath {
    0%,100% {
        text-shadow:
            0 0 6px rgba(255, 0, 200, 0.4),
            0 0 14px rgba(255, 185, 0, 0.5),
            0 0 26px rgba(255, 0, 200, 0.45);
        transform: translateY(0);
    }
    50% {
        text-shadow:
            0 0 14px rgba(255, 0, 200, 0.9),
            0 0 26px rgba(255, 185, 0, 0.9),
            0 0 40px rgba(0, 255, 255, 0.8);
        transform: translateY(-2px);
    }
}

/* BORDES NEÓN LÍQUIDOS EN TARJETAS */
.about-card,
.gift-option {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.about-card::before,
.gift-option::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        #ff00ff,
        #ffe600,
        #00ffff,
        #ff00ff
    );
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: -1;
    animation: borderSpin 10s linear infinite;
}

.about-card::after,
.gift-option::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: linear-gradient(135deg, #181828, #111119);
    z-index: -1;
}

.about-card:hover::before,
.gift-option:hover::before {
    opacity: 1;
    transform: scale(1);
}

@keyframes borderSpin {
    to {
        transform: scale(1.1) rotate(360deg);
    }
}


/* Ícono seleccionado SIN fondo, solo color rosa */
.floating-nav .nav-link.active {
    background: transparent !important;
    box-shadow: none !important;
}

/* Ícono activo con color + glow + animación */
.floating-nav .nav-link.active i {
    color: #ff3be3 !important;
    text-shadow:
        0 0 8px rgba(255, 0, 200, 0.8),
        0 0 18px rgba(255, 230, 0, 0.9);
    transform: translateY(-2px) scale(1.08);
}

/* Animaciones generales */
.floating-nav .nav-link {
    position: relative;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.floating-nav .nav-link i {
    text-shadow: 0 0 10px transparent;
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* Línea decorativa debajo del ícono activo */
.floating-nav .nav-link.active::after {
    content: "";
    position: absolute;
    inset: auto 10px -7px 10px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff00ff, #ffe600);
    box-shadow: 0 0 10px rgba(255, 0, 200, 0.8);
}

/* === Título Wendy & Ruby — Neon Gradient + Shine + Aura + Subrayado === */
.main-title { position: relative; }





/* Keyframes */
@keyframes titleGradient { to { background-position: -300% 0; } }
@keyframes titleShine{
  0%{ left:-120%; }
  30%{ left:120%; }
  100%{ left:120%; }
}
@keyframes sparkleDrift{
  to{ background-position: 120px 0, -90px 0; }
}

/* Respeta accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .main-title .title-word,
  .main-title .title-word::after,
  .main-title::before{
    animation: none !important;
  }
}


/* Quitar subrayado en TODOS los enlaces */
a {
    text-decoration: none !important;
}

/* Asegurar que en hover tampoco aparezca */
a:hover, a:focus, a:active {
    text-decoration: none !important;
}

/* Quitar el outline azul feo de TODOS los elementos interactivos */
a, button, input, textarea {
    outline: none !important;
    box-shadow: none !important;
}

/* Para asegurar que en focus no aparezca */
a:focus, button:focus, input:focus, textarea:focus {
    outline: none !important;
    box-shadow: none !important;
}

.event-card {
    overflow: visible !important;
}

/* ==========================================================================
   CORRECCIÓN DE ESPACIO SUPERIOR EN MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
    body {
        padding-top: 0 !important;
    }
    
    .hero-section {
        padding-top: 20px !important;
        min-height: calc(100vh - 20px);
    }
    
    /* Opcional: compensar barra de navegación móvil (iOS) */
    @supports (-webkit-touch-callout: none) {
        .hero-section {
            padding-top: env(safe-area-inset-top) !important;
        }
    }
    
}