@font-face {
        font-family: 'MiFuente';
        src: url('font/ArsenicaTrial-Regular.ttf') format('truetype');
    }

    body {
        font-family: 'MiFuente';
        background-color: #7C0116;
        color: #E0A4B0;
    }

    #menu,
    #cartas,
    #pareja,
    #manudex,
    #cartita,
    #recuerditos,
    #preguntitas,
    #wrapped,
    #tareas,
    #magic {
        display: none;
    }

    #contadorDias,
    #contadorAniversario {
        font-family: 'Courier New', Courier, monospace;
    }

    @media screen and (max-width: 430px) {

        h4 {
            font-size: 50px;
            text-align: center;
            margin-top: 0;
        }

        p {
            font-size: 20px;
            text-align: center;
        }

        #decoracion {
            width: 410px;
            height: 100px;
            margin-bottom: 0;
        }

        #spiderman,
        #riolu,
        #ring {
            position: fixed;
            width: 100px;
            height: 100px;
        }

        #riolu {
            top: 200px;
            left: 300px;
        }

        #onepiece {
            position: fixed;
            width: 80px;
            height: 80px;
            top: 400px;
            left: 20px;
        }

        #ring {
            top: 600px;
            left: 300px;
        }

        #heart {
            position: fixed;
            width: 80px;
            height: 80px;
            top: 400px;
            left: 300px;
        }

        #estrellas {
            position: fixed;
            width: 70px;
            height: 70px;
            top: 230px;
            left: 100px;
        }

        #a {
            position: fixed;
            width: 70px;
            height: 70px;
            top: 530px;
            left: 50px;
        }

        #tarta {
            margin-left: 90px;
            margin-bottom: 0;
        }

        .botonEmpezar {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .botonEmpezar img {
            width: 150px;
            height: 70px;
            margin-right: 20px;
        }

        #menu h3 {
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: 35px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px;
        }

        .menuManudex,
        .menuCartas,
        .menuPareja,
        .menuMagic {
            display: flex;
            justify-content: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px 24px;
        }

        .fila1 {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 10px;
        }

        .fila2 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .fila3 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .texto {
            font-size: 13px;
            text-align: center;
            margin-bottom: 0px;
        }

        .titulo {
            margin-top: 0px;
            font-size: 25px;
            text-align: center;
        }

        .menuManudex {
            justify-items: center;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .menuManudex img {
            height: 170px;
            width: 70px;
        }

        .menuPareja {
            display: grid;
            grid-template-columns: 2fr 1fr;
            justify-items: center;
        }

        .menuPareja img {
            height: 150px;
            width: 120px;
        }

        .menuCartas {
            justify-items: center;
            display: grid;
            grid-template-rows: 1fr 1fr;
            height: 250px;
        }

        .menuCartas img {
            margin-top: 0px;
            width: 70px;
        }

        .menuMagic {
            height: 250px;
            justify-items: center;
            display: grid;
            grid-template-rows: 1fr 1fr;
        }

        .menuMagic img {
            margin-top: 30px;
            width: 50px;
            margin-top: 0px;
        }

        #magic h4 {
            margin-top: 100px;
        }

        .barraCartas {
            width: 350px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraCartas ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraCartas ul li a {
            color: #F7D2EB;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s;
        }

        .barraCartas ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloCartas {
            color: #F7D2EB;
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            text-align: center;
        }

        .encabezadoCartas {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoCartas h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #F7D2EB;
            margin: 0;
            font-weight: 700;
        }

        .textoCartas {
            color: #F7D2EB;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoCartas .deco {
            color: #f4a7c3;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .cartitas {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .cartitas img {
            display: block;
            width: 200px;
            height: 150px;
        }

        .cartita1,
        .cartita2 {
            position: relative;
        }

        .carta1 p {
            position: absolute;
            top: 220px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta2 p {
            position: absolute;
            top: 220px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta3 p {
            position: absolute;
            top: 370px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta4 p {
            position: absolute;
            top: 375px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta5 .uno {
            position: absolute;
            top: 515px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta5 .dos {
            position: absolute;
            top: 530px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta6 p {
            position: absolute;
            top: 525px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta7 p {
            position: absolute;
            top: 670px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta8 p {
            position: absolute;
            top: 680px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta9 .uno {
            position: absolute;
            top: 815px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 13px;
            text-align: center;
        }

        .carta9 .dos {
            position: absolute;
            top: 830px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 13px;
            text-align: center;
        }

        .carta10 p {
            position: absolute;
            top: 825px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta11 .uno {
            position: absolute;
            top: 965px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 13px;
            text-align: center;
        }

        .carta11 .dos {
            position: absolute;
            top: 980px;
            left: 110px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 13px;
            text-align: center;
        }

        .carta12 p {
            position: absolute;
            top: 970px;
            left: 313px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .barraPareja {
            width: 350px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraPareja ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraPareja ul li a {
            color: #B6E7DC;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s;
        }

        .barraPareja ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloPareja {
            color: #B6E7DC;
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoPareja {
            display: flex;
            align-items: center;
            gap: 16px;
            text-align: center;
        }

        .encabezadoPareja h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #B6E7DC;
            margin: 0;
            font-weight: 700;
        }

        .textoPareja {
            color: #B6E7DC;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoPareja .deco {
            color: #B6E7DC;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .barraManu {
            width: 350px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraManu ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraManu ul li a {
            color: #E8EAF6;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s;
        }

        .barraManu ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloManu {
            color: #E8EAF6;
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoManu {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoManu h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #E8EAF6;
            margin: 0;
            font-weight: 700;
        }

        .textoManu {
            color: #E8EAF6;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoManu .deco {
            color: #E8EAF6;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .filita1,
        .filita3,
        .filita2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .contDias,
        .contAniversario,
        .recuerdos,
        .spotify,
        .quiz,
        .recetas,
        .cosasPendientes {
            margin-top: 10px;
            border: 1px solid black;
            justify-content: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px 24px;
        }

        .contDias,
        .contAniversario {
            height: 115px;
        }

        .contDias p,
        .contAniversario p {
            font-size: 15px;
        }

        .spotify,
        .recuerdos,
        .quiz,
        .cosasPendientes {
            justify-items: center;
        }

        .spotify img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .quiz img {
            width: 100px;
            height: 100px;
        }

        .recuerdos img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .quiz img {
            margin-left: 50px;
            width: 50px;
            height: 75px;
        }

        .contDias img {
            width: 45px;
            height: 45px;
            margin-left: 50px;
        }

        .cosasPendientes img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .menuMusica iframe,
        .menuMusica p {
            display: none;
        }

        .menuMusica img {
            width: 125px;
            height: 180px;
            border-radius: 15px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .cuerpoCartita {
            display: grid;
            grid-template-rows: 1fr 1fr;
        }

        .parrafo1 {
            display: grid;
            grid-template-columns: 2fr 1fr;
        }

        .parrafo2 {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .recuerdo1 .tituloRecuerdo {
            font-family: 'Courier New', Courier, monospace;
        }

        .r {
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 20px;
        }

        .recuerdo1,
        .recuerdo3,
        .recuerdo5,
        .recuerdo7 {
            margin-top: 10px;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .p1 {
            font-size: 15px;
            margin-left: 10px;
            text-align: justify;
        }

        .recuerdo2,
        .recuerdo4,
        .recuerdo6,
        .recuerdo8 {
            margin-top: 10px;
            display: grid;
            grid-template-columns: 2fr 1fr;
        }

        .recuerdo2 img,
        .recuerdo1 img,
        .recuerdo3 img,
        .recuerdo5 img,
        .recuerdo8 img,
        .recuerdo7 img,
        .recuerdo6 img {
            width: 75px;
            height: 75px;
            margin-left: 28px;
        }

        .recuerdo2 img,
        .recuerdo3 img,
        .recuerdo5 img {
            margin-top: 20px;
        }

        .recuerdo4 img {
            width: 150px;
            height: 90px;

        }

        .p2 {
            text-align: justify;
            font-size: 15px;
            margin-right: 10px;
        }

        #tareas ul {
            font-size: 16px;
        }

        .imagenWrapped img {
            width: 300px;
            height: 550px;
            border-radius: 30px;
            filter: brightness(80%);
            display: block;
            margin: 0 auto;
            margin-top: 20px;
        }

        .barraMagic {
            width: 350px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraMagic ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraMagic ul li a {
            color: #EECE7B;
            text-decoration: none;
            font-size: 12px;
            transition: color 0.2s;
        }

        .barraMagic ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloMagic {
            color: #EECE7B;
            margin-top: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoMagic {
            display: flex;
            align-items: center;
            gap: 16px;
            text-align: center;
        }

        .encabezadoMagic h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #EECE7B;
            margin: 0;
            font-weight: 700;
        }

        .textoMagic {
            color: #EECE7B;
            font-size: 0.95rem;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoMagic .deco {
            color: #EECE7B;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        #tarjetita {
            margin-top: 20px;
            width: 415px;
            height: 300px;
            border-radius: 20px;
        }

        .cuerpoManudex {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .cuerpoManudex img {
            width: 200px;
            height: 100px;
            border-radius: 20px;
        }

        .bonito {
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
        }

    }


    @media screen and (min-width: 431px) and (max-width: 1299px) {
        h4 {
            font-size: 70px;
            text-align: center;
        }

        #inicio p {
            font-size: 25px;
            text-align: center;
        }

        .botonEmpezar {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .botonEmpezar img {
            width: 300px;
            height: 210px;
        }

        #menu h3 {
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: 50px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px;
        }

        .menuManudex,
        .menuCartas,
        .menuPareja,
        .menuMagic,
        .menuMusica {
            display: flex;
            justify-content: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px 24px;
        }

        .fila1 {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 10px;
        }

        .fila2 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .fila3 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            height: 200px;
        }

        .texto {
            font-size: 20px;
            text-align: center;
        }

        .titulo {
            font-size: 40px;
            text-align: center;
        }

        .menuManudex {
            justify-items: center;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .menuManudex img {
            height: 250px;
            width: 100px;
        }

        .menuPareja {
            display: grid;
            grid-template-columns: 2fr 1fr;
            justify-items: center;
        }

        .menuPareja img {
            height: 200px;
            width: 150px;

        }

        .menuCartas {
            display: grid;
            grid-template-columns: 2fr 1fr;
        }

        .menuCartas img {
            margin-top: 60px;
            width: 150px;
        }

        .menuMagic {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .menuMagic img {
            margin-top: 60px;
            width: 100px;
        }

        .barraCartas {

            width: 700px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraCartas ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraCartas ul li a {
            color: #F7D2EB;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 1px;
            transition: color 0.2s;
        }

        .barraCartas ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloCartas {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoCartas {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoCartas h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #F7D2EB;
            margin: 0;
            font-weight: 700;
        }

        .textoCartas {
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoCartas .deco {
            color: #f4a7c3;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .cartitas {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            justify-items: center;
        }

        .cartitas img {
            display: block;
            width: 250px;
            height: 200px;
        }

        .carta1 p {
            position: absolute;
            top: 240px;
            left: 155px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta2 p {
            position: absolute;
            top: 240px;
            left: 445px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta3 p {
            position: absolute;
            top: 240px;
            left: 730px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta4 p {
            position: absolute;
            top: 250px;
            left: 1025px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 17px;
            text-align: center;
        }

        .carta5 .uno {
            position: absolute;
            top: 430px;
            left: 155px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta5 .dos {
            position: absolute;
            top: 450px;
            left: 155px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta6 p {
            position: absolute;
            top: 445px;
            left: 445px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta7 p {
            position: absolute;
            top: 445px;
            left: 735px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta8 p {
            position: absolute;
            top: 445px;
            left: 1020px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta9 .uno {
            position: absolute;
            top: 640px;
            left: 155px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta9 .dos {
            position: absolute;
            top: 660px;
            left: 155px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta10 p {
            position: absolute;
            top: 650px;
            left: 450px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta11 .uno {
            position: absolute;
            top: 645px;
            left: 730px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta11 .dos {
            position: absolute;
            top: 665px;
            left: 735px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 15px;
            text-align: center;
        }

        .carta12 p {
            position: absolute;
            top: 645px;
            left: 1025px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .barraPareja {
            width: 700px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraPareja ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraPareja ul li a {
            color: #B6E7DC;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 1px;
            transition: color 0.2s;
        }

        .barraPareja ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloPareja {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoPareja {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoPareja h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #B6E7DC;
            margin: 0;
            font-weight: 700;
        }

        .textoPareja {
            text-align: center;
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoPareja .deco {
            color: #B6E7DC;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .barraManu {
            width: 700px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 24px;
            margin: 0 auto;
        }

        .barraManu ul {
            display: flex;
            list-style: none;
            gap: 24px;
            margin: 0;
            padding: 0;
        }

        .barraManu ul li a {
            color: #B5BBC9;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 1px;
            transition: color 0.2s;
        }

        .barraManu ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloManu {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoManu {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoManu h1 {
            font-size: clamp(2.8rem, 6vw, 4.5rem);
            color: #B5BBC9;
            margin: 0;
            font-weight: 700;
        }

        .textoManu {
            text-align: center;
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoManu .deco {
            color: #B5BBC9;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .menuMusica iframe {
            display: none;
        }

        .menuMusica img {
            width: 175px;
            height: 255px;
            border-radius: 22px;
            margin-top: 10px;
            margin-left: 10px;
        }

        .cuerpoNosotros {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
        }

        .contDias,
        .contAniversario,
        .recuerdos,
        .spotify,
        .quiz,
        .recetas,
        .cosasPendientes {
            margin-top: 10px;
            border: 1px solid black;
            justify-content: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px 24px;
        }

        .contDias,
        .contAniversario {
            height: 115px;
        }

        .contDias p,
        .contAniversario p {
            font-size: 15px;
        }

        .spotify,
        .recuerdos,
        .quiz,
        .cosasPendientes {
            justify-items: center;
        }

        .spotify img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .quiz img {
            width: 100px;
            height: 100px;
        }

        .recuerdos img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .quiz img {
            margin-left: 50px;
            width: 50px;
            height: 75px;
        }

        .contDias img {
            width: 45px;
            height: 45px;
            margin-left: 50px;
        }

        .cosasPendientes img {
            margin-left: 25px;
            width: 100px;
            height: 100px;
        }

        .menuMusica iframe,
        .menuMusica p {
            display: none;
        }

        .menuMusica img {
            width: 125px;
            height: 180px;
            border-radius: 15px;
            margin-top: 10px;
            margin-left: 10px;
        }
    }

    @media screen and (min-width: 1300px) {
        h4 {
            font-size: 100px;
            text-align: center;
        }

        p {
            font-size: 35px;
            text-align: center;
        }

        .botonEmpezar {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .botonEmpezar img {
            width: 300px;
            height: 210px;
        }

        #menu h3 {
            margin-top: 5px;
            margin-bottom: 10px;
            font-size: 80px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px;
        }

        .menuManudex,
        .menuCartas,
        .menuPareja,
        .menuMagic,
        .menuNose {
            display: flex;
            justify-content: center;
            gap: 28px;
            background: rgba(224, 164, 176, 0.10);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(224, 164, 176, 0.15);
            border-radius: 50px;
            padding: 10px 24px;
        }

        .fila1 {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 10px;
        }

        .fila2 {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .fila3 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .texto {
            font-size: 20px;
            text-align: center;
        }

        .titulo {
            font-size: 40px;
            text-align: center;
        }

        .menuManudex {
            justify-items: center;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .menuManudex img {
            height: 250px;
            width: 100px;
        }

        .menuPareja {
            display: grid;
            grid-template-columns: 2fr 1fr;
            justify-items: center;
        }

        .menuPareja img {
            height: 200px;
            width: 150px;

        }

        .menuCartas {
            justify-items: center;
            display: grid;
            grid-template-columns: 2fr 1fr;
        }

        .menuCartas img {
            margin-top: 40px;
            width: 150px;
        }

        .menuMagic {
            justify-items: center;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        .menuMagic img {
            margin-top: 30px;
            width: 100px;
        }

        .barraCartas {
            width: 1000px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 30px;
            margin: 0 auto;
        }

        .barraCartas ul {
            display: flex;
            list-style: none;
            gap: 50px;
            margin: 0;
            padding: 0;
        }

        .barraCartas ul li a {
            color: #F7D2EB;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 2px;
            transition: color 0.2s;
        }

        .barraCartas ul li a:hover,
        .barraCartas ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloCartas {
            font-size: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoCartas {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoCartas h1 {
            margin-top: 20px;
            font-size: 100px;
            color: #F7D2EB;
            margin-bottom: 0;
            font-weight: 700;
        }

        .textoCartas {
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezaadoCartas .deco {
            color: #f4a7c3;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .cartitas {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            justify-items: center;
        }

        .cartitas img {
            display: block;
            width: 350px;
            height: 270px;
        }

        .carta1 p {
            position: absolute;
            top: 300px;
            left: 200px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 25px;
            text-align: center;
        }

        .carta2 p {
            position: absolute;
            top: 300px;
            left: 580px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta3 p {
            position: absolute;
            top: 300px;
            left: 950px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 25px;
            text-align: center;
        }

        .carta4 p {
            position: absolute;
            top: 300px;
            left: 1330px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 18px;
            text-align: center;
        }

        .carta5 .uno {
            position: absolute;
            top: 300px;
            left: 1700px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 25px;
            text-align: center;
        }

        .carta5 .dos {
            position: absolute;
            top: 325px;
            left: 1700px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 25px;
            text-align: center;
        }

        .carta6 p {
            position: absolute;
            top: 575px;
            left: 200px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta7 p {
            position: absolute;
            top: 575px;
            left: 575px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta8 p {
            position: absolute;
            top: 575px;
            left: 955px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta9 .uno {
            position: absolute;
            top: 575px;
            left: 1330px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta9 .dos {
            position: absolute;
            top: 595px;
            left: 1330px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta10 p {
            position: absolute;
            top: 585px;
            left: 1700px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta11 .uno {
            position: absolute;
            top: 850px;
            left: 200px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta11 .dos {
            position: absolute;
            top: 870px;
            left: 200px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 20px;
            text-align: center;
        }

        .carta12 p {
            position: absolute;
            top: 850px;
            left: 575px;
            transform: translate(-50%, -50%);
            color: #F7D2EB;
            font-size: 25px;
            text-align: center;
        }

        .barraPareja {
            width: 1000px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 30px;
            margin: 0 auto;
        }

        .barraPareja ul {
            display: flex;
            list-style: none;
            gap: 50px;
            margin: 0;
            padding: 0;
        }

        .barraPareja ul li a {
            color: #B6E7DC;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 2px;
            transition: color 0.2s;
        }

        .barraPareja ul li a:hover,
        .barraPareja ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloPareja {
            font-size: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoPareja {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoPareja h1 {
            margin-top: 20px;
            font-size: 100px;
            color: #B6E7DC;
            margin-bottom: 0;
            font-weight: 700;
        }

        .textoPareja {
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoPareja .deco {
            color: #B6E7DC;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        #pareja table {
            width: 600px;
            height: 400px;
            border-collapse: collapse;
        }

        td {
            border: 2px solid black;
            text-align: center;
            vertical-align: middle;
            padding: 20px;
        }

        .barraManu {
            width: 1000px;
            justify-content: center;
            display: flex;
            align-items: center;
            gap: 28px;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50px;
            padding: 20px 30px;
            margin: 0 auto;
        }

        .barraManu ul {
            display: flex;
            list-style: none;
            gap: 50px;
            margin: 0;
            padding: 0;
        }

        .barraManu ul li a {
            color: #B6E7DC;
            text-decoration: none;
            font-size: 20px;
            letter-spacing: 2px;
            transition: color 0.2s;
        }

        .barraManu ul li a:hover,
        .barraManu ul li a.active {
            color: #ffffff;
            font-weight: 500;
        }

        .tituloManu {
            font-size: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .encabezadoManu {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .encabezadoManu h1 {
            margin-top: 20px;
            font-size: 100px;
            color: #B6E7DC;
            margin-bottom: 0;
            font-weight: 700;
        }

        .textoManu {
            color: rgba(255, 255, 255, 0.85);
            font-size: 20px;
            letter-spacing: 0.03em;
            margin: 0;
        }

        .encabezadoManu .deco {
            color: #B6E7DC;
            font-size: 1.4rem;
            opacity: 0.8;
        }

        .menuMusica a,
        .menuMusica p {
            display: none;
        }

        .menuMusica iframe {
            border-radius: 100px;
        }
    }