:root {
    --principal: #222222;
    --secundario: #2866c9;
    --negro: black;
    --blanco: white;
    --fuente1: 'Krub';
    --fuente2: 'Poppins';
    --fuente3: 'DynaPuff';
    --fuente4: 'Montserrat';
    --fuente5: 'Anton';
    --fuente6: 'Kanit';
}

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
}

img {
    pointer-events: none;
    /*Evita arrastrar imagen*/
}

.centered-object {
    position: absolute;
    top: 50%;
    /* Desplaza el objeto al 50% de la altura del contenedor */
    left: 0;
    /* Coloca el objeto en el lado izquierdo del contenedor */
    right: 0;
    /* Coloca el objeto en el lado derecho del contenedor */
    transform: translate(0, -50%);
    /* Aplica una traslación para centrar verticalmente el objeto */
    padding: 10px;
    /* Añade un poco de espacio interno al objeto */
}

.titulomix {
    font-size: 4rem;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 6rem 0rem 8rem 10%;
    font-weight: 600;
    width: 45%;
}

.azul {
    color: #015be2;
}

body::-webkit-scrollbar {
    width: 7px;
}

body::-webkit-scrollbar-button {
    width: 7px;
}

body::-webkit-scrollbar-thumb {
    background-color: #00bac0;
    border-radius: 0.5rem;
}

.contenedor {
    width: 100%;
    margin: 0 auto;
}

.txtgris {
    color: #6e6e73;
}

.letritas {
    color: #b3b3b3;
    font-size: 1.3rem;
    margin-left: 1rem;
}

.negritas {
    font-weight: bold;
}

.uppercase {
    text-transform: uppercase;
}

.divseparanavetxt {
    padding: 5rem;
    color: var(--blanco);
}

.avisoweb {
    /*AVISO QUE DICE MEJOR VER EN WEB*/
    width: 100%;
    z-index: 101;
    color: #000000;
    background-color: #d3d2d294;
    margin: -0.5rem 0rem 0rem 0rem;
    padding: 0.5rem;
    text-align: center;
    font-family: var(--fuente2);
    font-size: 1.5rem;
}

/*DISEÑO DE NAVEGACIÓN - INICIO*/

.nav-bg {
    width: 100%;
}

.avisoh {
    width: 100%;
    background-color: #df0000;
    z-index: 1000;
    padding: 2rem;
    color: var(--blanco);
    font-family: var(--fuente2);
    font-size: 1.2rem;
}

.navlogo {
    width: 5rem;
    height: 4.2rem;
    margin: 1rem 1rem 1rem 2rem;
    display: flex;
}

.logo {
    text-decoration: none;
    display: flex;
}

.ayudamigosn {
    /*Nombre y diseño de AYUDAMIGOS*/
    font-family: var(--fuente1);
    color: var(--secundario);
    text-transform: uppercase;
    font-weight: bold;
    margin: 1.5rem 1rem 1.5rem 0.2rem;
    font-size: 153%;
}

.navegacion-principal {
    /*Navegación principal completa*/
    background-color: rgba(0, 0, 0, 0.164);
    display: flex;
    /*ALÍNEA TODOS LOS ELEMENTOS HORIZONTALMENTE*/
    width: 100%;
    position: fixed;
    z-index: 100;
    /*Le da prioridad a la barra de navegación*/
}

.navegacion-principal ul {
    list-style-type: none;
}

.menu>li>a {
    /*LINKS PRINCIPALES CON UL Y LI*/
    display: flex;
    padding: 0.9rem 2.5rem;
    margin: 1.2rem auto;
    /*Centrar LINKS PRINCIPALES*/
    color: var(--blanco);
    font-size: 1.7rem;
    border-radius: 0.5rem;
    /*Bordes redondeados LINKS PRINCIPALES*/
    font-family: var(--fuente4);
    text-decoration: none;
    font-weight: 600;
}

.navegacion-principal:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s;
}

.navegacion-principal:not(.navegacion-principal:hover) {
    transition: all 0.3s;
}

.navegacion-principal:hover>.categorias>.menu>.categoria a {
    color: var(--negro);
}

.navegacion-principal>.categorias>.menu>.categoria a:hover {
    /*Diseño CURSOR SOBRE navegación completa*/
    transition: all 0.3s;
    color: dodgerblue;
    transform: scale(1.02);
}


.logo:hover {
    color: red;
}

.menu>li {
    position: relative;
    display: inline-block;
}

.categorias {
    position: absolute;
    right: 23%;
}

.ayudamigobtn {
    /*Botón QUIERO SE UN AYUDAMIGO*/
    position: absolute;
    right: 3rem;
    top: 1.2rem;
    color: var(--blanco);
    font-size: 100%;
    text-transform: uppercase;
    background-color: #4e8ff8;
    border-radius: 0.7rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--fuente2);
    font-weight: 500;
}

.ayudamigobtn:hover {
    background-image: linear-gradient(to right,
            orangered,
            rgb(250, 212, 0),
            lightgreen,
            dodgerblue,
            mediumpurple,
            hotpink,
            orangered);
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #ffffff;
}

div.div-logos a:hover {
    /*Diseño CURSOR SOBRE imágenes de redes*/
    background-color: var(--negro);
}


.div-logos {
    /*Div-separación de los logos*/
    position: absolute;
    right: 1rem;
    /*Posiciona hasta el final(derecha) el div con los links de redes sociales*/
    bottom: auto;
    margin: 0rem 2rem 0rem 0rem;
    width: 30rem;
}

/*ELEMENTOS REPONSIVES*/

.ham {
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    /*MANITA DE CURSOR*/
    align-items: center;
    background-color: transparent;
    border: none;
    display: flex;
    display: none;
}

.ham-icon {
    font-size: 2.8rem;
    background-color: transparent;
}

.cubrir {
    display: none;
}

@media(max-width: 1000px) {
    /*Barra Lateral Diseño*/

    .ham {
        display: block;
        position: absolute;
        top: 1.7rem;
        left: 2.5rem;
    }

    .x-icon {
        font-size: 3rem;
        display: none;
        opacity: 0;
        position: absolute;
        top: 5.5rem;
        left: 30%;
        right: 3%;
    }

    .categorias {
        /*Div de categorias*/
        position: unset;
    }

    .menu {
        /*Lista de categorias, barra lateral*/
        background-color: rgba(255, 255, 255, 0.575);
        width: 100%;
        height: 100vh;
        flex-direction: column;
        display: none;
        opacity: 0;

        text-align: center;
        align-items: center;
        align-content: center;
        justify-items: center;
    }

    .menu>li {
        /*Elementos de la lista de categorias*/
        display: flex;
    }

    .menu>li>a {
        /*LINKS PRINCIPALES CON UL Y LI*/
        margin: 3rem 0rem 1rem 2rem;
        padding: 1.3rem 1rem 1.3rem 1rem;
        /*Relleno de fondo*/
        border-radius: 0.5rem;
        /*Bordes redondeados LINKS PRINCIPALES*/
        color: var(--negro);
        font-size: 1.8rem;
        font-weight: 600;
    }

    .navegacion-principal a:hover .flecha-icon {
        /*Diseño CURSOR SOBRE navegación completa*/
        transition: all 0.1s;
        transform: rotate(-2deg);
    }

    .hr {
        display: block;
        height: 0.3px;
        margin: 0rem 2rem 0rem 2rem;
        border-color: rgb(112, 112, 112);
    }

    .hr2 {
        display: block;
        margin: 2rem 2rem 1rem 0rem;
        border-color: var(--ama);
    }


    .div-logos {
        width: 100%;
        top: 50rem;
        /*Recorre el boton grande del menú hacia abajo*/
        left: 1rem;
        right: 5rem;
    }

    .ayudamigobtn {
        /*Botón QUIERO SE UN AYUDAMIGO*/
        opacity: 0;
        display: none;
        width: 90%;
        min-width: 15rem;
        text-align: center;
    }
}

@media(max-width: 1000px) {
    /*Responsive teléfono - BARRA DE NAVEGACIÓN PRINCIPALES*/

    .navegacion-principal {
        background-color: rgba(255, 255, 255, 0.7);
        /*barra principal(todo)*/
        background-size: cover;
        flex-direction: column;
    }

    .div-principal {
        /*Div principal, incluye logo e ícono hamburguesa*/
        background-color: rgba(255, 255, 255, 0.692);
        ;
        display: flex;
        padding: 0rem 2rem;
    }

    .div-principal>.logo {
        margin: 0rem auto;
        /*CENTRA EL LOGO*/
        text-decoration: none;
    }

    .div-principal>.logo:hover {
        color: blue;
    }


    .navegacion-principal a:hover {
        /*Diseño CURSOR SOBRE navegación completa*/
        color: #0764EE;
    }
}

.navegacion-principal.activado {
    height: 100%;
}

.x-icon.activado {
    display: block;
    /*Activación de X para cerras menú*/
    opacity: 1;
    animation: muestraMenu 350ms ease-in-out both;
    z-index: 200;
}

.ham-icon.desactivado {
    /*Desaparece barras de menu al ser clickeado*/
    opacity: 0;
    display: none;
}

.ayudamigobtn.activado {
    opacity: 1;
    display: block;
}

.menu.activado {
    /*Activa y aparece el menú*/
    display: flex;
    animation: muestraMenu 350ms ease-in-out both;
    /*Animación retardada al aparecer el menu desplegable*/
}



/*Animaciones KEYBOARDS*/

@keyframes sliding {
    to {
        background-position: -2000vw;
    }
}

@keyframes muestraMenu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*Hero*/

.heroinformacion {
    /*Informacion de bienvenida hero*/
    position: relative;
    width: 100%;
}

.hero {
    /*Imágen hero*/
    width: 100%;
    margin: 0 auto;
    position: relative;
}


.pre-banner {
    width: 100%;
    padding: 3rem;
    color: transparent;
    background-color: #a3a3a3;
}

.banner {
    height: 60rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /*Muestra siempre el centro de la imagen*/
    position: relative;
}

#banner_inspiramigos {
    background-image: url(../img/inspiramigos__hero.jpg);
}

.banner__degradado {
    width: 100%;
    height: 60rem;
}

#banner__degradado--inspiramigos {
    background-image: linear-gradient(to right, #1b1b1b, rgba(255, 255, 255, 0));
}

.banner__txt {
    position: absolute;
    top: 50%;
    left: 5%;
}

.banner__txt--txt {
    font-family: var(--fuente1);
    font-size: 400%;
    color: var(--blanco);
    font-weight: 600;
}

.banner__txt--subtxt {
    font-family: var(--fuente2);
    font-size: 2rem;
    color: var(--blanco);
    font-weight: 300;
    margin-bottom: 1.5rem;
}

@media(min-width: 0px) and (max-width: 500px) {
    .banner__txt--txt {
        font-size: 4.5rem;
    }

    .banner__txt--subtxt {
        font-size: 1.7rem;
        width: 95%;
        margin-bottom: 2rem;
    }
}

.spotify {
    font-family: var(--fuente2);
    margin-top: 2rem;
    background-color: #1DB954;
    max-width: 23rem;
    padding: 0.6rem;
    border-radius: 0.8rem;
    text-align: center;
    color: var(--negro);
    text-decoration: none;
}

.spotify_icon {
    margin-right: 0.7rem;
    font-size: 2rem;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-items: center;
}

.spotify_link {
    margin-left: 0.5rem;
    font-size: 1.3rem;
}



.herocarasonriente {
    /*Carita sonriente del hero*/
    position: absolute;
    right: 23.5%;
    top: 37%;
}

.ayudamigostxt {
    /*Texto de bienvenida hero*/
    position: absolute;
    font-size: 5rem;
    font-family: var(--fuente2);
    font-weight: bold;
    right: 9.5%;
    top: 62%;
}

.ayudamigossubtxt {
    /*Subtexto del hero*/
    position: absolute;
    top: 74%;
    right: 10.5%;
    font-size: 2rem;
    font-weight: 500;
    color: var(--secundario);
    font-family: var(--fuente2);
}

/*Diseño de hero tipo 2*/


.txtinvisibleee {
    /*TEXTO INVISIBLE DEL FOOTER*/
    visibility: 0;
    opacity: 0;
}

.subtxt {
    /*Texto grande*/
    top: 46%;
    color: var(--blanco);
}


.divhero__botoon {
    width: 10%;
    background-color: #0c752b;
    text-align: center;
    position: absolute;
    top: 73%;
    right: 0;
    left: 0;
    margin: 0 auto;
    padding: 1rem;
    color: var(--blanco);
    font-size: 2rem;
    font-family: var(--fuente2);
    text-decoration: none;
}

/* .divhero__contenido--subbtxt{
    font-size: 1.8vi;
    margin-top: 2rem;
    font-family: var(--fuente2);
    font-weight: 500;
    width: 30%;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 55%;
    right: 0rem;
    left: 0rem;
    margin: 0 auto;
    border-style: solid;
    border-color: #5900ff;
    border-width: 0.3rem;
    color: #ffffff;
    border-radius: 1rem;
} */

@media (min-width: 0px) and (max-width: 880px) {
    .divhero__img {
        width: 100%;
        height: 45rem;
    }

    .divhero__contenido--toptxt {
        /*texto arriba del texto grande*/
        font-size: 2rem;
        top: 30%;
    }

    .divhero__contenido--info {
        font-size: 1.5rem;
        padding: 0rem 3% 0rem 3%;
        top: 60%;
    }

    .divhero__contenido--txt {
        font-size: 3rem;
        top: 36%;
    }

    .subtxt {
        top: 44%;
        color: var(--blanco);
    }


    .divhero__botoon {
        width: 35%;
        transform: scale(0.8);
    }
}

.divisla {
    width: 100%;
    height: 9rem;
}

.divhero__isla {
    /*Div que contiene info de la isla sobre el hero*/
    position: relative;
    display: flex;
    margin: -15rem auto 5rem auto;
    gap: 5rem;
    height: 100%;
    text-align: center;
    background-color: #004974;
    width: 60%;
    min-width: 30rem;
    border-radius: 5rem;

    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

.colorserayudamigo {
    background-color: #008006;
}

#divisla__clr__donaciones {
    background-color: #004974;
}

@media (min-width: 0px) and (max-width: 720px) {
    .divisla {
        height: 7rem;
    }

    .divhero__isla {
        /*Div que contiene info de la isla sobre el hero*/
        margin: -15rem auto 5rem auto;
        gap: 5rem;
        width: 60%;
        min-width: 30rem;
        border-radius: 5rem;

        -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
        -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
        box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    }

    .colorserayudamigo {
        background-color: #008006;
    }
}

.isla__parte1 {
    background-color: var(--blanco);
    width: 50%;
    border-radius: 5rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
    position: relative;
}

.divhero__isla--txt {
    position: absolute;
    top: 30%;
    left: 20%;
    color: var(--negro);
    font-family: var(--fuente2);
    font-size: 1.5vi;
}

.varita {
    color: var(--negro);
    margin-right: 1.5rem;
}

.isla__parte2 {
    width: 40%;
    position: relative;
    display: flex;
}

.divhero__isla--subtxt {
    position: absolute;
    top: 30%;
    left: 25%;
    font-family: var(--fuente2);
    font-size: 1.5vi;
    color: var(--blanco);
    border-bottom: 1.8px solid #ffffff;
    /* Ajusta el grosor y el color según tus preferencias */
    padding-bottom: 0.002px;
}

@media (min-width: 0px) and (max-width: 720px) {
    .divhero__isla--txt {
        position: absolute;
        top: 18%;
        left: 0%;
        line-height: 2rem;
        font-size: 1vi;
    }

    .divhero__isla--subtxt {
        top: 20%;
        left: 30%;
        width: 90%;
        border-bottom: none;
    }

    .sonrisa {
        margin-left: 1.7rem;
    }

}

@media (min-width: 765px) and (max-width: 1290px) {
    .divhero__isla--txt {
        position: absolute;
        top: 40%;
        left: 10%;
        line-height: 2rem;
        font-size: 1.8rem;
    }

    .divhero__isla--subtxt {
        top: 32%;
        left: 10%;
        width: 90%;
        border-bottom: none;
        font-size: 1.8rem;
    }

    .sonrisa {
        margin-left: 2rem;
    }

}

.sonrisa {
    color: var(--blanco);
    margin-right: 1.5rem;
    margin-left: 2rem;
    font-size: 1.7vi;
    position: absolute;
    top: 38%;
}

/*SVG*/

.niña {
    /*Imagen de niña*/
    position: absolute;
    width: 36%;
    height: 78%;
    left: 6%;
    top: 13.7rem;
}

.medcazul {
    /*Medio circulo azul*/
    position: absolute;
    width: 26%;
    height: 70%;
    rotate: -60deg;
    left: -9rem;
    top: -11rem;
    transform: rotate(120deg);
    transition: all 5s;
}

.trianguloama {
    /*Triangulo amarillo*/
    position: absolute;
    width: 32%;
    height: 40%;
    right: 3.5rem;
    top: -16rem;
    rotate: -30deg;
}

.circulorojo {
    /*Circulo rojo*/
    position: absolute;
    width: 27%;
    height: 63%;
    left: 30%;
    top: -22rem;
}



/*Objetivo*/

.articulos__div {
    width: 100%;
    max-width: 100%;
    position: relative;
    margin-top: -0.6rem;
    margin-bottom: 5rem;
}

.articulos__articulo__div {
    display: block;
}

.separador {
    width: 100%;
    max-width: 100%;
    height: 12rem;
    position: relative;
}

.separador__div {
    width: 45%;
    min-width: 35rem;
    background-color: var(--secundario);
    height: 100%;
    border-radius: 0rem 1rem 1rem 0rem;
    text-align: center;
    color: var(--blanco);
    padding-top: 2.5rem;
}


.separador__titulo {
    text-transform: uppercase;
    font-size: 3.5rem;
    font-family: var(--fuente1);
}

.separador__subtitulo {
    font-size: 2rem;
    font-family: var(--fuente2);
    font-weight: 400;
    width: 80%;
    margin: 0 auto;
}

@media (min-width: 0px) and (max-width: 550px) {
    .separador__titulo {
        font-size: 2.5rem;
    }

    .separador__subtitulo {
        font-size: 1.5rem;
        font-family: var(--fuente2);
        font-weight: 400;
        width: 80%;
        margin: 0 auto;
    }

    .separador {
        width: 100%;
        max-width: 100%;
        height: 10rem;
    }

    .separador__div {
        width: 45%;
        min-width: 35rem;
        background-color: var(--secundario);
        height: 100%;
        border-radius: 0rem 1rem 1rem 0rem;
        text-align: center;
        color: var(--blanco);
        padding-top: 2.5rem;
    }
}

.articulos__articulo__infoeimg {
    width: 100%;
    max-width: 100%;
    display: flex;
}

.separador2__div {
    width: 43%;
    min-width: 35rem;
    background-color: var(--secundario);
    height: 100%;
    border-radius: 1rem 0rem 0rem 1rem;
    text-align: center;
    color: var(--blanco);
    padding-top: 2.5rem;
    position: absolute;
    right: 0;
}

@media (min-width: 550px) and (max-width: 860px) {
    .articulos__articulo__infoeimg {
        display: block;
    }

    .separador {
        height: 12rem;
    }

    .separador__div {
        width: 70%;
    }

    .separador2__div {
        width: 70%;
    }

}

.articulo {
    width: 60%;
    margin: 5rem 0rem 5rem 8rem;
}

.articulo__titulo {
    /*Titulos de cada articulo*/
    font-size: 5rem;
    font-family: var(--fuente4);
    text-transform: uppercase;
    width: 50%;
}

