/* =========================================================================
   JustIA — capa de temas conmutables
   Se carga DESPUÉS de justia-base.css. Define el control theme-switch y el
   tema "Tribunal" (claro/serif) como override aditivo. El tema Jarvis vive
   en justia-base.css y no se toca aquí.
   ========================================================================= */

/* =========================================================================
   THEME SWITCH — control segmentado (funciona en ambos temas)
   ========================================================================= */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--nvy-border);
  background: color-mix(in srgb, var(--nvy-800) 55%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.theme-switch button {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem;
  color: var(--text-muted); background: transparent; border: 0;
  padding: 7px 12px; border-radius: 999px; line-height: 1;
  transition: color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.theme-switch button svg { width: 15px; height: 15px; }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] {
  color: var(--accent-contrast);
  background: var(--grad-ai);
  box-shadow: var(--glow-accent);
}
[data-theme="tribunal"] .theme-switch button[aria-pressed="true"] { color: #fff; }
.theme-switch .ts-label { white-space: nowrap; }
/* En la barra superior el conmutador es solo-ícono (compacto, estilo app);
   en el cajón móvil (.nav-cta) sí muestra etiquetas porque hay espacio. */
.header-cta .theme-switch .ts-label { display: none; }
.header-cta .theme-switch button { padding: 8px 10px; }

/* =========================================================================
   HEADER RESPONSIVE — acciones al cajón móvil (evita desbordes del CTA)
   ========================================================================= */
.nav-cta { display: none; }
/* 1320px, no 1260px: va atado al punto de quiebre del cajón en justia-base.css. Los dos tienen que
   decir lo mismo, o queda una banda con el menú ya desplegado y el CTA todavía en la barra. */
@media (max-width: 1320px) {
  /* En modo cajón, la barra solo conserva marca + hamburguesa */
  .header-cta .theme-switch,
  .header-cta > .btn { display: none; }
  /* Las acciones viven dentro del cajón, apiladas al pie de la navegación */
  .nav-cta {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--nvy-border);
  }
  .nav-cta .theme-switch { align-self: center; }
  .nav-cta .btn { justify-content: center; width: 100%; }
}

/* =========================================================================
   TEMA "TRIBUNAL" — clásico institucional (claro · serif · oro/navy)
   Override aditivo: recolorea vía tokens + parches puntuales sobre los pocos
   valores rgba fijados en componentes decorativos.
   ========================================================================= */
[data-theme="tribunal"] {
  --nvy-950: #E7E1D2;
  --nvy-900: #F5F2EA;
  --nvy-850: #FBF9F3;
  --nvy-800: #FFFFFF;
  --nvy-700: #EAE4D5;
  --nvy-card: #FFFFFF;
  --nvy-border: rgba(13, 27, 61, 0.12);
  --nvy-border-strong: rgba(198, 163, 61, 0.60);

  --gold: #C6A33D;
  --gold-soft: #8A6D24;   /* oro profundo: legible como texto sobre papel */
  --gold-glow: rgba(198, 163, 61, 0.30);

  /* Los usos "neón" se remapean a navy/oro */
  --cyan: #16306A;
  --blue: #16306A;
  --purple: #8A6D24;
  --green: #1F7A4D;
  --red: #B23A4B;

  --azul-marca: #0D1B3D; /* navy de marca: el de la cabecera, el del texto y el del logotipo */
  --accent: #16306A;
  --accent-2: var(--gold);
  --accent-contrast: #FFFFFF;

  --text: #0D1B3D;
  --text-soft: #43506B;
  --text-muted: #57617A;   /* AA sobre papel: #6B7488 daba ~4.0:1; #57617A ≈ 5.0:1 (≥4.5) */

  --glow-cyan: 0 16px 38px rgba(13, 27, 61, 0.12);
  --glow-purple: 0 16px 38px rgba(13, 27, 61, 0.10);
  --glow-gold: 0 16px 38px rgba(198, 163, 61, 0.24);
  --glow-accent: 0 12px 28px rgba(13, 27, 61, 0.16);
  --shadow-lg: 0 26px 60px rgba(13, 27, 61, 0.16);

  --grad-ai: linear-gradient(120deg, #16306A, #0D1B3D 55%, #C6A33D);
  --grad-gold: linear-gradient(120deg, #E0C67E, #C6A33D);

  --font-display: var(--font-serif);

  /* Esqueleto de carga del documento. NO se hereda del tema oscuro: allí es blanco translúcido sobre navy,
     y aquí el esqueleto vive dentro de una `.card` cuyo fondo es `--nvy-card: #FFFFFF`. Medido en Chrome:
     rgba(255,255,255,.06) sobre rgb(255,255,255) es literalmente invisible —ni fondo ni barrido—, así que
     en papel el esqueleto no aterrizaba. Aquí va tinta navy, no blanco. */
  --skeleton-base: rgba(13, 27, 61, 0.07);
  --skeleton-hi:   rgba(13, 27, 61, 0.15);
}

/* Fondo papel con veladuras suaves de navy/oro (sin neón) */
[data-theme="tribunal"] body {
  color: var(--text);
  background:
    radial-gradient(1100px 620px at 84% -8%, rgba(198, 163, 61, 0.14), transparent 60%),
    radial-gradient(900px 560px at 4% 8%, rgba(13, 27, 61, 0.07), transparent 58%),
    linear-gradient(180deg, #F7F4EC 0%, #EFEADD 100%);
}

/* Tipografía serif: menos tracking negativo, más porte editorial */
[data-theme="tribunal"] h1, [data-theme="tribunal"] h2,
[data-theme="tribunal"] h3, [data-theme="tribunal"] h4 { letter-spacing: -0.005em; font-weight: 600; }
[data-theme="tribunal"] h1.display { letter-spacing: -0.01em; font-weight: 600; }
[data-theme="tribunal"] .brand .brand-name { font-family: var(--font-serif); font-size: 1.35rem; }

/* Palabras con degradado, en claro: oro de punta a punta.
   El degradado de IA en claro va de navy a oro, y sobre una palabra corta la partia en dos colores a
   media palabra ("justi" en navy, "cia" en oro) en los titulares de casi todas las paginas. En oro se lee
   como un solo acento, igual que el de "razonamiento juridico", y el brillo animado (.shimmer) sigue
   funcionando porque recorre tonos del mismo oro. Los dos tonos quedan por encima de 3:1 sobre papel,
   que es lo que pide un texto grande. En oscuro no cambia: alli cian y violeta ya se leen como un tinte. */
[data-theme="tribunal"] .text-gradient {
  background-image: linear-gradient(120deg, #8A6D24 0%, #A07E2A 50%, #8A6D24 100%);
}

/* Marca JustIA: logomark SVG inline (columna + constelación neural en oro).
   La columna hereda currentColor; por defecto usa var(--text) para adaptarse a
   CUALQUIER superficie (tarjetas de auth, header del panel claro/oscuro). El acento
   neural va en oro fijo. El blanco se aplica solo en el .site-header (navy en ambos
   temas), donde la columna debe contrastar sobre azul marino. */
.brand .brand-mark { height: 36px; width: auto; display: block; color: var(--text); }
.site-header .brand .brand-mark { color: #FFFFFF; }
.site-header.condensed .brand .brand-mark { height: 30px; }

[data-theme="tribunal"] ::selection { background: rgba(198, 163, 61, 0.30); color: #0D1B3D; }
[data-theme="tribunal"] * { scrollbar-color: rgba(13,27,61,.35) transparent; }
[data-theme="tribunal"] ::-webkit-scrollbar-thumb { background: rgba(13,27,61,.28); }

/* Header claro → NAVY institucional (alto contraste, logo en blanco).
   Aunque el tema Tribunal es "papel", la barra superior va en azul marino como
   ancla de marca: la columna JustIA se recolorea a blanco y los textos/botones
   se vuelven claros para leerse sobre el navy. El footer se mantiene en papel. */
[data-theme="tribunal"] .site-header {
  background: rgba(13, 27, 61, 0.92);
  border-bottom-color: rgba(198, 163, 61, 0.28);
}
[data-theme="tribunal"] .site-header.condensed { background: rgba(11, 18, 32, 0.96); }

/* La columna del logomark ya hereda currentColor:#FFFFFF (regla base .brand-mark);
   aquí solo el wordmark, que en tribunal sería navy sobre navy. */
[data-theme="tribunal"] .site-header .brand .brand-name { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .brand .brand-name b { color: var(--gold); }

/* Navegación clara sobre navy */
[data-theme="tribunal"] .site-header .nav > a { color: rgba(255, 255, 255, 0.80); }
[data-theme="tribunal"] .site-header .nav > a:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
[data-theme="tribunal"] .site-header .nav > a.active { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .nav a::after { background: var(--gold); }

/* Conmutador de tema sobre navy (pastilla activa en oro para que se distinga) */
[data-theme="tribunal"] .site-header .theme-switch { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.20); }
[data-theme="tribunal"] .site-header .theme-switch button { color: rgba(255, 255, 255, 0.72); }
[data-theme="tribunal"] .site-header .theme-switch button:hover { color: #FFFFFF; }
[data-theme="tribunal"] .site-header .theme-switch button[aria-pressed="true"] { background: var(--gold); color: #0D1B3D; box-shadow: none; }

/* Botones del header: fantasma claro + CTA de descarga en oro para que resalte
   (el primario navy-sólido se perdería sobre un header navy) */
[data-theme="tribunal"] .site-header .btn-ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); color: #FFFFFF; }
[data-theme="tribunal"] .site-header .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 255, 255, 0.12); box-shadow: none; }
[data-theme="tribunal"] .site-header .btn-primary { background: linear-gradient(180deg, #E0C67E 0%, #C6A33D 100%); color: #0D1B3D; box-shadow: none; }
[data-theme="tribunal"] .site-header .btn-primary svg { color: #0D1B3D; }
[data-theme="tribunal"] .site-header .btn-primary:hover { box-shadow: 0 14px 30px rgba(198, 163, 61, 0.35); }

/* Hamburguesa blanca */
[data-theme="tribunal"] .site-header .nav-toggle { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.24); }

/* Cajón de navegación móvil también en navy (coherente con la barra) */
@media (max-width: 960px) {
  [data-theme="tribunal"] .site-header .nav {
    background: rgba(13, 27, 61, 0.98);
    border-bottom-color: rgba(198, 163, 61, 0.28);
    box-shadow: 0 18px 40px rgba(13, 27, 61, 0.35);
  }
  [data-theme="tribunal"] .site-header .nav-cta { border-top-color: rgba(255, 255, 255, 0.14); }
}
[data-theme="tribunal"] .site-footer { background: rgba(233, 227, 214, 0.6); border-top-color: var(--nvy-border); }

/* Eyebrow / chips */
[data-theme="tribunal"] .eyebrow { color: #16306A; border-color: rgba(13,27,61,.18); background: rgba(13, 27, 61, 0.05); }
[data-theme="tribunal"] .eyebrow .dot { background: var(--gold); box-shadow: 0 0 10px var(--gold-glow); }
/* El oro del rótulo va en token propio y NO en `--gold-soft`: en tribunal ese token vale #8A6D24 y lo
   comparten `.ad-cite`, `.brand-name b`, `.foro-insignia.oro` y el núcleo de la órbita, así que oscurecerlo
   aquí los habría movido a todos. Medido componiendo el tinte propio del rótulo —rgba(198,163,74,.08)— sobre
   el extremo OSCURO del degradado del cuerpo, rgb(239,234,221), que es el peor caso real: #8A6D24 daba 3.87:1
   contra los 4.5 que pide un texto de 11.84 px en peso 700, y fallaban cuatro de los cinco rótulos de /Foro.
   En jarvis no se toca: ahí `--gold-soft` ya da 10-10.91:1. */
[data-theme="tribunal"] .eyebrow.gold { --eb-oro: #6B5520; color: var(--eb-oro); border-color: var(--gold-glow); background: rgba(198,163,61,.10); }

/* Cards blancas con hairline y sombra suave */
[data-theme="tribunal"] .card,
[data-theme="tribunal"] .track,
[data-theme="tribunal"] .trust-card,
[data-theme="tribunal"] .proc-step,
[data-theme="tribunal"] .materia,
[data-theme="tribunal"] .faq details,
[data-theme="tribunal"] .legal-toc,
[data-theme="tribunal"] .ad-dot { background: #FFFFFF; border-color: var(--nvy-border); box-shadow: 0 1px 2px rgba(13,27,61,.04); }
[data-theme="tribunal"] .card:hover,
[data-theme="tribunal"] .track:hover,
[data-theme="tribunal"] .trust-card:hover { border-color: var(--nvy-border-strong); box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .card .card-ico { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.4); color: #16306A; }
[data-theme="tribunal"] .step .step-n,
[data-theme="tribunal"] .flow-list .fl-n { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.45); color: #16306A; }
[data-theme="tribunal"] .pill-ai { color: #16306A; border-color: rgba(13,27,61,.2); background: rgba(13,27,61,.06); }

/* Botones — firma JustIA: primario navy sólido con texto/ícono en oro (como la app) */
[data-theme="tribunal"] .btn-primary {
  background: linear-gradient(180deg, #16306A 0%, #0D1B3D 100%);
  color: var(--gold); box-shadow: var(--glow-accent);
}
[data-theme="tribunal"] .btn-primary svg { color: var(--gold); }
[data-theme="tribunal"] .btn-primary:hover { box-shadow: 0 18px 40px rgba(13,27,61,.28); }
/* Antes el botón oro era un degradado dorado que se lavaba sobre papel. Se unifica
   con la firma navy-sólido + texto/ícono en oro (idéntico al CTA "Descargar app")
   para que TODOS los botones del sitio tengan el mismo peso y contraste en claro. */
[data-theme="tribunal"] .btn-gold {
  background: linear-gradient(180deg, #16306A 0%, #0D1B3D 100%);
  color: var(--gold); box-shadow: var(--glow-accent); border-color: transparent;
}
[data-theme="tribunal"] .btn-gold svg { color: var(--gold); }
[data-theme="tribunal"] .btn-gold:hover { box-shadow: 0 18px 40px rgba(13,27,61,.28); }
[data-theme="tribunal"] .btn-ghost { background: rgba(255,255,255,.6); border-color: var(--nvy-border); color: var(--text); }
[data-theme="tribunal"] .btn-ghost:hover { border-color: var(--nvy-border-strong); color: var(--gold-soft); box-shadow: var(--glow-gold); }
/* Aquí había un override del `::after` de .btn-primary/.btn-gold para recolorear en papel el barrido de
   brillo del hover. El barrido se borró —era de 600 ms y animaba `left`—, así que este override ya no
   tenía ningún pseudo-elemento al que aplicarse: no pintaba nada y sólo dejaba la pista falsa de que el
   efecto seguía vivo. Ningún `.btn` puede volver a llevar `::before` ni `::after`, y hay prueba. */

/* Formularios */
[data-theme="tribunal"] .input, [data-theme="tribunal"] .textarea, [data-theme="tribunal"] select.input {
  background: #FFFFFF; border-color: var(--nvy-border); color: var(--text);
}
[data-theme="tribunal"] .input:focus, [data-theme="tribunal"] .textarea:focus, [data-theme="tribunal"] select.input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,163,61,.18);
}

/* Chat demo → papel */
[data-theme="tribunal"] .chat-user { background: linear-gradient(135deg, rgba(13,27,61,.10), rgba(198,163,61,.10)); border-color: rgba(198,163,61,.4); color: var(--text); }
[data-theme="tribunal"] .chat-ai { background: #FBF9F3; border-color: var(--nvy-border); color: var(--text-soft); }
[data-theme="tribunal"] .chat-typing { background: #FBF9F3; border-color: var(--nvy-border); }

/* Paneles insertos oscuros (preview de documento, demo de teléfono, mini-stats) → papel.
   El fondo se controla por --inset-panel (los estilos inline usan var(--inset-panel)). */
[data-theme="tribunal"] { --inset-panel: #FBF9F3; }
[data-theme="tribunal"] .ad-doc,
[data-theme="tribunal"] .phone-bar,
[data-theme="tribunal"] .mini-stat { background: #FBF9F3; border-color: var(--nvy-border); color: var(--text-soft); }
[data-theme="tribunal"] .ad-ai,
[data-theme="tribunal"] .p-ai { background: #F1EDE2; color: var(--text-soft); }
/* Texto del bloque de código mono dentro de las cards (hero doc-preview) */
[data-theme="tribunal"] .card .mono.text-soft { color: #2C3852; }
[data-theme="tribunal"] .card .mono b,
[data-theme="tribunal"] .card .mono strong { color: #16306A; }
/* Inputs con fondo oscuro heredado */
[data-theme="tribunal"] .field input,
[data-theme="tribunal"] .field textarea { background: #FFFFFF; border-color: var(--nvy-border); color: var(--text); }

/* Banners / comparativa */
[data-theme="tribunal"] .cta-banner { border-color: var(--nvy-border-strong); background: linear-gradient(160deg, rgba(198,163,61,.12), rgba(13,27,61,.05)); box-shadow: 0 20px 50px rgba(13,27,61,.10); }
[data-theme="tribunal"] .vs-new { border-color: var(--nvy-border-strong); background: linear-gradient(160deg, rgba(198,163,61,.10), rgba(13,27,61,.04)); box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .vs-old { background: rgba(13,27,61,.02); }

/* Tablas legales */
[data-theme="tribunal"] .legal-table th { color: #16306A; background: rgba(13,27,61,.05); }
[data-theme="tribunal"] .legal-doc a { color: var(--gold-soft); }

/* Aurora / rejilla / barra de progreso: recolor sin neón */
[data-theme="tribunal"] .aurora { opacity: .35; }
[data-theme="tribunal"] .aurora .a1 { background: radial-gradient(circle, rgba(198,163,61,.45), transparent 65%); }
[data-theme="tribunal"] .aurora .a2 { background: radial-gradient(circle, rgba(13,27,61,.30), transparent 65%); }
[data-theme="tribunal"] .aurora .a3 { background: radial-gradient(circle, rgba(198,163,61,.35), transparent 65%); }
[data-theme="tribunal"] .neural-canvas { opacity: .18; }
[data-theme="tribunal"] .neural-grid::after { background-image: linear-gradient(rgba(13,27,61,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(13,27,61,.05) 1px, transparent 1px); }
/* Barra de progreso superior: navy sobrio de marca (antes navy→oro; el tramo oro se leía
   como "barra dorada" al scrollear). Monocromático azul marino, sin oro, sin choque con
   los botones (relleno vertical sólido) por ser un degradado horizontal de 3px. */
[data-theme="tribunal"] .scroll-progress { background: linear-gradient(90deg, #0D1B3D, #16306A); box-shadow: 0 0 12px rgba(13,27,61,.35); }

/* Veladuras del hero: los glows base son cian/púrpura (neón) fijados inline y se
   lavan sobre papel. En tribunal se recolorean a oro/navy para que la ambientación
   viva también en claro (no solo en oscuro). */
[data-theme="tribunal"] .hero-glow { background: radial-gradient(circle, rgba(198,163,61,.22), transparent 62%) !important; opacity: .7; }
[data-theme="tribunal"] .hero-glow:nth-of-type(even) { background: radial-gradient(circle, rgba(13,27,61,.16), transparent 62%) !important; }
/* Glow que sigue el cursor en las tarjetas: cian → oro tenue */
[data-theme="tribunal"] .glow-card::before { background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(198,163,61,.16), transparent 60%); }
/* Borde cónico animado de tarjetas destacadas: neón → navy/oro */
[data-theme="tribunal"] .grad-border::after { background: conic-gradient(from var(--a, 0deg), transparent 0 55%, #C6A33D 72%, #16306A 85%, transparent 100%); opacity: .5; }
/* Métrica con pulso: halo cian → oro */
[data-theme="tribunal"] .metric-pulse::after { background: radial-gradient(circle, rgba(198,163,61,.16), transparent 70%); }

/* Flotantes */
[data-theme="tribunal"] .to-top { background: rgba(255,255,255,.86); border-color: var(--nvy-border-strong); color: var(--gold-soft); }
[data-theme="tribunal"] .to-top:hover { background: #fff; box-shadow: var(--glow-gold); }
[data-theme="tribunal"] .cookie-banner { background: rgba(251, 249, 243, .95); border-color: var(--nvy-border-strong); box-shadow: 0 20px 50px rgba(13,27,61,.16); }
[data-theme="tribunal"] .cookie-banner .ck-ico { background: rgba(13,27,61,.05); border-color: rgba(198,163,61,.45); color: #16306A; }
[data-theme="tribunal"] .cookie-panel { background: rgba(13,27,61,.35); }
[data-theme="tribunal"] .ck-panel-card { background: #FBF9F3; border-color: var(--nvy-border-strong); box-shadow: 0 24px 60px rgba(13,27,61,.18); }
[data-theme="tribunal"] .ck-cerrar:hover, [data-theme="tribunal"] .ck-cerrar:focus-visible { background: rgba(13,27,61,.06); }
[data-theme="tribunal"] .ck-siempre { color: #16306A; }
[data-theme="tribunal"] .ck-slider::after { box-shadow: 0 1px 3px rgba(13,27,61,.25); }
[data-theme="tribunal"] .ck-switch input:checked + .ck-slider { background: #16306A; }
[data-theme="tribunal"] .ck-switch input:focus-visible + .ck-slider { outline-color: #16306A; }
[data-theme="tribunal"] .footer-grid .footer-cookies:hover, [data-theme="tribunal"] .footer-grid .footer-cookies:focus-visible { color: var(--gold-soft); }

/* Divisores */
[data-theme="tribunal"] .section-divider { background: linear-gradient(90deg, transparent, rgba(198,163,61,.5), transparent); }

/* ============================================================
   Profundidad de fondo (tema tribunal) — grano de papel + bandas
   Soluciona el "fondo plano": da textura global y ritmo por sección.
   Solo tema claro; el tema oscuro conserva su gradiente navy.
   ============================================================ */

/* Grano de papel muy tenue, fijo, detrás de todo el contenido.
   z-index:-1 lo mantiene sobre el gradiente del body pero bajo texto y tarjetas. */
[data-theme="tribunal"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Bandas alternas: cada <section> par se "levanta" a tono papel + hairline dorado.
   :nth-of-type cuenta solo <section>, así que los <div class="section-divider">
   intercalados NO alteran el conteo → alternancia limpia sin tocar el markup.
   El hero es el primer <section> (impar) y queda intacto con su fondo propio. */
[data-theme="tribunal"] main > section:nth-of-type(even) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.60), rgba(251,249,243,.72));
  box-shadow:
    inset 0 1px 0 rgba(198,163,61,.16),
    inset 0 -1px 0 rgba(198,163,61,.11);
  /* Espacio interno arriba: el hairline y el borde de banda quedan pegados al
     título cuando la regla `.section + .section` colapsa el padding-top a 0.
     Más específico que esa regla, así que garantiza aire dentro de cada banda. */
  padding-top: 3.75rem;
}

/* Reduce-transparency: superficies sólidas claras */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="tribunal"] .site-header,
  [data-theme="tribunal"] .card, [data-theme="tribunal"] .track,
  [data-theme="tribunal"] .cookie-banner, [data-theme="tribunal"] .to-top { background: #FFFFFF; }
  [data-theme="tribunal"] main > section:nth-of-type(even) { background: #FBF9F3; }
}


/* ===== Tarjetas de SERVICIO en navy de marca =====
   Las rejillas donde se enumera lo que JustIA hace --capacidades, servicios corporativos, lo que resuelve
   una persona, lo que respalda cada firma-- iban en blanco sobre papel: la seccion con mas peso comercial
   era la que menos se veia. En bloque de color se leen como tal.

   El color es el navy de la cabecera (#0D1B3D), no el azul rey (#16306A) con el que se estreno. El azul
   rey es mas claro y mas saturado que la barra de arriba, y en superficies grandes, junto al papel y al
   oro, se leia como un tercer azul que no era de la marca. El navy es el de la cabecera, el del texto y
   el del logotipo, y el oro se asienta sobre el igual que en la barra.

   Va en ESTE archivo y con el selector del tema por delante a proposito. La regla generica
   `[data-theme="tribunal"] .card` de mas arriba vale (0,2,0) igual que `.servicios .card`, y como esta
   hoja se carga despues de justia-base.css ganaba ella: el azul se escribio primero alli y no se veia
   nada. Con el tema en el selector son (0,3,0) y el empate se acaba.

   Se aplica por CONTENEDOR (la clase `servicios` va en la rejilla) y no por tarjeta suelta, para que
   ninguna nueva se quede fuera. No va en precios, preguntas, comparativas ni pasos. */
.servicios .card,
[data-theme="tribunal"] .servicios .card {
  background: var(--azul-marca);
  border-color: rgba(198, 163, 61, .26);
  color: #EAF0FF;
  box-shadow: 0 10px 26px rgba(13, 27, 61, .18);
}
/* La tarjeta es superficie oscura aunque la pagina sea papel. Se reasignan dentro los tokens de texto y
   de acento para que lo que se pinta con ellos --etiquetas y conectores del flujo RAG, textos en oro-- no
   quede navy sobre navy. En el tema oscuro ya valen asi. */
[data-theme="tribunal"] .servicios .card {
  --text: #FFFFFF;
  --text-soft: rgba(234, 240, 255, .82);
  --text-muted: rgba(234, 240, 255, .66);
  --nvy-800: rgba(255, 255, 255, .08);
  --nvy-border: rgba(255, 255, 255, .16);
  --gold-soft: #E0C67E;
  --cyan: #E0C67E;
  --accent: #E0C67E;
}
.servicios .card h3,
[data-theme="tribunal"] .servicios .card h3 { color: #FFFFFF; }
.servicios .card p,
[data-theme="tribunal"] .servicios .card p { color: rgba(234, 240, 255, .82); }
.servicios .card .card-ico,
[data-theme="tribunal"] .servicios .card .card-ico {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .24);
  color: #FFFFFF;
}
/* La tarjeta dorada conserva su acento: sobre navy, el oro gana en vez de perderse. */
.servicios .card.gold,
[data-theme="tribunal"] .servicios .card.gold { border-color: rgba(198, 163, 61, .45); }
.servicios .card.gold .card-ico,
[data-theme="tribunal"] .servicios .card.gold .card-ico {
  background: rgba(224, 198, 126, .16);
  border-color: rgba(224, 198, 126, .55);
  color: #E0C67E;
}
/* Despues de la dorada, para que al pasar el cursor tambien ella se encienda. */
.servicios .card:hover,
[data-theme="tribunal"] .servicios .card:hover {
  border-color: rgba(198, 163, 61, .60);
  box-shadow: 0 22px 46px rgba(13, 27, 61, .30);
}
/* Las etiquetas viajaban en oscuro sobre claro; aqui es al reves. Las de oro siguen en oro, pero el claro:
   el profundo es para leerse sobre papel. */
.servicios .pill,
.servicios .pill-ai,
[data-theme="tribunal"] .servicios .pill,
[data-theme="tribunal"] .servicios .pill-ai {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .24);
  color: #EAF0FF;
}
.servicios .pill-gold,
[data-theme="tribunal"] .servicios .pill-gold {
  background: rgba(224, 198, 126, .12);
  border-color: rgba(224, 198, 126, .45);
  color: #E0C67E;
}
/* Botones dentro de la tarjeta: los mismos de la cabecera, que ya estan resueltos sobre navy. El primario
   de papel (navy con texto en oro) desaparecia contra el fondo y el fantasma se veia como un parche blanco. */
[data-theme="tribunal"] .servicios .btn-ghost {
  background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); color: #FFFFFF;
}
[data-theme="tribunal"] .servicios .btn-ghost:hover {
  background: rgba(255, 255, 255, .12); border-color: var(--gold); color: #E0C67E; box-shadow: none;
}
[data-theme="tribunal"] .servicios .btn-gold { background: linear-gradient(180deg, #E0C67E 0%, #C6A33D 100%); color: #0D1B3D; }
[data-theme="tribunal"] .servicios .btn-gold svg { color: #0D1B3D; }