/* ==========================================================================
   visiteka.com — landing
   Mundo visual: hoja de plano de arquitecto. Papel cálido, línea de tinta a
   dos grosores, violeta como tinta de anotación, y dos secciones invertidas
   a cianotipo. Los tokens vienen del propio app (web/src/index.css): si allí
   cambia un color, aquí también.
   ========================================================================== */

:root{
  /* Paleta — idéntica a la del app */
  --ink:#12212E;
  --ink-soft:#4A5C6B;
  --paper:#F5F3EF;
  --card:#FFFFFF;
  --line:#DFDCD4;
  --brand:#664FC2;
  --brand-soft:#EFECFA;
  --mid:#C97B18;          /* reforma — relleno */
  --tax:#7E93A5;          /* impuestos — relleno */

  /* Variantes de texto: los rellenos de arriba no llegan a 4,5:1 sobre papel,
     así que la versión «-ink» es la única que puede llevar texto pequeño. */
  --mid-ink:#A05C10;      /* 4,68:1 sobre --paper */
  --tax-ink:#5A6F80;      /* 4,72:1 sobre --paper */
  --brand-lift:#A594F5;   /* 6,36:1 sobre --ink, para el cianotipo */

  --radius:14px;
  --radius-lg:20px;
  --radius-chip:8px;   /* controles pequeños: segmentado, dominios */

  /* Escala de espacio, base 4px */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;
  --sp-12:3rem;  --sp-16:4rem;  --sp-20:5rem;  --sp-28:7rem;

  /* Tipografía fluida */
  --fs-mono:  clamp(.75rem, .73rem + .10vw, .8125rem);
  --fs-sheet: clamp(.6875rem, .67rem + .08vw, .75rem);  /* solo rótulos A-0x */
  --fs-small: clamp(.8125rem,.79rem + .12vw, .875rem);
  --fs-body:  clamp(.9375rem,.90rem + .22vw, 1.0625rem);
  --fs-lede:  clamp(1.0625rem,1.00rem + .34vw,1.3125rem);
  --fs-h3:    clamp(1.25rem, 1.13rem + .60vw, 1.625rem);
  --fs-h2:    clamp(1.875rem,1.35rem + 2.3vw, 3rem);
  --fs-h1:    clamp(2.125rem,1.50rem + 2.7vw, 3.5rem);
  --fs-num:   clamp(1.75rem, 1.30rem + 2.0vw, 2.75rem);

  --wrap:76rem;
  --tap:2.75rem;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
main[id],section[id]{scroll-margin-top:5rem}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.03;
  margin:0;
  text-wrap:balance;
}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.025em;line-height:1.12}
.mod h3,.why dt{text-wrap:balance}
p{margin:0}
img,svg{max-width:100%}
img{height:auto;display:block}

/* Cifras y anotaciones: mono tabular, como en el app. */
.num,.code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.code{
  font-size:var(--fs-mono);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--sp-5)}
@media (min-width:900px){.wrap{padding-inline:var(--sp-10)}}

/* Foco visible, en tinta de anotación. */
:where(a,button,summary,details):focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px;
  border-radius:4px;
}
.close :where(a,summary):focus-visible,
.prob :where(a,summary):focus-visible{outline-color:var(--brand-lift)}

.skip{
  position:absolute;left:var(--sp-4);top:-4rem;z-index:99;
  background:var(--ink);color:#fff;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius);text-decoration:none;font-weight:500;
  transition:top .18s var(--ease);
}
.skip:focus{top:var(--sp-4)}

/* --------------------------------------------------------------------------
   Botón — tinta plena, como el primario del app. El violeta entra al pasar
   por encima: la interacción es la anotación.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:0 var(--sp-6);
  background:var(--ink);color:#fff;
  border:1px solid var(--ink);border-radius:var(--radius);
  font:500 var(--fs-small)/1 "Inter",sans-serif;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{background:var(--brand);border-color:var(--brand)}
.btn:active{transform:translateY(1px)}
.btn--lg{
  min-height:3.5rem;padding:0 var(--sp-8);
  font-size:var(--fs-body);font-weight:500;
  box-shadow:0 10px 24px -14px rgba(18,33,46,.55);
}
.btn--lg:hover{box-shadow:0 14px 30px -14px rgba(102,79,194,.6)}
.btn--inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--inv:hover{background:var(--brand-lift);border-color:var(--brand-lift);color:var(--ink)}

.micro{
  margin-top:var(--sp-4);
  font-size:var(--fs-small);color:var(--ink-soft);
}
.micro--c{text-align:center}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:var(--sp-5);min-height:4rem}
.brand{
  display:flex;align-items:center;gap:var(--sp-2);padding-block:var(--sp-2);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.0625rem;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;
}
/* El `gap` no estaba porque durante mucho tiempo aqui hubo UN solo enlace:
   al entrar «Guias» los dos salian pegados, sin ni un espacio entre ellos. */
.nav__links{margin-left:auto;display:none;gap:var(--sp-6)}
.nav__links a{
  font-size:var(--fs-small);color:var(--ink-soft);text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid transparent;
}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--brand)}
.nav .btn{margin-left:auto}
@media (min-width:700px){
  .nav__links{display:flex}
  .nav .btn{margin-left:0}
}

