/* =============================================================
   Markapasos · Nuevo sistema visual (2026)
   El mundo de los posts de Markapasos: una aurora que va del azul eléctrico al violeta y al rosa,
   paneles de vidrio con borde de luz, titulares geométricos muy pesados en rosa pastel y la
   píldora rosa que resalta la palabra clave. Colores y logo del manual de marca.
   En la Home el fondo es un solo recorrido: empieza azul en la pregunta y termina rosa en la acción.
   1. Tokens · 2. Base · 3. Vidrio y botones · 4. Cabecera · 5. Intro · 6. Home · 7. Pie y avisos
   ============================================================= */

/* ============ 1. Tokens ============ */
:root {
  --n-noche: #050A3C;
  --n-noche-2: #0A1062;
  --n-azul: #000F9F;
  --n-electrico: #3945B5;
  --n-violeta: #7A3CFF;
  --n-rosa: #FF798C;
  --n-pastel: #FFC3CB;
  --n-tinta: #0A0F4A;
  --n-texto: rgba(236, 236, 255, .8);

  /* Servicios (manual): amarillo, verde, rosa y un azul claro que se lee sobre la noche */
  --n-inv: #FFC255;
  --n-cx: #7EBA72;
  --n-mkt: #FF798C;
  --n-cap: #656EC5;
  --n-web: #BFBDBA;

  --n-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --n-num: "Archivo", "Figtree", system-ui, sans-serif;
  --n-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --n-radio: 28px;

  /* Las tipografías anteriores pasan al sistema nuevo en todas las páginas */
  --titulo: var(--n-display);
  --display: var(--n-display);
  --cuerpo: var(--n-display);
  --sans: var(--n-display);
  --serif: var(--n-display);
  --script: var(--n-display);
}

