/* ===========================================================================
   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 DESPLAZAMIENTO POR BLOQUES, CON LA MANO SUELTA
   ───────────────────────────────────────────────────────────────────────────
   El enganche se queda —es parte del diseño de su portada, y sus apartados
   están hechos para él: 100vh y «snap-stop: always»—, pero con dos correcciones
   que se ven al medirlo con la rueda del ratón, no leyendo el CSS.

   🔴 1 · Los DOS primeros bloques no tenían punto de enganche. El titular y la
   franja de las cuatro promesas viven dentro de un «header» propio de la 1.0,
   y su regla «.snap» no los alcanza: los primeros 937 px de la portada eran una
   zona muerta donde no se podía parar en ningún sitio. Es el «algún bloque no
   tiene el efecto» que se nota nada más entrar.

   🔴 2 · Con «y mandatory» NO se puede descansar entre dos bloques, así que
   todo gesto que no llegue a la mitad del camino se DESHACE: la página vuelve
   sola a donde estaba y parece que no responde. Con «proximity» el gesto corto
   se respeta y el largo sigue aterrizando en el bloque siguiente, amortiguado
   por «scroll-behavior: smooth», que ya trae la 1.0. Medido con la rueda: con
   «mandatory» un empujón de 600 px acababa a la fuerza en 937; con «proximity»
   el desplazamiento se queda donde lo dejas y engancha al acercarte.

   Y «scroll-padding-top» pasa a 74 px —el alto de la cabecera fija— porque un
   bloque enganchado por su inicio se quedaba con el titular debajo del menú.

   La 1.0 apaga esto sola en pantallas pequeñas y con movimiento reducido; eso
   no se toca. */
html[data-marketing] {
  scroll-snap-type: y proximity;
  scroll-padding-top: 74px;
}
.jbh-marketing main > header > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* El del móvil que avanza al desplazarse NO engancha por dentro: son 5.220 px
   de animación que se mueve con el desplazamiento, y un punto en medio la
   dejaría a medio fotograma. Se engancha al llegar, y luego se atraviesa. */
.pshow { scroll-snap-align: start; scroll-snap-stop: normal; }

/* 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 · LA BARRA DE MENÚ, ABIERTA CON CSS
      ─────────────────────────────────────────────────────────────────────────
      En la 1.0 esto lo lleva React: cuatro estados («mega», «tools», «acc»,
      «rec») que escriben «opacity», «visibility» y «transform» EN LÍNEA sobre
      cada panel. Aquí no hay React, y los paneles nacían con «opacity:0;
      visibility:hidden» puestos en el atributo «style».

      🔴 Resultado: los cuatro desplegables de la cabecera **no se abrían nunca**.
      Las clases estaban, las tarjetas estaban, el CSS de la 1.0 estaba — y no
      había forma de verlos. Y lo que había escrito aquí para abrirlos apuntaba a
      una clase («.jbh-panel») que no existe en el marcado de la 1.0, así que no
      seleccionaba nada.

      Un estilo en línea solo lo gana «!important». De ahí que todas las reglas
      de apertura lo lleven: no es descuido, es la única forma.

      La estructura es la suya, y hay que respetarla:

        <header>
          <div>                        ← la barra
            <nav class="nav-links">
              <div>Servicios ▾</div>   ← 1.º  abre el mega-panel de áreas
              <div>Herramientas ▾</div>← 2.º  abre el mega-panel de herramientas
              <div>Recursos ▾</div>    ← 3.º  lleva su propio panel DENTRO
              <a>Precios</a> <a>Contacto</a>
              <div>Acceder ▾</div>     ← lleva su propio panel DENTRO
            </nav>
            <details class="jbh-burger"><summary class="nav-burger">
          </div>
          <div class="mega-panel">     ← el de áreas
          <div class="mega-panel">     ← el de herramientas
          <div class="mobile-menu">
        </header>

      Los dos paneles grandes NO cuelgan del enlace que los abre: son hermanos de
      la barra. Por eso se seleccionan desde el «<header>» con «:has()», y se
      distinguen sin contar posiciones —que se rompen al añadir nada—: el primero
      es el que TIENE otro «.mega-panel» detrás; el segundo, el que no. */
.nav-links > div { position: relative; }
.nav-links > div > button, .jbh-burger > summary { cursor: pointer; }
.jbh-burger { display: contents; }
.jbh-burger > summary::-webkit-details-marker { display: none; }
.jbh-burger > summary { list-style: none; }