/* --------------------------------------------------------------------------
   Plano (héroe)
   -------------------------------------------------------------------------- */
.hero{padding-block:var(--sp-10) var(--sp-16)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10)}
@media (min-width:1000px){
  .hero{padding-block:var(--sp-8) var(--sp-20)}
  .plan{max-width:26.5rem;margin-inline:auto}
  .hero__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--sp-12);align-items:center}
}

h1{font-size:var(--fs-h1);letter-spacing:-.042em}
.h1b{display:block;color:var(--brand);text-wrap:balance}
.lede{
  margin-top:var(--sp-6);
  font-size:var(--fs-lede);line-height:1.5;color:var(--ink-soft);
  max-width:38ch;text-wrap:pretty;
}
.hero__copy .btn--lg{margin-top:var(--sp-8)}

/* La hoja: papel blanco, retícula tenue y marcas de registro en las esquinas. */
.sheet{
  position:relative;margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background-image:
    linear-gradient(to right,rgba(18,33,46,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,33,46,.045) 1px,transparent 1px);
  background-size:24px 24px;
  box-shadow:0 26px 60px -34px rgba(18,33,46,.4);
}
.sheet::before,.sheet::after{
  content:"";position:absolute;width:11px;height:11px;pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat;
}
.sheet::before{top:10px;left:10px}
.sheet::after{bottom:10px;right:10px}

.sheet__head{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  align-items:baseline;justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
}
.sheet__head .meta{font-size:var(--fs-mono);font-family:"IBM Plex Mono",monospace;color:var(--ink-soft)}
.plan-sheet__body{padding:var(--sp-5)}
@media (min-width:560px){.plan-sheet__body{padding:var(--sp-6)}}

.sheet__note{
  padding:var(--sp-3) var(--sp-5) var(--sp-4);
  border-top:1px dashed var(--line);
  font-size:var(--fs-small);line-height:1.45;color:var(--ink-soft);
}
.sheet__note b{color:var(--ink);font-weight:600}