.articulo__txt {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    text-align: left;
    width: 80%;
    margin: 3rem 0rem 0rem 0rem;
}

.articulo__imgs {
    width: 40%;
    text-align: center;
}

.articulo__img {
    width: 110%;
    margin: 0rem 0rem 0rem -10rem;
}



@media (min-width: 0px) and (max-width: 860px) {
    .articulos__articulo__infoeimg {
        display: block;
    }

    .articulo {
        width: 80%;
        margin: 5rem 0rem 7rem 4rem;
    }

    .articulo__img {
        text-align: center;
        position: relative;
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .articulo__titulo {
        /*Titulos de cada articulo*/
        font-size: 4rem;
        font-family: var(--fuente4);
        text-transform: uppercase;
        width: 50%;
    }

}


/*Articulo derecho*/

.articulo2__div {
    width: 45%;
    margin: 7rem -10rem 5rem 0rem;
}

.articulo2__titulo {
    font-size: 5rem;
    font-family: var(--fuente4);
    text-transform: uppercase;
    width: 100%;
    text-align: right;
}

.articulo2__txt {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    text-align: right;
    width: 100%;
    margin: 3rem 0rem 0rem 0rem;
}

.articulo2__imgs {
    width: 50%;
    text-align: center;
}

.articulo__img2 {
    width: 80%;
    margin: -13rem 0rem 0rem 0rem;
}

@media (min-width: 0px) and (max-width: 860px) {

    .articulo2__div {
        width: 80%;
        margin: 5rem 0rem 10rem 3rem;
    }

    .articulo2__titulo {
        font-size: 4rem;
        width: 100%;
        text-align: right;
    }

    .articulo2__imgs {
        width: 60%;
        text-align: center;
        position: relative;
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .articulo2__txt {
        font-size: 1.8rem;
        font-family: var(--fuente2);
        text-align: justify;
        width: 100%;
        margin: 3rem 0rem 0rem 0rem;
        padding: 1rem 2rem;
    }

}

/*Colores de separador*/

#separadorc1 {
    background-color: #004974;
}




/*Separaroíris*/

.separarcoiris {
    /*Linea de separación arcoíris*/
    width: 98.4%;
    height: 0.8rem;
    text-align: center;
    background-color: #222222;
    background-image: linear-gradient(to right,
            orangered,
            rgb(250, 212, 0),
            lightgreen,
            dodgerblue,
            mediumpurple,
            hotpink,
            orangered);
    animation: sliding 100s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    margin-bottom: 5rem;
}

.separarcoiris__txt {
    visibility: hidden;
}

/*Separador rompecabeza*/

.separompecabeza {
    width: 100%;
    text-align: center;
    color: var(--blanco);
    position: relative;
}

.separompecabeza__linea {
    /*Linea del rompeca*/
    width: 100%;
    height: 1.2rem;
    background-color: #1d1d1d;
    border-radius: 0.2rem;
    position: relative;
}

.separompecabeza__linea--txt {
    display: none;
}

.eliminadorcentro {
    /*Línea que elimina el centro*/
    background-color: var(--blanco);
    position: absolute;
    left: 46.2%;
    width: 7.8%;
}

.rompecabeza {
    width: 20%;
    rotate: 180deg;
    margin: -3.3% auto 0rem auto;
}

/*Rompezabezas tipo 2*/

.separompecabeza__tipo2 {
    /*Rompecabezas tipo 2*/
    width: 100%;
    text-align: center;
    color: var(--blanco);
    position: relative;
    margin-bottom: -4%;
}

.rompecabeza__tipo2 {
    width: 22%;
    margin: 0 auto -4.7% auto;
}

#linea__rompe2 {
    /*Color de la linea de rompecabezas*/
    background-color: #1d1d1d;
}

/* Página de proyectos actuales */

.proyectostitulo {
    text-align: left;
    margin-left: 12rem;
    padding-top: 10rem;
    margin-bottom: -5rem;
    font-family: var(--fuente2);
    font-size: 2.7rem;
    font-weight: 300;
}

@media(min-width: 0px) and (max-width: 650px) {
    .proyectostitulo {
        margin-left: 9%;
        font-size: 2.5rem;
    }
}

.ayudamigosnombre {
    font-family: var(--fuente1);
    color: var(--secundario);
}

/* Diseño de páginas para Actividades */

/* .actividad__div__hero{
    width: 100%;
    height: 50rem;
    text-align: center;
}

.actividad__div__hero__fondoo{
    position: absolute;
    height: 50rem;
    width: 100%;
    background-color: var(--negro);
    z-index: -1;
} */

/*DISEÑO PAGINAS WEB DE ACTIVIDADES*/

.actividad__hero {
    /*Hero de las páginas de actividades*/
    width: 100%;
}

/* .actividad__divhero2{
    width: 100%;
}

.actividad__divherolados{ Laterales hero
    background-color: #FFFDE2;
    position: absolute;
    top: 70%;
    width: 30%;
    height: 11%;
}

.actividad__divherolados2{ Lateral hero
    background-color: #FFFDE2;
    position: absolute;
    top: 72.5%;
    right: 0;
    width: 30%;
    height: 8%;
}

.hero__txtinvisible{
    opacity: 0;
}

.actividad__divhero{
    text-align: center;
} */

/*COLOR DE FONDO DE HEROS PARA Q NO SE EXTIENDA IMAGEN*/

#hero__donandosonrisas {
    background-color: #FFFDE2;
}

.actividad__info {
    height: 100vh;
    margin-top: -0.5rem;
}


#actividad__info--terroreciclado {
    /*Primera imagen de fondo terroreciclado*/
    background-image: url(../imgactividades/terroreciclado/terroreciclado__section.avif);
    background-size: cover;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__info {
        /*Primera imagen de fondo terroreciclado*/
        height: 185vh;
    }
}

@media(min-width: 650px) and (max-width: 750px) {
    .actividad__info {
        /*Primera imagen de fondo terroreciclado*/
        height: 110vh;
    }
}

.actividad__div1 {
    margin: -5rem 7% 5rem 7%;
    display: flex;
}

@media(min-width: 0px) and (max-width: 850px) {
    .actividad__div1 {
        margin: -5rem auto 5rem auto;
        display: block;
    }
}



.actividad__imgp {
    /*div que mostrará la imagen y nombre de la actividad*/
    width: 42rem;
    height: 48rem;
    border-radius: 2rem;
    background-color: #3bff86;
    position: relative;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

@media(min-width: 0px) and (max-width: 450px) {
    .actividad__imgp {
        transform: scale(0.8);
        margin-top: -18rem;
        width: 100%;
    }
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__imgp {
        transform: scale(0.8);
        margin-top: -18rem;
    }
}

@media(min-width: 650px) and (max-width: 750px) {
    .actividad__imgp {
        margin-top: -15rem;
        margin-left: 18%;
        width: 65%;
        height: 50rem;
    }
}

@media(min-width: 750px) and (max-width: 950px) {
    .actividad__imgp {
        width: 48%;
        height: 40rem;
        margin-top: -15rem;
        margin-left: 25%;
    }
}

.actividad__imgp__perfil {
    /*Imagen de portada de la actividad*/
    width: 100%;
    height: 80%;
    border-radius: 2rem 2rem 0rem 0rem;
}

@media(min-width: 650px) and (max-width: 950px) {
    .actividad__imgp__perfil {
        /*Imagen de portada de la actividad*/
        height: 70%;
    }
}

.actividad__imgp--txt {
    /*Texto de información principal*/
    position: absolute;
    top: 75%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    height: 25%;
    border-radius: 0rem 0rem 2rem 2rem;
}

@media(min-width: 650px) and (max-width: 950px) {
    .actividad__imgp--txt {
        /*Texto de información principal*/
        top: 70%;
        width: 100%;
        background-color: rgb(255, 255, 255);
        height: 30%;
        border-radius: 0rem 0rem 2rem 2rem;
    }
}

.actividad__imgp__divtxt {
    /*Div que contiene la informacion de nombre y mas con margen*/
    margin: 5% 2rem;
    text-align: center;
}

.actividad__imgp--txtxt {
    /*Texto del nombre de la actividad*/
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 500;
    font-family: var(--fuente1);
}

.actividad__imgp__linea {
    /*Línea que separa los elementos*/
    margin-bottom: 1.5rem;
}

.actividad__imgp__vermas {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    color: #0a0a0a;
}

.actividad__infoderecha {
    width: 70%;
    z-index: 10;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__infoderecha {
        width: 90%;
    }
}

@media(min-width: 650px) and (max-width: 850px) {
    .actividad__infoderecha {
        width: 100%;
        margin-top: 5rem;
    }
}


.actividad__ubitiempo {
    /*Div que muestra info de ubicación y tiempo de la actividad*/
    background-color: #ffffff;
    width: 93%;
    height: 10rem;
    margin-left: 4rem;
    border-radius: 1.5rem;
    display: flex;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

.actividad__ubitiempo--ubi {
    /*Div que contiene toda la info de ubicación*/
    margin: 5% 0rem 5% 4%;
    width: 43%;
    display: flex;
}

.actividad__ubitiempo__icono--pin {
    /*Icono de ubicacion*/
    font-size: 3rem;
    margin-right: 1.8rem;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__ubitiempo__icono--pin {
        margin-top: 4%;
    }
}

.actividad_ubitiempo--txt {
    display: flex;
    /* Activar Flexbox */
    align-items: center;
    /* Alinear verticalmente */
    justify-content: center;
    /* Alinear horizontalmente */
    width: 120%;
    font-family: var(--fuente4);
    font-size: 1.8rem;
    margin: 0 auto;
    /* Asegura que esté centrado horizontalmente si es necesario */
    height: 100%;
    /* Asegúrate de que ocupe todo el alto del contenedor padre */
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad_ubitiempo--txt {
        /*Texto de ubicación*/
        font-size: 100%;
        margin-top: -1.2rem;
        overflow: auto;
        /* Esto permite agregar una barra de desplazamiento cuando el contenido excede la altura del contenedor */
    }
}

@media(min-width: 650px) and (max-width: 850px) {
    .actividad_ubitiempo--txt {
        /*Texto de ubicación*/
        overflow: auto;
        /* Esto permite agregar una barra de desplazamiento cuando el contenido excede la altura del contenedor */
    }
}

.actividad__ubitiempo--linea {
    /*Linea entre los elementos*/
    height: 70%;
    margin: 1.5rem 2rem;
}

.actividad_ubitiempo--fecha {
    /*div que contiene toda la info de la fecha*/
    display: flex;
    margin: 5% 4% 5% 0rem;
}

.actividad__ubitiempo__icono--calendario {
    font-size: 3rem;
    margin-right: 1.8rem;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__ubitiempo__icono--calendario {
        margin-top: 4%;
    }
}

.actividad__ubitiempo--fechatxt {
    width: 90%;
    font-family: var(--fuente4);
    font-size: 1.8rem;
    margin-top: 0.5rem;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__ubitiempo--fechatxt {
        width: 90%;
        font-family: var(--fuente4);
        font-size: 100%;
        margin-top: 0.5rem;
    }

}

@media(min-width: 650px) and (max-width: 850px) {
    .actividad__ubitiempo--fechatxt {
        /*Texto de ubicación*/
        overflow: auto;
        /* Esto permite agregar una barra de desplazamiento cuando el contenido excede la altura del contenedor */
    }
}

/*Actividad Diseño de Tarjetas*/

.actividad__tarjetas {
    margin: 5%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    /*Centra las tarjetas - Grid*/
}

.actividad__tarjeta {
    /*Diseño de la tarjeta*/
    width: 90%;
    max-width: 30rem;
    margin-left: 0rem;
    height: 38rem;
    background-color: var(--blanco);
    border-radius: 1.8rem;
    position: relative;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__tarjetas {
        /*Diseño de la tarjeta*/
        display: block;
        position: absolute;
        left: 4%;
    }

    .actividad__tarjeta {
        /*Diseño de la tarjeta*/
        width: 100%;
        height: 37rem;
    }
}

@media(min-width: 650px) and (max-width: 850px) {
    .actividad__tarjetas {
        /*Diseño de la tarjeta*/
        position: absolute;
        left: 45%;
    }

    .actividad__tarjeta {
        /*Diseño de la tarjeta*/
        width: 100%;
        height: 39rem;
    }
}

@media(min-width: 720px) and (max-width: 850px) {
    .actividad__tarjetas {
        /*Diseño de la tarjeta*/
        left: 3%;
    }

    .actividad__tarjeta {
        /*Diseño de la tarjeta*/
        width: 90%;
        height: 35rem;
    }
}


.actividad__tarjeta__img {
    width: 100%;
    border-radius: 2rem 2rem 0rem 0rem;
}

.actividad__tarjeta__divtxt {
    /*Div que contiene el texto de la tarjeta*/
    position: absolute;
    padding: 0.5rem;
    text-align: center;
}

.actividad__tarjeta__divtxt--titulo {
    /*Titulo de la tarjeta*/
    font-size: 2.5rem;
    font-family: var(--fuente1);
    font-weight: bold;
    margin: 1.2rem auto 1rem auto;
}

.actividad__tarjeta--desc {
    /*Descripción de la tarjeta*/
    font-size: 1.7rem;
    font-family: var(--fuente4);
    margin: 2rem auto 3rem auto;
}

.actividad__tarjeta__link {
    padding: 0.8rem 15%;
    min-width: 15%;
    background-color: rgb(29, 89, 255);
    border-radius: 2rem;
    font-size: 1.5rem;
    font-family: var(--fuente2);
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.actividad__tarjeta__link:hover {
    background-color: #0a0a0a;
    transform: scale(1.1);
    transition: all 0.1s ease;
}

.actividad__tarjetadoble {
    margin: 5% 0% 5% 5%;
}

.actividad__tarjeta--doble {
    width: 100%;
    max-width: 100%;
    height: 30rem;
    background-color: var(--blanco);
    border-radius: 1.8rem;
    position: relative;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

.actividad__tarjeta--doble__img {
    width: 100%;
    height: 18rem;
    border-radius: 2rem 2rem 0rem 0rem;
}

/*Diseño de la tarjeta 2*/

.actividad__tarjeta2 {
    /*Diseño de la tarjeta*/
    width: 90%;
    max-width: 35rem;
    margin-left: 0rem;
    min-height: 42rem;
    background-color: var(--blanco);
    border-radius: 1.8rem;
    position: relative;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

@media(min-width: 0px) and (max-width: 450px) {
    .actividad__tarjeta2 {
        /*Diseño de la tarjeta*/
        width: 100%;
        margin-top: 4rem;
    }

}

@media(min-width: 450px) and (max-width: 850px) {
    .actividad__tarjeta2 {
        /*Diseño de la tarjeta*/
        width: 100%;
        margin-top: 4rem;
        height: 43rem;
    }
}

@media(min-width: 720px) and (max-width: 850px) {
    .actividad__tarjeta2 {
        /*Diseño de la tarjeta*/
        width: 90%;
        margin-top: 0rem;
        height: 39rem;
    }
}

.actividad__tarjeta__divtxt2 {
    /*Div que contiene el texto de la tarjeta*/
    position: absolute;
    padding: 0.5rem;
    text-align: center;
}

.actividad__tarjeta__divtxt--titulo2 {
    /*Titulo de la tarjeta*/
    font-size: 2.5rem;
    font-family: var(--fuente1);
    font-weight: bold;
    margin: 1.2rem auto 1rem auto;
}

.actividad__tarjeta--desc2 {
    /*Descripción de la tarjeta*/
    font-size: 1.7rem;
    font-family: var(--fuente4);
    margin: 2.8rem auto 3rem auto;
}

.actividad__tarjeta__link2 {
    padding: 0.8rem 15%;
    min-width: 15%;
    background-color: rgb(29, 89, 255);
    border-radius: 2rem;
    font-size: 1.5rem;
    font-family: var(--fuente2);
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

.actividad__tarjeta__link2:hover {
    background-color: #0a0a0a;
    transform: scale(1.1);
    transition: all 0.1s ease;
}

/*Actividad objetivo diseño*/

.expandible {
    z-index: -5;
    color: transparent;
    margin: -5rem 0 3.2rem;
    visibility: hidden;
}

.actividad__objetivo__div.expandible {
    margin: 0rem 0 0rem;
}

.actividad__objetivo__div {
    width: 100%;
    height: 20%;
    padding: 7rem 10%;
    text-align: center;
}

/*Colores de fondo div de objetivo y texto*/

.color__terroreciclado {
    background-color: rgb(117, 77, 196);
}

.color__donandosonrisas {
    background-color: rgb(156, 102, 32);
}

.color__sesiontec {
    background-color: rgb(0, 45, 170);
}

.color__reforestacion {
    background-color: rgb(0, 112, 19);
}

.color__hospitalparres {
    background-color: #b84eff;
}

.color__roboduca {
    background-color: #4ebeff;
}

.color__pintatedeorgullo {
    background-image: linear-gradient(to right, rgba(255, 0, 0, 0.767), rgba(255, 68, 0, 0.781), rgb(253, 253, 63), rgba(0, 128, 0, 0.781), rgba(0, 0, 255, 0.781), rgba(128, 0, 128, 0.781));
}

.color__pintatedeorgullo {
    background-image: linear-gradient(to right, purple, rgb(255, 0, 43), orange);
}

.color__welp {
    background-color: #000000;
}

.color__tapaton {
    background-color: #0084ff;
}

.color__croqueton {
    background-color: #ffa51f;
}

.color__apac {
    background-color: #ff5e00;
}

.color__mural {
    background-color: #444424;
}

.color__septiembre {
    background-color: #f7d515;
}

.color__visitapetstar {
    background-color: #43942e;
}

.color__msmi {
    background-color: #003a40;
}

.color__donacionfdnbosco {
    background-color: #2646fa;
}

.color__lettersforthefuture {
    background-color: #0d3939;
}


.actividad__objetivo__titutlo {
    /*Titulo del objetivo*/
    font-size: 3rem;
    margin-bottom: 2rem;
    font-family: var(--fuente1);
    color: var(--blanco);
    font-weight: bold;
}

.actividad__objetivo__txt {
    /*Texto del objetivo*/
    font-size: 1.7rem;
    font-family: var(--fuente2);
    color: var(--blanco);
}

/*TABLA RESULTADOS DISEÑO*/

.tbresultados__div {
    /*Tabla de resultados*/
    width: 100%;
    padding: 5rem;
    text-align: center;
    background-color: #ececec;
}

.tbresultados__titulo {
    font-family: var(--fuente1);
    font-size: 3rem;
    font-weight: bold;
}

.tablaresultados {
    width: 100%;
    border: 2px solid #dddddd;
    /* Borde de la tabla */
    border-radius: 1rem;
}

.act_objetivo_txt--negro {
    /*Hace que el texto sea negro*/
    color: var(--negro);
}

table {
    width: 100%;
    border-radius: 1rem;
    font-family: var(--fuente2);
}

th,
td {
    border: none;
    padding: 1rem;
    background-color: var(--blanco);
}

th {
    color: var(--blanco);
    border-radius: 1rem 1rem 0rem 0rem;
}

.tbresultados__thead--donandojuguetes {
    /*Color tabla de resultados*/
    background-color: #703c00;
}

.tbresultados__thead--reforestacion {
    /*Color tabla de resultados*/
    background-color: #007009;
}

.tbresultados__thead--sesiontec {
    /*Color tabla de resultados*/
    background-color: #0400db;
}

.tbresultados__tab {
    width: 60%;
    margin: 2rem auto 0rem auto;

}

.tablaresultados__valor {
    width: 20%;
}

.tbresultados__check {
    font-size: 1.8rem;
    color: #008b2a;
}

@media(min-width: 0px) and (max-width: 650px) {
    .tbresultados__tab {
        width: 100%;
        margin: 2rem auto 0rem auto;

    }
}

.resultados__txt {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    margin: 3rem auto 1rem auto;
    width: 70%;
    justify-content: center;
}


/*Actividad sección de evidencias*/

.evidencias {
    max-width: 100%;
}

.evidencias__padding {
    padding-bottom: 9rem;
}

.evidencias__div {
    /*Div que contiene las evidencias*/
    width: 100%;
    position: relative;
    padding-top: 5rem;
}

.evidencias__titulo {
    text-align: center;
    margin: 0rem auto;
    font-size: 3rem;
    /*color: var(--blanco);*/
    color: var(--negro);
    font-family: var(--fuente1);
    font-weight: bold;
    letter-spacing: 0.05rem;
}

.redsocial__inseccion {
    width: 100%;
    margin: 3rem auto !important;
    text-align: center;
}

.evidencias__videoyt {
    width: 100%;
    margin: 5rem auto;
    text-align: center;
}

.evidencias__videoyt--video {
    width: 90%;
    max-width: 74.5rem;
    height: 42rem;
    border-radius: 0.8rem;
    margin-bottom: 2rem;
}

.evidencias__errordevideo {
    text-align: center;
    font-family: var(--fuente2);
    font-size: 2rem;
    padding: 0rem 30% 2rem 30%;

}

.evidencias_errorvideo_link {
    color: #ffffff;
    background-color: #f00000;
    padding: 0.1rem 2rem;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    margin-left: 0.5rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-decoration: none;
    text-transform: uppercase;
}

@media(min-width: 0px) and (max-width: 850px) {
    .evidencias__errordevideo {
        padding: 0rem 10% 2rem 10%;

    }
}

/*Manifesto*/

.manifesto {
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 5rem;

    background-color: #f3f3f3;
}

.manifesto__img {
    width: 100%;
    min-width: 25rem;
    min-height: 15rem;
    max-width: 37rem;
    max-height: 45rem;
    border-radius: 1rem;
}

.manifesto__titulo {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 4rem;
}

.manifesto__descripcion {
    font-family: var(--fuente2);
    font-size: 1.6rem;
    margin-left: 0.5rem;
}

.manifesto__verde {
    color: #00c20a;
}

.manifesto__link {
    color: #139901;
    cursor: pointer;
}

@media(min-width: 0px) and (max-width: 650px) {
    .manifesto {
        display: block;
    }
}

/*Actividad sección de Ayudamigos participantes*/

.actividad__ayudamigosp {
    /*Seccion principal*/
    background-color: #f7f7f7;
    width: 100%;
    max-width: 100%;
}


.actividad__ayudamigostitulo {
    font-size: 3rem;
    font-family: var(--fuente1);
    font-weight: bold;
    margin: 2rem auto 2rem auto;
    text-align: center;
}

.actividad__ayudamigossubtitulo {
    font-size: 2rem;
    font-family: var(--fuente4);
    margin: 0rem auto 8rem auto;
    text-align: center;
    width: 50%;
}

@media(min-width: 0px) and (max-width: 650px) {
    .actividad__ayudamigossubtitulo {
        width: 80%;
        gap: 3rem;
    }
}

.actividad__ayudamigosp__div {
    /*Div que contiene todas las card*/
    width: 90%;
    max-width: 120rem;
    margin: 5rem auto;
    margin-bottom: 5rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    column-gap: 1rem;
}

@media(min-width: 0px) and (max-width: 750px) {
    .actividad__ayudamigosp__div {
        /*Div que contiene todas las card*/
        width: 70%;
        max-width: 100%;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        column-gap: 1.9rem;
    }
}

@media(min-width: 750px) and (max-width: 950px) {
    .actividad__ayudamigosp__div {
        /*Div que contiene todas las card*/
        width: 90%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.9rem;
    }
}

@media(min-width: 950px) and (max-width: 1220px) {
    .actividad__ayudamigosp__div {
        /*Div que contiene todas las card*/
        width: 95%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1.9rem;
    }
}

.actividad__ayudamigoscard {
    margin-top: 8rem;
    width: 100%;
    max-width: 30rem;
    height: 48;
    position: relative;
    border-radius: 2rem;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    transform: scale(0.70);
    margin-bottom: 43rem;
}

#ayudamigoscard2 {
    margin-top: 25rem;
}

@media(min-width: 0px) and (max-width: 1120px) {
    .actividad__ayudamigoscard {
        margin-top: 25rem;
        width: 90%;
        min-width: 30rem;
        max-width: 30rem;
        margin-bottom: 35rem;
    }
}


.actividad__ayudamigoscard__hover {
    width: 100%;
    padding: 0.5rem;
    height: 47rem;
    position: absolute;
}

.actividad__ayudamigoscard__hover:hover {
    background-image: linear-gradient(to right,
            orangered,
            rgb(250, 212, 0),
            lightgreen,
            dodgerblue,
            mediumpurple,
            hotpink,
            orangered);
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    border-radius: 2rem;
}



.actividad__ayudamigoscard__liston {
    /*Listón sobre gafete*/
    position: absolute;
    left: 4.5rem;
    top: -17.5rem;

}

.actividad__ayudamigoscard__gafeteliston {
    /*Div contorno del gafete*/
    width: 97%;
    height: 98%;
    border-color: rgb(0, 0, 0);
    background-color: var(--blanco);
    border-width: 2px;
    border-style: solid;
    border-radius: 2rem;
    padding-top: 1.5rem;
    position: absolute;
}

.actividad__ayudamigoscard__gafetetxt {
    /*Texto disfrazado para hoyo del listón*/
    text-align: center;
    border-color: var(--negro);
    padding: 0.2rem;
    border-style: solid;
    width: 40%;
    margin: 0 auto;
    margin-bottom: 1.2rem;
    border-radius: 2rem;
    color: transparent;
    color: #ffffff00;
}

.actividad__ayudamigoscard__profilefoto {
    /*Foto del ayudamigo/a*/
    position: absolute;
    width: 52%;
    top: 23%;
    left: 0;
    right: 0;
    margin: auto;
}

.actividad__ayudamigoscard__fondo {
    /*Imágen de fondo de las card*/
    width: 100%;
    height: 91%;
    border-radius: 0rem 0rem 2rem 2rem;
}

.actividad__ayudamigoscard__foto {
    /*Foto del ayudamigo*/
    position: absolute;
    min-width: 13rem;
    width: 14rem;
    left: 7.5rem;
    top: 6rem;
}

.actividad__ayudamigoscard__info {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 27rem;
}

.actividad__ayudamigoscard__oOa {
    /*Texto "AYUDAMIGO / AYUDAMIGA"*/
    font-size: 170%;
    font-family: var(--fuente1);
    font-weight: bold;
    color: #0764EE;
}

.actividad__ayudamigoscard__nombre {
    font-size: 150%;
    font-family: var(--fuente4);
    margin-top: 2rem;
}


@media(min-width: 0px) and (max-width: 550px) {
    .actividad__ayudamigosp__div {
        /*Div que contiene todas las card*/
        width: 80%;
        height: 100% !important;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }
}

/*Diseño apartado de INVITADOS*/

.act__invitados__divtxt {
    margin-bottom: 8rem;
}

.invitados__txt {
    font-size: 3rem;
}

.act__invitados {
    width: 100%;
    margin-top: -5rem;
    max-width: 100%;
}

.act__invitados__div {
    /*DIV QUE CONTIENE LAS CARDS*/
    width: 100%;
    max-width: 120rem;
    margin: 1rem auto 5rem auto;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 4rem;
}

.act__invitados__card {
    backdrop-filter: blur(25px);
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
    max-width: 25rem;
    min-width: 25rem;
    border-radius: 2rem;
    height: 35rem;
    text-align: center;
    position: relative;
    transition: all ease-in-out 0.3s;

    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backface-visibility: hidden;
}


.act__invitados__card:hover {
    transform: scale(1.08);
}

.act__invitados__card__foto {
    width: 50%;
    min-width: 12rem;
    margin: 3rem auto 0rem auto;
}

.act__invitados__olas {
    /*Olas azules*/
    z-index: -100;
    width: 100%;
    margin-top: -25rem;
}

.act__invitados__card__div1 {
    background-color: #ffffff91;
    border-radius: 2rem 2rem 0rem 4rem;
    padding-bottom: 3rem;
    transition: all ease .3s;
}

.act__invitados__card:hover>.act__invitados__card__div1 {
    background-color: #007c9bb6;
}

.act__invitados__card__div2 {
    right: 0;
    left: 0;
    bottom: 2rem;
    position: absolute;
}

.act__invitados__card__nombre {
    font-family: var(--fuente1);
    font-weight: bold;
}

.act__invitados__card__rol {
    font-family: var(--fuente2);
    margin-top: 1rem;
}

.act__invitados__card__redes {
    margin-top: 2rem;
}

.invitados__insta {
    font-size: 2rem;
    background-color: #014a53cc;
    border-radius: 5rem;
    padding: 1rem;
    color: var(--blanco);
}


@media(min-width: 0px) and (max-width: 550px) {
    .act__invitados__div {
        /*DIV QUE CONTIENE LAS CARDS*/
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }

    .act__invitados__card {
        width: 80%;
        height: 35rem;
        margin-bottom: 2rem;
    }

    .act__invitados__olas {
        /*Olas azules*/
        margin-top: -10rem;
    }
}

@media(min-width: 551px) and (max-width: 800px) {
    .act__invitados__div {
        /*DIV QUE CONTIENE LAS CARDS*/
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }

    .act__invitados__card {
        height: 35rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .act__invitados__olas {
        /*Olas azules*/
        margin-top: -10rem;
    }
}

@media(min-width: 800px) and (max-width: 1000px) {
    .act__invitados__div {
        /*DIV QUE CONTIENE LAS CARDS*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }

    .act__invitados__card {
        height: 35rem;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .act__invitados__olas {
        /*Olas azules*/
        margin-top: -10rem;
    }
}

/*Seccion de publicacion por redes sociales*/

.publiredes {
    margin: 0rem 20% 10rem 20%;
    text-align: center;
}

.publiredes__titulo {
    /*Titulo principal*/
    margin-bottom: 2rem;
    font-family: var(--fuente4);
    font-size: 2.5rem;
}

.publiredes__subtitulo {
    /*textos "Publicacion original de...*/
    font-size: 2.5rem;
    margin: 3rem auto;
    font-family: var(--fuente1);
}

#publiredes__fb {
    /*Nombre de facebook*/
    font-weight: bold;
    color: #2866c9;
    font-family: var(--fuente2);
}

.publired__facebook {
    width: 100%;
}

#publired__ig {
    font-weight: bold;
    font-family: var(--fuente2);
    background: -webkit-linear-gradient(rgb(200, 106, 255), red);
    -webkit-background-clip: text;
    background-clip: a;
    -webkit-text-fill-color: transparent;
    color: tomato;
}

.embed__ig {
    width: 100%;
    height: 60rem;
}

/*Seccion de comentarios de la actividad*/

.comentarios {
    background-color: #f3f3f3;
    padding: 7rem 12rem;
}

@media(min-width: 0px) and (max-width: 650px) {
    .comentarios {
        background-color: #f3f3f3;
        padding: 7rem 1rem;
    }
}

.comentarios__titulo {
    text-align: center;
    font-size: 2rem;
    font-family: var(--fuente4);
    margin-bottom: 5rem;
}

.comentario {
    /*diseño del comentario*/
    background-color: var(--blanco);
    margin: 4rem 0rem 2rem 10%;
    width: 50%;
    padding: 2rem;
    border-radius: 1rem;
}

@media(min-width: 0px) and (max-width: 650px) {
    .comentario {
        /*diseño del comentario*/
        width: 80%;
        padding: 2rem;
    }
}

@media(min-width: 650px) and (max-width: 1120px) {
    .comentario {
        /*diseño del comentario*/
        width: 95%;
        padding: 2rem;
        margin: 4rem 0rem 2rem 2%;
    }
}

.comnentarionombre {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    font-weight: 400;
    margin-bottom: 1rem;
}

.comentariofecha {
    /*Contentario fecha*/
    font-size: 1.5rem;
    color: #797979;
    margin-bottom: 0.5rem;
}

.comentario__comentario {
    font-family: var(--fuente2);
    font-size: 1.7rem;
}

#com2 {
    /*Comtnetario tipo 2*/
    margin: 4rem 2% 2rem 40%;
}

@media(min-width: 0px) and (max-width: 650px) {
    #com2 {
        /*Comtnetario tipo 2*/
        margin: 4rem 2% 2rem 10%;
    }
}

@media(min-width: 650px) and (max-width: 800px) {
    #com2 {
        /*Comtnetario tipo 2*/
        margin: 4rem 2% 2rem 15%;
    }
}

@media(min-width: 800px) and (max-width: 1120px) {
    #com2 {
        /*Comtnetario tipo 2*/
        margin: 4rem 2% 2rem 12%;
    }
}

