/**
 * Estilos de frontend del bloque umivale/grid-iconos.
 * Traduce a CSS plano las utilidades Tailwind de SharedGridIconos.vue.
 */

.umivale-grid-iconos { padding: 32px 0; }

.umivale-grid-iconos__title {
  text-align: center;
  color: var(--uv-azul);
  font-size: var(--uv-titulo-xl);
  font-weight: var(--uv-peso-bold);
  line-height: var(--uv-titulo-xl-line-height);
  margin: 0 0 32px;
}

.umivale-grid-iconos__grid {
  display: grid;
  gap: 2.5rem;
}

/* cols 4: 2 columnas en mobile, 4 en desktop */
.umivale-grid-iconos__grid.is-cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .umivale-grid-iconos__grid.is-cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Fix 6c (#120, reflow): mismo problema que home-servicios (mismo patrón,
   bloque distinto) — las 2 columnas mobile de is-cols-4 no bajan nunca de
   ahí, una de las 2 con floor de contenido de 224px que no cede. cols-2 y
   cols-3 no lo necesitan: ya son 1 columna en mobile desde su propio
   breakpoint (líneas de arriba/abajo). */
@media (max-width: 480px) {
  .umivale-grid-iconos__grid.is-cols-4 { grid-template-columns: 1fr; }
}

/* cols 3: 1 columna en mobile, 3 desde sm */
.umivale-grid-iconos__grid.is-cols-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .umivale-grid-iconos__grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* cols 2: 1 columna en mobile, 2 desde sm */
.umivale-grid-iconos__grid.is-cols-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .umivale-grid-iconos__grid.is-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

.umivale-grid-iconos__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  text-decoration: none;
}

.umivale-grid-iconos__icon-img { object-fit: contain; }
.umivale-grid-iconos__icon-fa { color: var(--uv-azul); line-height: 1; }

/* Íconos icomoon (prefijo icono="icomoon-<clase>") — misma fuente propia del
   tema ya usada en single-faq.php (.icon-cv, assets/fonts/icomoon.woff),
   reutilizada acá para los íconos institucionales (calendario, atención al
   cliente, red de centros, etc.) que no existen en FontAwesome 4.7.
   Codepoints medidos contra umivale-fonts.css de producción. */
@font-face {
  font-family: 'icomoon';
  src: url('../../../../themes/umivale/assets/fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.umivale-grid-iconos__icon-icomoon { font-family: 'icomoon'; font-style: normal; color: var(--uv-azul); line-height: 1; }
.icon-sobre::before { content: "\e909"; }
.icon-calculadora-autonomo::before { content: "\e90a"; }
.icon-calendario-laboral::before { content: "\e90b"; }
.icon-atencion-al-cliente::before { content: "\e90c"; }
.icon-te-escuchamos::before { content: "\e926"; }
.icon-location::before { content: "\e92e"; }

.umivale-grid-iconos__label {
  color: #3C4858;
  font-size: var(--uv-subtitulo-s);
  font-weight: var(--uv-peso-semibold);
  line-height: var(--uv-subtitulo-s-line-height);
}
.umivale-grid-iconos__desc {
  color: #3C4858;
  font-size: var(--uv-parrafo-xs);
  line-height: var(--uv-parrafo-xs-line-height);
}

.umivale-grid-iconos__boton {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.umivale-grid-iconos__btn {
  display: inline-block;
  border-radius: 9999px;
  /* El color lo define el atributo botonColor (inline, default naranja). */
  padding: 10px 28px;
  color: var(--uv-blanco);
  font-size: var(--uv-parrafo-s);
  font-weight: var(--uv-peso-semibold);
  line-height: var(--uv-parrafo-s-line-height);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.umivale-grid-iconos__btn:hover { opacity: 0.9; }