/* — el plano — */
.plan{color:var(--ink)}
.plan svg{width:100%;height:auto;display:block}
.plan .w-ext,.plan .w-int{stroke-dasharray:var(--len,0);stroke-dashoffset:var(--len,0)}
.is-drawn .plan .w-ext,.is-drawn .plan .w-int{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.plan__swing{color:var(--ink);opacity:.28}
.plan__win rect{fill:var(--card);stroke:var(--ink);stroke-width:1.5}
.plan__labels text{
  font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  text-anchor:middle;fill:var(--ink);
}
.plan__labels .sq{font-size:14px;letter-spacing:.04em;fill:var(--ink-soft);text-transform:none}
.plan__scale{color:var(--ink-soft)}
.plan__scaletext{
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.06em;
  text-anchor:middle;fill:var(--ink-soft);
}
.plan .tint{fill:url(#trama);opacity:.24;transition:opacity .5s var(--ease)}
.is-armed .plan .tint{opacity:0}
.is-armed .plan .tint.on{opacity:.24}
/* El <g> exterior lleva el `transform` de posición; la animación va en el
   interior, porque un `transform` de CSS sustituye al del atributo y apilaría
   los cuatro marcadores en el origen del lienzo. */
.plan .mk{opacity:1;transition:opacity .3s var(--ease)}
.is-armed .plan .mk{opacity:0}
.is-armed .plan .mk.on{opacity:1}
.plan .mk__b{transform-box:fill-box;transform-origin:center}
.plan .mk circle{fill:var(--brand);stroke:var(--card);stroke-width:3}
.plan .mk text{
  font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:500;
  text-anchor:middle;fill:#fff;
}
.is-armed .plan .mk.on .mk__b{animation:pop .5s var(--ease) both}
@keyframes pop{from{transform:scale(.2)}to{transform:scale(1)}}

/* — el cuadro de coste — */
.ledger{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.ledger__row{
  display:flex;align-items:baseline;gap:var(--sp-4);
  justify-content:space-between;
  padding-block:.4375rem;
  font-size:var(--fs-small);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.ledger__t{display:flex;align-items:center;gap:var(--sp-2);color:var(--ink-soft);min-width:0}
/* Armada, la cifra se oculta —sin mover nada de sitio— hasta que hero.js la
   reescribe en el precio de partida. El HTML lleva el total verdadero, que es
   lo que ven quien no ejecuta JS y quien pide movimiento reducido. */
.is-armed .ledger__sumv{visibility:hidden}
.is-armed .is-live .ledger__sumv{visibility:visible}
.is-armed .ledger__row{opacity:0;transform:translateY(6px)}
.is-armed .ledger__row.is-on{opacity:1;transform:none}
.ledger__row:first-child .ledger__t{color:var(--ink)}
.ledger__v{white-space:nowrap;font-weight:500}
.ledger__group[data-group="reforma"] .ledger__v{color:var(--mid-ink)}
.ledger__group[data-group="impuestos"] .ledger__v{color:var(--tax-ink)}
.pin{
  flex:0 0 auto;display:grid;place-items:center;
  width:1.125rem;height:1.125rem;border-radius:50%;
  background:var(--brand);color:#fff;
  font:500 .625rem/1 "IBM Plex Mono",monospace;font-style:normal;
}
.ledger__group{border-top:1px dashed var(--line);margin-top:var(--sp-2);padding-top:var(--sp-2)}

.ledger__sum{
  display:flex;align-items:last baseline;gap:var(--sp-4);
  justify-content:space-between;flex-wrap:wrap;
  margin-top:var(--sp-4);padding-top:var(--sp-4);
  border-top:2px solid var(--ink);
}
.ledger__sumt{
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-mono);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
}
.ledger__sumv{
  font-size:var(--fs-num);font-weight:500;letter-spacing:-.03em;line-height:1;
  white-space:nowrap;
}

/* Línea de cota: los tres tramos, con marcas de extremo como en un plano. */
.dim{
  position:relative;display:flex;gap:3px;height:10px;margin-top:var(--sp-5);
}
.dim::before,.dim::after{
  content:"";position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--ink-soft);
}
.dim::before{left:-1px}
.dim::after{right:-1px}
.dim__seg{
  display:block;height:100%;border-radius:2px;
  transform-origin:left;
  transition:transform .7s var(--ease);
}
.is-armed .dim__seg{transform:scaleX(0)}
.is-armed .is-summed .dim__seg{transform:none}
.dim__seg--reforma{transition-delay:.09s}
.dim__seg--tax{transition-delay:.18s}
.dim__seg--precio{background:var(--ink);width:calc(86.4% - 2px)}
.dim__seg--reforma{background:var(--mid);width:calc(4.5% - 2px)}
.dim__seg--tax{background:var(--tax);width:calc(9.1% - 2px)}

.key{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);
  margin:var(--sp-3) 0 0;padding:0;list-style:none;
  font-size:var(--fs-mono);font-family:"IBM Plex Mono",monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.key li{display:flex;align-items:center;gap:var(--sp-2)}
.key__c{width:9px;height:9px;border-radius:2px;display:block}
.key__c--precio{background:var(--ink)}
.key__c--reforma{background:var(--mid)}
.key__c--tax{background:var(--tax)}

/* --------------------------------------------------------------------------
   El problema — cianotipo
   -------------------------------------------------------------------------- */
.prob{
  background:var(--ink);color:var(--paper);
  padding-block:var(--sp-16);
  background-image:
    linear-gradient(to right,rgba(245,243,239,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(245,243,239,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
.prob h2{max-width:18ch}
.prob__grid{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
@media (min-width:900px){
  .prob{padding-block:var(--sp-20)}
  .prob__grid{grid-template-columns:1fr minmax(20rem,26rem);gap:var(--sp-12);align-items:start}
}
.prob__body{color:rgba(245,243,239,.78);max-width:56ch;text-wrap:pretty}

.prob__gap{
  border:1px solid rgba(245,243,239,.22);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
}
.prob__gaprow{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding-block:var(--sp-3);
}
.prob__gaprow+.prob__gaprow{border-top:1px dashed rgba(245,243,239,.22)}
.prob__gapt{
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-mono);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(245,243,239,.72);
}
.prob__gapv{font-size:1.375rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.prob__gaprow--real .prob__gapv{color:var(--brand-lift);font-size:1.75rem}
.prob__gapd{
  margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px solid rgba(245,243,239,.22);
  font-size:var(--fs-small);color:rgba(245,243,239,.72);
}
.prob__gapd .num{color:var(--paper);font-weight:500}

/* --------------------------------------------------------------------------
   Cómo funciona
   -------------------------------------------------------------------------- */
.how{padding-block:var(--sp-16);border-top:1px solid var(--line)}
@media (min-width:900px){.how{padding-block:var(--sp-20)}}
.how h2{max-width:16ch}
.steps{
  display:grid;gap:var(--sp-6);
  margin:var(--sp-10) 0 0;padding:0;list-style:none;
  counter-reset:none;
}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--sp-8)}}
.step{
  position:relative;
  padding-top:var(--sp-5);
  border-top:2px solid var(--ink);
}
.step__n{
  display:block;
  font-size:1.625rem;font-weight:500;line-height:1;letter-spacing:-.02em;
  color:var(--brand);margin-bottom:var(--sp-4);
}
.step h3{margin-bottom:var(--sp-2)}
.step p{color:var(--ink-soft);font-size:var(--fs-small);text-wrap:pretty}
.how__cta{margin-top:var(--sp-12);text-align:center}
.how .micro--c{margin-top:var(--sp-3)}

/* --------------------------------------------------------------------------
   Los módulos
   -------------------------------------------------------------------------- */
.mods{padding-block:var(--sp-16);border-top:1px solid var(--line)}
@media (min-width:900px){.mods{padding-block:var(--sp-20)}}
.mods h2{max-width:16ch;margin-bottom:var(--sp-12)}

.mod{
  display:grid;gap:var(--sp-8);
  padding-block:var(--sp-10);
  border-top:1px dashed var(--line);
}
.mod:first-of-type{border-top:0;padding-top:0}
@media (min-width:900px){
  .mod{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--sp-10);align-items:center;padding-block:var(--sp-12)}
  .mod__txt{grid-column:1;grid-row:1}
  .mod .frame{grid-column:2;grid-row:1}
  .mod--flip{grid-template-columns:20rem minmax(0,1fr)}
  .mod--flip .mod__txt{grid-column:2;grid-row:1}
  .mod--flip .frame{grid-column:1;grid-row:1}
}
.mod h3{max-width:26ch}
.mod__txt>p{margin-top:var(--sp-3);color:var(--ink-soft);max-width:52ch;text-wrap:pretty}

/* — demostración: un recuadro de detalle de la hoja — */
.demo{
  position:relative;
  margin-top:var(--sp-6);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--sp-4) var(--sp-5) var(--sp-5);
  max-width:36rem;
}
.demo::after{
  content:"";position:absolute;right:9px;bottom:9px;
  width:9px;height:9px;pointer-events:none;
  background:
    linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat,
    linear-gradient(var(--line),var(--line)) center/1px 100% no-repeat;
}
.demo__foot--rng{border-top:0;margin-top:var(--sp-2);padding-top:0;text-transform:none;line-height:1.5}
.demo__head{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  align-items:center;justify-content:space-between;
  padding-bottom:var(--sp-3);margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}
.seg{
  display:inline-flex;gap:1px;background:var(--line);
  border-radius:var(--radius-chip);overflow:hidden;padding:1px;
  font:500 var(--fs-mono)/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
}
.seg>*{padding:.375rem .5rem;background:var(--card);color:var(--ink-soft)}
.seg>b{background:var(--brand);color:#fff;font-weight:500}

.checks,.lines,.rates,.split{list-style:none;margin:0;padding:0}
.checks li,.lines li,.rates li,.split li{
  display:flex;align-items:center;gap:var(--sp-4);justify-content:space-between;
  padding-block:var(--sp-3);
  font-size:var(--fs-small);
}
.checks li+li,.lines li+li,.rates li+li,.split li+li{border-top:1px solid var(--line)}
.checks span,.lines span,.rates span,.split span:last-child{color:var(--ink-soft);min-width:0}
.lines i,.rates i{font-style:normal;font-weight:500;white-space:nowrap;color:var(--ink)}
.ans{
  font-style:normal;flex:0 0 auto;
  font:500 var(--fs-mono)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  padding:.375rem .5rem;border-radius:7px;
  border:1px solid var(--line);color:var(--ink-soft);min-width:3.25rem;text-align:center;
}
.ans--bad{background:#F7E4E1;border-color:#EEC0BA;color:#8E2A1F}
.ans--good{background:#E1F0EC;border-color:#B9DDD4;color:#0F5A49}
.demo__foot{
  margin-top:var(--sp-3);padding-top:var(--sp-3);
  border-top:1px dashed var(--line);
  font-size:var(--fs-mono);font-family:"IBM Plex Mono",monospace;
  letter-spacing:.06em;color:var(--ink-soft);
}
.demo__foot--tot{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  text-transform:uppercase;
}
.demo__foot--tot b{font-size:var(--fs-small);color:var(--mid-ink);text-transform:none}
.demo__big{display:flex;align-items:baseline;gap:var(--sp-3);padding-block:var(--sp-2) var(--sp-4)}
.demo__big b{font-size:var(--fs-num);font-weight:500;letter-spacing:-.03em;line-height:1}
.demo__big span{font-size:var(--fs-small);color:var(--ink-soft)}
.split__who{
  flex:0 0 auto;
  font:500 var(--fs-mono)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);
}

/* — marco de móvil: mientras no llegue la captura, un recuadro de detalle
     pendiente, que es exactamente lo que es — */
.frame{
  position:relative;
  justify-self:center;width:min(20rem,100%);
  aspect-ratio:850/1478;   /* la proporción real de las capturas: sin recorte */
  border:1px solid var(--line);border-radius:26px;
  background:var(--card);
  padding:8px;
  box-shadow:0 24px 50px -30px rgba(18,33,46,.5);
}
.frame img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:19px}
.frame__pending{display:none}
@media (max-width:899px){
  .frame.is-pending{aspect-ratio:auto;min-height:13rem}
}
.frame.is-pending{
  border-style:dashed;border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  background:var(--paper);
  background-image:
    linear-gradient(to right,rgba(18,33,46,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(18,33,46,.05) 1px,transparent 1px);
  background-size:16px 16px;
  box-shadow:none;
}
.frame.is-pending::before,.frame.is-pending::after{
  content:"";position:absolute;width:10px;height:10px;pointer-events:none;
  background:
    linear-gradient(var(--brand),var(--brand)) center/100% 1px no-repeat,
    linear-gradient(var(--brand),var(--brand)) center/1px 100% no-repeat;
  opacity:.5;
}
.frame.is-pending::before{top:14px;left:14px}
.frame.is-pending::after{bottom:14px;right:14px}
.frame.is-pending img{display:none}
.frame.is-pending .frame__pending{
  display:grid;align-content:center;justify-items:center;gap:var(--sp-2);
  height:100%;text-align:center;padding:var(--sp-5);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-mono);
  letter-spacing:.06em;color:var(--brand);
}
.frame.is-pending .code{color:color-mix(in srgb,var(--brand) 70%,var(--ink))}

/* --------------------------------------------------------------------------
   Por qué Visiteka
   -------------------------------------------------------------------------- */
.why{padding-block:var(--sp-16);border-top:1px solid var(--line)}
.why__h{max-width:18ch;margin-bottom:var(--sp-10)}
.why__grid{display:grid;gap:var(--sp-8);margin:0}
@media (min-width:640px){.why__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.why__grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}}
.why__grid>div{border-top:2px solid var(--ink);padding-top:var(--sp-4)}
.why dt{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.25rem;
  letter-spacing:-.025em;margin-bottom:var(--sp-2);
}
.why dd{margin:0;font-size:var(--fs-small);color:var(--ink-soft);text-wrap:pretty}

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */
.faq{padding-block:var(--sp-16);border-top:1px solid var(--line)}
@media (min-width:900px){.faq{padding-block:var(--sp-20)}}
.faq h2{max-width:14ch}
.faq__list{margin-top:var(--sp-10);max-width:52rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;gap:var(--sp-4);
  padding-block:var(--sp-5);
  min-height:var(--tap);cursor:pointer;list-style:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.2;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 auto;margin-left:auto;
  width:14px;height:14px;
  background:
    linear-gradient(var(--brand),var(--brand)) center/100% 2px no-repeat,
    linear-gradient(var(--brand),var(--brand)) center/2px 100% no-repeat;
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--brand)}
.faq details p{
  padding-bottom:var(--sp-6);max-width:62ch;
  color:var(--ink-soft);text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   Cierre — cianotipo
   -------------------------------------------------------------------------- */
.close{
  background:var(--ink);color:var(--paper);
  padding-block:var(--sp-20);
  background-image:
    linear-gradient(to right,rgba(245,243,239,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(245,243,239,.05) 1px,transparent 1px);
  background-size:28px 28px;
}
.close__in{text-align:center;display:grid;justify-items:center}
.close h2{max-width:20ch;margin-bottom:var(--sp-8)}
.close .micro{color:rgba(245,243,239,.68)}

/* --------------------------------------------------------------------------
   Pie — cajetín de rotulación
   -------------------------------------------------------------------------- */
.foot{padding-block:var(--sp-12) var(--sp-8);background:var(--paper)}
.block{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);overflow:hidden}
.block__row--brand{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-5);border-bottom:1px solid var(--line);
}
.block__row--brand b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.125rem;letter-spacing:-.03em}
.block__row--brand span{font-size:var(--fs-small);color:var(--ink-soft)}
.block__grid{display:grid;margin:0;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.block__grid{grid-template-columns:repeat(4,1fr)}}
.block__grid>div{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line)}
.block__grid>div:nth-child(odd){border-right:1px solid var(--line)}
@media (min-width:820px){
  .block__grid>div{border-top:0}
  .block__grid>div:nth-child(odd){border-right:0}
  .block__grid>div+div{border-left:1px solid var(--line)}
}
.block dt{
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-mono);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:var(--sp-2);
}
.block dd{margin:0;font-size:var(--fs-small);line-height:1.5}
.block a{display:inline-block;padding-block:.3125rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.block a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.foot__c{margin-top:var(--sp-5);font-size:var(--fs-small);color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   Movimiento reducido: el plano y el cuadro salen ya resueltos.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .plan .w-ext,.plan .w-int{stroke-dashoffset:0!important}
}

/* --------------------------------------------------------------------------
   Páginas legales — la misma hoja, en columna de lectura.
   -------------------------------------------------------------------------- */
.doc{padding-block:var(--sp-12) var(--sp-16)}
.doc__in{max-width:48rem}
.doc h1{font-size:clamp(2rem,1.5rem + 2.2vw,3rem);letter-spacing:-.035em}
.doc__date{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);align-items:baseline;font-size:var(--fs-small);color:var(--ink-soft)}
.doc h2{
  font-size:var(--fs-h3);letter-spacing:-.025em;
  margin-top:var(--sp-10);padding-top:var(--sp-4);
  border-top:2px solid var(--ink);
}
.doc h2+p,.doc h2+ul{margin-top:var(--sp-4)}
.doc p,.doc li{color:var(--ink-soft);text-wrap:pretty}
.doc p+p,.doc p+ul,.doc ul+p{margin-top:var(--sp-4)}
.doc ul{margin:0;padding-left:1.15rem;display:grid;gap:var(--sp-3)}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.doc a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.doc code{
  font-family:"IBM Plex Mono",monospace;font-size:.875em;
  background:var(--brand-soft);color:var(--brand);
  padding:.1em .35em;border-radius:5px;
}
.doc__pend{
  margin-top:var(--sp-8);padding:var(--sp-5);
  border:1px dashed color-mix(in srgb,var(--brand) 45%,var(--line));
  border-radius:var(--radius);background:var(--brand-soft);
}
.doc__pend p{color:var(--ink)}
.doc__back{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.foot__c a{color:var(--ink-soft)}
.foot__c a:hover{color:var(--brand)}

/* --------------------------------------------------------------------------
   Qué hay que mirar
   La hoja del héroe vuelve aquí a propósito: estas son las notas del mismo
   plano. Cada nota es un dominio, una comprobación y lo que la app te dice
   al lado — texto real del catálogo, no ejemplos inventados.
   -------------------------------------------------------------------------- */
.look{padding-block:var(--sp-16);border-top:1px solid var(--line)}
@media (min-width:900px){.look{padding-block:var(--sp-20)}}
.look h2{max-width:32ch}
.look__lede{
  margin-top:var(--sp-5);max-width:60ch;
  font-size:var(--fs-lede);line-height:1.5;color:var(--ink-soft);text-wrap:pretty;
}
.look__sheet{margin-top:var(--sp-10)}

.looks{list-style:none;margin:0;padding:0}
.look-item{padding:var(--sp-5)}
.look-item+.look-item{border-top:1px solid var(--line)}
.look-item__d{display:block;color:var(--brand)}
.look-item__q{
  margin-top:var(--sp-2);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:500;
  font-size:var(--fs-h3);letter-spacing:-.02em;line-height:1.18;
  text-wrap:balance;
}
.look-item__h{
  margin-top:var(--sp-2);max-width:58ch;
  font-size:var(--fs-small);color:var(--ink-soft);text-wrap:pretty;
}
@media (min-width:820px){
  .look-item{
    display:grid;
    grid-template-columns:19rem minmax(0,1fr);
    column-gap:var(--sp-6);row-gap:var(--sp-2);
    align-items:start;
  }
  .look-item__d{grid-column:1;grid-row:1 / span 2;padding-top:.3rem}
  .look-item__q{grid-column:2;grid-row:1;margin-top:0}
  .look-item__h{grid-column:2;grid-row:2;margin-top:0}
}

/* Los doce dominios: la anchura del método, sin convertirla en una lista
   que haya que leer entera. */
.doms{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin:var(--sp-6) 0 0;padding:0;list-style:none;
}
.doms li{
  padding:.375rem .625rem;
  border:1px solid var(--line);border-radius:var(--radius-chip);background:var(--card);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sheet);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Guias (/guias/*)

   Las guias reusan el sistema de .doc de las paginas legales: misma medida,
   misma jerarquia, mismo enlace subrayado. Lo que .doc no tenia y una guia
   si necesita son cuatro cosas: tablas (el ITP son 19 comunidades), una
   respuesta destacada en el primer parrafo, la cita de la fuente oficial al
   pie de cada dato, y la llamada a la app al final.
   -------------------------------------------------------------------------- */

/* La respuesta corta, arriba del todo: es lo que Google y las IA citan, y lo
   que el lector con prisa necesita antes de decidir si sigue leyendo.

   Aqui solo quedan el color y el ritmo del texto. El ASPECTO de la region lo
   pone `.hoja .doc__tldr`, al final de esta hoja de estilos, porque dentro de
   una hoja de plano no es una tarjeta sino una region rayada. Tenia un borde
   izquierdo violeta de 3px que se quito: la Regla de Anotacion del sistema
   dice que el violeta se APLICA y no es estructura, y un borde estructural
   violeta la contradecia. */
.doc__tldr p{color:var(--ink)}
.doc__tldr p+p{margin-top:var(--sp-3)}

/* Tablas. En movil no se reflowean a tarjetas a proposito: una tabla de
   tipos impositivos se lee comparando filas, y partirla en fichas destruye
   justo esa comparacion. Se desplaza en horizontal dentro de su caja. */
.doc__tw{
  margin-top:var(--sp-6);overflow-x:auto;
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--card);
}
.doc table{border-collapse:collapse;width:100%;min-width:34rem;font-size:var(--fs-small)}
.doc th,.doc td{
  padding:.625rem .875rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.doc thead th{
  background:var(--card);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sheet);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.doc tbody tr:last-child td,.doc tbody tr:last-child th{border-bottom:0}
.doc tbody th{font-weight:600;color:var(--ink)}
/* Las cifras, en mono y tabulares: asi las columnas de % se comparan a ojo. */
.doc td.num{
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink);
}
/* Un dato que todavia no esta contrastado contra su fuente oficial no se
   imprime como si lo estuviera. Ver el aviso de cada tabla. */
.doc td.pend{color:var(--ink-soft);font-style:italic}

/* La fuente, al pie del dato y no al final de la pagina: es lo que separa
   una cifra verificable de una cifra copiada. */
.doc__src{
  margin-top:var(--sp-3);
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sheet);
  letter-spacing:.04em;color:var(--ink-soft);
}
.doc__src a{color:var(--ink-soft)}