/*Colaboradores*/
.colaboradores {
    /*Seccion colaboradores*/
    text-align: center;
    margin: 5rem 10%;
}

.colaboradores__titulo {
    /*Titulo*/
    margin: 3rem auto;
    font-family: var(--fuente4);
    font-size: 1.8rem;
}


.colaboradores__logos {
    /*Div contiene logos y nombres de los colaboradores*/
    display: flex;
    margin: 0rem 20%;
    text-align: center;
    justify-content: center;
}


.colaboradores__ayudalogo {
    width: 33rem;
    height: 10rem;
}

.colaboradores__colabnombre {
    margin: 1.7rem 0rem 0rem 2rem;
    font-family: var(--fuente2);
    font-size: 1.8rem;
    font-weight: bold;
}

@media(min-width: 0px) and (max-width: 650px) {
    .colaboradores__logos {
        /*Div contiene logos y nombres de los colaboradores*/
        display: block;
        margin: 0 auto;
    }

    .colaboradores__colabnombre {
        margin: 1.7rem 0rem 0rem 0rem;
    }

    .colaboradores__ayudalogo {
        width: 30rem;
        height: 8rem;
    }
}



/*Página de informacion de AYUDAMIGO/A/S*/

.ayudamigos__main {
    /*Contenido principal*/
    width: auto;
    max-width: 100%;
    /*la altura de adapta al contenido*/
    position: relative;
}

.ayudamigos__infodiv {
    /*Div de "Conoce al equipo"*/
    width: 100%;
    height: 40rem;
    background-color: #0764EE;
    position: relative;
    z-index: -2;
}

.ayudamigos__divabsolute {
    /*Div que contiene los textos de "Conoce el equipo y ayudamigos"*/
    position: absolute;
    font-size: 200%;
    /*Hace responsive la letra*/
    font-family: var(--fuente1);
    color: var(--blanco);
    top: 35%;
    right: 0;
    left: 0;
    text-align: center;
    font-weight: bold;
}

.ayudamigosinfo2 {
    /*Subtexto de "Ayudamigos que conforman...*/
    font-size: 1.8rem;
    margin-top: 1rem;
    font-weight: 400;
    font-family: var(--fuente4);
}




/*Diseño de las card informacion de ayudamigos*/

.ayudamigosinfo__div {
    width: 100%;
    max-width: 100%;
    /*Esto hace que el tamaño se adapte al contenido dentro*/
    margin-bottom: 3rem;
    margin-top: -7vw;
    padding: 0rem 10%;
}

.ayudamigosinfo__carddiv {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;
    text-align: center;
}

@media(min-width: 0px) and (max-width: 860px) {
    .ayudamigosinfo__div {
        padding: 0rem;
    }

    .ayudamigosinfo__carddiv {
        grid-template-columns: 1fr;
        justify-content: none;
        align-items: none;
        justify-items: none;
        text-align: none;
    }
}

@media(min-width: 860px) and (max-width: 1120px) {
    .ayudamigosinfo__div {
        padding: 0rem 10rem;
    }

    .ayudamigosinfo__carddiv {
        grid-template-columns: repeat(2, 2fr);
    }
}

.ayudamigoinfo__card {
    /*Diseño de la tarjeta*/
    width: 30.7rem;
    height: 52rem;
    background-color: var(--blanco);
    border-radius: 3rem;


    box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
}


.ayudamigosinfo__fondoarco {
    /*Div detrás de la card q le da fondo arcoiris*/
    width: 31.4rem;
    height: 53rem;
    padding: 0.5rem 0.3rem 0rem 0.3rem;
    border-radius: 3rem;
    margin-bottom: 6rem;

    background-image: linear-gradient(to right,
            orangered,
            rgb(250, 212, 0),
            lightgreen,
            dodgerblue,
            mediumpurple,
            hotpink,
            orangered);
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
}


.ayudamigosinfo__card__foto {
    width: 65%;
    margin-top: 2.5rem;
}

.ayudamigoinfo__card--divtxt {
    width: 80%;
    max-width: 100%;
    background-color: #f3f3f3;
    margin: 2rem auto 2rem auto;
    padding: 0.5rem 1rem;
}

.ayudamigoinfo__card--ayudamigonombre {
    font-family: var(--fuente1);
    font-size: 1.8rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1.5rem auto 1rem auto;
}

.ayudamigoinfo__card--rol {
    font-size: 1.4rem;
    margin-bottom: 1.7rem;
    font-family: var(--fuente4);
    font-weight: bold;
    color: #0764EE;
}

.ayudamigoinfo__palabras {
    font-size: 1.4rem;
    font-family: var(--fuente4);
}

.ayudamigoinfo__redsocial {
    text-align: center;
    margin-right: 1.5rem;
    text-decoration: none;
}

.ayudamigoinfo__redes {
    margin: 15% 0rem 1rem 0rem;
    display: flex;
    color: #0764EE;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    justify-content: center;
    position: relative;
}

.ayudamigoinfo__redsocial:visited {
    text-decoration: none;
    color: #0764EE;
}

.iconotxt {
    background-color: #0764EE;
    position: absolute;
    font-size: 1.2rem;
    border: 0.5px solid #ffffff;
    /* Establece el color del borde aquí */
    width: 80%;
    top: 3rem;
    right: 2rem;
    font-family: var(--fuente2);
    padding: 0.5rem 0.2rem;
    border-radius: 1rem;
    opacity: 0;
    color: #ffffff;
    transition: opacity 0.3s ease;
}

.trianguloo {
    position: absolute;
    right: 5.5rem;
    font-size: 2rem;
    transform: rotate(150deg);
    top: -0.8rem;
    color: #0764EE;
}

#iconotxt2 {
    background-color: rgb(255, 27, 27);
}

#triangulo2 {
    right: 12rem;
    color: rgb(255, 27, 27);
}

.carita:hover>.iconotxt {
    opacity: 1;
}


/*Diseño PÁGINA WEB DE DONACIONES Y CAUSAS*/

.main__donaciones {
    width: 100%;
    background-color: #f3f3f3;
    position: relative;
    padding-bottom: 5rem;
}

/* .donaciones__divtitulo{
    width: 70%;
    background-color: var(--blanco);
    padding: 3rem;
    margin: 5rem auto 5rem auto;
    text-align: center;
    border-radius: 2rem;

    
    box-shadow: -1px 3px 14px -3px rgba(0,0,0,0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0,0,0,0.75);
} */

.donaciones__titulo {
    font-family: var(--fuente1);
    font-size: 4rem;
}

.donaciones__subtitulo {
    font-family: var(--fuente2);
    font-size: 1.7rem;
}

