/* ======= RESET Y BASE ======= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  background-color: #f4f0ed !important; 
  color: #333;
  min-height: 100vh;
  text-align: center;
}

/* ======= CONTENEDOR GENERAL y CABECERA (sin cambios) ======= */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.logo {
  width: 140px;
  border-radius: 20px;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .logo {
    width: 200px;
  }
}

h1 {
  font-size: 1.5rem; 
  font-weight: 700;
  color: #3C2800; 
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

h1 span, h1 i {
  color: #e37c2d; 
}

.intro {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1rem;
}

.follow-text {
  font-weight: 600;
  color: #222;
  margin-bottom: 1.5rem; 
}

/* ======= BOTONES SOCIALES (Margen reducido) ======= */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-bottom: 1.5rem; /* Margen reducido */
}

.social-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem; 
  color: #fff !important; 
  text-decoration: none !important; 
  font-weight: 600;
  padding: 0.7rem 1.4rem; 
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 1rem; 
}

.social-btn i {
    color: #fff !important; 
}

.instagram { background: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5); }
.facebook { background: #3b5998; }
.tiktok { background: #000; }
.youtube { background: #ff0000; }
.whatsapp { background: #25d366; }


/* ======= SOCIOS (AJUSTE DE FONDO Y PADDING FINAL) ======= */
.partners {
  margin-top: 0.5rem; /* Margen reducido */
}

.partners h2 {
  color: #4b4b4b;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.partners-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  padding: 0 1rem;
}

/* Base del Contenedor (el enlace <a>) - Estilos de Tarjeta aplicados a los 3 */
.partner {
  width: 100%;
  height: auto;
  max-height: 150px; 
  display: flex; 
  justify-content: center;
  align-items: center;
  text-decoration: none; 
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  /* CRÍTICO: Fondo BLANCO para todos los contenedores de socios */
  background: #fff; 
  
  /* CRÍTICO: Reducción de padding de 15px a ~11px (aprox. 25% menos) para mobile */
  padding: 11px; 
  
  /* Ratio por defecto rectangular para la mayoría de logos */
  aspect-ratio: 16/9; 
}

/* Imagen dentro del contenedor */
.partner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0; 
    margin: 0;
    border-radius: 0;
}

.partner:hover {
  transform: scale(1.05);
}

/* 1. Logo NatCan (Mobile) - Mantenemos el max-width, ahora con fondo blanco alrededor */
.logo-natcan {
  max-width: 300px; 
}

/* 2. Logo Filan (Mobile) - Ajuste de aspecto para la foto del perro */
.logo-filan {
    max-width: 180px; 
    aspect-ratio: 4/5; 
}

/* 3. Logo RUS PetCare (Mobile) */
.logo-rus {
    max-width: 180px;
}


/* ======= ESCRITORIO (min-width: 768px) - AJUSTE DE PROPORCIÓN FINAL ======= */
@media (min-width: 768px) {
  
  .logo {
    width: 200px;
  }
  
  /* NatCan: Rectangular */
  .logo-natcan { 
      max-width: 300px; 
      grid-column: span 1 / auto; 
      max-height: 200px;
      aspect-ratio: 16/9; 
  }
  
  /* Filan: Cuadrado (para contener la imagen del perro) */
  .logo-filan {
      max-width: 280px; 
      max-height: 200px; 
      aspect-ratio: 1/1; 
  }

  /* RUS: Rectangular */
  .logo-rus {
      max-width: 280px; 
      max-height: 200px; 
      aspect-ratio: 16/9; 
  }

  /* CRÍTICO: Reducción de padding de 20px a 15px (aprox. 25% menos) para desktop */
  .partner {
      padding: 15px; 
  }
}


/* ======= FOOTER ======= */
.footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  font-size: 0.8rem;
  color: #555;
}