/* Aviso: lo que la pagina NO puede afirmar todavia. */
.doc__warn{
  margin-top:var(--sp-6);padding:var(--sp-5);
  border:1px dashed color-mix(in srgb,var(--brand) 40%,var(--line));
  border-radius:var(--radius-lg);
}
.doc__warn p{color:var(--ink)}

/* La llamada a la app: cierra la guia con lo que la guia acaba de explicar. */
.doc__cta{
  margin-top:var(--sp-12);padding:var(--sp-8);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--card);text-align:center;
}
.doc__cta h2{margin-top:0;border-top:0;padding-top:0}
.doc__cta p{margin-top:var(--sp-3)}
.doc__cta .btn{margin-top:var(--sp-6)}

/* Seguir leyendo: las otras guias, para que ni el lector ni el rastreador
   lleguen a un callejon sin salida. */
.doc__more{margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--line)}
.doc__more ul{margin-top:var(--sp-4);padding:0;list-style:none;display:grid;gap:var(--sp-3)}
.doc__more a{font-weight:600}

/* Listas numeradas dentro de una guia: mismo ritmo que las de puntos. */
.doc ol{margin:var(--sp-4) 0 0;padding-left:1.35rem;display:grid;gap:var(--sp-3)}
.doc h2+ol{margin-top:var(--sp-4)}
/* Los h3 de una guia son pasos, no secciones: separan menos que un h2 y no
   llevan la regla superior. */