/* Los dos paneles grandes. */
header:has(> div > nav.nav-links > div:nth-child(1):hover)   > .mega-panel:has(~ .mega-panel),
header:has(> div > nav.nav-links > div:nth-child(1):focus-within) > .mega-panel:has(~ .mega-panel),
header:has(> div > nav.nav-links > div:nth-child(2):hover)   > .mega-panel:not(:has(~ .mega-panel)),
header:has(> div > nav.nav-links > div:nth-child(2):focus-within) > .mega-panel:not(:has(~ .mega-panel)),
/* Y siguen abiertos mientras el puntero esté DENTRO del panel: es lo que en la
   1.0 hace el «onMouseEnter» del propio panel con su espera de 160 ms. */
header > .mega-panel:hover,
header > .mega-panel:focus-within {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}

/* Los dos pequeños —Recursos y Acceder— sí cuelgan de su enlace: son el único
   «div» hijo de su «div». Servicios lleva un «button» y Herramientas un «a», así
   que esta regla no los toca. La 1.0 los baja 6 px al abrirlos. */
.nav-links > div:hover > div,
.nav-links > div:focus-within > div {
  opacity: 1 !important; visibility: visible !important; transform: translateY(6px) !important;
}

/* El galón gira y el rótulo se enciende, como en la 1.0
   («transform: rot ? rotate(180deg)» y «color: rec ? var(--ink-accent)»). */
.nav-links > div:hover > button > svg, .nav-links > div:hover > a > svg,
.nav-links > div:focus-within > button > svg, .nav-links > div:focus-within > a > svg {
  transform: rotate(180deg) !important;
}
.nav-links > div:hover > button, .nav-links > div:hover > a,
.nav-links > div:focus-within > button, .nav-links > div:focus-within > a,
.nav-links > a:hover, .nav-links > a:focus-visible {
  color: var(--ink-accent) !important;
}
.mega-panel a:hover { background: rgba(194,160,106,.08); }

/* El menú del móvil: lo abre el «<details>» y se enseña su hermano. */
header:has(.jbh-burger[open]) > .mobile-menu {
  opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;
}
/* Y sus dos plegables —áreas y herramientas—, que en la 1.0 abre React y aquí
   abre el navegador. Ninguno enseña su triángulo: el galón de la 1.0 ya dice que
   aquello se despliega, y dos flechas serían una de más. */
.jbh-plegable-movil > summary::-webkit-details-marker { display: none; }
.jbh-plegable-movil > summary { list-style: none; }
.jbh-plegable-movil[open] > summary > svg { transform: rotate(180deg); }
.jbh-plegable-lista { display: grid; padding: 4px 0 10px; }
.jbh-plegable-lista > a {
  padding: 11px 0 11px 16px; font-size: 15.5px; color: var(--text-dim);
  border-left: 2px solid var(--line-soft); min-height: 44px; display: flex; align-items: center;
}
.jbh-plegable-lista > a:hover, .jbh-plegable-lista > a:focus-visible {
  color: var(--ink-accent); border-left-color: var(--gold);
}

/* 2 bis · EL FONDO DE LA CABECERA
      ─────────────────────────────────────────────────────────────────────────
      En la 1.0: «solid = light || scrolled(>24px) || mega || tools || mobile»,
      y cuando es sólida vale exactamente
      «rgba(12,11,9,0.82)» + «blur(18px) saturate(1.25)» + borde «var(--line)».

      🔴 La portada nace con «background:transparent» porque su servidor la pinta
      sin haber desplazado nada. Sin el guion que lo cambia, la cabecera se
      quedaba transparente PARA SIEMPRE: sobre el bloque oscuro del principio se
      lee, y en cuanto la página llega a un bloque claro el logotipo dorado y los
      enlaces —que son de color claro— desaparecen sobre el papel.

      Aquí se hace al revés que en la 1.0, y a propósito: **sólida por defecto**.
      Si el navegador sabe animar por desplazamiento, se destapa en los primeros
      24 px —los mismos de la 1.0— para que el bloque de entrada respire. Si no
      sabe, se queda sólida, que es el estado que siempre se lee. El fallo, si lo
      hay, cae del lado de verse. */
