body{
   overflow-x: hidden;
}


/* Tipografias y textos */
h1{
   text-align: center;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 1000;
   font-style: normal;
}


h2 {
   text-align: center;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
   padding: 1rem;
}


.anton-regular {
 font-family: "Anton", sans-serif;
 font-weight: 400;
 font-style: normal;
}


p{
   text-align: center;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   line-height: 1.7;
   font-style: normal;
   font-size: 1.1rem;
}


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Montserrat", sans-serif;
   background-color: none;
}


/* Fin de Tipografias y textos */


/* Movil */


/* Navbar*/


header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 2rem;
   padding-right: 2rem;


}


.logo {
   max-width: 6rem;
}


.nav-list {
   list-style-type: none;
   display: flex;
   gap: 2rem;
   padding: 1.3rem;
}


.nav-list li a {
   text-decoration: none;
   color: black;
}


.nav-animales { 
   height: 2.5rem;
   visibility: visible;
}


.nav-busca {
   height: 2.5rem;
   visibility: visible;
}


.nav-adopcion {
   height: 2.5rem;
   visibility: visible;
}
.nav-adopcion2{
   visibility: hidden;
}
.nav-animales2{
   visibility: hidden;
}


.nav-busca2{
   visibility: hidden;
}


.abrir-menu,
.cerrar-menu{
   display: none;
}


.desplegable-animales {visibility: hidden;}
/* Fin de Navbar*/


/* Contenido Index Movil */


.titulo {
   font-family: "Anton", sans-serif;
   font-weight: 100;
   font-size: 5rem;
   font-style: normal;
   padding-left: 2rem;
   padding-right: 2rem;
   line-height: 5rem;
   text-align: left;
   color: #7ac6be;
}


.inicio {
   display: flex;
   flex-direction: column;
}


.texto {
   padding: 2.5rem;
   text-align: left;
   font-size: 1.1rem;
}


.texto2 {
   display: none;
   padding: 1.5rem;
   text-align: left;
   font-size: 0.9rem;
}


.animales {
   width: 137.5%;       
   max-width: 100rem;  
   height: auto;      
   object-fit: cover;
   display: block;
   position: relative;
   top: 5px;
   z-index: -1;
}

.eslogan h2{
   font-size: 5rem;
}

.eslogan {
   padding: 2rem;
   font-family: "Anton", sans-serif;
   text-align: center;          
   background-color: #7ac6be;      
   color: white;
   line-height: 5rem;
   z-index: 2;
   padding: 2rem;
}

.eslogan2 {
   font-family: "Montserrat", sans-serif;
   font-style: normal;
   font-weight: 100%;
   font-size: 2.5rem;   
   color: #000000;
   margin: 2rem;
}

.adopta {
   display: flex;
   justify-content: center;
   margin: 20px 0;
   flex-wrap: wrap;
   width: 100%;
}

.adopta img {
   width: 100%;        /* Se adapta al contenedor */
   max-width: 25rem;   /* Tamaño máximo en pantallas grandes */
   height: auto;       /* Mantiene proporción */
   border-radius: 1rem;
   padding: 2rem;
}


.adopta2 {
   display: none;
   justify-content: center;
   margin: 5px 0;
   flex-wrap: wrap;
   width: 100%;
}


.adopta2 img {
   width: 100%;        /* Se adapta al contenedor */
   max-width: 25rem;   /* Tamaño máximo en pantallas grandes */
   height: auto;       /* Mantiene proporción */
   border-radius: 1rem;
   padding: 1rem;
}


.adopta img:hover {
   transform: scale(1.03);
}

.busca-familia {
    padding: 3.5rem;
}

.mascotas {
   display: flex;
   flex-direction: column;
   align-items: center;  
   gap: 5px;             
}


.mascotas img {
   width: 100%;          /* Se adapta al ancho del contenedor */
   max-width: 25rem;     /* No crece más de 25rem en pantallas grandes */
   height: auto;         /* Mantiene proporción */
   border-radius: 5rem;
   filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
   transition: 0.2s;  
   padding: 2rem;
}


.redes-sociales {
   display: flex;
   justify-content: right;
   height: 3rem;
   margin-right: 1rem;
   margin-bottom: 2rem;
}