.doc h3{margin-top:var(--sp-8)}
.doc h3+p{margin-top:var(--sp-3)}

/* --------------------------------------------------------------------------
   El indice de guias (/guias/)

   La seccion necesitaba una portada propia: sin ella, /guias/ daba 404 y las
   cuatro guias solo se alcanzaban por el pie de la home. Un rastreador que
   llega a una guia desde el buscador no tenia por donde subir al resto, y una
   seccion sin indice no puede crecer.

   Reusa .doc entero. Lo unico que anade son la miga de pan —que aqui si es
   real, porque ya hay dos niveles— y la lista de entradas.
   -------------------------------------------------------------------------- */

/* Miga de pan. En mono y pequena: es senalizacion de plano, no texto. */
.doc__crumb{
  font-family:"IBM Plex Mono",monospace;font-size:var(--fs-sheet);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
}
.doc__crumb a{color:var(--ink-soft);text-decoration:none}
.doc__crumb a:hover{color:var(--brand)}
.doc__crumb span[aria-hidden]{margin-inline:.4em;color:var(--line)}
.doc__crumb+h1{margin-top:var(--sp-4)}

/* Las entradas del indice. Sin vinetas: cada una es una ficha, no un punto
   de una enumeracion. El titulo es el enlace y va en el cuerpo de display,
   para que la lista se lea como un sumario y no como un «seguir leyendo». */
