/* nortakai.com en varias páginas · plantilla común · maqueta del diseñador, 10/11/2026 (encargo e-261110-1447-pm-wd1).
   Se carga después de estilos.css (copia de fuente/estilos.css de la v3.46, sin Literata). Aquí va solo lo que necesita
   un sitio de varias páginas: la página en la que estás en la cabecera, el menú del móvil, el pie con enlaces, la cabecera
   de las páginas interiores, el cierre común, el aviso legal en su página, la 404 y los huecos de texto de la maqueta.
   Todos los valores salen del sistema (tokens de estilos.css y del registro de web); ninguno escrito a mano fuera de él. */

/* ---------- Cabecera: la página en la que estás ----------
   Las pestañas con subrayado siguen para navegar contenido (registro de web): la página actual va en tinta, en 600 y con
   una raya de 2 px pegada al filete de la cabecera. Nada más cambia: el tamaño de lo que se pulsa no se mueve. */
.cab{position:sticky;top:0;z-index:20}
.cab nav a[aria-current="page"]{color:var(--text);font-weight:600;box-shadow:inset 0 -2px 0 var(--text);border-radius:0}
/* El subrayado de la página actual no puede quitar el anillo del foco (-dr3, WCAG 2.4.7) */
.cab nav a[aria-current="page"]:focus-visible{box-shadow:var(--foco),inset 0 -2px 0 var(--text);border-radius:var(--radius-action)}
.cab .hablemos{display:none}
@media (min-width:760px){.cab .hablemos{display:inline-flex;min-height:var(--tap-min);margin-left:var(--space-2)}}
.cab nav a.btn{color:var(--text-inv)}
.cab nav a.btn:hover{color:var(--text-inv)}

/* ---------- Menú del móvil (menos de 760 px) ----------
   Un desplegable nativo (<details>): funciona sin JavaScript y sin tocar la política de seguridad. Se abre sin fundido
   y debajo de la cabecera, con las páginas en una lista con pelo entre filas, «Hablemos» y el idioma. */
.menu-movil{position:static}
@media (min-width:760px){.menu-movil{display:none}}
.menu-movil > summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-3);border:1px solid var(--border-ctrl);border-radius:var(--radius-md);font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.menu-movil > summary::-webkit-details-marker{display:none}
.menu-movil > summary .raya3{display:grid;gap:3px;width:14px}
.menu-movil > summary .raya3 i{display:block;height:2px;background:var(--text);border-radius:1px}
.menu-movil[open] > summary .raya3 i:nth-child(2){opacity:0}
.menu-movil > summary:focus-visible{outline:0;box-shadow:var(--foco)}
.menu-movil .panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);padding:var(--space-2) var(--space-4) var(--space-5)}
.menu-movil .panel ul{list-style:none;margin:0;padding:0}
.menu-movil .panel li + li a{border-top:1px solid var(--line-soft)}
.menu-movil .panel a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0;font-size:17px;color:var(--text);text-decoration:none;border-radius:0}
.menu-movil .panel a[aria-current="page"]{font-weight:600}
.menu-movil .panel a[aria-current="page"]::after{content:"";width:6px;height:6px;background:var(--brand);transform:rotate(45deg)}
.menu-movil .panel .acciones-menu{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}

/* ---------- Cabecera de una página interior ----------
   En el lienzo de siempre, con el titular de exhibición de la portada a menor escala y su pieza viva a la derecha (la
   carta en Servicios, la brújula en Cómo trabajamos). Sin pieza, las isóbatas al 30 % detrás, solo en la cabecera. */
.cabecera-pagina{position:relative;isolation:isolate;overflow:hidden;padding:var(--space-9) 0 var(--space-8);border-bottom:1px solid var(--line)}
.cabecera-pagina .wrap{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:980px){.cabecera-pagina{min-height:calc(100svh - 65px);display:grid;align-content:center;padding:var(--space-8) 0}
  .cabecera-pagina .wrap{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-9)}}
.cabecera-pagina.corta{min-height:0;padding:var(--space-9) 0 var(--space-8)}
.cabecera-pagina.corta .wrap{grid-template-columns:minmax(0,1fr)}
.cabecera-pagina h1{font-family:var(--font-head);font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.03em;font-variation-settings:var(--head-display, 'wdth' 112,'wght' 800);font-weight:800;margin:var(--space-3) 0 0;max-width:14ch}
.cabecera-pagina .lead{margin-top:var(--space-6);font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--text-2);max-width:34em;text-align:left;hyphens:manual}
.cabecera-pagina .acciones{margin-top:var(--space-7)}
.cabecera-pagina.con-motivo::before{content:"";position:absolute;inset:-10% -6% -10% 42%;z-index:-1;background:url(/assets/isobatas.2324a7bff6.svg) center/cover no-repeat;opacity:.3;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cabecera-pagina.con-motivo::before{filter:invert(1)}}
.cabecera-pagina figure.carta{margin:0}
.cabecera-pagina .pieza{position:relative}

