/* ===========================================================================
   REMIENDOS SOBRE EL DISEÑO DE LA 1.0
   ---------------------------------------------------------------------------
   La 1.0 sirve su HTML ya montado y luego lo rehidrata con React. Aquí no hay
   React, así que las tres cosas que dependían de él se resuelven con CSS.
   Nada de esto cambia el aspecto: lo hace funcionar sin guion.
   ========================================================================= */

/* 1 · El contenido nace visible. En la 1.0, «.reveal» empieza en opacity 0 y
      solo aparece si un observador de JavaScript le añade «.in». Cuando el
      guion falla o tarda, la página está en blanco. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal:not(.in) {
      animation: jbh-asomar .9s cubic-bezier(.16,.8,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    @keyframes jbh-asomar {
      from { opacity: 0; transform: translateY(26px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* 1-bis · Y los bloques de la portada tampoco. En la 1.0, «.snap» deja su
      contenido al 42 % de opacidad, encogido y desaturado, y solo lo devuelve a
      la normalidad un observador de JavaScript que añade «.snap-active». Sin
      guion, la portada entera se ve apagada. */
/* Con la MISMA especificidad que la suya —«.snap:not(.snap-active) > .wrap»,
   que es 0-3-0— o no gana. La primera versión usaba «.snap > .wrap» (0-2-0) y
   la portada seguía apagada al 42 %. */
.snap:not(.snap-active) > .wrap,
.snap > .wrap { opacity: 1; transform: none; filter: none; transition: none; }

/* 1-ter · El enganche de desplazamiento SÍ se queda: es parte del diseño de su
      portada y sus apartados están hechos para él (100vh, alineados al centro,
      «snap-stop: always»). Lo que se quita es lo que dependía del observador,
      no lo que hace el navegador. La 1.0 ya lo apaga sola en pantallas
      pequeñas y con movimiento reducido. */

/* 2 · Los menús desplegables se abren al pasar por encima y al recibir el foco.
      En la 1.0 los abre React con un estado. */
.nav-links > div { position: relative; }
.nav-links > div > button { cursor: pointer; }
.jbh-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-links > div:hover > .jbh-panel,
.nav-links > div:focus-within > .jbh-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

/* 3 · El desplazamiento por anclas no se esconde bajo la cabecera fija. */
:target { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 4 · Foco visible. La 1.0 lo tiene resuelto en casi todo; esto lo garantiza en
      lo que se genera aquí. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold, #c2a06a); outline-offset: 3px;
}

/* 5 · El color del área. Es lo único que la 1.0 no tenía —solo llevaba penal—
      y lo que permite que el sitio hable de diez derechos sin confundirlos.
      Nunca va solo: siempre con su marca de texto (PEN, CIV, MER…). */
