/* HackTheSystem — hoja de estilo unica. Cero dependencias externas.
   Sin fuentes remotas, sin CDN, sin peticiones a terceros. */

/* ---------- tokens ---------- */
:root{
  --bg:#08080a;
  --bg-soft:#0f0f13;
  --bg-card:#131318;
  --fg:#eceae6;
  --fg-dim:#98968f;
  --fg-faint:#6a6862;
  --rule:#23232b;
  --accent:#2bff9e;
  --accent-ink:#062615;
  --law:#ffd23f;
  --verton:#ff5252;
  --grados:#7aa2ff;
  --bnb:#2bff9e;
  --hacktion:#b98cff;
  /* Ancho de lectura del manifiesto. Medido, no estimado: 46rem da una
     mediana de 66 caracteres por linea, que es el optimo de lectura
     continua. Con 34rem se quedaba en 49 y el ojo saltaba de linea. */
  --measure:46rem;
  --pad:clamp(1.25rem,5vw,3rem);
  --mono:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(72rem,100% - var(--pad)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:4px}

/* ---------- cabecera + selector de idioma ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(8,8,10,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-head__inner{display:flex;align-items:center;gap:1rem;min-height:3.75rem;flex-wrap:wrap}
.brand{
  font-family:var(--mono);font-weight:700;letter-spacing:-.03em;
  font-size:1rem;color:var(--fg);text-decoration:none;white-space:nowrap;
}
.brand b{color:var(--accent)}
.site-nav{display:flex;gap:.15rem;margin-left:auto;flex-wrap:wrap}
.site-nav a{
  font-size:.8rem;font-family:var(--mono);color:var(--fg-dim);
  text-decoration:none;padding:.4rem .55rem;border-radius:4px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--fg);background:var(--bg-card)}

.lang{display:flex;align-items:center;gap:.3rem;margin-left:.5rem;padding-left:.75rem;border-left:1px solid var(--rule)}
.lang__label{font-family:var(--mono);font-size:.65rem;color:var(--fg-faint);letter-spacing:.14em;text-transform:uppercase}
.lang a{
  font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.04em;
  text-decoration:none;color:var(--fg-dim);
  padding:.28rem .5rem;border:1px solid var(--rule);border-radius:4px;
}
.lang a:hover{color:var(--fg);border-color:var(--fg-dim)}
.lang a[aria-current="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* El boton del menu: invisible en escritorio, tres barras en movil. */
.nav-toggle{
  display:none;margin-left:auto;
  width:2.75rem;height:2.75rem;padding:0;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--rule);border-radius:6px;
  cursor:pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  display:block;width:1.15rem;height:2px;background:var(--fg);
  border-radius:2px;transition:transform .18s ease,opacity .18s ease;
}
.nav-toggle__bars{position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-6px}
.nav-toggle__bars::after{top:6px}
/* Abierto: las barras se cruzan en aspa. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}

/* En pantallas estrechas la navegacion se pliega.
   Antes era una tira que se desplazaba en horizontal, y ese es justo el
   problema: no tiene indicio ninguno. Con siete entradas, nadie adivina
   que hay mas a la derecha. Un boton se ve.

   El plegado depende de la clase .js-nav, que pone el JavaScript: si el
   script no llega a ejecutarse, el menu se queda desplegado y navegable
   en vez de quedarse cerrado para siempre sin nada que lo abra. */
