/* ══════════════════════════════════════════════════════════════════════════
   Factor 18 — componentes de página
   Barra superior, pie, aviso de cookies y las piezas de las páginas
   interiores (blog, proyectos, artículos, legal). Depende de sistema.css:
   aquí no se declara ni un color nuevo, todo sale de los tokens de marca.
   ══════════════════════════════════════════════════════════════════════════ */

/* columnas del pie (de sistema.css) y grupos de la ficha técnica */
.pie-col{min-width:0}
.pie-col ul{display:flex;flex-direction:column;gap:0}
.pie-col h4{margin-bottom:var(--sp-16)}
.caso-dato{margin-bottom:var(--sp-12)}
.caso-dato:last-child{margin-bottom:0}

/* ───────────────────────── CABECERA DE PÁGINA INTERIOR ───────────────── */
.pagina-cab{padding-block:clamp(40px,5vw,72px) var(--sp-48);border-bottom:1px solid var(--borde)}
.pagina-cab h1{max-width:26ch;margin-bottom:var(--sp-20)}
.pagina-cab .lead{max-width:64ch}
.migas{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-24)}
.migas a{color:var(--muted);transition:color var(--dur) var(--ease)}
.migas a:hover{color:var(--fg)}
.migas span[aria-hidden]{color:var(--borde)}

/* ───────────────────────── LECTURA LARGA ─────────────────────────────── */
.art{max-width:74ch;padding-block:var(--sp-64)}
.art h1{font-family:var(--f-display);font-size:var(--t-display-l);font-weight:600;
  line-height:1.12;letter-spacing:-.020em;margin-bottom:var(--sp-24)}
.art h2{font-family:var(--f-display);font-size:var(--t-display-m);font-weight:600;
  line-height:1.2;letter-spacing:-.014em;margin:var(--sp-48) 0 var(--sp-16)}
.art h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.008em;line-height:1.35;
  margin:var(--sp-32) 0 var(--sp-12)}
.art p{font-size:var(--t-body);line-height:1.7;color:var(--fg);margin-bottom:var(--sp-20);overflow-wrap:anywhere}
.art p.lead{font-size:var(--t-lead);line-height:1.6;color:var(--muted);margin-bottom:var(--sp-32)}
.art ul,.art ol{margin:0 0 var(--sp-24);padding-left:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.art li{font-size:var(--t-body);line-height:1.65;color:var(--fg);display:block;position:relative;
  padding-left:var(--sp-24)}
.art ul li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;
  border-radius:50%;background:var(--azul)}
.art ol{counter-reset:art-ol}
.art ol li{counter-increment:art-ol}
.art ol li::before{content:"0" counter(art-ol);position:absolute;left:0;top:.1em;
  font-family:var(--f-mono);font-size:var(--t-micro);font-weight:500;color:var(--azul-700)}
.art li > *,.ley li > *{overflow-wrap:anywhere}
.art a:not(.btn){color:var(--azul-700);text-decoration:underline;text-underline-offset:3px}
.art a:not(.btn):hover{color:var(--azul-900)}
[data-theme="oscuro"] .art a:not(.btn){color:var(--azul-300)}
[data-theme="oscuro"] .art a:not(.btn):hover{color:var(--hueso)}
.art strong,.art b{font-weight:600;color:var(--fg)}
.art code,.ley code{font-family:var(--f-mono);font-size:.92em;background:var(--sup-2);
  border:1px solid var(--borde);border-radius:var(--r-xs);padding:1px 5px;
  display:inline;overflow-wrap:anywhere}
.art .kicker{margin-bottom:var(--sp-16)}
.art .nota{margin-block:var(--sp-32)}
.art-meta{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-16)}

/* tabla dentro de lectura: se desplaza en horizontal sin empujar la página */
.art .tabla-scroll{margin-block:var(--sp-32);max-width:100%}
@media (max-width:900px){ .art .tabla-scroll{position:relative} }
.art .tabla caption{max-width:74ch}

/* bloque de cierre con llamado a la acción */
.art-cta{margin-top:var(--sp-48);background:var(--sup);border:1px solid var(--borde);
  border-top:2px solid var(--azul);border-radius:var(--r-lg);padding:var(--sp-32);box-shadow:var(--e1)}
.art-cta h3{font-family:var(--f-display);font-size:var(--t-display-m);font-weight:600;
  letter-spacing:-.014em;margin:0 0 var(--sp-12)}
.art-cta p{font-size:var(--t-body-s);line-height:1.6;color:var(--muted);margin-bottom:var(--sp-24);max-width:60ch}
.art-cta a.btn{margin:0}

/* ───────────────────────── LISTADO DEL BLOG ──────────────────────────── */
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-24);padding-block:var(--sp-64)}
@media (max-width:920px){ .post-grid{grid-template-columns:1fr;gap:var(--sp-16)} }
.post-card{display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--r-lg);padding:var(--sp-32);box-shadow:var(--e1);
  transition:box-shadow var(--dur-slow) var(--ease),border-color var(--dur) var(--ease)}
.post-card:hover{box-shadow:var(--e3);border-color:var(--azul-400)}
.post-tag{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:var(--r-full);
  background:var(--tinte-bg);color:var(--tinte-txt);font-family:var(--f-mono);font-size:var(--t-micro);
  font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-20)}
.post-card h2{font-family:var(--f-display);font-size:var(--t-display-m);font-weight:600;
  line-height:1.2;letter-spacing:-.014em;margin-bottom:var(--sp-12)}
