/* =========================================================
   CASA HOME — NOSOTROS (Quienes somos y Organigrama)

   La misma logica que admicontabc.pe: pagina editorial, como una
   memoria anual. Papel en vez de gris azulado, filetes de 1px en vez
   de sombras, texto sobre la hoja en vez de dentro de tarjetas. Las
   secciones se numeran solas (01, 02...). Solo el organigrama y la
   hoja de vida llevan caja.

   Colores de Casa Home: la tinta es el azul marino de la cabecera y
   el acento el dorado de la marca, oscurecido para que se lea sobre
   blanco.
========================================================= */

.ns{
    --ns-tinta:#08143b;
    --ns-suave:#4f5d73;
    --ns-tenue:#8792a5;
    --ns-linea:#e4e6ea;
    --ns-marca:#b07a00;
    --ns-papel:#fbfbfa;
    background:var(--ns-papel);
    color:var(--ns-tinta);
    font-family:"Montserrat","Segoe UI",Arial,sans-serif;
}
.ns *,.ns *::before,.ns *::after{ box-sizing:border-box; }
.ns-ancho{
    width:min(100%,1080px);
    margin-inline:auto;
    padding:20px clamp(16px,4vw,34px) 84px;
    counter-reset:ns-seccion;
}
.ns:has(.ns-banda) .ns-ancho{ padding-top:0; }

/* ---------- Foto de portada a todo el ancho ---------- */
.ns-banda{
    margin:0 0 clamp(22px,2.8vw,34px);
    background:#eef1f4;
}
.ns-banda img{
    display:block;
    width:100%;
    height:clamp(340px,62vh,680px);
    object-fit:cover;
    object-position:center 30%;
}

/* ---------- Cabecera ---------- */
.ns-cabecera h1{
    margin:0;
    font-size:clamp(26px,2.8vw,34px);
    font-weight:600;
    line-height:1.03;
    letter-spacing:-.035em;
}
.ns-entrada{
    max-width:60ch;
    margin:12px 0 0;
    color:var(--ns-suave);
    font-size:16px;
    line-height:1.6;
    letter-spacing:-.012em;
}
.ns-cabecera-sola{ text-align:center; padding-top:6px; }
.ns-cabecera-sola h1{
    font-size:clamp(21px,2.5vw,32px);
    text-transform:uppercase;
    letter-spacing:.03em;
}
.ns-cabecera-sola .ns-entrada{ margin-inline:auto; }

