/* ==========================================================================
   NEO · biblioteca de plantillas, al modo de la presentación de ANJE
   Una idea por lámina, mucho aire, un acento de color, la cifra o el
   pictograma como elemento gráfico. Lienzo 1920x1080.
   ========================================================================== */

/* ---------- Retícula ---------- */
.slide { padding: 96px 140px; }
.n-grid { position: absolute; inset: 96px 140px; }

/* Marca de sección (píldora) + titular, arriba a la izquierda */
.n-head { position: absolute; left: 140px; top: 96px; width: 1060px; }
.n-pill {
  display: inline-block; padding: 11px 24px 12px; border-radius: 999px;
  background: rgba(227, 184, 114, 0.10); border: 1px solid var(--gold-line);
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--gold);
}
.n-pill.solid { background: var(--gold); border-color: var(--gold); color: #14100A; }
.n-title {
  font-family: var(--display); font-weight: 500; font-size: 68px; line-height: 1.08;
  letter-spacing: -0.028em; color: var(--fg); margin-top: 28px;
}
.n-title .a { color: var(--gold); }
.n-sub { font-family: var(--font); font-weight: 300; font-size: 26px; line-height: 1.4; color: var(--fg2); margin-top: 20px; max-width: 900px; }
.n-source { position: absolute; right: 140px; bottom: 54px; font-size: 16px; font-style: italic; color: var(--fg3); text-align: right; max-width: 720px; line-height: 1.4; }
.n-foot { position: absolute; left: 140px; right: 140px; bottom: 96px; font-family: var(--display); font-weight: 500; font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; }
.n-foot .a { color: var(--gold); }

/* ---------- A · Portada ---------- */
.n-cover .n-kicker { position: absolute; left: 140px; top: 370px; }
.n-cover .n-big {
  position: absolute; left: 140px; top: 440px; width: 1040px;
  font-family: var(--display); font-weight: 500; font-size: 92px; line-height: 1.06; letter-spacing: -0.032em;
}
.n-cover .n-who { position: absolute; left: 140px; bottom: 110px; }
.n-cover .n-who b { display: block; font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -0.01em; }
.n-cover .n-who span { display: block; font-size: 20px; font-weight: 300; color: var(--fg2); margin-top: 6px; }
.n-cut { position: absolute; right: 120px; bottom: 0; height: 88%; }
.n-cut img { height: 100%; width: auto; object-fit: contain; object-position: bottom; }
.n-cut.left { left: 80px; right: auto; }

/* ---------- B · Declaración ---------- */
.n-say {
  position: absolute; left: 140px; right: 140px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 500; font-size: 104px; line-height: 1.04;
  letter-spacing: -0.035em; max-width: 1360px;
}
.n-say.center { text-align: center; left: 200px; right: 200px; max-width: none; }
.n-say.small { font-size: 76px; }
.n-say .a { color: var(--gold); }
.n-say-note { position: absolute; left: 140px; bottom: 150px; font-size: 26px; font-weight: 300; color: var(--fg2); max-width: 900px; line-height: 1.4; }

/* ---------- C · Cifra protagonista ---------- */
.n-figure { position: absolute; left: 140px; top: 380px; }
.n-figure .v {
  font-family: var(--display); font-weight: 700; font-size: 280px; line-height: 0.86;
  letter-spacing: -0.05em; color: var(--gold); font-variant-numeric: tabular-nums;
}
.n-figure .v small { font-size: 0.45em; letter-spacing: -0.03em; }
.n-figure .tag {
  display: inline-block; margin-top: 26px; padding: 13px 26px; border-radius: 999px;
  background: var(--gold); color: #14100A; font-family: var(--font); font-weight: 600;
  font-size: 25px; letter-spacing: -0.005em;
}
.n-figure .cap { margin-top: 18px; font-size: 22px; font-weight: 300; color: var(--fg2); max-width: 760px; }

/* Cifras secundarias, en columna a la derecha */
.n-stats { position: absolute; right: 140px; top: 380px; width: 560px; }
.n-stats .row { padding: 30px 0; border-top: 1px solid var(--hair); }
.n-stats .row:last-child { border-bottom: 1px solid var(--hair); }
.n-stats .n { font-family: var(--display); font-weight: 700; font-size: 76px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.n-stats .l { font-size: 22px; font-weight: 500; margin-top: 10px; }
.n-stats .s { font-size: 18px; font-weight: 300; color: var(--fg2); margin-top: 4px; }

/* ---------- D · Dos o tres cifras enfrentadas ---------- */
.n-duo { position: absolute; left: 140px; right: 140px; top: 400px; display: grid; gap: 90px; }
.n-duo.c2 { grid-template-columns: 1fr 1fr; }
.n-duo.c3 { grid-template-columns: repeat(3, 1fr); }
.n-duo .n { font-family: var(--display); font-weight: 700; font-size: 132px; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.n-duo .n.a { color: var(--gold); }
.n-duo .l { font-size: 26px; font-weight: 500; margin-top: 22px; }
.n-duo .s { font-size: 19px; font-weight: 300; color: var(--fg2); margin-top: 8px; line-height: 1.4; }

/* ---------- E · Pictograma ---------- */
.n-picto { position: absolute; display: flex; flex-wrap: wrap; gap: 14px; max-width: 820px; }
.n-picto svg { width: 62px; height: 92px; }
.n-picto svg.on { fill: var(--gold); }
.n-picto svg.off { fill: #26231F; }
.n-pictocard {
  position: absolute; display: inline-flex; align-items: center; gap: 44px;
  padding: 26px 40px; border-radius: 24px; background: var(--card); border: 1px solid var(--gold-soft);
}
.n-pictocard div { text-align: center; }
.n-pictocard b { display: block; font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; font-variant-numeric: tabular-nums; }
.n-pictocard span { display: block; font-size: 19px; font-weight: 300; color: var(--fg2); margin-top: 8px; }
.n-pictocard .a b, .n-pictocard .a span { color: var(--gold); }

/* ---------- F · Barras ---------- */
.n-bars { position: absolute; left: 140px; right: 140px; top: 420px; }
.n-bars .row { display: grid; grid-template-columns: 420px 1fr 160px; align-items: center; gap: 32px; padding: 26px 0; border-top: 1px solid var(--hair); }
.n-bars .row:last-child { border-bottom: 1px solid var(--hair); }
.n-bars .k { font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -0.015em; }
.n-bars .k small { display: block; font-family: var(--font); font-weight: 300; font-size: 18px; color: var(--fg2); margin-top: 6px; letter-spacing: 0; }
.n-bars .track { position: relative; height: 22px; border-radius: 11px; background: rgba(242,236,225,.06); overflow: hidden; }
.n-bars .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; background: var(--grad); transform-origin: 0 50%; }
.n-bars .fill.dim { background: #3A352F; }
.n-bars .v { font-family: var(--display); font-weight: 700; font-size: 32px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- G · Puntos numerados ---------- */
.n-points { position: absolute; left: 140px; right: 140px; top: 380px; display: grid; gap: 0; }
.n-points .p { display: grid; grid-template-columns: 116px 1fr; gap: 34px; align-items: start; padding: 30px 0; border-top: 1px solid var(--hair); }
.n-points .p:last-child { border-bottom: 1px solid var(--hair); }
.n-points .num { font-family: var(--display); font-weight: 700; font-size: 44px; color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.n-points h3 { font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1.14; letter-spacing: -0.018em; }
.n-points p { font-size: 21px; font-weight: 300; color: var(--fg2); margin-top: 8px; line-height: 1.4; }
.n-points.cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 26px; }
.n-points.cards .p { display: block; border: 1px solid var(--gold-soft); border-radius: 26px; padding: 34px 30px; background: var(--card); }
.n-points.cards .num { margin-bottom: 22px; }

/* ---------- H · Retrato y cita ---------- */
.n-quote { position: absolute; left: 140px; right: 700px; top: 50%; transform: translateY(-50%); }
.n-quote q { display: block; font-family: var(--display); font-weight: 400; font-size: 56px; line-height: 1.16; letter-spacing: -0.025em; quotes: '“' '”'; }
.n-quote .who { margin-top: 40px; }
.n-quote .who b { display: block; font-family: var(--display); font-weight: 500; font-size: 28px; }
.n-quote .who span { display: block; font-size: 19px; font-weight: 300; color: var(--fg2); margin-top: 6px; }
.n-avatars { position: absolute; left: 140px; right: 140px; bottom: 110px; display: flex; gap: 18px; }
.n-avatars figure { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--gold-soft); }
.n-avatars img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; }
.n-avatars b { display: block; font-size: 16px; font-weight: 600; }
.n-avatars span { display: block; font-size: 14px; font-weight: 300; color: var(--fg2); line-height: 1.3; }
.n-avatars em { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--gold); margin-bottom: 2px; }

/* ---------- I · Línea de tiempo ---------- */
.n-time { position: absolute; left: 140px; right: 140px; top: 440px; }
.n-time .axis { position: relative; height: 2px; background: var(--hair); margin-bottom: 44px; }
.n-time .axis i { position: absolute; left: 0; top: 0; height: 2px; background: var(--gold); transform-origin: 0 50%; }
.n-time .stops { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.n-time .stop { position: relative; padding-right: 26px; }
.n-time .stop::before { content: ""; position: absolute; top: -55px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); }
.n-time .yr { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.n-time h3 { font-size: 17px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 12px; }
.n-time p { font-size: 17px; font-weight: 300; color: var(--fg2); margin-top: 8px; line-height: 1.38; }

/* ---------- Imagen de fondo ---------- */
.n-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.n-bg img { width: 100%; height: 100%; object-fit: cover; }
.n-bg::after { content: ""; position: absolute; inset: 0; background: var(--veil, linear-gradient(90deg, #0A0A0B 0%, rgba(10,10,11,.92) 42%, rgba(10,10,11,.35) 72%, rgba(10,10,11,.15) 100%)); }
.n-bg.right::after { --veil: linear-gradient(270deg, #0A0A0B 0%, rgba(10,10,11,.92) 42%, rgba(10,10,11,.4) 74%, rgba(10,10,11,.2) 100%); }
.n-bg.full::after { --veil: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.78) 55%, #0A0A0B 100%); }

/* Objeto suelto (bodegón) */
.n-obj { position: absolute; }
.n-obj img { width: 100%; height: 100%; object-fit: contain; }

/* Logo */
.n-logo { position: absolute; right: 140px; top: 92px; height: 40px; width: auto; }

/* ---------- Ajustes de composición ---------- */
.n-bars .v { font-size: 28px; white-space: nowrap; }
.n-bars .row { grid-template-columns: 400px 1fr 200px; }
.n-quote { right: 760px; }
.n-avatars { bottom: 96px; }
.n-avatars em { font-size: 20px; }
/* cuando hay fila de avatares, el cierre va encima de ellos */
.n-foot.over { bottom: 268px; }
.n-cover .n-big .a { color: var(--gold); }
.n-cover .n-who b, .n-cover .n-who span { text-shadow: 0 2px 24px rgba(0,0,0,.8); }

/* ---------- J · Columnas enfrentadas (listas) ---------- */
.n-vs { position: absolute; left: 140px; right: 140px; top: 392px; display: grid; gap: 80px; }
.n-vs.c2 { grid-template-columns: 1fr 1fr; }
.n-vs.c3 { grid-template-columns: repeat(3, 1fr); }
.n-vs .col > .t {
  display: inline-block; padding: 10px 22px 11px; border-radius: 999px; margin-bottom: 30px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--hair-strong); color: var(--fg2);
}
.n-vs .col.a > .t { border-color: var(--gold-line); color: var(--gold); background: rgba(227,184,114,.08); }
.n-vs .col li { list-style: none; padding: 22px 0; border-top: 1px solid var(--hair); font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -0.018em; line-height: 1.2; }
.n-vs .col li:last-child { border-bottom: 1px solid var(--hair); }
.n-vs .col li small { display: block; font-family: var(--font); font-weight: 300; font-size: 19px; color: var(--fg2); margin-top: 7px; letter-spacing: 0; }
.n-vs .col.a li { color: var(--fg); }

/* ---------- K · Carriles con pasos ---------- */
.n-lanes { position: absolute; left: 140px; right: 140px; top: 400px; }
.n-lanes .lane { padding: 34px 0; border-top: 1px solid var(--hair); }
.n-lanes .lane:last-child { border-bottom: 1px solid var(--hair); }
.n-lanes .lt { font-size: 15px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg3); margin-bottom: 22px; }
.n-lanes .lane.a .lt { color: var(--gold); }
.n-lanes .steps { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.n-lanes .chip {
  padding: 15px 28px; border-radius: 999px; border: 1px solid var(--hair-strong);
  font-family: var(--display); font-weight: 500; font-size: 27px; letter-spacing: -0.015em; white-space: nowrap;
}
.n-lanes .lane.a .chip { border-color: var(--gold-line); background: rgba(227,184,114,.08); color: var(--gold); }
.n-lanes .arr { color: var(--fg3); font-size: 22px; }
.n-lanes .chip small { display: block; font-family: var(--font); font-weight: 300; font-size: 16px; color: var(--fg2); margin-top: 2px; letter-spacing: 0; }

/* ---------- L · Verbos (una palabra por columna) ---------- */
.n-verbs { position: absolute; left: 140px; right: 140px; top: 430px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 28px; }
.n-verbs .vb { padding-top: 30px; border-top: 2px solid var(--hair); }
.n-verbs .vb.a { border-top-color: var(--gold); }
.n-verbs .vb b { display: block; font-family: var(--display); font-weight: 500; font-size: 52px; letter-spacing: -0.03em; line-height: 1; }
.n-verbs .vb.a b { color: var(--gold); }
.n-verbs .vb span { display: block; font-size: 19px; font-weight: 300; color: var(--fg2); margin-top: 16px; line-height: 1.35; }

/* ---------- M · Retratos en fila ---------- */
.n-people { position: absolute; left: 140px; right: 140px; top: 372px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.n-people .pc { border-top: 2px solid var(--gold); padding-top: 32px; }
.n-people .pc img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 14%; background: var(--card2); }
.n-people .pc .inst { display: inline-block; margin-top: 26px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--gold-line); color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.n-people .pc b { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; letter-spacing: -0.02em; margin-top: 18px; }
.n-people .pc p { font-family: var(--display); font-weight: 400; font-size: 27px; line-height: 1.24; letter-spacing: -0.015em; color: var(--fg2); margin-top: 16px; }

/* ---------- N · Ecuación ---------- */
.n-eq { position: absolute; left: 140px; right: 140px; top: 400px; display: flex; align-items: center; gap: 46px; }
.n-eq .term { font-family: var(--display); font-weight: 500; font-size: 46px; letter-spacing: -0.025em; line-height: 1.12; }
.n-eq .term.a { color: var(--gold); }
.n-eq .op { font-family: var(--display); font-weight: 300; font-size: 60px; color: var(--fg3); }

/* ---------- O · Cierre ---------- */
.n-end { position: absolute; left: 140px; bottom: 150px; }
.n-end h2 { font-family: var(--display); font-weight: 500; font-size: 150px; letter-spacing: -0.04em; line-height: 1; }
.n-end p { font-family: var(--display); font-weight: 500; font-size: 34px; margin-top: 34px; }
.n-end span { display: block; font-size: 21px; font-weight: 300; color: var(--fg2); margin-top: 8px; }

/* línea de tiempo densa (7 hitos) */
.n-time.dense .yr { font-size: 26px; }
.n-time.dense h3 { font-size: 15px; margin-top: 10px; }
.n-time.dense p { font-size: 15px; margin-top: 6px; }
.n-time.dense .stop { padding-right: 20px; }

/* ---------- Correcciones de composición (pase 2) ---------- */
/* Listas de 5: más compactas para que no invadan el cierre */
.n-points.dense .p { padding: 19px 0; }
.n-points.dense h3 { font-size: 31px; }
.n-points.dense p { font-size: 19px; margin-top: 6px; }
.n-points.dense .num { font-size: 38px; }

/* El cierre nunca compite con la fuente */
.n-foot { font-size: 36px; max-width: 1480px; }

/* Cifras: nunca partir el número de su unidad */
.n-duo .n, .n-stats .n, .n-figure .v { white-space: nowrap; }

/* Verbos: caben cinco sin solaparse */
.n-verbs { gap: 22px; }
.n-verbs .vb b { font-size: 44px; line-height: 1.06; }
.n-verbs .vb span { font-size: 17px; margin-top: 12px; }

/* Barras con subtítulo bajo el titular */
.n-bars.low { top: 512px; }

/* Línea de tiempo densa: legible con siete hitos */
.n-time.dense .stop { padding-right: 16px; }
.n-time.dense .yr { font-size: 24px; }
.n-time.dense h3 { font-size: 14px; letter-spacing: 0.06em; }
.n-time.dense p { font-size: 14px; line-height: 1.32; }

/* Fichas académicas: más presencia y centradas en la altura */
.n-people { top: 420px; }
.n-people .pc b { font-size: 38px; }
.n-people .pc p { font-size: 29px; margin-top: 20px; }

/* Pictograma de personas */
.n-picto svg { width: 54px; height: 80px; }
.n-picto { max-width: 700px; gap: 12px; }

/* ---------- Pase 3 · detalle ---------- */
/* 17 · el subtítulo no debe caer sobre la línea de tiempo */
#s-claro95 .n-sub { max-width: 780px; }
/* 22 y 23 · los verbos, alineados por la línea superior */
.n-verbs .vb { display: flex; flex-direction: column; }
.n-verbs .vb b { min-height: 94px; }
/* 32 · el carril del humano ocupa su propio bloque, no una esquina */
#s-lider .n-lanes .lane.a .chip { font-size: 32px; padding: 18px 34px; }
/* 21 · la columna pasiva se lee como contraste, no como vacío */
#s-preguntar .n-vs .col:not(.a) li { color: var(--fg3); }