/* === RED DE AMIGOS (limpio) === */

/* Grid */
/* Grid centrado y sin columnas fantasma */
.amigos .amigos-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  justify-content: center;  /* centra el conjunto cuando hay pocos items */
  justify-items: center;    /* evita que las tarjetas se estiren raro */
}

/* Opcional: limita el ancho de cada tarjeta para que no se hagan gigantes
   en pantallas muy anchas, pero sigan respondiendo */
.amigos .amigo-card{
  width: 100%;
  max-width: 260px;
}

/* Tarjeta */
.amigos .amigo-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background:#fff;
  border-radius:12px;
  padding:14px 12px;
  min-height:160px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  transition:box-shadow .2s ease;
}
.amigos .amigo-card:hover,
.amigos .amigo-card:focus{
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* Logo: siempre visible, sin recortes ni solaparse con el texto */
.amigos .amigo-logo-wrap{
  width:100%;
  min-height:88px;      /* alto “zona de logo” */
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  line-height:0;        /* elimina hueco fantasma alrededor del <img> */
  box-sizing:border-box;
  /* sin overflow:hidden para no cortar logos altos */
}
.amigos .amigo-logo-wrap img{
  display:block;
  width:auto !important;      /* anula posibles width:100% globales */
  height:auto !important;
  max-width:90%;
  max-height:76px;            /* si un logo se queda grande, súbelo a 80–84 */
  object-fit:contain;
  transition:opacity .2s ease, filter .2s ease;
}

/* Texto */
.amigos .amigo-name{
  font-size:.95rem;
  color:#333;
  text-align:center;
  line-height:1.25;

  /* evitar que nombres largos rompan la tarjeta */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:calc(1.25em * 2);
}
.amigos .amigo-cat{
  margin-top:2px;
  font-size:.75rem;
  color:#6a6a6a;
  text-align:center;
}

/* Fallback si falta el archivo del logo (muestra el nombre en un recuadro) */
.amigos .amigo-logo-wrap.no-logo::before{
  content:attr(data-name);
  font-size:.85rem;
  color:#777;
  border:1px dashed #ddd;
  padding:6px 8px;
  border-radius:8px;
}

/* Accesibilidad: elementos solo para lectores de pantalla */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Opcional: logos en gris que se colorean al hover
.amigos .amigo-logo-wrap img{ filter:grayscale(1) contrast(1.05); opacity:.9; }
.amigos .amigo-card:hover .amigo-logo-wrap img{ filter:none; opacity:1; }
*/


/* --- Fallback sin logo: que envuelva a varias líneas y centrado --- */
.amigos .amigo-logo-wrap.no-logo{
  line-height: 1.2;          /* anula el 0 del wrapper cuando no hay img */
  min-height: 88px;          /* mantiene el alto del área del logo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.amigos .amigo-logo-wrap.no-logo::before{
  content: attr(data-name);
  display: inline-block;     /* permite calcular ancho y romper línea */
  max-width: 90%;            /* no se pega a los bordes */
  white-space: normal !important;
  overflow-wrap: anywhere;   /* rompe palabras largas si hace falta */
  text-align: center;

  font-size: .85rem;
  color: #777;
  border: 1px dashed #ddd;
  padding: 6px 8px;
  border-radius: 8px;
}


/* Hereda la fuente base del sitio para textos de la sección */
.section.amigos,
.section.amigos p,
.section.amigos li,
.section.amigos .flow-text,
.section.amigos .amigo-name,
.section.amigos .amigo-cat {
  font-family: inherit; /* coge la del body (Roboto) */
}

/* Por si algún estilo externo fuerza otra cosa en .flow-text */
.section.amigos .flow-text {
  font-weight: 400; /* Materialize usa 300 y a veces se ve “distinto” */
}