@font-face{font-family:'Hubot Sans';src:url('/assets/HubotSans.e55a095b89.woff2') format('woff2-variations'),url('/assets/HubotSans.e55a095b89.woff2') format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:'Mona Sans';src:url('/assets/MonaSans.141792497b.woff2') format('woff2-variations'),url('/assets/MonaSans.141792497b.woff2') format('woff2');font-weight:200 900;font-stretch:75% 125%;font-display:swap}

/* Sistema de diseño de Nortakai («Instrumento, con voz propia», v1.0).
   Pieza de marca: manda el bermellón y el iris no aparece. El foco y los
   controles usan la tinta del texto, no --border-focus (que es iris). */
:root{
  --font-head:'Hubot Sans','Segoe UI Semibold',system-ui,sans-serif;
  --font-ui:'Mona Sans','Segoe UI',system-ui,sans-serif;
  --brand:#e83929; --brand-ink:#0c0f12;
  --bg:#e8ebef; --surface:#ffffff; --raised:#f3f5f8; --line-soft:#dde2e6; --line:#c6cbd1; --border-ctrl:#81878d;
  --text:#181c21; --text-2:#4a5057; --text-3:#61676e; --text-inv:#f9fafc; --btn-hover:#3c4248;
  --err:#ba362e; --err-text:#9c2b24; --ok:#287c42; --ok-soft:#e6f2ea; --ok-text:#1e6534;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;
  --radius-md:4px; --tap-min:44px; --ease:cubic-bezier(.2,0,.3,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --ease-out:cubic-bezier(.2,0,.3,1); --ease-inout:cubic-bezier(.4,0,.2,1);
  --t-eyebrow-size:13px; --t-eyebrow-lh:1.30; --t-eyebrow-wght:600; --t-eyebrow-ls:0em;
  --cut:0.765; /* tan(37,43°): el ángulo del corte del símbolo */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c0f12; --surface:#13161a; --raised:#1b1f23; --line-soft:#1f2429; --line:#2e3339; --border-ctrl:#5d646b;
  --text:#e7eaed; --text-2:#a4aab1; --text-3:#7f868d; --text-inv:#0c0f12; --btn-hover:#c4c9ce; color-scheme:dark;
  --err:#ef7f72; --err-text:#ef7f72; --ok:#6fc884; --ok-soft:#12251a; --ok-text:#6fc884;
}}
:root[data-theme="dark"]{
  --bg:#0c0f12; --surface:#13161a; --raised:#1b1f23; --line-soft:#1f2429; --line:#2e3339; --border-ctrl:#5d646b;
  --text:#e7eaed; --text-2:#a4aab1; --text-3:#7f868d; --text-inv:#0c0f12; --btn-hover:#c4c9ce; color-scheme:dark;
  --err:#ef7f72; --err-text:#ef7f72; --ok:#6fc884; --ok-soft:#12251a; --ok-text:#6fc884;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--space-8)}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.6;text-rendering:optimizeLegibility}
::selection{background:var(--text);color:var(--text-inv)}
/* Superficies del navegador con color propio (diseñador, 13/10): cursor de escritura en tinta; barras neutras, tirador
   en --border-ctrl (3:1 sobre el fondo) y pista en --bg. El bermellón no entra: nunca es estado de interfaz */
html{scrollbar-color:var(--border-ctrl) var(--bg);scrollbar-width:thin}
input,textarea{caret-color:var(--text)}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:2px}
a{color:inherit}
/* Líneas mejor repartidas: sin una palabra sola al final del párrafo; y en textos cortos o en columnas
   estrechas, líneas de largo parecido para que la última no quede casi vacía */
p,li,dd{text-wrap:pretty}
/* Textos de lectura justificados (Alejandro, 15/10/2026): la entradilla y los párrafos de cada sección, la nota de IA
   y el aviso legal (los <p> sin clase). Con partición con guiones para que no se abran huecos. No se justifican las
   tarjetas estrechas, las listas cortas, el menú, el contacto (va centrado) ni el formulario */
p.lead,p:not([class]){text-align:justify;hyphens:auto;-webkit-hyphens:auto}
canvas{display:block;width:100%;height:100%;touch-action:pan-y}
figure{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--space-4)}
@media (min-width:640px){.wrap{padding-inline:var(--space-8)}}
.saltar{position:absolute;left:var(--space-4);top:-100px;background:var(--text);color:var(--text-inv);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);z-index:30;text-decoration:none;font-weight:600}   /* por encima de la cabecera fija (z-index 20), -dr3 */
.saltar:focus{top:var(--space-3)}

/* Logotipo */
.ntk-lockup{display:inline-flex;align-items:center;gap:.52em;color:var(--text);text-decoration:none}
.ntk-simbolo{width:1.24em;height:1.24em;flex:0 0 auto}
.ntk-palabra{display:inline-flex;align-items:center;font-family:var(--font-head);font-variation-settings:'wdth' 104,'wght' 700;font-weight:700;letter-spacing:-.025em;line-height:1;white-space:nowrap}
.ntk-punto{width:.23em;height:.23em;margin:0 .21em;flex:0 0 auto;background:var(--brand);transform:rotate(45deg)}

