/* ===========================================================================
   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. */

/* 1-quater · EL MÓVIL QUE AVANZA AL DESPLAZARSE
 *
 * Es la pieza más reconocible de su portada: un iPhone que se queda quieto
 * mientras la página baja, y dentro las siete pantallas de un caso van pasando
 * una a una. En la 1.0 lo mueve JavaScript —un «requestAnimationFrame» que lee
 * la posición del scroll y escribe un «transform»—, así que aquí no se movía:
 * el móvil se quedaba clavado en la primera pantalla.
 *
 * Lo hace el navegador, con una línea de tiempo de desplazamiento. La sección
 * es alta a propósito (100vh + 480vh) y su hijo va pegado; mientras esa sección
 * contiene la ventana, la columna de siete pantallas sube.
 *
 * El rango es «entry 100% exit 0%»: desde que la seccion acaba de entrar del
 * todo hasta que empieza a salir, que es justo el tramo en que su hijo esta
 * pegado. «contain» —lo primero que se probo— NO vale aqui: pide que el sujeto
 * quepa entero en la ventana y una seccion de 580vh no cabe nunca, asi que el
 * rango se queda vacio y la animacion no se movia del primer fotograma. Se vio
 * midiendo el «transform» calculado a tres alturas del desplazamiento: las
 * tres daban la identidad.
 *
 * «steps(7, jump-none)» en vez de un avance continuo: las pantallas se ven de
 * una en una, como en la 1.0. Siete y no seis: jump-none reparte el recorrido
 * entre n-1, así que con seis los saltos caían a 1,2 y 2,4 pantallas y siempre
 * se veía media pantalla arriba y media abajo. Con siete caen en 0..6 justos.
 */
.pshow { view-timeline-name: --pshow; view-timeline-axis: block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pshow .pshow-col {
      animation: jbh-pshow-subir linear both;
      animation-timeline: --pshow;
      animation-range: entry 100% exit 0%;
      animation-timing-function: steps(7, jump-none);
    }
    .pshow .pshow-railfill {
      animation: jbh-pshow-llenar linear both;
      animation-timeline: --pshow;
      animation-range: entry 100% exit 0%;
      transform-origin: top;
    }
    /* Siete pantallas: la columna sube seis séptimos para enseñar la última. */
    @keyframes jbh-pshow-subir { to { transform: translate3d(0, -85.7142%, 0); } }
    @keyframes jbh-pshow-llenar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}


/* Y el relato de la izquierda va con el móvil. La 1.0 mueve la clase «on» con
   JavaScript; aquí cada paso se enciende en su séptimo del recorrido.

   Los fotogramas NO se solapan: cada tramo lleva su borde justo antes y justo
   después (una centésima), porque dos fotogramas en la misma marca dejan al
   navegador interpolando entre ellos y el texto del paso se quedaba medio
   abierto la mitad del recorrido.

   El paso apagado vale .34 en la columna ancha, pero en la estrecha la 1.0
   apila los siete pasos en la MISMA celda y los apaga del todo: dejarlos a .34
   los pintaría a los siete uno encima de otro. De ahí la variable. */
