/* Generales */
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap');

* {
    box-sizing: border-box;
}

body,
html {
    height: 100%;
}

body {
    font-family: 'Roboto', sans-serif;
}

button {
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
}

h1,
h2,
h3 {
    font-family: 'Roboto', sans-serif;
    color: #707070;
    text-align: center;
}

h2 {
    font-size: 30px;
    margin-bottom: 20px;
}

h3 {
    font-size: 22px;
    margin: 10px;
}

/* --- SECCIÓN TÍTULO ANIMADO --- */
.titulo-animado-container {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 20px;
}

.bola-disco {
    position: absolute;
    width: 100px;
    height: 90px;
    opacity: 0;
}

.bola-1 {
    top: 14%; left: 10%;
    animation: animacion-bola-1 0.5s ease-in-out forwards 0.2s, brillo 2s infinite linear 1.4s;
}
.bola-2 {
    top: 9%; right: 21%;
    animation: animacion-bola-2 0.5s ease-in-out forwards 0.4s, brillo 2s infinite linear 1.7s;
}
.bola-3 {
    bottom: 10%; left: 13%;
    animation: animacion-bola-3 0.5s ease-in-out forwards 0.7s, brillo 2s infinite linear 2.0s;
}
.bola-4 {
    bottom: 19%; right: 18%;
    animation: animacion-bola-4 0.5s ease-in-out forwards 1s, brillo 2s infinite linear 2.3s;
}

.titulo-pau-fest {
    font-family: 'Times New Roman', Times, serif;
    font-size: 3.1rem;
    color: #333;
    text-align: center;
    font-weight: bold;
    line-height: 0.8;
    position: relative;
    z-index: 10;
    max-width: 65%;
}

/* Título principal */
.titulo-pau-fest {
    font-family: 'Berkshire Swash', handwriting; /* O la fuente que prefieras */
    font-size: 6rem;
    color: #333;
    text-align: center;
}

/* Animación para el texto "PAU" */
.letra-pau {
    display: inline-block;
    opacity: 0;
    animation: fadeInDesdeIzquierda 1.5s forwards 0.5s;

}

/* Animación para el texto "FEST" */
.letra-fest {
    display: inline-block;
    opacity: 0;
    animation: fadeInDesdeDerecha 1.5s forwards 1.2s;

}

.letra-34 {
    display: inline-block;
    opacity: 0;
    animation: fadeInDesdeIzquierda 1.5s forwards 1.9s;
}


/* Animaciones (Keyframes) */
@keyframes animacion-bola-1 {
    0%   { opacity: 0; transform: scale(1.1) rotate(0deg); }
    25%  { opacity: 1; }
    40%  { opacity: 0; }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1.1) rotate(-15deg); }
}
@keyframes animacion-bola-2 {
    0%   { opacity: 0; transform: scale(1.3) rotate(0deg); }
    25%  { opacity: 1; }
    40%  { opacity: 0; }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1.3) rotate(20deg); }
}
@keyframes animacion-bola-3 {
    0%   { opacity: 0; transform: scale(1.7) rotate(0deg); }
    25%  { opacity: 1; }
    40%  { opacity: 0; }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1.7) rotate(-20deg); }
}
@keyframes animacion-bola-4 {
    0%   { opacity: 0; transform: scale(1) rotate(0deg); }
    25%  { opacity: 1; }
    40%  { opacity: 0; }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(10deg); }
}
@keyframes brillo {
    0%, 100% { filter: brightness(100%); }
    50% { filter: brightness(130%); }
}
@keyframes fadeInDesdeIzquierda {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInDesdeDerecha {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}


/* --- SECCIÓN REPRODUCTOR DE MÚSICA --- */
.invitation-container {
    position: relative;
    width: 90vw;
    max-width: 450px;
    aspect-ratio: 9 / 16;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    margin: 0px auto;
}

.overlay-disco-ball {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
    animation: brillo 2s infinite linear;
}

.overlay-music-player {
    position: absolute;
    top: 26%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    background-color: #ffdae7;
    border-radius: 20px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.overlay-music-player .controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.overlay-music-player .seek-bar {
    flex-grow: 1;
    height: 4px;
    background-color: #F8C8DC;
    border-radius: 2px;
    margin: 0 15px;
    cursor: pointer;
}

.overlay-music-player .seek-bar .progress {
    width: 0%;
    height: 100%;
    background-color: white;
    border-radius: 2px;
}

.overlay-music-player .icon-btn {
    background: none;
    border: none;
    color: #E6A9C1;
    font-size: 14px;
    cursor: pointer;
}

.overlay-music-player .play-btn {
    background-color: white;
    color: #bbbbbb;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- SECCIÓN CALENDARIO Y CONTADOR --- */
.calendar-section {
    text-align: center;
    padding: 40px 20px;
    font-family: 'Georgia', serif;
}

.calendar-image {
    max-width: 80%;
    height: auto;
    margin-bottom: 20px;
}

.faltan-text {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #555;
    letter-spacing: 2px;
    margin-top: 50px;
}

#countdown-timer {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-top: 20px;
}

#countdown-timer .bloque-tiempo {
    text-align: center;
}

#countdown-timer .numero {
    font-size: 50px;
    color: #EAB4C6;
    font-weight: normal;
    line-height: 1;
}