/* Cabecera */
.cab{border-bottom:1px solid var(--line);background:var(--surface)}
.cab .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:64px}
.cab .ntk-lockup{font-size:19px;min-height:var(--tap-min)}
.cab nav{display:flex;align-items:center;gap:var(--space-2)}
.cab nav ul{display:none;list-style:none;margin:0;padding:0;gap:var(--space-1)}
@media (min-width:760px){.cab nav ul{display:flex}}
.cab nav a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-3);font-size:14px;color:var(--text-2);text-decoration:none;border-radius:var(--radius-md);transition:color 120ms var(--ease)}
.cab nav a:hover{color:var(--text)}
.cab nav a.idioma{font-weight:600;letter-spacing:0;border:1px solid var(--border-ctrl);color:var(--text)}

/* Botones: la acción principal va en tinta (nunca iris ni bermellón) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-md);font:600 15px/1 var(--font-ui);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color 120ms var(--ease),border-color 120ms var(--ease),color 120ms var(--ease)}
.btn-pri{background:var(--text);color:var(--text-inv)}
.btn-pri:hover{background:var(--btn-hover)}
.btn-sec{background:transparent;color:var(--text);border-color:var(--border-ctrl)}
.btn-sec:hover{border-color:var(--text)}
.pausa{font:var(--t-eyebrow-wght) var(--t-eyebrow-size)/1 var(--font-ui);letter-spacing:var(--t-eyebrow-ls);min-height:36px;min-width:44px;padding:0 var(--space-3);background:transparent;color:var(--text);border:1px solid var(--border-ctrl);border-radius:2px;cursor:pointer}
@media (hover:hover){.pausa:hover{border-color:var(--text)}}
.pausa[hidden]{display:none}

/* Títulos */
h1,h2,h3{font-family:var(--font-head);margin:0;text-wrap:balance}
h1{font-size:clamp(42px,4.8vw,72px);line-height:.98;letter-spacing:0;font-variation-settings:'wdth' 118,'wght' 800;font-weight:800}
h2{font-size:clamp(28px,4.2vw,46px);line-height:1.08;letter-spacing:0;font-variation-settings:'wdth' 110,'wght' 700;font-weight:700;max-width:20em}
h3{font-size:20px;line-height:1.25;letter-spacing:0;font-variation-settings:'wdth' 104,'wght' 700;font-weight:700}
/* Etiquetas en la letra del cuerpo, con mayúscula inicial y sin interletrado (--t-eyebrow-*); nunca en monoespaciada */
.bajada-portada,.serv .llevas b,.serv .tag,.pie .bajada{font-family:var(--font-ui);font-size:var(--t-eyebrow-size);line-height:var(--t-eyebrow-lh);font-weight:var(--t-eyebrow-wght);letter-spacing:var(--t-eyebrow-ls);color:var(--text-2)}
.bajada-portada{margin:0 0 var(--space-5)}

/* Portada. El titular sale entero, sin animación (diseñador, 14/10) */
.portada{padding:var(--space-9) 0 var(--space-7)}
.portada .wrap:first-child{display:grid;gap:var(--space-8);align-items:center}
@media (min-width:980px){.portada{padding:var(--space-10) 0 var(--space-7)}.portada .wrap:first-child{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-9)}}
h1 .linea{display:block;white-space:nowrap}
/* Aire de más encima de un bloque (sin atributos style="", que la política de seguridad no deja) */
.mt-5,.cuerpo .mt-5{margin-top:var(--space-5)}
.mt-6{margin-top:var(--space-6)}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.6;color:var(--text-2);max-width:40em;margin:var(--space-6) 0 0}
.lead-sec{margin:0;color:var(--text);max-width:36em}
.acciones{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
@media all{
  .portada .lead,.portada .acciones{animation:aparece 600ms var(--ease) 700ms both}
  @keyframes aparece{from{opacity:0}to{opacity:1}}
}

/* Paneles de marca: bermellón con tinta grafito encima; esquina cortada a 37,43° */
.marca-panel{position:relative;background:var(--brand);color:var(--brand-ink);clip-path:polygon(0 calc(110px * var(--cut)),110px 0,100% 0,100% 100%,0 100%)}
@media (min-width:980px){.marca-panel{clip-path:polygon(0 calc(180px * var(--cut)),180px 0,100% 0,100% 100%,0 100%)}}
.mar{height:clamp(420px,62vw,640px)}
.hud{position:absolute;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink);font-variant-numeric:tabular-nums;margin:0}
.hud-pie{left:var(--space-5);right:var(--space-4);bottom:var(--space-4);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.hud-pie .pausa:only-child{margin-left:auto}
.marca-panel .pausa{color:var(--brand-ink);border-color:var(--brand-ink)}
/* Al pasar el ratón, el botón se rellena de grafito con el icono en bermellón (antes, en color de superficie: en oscuro
   quedaba negro sobre negro). En pantallas táctiles no hay paso del ratón: el toque no deja el botón relleno */
@media (hover:hover){.marca-panel .pausa:hover{background:var(--brand-ink);color:var(--brand)}}
.marca-panel .pausa:focus-visible{outline-color:var(--brand-ink)}

/* Secciones */
.sec{padding:var(--space-10) 0;border-top:1px solid var(--line)}
@media (min-width:980px){.sec{padding:104px 0}}
.banda{background:var(--bg)}
.dos{display:grid;gap:var(--space-7)}
@media (min-width:980px){.dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:end}}
#ia .dos{align-items:start}   /* texto largo: el titular arriba, a la altura del primer párrafo */
.cuerpo p{margin:0 0 var(--space-4);font-size:17px;line-height:1.65;color:var(--text-2);max-width:40em}
.cuerpo p:last-child{margin-bottom:0}