@media(min-width: 0px) and (max-width: 568px) {
    .donaciones__divtitulo {
        width: 90%;
        padding: 3rem;
        margin: 0rem auto 5rem auto;
    }

    .donaciones__titulo {
        font-family: var(--fuente1);
        font-size: 2.5rem;
    }

    .donaciones__subtitulo {
        font-family: var(--fuente2);
        font-size: 1.3rem;
    }
}


/*Diseño de tarjetas/cards de CAUSAS Y APOYOS*/

.causa__card {
    width: 85%;
    background-color: var(--blanco);
    margin: 10rem auto 5rem auto;
    border-radius: 1.3rem;
    box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
}

@media(min-width: 768px) {
    .causa__card__titulogo {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

.causa__card__logo {
    margin: 5rem auto 0rem auto;
    display: flex;
    font-size: 3rem;
}

.causa__card__ayudamigoslogo {
    width: 5rem;
    height: 5rem;
    margin: 2rem 2rem 0rem 0rem;
}

.causa__card__titulos {
    /*Div de los titulos/subtitulos*/
    width: 100%;
    display: block;
    padding: 5rem;
}

.causa__card__nombre {
    /*Nombre del que recibirá apoyo*/
    font-family: var(--fuente2);
    font-weight: bold;
    font-size: 3rem;
}

.causa__card__deseo {
    /*Texto del deseo/petición*/
    font-family: var(--fuente4);
    font-size: 2rem;
    margin-top: 1rem;
}

.causa__deseo {
    color: #0764EE;
    font-weight: bold;
}

.causa__card__txteimg {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(2, auto);
    max-height: 20rem;
}

@media(min-width: 768px) {
    .causa__card__txteimg {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 0px) and (max-width: 1020px) {
    .causa__card__txteimg {
        max-height: 1000rem;
    }
}

.causa__causatxt {
    width: 100%;
    padding: 0rem 5rem;
    font-size: 1.7rem;
    font-family: var(--fuente2);
    text-align: justify;
}

@media(min-width: 298px) and (max-width: 768px) {
    .causa__causatxt {
        padding: 0rem 3.5rem;
        font-size: 1.5rem;
    }
}

.causa__card__img {
    width: 80%;
    border-radius: 2rem;
    margin: -7rem auto 0rem auto;
}

@media(min-width: 298px) and (max-width: 728px) {
    .causa__card__img {
        width: 80%;
        border-radius: 2rem;
        margin: -2rem 0rem 3rem 10%;
        grid-row: 2 / 1;
    }
}

@media(min-width: 728px) and (max-width: 1028px) {
    .causa__card__img {
        width: 90%;
        border-radius: 2rem;
        margin: 2rem 0rem 3rem 5%;
    }
}

.causa__card__botones {
    width: 100%;
    font-size: 1.7rem;
    height: 7rem;
    margin: 3rem 0rem 0rem 5rem;
}

@media(min-width: 0px) and (max-width: 768px) {
    .causa__card__botones {
        text-align: center;
        font-size: 1.5rem;
        margin: 3rem 0rem 0rem 0rem;
    }
}

@media(min-width: 0px) and (max-width: 568px) {
    .causa__card__botones {
        text-align: center;
        font-size: 1.3rem;
        display: grid;
        height: 100%;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
    }
}

.causa__card__boton--info {
    padding: 1.2rem 2rem;
    background-color: #0764EE;
    border-radius: 5rem;
    color: var(--blanco);
    margin-right: 1.5rem;
    text-decoration: none;
    font-family: var(--fuente2);
}

@media(min-width: 258px) and (max-width: 568px) {
    .causa__card__boton--info {
        width: 80%;
        margin: 0rem 0rem 2rem 0rem;
    }
}

.causa__card__boton--info:hover {
    background-color: #004974;
    transition: all .5s ease;
}


.causa__card__boton--donar {
    padding: 1rem 6rem;
    background-color: transparent;
    border-radius: 5rem;
    color: var(--negro);
    border-style: solid;
    border-color: #030303;
    text-decoration: none;
    font-family: var(--fuente2);
}

@media(min-width: 258px) and (max-width: 568px) {
    .causa__card__boton--donar {
        width: 80%;
        margin: 0rem 0rem 4rem 0rem;
    }
}

.causa__card__boton--donar:hover {
    border-color: #004974;
    transition: all .2s ease;
    color: #015be2;
}

.info {
    font-size: 1.2rem;
    margin-right: 1rem;
}

.causacompleta__titulo {
    font-size: 4rem;
    color: #000000;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 15rem 0rem 7rem 8%;
    font-weight: 600;
    width: 55%;
}

.actividades__titulo {
    font-size: 4rem;
    color: #000000;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 10rem 0rem 2rem 8%;
    font-weight: 600;
    width: 55%;
}

.actividades__titulo--rifamigos {
    font-size: 3rem;
    color: #000000;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: -4rem 0rem 5rem 8%;
    font-weight: 600;
    width: 50%;
}

/*Barra Progreso*/

.barraprogreso__div {
    width: 100%;
}

.barraprogreso__div--completa {
    width: 80%;
    margin: 1rem auto 2rem auto;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    position: relative;
}

.barraprogreso__texto {
    margin: 3rem 0rem 0rem 0%;
    font-family: var(--fuente2);
    color: #979797;
    font-size: 1.3rem;
    margin-left: 0.2rem;
}

.barraprogreso__fondo {
    width: 100%;
    background-color: #00000056;
    max-width: 35rem;
    height: 1.7rem;
    border-radius: 1rem;
    margin: 0.5rem 0rem 3rem 0%;
    position: relative;
    border-width: 2rem;
    border-color: var(--negro);
}

.barraprogreso__fondo--completa {
    width: 100%;
    background-color: #28ad0056;
    max-width: 20rem;
    height: 1.7rem;
    border-radius: 1rem;
    margin: 1.5rem auto 0.5rem;
    position: relative;
    border-width: 2rem;
    border-color: var(--negro);
}

@media(min-width: 0px) and (max-width: 768px) {
    .barraprogreso__fondo {
        margin: 4rem auto;
        text-align: center;
    }
}

.barraprogreso__porcentaje {
    color: var(--blanco);
    font-size: 1.4rem;
    position: absolute;
    font-family: var(--fuente4);
    right: 1rem;
    bottom: .05rem;
    z-index: 200;
}

.barraprogreso__color {
    background-image: linear-gradient(to right,
            rgb(0, 0, 129),
            #1129ff,
            #1129ff,
            #273bf5,
            #1129ff,
            #3447f8,
            rgb(0, 0, 129));
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    position: absolute;
    top: 0;
    height: 1.7rem;
    border-radius: 1rem;
}

.barraprogreso__color--completa {
    background-image: linear-gradient(to left,
            rgb(33, 143, 0),
            rgb(55, 167, 21),
            rgb(0, 180, 0),
            rgb(4, 170, 26),
            rgb(33, 143, 0));
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    position: absolute;
    top: 0;
    height: 1.7rem;
    border-radius: 1rem;
}

.causa--corazon {
    color: rgb(0, 155, 26);
    margin-right: 10%;
    margin-top: 0.7rem;
}

/*PROGRESO BARRAS*/

#progreso__posada {
    width: 1%;
}

#progreso__patas {
    width: 1%;
}

#progreso__ejemplo {
    width: 37%;
}

/*FIN*/

#progreso__completo {
    width: 100%;
}

.txtinisible {
    visibility: none;
    opacity: 0;
}

/* CARD PROFESIONAL CSS STYLE*/

.causa__caard {
    width: 60%;
    max-width: 100%;
    background-color: var(--blanco);
    margin: 0 auto;
    margin-top: 7rem;
    display: flex;
    border-radius: 2.5rem;
    padding: 2rem;


    box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.459);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.459);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.459);
}

.causa__caard__divimg {
    width: 40%;
    height: 30rem;
    position: relative;
    margin: 5rem auto 0rem;
}

.causa__caard__img {
    width: 100%;
    height: 100%;
    margin: 5% auto;
    border-radius: 2rem;

    box-shadow: -1px 3px 14px -3px rgb(3, 25, 83);
    -webkit-box-shadow: -1px 3px 14px -3px rgb(3, 25, 83);
    -moz-box-shadow: -1px 3px 14px -3px rgb(3, 25, 83);

}

.causa__caard__divinfo {
    width: 60%;
    padding: 3.5rem 3rem 5rem 2rem;
}

.causa__caard__fecha {
    color: #b1b1b1;
    font-family: var(--fuente2);
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.codigodonacion {
    font-family: var(--fuente2);
    color: var(--secundario);
    margin-left: 2rem;
    font-family: 2.3rem;
}

.causa__caard__nombre {
    font-size: 2rem;
    font-family: var(--fuente2);
    color: var(--negro);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.causa__caard__deseo {
    color: #8a8a8a;
    font-family: var(--fuente2);
    font-weight: bold;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.deseoo {
    color: #5700e4;
    font-weight: bold;
    font-size: 1.5rem;
    margin: 0rem 1rem;
}

.causa__caard__txt {
    font-family: var(--fuente2);
    margin: 2rem 0rem 1rem 0rem;
    text-align: left;
    width: 70%;
    font-size: 1.5rem;
}

.causa__caard__botones {
    display: flex;
    position: relative;
}

.causa__caard__boton--info {
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 1.2rem 1.5rem;
    background-color: #015be2;
    border-radius: 5rem;
    color: var(--blanco);
    font-weight: 500;
    font-family: var(--fuente2);
    text-decoration: none;
    margin-right: 1.5rem;
}

.causa__caard__boton--info:hover {
    background-color: #004974;
    transition: all ease 0.5s;
}

.causa__caard__boton--donar--fondo {
    background-color: #000000;
    border-radius: 2rem;
    text-align: center;
    padding: 1rem 0.2rem;
}

.causa__caard__boton--donar {
    font-size: 1.2rem;
    text-transform: uppercase;
    border-radius: 5rem;
    padding: 0.9rem 4rem 1.2rem 4rem;
    font-weight: 500;
    font-family: var(--fuente2);
    text-decoration: none;
    background-color: var(--blanco);
    color: #000000;
}

.causa__caard__boton--donar:hover {
    font-weight: 600;
    color: #000000;
}

.causa__caard__boton--donar--fondo:hover {
    background-image: linear-gradient(to right,
            orangered,
            rgb(250, 212, 0),
            lightgreen,
            dodgerblue,
            mediumpurple,
            hotpink,
            orangered);
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

@media(min-width: 0px) and (max-width: 800px) {
    .causa__caard {
        width: 90%;
        max-width: 100%;
        min-width: 30rem;
        display: block;
        margin-top: 15rem;
        padding: 3rem;
    }

    .causa__caard__divimg {
        width: 100%;
        height: 40%;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        justify-items: center;
        align-content: center;
    }

    .causa__caard__img {
        width: 70%;
        height: 100%;
        position: relative;
    }


    .barraprogreso__texto {
        margin: 1.2rem auto 0rem auto;
    }

    .barraprogreso__div {
        justify-content: center;
    }

    .barraprogreso__fondo {
        margin: 0.5rem auto 2rem auto;
    }


    .causa__caard__divinfo {
        width: 100%;
        padding: 1rem;
        text-align: center;
    }

    .causa__caard__txt {
        margin: 1rem auto 0rem auto;
        text-align: center;
        width: 90%;
        font-size: 1.5rem;
        max-width: 40rem;
    }

    .causa__caard__botones {
        text-align: center;
        justify-content: center;
        height: 4.5rem;
        margin-top: 1rem;
    }

    .causa__caard__boton--info {
        font-size: 1.2rem;
        padding: 1rem;
        background-color: #015be2;
        border-radius: 5rem;
        color: var(--blanco);
        font-weight: 500;
        font-family: var(--fuente2);
        text-decoration: none;
        margin-right: 1.5rem;
    }
}

@media(min-width: 760px) and (max-width: 1120px) {
    .causa__caard {
        width: 70%;
        max-width: 100%;
        min-width: 30rem;
        display: block;
        margin-top: 15rem;
    }

    .causa__caard__divimg {
        width: 100%;
        height: 35%;
        text-align: center;
        justify-content: center;
        margin: 0 auto;
        justify-items: center;
        align-content: center;
    }

    .causa__caard__img {
        width: 60%;
        height: 160%;
        min-width: 25rem;
        min-height: 30rem;
        position: relative;
        top: -70%;
        right: 0;
        left: 0;
    }


    .barraprogreso__texto {
        margin: 1.2rem auto 0rem auto;
    }

    .barraprogreso__div {
        justify-content: center;
    }

    .barraprogreso__fondo {
        margin: 0.5rem auto 2rem auto;
    }


    .causa__caard__divinfo {
        width: 100%;
        padding: 1rem;
        text-align: center;
    }

    .causa__caard__txt {
        margin: 1rem auto 0rem auto;
        text-align: center;
        width: 90%;
        font-size: 1.5rem;
        max-width: 40rem;
    }

    .causa__caard__botones {
        text-align: center;
        justify-content: center;
        height: 4.2rem;
        margin-top: 2rem;
    }

    .causa__caard__boton--info {
        font-size: 1.2rem;
        padding: 1.3rem;
        background-color: #015be2;
        border-radius: 5rem;
        color: var(--blanco);
        font-weight: 500;
        font-family: var(--fuente2);
        text-decoration: none;
        margin-right: 1.5rem;
    }
}

/*Causa completa*/

.causacompleta__div {
    width: 100%;
    margin-bottom: 10rem;
}

.causacompleta__contenedor {
    width: 90%;
    margin: 0 auto;
}

.causacompleta__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 auto;
    text-align: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
}

.causacompleta__card {
    width: 35rem;
    background-color: var(--blanco);
    border-radius: 2rem;
}

.causacompleta__imagenes {
    width: 100%;
}

.causacompleta__fecha {
    font-size: 1.3rem;
    font-family: var(--fuente2);
    color: #7c7c7c;
    margin: 2rem auto 1rem auto;
}

.causacompleta__nombre {
    font-size: 1.7rem;
    font-family: var(--fuente2);
    color: var(--negro);
    font-weight: bold;
    margin: 0rem;
}

.ayudamigoscausa {
    font-family: var(--fuente1);
    font-size: 1.5rem;
    color: #461ae4;
    text-transform: uppercase;
    font-weight: bold;
}

.graciasdonantes {
    font-family: var(--fuente2);
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2rem;
    background-color: #1e2bdd;
    padding: 2rem;
}

.donantes {
    color: #fffb00;
    font-weight: 400;
}

.causacompleta__ayudamigoslogo {
    width: 100%;
}

.causacompleta__ayudamigoslogo--logo {
    width: 10%;
}

.comentariogracias {
    /*Comentario de la persona agrad*/
    font-family: var(--fuente2);
    font-size: 1.3rem;
    font-weight: 500;
    color: #1f1f1f;
    background-color: #ececec;
    padding: 2rem 3rem;
    margin-top: -2rem;
}

.causacompleta__gracias {
    width: 100%;
    text-align: center;
    margin: 2rem auto 3rem;
}

.causacompleta__ayudamigoos {
    font-family: var(--fuente1);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
    font-weight: bold;
    color: #0764EE;
}

@media(min-width: 0px) and (max-width: 768px) {
    .causacompleta__grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .causacompleta__card {
        margin-bottom: 5rem;
        width: 30rem;
    }
}

@media(min-width: 768px) and (max-width: 958px) {
    .causacompleta__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .causacompleta__card {
        margin-bottom: 5rem;
    }
}

/*COMO DONAR DISEÑO*/

#comodonar {
    width: 100%;
    padding: 3rem;
    border-radius: 2rem;
}

.comodonar__div {
    background-color: #ffffff;
    width: 100%;
    max-width: 100%;
    padding: 2%;
    margin: 10rem 0rem;
}

.comodonar__titulo {
    font-family: var(--fuente2);
    font-size: 3rem;
    color: var(--negro);
    text-align: center;
    font-weight: 600;
    margin: 3rem 0rem 0rem 1rem;
}

.comodonar__subtitulo {
    font-family: var(--fuente4);
    text-align: center;
    font-size: 1.9rem;
}

#cdonar_subt2 {
    margin: 5rem 0rem -2rem 0rem;
}

.comodonar__paso {
    font-family: var(--fuente1);
    font-size: 2rem;
    text-align: center;
    margin: 5rem 0rem 1rem 0rem;
}

.comodonar__ejemplo {
    transform: scale(0.9);
}


.codigodonacion__ejemplo {
    font-family: var(--fuente2);
    color: rgb(255, 13, 13);
    margin-left: 1rem;
    margin-right: 1.3rem;
    font-size: 2.4rem;
}

.comodonar__id {
    width: 100%;
    padding: 2rem;
    margin: 4rem 0rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    border-radius: 2rem;
    max-width: 100%;
}

@media (max-width: 650px) {
    .comodonar__id {
        grid-template-columns: repeat(1, 1fr);
    }
}

.comodonar__id2 {
    background-color: #e4e4e4;
    border-radius: 1rem;
    padding: 4rem 2rem;
    margin: 2rem 0rem 2rem 2rem;
    text-align: center;
}

.comodonar__explicacion {
    font-family: var(--fuente1);
    margin: 2rem 2rem;
    font-size: 1.8rem;
    text-align: center;
}

.comodonar__id2__titulo {
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

.comodonar__donaciontotal {
    text-align: center;
    font-size: 3rem;
    color: #015be2;
    margin: 2rem 0rem 0rem 0rem;
    font-weight: bold;
    font-family: var(--fuente2);
}

.comodonar__donaciontotal--valor {
    font-family: var(--fuente2);
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
}

.donaciontotal__codigo {
    color: #015be2;
    text-decoration: underline;
}

.comodonar__transferencia {
    font-family: var(--fuente1);
    font-size: 2rem;
    margin: 5rem 5rem 2rem 5rem;
    text-align: center;
}

.comodonar__listo {
    font-family: var(--fuente2);
    font-size: 2.3rem;
    text-align: center;
    margin: 0 auto;
    background-color: #defc35;
    width: 70%;
    text-align: center;
    border-radius: 1.5rem;
}

/*DISEÑO PAGINA DE CAUSAS Y DONACIONES*/

.donacion__info {
    width: 100%;
    padding: 2rem 5rem;
}


@media (min-width: 800px) {
    .donacion__info {
        display: flex;
    }
}

.donacion__info__img {
    width: 40%;
    border-radius: 2.3rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__info {
        padding: 2rem 2rem;
        margin: 0 auto;
        text-align: center;
    }

    .donacion__info__img {
        width: 100%;
        max-width: 50rem;
        border-radius: 2.3rem;
    }
}

@media (min-width: 800px) and (max-width: 1200px) {
    .donacion__info__img {
        width: 40%;
        height: 20%;
        margin-top: 5%;
    }
}

.donacion__info__txt {
    padding: 3rem 3rem 3rem 3rem;
}

.donacion__info__titulo {
    /*Nombre de la donación*/
    font-size: 4.8rem;
    margin-top: 2rem;
    font-family: var(--fuente2);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--negro);
    line-height: 3rem;
}

@media (min-width: 0px) and (max-width: 1200px) {
    .donacion__info__titulo {
        font-size: 3.5rem;
    }
}

.donacion__codigo {
    color: #013e9b;
    font-size: 1.6rem;
}

.donacion__info__info {
    /*Texto que da informaicon acerca de la donación*/
    font-size: 2rem;
    font-family: var(--fuente2);
    color: var(--blanco);
    margin: 7rem 0rem -3rem 0rem;
    width: 100%;
    padding: 2rem;
    text-align: center;
    border-radius: 1rem;
}

#donacion__info__color--calidanavidad {
    background-color: #1d20f8;
}

/*DONACION TXT COLOR*/

