/* ════════════════════════════════════════════════════════════
   VARIABLES GLOBALES
════════════════════════════════════════════════════════════ */
:root {
    --color-principal:  #fefdfa;
    --color-secundario: #F4D4CA;
    --color-terciario:  #F4D4CA;
    --font-principal:   'Schoolbell', cursive;
    --font-secundaria:  'Nunito Sans', sans-serif;
    --radius-boton:     50px;
    --padding-boton:    10px 30px;
}

/* ════════════════════════════════════════════════════════════
   RESET Y BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-principal);
    font-family: var(--font-principal);
    min-width: 320px;
}

/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */
header {
    width: 100%;
    height: 100vh;
    background-image: url(./img/backgrounddesktop.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 5s ease;
}

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

.header-info {
    width: 100vw;
    height: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-terciario);
    text-align: center;
}

.infoimportante {
    width: 100%;
    height: 40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding-bottom: 10px;
}

.infoimportante img {
    width: 60%;
}

/* ════════════════════════════════════════════════════════════
   BOTONES
════════════════════════════════════════════════════════════ */
.boton,
.boton2 {
    display: inline-block;
    padding: var(--padding-boton);
    border-radius: var(--radius-boton);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.boton {
    background-color: var(--color-terciario);
    color: var(--color-principal);
    border: 1px solid var(--color-principal);
}
.boton:hover {
    background-color: var(--color-principal);
    color: var(--color-terciario);
    border-color: var(--color-terciario);
}

.boton2 {
    background-color: var(--color-principal);
    color: var(--color-secundario);
    border: 1px solid var(--color-principal);
}
.boton2:hover {
    background-color: var(--color-principal);
    color: var(--color-terciario);
    border-color: var(--color-terciario);
}

/* ════════════════════════════════════════════════════════════
   CUENTA REGRESIVA
════════════════════════════════════════════════════════════ */
.countdown {
    background-color: var(--color-principal);
    color: var(--color-terciario);
    padding: 16px 0 0;
    text-align: center;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.countdown p,
#clock {
    font-size: 1.4rem;
    color: var(--color-terciario);
}

/* ════════════════════════════════════════════════════════════
   FECHA (imagen)
════════════════════════════════════════════════════════════ */
.fecha {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fecha img {
    width: 100%;
    max-width: 800px;
}

/* ════════════════════════════════════════════════════════════
   GALERÍAS
   Desktop: ambas en 4 columnas
   Mobile: galeria = 1 col (f2/f3/f4 ocultas)
           galeria2 = 4 col cuadrícula
════════════════════════════════════════════════════════════ */
.galeria,
.galeria2 {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.galeria img,
.galeria2 img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* ════════════════════════════════════════════════════════════
   SECCIÓN SEGUNDO (lugar y horario)
════════════════════════════════════════════════════════════ */
.segundo {
    width: 100%;
    min-height: 90vh;
    background-image: url(./figuras/Group.png);
    background-size: cover;
    background-position: center;
    background-color: var(--color-terciario);
    color: var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 40px 20px;
}

.segundo p {
    max-width: 500px;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   DRESS CODE
════════════════════════════════════════════════════════════ */
.DRESSCODE {
    text-align: center;
    background-color: var(--color-secundario);
    color: var(--color-principal);
    padding: 20px 0;
}

.DRESSCODE h2,
.DRESSCODE p {
    margin: auto;
    padding: auto;
    max-width: 300px;
}

.DRESSCODE ul {
    display: flex;
    list-style: none;
    gap: 10px;
    padding: 10px 0 0;
    justify-content: center;
    align-items: center;
}

.DRESSCODE ul li {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.DRESSCODE .li1 { background-color: #F4CFDC; }
.DRESSCODE .li2 { background-color: #E6E1FE; }
.DRESSCODE .li3 { background-color: #9CE7D6; }
.DRESSCODE .li4 { background-color: #9AC8FA; }
.DRESSCODE .li5 { background-color: #DFC4A6; }
.DRESSCODE .li6 { background-color: #FFFFFF; border: 1px solid #eee; }

/* ════════════════════════════════════════════════════════════
   MAIN (confirmación)
════════════════════════════════════════════════════════════ */
main {
    width: 100%;
    color: var(--color-terciario);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.main-bloque {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.main-bloque img {
    width: 60px;
}

.main-bloque p {
    padding: 0 40px;
    max-width: 350px;
    font-size: 1.2rem;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   QUOTE
════════════════════════════════════════════════════════════ */
.quote {
    background-color: var(--color-secundario);
    color: var(--color-principal);
    text-align: center;
    padding: 20px;
}

.quote p {
    max-width: 350px;
    font-size: 1.2rem;
    margin: auto;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   CIERRE (end)
════════════════════════════════════════════════════════════ */
.end {
    background-image: url(./img/madeira1.png);
    background-position: center;
    background-size: cover;
    padding: 30px;
    text-align: center;
    color: var(--color-terciario);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.end img       { width: 60px; }
.end h2        { font-size: 2em; }
.end h3        { font-size: 1.2em; }
.end .espejo   { transform: scaleX(-1); }

/* ════════════════════════════════════════════════════════════
   AUDIO / REPRODUCTOR
════════════════════════════════════════════════════════════ */
.audiodiv {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999;
    background-color: var(--color-secundario);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.audiodiv img {
    width: 60px;
    height: 60px;
    padding: 6px 0 0;
}

.play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Ocultar controles nativos del audio */
audio::-webkit-media-controls,
audio::-webkit-media-controls-panel,
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-start-playback-button,
audio::-webkit-media-controls-enclosure,
audio::-webkit-media-controls-current-time-display {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
footer {
    width: 100%;
    background-color: var(--color-terciario);
    color: var(--color-principal);
    padding: 40px 0;
    text-align: center;
}

footer .contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

footer img { width: 60px; }

.contenido ul {
    display: flex;
    list-style: none;
    gap: 20px;
    padding: 0;
}

.contenido a {
    color: var(--color-principal);
    text-decoration: none;
    transition: color 0.2s;
}
.contenido a:hover { color: violet; }

/* ════════════════════════════════════════════════════════════
   SCROLL TO TOP
════════════════════════════════════════════════════════════ */
#scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}
#scroll-to-top img {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    header {
        background-image: url(./img/backgroundphone.png);
        background-size: cover;
    }

    .infoimportante {
        height: 80vh;
        margin-top: 30px;
    }

    .infoimportante img { width: 70%; }

    .fecha img {
        max-width: 94vw;
        margin-bottom: 10px;
    }

    /* galeria 1: 1 columna, solo se ve la primera foto */
    .galeria {
        grid-template-columns: 1fr;
    }
    .galeria img { width: 100vw; }
    .galeria .f2,
    .galeria .f3,
    .galeria .f4 { display: none; }

    /* galeria 2: cuadrícula de 4 */
    .galeria2 {
        grid-template-columns: repeat(1, 1fr 1fr);
    }
    .galeria2 img { width: 50vw; }

    .segundo {
        min-height: 60vh;
        /* sin background-image extra — usa el color de fondo solo */
    }

    main {
        flex-direction: column;
    }
}