/* ============================================================
   HORUS · páginas de servicio
   ------------------------------------------------------------
   Mismo sistema que la landing (vidrio sobre el palier, Archivo
   expandido para los títulos, IBM Plex para el cuerpo), pero sin
   escenografía: acá el contenido es una ficha técnica, así que la
   página se ordena en dos columnas, riel de datos a la izquierda y
   lectura a la derecha, con filos de un pixel en vez de tarjetas.
   ============================================================ */
:root{
  --ink:#05080F;
  --ink-2:#0B1224;
  --panel:rgba(13,21,40,.56);
  --panel-2:rgba(23,36,64,.72);
  --panel-3:rgba(30,46,78,.8);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --blue:#2B6DFF;
  --blue-2:#5C8DFF;
  --blue-dim:rgba(43,109,255,.18);
  --coral:#FF6A56;
  --coral-2:#FF8A78;
  --coral-dim:rgba(255,106,86,.16);
  --mint:#3ED9A4;
  --amber:#FFB454;
  --paper:#F1F4FA;
  --paper-2:#C8D3E9;
  --muted:#9BAACB;
  --muted-2:#8494B8;

  --display:"Archivo","Archivo Expanded",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  --pad:clamp(20px,5vw,44px);
  --maxw:1220px;
  --navh:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh) + 18px);
  background:var(--ink);
}
body{
  margin:0; color:var(--paper); background:transparent;
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
:focus-visible{outline:2px solid var(--blue-2); outline-offset:3px; border-radius:3px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink-2); color:var(--paper); padding:12px 18px; border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ── el palier, apagado ─────────────────────────────────────────
   La foto sigue estando porque es la marca de la casa, pero acá no
   hay tótem que cuidar: queda fija, muy abajo de luz, y el texto va
   por delante sin competir con ella. */
.bg{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--ink)}
.bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:70% 45%; opacity:.34;
}
.bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,15,.72) 0 22%, rgba(4,7,15,.9) 58%, #05080F 88%),
    radial-gradient(58% 40% at 78% 12%, rgba(43,109,255,.14), transparent 70%);
}

/* Roles de tipografía ---------------------------------------- */
.hd{
  font-family:var(--display); font-weight:800; font-stretch:112%;
  letter-spacing:-.025em; line-height:1.04; margin:0; text-wrap:balance;
}
.tag{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  display:inline-block;
}
.lede{color:var(--muted); font-size:clamp(16px,1.15vw,18.5px); margin:0}

/* Botones ---------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:.86em 1.5em; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:background .18s, border-color .18s, color .18s, transform .18s;
  white-space:nowrap;
}
.btn i{font-size:.95em}
.btn--fill{background:var(--blue); color:#fff; box-shadow:0 12px 26px -14px rgba(37,100,236,.7)}
.btn--fill:hover{background:#4A82FF; color:#fff}
.btn--ghost{border-color:var(--line-2); color:var(--paper); background:var(--panel); backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:var(--blue-2); background:var(--blue-dim); color:var(--paper)}
.btn:active{transform:translateY(1px)}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(5,9,18,.72);
  backdrop-filter:blur(14px) saturate(1.05);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex; align-items:center; gap:28px; height:var(--navh)}
.nav__logo img{height:26px; width:auto}
.nav__links{display:flex; align-items:center; gap:24px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav__links a{font-size:14.5px; color:var(--muted); transition:color .16s}
.nav__links a:hover{color:var(--paper)}
.nav__links a[aria-current="page"]{color:var(--paper)}
.nav__links .btn{font-size:14px; padding:.6em 1.15em}
.nav__toggle{
  display:none; margin-left:auto; background:none; border:1px solid var(--line-2);
  border-radius:7px; width:40px; height:36px; color:var(--paper); cursor:pointer;
}
@media (max-width:960px){
  .nav__toggle{display:grid; place-items:center}
  .nav__links{
    position:absolute; top:var(--navh); left:0; right:0; flex-direction:column; align-items:stretch;
    gap:0; border-bottom:1px solid var(--line-2);
    background:rgba(6,10,22,.94); backdrop-filter:blur(16px);
    padding:8px var(--pad) 20px; display:none;
    box-shadow:0 22px 34px -22px rgba(2,5,12,.6);
  }
  .nav__links.is-open{display:flex}
  .nav__links li{padding:11px 0; border-bottom:1px solid var(--line-2)}
  .nav__links li:last-child{border:0; padding-top:18px}
  .nav__links .btn{justify-content:center}
}

/* ============================================================
   Encabezado de página
   ============================================================ */
.crumbs{padding-top:26px}
.crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0; padding:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted-2);
}
.crumbs a{color:var(--muted-2)}
.crumbs a:hover{color:var(--blue-2)}
.crumbs li+li::before{content:'/'; margin-right:8px; color:rgba(255,255,255,.22)}
.crumbs [aria-current="page"]{color:var(--paper-2)}