/* -b3d / -b3e: la brújula con volumen se inclina dentro de su lienzo (brujula3d.js); el giro con CSS de app.js no se aplica */
.brujula.b3d{transform:none!important}

/* ---------- Portada: el Método como protagonista ---------- */
.metodo-portada .wrap{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:980px){.metodo-portada .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--space-10)}}
.metodo-portada h2{max-width:14em}
.metodo-portada .lead-sec{margin-top:var(--space-5)}
/* Franja «Por qué» con título visible (-tpq): el h2 abre la pantalla y el párrafo va pegado debajo */
.por-que h2 + .lead-sec{margin-top:var(--space-5)}
@media (max-width:979px){.sec.banda.por-que h2{padding-top:var(--space-9)}.sec.banda.por-que h2 + .lead-sec{padding-top:0}}
.metodo-portada .acciones{margin-top:var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* La ruta del Método: tres paradas y la medición, en tinta; la llegada, un anillo. Línea de datos de 1,5 px; el pelo para la guía */
.ruta-metodo{list-style:none;margin:0;padding:var(--space-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-web,6px);display:grid;gap:0;counter-reset:paso}
.ruta-metodo li{position:relative;display:grid;grid-template-columns:28px 1fr;column-gap:var(--space-4);padding:var(--space-4) 0}
.ruta-metodo li + li{border-top:1px solid var(--line-soft)}
.ruta-metodo li::before{counter-increment:paso;content:"";grid-row:1 / span 2;align-self:start;margin-top:5px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--text);background:var(--surface);justify-self:center}
.ruta-metodo li:last-child::before{width:18px;height:18px;margin-top:2px;border-width:1.5px;box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 10px var(--text)}
.ruta-metodo li::after{content:"";position:absolute;left:13.25px;top:calc(var(--space-4) + 19px);bottom:calc(-1 * var(--space-4) - 5px);width:1.5px;background:var(--text);z-index:0}
.ruta-metodo li:last-child::after{display:none}
.ruta-metodo strong{font-family:var(--font-head);font-variation-settings:'wdth' 104,'wght' 700;font-weight:700;font-size:19px;line-height:1.25}
.ruta-metodo span{grid-column:2;color:var(--text-2);font-size:15px;line-height:1.5;margin-top:var(--space-1)}