/* Instrumento señal y ruido */
.instrumento{margin-top:var(--space-9);background:var(--surface);border:1px solid var(--line)}
/* Sin rótulo, la cabecera solo lleva la pausa; si la pausa no se ve («reducir movimiento»), no queda una franja vacía */
/* La pausa va siempre en el mismo sitio: abajo a la derecha, encima de la animación (15/10/2026). En el plan, la carta
   y la brújula lleva el fondo de la superficie para leerse sobre los puntos y las líneas; en la portada, sobre el bermellón */
.ins-lienzo,.brujula{position:relative}
.ins-lienzo .pausa,.carta .pausa,.brujula .pausa{position:absolute;right:var(--space-4);bottom:var(--space-4);background:var(--surface)}
/* La brújula es redonda: la pausa va en la misma esquina, pero justo fuera de la esfera para no taparla */
.brujula .pausa{right:calc(-44px - var(--space-3));bottom:0}
.ins-cuerpo{display:grid}
@media (min-width:980px){.ins-cuerpo{grid-template-columns:minmax(0,1fr) 340px}}
#plan{height:clamp(400px,calc(40vw + 68px),508px);touch-action:pan-y}
.ins-botones{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.ins-lado{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-5);border-top:1px solid var(--line)}
@media (min-width:980px){.ins-lado{border-top:0;border-left:1px solid var(--line)}}
.ins-lado p{margin:0;font-size:15px;line-height:1.6;color:var(--text-2)}
.campo{display:flex;flex-direction:column;gap:var(--space-2);font-size:14px;font-weight:600}
input[type=range]{width:100%;accent-color:var(--text);min-height:var(--tap-min)}
.chk{display:flex;align-items:center;gap:var(--space-2);font-size:14px;min-height:var(--tap-min);cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--text)}
.lect{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:0}
.lect div{background:var(--surface);padding:var(--space-3)}
.lect dt{font-size:12px;color:var(--text-2)}
.lect dd{margin:var(--space-1) 0 0;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* Carta náutica y servicios */
.carta{position:relative;margin-top:var(--space-9);height:clamp(320px,40vw,480px);background:var(--surface)}
.rejilla{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0}
@media (min-width:700px){.rejilla{grid-template-columns:1fr 1fr}}
@media (min-width:700px) and (max-width:979px){.rejilla .serv:last-child:nth-child(odd){grid-column:1 / -1}}   /* tres tarjetas: la tercera, a lo ancho */
@media (min-width:980px){.rejilla{grid-template-columns:repeat(3,1fr)}}
.serv{background:var(--surface);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);transition:background-color 120ms var(--ease)}
.serv.activa{background:var(--raised)}
.serv .rombo{display:inline-block;vertical-align:middle;margin:0 var(--space-3) .12em 0;width:8px;height:8px;background:var(--line);transform:rotate(45deg);transition:background-color 120ms var(--ease)}
.serv.activa .rombo{background:var(--brand)}
.serv p{margin:0;color:var(--text-2);font-size:15px}
.serv h3{margin:0;font-size:28px}
.serv .pregunta{font-size:16px;line-height:1.45;color:var(--text);text-wrap:pretty}
.serv .incluye{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.serv .incluye li{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--space-4);border-left:1px solid var(--line)}
.serv .incluye strong{font-size:15px;font-weight:600;color:var(--text)}
.serv .incluye span:not(.tag){font-size:14px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
.serv .incluye .tag{margin-bottom:var(--space-1)}
.serv .llevas{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--line-soft);font-size:15px;color:var(--text)}
.serv .llevas b{display:block;margin-bottom:var(--space-1)}
.serv .nota{font-size:13px;line-height:1.55;color:var(--text-3);margin-top:var(--space-3)}
.serv .tag{align-self:flex-start;border:1px solid var(--line);padding:2px var(--space-2);border-radius:2px}

/* Brújula y principios */
.brujula-caja{display:grid;gap:var(--space-8);margin-top:var(--space-8);align-items:center}
@media (min-width:980px){.brujula-caja{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-10)}}
.brujula{width:min(100%,460px);justify-self:center}
.brujula canvas{aspect-ratio:1;height:auto;cursor:pointer}
.principios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.principio{width:100%;display:flex;gap:var(--space-5);align-items:flex-start;text-align:left;padding:var(--space-5) 0;background:none;border:0;border-top:1px solid var(--line);color:inherit;font:inherit;cursor:pointer}
.principios li:last-child .principio{border-bottom:1px solid var(--line)}
.principio .card{flex:0 0 2.2em;height:2.2em;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:14px;border:1px solid var(--border-ctrl);border-radius:2px;color:var(--text-2);transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.principio .txt{display:flex;flex-direction:column;gap:var(--space-1)}
.principio strong{font-size:18px;font-family:var(--font-head);font-variation-settings:'wdth' 104,'wght' 700;letter-spacing:-.01em}
.principio .txt span{color:var(--text-2)}
.principio[aria-pressed="true"] .card{background:var(--text);color:var(--text-inv);border-color:var(--text)}
.principio:hover .card{border-color:var(--text)}
.no{margin-top:var(--space-9);padding:var(--space-6);border:1px solid var(--line);background:var(--surface)}
.no h3{font-size:17px}
.no ul{margin:var(--space-3) 0 0;padding:0;list-style:none;display:grid;gap:0}
@media (min-width:700px){.no ul{grid-template-columns:repeat(2,1fr);column-gap:var(--space-6)}}
@media (min-width:1100px){.no ul{grid-template-columns:repeat(4,1fr)}}
.no li{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-6);color:var(--text-2)}
.no li::before{content:"✕";position:absolute;left:0;top:var(--space-2);font-size:13px;color:var(--text-3)}