.logo-redes {
   display: flex;
   justify-content: left;
   height: 3rem;
   margin-right: auto;
   margin-left: 2rem;
   margin-bottom: 2rem;
}

.mascotas img:hover {
   transform: scale(1.03);
}


/* Fin de Contenido Index Movil */


/* Fin de Movil */






/* Escritorio */


@media screen and (max-width: 550px) {
  
   /* Navbar Escritorio */


   .abrir-menu,
   .cerrar-menu {
       display: block;
       border: 0;
       font-size: 2rem;
       background-color: transparent;
       cursor: pointer;
       padding: rem;
   }


   .nav {
       opacity: 0;
       visibility: hidden;
       display: flex;
       flex-direction: column;
       align-items: end;
       gap: 1.5rem;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0rem;
       padding: 1rem;
       padding-right: 2rem;
       box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
       background-color: white;
   }


   .nav.visible {
       opacity: 0.9;
       visibility: visible;
   }
  
    .nav-list {
       flex-direction: column;
       align-items: end;
       color: black;
       align-items: right;
       padding: 0.5rem;
   }


   .nav-list :hover{
       color: #fece02;
   }

   .nav-adopcion2{
       visibility:visible;
       font-family: "Montserrat", sans-serif;
       font-style: normal;
       font-size: 1rem;
       text-align: right;
      
   }
   .nav-animales2{
       visibility: visible;
       font-family: "Montserrat", sans-serif;
       font-style: normal;
       font-size: 1rem;
       text-align: center;
   }

   .nav-busca2{
       visibility: visible;
       font-family: "Montserrat", sans-serif;
       font-style: normal;
       font-size: 1rem;
       text-align: center;
   }

   .nav-animales { 
       visibility: hidden;
   }


   .nav-busca {
       visibility: hidden;
   }


   .nav-adopcion {
       visibility: hidden;
   }

   .desplegable-animales {visibility: visible;}

   /* Fin de Navbar Escritorio */




   /* Contenido Escritorio */










   /* Fin de Contenido Escritorio */
  


}


   /* Fin Escritorio */








/* Carrusel */


.carrusel-wrapper {
   max-width: 1000px;
   margin: 0 auto;
   position: relative;
}


.carrusel{
   display: flex;
   overflow-x: hidden;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   border-radius: .5rem;
   padding: 20px 0;
}


.carrusel-slide{
   flex: 1 0 100%;
   scroll-snap-align: start;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 400px;
}


/* Propiedades imagenes carrusel*/
.carrusel img{
   width: 65%;
   max-width: 400px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   object-fit: cover;
   display: block;
}


.carrusel-nav{
   display: flex;
   column-gap: 1rem;
   position: absolute;
   bottom: 0.5px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
}


.carrusel-nav a{
   width: .9rem;
   height: .9rem;
   border-radius: 80%;
   background-color: black;
   opacity: .7;
   transition: opacity ease 250ms;
  
}

.carrusel-nav a:hover{
   opacity: 1 ;
}

@media screen and (min-width: 600px) {
   .texto {
   font-size: 1.3rem;
}
}

@media screen and (min-width: 1200px) {
   .animales{
       height:  130%;
       justify-content: left;
   }

   .inicio {
       flex-direction:row-reverse;
}

.titulo {
   font-family: "Anton", sans-serif;
   font-weight: 100;
   font-size: 6rem;
   font-style: normal;
   padding-left: 2rem;
   padding-right: 2rem;
   padding-bottom: 3rem;
   line-height: 6rem;
   text-align: left;
   color: #7ac6be;
}

.texto {
   font-size: 1.2rem;
   padding: 2rem;
   padding-bottom: 0%;
}

.texto2 {
   display: flex;
   font-size: 1.2rem;
   padding: 2rem;
}

.adopta2 {
   display: flex;
   justify-content: left;
   padding: 1.4rem;
}

.adopta{
   display: none;}

.sobre-nosotros{
   padding-bottom: 1rem;
   padding-left: 5rem;
   padding-right:5rem;
   padding-top: 5rem;
}

.inicio{
   align-items: end;}


.eslogan2{
    display:none;
    padding: 2rem;
}

.mascotas {
    flex-direction: row;
    justify-content: center;
}
}