header:not(.block-light) {
  background: rgba(12, 11, 9, .82);
  backdrop-filter: blur(18px) saturate(1.25);
  border-bottom-color: var(--line);
}
@supports (animation-timeline: scroll()) {
  header:not(.block-light) {
    animation: jbh-cabecera-solida linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 48px;
  }
  @keyframes jbh-cabecera-solida {
    0%, 49.99% { background: transparent; backdrop-filter: none;
                 border-bottom-color: transparent; }
    50%, 100%  { background: rgba(12, 11, 9, .82);
                 backdrop-filter: blur(18px) saturate(1.25);
                 border-bottom-color: var(--line); }
  }
}
/* Con un panel abierto la cabecera es sólida aunque no se haya desplazado: es lo
   que dice «mega || tools» en la 1.0. Una animación gana a una declaración
   normal, así que esto tiene que ir con «!important» para pisarla. */
header:not(.block-light):has(> div > nav.nav-links > div:nth-child(-n+2):hover),
header:not(.block-light):has(> div > nav.nav-links > div:nth-child(-n+2):focus-within),
header:not(.block-light):has(> .mega-panel:hover),
header:not(.block-light):has(.jbh-burger[open]) {
  background: rgba(12, 11, 9, .82) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  border-bottom-color: var(--line) !important;
}

/* 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)); }

/* ── EL BLOQUE DE PLAZOS ────────────────────────────────────────────────────
   Vive dentro de un apartado claro, así que NO lleva ni un color propio: toma
   los del bloque —«--text», «--card-from», «--line», «--gold-deep»— que la 1.0
   ya redefine en «.block-light». Por eso encaja con los de al lado sin que haya
   que afinar nada, y por eso seguiría encajando si mañana cambia la paleta. */
.jbh-plazos { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 62rem) { .jbh-plazos { grid-template-columns: 1fr 1.05fr; } }

.jbh-plazos-pie { font-family: var(--mono); font-size: 12px; line-height: 1.9;
  color: var(--muted); margin: 0; letter-spacing: .02em; }
.jbh-plazos-pie b { color: var(--text-dim); font-weight: 500; }

.jbh-cal { background: var(--card-from); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 24px 60px -50px rgba(40, 32, 20, .55); }

.jbh-cal-entrada { margin: 0 0 20px; font-size: 15px; line-height: 1.6;
  color: var(--text-dim); }
.jbh-cal-entrada .eyebrow { display: block; margin-bottom: 8px; }
.jbh-cal-entrada b { color: var(--text); font-weight: 600; }

.jbh-cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.jbh-cal-cab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); text-align: center;
  padding-bottom: 6px; }
.jbh-cal-hueco { aspect-ratio: 1 / .92; }

/* Cada día es una casilla que dice qué es: el número grande y, debajo, en
   letra de máquina, qué papel juega en el cómputo. */
.jbh-cal-dia { aspect-ratio: 1 / .92; border-radius: 9px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--faint); }
.jbh-cal-dia b { font: 500 14.5px/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; }
.jbh-cal-dia i { font: 400 9px/1 var(--mono); font-style: normal; opacity: .85; }