/* ============ 2. Base ============ */
html:has(body.nuevo) { scrollbar-color: rgba(255, 121, 140, .75) var(--n-noche); }
html:has(body.es-home) { color-scheme: dark; }
.n-form, .nuevo .cookies { color-scheme: light; }
body.nuevo { font-family: var(--n-display); }
.nuevo ::selection { background: var(--n-rosa); color: var(--n-tinta); }
.nuevo :focus-visible { outline: 3px solid var(--n-rosa); outline-offset: 3px; }
/* Sobre superficies claras el foco rosa no alcanza 3:1: ahí va en azul marca */
.nuevo:not(.es-home) main :focus-visible, .nuevo .n-form :focus-visible { outline-color: var(--n-azul); }
.nuevo:not(.es-home) main :is(.page-hero, .article-hero, .doc-hero, .cta-band-inner, .cta-final) :focus-visible { outline-color: var(--n-rosa); }
html body.nuevo :is(h1, h2, h3) { font-family: var(--n-display); font-style: normal; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
html body.nuevo :is(h1, h2) { font-weight: 900; letter-spacing: -0.04em; line-height: .96; }
.nuevo .i-arrow { transition: transform .4s var(--n-ease); }

/* ============ 3. Vidrio y botones ============ */
/* Vidrio de los posts: translúcido, con brillo arriba y un borde de luz que va del azul al rosa */
.vidrio {
  position: relative; isolation: isolate; border-radius: var(--n-radio);
  background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .045) 52%, rgba(255, 255, 255, .09));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 40px 80px -42px rgba(2, 3, 34, .9);
}
.vidrio::before {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(160, 176, 255, .5), rgba(122, 60, 255, .14) 36%, rgba(255, 121, 140, .08) 62%, rgba(255, 121, 140, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.vidrio--claro { background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(244, 242, 255, .93)); color: var(--n-tinta); }

.n-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.4rem; padding: 0 1.6rem;
  border-radius: 999px; font: 700 1.02rem/1 var(--n-display); letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .45s var(--n-ease), box-shadow .45s var(--n-ease), background-color .3s, color .3s;
}
.n-btn:hover .i-arrow, .n-btn:focus-visible .i-arrow { transform: translateX(4px); }
.n-btn .i { width: 1.1rem; height: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-btn--rosa { background: var(--n-rosa) linear-gradient(180deg, #FF95A4, var(--n-rosa) 55%, #FF798C); color: var(--n-tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 18px 34px -18px rgba(2, 3, 34, .85); }
.n-btn--rosa:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 26px 44px -18px rgba(2, 3, 34, .9); }
.n-btn--vidrio { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.n-btn--vidrio:hover { background: rgba(255, 255, 255, .15); }
.n-btn:disabled { opacity: .6; cursor: progress; transform: none; }

.n-enlace {
  display: inline-flex; align-items: center; gap: .45rem; padding-bottom: 4px; font-weight: 700; color: #fff;
  background: linear-gradient(var(--n-rosa), var(--n-rosa)) no-repeat 0 100% / 100% 2px; transition: background-size .45s var(--n-ease);
}
.n-enlace:hover .i-arrow, a:hover .n-enlace .i-arrow { transform: translateX(4px); }
/* Área táctil de 44 px sin cambiar el subrayado */
a.n-enlace { position: relative; }
a.n-enlace::before { content: ""; position: absolute; inset: -.65rem -.3rem; }

/* La píldora rosa de los posts: resalta la palabra que importa */
.n-pill {
  display: inline-block; padding: .02em .28em .1em; border-radius: 999px; color: var(--n-tinta);
  background: linear-gradient(180deg, #FF95A4, var(--n-rosa) 58%, #FF798C);
  box-shadow: inset 0 .05em 0 rgba(255, 255, 255, .55), inset 0 -.06em .14em rgba(0, 15, 159, .25), 0 .3em .6em -.32em rgba(2, 3, 34, .7);
}

/* Botones del sistema anterior (cabecera, páginas interiores) */
.nuevo .btn { font-family: var(--n-display); letter-spacing: -0.01em; text-transform: none; }
.nuevo .btn-primary, .nuevo .btn-azul { background: var(--n-rosa) linear-gradient(180deg, #FF95A4, var(--n-rosa) 55%, #FF798C); color: var(--n-tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px -18px rgba(2, 3, 34, .8); }
.nuevo .btn-primary:hover, .nuevo .btn-azul:hover { background: #FF95A4 linear-gradient(180deg, #FF95A4, #FF95A4 55%, #FF798C); color: var(--n-tinta); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 22px 36px -18px rgba(2, 3, 34, .85); }

/* ============ 4. Cabecera ============ */
.nuevo .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; transition: background-color .4s, box-shadow .4s; }
.nuevo .site-header.is-scrolled, .nuevo:not(.es-home) .site-header, .nuevo.nav-open .site-header {
  background: rgba(6, 10, 58, .74); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.nuevo .brand img { width: 146px; }
.nuevo .nav-list > li > a { color: rgba(236, 236, 255, .82); font-weight: 600; }
.nuevo .nav-list > li > a:hover, .nuevo .nav-list > li > a[aria-current="page"] { color: #fff; }
.nuevo .nav-list > li > a::after { background: var(--n-rosa); }
.nuevo .sub-toggle { color: rgba(236, 236, 255, .7); }
.nuevo .sub-menu { background: rgba(9, 13, 72, .94); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nuevo .sub-menu a { color: rgba(236, 236, 255, .88); }
.nuevo .sub-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nuevo .nav-toggle .bars, .nuevo .nav-toggle .bars::before, .nuevo .nav-toggle .bars::after { background: #fff; }
.nuevo.nav-open .nav-toggle .bars { background: transparent; }
.nuevo .nav-cta { min-height: 2.9rem; padding: 0 1.25rem; font-size: .95rem; }
/* La barrita rosada: avance de lectura */
.nuevo .nav-progress span { background: linear-gradient(90deg, var(--n-violeta), var(--n-rosa) 40%, #FFC3CB); }
@media (max-width: 959px) {
  .nuevo .main-nav { background: #070C45; border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 50px -20px rgba(0, 0, 0, .6); }
  .nuevo .nav-list > li { border-bottom-color: rgba(255, 255, 255, .1); }
  .nuevo .sub-menu { background: transparent; border: 0; box-shadow: none; }
}

/* ============ 5. Intro: un pulso que termina en pregunta ============ */
.intro { display: none; }
html.con-intro { overflow: hidden; }
.con-intro .intro {
  position: fixed; inset: 0; z-index: 300; display: grid; align-content: center; justify-items: center; gap: clamp(.6rem, 2.4vh, 1.6rem);
  background: radial-gradient(70% 60% at 50% 42%, #0C1676 0%, #050A3C 58%, #02041F 100%); color: #fff; overflow: hidden; cursor: pointer;
  transition: transform 1.05s cubic-bezier(.76, 0, .2, 1), border-radius 1.05s cubic-bezier(.76, 0, .2, 1), opacity .6s ease;
}
.intro-pulso { width: 100%; height: min(44vh, 40vw); overflow: visible; }
.intro-linea {
  fill: none; stroke: var(--n-rosa); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 9px rgba(255, 121, 140, .8));
  animation: intro-trazo 1.1s cubic-bezier(.5, .05, .25, 1) .1s forwards;
}
.intro-punto { fill: var(--n-rosa); transform-box: fill-box; transform-origin: center; scale: 0; filter: drop-shadow(0 0 10px rgba(255, 121, 140, .85)); animation: intro-pop .5s cubic-bezier(.3, 1.7, .5, 1) 1.15s forwards; }
.intro-onda { fill: none; stroke: var(--n-rosa); stroke-width: 3; transform-box: fill-box; transform-origin: center; opacity: 0; animation: intro-onda 1.1s cubic-bezier(.2, .7, .3, 1) 1.2s forwards; }
.intro-firma { display: grid; justify-items: center; gap: clamp(.8rem, 2vh, 1.3rem); padding-inline: 1rem; }
.intro-logo { width: clamp(170px, 17vw, 236px); height: auto; opacity: 0; clip-path: inset(0 100% 0 0); animation: intro-logo .7s var(--n-ease) 1.25s forwards; }
.intro-frase { font: 800 clamp(1.45rem, 3.1vw, 2.5rem)/1.15 var(--n-display); letter-spacing: -0.03em; color: var(--n-pastel); text-align: center; text-wrap: balance; }
.intro-frase span { display: inline-block; opacity: 0; translate: 0 .45em; animation: intro-palabra .7s var(--n-ease) forwards; }
.intro-frase span:nth-child(1) { animation-delay: 1.5s; }
.intro-frase span:nth-child(2) { animation-delay: 1.58s; }
.intro-frase span:nth-child(3) { animation-delay: 1.66s; }
.intro-frase span:nth-child(4) { animation-delay: 1.74s; }
.intro-frase .intro-pill { animation-delay: 1.88s; padding: .04em .36em .12em; border-radius: 999px; color: var(--n-tinta); background: linear-gradient(180deg, #FF95A4, var(--n-rosa) 58%, #FF798C); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); }
.intro-saltar { position: absolute; left: 0; right: 0; bottom: 1.3rem; font-size: .8rem; text-align: center; color: rgba(236, 236, 255, .5); opacity: 0; animation: intro-palabra .6s ease .6s forwards; }
.con-intro .intro.sale { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 20vh 20vh; border-bottom: 8px solid var(--n-rosa); }
/* Saltar: todo queda en su estado final antes de subir */
.intro.ya * { animation-delay: 0s !important; animation-duration: .2s !important; }
/* Movimiento reducido: sin trazo ni telón; aparece y se desvanece */
.intro-suave .intro-linea { animation: none; stroke-dashoffset: 0; }
.intro-suave .intro-punto { animation: none; scale: 1; }
.intro-suave .intro-onda { display: none; }
.intro-suave .intro-logo, .intro-suave .intro-frase span, .intro-suave .intro-saltar { animation: intro-aparece .5s ease .15s forwards; translate: none; clip-path: none; }
.con-intro.intro-suave .intro.sale { transform: none; border: 0; border-radius: 0; opacity: 0; }
@keyframes intro-trazo { to { stroke-dashoffset: 0; } }
@keyframes intro-pop { to { scale: 1; } }
@keyframes intro-onda { 0% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 5.5; } }
@keyframes intro-logo { to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes intro-palabra { to { opacity: 1; translate: 0 0; } }
@keyframes intro-aparece { to { opacity: 1; } }

/* ============ 6. Home ============ */
body.nuevo.es-home { background: var(--n-noche); color: var(--n-texto); }
.es-home .n-main {
  position: relative; overflow-x: clip;
  background: linear-gradient(180deg, #050A3C 0, #06105F 12%, #0A1380 25%, #16108C 40%, #290F88 55%, #2C0F78 68%, #3E1472 84%, #5A1C70 100%);
}
.n-main .wrap { position: relative; z-index: 1; }
.n-sec { position: relative; padding-block: clamp(4rem, 8vw, 6.5rem); }
.n-hero + .n-sec { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.n-sec::before { content: ""; position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; background: var(--n-brillo, none); }
html body.nuevo .n-sec h2 { font-size: clamp(2.3rem, 4.8vw, 4rem); color: #fff; }
.n-sec-lead { margin-top: 1.1rem; max-width: 38ch; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--n-texto); }
.n-sec-head { max-width: 44rem; }

/* ---- Recorrido lateral ---- */
.nuevo .rail ol::before { background: rgba(255, 255, 255, .2); }
.nuevo .rail a, .nuevo .rail.is-dark a { color: rgba(236, 236, 255, .62); font-family: var(--n-display); font-weight: 700; font-size: .8rem; }
.nuevo .rail i { border-radius: 50%; background: var(--n-noche); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.nuevo .rail a[aria-current="step"], .nuevo .rail.is-dark a[aria-current="step"] { color: #fff; }
.nuevo .rail a[aria-current="step"] i { background: var(--n-rosa); box-shadow: 0 0 0 4px rgba(255, 121, 140, .2); }

/* ---- Portada ---- */
.n-hero {
  position: relative; display: grid; align-items: center; overflow: clip;
  margin-top: calc(-1 * var(--header-h, 76px)); padding: calc(var(--header-h, 76px) + clamp(1.5rem, 5vh, 3.5rem)) 0 clamp(3.5rem, 8vh, 5rem);
  min-height: min(100svh, 1000px);
}
.n-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -16px); transition: translate 1.4s var(--n-ease); }
.n-aurora i { position: absolute; border-radius: 50%; }
.n-a1 { width: 70vw; height: 70vw; left: -22vw; top: -34vw; background: radial-gradient(closest-side, rgba(57, 69, 181, .55), rgba(57, 69, 181, 0)); }
.n-a2 { width: 62vw; height: 62vw; right: -16vw; top: -10vw; background: radial-gradient(closest-side, rgba(122, 60, 255, .42), rgba(122, 60, 255, 0)); }
.n-a3 { width: 46vw; height: 46vw; right: 2vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(255, 121, 140, .26), rgba(255, 121, 140, 0)); }

.n-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
html body.nuevo .n-h1 { font-size: clamp(2.6rem, 5.4vw + .6rem, 5.6rem); font-weight: 900; line-height: .95; letter-spacing: -0.04em; color: var(--n-pastel); text-wrap: initial; }
.n-linea { display: block; }
.n-h1 .n-pill { margin-top: .08em; }
.n-lead { margin-top: 1.6rem; max-width: 40ch; font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; color: rgba(240, 240, 255, .86); }
.n-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* Escena: los directivos recortados se paran sobre un gran panel de vidrio; sus cabezas salen por arriba */
.n-escena { position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 1100 / 960; }
@media (min-width: 1000px) { .n-escena { max-width: 640px; justify-self: end; } }
/* Desde 1280 px la escena crece más allá de su columna, hacia el margen derecho (nunca fuera de la pantalla) */
@media (min-width: 1280px) {
  .n-escena { --sale: clamp(0px, (100vw - 1280px) / 2.6, 60px); width: min(114%, 680px); max-width: none; justify-self: start; margin-left: calc(100% - min(114%, 680px) + var(--sale)); }
}
.n-panel {
  position: absolute; inset: 22% 0 0; border-radius: 40px; overflow: hidden;
  background: radial-gradient(80% 70% at 50% 108%, rgba(255, 121, 140, .5), rgba(255, 121, 140, 0) 70%), linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 50%, rgba(140, 120, 255, .14));
}
.n-recorte { position: absolute; inset: 0; z-index: 1; clip-path: inset(-12% 0 0 0 round 0 0 40px 40px); translate: calc(var(--px, 0) * 7px) calc(var(--py, 0) * 5px); transition: translate 1s var(--n-ease); }
.n-recorte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: drop-shadow(0 26px 36px rgba(3, 4, 40, .5)); }
.personas-siluetas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.persona-link { -webkit-tap-highlight-color: transparent; }
.persona-link path { fill: transparent; stroke: transparent; stroke-width: 6; stroke-linejoin: round; pointer-events: visibleFill; cursor: pointer; }
.persona-link:focus { outline: none; }
.persona-link:focus-visible path { stroke: var(--n-rosa); }
.persona-tag {
  position: absolute; z-index: 5; display: grid; gap: .15rem; margin: 0; padding: .65rem .95rem .7rem; border-radius: 16px; white-space: nowrap; pointer-events: none;
  background: rgba(8, 12, 70, .74); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 40px -20px rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .3s, transform .5s var(--n-ease);
}
.persona-tag strong { font: 800 1rem/1.15 var(--n-display); letter-spacing: -0.01em; color: #fff; }
.persona-tag span { font-size: .82rem; font-weight: 600; color: var(--n-pastel); }
.persona-tag--jd { left: -3%; top: 17%; transform: translateX(-10px); }
.persona-tag--sg { right: -3%; top: 38%; transform: translateX(10px); }
[data-activa="jd"] .persona-tag--jd, [data-activa="sg"] .persona-tag--sg { opacity: 1; transform: none; }

.n-chip { position: absolute; z-index: 4; color: #fff; translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); transition: translate 1s var(--n-ease); }
.n-chip--anos { left: -8%; top: 58%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; width: 16.5rem; padding: 1rem 1.2rem; border-radius: 20px; }
.n-chip--anos strong { font: 800 2.7rem/1 var(--n-num); font-stretch: 125%; letter-spacing: -0.03em; color: var(--n-pastel); }
.n-chip--anos span { font-size: .88rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .88); }
.n-chip--metodo { right: -4%; bottom: 6%; padding: .4rem; border-radius: 999px; }
.n-chip--metodo ol { display: flex; gap: .2rem; }
.n-chip--metodo li { padding: .55rem .85rem; border-radius: 999px; font-size: .88rem; font-weight: 700; color: rgba(255, 255, 255, .72); transition: background-color .5s, color .5s, box-shadow .5s; }
.n-chip--metodo li.is-on { color: var(--n-tinta); background: linear-gradient(180deg, #FF95A4, var(--n-rosa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }

/* Entrada de la portada: una sola coreografía, al terminar la intro o al cargar */
.n-linea, .n-entra { transition: opacity .9s var(--n-ease), transform 1.1s var(--n-ease), filter .9s var(--n-ease); transition-delay: calc(var(--i, 0) * 90ms + 80ms); }
.n-h1 .n-pill { transition: clip-path 1s var(--n-ease) .5s; }
.n-panel { transition: clip-path 1.2s var(--n-ease) .1s; }
.n-recorte img { transition: opacity 1s var(--n-ease) .25s, transform 1.3s var(--n-ease) .25s; }
.n-chip { transition: translate 1s var(--n-ease), opacity .8s var(--n-ease) .7s, transform 1s var(--n-ease) .7s; }
.n-chip--metodo { transition-delay: 0s, .85s, .85s; }
.js:not(.hero-on) .n-linea, .js:not(.hero-on) .n-entra { opacity: 0; transform: translateY(36px); filter: blur(8px); }
.js:not(.hero-on) .n-h1 .n-pill { clip-path: inset(0 100% 0 0 round 999px); }
.js:not(.hero-on) .n-panel { clip-path: inset(100% 0 0 0 round 40px); }
/* La foto queda pintada desde el inicio (debajo de la intro) para que Google mida la carga real; solo sube al entrar */
.js:not(.hero-on) .n-recorte img { transform: translateY(6%); }
.js:not(.hero-on) .n-chip { opacity: 0; transform: translateY(18px); }
.n-h1 .n-pill { clip-path: inset(0 0 0 0 round 999px); }
.n-panel { clip-path: inset(0 0 0 0 round 40px); }

@media (min-width: 1000px) {
  .n-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, 3vw, 3.5rem); }
}
@media (max-width: 999px) {
  .n-hero { min-height: 0; }
  .n-hero-grid { gap: 1.6rem; }
  .n-escena { max-width: 560px; }
  .n-chip--anos { left: -1%; top: auto; bottom: 15%; width: 12rem; padding: .65rem .8rem; gap: .6rem; border-radius: 20px; }
  .n-chip--anos strong { font-size: 1.75rem; }
  .n-chip--anos span { font-size: .74rem; line-height: 1.25; }
  .n-chip--metodo { left: 0; right: 0; bottom: -1.6rem; width: max-content; margin-inline: auto; }
  .n-chip--metodo li { padding: .5rem .7rem; font-size: .8rem; }
  .persona-tag--jd { left: 0; }
  .persona-tag--sg { right: 0; }
}

/* ---- Soluciones ---- */
.n-svc { --n-brillo: radial-gradient(45% 55% at 6% 40%, rgba(57, 69, 181, .22), transparent 70%); }
.n-svc-grid { display: grid; gap: 2.6rem; }
.n-svc-head .n-enlace { margin-top: 1.8rem; }
.n-svc-lista { display: grid; gap: .7rem; }
.n-svc-lista a {
  overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "orbe titulo ir" "orbe texto ir"; column-gap: 1.4rem; row-gap: .45rem; align-items: center;
  padding: 1.5rem 1.6rem; border-radius: 28px; transition: background-color .4s, box-shadow .4s, transform .6s var(--n-ease);
}
.n-svc-lista a::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(440px circle at var(--mx, 20%) var(--my, 50%), color-mix(in srgb, var(--c) 34%, transparent), transparent 62%); }
.n-svc-lista a:hover, .n-svc-lista a:focus-visible { transform: translateX(6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -32px rgba(0, 0, 0, .7); }
.n-svc-lista a:hover::after, .n-svc-lista a:focus-visible::after { opacity: 1; }
.n-orbe { grid-area: orbe; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .45rem color-mix(in srgb, var(--c) 72%, #fff); transition: transform .6s var(--n-ease); }
.n-svc-lista a:hover .n-orbe { transform: scale(1.1); }
html body.nuevo .n-svc-lista h3 { grid-area: titulo; font-size: clamp(1.45rem, 2.5vw, 2.2rem); line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
.n-svc-lista p { grid-area: texto; max-width: 52ch; font-size: 1rem; line-height: 1.5; color: var(--n-texto); }
.n-ir { grid-area: ir; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background-color .35s, color .35s, box-shadow .35s; }
.n-svc-lista a:hover .n-ir, .n-svc-lista a:focus-visible .n-ir { background: var(--c); color: var(--n-tinta); box-shadow: none; }
@media (min-width: 1000px) {
  .n-svc-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 4rem; align-items: start; }
  .n-svc-head { position: sticky; top: calc(var(--header-h, 76px) + 3rem); }
}
@media (max-width: 599px) {
  .n-svc-lista a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orbe titulo" "texto texto"; padding: 1.3rem 1.2rem; column-gap: 1rem; }
  .n-ir { display: none; }
  .n-orbe { width: 2.6rem; height: 2.6rem; }
}

/* ---- Método ---- */
.n-metodo { --n-brillo: radial-gradient(45% 50% at 88% 50%, rgba(122, 60, 255, .26), transparent 70%); }
.n-metodo-panel { display: grid; gap: 2rem; padding: clamp(1.3rem, 3.6vw, 3.4rem); border-radius: 40px; }
.nuevo .n-pasos { margin-top: 1.8rem; gap: .35rem; }
.nuevo .n-pasos .paso-btn { border-radius: 16px; padding: .9rem 1rem; color: #fff; }
.nuevo .n-pasos .paso-btn:hover { background: rgba(255, 255, 255, .07); }
.nuevo .n-pasos .paso-n { align-self: start; justify-self: start; font-family: var(--n-num); font-stretch: 125%; font-weight: 800; font-size: .95rem; line-height: 1; padding: .3rem .45rem; border-radius: 999px; color: rgba(255, 195, 203, .88); }
.nuevo .n-pasos .paso-txt b { font-family: var(--n-display); font-weight: 800; font-size: 1.3rem; color: #fff; }
.nuevo .n-pasos .paso-txt span { color: var(--n-texto); }
.nuevo .n-pasos .paso.is-activo .paso-btn { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .3); }
.nuevo .n-pasos .paso.is-activo .paso-n { color: var(--n-tinta); background: var(--n-rosa); text-decoration: none; }
/* El lienzo no es otra tarjeta: es la retícula de puntos sobre el mismo vidrio, que se desvanece en los bordes */
.n-lienzo { position: relative; margin: 0; aspect-ratio: 1.15; }
.n-lienzo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.3px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent);
}
.n-lienzo-cap { position: absolute; left: 0; top: 0; z-index: 2; font-size: .85rem; font-weight: 600; color: rgba(236, 236, 255, .6); }
.n-lienzo-cap b { margin-left: .35rem; color: #fff; }
.nuevo .n-lienzo .punto { background: rgba(255, 255, 255, .88); }
.nuevo .n-lienzo .puntos[data-step="0"] .punto:nth-child(3n) { background: var(--n-cap); }
.nuevo .n-lienzo .puntos[data-step="0"] .punto:nth-child(5n) { background: rgba(255, 255, 255, .4); }
.nuevo .n-lienzo .punto.es-clave, .nuevo .n-lienzo .puntos[data-step="3"] .punto.es-punta { background: var(--n-rosa); box-shadow: 0 0 0 5px rgba(255, 121, 140, .2); }
@media (min-width: 1000px) {
  .n-metodo-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: center; }
}

/* ---- Evidencia ---- */
.n-cifras { --n-brillo: radial-gradient(40% 55% at 12% 60%, rgba(255, 121, 140, .14), transparent 70%); }
.n-cifras { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.n-kpis { display: grid; margin-top: 2.8rem; padding: clamp(.6rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 2.6rem); border-radius: 36px; }
.n-kpis li { display: grid; gap: .7rem; padding-block: 1.6rem; }
.n-kpis li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
.n-kpis strong { font: 800 clamp(2.6rem, 4.3vw, 3.8rem)/.95 var(--n-num); font-stretch: 125%; letter-spacing: -0.035em; color: var(--n-pastel); font-variant-numeric: tabular-nums; }
.n-kpis span { font-size: 1.08rem; font-weight: 600; color: var(--n-texto); }
@media (min-width: 900px) {
  .n-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .n-kpis li { padding: 2rem clamp(1rem, 2.4vw, 2.4rem); }
  .n-kpis li:first-child { padding-left: 0; }
  .n-kpis li + li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
}

/* ---- Clientes ---- */
.n-clientes { padding-block: clamp(2rem, 4vw, 3rem) clamp(.5rem, 2vw, 1.5rem); }
.n-clientes-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.2rem; }
html body.nuevo .n-clientes h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.n-clientes-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.n-marquesina { position: relative; z-index: 1; padding-block: .6rem 1.4rem; }
.nuevo .n-marquesina li { width: clamp(150px, 14vw, 196px); }

/* ---- Insights ---- */
.n-ideas { --n-brillo: radial-gradient(42% 50% at 92% 35%, rgba(255, 121, 140, .22), transparent 70%); }
.n-ideas-lista { display: grid; gap: 1.1rem; margin-top: 3rem; }
.n-idea a {
  display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; height: 100%; padding: .75rem .75rem 1.4rem; border-radius: 28px;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: background-color .4s, transform .6s var(--n-ease), box-shadow .4s;
}
.n-idea a:hover, .n-idea a:focus-visible { background: rgba(255, 255, 255, .11); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -34px rgba(0, 0, 0, .7); }
.n-idea-foto { display: block; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; }
.n-idea-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--n-ease); }
.n-idea a:hover .n-idea-foto img { transform: scale(1.05); }
.n-idea h3, .n-idea-pie { margin-inline: .65rem; }
.n-idea h3 { margin-top: .3rem; }
.n-idea-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; }
.n-idea-cat { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; color: var(--n-texto); }
.n-idea-cat i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--c); }
html body.nuevo .n-idea h3 { font-size: 1.28rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
html body.nuevo .n-idea--grande h3 { font-size: clamp(1.4rem, 2.1vw, 1.85rem); line-height: 1.12; }
@media (min-width: 900px) {
  .n-ideas-lista { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .n-idea--grande { grid-row: span 2; }
  .n-idea--grande .n-idea-foto { aspect-ratio: 4 / 3; }
  .n-idea:not(.n-idea--grande) a { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: .6rem; padding: .75rem; }
  .n-idea:not(.n-idea--grande) .n-idea-foto { grid-row: 1 / -1; aspect-ratio: auto; min-height: 15rem; }
  .n-idea:not(.n-idea--grande) .n-idea-pie { margin-bottom: .6rem; }
}

/* ---- Acción ---- */
.n-accion { --n-brillo: radial-gradient(60% 70% at 74% 62%, rgba(255, 121, 140, .32), transparent 72%), radial-gradient(40% 40% at 8% 20%, rgba(122, 60, 255, .2), transparent 70%); padding-bottom: clamp(5rem, 10vw, 8rem); }
.n-accion-grid { display: grid; gap: 2.6rem; }
.n-accion h2 .n-pill { margin-top: .08em; }
.n-frase { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 700; font-style: italic; color: var(--n-pastel); }
.n-equipo { margin: 0; }
.n-equipo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px -34px rgba(2, 3, 34, .85); }
.n-form { padding: clamp(1.3rem, 3vw, 2.4rem); border: 0; border-radius: 28px; color: var(--n-tinta); }
.n-form .form-grid { gap: 1rem; }
.nuevo .n-form .field label { font-size: .88rem; font-weight: 700; color: var(--n-tinta); }
.nuevo .n-form .field :is(input, select, textarea) { border-radius: 14px; border: 1.5px solid rgba(10, 15, 74, .15); background: #fff; color: var(--n-tinta); }
.nuevo .n-form .field :is(input, select, textarea):hover { border-color: rgba(10, 15, 74, .3); }
.nuevo .n-form .field :is(input, select, textarea):focus { border-color: var(--n-violeta); box-shadow: 0 0 0 4px rgba(122, 60, 255, .18); }
.nuevo .n-form .check { color: var(--texto); }
.nuevo .n-form .check input { accent-color: var(--n-violeta); }
.nuevo .n-form .check a { color: var(--n-azul); }
.n-form .n-btn { width: 100%; margin-top: .3rem; }
/* Enviando: el botón muestra que la solicitud está en camino */
.n-form .is-enviando .n-btn .i { animation: n-envia .9s var(--n-ease) infinite alternate; }
@keyframes n-envia { to { transform: translate(5px, -5px); opacity: .4; } }
.nuevo .n-form .form-done h3 { color: var(--n-tinta); }
.nuevo .n-form .form-done .ficha-icon { background: var(--n-rosa); color: var(--n-tinta); }
@media (min-width: 640px) { .n-form .form-grid { grid-template-columns: 1fr 1fr; } .n-form .full { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .n-accion-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "copia form" "foto form"; column-gap: 4rem; row-gap: 2rem; align-items: center; }
  .n-accion-copy { grid-area: copia; align-self: end; }
  .n-form { grid-area: form; }
  .n-equipo { grid-area: foto; align-self: start; }
}

/* ============ 7. Páginas interiores ============
   La portada de cada página entra en la aurora; el contenido se lee sobre superficies claras
   (blanco y un lavanda muy suave) con los mismos titulares, la píldora rosa y botones. */
:root {
  /* Colores de servicio del manual, iguales en todo el sitio */
  --inv: #FFC255; --cx: #7EBA72; --mkt: #FF798C; --cap: #000F9F;
  --sobre-inv: #0A0F4A; --sobre-cx: #0A0F4A; --sobre-mkt: #0A0F4A; --sobre-cap: #FFFFFF;
  --c-inv: #FFC255; --c-cx: #7EBA72; --c-mkt: #FF798C; --c-cap: #656EC5; --c-web: #BFBDBA;
}
:root { --papel: #F3F2FD; --fondo-suave: #F3F2FD; --fondo-lila: #ECEBFC; --borde: #E3E1F5; --texto: #43476A; --grafito: #262B52; --suave: #62668A; }
.nuevo:not(.es-home) .site-header { background: rgba(5, 10, 60, .96); }
html body.nuevo:not(.es-home) :is(h1, h2, h3) { color: var(--n-azul); }

/* Resaltado: la píldora rosa de los posts, también cuando el texto ocupa dos líneas */
.nuevo h1 em, .nuevo h1 .hl {
  font-style: normal; color: var(--n-tinta); padding: 0 .22em .04em; border-radius: .6em;
  background: var(--n-rosa) linear-gradient(180deg, #FF95A4, var(--n-rosa) 58%, #FF798C);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Subtítulos y titulares de artículo: énfasis sin píldora, para no saturar */
.nuevo .page-sub em { font-style: normal; font-weight: 700; color: var(--n-pastel); background: none; padding: 0; }
.nuevo .article-hero h1 em { color: var(--n-pastel); background: none; padding: 0; box-shadow: none; }

/* Etiquetas sobre los títulos: el título habla solo */
.nuevo :is(.kicker, .eyebrow):has(+ :is(h1, h2)) { display: none; }
.nuevo :is(.kicker, .eyebrow) { font-family: var(--n-display); font-size: .82rem; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* Portadas interiores en la aurora */
.nuevo .page-hero, .nuevo .article-hero, .nuevo .doc-hero {
  position: relative; isolation: isolate; overflow: clip; color: var(--n-texto);
  background: radial-gradient(60% 90% at 0% 0%, rgba(57, 69, 181, .48), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(122, 60, 255, .36), transparent 70%), radial-gradient(40% 60% at 78% 110%, rgba(255, 121, 140, .18), transparent 70%), var(--n-noche);
}
.nuevo .page-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3.5rem, 6vw, 5.5rem); }
.nuevo .article-hero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem); }
html body.nuevo :is(.page-hero, .article-hero, .doc-hero) h1 { color: var(--n-pastel); font-weight: 900; letter-spacing: -0.04em; }
html body.nuevo .article-hero h1 { color: #fff; }
.nuevo :is(.page-hero, .article-hero) :is(.page-sub, .page-intro, p) { color: rgba(240, 240, 255, .86); }
.nuevo .page-hero .page-sub { color: #fff; }
.nuevo :is(.page-hero, .cta-band, .cta-final) .btn-text { color: #fff; border-bottom-color: var(--n-rosa); }
.nuevo .article-hero .breadcrumb, .nuevo .article-hero .post-meta { color: rgba(236, 236, 255, .7); }
.nuevo .article-hero .breadcrumb a:hover { color: #fff; }
.nuevo .article-hero .post-meta a { color: #fff; }
.nuevo .post-cat { font-size: .85rem; letter-spacing: 0; text-transform: none; }
.nuevo .article-hero .post-cat { color: var(--n-pastel); }
.nuevo .post-cat::before { border-radius: 50%; }
.nuevo .page-hero .family-card {
  background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); border: 0; border-radius: 28px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .3), 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.nuevo .page-hero .family-title { color: #fff; font-size: .95rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
.nuevo .page-hero .family-card li { grid-template-columns: .9rem 2.2rem 1fr; background: rgba(255, 255, 255, .08); border-left: 0; }
.nuevo .page-hero .family-card li::before, .nuevo .area::before { content: ""; width: .9rem; height: .9rem; border-radius: 50%; background: var(--c); }
.nuevo .page-hero .family-card li[style*="--azul"] { --c: var(--n-cap) !important; }
.nuevo .page-hero .family-card strong { font-family: var(--n-num); font-stretch: 125%; color: var(--n-pastel); }
.nuevo .page-hero .family-card span, .nuevo .page-hero .family-note { color: rgba(240, 240, 255, .85); }
.nuevo .page-hero-media:not(.is-cutout)::before { display: none; }
.nuevo .page-hero-media:not(.is-cutout) img { border-radius: 28px; box-shadow: 0 0 0 8px rgba(255, 255, 255, .1), 0 0 0 9.5px rgba(255, 121, 140, .5), 0 40px 70px -36px rgba(0, 0, 0, .8); }
.nuevo .page-hero-media .script-note, .nuevo .page-hero-media .nota-mano { color: var(--n-pastel); font-family: var(--n-display); font-weight: 700; font-style: italic; transform: none; }

/* Las portadas interiores se ven desde el primer pintado: no esperan al JavaScript (velocidad de carga) */
.nuevo :is(.page-hero, .article-hero) [data-reveal] { opacity: 1; transform: none; }

/* Bandas de cierre: el tramo rosa del recorrido */
.nuevo .cta-band-inner, .nuevo .cta-final {
  background: radial-gradient(70% 120% at 100% 100%, rgba(255, 121, 140, .32), transparent 60%), radial-gradient(60% 100% at 0% 0%, rgba(57, 69, 181, .55), transparent 70%), linear-gradient(120deg, #0A1062, #24157E 60%, #3B2196);
  color: #fff;
}
.nuevo .cta-band-inner { border-radius: 36px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 40px 80px -46px rgba(10, 16, 98, .9); }
.nuevo .cta-band-inner::after { display: none; }
html body.nuevo :is(.cta-band, .cta-final) h2 { color: #fff; }
.nuevo .cta-band p, .nuevo .cta-final p { color: rgba(255, 255, 255, .88); }
/* En los h2 (también en las bandas de cierre) el énfasis no lleva píldora: una sola por página, en el titular */
.nuevo h2 em, .nuevo h2 .hl, .nuevo :is(.cta-band, .cta-final) h2 em { font-style: normal; color: inherit; background: none; padding: 0; box-shadow: none; }
.nuevo .cta-band .btn-primary { background: var(--n-rosa) linear-gradient(180deg, #FF95A4, var(--n-rosa) 55%, #FF798C); color: var(--n-tinta); }

/* Títulos con píldora: más aire entre líneas para que no se toquen */
html body.nuevo.v2 :is(h1, h2):has(em, .hl) { line-height: 1.22; }

/* Áreas de servicio (página Servicios): un orbe del color del área en vez de franja lateral */
.nuevo .area { position: relative; border-left: 0; padding-left: 3.1rem; box-shadow: inset 0 0 0 1px var(--borde); }
.nuevo .area::before { position: absolute; left: 1.2rem; top: 50%; translate: 0 -50%; }
.nuevo .area span { font-family: var(--n-display); font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--suave); }
.nuevo .area--origen { background: linear-gradient(120deg, #0A1062, #3945B5); box-shadow: none; }
.nuevo .area--origen span { color: rgba(255, 255, 255, .8); }

/* Servicios: cinco barras en una sola fila (Marketing Digital primero) */
.nuevo .barras-grafica { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 2.2vw, 2rem); }
.nuevo .barra { min-width: 0; }
/* En el celular la gráfica se vuelve horizontal: cada área es una fila con su barra */
@media (max-width: 639px) {
  .nuevo .barras-grafica { grid-template-columns: 1fr; gap: .7rem; }
  .nuevo .barra { grid-template-rows: none; gap: .35rem; text-align: left; }
  .nuevo .barra-col { order: 2; height: 2.75rem; border-bottom: 0; }
  .nuevo .barra-fill { width: var(--alto); height: 100%; align-items: center; justify-content: flex-end; padding: 0 .8rem; border-radius: 4px 14px 14px 4px; transition: width 1s var(--n-ease), opacity .3s; }
  .js .nuevo .servicios-viz:not(.is-visto) .barra-fill { width: 6%; height: 100%; }
  .nuevo .barra-fill .i { width: 22px; height: 22px; }
  .nuevo .barra-nombre { order: 1; font-size: .92rem; }
  .nuevo .barra:hover .barra-fill, .nuevo .barra.is-activa .barra-fill { transform: none; }
}
/* Barra de Capacitación: su azul claro lleva el ícono en tinta (el blanco no llegaba a 3:1) */
.nuevo .barra[data-svc="cap"] { --sobre: var(--n-tinta); }

/* Lectura: tarjetas, fichas y texto sobre claro */
.nuevo .btn-text { color: var(--n-azul); border-bottom-color: var(--n-rosa); }
.nuevo .btn-linea { color: var(--n-azul); box-shadow: inset 0 0 0 2px var(--n-azul); }
.nuevo .btn-linea:hover { background: var(--n-azul); color: #fff; }
.nuevo .form-card { border-radius: 28px; border-color: var(--borde); box-shadow: 0 40px 80px -48px rgba(2, 3, 34, .5); }
.nuevo .skip-link, .nuevo .nav-toggle { border-radius: 14px; }
.nuevo .field input:focus, .nuevo .field select:focus, .nuevo .field textarea:focus { border-color: var(--n-violeta); box-shadow: 0 0 0 4px rgba(122, 60, 255, .16); }
.nuevo .check input { accent-color: var(--n-violeta); }

/* ============ 7b. Páginas de vitrina oscuras (Clientes, Insights, Diseño web) ============
   Mismo mundo que la Home: el fondo es un recorrido de la noche al violeta, con vidrio y titulares pastel. */
body.pagina-oscura { background: var(--n-noche); color: var(--n-texto); }
.pagina-oscura main { position: relative; overflow-x: clip; background: linear-gradient(180deg, #050A3C 0, #06105F 18%, #0B1380 42%, #1E0F8A 68%, #331080 100%); }
.pagina-oscura main .page-hero { background: radial-gradient(60% 90% at 0% 0%, rgba(57, 69, 181, .45), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(122, 60, 255, .32), transparent 70%), transparent; }
html body.nuevo.pagina-oscura :is(h1, h2, h3) { color: #fff; }
html body.nuevo.pagina-oscura h1 { color: var(--n-pastel); }
html body.nuevo.pagina-oscura .cta-band h2, html body.nuevo.pagina-oscura .n-idea h3, html body.nuevo.pagina-oscura .n-svc-lista h3 { color: #fff; }
.nuevo.pagina-oscura main :focus-visible { outline-color: var(--n-rosa); }
.pagina-oscura .cta-band { background: transparent; }
.n-titulo-sec { max-width: 44rem; margin-bottom: 2.4rem; }
.n-titulo-sec .n-sec-lead { margin-top: .9rem; }

/* ---- Clientes ---- */
.n-clientes-hero .page-hero-inner { align-items: center; }
.n-sectores { display: grid; gap: 1.2rem; width: min(100%, 440px); padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: 28px; color: #fff; }
.n-sectores-total { display: flex; align-items: baseline; gap: .8rem; }
.n-sectores-total strong { font: 800 clamp(3rem, 6vw, 4.4rem)/.9 var(--n-num); font-stretch: 125%; letter-spacing: -0.03em; color: var(--n-pastel); }
.n-sectores-total span { font-size: 1rem; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .86); }
.n-sectores ul { display: grid; gap: .35rem; }
.n-sectores button {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: 100%;
  min-height: 2.75rem; padding: .55rem .9rem; border-radius: 14px; text-align: left; color: #fff; isolation: isolate; transition: background-color .3s;
}
.n-sectores button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 121, 140, .38), rgba(122, 60, 255, .22)); transform: scaleX(var(--v)); transform-origin: left; transition: transform 1.2s var(--n-ease); }
.js:not(.hero-on) .n-sectores button::before { transform: scaleX(0); }
.n-sectores button:hover { background: rgba(255, 255, 255, .08); }
.n-sectores button span { font-weight: 700; font-size: .98rem; }
.n-sectores button b { font: 800 1.1rem/1 var(--n-num); font-stretch: 125%; color: var(--n-pastel); }
.n-logos-head { display: grid; gap: 1.4rem; margin-bottom: 2.2rem; }
.n-filtros { display: flex; flex-wrap: wrap; gap: .5rem; }
.nuevo .n-filtros .chip-sector { min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 0; font-family: var(--n-display); font-weight: 700; font-size: .92rem; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .3s, color .3s; }
.nuevo .n-filtros .chip-sector b { margin-left: .35rem; font-family: var(--n-num); font-stretch: 125%; color: var(--n-pastel); }
.nuevo .n-filtros .chip-sector:hover { background: rgba(255, 255, 255, .14); }
.nuevo .n-filtros .chip-sector[aria-pressed="true"] { color: var(--n-tinta); background: var(--n-rosa) linear-gradient(180deg, #FF95A4, var(--n-rosa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.nuevo .n-filtros .chip-sector[aria-pressed="true"] b { color: var(--n-tinta); }
.nuevo .n-matriz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.nuevo .n-matriz li { overflow: hidden; border: 0; border-radius: 20px; background: #fff; padding: 0; box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .7); transition: transform .5s var(--n-ease), box-shadow .5s var(--n-ease); }
.nuevo .n-matriz li:hover { transform: translateY(-4px); box-shadow: 0 28px 46px -24px rgba(0, 0, 0, .8); }
/* Los logos traen un marco dibujado en la imagen: se recorta para que no haya doble borde */
.nuevo .n-matriz img, .n-marquesina img { width: 100%; height: auto; transform: scale(1.14); }
.n-marquesina li { overflow: hidden; border-radius: 18px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 18px 36px -22px rgba(0, 0, 0, .65); }
.n-marquesina img { border-radius: 0; background: transparent; padding: 0; box-shadow: none; }
@media (min-width: 640px) { .nuevo .n-matriz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .nuevo .n-matriz { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

/* ---- Insights ---- */
.n-ideas-hero .container { display: grid; gap: 2.4rem; }
.n-ideas-intro { max-width: 46rem; }
.n-portada-art {
  display: grid; gap: 1.4rem; padding: clamp(.8rem, 1.6vw, 1.1rem); border-radius: 34px; color: #fff;
  transition: transform .6s var(--n-ease), box-shadow .5s var(--n-ease);
}
.n-portada-art:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
.n-portada-foto { display: block; overflow: hidden; border-radius: 24px; aspect-ratio: 16 / 10; }
.n-portada-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--n-ease); }
.n-portada-art:hover .n-portada-foto img { transform: scale(1.04); }
.n-portada-txt { display: grid; align-content: center; gap: 1rem; padding: .4rem clamp(.4rem, 2vw, 1.6rem) 1rem; }
html body.nuevo .n-portada-txt h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.04; color: #fff; }
.n-portada-txt p { font-size: 1.08rem; line-height: 1.55; color: var(--n-texto); max-width: 52ch; }
.n-portada-txt .n-btn { justify-self: start; margin-top: .4rem; }
.n-meta { font-size: .88rem; color: rgba(236, 236, 255, .7); }
@media (min-width: 1000px) {
  .n-portada-art { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
  .n-portada-foto { aspect-ratio: auto; min-height: 20rem; }
}
.n-ideas-lista--par { margin-top: 0; }
@media (min-width: 900px) {
  .n-ideas-lista--par { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .n-ideas-lista--par .n-idea a { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: .75rem .75rem 1.4rem; }
  .n-ideas-lista--par .n-idea .n-idea-foto { grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
}

/* ---- Diseño y Desarrollo Web ---- */
.n-web-panel { display: grid; gap: .3rem; width: min(100%, 460px); padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 28px; color: #fff; }
.n-web-panel p { margin-bottom: .4rem; font-weight: 800; font-size: 1rem; color: var(--n-pastel); }
.n-web-panel li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; padding: .8rem .4rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.n-web-panel li:first-of-type { border-top: 0; }
.n-web-panel b { display: block; font-size: 1.05rem; font-weight: 800; }
.n-web-panel span { font-size: .92rem; line-height: 1.4; color: var(--n-texto); }
.n-icono { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--n-tinta); background: var(--c, var(--n-rosa)); }
.n-icono svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-razones { display: grid; gap: .8rem; }
.n-razones li { display: grid; gap: .8rem; padding: 1.5rem 1.6rem; border-radius: 26px; }
html body.nuevo .n-razones h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); color: #fff; }
.n-razones p { color: var(--n-texto); line-height: 1.55; }
@media (min-width: 900px) { .n-razones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.n-proceso { display: grid; gap: .8rem; counter-reset: paso; }
.n-proceso li { position: relative; display: grid; gap: .6rem; align-content: start; padding: 1.4rem 1.4rem 1.6rem; border-radius: 26px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.n-proceso li.is-clave { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 121, 140, .5); }
.n-proceso .paso-n { justify-self: start; padding: .3rem .5rem; border-radius: 999px; font: 800 .9rem/1 var(--n-num); font-stretch: 125%; color: var(--n-tinta); background: var(--n-pastel); }
.n-proceso li.is-clave .paso-n { background: var(--n-rosa); }
.n-proceso b { font-size: 1.25rem; font-weight: 800; color: #fff; }
.n-proceso span:not(.paso-n) { color: var(--n-texto); line-height: 1.5; }
@media (min-width: 900px) { .n-proceso { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.n-incluye { display: flex; flex-wrap: wrap; gap: .6rem; }
.n-incluye li { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.9rem; padding: 0 1.1rem 0 .8rem; border-radius: 999px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.n-incluye svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--n-rosa); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Portadas con persona recortada (Capacitación): igual que los directivos en la Home ---- */
.n-figura { position: relative; width: min(100%, 400px); margin: 0 auto; aspect-ratio: 1093 / 1650; }
.n-figura-panel { position: absolute; inset: 24% 0 0; border-radius: 36px; background: radial-gradient(80% 70% at 50% 108%, rgba(255, 121, 140, .26), transparent 70%), linear-gradient(150deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 55%, rgba(140, 120, 255, .1)); }
.n-figura img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; clip-path: inset(-12% 0 0 0 round 0 0 36px 36px); filter: drop-shadow(0 26px 36px rgba(3, 4, 40, .45)); }
.n-figura-nota { position: absolute; z-index: 2; left: -6%; bottom: 9%; padding: .7rem 1.1rem; border-radius: 16px; font-weight: 800; font-style: italic; color: var(--n-pastel); background: rgba(8, 12, 70, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 20px 40px -22px rgba(0, 0, 0, .7); }
@media (max-width: 959px) { .n-figura { width: min(100%, 340px); margin-top: 1rem; } .n-figura-nota { left: 0; } }

/* ---- Foto en marco de vidrio (Diseño web) ---- */
.n-foto-marco { width: min(100%, 420px); margin: 0 auto; padding: .55rem; border-radius: 32px; }
.n-foto-marco img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 55%; border-radius: 26px; }
.n-sec--corta { padding-block: clamp(2rem, 4vw, 3.5rem); }
.n-web-panel { width: 100%; }
html body.nuevo .n-web-panel h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin-bottom: .6rem; }
@media (min-width: 900px) {
  .n-web-panel ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
  .n-web-panel li { border-top: 0; grid-template-columns: 1fr; align-content: start; }
}

/* ---- Artículos: la foto de portada a tamaño de lectura, sin agrandarla de más ---- */
.nuevo .article-cover { max-width: 680px; }
.nuevo .article-cover img { aspect-ratio: 4 / 3; object-position: 50% 25%; border-radius: 28px; box-shadow: 0 30px 60px -36px rgba(10, 16, 98, .5); }

/* ---- Nosotros: foto del equipo y mapa de talento ---- */
.nuevo .about-photo img { aspect-ratio: 2 / 1; object-position: 50% 28%; filter: none; }
.nuevo .talento-area { font-family: var(--n-display); font-size: .95rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--n-tinta); }
.nuevo .talento-centro { background: radial-gradient(circle at 30% 25%, #3945B5, var(--n-azul) 58%, var(--n-noche)); box-shadow: 0 0 0 10px rgba(122, 60, 255, .1), 0 30px 60px -30px rgba(2, 3, 34, .6); }
.nuevo .talento-centro span { font-family: var(--n-display); font-size: .85rem; font-weight: 800; letter-spacing: .01em; text-transform: none; }
.nuevo .talento-centro b { margin-top: -.5rem; font-family: var(--n-display); font-size: 1.15rem; font-weight: 800; font-style: italic; color: var(--n-pastel); }
@media (max-width: 899px) { .nuevo .talento-centro b { font-size: .95rem; margin-top: -.3rem; } .nuevo .talento-centro span { font-size: .75rem; } }
.nuevo .talento-lineas line { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; stroke-opacity: .7; }
.nuevo .talento-lineas line.is-activa { stroke-width: 2.6; stroke-dasharray: none; stroke-opacity: 1; }

/* ============ 8. Pie y avisos ============ */
.nuevo .pie { position: relative; background: var(--n-noche); color: rgba(236, 236, 255, .72); box-shadow: inset 0 1px 0 rgba(255, 121, 140, .35); }
/* En la Home el pie continúa el rosa de la acción y baja a la noche, sin corte */
.es-home .pie { background: linear-gradient(180deg, #5A1C70 0, #2A0E58 5rem, var(--n-noche) 11rem); box-shadow: none; }
.es-home .pie::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6rem; pointer-events: none; background: linear-gradient(180deg, rgba(90, 28, 112, 0), #5A1C70); }
.nuevo .pie-titulo { font-family: var(--n-display); font-size: .98rem; font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; }
.nuevo .pie-marca .nota-mano { font-family: var(--n-display); font-size: 1.08rem; font-weight: 700; font-style: italic; line-height: 1.35; transform: none; color: var(--n-pastel); }
.nuevo .cookies {
  background: rgba(9, 13, 72, .94); color: rgba(236, 236, 255, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -20px rgba(0, 0, 0, .7);
}
.nuevo .cookies b { color: #fff; }
.nuevo .cookies-acciones .btn { min-height: 2.75rem; }
.nuevo .pie a { position: relative; }
.nuevo .pie a::before { content: ""; position: absolute; inset: -.85rem -.2rem; }
@media (max-width: 719px) { .nuevo .pie li + li { margin-top: .8rem; } }
.nuevo .cookies a { color: var(--n-pastel); }
.nuevo .cookies .btn-linea { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.nuevo .cookies .btn-linea:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ============ Movimiento reducido ============ */
@media (prefers-reduced-motion: reduce) {
  html:not(.movimiento) :is(.n-aurora, .n-recorte, .n-chip) { translate: none !important; }
  html:not(.movimiento) :is(.n-linea, .n-entra, .n-recorte img, .n-chip) { transform: none !important; filter: none !important; }
  html:not(.movimiento) :is(.n-h1 .n-pill, .n-panel) { clip-path: none !important; }
  html:not(.movimiento) :is(.n-svc-lista a, .n-idea a, .n-orbe, .n-btn) { transform: none !important; }
  html:not(.movimiento) .n-marquesina.en-marcha ul { animation: none; }
}

/* ============ Ajustes pedidos después de la ronda 4, en los colores de la ronda 4 ============ */

/* Píldora del titular sin punto: la palabra queda alineada con las líneas de arriba */
html body.nuevo .n-h1 .n-pill { margin-left: -.28em; }

/* ---- Servicios en mosaico: fotos con titular rosa pastel y fichas de vidrio ---- */
.n-svc.n-sec { padding-bottom: clamp(3rem, 6vw, 5rem); }
.n-bento { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.n-bento-intro { display: grid; align-content: end; gap: 1rem; padding: .5rem 0 1rem; }
html body.nuevo .n-bento-intro h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); }
.n-bento-intro .n-enlace { justify-self: start; margin-top: .4rem; }
.n-bento-item a {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; min-height: 17rem; padding: clamp(1.2rem, 2vw, 1.7rem); border-radius: 28px; color: #fff;
  transition: transform .6s var(--n-ease), box-shadow .5s var(--n-ease);
}
.n-bento-item a:hover, .n-bento-item a:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(2, 3, 34, .9); }
.n-bento-txt { position: relative; z-index: 2; display: grid; gap: .5rem; max-width: 36ch; }
html body.nuevo .n-bento-txt h3 { font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.02; color: inherit; }
.n-bento-txt > span { font-size: .98rem; line-height: 1.45; color: var(--n-texto); }
.n-bento-item .n-ir { position: absolute; z-index: 2; top: 1.1rem; right: 1.1rem; width: 2.8rem; height: 2.8rem; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.n-bento-item a:hover .n-ir { background: var(--c, var(--n-rosa)); color: var(--n-tinta); box-shadow: none; }
.n-bento--foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.n-bento--foto a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(5, 10, 60, .96) 0%, rgba(5, 10, 60, .78) 36%, rgba(5, 10, 60, .2) 68%, rgba(5, 10, 60, 0) 100%); }
html body.nuevo .n-bento--foto h3 { color: var(--n-pastel); }
.n-bento--azul a, .n-bento--pastel a { background: linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 55%, rgba(140, 120, 255, .1)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .28); }
.n-bento--pastel a::before { content: ""; position: absolute; top: 1.4rem; left: 1.5rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 .45rem color-mix(in srgb, var(--c) 72%, #fff); }
.n-bento-ico { position: absolute; top: 1.5rem; left: 1.5rem; width: 4.6rem; fill: none; stroke: var(--n-pastel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-bento-ico circle { fill: var(--n-rosa); stroke: none; }
.n-bento--rosa a { color: var(--n-tinta); background: var(--n-rosa) linear-gradient(160deg, #FF95A4, var(--n-rosa) 55%, #FF798C); }
.n-bento--rosa .n-bento-txt > span { color: var(--n-tinta); }
.n-bento--rosa .n-ir { color: var(--n-tinta); background: rgba(255, 255, 255, .4); box-shadow: none; }
@media (min-width: 640px) and (max-width: 999px) {
  .n-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "intro intro" "mkt inv" "mkt web" "cx cap" "cta cta"; }
}
@media (min-width: 1000px) {
  .n-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(17.5rem, auto); grid-template-areas: "intro mkt inv" "web mkt cx" "cap cap cta"; }
  .n-bento-item:nth-child(6) a::after { background: linear-gradient(90deg, rgba(5, 10, 60, .96) 0%, rgba(5, 10, 60, .78) 40%, rgba(5, 10, 60, 0) 72%); }
}
@media (min-width: 640px) {
  .n-bento-intro { grid-area: intro; }
  .n-bento-item:nth-child(2) { grid-area: mkt; }
  .n-bento-item:nth-child(3) { grid-area: inv; }
  .n-bento-item:nth-child(4) { grid-area: web; }
  .n-bento-item:nth-child(5) { grid-area: cx; }
  .n-bento-item:nth-child(6) { grid-area: cap; }
  .n-bento-item:nth-child(7) { grid-area: cta; }
}

/* ---- Logos de clientes: más rápidos; al pasar el cursor la banda se detiene y el logo se acerca; clic → Clientes ---- */
.n-marquesina { padding-block: 1.4rem 1.8rem; }
.nuevo .n-marquesina li { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
.n-marquesina a { display: block; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .7); transition: transform .45s var(--n-ease), box-shadow .45s var(--n-ease); }
.n-marquesina a img { width: 100%; height: auto; transform: scale(1.14); }
.n-marquesina a:hover, .n-marquesina a:focus-visible { transform: scale(1.12); box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .8); }
.n-marquesina.en-marcha:hover ul, .n-marquesina.en-marcha:focus-within ul { animation-play-state: paused; }

/* ---- Portadas de servicio con foto: a sangre hacia el borde derecho, fundida con la aurora ---- */
.nuevo .page-hero-media:not(.is-cutout)::before { display: none; }
@media (min-width: 960px) {
  .nuevo .page-hero:has(.page-hero-media) .container, .nuevo .page-hero:has(.page-hero-media) .page-hero-inner { position: static; }
  .nuevo .page-hero:has(.page-hero-media) .page-hero-inner { min-height: 34rem; }
  .nuevo .page-hero .page-hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 44vw; max-width: none; margin: 0; }
  .nuevo .page-hero .page-hero-media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
  .nuevo .page-hero:has(.page-hero-media) .page-hero-inner > :first-child { max-width: 34rem; }
}
@media (max-width: 959px) {
  .nuevo .page-hero .page-hero-media { width: auto; margin: 1.6rem calc(-1 * var(--gutter)) calc(-1 * clamp(3.5rem, 6vw, 5.5rem)); }
  .nuevo .page-hero .page-hero-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; box-shadow: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
}
.nuevo .page-hero-media .script-note { left: auto; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.2rem); padding: .65rem 1.05rem; border-radius: 16px;
  background: rgba(8, 12, 70, .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); font-size: 1rem; }
.nuevo .page-hero-media .script-note::after { display: none; }

/* ---- CX: integrante recortado sobre el círculo y el anillo rosa del manual ---- */
.n-circulo { position: relative; width: min(100%, 420px); margin: 0 auto; align-self: end; margin-bottom: calc(-1 * clamp(3.5rem, 6vw, 5.5rem)); }
.n-circulo::before { content: ""; position: absolute; left: 4%; right: 4%; top: 10%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3945B5, #2234D8 55%, #3A1FA8); }
.n-circulo::after { content: ""; position: absolute; left: 0; right: 8%; top: 6%; aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--n-rosa); clip-path: polygon(0 0, 100% 0, 100% 55%, 0 55%); transform: rotate(-24deg); }
.n-circulo img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 32px rgba(3, 4, 40, .5)); }
@media (max-width: 959px) { .n-circulo { width: min(100%, 320px); margin-top: 1.5rem; } }

/* ---- Insights: lista editorial con miniaturas, sin zoom ---- */
.n-articulos { display: grid; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(255, 255, 255, .16); }
.n-articulos li { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.n-articulos a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: center; padding: 1.4rem .4rem; border-radius: 22px; transition: background-color .35s; }
.n-articulos a:hover, .n-articulos a:focus-visible { background: rgba(255, 255, 255, .06); }
.n-art-foto { display: block; overflow: hidden; border-radius: 16px; aspect-ratio: 1; }
.n-art-foto img { width: 100%; height: 100%; object-fit: cover; }
.n-art-txt { display: grid; gap: .5rem; }
html body.nuevo .n-articulos h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.n-art-resumen { max-width: 64ch; font-size: 1rem; line-height: 1.5; color: var(--n-texto); }
.n-articulos .n-meta { font-weight: 500; }
.n-articulos .n-ir { position: static; grid-area: auto; }
.n-articulos a:hover .n-ir { background: var(--c); color: var(--n-tinta); box-shadow: none; }
@media (max-width: 639px) {
  .n-articulos a { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
  .n-articulos .n-ir, .n-art-resumen { display: none; }
}

/* ---- Artículos: la foto completa junto al título, sin recortes ---- */
.nuevo .article-hero .article-cover { max-width: none; margin: 0; padding: 0; }
.nuevo .article-hero .article-cover img { display: block; width: auto; height: auto; max-width: 100%; max-height: 28rem; aspect-ratio: auto; object-fit: contain; border-radius: 24px; box-shadow: 0 30px 50px -34px rgba(2, 3, 34, .9); margin-inline: auto; }
@media (min-width: 960px) {
  .nuevo .article-hero .container.n-art-hero { max-width: var(--max); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .nuevo .article-hero .article-cover img { margin-inline: auto 0; }
}
@media (max-width: 959px) { .nuevo .article-hero .article-cover { margin-top: 2rem; } .nuevo .article-hero .article-cover img { max-height: 22rem; } }

/* ---- Clientes: grilla compacta ---- */
.nuevo .n-matriz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.nuevo .n-matriz li { border-radius: 16px; }
.nuevo .n-matriz li:hover { transform: translateY(-3px); }
@media (min-width: 640px) { .nuevo .n-matriz { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nuevo .n-matriz { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; } }

/* ---- Servicios (página): el recorrido de áreas es blanco; al pasar o pulsar, la tarjeta se pone azul ---- */
.nuevo .area, .nuevo .area--origen { background: #fff; box-shadow: inset 0 0 0 1px var(--borde); transition: background-color .3s, box-shadow .3s, transform .4s var(--n-ease); }
.nuevo .area b, .nuevo .area--origen b { color: var(--n-azul); }
.nuevo .area span, .nuevo .area--origen span { color: var(--suave); }
.nuevo .area:is(:hover, :focus-visible, :active) { background: var(--n-azul); box-shadow: 0 22px 40px -26px rgba(0, 15, 159, .7); }
.nuevo .area:is(:hover, :focus-visible, :active) b { color: #fff; }
.nuevo .area:is(:hover, :focus-visible, :active) span { color: rgba(255, 255, 255, .78); }

/* ============ Todas las páginas en el mismo mundo (como Diseño y Desarrollo Web) ============
   Sin bandas blancas ni lilas: el contenido vive sobre la aurora, en vidrio, con la gama completa del manual. */
:root { --n-gris: #D9D8D6; --n-gris-2: #BFBDBA; }
body.nuevo.pagina-oscura { background: var(--n-noche); }
.pagina-oscura main {
  --texto: rgba(255, 255, 255, .82); --grafito: rgba(255, 255, 255, .9); --tinta: rgba(255, 255, 255, .9); --suave: var(--n-gris-2);
  --gris-3: var(--n-gris-2); --gris-2: rgba(255, 255, 255, .3); --gris: rgba(255, 255, 255, .16); --azul-800: #fff; --azul-3: var(--n-cap);
  --papel: rgba(255, 255, 255, .05); --fondo-suave: rgba(255, 255, 255, .05); --fondo-lila: rgba(255, 255, 255, .07); --borde: rgba(255, 255, 255, .13);
  color: var(--n-texto);
}
.pagina-oscura main > section:not(.page-hero):not(.cta-band), .pagina-oscura main :is(.section, .viz-section, .mapa-clientes, .destacados, .preguntas, .diferencial, .servicios-viz, .doc-sec, .respaldo) { background: transparent; }
html body.nuevo.pagina-oscura main :is(h2, h3, h4) { color: #fff; }
html body.nuevo.pagina-oscura main .page-hero h1, html body.nuevo.pagina-oscura main .doc-hero h1 { color: var(--n-pastel); }
.pagina-oscura main :is(.kicker, .ficha-tag, .family-title) { color: var(--n-pastel); }
.pagina-oscura main :is(.btn-text, .enlace) { color: #fff; border-bottom-color: var(--n-rosa); }
.pagina-oscura main .btn-linea { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.pagina-oscura main .btn-linea:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Superficies: vidrio en lugar de tarjetas blancas */
.pagina-oscura main :is(.ficha-panel, .pillar, .partner, .compare > div, .article-cta, .cert-strip, .tabla-wrap, .barras-grafica, .barras-detalle, .talento-detalle, .autor-caja, .preguntas-lista li, .eco-hub, .info-card, .map, .figure, .step, .text-cols > div, .autor-lista a) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035) 55%, rgba(140, 120, 255, .07));
  border-color: rgba(255, 255, 255, .13); color: var(--n-texto);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -40px rgba(2, 3, 34, .9);
}
.pagina-oscura main .barras-grafica { background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.3px); background-size: 24px 24px; background-color: rgba(255, 255, 255, .04); }
.pagina-oscura main .barra-nombre { color: #fff; }
.pagina-oscura main .partner-logo { background: #fff; }
.pagina-oscura main .form-card { background: linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(244, 242, 255, .93)); color: var(--n-tinta);
  --texto: #43476A; --grafito: #262B52; --tinta: #0A0F4A; --suave: #62668A; --borde: #E3E1F5; --azul-800: #0B1273; }
html body.nuevo.pagina-oscura main .form-card :is(h2, h3) { color: var(--n-azul); }
.pagina-oscura main .form-card .field label { color: var(--n-tinta); }
.pagina-oscura main :is(.chip, .chip-sector) { background: rgba(255, 255, 255, .07); border: 0; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pagina-oscura main :is(.chip, .chip-sector)[aria-pressed="true"] { background: var(--n-rosa); color: var(--n-tinta); box-shadow: none; }
.pagina-oscura main .chip-sector b { color: var(--n-pastel); }
.pagina-oscura main .chip-sector[aria-pressed="true"] b { color: var(--n-tinta); }
.pagina-oscura main .tabla td:first-child, .pagina-oscura main .tabla td a { color: #fff; }
.pagina-oscura main .tabla th { color: var(--n-gris-2); }
/* Íconos y nodos de los gráficos: vidrio con el color de cada área */
.pagina-oscura main :is(.nnode-icon, .mnode-dot, .ficha-list .i, .ficha-dl dt .i, .info-list .i) { background: rgba(255, 255, 255, .08); color: #fff; stroke: currentColor; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.pagina-oscura main .jnode-dot { background: var(--n-noche); }
.pagina-oscura main .persona-foto { background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 4px rgba(255, 255, 255, .1), 0 0 0 7px var(--c); }
.pagina-oscura main .talento-area { color: #fff; }
/* Lectura larga (artículos y política): blanco suave, enlaces en rosa pastel */
.pagina-oscura main .prose { color: rgba(255, 255, 255, .86); }
.pagina-oscura main .prose .lead-p { color: var(--n-pastel); }
.pagina-oscura main .prose strong { color: #fff; }
.pagina-oscura main .prose a { color: var(--n-pastel); text-decoration-color: var(--n-rosa); }
.pagina-oscura main .prose ul li::before { background: var(--n-rosa); }

/* ============ Tipografías del manual: Figtree (Filson), Archivo (Akzidenz) y Sacramento (Lenteras) ============ */
:root { --mano: "Sacramento", "Segoe Script", cursive; --etiqueta: "Archivo", "Figtree", system-ui, sans-serif; }
html body.nuevo :is(.script-note, .nota-mano, .n-frase, .n-figura-nota) { font-family: var(--mano); font-weight: 400; font-style: normal; letter-spacing: 0; line-height: 1.15; color: var(--n-pastel); }
html body.nuevo .n-frase { font-size: clamp(2rem, 3.2vw, 2.6rem); }
html body.nuevo .page-hero-media .script-note { font-size: 1.85rem; padding: .3rem 1.1rem .45rem; }
html body.nuevo .pie-marca .nota-mano { font-size: 1.9rem; }
/* Archivo para datos y etiquetas: cifras, pasos, categorías, fechas y rutas */
.nuevo :is(.n-meta, .post-meta, .breadcrumb, .n-idea-cat, .post-cat, .ficha-tag, .family-title, .area span, .chip-sector, .n-lienzo-cap, .barra-nombre, .tabla th) { font-family: var(--etiqueta); font-stretch: 100%; letter-spacing: .01em; }
.nuevo :is(.paso-n, .n-chip--anos strong, .n-kpis strong, .vq-kpis strong, .vp-barras strong, .family-card strong, .n-sectores-total strong, .chip-sector b, .n-proceso .paso-n) { font-family: var(--etiqueta); font-stretch: 125%; }

/* ============ Gama completa: amarillo, verde, gris y rosa con significado ============ */
/* Cifras: cada una con el color de su área (leads → marketing, encuestas → investigación, entrevistas → experiencia) */
.n-kpis li:nth-child(1) strong, .vq-kpis li:nth-child(1) strong, .vp-barras li:nth-child(1) strong { color: var(--n-rosa); }
.n-kpis li:nth-child(2) strong, .vq-kpis li:nth-child(2) strong, .vp-barras li:nth-child(2) strong { color: var(--n-inv); }
.n-kpis li:nth-child(3) strong, .vq-kpis li:nth-child(3) strong, .vp-barras li:nth-child(3) strong { color: var(--n-cx); }
.vp-barras li:nth-child(1) .vp-barra { background: linear-gradient(180deg, rgba(255, 121, 140, .9), rgba(255, 121, 140, .25) 55%, rgba(255, 255, 255, .04)); }
.vp-barras li:nth-child(2) .vp-barra { background: linear-gradient(180deg, rgba(255, 194, 85, .9), rgba(255, 194, 85, .25) 55%, rgba(255, 255, 255, .04)); }
.vp-barras li:nth-child(3) .vp-barra { background: linear-gradient(180deg, rgba(126, 186, 114, .9), rgba(126, 186, 114, .25) 55%, rgba(255, 255, 255, .04)); }
/* Textos de apoyo en el gris del manual */
.nuevo :is(.n-meta, .post-meta, .breadcrumb) { color: var(--n-gris-2); }
.nuevo .n-chip--anos strong { color: var(--n-inv); }

/* ============ Zoom al pasar y al pulsar: todo lo que se puede tocar responde ============
   Se usa la propiedad `scale` (no `transform`) para no romper posiciones ni recortar imágenes, logos o íconos. */
.nuevo :is(.nnode, .bubble, .barra, .persona, .chip, .chip-sector, .area, .partner, .pillar, .n-matriz li, .n-bento-item a, .n-articulos a, .ficha-list li, .preguntas-lista li, .family-card li, .n-razones li, .n-proceso li, .n-incluye li, .autor-lista a, .n-sectores button, .n-btn, .btn, .n-svc-lista a) {
  transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s var(--n-ease), background-color .3s, color .3s;
}
@media (hover: hover) {
  .nuevo :is(.nnode, .bubble, .barra, .persona, .chip, .chip-sector, .partner, .n-matriz li, .n-sectores button, .n-incluye li, .family-card li):hover { scale: 1.08; }
  .nuevo :is(.area, .pillar, .n-bento-item a, .n-articulos a, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li, .autor-lista a, .n-svc-lista a):hover { scale: 1.03; }
  .nuevo :is(.n-btn, .btn):hover { scale: 1.04; }
}
.nuevo :is(.nnode, .bubble, .barra, .persona, .chip, .chip-sector, .partner, .n-matriz li, .n-sectores button, .n-incluye li, .family-card li):active { scale: 1.14; }
.nuevo :is(.area, .pillar, .n-bento-item a, .n-articulos a, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li, .autor-lista a, .n-svc-lista a):active { scale: 1.05; }
.nuevo :is(.n-btn, .btn):active { scale: .97; }
/* Lo elegido queda acercado */
.nuevo :is(.nnode.is-active, .bubble.is-active, .barra.is-activa, .persona.is-activa, .chip[aria-pressed="true"], .chip-sector[aria-pressed="true"]) { scale: 1.1; }
.nuevo .n-marquesina a:active { scale: 1.06; }

/* ============ CX: sin la línea rosa; el círculo solo ============ */
.n-circulo::after { display: none; }

/* Etiquetas de fichas, gráficas y lecturas sobre el mundo oscuro */
.pagina-oscura main .ficha-dl dt { color: var(--n-pastel); }
.pagina-oscura main .ficha-dl dt .i { background: rgba(255, 255, 255, .08); stroke: #fff; }
.pagina-oscura main .ficha-count { color: var(--n-gris-2); }
.pagina-oscura main .constellation { background-color: rgba(255, 255, 255, .04); background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.3px); border-color: rgba(255, 255, 255, .13); }
.pagina-oscura main :is(.bubble-label, .jnode-label) { color: #fff; }
.pagina-oscura main .lectura span { color: var(--n-gris-2); }
.pagina-oscura main .lectura a { color: #fff; }

/* ============ Ronda 8 · textos que seguían en azul oscuro sobre la noche ============ */
html body.nuevo.pagina-oscura main .years-num b { color: var(--n-rosa); }
html body.nuevo.pagina-oscura main .years-num small { color: var(--n-pastel); font-family: var(--etiqueta); }
html body.nuevo.pagina-oscura main .persona-nombre { color: #fff; }
html body.nuevo.pagina-oscura main .partner a { color: var(--n-pastel); }
html body.nuevo.pagina-oscura main .partner a:hover { color: #fff; }
html body.nuevo.pagina-oscura main .info-list strong { color: var(--n-pastel); }
html body.nuevo.pagina-oscura main .mstep.is-active .mstep-num { color: var(--n-rosa); }
html body.nuevo.pagina-oscura main .mstep.is-active .mstep-label { color: #fff; }
html body.nuevo.pagina-oscura main :is(.bubble.is-active .bubble-label, .jnode.is-active .jnode-label, .nnode.is-active .nnode-label, .bar.is-active .bar-label) { color: var(--n-pastel); }
html body.nuevo.pagina-oscura main .prose a.btn, html body.nuevo.pagina-oscura main .article-cta a.btn-primary { color: var(--n-tinta); text-decoration: none; }
html body.nuevo.pagina-oscura main .btn-outline { color: #fff; background: rgba(255, 255, 255, .06); border-color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); }
html body.nuevo.pagina-oscura main .btn-outline:hover { background: rgba(255, 255, 255, .14); color: #fff; }
/* Logos de certificación: sobre su propia placa blanca, sin alterar sus colores */
.pagina-oscura main .cert-strip img { box-sizing: border-box; padding: 1.1rem 1.4rem; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -30px rgba(2, 3, 34, .9); }
/* Curva de aprendizaje: los hitos son puntos navy legibles sobre el relleno claro; el activo en rosa */
html body.nuevo.pagina-oscura main .mnode-dot { background: var(--n-noche); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .55), 0 10px 20px -8px rgba(2, 3, 34, .8); font-family: var(--etiqueta); }
html body.nuevo.pagina-oscura main .mnode.is-active .mnode-dot { background: var(--n-rosa); color: var(--n-tinta); box-shadow: 0 0 0 8px rgba(255, 121, 140, .32); }
html body.nuevo.pagina-oscura main .mstep.is-active .mstep-label { color: #fff; text-decoration-color: var(--n-rosa); text-decoration-thickness: .14em; text-underline-offset: .28em; }
html body.nuevo.pagina-oscura main .mstep-num { font-family: var(--etiqueta); color: var(--n-gris-2); }
/* Contacto: los datos y el mapa forman una tarjeta de vidrio con aire, a la altura del formulario */
.pagina-oscura main .info-card { align-content: start; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 28px; }
.pagina-oscura main .info-list li { align-items: center; }
.pagina-oscura main .info-list strong { display: block; margin-bottom: .15rem; font-family: var(--etiqueta); font-size: .74rem; letter-spacing: .08em; }
.pagina-oscura main .info-list a { color: #fff; }
.pagina-oscura main .info-list a:hover { color: var(--n-pastel); }
.pagina-oscura main .map { border-radius: 20px; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
/* Artículos, documentos y 404: la cabecera se funde con el fondo, sin corte */
.pagina-oscura main :is(.article-hero, .doc-hero) { background: radial-gradient(60% 90% at 0% 0%, rgba(57, 69, 181, .45), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(122, 60, 255, .32), transparent 70%), transparent; }

/* ============ Ronda 8 · Cada servicio con su color de la gama del manual ============
   Marketing rosa #FF798C, Investigación amarillo #FFC255, Web gris #BFBDBA, Experiencia verde #7EBA72, Capacitación azul claro #656EC5.
   El color marca lo que es de esa área: el brillo bajo el título, las palabras destacadas, la nota manuscrita y los subrayados. */
.area-mkt { --acento: var(--n-mkt); --acento-rgb: 255, 121, 140; }
.area-inv { --acento: var(--n-inv); --acento-rgb: 255, 194, 85; }
.area-web { --acento: var(--n-web); --acento-rgb: 191, 189, 186; }
.area-cx { --acento: var(--n-cx); --acento-rgb: 126, 186, 114; }
.area-cap { --acento: var(--n-cap); --acento-rgb: 101, 110, 197; }
:is(.area-mkt, .area-inv, .area-web, .area-cx, .area-cap).pagina-oscura main .page-hero {
  background: radial-gradient(34% 44% at 24% 60%, rgba(var(--acento-rgb), .15), transparent 72%), radial-gradient(60% 90% at 0% 0%, rgba(57, 69, 181, .45), transparent 70%), radial-gradient(55% 80% at 100% 10%, rgba(122, 60, 255, .32), transparent 70%), transparent;
}
html body.nuevo:is(.area-mkt, .area-inv, .area-web, .area-cx, .area-cap) main :is(.page-sub em, .page-sub strong, h2 em, h3 em) { color: var(--acento); }
html body.nuevo:is(.area-mkt, .area-inv, .area-web, .area-cx, .area-cap) main .page-hero-media .script-note { color: var(--acento); }
:is(.area-mkt, .area-inv, .area-web, .area-cx, .area-cap).pagina-oscura main :is(.btn-text, .enlace) { border-bottom-color: var(--acento); }
:is(.area-mkt, .area-inv, .area-web, .area-cx, .area-cap) ::selection { background: var(--acento); color: var(--n-tinta); }

/* Home · Web y Experiencia con su ícono de línea en el color de su área (sin el círculo plano) */
.n-bento--pastel a::before { display: none; }
.n-bento-ico { stroke: var(--c, var(--n-pastel)); transition: scale .5s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 0 0; }
.n-bento-ico circle { fill: var(--c, var(--n-rosa)); }
.n-bento-item a:hover .n-bento-ico { scale: 1.12; }

/* ============ Ronda 8 · Más superficies que responden al cursor y al clic ============ */
.nuevo :is(.paso-btn, .n-kpis li, .vp-barras li, .vq-kpis li, .n-chip, .persona-tag, .mstep, .mnode, .info-list li, .cert-strip img, .autor-caja, .partner-logo, .n-enlace, .btn-text, .enlace, .post-link, .pie-cols a, .pie-redes a, .pie-contacto a, .brand, .nav-list > li > a, .rail a) {
  transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), color .3s, background-color .3s, box-shadow .4s var(--n-ease), border-color .3s;
}
.nuevo :is(.pie-cols a, .pie-redes a, .pie-contacto a) { display: inline-block; }
@media (hover: hover) {
  .nuevo :is(.n-kpis li, .vp-barras li, .vq-kpis li, .n-chip, .persona-tag, .mnode, .partner-logo, .cert-strip img):hover { scale: 1.07; }
  .nuevo :is(.mstep, .n-enlace, .btn-text, .enlace, .post-link, .pie-cols a, .pie-redes a, .pie-contacto a, .nav-list > li > a):hover { scale: 1.07; }
  .nuevo :is(.paso-btn, .info-list li, .autor-caja):hover { scale: 1.03; }
  .nuevo .brand:hover { scale: 1.04; }
  .nuevo .rail a:hover { scale: 1.25; }
}
.nuevo :is(.n-kpis li, .vp-barras li, .vq-kpis li, .n-chip, .persona-tag, .mnode, .mstep, .partner-logo, .cert-strip img):active { scale: 1.12; }
.nuevo :is(.paso-btn, .info-list li, .autor-caja):active { scale: 1.05; }
.nuevo :is(.n-enlace, .btn-text, .enlace, .post-link, .pie-cols a, .pie-redes a, .pie-contacto a, .nav-list > li > a):active { scale: .96; }
/* Lo que llevaba el azul del manual como color de punto pasa a lila para verse sobre la noche */
.pagina-oscura main [style*="--c: var(--azul)"] { --c: var(--n-cap) !important; }
/* Etiqueta activa de los gráficos: subrayado rosa bajo el texto (no a media altura, que parecía tachado) */
html body.nuevo.pagina-oscura main :is(.bar.is-active .bar-label, .bubble.is-active .bubble-label, .jnode.is-active .jnode-label, .nnode.is-active .nnode-label, .mstep.is-active .mstep-label) { text-decoration-color: var(--n-rosa); text-decoration-thickness: .14em; text-underline-offset: .26em; }
html body.nuevo.pagina-oscura main .mstep.is-active .mstep-num { text-decoration: none; }
/* CX: el recorte se desvanece abajo en lugar de cortarse en seco */
.n-circulo img { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
/* Servicios: el texto de apoyo de las áreas en gris azulado legible sobre la tarjeta blanca */
.pagina-oscura main .area span { color: #5E6285; }

/* ============ Ronda 9 ============ */
/* Nada tapa el texto: las etiquetas de los gráficos se pintan por encima de halos, líneas y animaciones */
.nuevo :is(.bubble-label, .nnode-label, .mstep-label, .persona-nombre, .bar-label) { position: relative; z-index: 2; }
.nuevo :is(.jnode-label, .barra-nombre) { z-index: 2; } /* ya van posicionadas: solo se suben de capa */
.pagina-oscura main :is(.bubble-label, .nnode-label, .jnode-label, .persona-nombre) { text-shadow: 0 1px 2px rgba(5, 10, 60, .9), 0 0 14px rgba(5, 10, 60, .85); }
/* La burbuja elegida crece menos y su halo ya no alcanza la etiqueta */
.nuevo .bubble { gap: .85rem; }
html body.nuevo .bubble.is-active .bubble-dot { transform: scale(1.14); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 18px 32px -12px color-mix(in srgb, var(--c) 80%, transparent); }

/* Mapa de talento: sin aros de color; cada foto se funde en un degradado hacia el fondo */
html body.nuevo.pagina-oscura main .persona-foto { position: relative; background: rgba(255, 255, 255, .06); box-shadow: 0 18px 34px -18px rgba(2, 3, 34, .85); }
html body.nuevo.pagina-oscura main :is(.persona:hover, .persona.is-activa) .persona-foto { box-shadow: 0 24px 40px -18px rgba(2, 3, 34, .95); }
.pagina-oscura main .persona-foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 36%, transparent 42%, rgba(18, 14, 110, .34) 74%, rgba(10, 10, 80, .66) 100%), linear-gradient(180deg, transparent 55%, rgba(8, 10, 70, .5) 100%); }
.nuevo .talento-centro { background: radial-gradient(circle at 30% 25%, #3945B5, #000F9F 62%, var(--n-noche)); box-shadow: 0 0 0 10px rgba(101, 110, 197, .12), 0 30px 60px -30px rgba(2, 3, 34, .6); }

/* Contacto: el mapa toma los tonos de la noche y se funde en degradado con la tarjeta */
.pagina-oscura main .map { position: relative; }
.pagina-oscura main .map iframe { filter: invert(.9) hue-rotate(185deg) saturate(.6) brightness(.92) contrast(.9); }
.pagina-oscura main .map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 10, 60, .4), transparent 28%, transparent 62%, rgba(5, 10, 60, .7)), radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(5, 10, 60, .45)); }

/* CX: el círculo en los azules del manual (#656EC5 → #3945B5 → #000F9F) */
.n-circulo::before { background: radial-gradient(circle at 35% 30%, #656EC5, #3945B5 45%, #000F9F 100%); }

/* Nada aparece presionado por defecto: el filtro de fábrica ("Todos", "Ruta del cliente") se ve como los demás
   hasta que la persona toca uno de su grupo */
.pagina-oscura main .sin-tocar :is(.chip, .chip-sector)[aria-pressed="true"] { background: rgba(255, 255, 255, .07); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pagina-oscura main .sin-tocar .chip-sector[aria-pressed="true"] b { color: var(--n-pastel); }
.nuevo .sin-tocar :is(.chip, .chip-sector)[aria-pressed="true"]:not(:hover):not(:active) { scale: none; }
.nuevo .n-pasos.sin-tocar .paso.is-activo .paso-btn:not(:hover) { background: transparent; box-shadow: none; }
html body.nuevo.pagina-oscura main .barra.is-activa .barra-nombre { text-decoration-color: var(--n-rosa); text-decoration-thickness: .14em; text-underline-offset: .26em; }
/* Las líneas de los gráficos pasan por detrás de una placa navy suave: ninguna cruza las letras */
.pagina-oscura main :is(.jnode-label, .nnode-label, .bubble-label) { background: rgba(10, 14, 96, .8); padding: .14em .45em; border-radius: 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ============ Ronda 10 · Tipografía del manual de marca ============
   El manual define tres familias con un papel cada una: Akzidenz para títulos, Filson para texto y Lenteras para publicidad.
   En la web van Archivo (Akzidenz), Figtree (Filson) y Sacramento (Lenteras), siempre rectas, sin cursivas ni anchos forzados.
   · Archivo: titulares y cifras.
   · Figtree: párrafos, menús, botones, etiquetas, nombres y formularios.
   · Sacramento: solo la frase de marca y las notas manuscritas de las fotos. */
:root {
  --n-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --n-num: var(--n-titulo);
  --etiqueta: var(--n-display);
  --mano: "Sacramento", "Segoe Script", cursive;
}
html body.nuevo.nuevo :is(h1, h2, h3, h4, .intro-frase, .paso-txt b, .pie-titulo, .muestra-titulo, .sw-card b, .motivo b, .capitulos b, .area b) {
  font-family: var(--n-titulo); font-style: normal; font-stretch: 100%;
}
html body.nuevo.nuevo :is(h1, h2, .intro-frase) { font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
html body.nuevo.nuevo :is(h3, h4, .paso-txt b, .muestra-titulo, .sw-card b, .motivo b, .capitulos b, .area b) { font-weight: 700; letter-spacing: -0.015em; }
html body.nuevo.nuevo .pie-titulo { font-weight: 700; letter-spacing: 0; }
/* Cifras: la misma Akzidenz de los títulos, en su ancho normal */
html body.nuevo.nuevo :is(.paso-n, .n-chip--anos strong, .n-kpis strong, .vp-barras strong, .family-card strong, .n-sectores-total strong, .chip-sector b, .n-proceso .paso-n, .kpi-num, .kpis strong, .years-num, .years-num b, .historia-n, .hub, .mnode-dot, .mstep-num, .pillar-num, .error-404 .numero, .dona-centro) {
  font-family: var(--n-titulo); font-style: normal; font-stretch: 100%;
}
/* Ninguna cursiva: el énfasis se marca con peso o color */
html body.nuevo :is(em, i, cite, q, dfn, address, var) { font-style: normal; }
html body.nuevo .prose :is(em, i) { font-weight: 600; }
/* La frase de marca y las notas manuscritas: Lenteras, recta y en un solo tamaño en todo el sitio */
html body.nuevo.nuevo :is(.script-note, .nota-mano, .n-frase, .n-figura-nota) {
  font-family: var(--mano); font-weight: 400; font-style: normal; font-stretch: 100%; letter-spacing: 0; line-height: 1.15; text-transform: none;
}
html body.nuevo.nuevo :is(.nota-mano, .n-frase) { font-size: clamp(1.9rem, 2.4vw, 2.3rem); color: var(--n-pastel); }
html body.nuevo.nuevo .talento-centro b { font-style: normal; }

/* Tamaños de los titulares con Archivo: es más ancha que Figtree, así que la escala baja un paso */
html body.nuevo.nuevo .n-h1 { font-size: clamp(2.4rem, 4.4vw + .7rem, 5rem); line-height: 1; letter-spacing: -0.035em; }
html body.nuevo.nuevo .n-sec h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
html body.nuevo.nuevo .n-clientes h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
html body.nuevo.nuevo .n-svc-lista h3 { font-size: clamp(1.35rem, 2.2vw, 1.95rem); letter-spacing: -0.02em; }

/* ============ Ronda 10 · Home: el pulso de los datos ============
   Une El pulso y Constelación. A la izquierda, la línea de la intro baja por toda la Home, se dibuja al recorrerla
   y late en cada título. Cada latido suelta una onda en la constelación del fondo, que se reordena en el margen
   derecho con la forma de la sección: las cinco áreas, la onda del método, las barras de las cifras, el anillo de
   clientes y la flecha hacia el formulario. Ningún punto se pinta sobre un texto, una foto, un panel o el pie. */
.vc-cielo { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; }
.es-home .n-main .wrap { z-index: 2; }
.es-home .n-hero .wrap { z-index: 3; }
.es-home .pie { position: relative; z-index: 3; }

.vp-espina { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.vp-espina path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vp-base { stroke: rgba(255, 255, 255, .1); stroke-width: 2; }
.vp-trazo { stroke: var(--n-rosa); stroke-width: 3; filter: drop-shadow(0 0 6px rgba(255, 121, 140, .55)); }
.vp-latidos circle { fill: var(--n-noche); stroke: rgba(255, 255, 255, .25); stroke-width: 2; transition: fill .4s, stroke .4s, r .5s var(--n-ease); }
.vp-latidos circle.is-on { fill: var(--n-rosa); stroke: var(--n-rosa); r: 7px; }
.vp-latidos circle.late { animation: vp-late .9s var(--n-ease); }
@keyframes vp-late { 0% { r: 7px; } 30% { r: 12px; } 100% { r: 7px; } }
@media (max-width: 1099px) { .vp-espina { display: none; } }

/* Arcos del manual (post y portada): rosa grueso y blanco fino entran por la esquina del panel del método,
   detrás del contenido; se dibujan cuando la sección aparece */
.n-metodo-panel > .n-arcos { position: absolute; top: 0; right: 0; z-index: -1; width: clamp(200px, 26%, 340px); height: auto; aspect-ratio: 340 / 240; border-top-right-radius: 40px; overflow: hidden; pointer-events: none; }
.n-arco { fill: none; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.5, .05, .25, 1) .3s; }
.n-arco--rosa { stroke: var(--n-rosa); stroke-width: 14; }
.n-arco--blanco { stroke: rgba(255, 255, 255, .9); stroke-width: 4; transition-delay: .5s; }
.js .n-metodo:not(.is-visto) .n-arco { stroke-dashoffset: 1; }
@media (max-width: 759px) { .n-metodo-panel > .n-arcos { display: none; } }

/* Método: el lienzo a lo ancho y los cuatro pasos como su leyenda */
.es-home .n-metodo-panel { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.es-home .n-metodo-copy { display: contents; }
.es-home .n-metodo-copy h2 { order: 1; }
.es-home .n-lienzo { order: 2; aspect-ratio: 2.6; }
.es-home .n-pasos { order: 3; margin-top: 0; }
@media (min-width: 900px) {
  .es-home .n-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  .es-home .n-pasos .paso-btn { height: 100%; align-items: start; grid-template-columns: 1fr; }
}
@media (max-width: 899px) { .es-home .n-lienzo { aspect-ratio: 1.6; } }

/* Cifras: barras de vidrio que suben mientras los números cuentan, cada una con el color de su área */
.vp-barras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 3vw, 2.5rem); align-items: end; height: clamp(22rem, 46vw, 30rem); margin-top: 2.6rem; padding-bottom: 3.6rem; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.vp-barras li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.vp-barras strong { font-size: clamp(1.9rem, 4vw, 3.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: .8rem; }
.vp-barra { display: block; height: calc(var(--h) * 70%); border-radius: 22px 22px 6px 6px; transform-origin: bottom; transition: transform 1.6s var(--n-ease);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, transparent), color-mix(in srgb, var(--c) 34%, rgba(122, 60, 255, .5)) 46%, rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.vp-barras li:nth-child(2) .vp-barra { transition-delay: .12s; }
.vp-barras li:nth-child(3) .vp-barra { transition-delay: .24s; }
.js .n-cifras:not(.is-on) .vp-barra { transform: scaleY(.04); }
.vp-et { position: absolute; left: 0; right: 0; bottom: -3rem; font-size: clamp(.82rem, 1.4vw, 1.02rem); font-weight: 600; line-height: 1.25; color: var(--n-texto); }
@media (hover: hover) { .vp-barras li:hover .vp-barra { scale: 1.03 1.04; transition: scale .5s var(--n-ease), transform 1.6s var(--n-ease); } }

/* Clientes: dos bandas en sentidos opuestos */
.vp-reversa { margin-top: -.4rem; }
.vp-reversa.en-marcha ul { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) { html:not(.movimiento) .n-arco { transition: none; } }
/* Celulares: las cifras caben en su columna aunque la pantalla mida 360 px */
@media (max-width: 599px) { html body.nuevo.nuevo .vp-barras strong { font-size: clamp(1.1rem, 5.4vw, 1.9rem); letter-spacing: -0.04em; } }
/* Investigación: los dos tipos de estudio respiran dentro de su vidrio */
.pagina-oscura main .text-cols > div { padding: 1.3rem 1.4rem 1.4rem; border-radius: 22px; }
/* Celulares: los títulos de portada de las páginas interiores dejan aire a los lados, también con píldora */
@media (max-width: 599px) { html body.nuevo.nuevo main :is(.page-hero, .doc-hero, .article-hero) h1 { font-size: clamp(2rem, 9.2vw, 2.5rem); } }
/* Etiquetas de gráficos de dos líneas: interlineado mínimo de 1.3 para que respiren */
html body.nuevo :is(.bar-label, .barra-nombre, .vp-et, .n-chip--anos span) { line-height: 1.3; }
/* El botón de la cabecera se retira mientras el botón de la banda de cierre pasa por debajo: nunca dos pegados */
.nuevo .site-header .nav-cta { transition: opacity .3s ease, translate .45s var(--n-ease), visibility .3s, background-color .3s, box-shadow .3s; }
.nuevo .site-header .nav-cta.se-retira { opacity: 0; translate: 0 -10px; visibility: hidden; pointer-events: none; }

/* ============ Ronda 11 · Respuesta al cursor: una sola regla en todo el sitio ============
   Al pasar el cursor (o con el foco del teclado), todo lo que se puede tocar crece un poco y se ilumina en su color;
   al hacer clic o tocar, despliega su información. Nada queda resaltado sin cursor ni clic.
   Tres tamaños de zoom: objetos pequeños 1.08, tarjetas 1.03, fotos y paneles grandes 1.02. */
.nuevo :is(
  .nnode, .bubble, .barra, .bar, .jnode, .mnode, .mstep, .persona, .chip, .chip-sector, .n-sectores button, .matriz li, .n-matriz li,
  .n-incluye li, .family-card li, .n-kpis li, .vp-barras li, .n-chip, .partner-logo, .cert-strip img, .n-marquesina a, .ficha-badge,
  .area, .pillar, .partner, .n-bento-item a, .n-articulos a, .n-idea a, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li,
  .autor-lista a, .n-svc-lista a, .paso-btn, .info-list li, .autor-caja, .text-cols > div, .compare > div, .step, .lectura a,
  .page-hero-media img, .about-photo img, .cta-photo img, .split > img, .article-cover img, .n-equipo img, .n-circulo, .family-card, .n-web-panel
) {
  transition: scale .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s var(--n-ease), background-color .3s, color .25s, filter .3s;
}
:is(.nnode, .bubble, .barra, .bar, .jnode, .mnode, .mstep, .persona, .chip, .chip-sector, .n-sectores button, .paso-btn) { cursor: pointer; }
@media (hover: hover) {
  .nuevo :is(.nnode, .bubble, .barra, .bar, .jnode, .mnode, .mstep, .persona, .chip, .chip-sector, .n-sectores button, .matriz li, .n-matriz li,
    .n-incluye li, .family-card li, .n-kpis li, .vp-barras li, .n-chip, .partner-logo, .cert-strip img, .n-marquesina a, .ficha-badge):hover { scale: 1.08; }
  .nuevo :is(.area, .pillar, .partner, .n-bento-item a, .n-articulos a, .n-idea a, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li,
    .autor-lista a, .n-svc-lista a, .paso-btn, .info-list li, .autor-caja, .text-cols > div, .compare > div, .step, .lectura a):hover { scale: 1.03; }
  .nuevo :is(.page-hero-media img, .about-photo img, .cta-photo img, .split > img, .article-cover img, .n-equipo img, .n-circulo, .family-card, .n-web-panel):hover { scale: 1.02; }
}
/* Teclado: el mismo resalte que el cursor */
.nuevo :is(.nnode, .bubble, .barra, .bar, .jnode, .mnode, .mstep, .persona, .chip, .chip-sector, .n-sectores button, .n-marquesina a):focus-visible { scale: 1.08; }
.nuevo :is(.area, .partner, .n-bento-item a, .n-articulos a, .n-idea a, .autor-lista a, .n-svc-lista a, .paso-btn, .lectura a):focus-visible { scale: 1.03; }
/* Al pulsar: un pequeño rebote que confirma el clic */
.nuevo :is(.n-marquesina a, .matriz li, .n-matriz li, .ficha-badge, .jnode, .bar):active { scale: 1.12; }
.nuevo :is(.n-idea a, .text-cols > div, .compare > div, .step, .lectura a):active { scale: 1.05; }

/* Tarjetas de vidrio: al pasar se elevan y su vidrio se aclara */
@media (hover: hover) {
  .pagina-oscura main :is(.pillar, .partner, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li, .info-list li, .autor-caja, .text-cols > div, .compare > div, .step, .autor-lista a):hover,
  .es-home .n-bento--azul a:hover, .es-home .n-bento--pastel a:hover {
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 34px 60px -30px rgba(2, 3, 34, .95), 0 0 0 1px rgba(255, 255, 255, .16);
  }
  .pagina-oscura main :is(.pillar, .partner, .ficha-list li, .preguntas-lista li, .n-razones li, .n-proceso li, .text-cols > div, .compare > div, .step):hover :is(h3, h4, b, strong) { color: var(--n-pastel); }
  .es-home .n-bento-item a:hover h3 { color: var(--n-pastel); }
  .es-home .n-bento--rosa a:hover h3 { color: var(--n-tinta); }
  .pagina-oscura main :is(.page-hero-media img, .about-photo img, .cta-photo img, .split > img, .article-cover img, .n-equipo img):hover { box-shadow: 0 40px 70px -34px rgba(2, 3, 34, .95); }
}

/* Gráficos: al pasar, la etiqueta se ilumina y el punto gana un halo de su color (nunca un borde) */
@media (hover: hover) {
  html body.nuevo.pagina-oscura main :is(.bubble:hover .bubble-label, .jnode:hover .jnode-label, .nnode:hover .nnode-label, .mstep:hover .mstep-label, .persona:hover .persona-nombre, .barra:hover .barra-nombre, .bar:hover .bar-label) { color: var(--n-pastel); }
  .pagina-oscura main .bubble:hover .bubble-dot { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, var(--n-rosa)) 24%, transparent), 0 18px 32px -12px color-mix(in srgb, var(--c, var(--n-rosa)) 80%, transparent); }
  .pagina-oscura main .jnode:hover .jnode-dot { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, var(--n-cx)) 28%, transparent); }
  .pagina-oscura main .nnode:hover .nnode-icon { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, var(--n-rosa)) 24%, transparent), 0 18px 30px -14px rgba(2, 3, 34, .9); }
  html body.nuevo.pagina-oscura main .mnode:hover .mnode-dot { background: var(--n-pastel); color: var(--n-tinta); box-shadow: 0 0 0 7px rgba(255, 195, 203, .26); }
  .pagina-oscura main .persona:hover .persona-foto { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c, var(--n-rosa)) 22%, transparent), 0 24px 40px -18px rgba(2, 3, 34, .95); }
  .pagina-oscura main .barra:hover .barra-fill { filter: brightness(1.15) saturate(1.1); }
  .nuevo :is(.vp-barras li:hover strong, .n-kpis li:hover strong) { text-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--n-rosa)) 45%, transparent); }
  .nuevo .chip:hover, .nuevo .chip-sector:hover { background-color: rgba(255, 255, 255, .14); }
}

/* ============ Ronda 12 · Menos texto, sin redundancias ============ */
/* Método de la Home: los cuatro pasos alinean número, título y texto arriba, aunque un texto sea más largo */
.es-home .n-pasos .paso-btn { align-content: start; }
.es-home .n-pasos .paso-txt { align-self: start; }
/* Investigación: una sola línea bajo el título, en lugar de repetir los dos tipos de estudio del gráfico */
.pagina-oscura main .split-lead { margin-top: 1.2rem; max-width: 40ch; font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--n-texto); }
/* Logos de clientes y aliados en blanco y negro: claros sobre el vidrio de la noche, sin placas blancas que corten el fondo */
.nuevo .n-matriz li, .nuevo .n-marquesina a, .pagina-oscura main .partner-logo, .pagina-oscura main .ficha-badge {
  background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.nuevo .n-matriz img, .nuevo .n-marquesina a img, .pagina-oscura main .partner-logo img, .pagina-oscura main .ficha-badge img {
  filter: grayscale(1) invert(1) brightness(1.12) contrast(1.08);
}
.nuevo .n-matriz li:hover, .nuevo .n-marquesina a:hover { background: rgba(255, 255, 255, .1); }
/* Logos de bloque de color (Autocables): oscuros con su texto claro, como AIG y Novacero, en lugar de una placa blanca */
.nuevo :is(.n-matriz, .n-marquesina) img[src*="autocables"] { filter: grayscale(1) brightness(.72) contrast(1.25); }
/* Fotos del mismo mundo que la página: las personas recortadas se apoyan en el vidrio de la noche, el mismo panel de los
   directivos de la portada. Es translúcido, así que deja pasar la aurora de cada sección; abajo lleva un brillo rosa
   y un borde de luz suave. Nunca un fondo blanco ni un bloque de color plano. */
.nuevo img.foto-recorte {
  background:
    radial-gradient(80% 62% at 50% 112%, rgba(255, 121, 140, .42), rgba(255, 121, 140, 0) 70%),
    radial-gradient(70% 70% at 12% 0%, rgba(57, 69, 181, .32), rgba(57, 69, 181, 0) 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 52%, rgba(140, 120, 255, .13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -42px rgba(2, 3, 34, .9);
  object-position: 50% 100%;
}
/* Recortes que deben verse completos (grupos y portadas de artículo): contenidos y apoyados en el borde inferior */
.nuevo :is(.about-photo, .n-equipo, .split, .article-cover) img.foto-recorte { object-fit: contain; }
.nuevo .split > img.foto-recorte { aspect-ratio: 4 / 3; height: auto; }
.nuevo .article-hero .article-cover img.foto-recorte { width: 100%; max-width: 30rem; aspect-ratio: 4 / 5; object-fit: contain; }
.nuevo .n-art-foto img.foto-recorte, .nuevo .cta-photo img.foto-recorte { object-fit: cover; object-position: 50% 30%; }
.nuevo .cta-photo img.foto-recorte { background: none; box-shadow: none; }
/* Portadas de servicio: sin caja. Las personas se paran sobre la aurora de la página, con un halo azul y rosa detrás,
   y la foto se funde con el fondo hacia la izquierda y hacia abajo */
.nuevo .page-hero .page-hero-media img.foto-recorte {
  object-fit: contain; object-position: 60% 100%; box-shadow: none;
  background:
    radial-gradient(42% 46% at 58% 58%, rgba(101, 110, 197, .42), rgba(101, 110, 197, 0) 72%),
    radial-gradient(55% 32% at 55% 102%, rgba(255, 121, 140, .38), rgba(255, 121, 140, 0) 72%);
}
@media (min-width: 960px) {
  .nuevo .page-hero .page-hero-media img.foto-recorte {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
}

/* Nosotros: cada persona sobre el color de su equipo, en el mismo tono (colores exactos del manual):
   Investigación y proyectos amarillo #FFC255 · Dirección azul #656EC5 · Marketing y comunicación rosa #FF798C */
html body.nuevo.pagina-oscura main .persona-foto { background: var(--c); }
.pagina-oscura main .persona-foto::after { display: none; }
.nuevo .persona-foto img { object-fit: cover; object-position: 50% 12%; }
/* Directivos en artículos y autores: el mismo azul de Dirección */
.nuevo img[src*="/equipo/"][src*="-recorte"]:not(.persona-foto img):not(.t-foto img) { background: #7EBA72; } /* Dirección: verde del manual */
/* Portada: "Encontramos la respuesta." responde a la intro ("Todo comienza con una pregunta."); la píldora deja aire tras "la" */
/* La píldora de la portada va sola en su línea y alinea su texto con las líneas de arriba (sangría negativa de la regla base) */
/* Sellos de la certificación (Markapasos + Clientrika + CXPA): en blanco y negro sobre el vidrio, como los logos de aliados */
.pagina-oscura main .cert-strip img { background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); filter: grayscale(1) invert(1) brightness(1.12) contrast(1.08); }

/* ============ Ronda 13 · Insights con el mismo mundo (el texto de los artículos no cambia) ============ */
/* La lectura flota sobre la aurora: dos luces suaves (azul eléctrico y rosa) acompañan la columna de texto */
.pagina-oscura main .prose { position: relative; isolation: isolate; }
.pagina-oscura main .prose::before {
  content: ""; position: absolute; z-index: -1; inset: -6rem -40vw; pointer-events: none;
  background: radial-gradient(28% 22% at 18% 18%, rgba(57, 69, 181, .22), transparent 70%), radial-gradient(26% 24% at 84% 62%, rgba(255, 121, 140, .14), transparent 70%);
}
/* Cada capítulo late como el pulso de la Home: un punto rosa con su halo antes del título */
.pagina-oscura main .prose h2 { position: relative; }
.pagina-oscura main .prose h2::before {
  content: ""; position: absolute; left: -1.7rem; top: .42em; width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--n-rosa); box-shadow: 0 0 0 5px rgba(255, 121, 140, .18), 0 0 18px rgba(255, 121, 140, .55);
}
@media (max-width: 760px) { .pagina-oscura main .prose h2::before { left: auto; right: 100%; margin-right: .6rem; position: relative; display: inline-block; top: -.1em; } }
/* Fichas de autor y cierre del artículo: el vidrio de la noche */
.pagina-oscura main :is(.autor-caja, .article-cta) { background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 55%, rgba(140, 120, 255, .1)); }

/* ============ Ronda 15 ============ */
/* Insights: el artículo sin foto de portada ocupa el ancho de lectura con su título */
.nuevo .article-hero .container.n-art-hero:not(:has(.article-cover)) { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
/* En la lista, el artículo sin foto lleva el signo de pregunta de la marca sobre el vidrio de la noche */
.n-art-foto--pregunta {
  display: grid; place-items: center;
  background: radial-gradient(70% 60% at 50% 112%, rgba(255, 121, 140, .4), rgba(255, 121, 140, 0) 70%), linear-gradient(150deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 52%, rgba(140, 120, 255, .13));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.n-art-foto--pregunta svg { width: 46%; height: auto; fill: none; stroke: var(--n-rosa); stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(255, 121, 140, .6)); }
.n-art-foto--pregunta circle { fill: var(--n-rosa); stroke: none; }

/* Servicios · "No nos quedamos en el diagnóstico": ninguna área aparece elegida. Las cinco son vidrio de la noche, iguales;
   al pasar el cursor crecen un poco y se iluminan en su color, y al hacer clic entran a su página */
html body.nuevo .flujo-areas :is(.area, .area--origen) {
  background: linear-gradient(150deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04) 55%, rgba(140, 120, 255, .1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
}
html body.nuevo .flujo-areas :is(.area, .area--origen) b { color: #fff; }
html body.nuevo .flujo-areas :is(.area, .area--origen) span { color: rgba(236, 236, 255, .72); }
html body.nuevo .flujo-areas :is(.area, .area--origen):is(:hover, :focus-visible, :active) {
  background: color-mix(in srgb, var(--c) 16%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 26px 46px -28px rgba(2, 3, 34, .9);
}
html body.nuevo .flujo-areas :is(.area, .area--origen):is(:hover, :focus-visible, :active) b { color: var(--n-pastel); }
html body.nuevo .flujo-areas :is(.area, .area--origen):is(:hover, :focus-visible, :active) span { color: #fff; }
.nuevo .flujo-conector { background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .35) 0 6px, transparent 6px 12px); }
.nuevo .flujo-destinos { border-left-color: rgba(255, 255, 255, .22); }
/* Método: mientras nadie lo toca, ningún paso queda marcado (la figura muestra el avance); al hacer clic, el paso elegido se marca */
.nuevo .n-pasos.sin-tocar .paso.is-activo .paso-n { color: rgba(255, 195, 203, .88); background: transparent; }

/* ============ Ronda 16 ============ */
/* Home · servicios: en las tarjetas de vidrio el ícono y la flecha van junto al texto, sin un hueco en medio */
@media (min-width: 640px) {
  .n-bento--azul a, .n-bento--pastel a { justify-content: flex-start; gap: 1.4rem; min-height: 0; }
  .n-bento--azul .n-bento-ico, .n-bento--pastel .n-bento-ico { position: static; width: 3.6rem; }
}
@media (min-width: 1000px) {
  .n-bento { grid-auto-rows: auto; grid-template-rows: auto auto minmax(25rem, auto); }
}
/* Fotos de las tarjetas: completas, apoyadas abajo y con aire arriba, para que ninguna cara se corte */
.n-bento--foto img.foto-recorte { top: 6%; height: 94%; object-fit: contain; object-position: 50% 100%; }
.n-bento-item:nth-child(6) img.foto-recorte { object-position: 62% 100%; }

/* Método: al pasar el cursor el paso se acerca, su título se ilumina y la figura cambia (también después de un clic) */
@media (hover: hover) {
  .nuevo .n-pasos .paso-btn:hover { scale: 1.05; background: rgba(255, 255, 255, .09); }
  .nuevo .n-pasos .paso-btn:hover .paso-txt b { color: var(--n-pastel); }
  .nuevo .n-pasos .paso-btn:hover .paso-n { color: var(--n-tinta); background: var(--n-pastel); }
}

/* Insights · portada del artículo de grupos focales: un cuadro apaisado a la medida del grupo, sin espacio vacío arriba */
.nuevo .article-hero .article-cover--grupo img.foto-recorte { max-width: 36rem; aspect-ratio: 16 / 9; object-fit: contain; object-position: 50% 100%; }
/* El vidrio va en la tarjeta completa (no solo detrás de la foto), así no aparece una línea donde empieza la imagen */
.n-bento--foto a { background: radial-gradient(80% 62% at 50% 112%, rgba(255, 121, 140, .32), rgba(255, 121, 140, 0) 70%), linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 52%, rgba(140, 120, 255, .12)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .26); }
.n-bento--foto img.foto-recorte { background: none; box-shadow: none; }

/* ============ Ronda 17 ============ */
/* WhatsApp: el logo real (globo con auricular), relleno en el color del ícono */
.i.i-wa { fill: currentColor; stroke: none; }

/* Home · diferenciador: dos círculos (investigar y ejecutar) se acercan al aparecer y se cruzan; en el cruce, Markapasos */
.n-dif { padding-block: clamp(3.5rem, 7vw, 6rem); }
.n-dif-grid { display: grid; gap: 2.4rem; align-items: center; }
html body.nuevo.nuevo .n-dif h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.08; max-width: 15ch; }
.n-dif h2 .n-pill { margin-inline: .04em; }
.n-dif .n-sec-lead { max-width: 44ch; }
.n-venn { position: relative; margin: 0; width: min(100%, 34rem); aspect-ratio: 1.7; justify-self: center; }
.n-venn-c {
  position: absolute; top: 0; width: 58.8%; aspect-ratio: 1; border-radius: 50%; display: grid; align-content: center; gap: .35rem; padding: 0 9%;
  color: #fff; transition: translate 1.4s cubic-bezier(.65, 0, .35, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.n-venn-c b { font-family: var(--n-titulo); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800; }
.n-venn-c span { font-size: .9rem; line-height: 1.35; color: rgba(236, 236, 255, .82); max-width: 12ch; }
.n-venn-c--a { left: 0; justify-items: start; text-align: left;
  background: radial-gradient(circle at 35% 35%, rgba(255, 194, 85, .42), rgba(255, 194, 85, .1) 70%); box-shadow: inset 0 0 0 2px rgba(255, 194, 85, .6), 0 30px 60px -30px rgba(2, 3, 34, .9); }
.n-venn-c--b { right: 0; justify-items: end; text-align: right;
  background: radial-gradient(circle at 65% 35%, rgba(255, 121, 140, .42), rgba(255, 121, 140, .1) 70%); box-shadow: inset 0 0 0 2px rgba(255, 121, 140, .6), 0 30px 60px -30px rgba(2, 3, 34, .9); }
.n-venn-centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 26%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #3945B5, #000F9F 70%); box-shadow: 0 0 0 6px rgba(255, 255, 255, .08), 0 0 40px rgba(255, 121, 140, .45);
  transition: opacity .8s var(--n-ease) 1.1s, scale .8s cubic-bezier(.34, 1.56, .64, 1) 1.1s;
}
.n-venn-centro img { width: 72%; height: auto; }
.n-venn-centro::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 121, 140, .55); animation: potencia-latido 2.6s var(--n-ease) infinite; }
.js .n-dif:not(.is-visto) .n-venn-c--a { translate: -18% 0; }
.js .n-dif:not(.is-visto) .n-venn-c--b { translate: 18% 0; }
.js .n-dif:not(.is-visto) .n-venn-centro { opacity: 0; scale: .4; }
@media (hover: hover) { .n-venn-c:hover { scale: 1.04; } }
@media (min-width: 900px) { .n-dif-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); } }
@media (max-width: 520px) { .n-venn-c { padding: 0 7%; } .n-venn-c span { display: none; } }

/* Tarjeta "¿No sabes por dónde empezar?": su ícono en tinta, arriba, como las demás */
.n-bento--rosa .n-bento-ico { width: 5rem; stroke: var(--n-tinta); stroke-width: 2.4; }
.n-bento--rosa .n-bento-ico circle { fill: var(--n-tinta); }

/* Cifras: las barras crecen de forma visible (empiezan lento, aceleran y frenan) cada vez que la sección aparece */
.vp-barra, .nuevo .vp-barras li:hover .vp-barra { transition: transform 1.9s cubic-bezier(.65, 0, .35, 1), scale .5s var(--n-ease); }

/* Servicios · "No nos quedamos en el diagnóstico": las cinco áreas alineadas sobre una sola línea que pasa por sus puntos */
.nuevo .flujo-areas { position: relative; isolation: isolate; display: grid; gap: .75rem; }
.nuevo .flujo-areas::before {
  content: ""; position: absolute; z-index: -1; left: calc(1.65rem - 1px); top: 2.2rem; bottom: 2.2rem; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .5) 0 6px, transparent 6px 13px) 0 0 / 2px 13px;
  animation: flujo-baja 1.2s linear infinite;
}
@keyframes flujo-baja { to { background-position: 0 13px; } }
.nuevo .flujo-conector { display: none; }
.nuevo .flujo-destinos { display: grid; gap: .75rem; margin: 0; padding: 0; border: 0; }
html body.nuevo .flujo-areas :is(.area, .area--origen) { transform: none; }
.nuevo .flujo-areas .area::before { z-index: 2; box-shadow: 0 0 0 4px rgba(5, 10, 60, .55); }

/* Diseño Web · "Se potencia con": tres áreas alimentan tu sitio; las líneas fluyen hacia él */
.potencia { position: relative; display: grid; gap: 1.6rem; margin-top: 2.6rem; }
.potencia-lineas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.potencia-linea { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 11; opacity: .65; animation: potencia-flujo 1.3s linear infinite; transition: opacity .3s, stroke-width .3s; }
.potencia-linea.is-on { opacity: 1; stroke-width: 4; }
@keyframes potencia-flujo { to { stroke-dashoffset: -26; } }
.potencia-chispa { filter: drop-shadow(0 0 6px currentColor); }
.potencia-nodos { position: relative; z-index: 1; display: grid; gap: .9rem; }
.potencia-nodo a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: 1.15rem 1.3rem; border-radius: 24px; color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 55%, rgba(140, 120, 255, .1));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: scale .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s, background-color .3s;
}
.potencia-nodo .n-orbe, .potencia-nodo .n-ir { grid-area: auto; }
.potencia-nodo .n-orbe { width: 2.6rem; height: 2.6rem; }
html body.nuevo .potencia-nodo h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: #fff; }
.potencia-nodo p { margin-top: .2rem; font-size: .95rem; line-height: 1.4; color: var(--n-texto); }
@media (hover: hover) {
  .potencia-nodo a:hover { scale: 1.03; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 26px 46px -28px rgba(2, 3, 34, .9); }
  .potencia-nodo a:hover h3 { color: var(--n-pastel); }
  .potencia-nodo a:hover .n-ir { background: var(--c); color: var(--n-tinta); box-shadow: none; }
}
.potencia-centro {
  position: relative; z-index: 1; justify-self: center; display: grid; place-content: center; justify-items: center; gap: .7rem;
  width: clamp(12rem, 19vw, 16rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #3945B5, #000F9F 62%, #050A3C);
  box-shadow: 0 0 0 12px rgba(101, 110, 197, .14), 0 0 0 26px rgba(101, 110, 197, .06), 0 40px 80px -30px rgba(2, 3, 34, .9);
}
.potencia-centro::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 121, 140, .5); animation: potencia-latido 2.6s var(--n-ease) infinite; }
@keyframes potencia-latido { 0% { scale: 1; opacity: .9; } 70%, 100% { scale: 1.28; opacity: 0; } }
.potencia-centro svg { width: 4.4rem; fill: none; stroke: var(--n-pastel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.potencia-centro svg circle { fill: var(--n-rosa); stroke: none; }
.potencia-centro b { font-family: var(--n-titulo); font-size: 1.2rem; font-weight: 700; color: #fff; }
@media (min-width: 900px) {
  .potencia { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(5rem, 11vw, 10rem); align-items: center; }
}
@media (max-width: 899px) {
  .potencia-lineas { display: none; }
  .potencia-centro { order: -1; width: 11rem; }
}

/* Capacitación: "Aprender es avanzar" va dentro de la foto, sobre la mesa, como la nota de Marketing */
html body.nuevo.area-cap .page-hero-media .script-note { left: 22%; right: auto; bottom: 16%; color: var(--n-pastel); }

/* ============ Ronda 19 ============ */

/* ---- Tamaños homogéneos: todos los títulos de sección y los textos de entrada miden lo mismo en todas las páginas ---- */
html body.nuevo.nuevo main h2:not(.sr-only):not(.prose h2):not(.n-articulos h2):not(.form-done h2):not(.n-dif h2) { font-size: clamp(2.1rem, 4.2vw, 3.5rem); line-height: 1.05; }
html body.nuevo.nuevo main :is(.n-sec-lead, .page-intro, .split-lead, .section-head p, .talento-head p) { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; }


/* ---- Cookies: tres categorías (necesarias siempre activas) ---- */
.nuevo .cookies [hidden] { display: none !important; }
.cookies-opciones { display: grid; gap: .5rem; }
.cookie-op { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .85rem; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); cursor: pointer; }
.cookie-op input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--n-rosa); }
.cookie-op input:disabled { opacity: .7; }
.cookie-op span { display: grid; gap: .1rem; font-size: .88rem; line-height: 1.4; color: rgba(236, 236, 255, .8); }
.cookie-op b { font-size: .95rem; color: #fff; }
.nuevo .cookies-acciones { flex-wrap: wrap; }

/* ---- Formularios: política y términos en un solo cuadro, con "Aceptar todo" ---- */
.consent { display: grid; gap: .55rem; margin: 0; padding: .9rem 0 0; border: 0; border-top: 1px solid rgba(10, 15, 74, .12); border-radius: 0; background: none; box-shadow: none; }
.consent .check { margin: 0; }
.consent .check--todo { padding-bottom: .55rem; border-bottom: 1px solid rgba(10, 15, 74, .12); font-weight: 700; color: var(--n-tinta); }
.consent input[type="checkbox"] { accent-color: var(--n-violeta); }

/* ---- Home · tarjetas de servicios: el ícono a la altura de la flecha y el texto abajo ---- */
.nuevo .n-bento--azul a, .nuevo .n-bento--pastel a, .nuevo .n-bento--rosa a { justify-content: flex-end; gap: 0; min-height: 17rem; }
.nuevo .n-bento-item .n-bento-ico { position: absolute; top: 1.1rem; left: clamp(1.2rem, 2vw, 1.7rem); width: auto; height: 2.8rem; transform-origin: 0 50%; }

/* ---- Home · Venn: los círculos se juntan al pasar el cursor (o al verse en el celular) y se separan al salir ---- */
.nuevo .n-venn .n-venn-c { transition: translate 1s cubic-bezier(.65, 0, .35, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.nuevo .n-venn:not(.unido) .n-venn-c--a { translate: -10% 0; }
.nuevo .n-venn:not(.unido) .n-venn-c--b { translate: 10% 0; }
.nuevo .n-venn .n-venn-centro { transition: opacity .35s ease, scale .35s ease; }
.nuevo .n-venn:not(.unido) .n-venn-centro { opacity: 0; scale: .45; }
.nuevo .n-venn.unido .n-venn-centro { opacity: 1; scale: 1; transition: opacity .6s var(--n-ease) .65s, scale .7s cubic-bezier(.34, 1.56, .64, 1) .65s; }
.n-venn { cursor: pointer; }

/* ---- Nosotros · tarjetas con los colores del manual: amarillo, rosa y verde ---- */
.nuevo .pillars { gap: 1rem; }
html body.nuevo.pagina-oscura main .pillar {
  position: relative; overflow: hidden; isolation: isolate; padding: 1.8rem 1.7rem 1.9rem; border: 0; border-radius: 28px;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -40px rgba(2, 3, 34, .9);
}
html body.nuevo.pagina-oscura main .pillar .pillar-num {
  position: absolute; top: .9rem; right: 1.3rem; z-index: -1; font-family: var(--n-titulo); font-size: 4.6rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c) 55%, transparent);
}
.pillar-ico { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; background: var(--c); box-shadow: 0 14px 28px -14px var(--c); }
.pillar-ico svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--n-tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
html body.nuevo.pagina-oscura main .pillar h3 { margin-top: 1.3rem; font-size: clamp(1.3rem, 1.8vw, 1.55rem); color: #fff; }
html body.nuevo.pagina-oscura main .pillar p { margin-top: .6rem; font-size: 1rem; line-height: 1.55; color: var(--n-texto); }
@media (hover: hover) {
  html body.nuevo.pagina-oscura main .pillar:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 34px 60px -30px color-mix(in srgb, var(--c) 45%, rgba(2, 3, 34, .9)); }
  html body.nuevo.pagina-oscura main .pillar:hover h3 { color: var(--c); }
}

/* ---- Nosotros · detalle de cada persona: su foto, nombre en blanco y cargo en el color de su equipo ---- */
.talento-detalle[hidden] { display: none !important; }
html body.nuevo.pagina-oscura main .talento-detalle {
  display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); align-items: center; gap: 1.1rem; max-width: 26rem; padding: 1.1rem 2.6rem 1.2rem 1.1rem; border: 0; border-radius: 24px; text-align: left;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 60%), linear-gradient(160deg, #141A86, #0A1062);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent), 0 30px 60px -30px rgba(2, 3, 34, .95);
}
.t-foto { width: 5.2rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.t-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
html body.nuevo.pagina-oscura main .t-nombre { font-family: var(--n-titulo); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.015em; color: #fff; }
html body.nuevo.pagina-oscura main .t-cargo { margin-top: .15rem; font-family: var(--n-display); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c); }
html body.nuevo.pagina-oscura main .t-frase { margin-top: .45rem; font-size: .98rem; line-height: 1.45; color: var(--n-texto); }
html body.nuevo.pagina-oscura main .talento-detalle .svc-cerrar { position: absolute; top: .55rem; right: .7rem; color: #fff; }
/* Carlos Medina: su recorte llega al borde, se baja para que el cabello no se corte */
.nuevo .persona-foto img[src*="carlos-medina"], .nuevo .t-foto img[src*="carlos-medina"] { box-sizing: border-box; padding-top: 14%; object-position: 50% 0; }

/* ---- Nosotros · cierre: el texto a la izquierda y la foto a la derecha, fundida hacia el texto ---- */
@media (min-width: 960px) {
  .nuevo .cta-final .cta-photo { left: 32%; right: 0; -webkit-mask-image: linear-gradient(270deg, #000 50%, transparent 100%); mask-image: linear-gradient(270deg, #000 50%, transparent 100%); }
  .nuevo .cta-final .cta-photo img { object-position: 60% 40%; }
  .nuevo .cta-final .cta-inner { justify-content: flex-start; }
}

/* ---- Servicios · gráfico de áreas: barras de cristal con textura de datos, ícono en una esfera y brillo al pasar ---- */
@media (min-width: 640px) {
  .pagina-oscura main .barras-grafica { position: relative; isolation: isolate; }
  .pagina-oscura main .barras-grafica::before {
    content: ""; position: absolute; z-index: -1; left: clamp(1rem, 3vw, 2.5rem); right: clamp(1rem, 3vw, 2.5rem); top: clamp(1.2rem, 3vw, 2.5rem); height: var(--alto-max);
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 20%); pointer-events: none;
  }
  .nuevo .barra-col { position: relative; border-bottom: 2px solid rgba(255, 255, 255, .25); }
  .nuevo .barra-fill {
    position: relative; overflow: hidden; isolation: isolate; align-items: flex-start; padding: 1rem 0 0; border-radius: 24px 24px 6px 6px; transform-origin: bottom;
    background: linear-gradient(180deg, var(--c) 0%, color-mix(in srgb, var(--c) 72%, #3945B5) 100%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 26px 50px -26px var(--c);
  }
  .nuevo .barra-fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .4) 1.1px, transparent 1.5px) 0 0 / 14px 14px; -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000); mask-image: linear-gradient(180deg, transparent 20%, #000); opacity: .55; }
  .nuevo .barra-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); translate: -130% 0; transition: translate .9s var(--n-ease); }
  .nuevo .barra:hover .barra-fill::after, .nuevo .barra.is-activa .barra-fill::after { translate: 130% 0; }
  .nuevo .barra-fill .i { width: 3.1rem; height: 3.1rem; padding: .7rem; border-radius: 50%; background: rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -12px rgba(2, 3, 34, .8); stroke: var(--n-tinta); }
  .nuevo .barra-fill { transition: height 1.2s cubic-bezier(.65, 0, .35, 1), opacity .3s, transform .4s var(--n-ease), box-shadow .4s; }
  .nuevo .barra:nth-child(5) .barra-fill { transition-delay: .24s, 0s, 0s, 0s; }
}

/* ---- Preguntas que respondemos: una conversación (la pregunta del cliente y la respuesta de Markapasos) ---- */
html body.nuevo.pagina-oscura main .preguntas-lista { gap: 1.4rem 1.6rem; }
html body.nuevo.pagina-oscura main .preguntas-lista li { display: grid; align-content: start; gap: .7rem; padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body.nuevo.pagina-oscura main .preguntas-lista li:hover { background: none; box-shadow: none; }
html body.nuevo.pagina-oscura main .preguntas-lista li::before { display: none; }
html body.nuevo.pagina-oscura main .preguntas-lista h3 {
  position: relative; justify-self: start; max-width: 94%; padding: .95rem 1.2rem 1rem 3.5rem; border-radius: 22px 22px 22px 6px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.3; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
html body.nuevo.pagina-oscura main .preguntas-lista h3::before {
  content: "?"; position: absolute; left: .85rem; top: .8rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  font-family: var(--n-titulo); font-size: 1.05rem; font-weight: 800; color: var(--n-tinta); background: var(--n-rosa);
}
html body.nuevo.pagina-oscura main .preguntas-lista p {
  justify-self: end; max-width: 94%; margin: 0; padding: .95rem 1.2rem 1rem; border-radius: 22px 22px 6px 22px; font-size: 1rem; line-height: 1.5; color: rgba(240, 240, 255, .92);
  background: linear-gradient(150deg, color-mix(in srgb, var(--acento, var(--n-rosa)) 28%, #0A1062), #0A1062 85%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento, var(--n-rosa)) 45%, transparent);
}
html body.nuevo.pagina-oscura main .preguntas-lista li:hover h3 { color: var(--n-pastel); }

/* ---- Insights · como un blog: el artículo destacado a lo ancho y los demás en tarjetas que llenan la fila ---- */
html body.nuevo .n-articulos { gap: 1.2rem; border-top: 0; }
html body.nuevo .n-articulos li { border-bottom: 0; }
html body.nuevo .n-articulos a {
  position: relative; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; gap: 1.1rem; padding: .75rem .75rem 1.5rem; border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 55%, rgba(140, 120, 255, .08)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2);
}
html body.nuevo .n-articulos .n-art-foto { aspect-ratio: 16 / 10; border-radius: 20px; }
html body.nuevo .n-articulos .n-art-txt { padding-inline: .55rem; }
html body.nuevo .n-articulos .n-art-resumen { display: block; }
html body.nuevo .n-articulos .n-ir { position: absolute; top: 1.4rem; right: 1.4rem; display: grid; }
@media (min-width: 900px) {
  html body.nuevo .n-articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  html body.nuevo .n-articulos li:first-child { grid-column: 1 / -1; }
  html body.nuevo .n-articulos li:first-child a { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 2.6rem; padding: .85rem 2.2rem .85rem .85rem; }
  html body.nuevo .n-articulos li:first-child .n-art-foto { aspect-ratio: 16 / 11; }
  html body.nuevo .n-articulos li:first-child h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
  html body.nuevo .n-articulos li:first-child .n-ir { position: static; justify-self: start; margin-top: .4rem; }
}

/* ---- Insights · el artículo de grupos focales: la foto grande, a todo el ancho bajo el título ---- */
@media (min-width: 960px) {
  .nuevo .article-hero .container.n-art-hero:has(.article-cover--grupo) { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}
.nuevo .article-hero .article-cover--grupo img.foto-recorte { width: 100%; max-width: none; max-height: none; aspect-ratio: 2 / 1; object-fit: contain; object-position: 50% 100%; }
/* Insights: la flecha de cada tarjeta, arriba a la derecha (también en la destacada); la foto destacada apaisada */
html body.nuevo .n-articulos li:first-child .n-ir { position: absolute; top: 1.4rem; right: 1.4rem; margin: 0; }
@media (min-width: 900px) { html body.nuevo .n-articulos li:first-child .n-art-foto { aspect-ratio: 2 / 1; } html body.nuevo .n-articulos li:first-child a { padding-right: 4.5rem; } }
/* Aviso de cookies: texto arriba, categorías al configurar y botones abajo, en una sola columna */
html body.nuevo .cookies { grid-template-columns: minmax(0, 1fr); width: min(calc(100% - 32px), 640px); }
html body.nuevo .cookies-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }

/* ============ Ronda 20 ============ */

/* ---- Home · tarjetas de servicios más compactas, alineadas y sin huecos: las fotos llenan su tarjeta ---- */
@media (min-width: 1000px) {
  .nuevo .n-bento { grid-template-rows: auto auto minmax(21rem, auto); }
}
.nuevo .n-bento--azul a, .nuevo .n-bento--pastel a, .nuevo .n-bento--rosa a { min-height: 15rem; }
.nuevo .n-bento--foto img.foto-recorte { top: 4%; height: 96%; object-fit: cover; object-position: 50% 0; }
.nuevo .n-bento-item:nth-child(6) img.foto-recorte { object-position: 62% 0; }
.nuevo .n-bento-item, .nuevo .n-bento-item a { margin: 0; }

/* ---- Cifras: barras algo más altas y en proporción con sus números ---- */
.nuevo .vp-barras { height: clamp(24rem, 50vw, 33rem); }
.nuevo .vp-barra { height: calc(var(--h) * 78%); min-height: 3.5rem; }

/* ---- Preguntas que respondemos: todas las preguntas y respuestas con el mismo ancho y alineadas ---- */
html body.nuevo.pagina-oscura main .preguntas-lista h3 { justify-self: stretch; max-width: none; margin-right: 2.6rem; }
html body.nuevo.pagina-oscura main .preguntas-lista p { justify-self: stretch; max-width: none; margin-left: 2.6rem; }

/* ---- Investigación · el gráfico de metodologías más alto: las etiquetas de abajo ya no tocan el borde ---- */
@media (min-width: 761px) { .pagina-oscura main .constellation { aspect-ratio: 1.28; } }

/* ---- Diseño Web · los cuatro pasos: ícono, línea que avanza de paso a paso, zoom al pasar y borde rosa solo al elegir ---- */
.n-proceso li { cursor: pointer; overflow: visible; }
.proceso-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.proceso-ico { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 15px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background-color .3s, box-shadow .3s; }
.proceso-ico svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--n-pastel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n-proceso .proceso-txt { color: var(--n-texto); line-height: 1.5; }
html body.nuevo .n-proceso b { margin-top: .5rem; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
.n-proceso li.is-clave { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.n-proceso li.is-clave .paso-n { background: var(--n-pastel); }
@media (min-width: 900px) {
  /* la línea punteada sale de cada número y llega al siguiente paso */
  .n-proceso li::after {
    content: ""; position: absolute; z-index: 2; top: calc(1.4rem + 1.5rem); left: calc(100% - 1.4rem); width: calc(.8rem + 2.8rem); height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 195, 203, .7) 0 6px, transparent 6px 12px) 0 0 / 12px 2px; animation: proceso-flujo 1.1s linear infinite;
  }
  .n-proceso li:last-child::after { display: none; }
}
@keyframes proceso-flujo { to { background-position: 12px 0; } }
@media (hover: hover) {
  .n-proceso li:hover { background: rgba(255, 255, 255, .09); }
  .n-proceso li:hover .proceso-ico { background: color-mix(in srgb, var(--n-rosa) 30%, transparent); }
}
.n-proceso li.is-elegido { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px var(--n-rosa), 0 26px 50px -30px rgba(255, 121, 140, .6); }
.n-proceso li.is-elegido .paso-n { background: var(--n-rosa); }
.n-proceso li.is-elegido .proceso-ico { background: var(--n-rosa); box-shadow: none; }
.n-proceso li.is-elegido .proceso-ico svg { stroke: var(--n-tinta); }

/* ---- Partners: logos y núcleo más grandes ---- */
.pagina-oscura main .eco-hub { width: clamp(190px, 18vw, 240px); padding: 1.5rem; }
.nuevo .partner { flex-basis: 320px; max-width: 400px; }
.nuevo .partner-logo { aspect-ratio: 1.9; }
.nuevo .partner-logo img { width: 92%; }

/* ---- Nosotros · los años en grande junto al texto ---- */
html body.nuevo.pagina-oscura main .years p:not(.years-num) { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; }
html body.nuevo.pagina-oscura main .years-num {
  font-family: var(--n-titulo); font-size: clamp(6rem, 12vw, 10rem); font-weight: 800; line-height: .85; letter-spacing: -0.05em; color: var(--n-pastel);
}
html body.nuevo.pagina-oscura main .years-num b { color: var(--n-rosa); }
html body.nuevo.pagina-oscura main .years-num small {
  display: block; margin-top: .9rem; font-family: var(--n-display); font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 700; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: #fff;
}
@media (min-width: 960px) { .nuevo .years { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: center; } }

/* ---- Aviso de datos: ventana emergente abajo, como el de cookies, antes de enviar una solicitud ---- */
.aviso-datos-fondo { position: fixed; inset: 0; z-index: 95; background: rgba(2, 3, 34, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.aviso-datos {
  position: fixed; z-index: 96; left: 50%; bottom: 16px; width: min(calc(100% - 32px), 600px); display: grid; gap: .9rem; padding: 1.3rem 1.3rem 1.2rem; border-radius: 22px; color: #fff;
  background: linear-gradient(160deg, rgba(20, 26, 134, .97), rgba(8, 12, 70, .98)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 70px -20px rgba(0, 0, 0, .7);
  translate: -50% 24px; opacity: 0; transition: translate .45s var(--n-ease), opacity .3s;
}
.aviso-datos.abierto { translate: -50% 0; opacity: 1; }
.aviso-datos-fondo.abierto { opacity: 1; }
.aviso-datos h2 { margin: 0; font-family: var(--n-titulo); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.aviso-datos > p { font-size: .95rem; line-height: 1.5; color: rgba(236, 236, 255, .85); }
.aviso-datos-casillas { display: grid; gap: .5rem; }
.aviso-datos .cookie-op a { color: var(--n-pastel); text-decoration: underline; text-underline-offset: 2px; }
.aviso-datos .cookie-op--todo { background: rgba(255, 121, 140, .14); box-shadow: inset 0 0 0 1px rgba(255, 121, 140, .4); }
.aviso-datos-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.aviso-datos-acciones .btn { padding: .7rem 1.2rem; font-size: .9rem; }
.aviso-datos .btn-linea { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); background: transparent; }
.aviso-datos .btn-linea:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.aviso-datos .btn:disabled { opacity: .45; cursor: not-allowed; }
.consent-nota { margin-top: .8rem; padding: .7rem .9rem; border-radius: 12px; font-size: .9rem; line-height: 1.45; color: var(--n-tinta); background: rgba(255, 121, 140, .16); }
.aviso-datos[hidden], .aviso-datos-fondo[hidden] { display: none !important; }
.aviso-datos .cookie-op span:not(:has(b)) { display: block; }
/* Partners: el logo de Marketing CMD en blanco completo (su "CMD" gris se perdía) y etiquetas sin mayúsculas forzadas */
.pagina-oscura main .partner-logo img[src*="marketing-cmd"] { filter: brightness(0) invert(1); }
.pagina-oscura main .partner-tag { font-size: .92rem; letter-spacing: 0; text-transform: none; }

/* ============ Ronda 21 ============ */

/* ---- Preguntas que respondemos: cada fila comparte alturas, así preguntas y respuestas quedan alineadas entre columnas ---- */
html body.nuevo.pagina-oscura main .preguntas-lista li { grid-row: span 2; grid-template-rows: subgrid; row-gap: .7rem; }
html body.nuevo.pagina-oscura main .preguntas-lista :is(h3, p) { align-self: stretch; display: flex; align-items: center; }
html body.nuevo.pagina-oscura main .preguntas-lista p { align-items: flex-start; }

/* ---- Cabecera: la barra de avance pasa por detrás del menú desplegable ---- */
.nuevo .site-header .container { position: relative; z-index: 2; }
.nuevo .site-header .nav-progress { z-index: 1; }

/* ---- Fotos de grupo en recuadro: el recuadro toma la forma de la foto, sin franja vacía bajo la mesa ---- */
.nuevo .split > img.foto-recorte { aspect-ratio: auto; height: auto; object-fit: cover; }

/* ---- Nosotros · portada en dos columnas: el texto a la izquierda y el equipo a la derecha ---- */
@media (min-width: 960px) {
  .nuevo .page-hero--equipo .container { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .nuevo .page-hero--equipo .page-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .nuevo .page-hero--equipo .about-photo { margin: 0; }
  .nuevo .page-hero--equipo .about-photo img { aspect-ratio: 2600 / 1743; object-fit: contain; }
}

/* ---- Insights · tres tarjetas iguales, cada una con el color de su área (amarillo, verde, rosa del manual) ---- */
html body.nuevo .n-articulos { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 760px) { html body.nuevo .n-articulos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { html body.nuevo .n-articulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; } }
html body.nuevo .n-articulos li:first-child { grid-column: auto; }
html body.nuevo .n-articulos a,
html body.nuevo .n-articulos li:first-child a {
  display: flex; flex-direction: column; gap: 0; height: 100%; padding: 0; overflow: hidden; border-radius: 26px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .06)), rgba(255, 255, 255, .03) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -40px rgba(2, 3, 34, .9);
}
html body.nuevo .n-articulos .n-art-foto,
html body.nuevo .n-articulos li:first-child .n-art-foto {
  aspect-ratio: 16 / 10; border-radius: 0; flex: none;
  background: radial-gradient(75% 70% at 50% 115%, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--c) 32%, #141A86), #0A1062 85%);
}
html body.nuevo .n-articulos .n-art-foto img.foto-recorte { background: none; box-shadow: none; object-fit: cover; }
html body.nuevo .n-articulos .n-art-txt { display: flex; flex-direction: column; gap: .7rem; flex: 1; padding: 1.3rem 1.4rem 1.5rem; }
html body.nuevo .n-articulos .n-idea-cat { flex-wrap: wrap; gap: .5rem .6rem; color: var(--n-texto); }
html body.nuevo .n-articulos .n-idea-cat i { display: none; }
html body.nuevo .n-articulos .n-idea-cat { font-size: .85rem; }
html body.nuevo .n-articulos .n-idea-cat::before { content: none; }
html body.nuevo .n-articulos h2,
html body.nuevo .n-articulos li:first-child h2 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); line-height: 1.18; }
html body.nuevo .n-articulos .n-art-resumen { font-size: .97rem; line-height: 1.5; }
.n-art-leer { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .4rem; font-weight: 700; color: var(--c); }
.n-art-leer .i-arrow { width: 1.1rem; height: 1.1rem; transition: translate .35s var(--n-ease); }
html body.nuevo .n-articulos .n-ir, html body.nuevo .n-articulos li:first-child .n-ir { display: none; }
@media (hover: hover) {
  html body.nuevo .n-articulos a:hover { box-shadow: inset 0 0 0 1.5px var(--c), 0 34px 60px -30px color-mix(in srgb, var(--c) 40%, rgba(2, 3, 34, .9)); }
  html body.nuevo .n-articulos a:hover h2 { color: var(--n-pastel); }
  html body.nuevo .n-articulos a:hover .n-art-leer .i-arrow { translate: 4px 0; }
}
/* la categoría como etiqueta del color de su área */
.n-art-cat { display: inline-block; padding: .28rem .7rem; border-radius: 999px; font-weight: 700; color: var(--n-tinta); background: var(--c); }

/* ---- Artículos de Insights: portada de dos columnas con foto mediana, teñida con el color de su área ---- */
@media (min-width: 960px) {
  html body.nuevo .article-hero .container.n-art-hero,
  html body.nuevo .article-hero .container.n-art-hero:has(.article-cover--grupo) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
}
html body.nuevo .article-hero { background: radial-gradient(40% 60% at 85% 55%, color-mix(in srgb, var(--c, var(--n-rosa)) 22%, transparent), transparent 70%), radial-gradient(60% 90% at 0% 0%, rgba(57, 69, 181, .45), transparent 70%), transparent; }
html body.nuevo .article-hero .article-cover img.foto-recorte,
html body.nuevo .article-hero .article-cover--grupo img.foto-recorte {
  display: block; width: 100%; max-width: 34rem; max-height: none; aspect-ratio: 16 / 10; margin-inline: auto 0; object-fit: cover; border-radius: 26px;
  background: radial-gradient(75% 70% at 50% 115%, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%), linear-gradient(165deg, color-mix(in srgb, var(--c) 32%, #141A86), #0A1062 85%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 30px 60px -36px rgba(2, 3, 34, .9);
}
html body.nuevo .article-hero .article-cover img[src*="blog-voc"] { object-position: 50% 8%; }
html body.nuevo .article-hero .article-cover img[src*="blog-social"] { object-position: 50% 18%; }
html body.nuevo .article-hero .article-cover img[src*="blog-grupo"] { object-position: 50% 60%; }
html body.nuevo .article-hero .post-cat { color: var(--n-tinta); background: var(--c); padding: .3rem .8rem; border-radius: 999px; }
html body.nuevo .article-hero .post-cat::before { display: none; }
@media (max-width: 959px) { html body.nuevo .article-hero .article-cover img.foto-recorte { margin-inline: auto; } }

/* ---- Avisos al entrar: mientras está abierto el de políticas, el de cookies espera detrás ---- */
html.aviso-abierto .cookies { visibility: hidden; }
/* Preguntas: pregunta y respuesta comparten los mismos bordes en su columna; el "?" centrado con el texto */
html body.nuevo.pagina-oscura main .preguntas-lista h3, html body.nuevo.pagina-oscura main .preguntas-lista p { margin: 0; }
html body.nuevo.pagina-oscura main .preguntas-lista h3::before { top: 50%; translate: 0 -50%; }
html body.nuevo .article-hero .article-cover img[src*="blog-voc"] { object-position: 50% 0; }
html body.nuevo .article-hero .article-cover img[src*="blog-grupo"] { object-fit: contain; object-position: 50% 100%; }

/* ============ Ronda 22 ============ */
/* ---- Aviso de políticas: centrado en la pantalla ---- */
.aviso-datos { top: 50%; bottom: auto; translate: -50% calc(-50% + 24px); max-height: calc(100vh - 32px); overflow-y: auto; }
.aviso-datos.abierto { translate: -50% -50%; }

/* ---- Preguntas que respondemos: una sola columna; cada pregunta en una línea y su respuesta debajo, con los mismos bordes ---- */
html body.nuevo.pagina-oscura main .preguntas-lista { grid-template-columns: minmax(0, 1fr); max-width: 62rem; gap: 1.6rem; }
html body.nuevo.pagina-oscura main .preguntas-lista li { grid-row: auto; grid-template-rows: auto auto; }
html body.nuevo.pagina-oscura main .preguntas-lista h3 { text-wrap: wrap; }

/* ---- Nosotros · la tarjeta de cada persona siempre del mismo ancho, con el texto a todo lo ancho ---- */
html body.nuevo.pagina-oscura main .talento-detalle { width: min(100%, 30rem); max-width: 30rem; grid-template-columns: 5.2rem minmax(0, 1fr); }
html body.nuevo.pagina-oscura main .talento-detalle :is(.t-nombre, .t-cargo, .t-frase) { text-wrap: wrap; max-width: none; }

/* ---- Artículos de Insights: fotos completas (VOC y social listening), la de grupos focales centrada ---- */
html body.nuevo .article-hero .article-cover img[src*="blog-voc"],
html body.nuevo .article-hero .article-cover img[src*="blog-social"] { aspect-ratio: 4 / 5; max-width: 23rem; object-fit: contain; object-position: 50% 100%; }
html body.nuevo .article-hero .article-cover img[src*="blog-grupo"] { object-fit: contain; object-position: 50% 50%; }

/* ---- Cada artículo usa el color de su área en todos sus detalles ---- */
html body.nuevo .articulo .article-hero h1 em { color: var(--c); }
html body.nuevo .articulo .post-meta a { text-decoration-color: var(--c); }
html body.nuevo.pagina-oscura .articulo .prose .lead-p { color: color-mix(in srgb, var(--c) 55%, #fff); }
html body.nuevo.pagina-oscura .articulo .prose h2::before { background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 20%, transparent), 0 0 18px color-mix(in srgb, var(--c) 60%, transparent); }
html body.nuevo.pagina-oscura .articulo .prose a:not(.btn) { color: color-mix(in srgb, var(--c) 60%, #fff); text-decoration-color: var(--c); }
html body.nuevo.pagina-oscura .articulo .prose ul li::before { background: var(--c); }
html body.nuevo.pagina-oscura .articulo .prose strong { color: #fff; }
html body.nuevo.pagina-oscura .articulo :is(.autor-caja, .article-cta) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 30px 60px -40px rgba(2, 3, 34, .9); }
html body.nuevo.pagina-oscura .articulo .article-cta h2 em { color: var(--c); }
html body.nuevo.pagina-oscura .articulo .prose::before { background: radial-gradient(28% 22% at 18% 18%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%), radial-gradient(26% 24% at 84% 62%, color-mix(in srgb, var(--c) 12%, transparent), transparent 70%); }
html body.nuevo .article-hero .article-cover img:is([src*="blog-voc"], [src*="blog-social"]) { box-sizing: border-box; padding-top: 7%; }
html body.nuevo .article-hero .article-cover img[src*="blog-grupo"] { aspect-ratio: 1300 / 630; object-fit: cover; object-position: 50% 50%; }
html body.nuevo.pagina-oscura main .pillar :is(h3, p) { text-wrap: wrap; }

/* ============ Ronda 23 ============ */
/* ---- Preguntas que respondemos: dos columnas de tarjetas. Arriba la pregunta (con el "?" del color del área),
   una línea fina y debajo la respuesta. En cada fila, las preguntas y las respuestas empiezan a la misma altura. ---- */
html body.nuevo.pagina-oscura main .preguntas-lista { grid-template-columns: minmax(0, 1fr); max-width: none; gap: 1.2rem; }
@media (min-width: 900px) { html body.nuevo.pagina-oscura main .preguntas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } }
html body.nuevo.pagina-oscura main .preguntas-lista li {
  grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; padding: 0; overflow: hidden; border-radius: 26px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--acento, var(--n-rosa)) 13%, rgba(255, 255, 255, .07)), rgba(255, 255, 255, .03) 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -44px rgba(2, 3, 34, .9);
}
html body.nuevo.pagina-oscura main .preguntas-lista h3 {
  display: flex; align-items: center; justify-self: stretch; max-width: none; margin: 0; padding: 1.35rem 1.6rem 1.15rem 4.4rem;
  border-radius: 0; background: none; box-shadow: none; font-size: clamp(1.08rem, 1.35vw, 1.22rem); line-height: 1.28; text-wrap: balance;
}
html body.nuevo.pagina-oscura main .preguntas-lista h3::before { left: 1.4rem; top: 50%; translate: 0 -50%; width: 2.1rem; height: 2.1rem; background: var(--acento, var(--n-rosa)); }
html body.nuevo.pagina-oscura main .preguntas-lista p {
  display: block; justify-self: stretch; max-width: none; margin: 0 1.6rem; padding: 1.05rem 0 1.45rem; border-radius: 0; background: none; box-shadow: none;
  border-top: 1px solid color-mix(in srgb, var(--acento, var(--n-rosa)) 32%, transparent); font-size: 1rem; line-height: 1.55; color: var(--n-texto);
}
@media (hover: hover) {
  html body.nuevo.pagina-oscura main .preguntas-lista li:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acento, var(--n-rosa)) 70%, transparent), 0 30px 60px -36px rgba(2, 3, 34, .95); }
  html body.nuevo.pagina-oscura main .preguntas-lista li:hover h3 { color: var(--n-pastel); }
}

/* ---- Insights · la foto de grupos focales más ancha ---- */
@media (min-width: 960px) {
  html body.nuevo .article-hero .container.n-art-hero:has(.article-cover--grupo) { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}
html body.nuevo .article-hero .article-cover--grupo img.foto-recorte { max-width: none; }

/* ---- Nosotros · el aro de la foto del mismo color que el borde de la tarjeta; el texto aprovecha todo el ancho ---- */
html body.nuevo.pagina-oscura main .talento-detalle {
  padding: 1.1rem 1.3rem 1.2rem 1.1rem;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, #141A86), 0 30px 60px -30px rgba(2, 3, 34, .95);
}
.t-foto { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, #141A86); }
html body.nuevo.pagina-oscura main .t-nombre { padding-right: 2rem; }

/* ---- Cifras: las barras crecen un poco más rápido ---- */
.vp-barra, .nuevo .vp-barras li:hover .vp-barra { transition: transform 1.3s cubic-bezier(.65, 0, .35, 1), scale .5s var(--n-ease); }
html body.nuevo.nuevo .article-hero h1 { font-size: clamp(2.2rem, 3.7vw, 3.5rem); line-height: 1.06; }

/* ============ Ronda 24 ============ */
/* ---- Fotos con fondo degradado (la pared cambiada por los azules de la marca, sin recorte duro) ---- */
.nuevo .split > img.foto-fondo { aspect-ratio: 1600 / 1067; height: auto; object-fit: cover; border-radius: 26px; box-shadow: 0 30px 60px -34px rgba(2, 3, 34, .9); }
html body.nuevo .n-articulos .n-art-foto img.foto-fondo { object-fit: cover; object-position: 50% 26%; }
html body.nuevo .article-hero .article-cover img.foto-fondo {
  display: block; width: 100%; max-width: 23rem; max-height: none; aspect-ratio: 4 / 5; margin-inline: auto 0; object-fit: cover; object-position: 50% 32%;
  border-radius: 26px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 30px 60px -36px rgba(2, 3, 34, .9);
}
@media (max-width: 959px) { html body.nuevo .article-hero .article-cover img.foto-fondo { margin-inline: auto; } }

/* ---- Servicios · portada: el equipo a la derecha, fundido con la aurora ---- */
@media (min-width: 960px) {
  .nuevo .page-hero--servicios .page-hero-media img {
    object-position: 45% 70%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 78%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, #000 78%, transparent 100%); mask-composite: intersect;
  }
}

/* ---- Servicios · "No nos quedamos en el diagnóstico": entender (amarillo) → cuatro formas de actuar, cada una en su color del manual ---- */
.diferencial--flujo .flujo-head { max-width: 46rem; }
.flujo { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.flujo-acciones { display: grid; gap: 1rem; }
@media (min-width: 640px) { .flujo-acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .flujo { grid-template-columns: minmax(0, .95fr) 4.5rem minmax(0, 2fr); align-items: stretch; gap: 0; } }
.flujo-card {
  --c: #FFC255; --tx: var(--n-tinta);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.8rem;
  min-height: 11.5rem; padding: 1.4rem 1.5rem 1.5rem; border-radius: 26px; color: var(--tx);
  background: var(--c) linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 26px 50px -30px color-mix(in srgb, var(--c) 70%, #000);
  transition: scale .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
}
.flujo-card--inv { --c: #FFC255; }
.flujo-card--mkt { --c: #FF798C; }
.flujo-card--web { --c: #BFBDBA; }
.flujo-card--cx { --c: #7EBA72; }
.flujo-card--cap { --c: #656EC5; --tx: #fff; }
.flujo-card::after { content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -2.5rem; width: 9rem; height: 9rem; border-radius: 50%; border: 18px solid rgba(255, 255, 255, .16); }
.flujo-ico { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border-radius: 15px; background: rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.flujo-card--cap .flujo-ico { background: rgba(255, 255, 255, .2); }
.flujo-ico svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flujo-txt { display: grid; gap: .35rem; }
.flujo-txt span { font-size: .92rem; font-weight: 700; opacity: .78; }
html body.nuevo .flujo-txt b { font-family: var(--n-titulo); font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: inherit; }
.flujo-ir { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(10, 15, 74, .1); transition: background-color .3s, color .3s; }
.flujo-card--cap .flujo-ir { background: rgba(255, 255, 255, .18); }
.flujo-ir .i-arrow { width: 1.1rem; height: 1.1rem; }
.flujo-origen { min-height: 15rem; }
html body.nuevo .flujo-origen .flujo-txt b { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
@media (hover: hover) {
  .flujo-card:hover { scale: 1.03; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 34px 60px -26px color-mix(in srgb, var(--c) 80%, #000); }
  .flujo-card:hover .flujo-ir { background: var(--n-tinta); color: #fff; }
  .flujo-card:hover .flujo-ir .i-arrow { translate: 3px 0; }
}
.flujo-card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* El puente: una línea punteada que avanza de "entender" hacia las acciones */
.flujo-puente { position: relative; display: grid; place-items: center; min-height: 2.6rem; }
.flujo-puente i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; translate: -50% 0; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 7px, transparent 7px 14px) 0 0 / 3px 14px; animation: flujo-baja .9s linear infinite; }
@media (min-width: 960px) {
  .flujo-puente i { left: .4rem; right: .4rem; top: 50%; bottom: auto; width: auto; height: 3px; translate: 0 -50%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .75) 0 8px, transparent 8px 16px) 0 0 / 16px 3px; animation: flujo-avanza .9s linear infinite; }
  .flujo-puente::after { content: ""; position: absolute; right: .2rem; top: 50%; width: .8rem; height: .8rem; border-top: 3px solid #fff; border-right: 3px solid #fff; translate: 0 -50%; rotate: 45deg; }
}
@keyframes flujo-avanza { to { background-position: 16px 0; } }

/* ---- Nosotros · la tarjeta de cada persona en el color de su equipo (amarillo, verde o rosa del manual) ---- */
html body.nuevo.pagina-oscura main .talento-detalle {
  background: var(--c) linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 30px 60px -30px rgba(2, 3, 34, .9);
}
html body.nuevo.pagina-oscura main .talento-detalle :is(.t-nombre, .svc-cerrar) { color: var(--n-tinta); }
html body.nuevo.pagina-oscura main .talento-detalle .t-cargo { color: rgba(10, 15, 74, .78); }
html body.nuevo.pagina-oscura main .talento-detalle .t-frase { color: rgba(10, 15, 74, .9); }
.t-foto { box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 12px 24px -12px rgba(10, 15, 74, .6); }
/* Servicios · portada: la foto completa del equipo en su columna, fundida en los bordes (sin cortar a nadie) */
@media (min-width: 960px) {
  html body.nuevo .page-hero--servicios .container, html body.nuevo .page-hero--servicios .page-hero-inner { position: relative; }
  html body.nuevo .page-hero--servicios .page-hero-inner { min-height: 0; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  html body.nuevo .page-hero--servicios .page-hero-media { position: relative; inset: auto; width: auto; margin: 0; }
  html body.nuevo .page-hero--servicios .page-hero-media img {
    width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 60%;
    -webkit-mask-image: radial-gradient(ellipse 72% 78% at 52% 52%, #000 58%, transparent 100%); -webkit-mask-composite: source-over;
    mask-image: radial-gradient(ellipse 72% 78% at 52% 52%, #000 58%, transparent 100%); mask-composite: add;
  }
}
html body.nuevo .n-articulos .n-art-foto img.foto-fondo { object-position: 50% 44%; }
@media (min-width: 960px) {
  html body.nuevo .page-hero--servicios .page-hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  html body.nuevo .page-hero--servicios .page-hero-media img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent 100%); mask-composite: intersect;
  }
}
html body.nuevo .page-hero--servicios h1 em { white-space: nowrap; }
/* Etiquetas de las tarjetas del flujo con contraste completo (el azul claro de Capacitación no admite transparencia) */
.flujo-txt span { opacity: 1; font-weight: 600; }

/* ============ Ronda 25 ============ */
/* Home · tarjetas de servicios en el orden Investigación → CX → Marketing Digital → Diseño Web → Capacitación */
@media (min-width: 640px) and (max-width: 999px) {
  .n-bento { grid-template-areas: "intro intro" "inv mkt" "cx mkt" "web cap" "cta cta"; }
}
@media (min-width: 1000px) {
  .n-bento { grid-template-areas: "intro inv mkt" "cx web mkt" "cap cap cta"; }
}
@media (min-width: 640px) {
  .n-bento-item:nth-child(2) { grid-area: inv; }
  .n-bento-item:nth-child(3) { grid-area: cx; }
  .n-bento-item:nth-child(4) { grid-area: mkt; }
  .n-bento-item:nth-child(5) { grid-area: web; }
}

/* Servicios · prisma: tu pregunta entra en Investigación de Mercados y sale en cuatro haces de acción */
.diferencial--prisma { position: relative; overflow: hidden; }
.prisma-head { max-width: 46rem; }
.prisma { position: relative; display: grid; gap: 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.prisma-haces { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.prisma-nota { display: none; }
.prisma-origen { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.2rem; color: #fff; text-decoration: none; justify-self: start; }
.prisma-cristal { width: 7rem; height: auto; overflow: visible; flex: none; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1), filter .4s; filter: drop-shadow(0 14px 30px rgba(255, 194, 85, .28)); }
.prisma-filo { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-linejoin: round; }
.prisma-filo--atras { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.prisma-interior path { stroke-width: 2.4; stroke-linecap: round; fill: none; opacity: .85; }
.prisma-destello { transform: skewX(-18deg); animation: prisma-destello 5.5s ease-in-out infinite 1.6s; }
@keyframes prisma-destello { 0%, 62% { translate: 0 0; } 100% { translate: 420px 0; } }
.prisma-txt { display: grid; gap: .2rem; }
.prisma-txt span, .prisma-dest-txt span { font-size: .88rem; font-weight: 600; color: var(--n-texto); }
html body.nuevo .prisma-txt b { font-family: var(--n-titulo); font-size: clamp(1.25rem, 1.8vw, 1.5rem); font-weight: 800; line-height: 1.05; color: #FFC255; }
.prisma-origen:is(:hover, :focus-visible) .prisma-cristal { scale: 1.06; filter: drop-shadow(0 18px 40px rgba(255, 194, 85, .5)); }

.prisma-destinos { position: relative; z-index: 1; display: grid; gap: 1rem; margin: 0; padding: 0 0 0 .2rem; list-style: none; }
/* en el móvil el espectro baja desde el prisma y une los cuatro destinos */
.prisma-destinos::before { content: ""; position: absolute; left: calc(.2rem + 1.6rem - 1.5px); top: -2rem; bottom: 1.6rem; width: 3px; border-radius: 3px; background: linear-gradient(#7EBA72, #FF798C 38%, #BFBDBA 66%, #656EC5); }
.prisma-destinos a { position: relative; display: flex; align-items: center; gap: 1rem; padding: .3rem 0; color: #fff; text-decoration: none; transform-origin: 0 50%; transition: scale .45s cubic-bezier(.34, 1.56, .64, 1), opacity .35s; }
.prisma-ico { position: relative; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; background: var(--c) radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 52%); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--c) 26%, transparent), 0 10px 26px -8px var(--c); transition: box-shadow .4s, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.prisma-ico svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: var(--n-tinta); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.prisma-dest-txt { display: grid; gap: .15rem; }
html body.nuevo .prisma-dest-txt b { font-family: var(--n-titulo); font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 800; line-height: 1.1; color: #fff; }
.prisma-ir { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-left: .2rem; flex: none; border-radius: 50%; color: var(--n-tinta); background: var(--c); opacity: 0; translate: -.6rem 0; transition: opacity .3s, translate .4s cubic-bezier(.34, 1.56, .64, 1); }
.prisma-ir .i-arrow { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.prisma-destinos a:is(:hover, :focus-visible) { scale: 1.04; }
.prisma-destinos a:is(:hover, :focus-visible) .prisma-ico { scale: 1.08; box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--c) 34%, transparent), 0 0 34px 2px var(--c); }
.prisma-destinos a:is(:hover, :focus-visible) .prisma-ir { opacity: 1; translate: 0 0; }
.prisma-destinos a:focus-visible, .prisma-origen:focus-visible { outline: 2px solid var(--n-pastel); outline-offset: 6px; border-radius: 1rem; }

/* haces que dibuja el script (escritorio): se trazan al entrar y luego los recorre un pulso de luz */
.haz { transition: opacity .35s; }
.haz path { fill: none; stroke-linecap: round; }
.haz-halo { stroke-width: 14; opacity: .16; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) var(--d, 0s), opacity .35s, stroke-width .35s; }
.haz-nucleo { stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) var(--d, 0s); }
.haz-pulso { stroke: #fff; stroke-width: 3; stroke-dasharray: .07 .93; stroke-dashoffset: 1; opacity: 0; }
.prisma.is-visible :is(.haz-nucleo, .haz-halo) { stroke-dashoffset: 0; }
.prisma.is-visible .haz-pulso { animation: haz-pulso 2.8s linear infinite calc(var(--d, 0s) + 1s); }
@keyframes haz-pulso { 0% { stroke-dashoffset: 1; opacity: 0; } 8%, 92% { opacity: .95; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.prisma.con-foco .haz:not(.is-foco):not(.haz--entrada) { opacity: .22; }
.prisma .haz.is-foco .haz-halo { opacity: .34; stroke-width: 22; }
.prisma.foco-origen .haz-halo { opacity: .3; }
.prisma.con-foco .prisma-destinos li:not(.is-foco) a { opacity: .55; }

/* entrada: el prisma se enciende y cada destino aparece cuando su haz llega */
.prisma .prisma-cristal { opacity: 0; translate: 0 12px; }
.prisma.is-visible .prisma-cristal { opacity: 1; translate: 0 0; transition: opacity .6s .5s, translate .8s cubic-bezier(.34, 1.56, .64, 1) .5s, scale .5s cubic-bezier(.34, 1.56, .64, 1), filter .4s; }
.prisma .prisma-destinos li { opacity: 0; translate: -14px 0; }
.prisma.is-visible .prisma-destinos li { opacity: 1; translate: 0 0; transition: opacity .5s var(--d2, 1.6s), translate .6s cubic-bezier(.34, 1.56, .64, 1) var(--d2, 1.6s); }
.prisma-destinos li:nth-child(1) { --d2: 1.7s; }
.prisma-destinos li:nth-child(2) { --d2: 1.85s; }
.prisma-destinos li:nth-child(3) { --d2: 2s; }
.prisma-destinos li:nth-child(4) { --d2: 2.15s; }

@media (min-width: 900px) {
  .prisma { grid-template-columns: minmax(6rem, 1fr) 15rem minmax(7rem, 1.3fr) minmax(19rem, 24rem); align-items: center; gap: 0; min-height: 27rem; }
  .prisma-nota { display: block; grid-column: 1; grid-row: 1; align-self: center; justify-self: start; margin: 0 0 5.4rem .4rem; font-family: var(--mano); font-size: 2.3rem; line-height: 1; color: var(--n-pastel); }
  .prisma-origen { grid-column: 2; grid-row: 1; flex-direction: column; gap: 1.1rem; justify-self: center; text-align: center; margin-top: 4.4rem; }
  .prisma-cristal { width: 15rem; }
  .prisma-txt b { max-width: 13ch; }
  .prisma-destinos { grid-column: 4; grid-row: 1; gap: 2.3rem; padding: 0; }
  .prisma-destinos::before { display: none; }
}
@media (max-width: 899px) {
  .prisma-haces { display: none; }
  .prisma-cristal { width: 6.4rem; }
}

/* Nosotros · una línea del centro a cada persona; las líneas pasan por debajo de las fotos, nunca encima */
.nuevo .talento-lineas { z-index: 0; }
.nuevo .talento-mapa > :not(.talento-lineas) { position: relative; z-index: 1; }
.nuevo .talento-lineas line { stroke-width: 1.8; stroke-dasharray: 2 6; stroke-opacity: .62; }
.nuevo .talento-lineas line.is-activa { stroke-width: 2.6; stroke-dasharray: none; stroke-opacity: 1; }
/* "Conocimiento" con la letra manuscrita de las notas */
html body.nuevo.nuevo .talento-centro b { margin-top: -.1rem; font-family: var(--mano); font-size: 1.8rem; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--n-pastel); }
@media (max-width: 899px) { html body.nuevo.nuevo .talento-centro b { font-size: 1.45rem; } }
html body.nuevo.nuevo .talento-centro { align-content: center; gap: .2rem; }

/* Nosotros · tarjetas con brillo de cristal: reflejo de espejo arriba, filo de luz y un destello que las cruza
   al aparecer y al pasar el cursor */
html body.nuevo.pagina-oscura main .talento-detalle {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c) linear-gradient(160deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .16));
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 -10px 24px -14px rgba(10, 15, 74, .28), 0 30px 60px -30px rgba(2, 3, 34, .9);
}
html body.nuevo.pagina-oscura main .talento-detalle::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 46% 0; pointer-events: none;
  border-radius: 24px 24px 60% 60% / 24px 24px 22% 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .08));
}
html body.nuevo.pagina-oscura main :is(.talento-detalle, .pillar)::before {
  content: ""; position: absolute; z-index: 2; top: -20%; bottom: -20%; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0));
  translate: -130% 0; rotate: 12deg;
}
html body.nuevo.pagina-oscura main .talento-detalle::before { animation: cristal-destello 1.3s cubic-bezier(.5, 0, .2, 1) .2s 1 both; }
html body.nuevo.pagina-oscura main .talento-detalle:hover::before { animation: cristal-destello-2 1.1s cubic-bezier(.5, 0, .2, 1) 1 both; }
@keyframes cristal-destello { from { translate: -130% 0; } to { translate: 330% 0; } }
@keyframes cristal-destello-2 { from { translate: -130% 0; } to { translate: 330% 0; } }
.t-foto { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8), 0 12px 24px -12px rgba(10, 15, 74, .6); }
/* pilares: el mismo cristal, más sutil sobre el fondo oscuro */
html body.nuevo.pagina-oscura main .pillar::after {
  content: ""; position: absolute; z-index: -1; inset: 0 0 58% 0; pointer-events: none;
  border-radius: 28px 28px 60% 60% / 28px 28px 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
}
html body.nuevo.pagina-oscura main .pillar::before { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0)); }
html body.nuevo.pagina-oscura main .pillar:hover::before { animation: cristal-destello 1.2s cubic-bezier(.5, 0, .2, 1) 1 both; }

/* Insights · la foto del autor con el aro y el fondo del color de su artículo */
html body.nuevo.pagina-oscura .articulo .autor-caja img[src*="/equipo/"][src*="-recorte"] {
  background: var(--c) radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%);
  box-shadow: 0 0 0 3px var(--c), 0 0 0 8px color-mix(in srgb, var(--c) 24%, transparent);
}

/* ============ Ronda 26 ============ */
/* Nosotros · al elegir a alguien, los demás se apagan sin volverse transparentes: ninguna línea se ve a través de una foto */
html body.nuevo .talento-mapa.tiene-activa .persona:not(.is-activa) .persona-foto,
html body.nuevo .tiene-activa .persona:not(.is-activa) .persona-foto { opacity: 1; filter: saturate(.45) brightness(.7); transition: filter .35s; }
/* Dirección: el nombre va sobre la foto, así su línea sube libre desde el centro hasta la foto */
@media (min-width: 900px) {
  html body.nuevo .talento-grupo--dir .persona-nombre { order: -1; }
}
/* Insights · un solo aro en la foto del autor */
html body.nuevo.pagina-oscura .articulo .autor-caja img[src*="/equipo/"][src*="-recorte"] { box-shadow: 0 0 0 3px var(--c); }

/* Clientes · anillo de sectores: cada arco es un sector en un color del manual; se dibujan al cargar y el total cuenta.
   Al pasar el cursor el arco crece y el centro muestra su sector; al hacer clic se va a sus marcas */
.anillo { display: grid; gap: 1.6rem; align-items: center; width: min(100%, 34rem); margin: 0; padding: clamp(1.3rem, 2.6vw, 2rem); border-radius: 32px; color: #fff; }
.anillo-grafico { position: relative; width: min(100%, 15.5rem); aspect-ratio: 1; justify-self: center; }
.anillo-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.anillo-pista { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 22; }
.anillo-arco {
  fill: none; stroke: var(--c); stroke-width: 22; cursor: pointer;
  stroke-dasharray: 0 var(--C); stroke-dashoffset: var(--ini);
  transition: stroke-dasharray 1.1s cubic-bezier(.16, 1, .3, 1) var(--d), stroke-width .35s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.anillo.is-visible .anillo-arco { stroke-dasharray: var(--largo) var(--C); }
.anillo.con-foco .anillo-arco:not(.is-foco) { opacity: .28; }
.anillo .anillo-arco.is-foco { stroke-width: 32; }
.anillo-centro { position: absolute; inset: 22%; display: grid; place-content: center; justify-items: center; gap: .2rem; margin: 0; border-radius: 50%; text-align: center; pointer-events: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .1); }
html body.nuevo .anillo-centro strong { font-family: var(--n-titulo); font-size: clamp(2.8rem, 5vw, 3.6rem); font-weight: 800; line-height: .9; letter-spacing: -0.03em; color: var(--n-pastel); font-variant-numeric: tabular-nums; }
.anillo-centro span { max-width: 9ch; font-size: .86rem; font-weight: 600; line-height: 1.25; color: rgba(255, 255, 255, .86); }
.anillo-leyenda { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.anillo-leyenda button {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; width: 100%; min-height: 2.6rem; padding: .35rem .85rem; border: 0; border-radius: 999px;
  color: #fff; background: transparent; font: inherit; text-align: left; cursor: pointer; transform-origin: 0 50%;
  transition: background .3s, scale .4s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.anillo-leyenda i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--c) 24%, transparent); }
.anillo-leyenda span { font-weight: 700; font-size: .98rem; }
html body.nuevo .anillo-leyenda b { font-family: var(--n-titulo); font-size: 1.15rem; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; }
.anillo-leyenda button:is(:hover, :focus-visible, .is-foco) { background: rgba(255, 255, 255, .09); scale: 1.04; }
.anillo.con-foco .anillo-leyenda button:not(.is-foco) { opacity: .5; }
.anillo-leyenda button:focus-visible { outline: 2px solid var(--n-pastel); outline-offset: 2px; }
/* el anillo arriba y la leyenda en dos columnas; desde 1200px, la leyenda al lado del anillo */
.anillo-leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: .3rem; }
@media (max-width: 479px) { .anillo-leyenda { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1200px) {
  .anillo { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
  .anillo-leyenda { grid-template-columns: minmax(0, 1fr); }
}

/* Clientes · el muro de marcas en paneles por sector. Los pares de cada fila tienen las mismas filas de logos
   (9 y 7, 6 y 5, 3 y 2), así el muro queda parejo */
.sectores-muro { display: grid; gap: 1rem; }
@media (min-width: 900px) { .sectores-muro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } }
.sector-panel {
  position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: start; gap: 1rem; padding: 1.3rem 1.3rem 1.4rem; border-radius: 28px;
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%), linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -40px rgba(2, 3, 34, .9);
  transition: box-shadow .4s, scale .45s cubic-bezier(.34, 1.56, .64, 1);
}
/* reflejo de cristal arriba, como las tarjetas de Nosotros */
.sector-panel::after { content: ""; position: absolute; z-index: -1; inset: 0 0 62% 0; border-radius: 28px 28px 60% 60% / 28px 28px 18% 18%; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); pointer-events: none; }
html body.nuevo .sector-cab { display: flex; align-items: center; gap: .7rem; margin: 0; font-family: var(--n-titulo); font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.sector-cab i { width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--c) radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 56%); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--c) 22%, transparent); }
.sector-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.sector-logos li { flex: 0 0 calc((100% - 1.2rem) / 3); overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: scale .4s cubic-bezier(.34, 1.56, .64, 1), background .3s, box-shadow .3s; }
.sector-logos img { display: block; width: 100%; height: auto; transform: scale(1.14); filter: grayscale(1) invert(1) brightness(1.12) contrast(1.08); transition: filter .3s; }
.sector-logos img[src*="autocables"] { filter: grayscale(1) brightness(.72) contrast(1.25); }
.sector-logos li:hover { scale: 1.08; background: color-mix(in srgb, var(--c) 16%, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.sector-panel:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22), 0 34px 64px -38px rgba(2, 3, 34, .95); }
/* al llegar desde el anillo, el panel elegido se enciende un momento */
.sector-panel.is-destacado { animation: sector-destello 1.8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes sector-destello {
  0% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent), 0 30px 60px -40px rgba(2, 3, 34, .9); }
  25% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 30px 60px -40px rgba(2, 3, 34, .9); }
  100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent), 0 30px 60px -40px rgba(2, 3, 34, .9); }
}
@media (max-width: 599px) {
  .sector-logos li { flex-basis: calc((100% - .6rem) / 2); }
}
/* ajustes del anillo y del muro: leyenda en una línea, cifras legibles y logos sueltos dentro de su panel (sin tarjetas dentro de tarjetas) */
.anillo { width: min(100%, 37rem); }
@media (min-width: 1200px) { .anillo { grid-template-columns: minmax(0, 13.5rem) minmax(0, 1fr); } }
.anillo-leyenda span { white-space: nowrap; }
html body.nuevo .anillo-leyenda b { color: #fff; }
.sector-logos { gap: .3rem; }
.sector-logos li { flex-basis: calc((100% - .6rem) / 3); background: none; box-shadow: none; border-radius: 18px; }
.sector-logos li:hover { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: none; }
@media (max-width: 599px) { .sector-logos li { flex-basis: calc((100% - .3rem) / 2); } }

/* Home · Venn con más presencia: dos esferas de cristal (amarillo de Investigación y rosa de Ejecución) que al unirse se
   cruzan más y encienden la lente azul de Markapasos; una luz recorre el borde de la lente, como el filo de los posts */
html body.nuevo .n-venn-c { overflow: hidden; isolation: isolate; -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); }
html body.nuevo .n-venn-c--a {
  background: radial-gradient(circle at 34% 30%, rgba(255, 224, 169, .5), rgba(255, 194, 85, .2) 42%, rgba(255, 194, 85, .06) 74%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 194, 85, .7), inset 14px 18px 40px -18px rgba(255, 255, 255, .35), 0 40px 70px -36px rgba(2, 3, 34, .95);
}
html body.nuevo .n-venn-c--b {
  background: radial-gradient(circle at 66% 30%, rgba(255, 195, 203, .5), rgba(255, 121, 140, .2) 42%, rgba(255, 121, 140, .06) 74%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 121, 140, .7), inset -14px 18px 40px -18px rgba(255, 255, 255, .35), 0 40px 70px -36px rgba(2, 3, 34, .95);
}
/* reflejo de espejo de cada esfera */
html body.nuevo .n-venn-c::before {
  content: ""; position: absolute; z-index: -1; top: 7%; width: 46%; height: 30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%); rotate: -24deg;
}
html body.nuevo .n-venn-c--a::before { left: 14%; }
html body.nuevo .n-venn-c--b::before { right: 14%; rotate: 24deg; }
/* unidas: se cruzan más, el filo de cada esfera se aviva */
html body.nuevo .n-venn.unido .n-venn-c--a { translate: 6% 0; box-shadow: inset 0 0 0 2px #FFC255, inset 14px 18px 40px -18px rgba(255, 255, 255, .4), 0 40px 70px -36px rgba(2, 3, 34, .95); }
html body.nuevo .n-venn.unido .n-venn-c--b { translate: -6% 0; box-shadow: inset 0 0 0 2px #FF798C, inset -14px 18px 40px -18px rgba(255, 255, 255, .4), 0 40px 70px -36px rgba(2, 3, 34, .95); }
html body.nuevo .n-venn .n-venn-c { transition: translate 1s cubic-bezier(.65, 0, .35, 1), scale .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .6s; }
/* la lente: ocupa justo el cruce de las dos esferas unidas */
html body.nuevo .n-venn-centro {
  z-index: 2; width: 24.66%; height: 81.4%; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
html body.nuevo .n-venn-centro::after { display: none; }
.n-venn-lente { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 22px 26px rgba(2, 3, 34, .55)); }
html body.nuevo .n-venn-centro img { position: relative; width: 80%; height: auto; }
.n-venn-filo { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.n-venn-luz { fill: none; stroke: #FFC3CB; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .12 .88; stroke-dashoffset: 1; opacity: 0; }
.n-venn.unido .n-venn-luz { opacity: 1; animation: venn-luz 3.4s linear infinite 1.2s; }
@keyframes venn-luz { to { stroke-dashoffset: 0; } }
.n-venn-destello { transform: skewX(-16deg); }
.n-venn.unido .n-venn-destello { animation: venn-destello 1.4s cubic-bezier(.5, 0, .2, 1) 1.1s both; }
@keyframes venn-destello { from { translate: 0 0; } to { translate: 420px 0; } }
@media (max-width: 520px) { html body.nuevo .n-venn-centro img { width: 86%; } }
/* esferas con más color de marca y un reflejo más nítido */
html body.nuevo .n-venn-c--a { background: radial-gradient(circle at 34% 28%, rgba(255, 224, 169, .5), rgba(255, 194, 85, .34) 28%, rgba(255, 194, 85, .14) 60%, rgba(255, 194, 85, .06) 82%); }
html body.nuevo .n-venn-c--b { background: radial-gradient(circle at 66% 28%, rgba(255, 195, 203, .5), rgba(255, 121, 140, .34) 28%, rgba(255, 121, 140, .14) 60%, rgba(255, 121, 140, .06) 82%); }
html body.nuevo .n-venn-c::before { top: 8%; width: 36%; height: 20%; background: radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 66%); }
/* el texto de cada esfera se aparta de la lente */
html body.nuevo .n-venn-c--a { padding: 0 31% 0 9%; }
html body.nuevo .n-venn-c--b { padding: 0 9% 0 31%; }
@media (max-width: 520px) { html body.nuevo .n-venn-c--a { padding: 0 30% 0 8%; } html body.nuevo .n-venn-c--b { padding: 0 8% 0 30%; } html body.nuevo .n-venn-c b { font-size: 1.05rem; } }

/* ============ Ronda 28 ============ */
/* Servicios · la rueda: cinco áreas alrededor de una sola meta; por fuera, lo que incluye cada una */
.rueda-zona { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1000px) { .rueda-zona { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 5vw, 5rem); } }
.rueda-figura { position: relative; width: min(100%, 33rem); margin: 2.6rem auto 3.4rem; }
.rueda-disco { position: relative; aspect-ratio: 1; }
.rueda-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rueda-guia { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; stroke-dasharray: 2 8; }
.rueda-seg {
  cursor: pointer; transform-box: view-box; transform-origin: 300px 300px;
  opacity: 0; scale: .62; rotate: -24deg;
  transition: opacity .7s calc(var(--i) * .12s), scale .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .12s), rotate .9s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .12s), translate .45s cubic-bezier(.34, 1.56, .64, 1);
}
.rueda.is-visible .rueda-seg { opacity: 1; scale: 1; rotate: 0deg; }
.rueda-area { fill: var(--c); }
.rueda-brillo { fill: rgba(255, 255, 255, .16); pointer-events: none; }
.rueda-sub { fill: var(--c); opacity: .38; transition: opacity .3s; }
.rueda-ico-fondo { fill: rgba(255, 255, 255, .9); }
.rueda-ico { fill: none; stroke: #0A0F4A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.rueda-nucleo { fill: url(#rueda-nucleo); filter: drop-shadow(0 0 30px rgba(57, 69, 181, .8)) drop-shadow(0 16px 26px rgba(2, 3, 34, .6)); }
.rueda-reflejo { pointer-events: none; }
.rueda-filo { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.rueda-centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .25rem; pointer-events: none; }
.rueda-centro img { width: clamp(5.5rem, 22%, 8rem); height: auto; }
html body.nuevo .rueda-centro span { font-family: var(--mano); font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1; color: #FFC3CB; }
/* cursor: el área se adelanta y sus ofertas se encienden; las demás se apagan */
.rueda.con-foco .rueda-seg:not(.is-foco):not(.is-activa) { opacity: .32; }
.rueda-seg:is(.is-foco, .is-activa) { translate: calc(var(--dx) * 12px) calc(var(--dy) * 12px); }
.rueda-seg:is(.is-foco, .is-activa) .rueda-sub { opacity: .78; }
.rueda-seg .rueda-sub.is-foco { opacity: 1; }
/* nombres de las áreas alrededor de la rueda */
.rueda-et {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: .55rem; max-width: 12rem;
  padding: .45rem .8rem; border: 0; border-radius: 999px; color: #fff; background: rgba(5, 10, 60, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 700 .95rem/1.2 var(--n-display, Figtree), Figtree, sans-serif; text-align: left; cursor: pointer;
  transition: scale .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, background .3s;
}
.rueda-et--der { translate: 0 -50%; }
.rueda-et--izq { translate: -100% -50%; }
.rueda-et i { width: .8rem; height: .8rem; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--c) 26%, transparent); }
.rueda-et:is(:hover, :focus-visible, .is-foco, .is-activa) { scale: 1.06; background: rgba(5, 10, 60, .8); box-shadow: inset 0 0 0 1.5px var(--c); }
.rueda-et:focus-visible { outline: 2px solid #FFC3CB; outline-offset: 3px; }
/* detalle al lado de la rueda */
.rueda-detalle {
  position: relative; min-height: 20rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 28px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -40px rgba(2, 3, 34, .9);
}
.rueda-detalle.tiene-ficha { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, #FF798C) 60%, transparent), 0 30px 60px -40px rgba(2, 3, 34, .9); }
.rueda-pista { display: grid; place-items: center; min-height: 16rem; margin: 0; text-align: center; font-size: 1.05rem; font-weight: 600; color: rgba(236, 236, 255, .78); }
.rueda-cerrar { position: absolute; top: .7rem; right: .9rem; }
.rueda-ficha { display: grid; gap: .9rem; animation: rueda-entra .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rueda-entra { from { opacity: 0; translate: 0 10px; } }
html body.nuevo .rueda-ficha h3 { display: flex; align-items: center; gap: .7rem; padding-right: 2rem; font-family: var(--n-titulo); font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.08; color: #fff; }
.rueda-ficha h3::before { content: ""; width: 1.05rem; height: 1.05rem; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--c) 24%, transparent); }
.rueda-ficha p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--n-texto); }
.rueda-ficha ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.rueda-ficha li { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .05); transition: background .3s, scale .4s cubic-bezier(.34, 1.56, .64, 1); cursor: default; }
.rueda-ficha li::before { content: ""; width: .55rem; height: .55rem; flex: none; border-radius: 50%; background: var(--c); }
.rueda-ficha li:hover { scale: 1.02; background: color-mix(in srgb, var(--c) 18%, rgba(255, 255, 255, .04)); }
.rueda-ficha .btn { justify-self: start; margin-top: .3rem; }
@media (max-width: 999px) {
  .rueda-figura { width: min(100%, 26rem); margin: 0 auto; }
  .rueda-et { position: static; translate: none; }
  .rueda-figura { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .rueda-disco { width: 100%; margin-bottom: 1rem; }
}
@media (min-width: 1000px) { .rueda-zona > .rueda-figura { margin-inline: auto; padding: 0; } .rueda-zona { padding-left: clamp(0rem, 4vw, 4rem); } }
@media (max-width: 999px) { .rueda-detalle { min-height: 0; } .rueda-pista { min-height: 5rem; } }
@media (min-width: 1000px) { .rueda-zona { padding-left: clamp(4rem, 7vw, 7rem); } .rueda-zona > .rueda-figura { width: min(100%, 31rem); } }
/* entre 1000 y 1199 px la rueda va arriba, centrada con sus nombres, y el detalle debajo */
@media (min-width: 1000px) and (max-width: 1199px) {
  .rueda-zona { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
  .rueda-detalle { width: min(100%, 42rem); margin-inline: auto; min-height: 0; }
  .rueda-pista { min-height: 5rem; }
}
@media (min-width: 1200px) { .rueda-zona { gap: clamp(5rem, 8vw, 8rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

/* ============ Ronda 29 ============ */
/* Servicios · la rueda en 3D: disco inclinado con volumen, esfera de vidrio flotando en el centro */
.rueda--3d .rueda-figura { width: min(100%, 42rem); }
.rueda--3d .rueda-disco { aspect-ratio: 980 / 420; }
.r3-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.r3-tapa { stroke: none; }
.r3-luz { fill: url(#r3-luz-g); pointer-events: none; }
.r3-pared path { stroke: none; }
.r3-sombra { fill: url(#r3-sombra-g); pointer-events: none; }
.r3-pared--in { filter: brightness(.62); }
.r3-filo { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-linecap: round; pointer-events: none; }
.rueda--3d .rueda-sub { opacity: .5; transition: opacity .35s, filter .35s; }
.rueda--3d .rueda-sub .r3-filo { stroke-width: 1; stroke: rgba(255, 255, 255, .35); }
.r3-ico-sombra { fill: rgba(2, 3, 34, .45); }
.rueda--3d .rueda-ico-fondo { fill: #fff; filter: drop-shadow(0 6px 8px rgba(2, 3, 34, .35)); }
.rueda--3d .rueda-ico { fill: none; stroke: #0A0F4A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.r3-esfera { filter: drop-shadow(0 18px 24px rgba(2, 3, 34, .6)); }
.r3-esfera-filo { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5; }
html body.nuevo .r3-meta { font-family: var(--mano); font-size: 27px; fill: #FFC3CB; }
.r3-flota { animation: r3-flota 5.5s ease-in-out infinite; }
@keyframes r3-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.r3-nucleo-sombra { animation: r3-sombra 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes r3-sombra { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .9; opacity: .75; } }
/* entrada: cada área cae a su lugar, una tras otra */
html body.nuevo .rueda--3d .rueda-seg { scale: 1; rotate: 0deg; opacity: 0; translate: 0 -46px; transform-box: view-box;
  transition: opacity .6s calc(var(--i) * .13s), translate .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .13s), filter .35s; }
html body.nuevo .rueda--3d.is-visible .rueda-seg { opacity: 1; translate: 0 0; }
/* cursor y elección: el área se levanta y sus ofertas se encienden; las demás se apagan sin volverse transparentes */
html body.nuevo .rueda--3d.is-visible .rueda-seg:is(.is-foco, .is-activa) { translate: 0 -16px; transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), filter .35s; }
html body.nuevo .rueda--3d .rueda-seg:is(.is-foco, .is-activa) .rueda-sub { opacity: .9; }
html body.nuevo .rueda--3d .rueda-seg .rueda-sub.is-foco { opacity: 1; filter: brightness(1.15); }
html body.nuevo .rueda--3d.con-foco .rueda-seg:not(.is-foco):not(.is-activa) { opacity: 1; filter: saturate(.4) brightness(.6); }
.rueda--3d .rueda-seg { cursor: pointer; }
@media (max-width: 999px) { .rueda--3d .rueda-figura { width: min(100%, 36rem); } }

/* la rueda es la protagonista: ocupa todo el ancho y la ficha aparece debajo */
html body.nuevo .rueda--3d .rueda-zona { grid-template-columns: minmax(0, 1fr); padding-left: 0; gap: clamp(1.4rem, 3vw, 2.4rem); }
html body.nuevo .rueda--3d .rueda-zona > .rueda-figura { width: min(100%, 64rem); margin: 0 auto; }
html body.nuevo .rueda--3d .rueda-detalle { width: min(100%, 46rem); min-height: 0; margin-inline: auto; }
html body.nuevo .rueda--3d .rueda-pista { min-height: 4.5rem; }
html body.nuevo .rueda--3d.con-foco .rueda-seg:not(.is-foco):not(.is-activa) { filter: saturate(.7) brightness(.55); }
@media (max-width: 999px) { html body.nuevo .rueda--3d .rueda-zona > .rueda-figura { width: min(100%, 40rem); } }
html body.nuevo .rueda--3d.con-foco .rueda-seg:not(.is-foco):not(.is-activa) { filter: saturate(.85) brightness(.68); }
/* celular: el disco llena el ancho (el lienzo tiene aire a los lados para los nombres de escritorio) */
@media (max-width: 999px) {
  html body.nuevo .rueda--3d .rueda-figura { overflow-x: clip; }
  html body.nuevo .rueda--3d .rueda-disco { flex: none; width: 176%; margin: 0 0 .6rem; }
}

/* ============ Ronda 31 ============ */
/* Servicios · disco de losas 3D con la lista de áreas al lado: la ficha se despliega en la lista, sin espacio perdido */
html body.nuevo .servicios-viz { padding-block: clamp(2rem, 4vw, 3.2rem) clamp(2.6rem, 5vw, 4rem); }
html body.nuevo .rueda--lista .rueda-zona { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 0; align-items: center; }
@media (min-width: 1000px) {
  html body.nuevo .rueda--lista .rueda-zona { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 4vw, 3.6rem); }
}
html body.nuevo .rueda--lista .rueda-figura { display: block; width: 100%; max-width: 40rem; margin: 0 auto; padding: 0; overflow: visible; }
.d-svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-tapa { fill: var(--c); }
.d-luz { fill: url(#d-luz-g); pointer-events: none; }
.d-pared { fill: var(--c); }
.d-pared--out { filter: brightness(.78); }
.d-pared--corte { filter: brightness(.7); }
.d-pared--in { filter: brightness(.58); }
.d-filo { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.3; stroke-linecap: round; pointer-events: none; }
.d-ico-fondo { fill: #fff; filter: drop-shadow(0 5px 7px rgba(2, 3, 34, .35)); }
.d-ico { fill: none; stroke: #0A0F4A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.d-esfera { filter: drop-shadow(0 16px 20px rgba(2, 3, 34, .55)); }
.d-esfera-filo { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; }
html body.nuevo .d-meta { font-family: var(--mano); font-size: 21px; fill: #FFC3CB; }
.d-esfera-g { animation: d-flota 5.5s ease-in-out infinite; }
.d-flota { animation: d-flota 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes d-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* entrada: cada losa cae a su lugar */
html body.nuevo .rueda--lista .rueda-seg { cursor: pointer; scale: 1; rotate: 0deg; opacity: 0; translate: 0 -40px; filter: none; transform-box: view-box;
  transition: opacity .6s calc(var(--i) * .12s), translate .9s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .12s), filter .35s; }
html body.nuevo .rueda--lista.is-visible .rueda-seg { opacity: 1; translate: 0 0; }
/* cursor o elección: la losa sale hacia afuera, se levanta y brilla en su color; las demás no cambian */
html body.nuevo .rueda--lista.is-visible .rueda-seg:is(.is-foco, .is-activa) {
  translate: calc(var(--dx) * 16px) calc(var(--dy) * 16px - 12px);
  filter: drop-shadow(0 14px 18px color-mix(in srgb, var(--c) 40%, transparent));
  transition: translate .45s cubic-bezier(.34, 1.56, .64, 1), filter .35s;
}
html body.nuevo .rueda--lista.con-foco .rueda-seg:not(.is-foco):not(.is-activa) { opacity: 1; filter: none; }

/* lista de áreas: cada una se despliega en su lugar */
.rueda-lista { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rueda-item {
  border-radius: 20px; background: linear-gradient(150deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: background .35s, box-shadow .35s, scale .4s cubic-bezier(.34, 1.56, .64, 1);
}
.rueda-item:has(.rueda-et:is(:hover, .is-foco)) { scale: 1.02; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent); }
.rueda-item:has(.rueda-et[aria-expanded="true"]) { background: linear-gradient(150deg, color-mix(in srgb, var(--c) 16%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1.5px var(--c); scale: 1; }
html body.nuevo .rueda--lista .rueda-et {
  position: static; translate: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; width: 100%; max-width: none;
  padding: .75rem .9rem; border: 0; border-radius: 20px; color: #fff; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font: inherit; text-align: left; cursor: pointer; scale: 1;
}
html body.nuevo .rueda--lista .rueda-et:is(:hover, .is-foco, .is-activa) { background: none; box-shadow: none; scale: 1; }
html body.nuevo .rueda--lista .rueda-et:focus-visible { outline: 2px solid #FFC3CB; outline-offset: 2px; }
.rueda-et-ico { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c) radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); box-shadow: 0 8px 16px -8px var(--c); }
.rueda-et-ico svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: #0A0F4A; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
html body.nuevo .rueda-et-n { font-family: var(--n-titulo); font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.rueda-et-mas { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: rotate .4s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s; }
.rueda-et-mas::before, .rueda-et-mas::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; border-radius: 2px; background: currentColor; translate: -50% -50%; }
.rueda-et-mas::after { rotate: 90deg; }
.rueda-et[aria-expanded="true"] .rueda-et-mas { rotate: 45deg; color: #0A0F4A; background: var(--c); box-shadow: none; }
html body.nuevo .rueda--lista .rueda-ficha { display: grid; gap: .75rem; padding: 0 1rem 1.1rem 4.3rem; animation: rueda-entra .45s cubic-bezier(.16, 1, .3, 1) both; }
html body.nuevo .rueda--lista .rueda-ficha[hidden] { display: none; }
html body.nuevo .rueda--lista .rueda-ficha p { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--n-texto); }
html body.nuevo .rueda--lista .rueda-ficha ul { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
html body.nuevo .rueda--lista .rueda-ficha li { display: flex; align-items: baseline; gap: .6rem; padding: 0; border-radius: 0; background: none; font-size: .95rem; font-weight: 600; color: #fff; scale: 1; }
html body.nuevo .rueda--lista .rueda-ficha li::before { content: ""; width: .5rem; height: .5rem; flex: none; translate: 0 -.08em; border-radius: 50%; background: var(--c); }
html body.nuevo .rueda--lista .rueda-ficha .btn { justify-self: start; margin-top: .2rem; }
@media (max-width: 599px) {
  html body.nuevo .rueda--lista .rueda-ficha { padding-left: 1rem; }
}
/* el disco no salta cuando una área se despliega: queda arriba y acompaña la lista */
@media (min-width: 1000px) {
  html body.nuevo .rueda--lista .rueda-zona { align-items: start; }
  html body.nuevo .rueda--lista .rueda-figura { position: sticky; top: 6.5rem; }
}
@media (max-width: 999px) { html body.nuevo .rueda--lista .rueda-zona { gap: .6rem; } }
/* la losa elegida sale claramente hacia afuera, también la del frente */
html body.nuevo .rueda--lista.is-visible .rueda-seg:is(.is-foco, .is-activa) { translate: calc(var(--dx) * 26px) calc(var(--dy) * 26px - 6px); }