@media (max-width:46rem){
  .site-head__inner{flex-wrap:wrap;row-gap:0;min-height:auto;padding-top:.6rem}
  .nav-toggle{display:flex;order:2}
  .lang{order:1;margin-left:auto}
  .site-nav{
    order:3;width:100%;margin:.15rem 0 0;
    flex-wrap:wrap;padding-bottom:.55rem;
  }
  .site-nav a{font-size:.9rem;padding:.7rem .6rem}

  /* con JavaScript: plegado por defecto, en columna al abrirse */
  .js-nav .site-nav{display:none}
  .js-nav .site-nav[data-open="true"]{
    display:grid;gap:.1rem;
    padding:.5rem 0 .8rem;
    border-top:1px solid var(--rule);margin-top:.6rem;
  }
  .js-nav .site-nav a{border-radius:6px}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(4rem,14vh,9rem) 0 clamp(3rem,8vh,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(50rem 26rem at 18% -10%,rgba(43,255,158,.10),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
.hero>*{position:relative;z-index:1}
.hero__tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.5rem;
}
.hero__tag::before{content:"\258D  "}
.hero h1{
  font-size:clamp(2.1rem,1.2rem + 4.6vw,4.6rem);
  line-height:1.04;letter-spacing:-.035em;font-weight:800;
  margin:0 0 1.25rem;max-width:19ch;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{font-size:clamp(1.05rem,1rem + .5vw,1.4rem);color:var(--fg-dim);max-width:44ch;margin:0 0 2.25rem}

.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;padding:.75rem 1.15rem;border-radius:5px;
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  transition:transform .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);background:#fff;border-color:#fff;color:#000}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--rule)}
.btn--ghost:hover{background:var(--bg-card);color:var(--fg);border-color:var(--fg-dim)}

/* ---------- manifiesto inmersivo ---------- */
.manifesto{padding:clamp(2rem,6vh,4rem) 0 clamp(4rem,10vh,7rem)}
.manifesto__inner{max-width:var(--measure);margin-inline:auto}
.manifesto p{
  font-size:clamp(1.15rem,1.02rem + .6vw,1.55rem);
  line-height:1.55;margin:0 0 2.1em;color:var(--fg);
  letter-spacing:-.012em;
}
.manifesto .lead{font-weight:800;font-size:clamp(1.5rem,1.1rem + 2vw,2.6rem);line-height:1.16;letter-spacing:-.03em;margin-bottom:1.6em}
.manifesto .lead span{display:block}
.manifesto .lead span+span{color:var(--accent)}
.manifesto .beat{font-weight:700}
.manifesto .close{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.6rem,1.2rem + 2.4vw,3rem);letter-spacing:-.04em;
  color:var(--accent);margin-top:1em;
}
.manifesto hr{border:0;border-top:1px solid var(--rule);margin:0 0 3rem;max-width:5rem}

/* El texto es visible POR DEFECTO. La aparicion progresiva solo se activa si
   main.js anade .js-anim, y ese script lleva sus propias redes de seguridad.
   Asi el manifiesto no puede quedarse invisible por un fallo de JS. */
.reveal{opacity:1;transform:none}
.js-anim .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.js-anim .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- secciones ---------- */
.section{padding:clamp(3.5rem,9vh,6rem) 0;border-top:1px solid var(--rule)}
.section__kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg-faint);margin:0 0 .85rem;
}
.section h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem);line-height:1.15;letter-spacing:-.03em;margin:0 0 1rem;font-weight:800}
.section__intro{color:var(--fg-dim);max-width:52ch;margin:0 0 2.5rem}

/* ---------- tarjetas de rama ---------- */
.branches{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.branch{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--rule);border-radius:9px;
  padding:1.6rem 1.4rem 1.4rem;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,background .15s ease;
  overflow:hidden;
}
.branch::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--c,var(--accent))}
.branch:hover{transform:translateY(-2px);border-color:var(--c,var(--accent));background:#16161c;color:inherit}
.branch__name{font-size:1.2rem;font-weight:800;letter-spacing:-.02em;margin:0 0 .15rem;color:var(--c,var(--accent))}
.branch__role{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 .9rem}
.branch__desc{font-size:.94rem;color:var(--fg-dim);margin:0 0 1.3rem;flex:1}
.branch__go{font-family:var(--mono);font-size:.78rem;font-weight:700;color:var(--fg)}
.branch__go::after{content:" \2192"}

/* ---------- estado / avisos ---------- */
.status{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:999px;
  border:1px solid var(--rule);color:var(--fg-dim);background:var(--bg-soft);
}
.status::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--fg-faint)}
.status--soon::before{background:var(--law)}
.status--live::before{background:var(--accent)}

.note{
  border-left:2px solid var(--rule);background:var(--bg-soft);
  padding:1.1rem 1.25rem;border-radius:0 6px 6px 0;margin:2rem 0;
  font-size:.95rem;color:var(--fg-dim);
}
.note strong{color:var(--fg)}
.note--data{border-left-color:var(--accent)}
.note p{margin:0 0 .7rem}
.note p:last-child{margin:0}