/* ---------- Portada: las cuatro líneas en resumen y los principios en resumen ---------- */
.lineas-resumen{list-style:none;margin:var(--space-7) 0 0;padding:0;border-top:2px solid var(--text);border-bottom:2px solid var(--text)}
.lineas-resumen li + li{border-top:1px solid var(--line)}
.lineas-resumen a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-6);align-items:center;padding:var(--space-5) 0;text-decoration:none;color:var(--text);min-height:64px}
@media (min-width:760px){.lineas-resumen a{grid-template-columns:minmax(0,14em) minmax(0,1fr) auto}}
.lineas-resumen .nombre{font-family:var(--font-head);font-variation-settings:'wdth' 108,'wght' 700;font-weight:700;font-size:clamp(22px,2.2vw,30px);line-height:1.1;display:flex;align-items:center;gap:var(--space-3)}
.lineas-resumen .nombre::before{content:"";flex:none;width:8px;height:8px;background:var(--text);transform:rotate(45deg);transition:background-color var(--dur-1) var(--ease-out)}
.lineas-resumen .pregunta{color:var(--text-2);font-size:17px;grid-column:1}
@media (min-width:760px){.lineas-resumen .pregunta{grid-column:auto}}
.lineas-resumen .ir{grid-row:1 / span 2;grid-column:2;align-self:center;font-size:20px;color:var(--text-2);transition:transform var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
@media (min-width:760px){.lineas-resumen .ir{grid-row:auto;grid-column:auto}}
.lineas-resumen a:hover .nombre::before{background:var(--brand)}
.lineas-resumen a:hover .ir{color:var(--text);transform:translateX(4px)}
.lineas-resumen a:focus-visible{outline:0;box-shadow:var(--foco)}
.mas{margin-top:var(--space-6)}

.principios-resumen{list-style:none;margin:var(--space-7) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:760px){.principios-resumen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}}
@media (min-width:1100px){.principios-resumen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.principios-resumen li{padding:var(--space-5) 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:32px 1fr;column-gap:var(--space-3)}
.principios-resumen .card{font-family:var(--font-head);font-variation-settings:'wdth' 100,'wght' 400;font-size:28px;line-height:1;color:var(--text-3);grid-row:1 / span 2}
.principios-resumen li:first-child .card{color:var(--text)}
.principios-resumen li > :not(.card){grid-column:2}
.principios-resumen strong{font-size:17px;line-height:1.3}
.principios-resumen span.t{color:var(--text-2);font-size:15px;line-height:1.5;margin-top:var(--space-1)}

/* ---------- Servicios: una línea por pantalla, con el esquema de la oferta por servicio ---------- */
.linea-serv .cabeza-linea{display:grid;gap:var(--space-3);margin-bottom:var(--space-7)}
@media (min-width:980px){.linea-serv .cabeza-linea{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:var(--space-10)}}
.linea-serv .numero{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
.linea-serv h2{display:flex;align-items:center;gap:var(--space-4)}
.linea-serv h2::before{content:"";flex:none;width:12px;height:12px;background:var(--brand);transform:rotate(45deg)}
.linea-serv .pregunta-linea{font-family:var(--font-head);font-variation-settings:'wdth' 100,'wght' 500;font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:var(--text-2);margin:0}
.fichas{display:grid;gap:var(--space-5)}
@media (min-width:980px){.fichas.dos-col{grid-template-columns:repeat(2,minmax(0,1fr))}.fichas.tres-col{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ficha{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-web,6px);padding:var(--space-6);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.ficha:hover{border-color:var(--text);box-shadow:var(--sombra-raton)}
.ficha h3{font-size:21px;line-height:1.2;margin:0}
.ficha .tag{margin-bottom:var(--space-3)}
.ficha dl{margin:var(--space-5) 0 0;display:grid;gap:0}
.ficha dl div{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr);gap:var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--line-soft)}
.ficha dt{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2);padding-top:2px}
.ficha dd{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
@media (max-width:479px){.ficha dl div{grid-template-columns:1fr;gap:var(--space-1)}}
.aparte-metodo{margin-top:var(--space-8);display:grid;gap:var(--space-4);padding:var(--space-6) 0;border-top:2px solid var(--text);border-bottom:1px solid var(--line)}
@media (min-width:760px){.aparte-metodo{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
.aparte-metodo p{margin:0;font-family:var(--font-head);font-variation-settings:'wdth' 100,'wght' 500;font-size:clamp(19px,1.8vw,24px);line-height:1.35}

/* ---------- Cómo trabajamos: secciones de lectura ---------- */
.lectura{display:grid;gap:var(--space-7)}
@media (min-width:980px){.lectura{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-10);align-items:start}}

/* ---------- Cierre común: «hablemos» al final de cada página interior ---------- */
.cierre{text-align:left}
.cierre .wrap{display:grid;gap:var(--space-6)}
@media (min-width:980px){.cierre .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--space-10)}}
.cierre .acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.cierre .dir{font-weight:600}

/* ---------- Pie común ---------- */
.pie-nav{display:grid;gap:var(--space-6);margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--line)}
@media (min-width:760px){.pie-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.pie-nav{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* -ms5: cuatro columnas con Redes; en tableta, 2 × 2 */
.pie-nav h2{font-family:var(--font-ui);font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2);margin:0 0 var(--space-2);letter-spacing:0;font-variation-settings:normal;max-width:none}
.pie-nav ul{list-style:none;margin:0;padding:0}
.pie-nav a{display:inline-flex;align-items:center;min-height:32px;color:var(--text);text-decoration:none;font-size:15px}
.pie-nav a:hover{text-decoration:underline}
.pie-nav a[aria-current="page"]{font-weight:600}
.pie .fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}

