/* ══════════════════════════════════════════════════════════════ FONTS (OFL) ══
   Inter — (c) 2016 The Inter Project Authors. github.com/rsms/inter
   IBM Plex Mono — (c) 2017 IBM Corp. github.com/IBM/plex   Ver fonts/NOTICE.txt */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  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:'Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/plexmono-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2212}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/plexmono-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+2122,U+2212}

*{margin:0;padding:0;box-sizing:border-box}

/* ══════════════════════════════════════════════════════════════════ TOKENS ══
   Monocromo estricto. No hay color de acento: el acento ES la inversión.
   Todos los componentes usan los nombres genéricos, así que agregar la clase
   .light a una sección invierte la sección entera sin CSS duplicado.          */
:root{
  --bg:#0A0A0A;
  --fg:#FFFFFF;
  --txt:#B2B2B2;
  --mut:#767676;
  --line:rgba(255,255,255,.13);
  --line2:rgba(255,255,255,.30);
  --surf:rgba(255,255,255,.025);
  --surf2:rgba(255,255,255,.055);
  --danger:#EF4444;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --grid:26px;
}
.light{
  --bg:#FAFAFA;
  --fg:#000000;
  --txt:#3A3A3A;
  --mut:#6C6C6C;
  --line:rgba(0,0,0,.13);
  --line2:rgba(0,0,0,.28);
  --surf:rgba(0,0,0,.018);
  --surf2:rgba(0,0,0,.045);
  background:var(--bg);
  color:var(--txt);
}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4{color:var(--fg);font-weight:700;letter-spacing:-.028em;line-height:1.06}
a{color:var(--fg)}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-radius:0}

.skip{position:absolute;left:-9999px;top:0;z-index:3000;background:var(--fg);color:var(--bg);
  padding:.75rem 1.25rem;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ═══════════════════════════════════════════════════════ PAPEL MILIMETRADO ══
   Dos tramas superpuestas, en el color de línea del tema. Invierte solo.     */
.paper{position:relative;isolation:isolate}
.paper::before,.paper::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.paper::before{
  background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line) 1px,transparent 1px);
  background-size:var(--grid) var(--grid);opacity:.5}
.paper::after{
  background-image:linear-gradient(to right,var(--line2) 1px,transparent 1px),
                   linear-gradient(to bottom,var(--line2) 1px,transparent 1px);
  background-size:calc(var(--grid) * 5) calc(var(--grid) * 5);opacity:.35}
.paper:not(.fade)::before{opacity:.30}
.paper:not(.fade)::after{opacity:.20}
.paper.fade::before,.paper.fade::after{
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 42% 32%,#000 18%,transparent 82%);
  mask-image:radial-gradient(ellipse 95% 75% at 42% 32%,#000 18%,transparent 82%)}

/* ════════════════════════════════════════════════════════════════ LAYOUT ══ */
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
.narrow{max-width:900px;margin:0 auto}
section{padding:clamp(4.5rem,9vw,8rem) 0;position:relative}
.hairline{border-top:1px solid var(--line)}

/* ══════════════════════════════════════════════════════════════ MONO BITS ══ */
.mono{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tag{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);
  padding:.42rem .75rem;border:1px solid var(--line2);background:var(--surf)}
/* El rojo es el único color del sitio, y es funcional: estado y error. */
.tag.warn{color:var(--danger);border-color:rgba(239,68,68,.42);background:rgba(239,68,68,.07)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.22}}

.shead{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.5rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line2)}
.shead .num{font-family:var(--mono);font-size:.75rem;color:var(--fg);letter-spacing:.1em;flex:0 0 auto}
.shead .label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);flex:0 0 auto}
.shead .rule{flex:1 1 auto;height:1px;background:var(--line);align-self:center}

h2.big{font-size:clamp(1.9rem,4.4vw,3.25rem);margin-bottom:1rem;letter-spacing:-.034em}
h2.big em{font-style:italic;font-weight:700}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--mut);max-width:62ch}

/* ════════════════════════════════════════════════════════════════ BOTONES ══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.4rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;text-decoration:none;cursor:pointer;
  border:1px solid var(--fg);border-radius:0;transition:all .16s ease;white-space:nowrap}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-primary:hover{background:var(--bg);color:var(--fg)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn-ghost:hover{border-color:var(--fg)}
.btn[aria-busy="true"]{opacity:.5;pointer-events:none}
.btn .arrow{transition:transform .16s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ═══════════════════════════════════════════════════════════════════ NAV ══ */
/* OJO: selector de elemento acotado a `body > nav`. La barra del sitio es el único
   nav hijo directo de body; los <nav class="crumb"> y <nav class="toc"> viven dentro
   de <main> y NO deben heredar position:fixed. Con el selector `nav` suelto, el índice
   del artículo se fijaba arriba a todo el ancho y tapaba la barra. */