#donacion__info__color--navidadcomunitaria {
    background-color: #ff3131;
}

#donacion__info__color--patasyclaus {
    background-color: #009ba0;
}

#donacion__info__color--donandosonrisas {
    background-image: linear-gradient(to right, #6B84B4, #C3A5D8);
}




.donacion__objetivo {
    color: #ff0808;
    margin-right: 1.5rem;
}

.donacion__infodiv {
    display: block;
    background-color: #f5f5f5;
    margin: 2rem 0rem 2rem 2rem;
    border-radius: 2rem;
    min-height: 32rem;
}

@media (min-width: 0px) and (max-width: 900px) {
    .donacion__info__txt {
        padding: 3rem 0rem 3rem 0rem;
    }

    .donacion__infodiv {
        margin: 2rem 0rem 2rem 0rem;
    }
}

.donacion__actividad__ubitiempo {
    /*Div que muestra info de ubicación y tiempo de la actividad*/
    background-color: #ffffff;
    width: 93%;
    height: 10rem;
    margin-left: 5%;
    border-radius: 1.5rem;
    margin-top: 4%;
    margin-bottom: 2rem;
    display: flex;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

/*BARRA PROGRESO DONACION*/

.donacion__barra__div__titulo {
    font-family: var(--fuente4);
    font-size: 2.5rem;
    margin-top: 2rem;
    color: var(--blanco);
}

.donacion__barra__div {
    width: 100%;
    height: 25rem;
    text-align: center;
    margin: 5rem 0rem;
    padding: 4rem;
    background-color: #003e9b;
}

.donacion__progreso {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 3rem 0rem;
}

.donacion__progreso__barra {
    background-color: #fdfdfd;
    height: 4rem;
    width: 70%;
    border-radius: 2rem;
    margin-left: 1.5rem;
}

.donacion__progreso__fondo {
    background-image: linear-gradient(to right,
            rgb(0, 0, 129),
            #1129ff,
            #1129ff,
            #273bf5,
            #1129ff,
            #3447f8,
            rgb(0, 0, 129));
    background-size: 110vw;
    animation: sliding 70s linear infinite;
    transform: scale(1.03);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    height: 100%;
    border-radius: 2rem;
}

/*DONACION APARTADO DE DONACION*/

.donacion__donar {
    width: 100%;
    max-width: 100%;
    padding: 5rem 10rem;
    /* background: linear-gradient(to right, #00b49c 50%, #f1f1f1f5 50%); */
    background: linear-gradient(to right, #955195 50%, #f1f1f1f5 50%);
}

#donacion__donar--rifa {
    background: linear-gradient(to right, #006c74, #009ec5f5, #01b5e2f5);
    padding: 5rem 5rem;

}

.donacion__donar__div {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background-color: var(--blanco);
}

.donacion__donar__div__info {
    width: 100%;
    max-width: 100%;
    padding: 5rem;
}

.donacion__donar__titulo {
    font-family: var(--fuente4);
    font-size: 2.5rem;
}

.donacion__donar__info {
    font-family: var(--fuente2);
    font-size: 1.8rem;
    margin-top: 1rem;
}

.donacion__donar__infoo {
    font-family: var(--fuente2);
    font-size: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.donacion__donar__valores {
    margin-top: 1rem;
}

.donacion__donar__valores__titulo {
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

.donacion__donar__valores__valores {
    margin: 2rem 0rem 3rem 0rem;
    display: flex;
}

.donacion__valores__valor {
    margin-right: 1rem;
    background-color: transparent;
    border: 2px solid #003e9b;
    /* Establecer el color del borde en azul */
    padding: 0.7rem 1.5rem;
    border-radius: 0.7rem;
    font-family: var(--fuente4);
    font-weight: bold;
    transition: all 0.3s ease;
}


.donacion__donar__donaciontotal {
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

#donacion__donar__donaciontotal__valor {
    font-family: var(--fuente2);
    font-size: 3rem;
    margin: 2rem;
    color: #015be2;
}

.donacion__transferencia {
    font-family: var(--fuente2);
    font-size: 1.5rem;
}

.donacion__donar__div__img {
    width: 100%;
    height: 100%;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__donar {
        padding: 5rem 2rem;
        /* background: linear-gradient(to right, #00b49c 50%, #f1f1f1f5 50%); */
        background: linear-gradient(to bottom, #d86cd8 45%, #955195 55%);
    }

    #donacion__donar--rifa {
        padding: 5rem 2rem;

    }

    .donacion__donar__div {
        grid-template-columns: repeat(1, 1fr);
    }

    .donacion__donar__div__info {
        padding: 2rem;
    }

    .donacion__donar__div__img {
        grid-row: 1;
        /* Cambia a la fila 1 */
        grid-column: 1;
        /* Cambia a la columna 1 */
        width: 100%;
    }

    .donacion__donar__titulo {
        font-family: var(--fuente4);
        font-size: 2.5rem;
    }

    .donacion__donar__info {
        font-size: 1.6rem;
    }
}

/*PROGRESO DE CADA DONACION - BARRA*/

#porcentaje__calidanavidad,
#progreso__calidanavidad {
    width: 3%;
}

#porcentaje__navidaden4patitas,
#progreso__patas {
    width: 3%;
}

#porcentaje__donandosonrisas,
#progreso__donandosonrisas {
    width: 10%;
}

.txtinvisible {
    visibility: hidden;
}

.donacion__progreso__porcentaje {
    font-family: var(--fuente2);
    font-size: 2.5rem;
    color: var(--blanco);
    margin-left: 2rem;
}

.donacion__progreso__necesitado {
    font-family: var(--fuente2);
    color: var(--blanco);
}

.donacion__directa {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 7rem 0rem;
    padding: 4rem 2rem 4rem 9rem;
}

/*Recoleccion Directa*/
@media (min-width: 800px) {
    .donacion__directa {
        grid-template-columns: repeat(2, 1fr);
    }
}

.donacion__directa__img {
    width: 70%;
    margin-left: 10%;
    border-radius: 1.2rem;
}

@media (min-width: 0px) and (max-width: 600px) {
    .donacion__directa__img {
        width: 80%;
        margin: 5rem auto 2rem auto;
    }
}

@media (min-width: 600px) and (max-width: 1100px) {
    .donacion__directa__img {
        width: 90%;
        margin: 7rem auto 2rem auto;
    }
}

.donacion__directa__txtxt {
    font-family: var(--fuente4);
    font-size: 4rem;
}

.donacion__directa__sub {
    font-family: var(--fuente2);
    font-size: 2rem;
    margin: 2rem 0rem;
}

.donacion__directa__lista {
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

.donacion__directa__lista__titulo {
    margin-bottom: 3rem;
}

.donacion__directa__lista__objeto {
    margin: 1.2rem 0rem 0rem 3rem;
    font-family: var(--fuente4);
}

.donacion_palomita {
    color: #008006;
    margin-right: 1rem;
}

.donacion_equis {
    color: #ff0000;
    margin-right: 1rem;
}

@media (max-width: 650px) {
    .donacion__directa {
        padding: 4rem 2rem 4rem 4rem;
    }
}

/*DONACION CAUSA*/

.donacion__causa {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 5rem 0rem;
}

@media (min-width: 850px) {
    .donacion__causa {
        grid-template-columns: repeat(2, 1fr);
    }
}

.donacion__causa__img {
    width: 90%;
    margin: 0 auto;
    border-radius: 1.5rem;
}

.donacion__causa__div {
    padding: 2rem;
}

.donacion__causa__titulo {
    font-family: var(--fuente1);
    font-size: 5rem;
    font-weight: 600;
}

.donacion__causa__txt {
    margin-top: 3rem;
    font-family: var(--fuente2);
    font-size: 1.8rem;
    width: 90%;
}

/*DONACION POR MEDIO DE PAYPAL*/

.donar__paypal {
    width: 100%;
}

.donarpaypal__div {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 5rem;
    /* background: linear-gradient(to right, hsl(0, 0%, 93%) 50%, #001692 50%); */
    background: linear-gradient(to right, #009DE2 50%, #001692 50%);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 800px) {
    .donarpaypal__div {
        grid-template-columns: repeat(2, 1fr);
    }
}

.paypal__logo {
    width: 100%;
    margin: 0 auto;
    border-radius: 1.8rem 0rem 0rem 1.8rem;
}

.donar__paypal2 {
    padding: 5rem;
    border-radius: 2rem;
}

.donar__paypal__titulo {
    font-family: var(--fuente2);
    color: var(--blanco);
    font-size: 2.5rem;
}

.donar__paypal__logopeque {
    width: 19%;
    margin-top: 1rem;
}

.donar__paypal__txt {
    color: var(--blanco);
    font-family: var(--fuente2);
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 4rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donarpaypal__div {
        background: linear-gradient(to bottom, #009DE2 30%, #001692 70%);
    }

    .paypal__logo {
        width: 100%;
        margin: 0 auto;
        border-radius: 1.3rem;
    }

    .donar__paypal2 {
        padding: 6rem 2rem;
    }

    .donar__paypal__logopeque {
        width: 25%;
        margin-top: 2rem;
    }
}

.donar__paypal__paypalme {
    background-color: #3889f3;
    font-size: 1.7rem;
    font-family: var(--fuente4);
    padding: 1rem 2rem;
    border-radius: 0.3rem;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    transition: all 0.3s ease;
}

.donar__paypal__paypalme:hover {
    background-color: #ffffff;
    color: #050505;
}

/*DONACION DATOS BANCARIOS*/

.donacion__datos {
    width: 100%;
    padding: 6rem 0rem 6rem 0rem;
    background-image: linear-gradient(to right, rgb(3, 163, 163) 50%, rgb(3, 163, 163) 50%);
}

.donacion__datos__div {
    width: 95%;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 4rem 0rem;
    background-image: linear-gradient(to right, rgb(3, 163, 163) 50%, rgb(255, 255, 255) 50%);
}

@media (min-width: 800px) {
    .donacion__datos__div {
        grid-template-columns: repeat(2, 1fr);
    }
}

.donacion__datos__img {
    width: 85%;
    margin: 1%;
}

.donacion__datos__info {
    width: 80%;
    margin: 3rem 0rem 0rem 5rem;
}

@media (min-width: 0px) and (max-width: 800px) {

    .donacion__datos {
        padding: 2rem 0rem 6rem 0rem;
    }

    .donacion__datos__div {
        background-image: linear-gradient(to bottom, rgb(2, 134, 134) 30%, rgb(3, 163, 163) 50%);
        border-radius: 2rem;
    }

    .donacion__datos__img {
        width: 90%;
        margin: 0 auto;
    }

    .donacion__datos__div {
        padding: 1rem 0rem;
    }

    .donacion__datos__info {
        width: 100%;
        margin: 5rem 0rem 0rem 0rem;
        background-color: var(--blanco);
        padding: 6rem 3rem 7rem 3rem;
        border-radius: 0.8rem;
    }
}

.donacion__datos__titulo {
    font-family: var(--fuente4);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.donacion__datos__txt {
    font-family: var(--fuente4);
    font-size: 1.8rem;
    margin: 2rem 0rem 5rem 0rem;
    text-align: justify;
    width: 95%;
}

/*TARJETA*/
.donacion__tarjeta {
    width: 65%;
    max-width: 32rem;
    height: 20rem;
    background-image: linear-gradient(to right, #008a8a, #00c2a8);
    margin: 0 auto;
    border-radius: 2rem;
    padding: 2rem;

    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

.donacion__tarjeta__titular {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
}

.donacion__tarjeta__banco {
    font-family: var(--fuente2);
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--blanco);
}

.donacion__tarjeta__datos {
    display: flex;
    margin-top: 13%;
}

.donacion__tarjeta__scaner {
    width: 12%;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-image: linear-gradient(to right, #b3b3b3, #d6d5d5);
    margin-top: 2rem;
}

.donacion__tarjeta__imgvar {
    width: 20%;
    height: 20%;
    margin-left: 10%;
}

.donacion__tarjeta__numeros {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    color: var(--blanco);
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__tarjeta {
        width: 100%;
        margin: 0rem;
    }

    .donacion__tarjeta__numeros {
        font-size: 1.7rem;
    }
}

.bbva {
    width: 5rem;
}

.donacion__tarjeta__datoscopiar {
    margin-top: 4rem;
    width: 100%;
}

.donacion__tarjeta__datoscopiar {
    font-family: var(--fuente2);
    font-size: 1.8rem;
    font-weight: 500;
}

.copiar {
    padding: 0.1rem 0.4rem;
    font-family: var(--fuente2);
    border-radius: 0.4rem;
    border: 1px solid #001692;
    margin-left: 0.5rem;
    color: #003e9b;
    background-color: transparent;
    margin-bottom: 1rem;
}

.copiar-simbolo {
    color: #003e9b;
}

/*CENTRO DE RECOLECCION MAPA*/

.donacion__centrorecayudamigos {
    background-color: #e0e0e0;
    width: 100%;
    max-height: 100%;
}

.donacion__centrorecayudamigos {
    width: 100%;
    padding: 7rem 5rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__centrorecayudamigos {
        padding: 5rem 2rem;
    }
}

@media (min-width: 800px) {
    .donacion__centrorecayudamigos {
        display: flex;
    }
}

.donacion__centrorec__info {
    margin-top: 3rem;
    width: 50%;
    background-color: var(--blanco);
    border-radius: 2rem;
    padding: 3rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__centrorec__info {
        width: 100%;
        padding: 2rem;
    }
}

.donacion__centrorec__titulo {
    font-family: var(--fuente2);
    font-size: 4rem;
    margin: 3rem;
}

.donacion__centrorec {
    font-family: var(--fuente2);
    font-size: 2rem;
    margin: 3rem 3rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .donacion__centrorec__info {
        width: 100%;
        padding: 2rem;
    }

    .donacion__centrorec__titulo {
        font-family: var(--fuente2);
        font-size: 3rem;
        margin: 2rem;
    }

    .donacion__centrorec {
        font-family: var(--fuente2);
        font-size: 2rem;
        margin: 2rem
    }
}

.centrorec__ubicacion,
.centrorec__horario {
    font-family: var(--fuente4);
    font-size: 2rem;
    margin-top: 1.5rem;
    margin: 3rem;
}

.pinmapa {
    /*Icono mapa*/
    font-size: 2.3rem;
    color: red;
    margin-right: 1rem;
}

.horario {
    /*Icono reloj*/
    font-size: 2.3rem;
    color: #015be2;
    margin-right: 1rem;
}

.centrorec__img {
    width: 45%;
    margin-left: 2rem;
}


.centrorec__ubicacionmaps {
    /*Texto "Abrir ubicación en"*/
    font-family: var(--fuente2);
    font-size: 1.8rem;
    text-decoration: none;
    color: #000000;
    display: flex;
    margin-left: 3rem;
}


@media (min-width: 800px) and (max-width: 1200px) {
    .centrorec__img {
        width: 50%;
        margin-left: 5%;
        height: 50%;
        margin-top: 30%;
    }

}

.centorec__ubimapslogo {
    /*Logo google maps*/
    width: 25%;
    margin-left: 1.5rem;
}

@media (min-width: 0px) and (max-width: 800px) {
    .centrorec__img {
        width: 80%;
        margin-left: 10%;
    }


    .centrorec__ubicacionmaps {
        /*Texto "Abrir ubicación en"*/
        display: block;
    }

    .centorec__ubimapslogo {
        width: 70%;
        margin-left: 1rem;
    }
}

.map {
    width: 100%;
    height: 25rem;
}

.telefono {
    font-size: 2.3rem;
    color: #015be2;
    margin: 0rem 1rem;
}

/*RIFAYUDAMIGOS DISEÑO*/

.rifayudamigos {
    width: 100%;
    padding: 6rem 9%;
}

.rifayudamigos__txt {
    font-family: var(--fuente2);
    font-size: 1.6rem;
    width: 55%;
}

.rifayudamigos__titulo {
    font-family: var(--fuente4);
    font-size: 4rem;
    font-weight: bold;
    color: #001692;
}

.rifayudamigos__info {
    font-family: var(--fuente2);
    font-size: 1.6rem;
    width: 25%;
}

.rifamigos__rifasactuales {
    font-family: var(--fuente2);
    font-size: 2.1rem;
    color: #ffffff;
    background-color: #0026fc;
    min-width: 25rem;
    max-width: 25rem;
    padding: 0.5rem 0rem 0.5rem 1rem;
    border-radius: 0.5rem 2rem 2rem 0.5rem;
    margin: 4rem 0rem 0rem 0rem;
}

.rifamigos__sinrifas {
    font-family: var(--fuente4);
    font-size: 2.3rem;
    color: #838383;
    font-weight: bold;
    margin: 3rem 0rem -6rem 2rem;
    width: 60%;
}

@media (min-width: 0px) and (max-width: 700px) {
    .rifamigos__sinrifas {
        width: 90%;
    }
}

/*------------------------------------*/

.rifayudamigos__div__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 5rem 0rem;
    column-gap: 2rem;
}

.rifa__card {
    width: 100%;
    max-width: 35rem;
    margin: 0rem 1rem;
    border-radius: 1rem;
    border: 1px solid black;
    transition: all 0.3s ease;
    position: relative;
}


@media (min-width: 0px) and (max-width: 700px) {
    .rifayudamigos {
        width: 100%;
        padding: 6rem 5%;
    }

    .rifayudamigos__txt {
        padding: 0rem 2rem;
        width: 100%;
    }

    .rifayudamigos__div__cards {
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
        margin: 5rem 0rem;
    }

    .rifa__card {
        width: 100%;
        max-width: 35rem;
        margin: 3rem auto;
    }
}

@media (min-width: 700px) and (max-width: 1000px) {
    .rifayudamigos {
        width: 100%;
        padding: 6rem 4%;
    }

    .rifayudamigos__txt {
        padding: 0rem 4rem;
        width: 70%;
    }

    .rifayudamigos__div__cards {
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        margin: 5rem 0rem;
        grid: 2rem;
    }

    .rifa__card {
        width: 100%;
        max-width: 35rem;
        margin: 3rem auto;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .rifayudamigos {
        width: 100%;
        padding: 6rem 4%;
    }

    .rifayudamigos__txt {
        padding: 0rem 0rem;
        width: 70%;
    }

    .rifayudamigos__div__cards {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        margin: 5rem 0rem;
    }

    .rifa__card {
        width: 100%;
        max-width: 35rem;
        margin: 3rem auto;
        grid-row: 2rem;
    }
}

.rifa__card:hover {
    transform: scale(1.02);
}


.rifa__premiodiv {
    width: 100%;
    text-align: center;
}

.rifa__premio__imgdiv {
    width: 100%;
}

.rifa__card__premioimg {
    width: 95%;
    margin: 0 auto;
    text-align: center;
    border-radius: 0.5rem;
}

.rifayudamigos__rifa__card__logo {
    width: 100%;
    display: flex;
    padding: 2rem;
}

.rifayudamigos__rifa__card__logo__img {
    width: 13%;
}

.rifayudamigos__rifa__card__logo__txt {
    margin-left: 1rem;
    color: var(--blanco);
    font-family: var(--fuente4);
    margin-top: 0.5rem;
    font-weight: bold;
}

.rifayudamigos__rifa__card__logo__txt1 {
    /*TEXTO AYUDAMIGOS*/
    font-size: 1.1rem;
}

.rifayudamigos__rifa__card__logo__txt2 {
    /*TEXTO RIFAYUDAMIGOS*/
    font-size: 1.3rem;
}

.rifa__card__info {
    padding: 2rem 3rem;
}

.rifa__separacion {
    /*Div de la separación*/
    width: 100%;
    display: flex;
    color: var(--blanco);
    margin-bottom: 2rem;
    position: relative;
    max-height: 1.2rem;
}

.rifa__separa {
    /*Cosita blancva de ls puntitos*/
    padding: 0.6rem 0.7rem;
    font-size: 0.1rem;
    margin-left: -0.2rem;
    background-color: var(--blanco);
    border-radius: 0rem 0.5rem 0.5rem 0rem;
    position: absolute;
}

.rifa__separa__puntos {
    margin-top: -1.5rem;
    font-size: 2.5rem;
    margin: -1.5rem 2rem 0rem 2.3rem;
}

.rifa__separa2 {
    /*Cosita blancva de ls puntitos*/
    padding: 0.6rem 0.7rem;
    font-size: 0.1rem;
    margin-left: -0.2rem;
    background-color: var(--blanco);
    border-radius: 0.5rem 0rem 0rem 0.5rem;
    position: absolute;
    right: -0.1rem;
}

.rifa__fechacelebracion {
    font-family: var(--fuente4);
    color: var(--blanco);
    margin: 2rem;
    font-size: 1.2rem;
    text-align: right;
    font-weight: 600;
    text-transform: uppercase;
}

.rifa__card__info {
    background-color: var(--blanco);
    border-radius: 0rem 0rem 1rem 1rem;
}

.rifayudamigos__premioo {
    color: #001692;
    margin-top: 0.5rem;
    font-size: 3rem;
    font-weight: 500;
    font-family: var(--fuente4);
}

.rifa__linea {
    width: 100%;
    color: #000000;
    margin: -1rem auto 2rem auto;
}

.rifacard__txt,
.rifa__card__precio {
    font-family: var(--fuente2);
    font-size: 1.2rem;
    text-transform: uppercase;
}

.rifacard__txt2 {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    margin-top: 0.5rem;
}

.rifa__card__infoprecio {
    display: flex;
    position: relative;
}

.rifa__precio {
    font-size: 2.5rem;
    font-weight: 400;
    color: #001692;
}

.rifa__participar {
    margin-left: 6rem;
    margin-top: 1rem;
    border: 1px solid #001692;
    color: #001692;
    padding: 1rem 3rem;
    height: 4.5rem;
    border-radius: 1rem;
    text-decoration: none;
    font-family: var(--fuente2);
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    transition: all 0.4s ease;
}

.rifa__participar:hover {
    border: 1px solid #001692;
    background-color: #001068;
    color: #ffffff;
}



/*DISEÑO PARA LA INFORMACION DE RIFAS*/

.rifa__infoo {
    width: 100%;
    ;
    height: 40rem;
    padding: 5rem 2rem 0rem 2rem;
    font-family: var(--fuente4);
    font-size: 4rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
}

.rifa__infoo__txtdiv {
    padding: 10rem 2rem 2rem 1rem;
    width: 90%;
}

.rifa__info__imgrifa {
    border-radius: 1rem;
}

.rifa__info__imgrifa {
    border-radius: 1rem;
    width: 90%;
    height: 100%;
    min-width: 20rem;
    max-height: 40rem;
}

.rifayudamigos__rifa__logo {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-top: 10rem;
}

@media (min-width: 0px) and (max-width: 1100px) {
    .rifa__infoo {
        width: 100%;
        ;
        height: 100%;
        padding: 0rem;
        font-size: 4rem;
        display: block;
    }

    .rifa__infoo__txtdiv {
        padding: 8rem 4rem 2rem 4rem;
    }

    .rifa__info__imgrifa {
        border-radius: 1rem;
        width: 100%;
        max-width: 50rem;
        margin-bottom: -1.08rem;
    }
}

.rifa__infoologo {
    width: 5%;
}

.rifa__info__divs {
    width: 100%;
    max-width: 100%;
    display: flex;
    background-color: #ffffff;
    padding-bottom: 5rem;
}

.rifa__info__barra {
    min-width: 40rem;
    height: 50%;
    position: sticky;
    /*SCROLL ESTATICO*/
    overflow-y: auto;
    top: 15%;
    margin: 4rem 2rem 0rem 4rem;
    border-radius: 0.5rem;
    padding: 5rem 3rem;
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}

@media (min-width: 800px) and (max-width: 1100px) {
    .rifa__info__barra {
        min-width: 30rem;
        height: 50%;
        position: sticky;
        /*SCROLL ESTATICO*/
        overflow-y: auto;
        top: 15%;
    }
}

/*VARIALBES DE COLOR RIFA INFO Y BARRA Y RIFA CARD*/

#rifa__info__echodot,
#rifa__barra__color--echodot,
#rifa__card--echodot {
    background-image: linear-gradient(to right, #00179b, #001ec9, #0021da);
}


.rifa__info__barra__titulo {
    color: #ffffff;
    font-family: var(--fuente4);
    font-size: 3.4rem;
    font-weight: bold;
}

.rifa__info__barra__fecha,
.rifa__info__barra__costo {
    font-family: var(--fuente2);
    font-size: 1.4rem;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 3rem;
    margin: 2rem 1rem;
}

.aprox {
    font-size: 1rem;
}

.sorteocelebrado__verganadores {
    /*GANADORES TEXTO*/
    font-family: var(--fuente2);
    font-size: 1.5rem;
    background-color: #001aac;
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    color: var(--blanco);
}

.ganadores__link {
    color: var(--blanco);
    font-weight: bold;
}

.rifa__info__barra__emision {
    font-family: var(--fuente2);
    font-size: 0.9rem;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 3rem;
    margin: 4rem 1rem -2rem 1rem;
    line-height: 2.2rem;
}

.rifa__infoo__emision {
    font-size: 1rem;
    text-transform: none;
    margin-top: -2rem;
}

.rifa__infoo__fecha,
.rifa__infoo__costo {
    font-size: 1.8rem;
    text-transform: none;
}

.rifa__ticket,
.rifa__fechaicono {
    font-size: 2rem;
    color: #ffffff;
    margin-right: 1rem;
}

.precioviejo {
    text-decoration: line-through;
    font-weight: 300;
    margin-right: 0.5rem;
    text-decoration-thickness: 2px;
}

.precioviejo2 {
    text-decoration: line-through;
    font-weight: 300;
    margin-right: 0.5rem;
    text-decoration-thickness: 2px;
    font-size: 1.8rem;
}

/*DIF INFO DE LA RIFA (PREMIOS Y ESO)*/

.rifa__info__div {
    margin: 4rem 4rem 0rem 0rem;
    border-radius: 1rem;
    padding: 5rem;
    background-color: var(--blanco);
    -webkit-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    -moz-box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
    box-shadow: 2px 15px 13px 0px rgba(5, 5, 5, 0.22);
}


.rifa__premios {
    width: 100%;
}

.rifa__premio {
    /*titulo del premio*/
    font-family: var(--fuente4);
    font-size: 2.5rem;
    color: #0018a3;
    font-weight: 600;
    text-transform: capitalize;
}

.trofeo {
    font-size: 2.7rem;
    margin-left: 1rem;
    color: #ffe65b;
}

.rifa__premio__promocional {
    /*Imagen promocional*/
    width: 100%;
    margin: 3rem 0rem;
    border-radius: 1rem;
}


@media (min-width: 0px) and (max-width: 800px) {
    .rifa__info__divs {
        display: block;
    }

    .rifa__info__barra {
        min-width: 30rem;
        height: 50%;
        position: initial;
        /*SCROLL ESTATICO*/
        overflow-y: unset;
        top: 15%;
        margin: 4rem 2rem 0rem 2rem;
    }

    .rifa__info__div {
        margin: 4rem 2rem 0rem 2rem;
        border-radius: 1rem;
        padding: 5rem 3rem;
    }

    .rifa__premio__promocional {
        /*Imagen promocional*/
        width: 100%;
        margin: 3rem 0rem;
    }
}

.rifa__premio__lugar {
    font-family: var(--fuente6);
    font-size: 2.5rem;
    font-weight: 500;
    color: #001cbd;
    margin: 2rem 0rem -1rem 0rem;
}

.rifa__premio__premioquees {
    /*Nombre del objeto de premio*/
    font-family: var(--fuente6);
    font-size: 2.5rem;
    font-weight: 500;
    color: #001cbd;
    text-transform: capitalize;
    margin: -1rem 0rem 0rem 0rem;
}

.rifa__premiotxtcambios {
    font-size: 1.2rem;
    font-family: var(--fuente2);
}

.rifa__info__div__txt {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    margin-bottom: 3rem;
}

.rifa__info__div__tituloo {
    font-family: var(--fuente1);
    font-size: 2rem;
    font-weight: bold;
    color: #001692;
    margin: 2rem 0rem;
}

.rifa__premio__caracteristica {
    margin-top: 4rem;
    font-family: var(--fuente2);
    font-size: 1.5rem;
}

.rifa__premio__cambiarefectivo {
    /*Texto que dice cambiar por valor total del premio*/
    font-family: var(--fuente2);
    font-size: 1.5rem;
}

.rifa__premio__color {
    font-family: var(--fuente2);
    font-size: 1.2rem;
    margin-top: 0.5rem;
}


.efectivo {
    color: #009213;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.carac-casa {
    font-size: 1.7rem;
    color: #008006;
    margin-right: 1rem;
}

.rifa__whatsappgrupo {
    padding-top: 1rem;
    font-family: var(--fuente2);
    font-size: 1.8rem;
    text-decoration: none;
    color: #008006;
}

.whatsapp {
    margin-right: 0.5rem;
}

.textoagradecimiento {
    font-family: var(--fuente2);
    font-size: 2rem;
    text-align: center;
    color: var(--blanco);
}

/*

.rifa__info__div__estadoboleto{
    font-family: var(--fuente2);
    margin-right: 1.5rem;
}

.estado--comprado{
    color: grey;
    font-size: 1.5rem;
}

.estado--disponible{
    color: rgb(0, 179, 15);
    font-size: 1.5rem;
}

.estado--seleccion{
    color: rgb(233, 190, 0);
    font-size: 1.5rem;
}

.rifa__boletos{ /*Contenedor de todos lo boletos
    margin: 4rem auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);

}

.rifa__boletos__boleto{
    padding: 1rem 0.5rem;
    color: var(--blanco);
    font-family: var(--fuente2);
    font-weight: bold;
    text-align: center;
    margin: 1rem;
    position: relative;
    border-radius: 0.5rem;
}

.comprado{
    background-color: rgb(223, 223, 223);
}

.disponible{
    background-color: #00af09;
}

.seleccion{
    background-color: rgb(218, 185, 0);
}

.rifaboleto__cosa{
    position: absolute;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
    background-color: #ffffff;
    color: var(--blanco);
    left: 0;
    border-radius: 0rem .3rem .3rem 0rem;
}

.rifaboleto__cosa2{
    position: absolute;
    padding: 0.2rem 0.5rem;
    font-size: 1rem;
    background-color: #ffffff;
    color: var(--blanco);
    right: 0;
    border-radius: .3rem 0rem 0rem 0.3rem;
}*/

.rifa__dudas {
    width: 100%;
    background-color: #6f007e;
    padding: 10rem;
    text-align: center;
}

.rifa__duda {
    font-family: var(--fuente2);
    font-size: 2.8rem;
    color: var(--blanco);
    font-weight: 600;
}

.rifa__duda__telefono {
    font-family: var(--fuente2);
    font-size: 2.8rem;
    color: var(--blanco);
    font-weight: 600;
    margin-top: 2rem;
}

@media (min-width: 0px) and (max-width: 500px) {
    .rifa__dudas {
        padding: 5rem 2rem;
    }
}

.rifa__condiciones {
    width: 100%;
    background-color: #f7f6f6;
    text-align: left;
    font-family: var(--fuente2);
    padding: 3%;
}

.rifa__condiciones__titulo {
    font-size: 1.2rem;
    font-weight: bold;
    color: #3d3d3d;
}

.rifa__condiciones__condiciones {
    font-size: 1.1rem;
    color: #3d3d3d;
}

@media (min-width: 0px) and (max-width: 500px) {
    .rifa__condiciones {
        text-align: justify;
        padding: 6%;
    }

    .rifa__condiciones__titulo {
        font-size: 0.8rem;
    }

    .rifa__condiciones__condiciones {
        font-size: 0.7rem;
    }
}

.podio {
    /*PODIO GANADORES*/
    width: 100%;
    padding: 5% 0rem 5% 0rem;

    /*visibility: hidden;
    opacity: 0;
    display: none;*/

}

.podio__titulo {
    font-family: var(--fuente1);
    font-size: 4.5rem;
    font-weight: 400;
    margin: 5rem 0rem 8rem 0rem;
    text-align: center;
}

@media (min-width: 0px) and (max-width: 600px) {
    .podio__titulo {
        font-size: 2.8rem;
        margin: 7rem 0rem 8rem 0rem;
    }
}

.podio__div {
    width: 97%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
    gap: 0.7rem;
    overflow-y: auto;
    text-align: center;
}

.podio__premioimg {
    width: 80%;
    text-align: center;
    margin: 0 auto;
}

.podio__barra {
    /* border: solid 1.2px black; */
    border-radius: 1rem;
    min-width: 30rem;
    position: relative;
}

.podio__barra__info {
    background-image: linear-gradient(to right, #00179b, #001ec9, #0021da);
    border-radius: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

.podio__barra__infoganador {
    position: absolute;
    top: 60%;
    left: 0;
    right: 0;
}

#barra1 {
    height: 48rem;
}

#barra2 {
    height: 43rem;
}

#barra__margenarriba2 {
    margin-top: 5rem;
}

#barra3 {
    height: 41rem;
}

#barra__margenarriba3 {
    margin-top: 6rem;
}

#barra4 {
    height: 35rem;
}

#barra__margenarriba4 {
    margin-top: 25.5rem;
}


.podio__numganador {
    font-family: var(--fuente1);
    color: var(--blanco);
    font-weight: 500;
}

.podio__numboletoganador {
    font-family: var(--fuente1);
    color: var(--blanco);
    margin: 1rem 0rem;
    font-weight: bold;
    font-size: 5rem;
}

.numidcolor {
    color: #04ffde;
}

.podio__felicitaciones {
    font-family: var(--fuente2);
    color: var(--blanco);
}

.podio__barra__premioo {
    font-family: var(--fuente2);
    color: #04ffde;
}

.transparente {
    visibility: hidden;
    opacity: 0;
    display: none;
}



.confeti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 800;
}

.confeti {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #00a030;
    opacity: 0.8;
    animation: fall 3s ease-in-out infinite;
}

@keyframes fall {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100vh);
    }
}