/* ---------- Aviso legal en su propia página: índice a la izquierda, texto de lectura a la derecha ---------- */
.legal-pagina .wrap{display:grid;gap:var(--space-7)}
@media (min-width:980px){.legal-pagina .wrap{grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:var(--space-10);align-items:start}}
.legal-indice{font-size:15px}
@media (min-width:980px){.legal-indice{position:sticky;top:96px}}
.legal-indice h2{font-family:var(--font-ui);font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2);margin:0 0 var(--space-2);font-variation-settings:normal;letter-spacing:0}
.legal-indice ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.legal-indice a{display:flex;align-items:center;min-height:36px;padding-left:var(--space-4);color:var(--text-2);text-decoration:none;margin-left:-1px;border-left:2px solid transparent}
.legal-indice a:hover{color:var(--text)}
.legal-indice a[aria-current="true"]{color:var(--text);border-left-color:var(--text);font-weight:600}
.legal-texto{max-width:42em}
.legal-texto h2{font-size:clamp(24px,2.6vw,32px);margin:var(--space-9) 0 var(--space-4);scroll-margin-top:96px}
.legal-texto h2:first-child{margin-top:0}
.legal-texto p{margin:0 0 var(--space-4);font-size:17px;line-height:1.65;color:var(--text-2)}
.legal-texto p strong{color:var(--text)}
.legal-texto a{color:var(--text)}
.legal-texto .huella dt{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
.legal-texto .huella dd{margin:0 0 var(--space-3);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---------- Verificar el diagnóstico, en /metodo/#verificar ---------- */
.verificar .huella{margin:var(--space-5) 0;display:grid;gap:0;border-top:2px solid var(--text);border-bottom:2px solid var(--text)}
.verificar .huella div{display:grid;gap:var(--space-1);padding:var(--space-3) 0}
@media (min-width:760px){.verificar .huella div{grid-template-columns:minmax(0,14em) minmax(0,1fr);gap:var(--space-5)}}
.verificar .huella div + div{border-top:1px solid var(--line)}
.verificar .huella dt{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
.verificar .huella dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.verificar code{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- 404 ---------- */
.e404{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 65px);display:grid;align-content:center;padding:var(--space-10) 0}
.e404::before{content:"";position:absolute;inset:-10%;z-index:-1;background:url(/assets/isobatas.2324a7bff6.svg) center/cover no-repeat;opacity:.3;pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .e404::before{filter:invert(1)}}
.e404 .codigo{font-family:var(--font-ui);font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
.e404 h1{font-family:var(--font-head);font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-.03em;font-variation-settings:'wdth' 112,'wght' 800;font-weight:800;margin:var(--space-3) 0 var(--space-5);max-width:14ch}
.e404 p{color:var(--text-2);font-size:18px;max-width:32em;margin:0}
.e404 .destinos{list-style:none;margin:var(--space-8) 0 0;padding:0;max-width:40em;border-top:2px solid var(--text)}
.e404 .destinos li + li{border-top:1px solid var(--line)}
.e404 .destinos a{display:flex;justify-content:space-between;align-items:center;min-height:56px;color:var(--text);text-decoration:none;font-size:19px;font-weight:600}
.e404 .destinos a span{color:var(--text-2);font-weight:400;font-size:15px}
.e404 .destinos a:hover{text-decoration:underline}
.e404 .destinos a:focus-visible{outline:0;box-shadow:var(--foco)}

/* ---------- Huecos de texto de la maqueta (no van a la web) ----------
   Lo que aún no tiene texto aprobado se ve como hueco: borde discontinuo, el dueño y el largo que admite. Así nadie lo
   confunde con texto publicable. Con ?limpia en la dirección se ocultan las notas para mirar la forma (no los huecos). */
.hueco-t{outline:1px dashed var(--border-ctrl);outline-offset:3px;border-radius:2px}
.hueco-t::after{content:" · " attr(data-dueno);font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:0;color:var(--text-3);font-variation-settings:normal;white-space:nowrap}
.hueco-b{display:grid;gap:var(--space-2);padding:var(--space-6);border:1px dashed var(--border-ctrl);border-radius:var(--radius-web,6px);color:var(--text-2);font-size:15px;line-height:1.55}
.hueco-b b{color:var(--text)}
.nota-maqueta{margin:var(--space-5) 0 0;padding:var(--space-4) var(--space-5);border:1px dashed var(--border-ctrl);border-radius:var(--radius-web,6px);font-size:14px;line-height:1.55;color:var(--text-2);max-width:48em;text-align:left;hyphens:manual}
.nota-maqueta b{color:var(--text);font-weight:600}

/* ---------- Nube de puntos v2 (portada): instrumento encima de la pieza ----------
   Lecturas en vivo arriba a la izquierda y el barrido a 37,43°. Tinta grafito sobre bermellón, como todo en el panel. */
.mar .nube-hud{position:absolute;right:var(--space-4);top:var(--space-4);z-index:2;display:grid;gap:2px;justify-items:end;text-align:right;margin:0;pointer-events:none;color:var(--brand-ink);font:500 12px/1.35 var(--font-ui);font-variant-numeric:proportional-nums}
.mar .nube-hud div{display:flex;gap:var(--space-2);justify-content:flex-end}
.mar .nube-hud dt{opacity:.72}
.mar .nube-hud dd{margin:0;font-weight:600}
.mar .nube-hud .fase{margin-top:var(--space-2);display:flex;gap:var(--space-1)}
.mar .nube-hud .fase span{padding:1px 6px;border:1px solid transparent;border-radius:2px;opacity:.6}
.mar .nube-hud .fase span.aqui{border-color:var(--brand-ink);opacity:1;font-weight:600}
.mar .nube-barrido{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mar .nube-barrido i{position:absolute;top:-50%;bottom:-50%;width:1px;background:var(--brand-ink);opacity:0;transform:rotate(37.43deg);left:-10%}
.mar .nube-pista{position:absolute;left:var(--space-4);bottom:var(--space-4);z-index:2;margin:0;font:500 12px/1.35 var(--font-ui);color:var(--brand-ink);opacity:.8;pointer-events:none;transition:opacity var(--dur-3) var(--ease-out)}
.mar .nube-pista[hidden]{display:block;opacity:0}
.mar canvas{cursor:crosshair;touch-action:pan-y}
.mar canvas.arrastra{cursor:grabbing}
@media (max-width:599px){.mar .nube-hud > div:not(.fase){display:none}.mar .nube-hud .fase{margin-top:0}}

/* El idioma, en la cabecera desde 760 px; en el móvil vive dentro del menú */
.cab nav > .idioma-escritorio{display:none}
@media (min-width:760px){.cab nav > .idioma-escritorio{display:inline-grid}}

/* Móvil: los títulos con palabras largas («trabajamos», «empiece») no se salen de la pantalla */
.metodo-portada .wrap{grid-template-columns:minmax(0,1fr)}
@media (min-width:980px){.metodo-portada .wrap{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.cabecera-pagina h1,.e404 h1,.portada h1.titulo-metodo{overflow-wrap:break-word;hyphens:manual}
@media (max-width:599px){.cabecera-pagina h1,.e404 h1,.portada h1.titulo-metodo{font-size:36px}}
@media (max-width:979px){html.metodo .portada .wrap{grid-template-columns:minmax(0,1fr)}html.metodo .portada .wrap > *{min-width:0}}
/* Menú del móvil: la regla de la v3.46 «.cab nav ul{display:none}» escondía también su lista; y el botón conserva su relleno */
.cab nav .menu-movil .panel ul{display:block}
.menu-movil .panel .acciones-menu a.btn{display:inline-flex;justify-content:center;min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-md)}

/* Bloque del Método en la portada (10/11): la pieza viva «contexto» a la derecha y la ruta, debajo, a todo el ancho */
.contexto{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-web,6px);display:grid;grid-template-rows:auto auto;min-width:0}
.contexto canvas{display:block;width:100%;aspect-ratio:1 / 1;min-height:240px;max-height:min(540px,72svh)}
@media (max-width:599px){.contexto canvas{aspect-ratio:3 / 4}}
.contexto figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5) var(--space-4);border-top:1px solid var(--line-soft)}
.contexto-pie{margin:0;font-size:15px;line-height:1.45;color:var(--text-2);transition:opacity var(--dur-2,200ms) var(--ease-out,ease)}
.contexto-pie.cambia{opacity:0}
.contexto .pausa{position:static;flex:0 0 auto}
.contexto .nota-maqueta{margin:0 var(--space-5) var(--space-4)}
.metodo-portada .ruta-metodo{grid-column:1 / -1}
@media (min-width:980px){
  .metodo-portada .ruta-metodo{grid-template-columns:repeat(4,minmax(0,1fr));padding:var(--space-6)}
  .metodo-portada .ruta-metodo li{grid-template-columns:1fr;padding:30px var(--space-6) 0 0}
  .metodo-portada .ruta-metodo li + li{border-top:0}
  .metodo-portada .ruta-metodo li::before{position:absolute;left:0;top:0;margin:0}
  .metodo-portada .ruta-metodo li:last-child::before{top:-3px}
  .metodo-portada .ruta-metodo li::after{left:16px;right:4px;top:5.25px;bottom:auto;width:auto;height:1.5px}
  .metodo-portada .ruta-metodo strong,.metodo-portada .ruta-metodo span{grid-column:1}
}
@media (min-width:980px){.metodo-portada .ruta-metodo li::before{grid-row:auto;grid-column:auto}}

/* La ruta de /metodo/ se recorre (ruta.js): lo andado en línea llena, el punto que viaja y el eco de cada parada */
.ruta-panel svg path.andado{stroke-width:2}
.ruta-panel svg .viaja{fill:currentColor}
.ruta-panel svg .eco{fill:none;stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.ruta-panel .pausa{position:absolute;right:var(--space-4);bottom:var(--space-4);z-index:1}

/* Vídeos propios (medios.js): el marco con filete, los mandos dentro, abajo a la derecha; sin sombra ni tarjeta de color */
.video-propio{margin:0;min-width:0}
.video-propio .marco{position:relative;border:1px solid var(--line);border-radius:var(--radius-web,6px);overflow:hidden;background:var(--surface)}
.video-propio video{display:block;width:100%;height:auto}
.video-propio .mandos{position:absolute;right:var(--space-3);bottom:var(--space-3);display:flex;gap:var(--space-2)}
.video-propio .mandos .pausa{position:static;background:var(--surface);color:var(--text);border-color:var(--line)}
.video-propio .sonido svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.video-propio .sonido svg path:first-child{fill:currentColor}
.video-propio .sonido .con{display:none}.video-propio.con-sonido .sonido .con{display:inline}.video-propio.con-sonido .sonido .sin{display:none}
.video-propio.reel{width:min(300px,100%);margin-top:var(--space-6)}
.video-propio.sesgo{width:100%}
.video-propio .nota-maqueta{margin-top:var(--space-3)}
.transcripcion{margin-top:var(--space-3);font-size:15px;color:var(--text-2)}
.transcripcion summary{cursor:pointer;min-height:24px;color:var(--text)}
.transcripcion ol{margin:var(--space-2) 0 0;padding-left:1.2em}
/* el reel, al lado de las cuatro líneas; en móvil, debajo */
@media (min-width:980px){.lineas-y-reel:has(.reel){display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-8);align-items:start}
  .lineas-y-reel .video-propio.reel{margin-top:0}}
/* cabecera con vídeo: dos columnas, texto y vídeo */
@media (min-width:980px){.cabecera-pagina.corta .wrap:has(> .video-propio){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (min-width:980px){.cabecera-pagina.corta .wrap:has(> .video-propio) h1{font-size:clamp(40px,3.8vw,56px)}}
/* «Cómo trabajamos» no cabe entero a 36 px en 390: las cabeceras cortas, a 32 px en el móvil */
@media (max-width:599px){.cabecera-pagina.corta h1{font-size:32px}}
/* el título del Método trae espacios duros de la v03 («tu IA no empiece»): a 36 px no cabe en 390 y se partía «empiec / e» */
@media (max-width:599px){.portada h1.titulo-metodo{font-size:32px}}

/* ---------- Material abierto de terceros (opciones-riqueza-visual.md, 10/11/2026) ---------- */
/* A · Isóbatas reales (GEBCO_2026, recorte de Canarias): máscara sobre --text, así sigue el tema sin invertir; mismo 30 % que el motivo */
/* (-wb1) La regla de las isóbatas de GEBCO no se lleva: la opción A no entra en la ola 1 */
:is(.e404,.cabecera-pagina,.sec) .credito-datos{margin:var(--space-6) 0 0;font-size:var(--t-eyebrow-size);line-height:var(--t-eyebrow-lh);color:var(--text-2);max-width:46em;overflow-wrap:anywhere}
/* B · «Perpetual Ocean» de fondo en «El problema»: vídeo en gris (líneas claras sobre negro). En claro se invierte y multiplica
   (líneas de tinta sobre el papel); en oscuro se suma con «screen». Sin color y al 15 %, detrás del texto: es el máximo con el que --text-2 sigue en 4,5:1 encima de la línea más clara del vídeo
   (peor caso calculado: 4,78:1 en claro y 5,42:1 en oscuro; al 30 % bajaba a 3,1:1) */
.sec.con-oceano{position:relative;isolation:isolate;overflow:hidden}
/* La fusión va en la figura: con z-index propio es su propio contexto de apilado, y si la llevara el vídeo se fundiría
   con la figura transparente en vez de con el --bg de la sección (en claro aclaraba la banda) */
.video-propio.fondo-oceano{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:multiply}
.fondo-oceano .marco{position:absolute;inset:0;border:0;border-radius:0;background:none}
.fondo-oceano video{width:100%;height:100%;object-fit:cover;opacity:.15;filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .video-propio.fondo-oceano{mix-blend-mode:screen}:root:not([data-theme="light"]) .fondo-oceano video{filter:none}}
:root[data-theme="dark"] .video-propio.fondo-oceano{mix-blend-mode:screen}:root[data-theme="dark"] .fondo-oceano video{filter:none}
.fondo-oceano .mandos{pointer-events:auto}

/* ---------- Muestra «Editorial + 3D» en /como-trabajamos/ (Alejandro, 10/11/2026) ----------
   Rompe la columna: el render 3D a sangre por la derecha (con transparencia: debajo está el --surface de la página, así
   que no hay caja), el título gigante en dos líneas desalineadas y la línea de rumbo al pelo a 37,43°, que continúa la
   partición de la N (segunda muestra, la N del reel 3D v7) */
.cabecera-editorial{position:relative;isolation:isolate;overflow:hidden;padding:0 0 var(--space-9)}
.foto-3d{position:relative;margin:0;width:100%;aspect-ratio:4/3;z-index:-1}
.foto-3d img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
@media (max-width:979px){.foto-3d{aspect-ratio:16/9}}   /* móvil: fuera el aire de arriba del render; la línea (SVG «xMidYMax slice») recorta igual */
.foto-3d .rumbo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.foto-3d .rumbo line{stroke:var(--border-ctrl);stroke-width:1;fill:none}
.foto-3d figcaption{position:absolute;left:77%;bottom:3%;translate:-50% 0;white-space:nowrap;font:var(--t-eyebrow-wght) var(--t-eyebrow-size)/var(--t-eyebrow-lh) var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.cabecera-editorial .wrap{position:relative}
.cabecera-editorial h1{font-family:var(--font-head);font-size:clamp(44px,12.5vw,132px);line-height:.92;letter-spacing:-.035em;font-variation-settings:var(--head-display, 'wdth' 112,'wght' 800);font-weight:800;margin:var(--space-5) 0 0;text-wrap:nowrap}
.cabecera-editorial h1 span{display:block}
.cabecera-editorial h1 span:first-of-type{margin-left:1.6em}
.cabecera-editorial .lead{margin-top:var(--space-7);font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--text-2);max-width:30em}
.cabecera-editorial .nota-maqueta{max-width:34em}
@media (min-width:980px){
  .cabecera-editorial{min-height:calc(100svh - 65px);display:grid;align-content:center;padding:var(--space-9) 0}
  .foto-3d{position:absolute;right:0;top:50%;translate:0 -50%;width:54vw}   /* 54vw: la N empieza en el 78,6 % del ancho y el título acaba en el 75,8 % (los dos escalan con vw) */
  .cabecera-editorial h1{font-size:clamp(56px,7.6vw,132px)}}

/* «Del ruido al plan» v2 (plan.js): la ayuda para arrastrar, en el lateral, solo con las ideas ordenadas */
.plan-ayuda{margin:0;font-size:14px;line-height:1.5;color:var(--text-2)}

/* Muestra «Editorial + 3D» en la 404 (10/11/2026): 北 / 海 del reel 3D v7, en vertical, con transparencia sobre el --surface.
   La línea de rumbo va detrás de las letras (el SVG antes que la imagen). En escritorio, a sangre por la derecha; en móvil,
   arriba a la derecha, antes del texto */
.kanji-3d{position:relative;margin:0 0 0 auto;width:44vw;aspect-ratio:3/4}
.kanji-3d img,.kanji-3d .rumbo{position:absolute;inset:0;width:100%;height:100%}
.kanji-3d img{display:block;object-fit:contain}
.kanji-3d .rumbo{overflow:visible;pointer-events:none}
.kanji-3d .rumbo line{stroke:var(--border-ctrl);stroke-width:1;fill:none}
.e404.con-kanji{padding-top:var(--space-6)}
.e404.con-kanji::before{content:none}   /* sin isóbatas: el 3D las sustituye */
@media (min-width:980px){
  .e404.con-kanji{padding-top:var(--space-10)}
  .kanji-3d{position:absolute;right:2vw;top:50%;translate:0 -50%;width:26vw;z-index:-1}
  .e404.con-kanji .wrap > *{max-width:min(40em,60vw)}
  .e404.con-kanji h1{max-width:min(14ch,60vw)}}

/* Servicios (10/11/2026): los cuatro rombos del v7. La línea va detrás de la imagen (en la pared); título en tres líneas
   desalineadas y un punto más pequeño que en «Cómo trabajamos», porque es más largo */
.foto-3d.detras img{position:relative;z-index:1}
.cabecera-editorial.serv h1{font-size:clamp(34px,9vw,112px)}
.cabecera-editorial.serv h1 span:first-of-type{margin-left:0}
.cabecera-editorial.serv h1 span:nth-of-type(2){margin-left:.9em}
.cabecera-editorial.serv h1 span:nth-of-type(3){margin-left:2.4em}
.cabecera-editorial.serv .acciones{margin-top:var(--space-6)}
.cabecera-editorial.serv .nota-maqueta{margin-top:var(--space-6)}
@media (min-width:980px){.cabecera-editorial.serv h1{font-size:clamp(52px,5.6vw,112px)}
  .cabecera-editorial.serv .lead{max-width:min(30em,42vw)}}
@media (min-width:980px) and (max-width:1199px){.cabecera-editorial.serv .foto-3d{width:48vw}}   /* que la entradilla no llegue al primer rombo (comprobado de 1024 a 2560 px, con la nota y sin ella) */
/* /servicios/ y /como-trabajamos/, 700–979 px: primero el texto y debajo la figura, del mismo tamaño (Alejandro, 14-11-2026) */
@media (min-width:700px) and (max-width:979px){
  .cabecera-editorial.serv,.cabecera-editorial.ct{display:flex;flex-direction:column;padding:var(--space-8) 0 var(--space-9)}
  .cabecera-editorial.serv .foto-3d,.cabecera-editorial.ct .foto-3d{order:2;margin-top:calc(var(--space-10) * -3)}
}

/* «Del ruido al plan»: el reparto en el lateral (lo escribe plan.js). «Ahora», en bermellón: el color dice qué va primero. */
.lect .reparto dd{font-size:13px;font-weight:400;letter-spacing:0;display:grid;gap:var(--space-2);margin-top:var(--space-2)}
.rep-barra{display:flex;height:6px;background:var(--line);overflow:hidden}
.rep-barra i{display:block;height:100%;width:0;transition:width var(--dur-3,320ms) var(--ease-out,ease)}
.rep-barra i:nth-child(1){background:var(--brand)}
.rep-barra i:nth-child(2){background:var(--text-2)}
.rep-barra i:nth-child(3){background:var(--text-3)}
.rep-filas{display:grid;gap:2px}
.rep-fila{display:grid;grid-template-columns:10px 1fr auto 3.2em;align-items:baseline;gap:var(--space-2);color:var(--text-2)}
.rep-fila b{width:10px;height:10px;align-self:center}
.rep-fila.g0 b{background:var(--brand)}.rep-fila.g1 b{background:var(--text-2)}.rep-fila.g2 b{background:var(--text-3)}
.rep-c{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--text);font-variant-numeric:proportional-nums}
.rep-p{text-align:right;font-variant-numeric:proportional-nums}
/* De 640 a 979 px el lateral va debajo del lienzo, a todo el ancho: en dos columnas, el texto y los botones a la izquierda
   y la lectura (ideas y reparto) a la derecha, para que la tabla no se estire vacía (Alejandro, 13/11/2026). */
@media (min-width:640px) and (max-width:979px){
  .ins-lado{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-6);align-content:start}
  .ins-lado > :not(.lect){grid-column:1}
  .ins-lado > .lect{grid-column:2;grid-row:1 / span 4;align-self:start}
}
/* En escritorio, el lienzo de «Del ruido al plan» llena toda la altura de su columna (el lateral, con el reparto, es más alto). */
@media (min-width:980px){.sec.banda.por-que > .wrap{width:100%}.instrumento{width:100%}.ins-cuerpo{align-items:stretch}.ins-lienzo{min-height:min(508px,calc(40svh + 68px))}.ins-lienzo #plan{position:absolute;inset:0;width:100%;height:100%}}

/* ---------- Cómo trabajamos: «Cómo citamos una cifra» y «Qué es tuyo y qué es nuestro» (textos v02 de -ft1, 11/11/2026) ----------
   Tabla de datos con reglas de libro (2 px arriba y abajo, pelo entre filas), como .lineas-resumen; rótulos y celdas como .ficha dl.
   En el móvil, cada fila de la tabla se lee como ficha, con el nombre de su columna delante (data-k). */
.cuerpo .tabla-cifras{width:100%;border-collapse:collapse;margin:var(--space-6) 0;border-top:2px solid var(--text);border-bottom:2px solid var(--text)}
.tabla-cifras th,.tabla-cifras td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4) var(--space-3) 0;font-size:15px;line-height:1.55}
.tabla-cifras thead th{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2);border-bottom:1px solid var(--line)}
.tabla-cifras tbody tr + tr > *{border-top:1px solid var(--line-soft)}
.tabla-cifras tbody th{font-weight:600;color:var(--text)}
.tabla-cifras td{color:var(--text-2)}
@media (max-width:759px){
  .tabla-cifras thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabla-cifras,.tabla-cifras tbody,.tabla-cifras tr,.tabla-cifras th,.tabla-cifras td{display:block}
  .tabla-cifras tbody tr{padding:var(--space-3) 0}
  .tabla-cifras tbody tr + tr{border-top:1px solid var(--line-soft)}
  .tabla-cifras tbody tr + tr > *{border-top:0}
  .tabla-cifras th,.tabla-cifras td{padding:var(--space-1) 0}
  .tabla-cifras td::before{content:attr(data-k);display:block;font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
}
.tuyo{list-style:none;margin:0 0 var(--space-5);padding:0;border-top:2px solid var(--text);border-bottom:2px solid var(--text)}
.tuyo li{padding:var(--space-5) 0}
.tuyo li + li{border-top:1px solid var(--line)}
.tuyo h3{font-size:21px;line-height:1.2;margin:0}
.tuyo dl{margin:var(--space-3) 0 0;display:grid;gap:var(--space-3)}
@media (min-width:760px){.tuyo dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}}
.tuyo dt{font-size:var(--t-eyebrow-size);font-weight:600;color:var(--text-2)}
.tuyo dd{margin:var(--space-1) 0 0;font-size:15px;line-height:1.55;color:var(--text)}

/* -ms5 (13/11/2026) · El tema de la página al principio del h1, para el buscador y el lector de pantalla, sin cambiar lo que se ve
   (auditoría SEO 1.6). Provisional: el texto lo cierra -wc1; si Alejandro prefiere verlo, pasa a antetítulo (.bajada-portada).
   Por eso los títulos editoriales cuentan sus líneas con -of-type: el <b> oculto no es un <span>. */
.tema-h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}