/*Animaciones*/
@keyframes crecer {
    0%   { scale: calc(var(--base-tam) - 0.2); }
    50%  { scale: calc(var(--base-tam) + 0.2); }
    100% { scale: calc(var(--base-tam) - 0.2); }
}
@keyframes rotar {
    0%   { rotate: calc(var(--base-rot) - 10deg); }
    50%   { rotate: calc(var(--base-rot) + 10deg); }
    100%   { rotate: calc(var(--base-rot) - 10deg); }
}
/*Fuentes*/
@font-face {
    font-family: 'Pompiere';
    src: url('fuentes/Pompiere.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Boogaloo';
    src: url('fuentes/Boogaloo.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'handelson';
    src: url('fuentes/handelson.otf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'imprenta-minuscula';
    src: url('fuentes/imprenta-minuscula.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'imprenta-mayuscula';
    src: url('fuentes/imprenta-mayuscula.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BebasNeue';
    src: url('fuentes/bebasNeue.ttf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Avallon';
    src: url('fuentes/Avallon.ttf');
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
}

body {
    background: url("imagenes/fondo_papel_rosa.webp");
    background-size: 100rem;
    color: #111;
    min-width: 1200px;
}

.bg-glow {
    position: sticky;
    inset: 0;
    background: radial-gradient(circle at top, rgba(255, 0, 150, 0.2), transparent 55%),
    radial-gradient(circle at bottom, rgba(0, 150, 255, 0.2), transparent 60%);
    z-index: -1;
}
.padding{
    padding-top: 40rem;
    padding-bottom: 10rem
}
.pretitulo{
    font-family: 'imprenta-minuscula', sans-serif;
    font-size: 3rem;
    text-align: center;
    color: rgb(182, 115, 134);
}
.hero {
    padding: 0rem 5rem;
    min-width: 70rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: visible;
}
.carta{
    background-color: #f2d3dd;
    position: relative;
    text-align: center;
    max-width: 2000px;
    min-width: 1200px;
    padding-top: 20rem;
    padding-bottom: 30rem;
    overflow: visible;
}
.cartaBordeSuperior{
    scale: 0.5;
    rotate: 180deg;
    top: -18rem;
    left: -18rem;
}
.cartaBordeInferior{
    scale: 0.5;
    bottom: -18rem;
    right: -18rem;
}
.textoContador{
    font-family: 'Boogaloo', sans-serif;
    font-size: 3rem;
    color: #FF4195;
}
.timer {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.time-box {
    text-align: center;
    min-width: 90px;
}

.num {
    font-family: 'Boogaloo', sans-serif;
    display: block;
    font-size: 7rem;
    font-weight: 800;
}
.sep {
    font-family: 'Boogaloo', sans-serif;
    font-size: 7rem;
    font-weight: 800;
}
.label {
    font-family: 'Boogaloo', sans-serif;
    display: block;
    font-size: 2rem;
    letter-spacing: 2px;
}
.fondoPapel{
    background-image: url('imagenes/papel_background.webp');
    filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.5));
    clip-path: polygon(
            1% 2%,
            3.5% 0.1%,
            8.9% 2.7%,
            16.2% 1.2%,
            19.7% 0.8%,
            24.7% 2%,
            31.2% 0%,
            35.9% 2.3%,
            40.6% 0.5%,
            47.1% 1.8%,
            49.9% 1%,
            53.8% 2.5%,
            62.2% 0.4%,
            67.3% 1.2%,
            70.3% 0.3%,
            75.8% 1.4%,
            78.5% 1.7%,
            84% 2.6%,
            91.1% 0.5%,
            93.6% 2.4%,
            97.3% 0.3%,
            98.9% 6%,
            98.1% 11.4%,
            98.6% 15.5%,
            97.3% 17.8%,
            97.7% 27.4%,
            98.3% 28.5%,
            99.7% 34.1%,
            98.8% 41.9%,
            98.3% 45.7%,
            98.4% 50.9%,
            98.7% 57.4%,
            99.6% 60.4%,
            99.4% 66.6%,
            99.2% 69.5%,
            97.4% 77.1%,
            98.1% 82.3%,
            99.9% 83.5%,
            98.2% 91.5%,
            99.3% 95.3%,
            98% 98.6%,
            93.6% 97.4%,
            90.3% 98.3%,
            86.8% 98.3%,
            78.6% 98.5%,
            76.4% 99.2%,
            69.7% 99.8%,
            64.2% 99.3%,
            61.8% 99.2%,
            57.2% 98.1%,
            48.7% 98.3%,
            46.8% 99%,
            39.6% 98.9%,
            33.8% 97.3%,
            28.2% 99.4%,
            27% 98.3%,
            22.1% 98.6%,
            13.1% 97.1%,
            8.7% 99.3%,
            2.7% 97.4%,
            2% 98.2%,
            2.1% 94.3%,
            0.7% 90.5%,
            0.9% 86.3%,
            2.2% 78.2%,
            0.4% 76.7%,
            1.2% 72.1%,
            2% 64%,
            1.4% 59.8%,
            0.4% 57.3%,
            0.3% 49.1%,
            2.9% 44.7%,
            1.9% 41.3%,
            0.8% 35.7%,
            2.9% 31.3%,
            0.8% 24.9%,
            2.7% 20.5%,
            0.8% 17.4%,
            2.5% 8.6%,
            1.1% 5.5%
    );
}
.hero-content {
    position: relative;
    text-align: center;
    max-width: 2000px;
    min-width: 1200px;
    padding-top: 20rem;
    padding-bottom: 30rem;
    overflow: visible;
}
.hero-content2 {
    position: relative;
    text-align: center;
    max-width: 2000px;
    min-width: 1200px;
    padding-top: 40rem;
    padding-bottom: 10rem;
    overflow: visible;
}
.botonUbicacion{
    color: black;
    display: inline-block;
    background-color: #fbc8d7;
    text-decoration: none;
    border-radius: 40px;
    border-color: transparent;
    font-size: 2.5rem;
    font-family: "imprenta-mayuscula", cursive;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1rem 3rem 1rem 3rem;
    filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0.5));
}
.flechaUbicacion{
    width: 100px;
    height: auto;
    transform: translateX(300px) translateY(-100px) scaleX(-1) rotate(-60deg) ;
}
.botonUbicacion:hover{
    filter: drop-shadow(-1px 6px 3px rgba(0, 0, 0, 0));
    translate: 0 3px;
}
.hero h1 {
    font-weight: 800;
}

.subtitle {
    margin-top: 15px;
    font-size: 1.2rem;
    opacity: 0.8;
}
.titulo {
    position: relative;
    font-family: 'imprenta-mayuscula', sans-serif;
    scale: 1 1.2;
    font-size: 5.2rem;
    color: transparent;
    -webkit-text-stroke: 1px rgb(234, 195, 206);

}
.titulo::before {
    content: attr(data-text);
    position: absolute;
    top: 0.2rem;
    left: 27rem;
    color: rgb(251, 202, 238);
    -webkit-text-stroke: 0 transparent;
    z-index: -1;

}
.pill {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 10px 14px;
    border-radius: 999px;
    backdrop-filter: blur(10px);
    font-size: 0.95rem;
}

.btn {
    display: inline-block;
    margin-top: 35px;
    background: rgb(250, 109, 182);
    padding: 14px 22px;
    border-radius: 100px;
    border-color: transparent;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 80px;
    font-weight: 700;
    transition: transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    background: rgb(255, 159, 221);
    cursor: pointer;
}

.btn-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
}

.texto5{
    font-family: BebasNeue, sans-serif;
    font-size: 2rem;
    opacity: 0.6
}
.container {
    position: relative;
    max-width: 950px;
    margin: auto;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.contenedorHorizontal{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 1200px;
    height: auto;
    flex-shrink: 0;
}
.fotoUNLP{

    width: 50%;
    height: auto;
    left: 0;
}
h2 {
    font-size: 2.2rem;
}

p {
    opacity: 0.85;
    font-size: 1.1rem;
    line-height: 1.6;
}

.cards {
    margin-top: 35px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(10px);
    transition: transform 0.25s ease;
}

.card:hover {
    transform: translateY(-6px);
}

.actions {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.timeline {
    margin-top: 40px;
    display: grid;
    gap: 16px;
}

.step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 16px;
}

.step span {
    font-size: 1.6rem;
}

.rsvp {
    margin-top: 30px;
}

.footer-msg {
    margin-top: 35px;
    font-size: 1.2rem;
    font-weight: 600;
}

.footer {
    padding: 35px;
    text-align: center;
    opacity: 0.6;
}
.flecharulo{
    position: absolute;
    width: auto;
    height: 350px;
    alignment-baseline: middle;
    translate: -50% ;
}
.flecha{
    position: absolute;
    rotate: -90deg;
    scale: 0.1;
    left: 5rem;
    top: -32rem;

}
.dalePlay{
    position: absolute;
    translate: 10px 180px;
    font-size: 3rem;
}
.tituloFamilia{
    font-family: BebasNeue, serif;
    font-size: 4rem;
    text-align: end;
    padding-top: 6rem;
    background: linear-gradient(90deg, #d3d3d3, #1c1c1c);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.textoFamilia{
    font-family: imprenta-mayuscula, serif;
    text-align: end;
    font-size: 1.4rem;
}
.textoInvitacion{
    font-family: Avallon, serif;
    text-align: end;
    font-size: 3rem;
    color: rgb(179, 45, 120);
}
.manuscrita{
    padding-top: 2rem;
    padding-left: 1rem;
    font-family: handelson, serif;
    text-align: center;
    justify-content: center;
    color: dimgray;
    font-size: 6rem;
}
.textoUbicacion{
    font-family: imprenta-mayuscula, serif;
    font-size: 1.5rem;
    padding: 2rem
}
.manuscrita2{
    padding-top: 1rem;
    padding-left: 0;
    font-family: handelson, serif;
    text-align: center;
    justify-content: center;
    color: dimgray;
    font-size: 9rem;
}
.wrapper{
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
}
.svgDia{
    margin-top: 10rem;
    scale: 1.2;
    margin-right: 3rem;
}
.texto3{
    font-family: Pompiere, serif;
    font-size: 3rem;
}
.texto4{
    font-family: imprenta-mayuscula, serif;
    color: #fa2684;
    filter: drop-shadow(0px 0px 9px #fa2684);
    font-size: 4rem;
}
.copas2{
    height: auto;
    width: 600px;
    translate: -750px -200px
}
/* --------- Stickers estilo collage --------- */
.sticker {
    position: absolute;
    border-radius: 22px;
    object-fit: cover;
    filter:
            drop-shadow(0px 8px 9px rgba(0,0,0,0.35))
            drop-shadow(0px 20px 23px rgba(0,0,0,0.25));
    /*box-shadow: 0px 20px 50px rgba(0,0,0,0.5);*/
    /*border: 2px solid rgba(255,255,255,0.15);*/

}
.savedate{
    width: 533px;
    height: 486px;
    top: 0rem;
    right: 0rem;
    scale: 0.5;
    rotate: -20deg;
}
.monio{
    width: 240px;
    height: 240px;
    top: 10rem;
    left: 6rem;
    scale: 1.4;
    rotate: -20deg;
}
.gatomedico{
    width: 240px;
    height: 240px;
    bottom: 1rem;
    left: 6rem;
    scale: 1.4;
}
.gatorecibido{
    width: 240px;
    height: 240px;
    bottom: 1rem;
    right: 6rem;
    scale: 1.4;
}
.svgFlecha{
    left: 20rem;
    bottom: 1rem;
}
.bola {
    scale: 0.4;
    top: -50rem;
    left: -50rem;
}
.copas{
    width: 240px;
    height: 240px;
    top: 9rem;
    right: 5rem;
    rotate: -22deg;
    scale: 1.8;
}
.meme{
    translate: -800px 160px;
    rotate: 10deg;
    object-fit: cover;
    object-position: center;
    scale: 0.4;
    overflow: hidden;
}
.sofi2{

    top: 10rem;
    right: 6rem;
    rotate: 10deg;
    scale: 0.7;
}
.estrella {
    --base-rot: 12deg;
    animation: rotar 1s steps(1) infinite;
    width: 240px;
    height: 240px;
    top: 0rem;
    left: 9rem;
    rotate: 12deg;
    scale: 1.4;
}
.gorro{
    --base-tam: 2.2;
    animation: crecer 2s ease-in-out infinite;
    width: 240px;
    height: 240px;
    translate: -7rem -29rem;
    rotate: -19deg;
    scale: 2.2;
    z-index: 1;
}
.corazon1 {
    --base-rot: 12deg;
    animation: rotar 0.7s steps(1) infinite;
    width: 240px;
    height: 240px;
    top: -3rem;
    left: 16rem;
    rotate: 12deg;
    scale: 0.7;
}
.corazon2 {
    --base-rot: -20deg;
    animation: rotar 0.9s steps(1) infinite;
    width: 240px;
    height: 240px;
    top: 4rem;
    left: 16rem;
    rotate: -20deg;
    scale: 0.5;
}
.sofi1{
    top: 7rem;
    left: -4rem;
    scale: 0.7;


}
.estrella2 {
    --base-rot: 22deg;
    animation: rotar 1s steps(1) infinite;
    width: 240px;
    height: 240px;
    top: -3rem;
    right: 5rem;
    scale: 0.7;
}
.estrella3 {
    --base-rot: 22deg;
    animation: rotar 1.6s steps(1) infinite;
    width: 240px;
    height: 240px;
    top: -1rem;
    right: -2rem;
    scale: 0.9;
}
.estrella4 {
    --base-rot: 22deg;
    animation: rotar 1.6s steps(1) infinite;
    width: 240px;
    height: 240px;
    scale: 2;
    translate: -34rem -7rem;
}
.estrella5 {
    --base-rot: 22deg;
    animation: rotar 1.2s steps(1) infinite;
    width: 240px;
    height: 240px;
    scale: 1;
    translate: -28rem 0rem;
}
.hospital{
    width: auto;
    height: 400px;
    translate: -10rem -30rem
}
.lisa{
    width: 500px;
    height: auto;
    translate: -40rem -30rem;

}
.stickerCambio{
    background-color: #FF4195;
    font-family: Boogaloo, sans-serif ;
    padding: 10px;
    rotate: -25deg;
    translate: 0 -70px;
}
.cereza{
    width: 300px;
    height: auto;
    translate: -300px -300px;
    rotate: 20deg;
}
.estrella6 {
    --base-rot: 22deg;
    animation: rotar 1.1s steps(1) infinite;
    width: 240px;
    height: 240px;
    scale: 1.5;
    translate: 28rem 0rem;
}
.sofi3{
    width: auto;
    height: 400px;
    translate: 250px 150px;
}
.final1{
    width: auto;
    height: 400px;
    translate: -400px 150px;
}
.final2{
    width: auto;
    height: 700px;
    translate: -350px -150px;
}
.final3{
    width: auto;
    height: 400px;
    translate: -50px 100px;
}
.final4{
    width: auto;
    height: 400px;
    translate: 100px 250px;
}
.final5{
    width: auto;
    height: 450px;
    translate: 250px 100px;
}
.final6{
    width: auto;
    height: 450px;
    translate: 450px -100px;
}
.final7{
    width: auto;
    height: 450px;
    translate: 490px 200px;
}
/* Foto flotante sección 2 */
.floating-photo {
    position: absolute;
    right: 6%;
    top: 30%;
    width: 420px;
    border-radius: 26px;
    border: 2px solid rgba(255,255,255,0.15);
    box-shadow: 0px 20px 60px rgba(0,0,0,0.55);
    transform: rotate(-6deg);
}
/* ===========================
   MOBILE FIXES (NO DESKTOP CHANGES)
   =========================== */
@media (max-width: 900px) {

    html, body {
        min-width: 0 !important;
        width: 100%;
        overflow-x: hidden;
        background-size: cover;
    }

    body {
        background-size: 60rem;
    }

    /* Layout general */
    .hero {
        padding: 0 1rem;
        min-width: 0 !important;
    }

    .hero-content {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%;
        padding-top: 12rem;
        padding-bottom: 28rem;
    }
    .texto5{
        font-family: BebasNeue, sans-serif;
        font-size: 1.2rem;
        opacity: 0.6
    }
    .container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .wrapper {
        display: flex;
        width: 100%;
        overflow: visible;
    }

    /* Carta contador */
    .carta {
        min-width: 0 !important;
        width: 100%;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }

    /* Titulos */
    .pretitulo {
        font-size: 2rem;
    }

    .titulo {
        font-size: 3.2rem;
        -webkit-text-stroke: 1px rgb(234, 195, 206);
    }

    .titulo::before {

        display: none;
    }

    /* Ajustar el pseudo relleno desplazado */
    .titulo::before {
        left: 10px;
    }

    /* Botón play */
    .btn {
        font-size: 3rem;
        padding: 12px 18px;
    }

    .dalePlay {
        position: static;
        translate: 0 0;
        font-size: 2rem;
        margin-top: 2rem;
    }
    .cartaBordeSuperior{
        scale: 0.2;
        top: -22rem;
        left: -22rem;
    }
    .cartaBordeInferior{
        scale: 0.2;
        bottom: -22rem;
        right: -22rem;

    }
    .textoUbicacion{
        font-size: 1rem; padding: 2rem
    }
    .flecha {
        display: none;
    }

    /* Texto familia */
    .tituloFamilia {
        font-size: 2.5rem;
        text-align: center;
        padding-top: 4rem;
    }
    .hero-content2{
        padding-top: 20rem;
        padding-bottom: 2rem;
    }
    .textoFamilia {
        font-size: 1.1rem;
        text-align: center;
        padding: 0 0.5rem;
    }
    .num{
        font-size: 0.5rem;
    }
    .timer{
        gap: 0px;
    }
    .textoInvitacion {
        font-size: 2rem;
        text-align: center;
        padding-top: 2rem;
    }

    .manuscrita {
        font-size: 3rem;
        padding-top: 1rem;
        padding-left: 0;
    }
    .manuscrita2 {
        font-size: 4rem;
        padding-top: 1rem;
        padding-left: 0;
    }

    /* Contador */
    .num {
        font-size: 3.5rem;
    }

    .sep {
        font-size: 3.5rem;
    }

    .label {
        font-size: 1.1rem;
    }

    /* SVG fecha */
    .svgDia {
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 4rem auto 0 auto;
        scale: 1;
    }
    .savedate{
        width: auto;
        height: 200px;
        right: -30px;
        top: 30px;
    }
    .gatorecibido{
        width: auto;
        height: 200px;
        right: -30px;
    }
    .gatomedico{
        width: auto;
        height: 200px;
        left: -30px;
    }
    .monio{
        width: auto;
        height: 150px;
        left: -10px;
        top: 60px;
    }

    /* Contenedor horizontal (foto + texto) */
    .contenedorHorizontal {
        padding-top:2rem;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .fotoUNLP {
        border-radius: 22px;
        width: 100%;
        max-width: 420px;
    }

    /* Boton ubicacion */
    .botonUbicacion {
        font-size: 1.5rem;
        padding: 1rem 2rem;
    }

    .flechaUbicacion {
        display: none;
    }

    /* Ajustar sección hospital */
    .texto3 {
        font-size: 2rem;
        padding: 0 1rem;
    }

    .texto4 {
        font-size: 2.1rem;
        padding: 0 1rem;
    }

    /* Stickers: ocultar los que rompen el layout */
    .flecharulo,
    .estrella6 {
        display: none;
    }
    .copas2 {
        width: auto;
        height: 250px;
        translate: -270px 100px;
        rotate: 20deg;
    }
    .meme{
        width: auto;
        height: 200px;
        translate: -320px 260px;
        left: 13rem;
        rotate: 10deg;
    }
    .lisa{
        width: auto;
        height: 250px;
        translate: calc(-50% + 180px) -200px;
    }
    .cereza{
        width: auto;
        height: 150px;
        translate: calc(-50% - 150px) -160px;
    }
    .hospital {
        width: auto;
        height: 240px;
        translate: -50% -300px;
    }
    /* Stickers principales: reubicar */
    .estrella4{
        width: 240px;
        height: 240px;
        scale: 0.8;
        translate: calc(-50% - 70px) -40%;
    }
    .estrella5{
        width: 240px;
        height: 240px;
        scale: 0.8;
        translate: calc(50% + 70px) -40% ;
    }
    .gorro {
        --base-tam: 0.7;
        animation: crecer 2s ease-in-out infinite;
        translate: -50% -300px;
    }

    .sofi1 {
        left: -200px;
        top: 5rem;
        scale: 0.4;
    }

    .sofi2 {
        right: -100px;
        top: 6rem;
        scale: 0.4;
    }
    .sofi3 {
        width: auto;
        height: 200px;
        translate: 100px 150px;
    }
    .estrella {
        left: -50px;
        top: -60px;
        scale: 0.4;
    }
    .corazon1 {
        left: -10px;
        top: -30px;
        scale: 0.2;
    }
    .corazon2 {
        left: -10px;
        top: -10px;
        scale: 0.1;
    }
    .bola{
        width: auto;
        height: 700px;
        left: -300px;
        top: -300px;
        scale: 0.3;
    }
    .estrella2 {
        right: -30px;
        top: -70px;
        scale: 0.6;
    }
    .estrella3{
        right: -70px;
        top: -10px;
        scale: 0.3;
    }
    .copas {
        right: -50px;
        top: 60px;
        scale: 0.8;
    }

    /* Ultima sección de fotos finales */
    .final6, .final7 {
        display: none;
    }
    .final1 {
        width: auto;
        height: 300px;
        translate: -200px 100px;
    }
    .final2 {
        width: auto;
        height: 300px;
        translate: -100px 100px;
    }
    .final3 {
        width: auto;
        height: 180px;
        translate: 0 100px;
    }
    .final4 {
        width: auto;
        height: 200px;
        translate: 50px 220px;
    }
    .final5 {
        width: auto;
        height: 300px;
        translate: 150px 100px;
        z-index: 1;
    }
}

/* --------- Animaciones reveal --------- */
.reveal {
    opacity: 0;
    translate: 0 30px;
    scale: 0.98;
    transition: all 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}