/* Contacto */
.correo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-7)}
.correo .dir{flex-basis:100%;font-family:var(--font-head);font-size:clamp(20px,3.4vw,34px);font-weight:600;letter-spacing:0;overflow-wrap:anywhere;margin-bottom:var(--space-3)}
.copiar[hidden]{display:none}

/* Formulario (Field e Input del sistema: etiqueta 13 px, campo de 44 px, borde --border-ctrl, error con glifo) */
/* El formulario va en un bloque centrado del ancho de lectura */
.contacto-form{max-width:40em;margin:var(--space-9) auto 0}
.form-h{margin:0}
.formulario{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.campo{display:flex;flex-direction:column;gap:var(--space-2)}
.campo label{font-size:13px;font-weight:600;color:var(--text-2)}
.campo input,.campo textarea{width:100%;min-height:var(--tap-min);padding:11px 12px;font:400 16px/1.5 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--border-ctrl);border-radius:var(--radius-md);transition:border-color 120ms var(--ease)}
.campo textarea{resize:vertical;min-height:9em}
.campo input:hover,.campo textarea:hover{border-color:var(--text)}
.campo [aria-invalid="true"]{border-color:var(--err)}
.error,.form-estado:not(:empty){display:flex;align-items:baseline;gap:var(--space-2);margin:0;font-size:13px;font-weight:600;color:var(--err-text)}
.error[hidden]{display:none}
.form-estado:empty{display:none}
.envio{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.envio .btn[disabled]{cursor:progress;opacity:.7}
.envio-fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4)}
/* Enviado: estado de éxito del sistema (fondo --ok-soft, tinta --ok-text, borde --ok), como la insignia «ok» */
.envio .btn-hecho,.envio .btn-hecho[disabled]{background:var(--ok-soft);color:var(--ok-text);border-color:var(--ok);opacity:1;cursor:default}
.formulario [readonly]{color:var(--text-2);border-color:var(--line)}
.formulario [readonly]:hover{border-color:var(--line)}
.form-nota{margin:0;font-size:13px;color:var(--text-2)}
/* Contacto: bloque de cierre centrado. El formulario se lee alineado a la izquierda dentro de su bloque */
#contacto .wrap{text-align:center}
#contacto .correo{justify-content:center}
#contacto h2{margin-inline:auto}
#contacto .cuerpo p{max-width:none}
#contacto .contacto-form{text-align:left}
#contacto .form-h{text-align:center}
.form-ok{margin:0;font-size:15px;font-weight:600;color:var(--text)}
.form-ok:focus{outline:none}
.form-ok[hidden]{display:none}
.trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* Pie */
.pie{border-top:1px solid var(--line);padding:var(--space-9) 0 var(--space-8);background:var(--surface)}
.pie .fila{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.pie .marca{display:flex;flex-direction:column;gap:var(--space-2)}
.pie .ntk-lockup{font-size:22px}
.pie .bajada{padding-left:calc(22px * 1.816)}
.pie small{font-size:13px;color:var(--text-2)}
.aviso{margin-top:var(--space-7);border-top:1px solid var(--line-soft);padding-top:var(--space-5)}
.aviso summary{cursor:pointer;min-height:var(--tap-min);display:inline-flex;align-items:center;font-size:14px;color:var(--text-2)}
.aviso summary:hover{color:var(--text)}
.aviso h3{margin:var(--space-6) 0 var(--space-2);font:600 14px/1.4 var(--font-ui);font-variation-settings:normal;letter-spacing:0;color:var(--text)}
.aviso strong{font-weight:600;color:var(--text)}
.aviso p{font-size:14px;color:var(--text-2);margin:var(--space-2) 0;max-width:46em}
/* Verificar el diagnóstico: la orden y la huella en la letra del cuerpo con cifras tabulares (no hay monoespaciada);
   la huella, 64 caracteres sin espacios, se parte donde haga falta para caber a 390 px */
.aviso code{font:inherit;hyphens:none;font-variant-numeric:tabular-nums;color:var(--text);overflow-wrap:anywhere}
.aviso p code{white-space:nowrap}
.aviso + .aviso{margin-top:0}
.huella{margin:var(--space-4) 0;display:grid;gap:var(--space-3);max-width:46em}
.huella dt{font-size:13px;color:var(--text-2)}
.huella dd{margin:var(--space-1) 0 0;font-size:14px;color:var(--text)}

/* ---------- v3 · motion ---------- */

/* Entrada de marca (estudio «Sin rastro de IA», diseñador 13/10). El único momento orquestado de la página: el logotipo
   aparece de una vez en tinta sobre el campo bermellón (--dur-2) y la portada se descubre con un barrido cuyo borde
   va exactamente a 37,43°, la pendiente del corte del símbolo (75 de alto por 98 de ancho), en --dur-3. En total,
   1,22 s. Se salta con cualquier tecla, toque o clic, y con «reducir movimiento» no sale. */
.intro{display:none;position:fixed;inset:0;z-index:100;background:var(--brand);color:var(--brand-ink);place-items:center;cursor:pointer;--barrido:calc(100dvh * 98 / 75)}
.con-intro .intro{display:grid;animation:intro-sale var(--dur-3) var(--ease-inout) 900ms both}
.con-intro .intro-marca{animation:aparece var(--dur-2) var(--ease-out) both}
.intro .ntk-lockup{color:var(--brand-ink);font-size:clamp(40px,8vw,96px)}
.intro .ntk-punto{background:var(--brand-ink)}
.intro-marca{display:flex;flex-direction:column;align-items:flex-start;gap:.6em}
.intro-bajada{font-family:var(--font-ui);font-size:clamp(15px,1.8vw,20px);font-weight:600;letter-spacing:0;padding-left:calc(clamp(40px,8vw,96px) * 1.816)}
/* El borde del barrido sube hacia la derecha como el corte del símbolo; sus dos extremos avanzan lo mismo, así que no
   cambia de ángulo en ningún momento. Lo que queda a la derecha del borde es la entrada; a la izquierda, la portada */
@keyframes intro-sale{
  from{clip-path:polygon(calc(0px - var(--barrido)) 100%,0 0,calc(100% + var(--barrido)) 0,calc(100% + var(--barrido)) 100%)}
  to{clip-path:polygon(100% 100%,calc(100% + var(--barrido)) 0,calc(100% + var(--barrido)) 0,calc(100% + var(--barrido)) 100%)}}


.brujula{transition:transform 200ms var(--ease);transform-style:preserve-3d}
.carta{height:clamp(360px,44vw,560px)}

/* Al final para que mande sobre las reglas de cada pieza. Los textos llenan el ancho (pretty, arriba); solo los
   textos de titular cortos se reparten en líneas de largo parecido. Los cortes que respetan el sentido los pone
   build.py con espacios que no se parten */
.serv .pregunta,.serv .incluye strong{text-wrap:balance}

/* ---------- Sistema v1.4 · decidido por Alejandro el 15/10/2026, propuesta a propuesta ----------
   (documento «Web Nortakai con la v1.4»; los números son los de esa consulta) */

/* 1 · Tokens de la v1.4 y del registro de web que usa la página */
:root{
  --dur-1:120ms; --dur-4:600ms; --corte:37.43deg;
  --campo-1:#143a5c;
  --accent-hover:#2e3339; --accent-soft:#e1e5e9;
  --shadow-2:0 4px 12px rgba(24,28,33,.10); --relieve:none;
  --sombra-raton:0 2px 8px -2px rgba(24,28,33,.10),0 1px 2px rgba(24,28,33,.05);
  --sombra-ambiente-web:0 1px 2px rgba(24,28,33,.05),0 2px 8px -2px rgba(24,28,33,.08);
  --foco:0 0 0 2px var(--bg),0 0 0 4px var(--text);
  --luz-forma-web:radial-gradient(360px 360px at 86% 6%,rgba(255,255,255,.10),transparent 62%),radial-gradient(240px 240px at 8% 100%,rgba(255,255,255,.06),transparent 62%);
  --lienzo-tinte-web:4%; --radius-web:6px; --radius-action:4px;
  --head-display:'wdth' 125,'wght' 900; --head-contrast:'wdth' 75,'wght' 300;
  --t-editorial-size:24px; --t-editorial-lh:1.35;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --campo-1:#1a4a73; --accent-hover:#d5dade; --accent-soft:#2e3339;
  --shadow-2:0 4px 14px rgba(0,0,0,.6); --relieve:inset 0 1px 0 rgba(255,255,255,.06);
  --sombra-raton:var(--relieve),0 2px 10px rgba(0,0,0,.45); --sombra-ambiente-web:var(--relieve),0 2px 10px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --campo-1:#1a4a73; --accent-hover:#d5dade; --accent-soft:#2e3339;
  --shadow-2:0 4px 14px rgba(0,0,0,.6); --relieve:inset 0 1px 0 rgba(255,255,255,.06);
  --sombra-raton:var(--relieve),0 2px 10px rgba(0,0,0,.45); --sombra-ambiente-web:var(--relieve),0 2px 10px rgba(0,0,0,.45);
}

/* 2 · Cifras protagonistas en Mona proporcional (el cero tabular de Mona lleva barra) */
.lect dd{font-family:var(--font-ui);font-variant-numeric:proportional-nums;font-weight:700}

/* 4 · Botones de 48 px en la portada */
.portada .acciones .btn{min-height:48px;padding:0 var(--space-6);font-size:16px}

/* 5 · Portada del registro de web, con el fondo de la página (Alejandro: sin el azul): la luz con forma en oscuro,
   la carta al 30 % en la tinta del modo (gris claro en oscuro, negro en claro) y el filo de 37,43° abajo */
.portada{position:relative;isolation:isolate;overflow:hidden;padding-bottom:var(--space-10);
  --alto:26px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--alto)),calc(100% - var(--alto) * .765) 100%,0 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .portada{background:var(--luz-forma-web),var(--surface)}}
