/* Paleta  */
:root{
  --brand: #00AFAA;
  --brand2: #000000;
  --accent: #00afaa;
  --ink: #222;
  --muted: #6b7280;
  --card: #ffffff;
  --ring: rgba(0,0,0,.08);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
}

/*  contenedor */
.icon-links{
  padding: clamp(28px, 6vw, 56px) 0;
  text-align: center;
  background: transparent;
}

/* Titulo seccion */
.icon-links h2{
  margin: 0 0 clamp(12px, 2.4vw, 20px);
  color: var(--brand2);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(22px, 2.4vw, 32px);
}

/* grid responsivo */
.icon-links .container{
  margin: 0 auto;
  width: min(1200px, 92%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 3vw, 28px);
  justify-items: center;
  align-items: stretch;
}

/* Tarjeta */
.icon-item{
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: var(--card);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: clamp(16px, 3.5vw, 22px) clamp(14px, 3vw, 18px);
  box-shadow: var(--shadow-sm);

  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  outline: none;
  gap: 8px;
}

.icon-item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .25s cubic-bezier(.4,2,.6,1);
}

.icon-item p{ margin: 0; }

.icon-item p.fw-bold,
.icon-item p strong{ font-weight: 700; }

.icon-item .small{
  font-size: .875rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Estados */
.icon-item:hover,
.icon-item:focus-visible{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0,0,0,.1);
}

.icon-item:hover img{ transform: scale(1.06); }

.icon-item:focus-visible{
  box-shadow: 0 0 0 4px rgba(0,175,170,.16), var(--shadow-lg);
}

/* Enlace correo */
.icon-item a[href^="mailto:"]{
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px dashed rgba(152,20,60,.35);
  transition: opacity .2s ease, border-color .2s ease;
  word-break: break-word;
}

.icon-item a[href^="mailto:"]:hover{
  opacity: .85;
  border-color: rgba(152,20,60,.55);
}

/* responsivo */
@media (max-width: 480px){
  .icon-item{ border-radius: 14px; }
}