/*DISEÑO DE DIBV QUE CONTIENE LOS BOLETOS*/
.estadoboletos {
    width: 100%;
    padding: 5% 5%;
    background-image: linear-gradient(to right, rgb(0, 16, 107), #0022e0, #004edf);
}

.estadoboletos__simbologia {
    display: flex;
}

.estadoboletos__titulo {
    font-family: var(--fuente4);
    font-size: 4rem;
    font-weight: bold;
    color: #ffffff;
    margin-top: 6rem;
}


#porcentaje__boletos {
    font-size: 1.5rem;
}

.rifa__info__div--estadoboleto {
    display: block;
    color: var(--blanco);
    font-family: var(--fuente2);
    margin: 2rem 2rem 2rem 2rem;
}

.estado--comprado {
    color: #00dee6;
    font-size: 1.2rem;
}

.estado--disponible {
    color: var(--blanco);
    font-size: 1.2rem;
}


.rifa__boleto {
    background-color: transparent;
    color: var(--negro);
    font-family: var(--fuente1);
    font-size: 1.3rem;
    margin: 0.2rem;
    text-align: center;
    font-weight: bold;
    border-radius: 0.5rem;
}

.estadoboletos__boletoseleccionado {
    margin: 0rem 0rem 3rem 0rem;
}

#estado__boleto__titulo {
    color: var(--blanco);
    font-family: var(--fuente2);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.estadoboletos__divseleccion {
    display: flex;
}




#estadoboleto__boletoseleccionado {
    padding: 0.5rem 5rem;
    background-color: #ffed49;
    border-radius: 0.5rem;
    font-family: var(--fuente2);
    font-weight: bold;
}

.rifa__boletos {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    column-gap: 0.7rem;
    row-gap: 0.7rem;
    overflow: auto;
    margin-bottom: 4rem;
}


::-webkit-scrollbar {
    width: 2px;
    /* Ancho de la barra de desplazamiento */
    background-color: #00dabd;
    border-radius: 1rem;
}

.boton__boleto {
    width: 100%;
    padding: 0.9rem 0rem;
    border-radius: 0.5rem;
    background-color: #ffffff;
    border: none;
}

.boleto--comprado {
    background-color: #00dee6;
}

#estadoboleto__linkboleto {
    padding: 0.7rem 0.9rem;
    background-color: #3d1bff;
    color: var(--blanco);
    margin-left: 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-family: var(--fuente2);
    font-size: 1.5rem;
    font-weight: 500;
}

@media (min-width: 0px) and (max-width: 500px) {
    .estadoboletos__divseleccion {
        display: block;
    }

    #estadoboleto__boletoseleccionado {
        width: 35%;
        margin-bottom: 2rem;
        padding: 0.5rem 1rem;
        text-align: center;
    }

    #estadoboleto__linkboleto {
        margin-left: 0rem;
    }
}

#estadoboleto__ICONO {
    font-size: 1.5rem;
    margin-right: 1rem;
}

.estadoboleto__redireccionar {
    font-size: 1.2rem;
    margin-left: 0.3rem;
}

.estadoboleto__error {
    font-family: 1rem;
    font-weight: bold;
    margin-right: 0.3rem;
}

.fotosgan__titulo {
    font-family: var(--fuente1);
    text-align: center;
    font-size: 4rem;
    font-weight: 400;
}

.rifamigos__actividadesposibles--titulo {
    font-family: var(--fuente4);
    font-size: 2.2rem;
    font-weight: 500;
    margin: 0rem 0rem 4rem 11rem;
    width: 50%;
}

.agrade {
    /*TEXTPS DE AGRADECIMIENTO RIFA*/
    width: 100%;
    text-align: center;
    padding: 2rem;
    margin: 2rem auto 7rem auto;
}

.agradece__titulo {
    font-family: var(--fuente1);
    font-weight: bold;
    font-size: 4rem;
}

