/*
  pages.css — páginas de contenido del diseño nuevo: legales, eliminación de datos,
  blog (índice y artículo). Se apoya en los tokens y paneles de brand.css.

  El HTML de los documentos legales sale de includes/legal-render.php con clases de
  Tailwind heredadas del diseño anterior; aquí no hay Tailwind, así que esas clases no
  hacen nada y todo el estilo se aplica por descendencia desde .legal-doc.
*/

/* ---------- cabecera de página ---------- */
.page-head { padding-top: 150px; padding-bottom: 80px; }
/* cabecera con imagen: la imagen ocupa la derecha y se deshace en grano hacia el carbón */
.page-head--art { isolation: isolate; }
.page-head--art::after { content: ""; position: absolute; z-index: -1; top: 4%; bottom: -6%; right: -4%; width: 64%; background: url("../img/art/night.webp") 65% center / cover; -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; pointer-events: none; }
.page-head .t-display { font-size: clamp(2.6rem, 6.4vw, 5rem); max-width: 18ch; }
.page-head .t-lead { max-width: 52ch; }
.page-head__meta { margin: 22px 0 0; font-size: 12.5px; color: var(--muted-d); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.page-head__meta a { color: var(--cian); text-decoration: none; }
.page-head__meta a:hover { text-decoration: underline; }
.crumbs { display: flex; gap: 8px; font-size: 12px; margin: 0 0 26px; color: var(--muted-d); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--cian); }
.doc-code { display: inline-flex; align-items: center; gap: 7px; color: var(--cian); }
.doc-code::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--fc); box-shadow: 0 0 0 1px rgba(244, 241, 235, .4); }

/* ---------- pestañas entre documentos legales (fijas bajo la barra) ---------- */
/* la barra de arriba ya no tiene fondo: las pestañas van en su propia cápsula (translúcida, con desenfoque, como
   las de la barra) y se quedan fijas justo debajo de ella */
.legal-tabs { position: sticky; top: 76px; z-index: 30; margin: -48px 0 40px; padding: 0 var(--gutter); pointer-events: none; }   /* al cargar empieza dentro de la hoja, nunca sobre su borde */
.legal-tabs__in { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: min(var(--wrap), 100%); margin: 0 auto; padding: 5px; border-radius: 24px;   /* si caben en dos filas, la cápsula sigue viéndose bien */
  background: rgba(236, 232, 224, .62); border: 1px solid rgba(27, 26, 23, .12); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.legal-tabs a { flex: none; font-size: 13px; padding: 8px 14px; border-radius: 999px; color: var(--muted-l); text-decoration: none; white-space: nowrap; transition: background .25s, color .25s; }
.legal-tabs a:hover { color: var(--carbon); background: rgba(27, 26, 23, .06); }
.legal-tabs a[aria-current="page"] { background: var(--carbon); color: var(--arcilla); }
.legal-pick { display: none; }
@media (max-width: 960px) {
  .legal-tabs__in { display: none; }
  .legal-pick { display: block; position: relative; pointer-events: auto; max-width: 420px; margin: 0 auto; }
  .legal-pick summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border: 1.5px solid var(--carbon); border-radius: 999px; background: rgba(244, 241, 235, .78); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); font-size: 15px; font-weight: 500; cursor: pointer; }
  .legal-pick summary::-webkit-details-marker { display: none; }
  .legal-pick summary .mono { font-size: 11px; color: var(--terra); letter-spacing: .05em; text-transform: uppercase; }
  .legal-pick summary i { margin-left: auto; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
  .legal-pick[open] summary i { transform: translateY(2px) rotate(-135deg); }
  .legal-pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: grid; padding: 8px; border: 1.5px solid var(--carbon); border-radius: 24px; background: var(--papel); box-shadow: 0 20px 40px -20px rgba(27, 26, 23, .5); animation: pick-in .25s var(--ease); }
  .legal-pick__list a { padding: 12px 16px; border-radius: 999px; font-size: 15px; white-space: normal; }
  @keyframes pick-in { from { opacity: 0; transform: translateY(-6px); } }
}

