/* Navis · naviscontrol.cl · base común de todas las páginas: fuentes, colores, navegación,
   botones, filas desplegables y pie. La portada agrega inicio.css; las demás páginas, paginas.css. */
/* Fuentes propias, servidas desde este mismo sitio: ningún servicio de terceros */
@font-face{font-family:'Geist';src:url(fuentes/Geist-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(fuentes/GeistMono-Variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(fuentes/InstrumentSerif-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url(fuentes/InstrumentSerif-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
/* ───────────── Tokens ───────────── */
:root{
  --superficie:#0E3A5C;
  --penumbra:#0A2340;
  --abismo:#050C18;     /* navy de marca */
  --fosa:#010205;
  --el:#1E90FF;         /* bioluminiscencia: único acento */
  --el-claro:#7CC0FF;
  --espuma:#F0F6FF;
  --niebla:rgba(240,246,255,.66);
  --bruma:rgba(240,246,255,.5);    /* .5: contraste AA (4,5:1) en texto chico sobre el abismo */
  --linea:rgba(240,246,255,.12);
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --ancho:1240px;
  --margen:clamp(20px,5vw,64px);
  --curva:cubic-bezier(.16,.8,.2,1);   /* un objeto que se detiene en el agua */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--abismo);color:var(--espuma);-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.62;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;background:transparent}
a{color:inherit}
::selection{background:rgba(30,144,255,.4)}
:focus-visible{outline:1.5px solid var(--el-claro);outline-offset:4px;border-radius:2px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}

/* ───────────── Navegación ───────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .6s,border-color .6s;border-bottom:1px solid transparent}
.nav.fija{background:rgba(3,9,20,.55);backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);border-color:var(--linea)}
.nav-fila{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:24px;justify-self:start}
.nav-enlaces{display:flex;align-items:center;gap:34px;list-style:none}
.nav-enlaces a{text-decoration:none;font-size:13.5px;color:var(--niebla);transition:color .3s}
.nav-enlaces a:hover{color:var(--espuma)}
.nav-enlaces .secundario{color:var(--bruma)}
.nav-der{justify-self:end;display:flex;align-items:center;gap:12px}
.trazo{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-size:14px;color:var(--espuma);padding-bottom:6px;
  border-bottom:1px solid rgba(240,246,255,.38);transition:border-color .4s,gap .6s var(--curva)}
.trazo:hover{border-color:var(--espuma);gap:22px}
.trazo i{display:block;width:22px;height:1px;background:currentColor;position:relative}
.trazo i::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.boton{display:inline-flex;align-items:center;height:50px;padding:0 28px;border-radius:999px;background:var(--espuma);color:#03070F;
  text-decoration:none;font-size:15px;font-weight:400;transition:background .4s,box-shadow .6s,transform .6s var(--curva)}
.boton:hover{background:#fff;transform:translateY(-1px);box-shadow:0 0 40px rgba(124,192,255,.35)}
.menu-btn{display:none;background:none;border:1px solid var(--linea);color:var(--espuma);font:inherit;font-size:14px;height:38px;padding:0 16px;border-radius:999px;cursor:pointer}
.menu-panel{display:none}
.saltar{position:absolute;left:var(--margen);top:-80px;z-index:60;padding:10px 18px;border-radius:999px;background:var(--espuma);color:#03070F;
  font-size:14px;text-decoration:none;transition:top .3s}
.saltar:focus{top:16px}
.nav-enlaces a[aria-current],.nav-enlaces a.actual{color:var(--espuma);text-decoration:underline 1px var(--el-claro);text-underline-offset:8px}
.menu-panel a[aria-current],.menu-panel a.actual{color:var(--el-claro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.trazo-boton{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font:inherit;font-size:14px}

/* ───────────── Tipografía compartida ───────────── */
.zona-rotulo{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:12px;color:var(--bruma);margin-bottom:clamp(36px,5vw,56px)}
.zona-rotulo b{font-weight:400;color:var(--el-claro)}
.zona-rotulo::after{content:'';flex:0 0 64px;height:1px;background:var(--linea);align-self:center}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.4vw,84px);line-height:1.02;letter-spacing:-.01em;max-width:16ch}
.texto{color:var(--niebla);max-width:52ch}
.ref{font-family:var(--mono);font-size:12px;color:var(--bruma);display:block}

/* Filas desplegables (servicios de la portada y de asuntos marítimos) */
.servicios-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,6vw,88px)}
.servicios-cab .texto{max-width:38ch}
.servicio{border-top:1px solid var(--linea)}
.servicio:last-child{border-bottom:1px solid var(--linea)}
.servicio summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:72px 1fr auto 28px;gap:24px;align-items:baseline;padding:30px 0;transition:padding .7s var(--curva)}
.servicio summary::-webkit-details-marker{display:none}
.servicio summary:hover{padding-left:14px}
.s-codigo{font-family:var(--mono);font-size:12.5px;color:var(--bruma)}
.s-nombre{font-family:var(--serif);font-size:clamp(26px,3vw,40px);line-height:1.1}
.s-ref{font-family:var(--mono);font-size:12px;color:var(--bruma);text-align:right;white-space:nowrap}
.s-mas{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.s-mas::before,.s-mas::after{content:'';position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--niebla);transition:transform .6s var(--curva)}
.s-mas::after{transform:rotate(90deg)}
.servicio[open] .s-mas::after{transform:rotate(0)}
.servicio[open] .s-codigo,.servicio.destacado .s-codigo{color:var(--el-claro)}
.s-detalle{display:grid;grid-template-columns:72px 1fr;gap:24px;padding:0 0 34px}
.s-detalle p{grid-column:2;color:var(--niebla);max-width:58ch}

/* Pie */
.pie{border-top:1px solid var(--linea);padding:32px 0 40px;font-size:13px;color:var(--bruma);background:var(--fosa)}
.pie .contenedor{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pie nav{display:flex;gap:28px;flex-wrap:wrap}
.pie a{text-decoration:none;transition:color .3s}
.pie a:hover{color:var(--espuma)}
.pie a[aria-current]{color:var(--espuma)}

/* ───────────── Responsive ───────────── */
@media (max-width:1060px){
  .nav-fila{grid-template-columns:1fr auto}
  .nav-enlaces,.nav-der .trazo{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .menu-panel{display:block;position:fixed;inset:76px 0 auto 0;z-index:49;background:rgba(3,9,20,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--linea);clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--curva);visibility:hidden}
  .menu-panel.abierto{clip-path:inset(0 0 0 0);visibility:visible}
  .menu-panel ul{list-style:none;padding:12px var(--margen) 28px}
  .menu-panel li a{display:block;padding:16px 0;border-bottom:1px solid var(--linea);text-decoration:none;font-family:var(--serif);font-size:26px}
  .menu-panel li:last-child a{border:none;margin-top:20px;font-family:var(--sans);font-size:15px}
  .menu-panel .boton{display:flex;justify-content:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .servicio summary{grid-template-columns:44px 1fr 20px;gap:14px}
  .s-ref{display:none}
  .s-detalle{grid-template-columns:44px 1fr;gap:14px}
  .s-detalle p::after{content:attr(data-ref);display:block;font-family:var(--mono);font-size:12px;color:var(--bruma);margin-top:12px}
  .servicio summary:hover{padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation:none!important}
}