.prose{max-width:42rem}
.prose h3{font-size:1.2rem;letter-spacing:-.02em;margin:2.5rem 0 .75rem;font-weight:700}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.2rem;color:var(--fg-dim)}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--accent)}
.prose .dim{color:var(--fg-dim)}

.figure-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));margin:2rem 0}
.figure{background:var(--bg-card);border:1px solid var(--rule);border-radius:8px;padding:1.15rem}
.figure__n{font-family:var(--mono);font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);font-weight:700;color:var(--accent);line-height:1;letter-spacing:-.04em}
.figure__t{font-size:.86rem;color:var(--fg-dim);margin-top:.5rem}
.figure__src{font-size:.72rem;color:var(--fg-faint);margin-top:.6rem}
.figure__src a{color:var(--fg-faint)}
.figure__src a:hover{color:var(--accent)}

/* ---------- pie ---------- */
.site-foot{border-top:1px solid var(--rule);padding:3rem 0 4rem;color:var(--fg-faint);font-size:.85rem}
.site-foot__grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.site-foot a{color:var(--fg-dim);text-decoration:none}
.site-foot a:hover{color:var(--accent)}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.site-foot__brand{font-family:var(--mono);font-weight:700;color:var(--fg);font-size:.95rem}
.site-foot__note{margin:2.5rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule);max-width:62ch;line-height:1.6}

/* ---------- puerta de idioma (raiz) ---------- */

/* ---------- tablas simples ---------- */
.table-scroll{overflow-x:auto;margin:1.5rem 0}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:28rem}
th,td{text-align:left;padding:.65rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);font-weight:600}
td{color:var(--fg-dim)}
td strong{color:var(--fg)}

/* ---------- archivo de video (Hackverton) ---------- */
.vid-filters{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end;margin:0 0 2rem}
.vid-filters label{display:flex;flex-direction:column;gap:.35rem}
.vid-filters span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-faint);
}
.vid-filters select{
  font:inherit;font-size:.9rem;color:var(--fg);
  background:var(--bg-card);border:1px solid var(--rule);border-radius:5px;
  padding:.5rem .7rem;min-width:12rem;
}
.vid-filters select:hover{border-color:var(--fg-dim)}
.vid-count{
  font-family:var(--mono);font-size:.75rem;color:var(--fg-faint);
  margin:0 0 .55rem;margin-left:auto;
}