.idx{margin-top:var(--sp-6);padding:0;list-style:none;display:grid;gap:var(--sp-6)}
.idx li{
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);
}
.idx li:last-child{padding-bottom:0;border-bottom:0}
.idx>li>a{
  font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;
  font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;
}
.idx>li>a:hover{color:var(--brand)}
.idx li p{margin-top:var(--sp-3)}
/* La fecha, al pie de la ficha: una guia de impuestos vale lo que vale su
   ultima revision, y el lector tiene derecho a verla antes de entrar. */
.idx__meta{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--ink-soft)}

/* --------------------------------------------------------------------------
   Las guias, como hojas del juego de planos

   DESIGN.md lo dejo escrito en «Where this system is not finished yet»: el
   mundo de plano estaba dibujado UNA vez —la hoja del heroe— y no en todas
   partes. Las guias reusaban el sistema .doc de las paginas legales, que es
   medida, jerarquia y enlace subrayado: correcto y mudo.

   NO toca `.doc` a secas: privacidad.html y aviso-legal.html comparten ese
   sistema y NO son hojas de plano — un aviso legal es un documento y tiene
   que seguir leyendose como tal. Todo lo de aqui cuelga de `.hoja`.

   LA REGLA QUE ORDENA TODO ESTO: dentro de una hoja NO HAY TARJETAS. Una caja
   blanca con borde y radio encima de una hoja blanca con borde y radio es una
   caja dentro de otra, y en un plano no existe tal cosa: las regiones se
   delimitan con reglas, trama y sangrado. Por eso .doc__tldr, .doc__tw y
   .doc__warn pierden aqui su fondo y su radio, y por eso la llamada a la app
   y el «seguir leyendo» viven FUERA de la hoja, sobre el papel — no son parte
   del documento, son mobiliario de la pagina.
   -------------------------------------------------------------------------- */

