/* 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 }
}

/* ── Credenciales del hero (2026-09-10) ────────────────────────────────────
   Sustituyen la tira de cifras (8+ años, 700+/1000+ evaluaciones, 100%).
   Se pasa de tres números apelotonados a la izquierda —que en neuropsicologo
   chocaban con el botón flotante de WhatsApp— a una rejilla de tres columnas
   que ocupa el ancho de la columna de texto. El glifo va en ficha de color,
   como el resto de la iconografía del sitio (ver iconos.css). */
.cred-row { list-style: none; margin: 26px 0 0; padding: 0; display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-items: start; }
.cred-row li { display: flex; gap: 11px; align-items: flex-start; min-width: 0; }
.cred-row b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25;
              color: #0f172a; letter-spacing: -.1px; }
.cred-row em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.35;
               color: #8a94a6; margin-top: 3px; }
.cred-icon { display: inline-flex !important; align-items: center; justify-content: center;
             flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; line-height: 0;
             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) 15%, transparent); }
.cred-icon .ico { width: 20px; height: 20px; }
.cred-row li:nth-child(1) .cred-icon { --ico-tinta: #0d9488; --ico-fondo: #ccfbf1 }
.cred-row li:nth-child(2) .cred-icon { --ico-tinta: #4f46e5; --ico-fondo: #e0e7ff }
.cred-row li:nth-child(3) .cred-icon { --ico-tinta: #b45309; --ico-fondo: #fef3c7 }
/* Móvil: la línea de apoyo se calla y las tres quedan en columna estrecha.
   Ocupa menos alto que la tira de cifras que había antes. */
@media (max-width: 900px) {
  .cred-row { gap: 10px; margin-top: 16px; }
  .cred-row li { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
  .cred-row b { font-size: 12.5px; }
  .cred-row em { display: none; }
  .cred-icon { width: 34px; height: 34px; border-radius: 10px; }
}
@media (max-width: 400px) { .cred-row b { font-size: 11.5px } }

/* ── Iconos de la tira de datos de las páginas de tema ──────────────────── */
.tema-datos > div { display: flex !important; gap: 10px; align-items: flex-start; }
.tema-dato-ico { display: inline-flex; align-items: center; justify-content: center;
                 flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; line-height: 0;
                 margin-top: 2px; 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) 15%, transparent); }
.tema-dato-ico .ico { width: 18px; height: 18px; }
.tema-datos > div:nth-child(1) .tema-dato-ico { --ico-tinta: #0d9488; --ico-fondo: #ccfbf1 }
.tema-datos > div:nth-child(2) .tema-dato-ico { --ico-tinta: #4f46e5; --ico-fondo: #e0e7ff }
.tema-datos > div:nth-child(3) .tema-dato-ico { --ico-tinta: #b45309; --ico-fondo: #fef3c7 }
.tema-datos > div > div { display: grid; gap: 2px; min-width: 0; }
@media (max-width: 700px) { .tema-dato-ico { width: 30px; height: 30px; } }

/* La banda de credenciales cierra el hero a lo ancho de las dos columnas: dentro
   de la columna de texto (480-590px) los tres títulos se partían en dos líneas. */
.cred-full { grid-column: 1 / -1; flex-basis: 100%; width: 100%;
             margin-top: 36px; padding-top: 26px;
             border-top: 1px solid rgba(15, 23, 42, .08); }
@media (max-width: 900px) { .cred-full { margin-top: 18px; padding-top: 16px; } }

/* Variante en columna: en neuroes la columna de texto termina 420px antes que
   la de la foto y el formulario. La lista vertical ocupa ese hueco en vez de
   dejarlo en blanco y empujar la banda al fondo del hero. */
.cred-col { grid-template-columns: 1fr; gap: 18px; margin-top: 38px; padding-top: 30px;
            border-top: 1px solid rgba(15, 23, 42, .08); }
@media (max-width: 900px) {
  .cred-col { gap: 12px; margin-top: 18px; padding-top: 14px; }
  .cred-col li { flex-direction: row; align-items: center; text-align: left; gap: 10px; }
  .cred-col em { display: block; }
}

.tema-datos > div > div span { font-size: 12.8px; line-height: 1.35; }
.tema-datos { gap: 14px 18px !important; }