/* El día que computa: fondo de tinta, como en el panel. */
.jbh-cal-dia.computa { background: #17130d; color: #ece6da; }
.jbh-cal-dia.computa i { color: var(--gold); opacity: 1; }
/* El acto que abre el plazo: papel, con filete. */
.jbh-cal-dia.hecho { background: #fffdf8; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-hard); }
.jbh-cal-dia.hecho i { color: var(--muted); }
/* El festivo: se ve que NO computa, y por qué al pasar por encima. */
.jbh-cal-dia.festivo { background: color-mix(in srgb, var(--risk-high) 9%, transparent);
  color: var(--risk-high); }
.jbh-cal-dia.festivo i { color: var(--risk-high); opacity: .9; }
/* El vencimiento: oro. Es la única casilla que se busca con la mirada. */
.jbh-cal-dia.vence { background: var(--gold); color: #17130d; }
.jbh-cal-dia.vence b { font-weight: 700; }
.jbh-cal-dia.vence i { color: #17130d; opacity: .75; }

.jbh-cal-traza, .jbh-cal-regla { font-family: var(--mono); font-size: 11.5px;
  line-height: 1.85; color: var(--muted); margin: 18px 0 0; }
.jbh-cal-traza .fest { color: var(--risk-high); }
.jbh-cal-regla { margin-top: 10px; padding-top: 0; }
.jbh-cal-regla b { color: var(--text-dim); font-weight: 500; }
.jbh-cal-regla a { color: var(--gold-deep); }

.jbh-cal-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.jbh-cal-fecha > span:first-child { font: 400 clamp(22px, 2.6vw, 30px)/1.1 var(--serif);
  color: var(--text); }
.jbh-cal-sello { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--line-hard); border-radius: 999px; padding: 5px 11px;
  background: color-mix(in srgb, var(--gold) 10%, transparent); }

/* ── PRECIOS ────────────────────────────────────────────────────────────────
   Dos públicos que no tienen nada que ver —quien tiene un caso y quien lleva un
   despacho— y una sola dirección. El interruptor es un grupo de botones de
   radio: lo abre el navegador, funciona con teclado y no necesita JavaScript.
   Los paneles no se esconden con «hidden»: se esconden con CSS, y los radios
   siguen siendo focalizables, que es lo que hace que se puedan cambiar sin
   ratón. */
.jbh-precios-hero {
  background: var(--ink-midnight); color: var(--surface-bone);
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(2.6rem, 5vw, 3.4rem);
  border-bottom: 1px solid rgba(247, 244, 239, .1);
}
.jbh-precios-portada { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
@media (min-width: 64rem) { .jbh-precios-portada { grid-template-columns: 1.25fr 1fr; } }
/* La respuesta corta de las dos vías, arriba del todo: es la pregunta con la que
   se entra en esta página. Las cifras salen de las tarjetas de más abajo. */
.jbh-resumen { display: grid; gap: 14px; }
@media (min-width: 34rem) { .jbh-resumen { grid-template-columns: repeat(2, 1fr); } }
.jbh-resumen-via {
  padding: 20px 22px; border-radius: 14px;
  border: 1px solid rgba(247, 244, 239, .16);
  background: rgba(247, 244, 239, .04);
}
.jbh-resumen-quien {
  margin: 0 0 .5rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-champagne);
}
.jbh-resumen-cifra {
  margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -.02em;
  color: var(--surface-bone); font-variant-numeric: lining-nums tabular-nums;
}
.jbh-resumen-pie { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(247, 244, 239, .72); }

.jbh-precios-h1 {
  font-family: var(--font-display); font-weight: 300; letter-spacing: -.02em;
  font-size: var(--text-hero); line-height: 1.05; margin: 0 0 1.1rem; max-width: 20ch;
}
.jbh-precios-dek {
  font-size: var(--text-lead); line-height: 1.6; opacity: .85; max-width: 62ch; margin: 0;
}

/* La barra del perfil se queda pegada arriba: la página es larga y la pregunta
   «¿esto es lo mío?» vuelve cada dos apartados. */
/* ── LA LLAMADA A LA CALCULADORA ──────────────────────────────────────────
   Lo único de esta página que contesta de verdad «¿cuánto me cuesta a mí?».
   Va en tinta y a lo ancho porque tiene que verse antes que las horquillas: si
   se lee la tabla primero, ya no hace falta pulsarlo — y una horquilla de mil a
   seis mil no le sirve a nadie para decidir. */
.jbh-calc {
  display: grid; gap: 22px; align-items: center;
  grid-template-columns: 1fr; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(26px, 4vw, 38px); border-radius: 20px;
  background: var(--ink-midnight); color: var(--surface-bone);
  box-shadow: 0 18px 48px -28px rgba(12, 11, 9, .7);
}
@media (min-width: 56rem) { .jbh-calc { grid-template-columns: 1.55fr 1fr; gap: 40px; } }
.jbh-calc-et {
  margin: 0 0 .7rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent-champagne);
}
.jbh-calc-h2 {
  margin: 0 0 .8rem; font-weight: 300; line-height: 1.08; letter-spacing: -.015em;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem); color: var(--surface-bone);
}
.jbh-calc-h2 em { font-style: italic; color: var(--accent-champagne); }
.jbh-calc-dek {
  margin: 0 0 1rem; font-size: 1.02rem; line-height: 1.62;
  color: rgba(247, 244, 239, .82); max-width: 54ch;
}
.jbh-calc-dek strong { color: var(--surface-bone); }
.jbh-calc-pie {
  margin: 0; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(247, 244, 239, .55);
}
.jbh-calc-boton { display: grid; gap: 12px; justify-items: stretch; }
.jbh-calc-boton > a { width: 100%; }
.jbh-calc-o {
  margin: 0; font-size: .86rem; line-height: 1.5; text-align: center;
  color: rgba(247, 244, 239, .6);
}
.jbh-resumen-cta { margin: .8rem 0 0; }
.jbh-resumen-cta a {
  font-size: .92rem; font-weight: 600; color: var(--accent-champagne-deep);
  border-bottom: 1px solid var(--line-soft); padding-bottom: 2px;
}
.jbh-resumen-cta a:hover { border-bottom-color: var(--accent-champagne-deep); }
.jbh-precios-dos-botones {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0;
}
.jbh-boton-calma {
  display: inline-flex; align-items: center; min-height: 3.5rem; padding: 0 1.6rem;
  border: 1px solid rgba(247, 244, 239, .4); color: var(--surface-bone);
  font-size: .92rem; transition: border-color .25s, color .25s;
}
.jbh-boton-calma:hover { border-color: var(--accent-champagne); color: var(--accent-champagne); }

/* ── LAS PESTAÑAS DE MATERIA ──────────────────────────────────────────────
   Mismo mecanismo que el conmutador de perfil: botones de radio y «:has()», sin
   un byte de JavaScript. Diez materias no caben en una fila, así que la barra se
   desplaza a lo ancho en pantalla estrecha en vez de partirse en cuatro líneas
   que empujan la tabla fuera de la vista. */
.jbh-mat-barra {
  border: 0; margin: 0 0 20px; padding: 0 0 4px; display: flex; gap: 8px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* ⚠️ Un «fieldset» trae «min-inline-size: min-content» de fábrica, así que
     crece hasta caber sus diez pastillas —1.204 px— y «overflow-x» no llega a
     actuar: el contenedor de arriba las recorta y en un teléfono las siete
     últimas materias quedan invisibles Y sin forma de llegar a ellas. No da
     ningún error: la página se ve bien, con tres materias. */
  min-inline-size: 0; max-width: 100%;
}
/* Y que se vea que hay más a la derecha. Con la barra de desplazamiento oculta,
   nada lo dice: en un teléfono se ven tres materias y parece que son tres. El
   difuminado del borde es la única señal que queda. */
.jbh-mat-envoltura { position: relative; }
.jbh-mat-envoltura::after {
  content: ""; position: absolute; top: 0; right: 0; width: 46px; height: 44px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface-bone) 78%);
}
@media (min-width: 72rem) { .jbh-mat-envoltura::after { display: none; } }
.jbh-mat-barra::-webkit-scrollbar { display: none; }
.jbh-mat-barra > legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.jbh-mat-barra > input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.jbh-mat-barra > label {
  cursor: pointer; white-space: nowrap; min-height: 44px; display: inline-flex;
  align-items: center; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-hard); font-size: .92rem; font-weight: 500;
  color: var(--ink-graphite); transition: background .2s, border-color .2s, color .2s;
}
.jbh-mat-barra > label:hover { border-color: var(--gold); }
.jbh-mat-barra > input:checked + label {
  background: var(--ink-midnight); border-color: var(--ink-midnight);
  color: var(--surface-bone);
}
.jbh-mat-barra > input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Todas ocultas menos la marcada. Se escribe una regla por materia con «:has()»
   —el selector no puede relacionar el radio con un panel que no es su hermano
   inmediato de otra forma— y por eso el generador escribe el identificador de
   cada una. */
