/* Iconografía propia — SVG de trazo sobre ficha de color.
   El trazo es el mismo (24×24, stroke-width 1.7, currentColor); lo que cambia
   es el envoltorio: cada icono vive en una ficha redondeada con su color, y
   los colores rotan dentro de cada rejilla para dar ritmo en vez de una
   pared monocroma. El glifo hereda el color de la ficha vía `currentColor`. */

.ico {
  display: inline-block;
  vertical-align: -.14em;
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
}

/* ---------- ficha de color ------------------------------------------ */
.func-icon, .who-icon, .service-icon, .service-card-icon, .city-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--ico-fondo, #ccfbf1);
  color: var(--ico-tinta, #0d9488);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico-tinta, #0d9488) 14%, transparent);
  line-height: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.func-icon  { width: 54px; height: 54px; margin-bottom: 14px }
.who-icon   { width: 62px; height: 62px; border-radius: 18px; margin-bottom: 16px }
.service-icon, .service-card-icon { width: 52px; height: 52px; margin-bottom: 16px }
.city-icon  { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 10px }

.func-icon .ico, .service-icon .ico, .service-card-icon .ico { width: 26px; height: 26px }
.who-icon .ico  { width: 30px; height: 30px }
.city-icon .ico { width: 21px; height: 21px }

/* al pasar el ratón por la tarjeta, la ficha responde */
.service-card:hover .service-card-icon,
.service-card:hover .service-icon,
.function-card:hover .func-icon,
.who-card:hover .who-icon {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico-tinta, #0d9488) 26%, transparent),
              0 8px 18px color-mix(in srgb, var(--ico-tinta, #0d9488) 18%, transparent);
}

/* ---------- paleta rotativa ----------------------------------------- */
/* Seis parejas tinta/fondo, todas con contraste suficiente sobre blanco.
   Se aplican por posición para que cada rejilla tenga ritmo cromático. */
.func-icon, .who-icon, .service-icon, .service-card-icon, .city-icon { --ico-tinta:#0d9488; --ico-fondo:#ccfbf1 }

.service-card:nth-child(6n+2) .service-card-icon, .service-card:nth-child(6n+2) .service-icon,
.function-card:nth-child(6n+2) .func-icon, .who-card:nth-child(6n+2) .who-icon,
.city-card:nth-child(6n+2) .city-icon { --ico-tinta:#0891b2; --ico-fondo:#cffafe }

.service-card:nth-child(6n+3) .service-card-icon, .service-card:nth-child(6n+3) .service-icon,
.function-card:nth-child(6n+3) .func-icon, .who-card:nth-child(6n+3) .who-icon,
.city-card:nth-child(6n+3) .city-icon { --ico-tinta:#4f46e5; --ico-fondo:#e0e7ff }

.service-card:nth-child(6n+4) .service-card-icon, .service-card:nth-child(6n+4) .service-icon,
.function-card:nth-child(6n+4) .func-icon, .who-card:nth-child(6n+4) .who-icon,
.city-card:nth-child(6n+4) .city-icon { --ico-tinta:#7c3aed; --ico-fondo:#ede9fe }

.service-card:nth-child(6n+5) .service-card-icon, .service-card:nth-child(6n+5) .service-icon,
.function-card:nth-child(6n+5) .func-icon, .who-card:nth-child(6n+5) .who-icon,
.city-card:nth-child(6n+5) .city-icon { --ico-tinta:#b45309; --ico-fondo:#fef3c7 }

.service-card:nth-child(6n) .service-card-icon, .service-card:nth-child(6n) .service-icon,
.function-card:nth-child(6n) .func-icon, .who-card:nth-child(6n) .who-icon,
.city-card:nth-child(6n) .city-icon { --ico-tinta:#be123c; --ico-fondo:#ffe4e6 }

/* Clases de color que ya existían en el HTML: mandan sobre la rotación. */
.icon-emerald { --ico-tinta:#047857 !important; --ico-fondo:#d1fae5 !important }
.icon-blue    { --ico-tinta:#1d4ed8 !important; --ico-fondo:#dbeafe !important }
.icon-violet  { --ico-tinta:#7c3aed !important; --ico-fondo:#ede9fe !important }
.icon-amber   { --ico-tinta:#b45309 !important; --ico-fondo:#fef3c7 !important }
.icon-red     { --ico-tinta:#be123c !important; --ico-fondo:#ffe4e6 !important }
.icon-pink    { --ico-tinta:#a21caf !important; --ico-fondo:#fae8ff !important }

/* ---------- iconos en línea (no llevan ficha) ------------------------ */
.condition-item .ico { width: 22px; height: 22px; color: #0d9488 }
.hero-meta-item .ico { width: 17px; height: 17px; opacity: .9 }
.badge-city .ico, .badge .ico { width: 15px; height: 15px; vertical-align: -.18em }
a .ico, button .ico { vertical-align: -.16em }

@media (max-width: 600px) {
  .func-icon { width: 48px; height: 48px }
  .who-icon  { width: 54px; height: 54px }
  .func-icon .ico, .who-icon .ico { width: 24px; height: 24px }
}

/* ---------- fichas que faltaban por cubrir --------------------------- */
/* Estas rejillas tenían el glifo suelto sobre el fondo de la tarjeta, así que
   se veían como líneas grises al lado de las que sí llevaban ficha. */
.svc-icon, .slide-icon, .impact-icon, .results-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: var(--ico-fondo, #ccfbf1);
  color: var(--ico-tinta, #0d9488);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico-tinta, #0d9488) 14%, transparent);
  line-height: 0;
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-icon, .slide-icon   { width: 52px; height: 52px; margin-bottom: 16px }
.impact-icon, .results-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 12px }
.svc-icon .ico, .slide-icon .ico { width: 26px; height: 26px }
.impact-icon .ico, .results-icon .ico { width: 23px; height: 23px }

.svc-card:hover .svc-icon, .slide:hover .slide-icon, .impact-card:hover .impact-icon {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ico-tinta, #0d9488) 26%, transparent),
              0 8px 18px color-mix(in srgb, var(--ico-tinta, #0d9488) 18%, transparent);
}

/* misma rotación de seis colores que el resto del sitio */
.svc-card:nth-child(6n+1) .svc-icon, .slide:nth-child(6n+1) .slide-icon,
.impact-card:nth-child(6n+1) .impact-icon { --ico-tinta:#0d9488; --ico-fondo:#ccfbf1 }
.svc-card:nth-child(6n+2) .svc-icon, .slide:nth-child(6n+2) .slide-icon,
.impact-card:nth-child(6n+2) .impact-icon { --ico-tinta:#0891b2; --ico-fondo:#cffafe }
.svc-card:nth-child(6n+3) .svc-icon, .slide:nth-child(6n+3) .slide-icon,
.impact-card:nth-child(6n+3) .impact-icon { --ico-tinta:#4f46e5; --ico-fondo:#e0e7ff }
.svc-card:nth-child(6n+4) .svc-icon, .slide:nth-child(6n+4) .slide-icon,
.impact-card:nth-child(6n+4) .impact-icon { --ico-tinta:#7c3aed; --ico-fondo:#ede9fe }
.svc-card:nth-child(6n+5) .svc-icon, .slide:nth-child(6n+5) .slide-icon,
.impact-card:nth-child(6n+5) .impact-icon { --ico-tinta:#b45309; --ico-fondo:#fef3c7 }
.svc-card:nth-child(6n) .svc-icon, .slide:nth-child(6n) .slide-icon,
.impact-card:nth-child(6n) .impact-icon { --ico-tinta:#be123c; --ico-fondo:#ffe4e6 }

/* reason-icon ya traía el fondo en el HTML; le faltaba la tinta del glifo */
.reason-icon { color: #0d9488 }
.reason-icon.red    { color: #be123c }
.reason-icon.blue   { color: #1d4ed8 }
.reason-icon.amber  { color: #b45309 }
.reason-icon.violet { color: #7c3aed }
.reason-icon .ico   { width: 22px; height: 22px }

/* iconos de contacto: van en línea, con su color, sin ficha */
.contact-item-icon { color: #0d9488; line-height: 0 }
.contact-item-icon .ico { width: 20px; height: 20px }
.diff-icon .ico { width: 20px; height: 20px }

/* los iconos ilustrados a color (multitono) traen su propia ficha dibujada,
   así que dentro de un contenedor con ficha se anula la de CSS */
.ico-d { width: 100%; height: 100%; display: block }
.svc-icon:has(.ico-d), .slide-icon:has(.ico-d), .impact-icon:has(.ico-d),
.results-icon:has(.ico-d), .mode-icon:has(.ico-d) {
  background: none !important; box-shadow: none !important;
}
.mode-icon { width: 56px; height: 56px; margin: 0 auto 14px; line-height: 0 }

@media (max-width: 600px) {
  .svc-icon, .slide-icon { width: 46px; height: 46px }
  .svc-icon .ico, .slide-icon .ico { width: 23px; height: 23px }
}