/* ===========================================================================
   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. */
.snap > .wrap { opacity: 1; transform: none; filter: none; }

/* 1-ter · Y el enganche de desplazamiento se apaga. El de la 1.0 es
      «mandatory» y solo funciona con sus secciones de 100vh y su observador;
      con secciones de otra altura convierte el desplazamiento en un salto. */
html[data-marketing] { scroll-snap-type: none; }

/* 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); } }
.jbh-areas > a {
  min-width: 0; position: relative; text-decoration: none;
  background: var(--bg, #0c0b09); color: var(--text, #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%, var(--bg, #0c0b09)); }
.jbh-areas h3 { font-family: var(--font-display); font-weight: 300;
                font-size: 1.5rem; line-height: 1.1; margin: 0; color: var(--text, #ece6da); }
.jbh-areas p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-dim, #b6ad9c); }
.jbh-areas .cuantas { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
                      color: var(--materia-clara); }
.jbh-areas .cuantas.floja { color: var(--muted, #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; }