#countdown-timer .etiqueta {
    font-size: 12px;
    color: #D3D3D3;
    letter-spacing: 2px;
    margin-top: 8px;
    text-transform: uppercase;
}

#countdown-timer .separador {
    font-size: 40px;
    color: #EAB4C6;
    padding-bottom: 15px;
}

/* --- SECCIÓN DETALLES DEL EVENTO --- */
.event-details-section {
    position: relative;
    text-align: center;
    padding: 60px 20px;
    font-family: 'Times New Roman', Times, serif;
    color: #333;
    overflow: hidden;
}

.event-title {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 5px;
    margin-bottom: 30px;
    font-family: 'Cinzel', serif;
}

.event-icon {
    width: 60px;
    margin-bottom: 20px;
    align-items: center;
}

.event-date {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
    font-family: 'Cinzel', serif;
}

.event-date2 {
    font-size: 1.6rem;
    font-variant: small-caps;
    line-height: 1.5;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
}

.event-cheers {
    width: 120px;
    margin-bottom: 20px;
}

.event-location {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 25px;
    font-family: 'Raleway', sans-serif;
}

.event-button {
    display: inline-block;
    background-color: #D8A9B9;
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 2px;
    transition: background-color 0.3s;
    font-family: 'Raleway', sans-serif;
}

.event-button:hover {
    background-color: #C798A8;
}

.map-container {
    width: 100%;
    max-width: 400px;
    margin: 30px auto 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

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

.animated-star {
    position: absolute;
    width: 90px;
    opacity: 0;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.star-1 {
    top: 10%;
    left: 12%;
    animation-name: animacion-bola-1;
    animation-delay: 0.5s;
}

.star-2 {
    bottom: 52%;
    right: 10%;
    animation-name: animacion-bola-4;
    animation-delay: 0.8s;
}

/* --- SECCIÓN CÓDIGO DE VESTIMENTA --- */
.dress-code-section {
    text-align: center;
    padding: 20px;
    font-family: 'Times New Roman', Times, serif;
    color: #333;
}

.section-title {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 0.9;
    letter-spacing: 3px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
}

.icon {
    width: 85px;
    margin-bottom: 15px;
}

.subtitle {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    font-family: 'Raleway', sans-serif;
}

.description {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #555;
    max-width: 350px;
    margin: 0 auto 40px auto;
    font-family: 'Raleway', sans-serif;
}

.highlight {
    font-size: 1.8rem;
    font-weight: bold;
    display: block;
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
}

/* --- SECCIÓN CONFIRMAR ASISTENCIA --- */
.confirm-attendance-section {
    text-align: center;
    padding: 20px;
    font-family: 'Times New Roman', Times, serif;
    color: #333;
}

.confirm-title {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 0.9;
    letter-spacing: 1px;
    margin-bottom: 0px;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
}

.confirm-link {
    display: inline-block;
    text-decoration: none;
}

.confirm-icon {
    width: 80px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

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

/* --- SECCIÓN FOOTER (LOGO) --- */
.footer-logo-section {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 20px;
}

.footer-logo {
    width: 80px;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-logo:hover {
    transform: scale(1.1);
}

/* --- Media Queries (Responsividad) --- */
@media (max-width: 640px) {
    #countdown-timer .numero {
        font-size: 38px;
    }
    .event-date, .event-location, .subtitle, .description {
        font-size: 1.2rem;
    }
    .section-title, .confirm-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 430px) {
    .titulo-pau-fest {
        font-size: 2.5rem;
    }
    #countdown-timer .numero {
        font-size: 32px;
    }
}

/* Estilos para la pantalla de bienvenida */
#welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fceef5; /* Un color rosa pálido */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Para que esté por encima de todo */
}

#enter-button {
    background-color: white;
    color: #D8A9B9;
    border: 2px solid #D8A9B9;
    border-radius: 50px;
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

#enter-button:hover {
    background-color: #D8A9B9;
    color: white;
}