/* La columna. Mas ancha que .doc__in (48rem) porque la hoja mete su propio
   margen: el texto de dentro vuelve a caer en la medida de siempre. */
.hoja-set{max-width:54rem}

/* La miga va FUERA de la hoja, sobre el papel: dice donde estas en el sitio,
   no es parte del documento. Asi la hoja empieza por su propio cajetin. */
.hoja-set>.doc__crumb{margin-bottom:var(--sp-4)}

.hoja{--hoja-pad:var(--sp-5);overflow:hidden}
.hoja__body{padding:var(--sp-6) var(--hoja-pad) var(--sp-8)}
@media (min-width:560px){.hoja{--hoja-pad:var(--sp-8)}.hoja__body{padding-block:var(--sp-8) var(--sp-10)}}
@media (min-width:820px){.hoja{--hoja-pad:var(--sp-10)}.hoja__body{padding-block:var(--sp-10) var(--sp-12)}}

/* El h1 abre la hoja: sin regla superior, que esa la pone el cajetin. */
.hoja__body>h1:first-child{margin-top:0}

/* El numero de hoja. En un juego de planos, saber «3 de 6» ES informacion:
   dice cuanto queda de seccion. */
.hoja__n{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Sangrado hasta el borde de la hoja: lo que usan las regiones de abajo. */
.hoja .bleed{margin-inline:calc(var(--hoja-pad) * -1);width:auto}

/* La respuesta corta, rayada con la TRAMA de 45 grados — el mismo rayado que
   tiñe las habitaciones del plano del heroe, que estaba definido una vez y
   usado una vez.

   Sustituye al borde violeta de 3px de antes, y no por gusto: la Regla de
   Anotacion dice que el violeta se APLICA, nunca es estructura. Un borde
   estructural violeta la contradecia. Rayar una region es lo que se hace
   sobre un plano, y devuelve el violeta a su papel de anotacion. */
.hoja .doc__tldr{
  margin-top:var(--sp-6);
  padding:var(--sp-5) var(--hoja-pad);
  margin-inline:calc(var(--hoja-pad) * -1);
  border:0;border-block:1px solid var(--line);border-radius:0;
  background:repeating-linear-gradient(45deg,
    rgba(102,79,194,.08) 0 1.4px, transparent 1.4px 12px);
}

/* La tabla es el INSTRUMENTO de la hoja: 19 comunidades comparadas es el dato
   mas citable del sitio. Pierde la caja y gana un datum de 2px bajo los
   rotulos — el mismo peso que abre cada seccion—, para que la cabecera se lea
   como la linea de referencia de una medicion y no como una barra de tabla. */
.hoja .doc__tw{
  margin-inline:calc(var(--hoja-pad) * -1);
  padding-inline:var(--hoja-pad);
  border:0;border-radius:0;background:none;
}
.hoja .doc__tw table{background:none}
.hoja thead th{background:none;border-bottom:2px solid var(--ink);padding-top:0}
.hoja tbody th{color:var(--ink)}
.hoja tbody tr:hover{background:rgba(102,79,194,.04)}
/* La fuente, pegada a su tabla y en la misma sangria. */
.hoja .doc__src{margin-top:var(--sp-3)}

/* El aviso: region rayada en ambar, que es el color de «lo que no es exacto»
   en este sistema. Sin caja y sin radio, como todo lo de dentro. */
.hoja .doc__warn{
  padding:var(--sp-5) var(--hoja-pad);
  margin-inline:calc(var(--hoja-pad) * -1);
  border:0;border-block:1px dashed var(--line);border-radius:0;
  background:repeating-linear-gradient(45deg,
    rgba(201,123,24,.07) 0 1.4px, transparent 1.4px 12px);
}

/* La franja de notas al pie: fuentes, revision y alcance. Es el cajetin
   inferior de un plano de verdad. */
.hoja>.sheet__note{padding:var(--sp-4) var(--hoja-pad)}
.hoja>.sheet__note .code{display:block;margin-bottom:var(--sp-2)}

/* Mobiliario, FUERA de la hoja y sobre el papel.

   Sobre el papel, la HOJA es el unico objeto blanco: es el sujeto de la
   pagina. Por eso la llamada a la app pierde aqui su relleno y se queda en
   una regla sobre papel — si fuera otra tarjeta blanca competiria con la
   hoja y las dos se leerian como lo mismo. */
.hoja-set>.doc__cta{margin-top:var(--sp-12);background:none}
/* `.doc__more` traia su propia regla de 1px, y su h2 trae el datum de 2px del
   sistema: juntas dibujaban dos lineas separadas por un hueco. La del datum
   ya separa, asi que la otra sobra. */
.hoja-set>.doc__more{margin-top:var(--sp-12);padding-top:0;border-top:0}

/* El indice de la seccion, como juego de laminas: cada entrada lleva su
   codigo a la izquierda, en columna, y el titulo al lado. */
.idx{margin-top:var(--sp-6);padding:0;list-style:none;display:grid;gap:0}
.idx li{
  display:grid;gap:var(--sp-1) var(--sp-5);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--line);
}
.idx li:last-child{border-bottom:0;padding-bottom:var(--sp-2)}
.idx__code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:var(--fs-sheet);font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--brand);
  font-variant-numeric:tabular-nums;
}
.idx>li>a{
  font-family:"Bricolage Grotesque","Inter",sans-serif;font-weight:700;
  font-size:var(--fs-h3);line-height:1.15;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;
}
.idx>li>a:hover{color:var(--brand)}
.idx li p{margin-top:var(--sp-2)}
.idx__meta{margin-top:var(--sp-2);font-size:var(--fs-small);color:var(--ink-soft)}
@media (min-width:700px){
  .idx li{grid-template-columns:5.5rem minmax(0,1fr)}
  .idx__code{grid-row:1 / span 3;padding-top:.5em}
  .idx>li>a,.idx li p,.idx__meta{grid-column:2}
}