body > nav{position:fixed;inset:0 0 auto 0;z-index:1000;background:rgba(10,10,10,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .25s ease}
body > nav.solid{background:rgba(10,10,10,.96)}
/* Cinturón y tirantes: cualquier nav dentro del contenido es flujo normal. */
main nav{position:static;background:none;backdrop-filter:none;border:0;z-index:auto}
.nav-in{max-width:1240px;margin:0 auto;padding:.9rem clamp(1.25rem,4vw,2.5rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff}
.brand svg{width:24px;height:24px;flex:0 0 auto}
.brand b{font-size:1.02rem;font-weight:800;letter-spacing:-.03em}
.brand span{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:#767676;
  padding-left:.6rem;margin-left:.2rem;border-left:1px solid rgba(255,255,255,.3)}

/* Links del nav. El sitio tiene 14 páginas: sin esto no hay forma de encontrarlas. */
.nav-links{display:flex;align-items:center;gap:1.5rem;margin-left:auto;margin-right:1.5rem}
.nav-links a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:#9A9A9A;text-decoration:none;transition:color .16s;white-space:nowrap}
.nav-links a:hover{color:#fff}

/* ══════════════════════════════════════════════════════════════════ HERO ══ */
.hero{min-height:min(100svh,880px);display:flex;align-items:center;padding-top:7rem;padding-bottom:4rem}
.hero-in{width:100%}
.hero h1{font-size:clamp(2.6rem,8vw,5.8rem);font-weight:800;letter-spacing:-.05em;
  line-height:.95;margin:1.6rem 0 1.4rem}
/* La segunda línea invierte: bloque blanco, texto negro. Ese es "el acento". */
.hero h1 .l2{display:inline-block;background:var(--fg);color:var(--bg);padding:0 .18em .06em}
.hero p.sub{font-size:clamp(1.05rem,1.9vw,1.34rem);color:var(--txt);max-width:56ch;margin-bottom:2.4rem}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:3.5rem}

.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line2);background:var(--surf)}
.readout{padding:1.4rem 1.5rem;border-right:1px solid var(--line);position:relative}
.readout:last-child{border-right:0}
.readout .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.6rem}
.readout .v{font-size:clamp(1.65rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.035em;
  color:var(--fg);line-height:1;display:block}
.readout .n{font-family:var(--mono);font-size:.6875rem;color:var(--mut);margin-top:.5rem;display:block}
.readout::before{content:'';position:absolute;top:0;left:0;width:9px;height:9px;
  border-top:1px solid var(--fg);border-left:1px solid var(--fg)}

/* ══════════════════════════════════════════════════════ TABLA COMPARATIVA ══ */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;margin-top:1rem}
.spec caption{text-align:left;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);padding-bottom:.9rem}
.spec th,.spec td{padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);font-weight:500;white-space:nowrap;
  border-bottom:1px solid var(--line2)}
.spec thead th.ours{color:var(--fg)}
.spec tbody th{font-weight:600;color:var(--fg);width:26%}
.spec td.bad{color:var(--mut)}
.spec td.good{color:var(--fg);background:var(--surf2);font-weight:500}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.tablescroll{overflow-x:auto;border:1px solid var(--line2);background:var(--surf);
  padding:1.25rem clamp(.5rem,2vw,1.25rem)}

/* ═════════════════════════════════════════════════════════════ EL SISTEMA ══ */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line2)}
.phase{background:var(--bg);padding:1.6rem 1.4rem;position:relative;transition:background .18s}
.phase:hover{background:var(--surf2)}
.phase .pn{font-family:var(--mono);font-size:.75rem;color:var(--fg);letter-spacing:.1em;display:block;margin-bottom:.9rem}
.phase h3{font-size:1.08rem;margin-bottom:.7rem;letter-spacing:-.02em}
.phase p{font-size:.875rem;color:var(--mut);line-height:1.6;margin-bottom:1rem}
.phase ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}
.phase li{font-family:var(--mono);font-size:.6875rem;color:var(--txt);letter-spacing:.03em;
  padding-left:.9rem;position:relative}
