/* =========================
   ANIMACIONES DE ENTRADA
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeCorner {
    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ESQUINEROS */

.corner {
    opacity: 0;

    animation:
        fadeCorner 1.2s ease forwards;
}


/* SUBTÍTULO */

.acceso-subtitulo {
    opacity: 0;

    animation:
        fadeUp 0.8s ease forwards;

    animation-delay: 0.25s;
}


/* WONDERLAND */

.acceso-titulo {
    opacity: 0;

    animation:
        fadeUp 0.9s ease forwards;

    animation-delay: 0.4s;
}


/* LLAVE */

.btn-llave {
    opacity: 0;

    animation:
        fadeScale 1s ease forwards;

    animation-delay: 0.7s;
}


/* BIENVENIDO */

.bienvenido {
    opacity: 0;

    animation:
        fadeUp 0.8s ease forwards;

    animation-delay: 1s;
}


/* NOMBRE */

#nombre-invitado {
    opacity: 0;

    animation:
        fadeUp 0.9s ease forwards;

    animation-delay: 1.15s;
}


/* PERSONAS */

#numero-personas {
    opacity: 0;

    animation:
        fadeUp 0.8s ease forwards;

    animation-delay: 1.3s;
}
@keyframes keyFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

.llave {
    animation:
        keyFloat 4s ease-in-out infinite;

    animation-delay: 1.8s;
}
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================
   APARICIÓN DEL INVITADO
========================= */

.invitado {
    opacity: 0;
    visibility: hidden;

    max-height: 0;
    overflow: hidden;

    margin: 0;

    transform: translateY(15px) scale(0.98);
    filter: blur(5px);

    pointer-events: none;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        filter 0.8s ease,
        max-height 0.8s ease;
}


.invitado.invitado-visible {
    opacity: 1;
    visibility: visible;

    max-height: 350px;
    overflow: visible;

    transform: translateY(0) scale(1);
    filter: blur(0);

    pointer-events: auto;
}

/* Pequeño movimiento de la llave al abrir */

.acceso-abierto .btn-llave {
    transform: translateY(-10px);
    transition: transform 0.8s ease;
}

.toca-llave {
    animation: tocaLlave 2s ease-in-out infinite;
}

@keyframes tocaLlave {

    0%,
    100% {
        opacity: 0.55;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }
}
.acceso-abierto .toca-llave {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        visibility 0.4s;
}
/* =========================
   REVEAL AL HACER SCROLL
========================= */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(3px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        filter 0.8s ease;
}

.reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.celebracion-pretitle.reveal-visible {
    transition-delay: 0.05s;
}

.celebracion-titulo.reveal-visible {
    transition-delay: 0.12s;
}

.celebracion-texto p:first-child.reveal-visible {
    transition-delay: 0.2s;
}

.celebracion-texto p:last-child.reveal-visible {
    transition-delay: 0.3s;
}

.celebracion-ornamento-inferior.reveal-visible {
    transition-delay: 0.38s;
}
/* =========================
   QUINCEAÑEROS
   ANIMACIONES DE ENTRADA
========================= */


/* ESQUINAS DESDE IZQUIERDA */

.reveal-side-left {
    opacity: 0;
    transform: translateX(-45px) scale(0.92);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, .8, .3, 1);
}

.reveal-side-left.reveal-visible {
    opacity: 0.85;
    transform: translateX(0) scale(1);
}


/* ESQUINAS DESDE DERECHA */

.reveal-side-right {
    opacity: 0;
    transform: translateX(45px) scale(0.92);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, .8, .3, 1);
}

.reveal-side-right.reveal-visible {
    opacity: 0.85;
    transform: translateX(0) scale(1);
}


/* ORNAMENTO SUPERIOR */

.reveal-down {
    opacity: 0;
    transform: translateY(-18px);

    transition:
        opacity 0.8s ease,
        transform 0.9s ease;
}

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


/* KATHERINE */

.reveal-name-left {
    opacity: 0;
    transform: translateX(-30px);

    transition:
        opacity 0.85s ease,
        transform 0.9s cubic-bezier(.22, .8, .3, 1);
}

.reveal-name-left.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}


/* IKEER */

.reveal-name-right {
    opacity: 0;
    transform: translateX(30px);

    transition:
        opacity 0.85s ease,
        transform 0.9s cubic-bezier(.22, .8, .3, 1);
}

.reveal-name-right.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}


/* LA "e" */

.reveal-pop {
    opacity: 0;
    transform: scale(0.5) rotate(-8deg);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(.22, 1.2, .36, 1);
}

.reveal-pop.reveal-visible {
    opacity: 1;
    transform: scale(1) rotate(0);
}


/* 15 AÑOS + DIVISOR */

