/* ============================= */
/* COMPONENTES */
/*Card; servicios; galerias; botones*/
/* ============================= */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.card{
    background:var(--gray);
    padding:25px;
    border-radius:10px;
}

.services{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
}

.service{
    background:white;
    padding:25px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}

/* ============================= */
/* GALERÍAS */
/* ============================= */

/* Instalaciones */
.gallery.instalaciones{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin-top:30px;
}

.gallery.instalaciones figure{
    background:var(--gray);
    border-radius:10px;
    overflow:hidden; /* 🔑 MUY IMPORTANTE */
}

.gallery.instalaciones figure img{
    width:100%;
    height:200px;     /* ALTURA UNIFORME */
    object-fit:cover;
}

/* Mascotas felices */
.gallery.mascotas{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    margin-top:30px;
}

.gallery.mascotas img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:10px;
}

/* ============================= */
/* NOTICIAS */
/* ============================= */

#noticias-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

#noticias-container .card {
    height: auto;      /* deja que se ajuste a la imagen */
    overflow: visible; /* deja que la imagen se muestre completa */
}


#noticias-container .card img {
    width: auto;       /* deja que el ancho sea proporcional */
    max-width: 100%;   /* nunca pase el contenedor */
    height: auto;      /* respeta proporciones */
    object-fit: unset; /* no recortes */
    display: block;    /* elimina espacios extra abajo */
    border-radius: 10px;
}



/* ============================= */
/* TESTIMONIOS */
/* ============================= */

.testimonials{
    background:var(--gray);
}

.testimonials-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.testimonials-header h2{
    flex:1;
    color:var(--purple);
}

/* 👇 ESTE VA AQUÍ */
.testimonials-header img{
    width:100%;
    max-width:500px;
    height:300px;
    object-fit:cover;
    border-radius:10px;
}

.testimonial{
    background:white;
    padding:20px;
    border-radius:10px;
    margin-bottom:15px;
}