.agradece__sub {
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

.corazon {
    color: #d30000;
}

.milgra {
    font-family: var(--fuente2);
    font-size: 4rem;
}

/*SECCION CERTIFICADO*/
.certificado {
    width: 100%;
    text-align: center;
}

.certificado__titulo {
    font-family: var(--fuente1);
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
}

.certificado__mg {
    width: 70%;
    margin: 0 auto;
    margin-bottom: 7rem;
}

.certificado__documento {
    font-family: var(--fuente2);
    font-size: 2rem;
    text-align: left;
    color: #001692;
}

.documentopdf {
    margin-right: 1rem;
    font-size: 3rem;
    font-size: 3rem;
}

/*Diseño para las CARDS ACTIVIDADES*/

.actividades {
    width: 100%;
    margin-top: 5rem;
}

.actividades__div {
    width: 100%;
    max-width: 150rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    column-gap: 2rem;
    padding: 0rem 4rem;
}

.actividades__card {
    width: 100%;
    max-width: 35rem;
    height: 100%;
    border: solid 0.01px #000000;
    border-radius: 1rem;
    margin-bottom: 4rem;
}

.actividades__card--img {
    width: 100%;
    border-radius: 1rem 1rem 0rem 0rem;
}

@media(min-width: 700px) and (max-width: 1000px) {
    .actividades__div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width: 1000px) {
    .actividades__div {
        grid-template-columns: repeat(3, 1fr);
        padding: 0rem 10rem;
    }
}

.actividades__card__divtxt {
    width: 100%;
    padding: 1rem 3rem;
    color: var(--negro);
    /*border: solid 0.2px #000000;*/
    margin-top: -0.4rem;
    border-radius: 0rem 0rem 1rem 1rem;
    border-top: solid 0.1px #ffffff;
    ;
}

.actividades__tipoactividad {
    font-family: var(--fuente2);
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.actividades__card__titulo {
    font-family: var(--fuente4);
    font-weight: 500;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #001692;
}

.actividades__card__descripcion {
    font-family: var(--fuente2);
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.actividades__linea {
    text-align: center;
    margin: 0 auto;
}

.actividades__link {
    text-decoration: none;
}

.actividades__masinfo {
    text-align: center;
    margin: 2rem auto 1rem auto;
    padding: 1rem 2rem;
    border: solid 1px #001692;
    width: 100%;
    border-radius: 0.8rem;
    color: #001692;
    font-size: 1.5rem;
    font-weight: 500;
    font-family: var(--fuente2);
    text-transform: uppercase;
}

.actividades__masinfo:hover {
    background-color: #001692;
    color: var(--blanco);
    border: solid 1px #ffffff;
}

.actividades__card:hover {
    transform: scale(1.02);
    transition: all 0.4s ease;
}


/*Colores del botón más info*/
/*Terroreeciclado*/
/*
#act__boton--terroreciclado{
    color: #001692;
    border: solid 1px #001692;
}
#act__boton--terroreciclado:hover{
    background-color: #001692;
    color: var(--blanco);
    border: solid 1px #ffffff;
}

/*Donando Sonrisas
#act__boton--donandosonrisas{
    color: #412b04;
    border: solid 1px #412b04;
}
#act__boton--donandosonrisas:hover{
    background-color: #412b04;
    color: var(--blanco);
    border: solid 1px #ffffff;
}

/*Sesión Tec
#act__boton--sesiontec{
    color: #001692;
    border: solid 1px #001692;
}
#act__boton--sesiontec:hover{
    background-color: #001692;
    color: var(--blanco);
    border: solid 1px #ffffff;
}

/*Reforestacion
#act__boton--reforestacion{
    color: #005f0d;
    border: solid 1px #005f0d;
}
#act__boton--reforestacion:hover{
    background-color: #005f0d;
    color: var(--blanco);
    border: solid 1px #ffffff;
}

*/

/*Diseño Página INSPIRAMIGOS - EPISODIOS*/

#footer__inspiramigos {
    margin-top: -5rem;
}

#body__inspiramigos {
    background-color: #ffffff;
}

.episodios {
    /*section*/
    width: 100%;
    padding: 5rem 3rem;
}

.episodios__titulo {
    /*Texto titulo*/
    font-family: var(--fuente1);
    font-size: 1.8rem;
    font-weight: 500;
    margin-bottom: 2rem;
    color: #000000;
    text-transform: uppercase;
}

.episodios__hr {
    border: solid 1px #e0e0e0;
}

.episodios_div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    margin: 8rem auto;
}


.episodio {
    width: 100%;
    max-width: 45rem;
    position: relative;
    height: 22rem;
    margin-bottom: 6rem;
}

@media(min-width: 0px) and (max-width: 800px) {
    .episodios_div {
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
    }

    .episodio {
        max-width: 45rem;
        margin-bottom: 6rem;
    }
}

@media(min-width: 801px) and (max-width: 1000px) {
    .episodios_div {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        align-content: center;
        justify-content: center;
        justify-items: center;
    }

    .episodio {
        max-width: 45rem;
        margin-bottom: 3rem;
    }
}

.episodio__numep {
    background-color: rgb(0, 81, 92);
    color: var(--negro);
    position: absolute;
    padding: 0.8rem 1rem;
    top: -3rem;
    z-index: -3;
    font-family: var(--fuente2);
    font-size: 1.3rem;
    border-radius: 0.3rem 1rem 1rem 0rem;
    color: var(--blanco);
}

.episodio__img {
    width: 100%;
    height: 100%;
    border-radius: 0rem 1rem 1rem 1rem;
    object-fit: cover;
    /*Hace que la imagen se mantenga relacion aspecto, no la distorciona*/
}

.episodio__info {
    background-color: rgba(0, 0, 0, 0.61);
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    padding: 1.5rem;
    margin-top: -0.5rem;
    position: absolute;
    top: 0.5rem;
    height: 100%;
    display: none;
    opacity: 0;

    transition: all 0.3s ease;
}

.episodio:hover>.episodio__info {
    display: block;
    opacity: 1;
}

.episodio__infovisible {
    display: flex;
}

.episodio__titulo {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 1rem 0rem 0.5rem 0rem;
    text-transform: uppercase;
    color: #17ffff;
}

.episodio__invitadx {
    font-family: var(--fuente2);
    font-size: 1.2rem;
    margin: 1rem 1.5rem 1rem 0rem;
    color: #c5c5c5;
    position: absolute;
    bottom: 1rem;
    left: 2rem;
}

.invitadx {
    font-family: var(--fuente4);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--blanco);
}

.episodio__descripcion {
    font-family: var(--fuente1);
    font-size: 1.4rem;
    text-align: left;
    margin: 1rem 0rem 6rem 0rem;
    color: var(--blanco);
}

.episodio__link {
    position: absolute;
    right: 2rem;
    bottom: 2rem;
    background-color: #ffffff;
    padding: 0.5rem 1.2rem 0.5rem 1.4rem;
    border-radius: 2rem;
    text-decoration: none;
    font-family: var(--fuente2);
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--negro);
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    gap: 0.5rem;
}

.episodio__play {
    font-size: 1.6rem;
    margin: 0.2rem 0rem 0rem 0.5rem;
    color: #009e89;
}


.episodio__link:hover {
    background-color: #ffffff;
    padding: 0.5rem 1.8rem;
    border-radius: 2rem;
}

.episodio__link:hover {
    background-color: #ffffff;
    color: var(--negro);
    transform: scale(1.05);
}

/*Diseño página web capitulo PODCAST*/

#pre-banner--podcast {
    background-color: #15181d;
}

.podinfo {
    /*Section podinfo*/
    background-color: #15181d;
    max-width: 100%;
}

.podinfo__div1 {
    /*Div1 contiene info e imagenes de inicio*/
    max-width: 120rem;
    margin: 0rem auto;
    padding: 10rem 2rem 7rem 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 0px) and (max-width: 900px) {
    .podinfo__div1 {
        display: block;
        padding-left: 3rem;
    }
}

.podinfo__divizq--part1 {
    color: var(--blanco);
}

.podinfo__numcap {
    /*Numero de capitulo*/
    font-family: var(--fuente2);
    font-size: 1.2rem;
    color: var(--blanco);
    background-color: #4b4b4b49;
    width: 8rem;
    padding: 0.5rem;
    text-align: center;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.podinfo__invitadx {
    /*Titulo del capitulo*/
    font-family: var(--fuente2);
    font-size: 4rem;
    width: 70%;
    font-weight: 600;
}

.podinfo__invitadxx {
    /*Minitexto "Invitadx"*/
    font-family: var(--fuente1);
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-top: 1rem;
    color: #797979;

}

.podinfo__invitadx__nombre {
    /*Nombre del invitadx*/
    font-family: var(--fuente2);
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.podinfo__historiainfo {
    /*Texto de info sobre el captiulo*/
    font-family: var(--fuente2);
    font-size: 1.3rem;
    color: #8a8a8a;
    margin-bottom: 4rem;
    width: 80%;
}

.podinfo__divizq__boton {
    /*Boton iniciar*/
    font-family: var(--fuente2);
    text-transform: uppercase;
    color: var(--blanco);
    text-decoration: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border: solid 1.5px #505050;
    border-radius: 0.5rem;
}

.podinfo__icono {
    margin-left: 1rem;
    font-size: 1.2rem;
}

.podinfo__divizq--part2 {
    margin-top: 8rem;
    width: 25rem;
    position: relative;
}

.podinfo__divizq__cuadrado {
    color: var(--blanco);
    padding: 1.5rem 2rem;
    background-color: #434146;
    max-width: 100%;
    text-align: left;
    font-family: var(--fuente2);
    font-size: 1.5rem;
    border-radius: 1.2rem;
    z-index: 5;
}

.podinfo__cuadradoinfo {
    font-family: var(--fuente2);
    font-size: 1.3rem;
    color: #acacac;
    margin-top: 0.5rem;
}

.podinfo__divizq__cuadrado2 {
    color: transparent;
    padding: 1.5rem 2rem;
    background-color: #27272965;
    width: 20rem;
    border-radius: 1.2rem;
    z-index: -1;
    margin-top: -2rem;
    margin-left: 2rem;
}

.podinfo__divizq__cuadrado3 {
    /*Equina blanca visible*/
    color: transparent;
    padding: 1.5rem 2rem;
    background-color: transparent;
    width: 20rem;
    border-radius: 1.2rem;
    z-index: -1;
    margin-top: -3.5rem;
    margin-left: 0.5rem;
    border: solid 0.5px #e7e7e7;
    clip-path: polygon(0% 100%, 0% 60%, 20% 100%);
}

.podinfo__divder {
    position: relative;
}

.podinfo__img__div {
    position: relative;
}

.podinfo__divder__img {
    display: flex;
    gap: 3rem;
    margin-bottom: 10rem;
}

.podinfo__img1 {
    max-width: 20rem;
    height: 20rem;
    border-radius: 1rem;
    margin-top: 2rem;
}

.podinfo__img2 {
    max-width: 40rem;
    height: 40rem;
    border-radius: 1rem;
}

@media (min-width: 551px) and (max-width: 900px) {
    .podinfo__divder {
        margin-top: 8rem;
    }

    .podinfo__divder__img {
        justify-content: center;
        margin: 0 auto;
    }
}

.podinfo__divizq__cuadrado4 {
    /*Equina blanca visible*/
    color: transparent;
    padding: 1.5rem 2rem;
    background-color: transparent;
    width: 20rem;
    height: 13rem;
    border-radius: 1.2rem;
    position: absolute;
    left: -2rem;
    bottom: -3rem;
    border: solid 0.5px #a8a8a8;
    clip-path: polygon(0% 100%, 0% 10%, 20% 100%);
}

.podinfo__cuadradoicon {
    position: absolute;
    color: var(--blanco);
    top: 0rem;
    right: -1rem;
    font-size: 3rem;
    transform: rotate(-20deg);
    color: #00f3f3;
}

.podinfo__cuadradoicon2 {
    position: absolute;
    color: #888888;
    left: -2.5rem;
    bottom: 9rem;
}

.podinfo__divizq__cuadrado5 {
    /*Equina blanca visible*/
    color: transparent;
    padding: 1.5rem 2rem;
    background-color: transparent;
    width: 20rem;
    height: 10rem;
    border-radius: 1.2rem;
    position: absolute;
    bottom: -12.9rem;
    left: -12.2rem;
    border: solid 0.5px #a8a8a8;
    clip-path: polygon(100% 0%, 70% 0%, 100% 90%);
}

.podinfo__img__audio {
    /*Img audio azul*/
    position: absolute;
    bottom: -13rem;
    right: 1rem;
    width: 30rem;
}

@media (min-width: 0px) and (max-width: 550px) {
    .podinfo__divder {
        margin-top: 6rem;
    }

    .podinfo__divder__img {
        display: block;
        text-align: center;
    }

    .podinfo__img1 {
        width: 55rem;
        height: 25rem;
        margin: 0 auto;
    }

    .podinfo__img2 {
        max-width: 30rem;
        height: 30rem;
        border-radius: 1rem;
        margin-top: 3rem;
    }

    .podinfo__divizq__cuadrado4 {
        /*Equina blanca visible*/
        left: 1rem;
    }

    .podinfo__cuadradoicon {
        top: 0rem;
        right: 0;
        left: 70%;
    }

    .podinfo__cuadradoicon2 {
        left: 0.5rem;
    }

    .podinfo__divizq__cuadrado5 {
        /*Equina blanca visible*/
        bottom: -12.9rem;
        left: -9.2rem;
    }
}

.podinfo__hr {
    margin-top: 11.8rem;
    height: 0.1px;
    /* Ajusta el grosor */
    border: none;
    /* Elimina el borde predeterminado */
    background-color: #a8a8a8;
    /* Color de la línea */
}

.podinfo__divder__mediainfo {
    /*Div que contiene YT y Spotify*/
    display: flex;
    gap: 2rem;
    padding: 3rem 0rem;
    color: var(--blanco);
    justify-content: center;
}

.podinfo__mediainfo__txt {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
}

.podinfo__mediaicon {
    font-size: 2.5rem;
    margin-right: 1rem;
}

.podinfo__mediainfo__txtinfo {
    font-family: var(--fuente2);
    font-size: 1.3rem;
    color: #8a8a8a;
    margin-top: 1rem;
}

#empezar {
    color: var(--blanco);
    opacity: 0;
    width: 100%;
    height: 10rem;
    margin-top: -7rem;
}

/*DIV 2 DISEÑO - MEDIA*/

.podinfo__div2 {
    width: 100%;
    color: var(--blanco);
    padding-bottom: 10rem;
}

.podinfo__div2__titulo,
.podinfo__div3__titulo {
    font-family: var(--fuente2);
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.podinfo__div2__subtitulo {
    text-align: center;
    font-family: var(--fuente2);
    margin-bottom: 3rem;
    font-size: 1.3rem;
    color: #8a8a8a;
    font-weight: 400;
}

.podinfo__div2__div {
    /*Div que contiene cards de media*/
    width: 70%;
    max-width: 120rem;
    margin: 0 auto;
    display: block;
    gap: 2rem;
    justify-content: center;
}

.podinfo__div2__tipoformato {
    font-family: var(--fuente2);
    font-size: 1.2rem;
    color: var(--blanco);
    background-color: #4b4b4b49;
    width: 8rem;
    padding: 0.5rem;
    text-align: center;
    border-radius: 1rem;
    margin-bottom: 1rem;
    margin-bottom: 2rem;
}

.podinfo__div2__media {
    /*Div que contiene toda la card de media*/
    background-color: #0000004b;
    padding: 3rem;
    border-radius: 1rem;
    max-width: 100%;
    margin-top: 3rem;
}

.podinfo__div2__mediadiv {
    /*Div general que contiene toda la info*/
    display: flex;
    position: relative;
}

#div2__mediadiv__ytt {
    /*Div que contiene Youtube Ver ahora*/
    margin: 3rem auto -3rem auto;
    padding: 0rem 3rem;
}

.podinfo__div2__mediahr {
    margin: 9rem auto 5rem auto;
    width: 90%;
    height: 0.5px;
    /* Ajusta este valor para la delgadez deseada */
    border: none;
    background-color: #444444;
    /* O el color que prefieras */
}

/*#media__spotify{
    background-image: linear-gradient(to bottom, #008f32, #01b440);
}*/
#media__youtube {
    /*Clase especifica media youtube div*/
    width: 100%;
    ;
    margin: 0 auto;
    padding: 0rem;
}

.podinfo__div2_media__txt {
    /*Texto descripcion de media*/
    font-family: var(--fuente4);
    font-size: 1.7rem;
    align-items: center;
    display: flex;
    margin-bottom: 2.5rem;
}

.podinfo__div2__icon {
    margin-right: 1rem;
    font-size: 3rem;
}

.podinfo__div2__btn {
    /*Link ver/escuchar ahora*/
    font-family: var(--fuente2);
    font-size: 1.5rem;
    background-color: transparent;
    border: solid 1px #ffffff;
    width: 100%;
    height: 3rem;
    border-radius: 0.5rem;
    padding: 0.2rem 3rem 0rem 3rem;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    position: absolute;
    width: 25rem;
    right: 2rem;
}

.podinfo__div2__link {
    text-decoration: none;
    color: var(--blanco);
}

@media (min-width: 0px) and (max-width: 1000px) {
    .podinfo__div2__div {
        /*Div que contiene cards de media*/
        width: 90%;
    }
}

@media (min-width: 0px) and (max-width: 500px) {
    .podinfo__div2__mediadiv {
        /*Div general que contiene toda la info*/
        width: 100%;
        display: block;
        padding-bottom: 2rem;
        align-items: center;
        text-align: center;
    }

    .podinfo__div2__btn {
        /*Link ver/escuchar ahora*/
        width: 100%;
        height: 3rem;
        padding: 0rem;
        position: relative;
        margin: 0rem auto 1rem 2rem;
    }

    #div2__mediadiv__ytt {
        /*Div que contiene Youtube Ver ahora*/
        margin: 3rem auto -3rem auto;
        padding: 0rem 3rem 2rem 3rem;
    }

    .podinfo__div2__subtitulo {
        width: 80%;
        margin: 1.5rem auto 3rem auto;
    }
}

.podinfo__div2__mediacontenido {
    width: 100%;
}

#mediacontenido__yt {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* Relación de aspecto 16:9 */
    overflow: hidden;
    border-radius: 1rem 1rem 0rem 0rem;
}

.podinfo__media__videoyt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


.podinfo__div3 {
    /*Div 3 que contiene las tarjetas*/
    width: 100%;
    color: var(--blanco);
    padding-bottom: 8rem;
}

.podinfo__div3__cards {
    /*Div que contiene las tarjetas*/
    width: 80%;
    max-width: 120rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    margin: 3rem auto 3rem auto;
    gap: 3rem;
}

#podinfo__divcards-2 {
    width: 60%;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 0px) and (max-width: 600px) {

    .podinfo__div3__cards,
    #podinfo__divcards-2 {
        /*Div que contiene las tarjetas*/
        width: 80%;
        grid-template-columns: repeat(1, 1fr);
        margin-top: 3rem;
    }
}

@media (min-width: 601px) and (max-width: 1000px) {
    .podinfo__div3__cards {
        /*Div que contiene las tarjetas*/
        width: 90%;
        grid-template-columns: repeat(2, 1fr);
    }
}

.podinfo__card {
    /*Diseño de tarjeta*/
    max-width: 100%;
    padding: 3rem 3rem 2rem 3rem;
    border-radius: 1rem;
    border: solid 0.5px #313131f5;
}

.podinfo__card--invitado {
    background-image: linear-gradient(to bottom, #008da08f, #00bcc23d 70%, #e2e2e20c);
}


.podinfo__card__titulo {
    display: flex;
    margin-bottom: 3rem;
}

.podinfo__card__img {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.8rem;
}

.podinfo__card__tituloo {
    margin-left: 2rem;
}

.podinfo__card__nombre {
    font-family: var(--fuente2);
    font-size: 1.8rem;
    font-weight: 300;
}

.podinfo__card__rol {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    color: #a3a3a3;
    margin-top: 0.5rem;
}


.podinfo__card__red {
    font-family: var(--fuente2);
    font-size: 1.5rem;
    border: solid 1px #ffffff;
    border-radius: 0.5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem 2rem;
    justify-content: center;
    color: var(--blanco);
    text-decoration: none;
}

@media (min-width: 0px) and (max-width: 370px) {
    .podinfo__card__red {
        font-size: 1.3rem;
    }
}

@media (min-width: 595px) and (max-width: 670px) {
    .podinfo__card__red {
        font-size: 1.1rem;
    }
}

@media (min-width: 1000px) and (max-width: 1200px) {
    .podinfo__card__red {
        font-size: 1.25rem;
    }
}

.podinfo__card__icon {
    font-size: 2rem;
    align-items: center;
}

#podinfo__footer {
    margin-top: -3rem;
}

