/* =====================================================================
   EL DOJO · Contenido de la portada (octubre de 2026)
   Va DENTRO de la página de siempre: la cabecera, el menú, el pie y sus
   estilos son los de la web. Todo lo de aquí cuelga de .np y lleva el
   prefijo np- para no chocar con las clases que ya usa la web (fase,
   caso, dojo, prueba, nav…). Fuentes: las de la web (Roboto y Roboto
   Condensed de Google Fonts, con los pesos que se usan aquí).
   ===================================================================== */

.np{
  --negro:#050505;
  --carbon:#0d0c0a;
  --ambar:#f59e0b;
  --ambar-osc:#d97706;
  --gris:#b9b3a9;
  --gris-osc:#8a8378;
  --blanco:#ffffff;
  --linea:rgba(255,255,255,.09);
  --papel:#f5f2ee;
  --tarjeta:#fffdf9;
  --tinta:#13100a;
  --tinta-2:#4a443b;
  --borde:#e7e2d8;
  --azul:#2a78d6;
  --ok:#059669;
  --cond:'Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --sans:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ancho:1200px;
  --gutter:24px;
  --menu:72px; /* alto del menú fijo de la web */
  background:var(--negro);color:var(--gris);font-family:var(--sans);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
.np *,.np *::before,.np *::after{box-sizing:border-box}
/* Reinicio con :where(): no suma especificidad, así manda siempre la clase de cada elemento */
.np :where(h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure){margin:0;padding:0}
.np :where(img,svg){display:block;max-width:100%}
.np :where(a){color:inherit}
.np :focus-visible{outline:2px solid var(--ambar);outline-offset:3px;border-radius:4px}
.np svg.np-i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.np-contenedor{width:100%;max-width:calc(var(--ancho) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}

/* Fondos: la rejilla y el resplandor de las láminas de novedades */
.np-rejilla{position:relative;isolation:isolate}
.np-rejilla::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:54px 54px;mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.05));-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.05))}
.np-brillo{position:relative;isolation:isolate}
.np-brillo::after{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;
  background:radial-gradient(640px 420px at var(--bx,70%) var(--by,45%),rgba(245,158,11,.12),transparent 70%)}

/* Tipografía de sección */
.np-ante{display:flex;align-items:center;gap:14px;font-family:var(--cond);font-weight:700;font-size:16px;line-height:1.35;letter-spacing:.3em;text-transform:uppercase;color:var(--ambar)}
.np-ante::before{content:'';flex:none;width:44px;height:3px;border-radius:2px;background:var(--ambar)}
.np .np-titulo{margin-top:16px;font-family:var(--cond);font-weight:800;font-size:clamp(40px,5vw,72px);line-height:.94;letter-spacing:-.02em;text-transform:uppercase;color:var(--blanco);text-wrap:balance}
.np .np-titulo span{color:var(--ambar)}
.np-bajada{margin-top:22px;max-width:720px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--gris)}
.np-bajada b{color:var(--blanco);font-weight:600}
.np-cabeza{max-width:980px}
.np-seccion{padding:clamp(72px,9vw,120px) 0}
.np-seccion + .np-seccion{border-top:1px solid rgba(255,255,255,.05)}

/* El botón (una sola llamada a la acción, siempre con el mismo texto) */
.np-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:15px 26px 14px;border-radius:8px;white-space:nowrap;
  font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#0a0a0a;box-shadow:0 10px 30px rgba(245,158,11,.25);transition:transform .2s ease,box-shadow .2s ease}
.np-boton svg{width:19px;height:19px}
.np-boton:hover{transform:translateY(-1px);box-shadow:0 14px 36px rgba(245,158,11,.35);color:#0a0a0a}
.np-accion{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px}
.np-accion small{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-osc)}

/* ---------- Portada ---------- */
.np-heroe{padding:calc(var(--menu) + clamp(40px,6vw,88px)) 0 clamp(64px,8vw,104px);--bx:72%;--by:52%}
.np-heroe .np-contenedor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,4vw,64px);align-items:center}
.np-heroe .np-titulo{font-size:clamp(50px,6.6vw,100px)}
.np-heroe .np-bajada{max-width:560px}
.np-horas{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:16px;color:var(--gris)}
.np-horas svg{width:19px;height:19px;color:var(--ambar);flex:none}