.vid-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.vid{
  display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--rule);border-radius:9px;overflow:hidden;
}
.vid[hidden]{display:none}
.vid__media{
  position:relative;display:block;aspect-ratio:16/9;background:var(--bg-soft);
  border-bottom:1px solid var(--rule);overflow:hidden;
}
.vid__media img{width:100%;height:100%;object-fit:cover}
.vid__media:hover img{opacity:.82}
.vid__noimg{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:2rem;color:var(--fg-faint);
}
.vid__dur{
  position:absolute;right:.55rem;bottom:.55rem;
  font-family:var(--mono);font-size:.7rem;
  background:rgba(8,8,10,.85);color:var(--fg);padding:.15rem .4rem;border-radius:3px;
}
.vid__body{padding:1.1rem 1.15rem 1.15rem;display:flex;flex-direction:column;flex:1}
.vid__place{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verton);margin:0 0 .45rem;
}
.vid__title{font-size:1.02rem;line-height:1.3;letter-spacing:-.015em;margin:0 0 .5rem;font-weight:700}
.vid__desc{font-size:.88rem;color:var(--fg-dim);margin:0 0 1rem;flex:1}
.vid__meta{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 .9rem}
.vid__meta time{font-family:var(--mono);font-size:.72rem;color:var(--fg-faint)}
.vid__links{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.vid__alt{
  font-family:var(--mono);font-size:.74rem;text-decoration:none;
  color:var(--fg-dim);border:1px solid var(--rule);border-radius:4px;padding:.3rem .55rem;
}
.vid__alt:hover{color:var(--fg);border-color:var(--fg-dim)}
.vid__alt--main{color:var(--fg);border-color:var(--fg-dim)}
.vid__alt--main:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vid-none{color:var(--fg-dim);font-style:italic;margin:1.5rem 0 0}

/* ---------- clases que sustituyen a los estilos en linea ----------
   La cabecera Content-Security-Policy del .htaccess lleva `style-src 'self'`
   sin 'unsafe-inline', asi que el navegador BLOQUEA cualquier atributo
   style="..." . En vez de debilitar la politica, el generador no emite ni un
   estilo en linea: todo vive aqui. */
.lang__nav{display:flex;gap:.3rem}
.brand-accent{color:var(--accent)}
.site-foot__tagline{margin:.4rem 0 0;max-width:26ch}
.site-foot__mail{margin:.9rem 0 0}
.site-foot__head{margin-bottom:.6rem}
.page-status{margin:0 0 1.5rem}
.hero--page{padding-bottom:1rem}
.section--page{border-top:0;padding-top:1rem}
.derived-note{
  max-width:46ch;margin-top:2.5rem;
  text-transform:none;letter-spacing:0;font-size:.78rem;
}

/* Color propio de cada rama, antes inyectado como style="--c:…" */
.branch--hack-the-law{--c:var(--law)}
.branch--hackverton{--c:var(--verton)}
.branch--seis-grados,
.branch--six-degrees{--c:var(--grados)}
.branch--occupybnb{--c:var(--bnb)}
.branch--hacktion{--c:var(--hacktion)}

/* ---------- raiz: selector de idioma + resumen para rastreadores ----------
   Los rastreadores de IA no suelen ejecutar JavaScript. La raiz redirige por
   JS, pero lleva ademas el resumen real del proyecto en los dos idiomas, para
   que quien no ejecute scripts se lleve algo mas que dos botones. */

/* ---------- bloques de campana ----------
   Cada campana va en su caja, con su color y su etiqueta, para que no se
   mezcle con la de al lado. El problema que resuelven: la explicacion de la
   ILP espanola venia detras de la campana europea y se leia como suya. */
.campaign{
  position:relative;
  background:var(--bg-soft);
  border:1px solid var(--rule);
  border-top:2px solid var(--c,var(--accent));
  border-radius:10px;
  padding:1.6rem clamp(1.1rem,3vw,1.8rem) 1.8rem;
  margin:2.5rem 0;
}
.campaign--eu{--c:var(--grados)}
.campaign--es{--c:var(--law)}
.campaign__tag{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c,var(--accent));margin:0 0 .35rem;
}
.campaign__title{margin:0 0 1.2rem !important;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem)}
.campaign>.note,.campaign>.table-scroll{margin-left:0;margin-right:0}
.campaign p:last-child{margin-bottom:0}

.prose h4{
  font-size:1.02rem;letter-spacing:-.01em;font-weight:700;
  margin:2rem 0 .7rem;color:var(--fg);
}
.campaign h4:first-of-type{margin-top:1.8rem}

/* ---------- proporcion de las paginas interiores ----------
   El contenido vivia pegado al borde izquierdo de un contenedor de 72rem,
   dejando medio ancho de pantalla vacio a la derecha. La home no lo sufria
   porque su manifiesto ya se centraba solo.
   Se estrecha el contenedor y se centra: asi el titular, el texto y las
   tablas comparten una misma columna centrada. */
.hero--page .wrap,
.section--page .wrap{width:min(46rem,100% - var(--pad)*2)}
.section--page .prose{max-width:none}