/*Diseño pagina de ser ayudamigo*/

.minicards {
    /*div que contiene las card*/
    width: 100%;
    max-width: 100%;
    padding: 5rem 0rem;
    background-color: #008006;
    margin-top: -0.5rem;
}

.minicards__titulop {
    font-family: var(--fuente4);
    color: #ffffff;
    margin: 5rem auto;
    text-align: center;
    font-size: 3vh;
    background-color: #008006;
}

.minicards__grid {
    width: 80%;
    margin: 0rem auto 0rem auto;
}

@media (min-width: 528px) {
    .minicards__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
        width: 80%;
    }
}

@media (min-width: 980px) {
    .minicards__grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 90%;
        gap: 4rem;
    }
}

.minicards__card {
    width: 100%;
    max-width: 100%;
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    text-align: center;

    box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
}

.minicards__icono {
    font-size: 4rem;
    margin: 2rem auto 1.5rem auto;
    background-color: #004974;
    padding: 2rem;
    border-radius: 4rem;
    background-color: #e4e4e4;
    color: #37bd3e;
}

.minicards__titulo {
    font-size: 1.8rem;
    font-family: var(--fuente4);
    color: #008006;
    margin-bottom: 2rem;
    font-weight: 600;
}

.minicards__texto {
    font-size: 1.4rem;
    background-color: #ebebeb;
    padding: 4rem;
    font-family: var(--fuente2);
}

/*A quien buscamos seccion*/

.aqbuscamos {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 0.4rem;
}

.aqbuscamos__color {
    color: #008006;
}

.aqbucamos__divimg {
    width: 100%;
    background-color: #7ED6B3;
}

.aqbucamos__img {
    width: 100%;
    height: 102%;
    margin: 0rem auto;
}


@media (min-width: 950px) {
    .aqbuscamos__flex {
        display: flex;
    }

    .aqbucamos__divimg {
        width: 50%;
        max-width: 60rem;
    }

    .aqbucamos__img {
        width: 100%;
        height: 101%;
        min-width: 35rem;
        margin: 0rem 0rem;
    }
}

.aqbuscamos__divtxt {
    width: 50%;
    padding: 7rem 0rem 7rem 6rem;
    text-align: left;
    font-weight: 600;
}

.aqbuscamos__txt {
    width: 100%;
    font-size: 1.8rem;
    font-family: var(--fuente1);
    font-weight: 350;
    margin-top: 3rem;
    text-align: justify;
}

.aqbuscamos__titulo {
    font-size: 3rem;
    font-family: var(--fuente4);
    margin-top: 2rem;
}

.aqbuscamos__tituloo {
    /*titulo grande*/
    font-size: 8rem;
    font-family: var(--fuente4);
    margin-top: 4rem;
    margin-left: 4rem;
}


@media (min-width: 651px) and (max-width: 1120px) {
    .aqbuscamos__tituloo {
        font-size: 350%;
    }
}

@media (min-width: 0px) and (max-width: 650px) {
    .aqbuscamos__tituloo {
        font-size: 200%;
        font-family: var(--fuente4);
        margin-top: 4rem;
        margin-left: 1rem;
    }
}


@media (max-width: 950px) {
    .aqbuscamos__divtxt {
        width: 100%;
        padding: 5rem
    }
}

/*Camino TB*/

.caminotb__div {
    width: 100%;
    padding-top: 4rem;
    background-color: #f3f3f3;
    margin: 0 auto;
}

.caminotb__titulo {
    font-size: 4rem;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0rem 0rem 8rem 10%;
    font-weight: 600;
    width: 80%;
}

.caminotb__contenedor {
    width: 100%;
    margin: 0 auto;
}

.caminotb__grid {
    width: 87%;
    display: grid;
    margin: 0rem auto;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 2rem;
}

@media (min-width: 950px) and (max-width: 1130px) {
    .caminotb__grid {
        width: 90%;
        display: grid;
        margin: 0 auto;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .caminotb__titulo {
        width: 45%;
    }
}

@media (min-width: 550px) and (max-width: 950px) {
    .caminotb__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

.caminotb__card {
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 2rem;
    margin-bottom: 4rem;

    box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(0, 0, 0, 0.75);
}

.caminotb__paso {
    font-family: var(--fuente4);
    color: #ffffff;
    font-weight: bold;
    font-size: 2.5rem;
    margin: 4rem 0rem 2rem 0rem;
    border-radius: 0rem 0.5rem 0.5rem 0rem;
    padding: 1.5rem 0rem 1.5rem 2rem;

    width: 100%;
    background-color: #008006;
}

.caminotb__corona {
    color: #ffee00;
}

.caminotb__txt {
    background-color: var(--blanco);
    padding: 1.5rem;
    font-size: 1.7rem;
    font-family: var(--fuente2);

}

.caminotb__pasitos {
    width: 100%;
    text-align: center;
    background-color: #f5f5f5;
    font-size: 3rem;
    margin-top: 3rem;
    padding: 2rem;
    color: #25812a;
    border-radius: 0rem 0rem 2rem 2rem;
}

.caminotb__pasos {
    margin-right: 1.5rem;
}


/* CAMINO  */

.camino__div {
    width: 100%;
    max-width: 100%;
    height: 60rem;
    padding-top: 5rem;
    background-color: #f3f3f3;
    position: relative;
}

.camino__titulo {
    font-size: 4rem;
    font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    margin: 0rem 0rem 15rem 10%;
    font-weight: 600;
    width: 45%;
}

.camino__contenedor {
    width: 90%;
    margin: 5rem auto;
    position: relative;
}

@media (min-width: 950px) {
    .camino__contenedor {
        display: flex;
    }
}

@media (max-width: 1120px) {
    .camino__div {
        visibility: hidden;
        opacity: 0;
        display: none;
    }
}

@media (min-width: 1120px) {
    .caminotb__div {
        visibility: hidden;
        opacity: 0;
        display: none;
    }
}


.camino__corona {
    font-size: 7rem;
    color: #ffdc15;
    margin-left: 3rem;
}

.camino__pasos {
    font-size: 4rem;
    color: #b9b9b9;
    margin: 0rem 2.5rem;
}

.paso1 {
    margin: 1rem 2.5rem 0rem 2.5rem;
    transform: rotate(-9deg);
}

.paso2 {
    transition: all ease 2s;
}

.paso3 {
    margin: 3rem 2.2rem 0rem 3rem;
    transform: rotate(-10deg);
}

.paso4 {
    transition: all ease 4s;
}

.paso5 {
    margin: 1rem 2.5rem 0rem 2.5rem;
    transform: rotate(-9deg);
}

.paso6 {
    transition: all ease 6s;
}

@media (max-width: 950px) {
    .camino__pasos {
        font-size: 3rem;
        margin: 5rem auto;
    }
}

.camino__divcirculo {
    width: 5%;
    background-color: #c0c0c0;
    position: relative;
    text-align: center;
    border-radius: 5rem;
}

.camino__circulodivtxt {
    visibility: hidden;
    opacity: 0;
    font-size: 1.8rem;
    display: none;
    background-color: var(--blanco);
    padding: 2rem;
    margin-top: 1rem;
    border-radius: 1rem;
    width: 100%;
}

.camino__txt {
    font-size: 1.4rem;
    font-family: var(--fuente2);
}

.camino__numero {
    font-size: 3rem;
    color: var(--blanco);
    padding: 2rem;
}

.camino__divcirculo:hover {
    width: 15%;
    min-width: 25rem;
    border-radius: 0.9rem;
    padding: 1rem;
    transition: all ease 0.5s;
}

.camino__divcirculo:hover>.camino__circulodivtxt {
    visibility: visible;
    opacity: 1;
    font-size: 1.8rem;
    display: block;
}

.camino__circulo:hover>.camino__numero {
    background-color: #fcce00;
    font-size: 1.8rem;
}


.camino__circulo:hover>.camino__circulodivtxt {
    visibility: visible;
    opacity: 1;
    font-size: 1.8rem;
    position: relative;
}


/*Perfil*/

.perfil__div {
    width: 100%;
    max-width: 100%;
    margin: 3rem 0rem;
    padding: 5rem 0rem;
    margin: 0 auto;
    text-align: center;
    background-color: #f3f3f3;
}

.perfil__contenedor {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 1rem;
}

@media (max-width: 650px) {
    .perfil__contenedor {
        width: 70%;
    }
}

@media (min-width: 650px) {
    .perfil__contenedor {
        display: flex;
        width: 80%;
        gap: 2rem;
    }
}

.perfil__card {
    width: 100%;
    max-width: 100%;
    padding: 4rem;
    text-align: left;
    background-color: rgb(255, 255, 255);
    border-radius: 1.3rem;

    box-shadow: -1px 3px 14px -3px rgba(145, 145, 145, 0.75);
    -webkit-box-shadow: -1px 3px 14px -3px rgba(145, 145, 145, 0.75);
    -moz-box-shadow: -1px 3px 14px -3px rgba(145, 145, 145, 0.75);
}


.perfil__icono {
    font-size: 3.8rem;
    color: #000000;
    margin: 3rem 0rem 3rem 0rem;
}

.perfil__cardtitulo {
    font-family: var(--fuente4);
    font-size: 2rem;
    font-weight: 600;
}

.perfil__cardtxt {
    font-size: 1.4rem;
    color: #747474;
    margin: 3rem 0rem 3rem 0rem;
    width: 90%;
    font-family: var(--fuente2);
}


@media (min-width: 0px) and (max-width: 650px) {
    .perfil__card {
        padding: 5rem;
        width: 100%;
        max-width: 100%;
        text-align: left;
        margin: 0rem 0rem 5rem 0rem;
    }

    .perfil__cardtxt {
        width: 90%;
    }
}

/*Equipo familia*/

.equipoas {
    width: 100%;
}

.equipoas__contenedor {
    width: 80%;
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(2, 1fr);
}

.equipoas__titulo {
    width: 80%;
    margin: 30% 2rem 2rem 1rem;
    font-size: 6rem;
}

@media (min-width: 1020px) and (max-width: 1300px) {
    .equipoas__titulo {
        width: 80%;
        margin: 25% 2rem 2rem 1rem;
        font-size: 6rem;
    }
}

.comentarios__tituloo {
    width: 80%;
    margin: 20% 2rem 2rem 4rem;
    font-size: 6rem;
}

@media (min-width: 0px) and (max-width: 650px) {
    .comentarios__tituloo {
        width: 80%;
        margin: 20% 2rem 2rem 0.2rem;
        font-size: 4.5rem;
    }
}

.equipoas__subtitulo {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    color: var(--negro);
    margin: 0rem 2rem 2rem 1rem;
    width: 86%;
}

.equipoas__img {
    width: 110%;
    border-radius: 1.5rem;
    margin: 7rem auto;
}

@media (max-width: 950px) {
    .equipoas__contenedor {
        width: 80%;
        grid-template-columns: repeat(1, 1fr);
    }

    .equipoas__img {
        width: 100%;
        border-radius: 1.5rem;
        margin: 7rem auto;
    }
}

/*Unirse al equipo*/

.unirseas {
    width: 100%;
    margin-top: 8rem;
}

.uniseas__contenedor {
    width: 100%;
    margin: 0 auto;
}

.uniseas__ayudamigos {
    font-family: var(--fuente1);
    font-size: 5rem;
    text-align: center;
    margin: 3rem auto 0rem auto;
    font-weight: bold;
}

.uniseas__titulo {
    font-size: 2.6rem;
    font-family: var(--fuente4);
    text-align: center;
    margin: 0rem auto 8rem auto;
}

.uniseas__flex {
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 7rem;
    margin-top: -8rem;
}

@media(min-width: 950px) {
    .uniseas__flex {
        display: flex;
    }
}

.uniseas__divimg {
    width: 50%;
    height: 80rem;
    position: relative;
}

.uniseas__img {
    width: 60%;
    position: absolute;
    bottom: 10%;
    left: 15%;
}

.uniseas__txt {
    padding: 5rem;
}

.uniseas__txt--titulo {
    font-size: 6rem;
    color: #008006;
    font-family: var(--fuente4);
    font-weight: 600;
    margin-bottom: 2rem;
}

.uniseas__txt--info {
    font-family: var(--fuente2);
    font-size: 1.9rem;
    margin-bottom: 3rem;
}

.uniseas__txt--requisito {
    width: 80%;
    background-color: #eeeeee;
    border-radius: 0.5rem;
    font-size: 1.8rem;
    font-family: var(--fuente2);
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.uniseas__divbotones {
    margin-top: 4rem;
}

.uniseas__txt--boton {
    font-size: 1.8rem;
    font-family: var(--fuente2);
    background-color: #004974;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    color: var(--blanco);
    text-decoration: none;
    margin-right: 0.7rem;
    margin-top: 1rem;
}

.correo {
    min-width: 4.8rem;
    max-width: 4.8rem;
}

.ig {
    min-width: 25rem;
    max-width: 25rem;
}

.mg {
    min-width: 25rem;
    max-width: 25rem;
}

.wp {
    min-width: 4.8rem;
    max-width: 4.8rem;
}

.uniseas__icono {
    margin-right: 1rem;
}

@media (max-width: 720px) {

    .uniseas__txt--titulo {
        font-size: 5rem;
    }


    .uniseas__divbotones {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .uniseas__txt--boton {
        width: 60%;
    }

}

/*IGNORAAAR*/

.textooos {
    text-align: center;
    margin: 0 auto;
    padding: 10rem 5rem;
}

.graciaaas {
    font-family: var(--fuente2);
    font-size: 4rem;
    color: #e94cc7;
    font-weight: bold;
}

.titulooo {
    font-family: var(--fuente1);
    font-size: 4rem;
    color: #0764EE;
    font-weight: bold;
}

.experienciaaas {
    font-family: var(--fuente2);
    font-size: 2rem;
    margin: 2rem auto;

}

.coloniaa {
    font-family: var(--fuente2);
    font-size: 2rem;
    margin: 3rem auto 1rem auto;
}


/*Footer*/

.footer {
    background-color: #1d1d1d;
    height: 75vh;
    width: 100%;
    position: relative;
    margin-top: 0rem;
}

.footer__logo {
    width: 21%;
}

.footer__ayudamigoslogo {
    width: 20%;
    margin: 6% 2% 12% 227%;
}

.footer__titulo {
    font-size: 2.5rem;
    color: var(--blanco);
    font-family: var(--fuente1);
    text-transform: uppercase;
    font-weight: 700;
    position: absolute;
    top: 18%;
    left: 44%;
}

@media(min-width: 0px) and (max-width: 450px) {
    .footer {
        height: 70rem;
    }

    .footer__logo {
        width: 21%;
    }

    .footer__ayudamigoslogo {
        position: absolute;
        width: 13%;
        margin: 6% 2% 15% 42%;
    }

    .footer__titulo {
        font-size: 2.5rem;
        top: 13%;
        left: 30%;
    }
}

@media(min-width: 450px) and (max-width: 720px) {

    .footer {
        height: 73vh;
    }

    .footer__logo {
        width: 2%;
    }

    .footer__ayudamigoslogo {
        position: absolute;
        width: 10%;
        margin: 6% 2% 15% 42%;
    }

    .footer__titulo {
        font-size: 2.5rem;
        top: 18%;
        left: 30%;
    }
}

@media(min-width: 720px) and (max-width: 1020px) {

    .footer {
        height: 65vh;
    }

    .footer__logo {
        width: 2%;
    }

    .footer__ayudamigoslogo {
        position: absolute;
        width: 8%;
        margin: 6% 2% 15% 42%;
    }

    .footer__titulo {
        font-size: 2.5rem;
        top: 27%;
        left: 36%;
    }
}

/*Boton para ir al top de la página*/

.footer__irarriba {
    display: flex;
    position: absolute;
    right: 13%;
    top: 10.5%;
}

.ir-arriba {
    color: var(--blanco);
    font-size: 1.9rem;
    text-transform: uppercase;
    font-family: var(--fuente1);
    background-color: rgb(0, 170, 0);
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

.fa-circle-up {
    /*Icono hacia arriba*/
    margin-left: 0.5rem;
}

/*Footer Línea*/

.footer__linea {
    width: 85%;
    border-color: #4b4b4b;
    margin: 3rem auto 1rem auto;
}

/*Footer secciones*/

.footer__secciones {
    /*Div secciones del footer*/
    display: flex;
    margin: 5% auto 5% 13%;
}

.footer__secciones--seccion {
    margin-left: 10%;
}

.footer__seccionestitulo {
    /*Título de cada sección*/
    color: var(--blanco);
    font-family: var(--fuente2);
    font-size: 1.8rem;
}

.footer__opciones>li {
    /*Opciones de la sección*/
    list-style: none;
    margin-top: 1.5rem;
}

.footer__opciones>li>a {
    /*Diseño de link en opciones*/
    color: #b3b3b3;
    font-weight: 300;
    text-decoration: none;
    font-family: var(--fuente4);
    font-size: 1.4rem;
    margin-left: 0rem;
}

.footer__opciones>li>a:hover {
    color: #cfcfcf;
    transition: all .3s;
}


.footer__opciones>p {
    color: #b3b3b3;
    font-weight: 300;
    text-decoration: none;
    font-family: var(--fuente4);
    font-size: 1.4rem;
    margin-left: 0rem;
    margin-top: 1.5rem;
}

@media(min-width: 0px) and (max-width: 450px) {
    .footer__secciones {
        /*Div secciones del footer*/
        display: block;
        margin: 36% auto 2% 10%;
    }

    .footer__secciones--seccion {
        margin-left: 0%;
        margin-top: 2rem;
    }
}

@media(min-width: 450px) and (max-width: 720px) {
    .footer__secciones {
        /*Div secciones del footer*/
        margin: 26% auto 2% auto;
        align-items: center;
        justify-content: center;
    }

    .footer__secciones--seccion {
        margin-left: 5%;
    }

    #footer__ultseccion {
        margin-top: -3rem;
    }
}

@media(min-width: 720px) and (max-width: 1020px) {
    .footer__secciones {
        /*Div secciones del footer*/
        margin: 23% auto 2% auto;
        align-items: center;
        justify-content: center;
    }

    .footer__secciones--seccion {
        margin-left: 5%;
    }

    #footer__ultseccion {
        margin-top: -3rem;
    }
}

/*Sección Redes sociales footer*/

.footer__redesociales {
    position: absolute;
    top: 50%;
    width: 30rem;
    right: 10rem;
}

.redeslogo {
    width: 3rem;
    margin-right: 2rem;
}

@media(min-width: 0px) and (max-width: 450px) {
    .footer__redesociales {
        position: absolute;
        top: 88%;
        width: 15rem;
        left: 30%;
    }

    .redeslogo {
        width: 4rem;
        margin-right: 2rem;
    }
}

@media(min-width: 450px) and (max-width: 720px) {
    .footer__redesociales {
        position: absolute;
        top: 84%;
        width: 15rem;
        left: 38%;
    }

    .redeslogo {
        width: 4rem;
        margin-right: 2rem;
    }
}

@media(min-width: 720px) and (max-width: 1020px) {
    .footer__redesociales {
        position: absolute;
        top: 70%;
        width: 15rem;
        left: 67%;
    }

    .redeslogo {
        width: 2.6rem;
        margin-right: 2rem;
    }
}

/* Post footer */

.post__foter {
    background: #0a0a0a;
    color: var(--blanco);
    text-align: center;
    padding: 0.6rem;
    font-family: var(--fuente2);
}

.post__footer--nm {
    /*Texto de post footer*/
    font-family: var(--fuente1);
    text-transform: uppercase;
    font-weight: 600;
}