/* ---------- documento largo (legales) ---------- */
.doc { padding-top: 80px; padding-bottom: 100px; }
.doc__grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 60px; align-items: start; }
.toc { position: sticky; top: 150px; font-size: 12.5px; }
.toc p { margin: 0 0 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-l); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: calc(100vh - 200px); overflow: auto; }
.toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line-light); color: var(--muted-l); text-decoration: none; line-height: 1.3; transition: color .2s, border-color .2s; }
.toc a:hover, .toc a.is-on { color: var(--carbon); border-left-color: var(--terra); }

/* Jerarquía única para todos los documentos:
   h2 sección (serif, número en mono) · h3 subsección (sans) · cuerpo 16.5/1.75 · listas con marcador terracota */
.legal-doc { max-width: 70ch; font: 400 16.5px/1.75 var(--f-sans); color: #3A3631; }
.legal-doc > :first-child { margin-top: 0; }
.legal-doc h2 { display: block; font: 400 clamp(1.55rem, 2.4vw, 2rem)/1.2 var(--f-serif); color: var(--carbon); margin: 64px 0 16px; padding-top: 22px; border-top: 1.5px solid var(--carbon); scroll-margin-top: 150px; }
.legal-doc h3 { display: block; font: 400 clamp(1.25rem, 1.8vw, 1.45rem)/1.25 var(--f-serif); color: var(--carbon); margin: 34px 0 10px; scroll-margin-top: 150px; }
.legal-doc .lnum { font: inherit; color: inherit; }
.legal-doc p { margin: 0 0 16px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 20px; padding-left: 22px; }
.legal-doc li { margin: 0 0 10px; padding-left: 6px; white-space: pre-line; }
.legal-doc li::marker { color: var(--terra); font-family: var(--f-mono); font-size: .85em; }
.legal-doc strong { color: var(--carbon); font-weight: 600; }
.legal-doc a { color: var(--cian-ink); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.legal-doc a:hover { color: var(--terra); }
.legal-doc code { font: 13.5px var(--f-mono); background: rgba(27, 26, 23, .06); padding: 1px 6px; border-radius: 4px; }
.doc--first .legal-doc h3.text-lg { display: block; font: 400 clamp(1.55rem, 2.4vw, 2rem)/1.2 var(--f-serif); margin: 64px 0 16px; padding-top: 22px; }
.toc a b { font: 400 11px var(--f-mono); color: var(--terra); margin-right: 6px; }

/* animación: cada bloque entra al aparecer; la línea del h2 se dibuja */
.legal-doc[data-reveal] > * { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.legal-doc[data-reveal] > .is-in { opacity: 1; transform: none; }
.legal-doc[data-reveal] h2, .legal-doc[data-reveal] h3.text-lg { border-top-color: transparent; background: linear-gradient(var(--carbon), var(--carbon)) top left / 0 1.5px no-repeat; transition: opacity .6s var(--ease), transform .6s var(--ease), background-size .9s var(--ease) .15s; }
.legal-doc[data-reveal] h2.is-in, .legal-doc[data-reveal] h3.text-lg.is-in { background-size: 100% 1.5px; }
.legal-tabs__in { animation: tabs-in .7s var(--ease) both .2s; }
@keyframes tabs-in { from { opacity: 0; transform: translateY(-10px); } }
.toc li { animation: toc-in .5s var(--ease) both; }
.toc li:nth-child(n) { animation-delay: calc(.3s + var(--i, 0) * .04s); }
@keyframes toc-in { from { opacity: 0; transform: translateX(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .legal-doc[data-reveal] > * { opacity: 1; transform: none; transition: none; }
  .legal-doc[data-reveal] h2, .legal-doc[data-reveal] h3.text-lg { background-size: 100% 1.5px; }
}
.legal-table-wrap { overflow-x: auto; margin: 18px 0 24px; border: 1.5px solid var(--carbon); border-radius: 10px; background: var(--papel); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.legal-table th { text-align: left; font: 600 12px var(--f-sans); letter-spacing: .04em; text-transform: uppercase; background: var(--carbon); color: var(--arcilla); padding: 12px 14px; }
.legal-table td { padding: 12px 14px; border-top: 1px solid var(--line-light); vertical-align: top; }
.legal-lang-split { margin-top: 90px; padding-top: 50px; border-top: 1.5px dashed var(--line-light); }
.legal-lang-badge { display: inline-block; font: 11px var(--f-mono); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; background: var(--carbon); color: var(--cian); margin-bottom: 18px; }
.doc--first { padding-top: 150px; }   /* sin encabezado oscuro: el selector de documentos arranca bajo la barra, sin tapar el título */
.doc--first .wrap { max-width: 860px; }
.doc [lang] > .text-3xl { font: 400 clamp(2.4rem, 5.4vw, 4.2rem)/1.05 var(--f-serif); color: var(--carbon); margin: 0 0 14px; }
.doc .w-16 { display: none; }                         /* raya decorativa del diseño anterior */
.doc [lang] > p.text-xs { font: 12.5px var(--f-mono); color: var(--muted-l); }
.doc [lang] > p.text-xs a { color: var(--cian-ink); }

.legal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 70px; padding-top: 26px; border-top: 1px solid var(--line-light); }
.legal-links a { font-size: 13.5px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-light); color: var(--carbon); text-decoration: none; transition: border-color .2s, background .2s; }
.legal-links a:hover { border-color: var(--carbon); background: rgba(27, 26, 23, .04); }
.doc__extra { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.doc__extra img { height: 44px; width: auto; }

/* ---------- blog: el archivo ---------- */
/* Un archivo físico de Vindam: cabecera con terminal y fichas recientes en vidrio sobre
   brasas; debajo, una carpeta que se abre con pestañas por tema, un expediente destacado
   con clip y sello, y los artículos como documentos con código. Movimiento: site.js
   (initArchive / initBlog) con GSAP; sin JS o con movimiento reducido todo está visible. */

/* cabecera */
/* el blog va todo sobre el fondo oscuro del héroe: la carpeta sigue justo debajo, sin franja clara */
.archive-hero { padding-top: 140px; padding-bottom: 40px; overflow: hidden; }
.archive-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.archive-hero .t-lead { max-width: 44ch; }
.term { margin-top: 30px; max-width: 470px; border: 1px solid rgba(244, 241, 235, .16); border-radius: 12px; background: rgba(12, 11, 10, .55); font: 13.5px/1.7 var(--f-mono); color: var(--arcilla); overflow: hidden; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
.term__bar { display: flex; align-items: center; gap: 6px; margin: 0; padding: 9px 14px; border-bottom: 1px solid rgba(244, 241, 235, .12); background: rgba(244, 241, 235, .04); }
.term__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 241, 235, .22); }
.term__bar i:first-child { background: var(--terra); }
.term__bar .pixel { margin-left: auto; font-size: 10px; color: var(--muted-d); }
.term__l, .term__o { margin: 0; padding: 0 16px; }
.term__l:first-of-type { padding-top: 12px; }
.term__o { color: var(--cian); }
.term__l--last { padding-bottom: 12px; }
.term__p { color: var(--terra); }
.term .caret { height: 1em; width: .55em; vertical-align: -.12em; }

/* fichas recientes: vidrio sobre brasas que se deshacen en grano */
.deck { position: relative; min-height: 380px; }
/* la textura del héroe se une con la de la carpeta en una sola (.archive__glow), sin cortes */
.deck::before { display: none; }
.deck::before { content: ""; position: absolute; inset: -8% -18% -10% -6%; background: #0f2624 url("../img/art/night.webp") center / cover; -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; }
.deck__label { position: absolute; left: 6%; top: 2%; z-index: 4; margin: 0; font-size: 11px; color: var(--carbon); background: var(--cian); padding: 5px 9px; }
.icard { --fc: var(--carbon); position: absolute; z-index: 2; width: min(330px, 78%); display: grid; gap: 10px; padding: 18px 20px 20px; border-radius: 14px; color: var(--papel); text-decoration: none;
  background: linear-gradient(140deg, rgba(244, 241, 235, .2), rgba(244, 241, 235, .06)); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(244, 241, 235, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 50px -26px rgba(0, 0, 0, .75);
  left: 0; top: 0; translate: var(--x) var(--y); rotate: var(--r); transition: translate .5s cubic-bezier(.2, .8, .2, 1), rotate .5s cubic-bezier(.2, .8, .2, 1), scale .5s, box-shadow .5s; }
.icard--0 { --x: 6%; --y: 60px; --r: -6deg; z-index: 3; }
.icard--1 { --x: 36%; --y: 190px; --r: 4deg; }
.icard--2 { --x: 14%; --y: 320px; --r: -2deg; z-index: 1; }
.icard:hover, .icard:focus-visible { z-index: 5; translate: var(--x) calc(var(--y) - 12px); rotate: 0deg; scale: 1.03; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 40px 60px -26px rgba(0, 0, 0, .85); }
.icard__top { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: rgba(244, 241, 235, .82); }
.icard__dot { width: 9px; height: 9px; border-radius: 2px; background: var(--fc); box-shadow: 0 0 0 1px rgba(244, 241, 235, .5); }
.icard__code { margin-left: auto; color: var(--papel); opacity: .75; }
.icard__t { font: 500 17px/1.35 var(--f-mono); letter-spacing: -.02em; }
.icard__t::before { content: "> "; color: var(--cian); }
.icard__m { font-size: 11.5px; color: rgba(244, 241, 235, .7); }

/* la carpeta */
/* misma tinta que el héroe y sin borde de panel: se lee como una sola superficie oscura; la
   carpeta sube casi hasta la terminal. En horizontal se recorta por la marca de agua «ARCHIVO» */
.archive { overflow-x: clip; overflow-y: visible; margin-top: 0; padding-top: 0; border-radius: 0; box-shadow: none; }
.archive .binder { margin-top: 10px; }
/* la textura cian (degradado pixelado, la misma del héroe) detrás de la carpeta: le da
   profundidad. Una sola grande a la derecha que sube hasta el héroe por el lado contrario a la
   terminal (nunca encima de ella) y otra más suave abajo a la izquierda. La carpeta va encima (.wrap con z-index 1) */
.archive > .wrap { z-index: 1; }
.archive__glow { position: absolute; z-index: 0; top: -560px; left: 52%; right: -10%; height: 1300px;   /* a la derecha de la columna de la terminal; sube hasta donde estaba la del héroe */
  pointer-events: none;
  background: #0f2624 url("../img/art/night.webp") center / cover;
  -webkit-mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; mask: url("../img/art/dissolve-mask.png") center / 100% 100% no-repeat; }
.archive__glow--b { top: 46%; right: auto; left: -14%; width: 52%; height: 700px; opacity: .65; transform: scaleX(-1); }
/* en una columna la terminal ocupa el ancho: la textura sube solo hasta justo debajo */
@media (max-width: 960px) { .archive__glow { top: -26px; left: 30%; } }
@media (max-width: 700px) {
  .archive__glow { top: -26px; left: auto; right: -40%; width: 150%; height: 560px; }   /* la terminal ocupa todo el ancho: sube hasta justo debajo */
  .archive__glow--b { top: 40%; left: -50%; width: 140%; height: 520px; }
}
/* la carpeta es papel: su texto va en tinta oscura aunque la sección sea oscura */
.archive .binder__body { color: var(--carbon); }
.archive::after { content: "ARCHIVO"; position: absolute; right: -1%; top: 40px; font: 400 clamp(90px, 14vw, 210px)/1 var(--f-pixel); color: var(--papel); opacity: .035; pointer-events: none; letter-spacing: -.02em; }
.binder { --tc: var(--papel); --tk: var(--carbon); position: relative; z-index: 1; perspective: 1800px; perspective-origin: 50% 0; }
/* sin z-index propio: así cada pestaña se ordena contra la carpeta (las cerradas quedan detrás
   y la abierta delante, unida a la franja de su color) */
.binder__tabs { position: relative; display: flex; align-items: flex-end; padding: 0 12px; }
/* pestañas: salen de detrás de la carpeta, como separadores de un archivador. Cada una baja
   14 px por detrás del borde (margin-bottom negativo), así se ve que nacen de la carpeta; la
   abierta queda delante, crece y se une a la franja de su color. Al pasar el mouse la pestaña
   sube un poco, como cuando se tira de ella, y se aviva el color. Si hay varias filas, las de
   atrás bajan (--reach, lo calcula site.js) por detrás de las de adelante hasta la carpeta. */
.binder__tab { --reach: 0px; box-sizing: border-box; position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 8px; height: calc(56px + var(--reach)); margin: 0 3px calc(-14px - var(--reach)) 0; padding: 0 12px calc(14px + var(--reach)) 11px; border-radius: 10px 10px 0 0; background: var(--c); color: var(--k); font-size: 13.5px; text-decoration: none; white-space: nowrap;
  filter: saturate(.7) brightness(.95); transition: filter .25s, transform .3s cubic-bezier(.2, .8, .2, 1);   /* sin transición de alto: site.js mide las pestañas para que las de atrás lleguen a la carpeta */ box-shadow: inset 0 -24px 14px -16px rgba(0, 0, 0, .35); }
.binder__tab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../img/tex/grain.webp"); opacity: .18; mix-blend-mode: overlay; pointer-events: none; }
.binder__code { font-size: 10px; opacity: .7; }
.binder__n { font-size: 11px; opacity: .65; }
.binder__tab:hover { filter: none; }
.binder__tab:not(.is-on):hover { transform: translateY(-6px); }
.binder__tab.is-on { z-index: 2; height: 62px; margin-bottom: -10px; padding-bottom: 10px; filter: none; box-shadow: none; }   /* termina justo donde termina la franja (10 px) */
.binder__tab:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.binder__body { position: relative; z-index: 1; min-height: 70vh; padding: clamp(24px, 3.5vw, 46px); border-radius: 6px 20px 20px 20px; background: var(--papel); border-top: 10px solid var(--tc);
  transition: border-color .45s; box-shadow: 0 50px 80px -46px rgba(27, 26, 23, .7), 0 1px 0 rgba(27, 26, 23, .1); }
.binder__body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../img/tex/fibers.webp") repeat; background-size: 512px; opacity: .45; pointer-events: none; }
.binder__body > * { position: relative; }
/* hoja de atrás: detrás de las pestañas (z -1) y desde donde empieza la carpeta; --sheet-top lo
   ajusta site.js según cuántas filas de pestañas haya */
.binder::after { content: ""; position: absolute; left: 14px; right: -10px; top: var(--sheet-top, 70px); bottom: -12px; z-index: -1; border-radius: 6px 20px 20px 20px; background: #CFC4B2; box-shadow: 0 30px 50px -40px rgba(27, 26, 23, .6); }

.binder__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1.5px solid var(--carbon); }
.binder__path { margin: 0 0 8px; font-size: 12px; color: var(--muted-l); }
.binder__path b { color: var(--terra); font-weight: 400; }
.binder__title { margin: 0; font: 400 clamp(2rem, 3.6vw, 3rem)/1.02 var(--f-serif); }
.binder__count { margin: 10px 0 0; font-size: 12px; color: var(--muted-l); }
.binder__filter { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 1 400px; padding: 0 12px 0 16px; border-radius: 999px; background: var(--carbon); color: var(--arcilla); box-shadow: 0 14px 30px -20px rgba(27, 26, 23, .8); }
.binder__filter-p { font-size: 12px; color: var(--cian); }
.binder__filter input { flex: 1; min-width: 0; padding: 14px 0; border: 0; background: none; color: inherit; font: 14.5px var(--f-mono); outline: none; caret-color: var(--cian); }
.binder__filter input::placeholder { color: var(--muted-d); }
.binder__filter:focus-within { outline: 2px solid var(--cian); outline-offset: 2px; }
.binder__kbd { font-size: 11px; padding: 2px 7px; border: 1px solid rgba(244, 241, 235, .3); border-radius: 5px; color: var(--muted-d); }

/* expediente destacado */
.dossier { --fc: var(--carbon); position: relative; display: grid; gap: 12px; margin: 34px 0 30px; padding: 30px 34px 28px; background: #FBF9F4; color: var(--carbon); text-decoration: none; border: 1px solid rgba(27, 26, 23, .12); border-left: 6px solid var(--fc);
  box-shadow: 0 2px 0 rgba(27, 26, 23, .05), 8px 10px 0 -2px #E4DCCD, 8px 10px 0 -1px rgba(27, 26, 23, .1), 0 30px 50px -40px rgba(27, 26, 23, .6); --pivot: 51px 0; transform: rotate(-.8deg); transform-origin: var(--pivot); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }   /* el punto fijo es el clip: al moverse, gira el lado del sello */
.dossier:hover { transform: rotate(.6deg); }
.dossier__clip { position: absolute; top: -34px; left: 34px; width: 34px; height: auto; transform: rotate(4deg); pointer-events: none; }
.dossier__stamp { position: absolute; right: 28px; top: 20px; width: 150px; height: auto; transform: rotate(7deg); mix-blend-mode: multiply; opacity: .92; pointer-events: none; }
.dossier__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted-l); padding-right: 120px; }
.dossier__meta > span:first-child { color: var(--terra); }
.dossier__folder { display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .04em; }
.dossier__folder::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--fc); }
.dossier__t { font: 400 clamp(1.8rem, 3.2vw, 2.7rem)/1.06 var(--f-serif); max-width: 22ch; }
.dossier__s { font-size: 16px; line-height: 1.6; color: #3A3631; max-width: 66ch; }
.dossier__cta { margin-top: 6px; font-size: 12.5px; color: var(--terra); }
.dossier:hover .dossier__cta span { display: inline-block; transform: translateX(4px); transition: transform .3s; }

/* documentos */
.files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-light); }
.file { --fc: var(--carbon); }
.file a { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 22px; gap: 20px; align-items: start; padding: 20px 10px 20px 14px; border-bottom: 1px solid var(--line-light); color: inherit; text-decoration: none; transition: background .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.file a::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--fc); transform: scaleY(.25); transform-origin: 50% 0; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.file a:hover, .file a:focus-visible { background: rgba(255, 255, 255, .55); transform: translateX(6px); }
.file a:hover::before, .file a:focus-visible::before { transform: none; }
.file__code { font-size: 12px; color: var(--muted-l); padding-top: 6px; }
.file a:hover .file__code { color: var(--terra); }
.file__folder { display: none; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-l); margin-bottom: 5px; }
.file__folder i { width: 8px; height: 8px; border-radius: 2px; background: var(--fc); }
.binder.is-all .file__folder { display: flex; }
/* búsqueda global: cada resultado muestra su carpeta; los de otras carpetas llevan la etiqueta
   con el color de la suya y van después de un separador */
.binder.is-search .file__folder { display: flex; }
.file.is-other .file__folder { width: fit-content; padding: 4px 9px 4px 7px; border-radius: 999px; background: color-mix(in srgb, var(--fc) 16%, #FBF9F4); border: 1px solid color-mix(in srgb, var(--fc) 45%, transparent); color: var(--carbon); }
.files__sep { display: flex; align-items: center; gap: 12px; padding: 26px 0 10px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-l); }
.files__sep::after { content: ""; flex: 1; border-top: 1px dashed rgba(27, 26, 23, .3); }
.files__sep[hidden] { display: none; }
.file__title { display: block; font: 400 clamp(1.25rem, 1.9vw, 1.6rem)/1.2 var(--f-serif); }
.file__sum { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted-l); }
.file mark { background: color-mix(in srgb, var(--cian) 45%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.file__meta { display: grid; justify-items: end; gap: 8px; font-size: 12px; color: var(--muted-l); white-space: nowrap; padding-top: 6px; }
.mins { display: inline-flex; align-items: center; gap: 8px; }
.mins i { width: calc(var(--m) * 7px); height: 7px; background: repeating-linear-gradient(90deg, var(--fc) 0 5px, transparent 5px 7px); opacity: .8; }
.file__go { padding-top: 4px; color: var(--terra); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s; }
.file a:hover .file__go { opacity: 1; transform: none; }
.binder__more { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 13px 22px; border: 1.5px dashed var(--carbon); border-radius: 999px; background: none; font: 600 14px var(--f-sans); color: var(--carbon); cursor: pointer; transition: background .25s, color .25s, border-style .25s; }
.binder__more:hover { background: var(--carbon); color: var(--papel); border-style: solid; }
.archive-empty.term { max-width: 560px; margin: 30px 0 10px; padding: 14px 0; }
.archive-empty.term .term__l:first-of-type { padding-top: 0; }
.archive-empty { color: var(--muted-l); padding: 16px 0 30px; }

.bcat { font: 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--terra); }
.bdate { font: 12px var(--f-mono); color: var(--muted-l); }
.more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.more-head__all { font-size: 12.5px; color: var(--cian); text-decoration: none; }
.more-head__all:hover { text-decoration: underline; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin-top: 60px; }
.pager__a { display: grid; gap: 8px; padding: 18px 20px; border: 1.5px solid var(--carbon); border-radius: 14px; color: inherit; text-decoration: none; transition: background .25s, transform .3s var(--ease); }
.pager__a:hover { background: var(--papel); transform: translateY(-2px); }
.pager__a .mono { font-size: 11.5px; color: var(--terra); }
.pager__a b { font: 400 20px/1.2 var(--f-serif); }
.pager__a--next { grid-column: 2; text-align: right; }
@media (max-width: 1180px) {
  /* si no caben, varias filas montadas como separadores de archivador (cada una tapa la base de
     la de atrás). La fila de la pestaña abierta siempre va adelante, sobre la carpeta: site.js
     (initBlog) reordena las filas y mete un salto de línea entre ellas. */
  .binder__tabs { flex-wrap: wrap; row-gap: 0; }
  .binder__br { flex-basis: 100%; height: 0; }
  .binder__code { display: none; }
}
@media (max-width: 960px) {
  .archive-hero__grid { grid-template-columns: 1fr; }
  .deck { display: none; }   /* en una columna la textura sola solo dejaba un hueco */
}
@media (max-width: 700px) {
  .archive-hero { padding-top: 120px; padding-bottom: 30px; }
  .icard { width: 80%; padding: 14px 16px 16px; }
  .icard__t { font-size: 14.5px; }
  .icard--0 { --y: 40px; } .icard--1 { --x: 18%; --y: 140px; } .icard--2 { --x: 6%; --y: 240px; }
  .binder__tab { height: calc(52px + var(--reach)); padding: 0 11px calc(14px + var(--reach)); font-size: 13px; gap: 6px; }
  .binder__tab.is-on { height: 54px; }
  .binder__code { display: none; }
  .binder__body { padding: 20px 16px 26px; border-radius: 4px 14px 14px 14px; }
  .binder__filter { flex-basis: 100%; }
  .binder__kbd { display: none; }
  .dossier { padding: 24px 20px 22px; margin-top: 26px; }
  .dossier__stamp { right: 12px; top: auto; bottom: 16px; width: 96px; }
  .dossier__clip { width: 26px; top: -26px; left: 22px; }
  .dossier { --pivot: 35px 0; }
  .dossier__meta { padding-right: 70px; }
  .dossier__s { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
  .file a { grid-template-columns: 1fr; gap: 6px; padding: 16px 6px 16px 12px; }
  .file__code, .file__go { display: none; }
  .file__meta { justify-items: start; grid-auto-flow: column; justify-content: start; gap: 14px; padding-top: 2px; }
  .pager { grid-template-columns: 1fr; }
  .pager__a--next { grid-column: auto; }
  .archive::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .icard, .dossier, .file a, .binder__tab { transition: none; } }

/* artículo */
.article { max-width: 68ch; font-size: 17.5px; line-height: 1.75; color: #3A3631; }
.article h2 { font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.15 var(--f-serif); color: var(--carbon); margin: 50px 0 14px; }
.article p { margin: 0 0 16px; }
.article strong { color: var(--carbon); }
.article ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 10px; }
.article ul li { position: relative; padding-left: 24px; }
.article ul li::before { content: "→"; position: absolute; left: 0; color: var(--terra); font-family: var(--f-mono); font-size: 14px; top: 2px; }
.article__source { margin-top: 40px; font: 13px var(--f-mono); color: var(--muted-l); }
.article__source a { color: var(--cian-ink); }
/* el artículo: un documento sacado de la carpeta del archivo. Mismo fondo oscuro con la textura
   cian, las pestañas llevan de vuelta a su tema y la hoja lleva la franja de color y el clip */
.archive--doc { padding-top: 128px; padding-bottom: clamp(70px, 9vw, 120px); }
.archive--doc .archive__glow { top: -40px; }
.archive--doc .binder { margin-top: 0; }
.archive--doc .binder__body { min-height: 0; }
.doc-bar { align-items: center; padding-bottom: 18px; }
.doc-bar .binder__path { margin: 0; }
.binder__path a { color: inherit; text-decoration: none; }
.binder__path a:hover { color: var(--terra); text-decoration: underline; }
.doc-back { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--carbon); color: var(--arcilla); font: 600 14px/1.2 var(--f-sans); text-decoration: none; box-shadow: 0 14px 30px -20px rgba(27, 26, 23, .8); transition: background .25s, color .25s; }
.doc-back span { color: var(--cian); transition: transform .3s var(--ease); }
.doc-back:hover { background: #000; }
.doc-back:hover span { transform: translateX(-4px); }
.doc-back:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
/* la hoja del artículo del blog; no aplica a las secciones legales, que también se llaman .doc pero son paneles */
.doc:not(.panel) { --fc: var(--carbon); position: relative; margin: 46px 0 0; padding: clamp(34px, 5vw, 64px) clamp(22px, 6vw, 84px) clamp(36px, 5vw, 64px); background: #FBF9F4; color: var(--carbon);
  border: 1px solid rgba(27, 26, 23, .12); border-left: 6px solid var(--fc); box-shadow: 0 30px 50px -36px rgba(27, 26, 23, .55); }
.doc__clip { position: absolute; top: -34px; left: clamp(22px, 6vw, 84px); width: 34px; height: auto; transform: rotate(4deg); pointer-events: none; }
.doc .dossier__meta { margin: 0 0 20px; padding-right: 0; }
.doc__t { margin: 0; max-width: 20ch; font: 400 clamp(2.2rem, 4.6vw, 3.9rem)/1.02 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.doc__lead { max-width: 58ch; margin: 22px 0 34px; padding-bottom: 30px; border-bottom: 1px dashed rgba(27, 26, 23, .3); font: 400 clamp(1.15rem, 1.6vw, 1.35rem)/1.5 var(--f-serif); color: #3A3631; }
.doc .article > div:first-child > :first-child { margin-top: 0; }
.doc-more { margin-top: clamp(56px, 7vw, 90px); }
.doc-more .binder__bar { align-items: flex-end; }
.files--mixed .file__folder { display: flex; }
/* al volver del artículo, el documento que se leía se ilumina un momento */
.file.is-back a, .dossier.is-back { animation: back-flash 1.8s ease-out; }
@keyframes back-flash { from { background-color: color-mix(in srgb, var(--cian) 38%, #FBF9F4); } }
@media (max-width: 700px) {
  .archive--doc { padding-top: 104px; }
  .archive--doc .binder__body { padding: 16px 10px 24px; }
  .doc-bar { padding: 4px 6px 16px; }
  .doc-back { padding: 11px 16px; font-size: 13.5px; }
  .doc:not(.panel) { margin-top: 36px; padding: 30px 18px 32px; border-left-width: 5px; }
  .doc__clip { width: 26px; top: -26px; left: 18px; }
  .doc .article { font-size: 16.5px; }
  .doc-more .binder__bar { padding: 0 6px 16px; }
}
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.related a { display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 20px; border-radius: 14px; border: 1px solid var(--line-dark); color: var(--arcilla); text-decoration: none; transition: border-color .25s, transform .3s var(--ease); }
.related a:hover { border-color: var(--cian); transform: translateY(-3px); }
.related .bcat { color: var(--cian); }
.related b { font: 400 22px/1.2 var(--f-serif); flex: 1; }
.related .bdate { color: var(--muted-d); }

@media (max-width: 960px) {
  .doc__grid { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
  .related { grid-template-columns: 1fr; }
  .page-head { padding-top: 120px; padding-bottom: 60px; }
}