[data-materia="penal"]        { --materia: #416ac8; --materia-clara: #7f9ada; }
[data-materia="civil"]        { --materia: #a45b1b; --materia-clara: #df8537; }
[data-materia="mercantil"]    { --materia: #2c7d54; --materia-clara: #3dae75; }
[data-materia="laboral"]      { --materia: #297a78; --materia-clara: #39aaa6; }
[data-materia="contencioso"]  { --materia: #805ac1; --materia-clara: #a88ed4; }
[data-materia="familia"]      { --materia: #c23d69; --materia-clara: #d7819e; }
[data-materia="fiscal"]       { --materia: #4e7a2e; --materia-clara: #6daa41; }
[data-materia="extranjeria"]  { --materia: #2a7792; --materia-clara: #45a6c9; }
[data-materia="sucesiones"]   { --materia: #ab4998; --materia-clara: #ca84bc; }
[data-materia="inmobiliario"] { --materia: #a6593f; --materia-clara: #cb8b76; }

.jbh-materia {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--materia, var(--accent-champagne-deep));
}
/* Sobre fondo oscuro manda el tono claro del área. Se detecta por el color de
   fondo que la 1.0 usa en sus heros, no por una clase que habría que recordar
   poner en cada sitio. */
.block-dark .jbh-materia,
[style*="var(--ink-midnight)"] .jbh-materia,
[data-marketing] .jbh-materia { color: var(--materia-clara, var(--gold)); }
.jbh-marca {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; padding: .18rem .4rem; border-radius: 3px;
  background: color-mix(in oklab, currentColor 14%, transparent);
  border: 1px solid color-mix(in oklab, currentColor 42%, transparent);
}

/* La rejilla de las diez áreas: hereda el lenguaje de las tarjetas de la 1.0. */
.jbh-areas { display: grid; gap: 1px; background: var(--line);
             border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 30rem) { .jbh-areas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .jbh-areas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 74rem) { .jbh-areas { grid-template-columns: repeat(5, 1fr); } }
/* Colores explícitos, no heredados: las tarjetas son oscuras siempre, y en un
   apartado «block-light» las variables --bg y --text valen lo contrario. Con
   «var(--text)» los nombres de las áreas salían gris oscuro sobre negro. */
.jbh-areas > a {
  min-width: 0; position: relative; text-decoration: none;
  background: #0c0b09; color: #ece6da;
  padding: 1.7rem 1.35rem 1.45rem; display: grid; gap: .55rem; align-content: start;
  transition: background-color .25s ease;
}
.jbh-areas > a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
                         background: var(--materia-clara); }
.jbh-areas > a:hover { background: color-mix(in oklab, var(--materia-clara) 10%, #0c0b09); }
.jbh-areas h3 { font-family: var(--font-display); font-weight: 300;
                font-size: 1.5rem; line-height: 1.1; margin: 0; color: #f0ebe0; }
.jbh-areas p { margin: 0; font-size: .84rem; line-height: 1.55; color: #b6ad9c; }
.jbh-areas .cuantas { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
                      color: var(--materia-clara); }
.jbh-areas .cuantas.floja { color: #968d7b; font-style: italic; }

/* Formularios de las calculadoras, con el lenguaje de la 1.0. */
.jbh-campos { display: grid; gap: 1.4rem;
              grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.jbh-campo { display: grid; gap: .35rem; min-width: 0; align-content: start; }
.jbh-campo label { font-size: .9rem; font-weight: 600; color: var(--ink-midnight); }
.jbh-campo .ayuda { font-size: .8rem; color: var(--muted); line-height: 1.5; }
.jbh-campo .junto { display: flex; gap: .5rem; }
.jbh-campo .junto input { flex: 0 0 5.5rem; } .jbh-campo .junto select { flex: 1; }
.jbh-cacharro input, .jbh-cacharro select {
  font: inherit; font-size: .95rem; padding: .7rem .8rem; min-height: 46px; width: 100%;
  border: 1px solid rgba(11,31,51,.18); border-radius: 8px;
  background: var(--surface-bone); color: var(--ink-graphite);
}
.jbh-cacharro { margin: 2rem 0; padding: 1.75rem;
  border: 1px solid var(--line-soft); border-left: 2px solid var(--materia, var(--gold));
  background: rgba(255,255,255,.5); border-radius: 14px; }
.jbh-salida:empty { display: none; }
.jbh-salida { display: block; margin-bottom: 2rem; padding: 1.75rem; border-radius: 14px;
  background: var(--ink-midnight); color: var(--surface-bone); }
.jbh-salida.mal { background: var(--state-danger, #b91c1c); }
.jbh-salida .grande { font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.12; margin: 0 0 .9rem; }
.jbh-salida .grande strong { color: var(--accent-champagne, #c2a06a); font-weight: 300; }
.jbh-salida .nota { font-size: .92rem; opacity: .82; margin: 0 0 .55rem; max-width: 60ch; }
.jbh-salida .nota strong { opacity: 1; font-weight: 600; }
.jbh-salida details { margin-top: 1.1rem; font-size: .82rem; }
.jbh-salida summary { cursor: pointer; color: var(--accent-champagne); min-height: 44px;
                      display: flex; align-items: center; }
.jbh-salida details ul { margin: .5rem 0 0; padding-left: 1.2rem; display: grid; gap: .25rem;
  font-family: var(--font-mono); font-size: .72rem; max-height: 16rem; overflow-y: auto; opacity: .8; }