/* Talento humano: tarjeta de persona (plantilla "NSP · Tarjeta de persona"), barra de grupos
   y secciones. Lo que Elementor no tiene como control vive aquí (Elementor no imprime el CSS
   personalizado de las plantillas de ítem de bucle). Usa los colores globales NSP
   (--e-global-color-nsp…): cambiar un color en Elementor también lo cambia aquí. */

/* ---------- Tarjeta: mismo lenguaje que las tarjetas del inicio ---------- */
.nsp-tarjeta{background:#fff;border-radius:20px!important;overflow:hidden;box-shadow:0 18px 40px -22px rgba(15,53,87,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;height:100%}
.nsp-tarjeta:hover{transform:translateY(-6px);box-shadow:0 30px 56px -24px rgba(15,53,87,.42)}

/* Foto: cuadrado redondeado de tamaño fijo; la imagen se recorta sola, enfocada en la cara */
.nsp-foto{width:112px!important;height:112px!important;flex:none;border-radius:22px!important;overflow:hidden!important;background:linear-gradient(160deg,#E3EEF6,#F7F4EE)}
.nsp-foto>.elementor-element,.nsp-foto .elementor-widget-container{width:100%;height:100%;margin:0}
.nsp-foto img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 18%;border-radius:0!important;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.nsp-tarjeta:hover .nsp-foto img{transform:scale(1.07)}

.nsp-chip .elementor-heading-title{display:inline-block;padding:5px 11px;border-radius:999px;background:#EEF5FA;color:var(--e-global-color-nspcielo);font:600 12px/1.3 Inter,sans-serif;letter-spacing:.2px}

/* Pie de la tarjeta: línea fina y correo (con ícono). Empuja al fondo para que todas alineen. */
.nsp-pie-tarjeta{border-top:1px solid var(--e-global-color-nsplinea)}
.nsp-correo .elementor-heading-title,.nsp-correo .elementor-heading-title a{white-space:nowrap;font-size:12.5px!important;letter-spacing:-.1px}
/* Bloque (no flex) para que un correo muy largo termine en "…" en vez de salirse */
.nsp-correo .elementor-heading-title a{display:block;overflow:hidden;text-overflow:ellipsis;color:var(--e-global-color-nspcielo);font-weight:600}
.nsp-correo .elementor-heading-title a:hover{color:var(--e-global-color-nspnavy)}
.nsp-correo .elementor-heading-title a::before{content:"";display:inline-block;vertical-align:-3px;margin-right:7px;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* Donde el correo completo no cabe: "Escribir →" (el enlace es el mismo). */
@media (max-width:1300px){
.nsp-correo .elementor-heading-title a{font-size:0!important}
.nsp-correo .elementor-heading-title a::after{content:"Escribir →";font-size:14px;letter-spacing:0}
}

/* ---------- Barra fija de grupos ([nsp_grupos_nav]) ---------- */
/* Elementor fuerza position:relative en los contenedores: por eso los !important */
.nsp-subnav{position:sticky!important;top:143px;z-index:40!important;background:rgba(247,244,238,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--e-global-color-nsplinea)}
body.admin-bar .nsp-subnav{top:175px}
.nsp-grupos{display:flex;gap:36px;justify-content:center;overflow-x:auto;scrollbar-width:none}
.nsp-grupos::-webkit-scrollbar{display:none}
.nsp-grupos a{position:relative;display:flex;align-items:center;gap:8px;padding:20px 0 19px;font:600 15px/1 Inter,sans-serif;color:var(--e-global-color-nspgris);white-space:nowrap;transition:color .2s}
.nsp-grupos a span{font-size:11.5px;font-weight:600;color:var(--e-global-color-nspgris);background:#fff;border:1px solid var(--e-global-color-nsplinea);border-radius:999px;padding:3px 8px;transition:all .2s}
.nsp-grupos a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--e-global-color-nsporo);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.nsp-grupos a:hover,.nsp-grupos a.activo{color:var(--e-global-color-nspnavy)}
.nsp-grupos a.activo::after,.nsp-grupos a:hover::after{transform:scaleX(1)}
.nsp-grupos a.activo span{background:var(--e-global-color-nspnavy);border-color:var(--e-global-color-nspnavy);color:#fff}
html{scroll-behavior:smooth}

/* ---------- Secciones por grupo ---------- */
/* Columnas siempre iguales, aunque un correo largo no quepa (minmax(0,1fr)) */
.nsp-grupo-seccion .elementor-loop-container{grid-template-columns:repeat(var(--grid-columns,4),minmax(0,1fr))!important}
.nsp-correo .elementor-heading-title{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nsp-grupo-seccion{scroll-margin-top:220px}
.nsp-grupo-titulo{border-bottom:1px solid var(--e-global-color-nsplinea)}

@media (max-width:1024px){
.nsp-subnav{top:73px}
body.admin-bar .nsp-subnav{top:105px}
.nsp-grupos{justify-content:flex-start;gap:26px;padding:0 18px}
.nsp-grupo-seccion{scroll-margin-top:140px}
}
@media (max-width:767px){
.nsp-foto{width:84px!important;height:84px!important;border-radius:18px!important}
.nsp-grupos a{font-size:14px;padding:16px 0 15px}
.nsp-correo .elementor-heading-title a::after{font-size:13px}
body.admin-bar .nsp-subnav{top:73px}
}