/* ---------- selector de pais (HackTheLaw) ---------- */
.country-pick{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  margin:0 0 1.4rem;font-family:var(--mono);font-size:.78rem;
}
.country-pick__label{
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-faint);margin-right:.2rem;
}
.country-pick a,.country-pick__current{
  padding:.3rem .6rem;border:1px solid var(--rule);border-radius:4px;
  text-decoration:none;color:var(--fg-dim);font-weight:700;
}
.country-pick__current{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.country-pick a:hover{color:var(--fg);border-color:var(--fg-dim)}

/* Sugerencia de pais: calculada en local, nunca redirige */
.country-note{
  font-size:.85rem;color:var(--fg-dim);
  border-left:2px solid var(--accent);background:var(--bg-soft);
  padding:.7rem .9rem;border-radius:0 6px 6px 0;margin:0 0 1.6rem;
}
.country-note[hidden]{display:none}

/* ---------- el kit: piezas de campana como documentos reales ---------- */
.kit-card{
  background:var(--bg-card);border:1px solid var(--rule);border-radius:8px;
  padding:1.4rem 1.5rem;margin:1.5rem 0 .5rem;max-width:30rem;
}
.kit-card figcaption{
  font-family:var(--mono);font-size:.68rem;color:var(--fg-faint);
  margin-top:1rem;padding-top:.7rem;border-top:1px solid var(--rule);
  line-height:1.5;
}
.kit-card p{margin:0 0 .55rem}

/* general: la absolucion */
.kit-card--general{border-top:2px solid var(--accent)}
.kit-quote{font-style:italic;color:var(--fg-dim)}
.kit-fact{margin-top:.9rem}
.kit-punch{
  font-family:var(--mono);font-weight:700;color:var(--accent);
  font-size:1.15rem;letter-spacing:-.01em;margin-top:.9rem;
}

/* bug: terminal */
.kit-card--bug{border-top:2px solid var(--grados);padding:1rem 1.1rem}
.kit-card--bug pre{
  font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--fg);
  margin:0;overflow-x:auto;white-space:pre;
}

/* ticket: caja registradora */
.kit-card--ticket{
  max-width:19rem;border-style:dashed;border-top:2px solid var(--law);
  font-family:var(--mono);font-size:.8rem;
}
.ticket-head{font-weight:700;text-align:center;letter-spacing:.2em;font-size:.9rem}
.ticket-sub{text-align:center;color:var(--fg-faint);border-bottom:1px dashed var(--rule);padding-bottom:.6rem}
.ticket-row{display:flex;justify-content:space-between;gap:1rem;color:var(--fg-dim)}
.ticket-row span:last-child{color:var(--fg);white-space:nowrap}
.ticket-total{
  border-top:1px dashed var(--rule);padding-top:.6rem;margin-top:.6rem;
  font-weight:700;
}
.ticket-total span{color:var(--law) !important}

/* documentos con cabecera (parte, boletin, planos) */
.doc-head{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg);
  border-bottom:1px solid var(--rule);padding-bottom:.6rem;margin-bottom:.9rem !important;
}
.doc-row{font-size:.92rem;color:var(--fg-dim)}
.doc-row strong{color:var(--fg)}
.kit-card--parte{border-top:2px solid var(--verton)}
.kit-card--boletin{border-top:2px solid var(--hacktion)}
.kit-card--planos{border-top:2px solid var(--bnb)}

/* boletin: filas de notas */
.boletin-row{
  display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--mono);font-size:.85rem;margin-bottom:.1rem !important;
}
.suspenso{color:var(--verton);font-weight:700;letter-spacing:.06em}
.boletin-nota{font-size:.78rem;color:var(--fg-faint);margin:0 0 .7rem !important}

/* ---------- el kit: muestras y descargas ---------- */
.tee{margin:1.6rem 0;padding:0}
.tee img{
  display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--rule);background:var(--bg-card);
}
.tee figcaption{
  font-family:var(--mono);font-size:.72rem;color:var(--fg-faint);
  margin-top:.6rem;letter-spacing:.04em;
}

.dl{list-style:none;margin:1.2rem 0 2rem;padding:0;display:grid;gap:.5rem}
.dl a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem 1rem;border:1px solid var(--rule);border-radius:6px;
  background:var(--bg-card);text-decoration:none;color:var(--fg);
  font-weight:600;transition:border-color .15s,background .15s;
}
.dl a:hover{border-color:var(--accent);background:var(--bg-soft)}
.dl a::before{
  content:"↓";color:var(--accent);font-family:var(--mono);
  margin-right:.55rem;font-weight:700;
}
.dl a span{
  font-family:var(--mono);font-size:.7rem;color:var(--fg-faint);
  letter-spacing:.06em;white-space:nowrap;font-weight:400;
}

/* pegatina en el kit: no necesita toda la columna */
.tee--sticker img{max-width:30rem;background:transparent;border:0}