/* ===== marca: School On-Chain ===== */
:root{--hack:#ff3b57}
.topbar .brand{gap:10px}
.topbar .brand .dot{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#38bdf8,#ff3b57)}
.topbar .brand .bn{display:flex;flex-direction:column;line-height:1.05;font-weight:800;letter-spacing:.01em}
.topbar .brand .bn small{font-weight:500;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.socs{display:flex;gap:6px;flex:none}
.soc{display:inline-flex;align-items:center;gap:6px;color:var(--soft);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12.5px;background:var(--pan)}
.soc:hover{border-color:var(--acc);color:var(--fg)}
.soc.big{padding:7px 14px;font-size:13.5px}
@media (max-width:1100px){.socs .soc span{display:none}.soc{padding:6px 8px}}
@media (max-width:640px){.topbar .brand .bn small{display:none}.socs{display:none}}

/* portada con tema del caso */
.hero2{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:center;margin:26px 0 10px;padding:30px;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(900px 420px at 88% -10%,rgba(255,59,87,.22),transparent 60%),radial-gradient(700px 380px at 0% 110%,rgba(56,189,248,.16),transparent 60%),var(--pan)}
.hero2 .kick{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hack)}
.hero2 .kick::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hack);box-shadow:0 0 0 4px rgba(255,59,87,.2)}
.hero2 h1{margin:10px 0 10px;font-size:clamp(28px,4.2vw,44px);line-height:1.08;letter-spacing:-.015em}
.hero2 h1 em{font-style:normal;background:linear-gradient(90deg,#38bdf8,#ff3b57);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero2 p{margin:0 0 16px;color:var(--soft);font-size:16.5px;max-width:560px}
.hero2 .lema{font-size:13px;color:var(--mut);margin-top:14px;border-left:3px solid var(--hack);padding-left:10px}
.hero2 .cta{display:flex;flex-wrap:wrap;gap:10px}
.hero2 .art{position:relative;aspect-ratio:1.18/1;border-radius:18px;overflow:hidden;border:1px solid rgba(255,59,87,.45);box-shadow:0 0 0 1px rgba(255,255,255,.03),0 18px 60px rgba(255,59,87,.18)}
.hero2 .art i{position:absolute;inset:0;background:url(img/portada/intro.webp) center/cover no-repeat}
.hero2 .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,10,16,.85))}
.hero2 .art .cap2{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;font-size:12.5px;letter-spacing:.02em}
.hero2 .art .cap2 b{display:block;font-size:15px}
@media (max-width:900px){.hero2{grid-template-columns:1fr;padding:20px}.hero2 .art{aspect-ratio:1.6/1}}
.caso{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--hack);border-radius:6px;padding:3px 10px;margin-bottom:8px}
.rcard.destacada{border-color:rgba(255,59,87,.5);box-shadow:0 0 0 1px rgba(255,59,87,.12),var(--shadow)}
.rcard .caso{align-self:flex-start;margin:0}