.pshow { --paso-off: .34; }
@media (max-height: 700px), (max-width: 979px) { .pshow { --paso-off: 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pshow .pshow-steps > .pshow-step:nth-child(2),
    .pshow .pshow-dots > .pshow-dot:nth-child(1) {
      animation: jbh-paso-1 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(2) p {
      animation: jbh-paso-texto-1 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-1 {
      0% { opacity: 1; }
      14.2857% { opacity: 1; }
      14.2957% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-1 {
      0% { max-height: 96px; opacity: 1; margin-top: 4px; }
      14.2857% { max-height: 96px; opacity: 1; margin-top: 4px; }
      14.2957% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(3),
    .pshow .pshow-dots > .pshow-dot:nth-child(2) {
      animation: jbh-paso-2 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(3) p {
      animation: jbh-paso-texto-2 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-2 {
      0% { opacity: var(--paso-off); }
      14.2757% { opacity: var(--paso-off); }
      14.2857% { opacity: 1; }
      28.5714% { opacity: 1; }
      28.5814% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-2 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      14.2757% { max-height: 0; opacity: 0; margin-top: 0; }
      14.2857% { max-height: 96px; opacity: 1; margin-top: 4px; }
      28.5714% { max-height: 96px; opacity: 1; margin-top: 4px; }
      28.5814% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(4),
    .pshow .pshow-dots > .pshow-dot:nth-child(3) {
      animation: jbh-paso-3 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(4) p {
      animation: jbh-paso-texto-3 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-3 {
      0% { opacity: var(--paso-off); }
      28.5614% { opacity: var(--paso-off); }
      28.5714% { opacity: 1; }
      42.8571% { opacity: 1; }
      42.8671% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-3 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      28.5614% { max-height: 0; opacity: 0; margin-top: 0; }
      28.5714% { max-height: 96px; opacity: 1; margin-top: 4px; }
      42.8571% { max-height: 96px; opacity: 1; margin-top: 4px; }
      42.8671% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(5),
    .pshow .pshow-dots > .pshow-dot:nth-child(4) {
      animation: jbh-paso-4 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(5) p {
      animation: jbh-paso-texto-4 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-4 {
      0% { opacity: var(--paso-off); }
      42.8471% { opacity: var(--paso-off); }
      42.8571% { opacity: 1; }
      57.1429% { opacity: 1; }
      57.1529% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-4 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      42.8471% { max-height: 0; opacity: 0; margin-top: 0; }
      42.8571% { max-height: 96px; opacity: 1; margin-top: 4px; }
      57.1429% { max-height: 96px; opacity: 1; margin-top: 4px; }
      57.1529% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(6),
    .pshow .pshow-dots > .pshow-dot:nth-child(5) {
      animation: jbh-paso-5 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(6) p {
      animation: jbh-paso-texto-5 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-5 {
      0% { opacity: var(--paso-off); }
      57.1329% { opacity: var(--paso-off); }
      57.1429% { opacity: 1; }
      71.4286% { opacity: 1; }
      71.4386% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-5 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      57.1329% { max-height: 0; opacity: 0; margin-top: 0; }
      57.1429% { max-height: 96px; opacity: 1; margin-top: 4px; }
      71.4286% { max-height: 96px; opacity: 1; margin-top: 4px; }
      71.4386% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(7),
    .pshow .pshow-dots > .pshow-dot:nth-child(6) {
      animation: jbh-paso-6 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(7) p {
      animation: jbh-paso-texto-6 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-6 {
      0% { opacity: var(--paso-off); }
      71.4186% { opacity: var(--paso-off); }
      71.4286% { opacity: 1; }
      85.7143% { opacity: 1; }
      85.7243% { opacity: var(--paso-off); }
      100% { opacity: var(--paso-off); }
    }
    @keyframes jbh-paso-texto-6 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      71.4186% { max-height: 0; opacity: 0; margin-top: 0; }
      71.4286% { max-height: 96px; opacity: 1; margin-top: 4px; }
      85.7143% { max-height: 96px; opacity: 1; margin-top: 4px; }
      85.7243% { max-height: 0; opacity: 0; margin-top: 0; }
      100% { max-height: 0; opacity: 0; margin-top: 0; }
    }
    .pshow .pshow-steps > .pshow-step:nth-child(8),
    .pshow .pshow-dots > .pshow-dot:nth-child(7) {
      animation: jbh-paso-7 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    .pshow .pshow-steps > .pshow-step:nth-child(8) p {
      animation: jbh-paso-texto-7 linear both;
      animation-timeline: --pshow; animation-range: entry 100% exit 0%;
    }
    @keyframes jbh-paso-7 {
      0% { opacity: var(--paso-off); }
      85.7043% { opacity: var(--paso-off); }
      85.7143% { opacity: 1; }
      100% { opacity: 1; }
    }
    @keyframes jbh-paso-texto-7 {
      0% { max-height: 0; opacity: 0; margin-top: 0; }
      85.7043% { max-height: 0; opacity: 0; margin-top: 0; }
      85.7143% { max-height: 96px; opacity: 1; margin-top: 4px; }
      100% { max-height: 96px; opacity: 1; margin-top: 4px; }
    }
  }
}

/* 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. */
/* Las cajas de la 1.0. Sus bloques traen el color en linea —es como escribe
   ella—, asi que aqui hace falta ganarles: de ahi los !important. */
/* Las preguntas frecuentes se pliegan, y hasta ahora no se veía que se
   abrieran: tres titulares sin nada debajo y sin ninguna señal de que hubiera
   algo. El triángulo del navegador está quitado a propósito —es feo y no
   combina—, así que la señal la pone el signo, que cambia al abrir. */
.jbh-faq > summary { position: relative; padding-right: 2.2rem !important; }
.jbh-faq > summary::after {
  content: "+"; position: absolute; right: .35rem; top: 50%;
  transform: translateY(-50%); font-family: var(--font-mono);
  font-size: 1.2rem; line-height: 1; font-weight: 400;
  color: var(--materia, var(--accent-champagne-deep));
}
.jbh-faq[open] > summary::after { content: "–"; }
.jbh-faq > summary:hover { color: var(--materia, var(--accent-champagne-deep)); }

.jbh-caja { border-radius: 1rem; padding: 1.5rem 1.6rem; margin: 1.9rem 0; }
@media (min-width: 48rem) { .jbh-caja { padding: 1.75rem 1.9rem; } }
.jbh-caja > :first-child { margin-top: 0 !important; }
.jbh-caja > :last-child { margin-bottom: 0 !important; }
.jbh-caja-oscura { background: var(--ink-midnight); }
.jbh-caja-oscura h2, .jbh-caja-oscura h3, .jbh-caja-oscura h4,
.jbh-caja-oscura strong { color: var(--surface-bone) !important; }
.jbh-caja-oscura p, .jbh-caja-oscura li, .jbh-caja-oscura td {
  color: rgba(247, 244, 238, .82) !important; }
.jbh-caja-oscura a { color: var(--materia-clara, var(--gold)) !important; }
.jbh-caja-clara { border: 1px solid var(--line-soft);
                  border-left: 2px solid var(--materia, var(--accent-champagne)); }

.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 .nota.ojo { color: var(--accent-champagne, #c2a06a); opacity: 1; }
.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; }