:root[data-theme="dark"] .portada{background:var(--luz-forma-web),var(--surface)}
.portada::before{content:"";position:absolute;inset:-8% -4% -8% 40%;z-index:-1;opacity:.30;background:var(--text);
  -webkit-mask:url(/assets/isobatas.2324a7bff6.svg) center/cover no-repeat;mask:url(/assets/isobatas.2324a7bff6.svg) center/cover no-repeat;pointer-events:none}
/* 7 · Grano muy fino (5 %) en la portada y en la entrada; nunca en interfaz ni bajo texto pequeño */
.portada::after,.intro::after{content:"";position:absolute;inset:0;background-image:url(/assets/grano.c873f606a6.svg);opacity:.05;pointer-events:none}

/* 6 · Titular de exhibición con la pareja de contraste; sube a todo el ancho para caber */
.portada h1{font-size:clamp(48px,7.4vw,96px);line-height:.94;letter-spacing:-.03em;font-variation-settings:var(--head-display)}
.portada h1 .linea:first-child{font-variation-settings:var(--head-contrast);letter-spacing:0}
@media (min-width:980px){
  .portada .wrap:first-child{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"b b" "h h" "l p" "c p";grid-template-rows:auto auto min-content 1fr;row-gap:0;column-gap:var(--space-9);align-items:start}
  .texto-portada{display:contents}
  .bajada-portada{grid-area:b}.portada h1{grid-area:h;margin-bottom:var(--space-8)}.portada .lead{grid-area:l;margin-top:0}.portada .acciones{grid-area:c;align-self:start}.portada .mar{grid-area:p}
}

