/* ==========================================================================
   CZ SYSDEV, C.A. - sistema visual compartido (las cuatro páginas)
   Un mundo de luz y señal: azul de la marca en degradado, naranja como chispa,
   superficies redondeadas con profundidad real, capturas del sistema dentro de
   marcos de dispositivo, una sola familia tipográfica (Sora).
   ========================================================================== */

@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Sora";
  src:url("../fonts/sora-latin.woff2") format("woff2");
  font-weight:100 900;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --bg:#f2f6fd;
  --bg-2:#e8eefa;
  --surface:#ffffff;
  --surface-2:#f7f9ff;
  --ink:#0a1240;
  --ink-2:#3a4672;
  --ink-3:#66729a;
  --line:rgba(10,18,64,.08);
  --line-2:rgba(10,18,64,.15);
  --navy:#050c33;
  --navy-2:#0a1a5c;
  --blue:#0b5fd8;
  --sky:#18a4fb;
  --orange:#f77e21;
  --orange-2:#ffa459;
  --on-orange:#0a1240;
  --grad-brand:linear-gradient(135deg,#0a1a5c 0%,#0a3fc0 52%,#18a4fb 118%);
  --grad-night:linear-gradient(160deg,#050c33 0%,#08154d 55%,#0c2a8a 130%);
  --grad-orange:linear-gradient(180deg,#ffa459 0%,#f77e21 100%);
  --grad-soft:linear-gradient(135deg,#e2edff 0%,#f6f9ff 100%);
  --hl:rgba(24,164,251,.16);
  --glass:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.85);
  --edge:0 0 0 0 transparent;          /* el borde solo existe en modo oscuro: elevación declarada una vez */
  --shadow-s:0 1px 2px rgba(10,18,64,.06),0 10px 22px -10px rgba(10,18,64,.2);
  --shadow-m:0 2px 4px rgba(10,18,64,.05),0 18px 36px -14px rgba(10,30,110,.2);
  --shadow-l:0 4px 8px rgba(5,12,51,.08),0 44px 80px -32px rgba(5,20,100,.42);

  --r-s:.75rem; --r-m:1.25rem; --r-l:1.75rem; --r-xl:2.5rem;
  --ease:cubic-bezier(.23,1,.32,1);
  --w:80rem;
  --gut:clamp(1rem,4vw,2rem);
  --hdr:4.5rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#050a24; --bg-2:#0a1234; --surface:#0e1741; --surface-2:#121d4f;
    --ink:#eaf0ff; --ink-2:#b9c4ea; --ink-3:#8a97c4;
    --line:rgba(234,240,255,.09); --line-2:rgba(234,240,255,.17);
    --blue:#6aa9ff; --navy:#03071c;
    --grad-soft:radial-gradient(32.5rem 16.25rem at 92% 0%,rgba(24,164,251,.2),transparent 65%),linear-gradient(135deg,#0d1a52 0%,#0a1338 100%);
    --hl:rgba(106,169,255,.2);
    --edge:var(--edge);
    --glass:rgba(14,23,65,.66); --glass-line:rgba(234,240,255,.14);
    --shadow-s:0 1px 2px rgba(0,0,0,.3),0 6px 16px -8px rgba(0,0,0,.5);
    --shadow-m:0 2px 4px rgba(0,0,0,.3),0 18px 36px -14px rgba(0,0,0,.6);
    --shadow-l:0 4px 8px rgba(0,0,0,.35),0 44px 80px -32px rgba(0,0,0,.75);
  }
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 1rem)}
/* Escala de escritorio: en portátiles (1100 a 1920 px) todo el diseño se mide en rem y la raíz
   crece con el ancho, de modo que a 100% de zoom se ve como a ~85% de zoom en un monitor grande. */
@media (min-width:1100px){html{font-size:clamp(13.5px,calc(.78vw + 1px),16px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 .9375rem/1.62 "Sora",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--orange);color:var(--on-orange)}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:.5rem}
html{scrollbar-color:var(--ink-3) var(--bg-2);scrollbar-width:thin}
::-webkit-scrollbar{width:.625rem;height:.625rem}
::-webkit-scrollbar-track{background:var(--bg-2)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border:2px solid var(--bg-2);border-radius:.5rem}
input,select,textarea{caret-color:var(--orange);accent-color:var(--orange)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:.75rem;top:-4rem;z-index:100;background:var(--ink);color:var(--bg);padding:.625rem 1rem;border-radius:var(--r-s);font-weight:600;transition:top .18s var(--ease)}
.skip:focus{top:.75rem}
.ico{width:1.25em;height:1.25em;flex:none;fill:currentColor}

/* ---------- tipografía ---------- */
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.h1,.h2,.h3{font-weight:600;color:inherit;text-wrap:balance}
.h1{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.05;letter-spacing:-.03em;word-spacing:.05em}
.h2{font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1.12;letter-spacing:-.025em;word-spacing:.04em}
.h3{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.25;letter-spacing:-.012em}
.lead{font-size:1.0625rem;line-height:1.55;color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.muted{color:var(--ink-3)}
.prose p{max-width:66ch;text-wrap:pretty}
.prose p+p{margin-top:.875rem}

/* ---------- botones ---------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:3rem;padding:0 1.375rem;border-radius:.875rem;border:0;
  background:var(--grad-orange);color:var(--on-orange);
  font-weight:600;font-size:.9375rem;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -10px rgba(247,126,33,.75);
  transition:transform .16s var(--ease),box-shadow .25s,filter .25s;
  -webkit-tap-highlight-color:transparent;
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn .ico{width:1.15em;height:1.15em;transition:transform .22s var(--ease)}
.btn:active{transform:scale(.97)}
@media (hover:hover){
  .btn:hover{filter:saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 28px -10px rgba(247,126,33,.85);transform:translateY(-1px)}
  .btn:hover::after{transform:translateX(120%)}
  .btn:hover .ico{transform:translateX(3px)}
  .btn:active{transform:scale(.97)}
}
.on-dark .btn,.night .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 24px -12px rgba(0,0,0,.65)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow-s)}
.btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(11,95,216,.1) 50%,transparent 70%)}
.on-dark .btn.ghost,.night .btn.ghost{background:rgba(255,255,255,.09);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.on-dark .btn.ghost::after,.night .btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%)}
.btn.sm{min-height:2.5rem;padding:0 1rem;font-size:.875rem;border-radius:.75rem}
.btn.block{width:100%}
.tlink{display:inline-flex;align-items:center;gap:.45em;font-weight:600;text-decoration:none;color:var(--blue)}
.tlink .ico{transition:transform .22s var(--ease)}
@media (hover:hover){.tlink:hover .ico{transform:translateX(3px)}}
.night .tlink,.on-dark .tlink{color:#8fd0ff}

/* ---------- chips, insignias, marcos ---------- */
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem .5rem .625rem;border-radius:999px;font-weight:600;font-size:.8125rem;letter-spacing:-.005em;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow-m);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);color:var(--ink);white-space:nowrap}
.chip .ico{width:1.125rem;height:1.125rem;padding:.25rem;box-sizing:content-box;border-radius:50%;background:var(--grad-brand);color:#fff}
.ibadge{display:grid;place-items:center;width:2.875rem;height:2.875rem;flex:none;border-radius:.9375rem;background:var(--grad-brand);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 18px -8px rgba(11,71,207,.65)}
.ibadge .ico{width:1.4375rem;height:1.4375rem}
.ibadge.o{background:var(--grad-orange);color:var(--on-orange);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 18px -8px rgba(247,126,33,.7)}
.ibadge.g{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* marco de navegador y de teléfono para las capturas reales */
.dev{position:relative;background:#0a1130;box-shadow:var(--shadow-l),inset 0 0 0 1px rgba(255,255,255,.07)}
.dev.browser{border-radius:1.125rem;padding-top:1.625rem;overflow:hidden}
.dev.browser::before{content:"";position:absolute;left:.875rem;top:.5625rem;width:.5rem;height:.5rem;border-radius:50%;background:#ff6159;box-shadow:14px 0 0 #ffbd2e,28px 0 0 #29c941}
.dev.browser img{width:100%;height:auto}
.dev.phone{border-radius:2.375rem;padding:.5rem;background:linear-gradient(155deg,#2a366f,#0a1030 62%)}
.dev.phone::before{content:"";position:absolute;left:50%;top:.9375rem;width:2.375rem;height:.5625rem;border-radius:.5625rem;transform:translateX(-50%);background:#050a1f;z-index:1}
.dev.phone img{border-radius:1.9375rem;width:100%;height:auto}

.on-dark .dev{box-shadow:0 40px 70px -26px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.on-dark .chip{box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}
.on-dark .ibadge{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* decoración de escenarios: rombos de la marca, rejilla de red, resplandores */
.fx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}
.fx-grid{background-image:radial-gradient(rgba(255,255,255,.2) 1.1px,transparent 1.6px);background-size:1.875rem 1.875rem;-webkit-mask:radial-gradient(ellipse 80% 70% at 68% 40%,#000,transparent 75%);mask:radial-gradient(ellipse 80% 70% at 68% 40%,#000,transparent 75%)}
.fx-glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7}
.dia{position:absolute;aspect-ratio:1;border-radius:24%;transform:rotate(45deg);border:1px solid rgba(255,255,255,.13);background:linear-gradient(135deg,rgba(24,164,251,.28),rgba(24,164,251,0) 62%)}

/* ---------- cabecera ---------- */
.hd{position:sticky;top:0;z-index:60;height:var(--hdr)}
.hd::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid transparent;transition:border-color .25s}
.hd.stuck::before{border-bottom-color:var(--line)}
.hd .wrap{position:relative;height:100%;display:flex;align-items:center;gap:1.25rem}
.brand{display:block;flex:none;line-height:0}
.brand img{height:2.125rem;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-inline:auto;padding:.3125rem;background:var(--surface);border-radius:999px;box-shadow:var(--edge),var(--shadow-s)}
.nav a{padding:.5rem .9375rem;border-radius:999px;font-weight:500;font-size:.875rem;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
@media (hover:hover){.nav a:hover{background:var(--bg-2);color:var(--ink)}}
.nav a[aria-current="true"]{background:var(--ink);color:var(--surface);font-weight:600}
.burger{display:none;margin-left:auto;width:2.875rem;height:2.875rem;border:0;border-radius:.875rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);padding:0}
.burger span{display:block;width:1.25rem;height:2px;border-radius:2px;background:var(--ink);margin:.25rem auto;transition:transform .26s var(--ease),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:calc(var(--hdr) - .375rem) .75rem auto .75rem;z-index:55;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-l),var(--edge);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s}
.mnav.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mnav .wrap{display:grid;padding:.625rem .875rem 1rem}
.mnav a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:.875rem .5rem;border-bottom:1px solid var(--line);font-weight:600;text-decoration:none}
.mnav .btn{margin-top:.875rem}
@media (max-width:1080px){
  .nav,.hd>.wrap>.btn{display:none}
  .burger{display:block}
}
@media (min-width:1081px){.mnav{display:none}}

/* ---------- aparición al hacer scroll (CSS + IntersectionObserver) ---------- */
.js .rv{opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--d,0) * 80ms)}
.js .rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- formulario ---------- */
.campo{display:grid;gap:.4375rem;min-width:0}
.campo label{font-weight:600;font-size:.8125rem;color:var(--ink)}
.campo label small{font-weight:500;color:var(--ink-3);font-size:inherit}
.campo input,.campo select,.campo textarea{
  width:100%;min-height:3.125rem;padding:.75rem .9375rem;background:var(--surface-2);color:var(--ink);
  border:1px solid var(--line-2);border-radius:.875rem;font:inherit;font-size:.9375rem;
  transition:border-color .18s,box-shadow .18s,background-color .18s;
}
.campo textarea{min-height:6.75rem;resize:vertical}
.campo input::placeholder,.campo textarea::placeholder{color:var(--ink-3);opacity:1}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--ink-3)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;background:var(--surface);border-color:var(--sky);box-shadow:0 0 0 4px color-mix(in srgb,var(--sky) 24%,transparent)}
.campo .err{display:none;color:#c62828;font-size:.8125rem;font-weight:600}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .campo .err{color:#ff9d94}}
.campo.bad input,.campo.bad select{border-color:#c62828}
.campo.bad .err{display:block}

/* ---------- burbuja de WhatsApp ---------- */
.wa{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:70;transition:opacity .25s,transform .25s var(--ease)}
.wa.away{opacity:0;transform:translateY(12px);pointer-events:none}
.wa-btn{display:inline-flex;align-items:center;gap:.625rem;height:3.375rem;padding:0 1.375rem 0 1rem;border:0;border-radius:1.125rem;background:var(--grad-brand);color:#fff;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 30px -10px rgba(10,50,180,.7);transition:transform .16s var(--ease)}
.wa-btn .ico{width:1.625rem;height:1.625rem;color:#fff}
.wa-btn:active{transform:scale(.97)}
@media (hover:hover){.wa-btn:hover{transform:translateY(-2px)}}
.wa-panel{position:absolute;right:0;bottom:4.125rem;width:min(20.625rem,calc(100vw - 2rem));padding:1.25rem;background:var(--surface);color:var(--ink);border-radius:var(--r-l);box-shadow:var(--shadow-l),var(--edge);transform-origin:100% 100%;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
.wa-panel[hidden]{display:block;opacity:0;transform:scale(.96) translateY(6px);visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s,visibility 0s .16s}
.wa-panel h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.375rem}
.wa-panel p{color:var(--ink-2);font-size:.875rem;margin-bottom:1rem}
.wa-close{position:absolute;right:.5rem;top:.5rem;width:2.25rem;height:2.25rem;border:0;background:none;color:var(--ink-3);border-radius:.75rem;display:grid;place-items:center}
@media (hover:hover){.wa-close:hover{color:var(--ink);background:var(--bg-2)}}
@media (max-width:520px){.wa-btn span{display:none}.wa-btn{padding:0;width:3.375rem;justify-content:center}}

/* ---------- contraportada y pie ---------- */
.night{background:var(--grad-night);color:#eaf0ff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.night .muted,.night .lead{color:#a9b7e6}
.ft{padding:.75rem .75rem 1.25rem;color:#eaf0ff}
.ft-stage{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-xl);background:var(--grad-night);padding-block:clamp(2.25rem,5vw,4rem) 1.375rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ft-stage .fx{z-index:-1}
.ft-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2.5rem;padding-bottom:clamp(1.75rem,4vw,2.75rem);margin-bottom:clamp(1.75rem,4vw,2.75rem);border-bottom:1px solid rgba(233,238,252,.14)}
.ft-cta img{height:clamp(2.5rem,4vw,3.25rem);width:auto}
.ft-cta p{margin-top:.875rem;max-width:38ch;color:#b4c2ee;font-size:.95rem}
.ft-cta-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.ft-tel{display:inline-flex;align-items:center;gap:.625rem;padding:0 1.25rem;min-height:3rem;border-radius:.875rem;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:#eaf0ff;font-weight:600;text-decoration:none;transition:background-color .2s}
.ft-tel .ico{color:#8fd0ff}
@media (hover:hover){.ft-tel:hover{background:rgba(255,255,255,.16)}}
.ft-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(233,238,252,.14)}
.ft h3{font-size:.8125rem;font-weight:600;letter-spacing:.02em;color:#8ea0d6;margin-bottom:.875rem}
.ft-col a,.ft-col li{display:block;padding:.3125rem 0;font-size:.9rem;color:#eaf0ff;text-decoration:none}
.ft-col a{transition:color .18s}
@media (hover:hover){.ft-col a:hover{color:var(--orange-2)}}
.ft-col .pend{color:#8ea0d6}
.ft-col ul a{color:#8fd0ff}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.625rem 1.5rem;padding-top:1.375rem;color:#8ea0d6;font-size:.8125rem}
.ft-bot a{color:#eaf0ff;text-underline-offset:.1875rem}
@media (max-width:700px){.ft-top{grid-template-columns:1fr 1fr;gap:1.75rem}}
@media (max-width:440px){.ft-top{grid-template-columns:1fr}}

/* ---------- páginas legales ---------- */
.doc-hero{position:relative;margin:.5rem .75rem 0;border-radius:var(--r-xl);background:var(--grad-night);color:#fff;overflow:hidden;padding-block:clamp(2.5rem,6vw,4.75rem) clamp(2.25rem,5vw,4rem)}
.doc-hero .wrap{position:relative}
.doc-hero h1{font-weight:600;letter-spacing:-.03em;word-spacing:.05em;line-height:1.08;font-size:clamp(1.9rem,4vw,3.2rem);text-wrap:balance;max-width:20ch}
.doc-hero p{margin-top:1rem;color:#b9c6ee;max-width:60ch}
.doc-hero .back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem .875rem .5rem .625rem;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-weight:600;font-size:.875rem;text-decoration:none;color:#fff}
.doc-hero .back .ico{transform:rotate(180deg)}
.doc-grid{display:grid;grid-template-columns:16.875rem minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);padding-block:clamp(1.5rem,3vw,2.5rem) clamp(4rem,8vw,6.875rem);align-items:start}
.toc{position:sticky;top:calc(var(--hdr) + .75rem);max-height:calc(100dvh - var(--hdr) - 2rem);overflow:auto;padding:1.25rem;background:var(--surface);border-radius:var(--r-l);box-shadow:var(--shadow-s),var(--edge)}
.toc summary{list-style:none;cursor:default;font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-bottom:.625rem}
.toc summary::-webkit-details-marker{display:none}
.toc nav{counter-reset:t}
.toc a{display:block;padding:.4375rem .625rem;border-radius:.625rem;font-size:.84rem;color:var(--ink-2);text-decoration:none;transition:color .16s,background-color .16s}
.toc a::before{counter-increment:t;content:counter(t) ".";display:inline-block;min-width:1.7em;color:var(--ink-3);font-variant-numeric:tabular-nums}
@media (hover:hover){.toc a:hover{background:var(--bg-2);color:var(--ink)}}
.toc a[aria-current="true"]{background:var(--bg-2);color:var(--ink);font-weight:600}
.toc a[aria-current="true"]::before{color:var(--blue)}
.doc{counter-reset:s;min-width:0;background:var(--surface);border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,3.5rem);box-shadow:var(--shadow-s),var(--edge)}
.doc section{counter-increment:s;padding-top:clamp(1.625rem,3.6vw,2.5rem);margin-top:clamp(1.625rem,3.6vw,2.5rem);border-top:1px solid var(--line)}
.doc section:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h2{font-weight:600;letter-spacing:-.02em;word-spacing:.04em;line-height:1.14;font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.875rem;text-wrap:balance}
.doc h2::before{content:counter(s);display:inline-grid;place-items:center;width:1.9em;height:1.9em;margin-right:.6em;border-radius:.625rem;background:var(--grad-brand);color:#fff;font-size:.72em;font-weight:600;vertical-align:.12em}
.doc h3{font-weight:600;letter-spacing:-.015em;font-size:1rem;margin:1.375rem 0 .5rem}
.doc p,.doc li{max-width:68ch;text-wrap:pretty}
.doc p+p{margin-top:.75rem}
.doc ul,.doc ol{margin:.75rem 0;display:grid;gap:.5rem}
.doc ul li{position:relative;padding-left:1.375rem}
.doc ul li::before{content:"";position:absolute;left:2px;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--grad-brand)}
.doc ol{counter-reset:n}
.doc ol li{position:relative;padding-left:1.875rem;counter-increment:n}
.doc ol li::before{content:counter(n);position:absolute;left:0;top:0;font-weight:700;color:var(--blue)}
.doc a{color:var(--blue);text-underline-offset:.1875rem}
.doc mark.ph{background:#ffe066;color:#3a2a00;padding:1px .375rem;border-radius:.375rem;font-weight:600}
.doc strong{font-weight:600}
.doc .nota{margin:1.125rem 0;padding:.875rem 1.125rem;background:var(--bg);border-radius:var(--r-m)}
.doc .nota p{font-size:.9rem;color:var(--ink-2);margin:0}
.doc .tabla{width:100%;border-collapse:collapse;margin:1rem 0 1.375rem;font-size:.9rem}
.doc .tabla th,.doc .tabla td{text-align:left;padding:.6875rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
.doc .tabla th{color:var(--ink-3);font-weight:600;font-size:.78rem}
.doc .tabla td{color:var(--ink-2);line-height:1.55}
@media (max-width:900px){
  .doc-grid{grid-template-columns:1fr}
  .toc{position:static;max-height:none;padding:.875rem 1rem}
  .toc summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0;padding:.375rem 0}
  .toc summary::after{content:"+";font-size:1.3rem;font-weight:400;line-height:1}
  .toc[open] summary::after{content:"\2212"}
  .toc nav{display:grid;padding-top:.375rem}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}