/* LitigaLab — base compartida de las páginas de jurisdicción/materia.
   Extraída literal del sistema visual de la home (index.html).
   La home mantiene su CSS inline; este archivo sirve a /cl/ y /mx/. */

:root{
  --bg-0:oklch(0.20 0.018 258); --bg-1:oklch(0.24 0.02 257); --bg-2:oklch(0.29 0.022 256);
  --bg-3:oklch(0.35 0.024 255);
  --fg:oklch(0.96 0.008 80); --fg-muted:oklch(0.75 0.012 80); --fg-faint:oklch(0.60 0.012 80);
  --accent:oklch(0.78 0.14 78); --accent-deep:oklch(0.62 0.13 70); --accent-ink:oklch(0.2 0.04 78);
  --ok:oklch(0.72 0.14 160); --bad:oklch(0.65 0.19 25);
  --rol-juez:oklch(0.78 0.14 78); --rol-contraparte:oklch(0.68 0.14 20); --rol-testigo:oklch(0.72 0.1 200);
  --border:oklch(1 0 0 / 10%); --border-hover:oklch(1 0 0 / 18%);
  --display:"Fraunces",ui-serif,Georgia,serif; --body:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(0.4,0,0.2,1); --spring:cubic-bezier(0.34,1.56,0.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{background:var(--bg-0);color:var(--fg);font-family:var(--body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-0.015em;text-wrap:balance;line-height:1.15}
h1 em,h2 em{font-style:italic;color:var(--accent)}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
.kicker{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--fg-faint)}
.kicker b{color:var(--accent);font-weight:500}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
section{padding:clamp(3.5rem,9vw,7rem) 0;position:relative}

/* fondo: retícula técnica enmascarada + grain */
.grid-bg::before{content:"";position:fixed;inset:0;background-image:linear-gradient(oklch(1 0 0/3.5%) 1px,transparent 1px),linear-gradient(90deg,oklch(1 0 0/3.5%) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,black 30%,transparent 75%);pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");pointer-events:none;z-index:60;opacity:.5}

/* nav */
nav{position:sticky;top:0;z-index:50;background:oklch(0.20 0.018 258 / 82%);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--display);font-size:1.15rem;font-weight:600;text-decoration:none}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:1.6rem;align-items:center;font-size:.875rem}
.nav-links a{text-decoration:none;color:var(--fg-muted);transition:color 150ms}
.nav-links a:hover{color:var(--fg)}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--accent-ink)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:46px;padding:0 1.5rem;border-radius:.5rem;font-weight:600;font-size:.9rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform 150ms var(--ease),box-shadow 200ms var(--ease),background 150ms}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px -8px oklch(from var(--accent) l c h / 50%)}
.btn-ghost{border-color:var(--border);color:var(--fg-muted)}
.btn-ghost:hover{border-color:var(--border-hover);color:var(--fg);background:var(--bg-1)}

.badge-live{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-muted);border:1px solid var(--border);border-radius:99px;padding:.38rem .9rem}
.badge-live .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* franja de confianza */
.franja{border-block:1px solid var(--border);padding:1.1rem 0;background:var(--bg-1)}
.franja .wrap{display:flex;gap:clamp(1rem,4vw,3rem);justify-content:center;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint)}
.franja b{color:var(--fg-muted);font-weight:500}

/* FAQ */
.faq{max-width:760px;margin:2.4rem auto 0}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;padding:1.1rem .2rem;font-weight:600;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.1rem;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resp{padding:0 .2rem 1.2rem;font-size:.9rem;color:var(--fg-muted)}

/* CTA final */
.final{text-align:center}
.final h2{font-size:clamp(1.8rem,4.5vw,2.8rem);max-width:24ch;margin:0 auto 1rem}

footer{border-top:1px solid var(--border);padding:2.2rem 0 2.6rem;font-size:.82rem;color:var(--fg-faint)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center}
footer a{color:var(--fg-muted);text-decoration:none}
footer a:hover{color:var(--fg)}