.jbh-materias > .jbh-mat-panel { display: none; }
.jbh-materias:has(#mat-penal:checked)       #panel-mat-penal,
.jbh-materias:has(#mat-civil:checked)       #panel-mat-civil,
.jbh-materias:has(#mat-laboral:checked)     #panel-mat-laboral,
.jbh-materias:has(#mat-mercantil:checked)   #panel-mat-mercantil,
.jbh-materias:has(#mat-familia:checked)     #panel-mat-familia,
.jbh-materias:has(#mat-sucesiones:checked)  #panel-mat-sucesiones,
.jbh-materias:has(#mat-inmobiliario:checked) #panel-mat-inmobiliario,
.jbh-materias:has(#mat-fiscal:checked)      #panel-mat-fiscal,
.jbh-materias:has(#mat-contencioso:checked) #panel-mat-contencioso,
.jbh-materias:has(#mat-extranjeria:checked) #panel-mat-extranjeria { display: block; }
/* Y el respaldo: si un navegador no entiende «:has()», se ven TODAS en vez de
   ninguna. Una lista larga es peor que unas pestañas; una página en blanco donde
   van los precios es mucho peor que las dos cosas. */
@supports not selector(:has(*)) {
  .jbh-materias > .jbh-mat-panel { display: block; }
  .jbh-mat-barra { display: none; }
}
.jbh-detalle-penal { margin: 22px 0 0; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.jbh-detalle-penal > summary {
  cursor: pointer; font-size: .95rem; font-weight: 600; color: var(--accent-champagne-deep);
  min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.jbh-detalle-penal > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.jbh-detalle-pie { margin: .2rem 0 1rem; font-size: .9rem; color: var(--ink-graphite); }
.jbh-m1 { width: 22%; } .jbh-m2 { width: auto; } .jbh-m3 { width: 9%; } .jbh-m4 { width: 20%; }
.jbh-vista { font-size: .9rem; color: var(--ink-graphite); }
.jbh-que { font-size: .9rem; line-height: 1.5; color: var(--ink-graphite); }

.jbh-perfil-barra {
  position: sticky; top: 74px; z-index: 40;
  background: color-mix(in srgb, var(--surface-bone) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
}
.jbh-perfil-caja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px;
}
.jbh-perfil { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.jbh-perfil > legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* El radio no se quita de en medio con «display:none»: eso lo saca del recorrido
   del teclado. Se queda debajo de su etiqueta, sin verse. */
.jbh-perfil > input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.jbh-perfil > label {
  cursor: pointer; display: grid; gap: 2px; min-height: 44px; justify-items: start;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-hard);
  transition: background .25s, border-color .25s, color .25s;
}
.jbh-perfil-rotulo { font-size: 14.5px; font-weight: 600; color: var(--ink-midnight); }
.jbh-perfil-pie {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-graphite); opacity: .6;
}
.jbh-perfil > label:hover { border-color: var(--gold); }
.jbh-perfil > input:checked + label {
  background: var(--ink-midnight); border-color: var(--ink-midnight);
}
.jbh-perfil > input:checked + label .jbh-perfil-rotulo { color: var(--surface-bone); }
.jbh-perfil > input:checked + label .jbh-perfil-pie { color: var(--accent-champagne); opacity: 1; }
.jbh-perfil > input:focus-visible + label {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.jbh-iva {
  margin: 0; font-size: 12.5px; color: var(--ink-graphite); opacity: .75;
}
/* En un teléfono la barra se comía media pantalla: dos pastillas de dos líneas
   y el aviso del IVA debajo. El pie de cada pastilla explica la elección la
   primera vez; a partir de ahí sobra, y ahí el sitio vale más que la nota. */
@media (max-width: 34rem) {
  .jbh-perfil { flex-wrap: nowrap; width: 100%; }
  .jbh-perfil > label { flex: 1; justify-items: center; padding: 9px 10px; text-align: center; }
  .jbh-perfil-rotulo { font-size: 13.5px; }
  .jbh-perfil-pie { display: none; }
  .jbh-iva { font-size: 11.5px; }
  .jbh-perfil-caja { gap: 8px; padding-top: 9px; padding-bottom: 9px; }
}

.jbh-precios-cuerpo {
  position: relative; isolate: isolate; overflow: hidden;
  background: var(--surface-bone); padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.jbh-panel-perfil { display: block; }
.jbh-precios:has(#perfil-cliente:checked) #panel-abogado,
.jbh-precios:has(#perfil-abogado:checked) #panel-cliente { display: none; }

.jbh-seccion { margin: 0 0 clamp(3rem, 6vw, 5rem); }
.jbh-h2 {
  font-family: var(--font-display); font-weight: 300; line-height: 1.1;
  font-size: var(--text-display); color: var(--ink-midnight); margin: 0 0 .9rem; max-width: 26ch;
}
.jbh-epigrafe {
  margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--accent-champagne-deep);
}
.jbh-dek {
  margin: 0 0 2rem; font-size: 1.06rem; line-height: 1.65;
  color: var(--ink-graphite); max-width: 68ch;
}

/* Las tres cajas de «lo que pagas» y los cuatro planes: el mismo molde, a lo
   ancho. Tres y cuatro columnas es lo que la 1.0 usa aquí. */
.jbh-conceptos, .jbh-planes { display: grid; gap: 18px; }
@media (min-width: 52rem) { .jbh-conceptos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 46rem) { .jbh-planes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .jbh-planes { grid-template-columns: repeat(4, 1fr); } }
.jbh-tarjeta {
  display: flex; flex-direction: column; padding: 26px; border-radius: 16px;
  border: 1px solid var(--line-soft); background: #fff;
}
.jbh-tarjeta-oscura {
  background: var(--ink-midnight); color: var(--surface-bone); border-color: var(--ink-midnight);
}
.jbh-tarjeta-titulo {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem;
  color: var(--ink-midnight);
}
.jbh-tarjeta-oscura .jbh-tarjeta-titulo { color: var(--surface-bone); }
.jbh-tarjeta-importe {
  margin: .5rem 0 1rem; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.02em;
  color: var(--ink-midnight); font-variant-numeric: lining-nums tabular-nums;
}
.jbh-tarjeta-oscura .jbh-tarjeta-importe { color: var(--accent-champagne); }
.jbh-tarjeta-cuerpo {
  font-size: .95rem; line-height: 1.6; color: var(--ink-graphite);
  display: flex; flex-direction: column; flex: 1;
}
/* La llamada de cada plan, abajo del todo: cuatro tarjetas con listas de
   distinto largo dejaban los cuatro botones a cuatro alturas. */
/* El «!important» no es descuido: la pastilla trae su margen y su color EN
   LÍNEA —así los escribe la 1.0— y un estilo en línea no lo gana nada más. */
.jbh-tarjeta-cuerpo > div:last-child { margin-top: auto !important; padding-top: .4rem; }
.jbh-tarjeta-oscura .jbh-tarjeta-cuerpo a {
  border-color: rgba(247, 244, 239, .45) !important; color: var(--surface-bone) !important;
}
.jbh-tarjeta-oscura .jbh-tarjeta-cuerpo a:hover {
  border-color: var(--accent-champagne) !important; color: var(--accent-champagne) !important;
}
.jbh-tarjeta-oscura .jbh-tarjeta-cuerpo { color: rgba(247, 244, 239, .82); }
.jbh-tarjeta-cuerpo p { margin: 0 0 .7rem; }
.jbh-tarjeta-cuerpo p:last-child { margin-bottom: 0; }
.jbh-tarjeta-cuerpo ul { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.jbh-tarjeta-cuerpo li { font-size: .9rem; }
.jbh-tarjeta-cuerpo a { color: inherit; }

/* La tabla ancha: es lo que la 1.0 enseña en escritorio y lo que aquí no había.
   En pantalla estrecha cada fila se convierte en una ficha —sin duplicar el
   contenido en el HTML, como hace ella—. */
.jbh-tabla-ancha {
  overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 16px; background: #fff;
}
.jbh-tabla-ancha table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.jbh-tabla-ancha thead th {
  background: var(--ink-midnight); color: rgba(247, 244, 239, .72);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; padding: 13px 16px; white-space: nowrap;
}
.jbh-tabla-ancha thead th.jbh-oro { color: var(--accent-champagne); }
.jbh-tabla-ancha tbody tr { border-top: 1px solid var(--line-soft); }
.jbh-tabla-ancha tbody th, .jbh-tabla-ancha tbody td {
  padding: 14px 16px; vertical-align: top; color: var(--ink-graphite); font-weight: 400;
}
.jbh-tabla-ancha tr.jbh-grupo th {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-champagne-deep); padding: 9px 16px;
}
@media (min-width: 60rem) {
  .jbh-tabla-ancha col.jbh-c1 { width: 34%; }
  .jbh-tabla-ancha col.jbh-c2 { width: 12%; }
  .jbh-tabla-ancha col.jbh-c3 { width: 11%; }
  .jbh-tabla-ancha col.jbh-c4 { width: 16%; }
  .jbh-tabla-ancha col.jbh-c5 { width: 27%; }
  /* La de operaciones son tres columnas, y la del medio es la que lleva el
     texto: darle la mitad es lo que evita que se lea en columnas de tres
     palabras mientras la primera se queda medio vacía. */
  .jbh-tabla-ancha col.jbh-o1 { width: 26%; }
  .jbh-tabla-ancha col.jbh-o2 { width: 50%; }
  .jbh-tabla-ancha col.jbh-o3 { width: 24%; }
}
.jbh-tp { display: block; font-size: 15px; color: var(--ink-midnight); font-weight: 500; }
.jbh-refs { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; opacity: .6; }
.jbh-importe {
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-midnight);
  white-space: nowrap; font-variant-numeric: lining-nums tabular-nums;
}
.jbh-suma { font-size: 12.5px; opacity: .8; }
.jbh-compl {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.jbh-compl-baja { color: #2c7d54; }
.jbh-compl-media { color: #a45b1b; }
.jbh-compl-alta { color: #a4441b; }
.jbh-compl-muy-alta { color: #8c2f2f; }
@media (max-width: 60rem) {
  .jbh-tabla-ancha { overflow: visible; border: 0; background: none; border-radius: 0; }
  .jbh-tabla-ancha thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .jbh-tabla-ancha table, .jbh-tabla-ancha tbody, .jbh-tabla-ancha tr,
  .jbh-tabla-ancha tbody th, .jbh-tabla-ancha tbody td { display: block; }
  .jbh-tabla-ancha tbody tr {
    border: 1px solid var(--line-soft); border-radius: 14px; background: #fff;
    padding: 14px 16px; margin: 0 0 12px;
  }
  .jbh-tabla-ancha tbody tr.jbh-grupo {
    border: 0; background: none; padding: 10px 0 2px; margin: 0;
  }
  .jbh-tabla-ancha tbody th, .jbh-tabla-ancha tbody td { padding: 4px 0; }
  .jbh-tabla-ancha tbody td[data-et]::before {
    content: attr(data-et) " · "; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; opacity: .55;
  }
}
/* El oro va en la columna del importe, y esa no está en el mismo sitio en las
   dos tablas: se marca con una clase en vez de contar posiciones. */
.jbh-coste { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-midnight); }

.jbh-factores {
  margin-top: 26px; padding: 26px; border-radius: 16px;
  background: var(--surface-mist, #efe9df);
}
.jbh-factores-titulo {
  margin: 0 0 .9rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--ink-midnight);
}
.jbh-factores ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem 2rem; }
@media (min-width: 46rem) { .jbh-factores ul { grid-template-columns: repeat(2, 1fr); } }
.jbh-factores li { font-size: .92rem; line-height: 1.45; color: var(--ink-graphite); }

.jbh-banda-oscura {
  background: var(--ink-midnight); color: var(--surface-bone);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.jbh-banda-oscura .jbh-h2 { color: var(--surface-bone); }
.jbh-banda-oscura .jbh-dek { color: rgba(247, 244, 239, .72); }
.jbh-premium { display: grid; gap: 1px; background: rgba(247, 244, 239, .12); }
@media (min-width: 40rem) { .jbh-premium { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .jbh-premium { grid-template-columns: repeat(3, 1fr); } }
.jbh-premium-ficha { background: var(--ink-midnight); padding: 26px; }
.jbh-premium-ficha h3 {
  margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem;
  color: var(--surface-bone);
}
.jbh-premium-ficha p { margin: 0; font-size: .9rem; line-height: 1.6; color: rgba(247, 244, 239, .7); }

.jbh-cierre {
  padding: 30px; border-radius: 18px; border: 1px solid var(--line-soft); background: #fff;
  font-size: 1rem; line-height: 1.65; color: var(--ink-graphite);
}
.jbh-cierre p { max-width: 68ch; }
.jbh-faqs > .jbh-faq, .jbh-faqs details { max-width: 74ch; }
.jbh-precios-cierre { text-align: left; }
/* Dos barras pegadas arriba —la del sitio y la del perfil—: un enlace interno
   dejaba su destino debajo de las dos. */
.jbh-precios :target { scroll-margin-top: 152px; }

/* ── CONTAR EL CASO ─────────────────────────────────────────────────────────
   Un formulario de HTML puro, sin un byte de JavaScript. Etiqueta visible en
   cada campo —no un texto de ejemplo que desaparece al escribir— y el error
   arriba, donde se lee antes de volver a intentarlo. */
.jbh-contar { display: grid; gap: clamp(28px, 5vw, 56px); align-items: start; }
@media (min-width: 62rem) { .jbh-contar { grid-template-columns: 1fr 1.05fr; } }
.jbh-contar-texto h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08;
  letter-spacing: -.02em; margin: 14px 0 16px; }
.jbh-contar-texto p { color: var(--text-dim); line-height: 1.65; margin: 0 0 14px; max-width: 46ch; }
.jbh-contar-urgente { color: var(--text) !important; }
.jbh-contar-form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--card-from); }
.jbh-campo { display: grid; gap: 6px; }
.jbh-campo > span { font-size: 14.5px; font-weight: 600; color: var(--text); }
.jbh-campo > span em { font-style: normal; font-weight: 400; color: var(--muted); }
.jbh-campo > small { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.jbh-campo input, .jbh-campo textarea {
  width: 100%; font: 400 16px/1.5 var(--font-body); color: var(--text);
  padding: 12px 14px; border: 1px solid var(--line-hard); border-radius: 10px;
  background: var(--surface-bone); min-height: 48px;
}
.jbh-campo textarea { resize: vertical; min-height: 130px; }
.jbh-campo input:focus-visible, .jbh-campo textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold);
}
.jbh-contar-legal { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.jbh-contar-error { margin: 0; padding: 12px 14px; border-radius: 10px;
  border-left: 3px solid var(--risk-high, #8c2f2f); background: rgba(140,47,47,.07);
  font-size: 14px; line-height: 1.5; color: var(--text); }
.jbh-contar-form .btn { justify-self: start; }
/* El cebo para robots: fuera de la vista y fuera del teclado, pero sin
   «display:none» —hay robots que lo detectan y lo saltan—. */
.jbh-cebo { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.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; }