/* ==========================================================================
   Socials — título centrado y sólo los iconos, centrados.
   Al pasar el mouse el icono crece al doble; al hacer clic se pone azul
   (y se queda azul el último que se abrió).
   ========================================================================== */

.soc {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 10px 0 12px;
}

.soc__title {
  justify-content: center;
  margin-bottom: 0;
  text-align: center;
}

.soc__icons {
  --cell: 76px; /* cada celda cabe el icono al doble de tamaño */
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  max-width: calc(var(--cell) * 4 + 12px * 3);
  min-height: 0;
}

.soc-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cell);
  height: var(--cell);
  color: var(--ink);
  transition: color 160ms linear;
}
.soc-icon .icon {
  --icon: 32px;
  transition: transform 260ms var(--ease);
}

@media (hover: hover) {
  .soc-icon:hover { z-index: 1; }
  .soc-icon:hover .icon { transform: scale(2); }
}

/* clic: azul (y el último que se abrió se queda azul) */
.soc-icon:active,
.soc-icon.is-picked { color: var(--accent); }

.soc-icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* escritorio: iconos más grandes y en una sola fila si caben */
@media (min-width: 1024px) {
  .soc__icons {
    --cell: 96px;
    gap: 16px 24px;
    max-width: none;
  }
  .soc-icon .icon { --icon: 40px; }
}

@media (orientation: landscape) and (max-height: 480px) {
  .soc { padding: 4px 0 6px; }
  .soc__icons { --cell: 60px; gap: 4px 10px; max-width: none; }
  .soc-icon .icon { --icon: 26px; }
}