.phead{padding:30px 0 clamp(38px,5vw,58px)}
.phead__k{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.phead__k .dot{
  width:7px; height:7px; border-radius:50%; background:var(--coral);
  box-shadow:0 0 0 4px var(--coral-dim); flex:none;
}
.phead h1{font-size:clamp(33px,5vw,62px); max-width:20ch}
.phead .lede{margin-top:22px; max-width:60ch; font-size:clamp(16.5px,1.3vw,19.5px); color:var(--paper-2)}
.phead__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}

/* fila de números del encabezado: sólo donde el dato existe de verdad */
.figs{
  display:flex; flex-wrap:wrap; gap:0; margin:34px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--line-2);
}
.figs li{
  padding:16px 30px 0 0; margin-right:30px; border-right:1px solid var(--line-2);
}
.figs li:last-child{border-right:0; margin-right:0; padding-right:0}
.figs b{
  display:block; font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:clamp(22px,2.2vw,29px); letter-spacing:-.02em; line-height:1;
}
.figs span{display:block; margin-top:7px; font-size:13px; color:var(--muted-2)}

/* ============================================================
   Cuerpo · riel de ficha + lectura
   ============================================================ */
.page{
  display:grid; gap:clamp(30px,4vw,58px);
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  padding-bottom:clamp(56px,7vw,92px);
  align-items:start;
}
@media (max-width:1000px){.page{grid-template-columns:1fr}}

/* el riel se queda a la vista mientras se lee, y si la ficha más el índice
   no entran en la ventana, se desplaza por dentro en vez de esconder el final */
.rail{
  position:sticky; top:calc(var(--navh) + 24px); display:grid; gap:22px;
  max-height:calc(100vh - var(--navh) - 48px); overflow-y:auto;
  overscroll-behavior:contain; scrollbar-width:thin;
}
@media (max-width:1000px){.rail{position:static; max-height:none; overflow:visible}}

.ficha{border-top:2px solid var(--paper); padding-top:18px}
.ficha h2{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper); margin:0 0 4px;
}
.ficha dl{margin:0; display:grid}
.ficha dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); padding-top:14px;
}
.ficha dd{margin:4px 0 0; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--paper-2)}
.ficha dd:last-of-type{border-bottom:0}

.jump h2{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); margin:0 0 12px;
}
.jump ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.jump a{
  font-size:14px; color:var(--muted); display:block; padding-left:14px;
  border-left:1px solid var(--line-2); transition:color .16s, border-color .16s;
}
.jump a:hover{color:var(--paper); border-color:var(--blue-2)}

/* ── lectura ─────────────────────────────────────────────────── */
.doc{min-width:0; max-width:74ch}
.doc > section{padding-top:clamp(30px,4vw,46px)}
.doc > section:first-child{padding-top:0}
.doc h2{
  font-family:var(--display); font-weight:800; font-stretch:110%;
  font-size:clamp(24px,2.5vw,33px); letter-spacing:-.022em; line-height:1.1;
  margin:0 0 16px; text-wrap:balance;
}
.doc h3{
  font-family:var(--sans); font-weight:600; font-size:17px; letter-spacing:-.005em;
  margin:26px 0 6px;
}
.doc p{margin:0 0 16px; color:var(--paper-2)}
.doc p:last-child{margin-bottom:0}
.doc strong{color:var(--paper); font-weight:600}
.doc a:not(.btn){color:var(--blue-2); border-bottom:1px solid rgba(92,141,255,.35)}
.doc a:not(.btn):hover{border-color:var(--blue-2)}

.speclist{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:0}
.speclist li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline;
  padding:12px 0; border-top:1px solid var(--line-2); font-size:14.8px; color:var(--paper-2);
}
.speclist li::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--blue);
  transform:translateY(-2px);
}
.speclist li:last-child{border-bottom:1px solid var(--line-2)}
.speclist + p,.steps + p{margin-top:22px}

/* la puesta en marcha sí es una secuencia: los números informan */
.steps{list-style:none; counter-reset:s; margin:24px 0 0; padding:0; display:grid; gap:0}
.steps li{
  counter-increment:s; position:relative; padding:20px 0 20px 58px;
  border-top:1px solid var(--line-2);
}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:19px;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--blue-2);
  width:38px; text-align:left;
}
.steps b{display:block; font-size:16px; font-weight:600; color:var(--paper)}
.steps span{display:block; margin-top:5px; font-size:14.5px; color:var(--muted)}

.note{
  margin:26px 0 0; padding:18px 20px; border-radius:10px;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(10px);
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
}
.note i{color:var(--amber); font-size:14px; margin-top:4px}
.note p{margin:0; font-size:14.5px; color:var(--paper-2)}