/* La escena: el panel de la empresa y el WhatsApp de la líder, superpuestos */
.np-escena{display:grid;align-items:start}
.np-escena > *{grid-area:1/1}
.np-escena .np-navegador{margin-left:12%}
.np-escena .np-movil{justify-self:start;align-self:start;margin-top:296px;width:38%;max-width:240px;z-index:2}

/* ---------- Pantallas de la plataforma ---------- */
.np-navegador{background:var(--tarjeta);border-radius:16px;overflow:hidden;color:var(--tinta);font-size:13px;line-height:1.4;text-align:left;
  box-shadow:0 34px 90px rgba(0,0,0,.6),0 0 0 1px rgba(245,158,11,.22)}
.np-barra{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#ebe6dd;border-bottom:1px solid #ddd6ca}
.np-barra i{width:10px;height:10px;border-radius:50%;background:#d6cfc3}
.np-barra .np-url{flex:1;margin-left:10px;display:flex;align-items:center;gap:6px;max-width:300px;padding:4px 12px;border-radius:999px;background:#f8f5f0;font-size:11.5px;color:#7a7368;white-space:nowrap;overflow:hidden}
.np-barra .np-url svg{width:12px;height:12px;flex:none}
.np-app{background:var(--papel);padding:16px}
.np-app-k{font-family:var(--cond);font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#9a9388}
.np-app-t{font-family:var(--cond);font-weight:800;font-size:21px;line-height:1.1;text-transform:uppercase;color:var(--tinta)}
.np-app-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.np-pastilla{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#ebe5da;color:#5a534a;font-size:11.5px;font-weight:600;white-space:nowrap}
.np-pastilla svg{width:14px;height:14px;color:var(--ambar-osc)}
.np-tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:12px;padding:12px 14px}
.np-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.np-kpi .np-l{display:flex;align-items:flex-end;min-height:2.5em;font-family:var(--cond);font-weight:700;font-size:10.5px;line-height:1.25;letter-spacing:.12em;text-transform:uppercase;color:#8a8378}
.np-kpi .np-v{margin-top:2px;font-family:var(--cond);font-weight:800;font-size:28px;line-height:1.05;color:var(--tinta);font-variant-numeric:tabular-nums}
.np-kpi .np-v small{font-family:var(--sans);font-weight:400;font-size:12px;color:#8a8378;margin-left:2px}
.np-kpi .np-f{margin-top:2px;font-size:11px;color:var(--ok)}
.np-kpi .np-f.np-n{color:#8a8378}
.np-graf{margin-top:10px}
.np-graf .np-tt{font-weight:700;font-size:13px}
.np-graf .np-st{font-size:11px;color:#8a8378;margin-top:1px}
.np-leyenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:11px;color:#5a534a}
.np-leyenda span{display:inline-flex;align-items:center;gap:6px}
.np-leyenda i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* Gráficos (SVG generados) */
.np-g-rej{stroke:#ece7de;stroke-width:1}
.np-g-base{stroke:#d8d1c4;stroke-width:1}
.np-g-txt{font-family:var(--sans);font-size:10px;fill:#8a8378}
.np-l-area{fill:rgba(217,119,6,.12)}
.np-l-traza{fill:none;stroke:var(--ambar-osc);stroke-width:2.2;stroke-linejoin:round}
.np-l-punto{fill:var(--ambar-osc);stroke:var(--tarjeta);stroke-width:2}
.np-l-ult{r:5}
.np-l-etq{font-family:var(--cond);font-weight:800;font-size:12px;fill:var(--tinta)}
.np-radar .np-r-anillo{fill:none;stroke:#e6e0d5;stroke-width:1}
.np-radar .np-r-eje{stroke:#ece7de;stroke-width:1}
.np-radar .np-r-tu{fill:rgba(217,119,6,.14);stroke:var(--ambar-osc);stroke-width:2;stroke-linejoin:round}
.np-radar .np-r-eq{fill:rgba(42,120,214,.10);stroke:var(--azul);stroke-width:2;stroke-linejoin:round}
.np-radar .np-r-tu-p{fill:var(--ambar-osc);stroke:var(--tarjeta);stroke-width:1.5}
.np-radar .np-r-eq-p{fill:var(--azul);stroke:var(--tarjeta);stroke-width:1.5}
.np-radar .np-r-txt{font-family:var(--sans);font-size:10.5px;fill:#5a534a}

/* Aviso que aparece en el panel cuando el equipo valida */
.np-aviso{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;max-width:290px;padding:10px 14px 10px 10px;border-radius:12px;background:var(--tinta);color:#f5f2ee;font-size:12px;line-height:1.35;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.np-aviso b{color:#fff;font-weight:600}
.np-aviso .np-ico{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(5,150,105,.2);color:#34d399}
.np-aviso .np-ico svg{width:17px;height:17px}

/* Teléfono y WhatsApp */
.np-movil{position:relative;border-radius:38px;padding:9px;background:#111;text-align:left;box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 0 1.5px #2a2a2a,inset 0 0 0 1px #000}
.np-movil::before{content:'';position:absolute;top:15px;left:50%;width:74px;height:20px;transform:translateX(-50%);border-radius:999px;background:#000;z-index:3}
.np-pantalla-movil{border-radius:30px;overflow:hidden;background:#efeae2;display:flex;flex-direction:column}
.np-wa-cab{display:flex;align-items:center;gap:9px;padding:38px 12px 10px;background:#008069;color:#fff}
.np-wa-cab svg{width:18px;height:18px;flex:none}
.np-wa-cab img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
.np-wa-cab .np-n{font-weight:600;font-size:13.5px;line-height:1.15}
.np-wa-cab .np-e{font-size:11px;opacity:.85}
.np-wa-chat{display:flex;flex-direction:column;gap:7px;padding:12px 10px 14px;min-height:300px;background-color:#efeae2;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.np-wa-dia{align-self:center;padding:3px 10px;border-radius:7px;background:#fff;font-size:10.5px;color:#54656f;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.np-b{max-width:86%;padding:6px 9px 4px;border-radius:9px;font-size:12.6px;line-height:1.38;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13);position:relative}
.np-b .np-h{display:block;text-align:right;font-size:9.5px;color:#667781;margin-top:1px}
.np-b.np-in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.np-b.np-out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.np-b.np-out .np-h::after{content:' ✓✓';color:#53bdeb;letter-spacing:-2px}
.np-b ol{margin:4px 0 2px 18px}
.np-b ol li{margin:1px 0}
.np-b b{font-weight:600}
.np-escribiendo{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;border-radius:9px;border-top-left-radius:2px;background:#fff;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.np-escribiendo i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:np-salto 1s infinite ease-in-out}
.np-escribiendo i:nth-child(2){animation-delay:.15s}
.np-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes np-salto{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.np-wa-pie{display:flex;align-items:center;gap:8px;padding:8px 10px 12px;background:#efeae2}
.np-wa-pie .np-m{flex:1;padding:8px 12px;border-radius:999px;background:#fff;font-size:12px;color:#8696a0}
.np-wa-pie .np-mic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#00a884;color:#fff}
.np-wa-pie .np-mic svg{width:16px;height:16px}

/* La plataforma instalada en el teléfono */
.np-pantalla-movil.np-app-movil{background:var(--papel)}
.np-am-cab{display:flex;align-items:center;justify-content:space-between;padding:40px 14px 10px;background:var(--tinta)}
.np-am-cab img{height:17px;width:auto}
.np-am-cab .np-yo{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--ambar);color:#0a0a0a;font-family:var(--cond);font-weight:800;font-size:11px}
.np-am-cuerpo{padding:12px;color:var(--tinta);font-size:12.5px;line-height:1.4;display:flex;flex-direction:column;gap:10px}

/* ---------- El problema ---------- */
.np-problema .np-contenedor{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end}
.np-problema .np-bajada{max-width:none;margin-top:0;padding-bottom:6px}
.np .np-problema .np-titulo{font-size:clamp(38px,4.6vw,64px)}

/* ---------- Las cuatro fases ---------- */
.np-fases{margin-top:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:clamp(72px,9vw,128px)}
.np-fase{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.np-letra{display:flex;align-items:flex-end;gap:16px;line-height:.78}
.np-letra b{font-family:var(--cond);font-weight:800;font-size:clamp(120px,14vw,200px);color:rgba(245,158,11,.14);-webkit-text-stroke:2px var(--ambar);letter-spacing:-.04em}
.np-letra span{padding-bottom:12px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.3em;text-transform:uppercase;color:var(--ambar);line-height:1.5}
.np-letra span em{display:block;font-style:normal;color:var(--gris-osc);letter-spacing:.16em}
.np .np-fase-texto h3{margin-top:22px;font-family:var(--cond);font-weight:800;font-size:clamp(34px,3.6vw,48px);line-height:1;text-transform:uppercase;color:var(--blanco)}
.np-fase-texto > p{margin-top:16px;font-size:18px;color:var(--gris)}
.np-fase-texto > p b{color:var(--blanco);font-weight:600}

/* Detalles de las pantallas de cada fase */
.np-dos-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.np-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.np-chip svg{width:13px;height:13px}
.np-chip--ambar{background:rgba(245,158,11,.15);color:#a3620a}
.np-chip--ok{background:rgba(5,150,105,.12);color:#047857}
.np-chip--gris{background:#ebe5da;color:#5a534a}
.np-boton-app{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:6px;font-family:var(--cond);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#0a0a0a}
.np-boton-app svg{width:14px;height:14px}
.np-boton-app--sec{background:#fff;border:1px solid #ddd5c8;color:var(--tinta)}
.np-fila-ico{display:flex;align-items:center;gap:8px;color:var(--tinta-2);font-size:12.5px}
.np-fila-ico svg{width:15px;height:15px;color:var(--ambar-osc);flex:none}
.np-squad{display:flex}
.np-squad i{width:26px;height:26px;margin-left:-6px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--tarjeta);font-family:var(--cond);font-style:normal;font-weight:800;font-size:10px;color:#fff}
.np-squad i:first-child{margin-left:0}
.np-informe{border-left:3px solid var(--ambar)}
.np-informe .np-r{display:grid;grid-template-columns:18px 1fr;gap:8px;margin-top:8px;font-size:12.5px;color:var(--tinta-2)}
.np-informe .np-r svg{width:16px;height:16px;margin-top:1px}
.np-firma{display:flex;align-items:center;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid #eee8dd;font-size:11px;color:#8a8378}
.np-firma img{width:20px;height:20px;border-radius:50%}
.np-compo{font-size:13px;font-weight:500;line-height:1.4;color:var(--tinta);margin-top:6px}
.np-evid{display:grid;grid-template-columns:22px 1fr;gap:8px;padding:8px 0;border-top:1px solid #eee8dd}
.np-evid:first-of-type{border-top:0}
.np-evid .np-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.np-evid .np-ic svg{width:13px;height:13px}
.np-evid .np-t{font-size:12px;font-weight:500;color:var(--tinta);line-height:1.35}
.np-evid .np-s{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:3px;font-size:10.5px;color:#8a8378}
.np-evid .np-s .np-chip{font-size:10px;padding:2px 7px}
.np-progreso .np-barra-p{position:relative;height:9px;margin-top:8px;border-radius:99px;background:#ebe5da}
.np-progreso .np-barra-p i{position:absolute;inset:0 auto 0 0;width:67%;border-radius:99px;background:#F2B807}
.np-progreso .np-barra-p b{position:absolute;top:-4px;left:70%;width:2px;height:17px;background:var(--tinta)}
.np-progreso .np-ley{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:#8a8378}
.np-obi{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.np-obi span{height:22px;border-radius:5px;display:grid;place-items:center;font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#0a0a0a;opacity:.35}
.np-obi span.np-hecho{opacity:1}
.np-obi span.np-siguiente{opacity:1;outline:2px dashed var(--tinta);outline-offset:1px}
.np-embudo{margin-top:8px;display:flex;flex-direction:column;gap:7px}
.np-paso{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 26px;align-items:center;gap:8px;font-size:11.5px;color:#2a2620}
.np-paso .np-bb{height:8px;border-radius:99px;background:#ebe5da;overflow:hidden}
.np-paso .np-bb i{display:block;height:100%;border-radius:99px;background:var(--ambar-osc)}
.np-paso .np-n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* El PDF del comité, en miniatura, junto al texto de la fase 4 */
.np-pdf-fila{display:grid;grid-template-columns:118px 1fr;gap:22px;align-items:center;margin-top:28px;padding:18px 20px;border-radius:18px;border:1.5px dashed rgba(245,158,11,.4)}
.np-pdf-fila p{font-size:16px;line-height:1.45;color:var(--gris)}
.np-pdf-fila p b{display:block;margin-bottom:2px;font-family:var(--cond);font-weight:800;font-size:19px;line-height:1.15;text-transform:uppercase;color:var(--blanco)}
.np-pdf-mini{position:relative;width:118px;aspect-ratio:210/297;padding:12px 10px;border-radius:5px;background:#0b0a08;color:#fff;transform:rotate(-3deg);box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14);display:flex;flex-direction:column}
.np-pdf-mini .np-lg{height:8px;width:auto;align-self:flex-start}
.np-pdf-mini .np-k{margin-top:12px;font-family:var(--cond);font-weight:700;font-size:5px;letter-spacing:.2em;color:var(--ambar)}
.np-pdf-mini .np-t{margin-top:3px;font-family:var(--cond);font-weight:800;font-size:12px;line-height:.95;text-transform:uppercase}
.np-pdf-mini .np-t span{color:var(--ambar)}
.np-pdf-mini .np-ks{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.np-pdf-mini .np-ks div{padding:3px 4px;border-radius:3px;background:rgba(255,255,255,.07);font-family:var(--cond);font-weight:800;font-size:9px}
.np-pdf-mini .np-ks small{display:block;font-family:var(--sans);font-weight:400;font-size:4.5px;color:#a8a29a}

/* ---------- Leonor ---------- */
.np-leonor{--bx:28%;--by:55%}
.np-leonor .np-contenedor{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.np-leonor .np-movil{width:100%;max-width:330px;justify-self:center}
.np-leonor .np-wa-chat{min-height:420px}

/* ---------- Privacidad ---------- */
.np-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(40px,5vw,56px)}
.np-dato{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;padding:20px 22px;border-radius:20px;background:rgba(255,255,255,.035);border:1.5px solid var(--linea)}
.np-dato .np-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(245,158,11,.14);color:var(--ambar)}
.np-dato .np-ico svg{width:24px;height:24px}
.np-dato p{font-size:17px;line-height:1.5;color:var(--gris)}
.np-dato p b{display:block;margin-bottom:4px;font-family:var(--cond);font-weight:800;font-size:21px;line-height:1.1;text-transform:uppercase;color:var(--blanco)}

/* ---------- Los Dojos ---------- */
.np-dojos{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.np-dojo{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:20px;background:rgba(255,255,255,.035);border:1.5px solid var(--linea);text-decoration:none;transition:border-color .2s,transform .2s}
.np-dojo:hover{border-color:rgba(245,158,11,.55);transform:translateY(-2px)}
.np-dojo .np-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(245,158,11,.14);color:var(--ambar)}
.np-dojo .np-ico svg{width:22px;height:22px}
.np .np-dojo h3{font-family:var(--cond);font-weight:800;font-size:25px;line-height:1.02;text-transform:uppercase;color:var(--blanco)}
.np-dojo .np-indicador{margin-top:auto;font-size:16px;color:var(--gris)}
.np-dojo .np-indicador b{display:block;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ambar)}
.np-comun{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 20px;border-radius:16px;border:1.5px dashed rgba(245,158,11,.4);font-size:16.5px;color:var(--gris)}
.np-comun svg{width:26px;height:26px;color:var(--ambar);flex:none}

/* ---------- De dónde venimos ---------- */
.np-casos{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:820px}
.np-caso{padding:26px;border-radius:20px;background:var(--carbon);border:1.5px solid var(--linea)}
.np-caso .np-cifra{font-family:var(--cond);font-weight:800;font-size:clamp(56px,6vw,76px);line-height:.9;letter-spacing:-.02em;color:var(--ambar);white-space:nowrap}
.np-caso .np-que{margin-top:10px;font-family:var(--cond);font-weight:800;font-size:21px;line-height:1.1;text-transform:uppercase;color:var(--blanco)}
.np-caso .np-quien{margin-top:6px;font-size:15px;color:var(--gris-osc)}
.np-enlace{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar);text-decoration:none}
.np-enlace svg{width:17px;height:17px;transition:transform .2s}
.np-enlace:hover{color:var(--ambar)}
.np-enlace:hover svg{transform:translateX(3px)}

/* ---------- Antes de reservar ---------- */
.np-faq{margin-top:clamp(40px,5vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.np-faq > div{padding:24px;border-radius:20px;border:1.5px solid var(--linea)}
.np .np-faq h3{font-family:var(--cond);font-weight:800;font-size:22px;line-height:1.15;text-transform:none;color:var(--blanco)}
.np-faq p{margin-top:10px;font-size:16.5px;line-height:1.5;color:var(--gris)}

/* ---------- Reservar ---------- */
.np-reservar{--bx:50%;--by:40%}
.np-reservar-caja{position:relative;padding:clamp(36px,5vw,64px);border-radius:28px;border:1.5px solid rgba(245,158,11,.45);background:radial-gradient(800px 380px at 85% 0%,rgba(245,158,11,.16),transparent 70%),var(--carbon);overflow:hidden}
.np-reservar-caja .np-bajada{max-width:640px}

/* ---------- Movimiento: la escena de la portada ---------- */
.np-js .np-escena .np-anim{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.np-js .np-escena .np-anim.np-visible{opacity:1;transform:none}
.np-js .np-escena .np-escribiendo{display:none}
.np-js .np-escena .np-escribiendo.np-visible{display:flex}
.np-escena .np-cifra-viva{display:inline-block;transition:color .3s}
.np-escena .np-cifra-viva.np-subio{color:var(--ok)}
.np-kpi.np-destello{animation:np-destello 1.6s ease}
@keyframes np-destello{0%{box-shadow:0 0 0 0 rgba(5,150,105,0)}25%{box-shadow:0 0 0 4px rgba(5,150,105,.25)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}
@media (prefers-reduced-motion:reduce){
  .np *,.np *::before,.np *::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- Pantallas medianas ---------- */
@media (max-width:1100px){
  .np-heroe .np-contenedor{grid-template-columns:1fr}
  .np-heroe .np-bajada{max-width:680px}
  .np-escena{max-width:720px}
  .np-problema .np-contenedor{grid-template-columns:1fr;align-items:start}
  .np-fase{grid-template-columns:1fr}
  .np-fase > *{max-width:760px}
  .np-leonor .np-contenedor{grid-template-columns:1fr}
  .np-leonor .np-contenedor > div:last-child{max-width:820px}
  .np-leonor .np-movil{order:2}
  .np-dojos,.np-faq{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- Teléfono ---------- */
@media (max-width:640px){
  .np{--gutter:16px;--menu:64px;font-size:17px}
  .np .np-titulo{font-size:clamp(40px,12vw,56px)}
  .np-heroe .np-titulo{font-size:clamp(44px,13vw,60px)}
  .np-ante{font-size:14px;letter-spacing:.2em}
  .np-boton{width:100%;white-space:normal;text-align:center}
  .np-accion{align-items:stretch}
  .np-escena{display:flex;flex-direction:column}
  .np-escena .np-navegador{margin-left:0}
  .np-escena .np-movil{order:-1;width:84%;max-width:300px;margin:0 auto -30px;align-self:center}
  .np-escena .np-aviso{left:12px;right:12px;max-width:none;font-size:11.5px}
  .np-navegador{font-size:12px}
  .np-kpis{gap:6px}
  .np-kpi.np-tarjeta{padding:8px 9px}
  .np-kpi .np-v{font-size:21px}
  .np-kpi .np-l{font-size:9px;letter-spacing:.06em}
  .np-kpi .np-f{font-size:10px}
  .np-dos-col,.np-datos,.np-dojos,.np-casos,.np-faq{grid-template-columns:1fr}
  .np-letra b{font-size:116px}
  .np-pdf-fila{grid-template-columns:96px 1fr;gap:16px;padding:14px 16px}
  .np-pdf-mini{width:96px}
}

/* =====================================================================
   RITMO OSCURO / CLARO · manual de marca v1.0, pagina 13
   ---------------------------------------------------------------------
   "Una pagina entera en negro cansa y una pagina entera en blanco no es
   El Dojo." Las cuatro reglas del manual: la primera seccion siempre
   oscura, se alterna a partir de ahi, dos seguidas del mismo fondo son
   una excepcion que hay que justificar en un comentario, y las tarjetas
   van en #0D0D0D/#13100A sobre oscuro y en crema #F5F2EE sobre claro.

   Con nueve secciones la alternancia estricta sale redonda y no hace
   falta ninguna excepcion: portada oscura, reservar oscura, y las cuatro
   claras caen justo en las que no dependen del negro --texto, tarjetas,
   preguntas y el movil de WhatsApp, que trae sus propios colores--. Las
   que llevan dentro el radar, el embudo, el panel o el PDF se quedan
   sobre negro, que es donde se leen.

   No se reescribe ninguna regla de las de arriba: la seccion clara solo
   redefine las variables y todo lo que cuelga de ella las hereda. Asi,
   cuando se toque un componente, no hay dos sitios que actualizar.
   ===================================================================== */
.np-claro{
  background:var(--papel-claro);
  color:var(--gris);
  /* Las mismas variables, con el valor que les toca sobre papel. */
  --papel-claro:#ffffff;   /* "Papel" del manual: secciones claras */
  --blanco:#13100a;        /* lo que gritaba en blanco pasa a tinta */
  --gris:#4a443b;          /* cuerpo · 9,6:1 */
  --gris-osc:#6b655c;      /* secundario · 5,8:1 sobre papel, 5,2:1 sobre crema */
  --carbon:#f5f2ee;        /* crema: las tarjetas que manda el manual */
  /* El secundario no se mide contra el blanco de la seccion sino contra la
     crema de la tarjeta, que es donde acaba casi siempre. El #75706A del
     manual aguanta sobre papel (4,9:1) y se queda en 4,39:1 sobre crema:
     por debajo del minimo justo donde mas se usa. */
  --linea:rgba(19,16,10,.14);
  --ambar:#b88a00;         /* ambar profundo: el unico que aguanta el blanco */
  --ambar-osc:#806000;
}

/* El ambar pequeno necesita mas que el ambar profundo.
   El manual da tres ambares y ninguno llega a 4,5:1 sobre blanco: el
   oficial #F2B807 se queda en 1,6:1 y el profundo #B88A00 en 3,1:1, que
   vale para un titular grande y para un icono, pero no para un
   antetitulo de 14 px ni para un enlace. Aqui va el mismo tono que ya se
   uso en el Campus del Master para el ambar sobre crema. Conviene
   subirlo al manual en la proxima version. */
.np-claro .np-ante,
.np-claro .np-enlace,
.np-claro .np-dojo .np-indicador b,
.np-claro .np-dojo .np-ico,
.np-claro .np-comun svg{ color:#806000 }
.np-claro .np-ante::before{ background:#806000 }

/* Tarjetas. En oscuro son un velo de blanco al 3,5 %, que sobre papel no
   se ve: pasan a crema, que es la tarjeta de seccion clara del manual. */
.np-claro .np-dato,
.np-claro .np-dojo{ background:var(--carbon) }
.np-claro .np-dojo:hover{ border-color:rgba(184,138,0,.55) }

/* El brillo ambar esta calculado para fundirse con el negro; sobre papel
   ensucia. La seccion clara no lo lleva. */
.np-claro.np-brillo::after{ display:none }

/* Separador entre secciones. Era una linea blanca al 5 % para distinguir
   dos negros seguidos; ahora el cambio de fondo ya separa, y la linea
   solo se veria como una raya clara al empezar la seccion oscura. */
.np-claro,
.np-claro + .np-seccion{ border-top:0 }

/* Respiracion: el manual pide 100 px en oscuro y 80 en claro. */
.np-claro{ padding:clamp(56px,7vw,96px) 0 }

/* La rejilla de fondo es un velo de blanco al 3 %: sobre papel no se ve.
   Sobre claro va el mismo velo en tinta, para que la textura no se pierda
   justo en las secciones que mas aire tienen. */
.np-claro.np-rejilla::before{
  background-image:linear-gradient(rgba(19,16,10,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,16,10,.05) 1px,transparent 1px);
}