/* Praksis — hoja de estilo de las páginas legales.
   Hereda los tokens del sitio (docs/mockups/sitio.html): lienzo oscuro con
   marco, vidrio, píldoras y luces azules. Acá el protagonista es el texto:
   una columna de lectura y un sumario fijo al costado. */

:root{
  --fondo:#050C1C;
  --profundo:#06122B;
  --marino:#0A1A3C;
  --electrico:#2B54F5;
  --claro:#8FA9FF;
  --calido:#F2B98B;

  --blanco:#F6F8FF;
  --tenue:rgba(246,248,255,.66);
  --apagado:rgba(246,248,255,.5);
  --vidrio-borde:rgba(255,255,255,.18);

  --f:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.68,.24,1);
  --r:26px;
  --pad:30px;
  --marco:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--fondo);color:var(--blanco);font-family:var(--f);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding:var(--marco);overflow-x:clip;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--electrico);color:#fff}
:focus-visible{outline:2px solid var(--claro);outline-offset:3px;border-radius:8px}

.lienzo{border-radius:var(--r);overflow:clip;position:relative;background:var(--profundo)}
.envoltorio{width:min(1180px,100% - var(--pad) * 2);margin-inline:auto}

.grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.luz{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------------- barra ---------------- */
.barra{position:fixed;top:var(--marco);left:var(--marco);right:var(--marco);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px var(--pad);
  border-radius:var(--r) var(--r) 20px 20px;
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease)}
.barra.pegada{padding:12px var(--pad);background:rgba(5,12,28,.62);backdrop-filter:blur(18px);
  box-shadow:0 12px 34px -22px rgba(0,0,0,.9)}
.marca{display:inline-flex;align-items:baseline;font-weight:700;font-size:1.24rem;letter-spacing:-.03em;color:var(--blanco)}
.marca .punto{color:var(--claro)}
.menu{display:flex;gap:4px;padding:5px;border-radius:100px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px)}
.menu a{padding:8px 16px;border-radius:100px;font-size:.9rem;font-weight:500;color:rgba(246,248,255,.7);
  transition:background .3s var(--ease),color .3s var(--ease)}
.menu a:hover,.menu a.on{color:var(--blanco);background:rgba(255,255,255,.13)}
.acciones-barra{display:flex;align-items:center;gap:10px}
.hamburguesa{display:none;position:relative;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.09);border:1px solid var(--vidrio-borde);backdrop-filter:blur(14px)}
.hamburguesa span{position:absolute;left:calc(50% - 9px);top:calc(50% - .8px);
  width:18px;height:1.6px;border-radius:2px;background:var(--blanco);transition:transform .35s var(--ease)}
.hamburguesa span:first-child{transform:translateY(-3.5px)}
.hamburguesa span:last-child{transform:translateY(3.5px)}
.hamburguesa[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}

/* ---------------- píldoras ---------------- */
.boton{display:inline-flex;align-items:center;gap:10px;padding:11px 8px 11px 20px;border-radius:100px;
  background:var(--blanco);color:#0A1020;font-size:.92rem;font-weight:600;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.boton::after{content:'→';display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--electrico);color:#fff;font-size:.78rem;flex:none}
.boton:hover{transform:translateY(-2px);box-shadow:0 14px 32px -14px rgba(0,0,0,.85)}
.boton.chico{padding:9px 8px 9px 16px;font-size:.86rem}
.boton.invertido{background:var(--electrico);color:var(--blanco)}
.boton.invertido::after{background:var(--blanco);color:var(--electrico)}
.menu-entrar{display:none}
@media (max-width:820px){.menu-entrar{display:block}}

/* ---------------- encabezado del documento ---------------- */
.tapa{position:relative;padding:170px 0 62px;overflow:hidden}
.tapa .fondo{position:absolute;inset:0;z-index:0;overflow:hidden}
.tapa .fondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.tapa .luz{background:
  radial-gradient(58% 60% at 78% 0%,rgba(43,84,245,.22),transparent 70%),
  linear-gradient(100deg,rgba(5,12,28,.93) 0%,rgba(5,12,28,.84) 38%,rgba(5,12,28,.52) 72%,rgba(5,12,28,.44) 100%),
  linear-gradient(180deg,rgba(5,12,28,.3) 0%,rgba(5,12,28,.18) 42%,rgba(5,12,28,.8) 100%)}
.tapa .envoltorio{position:relative;z-index:4;max-width:760px}
.tapa h1{font-size:clamp(2.1rem,3.4vw,3.1rem);font-weight:600;line-height:1.06;
  letter-spacing:-.032em;margin:18px 0 18px}
.tapa .bajada{color:var(--tenue);font-size:1.02rem;line-height:1.62;max-width:56ch}
.tapa .bajada strong{color:var(--blanco);font-weight:600}

/* ---------------- cuerpo: sumario + documento ---------------- */
.documento{position:relative;padding:10px 0 90px;background:var(--fondo);
  border-top:1px solid rgba(255,255,255,.07)}
.documento .envoltorio{position:relative;z-index:4;
  display:grid;grid-template-columns:250px 1fr;gap:clamp(30px,5vw,72px);align-items:start;
  padding-top:52px}

.sumario{position:sticky;top:104px;max-height:calc(100vh - 132px);
  overflow-y:auto;overscroll-behavior:contain;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.sumario::-webkit-scrollbar{width:6px}
.sumario::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:100px}
.sumario::-webkit-scrollbar-track{background:transparent}
.sumario h2{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--apagado);margin-bottom:14px}
.sumario ol{display:flex;flex-direction:column;gap:1px;counter-reset:art}
.sumario a{display:flex;gap:11px;padding:8px 12px;border-radius:11px;font-size:.88rem;
  color:var(--tenue);line-height:1.35;transition:background .25s var(--ease),color .25s var(--ease)}