.phase li::before{content:'';position:absolute;left:0;top:.5em;width:5px;height:1px;background:var(--fg)}
/* Grilla de roles: 5 columnas porque son 10 tarjetas y 10 divide exacto por 5 y
   por 2. Con las 4 columnas de .phases la última fila quedaba con dos celdas
   vacías, y como el contenedor pinta var(--line) de fondo, ese hueco se ve como
   un bloque sólido, no como espacio. Los breakpoints de abajo también dividen 10. */
.rolegrid{grid-template-columns:repeat(5,1fr)}
.rolegrid .phase{padding:1.35rem 1.1rem}
.rolegrid .phase h3{font-size:1rem}
.rolegrid .phase p{font-size:.8125rem;margin-bottom:.8rem}
.rolek{font-size:.625rem!important;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg)!important;margin-bottom:.6rem!important}

.dim{margin-top:1.1rem;display:flex;align-items:center;gap:.75rem;color:var(--mut)}
.dim .bar{flex:1 1 auto;height:1px;background:var(--line2);position:relative}
.dim .bar::before,.dim .bar::after{content:'';position:absolute;top:-4px;width:1px;height:9px;background:var(--line2)}
.dim .bar::before{left:0}
.dim .bar::after{right:0}
.dim .val{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;color:var(--fg);white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════ VERTICALES ══ */
.vgroup{margin-top:2.5rem}
.vgroup > .gh{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.vgroup > .gh h3{font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.vgroup > .gh .rule{flex:1 1 auto;height:1px;background:var(--line2)}
.vgroup > .gh .note{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line2)}
.vcard{background:var(--bg);padding:1.35rem 1.25rem;transition:background .18s}
.vcard:hover{background:var(--surf2)}
.vcard svg{width:24px;height:24px;color:var(--fg);margin-bottom:.9rem;display:block}
.vcard h4{font-size:.95rem;margin-bottom:.45rem;letter-spacing:-.015em}
.vcard p{font-size:.8125rem;color:var(--mut);line-height:1.55}

/* ═════════════════════════════════════════════════════════ INSTRUMENTACIÓN ══ */
.panel{border:1px solid var(--line2);background:var(--surf)}
.panel-bar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--line);background:var(--surf2)}
.panel-bar .t{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.panel-bar .live{margin-left:auto;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--fg);display:flex;align-items:center;gap:.4rem}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line)}
.metric{background:var(--bg);padding:1.25rem 1.15rem}
.metric .k{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.55rem}
.metric .v{font-size:1.6rem;font-weight:700;color:var(--fg);letter-spacing:-.03em;line-height:1}
.metric .d{font-family:var(--mono);font-size:.6875rem;margin-top:.5rem;display:block;color:var(--mut)}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:.75rem}
.spark i{flex:1;background:var(--fg);opacity:.28}
.spark i:last-child{opacity:.9}