/* 8 · La sección que sigue a la portada toma un 4 % del mar */
.sec.banda.por-que{background:color-mix(in srgb,var(--campo-1) var(--lienzo-tinte-web),var(--bg))}

/* 9 · Una sola tarjeta levantada: «Del ruido al plan» */
.instrumento{box-shadow:var(--relieve),var(--shadow-2);border-radius:var(--radius-web);overflow:hidden}

/* 10 · Tarjetas de servicios separadas que responden al ratón (el rombo se queda y marca la elegida) */
.rejilla{gap:var(--space-4);background:none;border:0;margin-top:var(--space-4)}
.serv{border:1px solid var(--line);border-radius:var(--radius-web);transition:border-color var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.serv:hover{border-color:var(--text);box-shadow:var(--sombra-raton)}

/* 11 · Botones con respuesta y foco propio en toda la web: anillo de 2 px separado 2 px */
.btn-pri:hover{background:var(--accent-hover);box-shadow:var(--sombra-raton)}
.btn-sec:hover{background:var(--accent-soft);border-color:var(--text)}
:focus-visible{outline:0;box-shadow:var(--foco);border-radius:var(--radius-action)}
.marca-panel .pausa:focus-visible{box-shadow:0 0 0 2px var(--brand),0 0 0 4px var(--brand-ink)}

/* 12 · El idioma como segmentado */
.segmentado-web{display:inline-grid;grid-auto-flow:column;gap:2px;padding:3px;border-radius:calc(var(--radius-web) + 2px);background:color-mix(in srgb,var(--text) 6%,transparent)}
.segmentado-web a,.segmentado-web span{display:inline-flex;align-items:center;justify-content:center;min-height:38px;min-width:44px;padding:0 var(--space-3);border-radius:var(--radius-web);font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none}
.cab nav .segmentado-web a{min-height:38px;padding:0 var(--space-3);font-size:13px;color:var(--text-2)}
.segmentado-web a:hover{color:var(--text)}
.segmentado-web span[aria-current]{background:var(--surface);color:var(--text);box-shadow:var(--sombra-ambiente-web)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .segmentado-web span[aria-current]{background:var(--raised)}}
:root[data-theme="dark"] .segmentado-web span[aria-current]{background:var(--raised)}

/* 15 · El párrafo del «por qué». Desde el 29/10/2026 (Alejandro), en Hubot Sans como los titulares, no en una letra de lectura aparte:
   la letra con remates no encajaba con el resto de la web. Alineado a la izquierda y sin guiones */
p.lead-sec{font-family:var(--font-head);font-variation-settings:'wdth' 100,'wght' 500;font-weight:500;font-size:clamp(20px,2.2vw,28px);line-height:1.35;letter-spacing:-.01em;max-width:30em;text-align:left;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}

/* 16 · Pausa redonda con ❚❚ (▶ para reanudar); el nombre lo lleva aria-label */
.pausa{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center;font:600 12px/1 var(--font-ui);letter-spacing:0;text-transform:none}

/* 17 · Logotipo en curvas (el SVG del sistema); el rombo, en bermellón salvo sobre bermellón */
.ntk-logo{height:1.24em;width:auto;display:block;flex:0 0 auto;color:var(--text)}
.ntk-logo .rombo-logo{fill:var(--brand)}
.intro .ntk-logo{color:var(--brand-ink)}
.intro .ntk-logo .rombo-logo{fill:var(--brand-ink)}

/* 5 · Las isóbatas, más presentes en claro (35 %, el máximo del sistema) que en oscuro (30 %) */
.portada::before{opacity:.35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .portada::before{opacity:.30}}
:root[data-theme="dark"] .portada::before{opacity:.30}

/* ---------- 14 · Reparto por pantallas (sistema v1.4, aprobado por Alejandro el 15/10/2026) ----------
   Cada bloque cabe en una pantalla (escritorio 1440 × 900 y móvil 390 × 844) y dice una sola cosa.
   La barra de arriba se queda pegada y opaca; un índice lateral discreto dice dónde estás. */
:root{--barra:65px;--alto-util:calc(100svh - var(--barra))}
.cab{position:sticky;top:0;z-index:20}
html{scroll-padding-top:var(--barra)}
.sec{padding:var(--space-8) 0}
@media (min-width:980px){.sec{padding:var(--space-8) 0}}

/* Portada: el titular y el panel se ajustan al alto de la pantalla */
.portada{padding:var(--space-6) 0 var(--space-8)}
@media (min-width:980px){.portada{padding:var(--space-7) 0 var(--space-8)}
  .portada h1{font-size:min(96px,7.4vw,10svh);margin-bottom:var(--space-6)}
  .portada .mar{height:clamp(300px,calc(100svh - 470px),600px)}}
@media (max-width:979px){.portada h1{font-size:44px}.portada .lead{font-size:16px;line-height:1.5;margin-top:var(--space-4)}
  .portada .acciones{margin-top:var(--space-5)}.portada .wrap:first-child{gap:var(--space-6)}.portada .mar{height:28svh}.bajada-portada{margin-bottom:var(--space-3)}}

/* Por qué: en escritorio, párrafo y pieza juntos; en el móvil, dos pantallas */
@media (min-width:980px){#plan{height:min(508px,calc(40svh + 68px))}.instrumento{margin-top:var(--space-7)}}
@media (max-width:979px){.sec.banda.por-que{padding:0}.sec.banda.por-que > .wrap{display:grid}
  .sec.banda.por-que .lead-sec,.sec.banda.por-que .instrumento{min-height:var(--alto-util);align-self:center}
  .sec.banda.por-que .lead-sec{display:grid;align-content:center;padding-block:var(--space-8)}
  .sec.banda.por-que .instrumento{margin:0 0 var(--space-8);min-height:0}
  #plan{height:clamp(380px,calc(52vw + 160px),520px)}.ins-lado{gap:var(--space-3);padding:var(--space-4)}.ins-lado p{font-size:14px;line-height:1.5}.lect dd{font-size:20px}}

/* Servicios: la ruta en una pantalla y las tres líneas en otra; en el móvil, una línea cada vez con un segmentado */
#servicios{padding:0}
#servicios > .wrap{display:grid}
#servicios .ruta-pantalla{min-height:var(--alto-util);display:grid;align-content:center;padding-block:var(--space-8)}
#servicios .carta{height:min(520px,calc(100svh - 420px));min-height:260px;margin-top:var(--space-6)}
#servicios .rejilla-pantalla{min-height:var(--alto-util);display:grid;align-content:center;padding-block:var(--space-6)}
/* Portada: «Una ruta con tres puntos de paso» es una pantalla como las demás (la regla #servicios{padding:0} es de /servicios/) */
#servicios.ruta-inicio{padding:var(--space-8) 0}
@media (min-width:980px){#servicios.ruta-inicio{min-height:var(--alto-util);display:grid;align-content:center}}
.lineas-seg{display:none}
@media (max-width:699px){.lineas-seg{display:inline-grid;margin-bottom:var(--space-4);justify-self:start}
  .lineas-seg button{font:600 13px/1 var(--font-ui);min-height:40px;padding:0 10px;border:0;background:transparent;color:var(--text-2);border-radius:var(--radius-web);cursor:pointer}
  .lineas-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sombra-ambiente-web)}
  .rejilla .serv[data-oculta]{display:none}.serv{padding:var(--space-5)}.serv h3{font-size:24px}}

/* Cómo trabajamos: la brújula más pequeña para que quepa con sus principios; «Lo que no hacemos», aparte en el móvil */
@media (min-width:980px){.brujula-caja{margin-top:var(--space-6)}.no{margin-top:var(--space-6)}}
@media (max-width:979px){#como{padding:0}#como > .wrap{display:grid}
  #como .como-pantalla{min-height:var(--alto-util);display:grid;align-content:center;padding-block:var(--space-6)}
  #como .no{min-height:calc(var(--alto-util) * .6);display:grid;align-content:center;margin:0 0 var(--space-8)}
  .brujula-caja{gap:var(--space-4);margin-top:var(--space-4)}.principio{padding:var(--space-3) 0}.principio .txt span{font-size:14px;line-height:1.45}}
/* La brújula con presencia (Alejandro, 14-11-2026): más grande, al lado de la lista desde 700 px y la pausa pegada debajo */
@media (min-width:700px){.brujula-caja{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-9)}
  .brujula .pausa{right:0;bottom:calc(-44px - var(--space-3))}}
@media (min-width:980px){.brujula{width:min(100%,460px,54svh)}}
@media (min-width:700px) and (max-width:979px){.brujula{width:min(100%,340px)}}
@media (max-width:699px){.brujula{width:min(100%,clamp(190px,calc(var(--alto-util) - 560px),260px))}}   /* según el alto: a 260 fijos, la lista se salía de la pantalla a 390×844 y a 375×812; nunca menos que los 190 de antes */

/* Contacto: en escritorio, texto y correo a la izquierda y el formulario a la derecha; en el móvil, dos pantallas */
@media (min-width:980px){#contacto .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--space-10);align-items:center;text-align:left}
  #contacto .wrap > *:not(.contacto-form){grid-column:1}#contacto .contacto-form{grid-column:2;grid-row:1 / span 4;margin:0}
  #contacto h2{margin-inline:0}#contacto .correo{justify-content:flex-start}#contacto .form-h{text-align:left}}
@media (max-width:979px){#contacto{padding:0}#contacto .wrap{display:grid}
  #contacto .contacto-intro{min-height:var(--alto-util);display:grid;align-content:center}
  #contacto .contacto-form{min-height:var(--alto-util);display:grid;align-content:center;margin:0;padding-block:var(--space-6)}
  .formulario{gap:var(--space-4)}.campo textarea{min-height:6em}}

/* Nota de IA: el primer párrafo a la vista y el resto en un plegable cerrado de serie (v4.1.0, L15; forma en plegables.css) */
@media (max-width:979px){#ia .cuerpo{display:grid;gap:var(--space-4)}}

/* Índice lateral: un punto por pantalla; el de la pantalla en la que estás, alargado */
/* Índice lateral (16/10/2026): una raya por pantalla y su nombre; la raya larga y el nombre en claro marcan dónde estás.
   Desde 1600 px el margen deja sitio y los nombres se ven siempre. En portátiles se ven las rayas y los nombres se
   despliegan, sobre una superficie, al pasar el ratón o al llegar con el teclado. En el móvil no hay índice */
.indice-pantallas{position:fixed;z-index:15;left:max(8px,calc((100vw - 1240px) / 2 - 36px));top:50%;transform:translateY(-50%);display:grid;gap:0;padding:var(--space-2);margin:calc(-1 * var(--space-2));border:1px solid transparent;border-radius:var(--radius-web);transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.indice-pantallas[hidden]{display:none}
.indice-pantallas a{display:flex;align-items:center;gap:var(--space-3);min-height:28px;padding-right:var(--space-2);color:var(--text-3);text-decoration:none;font:500 13px/1.2 var(--font-ui);border-radius:var(--radius-action)}
.indice-pantallas .raya{flex:none;position:relative;width:24px;height:2px}
.indice-pantallas .raya::before{content:"";position:absolute;left:0;top:0;width:12px;height:2px;border-radius:1px;background:var(--line);transition:width var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
.indice-pantallas .nombre{white-space:nowrap;opacity:0;transform:translateX(-4px);pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.indice-pantallas a:hover{color:var(--text-2)}.indice-pantallas a:hover .raya::before{background:var(--text-3)}
.indice-pantallas [aria-current]{color:var(--text);font-weight:600}
.indice-pantallas [aria-current] .raya::before{width:24px;background:var(--text)}
.indice-pantallas a:focus-visible{box-shadow:var(--foco)}
.indice-pantallas:hover,.indice-pantallas:focus-within{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-2)}
.indice-pantallas:hover .nombre,.indice-pantallas:focus-within .nombre{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1600px){.indice-pantallas{left:calc((100vw - 1160px) / 2 - 190px)}
  .indice-pantallas .nombre{opacity:1;transform:none;pointer-events:auto}
  .indice-pantallas:hover,.indice-pantallas:focus-within{background:transparent;border-color:transparent;box-shadow:none}}
@media (max-width:979px){#servicios .carta{min-height:220px;height:220px}#servicios .ruta-pantalla{padding-block:var(--space-6)}
  #como .como-pantalla{padding-block:var(--space-4)}#como h2{font-size:26px}}

/* Las pantallas de escritorio ocupan cada una el alto útil, con el contenido centrado */
@media (min-width:980px){.portada,.sec.banda.por-que,.ruta-pantalla,.rejilla-pantalla,#como,#contacto,#ia{min-height:var(--alto-util);display:grid;align-content:center}}
@media (max-width:979px){.portada,#ia{min-height:var(--alto-util);display:grid;align-content:center}}

/* Ajustes del móvil tras verlo Alejandro en su teléfono (15/10/2026): los bloques que van juntos, juntos */
@media (max-width:979px){
  .portada .mar{height:34svh}
  .sec.banda.por-que .lead-sec{min-height:0;padding-block:var(--space-9) var(--space-6)}
  .sec.banda.por-que .instrumento{min-height:0;margin:0 0 var(--space-9)}
  #como .no{min-height:0;margin:0 0 var(--space-9)}
  #contacto .contacto-intro{min-height:0;padding-top:var(--space-9)}
  #contacto .contacto-form{min-height:0;margin-top:var(--space-7);padding-block:0 var(--space-9)}
}