.sumario ol a::before{counter-increment:art;content:counter(art,decimal-leading-zero);
  font-size:.72rem;font-weight:600;color:var(--apagado);font-variant-numeric:tabular-nums;
  padding-top:2px;flex:none}
.sumario a:hover{background:rgba(255,255,255,.07);color:var(--blanco)}
.sumario a.on{background:rgba(43,84,245,.18);color:var(--blanco)}
.sumario ol a.on::before{color:var(--claro)}
.otros{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09)}
.otros h2{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--apagado);margin-bottom:12px}
.otros a{display:block;padding:7px 12px;border-radius:11px;font-size:.88rem;color:var(--tenue);
  transition:background .25s var(--ease),color .25s var(--ease)}
.otros a:hover{background:rgba(255,255,255,.07);color:var(--blanco)}
.otros a[aria-current]{color:var(--claro)}

.texto{max-width:72ch;counter-reset:seccion}
.texto article{padding:34px 0;border-top:1px solid rgba(255,255,255,.09)}
.texto article:first-child{border-top:0;padding-top:0}
.texto h2{font-size:1.36rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;
  margin-bottom:16px;display:flex;gap:14px;align-items:baseline;scroll-margin-top:110px}
.texto h2::before{counter-increment:seccion;content:counter(seccion,decimal-leading-zero);
  font-size:.76rem;font-weight:600;color:var(--claro);font-variant-numeric:tabular-nums;flex:none}
.texto h3{font-size:1rem;font-weight:600;letter-spacing:-.01em;margin:22px 0 8px;color:var(--blanco)}
.texto p{color:var(--tenue);font-size:.97rem;line-height:1.72;margin-bottom:14px}
.texto p:last-child,.texto ul:last-child{margin-bottom:0}
.texto strong{color:var(--blanco);font-weight:600}
.texto em{font-style:normal;color:var(--claro)}
.texto a:not(.boton){color:var(--claro);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(143,169,255,.4)}
.texto a:not(.boton):hover{text-decoration-color:var(--claro)}
.texto ul{display:flex;flex-direction:column;gap:9px;margin:4px 0 16px}
.texto ul li{position:relative;padding-left:20px;color:var(--tenue);font-size:.97rem;line-height:1.66}
.texto ul li::before{content:'';position:absolute;left:2px;top:.68em;width:6px;height:6px;
  border-radius:2px;background:rgba(143,169,255,.55)}
.texto ul li strong{color:var(--blanco)}

/* dato de contacto o de la empresa que todavía hay que completar */
.pendiente{background:rgba(242,185,139,.14);color:var(--calido);border-bottom:1px dashed rgba(242,185,139,.5);
  border-radius:4px;padding:1px 5px;font-weight:600;font-size:.94em}

/* tarjeta de vidrio para tablas y resúmenes */
.ficha{border-radius:18px;padding:20px 22px;margin:6px 0 16px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid var(--vidrio-borde)}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;font-size:.93rem}
.ficha dt{color:var(--apagado);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding-top:3px}
.ficha dd{color:var(--blanco)}

.tabla{width:100%;border-collapse:collapse;margin:4px 0 16px;font-size:.9rem;display:block;overflow-x:auto}
.tabla th{text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--apagado);padding:0 16px 10px 0;white-space:nowrap}
.tabla td{padding:12px 16px 12px 0;color:var(--tenue);border-top:1px solid rgba(255,255,255,.09);
  vertical-align:top;line-height:1.55}
.tabla td:first-child{color:var(--blanco);font-weight:600;white-space:nowrap}

/* ---------------- pie ---------------- */
.pie{position:relative;z-index:4;background:var(--fondo);padding:46px var(--pad) 40px;
  border-top:1px solid rgba(255,255,255,.08)}
.pie .envoltorio{display:flex;align-items:center;justify-content:space-between;gap:14px 30px;
  flex-wrap:wrap;font-size:.86rem;color:var(--tenue)}
.pie .legal{color:rgba(246,248,255,.4)}
.pie nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pie nav a{color:rgba(246,248,255,.55);transition:color .25s var(--ease)}
.pie nav a:hover{color:var(--blanco)}
.pie nav a[aria-current]{color:var(--claro)}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .documento .envoltorio{grid-template-columns:1fr;gap:26px}
  .sumario{position:static;max-height:none;overflow:visible;padding-right:0}
  .sumario ol{flex-direction:row;flex-wrap:wrap;gap:6px}
  .sumario a{background:rgba(255,255,255,.06);border-radius:100px;padding:7px 14px;font-size:.84rem}
  .otros{margin-top:6px}
  .otros a{display:inline-block;padding:7px 12px}
}
@media (max-width:820px){
  :root{--pad:20px;--r:20px;--marco:8px}
  .hamburguesa{display:grid}
  .menu{position:absolute;top:68px;left:var(--pad);right:var(--pad);z-index:11;
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:18px;
    background:rgba(8,20,46,.97);border:1px solid rgba(255,255,255,.14);
    box-shadow:0 22px 50px -24px rgba(0,0,0,.95);
    opacity:0;visibility:hidden;translate:0 -10px;
    transition:opacity .35s var(--ease),translate .35s var(--ease),visibility .35s}
  .menu.abierto{opacity:1;visibility:visible;translate:0 0}
  .menu a{padding:13px 15px;border-radius:12px;font-size:.98rem}
  .barra .boton{display:none}
  .tapa{padding:130px 0 44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}