.post-card p{font-size:var(--t-body-s);line-height:1.6;color:var(--muted);flex:1 1 auto;max-width:58ch}
.post-card h2{max-width:30ch}
.post-meta{margin-top:var(--sp-24);padding-top:var(--sp-16);border-top:1px solid var(--borde);
  font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.04em;color:var(--muted)}
.post-card:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ───────────────────────── CASOS DE PROYECTOS ────────────────────────── */
.caso{border-top:1px solid var(--borde);padding-block:var(--sp-64)}
.caso-cab{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-40);align-items:end;margin-bottom:var(--sp-32)}
.caso h2{font-family:var(--f-display);font-size:var(--t-display-l);font-weight:600;
  line-height:1.12;letter-spacing:-.020em;margin-bottom:var(--sp-12)}
.caso-cab .lead{max-width:52ch}
.caso-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12)}
.caso-cuerpo{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);
  gap:var(--sp-48);align-items:start}
.caso-cuerpo h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.008em;margin-bottom:var(--sp-12)}
.caso-cuerpo p{font-size:var(--t-body-s);line-height:1.65;color:var(--muted);margin-bottom:var(--sp-16);max-width:62ch}
.caso-datos{background:var(--sup);border:1px solid var(--borde);border-radius:var(--r-lg);
  padding:var(--sp-24);box-shadow:var(--e1)}
.caso-datos h3{font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-16)}
.caso-datos dl{margin:0;display:flex;flex-direction:column;gap:var(--sp-12)}
.caso-datos dt{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.caso-datos dd{margin:0 0 var(--sp-12);font-size:var(--t-small);line-height:1.5;font-weight:500}
.caso-datos dd:last-child{margin-bottom:0}

/* capturas de producto: conservan su proporción y su marco completo */
.shot-tira{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);align-items:start;
  margin-top:var(--sp-32)}
.shot img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--borde);
  box-shadow:var(--e1);background:var(--sup-2)}
.shot-cap{font-size:var(--t-caption);line-height:1.45;color:var(--muted);margin-top:var(--sp-12)}
.shot-ancho{margin-top:var(--sp-32)}
.shot-ancho img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--borde);
  box-shadow:var(--e1);background:var(--sup-2)}
.franja-metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-24);
  margin-top:var(--sp-32);padding-top:var(--sp-24);border-top:1px solid var(--borde)}
.franja-metricas div{display:flex;flex-direction:column;gap:var(--sp-4)}
.franja-metricas .dato{font-size:var(--t-display-m);color:var(--fg)}
.franja-metricas .etq{margin-top:2px}

/* ───────────────────────── DOCUMENTOS LEGALES ────────────────────────── */
.ley{max-width:78ch;padding-block:var(--sp-48) var(--sp-80)}
.ley h2{font-family:var(--f-display);font-size:var(--t-display-m);font-weight:600;
  letter-spacing:-.014em;line-height:1.2;margin:var(--sp-48) 0 var(--sp-16)}
.ley h2:first-of-type{margin-top:var(--sp-32)}
.ley h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.008em;margin:var(--sp-32) 0 var(--sp-12)}
.ley p,.ley li{font-size:var(--t-small);line-height:1.7;color:var(--fg);overflow-wrap:anywhere}
.ley p{margin-bottom:var(--sp-16)}
.ley ul,.ley ol{margin:0 0 var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-8)}
.ley li{display:block;position:relative;padding-left:var(--sp-20)}
.ley ul li::before{content:"";position:absolute;left:2px;top:.65em;width:5px;height:5px;
  border-radius:50%;background:var(--azul)}
.ley ol{counter-reset:ley-ol;padding-left:0}
.ley ol li{counter-increment:ley-ol;padding-left:var(--sp-24)}
.ley ol li::before{content:counter(ley-ol) ".";position:absolute;left:0;top:0;
  font-family:var(--f-mono);font-size:var(--t-small);color:var(--azul-700)}
.ley a{color:var(--azul-700);text-decoration:underline;text-underline-offset:3px}
[data-theme="oscuro"] .ley a{color:var(--azul-300)}
.ley .fecha{font-family:var(--f-mono);font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-24)}
.toc{display:flex;flex-wrap:wrap;gap:var(--sp-12);padding-block:var(--sp-32)}
.toc a{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--borde);
  border-radius:var(--r-md);background:var(--sup);font-size:var(--t-small);font-weight:500;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.toc a:hover{border-color:var(--azul-400)}
[data-theme="oscuro"] .ley{color:var(--fg)}

/* ───────────────────────── ADAPTACIÓN DE INTERIORES ──────────────────── */
@media (max-width:920px){
  .caso-cab{grid-template-columns:1fr;gap:var(--sp-24)}
  .caso-cuerpo{grid-template-columns:1fr;gap:var(--sp-24)}
  .shot-tira{grid-template-columns:repeat(2,1fr);gap:var(--sp-16)}
  .franja-metricas{grid-template-columns:1fr 1fr}
  .art{max-width:none}
}
@media (max-width:600px){
  .pagina-cab{padding-block:var(--sp-40) var(--sp-32)}
  .art{padding-block:var(--sp-40)}
  .art h2{margin-top:var(--sp-32)}
  .shot-tira{grid-template-columns:1fr}
  .franja-metricas{grid-template-columns:1fr;gap:var(--sp-16)}
  .post-grid{padding-block:var(--sp-40)}
  .post-card{padding:var(--sp-24)}
  .art-cta{padding:var(--sp-24)}
  .caso{padding-block:var(--sp-40)}
  .toc{padding-block:var(--sp-24)}
  .toc a{width:100%;justify-content:center}
  .ley{padding-block:var(--sp-32) var(--sp-48)}
}