/* reveals */
.rv{animation:rv-in .7s var(--ease) backwards}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}.d4{animation-delay:.36s}
@keyframes rv-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.scroll-rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
h2.sec{font-size:clamp(1.7rem,4vw,2.5rem);margin-top:.7rem;max-width:26ch}
.sec-sub{color:var(--fg-muted);max-width:60ch;margin-top:.8rem}

/* ═══════ COMPONENTES DE PÁGINA DE JURISDICCIÓN / MATERIA ═══════ */

/* miga de pan */
.miga{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);padding-top:1.6rem}
.miga ol{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.miga a{text-decoration:none;color:var(--fg-faint);transition:color .15s}
.miga a:hover{color:var(--accent)}
.miga li+li::before{content:"/";margin-right:.5rem;color:var(--bg-3)}
.miga [aria-current]{color:var(--fg-muted)}

/* hero de materia */
.hero-mat{padding:clamp(2rem,5vw,3.2rem) 0 clamp(2.4rem,6vw,4rem)}
.hero-mat h1{font-size:clamp(2rem,5vw,3.4rem);max-width:22ch;margin:1rem 0 .35em}
.hero-mat .sub{color:var(--fg-muted);max-width:60ch;font-size:clamp(1rem,1.6vw,1.12rem);margin-bottom:2rem}
.hero-mat .ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-mat .micro{margin-top:.9rem;font-size:.78rem;color:var(--fg-faint)}

/* ficha del procedimiento (datos duros desde la BD) */
.ficha{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:.9rem;overflow:hidden;margin-top:2.6rem}
.ficha .celda{background:var(--bg-1);padding:1.3rem 1.4rem}
.ficha .et{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint)}
.ficha .val{font-size:.95rem;margin-top:.4rem;color:var(--fg)}
@media(max-width:820px){.ficha{grid-template-columns:1fr}}

/* aviso de ventana legal (CNPCyF) */
.aviso{border:1px solid oklch(from var(--accent) l c h/38%);background:linear-gradient(180deg,oklch(0.27 0.03 78/40%),var(--bg-1));border-radius:1rem;padding:clamp(1.5rem,3vw,2.1rem);margin-top:2.6rem}
.aviso .chip{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:99px;padding:.2rem .7rem;font-weight:600}
.aviso h2{font-size:clamp(1.3rem,2.6vw,1.7rem);margin:.9rem 0 .6rem;max-width:30ch}
.aviso p{font-size:.93rem;color:var(--fg-muted);max-width:72ch}
.aviso p+p{margin-top:.7rem}
.aviso .fuente{font-size:.76rem;color:var(--fg-faint);margin-top:1rem;border-top:1px solid var(--border);padding-top:.8rem}
.aviso .fuente a{color:var(--fg-muted)}

/* cuenta regresiva / hitos con fecha */
.hitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin-top:1.4rem}
.hito{background:oklch(0.20 0.018 258/60%);border:1px solid var(--border);border-radius:.7rem;padding:1rem 1.1rem}
.hito .fecha{font-family:var(--mono);font-size:.95rem;color:var(--accent);font-variant-numeric:tabular-nums}
.hito .que{font-size:.82rem;color:var(--fg-muted);margin-top:.3rem}
.hito.vigente .fecha{color:var(--ok)}
.hito .est{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);margin-top:.45rem}
.hito.vigente .est{color:var(--ok)}