.reveal-up {
    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

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


/* FOTO */

.reveal-photo {
    opacity: 0;

    transform:
        translateY(20px)
        scale(0.94);

    transition:
        opacity 1.1s ease,
        transform 1.2s cubic-bezier(.22, .8, .3, 1);
}

.reveal-photo.reveal-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

/* =========================
   FOTO FLOTANTE
========================= */

@keyframes floatPhoto {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

}

.reveal-photo.reveal-visible .quinceaneros-foto {
    animation: floatPhoto 4.5s ease-in-out infinite;

    animation-delay: 1.2s;
}
/* =========================
   FECHA - ENTRADA
========================= */

.reveal-date {
    opacity: 0;
    transform: translateY(-35px) scale(0.96);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, .8, .3, 1);
}

.reveal-date.reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* =========================
   CONEJO - ENTRADA
========================= */

.reveal-rabbit {
    opacity: 0;
    transform: translateY(45px) scale(0.92) rotate(-2deg);

    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(.22, 1.15, .36, 1);
}

.reveal-rabbit.reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}
@keyframes rabbitIdle {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(0.5deg);
    }
}

.reveal-rabbit.reveal-visible {
    animation: rabbitIdle 4.5s ease-in-out infinite;
    animation-delay: 1s;
}
/* =========================
   TÍTULO CUENTA REGRESIVA
========================= */

.reveal-title {
    opacity: 0;
    transform: scaleX(0.82) scaleY(0.96);
    letter-spacing: -0.03em;

    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(.22, .8, .3, 1),
        letter-spacing 1s ease;
}

.reveal-title.reveal-visible {
    opacity: 1;
    transform: scaleX(1) scaleY(1);
    letter-spacing: normal;
}
/* =========================
   DIVISOR DORADO
========================= */

.reveal-divider {
    opacity: 0;
    transform: scale(0.65) rotate(-6deg);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(.22, 1.15, .36, 1);
}

.reveal-divider.reveal-visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
/* =========================
   FRASE CUENTA REGRESIVA
========================= */

.reveal-frase {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(2px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        filter 0.8s ease;
}

.reveal-frase.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
/* =========================
   CONTADOR
========================= */

.reveal-counter {
    opacity: 0;
    transform: translateY(25px) scale(0.9);

    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(.22, 1.15, .36, 1);
}

.reveal-counter.reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/* Entrada escalonada */

.reveal-counter:nth-child(1) {
    transition-delay: 0s;
}

.reveal-counter:nth-child(2) {
    transition-delay: 0.12s;
}

.reveal-counter:nth-child(3) {
    transition-delay: 0.24s;
}

.reveal-counter:nth-child(4) {
    transition-delay: 0.36s;
}
/* =========================
   FAMILIA - ENTRADA DE FONDO
========================= */

.familia {
    opacity: 0;
    transition: opacity 1.1s ease;
}

.familia.reveal-visible {
    opacity: 1;
}
/* =========================
   FAMILIA - NUESTROS PADRES
========================= */

.reveal-family-title {
    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 0.8s ease 0.25s,
        transform 0.9s ease 0.25s;
}

.reveal-family-title.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-family-parents {
    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 0.8s ease 0.65s,
        transform 0.9s ease 0.65s;
}

.reveal-family-parents.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   FAMILIA - KATHERINE
========================= */

/* KATHERINE */

.reveal-katherine-name {
    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.7s ease 1.05s,
        transform 0.8s ease 1.05s;
}

.reveal-katherine-name.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* YARA */

.reveal-katherine-1 {
    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.7s ease 1.30s,
        transform 0.8s ease 1.30s;
}

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


/* & */

.reveal-katherine-2 {
    opacity: 0;
    transform: scale(0.6);

    transition:
        opacity 0.6s ease 1.55s,
        transform 0.7s cubic-bezier(.22, 1.2, .36, 1) 1.55s;
}

.reveal-katherine-2.reveal-visible {
    opacity: 1;
    transform: scale(1);
}


/* CHRISTIAN */

.reveal-katherine-3 {
    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.7s ease 1.80s,
        transform 0.8s ease 1.80s;
}

.reveal-katherine-3.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* LÍNEA */

.reveal-katherine-line {
    opacity: 0;
    transform: scaleX(0);

    transition:
        opacity 0.6s ease 2.05s,
        transform 0.8s ease 2.05s;
}

.reveal-katherine-line.reveal-visible {
    opacity: 1;
    transform: scaleX(1);
}


/* PADRINOS */

.reveal-katherine-label {
    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.7s ease 2.30s,
        transform 0.8s ease 2.30s;
}

.reveal-katherine-label.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   FAMILIA - IKEER
========================= */

/* IKEER */

.reveal-ikeer-name {
    opacity: 0;
    transform: translateY(12px);

    transition:
        opacity 0.7s ease 2.70s,
        transform 0.8s ease 2.70s;
}

.reveal-ikeer-name.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* VERO */

.reveal-ikeer-1 {
    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.7s ease 2.95s,
        transform 0.8s ease 2.95s;
}

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


/* & */

.reveal-ikeer-2 {
    opacity: 0;
    transform: scale(0.6);

    transition:
        opacity 0.6s ease 3.20s,
        transform 0.7s cubic-bezier(.22, 1.2, .36, 1) 3.20s;
}

.reveal-ikeer-2.reveal-visible {
    opacity: 1;
    transform: scale(1);
}


/* NOÉ */

.reveal-ikeer-3 {
    opacity: 0;
    transform: translateY(10px);

    transition:
        opacity 0.7s ease 3.45s,
        transform 0.8s ease 3.45s;
}

.reveal-ikeer-3.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* LÍNEA */

.reveal-ikeer-line {
    opacity: 0;
    transform: scaleX(0);

    transition:
        opacity 0.6s ease 3.70s,
        transform 0.8s ease 3.70s;
}

.reveal-ikeer-line.reveal-visible {
    opacity: 1;
    transform: scaleX(1);
}


/* PADRINOS */

.reveal-ikeer-label {
    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 0.7s ease 3.95s,
        transform 0.8s ease 3.95s;
}

.reveal-ikeer-label.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =========================
   UBICACIONES
========================= */


/* TÍTULO */

.reveal-ubicaciones-title {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.8s ease,
        transform 0.9s ease;
}

.reveal-ubicaciones-title.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================
   CEREMONIA
========================= */

/* MARCO DESDE LA IZQUIERDA */

.reveal-ceremonia-img {
    opacity: 0;
    transform: translateX(-35px) scale(0.96);

    transition:
        opacity 0.9s ease 0.25s,
        transform 1s ease 0.25s;
}

.reveal-ceremonia-img.reveal-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}