/* ═══════════════════════════════════════════════════════════════════ PRUEBA ══ */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.25rem;margin-top:.5rem}
.case{border:1px solid var(--line2);background:var(--surf);padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;transition:background .18s}
.case:hover{background:var(--surf2)}
.case .ch{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg);padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.case blockquote{font-size:.95rem;line-height:1.65;color:var(--txt)}
.case figcaption{font-family:var(--mono);font-size:.6875rem;color:var(--mut);
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.case figcaption b{color:var(--fg);font-weight:500;display:block;letter-spacing:.02em}

/* ═════════════════════════════════════════════════════════════════ ACCESO ══ */
.access{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.gate{border:1px solid var(--line2);background:var(--surf);padding:1.5rem}
.gate h3{font-size:1rem;margin-bottom:1rem}
.gate ul{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.gate li{font-size:.875rem;color:var(--mut);padding-left:1.6rem;position:relative;line-height:1.55}
.gate li b{color:var(--fg);font-weight:600}
.gate li::before{content:'';position:absolute;left:.15rem;top:.5em;width:8px;height:8px;
  border:1px solid var(--fg)}

/* ══════════════════════════════════════════════════════════════════ FORM ══ */
.form-shell{border:1px solid var(--line2);background:var(--surf);padding:clamp(1.25rem,3vw,1.85rem)}
.form-shell > .fh{display:flex;align-items:center;gap:.75rem;margin-bottom:1.4rem;
  padding-bottom:1rem;border-bottom:1px solid var(--line2)}
.form-shell > .fh .t{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.field{margin-bottom:.9rem}
.field label{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);margin-bottom:.45rem}
.field input,.field select,.field textarea{width:100%;padding:.8rem .9rem;font:inherit;font-size:.95rem;
  color:var(--fg);background:var(--bg);border:1px solid var(--line2);border-radius:0;
  transition:border-color .15s}
/* El textarea es el único campo que el usuario puede agrandar, y solo en vertical:
   el resize horizontal rompe la grilla del form. */
.field textarea{resize:vertical;min-height:7.5rem;line-height:1.6;font-size:.9rem}
.field textarea:focus{outline:none;border-color:var(--fg)}
.field textarea::placeholder{color:#5A5A5A}
.field[data-invalid="true"] textarea{border-color:var(--danger)}
/* "optional" al lado del label, para no obligar a leer el asterisco. */
.field label .opt{font-size:.9em;letter-spacing:.08em;color:#5A5A5A;text-transform:none}
.fhint{font-family:var(--mono);font-size:.6875rem;line-height:1.5;color:var(--mut);
  margin:-.35rem 0 .9rem}
.field select{appearance:none;cursor:pointer;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%23767676' stroke-width='1.6'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.field select option,.field select optgroup{background:#161616;color:#fff}
.field input:focus,.field select:focus{outline:none;border-color:var(--fg)}
.field input::placeholder{color:#5A5A5A}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--danger)}
.field-error{font-family:var(--mono);font-size:.6875rem;color:var(--danger);margin-top:.35rem}
.field-error:empty{display:none}

.consent{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-start;margin:1.1rem 0 .4rem;
  padding:.9rem 1rem;background:var(--bg);border:1px solid var(--line)}
/* El error del checkbox obligatorio va en su propia línea, no apretado al lado
   del cuadrito. Necesita flex-basis completo porque .consent es flex. */
.consent .field-error{flex:0 0 100%;margin-top:0}
.consent[data-invalid="true"]{border-color:var(--danger)}
.consent input[type=checkbox]{appearance:none;flex:0 0 auto;width:18px;height:18px;margin-top:.15rem;
  cursor:pointer;background:transparent;border:1px solid var(--line2);border-radius:0;
  transition:background .15s,border-color .15s}
.consent input[type=checkbox]:checked{background:var(--fg);border-color:var(--fg)}
.consent input[type=checkbox]:checked::after{content:'';display:block;width:5px;height:10px;
  margin:1px auto 0;border:solid var(--bg);border-width:0 2px 2px 0;transform:rotate(45deg)}
.consent label{font-size:.7rem;line-height:1.6;color:var(--mut);cursor:pointer;margin:0}
.consent label strong{color:var(--txt);font-weight:600}
.linkb{background:none;border:none;padding:0;font:inherit;color:var(--fg);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}

.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.submit{width:100%;margin-top:.6rem;padding:1rem 1.4rem;font-size:.8125rem}
.fnote{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--mut);
  margin-top:.9rem;text-align:center;line-height:1.7}
.form-status{margin-top:.9rem;padding:.8rem 1rem;font-size:.8125rem;
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.4);color:#FFB4B4}
.form-status:empty{display:none}
/* Éxito: se invierte en vez de ponerse verde. Es el momento más importante
   del sitio, y la inversión pega más fuerte que un color. */
.ok-panel{background:var(--fg);color:var(--bg);padding:2.5rem 1.75rem;text-align:center}
.ok-panel .mk{width:40px;height:40px;margin:0 auto 1.1rem;border:1px solid currentColor;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.05rem}
.ok-panel h3{font-size:1.2rem;margin-bottom:.6rem;color:inherit}
.ok-panel p{font-size:.9rem;opacity:.72}
[hidden]{display:none!important}

/* ═════════════════════════════════════════════════════════════════════ FAQ ══ */
.faq{border:1px solid var(--line2);background:var(--surf)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:1.15rem 1.35rem;cursor:pointer;list-style:none;display:flex;
  align-items:flex-start;gap:1rem;font-weight:500;color:var(--fg);font-size:.95rem;transition:background .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surf2)}
.faq summary .q{font-family:var(--mono);font-size:.6875rem;color:var(--mut);flex:0 0 auto;padding-top:.15rem}
.faq summary .ic{margin-left:auto;flex:0 0 auto;width:11px;height:11px;position:relative;margin-top:.35rem}
.faq summary .ic::before,.faq summary .ic::after{content:'';position:absolute;background:var(--fg);transition:transform .2s ease}
.faq summary .ic::before{top:5px;left:0;width:11px;height:1px}
.faq summary .ic::after{left:5px;top:0;width:1px;height:11px}
.faq details[open] summary .ic::after{transform:scaleY(0)}
.faq details > div{padding:0 1.35rem 1.35rem 3.4rem;font-size:.9rem;color:var(--mut);line-height:1.7}

/* ══════════════════════════════════════════════════════════════════ FOOTER ══ */
footer{border-top:1px solid var(--line2);padding:3rem 0 2rem;background:var(--bg)}
.tblock{display:grid;grid-template-columns:1.5fr 1.1fr 1.1fr .8fr;gap:1px;background:var(--line);
  border:1px solid var(--line2);margin-bottom:2rem}
.tcell{background:var(--bg);padding:1.4rem 1.35rem}
.tcell .k{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);display:block;margin-bottom:.8rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.tcell p,.tcell address{font-size:.8125rem;color:var(--mut);font-style:normal;line-height:1.7}
.tcell b{color:var(--fg);font-weight:600}
.flinks{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.flinks a,.flinks button{color:var(--mut);text-decoration:none;font-size:.8125rem;
  font-family:inherit;background:none;border:none;padding:0;cursor:pointer;text-align:left}
.flinks a:hover,.flinks button:hover{color:var(--fg)}
.flinks a b{color:var(--fg);font-weight:600}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.fbot p{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--mut)}
.social{display:flex;gap:.5rem}
.social a{width:32px;height:32px;border:1px solid var(--line2);display:flex;
  align-items:center;justify-content:center;color:var(--mut);transition:all .16s}
.social a:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}

/* ═══════════════════════════════════════════════════════════════════ MODAL ══ */
.modal{display:none;position:fixed;inset:0;z-index:2000;padding:1.5rem;
  background:rgba(0,0,0,.88);backdrop-filter:blur(5px);overflow-y:auto}
.modal.active{display:flex;align-items:flex-start;justify-content:center}
.modal-box{background:#0F0F0F;border:1px solid rgba(255,255,255,.3);max-width:800px;width:100%;
  margin:2rem auto;max-height:86vh;overflow-y:auto}
.modal-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.35rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.13);position:sticky;top:0;
  background:#0F0F0F;z-index:1}
.modal-top h2{font-size:1.15rem;color:#fff}
.modal-x{width:32px;height:32px;border:1px solid rgba(255,255,255,.3);background:none;
  cursor:pointer;color:#767676;font-size:1.1rem;line-height:1;flex:0 0 auto}
.modal-x:hover{color:#000;background:#fff;border-color:#fff}
.modal-body{padding:1.6rem}
.modal-body h3{font-size:.95rem;margin:1.75rem 0 .7rem;color:#fff}
.modal-body h4{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin:1.15rem 0 .5rem}
.modal-body p{font-size:.875rem;color:#9A9A9A;line-height:1.75;margin-bottom:.9rem}
.modal-body ul{margin:.75rem 0 .9rem 1.25rem;color:#9A9A9A;font-size:.875rem}
.modal-body li{margin-bottom:.4rem;line-height:1.65}
.modal-body a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* ══════════════════════════════════════════════════════════════════ REVEAL ══
   Scroll-driven en CSS, sin JS. Deliberadamente NO parte de opacity:0: si el
   navegador no soporta animation-timeline, o si app.js no cargara, el contenido
   se ve igual. Un reveal atado a JS convierte una falla de red en página vacía. */
.reveal{opacity:1}
@supports (animation-timeline:view()){
  .reveal{animation:revealIn linear both;animation-timeline:view();animation-range:entry 5% entry 55%}
}
@keyframes revealIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none!important;opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════════════════ RESPONSIVE ══ */
/* Cinco columnas solo cuando hay ancho de sobra; entre 1000 y 1180 quedaban
   demasiado angostas para las viñetas. */
@media (max-width:1180px){
  .rolegrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .phases{grid-template-columns:repeat(2,1fr)}
  .access{grid-template-columns:1fr;gap:2rem}
  .tblock{grid-template-columns:1fr 1fr}
  .nav-links{gap:1.1rem;margin-right:1.1rem}
  .hide-sm{display:none}
}
@media (max-width:760px){
  .tblock{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--grid:20px}
  .readouts{grid-template-columns:1fr}
  .readout{border-right:0;border-bottom:1px solid var(--line)}
  .readout:last-child{border-bottom:0}
  .phases{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr;gap:0}
  .hero-cta .btn{width:100%}
  .brand span{display:none}
  /* Sin esto la barra mide 473px en un viewport de 375 y el CTA queda fuera de
     pantalla. Verificado midiendo .nav-in.scrollWidth en un iPhone de 375px. */
  .hide-xs{display:none}
  .nav-links{gap:.9rem;margin-right:.75rem}
  .nav-links a{font-size:.625rem;letter-spacing:.08em}
  .faq details > div{padding-left:1.35rem}
  .hero h1 .l2{padding:0 .12em .04em}

  /* La tabla comparativa se apila. Con scroll horizontal la columna "Owned
     system" — que ES el argumento de la sección — quedaba fuera de pantalla.
     Apilada, cada fila muestra las dos respuestas una debajo de la otra. */
  .tablescroll{overflow-x:visible;border:0;background:none;padding:0}
  .spec thead{display:none}
  .spec,.spec tbody,.spec tr,.spec th,.spec td{display:block;width:auto}
  /* .spec tbody th tiene width:26% en desktop y gana por especificidad: hay que
     reponerlo acá o el encabezado de fila queda a una palabra por línea. */
  .spec tbody th{width:auto}
  .spec caption{display:block;width:auto;padding-bottom:1rem}
  .spec tbody tr{border:1px solid var(--line2);margin-bottom:.85rem}
  .spec tbody tr:last-child{margin-bottom:0}
  .spec tbody th{font-size:1rem;padding:.95rem 1rem .3rem;border-bottom:0}
  .spec tbody td{padding:.45rem 1rem .85rem;border-bottom:0}
  .spec tbody td::before{content:attr(data-label);display:block;font-family:var(--mono);
    font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);
    margin-bottom:.25rem}
  .spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
}

/* ══════════════════════════════════════════════ PÁGINAS DE VERTICAL ══
   Componentes que solo usan /slug/index.html. Viven en el mismo archivo
   porque son ~2 KB y ahorran una request en 9 páginas.                 */

.crumb{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:1.5rem}
.crumb a{color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--fg)}
.crumb span[aria-hidden]{padding:0 .4rem;opacity:.5}

.narrow-left{max-width:74ch;margin-top:2.25rem}

/* Lista de dolor: cada ítem es una frase que el lector ya se dijo a sí mismo.
   La marca es una cruz, no un check: son cosas que están mal. */
ul.pain,ul.get,ul.notfor{list-style:none;display:flex;flex-direction:column}
ul.pain{gap:0;border-top:1px solid var(--line)}
ul.pain li{position:relative;padding:1rem 0 1rem 2.4rem;border-bottom:1px solid var(--line);
  font-size:clamp(1rem,1.5vw,1.1rem);color:var(--fg);font-weight:500;line-height:1.55}
ul.pain li::before{content:'';position:absolute;left:.35rem;top:1.5em;width:11px;height:1px;
  background:var(--danger);transform:rotate(45deg)}
ul.pain li::after{content:'';position:absolute;left:.35rem;top:1.5em;width:11px;height:1px;
  background:var(--danger);transform:rotate(-45deg)}

/* Lo que se entrega: marca de cota, igual que el resto del sistema. */
ul.get{gap:.85rem}
ul.get li{position:relative;padding-left:2rem;font-size:.98rem;color:var(--txt);line-height:1.6}
ul.get li::before{content:'';position:absolute;left:0;top:.55em;width:10px;height:10px;
  border-left:1px solid var(--fg);border-bottom:1px solid var(--fg)}

/* Admisión dañina: bloques, no bullets. Cada uno es un párrafo con peso. */
ul.notfor{gap:1rem}
ul.notfor li{border:1px solid var(--line2);padding:1.1rem 1.25rem;font-size:.92rem;
  color:var(--mut);line-height:1.65;position:relative}
ul.notfor li::before{content:'';position:absolute;top:0;left:0;width:9px;height:9px;
  border-top:1px solid var(--danger);border-left:1px solid var(--danger)}

.riskrev{margin-top:1.5rem;padding:1.25rem 1.35rem;background:var(--fg);color:var(--bg);
  font-size:.95rem;line-height:1.6}
.riskrev b{font-weight:700}

@media (max-width:640px){
  ul.pain li{padding-left:2rem;font-size:.98rem}
  .narrow-left{margin-top:1.75rem}
}

/* La vcard de la home es un link a su página de vertical. */
a.vcard{text-decoration:none;display:block;color:inherit}
a.vcard .vgo{display:block;margin-top:.8rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut);transition:color .18s}
a.vcard:hover .vgo{color:var(--fg)}
a.vcard:hover h4{text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════ BLOG (/insights/) ══ */

.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}
.pcard{border:1px solid var(--line2);background:var(--surf);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:background .18s}
.pcard:hover{background:var(--surf2)}
.pcard img{width:100%;height:190px;object-fit:cover;display:block;filter:grayscale(1) contrast(1.08)}
.pc-body{padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.pc-body h3{font-size:1.08rem;letter-spacing:-.02em;line-height:1.25}
.pc-body p{font-size:.85rem;color:var(--mut);line-height:1.6}
.pcard:hover h3{text-decoration:underline;text-underline-offset:3px}
.pc-body .vgo{margin-top:auto;padding-top:.6rem;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pcard:hover .vgo{color:var(--fg)}

.post-head{padding:9rem 0 2.5rem}
.post-meta{margin-bottom:1.1rem}
.post-head h1{font-size:clamp(1.95rem,4.6vw,3.15rem);letter-spacing:-.035em;line-height:1.06;
  margin-bottom:1.25rem}
.post-head .dek{font-size:clamp(1.02rem,1.7vw,1.24rem);color:var(--txt);line-height:1.6;max-width:60ch}
.post-cover{margin:0 0 3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.post-cover img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06)}

.post-body{padding-bottom:5rem}
.post-body h2{font-size:clamp(1.3rem,2.4vw,1.72rem);letter-spacing:-.025em;
  margin:3rem 0 1rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.post-body p{font-size:1.02rem;line-height:1.75;margin-bottom:1.15rem;color:var(--txt)}
.post-body p b,.post-body li b{color:var(--fg);font-weight:600}
.post-body em{font-style:italic}
.post-body ol,.post-body ul{margin:0 0 1.35rem 1.4rem;color:var(--txt)}
.post-body li{font-size:1.02rem;line-height:1.7;margin-bottom:.7rem}
/* :not(.btn) es obligatorio. Sin eso esta regla le gana por especificidad a
   .btn-primary{color:var(--bg)} y el CTA queda blanco sobre blanco: invisible.
   Misma clase de bug que el selector `nav` suelto — un descendiente amplio
   pisando un componente. */
.post-body a:not(.btn){color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.toc{border:1px solid var(--line2)!important;padding:1.15rem 1.35rem;margin-bottom:.5rem;
  background:var(--surf)!important}
.toc p{margin-bottom:.7rem}
.toc ol{margin:0 0 0 1.2rem;color:var(--mut)}
.toc li{font-size:.9rem;margin-bottom:.35rem;line-height:1.5}
.toc a{color:var(--mut);text-decoration:none}
.toc a:hover{color:var(--fg);text-decoration:underline}

.keys{margin-top:3rem;padding:1.5rem 1.6rem;background:var(--fg);color:var(--bg)}
.keys p.mono{color:var(--bg);opacity:.6;margin-bottom:1rem}
.keys ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:.75rem}
.keys li{font-size:.98rem;line-height:1.6;padding-left:1.5rem;position:relative;color:var(--bg)}
.keys li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor}

.srcs{margin-top:2.5rem;border:1px solid var(--line);padding:1.35rem 1.5rem}
.srcs ol{margin:.9rem 0 0 1.2rem;color:var(--mut)}
.srcs li{font-size:.85rem;line-height:1.6;margin-bottom:.5rem}
.srcs a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.srcs a:hover{color:var(--fg)}
.srcs .disclaimer{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--mut);line-height:1.6}

.postcta{margin-top:3rem;border:1px solid var(--line2);padding:1.9rem 1.75rem;background:var(--surf)}
.postcta h2{font-size:1.35rem;margin:0 0 .7rem;padding:0;border:0;letter-spacing:-.025em}
.postcta p{font-size:.95rem;color:var(--mut);margin-bottom:1.35rem;line-height:1.65}

@media (max-width:640px){
  .post-head{padding:7.5rem 0 2rem}
  .post-body h2{margin-top:2.25rem}
  .keys,.postcta{padding:1.35rem 1.25rem}
}

/* ─────────────────── índice del blog: nota destacada + bloques por sección ── */
.pgrid.feature{grid-template-columns:1fr;margin-bottom:3rem}
.pcard.feat{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
.pcard.feat img{height:100%;min-height:300px}
.pcard.feat .pc-body{padding:2rem 2.1rem;justify-content:center;gap:.8rem}
.pcard.feat h3{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12}
.pcard.feat .pc-body p{font-size:.98rem}
.catblock{margin-top:3rem}
.catblock > .gh{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem}
.catblock > .gh h3{font-size:1rem;letter-spacing:-.02em;white-space:nowrap}
.catblock > .gh .rule{flex:1 1 auto;height:1px;background:var(--line2)}
.catblock > .gh .note{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);white-space:nowrap}
@media (max-width:820px){
  .pcard.feat{grid-template-columns:1fr}
  .pcard.feat img{min-height:200px;height:200px}
  .pcard.feat .pc-body{padding:1.35rem 1.35rem}
}


/* ─────────────────────────────────────────────────────────────────────────────
   Última palabra sobre el color de los botones. Va al final del archivo a
   propósito: cualquier regla de tipografía de contenido que herede `a` no debe
   poder invertir el contraste de un CTA. */
a.btn-primary,a.btn-primary:hover,a.btn-primary:visited{text-decoration:none}
a.btn-primary{background:var(--fg);color:var(--bg)}
a.btn-primary:hover{background:var(--bg);color:var(--fg)}
a.btn-ghost{text-decoration:none;color:var(--fg)}

/* Nota sin venta: se distingue visualmente del CTA comercial. */
.postcta.nosell{background:none;border-style:dashed}
.postcta.nosell h2{font-size:1.1rem}

/* ══════════════════════════════════════════════ BANDA DE RECURSO GRATUITO ══
   Invertida (papel sobre tinta) para que se lea como un aparte y no como otra
   sección del pitch. Vive fuera de la numeración 01–07 a propósito.          */
.toolband{background:var(--fg);color:#0A0A0A;padding:clamp(3.5rem,7vw,5.5rem) 0;
  border-top:1px solid var(--fg);border-bottom:1px solid var(--fg)}
.tb-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.tb-tag{display:inline-flex;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:#0A0A0A;border:1px solid rgba(0,0,0,.28);
  padding:.42rem .75rem;margin-bottom:1.4rem}
.toolband h2{color:#0A0A0A;font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:-.035em;
  line-height:1.06;margin-bottom:1.1rem}
.tb-lead{font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.65;color:#333;max-width:60ch;
  margin-bottom:1.6rem}
.tb-list{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin-bottom:1.9rem}
.tb-list li{position:relative;padding-left:1.9rem;font-size:.95rem;line-height:1.6;color:#3A3A3A}
.tb-list li b{color:#0A0A0A;font-weight:600}
.tb-list li::before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;
  border-left:1px solid #0A0A0A;border-bottom:1px solid #0A0A0A}
.tb-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem}
a.tb-btn{background:#0A0A0A;color:var(--fg);border-color:#0A0A0A;text-decoration:none}
a.tb-btn:hover{background:#2A2A2A;border-color:#2A2A2A;color:var(--fg)}
a.tb-ghost{background:transparent;color:#0A0A0A;border-color:rgba(0,0,0,.32);text-decoration:none}
a.tb-ghost:hover{border-color:#0A0A0A;background:rgba(0,0,0,.04);color:#0A0A0A}
.tb-note{font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:#5A5A5A}

.tb-panel{border:1px solid rgba(0,0,0,.22);padding:1.35rem 1.4rem;background:rgba(0,0,0,.025)}
.tb-panel-h,.tb-panel-f{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:#5A5A5A}
.tb-panel-h{padding-bottom:.9rem;margin-bottom:.4rem;border-bottom:1px solid rgba(0,0,0,.14)}
.tb-panel-f{padding-top:1rem;margin-top:.6rem;border-top:1px solid rgba(0,0,0,.14);line-height:1.7}
.tb-table{width:100%;border-collapse:collapse;font-size:.85rem}
.tb-table th,.tb-table td{padding:.7rem .1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(0,0,0,.1)}
.tb-table th{font-weight:400;color:#6C6C6C;width:52%;padding-right:.9rem}
.tb-table td{color:#0A0A0A;font-weight:500}
.tb-table tr:last-child th,.tb-table tr:last-child td{border-bottom:0}

@media (max-width:900px){
  .tb-grid{grid-template-columns:1fr}
  .tb-cta .btn{width:100%}
}