@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
  --color-principal: #fe64c2;
  --color-secundario: #f353b6
;
  --color-separador: #f33bac;
;
}
  


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
    scroll-behavior: smooth;
}

 

body {
	font-family: "Lexend";
	display: flex;
	flex-direction: column;
}

.label {
  font-weight: bold; /* Negritas */
}
 

.HOLDERNAV {
 
	background-color: black;
	width: 100%;
	background-color: #ffffff;
	height: 90px;

}

.HOLDERNAV {
     position: relative; /* o absolute según tu diseño */
     z-index: 2;          /* nivel inferior */
}

.holderSecciones{
    position: absolute;
         
    z-index: 10;
    width: 100%;
}

.HOLDERNAV .HOLDER {
	padding-left: 30px;
	padding-right: 30px;
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	height: 100%;
	justify-content: space-between;
}

.HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder{
    cursor: pointer;
    background-color: white;
    border: none;
    width: 200px;
	height: 50px;
}

.HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder img{
    width: 200px;
	height: 50px;
}

.HOLDERNAV .HOLDER li {
	list-style-type: none;
	display: inline-block;

}

.HOLDERNAV .HOLDER li a {
	font-size: 20px;
	font-weight: bold;
	margin-right: 30px;
	color: rgb(0, 0, 0);
	margin-top: 20px;
}




.HOLDERNAV .HOLDER .donaciones {
	font-size: 20px;
	font-weight: bold;
	margin-right: 30px;
	color: white;
	/* color del texto */
	background-color: var(--color-principal);
	/* color de fondo del botón */
	border: none;
	/* quita el borde */
	outline: none;
	/* quita el delineado al hacer click */
	border-radius: 6px;
	/* redondea las esquinas */
	padding: 10px 20px;
	/* espacio interno */
	cursor: pointer;
	/* cambia el cursor al de mano */
	font-family: "Lexend";
}

    .HOLDERNAV .HOLDER ul{
        display: flex;
        align-items: center;
    }

.HOLDERNAV .HOLDER .admin {
    background-color: #000000;
	 
	/* hace que el contenido se centre */
    display: flex;
	align-items: center;
	justify-content: center;
	 
	font-size: 20px;
	font-weight: bold;
	margin-right: 21.5px;
	background-color: #000000;
	border: none;
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	font-family: "Lexend";
    width: 45px;
    height: 45px;
 
}




.HOLDERNAV .HOLDER .admin img {
    background-color: #000000;
	width: 21px;
	height: 23px;
}

.HOLDERNAV .HOLDER .menu {
    background-color: white;
	margin-left: 0px;

	align-items: center;
	justify-content: center;
	display: none;
	font-size: 20px;
	font-weight: bold;
	margin-right: 13px;
	border: none;
	outline: none;
	border-radius: 6px;
	cursor: pointer;
	font-family: "Lexend";

	padding: 7px 11px;
}


.HOLDERNAV .HOLDER .menu img {
	align-self: center;
	justify-self: center;
	width: 28px;
	height: 28px;
}