/* línea de fases del procedimiento */
.fases{margin-top:2.6rem;display:grid;gap:0}
.fase{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;position:relative;padding-bottom:1.8rem}
.fase:last-child{padding-bottom:0}
.fase .marca{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.fase .num{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.78rem;color:var(--accent);border:1px solid oklch(from var(--accent) l c h/40%);background:var(--bg-1);z-index:1}
.fase .linea{width:1px;flex:1;background:var(--border);min-height:14px}
.fase:last-child .linea{display:none}
.fase .cuerpo{background:var(--bg-1);border:1px solid var(--border);border-radius:.8rem;padding:1.2rem 1.3rem;transition:border-color .2s,transform .25s var(--ease)}
.fase .cuerpo:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.fase h3{font-size:1.08rem;margin-bottom:.35rem}
.fase p{font-size:.88rem;color:var(--fg-muted)}
.fase .actores{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem}
.fase .act{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.16rem .55rem;border-radius:99px;border:1px solid var(--border);color:var(--fg-faint)}
.fase .act.juez{color:var(--rol-juez);border-color:oklch(from var(--rol-juez) l c h/35%)}
.fase .act.contraparte{color:var(--rol-contraparte);border-color:oklch(from var(--rol-contraparte) l c h/35%)}
.fase .act.testigo{color:var(--rol-testigo);border-color:oklch(from var(--rol-testigo) l c h/35%)}

/* normas que gobiernan la simulación */
.normas{display:grid;gap:.7rem;margin-top:2.2rem;list-style:none}
.normas li{background:var(--bg-1);border:1px solid var(--border);border-left:2px solid var(--accent);border-radius:.5rem;padding:.95rem 1.2rem;font-size:.9rem;color:var(--fg-muted);font-family:var(--mono)}

/* roles jugables */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem}
.rol{background:var(--bg-1);border:1px solid var(--border);border-radius:.9rem;padding:1.5rem 1.4rem}
.rol .et{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.rol h3{font-size:1.1rem;margin:.5rem 0 .4rem}
.rol p{font-size:.88rem;color:var(--fg-muted)}
@media(max-width:720px){.roles{grid-template-columns:1fr}}

/* rejilla de materias (hub) */
.materias{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
.mat{background:var(--bg-1);border:1px solid var(--border);border-radius:.9rem;padding:1.5rem 1.4rem;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,transform .25s var(--ease),background .2s}
.mat:hover{border-color:oklch(from var(--accent) l c h/45%);transform:translateY(-3px);background:var(--bg-2)}
.mat .et{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mat h3{font-size:1.05rem;margin:.5rem 0 .35rem}
.mat p{font-size:.83rem;color:var(--fg-muted);flex:1}
.mat .tribunal{font-family:var(--mono);font-size:.66rem;color:var(--fg-faint);margin-top:.9rem;border-top:1px solid var(--border);padding-top:.7rem}
.mat.pronto{opacity:.6;pointer-events:none}
/* La flecha va SIEMPRE visible en las tarjetas que son enlace: si solo apareciera
   al hover, las tarjetas no clicables (que sí muestran su leyenda) parecerían las
   accionables. El hover solo la desplaza. */
.mat .flecha{font-family:var(--mono);font-size:.7rem;color:var(--accent);margin-top:.8rem;opacity:.8;transition:all .25s var(--ease)}
.mat:hover .flecha{opacity:1;transform:translateX(4px)}
@media(max-width:900px){.materias{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.materias{grid-template-columns:1fr}}

/* bloque de confidencialidad */
.confi{display:grid;grid-template-columns:1.15fr 1fr;gap:1rem;margin-top:2.4rem;align-items:start}
.confi .col{background:var(--bg-1);border:1px solid var(--border);border-radius:.9rem;padding:1.7rem 1.6rem}
.confi h3{font-size:1.08rem;margin-bottom:.9rem}
.confi ul{list-style:none;display:grid;gap:.65rem}
.confi li{font-size:.89rem;color:var(--fg-muted);padding-left:1.5rem;position:relative}
.confi .si li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.confi .no li::before{content:"—";position:absolute;left:0;color:var(--bad);font-weight:700}
@media(max-width:820px){.confi{grid-template-columns:1fr}}

/* nota de vocabulario / precisión */
.nota{margin-top:2rem;border:1px dashed var(--border-hover);border-radius:.8rem;padding:1.2rem 1.3rem;font-size:.86rem;color:var(--fg-muted);background:oklch(0.24 0.02 257/50%)}
.nota b{color:var(--fg)}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}