/* INFORMACIÓN DESDE LA DERECHA */

.reveal-ceremonia-info {
    opacity: 0;
    transform: translateX(30px);

    transition:
        opacity 0.85s ease 0.55s,
        transform 0.95s ease 0.55s;
}

.reveal-ceremonia-info.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}


/* =========================
   RECEPCIÓN
========================= */

/* INFORMACIÓN DESDE LA IZQUIERDA */

.reveal-recepcion-info {
    opacity: 0;
    transform: translateX(-30px);

    transition:
        opacity 0.85s ease 0.25s,
        transform 0.95s ease 0.25s;
}

.reveal-recepcion-info.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}


/* MARCO DESDE LA DERECHA */

.reveal-recepcion-img {
    opacity: 0;
    transform: translateX(35px) scale(0.96);

    transition:
        opacity 0.9s ease 0.55s,
        transform 1s ease 0.55s;
}

.reveal-recepcion-img.reveal-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}
/* =========================
   ORNAMENTO DERECHO
========================= */

.reveal-ornamento-right {
    opacity: 0;
    transform: translateX(120px);

    transition:
        opacity 0.8s ease,
        transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.reveal-ornamento-right.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
/* Ornamento que entra desde la izquierda */

.reveal-ornamento-left {
    opacity: 0;
    transform: translateX(-100px);
    transition:
        opacity 1s ease,
        transform 1.2s ease;
}

.reveal-ornamento-left.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
/* =========================
   DRESS CODE
========================= */

.reveal-dress-title,
.reveal-dress-ellos,
.reveal-dress-ellas,
.reveal-dress-divider-top,
.reveal-dress-text,
.reveal-dress-divider-bottom {
    opacity: 0;
}

.reveal-dress-title {
    transform: translateX(45px);
    transition: opacity .55s ease, transform .65s ease;
}

.reveal-dress-ellos {
    transform: translateY(30px);
    transition: opacity .55s ease .12s, transform .65s ease .12s;
}

.reveal-dress-ellas {
    transform: translateY(30px);
    transition: opacity .55s ease .22s, transform .65s ease .22s;
}

.reveal-dress-divider-top {
    transform: scale(.85);
    transition: opacity .45s ease .30s, transform .55s ease .30s;
}

.reveal-dress-text {
    transform: translateY(18px);
    transition: opacity .5s ease .38s, transform .6s ease .38s;
}

.reveal-dress-divider-bottom {
    transform: scale(.85);
    transition: opacity .45s ease .48s, transform .55s ease .48s;
}

.reveal-dress-title.reveal-visible,
.reveal-dress-ellos.reveal-visible,
.reveal-dress-ellas.reveal-visible,
.reveal-dress-divider-top.reveal-visible,
.reveal-dress-text.reveal-visible,
.reveal-dress-divider-bottom.reveal-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}
/* =========================
   ORNAMENTO REGALOS
========================= */

.reveal-regalo-ornamento {
    opacity: 0;
    transform: translateX(90px);

    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(.22, 1, .36, 1);
}