.holderSecciones{
    padding-top: 5px;
    padding-bottom: 5px;
    gap: 5px;
    background-color: var(--color-secundario);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.holderSecciones li{ 
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    width: 99.5%;
    height: 30px;
    background-color: var(--color-principal);
    color: white;
    list-style: none;
}

.holderSecciones .botonAdmin{
    width: 100%;
    height: 100%;
    background-color: var(--color-secundario);
    color: white;
    font-family: "Lexend";
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    border: none;
}

.holderSecciones .botonDonaciones{
    width: 100%;
    height: 100%;
    background-color: var(--color-secundario);
    color: white;
    font-family: "Lexend";
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    border: none;
    background-color: var(--color-principal);
}

.holderSecciones .botonMision, .holderSecciones .botonVision, .holderSecciones .botonServicios, .holderSecciones .botonAdoptar{
    width: 100%;
    height: 100%;
    background-color: var(--color-principal);
    color: white;
    font-family: "Lexend";
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    border: none;
}

 

.holderSecciones li a{
    align-self: center;
    width: bold;
    color: white;
    font-family: "Lexend";
    font-weight: bold;
}


.redesHolder {
	gap: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 30px;
	padding-right: 60px;

	height: 50px;
	background-color: var(--color-principal);
}

.redesHolder .holderRedes {
	display: flex;
	gap: 20px;
}

.redesHolder button {
    
	display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	background-color: var(--color-principal);
	border: none;
	outline: none;
    

	width: 26px;
	height: 26px;
}

.redesHolder img {
	display: flex;
	width: 26px;
	height: 26px;
}

.redesHolder h2 {
	color: white;
	font-size: 20px;
}
/* */
.mision{
    background: linear-gradient(to bottom, #ffffff, #e9e9e9);
    width: 100%;
    /* position: absolute; */
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    z-index: 1;
    padding-left: 30px;
    height: 760px;

    scroll-margin-top: 210px;  
}

.mision .info{
    top: 200px;
    left: 30px;
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    text-align: left;
    width: 45.6%;
}

.mision img{
    margin-left: auto;
    width: 1000px;
    height: 100%;
}

.mision h1{
    color: var(--color-principal);
    font-size: 60px;
}

.mision p{
    padding-right: 30px;
    font-size: 30px;
}

.vision{
    background: linear-gradient(to bottom, #ffffff, #e9e9e9);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: right;
    width: 100%;
    height: 674px;
    padding-right: 30px;
    gap: 230px;
    scroll-margin-top: 60px;  
}

 

.vision .info{
 
    width: 100%;
}

.vision h1{
 
    color: var(--color-principal);
    font-size: 60px;
}

.vision p{
 
    font-size: 30px;
}

.vision img{
 
    display: flex;
     
    width: 1260px;
    height: 100%;
}

.estadisticas{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 30px;
    display: flex;
   
    align-items: flex-start;
    justify-items: center;
    justify-content: center;

    background-color: #F1F1F1;
 
    gap: 24%;
    width: 100%;
    height: 270px;
}


.estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
    height: 150px;
 
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    width: 300px;
}
 


.estadisticas img{
    width: 60px;
    height: 60px;
}

.estadisticas h1{
    font-size: 60px;
}

.estadisticas p{
    font-size: 30px;
}

 
.servicios{
    padding-top: 70px;
    display: flex;
   
    flex-direction: column;
    justify-items: center;
  
    align-items: center;

    background-color: #ffffff;
     
 
    gap: 30px;
    width: 100%;
    height: 1770px;

    scroll-margin-top: -1000px;  
    
}

.servicios .imagenServicios{
    margin-top: 60px;
    width: 1550px;
    height: 850px;
    border-radius: 10px;
}


 

.servicios h1{
    color: var(--color-principal);
    font-size: 60px;
}

.servicios p{
    font-size: 25px;
}


.servicios .HolderServicios{
    display: flex;
    flex-direction: row;
 
    gap: 50px;
    text-align: center;
    justify-content: center;
  
}
 .servicios .HolderServicios div{
    /* outline: 4px solid #C270D7; */
    box-shadow: 0px 6px 15px #a5a5a5;
     
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    width: 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding-top: 80px;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
 
}

.footer{
    background-color: var(--color-principal);
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 30px;

    gap: 30px;
    height: 430px;
}

.footer .HolderLogoYredes{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}


.footer .HolderRedesFooter{
    display: flex;
    gap: 30px;
}

.footer .LogoFooter{
    width: 210px;
}

.footer .FbButtonFooter, .footer .InstaButtonFooter, .footer .TkButtonFooter{
    border: none;
    background-color: var(--color-principal);
    width: 26px;
    height: 26px;
}

.footer .FbFooter, .footer .InstaFooter, .footer .TkFooter{
    width: 100%;
    height: 100;
}

.footer .HolderEnlaceContactoRedes{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
     
}

.footer .HolderEnlaceContactoRedes div h2{
    color: #ffffff;
    margin-bottom: 10px;
}


.footer .HolderEnlaceContactoRedes div{
    display: flex;
    flex-direction: column;
    gap: 10px;
    
    width: 20%;
  
    height: auto;
}

 
.footer h2{
    width: 100%;
    font-size: 26px;
}



.footer .HolderEnlaceContactoRedes .Contacto h2{
    text-align: center;
}

.footer .HolderEnlaceContactoRedes .Redes{

    text-align: right;
}

.footer li{
    width: 100%;
 
    list-style-type: none;
}



.footer li a{

    font-size: 20px;
    color: #ffffff;
    text-decoration: none;
     
}

.footer p{
    text-align: center;
    width: 100%;
    font-size: 20px;
    color: #ffffff;
}

.footer .separador{
    align-self: center;
    width: 100%;
    background-color: var(--color-secundario);
     
    height: 4px;
}

.footer .Copyright{
    margin-bottom: 10px;
}

.footer .FbButtonFooter{
    cursor: pointer;
}

.footer .InstaButtonFooter{
    cursor: pointer;
}

.footer .TkButtonFooter{
    cursor: pointer;
}

.HolderDineroYenEspecie{
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    gap: 30px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 650px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.DonaDinero{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    width: 50%;
    height: 100%;
    gap: 10px;

    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;

    box-shadow: 0px 6px 15px #a5a5a5;
    border-radius: 10px;
}

.DonaEnEspecie{
    display: flex;
    flex-direction: column;
    background-color: var(--color-principal);
    width: 50%;
    height: 100%;
    gap: 10px;

    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;

    box-shadow: 0px 6px 15px #a5a5a5;
    border-radius: 10px;
}

.DonaDinero .HolderTarjeta{
    background-color: #ebeaea;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
     
    width: 100%;
    height: 30%;

    display: flex;
    flex-direction: column;
   
    justify-content: center;
    gap: 20px;
 
     
   
    padding-bottom: 20px;
    /*box-shadow: 0px 6px 15px #a5a5a5; */
    /* outline: 1.5px solid black; */
    border-radius: 7px;
}
 

.DonaDinero h2{
    font-size: 35px;
}

.DonaEnEspecie ul{
    background-color: var(--color-secundario);
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    width: 100%;
    height: 65%;

    display: flex;
    flex-direction: column;
   
    justify-content: center;
    gap: 20px;
 
     
   
    padding-bottom: 20px;
    /*box-shadow: 0px 6px 15px #a5a5a5; */
    /* outline: 1.5px solid black; */
    border-radius: 5px;
}

.DonaEnEspecie h2{
    color: white;
    font-size: 35px;
}

.DonaEnEspecie li{
  
    color: white;
    margin-left: 25px;
    font-size: 25px;
}

.DonaDinero .DonaDineroP{
    font-size: 25px;
}

.DonaDinero .HolderTarjeta p{
    font-size: 25px;
}

.DonaEnEspecie p{
    color: white;
    font-size: 25px;
}
 

/*

.HOLDERNAV .HOLDER li a {
	font-size: 20px;
	font-weight: 700;
	margin-right: 30px;
	color: rgb(0, 0, 0);
	margin-top: 20px;
}

.redesHolder img {
	display: flex;
	width: 26px;
	height: 26px;
}

.servicios .HolderServicios div{
    width: 400px;
    height: 600px;
    gap: 30px;
    padding-top: 80px;
    border-radius: 10px;
    padding-left: 50px;
    padding-right: 50px;
}

*/

.servicios .HolderServicios div img{
    border-radius: 10px;
    position: absolute;
    z-index: 10;
    width: 110px;
    top: -55px;
    align-self: center;
     
}

.servicios .HolderServicios h2{
    padding-left: 30px;
    padding-right: 30px;
 
    font-size: 35px;
}

 
.collage{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 400px;
}

.collage img{
    width: 33.3%;
    height: 500px;
}

.adopcion{
    background: linear-gradient(to bottom, #ffffff, #e9e9e9);
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.adopcion img{
    width: 100%;
}

.adopcion p{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 35px;
    width: 100%;
    height: 200px;
    font-size: 35px;
    font-weight: bold;
}

.adoptar{
   
    /*background-color: #ff0000; */
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 550px;
    /* height: 350px; */
}

.adoptar .gatos{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* background-color: aqua; */
    width: 50%;
    height: 100%;
}

.adoptar .gatos .imagenGato{
    position: absolute;
    top: 90px;
    z-index: 2;
    width: auto;
    height: 75%;
    object-fit: contain; /* se ajusta dentro del espacio */
}

 



.adoptar .perros{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    /*background-color: aqua; */
    width: 50%;
    height: 100%;
}

.adoptar .perros .imagenPerro{
    position: absolute;
    top: 90px;
    z-index: 2;
  
    width: auto;  
    height: 75%;  
    object-fit: contain; /* se ajusta dentro del espacio */
}

.adoptar h2{
    font-size: 35px;
    color: var(--color-principal);
    padding-left: 260px;
    padding-right: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 120px;
    width: 100%;
}
 

.adoptar .AdoptarGato{
    position: relative;
    top: 60%;
    z-index: 10;
    width: 40%;
    height: 80px;
    object-fit: contain;
    outline: none;
    box-shadow: none;

    background-color: var(--color-principal);
    border-radius: 10px;
    font-size: 35px;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: "Lexend";
    font-weight: bold;
     
}

.adoptar .AdoptarPerro{
    position: relative;
    top: 60%;
    z-index: 10;
    width: 40%;
    height: 80px;
    outline: none;
    box-shadow: none;

    background-color: var(--color-principal);
    border-radius: 10px;
    font-size: 35px;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: "Lexend";
    font-weight: bold;
}

.HolderDonaciones{
    margin-top: 30px;
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
}

.HolderDonaciones .DonacionesLanding{
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.HolderDonaciones .DonacionesLanding h1{
    color: var(--color-principal);
    font-size: 60px;
    position: relative;
    top: 15%;
}

.HolderDonaciones .DonacionesLanding p{
    color: black;
    position: relative;
    top: 15%;
    font-size: 35px;
}

.HolderDonaciones img{
    width: 50%;
    height: auto;
}

.HolderTextoMascota{

    text-align: center;
    margin-top: 65px;
    width: 100%;
    height: 100%;
    padding-left: 35px;
    padding-right: 35px;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.HolderTextoMascota h2{
    color: var(--color-principal);
    font-size: 30px;
}

.HolderTextoMascota p{
    font-size: 25px;
    font-weight: 500;
}

.HolderMascotas{
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
   
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 

    background-color: rgb(255, 255, 255);
    gap: 20px;
}

.HolderMascotas button{
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
	background-color: var(--color-principal);
	border: none;
	outline: none;
 
    

	width: 100%;
	height: 40px;
    border-radius: 5px;
    font-family: "Lexend";
    font-size: 20px;
    color: white;
    font-weight: bold;
}



.MascotaDiv{
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
 
    gap: 10px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    height: 100%;
    box-shadow: 0px 6px 15px #bbbbbb;
    border-radius: 8px;
}

.MascotaDiv .NombreMascota{
    color: var(--color-principal);
    font-weight: bold;
}
 

.MascotaDiv p{
    font-size: 20px;
}
 

.MascotaDiv .DescripcionMascota {
  background-color: #ffffff;
  max-height: 125px;
  overflow-y: auto;
  /*box-shadow: inset 0px 0px 10px #bbbbbb; */
  /* Firefox */
  scrollbar-width: thin; /* auto | thin | none */
  scrollbar-color: #cacaca #f1f1f1; /* thumb | track */
 
  border-radius: 5px;
}

/* WebKit (Chrome, Edge, Safari, Opera) */
.MascotaDiv .DescripcionMascota::-webkit-scrollbar {
  width: 8px; /* grosor */
}

.MascotaDiv .DescripcionMascota::-webkit-scrollbar-track {
  background: #f1f1f1; /* color de fondo */
  border-radius: 10px;
}

.MascotaDiv .DescripcionMascota::-webkit-scrollbar-thumb {
  background: #cacaca; /* color de la barra */
  border-radius: 10px;
}

.MascotaDiv .DescripcionMascota::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3; /* hover más oscuro */
}



.HolderMascotas img{
    border-radius: 4px;
    width: 100%;
}

.HolderTarjetaMascota{
    padding-right: 30px;
    padding-top: 30px;
    padding-left: 30px;
    padding-top: 30px;
    margin-top: 50px;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    gap: 20px;
}

.HolderTarjetaMascota .ImagenEinfo{
    gap: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
   
    height: auto;
    
}



.HolderTarjetaMascota img{
    width: 45%;
    height: 100%;
     
    
}

.HolderTarjetaMascota .HolderInfoMascota{
    display: flex;
    flex-direction: column;
    width: 100%;
 

    gap: 10px;
}

 
.HolderTarjetaMascota .negrita{
    font-weight: 700;
}

.HolderTarjetaMascota .NombreMascota{
    width: 100%;
    margin-top: -10px;
    color: var(--color-principal);
    font-size: 35px;
}

 
.HolderTarjetaMascota p{
    width: 100%;
    font-size: 25px;

    max-height: 257px;
    overflow-y: auto;
    /*box-shadow: inset 0px 0px 10px #bbbbbb; */
    /* Firefox */
    scrollbar-width: thin; /* auto | thin | none */
    scrollbar-color: #cacaca #f1f1f1; /* thumb | track */
}

.PersonalidadMascota, .HistoriaMascota{
    font-weight: 700;
}
 

.botonMeInteresa{
    width: 100%;
}

.botonMeInteresa button{
    width: 100%;
    height: 55px;
    background-color: var(--color-principal);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-family: "Lexend";
    font-size: 25px;
    font-weight: 700;
}

.RequisitosHolder{
    margin-top: 20px;
    background-color: #EEEEEE;
    width: 100%;
    display: none;
    flex-direction: column;
    
    gap: 10px;
    padding-left: 30px;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
}

.RequisitosHolder p{
    width: 100%;
    font-size: 25px;
}

.RequisitosHolder h2{
    width: 100%;
    font-size: 25px;
}

.RequisitosHolder .negrita{
    font-weight: 700;
}

 

 
 


 

@media (max-width: 1600px) {
 
    .mision{
      
        height: 600px;
    }
    .mision h1{
         
        color: var(--color-principal);
        font-size: 55px;
    }

    
    .vision{
        height: 600px;
        scroll-margin-top: 90px;
    }

    .servicios{
        scroll-margin-top: -900px;
    }

 
    .vision h1{
        color: var(--color-principal);
        font-size: 55px;
    }

 

    .mision p{
        font-size: 27px;
    }


    .estadisticas{
        gap: 20%;
        height: 260px;
    }

    .estadisticas h1{
        font-size: 55px;
    }

    .estadisticas p{
        font-size: 27px;
    }

    

    .vision p{
        font-size: 27px;
    }

    .mision img{
        margin-left: auto;
        width: 800px;
        height: 100%;
    }

    .collage{
        height: 300px;
    }

    .collage img{
        height: 300px;
    }

    .servicios .imagenServicios{
        width: 95%;
        height: 730px;
    }

    .servicios h1{
        font-size: 55px;
    }

    .servicios{
        padding-top: 70px;
        height: 1570px;
    }

    .servicios .imagenServicios{
        margin-top: 60px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 32px;
    }

    .DonaDinero h2{
        font-size: 32px;
    }

    .DonaEnEspecie h2{
        font-size: 32px;
    }


    .servicios p{
        font-size: 25px;
    }

    .DonaEnEspecie li{
        color: white;
        margin-left: 20px;
        font-size: 25px;
    }

    .DonaDinero .DonaDineroP{
        font-size: 25px;
    }

    .DonaDinero .HolderTarjeta p{
        font-size: 25px;
    }

    .DonaEnEspecie p{
        color: white;
        font-size: 25px;
    }

    .adopcion p{
        font-size: 27px;
        font-weight: bold;
        height: 200px;
    }

    .servicios .HolderServicios{
         gap: 20px;
    }

    .servicios .HolderServicios div{
        
        position: relative;
        z-index: 1;
        background-color: #ffffff;
        width: 350px;
        height: 600px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding-top: 80px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .adoptar h2{
        padding-left: 170px;
        padding-right: 170px;
        font-size: 32px;
    }

    .adoptar .gatos .imagenGato, .adoptar .perros .imagenPerro{
        position: absolute;
        top: 90px;
        z-index: 2;
        width: auto;
        height: 70%;
        object-fit: contain; /* se ajusta dentro del espacio */
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        width: 50%;
        font-size: 32px;
        height: 65px;
        top: 50%;
    }

    .adoptar{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 450px;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 55px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 27px;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -10px;
        color: var(--color-principal);
        font-size: 32px;
    }

 

    .HolderTarjetaMascota p{
        font-size: 23px;
    }

    .HolderTarjetaMascota p{
        max-height: 123px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 55px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 23px;
        font-weight: 700;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -9px;
        color: var(--color-principal);
        font-size: 35px;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 23px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 23px;
    }


}

@media (max-width: 1160px) { 
 
 

    .HOLDERNAV .HOLDER ul{
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    .HOLDERNAV .HOLDER .admin {
	    /* hace que el contenido se centre */
        display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 20px;
	    font-weight: bold;
	    margin-right: 23px;
	    background-color: #000000;
	    border: none;
	    outline: none;
	    border-radius: 6px;
	    cursor: pointer;
	    font-family: "Lexend";

        width: 40px;
        height: 40px;
 
    }
    
     

    .redesHolder {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30px;
		padding-right: 60px;

		height:35px;
	}

    .redesHolder img{
        width: 20px;
        height: 20px;
    }

 

    .HOLDERNAV .HOLDER li {
        margin-top: 0px;
        padding-top: 0px;
         
    	list-style-type: none;
    	display: inline-block;

    }

    .HOLDERNAV .HOLDER li a {
		font-weight: bold;
		margin-right: 30px;
		color: rgb(0, 0, 0);
		margin-top: 20px;
	}
 


    .HOLDERNAV .HOLDER {
        align-items: center;
 
	    gap: 0px;
 
    }

    .HOLDERNAV {
	    height: 60px;
    }
 

    .HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder{
        margin-top: 4px;
	    width: 100px;
	    height: 25px;
    }

    .HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder img{
	    width: 100px;
	    height: 25px;
    }

    .HOLDERNAV .HOLDER li a {
	    font-size: 15px;
 
    }

    .redesHolder h2 {
	    font-size: 15px;
    }


    .HOLDERNAV .HOLDER .donaciones {
    	font-size: 15px;
    }

    
    .mision{
        margin-top: 0px;
    }

    .mision h1{
        font-size: 45px;
    }

 

    .vision{
        gap: 30px;
        scroll-margin-top: 140px;
    }

    .vision .infoVision{
        margin-top: 0px;
    } 

    .vision h1{
        color: var(--color-principal);
        font-size: 45px;
    }

    .mision p{
        font-size: 22px;
    }

    .vision p{
        font-size: 22px;
    }

    .adopcion p{
        font-size: 22px;
        font-weight: bold;
        height: 150px;
    }

    .estadisticas{
        gap: 16%;
        height: 230px;
    }

    .estadisticas h1{
        font-size: 45px;
    }

    .estadisticas p{
        font-size: 22px;
    }

            
    
    .mision .info{
    
        top: 123px;
        left: 30px;
        position: absolute;
        z-index: 10;
        display: flex;
        flex-direction: column;
        
        text-align: left;
        width: 49%;
    }

    .mision img{
        margin-left: auto;
        width: 650px;
        height: 100%;
    }

    .mision{
        height: 500px;
    }

    .vision{
        height: 500px;
    }

    .collage{
        height: 200px;
    }

    .collage img{
        height: 200px;
    }

    .servicios .imagenServicios{
        width: 95%;
        height: 530px;
    }

    .servicios h1{
        font-size: 45px;
    }

    .servicios{
        height: 1350px;
        padding-top: 60px;
        scroll-margin-top: -590px;
    }

    

    .servicios .imagenServicios{
        margin-top: 40px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 28px;
    }

    .DonaDinero h2{
        font-size: 28px;
    }

    .DonaEnEspecie h2{
        font-size: 28px;
    }

    .servicios p{
        font-size: 20px;
    }

    .DonaEnEspecie li{
        color: white;
        margin-left: 20px;
        font-size: 20px;
    }

    .DonaDinero .DonaDineroP{
        font-size: 20px;
    }

    .DonaDinero .HolderTarjeta p{
        font-size: 20px;
    }

    .DonaEnEspecie p{
        color: white;
        font-size: 20px;
    }

    .servicios .HolderServicios div{
        
        position: relative;
        z-index: 1;
        background-color: #ffffff;
        width: 300px;
        height: 500px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 80px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .adoptar h2{
        font-size: 28px;
    }
 

    .adoptar{
   
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 400px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        width: 60%;
        font-size: 28px;
        height: 60px;
    }

    
    .footer{
        background-color: var(--color-principal);
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 30px;

        gap: 20px;
        height: 340px;
    }

    .footer .HolderEnlaceContactoRedes div{
        display: flex;
        flex-direction: column;
        gap: 10px;
    
        width: 33%;
  
        height: auto;
    }

    .footer h2{
        width: 100%;
        font-size: 22px;
    }

    .footer .LogoFooter{
        width: 180px;
    }

    .footer .FbButtonFooter, .footer .InstaButtonFooter, .footer .TkButtonFooter{
        border: none;
        background-color: var(--color-principal);
        width: 22px;
        height: 22px;
    }

    .footer li a{
   
        font-size: 15px;;
        color: #ffffff;
        text-decoration: none;
     
    }

    .footer p{
        text-align: center;
        width: 100%;
        font-size: 15px;;
        color: #ffffff;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 45px;
        position: relative;
        top: 10%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 10%;
        font-size: 22px;
    }

    .HolderMascotas button{
        display: flex;
        align-items: center;
        justify-content: center;
	    cursor: pointer;
	    background-color: var(--color-principal);
	    border: none;
	    outline: none;
 
    

	    width: 100%;
	    height: 40px;
        border-radius: 5px;
        font-family: "Lexend";
        font-size: 17px;
        color: white;
        font-weight: bold;
    }

    .MascotaDiv p{
        font-size: 17px;
    }

    .HolderMascotas{
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
   
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 

        background-color: rgb(255, 255, 255);
        gap: 20px;
    }
 

    .HolderTextoMascota p{
        font-size: 22px;
        font-weight: 500;
    }

    .HolderTextoMascota h2{
        color: var(--color-principal);
        font-size: 28px;
    }

    .HolderTarjetaMascota{
        padding-right: 30px;
        padding-left: 30px;
        padding-top: 30px;
        margin-top: 35px;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        gap: 20px;
    }


    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -8px;
        color: var(--color-principal);
        font-size: 28px;
    }

    .HolderTarjetaMascota p{
        font-size: 20px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 45px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 20px;
        font-weight: 700;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 20px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 20px;
    }

    


}

@media (max-width: 1040px) {
    
    .servicios .HolderServicios div{
        
        position: relative;
        z-index: 1;
        background-color: #ffffff;
        width: 230px;
        height: 540px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-top: 80px;
        border-radius: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .servicios .HolderServicios h2{
        width: 100%;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .adoptar h2{
        padding-left: 90px;
        padding-right: 90px;
    }

    .HolderTarjetaMascota p{
        max-height: 75px;
        overflow-y: auto;
 
        scrollbar-width: thin; 
        scrollbar-color: #cacaca #f1f1f1; 
    }

 
}

@media (max-width: 950px) {
    .mision{
        height: 480px;
    }

    .vision{
        height: 400px;
    }

    .mision .info{
        top: 85px;
        left: 30px;
        position: absolute;
        z-index: 10;
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        text-align: left;
        width: 43%;
    }

    .mision img{
        margin-left: auto;
        width: 540px;
        height: 100%;
    }

    .estadisticas{
        gap: 12%;
        
    }

    .collage{
    
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: center;
        height: 1500px;
        margin-bottom: 60px;
    }

    .collage img{
       
        border-radius: 10px;
        width: 90%;
        height: 500px;
 
        outline: 4px solid #F1F1F1;
        /* outline: 4px solid #C270D7; */
        /* outline: 4px solid #F1F1F1; */
        /* box-shadow: 0px 6px 15px #a5a5a5; */

    }

    .servicios{
        height: 1280px;
        padding-top: 50px;
        scroll-margin-top: -525px;
    }

    

    

    .servicios .imagenServicios{
        width: 90%;
        height: 470px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        width: 70%;
    }

 
    
}


@media (max-width: 830px) { 
    .mision .info{
        top: 85px;
        width: 60%;
    }

    .redesHolder img{
        width: 20px;
        height: 20px;
    }

    .HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder{
	    width: 100px;
	    height: 25px;
    }

    .HOLDERNAV .HOLDER .logoHolder .ButtonlogoHolder img{
	    width: 100px;
	    height: 25px;
    }


	.HOLDERNAV .HOLDER .admin {
        margin-right: 50px;
        margin-left: 50px;
	}

	.HOLDERNAV .HOLDER li {
        margin-left: 0px;
        margin-right: 0px;
		list-style-type: none;
		display: none;
	}

    .HOLDERNAV .HOLDER li a {
        margin-left: 0px;
        margin-right: 0px;
	 
	}

	.HOLDERNAV .HOLDER .menu {
       
        margin-right: -20px;
 		display: flex;
        align-items: center;
        justify-content: center;        
	}

 


	.HOLDERNAV .HOLDER .menu img {
		width: 22px;
		height: 22px;
	}

    .HOLDERNAV {
        position: relative; /* o absolute según tu diseño */
        z-index: 2;          /* nivel inferior */
    }

    .holderSecciones{
        position: absolute;
         
        z-index: 10;
        width: 100%;
    }

 

    .redesHolder {
		gap: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30px;
		padding-right: 40px;

		height:35px;
	}

    .redesHolder h2 {
	    font-size: 15px;
    }

	.HOLDERNAV {
       
		height: 60px;
	}

    .redesHolder .holderRedes{
        margin-right: -20px;
        gap: 8px;
    }

    .vision{
        height: 300px;
    }

    .estadisticas{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-top: 0px;
        gap: 1px;
    }

    

    .estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
        padding-left: 60px;
        padding-right: 60px;
    }

    .servicios .HolderServicios{
        display: flex;
        flex-direction: column;
 
        gap: 20px;
        text-align: center;
        justify-content: center;
  
    } 

    .servicios{
        height: 1800px;
        padding-top: 25px;
        scroll-margin-top: 0px;
    }
 


    

 

    .servicios .HolderServicios div{
        width: 450px;
        height: 400px;
        display: flex;
        gap: 30px;
        padding-top: 80px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .servicios .imagenServicios{
        width: 90%;
        height: 390px;
    }
 

    .servicios .imagenServicios{
        margin-top: 10px;
    }

    .adoptar h2{
        padding-left: 50px;
        padding-right: 50px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        width: 80%;
    }

    .HolderDonaciones{
        margin-top: 30px;
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: row;
    }

    .HolderDineroYenEspecie{
        
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
        padding-bottom: 30px;
        gap: 30px;
        width: 100%;
        height: 850px;

        display: flex;
        flex-direction: column;
 
    }

    .DonaDinero{
        width: 100%;
        height: 45%;
    }

    .DonaEnEspecie{
        width: 100%;
    }

    .DonaDinero .HolderTarjeta{
        width: 100%;
        height: 50%;
        gap: 10px;
 
    }

 
}

@media (max-width: 820px){

    .HolderTarjetaMascota .HolderInfoMascota{
        gap: 10px;
    }

    .HolderTarjetaMascota .ImagenEinfo{
        gap: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
   
        height: auto;
    
    }

    .HolderTarjetaMascota img{
        width: 100%;
        height: 100%;
    }

}

@media (max-width: 760px) {
     
  

    .estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
        padding-bottom: 180px;
    }

    .adoptar{
   
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 400px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        width: 90%;
        font-size: 28px;
        height: 60px;
        top: 50%;
    }

    .adoptar .gatos .imagenGato, .adoptar .perros .imagenPerro{
        position: absolute;
        top: 90px;
        z-index: 2;
        width: auto;
        height: 70%;
        object-fit: contain; /* se ajusta dentro del espacio */
    }

    .servicios{
        padding-top: 0px;
        height: 1750px;
    }

    .HolderDonaciones{
        margin-top: 30px;
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: row;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 42px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 20px;
    }

   

 
}

@media (max-width: 750px){
 
 
    .HolderTarjetaMascota p{
        max-height: 300px;
        overflow-y: auto;
 
        scrollbar-width: thin; 
        scrollbar-color: #cacaca #f1f1f1; 
    }

}

@media (max-width: 670px){
    .mision .info{
        top: 85px;
        width: 48%;
    }

    .mision h1{
        font-size: 42px;
    }

    .vision h1{
        color: var(--color-principal);
        font-size: 42px;
    }

    .mision p{
        font-size: 20px;
    }

    .vision p{
        font-size: 20px;
    }

    .estadisticas{
        height: 230px;
    }

    .estadisticas h1{
        font-size: 42px;
    }

    .estadisticas p{
        font-size: 20px;
    }

    .adopcion p{
        font-size: 20px;
        font-weight: bold;
        height: 130px;
    }

    .collage{
        height: 1055px;
    }

    .collage img{
        height: 350px;
    }
 
    .servicios .imagenServicios{
        width: 90%;
        height: 340px;
    }

    .servicios h1{
        font-size: 42px;
    }

    .servicios{
        padding-top: 10px;
        height: 1700px;
    }

    

    

    .servicios .imagenServicios{
        margin-top: 0px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 26px;
    }

    .DonaDinero h2{
        font-size: 26px;
    }

    .DonaEnEspecie h2{
        font-size: 26px;
    }

    .servicios p{
        font-size: 20px;
    }

    .estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
        padding-left: 6px;
        padding-right: 6px;
    }

    .adoptar h2{
        font-size: 26px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        font-size: 26px;
    }
    
    .footer{
        background-color: var(--color-principal);
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 22px;
        padding-right: 22px;
        padding-top: 30px;

        gap: 20px;
        height: 330px;
    }

    .footer .LogoFooter{
        width: 140px;
    }

 

    .footer .FbButtonFooter, .footer .InstaButtonFooter, .footer .TkButtonFooter{
        border: none;
        background-color: var(--color-principal);
        width: 22px;
        height: 22px;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 42px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 20px;
    }

    .HolderTextoMascota p{
        font-size: 20px;
        font-weight: 500;
    }

    .HolderTextoMascota h2{
        color: var(--color-principal);
        font-size: 26px;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -8px;
        color: var(--color-principal);
        font-size: 26px;
    }

    .HolderTarjetaMascota p{
        font-size: 20px;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 20px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 20px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 45px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 20px;
        font-weight: 700;
    }



}

@media (max-width: 545px){
    .mision .info{
        top: 85px;
        width: 42%;
    }
    

    .mision h1{
        font-size: 36px;
    }

    .vision h1{
        color: var(--color-principal);
        font-size: 36px;
    }

    .mision p{
        font-size: 18px;
    }

    .vision p{
        font-size: 18px;
    }

    .estadisticas{
        padding-top: 20px;
        height: 190px;
    }

    .estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
        padding-left: 7px;
        padding-right: 7px;
    }

    .estadisticas h1{
        font-size: 36px;
    }

    .estadisticas p{
        font-size: 18px;
    }

    .collage{
        height: 905px;
    }

    .collage img{
        height: 300px;
    }

    .servicios{
        height: 1500px;
        
    }

    .servicios .imagenServicios{
        width: 90%;
        height: 300px;
    }

    .servicios h1{
        font-size: 36px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 25px;
    }

    .DonaDinero h2{
        font-size: 25px;
    }

    .DonaEnEspecie h2{
        font-size: 25px;
    }

    /*
    .HolderDineroYenEspecie{
        
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 10px;
        padding-bottom: 30px;
        gap: 30px;
        width: 100%;
        height: 850px;

        display: flex;
        flex-direction: column;
 
    }

    .DonaDinero{
        width: 100%;
        height: 45%;
    }

    .DonaEnEspecie{
        width: 100%;
    }

    .DonaDinero .HolderTarjeta{
        width: 100%;
        height: 50%;
        gap: 10px;
 
    }

    */

    .DonaDinero {
        height: 50%;
    }

    .DonaDinero .HolderTarjeta{
         height: 30%;
    }
    

    .HolderDineroYenEspecie{
        gap: 30px;
    }

    .DonaEnEspecie {
        width: 100%;
        height: 50%;
    }

    .DonaEnEspecie ul{
        width: 100%;
        height: 65%;
    }


    .servicios p{
        font-size: 18px;
    }

    .DonaEnEspecie li{
        color: white;
        margin-left: 10px;
        font-size: 18px;
    }

    .DonaDinero .DonaDineroP{
        font-size: 18px;
    }

    .DonaDinero .HolderTarjeta p{
        font-size: 18px;
    }

    .DonaEnEspecie p{
        color: white;
        font-size: 18px;
    }

    .adopcion p{
        font-size: 18px;
        font-weight: bold;
        height: 110px;
    }

    
 

    .servicios .HolderServicios div{
        background-color: rgb(255, 255, 255);
        width: 390px;
        height: 355px;
        display: flex;
        gap: 10px;
        padding-top: 65px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .adoptar h2{
        padding-left: 40px;
        padding-right: 40px;
        font-size: 25px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        font-size: 25px;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 36px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 18px;
    }

    .HolderDonaciones .DonacionesLanding{
        padding-left: 30px;
        padding-right: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .HolderTextoMascota p{
        font-size: 18px;
        font-weight: 500;
    }

    .HolderTextoMascota h2{
        color: var(--color-principal);
        font-size: 25px;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -8px;
        color: var(--color-principal);
        font-size: 25px;
    }

    .HolderTarjetaMascota p{
        font-size: 18px;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 18px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 18px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 45px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 18px;
        font-weight: 700;
    }

    
}

@media (max-width: 500px){
 

    .mision h1{
        font-size: 30px;
    }

    .vision h1{
        color: var(--color-principal);
        font-size: 30px;
    }

    .mision p{
        font-size: 16px;
    }

    .vision p{
        font-size: 16px;
    }

    .adopcion p{
        font-size: 16px;
        font-weight: bold;
        height: 105px;
    }

    .estadisticas{
        height: 170px;
        padding-top: 30px;
    }

    

    .estadisticas .rescatados, .estadisticas .voluntarios, .estadisticas .adoptados{
        padding-left: 10px;
        padding-right: 10px;
    }


    .estadisticas h1{
        font-size: 30px;
    }

    .estadisticas p{
        font-size: 16px;
    }

    .servicios{
        height: 1380px;
    }

    

    .servicios .imagenServicios{
        width: 90%;
        height: 235px;
    }

    .servicios h1{
        font-size: 30px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 21px;
    }

    .DonaDinero h2{
        font-size: 21px;
    }

    .DonaEnEspecie h2{
        font-size: 21px;
    }

    .servicios p{
        font-size: 16px;
    }

    .DonaEnEspecie li{
        color: white;
        margin-left: 10px;
        font-size: 16px;
    }

    .DonaDinero .DonaDineroP{
        font-size: 16px;
    }

    .DonaDinero .HolderTarjeta p{
        font-size: 16px;
    }

    .DonaEnEspecie p{
        color: white;
        font-size: 16px;
    }

    .servicios .HolderServicios div{
        background-color: rgb(255, 255, 255);
        width: 350px;
        height: 330px;
        display: flex;
        gap: 10px;
        padding-top: 65px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .adoptar h2{
        font-size: 21px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        font-size: 21px;
    }

    .footer{
        height: 625px;
    }

    .footer .HolderEnlaceContactoRedes{
        gap: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .footer .HolderEnlaceContactoRedes div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .footer .HolderEnlaceContactoRedes .Contacto{
        text-align: left;
    }

    .footer .HolderEnlaceContactoRedes .Contacto h2{
        text-align: left;
    }


    .footer .HolderEnlaceContactoRedes .Contacto p{
        text-align: left;
    }

    .footer .HolderEnlaceContactoRedes .Redes{

        text-align: left;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 30px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 16px;
    }

    .HolderTextoMascota h2{
        color: var(--color-principal);
        font-size: 21px;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -6px;
        color: var(--color-principal);
        font-size: 21px;
    }

    .HolderTarjetaMascota p{
        font-size: 16px;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 16px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 16px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 40px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 16px;
        font-weight: 700;
    }
 

 
}

@media (max-width: 494px){
    .HolderMascotas button{
        display: flex;
        align-items: center;
        justify-content: center;
	    cursor: pointer;
	    background-color: var(--color-principal);
	    border: none;
	    outline: none;
 
    

	    width: 100%;
	    height: 40px;
        border-radius: 5px;
        font-family: "Lexend";
        font-size: 15px;
        color: white;
        font-weight: bold;
    }

    .MascotaDiv p{
        font-size: 15px;
    }

.MascotaDiv{
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
 
    gap: 10px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    height: 100%;
    box-shadow: 0px 6px 15px #bbbbbb;
    border-radius: 8px;
}

     
}

@media (max-width: 430px){
 

    .mision h1{
        font-size: 26px;
    }

    .vision h1{
        color: var(--color-principal);
        font-size: 26px;
    }

    .mision p{
        font-size: 14px;
    }

    .vision p{
        font-size: 14px;
    }

  

    .adopcion p{
        font-size: 14px;
        font-weight: bold;
        height: 90px;
        padding-right: 19.4px;
        padding-left: 19.4px;
    }

 

    .estadisticas{
        padding-left: 0px;
        padding-right: 0px;
        height: 170px;
        padding-top: 40px;
    }

 

  
    .estadisticas h1{
        font-size: 26px;
    }

    .estadisticas p{
        font-size: 14px;
    }

    .collage{
        height: 750px;
    }

    .collage img{
        height: 250px;
    }

    .servicios .imagenServicios{
        width: 90%;
        height: 190px;
    }

    .servicios{
        height: 1150px;
    }

    .servicios h1{
        font-size: 26px;
    }

    .servicios .HolderServicios h2{
        padding-left: 30px;
        padding-right: 30px;
 
        font-size: 21px;
    }

    .DonaDinero h2{
        font-size: 21px;
    }

    .DonaEnEspecie h2{
        font-size: 21px;
    }

    .servicios p{
        font-size: 14px;
    }

    .DonaEnEspecie li{
        color: white;
        margin-left: 10px;
        font-size: 14px;
    }

    .DonaDinero .DonaDineroP{
        font-size: 14px;
    }

    .DonaDinero .HolderTarjeta p{
        font-size: 14px;
    }

    .DonaEnEspecie p{
        color: white;
        font-size: 14px;
    }

    .servicios .HolderServicios div{
        background-color: rgb(255, 255, 255);
        width: 320px;
        height: 270px;
        display: flex;
        gap: 10px;
        padding-top: 35px;
        border-radius: 10px;
        padding-left: 50px;
        padding-right: 50px;
    }

    .servicios .HolderServicios div img{
        border-radius: 10px;
        position: absolute;
        z-index: 10;
        width: 70px;
        top: -50px;
        align-self: center;
    }

    .estadisticas{
        height: 150px;
    }

    .adoptar h2{
        padding-left: 0px;
        padding-right: 0px;
        font-size: 21px;
    }

    .adoptar .AdoptarGato, .adoptar .AdoptarPerro{
        top: 40%;
        font-size: 21px;
    }

    

    .adoptar{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 360px;
    }

    .adoptar .gatos .imagenGato, .adoptar .perros .imagenPerro{
        position: absolute;
        top: 90px;
        z-index: 2;
        width: auto;
        height: 65%;
        object-fit: contain; /* se ajusta dentro del espacio */
    }

    .footer .FbButtonFooter, .footer .InstaButtonFooter, .footer .TkButtonFooter{
        border: none;
        background-color: var(--color-principal);
        width: 20px;
        height: 20px;
    }

    .HolderDonaciones .DonacionesLanding h1{
        color: var(--color-principal);
        font-size: 26px;
        position: relative;
        top: 15%;
    }

    .HolderDonaciones .DonacionesLanding p{
        color: black;
        position: relative;
        top: 15%;
        font-size: 14px;
    }

    .HolderTarjetaMascota .NombreMascota{
        width: 100%;
        margin-top: -6px;
        color: var(--color-principal);
        font-size: 21px;
    }

    .HolderTarjetaMascota p{
        font-size: 14px;
    }

    .RequisitosHolder p{
        width: 100%;
        font-size: 14px;
    }

    .RequisitosHolder h2{
        width: 100%;
        font-size: 14px;
    }

    .botonMeInteresa button{
        width: 100%;
        height: 40px;
        background-color: var(--color-principal);
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-family: "Lexend";
        font-size: 14px;
        font-weight: 700;
    }

 
}



@media (max-width: 370px) {
    .vision{
        gap: 0px;
    }
    
    .redesHolder h2 {
		 
		font-size: 14px;
	}

   

    .holderSecciones li a{
        font-size: 14px ;
    }

    .redesHolder img{
        width: 20px;
        height: 20px;
    }

    .servicios{
        padding-bottom: 0px;
    }
}