/* ---------- Cifras entre filetes ---------- */
.ns-cifras{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:clamp(22px,2.6vw,32px);
    padding:6px clamp(14px,2vw,26px);
    border-radius:18px;
    background:#f1f3f7;
}
.ns-dato{
    display:flex;
    flex-direction:column;
    padding:18px clamp(12px,2vw,24px);
}
.ns-dato b{
    font-size:30px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;
}
.ns-dato span{
    margin-top:7px;
    color:var(--ns-tenue);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ns-dato-texto b{
    color:var(--ns-tenue);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ns-dato-texto span{
    margin-top:8px;
    color:var(--ns-suave);
    font-size:13px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.45;
    text-transform:none;
}

/* ---------- Secciones numeradas: rotulo a la izquierda ---------- */
.ns-seccion{
    display:grid;
    grid-template-columns:minmax(0,228px) minmax(0,1fr);
    gap:clamp(22px,4vw,58px);
    margin-top:clamp(40px,4.4vw,60px);
}
.ns-indice{
    display:block;
    color:var(--ns-marca);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    font-variant-numeric:tabular-nums;
}
.ns-indice::before{
    counter-increment:ns-seccion;
    content:counter(ns-seccion,decimal-leading-zero);
}
.ns-seccion-rotulo h2{
    max-width:16ch;
    margin:10px 0 0;
    font-size:20px;
    font-weight:600;
    line-height:1.22;
    letter-spacing:-.022em;
}
.ns-cuerpo p{
    max-width:62ch;
    margin:0 0 14px;
    color:var(--ns-suave);
    font-size:15.5px;
    line-height:1.78;
}
.ns-cuerpo p:last-child{ margin-bottom:0; }

/* Lista numerada con filetes: proyectos, valores. */
.ns-lista{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.ns-lista li{
    display:grid;
    grid-template-columns:46px 1fr;
    align-items:baseline;
    gap:0 12px;
    padding:14px 16px;
    border-radius:14px;
    background:#fff;
}
.ns-lista-num{
    color:var(--ns-tenue);
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}
.ns-lista-texto a,
.ns-lista-texto strong{
    display:block;
    color:var(--ns-tinta);
    font-size:17px;
    font-weight:600;
    letter-spacing:-.015em;
    text-decoration:none;
    transition:color .16s ease;
}
.ns-lista-texto a:hover{ color:var(--ns-marca); }
.ns-lista-texto em{
    display:block;
    margin-top:4px;
    color:var(--ns-suave);
    font-size:14px;
    font-style:normal;
    line-height:1.6;
}

/* ---------- Rejilla del equipo ---------- */
.ns-equipo{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(36px,4vw,56px) clamp(20px,2.4vw,32px);
    margin:0;
    padding:0;
    list-style:none;
}
.ns-persona-marco{
    position:relative;
    margin:0;
    aspect-ratio:4/5;
    overflow:hidden;
    background:#e9ebe8;
    cursor:pointer;
}
.ns-persona-marco:focus-visible{ outline:2px solid var(--ns-marca); outline-offset:3px; }
.ns-persona-foto{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 22%;
    filter:grayscale(1) contrast(1.06) brightness(1.03);
    transform:scale(1.001);
    transition:filter .6s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.ns-persona:hover .ns-persona-foto,
.ns-persona:focus-within .ns-persona-foto{
    filter:grayscale(0) contrast(1) brightness(1);
    transform:scale(1.035);
}
@media (hover:none){
    .ns-persona-foto{ filter:grayscale(.15); }
}
.ns-persona-inicial{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#9aa5ae;
    font-size:clamp(34px,4vw,52px);
    font-weight:600;
    letter-spacing:.04em;
}
.ns-persona-pie{ padding-top:18px; }
.ns-persona-indice{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 10px;
    color:var(--ns-tenue);
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
}
.ns-persona-indice span + span::before{ content:"·"; margin-right:10px; }
.ns-persona-nombre{
    margin:0;
    font-size:clamp(17px,1.5vw,19px);
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.018em;
}
.ns-persona-cargo{
    margin:5px 0 0;
    color:var(--ns-suave);
    font-size:14px;
}
.ns-vacio{
    margin:0;
    color:var(--ns-tenue);
    font-size:14px;
}
.ns-pie-nota{
    margin:clamp(34px,4vw,48px) 0 0;
    color:var(--ns-tenue);
    font-size:13.5px;
}
.ns-pie-nota a{ color:var(--ns-marca); font-weight:600; }

/* ---------- Mision y vision ---------- */
.ns-declaraciones{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;
}
.ns-declaracion{
    padding:22px 24px 24px;
    border-radius:16px;
    background:#fff;
}
.ns-declaracion-rotulo{
    display:block;
    color:var(--ns-marca);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}
.ns-declaracion p{
    max-width:52ch;
    margin:10px 0 0;
    color:var(--ns-suave);
    font-size:15.5px;
    line-height:1.7;
}
.ns-politica{
    padding:22px clamp(18px,2.4vw,28px);
    border-radius:16px;
    background:#fff;
}
.ns-politica p{
    margin:0 0 12px;
    color:var(--ns-suave);
    font-size:15px;
    line-height:1.75;
}
.ns-politica p:last-child{ margin-bottom:0; }

/* =========================================================
   ORGANIGRAMA — COMO UN PLANO
   Casa Home es constructora: el diagrama va sobre una hoja con
   reticula de puntos, como papel de plano. Cada puesto lleva su
   icono en un sello que sobresale de la caja, y el peso visual baja
   por niveles: direccion en azul, segundo nivel con borde marcado,
   areas en blanco y equipos compactos. Las asesorias (staff) se unen
   con linea dorada discontinua. Los codos del arbol son curvos.
   Todo HTML y CSS, sin librerias.
========================================================= */
.ns-organigrama-pagina{ --ns-conector:#c3cbd7; --ns-oro:#d9a300; }
.ns-diagrama{
    margin-top:clamp(22px,3vw,38px);
    padding:clamp(34px,4vw,56px) clamp(14px,2.4vw,34px) clamp(26px,3vw,38px);
    border:1px solid var(--ns-linea);
    border-radius:26px;
    background-color:#fff;
    background-image:radial-gradient(circle, #dfe4ec 1px, transparent 1.2px);
    background-size:22px 22px;
    background-position:center;
}
.ns-organigrama{ display:flex; flex-direction:column; align-items:center; }
.og-arbol{ display:flex; flex-direction:column; align-items:center; width:100%; }
.ns-enlace-vertical{ width:1.5px; height:40px; background:var(--ns-conector); }

/* ---------- Cajas ---------- */
.ns-nodo{
    position:relative;
    min-width:0;
    width:max-content;
    max-width:280px;
    margin-top:22px;
    padding:32px 22px 18px;
    border:1px solid #dfe4ec;
    border-radius:18px;
    background:#fff;
    text-align:center;
    box-shadow:0 1px 0 rgba(8,20,59,.04), 0 16px 32px -24px rgba(8,20,59,.35);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ns-nodo:hover{
    transform:translateY(-3px);
    border-color:#c7cfdb;
    box-shadow:0 1px 0 rgba(8,20,59,.04), 0 22px 40px -24px rgba(8,20,59,.45);
}
.ns-nodo-icono{
    position:absolute;
    top:-22px;
    left:50%;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:4px solid #fff;
    border-radius:50%;
    background:var(--ns-tinta);
    color:#FFC400;
    transform:translateX(-50%);
    box-shadow:0 6px 14px -6px rgba(8,20,59,.5);
}
.ns-nodo-icono svg{ width:19px; height:19px; }
.ns-nodo strong{
    display:block;
    color:var(--ns-tinta);
    font-size:15px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.015em;
}
.ns-nodo-texto{
    display:block;
    max-width:28ch;
    margin:6px auto 0;
    color:var(--ns-tenue);
    font-size:12px;
    line-height:1.5;
}
.ns-nodo-rotulo{
    display:block;
    margin:0 0 8px;
    color:var(--ns-marca);
    font-size:10px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

/* Direccion: la cabeza, en azul con sello dorado. */
.ns-nodo-raiz{
    min-width:300px;
    padding:38px 34px 22px;
    border-color:var(--ns-tinta);
    background:var(--ns-tinta);
    box-shadow:0 26px 50px -26px rgba(8,20,59,.75);
}
.ns-nodo-raiz .ns-nodo-icono{
    width:52px;
    height:52px;
    top:-26px;
    border-color:var(--ns-papel);
    background:#FFC400;
    color:var(--ns-tinta);
}
.ns-nodo-raiz .ns-nodo-icono svg{ width:22px; height:22px; }
.ns-nodo-raiz strong{ color:#fff; font-size:16px; }
.ns-nodo-raiz .ns-nodo-texto{ color:rgba(255,255,255,.65); }
.ns-nodo-raiz .ns-nodo-rotulo{ color:#FFC400; }
.ns-nodo-raiz .ns-cara-nombre{ color:rgba(255,255,255,.8); }

/* Segundo nivel: borde azul marcado. */
.ns-nodo-direccion{
    min-width:260px;
    border:2px solid var(--ns-tinta);
    padding-top:34px;
}
.ns-nodo-direccion strong{ font-size:16px; }

/* Equipos: la hoja final, compacta y con sello claro. */
.ns-nodo-equipo{
    padding:26px 16px 14px;
    border-radius:14px;
    background:#fbfcfd;
}
.ns-nodo-equipo .ns-nodo-icono{
    width:38px;
    height:38px;
    top:-19px;
    background:#eef2f8;
    color:var(--ns-tinta);
    box-shadow:none;
}
.ns-nodo-equipo .ns-nodo-icono svg{ width:17px; height:17px; }
.ns-nodo-equipo strong{ font-size:14px; }

/* Asesorias: borde dorado discontinuo y sello dorado. */
.ns-nodo-staff{
    max-width:250px;
    border:1px solid #efe3bd;
    background:#fffdf6;
}
.ns-nodo-staff .ns-nodo-icono{
    background:#fff7dc;
    color:#8a6100;
    box-shadow:none;
}

/* ---------- Staff: al costado del eje ---------- */
.ns-staff-fila{
    display:grid;
    grid-template-columns:minmax(0,1fr) 1.5px minmax(0,1fr);
    width:100%;
    min-height:60px;
}
.ns-staff-eje{ background:var(--ns-conector); }
.ns-staff-fila.og-fin .ns-staff-eje{ height:50%; }
.og-staff-col{ display:flex; flex-direction:column; gap:10px; padding:10px 0 18px; min-width:0; }
.og-izq{ align-items:flex-end; padding-right:40px; }
.og-der{ align-items:flex-start; padding-left:40px; }
.og-staff-col > .og-arbol{ width:auto; max-width:100%; }
.og-staff-col > .og-arbol > .ns-nodo::before,
.og-staff-col > .og-arbol > .ns-nodo::after{ content:none; }
.og-der > .og-arbol > .ns-nodo::before,
.og-izq > .og-arbol > .ns-nodo::after{
    content:"";
    position:absolute;
    top:50%;
    width:41px;
    border-top:1.5px solid var(--ns-conector);
}
.og-der > .og-arbol > .ns-nodo::before{ right:100%; }
.og-izq > .og-arbol > .ns-nodo::after{ left:100%; }

/* ---------- Ramas: codos curvos, ancho segun lo que llevan ---------- */
.ns-ramas{
    display:flex;
    justify-content:center;
    width:100%;
}
.ns-rama{
    position:relative;
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:34px 8px 0;
}
.ns-rama::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    border-top:1.5px solid var(--ns-conector);
}
.ns-rama-linea{
    position:absolute;
    top:0;
    left:50%;
    width:1.5px;
    height:34px;
    margin-left:-.75px;
    background:var(--ns-conector);
}
/* Extremos: el tramo horizontal llega al centro y dobla en curva. */
.ns-rama:first-child::before{
    left:50%;
    height:16px;
    border-left:1.5px solid var(--ns-conector);
    border-top-left-radius:16px;
    margin-left:-.75px;
}
.ns-rama:last-child::before{
    right:50%;
    height:16px;
    border-right:1.5px solid var(--ns-conector);
    border-top-right-radius:16px;
    margin-right:-.75px;
}
.ns-rama:first-child > .ns-rama-linea,
.ns-rama:last-child > .ns-rama-linea{ top:16px; height:18px; }
.ns-rama:only-child::before{ display:none; }
.ns-rama:only-child > .ns-rama-linea{ top:0; height:34px; }
.ns-rama-suelta{ padding-top:0; }
.ns-rama-suelta::before,
.ns-rama-suelta > .ns-rama-linea{ display:none; }

/* ---------- Personas dentro de un puesto ---------- */
.ns-caras{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:12px;
    margin:4px 0 12px;
}
.ns-cara{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:80px;
    padding:0;
    border:0;
    background:transparent;
    font:inherit;
    cursor:pointer;
}
.ns-cara img,
.ns-cara-ini{
    width:68px;
    height:68px;
    border-radius:50%;
    object-fit:cover;
    object-position:center 22%;
    background:#eef0ee;
    box-shadow:0 0 0 3px #fff, 0 0 0 4px #dfe4ec;
    filter:grayscale(1) contrast(1.05);
    transition:filter .5s ease, transform .3s ease;
}
.ns-cara-ini{
    display:grid;
    place-items:center;
    color:#9aa5ae;
    font-size:20px;
    font-weight:600;
    filter:none;
}
.ns-nodo:hover .ns-cara img{ filter:none; }
.ns-cara:hover img,
.ns-cara:focus-visible img{ transform:translateY(-2px); filter:none; }
.ns-cara:focus-visible{ outline:none; }
.ns-cara:focus-visible img{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ns-marca); }
.ns-cara-nombre{
    margin-top:8px;
    color:var(--ns-suave);
    font-size:11.5px;
    font-weight:600;
    line-height:1.3;
    text-align:center;
}

/* Cuatro o mas personas: franja que se desliza. */
.ns-desliza{ position:relative; padding:0 26px; max-width:250px; margin-inline:auto; }
.ns-desliza .ns-caras{
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:10px;
    padding:4px 2px 6px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
.ns-desliza .ns-caras::-webkit-scrollbar{ display:none; }
.ns-desliza .ns-cara{ flex:0 0 62px; width:62px; scroll-snap-align:start; }
.ns-desliza .ns-cara img,
.ns-desliza .ns-cara-ini{ width:56px; height:56px; }
.ns-desliza .ns-cara-nombre{ font-size:10.5px; }
.ns-desliza-flecha{
    position:absolute;
    top:18px;
    z-index:1;
    width:28px;
    height:28px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid var(--ns-linea);
    border-radius:50%;
    background:#fff;
    color:var(--ns-tinta);
    box-shadow:0 4px 12px -6px rgba(8,20,59,.35);
    cursor:pointer;
}
.ns-desliza-flecha svg{ width:13px; height:13px; }
.ns-desliza-flecha.anterior{ left:-4px; }
.ns-desliza-flecha.siguiente{ right:-4px; }
.ns-desliza-flecha:disabled{ opacity:0; pointer-events:none; }
@media (hover:none){
    .ns-desliza-flecha{ display:none; }
    .ns-desliza{ padding:0; }
}
.ns-desliza-cuenta{
    margin:6px 0 0;
    color:var(--ns-tenue);
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* ---------- Practicantes ---------- */
.ns-apoyo{
    width:100%;
    margin-top:44px;
    padding-top:10px;
}
.ns-apoyo-rotulo{
    display:block;
    margin-bottom:6px;
    color:var(--ns-tenue);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-align:center;
    text-transform:uppercase;
}
.ns-apoyo-lista{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.ns-nodo-apoyo{ background:#fbfcfd; }
.ns-nodo-apoyo .ns-nodo-icono{ background:#eef2f8; color:var(--ns-tinta); box-shadow:none; }

/* ---------- Tablet y celular: el arbol baja en columna ---------- */
@media (max-width:900px){
    .ns-diagrama{ border-radius:20px; }
    .ns-ramas{ flex-direction:column; align-items:center; }
    .ns-rama{ width:100%; flex:none !important; padding-top:26px; }
    .ns-rama::before{ display:none; }
    .ns-rama > .ns-rama-linea,
    .ns-rama:first-child > .ns-rama-linea,
    .ns-rama:last-child > .ns-rama-linea{ top:0; height:26px; }
}
@media (max-width:620px){
    .ns-nodo,
    .ns-nodo-raiz,
    .ns-nodo-direccion,
    .ns-nodo-staff{ min-width:0; width:100%; max-width:320px; }
    .ns-staff-fila{ display:flex; flex-direction:column; align-items:center; }
    .ns-staff-eje{ width:1.5px; height:22px; }
    .og-staff-col{ order:2; width:100%; align-items:center; padding:0 0 18px; gap:6px; }
    .og-izq{ order:3; }
    .og-staff-col:empty{ display:none; }
    .og-der > .og-arbol > .ns-nodo::before,
    .og-izq > .og-arbol > .ns-nodo::after{ display:none; }
    .og-staff-col > .og-arbol{ width:100%; }
}

/* =========================================================
   ORGANIGRAMA AL ESTILO APPLE
   Fondo gris claro liso, cajas blancas sin bordes con sombra
   minima, iconos grises y un solo tono oscuro para la cabeza. Sin
   reticula, sin dorados, sin colores por tipo: la asesoria se
   distingue por su etiqueta y por ir al costado.
   (Va despues del bloque anterior y lo sobrescribe.)
========================================================= */
.ns.ns-organigrama-pagina{ --ns-papel:#f5f5f7; --ns-conector:#d2d2d7; background:#f5f5f7; }
.ns-organigrama-pagina .ns-diagrama{
    padding:34px 0 10px;
    border:0;
    border-radius:0;
    background:none;
}
.ns-organigrama-pagina .ns-nodo,
.ns-organigrama-pagina .ns-nodo-direccion,
.ns-organigrama-pagina .ns-nodo-equipo,
.ns-organigrama-pagina .ns-nodo-staff,
.ns-organigrama-pagina .ns-nodo-apoyo{
    border:0;
    background:#fff;
    box-shadow:0 2px 14px rgba(0,0,0,.06);
}
.ns-organigrama-pagina .ns-nodo:hover{ border:0; box-shadow:0 8px 26px rgba(0,0,0,.09); }
.ns-organigrama-pagina .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-equipo .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-staff .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-apoyo .ns-nodo-icono{
    border-color:#f5f5f7;
    background:#fff;
    color:#1d1d1f;
    box-shadow:0 1px 6px rgba(0,0,0,.08);
}
.ns-organigrama-pagina .ns-nodo strong{ color:#1d1d1f; font-weight:600; }
.ns-organigrama-pagina .ns-nodo-texto{ color:#86868b; }
.ns-organigrama-pagina .ns-nodo-rotulo{ color:#86868b; letter-spacing:.1em; }
.ns-organigrama-pagina .ns-nodo-raiz{ background:#1d1d1f; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-icono{ background:#fff; color:#1d1d1f; }
.ns-organigrama-pagina .ns-nodo-raiz strong{ color:#fff; }
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-texto{ color:rgba(255,255,255,.62); }
.ns-organigrama-pagina .ns-nodo-direccion strong{ font-size:15px; }
.ns-organigrama-pagina .ns-cara img,
.ns-organigrama-pagina .ns-cara-ini{ box-shadow:none; }
.ns-organigrama-pagina .ns-apoyo-rotulo{ color:#86868b; }

/* =========================================================
   ORGANIGRAMA COMPACTO
   Para verlo casi entero en una pantalla: cada caja es una fila con
   el icono a la izquierda y el puesto al lado. La descripcion no se
   pinta en el arbol; va en el title de la caja. Conectores cortos.
========================================================= */
.ns-organigrama-pagina .ns-cabecera-sola h1{ font-size:clamp(20px,2vw,26px); }
.ns-organigrama-pagina .ns-diagrama{ margin-top:14px; padding:6px 0 0; }
.ns-organigrama-pagina .ns-nodo,
.ns-organigrama-pagina .ns-nodo-raiz,
.ns-organigrama-pagina .ns-nodo-direccion,
.ns-organigrama-pagina .ns-nodo-equipo{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    min-width:0;
    max-width:250px;
    margin-top:0;
    padding:9px 14px 9px 10px;
    border-radius:14px;
    text-align:left;
}
.ns-organigrama-pagina .ns-nodo-raiz{ padding:11px 18px 11px 12px; }
.ns-organigrama-pagina .ns-nodo:hover{ transform:none; }
.ns-organigrama-pagina .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-equipo .ns-nodo-icono{
    position:static;
    flex:0 0 30px;
    width:30px;
    height:30px;
    border:0;
    background:#f5f5f7;
    box-shadow:none;
    transform:none;
}
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-icono{ background:rgba(255,255,255,.14); color:#fff; }
.ns-organigrama-pagina .ns-nodo-icono svg,
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-icono svg,
.ns-organigrama-pagina .ns-nodo-equipo .ns-nodo-icono svg{ width:15px; height:15px; }
.ns-nodo-titulo{ display:flex; flex-direction:column; min-width:0; }
.ns-organigrama-pagina .ns-nodo strong,
.ns-organigrama-pagina .ns-nodo-raiz strong,
.ns-organigrama-pagina .ns-nodo-direccion strong,
.ns-organigrama-pagina .ns-nodo-equipo strong{ font-size:13.5px; line-height:1.25; }
.ns-organigrama-pagina .ns-nodo-rotulo{ margin:0 0 1px; font-size:9px; }
.ns-organigrama-pagina .ns-nodo-texto{
    display:block;
    max-width:24ch;
    margin:2px 0 0;
    color:#86868b;
    font-size:11.5px;
    line-height:1.3;
}
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-texto{ color:rgba(255,255,255,.6); }
/* La cabeza va sin icono: solo el cargo, centrado. */
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-icono{ display:none; }
.ns-organigrama-pagina .ns-nodo-raiz{ justify-content:center; padding-left:22px; padding-right:22px; text-align:center; }
.ns-organigrama-pagina .ns-nodo-raiz .ns-nodo-titulo{ align-items:center; }
.ns-organigrama-pagina .ns-caras{ flex-basis:100%; justify-content:flex-start; margin:4px 0 2px; gap:8px; }
.ns-organigrama-pagina .ns-cara{ width:54px; }
.ns-organigrama-pagina .ns-cara img,
.ns-organigrama-pagina .ns-cara-ini{ width:40px; height:40px; font-size:14px; }
.ns-organigrama-pagina .ns-cara-nombre{ margin-top:4px; font-size:10px; }

.ns-organigrama-pagina .ns-enlace-vertical{ height:18px; }
.ns-organigrama-pagina .ns-staff-fila{ min-height:0; }
.ns-organigrama-pagina .og-staff-col{ gap:8px; padding:8px 0 10px; }
.ns-organigrama-pagina .og-izq{ padding-right:28px; }
.ns-organigrama-pagina .og-der{ padding-left:28px; }
.ns-organigrama-pagina .og-der > .og-arbol > .ns-nodo::before,
.ns-organigrama-pagina .og-izq > .og-arbol > .ns-nodo::after{ width:29px; }
.ns-organigrama-pagina .ns-rama{ padding-top:22px; padding-inline:5px; }
.ns-organigrama-pagina .ns-rama-linea{ height:22px; }
.ns-organigrama-pagina .ns-rama:first-child::before{ height:12px; border-top-left-radius:12px; }
.ns-organigrama-pagina .ns-rama:last-child::before{ height:12px; border-top-right-radius:12px; }
.ns-organigrama-pagina .ns-rama:first-child > .ns-rama-linea,
.ns-organigrama-pagina .ns-rama:last-child > .ns-rama-linea{ top:10px; height:12px; }
.ns-organigrama-pagina .ns-rama:only-child > .ns-rama-linea{ top:0; height:22px; }
.ns-organigrama-pagina .ns-apoyo{ margin-top:18px; padding-top:0; }
.ns-organigrama-pagina .ns-apoyo-rotulo{ margin-bottom:8px; }
@media (max-width:900px){
    .ns-organigrama-pagina .ns-rama{ padding-top:16px; }
    .ns-organigrama-pagina .ns-rama > .ns-rama-linea,
    .ns-organigrama-pagina .ns-rama:first-child > .ns-rama-linea,
    .ns-organigrama-pagina .ns-rama:last-child > .ns-rama-linea{ top:0; height:16px; }
}

/* =========================================================
   ORGANIGRAMA EN FRANJA BLANCA
   El diagrama va sobre una franja blanca mas ancha que el texto de
   la pagina, hasta 1500 px, centrada. Sobre blanco, las cajas pasan a gris claro,
   como las tarjetas de Apple. Un poco mas de aire vertical.
========================================================= */
.ns-organigrama-pagina .ns-diagrama{
    position:relative;
    left:50%;
    width:min(1500px, calc(100vw - 32px));
    margin-top:18px;
    padding:clamp(34px,4vw,54px) clamp(12px,2vw,28px);
    border-radius:28px;
    background:#fff;
    transform:translateX(-50%);
}
.ns-organigrama-pagina .ns-nodo,
.ns-organigrama-pagina .ns-nodo-direccion,
.ns-organigrama-pagina .ns-nodo-equipo,
.ns-organigrama-pagina .ns-nodo-staff,
.ns-organigrama-pagina .ns-nodo-apoyo{
    padding-top:11px;
    padding-bottom:11px;
    background:#f5f5f7;
    box-shadow:none;
}
.ns-organigrama-pagina .ns-nodo:hover{ background:#eeeef1; box-shadow:none; }
.ns-organigrama-pagina .ns-nodo-raiz,
.ns-organigrama-pagina .ns-nodo-raiz:hover{ background:#1d1d1f; box-shadow:0 10px 28px rgba(0,0,0,.18); padding-top:13px; padding-bottom:13px; }
.ns-organigrama-pagina .ns-nodo-icono,
.ns-organigrama-pagina .ns-nodo-equipo .ns-nodo-icono{ background:#fff; }
.ns-organigrama-pagina .ns-nodo strong,
.ns-organigrama-pagina .ns-nodo-direccion strong,
.ns-organigrama-pagina .ns-nodo-equipo strong{ font-size:14px; }
.ns-organigrama-pagina .ns-nodo-raiz strong{ font-size:15px; }
.ns-organigrama-pagina .ns-enlace-vertical{ height:30px; }
.ns-organigrama-pagina .og-staff-col{ gap:12px; padding-top:14px; padding-bottom:16px; }
.ns-organigrama-pagina .ns-rama{ padding-top:34px; }
.ns-organigrama-pagina .ns-rama-linea{ height:34px; }
.ns-organigrama-pagina .ns-rama:first-child > .ns-rama-linea,
.ns-organigrama-pagina .ns-rama:last-child > .ns-rama-linea{ top:12px; height:22px; }
.ns-organigrama-pagina .ns-rama:only-child > .ns-rama-linea{ top:0; height:34px; }
.ns-organigrama-pagina .ns-apoyo{ margin-top:34px; }
.ns-organigrama-pagina .ns-diagrama + .ns-cifras{ margin-top:clamp(30px,3.4vw,46px); }
@media (max-width:900px){
    .ns-organigrama-pagina .ns-rama{ padding-top:22px; }
    .ns-organigrama-pagina .ns-rama > .ns-rama-linea,
    .ns-organigrama-pagina .ns-rama:first-child > .ns-rama-linea,
    .ns-organigrama-pagina .ns-rama:last-child > .ns-rama-linea{ top:0; height:22px; }
}

/* =========================================================
   LETRA CORPORATIVA
   Inter, la tipografia de interfaz de las grandes empresas de
   tecnologia, en todo Nosotros y en la hoja de vida.
========================================================= */
.ns,
.hv{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-feature-settings:"cv11","ss01";
    -webkit-font-smoothing:antialiased;
}
.ns-organigrama-pagina .ns-nodo strong{ letter-spacing:-.01em; }
.ns-organigrama-pagina .ns-cabecera-sola h1{ font-weight:700; letter-spacing:-.01em; }

/* =========================================================
   VENTANA DE CADA AREA (organigrama)
   Al tocar una caja: que hace el area, de quien depende, que tiene a
   su cargo y quienes trabajan ahi. Estilo Apple, sin rayas.
========================================================= */
.ns-organigrama-pagina .ns-nodo[data-area]{ cursor:pointer; }
.ns-organigrama-pagina .ns-nodo[data-area]:focus-visible{ outline:2px solid #1d1d1f; outline-offset:3px; }
.ar{
    width:min(620px,calc(100vw - 24px));
    max-width:none;
    max-height:calc(100dvh - 40px);
    padding:0;
    border:0;
    border-radius:24px;
    background:#fff;
    color:#1d1d1f;
    box-shadow:0 30px 80px -20px rgba(0,0,0,.35);
    overflow:hidden;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
.ar[open]{ animation:hv-entra .3s cubic-bezier(.2,.8,.2,1) both; }
.ar.hv-saliendo{ animation:hv-sale .18s ease both; }
.ar::backdrop{ background:rgba(0,0,0,.45); backdrop-filter:blur(6px); }
.ar-caja{
    position:relative;
    max-height:calc(100dvh - 40px);
    padding:30px clamp(20px,4vw,34px) 32px;
    overflow-y:auto;
    overscroll-behavior:contain;
}
.ar .hv-cerrar{ top:14px; right:14px; width:34px; height:34px; background:#f5f5f7; box-shadow:none; }
.ar-eyebrow{
    margin:0 44px 12px 0;
    color:#86868b;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ar-cab{ display:flex; align-items:center; gap:14px; }
.ar-icono{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:#f5f5f7;
    color:#1d1d1f;
}
.ar-icono svg{ width:22px; height:22px; }
.ar-cab h2{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.ar-cab p{ margin:3px 0 0; color:#86868b; font-size:14px; }
.ar-rel{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px 20px;
    margin:20px 0 0;
    padding:14px 16px;
    border-radius:14px;
    background:#f5f5f7;
}
.ar-rel dt{ color:#86868b; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.ar-rel dd{ margin:4px 0 0; font-size:14px; font-weight:500; line-height:1.4; }
.ar-seccion{
    margin:24px 0 10px;
    color:#86868b;
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ar-funciones{ display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.ar-funciones li{
    display:grid;
    grid-template-columns:28px 1fr;
    gap:8px;
    padding:9px 0;
    font-size:14.5px;
    line-height:1.5;
}
.ar-funciones li span{ color:#86868b; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; padding-top:2px; }
.ar-equipo{ display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.ar-persona{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 12px 8px 8px;
    border:0;
    border-radius:14px;
    background:#f5f5f7;
    color:#1d1d1f;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:background-color .18s ease;
}
.ar-persona:hover{ background:#ebebef; }
.ar-persona img,
.ar-ini{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    object-fit:cover;
    object-position:center 22%;
    background:#fff;
}
.ar-ini{ display:grid; place-items:center; color:#86868b; font-size:15px; font-weight:600; }
.ar-persona-texto{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ar-persona-texto strong{ font-size:14.5px; font-weight:600; }
.ar-persona-texto small{ margin-top:2px; color:#86868b; font-size:12.5px; }
.ar-ver{ color:#0066cc; font-size:12.5px; font-weight:500; white-space:nowrap; }
.ar-vacio{ margin:0; color:#86868b; font-size:14px; }
@media (max-width:520px){
    .ar{ border-radius:20px; }
    .ar-ver{ display:none; }
    .ar-cab h2{ font-size:19px; }
}

/* Numero de seccion en la misma linea que el titulo, no encima. */
.ns-seccion-rotulo{ display:flex; align-items:baseline; gap:12px; }
.ns-seccion-rotulo .ns-indice{ flex:0 0 auto; font-size:13px; }
.ns-seccion-rotulo h2{ margin:0; }

/* =========================================================
   HOJA DE VIDA (dialog)
========================================================= */
html.hv-abierta{ overflow:hidden; }
.hv{
    width:min(920px,calc(100vw - 32px));
    max-width:none;
    max-height:calc(100dvh - 48px);
    padding:0;
    border:0;
    border-radius:22px;
    background:#fff;
    color:#08143b;
    box-shadow:0 30px 80px -20px rgba(8,20,59,.45);
    overflow:hidden;
    font-family:"Montserrat","Segoe UI",Arial,sans-serif;
}
.hv[open]{ animation:hv-entra .32s cubic-bezier(.2,.8,.2,1) both; }
.hv.hv-saliendo{ animation:hv-sale .18s ease both; }
@keyframes hv-entra{ from{ opacity:0; transform:translateY(14px) scale(.985); } }
@keyframes hv-sale{ to{ opacity:0; transform:translateY(8px) scale(.99); } }
.hv::backdrop{ background:rgba(8,14,32,.55); backdrop-filter:blur(6px); }
.hv-caja{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    height:min(720px,calc(100dvh - 48px));
}
.hv-retrato{ position:relative; height:100%; overflow:hidden; background:#eef0ee; }
.hv-retrato img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }
.hv-inicial{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#9aa5ae;
    font-size:64px;
    font-weight:600;
}
.hv-cuerpo{
    padding:44px 44px 48px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
}
.hv-cerrar{
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#08143b;
    box-shadow:0 2px 10px rgba(8,20,59,.12);
    cursor:pointer;
    transition:transform .25s ease;
}
.hv-cerrar svg{ width:18px; height:18px; }
.hv-cerrar:hover{ transform:rotate(90deg); }
.hv-eyebrow{
    margin:0;
    color:#8792a5;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.hv-nombre{
    margin:10px 0 0;
    font-size:24px;
    font-weight:600;
    line-height:1.1;
    letter-spacing:-.025em;
}
.hv-cargo{ margin:6px 0 0; color:#4f5d73; font-size:16px; }
.hv-perfil{ margin-top:18px; }
.hv-perfil p{ margin:0 0 10px; color:#4f5d73; font-size:14.5px; line-height:1.7; }
.hv-datos{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:16px 24px;
    margin:22px 0 0;
    padding:16px 18px;
    border-radius:14px;
    background:#f5f6f9;
}
.hv-datos dt{
    color:#8792a5;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.hv-datos dd{ margin:5px 0 0; font-size:14px; line-height:1.5; }
.hv-seccion{
    margin:30px 0 4px;
    color:#8792a5;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.hv-formacion{ margin:0; padding:0; list-style:none; }
.hv-formacion li{
    display:grid;
    grid-template-columns:128px 1fr;
    gap:16px;
    padding:12px 0;
}
.hv-periodo{ color:#8792a5; font-size:12.5px; }
.hv-formacion strong{ display:block; font-size:15px; font-weight:600; }
.hv-formacion div > span{ display:block; margin-top:3px; color:#4f5d73; font-size:13px; }
.hv-formacion em{
    display:inline-block;
    margin-top:6px;
    padding:2px 9px;
    border-radius:999px;
    background:#f1f3f6;
    color:#4f5d73;
    font-size:11.5px;
    font-style:normal;
    font-weight:600;
}
.hv-vacio{ margin:10px 0 0; color:#8792a5; font-size:14px; }

/* =========================================================
   ESCALA CORPORATIVA
   Quienes somos con presencia de empresa grande: titulo enorme con
   la entrada al costado, cifras grandes con marca dorada, secciones
   con peso y filas de proyecto que se recorren como un indice.
========================================================= */
.ns-ancho{ width:min(100%,1200px); }
.ns-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:var(--ns-marca);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.ns-cabecera--partida{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:end;
    gap:clamp(24px,5vw,80px);
    padding-top:clamp(20px,3vw,40px);
}
.ns-cabecera--partida h1{
    font-size:clamp(28px,3vw,38px);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-.03em;
}
.ns-cabecera--partida .ns-entrada{
    max-width:46ch;
    margin:0 0 4px;
    color:var(--ns-suave);
    font-size:16px;
    line-height:1.6;
}

.ns-quienes .ns-cifras{ margin-top:clamp(36px,4.4vw,60px); }
.ns-quienes .ns-dato{ padding-top:26px; padding-bottom:26px; }
.ns-quienes .ns-dato b{ font-size:30px; font-weight:700; }
.ns-quienes .ns-dato-texto b{ font-size:11px; }
.ns-quienes .ns-dato-texto span{ font-size:14px; color:var(--ns-tinta); font-weight:600; }

.ns-quienes .ns-seccion{ margin-top:clamp(40px,4.4vw,60px); }
.ns-quienes .ns-seccion-rotulo h2{ font-size:20px; font-weight:700; letter-spacing:-.02em; }
.ns-quienes .ns-cuerpo p{ font-size:16px; }
.ns-quienes .ns-cuerpo p:first-child{
    color:var(--ns-tinta);
    font-size:17px;
    font-weight:500;
    line-height:1.65;
    letter-spacing:-.012em;
}

/* Filas de proyecto: toda la fila es el enlace. */
.ns-lista--enlaces li{
    position:relative;
    grid-template-columns:52px minmax(0,1fr) auto;
    align-items:center;
    padding:16px 18px;
    transition:background-color .2s ease, box-shadow .2s ease;
}
.ns-lista--enlaces .ns-lista-num{ font-size:12px; }
.ns-lista--enlaces .ns-lista-texto a{ font-size:17px; font-weight:700; letter-spacing:-.015em; }
.ns-lista--enlaces .ns-lista-texto a::after{ content:""; position:absolute; inset:0; }
.ns-lista--enlaces .ns-lista-texto em{ font-size:13.5px; }
.ns-lista-ir{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:#f1f3f7;
    border-radius:50%;
    color:var(--ns-tinta);
    transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.ns-lista-ir svg{ width:18px; height:18px; }
.ns-lista--enlaces li:hover{ box-shadow:0 10px 26px -18px rgba(8,20,59,.35); }
.ns-lista--enlaces li:hover .ns-lista-texto a{ color:var(--ns-tinta); }
.ns-lista--enlaces li:hover .ns-lista-ir{
    background:var(--ns-tinta);
    color:#FFC400;
    transform:translateX(4px);
}

@media (max-width:900px){
    .ns-cabecera--partida{ grid-template-columns:1fr; align-items:start; gap:18px; }
}
@media (max-width:620px){
    .ns-lista.ns-lista--enlaces li{ grid-template-columns:34px minmax(0,1fr) auto; padding:18px 0; }
    .ns-lista-ir{ width:36px; height:36px; }
}

/* =========================================================
   PANTALLAS MEDIANAS Y CELULAR
========================================================= */
@media (max-width:900px){
    .ns-cifras{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ns-seccion{ grid-template-columns:minmax(0,1fr); gap:20px; }
    .ns-equipo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
    .hv{ width:calc(100vw - 20px); border-radius:18px; }
    .hv-caja{ grid-template-columns:1fr; height:auto; max-height:calc(100dvh - 40px); overflow-y:auto; }
    .hv-retrato{ height:auto; }
    .hv-retrato img{ aspect-ratio:4/3.4; height:auto; }
    .hv-inicial{ position:static; aspect-ratio:4/3; }
    .hv-cuerpo{ padding:26px 22px 34px; overflow:visible; }
    .hv-formacion li{ grid-template-columns:1fr; gap:4px; }
}
@media (max-width:620px){
    .ns-banda img{ height:clamp(240px,42vh,380px); }
    .ns-dato{ padding:18px 14px; }
    .ns-dato b{ font-size:26px; }
    .ns-lista li{ grid-template-columns:34px 1fr; }
    .ns-lista-texto a,.ns-lista-texto strong{ font-size:17px; }
    .ns-equipo{ gap:30px 14px; }
    .ns-persona-pie{ padding-top:12px; }
    .ns-persona-nombre{ font-size:15.5px; }
    .ns-persona-cargo{ font-size:13px; }

}
@media (prefers-reduced-motion:reduce){
    .ns-persona-foto,.ns-cara img,.hv[open],.hv.hv-saliendo{ transition:none; animation:none; }
}