.reveal-regalo-ornamento.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
/* =========================
   TÍTULO SUGERENCIAS DE REGALO
========================= */

.reveal-regalos-titulo {
    opacity: 0;
    transform: translateX(-70px);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-regalos-titulo.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}
/* =========================
   TÍTULO LLUVIA DE SOBRES
========================= */

.reveal-lluvia-titulo {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

.reveal-lluvia-titulo.reveal-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* =========================
   LLUVIA DE SOBRES
========================= */

/* Antes de aparecer */
.reveal-sobres .sobrecito {
    opacity: 0;
    transform-origin: center;
}


/* =========================
   SALIDA + LEVITACIÓN
========================= */

.reveal-sobres.reveal-visible .sobrecito-izq {
    animation:
        salirSobre1 0.8s cubic-bezier(.2,.8,.3,1) forwards,
        flotarSobre1 3.4s ease-in-out 0.8s infinite;
}

.reveal-sobres.reveal-visible .sobrecito-der {
    animation:
        salirSobre2 0.9s cubic-bezier(.2,.8,.3,1) 0.08s forwards,
        flotarSobre2 4.1s ease-in-out 0.98s infinite;
}

.reveal-sobres.reveal-visible .sobrecito-3 {
    animation:
        salirSobre3 0.85s cubic-bezier(.2,.8,.3,1) 0.16s forwards,
        flotarSobre3 3.7s ease-in-out 1.01s infinite;
}

.reveal-sobres.reveal-visible .sobrecito-4 {
    animation:
        salirSobre4 0.95s cubic-bezier(.2,.8,.3,1) 0.24s forwards,
        flotarSobre4 4.4s ease-in-out 1.19s infinite;
}

.reveal-sobres.reveal-visible .sobrecito-5 {
    animation:
        salirSobre5 0.9s cubic-bezier(.2,.8,.3,1) 0.32s forwards,
        flotarSobre5 3.2s ease-in-out 1.22s infinite;
}

.reveal-sobres.reveal-visible .sobrecito-6 {
    animation:
        salirSobre6 1s cubic-bezier(.2,.8,.3,1) 0.4s forwards,
        flotarSobre6 4s ease-in-out 1.4s infinite;
}


/* =========================
   SALIDA DESDE EL SOBRE
========================= */

@keyframes salirSobre1 {
    from {
        opacity: 0;
        transform: translate(60px, 120px) scale(.45) rotate(-10deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(-10deg);
    }
}

@keyframes salirSobre2 {
    from {
        opacity: 0;
        transform: translate(-50px, 115px) scale(.45) rotate(10deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(10deg);
    }
}

@keyframes salirSobre3 {
    from {
        opacity: 0;
        transform: translate(0, 170px) scale(.4) rotate(4deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(4deg);
    }
}

@keyframes salirSobre4 {
    from {
        opacity: 0;
        transform: translate(-25px, 90px) scale(.5) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(-8deg);
    }
}

@keyframes salirSobre5 {
    from {
        opacity: 0;
        transform: translate(35px, 75px) scale(.5) rotate(12deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(12deg);
    }
}

@keyframes salirSobre6 {
    from {
        opacity: 0;
        transform: translate(-30px, 70px) scale(.5) rotate(-14deg);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(-14deg);
    }
}


/* =========================
   LEVITACIÓN
========================= */

/* Sobre 1 */
@keyframes flotarSobre1 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-10deg);
    }

    50% {
        opacity: 1;
        transform: translate(-3px, -9px) rotate(-6deg);
    }
}


/* Sobre 2 */
@keyframes flotarSobre2 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(10deg);
    }

    50% {
        opacity: 1;
        transform: translate(4px, -12px) rotate(14deg);
    }
}


/* Sobre 3 */
@keyframes flotarSobre3 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(4deg);
    }

    50% {
        opacity: 1;
        transform: translate(-2px, -7px) rotate(8deg);
    }
}


/* Sobre 4 */
@keyframes flotarSobre4 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-8deg);
    }

    50% {
        opacity: 1;
        transform: translate(3px, -10px) rotate(-4deg);
    }
}


/* Sobre 5 */
@keyframes flotarSobre5 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(12deg);
    }

    50% {
        opacity: 1;
        transform: translate(-4px, -6px) rotate(8deg);
    }
}


/* Sobre 6 */
@keyframes flotarSobre6 {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0) rotate(-14deg);
    }

    50% {
        opacity: 1;
        transform: translate(3px, -11px) rotate(-9deg);
    }
}
/* =========================
   FRASE REGALOS
========================= */

.reveal-regalos-frase {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.8s ease 0.5s,
        transform 0.9s cubic-bezier(.22, 1, .36, 1) 0.5s;
}

.reveal-regalos-frase.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}