.qa{margin-top:8px}
.qa dt{
  font-weight:600; font-size:16.5px; color:var(--paper);
  padding-top:20px; border-top:1px solid var(--line-2);
}
.qa dd{margin:8px 0 20px; font-size:15px; color:var(--muted)}
.qa dd:last-of-type{margin-bottom:0; padding-bottom:20px; border-bottom:1px solid var(--line-2)}

.next{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-size:14.5px; font-weight:600; color:var(--blue-2); transition:gap .2s;
  border:0 !important;
}
.next:hover{gap:12px}
.next i{font-size:11px}

/* ============================================================
   Riel de servicios · firma de las páginas interiores
   ------------------------------------------------------------
   Los cinco servicios, siempre completos y en el mismo orden, con
   el que estás leyendo marcado. Es el índice del producto y a la vez
   la salida de cada página.
   ============================================================ */
.mods{border-top:1px solid var(--line-2); background:rgba(255,255,255,.028)}
.mods__in{padding:clamp(40px,5vw,60px) 0}
.mods h2{font-family:var(--display); font-weight:800; font-stretch:110%; font-size:clamp(21px,2vw,26px); letter-spacing:-.02em; margin:12px 0 26px}
.mods__grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.mod{
  display:grid; gap:7px; padding:18px 18px 20px; border-radius:11px;
  border:1px solid var(--line); background:var(--panel);
  transition:border-color .18s, background .18s, transform .18s;
}
.mod:hover{border-color:var(--blue-2); background:var(--panel-2); transform:translateY(-2px)}
.mod i{color:var(--blue-2); font-size:15px}
.mod b{font-size:15.5px; font-weight:600; color:var(--paper)}
.mod span{font-size:13.5px; color:var(--muted); line-height:1.5}
.mod--here{
  border-color:var(--line-2); background:rgba(43,109,255,.1);
  transform:none; cursor:default;
}
.mod--here:hover{transform:none; border-color:var(--line-2); background:rgba(43,109,255,.1)}
.mod--here em{
  font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-2);
}

/* ============================================================
   Cierre + pie
   ============================================================ */
.close{padding:clamp(64px,8vw,104px) 0; position:relative; overflow:hidden}
.close::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(56% 64% at 18% 40%, rgba(43,109,255,.13), transparent 70%),
    radial-gradient(44% 48% at 90% 92%, rgba(255,106,86,.08), transparent 72%);
}
.close__in{position:relative; max-width:760px}
.close h2{font-size:clamp(30px,4vw,52px)}
.close .lede{margin-top:20px; max-width:52ch}
.close__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.close__notes{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 0;
  margin-top:36px; padding-top:22px; border-top:1px solid var(--line-2);
}
.close__notes span{
  display:inline-flex; align-items:center; gap:11px;
  font-size:14px; font-weight:500; color:rgba(236,242,255,.88); line-height:1.25;
  padding-right:28px; margin-right:28px; border-right:1px solid var(--line-2);
}
.close__notes span:last-child{padding-right:0; margin-right:0; border-right:0}
.close__notes i{
  width:22px; height:22px; flex:none; border-radius:6px; display:grid; place-items:center;
  background:rgba(62,217,164,.16); color:var(--mint); font-size:10px;
}
@media (max-width:520px){
  .close__notes{gap:12px; flex-direction:column; align-items:flex-start}
  .close__notes span{padding-right:0; margin-right:0; border-right:0}
}

.foot{
  padding:clamp(48px,6vw,68px) 0 30px;
  border-top:1px solid var(--line-2);
  background:rgba(5,9,18,.6); backdrop-filter:blur(14px) saturate(1.05);
}
.foot__grid{
  display:grid; gap:clamp(26px,4vw,44px);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__logo{height:26px; width:auto; margin-bottom:16px}
.foot p{margin:0; font-size:13.5px; color:var(--muted); max-width:34ch; line-height:1.6}
.foot__cuos{display:flex; align-items:center; gap:9px; margin-top:20px; font-family:var(--mono); font-size:10.5px; color:var(--muted-2); letter-spacing:.05em}
.foot__cuos img{height:17px; width:auto; filter:grayscale(1); opacity:.7}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper); margin:0 0 15px; font-weight:500}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot ul a,.foot ul span{font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:9px}
.foot ul a:hover{color:var(--blue-2)}
.foot ul i{font-size:11px; width:13px; flex:none; color:var(--muted-2)}
.foot__bar{
  margin-top:clamp(40px,5vw,60px); padding-top:22px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
}
.foot__bar a{color:var(--blue-2)}
.foot__bar a:hover{color:var(--paper)}

/* ── entrada ─────────────────────────────────────────────────── */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1; transform:none; transition:none}
  .mod:hover{transform:none}
}