footer.marca{margin:60px 0 0;padding:26px 0 40px;border-top:1px solid var(--line)}
footer.marca .mt{font-size:15px}
footer.marca .ml{color:var(--soft);font-size:13.5px;margin-top:2px}
footer.marca .ml2{color:var(--mut);font-size:13px}
footer.marca .ms{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
footer.marca .av{color:var(--mut);font-size:12px;max-width:820px;margin:8px 0 0}
/* botones con explicación */
.acciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 16px;margin:10px 0 4px;align-items:start}
.acc{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.acc .btn{align-self:flex-start;max-width:100%}
.acc .accd{margin:0;color:var(--soft);font-size:12.8px;line-height:1.45}
/* etiquetas de evidencia pulsables */
.estbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;vertical-align:baseline}
.estbtn:hover .est,.estbtn:focus-visible .est{filter:brightness(1.25);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}
.estbtn .estn{font-size:11.5px;color:var(--mut)}
.estbtn:hover .estn{color:var(--acc)}
/* ===== lo que parece pulsable, lo es ===== */
.est-click{cursor:pointer}
.est-click:hover,.est-click:focus-visible{filter:brightness(1.3);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 38%,transparent);outline:none}
.flash{animation:flashb 1.8s ease}
@keyframes flashb{0%,65%{outline:3px solid var(--acc);outline-offset:3px;border-radius:8px}100%{outline:3px solid transparent;outline-offset:3px}}
/* una tarjeta sin nada pulsable dentro es TEXTO: sin caja, sin sombra, solo un filete a la izquierda */
@supports selector(:has(*)){
  .card:not(:has(a[href],button,canvas,tr.clk,[onclick],summary,input,select,details,.est-click)){background:none;border:0;border-left:3px solid var(--line);border-radius:0;box-shadow:none;padding:4px 0 4px 16px}
}
/* las etiquetas informativas de la ficha (clase, salto, red) no parecen botones: son texto con separadores */
.chipx{border:0;background:none;border-radius:0;padding:2px 0;color:var(--soft)}
.chips2 .chipx+.chipx::before{content:'·';margin:0 8px 0 2px;color:var(--mut)}
.chipx.bad{color:var(--bad)}.chipx.ok{color:var(--ok)}
/* barra superior del informe: los capítulos van en una segunda fila (antes quedaban recortados detrás de las redes y el scroll estaba oculto) */
@supports selector(:has(*)){
  .topbar .wrap:has(nav a[href^="#cap-"]){flex-wrap:wrap;height:auto;min-height:54px;row-gap:0;padding-top:8px}
  .topbar .wrap:has(nav a[href^="#cap-"]) .socs{margin-left:auto}
  .topbar .wrap:has(nav a[href^="#cap-"]) nav{order:9;flex:1 0 100%;border-top:1px solid var(--line);margin-top:8px;padding:5px 0 6px;gap:4px}
  html:has(.topbar nav a[href^="#cap-"]) section.blk, html:has(.topbar nav a[href^="#cap-"]) .cap{scroll-margin-top:118px}
}
@media (max-width:900px){.topbar nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}}
/* Novedades (data/novedades.json): lista en la portada y en cada caso, y línea «Actualizado …» en las tarjetas. */
.novedades{background:var(--pan);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:18px 0 6px;box-shadow:var(--shadow)}
.novedades h2{margin:0 0 10px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.nov-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.45}
.nov-item:first-of-type{border-top:0}
.nov-cuando{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--soft)}
.nov-cuando b{color:var(--fg)}
.nov-hora{color:var(--mut);font-size:12px}
.nov-caso{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin-right:8px}
.nov-que a{color:var(--fg);text-decoration:none}.nov-que a:hover{color:var(--acc);text-decoration:underline}
.nov-nuevo{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:1px 7px;border-radius:999px;background:#ff3b57;color:#fff}
.nov-linea{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:1.4;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent)}
.nov-linea .nov-fecha{color:var(--soft);font-weight:600;white-space:nowrap}
.nov-linea .nov-t{color:var(--fg);text-decoration:none;flex:1 1 220px}
.nov-linea a.nov-t:hover{color:var(--acc);text-decoration:underline}
.rcard .nov-linea{margin-top:2px}
@media (max-width:640px){.nov-item{grid-template-columns:1fr;gap:2px}}

/* Tarjetas de la portada con imagen de cabecera (reports/index.json → "imagen") */
.rcard-img{position:relative;margin:-18px -18px 4px;aspect-ratio:16/10;overflow:hidden;border-radius:16px 16px 0 0;background:#0b0e13}
.rcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-img::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(to bottom,transparent,var(--pan))}

/* Intro: última novedad (automática) */
.hero2 .hero-nov{margin-top:14px;max-width:560px}
.hero2 .hero-nov:empty{display:none}