/* ===========================================================================
   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);
  /* ⚠️ Eran 160 px de negro vacío ENCIMA del rastro de migas, con la cabecera
     ya puesta: un cuarto de la primera pantalla sin una sola palabra, y la
     llamada a la calculadora —lo único que contesta «¿cuánto me cuesta a mí?»—
     empujada fuera del marco y cortada por la mitad. El aire de un titular se
     mide por lo que deja ver debajo, no por lo que reserva encima. */
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 3.5vw, 2.75rem);
  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 .75rem; 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. */
/* ── LOS BOTONES DE LLAMADA, ESCRITOS ENTEROS ─────────────────────────────
   🔴 Los botones nuevos usaban las clases de utilidad de la 1.0
   («bg-[color:var(--accent-champagne)] text-[color:var(--ink-midnight)]
   hover:bg-[color:var(--surface-bone)]»). El fondo del hover SÍ existe en su
   hoja y el color del texto NO, así que dentro de una caja oscura el texto
   heredaba el hueso del contenedor y al pasar el ratón quedaba
   **hueso sobre hueso: el botón se vaciaba**. Y en reposo, hueso sobre oro,
   que son 1,9:1.

   Se escriben aquí enteros, con sus dos estados y sin depender de que exista
   ninguna utilidad. Un botón que desaparece al apuntarlo es el peor sitio
   donde tener un fallo de contraste: es justo donde la persona está mirando. */
.jbh-cta, .jbh-cta-calma {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  /* El mismo ángulo que los botones de al lado. Estaba a escuadra —herencia de
     las utilidades de la 1.0, que no traían ninguna esquina— y quedaba un botón
     de esquina viva pegado a dos de esquina blanda: la llamada principal de la
     página parecía de otro sitio. */
  min-height: 3.5rem; padding: 0 1.7rem; border-radius: 10px; text-decoration: none;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
.jbh-cta {
  background: var(--accent-champagne); color: var(--ink-midnight) !important;
  border: 1px solid var(--accent-champagne);
}
.jbh-cta:hover, .jbh-cta:focus-visible {
  background: var(--accent-champagne-bright, #e0c391);
  border-color: var(--accent-champagne-bright, #e0c391);
  color: var(--ink-midnight) !important;
}
.jbh-cta-calma {
  background: transparent; color: var(--surface-bone) !important;
  border: 1px solid rgba(247, 244, 239, .42);
}
.jbh-cta-calma:hover, .jbh-cta-calma:focus-visible {
  border-color: var(--accent-champagne); color: var(--accent-champagne) !important;
}
/* ── UN SOLO LENGUAJE DE BOTÓN ────────────────────────────────────────────
   El sitio llevaba CUATRO radios: los botones escritos para la 2.0 a escuadra,
   los selectores a 10 px, la banda de urgencias a 12 y «.btn» —el botón de la
   1.0, que sale unas veinte veces por página en las 613— en píldora entera.
   Cuatro formas para el mismo gesto es cuatro veces la misma pregunta: «¿esto
   se pulsa?».

   «.btn» vive en la hoja importada de la 1.0. No se toca allí: esta hoja carga
   la última, así que basta con volver a declarar la esquina. Deshacerlo es
   borrar estas dos líneas.

   🔴 Y hay que repetir sus DOS selectores. La 1.0 lo escribe como
   «.btn, .jbh-marketing .btn», y ese segundo vale dos clases: un «.btn» a
   secas, aunque cargue después, pierde por especificidad y no pasa nada —sin
   un solo error, con la regla publicada y visible en el inspector—. Ir la
   última en la hoja no basta cuando enfrente hay una clase más.

   ⚠️ «.pshow-btn» se queda en píldora a propósito: no es un botón del sitio,
   es el DIBUJO de un botón dentro del móvil de la portada, y los botones de
   una aplicación son así. */
.btn, .jbh-marketing .btn { border-radius: 10px; }
/* Y los dos del titular de la portada, que iban por su cuenta a 8 px. Se
   buscan por el TROZO del nombre, no por el nombre entero: la 1.0 les pone un
   revoltijo al final («HeroPenalIA_btn__5Wkea») que cambia si se vuelve a
   importar su web, y un selector que caduca solo es peor que no ponerlo. */
[class*="HeroPenalIA_btn"] { border-radius: 10px; }

/* Sobre fondo claro el botón sereno se pinta al revés: en tinta. */
.jbh-cta-calma.sobre-claro {
  color: var(--ink-midnight) !important; border-color: var(--line-hard);
}
.jbh-cta-calma.sobre-claro:hover, .jbh-cta-calma.sobre-claro:focus-visible {
  border-color: var(--accent-champagne-deep); color: var(--accent-champagne-deep) !important;
}

/* ── 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(2rem, 4vw, 3rem);
  padding: clamp(22px, 3vw, 30px); 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 .6rem; font-weight: 300; line-height: 1.08; letter-spacing: -.015em;
  /* No compite con el h1 de la portada: aquí manda el botón, no el titular. */
  font-size: clamp(1.75rem, 3.4vw, 2.4rem); color: var(--surface-bone);
}
.jbh-calc-h2 em { font-style: italic; color: var(--accent-champagne); }
.jbh-calc-dek {
  margin: 0 0 .8rem; font-size: .97rem; line-height: 1.55;
  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: 10px;
  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;
  /* Píldora entera, no: un botón de dos líneas con los extremos redondos del
     todo parece una etiqueta —algo que se lee— y no algo que se pulsa. El
     mismo radio que las pestañas de materia, que son el mismo gesto. */
  padding: 9px 18px; border-radius: 10px; 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(1.75rem, 3.5vw, 2.75rem) 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; } }
/* Lo que existe para quien no ve la pantalla.
   Se usa para poner el encabezado que a un bloque le falta sin cambiar nada de
   cómo se ve: «clip-path» lo saca de la vista pero NO del árbol de
   accesibilidad, que es lo que distingue esto de un «display:none». */
/* ── LA FICHA DE UN ARTÍCULO DE LEY ──────────────────────────────────────
   Diez mil quinientas páginas. El número y la norma en el hero oscuro, los
   datos en una ficha de dos columnas —no en cuatro viñetas que empiezan por un
   guion— y el texto oficial en el centro, con el tamaño que merece lo único
   que la gente viene a leer aquí. */
.jbh-ficha-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--ink-midnight); color: var(--surface-bone);
  border-bottom: 1px solid rgba(247, 244, 239, 0.10);
  padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 4.5vw, 3.5rem);
}
.jbh-art-titular {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.04;
  letter-spacing: -0.02em; margin: 0 0 1.2rem; text-wrap: balance;
}
.jbh-art-titular .norma {
  display: block; font-size: clamp(1rem, 1.5vw, 1.28rem); line-height: 1.3;
  opacity: .68; margin-top: .7rem; max-width: 30ch; letter-spacing: 0;
}
.jbh-art-descargo {
  margin: 0; font-size: .95rem; line-height: 1.65; opacity: .72; max-width: 52ch;
}
.jbh-area-cuenta { margin: 0 0 1rem; display: flex; align-items: baseline; gap: .5rem; }
.jbh-area-cuenta b {
  font-family: var(--font-display); font-weight: 300; font-size: 2.2rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jbh-area-cuenta span { font-size: .84rem; opacity: .7; }

.jbh-art-datos {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem;
  font-size: .84rem; line-height: 1.5;
}
.jbh-art-datos dt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .6; padding-top: .18rem; white-space: nowrap;
}
.jbh-art-datos dd { margin: 0; opacity: .92; }
.jbh-art-datos dd.sola { grid-column: 1 / -1; opacity: .75; }
.jbh-art-boe { margin: 1.1rem 0 0; font-size: .82rem; }
.jbh-art-boe a {
  color: var(--accent-champagne); text-decoration: none;
  border-bottom: 1px solid rgba(194,160,106,.4); padding-bottom: 1px;
}
.jbh-art-boe a:hover { border-bottom-color: var(--accent-champagne); }

/* La medida de lectura, dentro del ancho de la página: el borde izquierdo es
   el mismo que el del titular y lo que se estrecha es la línea de texto, que
   es lo que hay que estrechar. */
.jbh-lectura { max-width: 64rem; }
.jbh-video-hero {
  width: min(100% - 2.5rem, 60rem); margin-inline: auto;
}

.jbh-art-rotulo {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--materia, var(--accent-champagne-deep));
  font-weight: 600; margin: 0 0 1.2rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
/* El texto de la ley, que es a lo que se viene. Serif, grande y con medida
   corta: se lee como se lee un código, no como un párrafo de web. */
.jbh-art-texto {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.24rem, 1.9vw, 1.5rem); line-height: 1.55;
  color: var(--ink-midnight); max-width: 58ch;
}
.jbh-art-texto p { margin: 0 0 1.1rem; }
.jbh-art-texto p:last-child { margin-bottom: 0; }

.jbh-art-pager {
  display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
@media (min-width: 40rem) { .jbh-art-pager { grid-template-columns: 1fr 1fr; } }
.jbh-art-paso {
  display: block; padding: 1rem 1.15rem; border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; transition: border-color .15s;
}
.jbh-art-paso:hover, .jbh-art-paso:focus-visible {
  border-color: var(--materia, var(--gold));
}
.jbh-art-paso.siguiente { text-align: right; }
.jbh-art-paso .et {
  display: block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; opacity: .55; margin-bottom: .3rem;
  color: var(--ink-graphite);
}
.jbh-art-paso .que {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: 1.15rem; color: var(--ink-midnight);
}

/* ── UNA FILA DE PASTILLAS, CON NOMBRE ───────────────────────────────────
   Sin rótulo, una fila de pastillas obliga al lector a adivinar qué son; y una
   sola pastilla suelta en medio de un bloque en blanco se lee como un descuido.
   Con nombre y con aire medido, son lo que son: por dónde seguir. */
.jbh-pastillas { margin: 1.6rem 0; }
.jbh-pastillas-rotulo {
  margin: 0 0 .7rem; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--materia, var(--accent-champagne-deep)); font-weight: 600;
}
.jbh-pastillas ul {
  display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0;
}
.jbh-pastillas ul > li::before { content: none; }
.jbh-pastillas a {
  display: inline-block; border: 1px solid rgba(20,24,31,0.18); border-radius: 999px;
  padding: .45rem 1rem; font-size: .88rem; color: var(--ink-midnight);
  text-decoration: none; transition: border-color .15s, color .15s;
}
.jbh-pastillas a:hover, .jbh-pastillas a:focus-visible {
  border-color: var(--materia, var(--gold)); color: var(--materia, var(--gold));
}

/* ── UN APARTADO ES UNA SOLA COSA ────────────────────────────────────────
   Numeral en su carril; epígrafe, titular, prosa y catálogo colgando de la
   MISMA columna. Antes el titular iba en una retícula y el cuerpo fuera de
   ella: el título empezaba en el píxel 290 y su propio texto volvía al 64. */
.jbh-apartado {
  display: grid; gap: 0 clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 clamp(3.5rem, 6vw, 5rem);
}
@media (min-width: 48rem) {
  .jbh-apartado { grid-template-columns: clamp(5rem, 8vw, 8rem) minmax(0, 1fr); }
  /* 🔴 Sin numeral no hay dos columnas. Con ellas, el cuerpo se metía en el
     carril de ocho rem y salía a dos palabras por línea. */
  .jbh-apartado.sin-numeral { grid-template-columns: minmax(0, 1fr); }
}
.jbh-apartado-num {
  font-family: var(--font-display); font-weight: 300; line-height: .8;
  font-variant-numeric: tabular-nums; user-select: none;
  font-size: clamp(3.6rem, 8vw, 6.5rem);
  color: transparent; -webkit-text-stroke: 1.6px var(--materia, var(--ink-midnight));
  letter-spacing: var(--tracking-tight); opacity: .75;
  margin-bottom: .6rem;
}
@media (min-width: 48rem) { .jbh-apartado-num { margin: .15rem 0 0; } }
.jbh-apartado-epigrafe {
  margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: var(--tracking-extreme); text-transform: uppercase;
  color: var(--materia, var(--accent-champagne-deep)); font-weight: 600;
}
.jbh-apartado-titular {
  font-family: var(--font-display); font-weight: 300; line-height: 1.02;
  font-size: var(--text-h1); color: var(--ink-midnight);
  margin: 0 0 1.4rem; max-width: 24ch; text-wrap: balance;
}
.jbh-apartado-prosa {
  color: var(--ink-graphite); font-size: 1.05rem; line-height: 1.7; max-width: 68ch;
}
.jbh-apartado-prosa + .jbh-apartado-prosa { margin-top: 1.4rem; }

/* Las viñetas, con la marca de la casa en vez del punto del navegador. */
.jbh-apartado-prosa ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.jbh-apartado-prosa ul > li {
  position: relative; padding-left: 1.5rem; margin: 0 0 .7rem;
}
.jbh-apartado-prosa ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: 1px; background: var(--materia, var(--accent-champagne-deep));
}
.jbh-apartado-prosa ol { padding-left: 1.3rem; margin: 1.2rem 0; }
.jbh-apartado-prosa ol > li { margin: 0 0 .7rem; }

/* ── EL HERO A DOS COLUMNAS ──────────────────────────────────────────────
   El titular no ocupa la pantalla entera: ocupa dos tercios, y el tercio
   restante lleva lo que hay que hacer AHORA —el teléfono— y la ley que se
   aplica. Antes ese tercio era navy vacío: setecientos píxeles de nada en una
   pantalla de 1440, y las dos cosas útiles andaban sueltas media pantalla más
   abajo, rodeadas de blanco, como un resto de maquetación.

   En móvil se apila, y el panel va DEBAJO del titular: quien llega por el
   teléfono lo encuentra igual, y quien llega leyendo no se topa con una caja
   antes del titular. */
.jbh-hero-dos {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 62rem) {
  .jbh-hero-dos { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 0.85fr); }
}
.jbh-hero-ficha {
  border: 1px solid rgba(247, 244, 239, 0.16);
  border-top: 2px solid var(--materia, var(--accent-champagne));
  padding: 1.5rem 1.4rem 1.6rem;
  background: rgba(247, 244, 239, 0.035);
}
.jbh-ficha-rotulo {
  margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--materia, var(--accent-champagne)); font-weight: 600;
}
.jbh-ficha-tel {
  display: inline-block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.01em;
  color: var(--surface-bone); text-decoration: none; margin: 0 0 .6rem;
}
.jbh-ficha-tel:hover, .jbh-ficha-tel:focus-visible { color: var(--accent-champagne); }
.jbh-ficha-pie {
  margin: 0; font-size: .84rem; line-height: 1.55; opacity: .72; max-width: 34ch;
}
.jbh-ficha-leyes {
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0;
}

.jbh-solo-lectores {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

.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: 0 0 2.5rem; 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; }

/* ── LAS NUEVE HERRAMIENTAS QUE FALTABAN ─────────────────────────────────
   Comparten el marco de las dos que ya había —el mismo formulario, la misma
   caja oscura de resultado— porque son la misma clase de objeto. Lo que cambia
   es lo que enseñan dentro. */
.jbh-campo.jbh-ancho { grid-column: 1 / -1; }
.jbh-cacharro textarea {
  font: inherit; font-size: .95rem; padding: .7rem .8rem; width: 100%; resize: vertical;
  border: 1px solid rgba(11,31,51,.18); border-radius: 8px;
  background: var(--surface-bone); color: var(--ink-graphite); min-height: 9rem;
}
/* ⚠️ Explícito: hay OTRA definición de «.jbh-campo» heredada de la 1.0 que le
   da a todo «input» de dentro ancho completo, borde y cuarenta y ocho píxeles
   de alto. Sobre una casilla eso pinta una caja gris del ancho de la pantalla
   con el texto dentro. Aquí se dice lo que es: una casilla y su texto. */
.jbh-marca {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem;
  font-family: var(--font-body); font-weight: 400; color: var(--ink-graphite);
  background: none; border: 0; padding: 0; line-height: 1.5; cursor: pointer;
}
.jbh-marca b { font-weight: 600; color: var(--ink-midnight); }
.jbh-campo .jbh-marca input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: .18rem 0 0;
  flex: 0 0 auto; border-radius: 4px; accent-color: var(--gold);
}
.jbh-tareas { display: grid; gap: 1.1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Las que preguntan: una pregunta y sus respuestas, con área de toque grande. */
.jbh-preguntona fieldset { border: 0; padding: 0; margin: 0; }
.jbh-preguntona legend {
  font-family: var(--font-display); font-weight: 300; font-size: 1.5rem;
  color: var(--ink-midnight); padding: 0; margin: 0 0 .3rem;
}
.jbh-opciones { display: grid; gap: .6rem; }
.jbh-opcion {
  display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem;
  border: 1px solid rgba(11,31,51,.16); border-radius: 10px; cursor: pointer;
  background: var(--surface-bone); transition: border-color .15s, background .15s;
  font-size: .95rem; line-height: 1.45; min-height: 44px;
}
.jbh-opcion:hover { border-color: var(--materia, var(--gold)); }
.jbh-opcion input { width: auto; min-height: 0; margin-top: .22rem; flex: 0 0 auto; }
.jbh-opcion:has(input:checked) {
  border-color: var(--materia, var(--gold)); background: var(--gold-wash, rgba(194,160,106,.09));
}

/* Lo que se enseña en la caja oscura. */
.jbh-titular-salida {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); line-height: 1.15; margin: 0 0 .6rem;
}
.jbh-titular-salida b { color: var(--accent-champagne); font-weight: 300; }
.jbh-salida .jbh-sub { margin: 0 0 1.2rem; opacity: .82; max-width: 62ch; line-height: 1.6; }
.jbh-salida h3 {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent-champagne); font-weight: 600;
  margin: 1.6rem 0 .7rem;
}
.jbh-escenarios, .jbh-citas, .jbh-pasos-salida, .jbh-traza, .jbh-derechos {
  list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem;
}
.jbh-escenarios li {
  display: grid; gap: .1rem .9rem; grid-template-columns: 1fr auto;
  padding: .7rem .9rem; border: 1px solid rgba(247,244,239,.16); border-radius: 8px;
}
.jbh-escenarios .q { font-weight: 600; }
.jbh-escenarios .r { font-family: var(--font-display); font-size: 1.05rem; text-align: right; }
.jbh-escenarios .f, .jbh-traza .f {
  grid-column: 1 / -1; font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.jbh-traza { counter-reset: t; }
.jbh-traza li { font-size: .9rem; line-height: 1.55; opacity: .9; }
.jbh-pasos-salida li {
  position: relative; padding-left: 1.4rem; font-size: .95rem; line-height: 1.6;
}
.jbh-pasos-salida li::before {
  content: ""; position: absolute; left: 0; top: .68em; width: .55rem; height: 1px;
  background: var(--accent-champagne);
}
.jbh-citas li {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: baseline;
  padding: .55rem .8rem; border-radius: 8px; background: rgba(247,244,239,.05);
}
.jbh-citas li.no { background: rgba(224,133,133,.12); }
.jbh-citas a { color: var(--accent-champagne); }
.jbh-citas span:last-child { font-size: .82rem; opacity: .7; }
.jbh-datos-salida { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; margin: 0; }
.jbh-datos-salida dt {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .55; padding-top: .2rem;
}
.jbh-datos-salida dd { margin: 0; }
.jbh-datos-salida dd span { display: block; font-size: .8rem; opacity: .62; }
.jbh-consulta {
  font-family: var(--font-mono); font-size: .88rem; white-space: pre-wrap; word-break: break-word;
  padding: .9rem 1rem; border: 1px solid rgba(247,244,239,.18); border-radius: 8px; margin: 0 0 1rem;
}
.jbh-ir { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0; }
.jbh-descargo { font-size: .82rem; opacity: .62; line-height: 1.6; margin: 1.4rem 0 0; max-width: 66ch; }
.jbh-tabla-horas { width: 100%; border-collapse: collapse; font-size: .9rem; }
.jbh-tabla-horas th, .jbh-tabla-horas td { padding: .5rem .7rem; text-align: left;
  border-bottom: 1px solid rgba(247,244,239,.12); }
.jbh-tabla-horas .num { text-align: right; font-variant-numeric: tabular-nums; }
.jbh-tabla-horas thead th { font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .18em; text-transform: uppercase; opacity: .55; }
.jbh-tabla-horas tr.total td { font-weight: 600; border-bottom: 0; }

/* La hoja de derechos: pensada para salir en un folio. */
.jbh-hoja { margin: 2rem 0; padding: 1.75rem;
  border: 1px solid var(--line-soft); border-left: 2px solid var(--materia, var(--gold));
  border-radius: 14px; background: rgba(255,255,255,.55); }
.jbh-hoja-cab { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.2rem; }
.jbh-derechos { counter-reset: d; gap: .75rem; }
.jbh-derechos li {
  counter-increment: d; display: grid; grid-template-columns: 1.8rem 1fr; gap: .2rem .7rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.jbh-derechos li::before {
  content: counter(d, decimal-leading-zero); grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: .7rem; opacity: .45; padding-top: .25rem;
}
.jbh-derechos .que { color: var(--ink-midnight); line-height: 1.55; }
.jbh-derechos .donde { font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jbh-hoja-pie { font-size: .82rem; color: var(--muted); margin: 1.2rem 0 0; line-height: 1.6; }

@media print {
  /* Fuera todo lo que no es la hoja: quien la imprime la lleva encima. */
  body > header, body > footer, nav, .jbh-cacharro, .jbh-salida,
  .jbh-ficha-hero, .jbh-hoja-cab button { display: none !important; }
  .jbh-hoja { border: 0; padding: 0; background: none; }
  .jbh-derechos li { break-inside: avoid; }
}

/* ⚠️ El titular salía con el tamaño del texto corrido: la página no hereda el
   estilo de titular de la 1.0 porque no es una de sus plantillas. Y sin aire
   arriba, el rótulo quedaba pegado a la cabecera fija. */
.video-ficha{max-width:62rem;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) 1.25rem 4rem}
.video-ficha h1{font-family:var(--font-display),Georgia,serif;font-weight:300;
  font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.1;letter-spacing:-.015em;
  color:var(--ink-midnight);margin:0 0 1rem}
.video-ficha h2{font-family:var(--font-display),Georgia,serif;font-weight:400;
  font-size:1.45rem;color:var(--ink-midnight);margin:2.5rem 0 .9rem}
.video-sello{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-champagne);margin:0 0 .75rem}
.video-entradilla{font-size:1.12rem;line-height:1.6;color:var(--ink-graphite);max-width:60ch}
.video-marco{margin:2rem 0 2.5rem}
.video-tapa{display:block;position:relative;border-radius:12px;overflow:hidden;
  background:#0c0b09;aspect-ratio:16/9}
.video-tapa img{width:100%;height:100%;object-fit:cover;display:block}
.video-play{position:absolute;inset:0;display:grid;place-items:center}
.video-tapa:hover .video-play svg path:first-child{fill:rgba(140,25,25,.9)}
.video-nota{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-graphite);opacity:.75}
.video-caps ol{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.video-caps a{display:flex;gap:.9rem;align-items:baseline;padding:.55rem .75rem;
  border-radius:8px;text-decoration:none;color:var(--ink-graphite)}
.video-caps a:hover{background:rgba(194,160,106,.12)}
.video-caps .t,.video-otros .t{font-family:var(--font-mono);font-size:.8rem;
  color:var(--accent-champagne);font-variant-numeric:tabular-nums}
.video-puntos ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}
.video-faq details{border-top:1px solid rgba(58,47,32,.14);padding:.85rem 0}
.video-faq summary{cursor:pointer;font-weight:500}
.video-otros ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.video-otros a{text-decoration:none;color:var(--ink-graphite);border-bottom:1px solid transparent}
.video-otros a:hover{border-bottom-color:var(--accent-champagne)}

/* Las descargas de /manuales. Cada una dice lo que pesa: pulsar un enlace y que
   empiecen a bajar seis megas sin avisar es de mala educación. */
.tira-descargas{padding:0 1.25rem 4rem}
.marco-descargas{max-width:62rem;margin:0 auto;padding-top:2.5rem;
  border-top:1px solid rgba(58,47,32,.14)}
.marco-descargas h2{font-family:var(--font-display),Georgia,serif;font-weight:400;
  font-size:1.45rem;color:var(--ink-midnight);margin:0 0 1.1rem}
.marco-descargas ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.marco-descargas a{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;padding:.85rem 1rem;border:1px solid rgba(58,47,32,.14);border-radius:10px;
  text-decoration:none;color:var(--ink-graphite);transition:border-color .15s,background .15s}
.marco-descargas a:hover{border-color:var(--accent-champagne);background:rgba(194,160,106,.07)}
.marco-descargas .n{font-weight:500}
.marco-descargas .p{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;
  color:var(--accent-champagne);white-space:nowrap}

/* ── Quiénes somos ────────────────────────────────────────────────────────── */
.casa-apertura, .casa-bloque, .casa-lugar, .casa-cierre, .casa-visor {
  /* Medidas propias de esta página. Los colores y las letras NO se declaran
     aquí: son los de la casa, que ya existen. --ink-midnight resultó ser el
     mismo azul marino de las paredes de las fotos, así que ni eso hizo falta. */
  /* ⚠️ --text, --text-dim y --muted de la casa están definidos para el fondo
     OSCURO: sobre papel, --text-dim (#b6ad9c) da 1,9:1 de contraste, cuando el
     mínimo legible es 4,5:1. Medido en el navegador, no supuesto. Así que los
     apartados claros llevan su propio juego, que son los mismos colores de la
     marca en su versión para fondo claro. */
  --casa-texto: #211b13;
  --casa-tenue: #574e41;
  --casa-suave: #6b6253;
  --casa-linea: rgba(58, 47, 32, .16);
  --casa-linea-fina: rgba(58, 47, 32, .09);
  --casa-ancho: 82rem;
  --casa-margen: clamp(1.25rem, 4.5vw, 4rem);
  --casa-aire: clamp(3rem, 5.5vw, 5rem);
  --casa-r: 6px;
  --casa-r-grande: 12px;
}
.casa-apertura *, .casa-bloque *, .casa-lugar *, .casa-cierre *, .casa-visor * { box-sizing: border-box; }

.casa-sello {
  font-family: var(--font-stamp); font-size: var(--text-micro); font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 0 1.1rem;
}

/* ── La apertura ─────────────────────────────────────────────────────────── */
.casa-apertura {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch; background: #fffdf9; border-bottom: 1px solid var(--casa-linea-fina);
}
.casa-apertura-foto { position: relative; min-height: 26rem; overflow: hidden; }
.casa-apertura-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casa-apertura-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 62%, rgba(255,253,249,.55) 100%);
}
.casa-apertura-texto {
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center;
}
.casa-apertura-texto h1 {
  font-family: var(--font-display); font-weight: 300; line-height: 1.04;
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); margin: 0 0 1.5rem;
  text-wrap: balance; color: var(--ink-midnight); letter-spacing: -0.005em;
}
.casa-entradilla {
  font-size: var(--text-lead); line-height: 1.62; color: var(--casa-tenue);
  max-width: 34rem; margin: 0; font-family: var(--font-body);
}

.casa-cifras {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3.2rem);
  margin: 2.8rem 0 0; padding-top: 2rem; border-top: 1px solid var(--casa-linea);
}
.casa-cifras div { margin: 0; }
.casa-cifras dt {
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); color: var(--gold-deep);
  /* ⚠️ Cormorant Garamond trae cifras de estilo antiguo: sin esto, «2021» sale
     con el 2 y el 1 por debajo de la línea base y «10» se lee «IO». Precioso en
     un párrafo, ilegible cuando la cifra ES el dato. */
  font-variant-numeric: lining-nums tabular-nums;
}
.casa-cifras dd {
  margin: .5rem 0 0; font-size: var(--text-small); color: var(--casa-suave);
  max-width: 11rem; line-height: 1.45; font-family: var(--font-body);
}
.casa-cifras.grandes dt { font-size: clamp(2.6rem, 1.8rem + 3vw, 4.4rem); }

/* ── Apartados ───────────────────────────────────────────────────────────── */
.casa-bloque {
  padding: var(--casa-aire) var(--casa-margen);
  max-width: var(--casa-ancho); margin-inline: auto;
  font-family: var(--font-body);
}
/* ⚠️ Estos titulares fueron <header> hasta que se vieron: la propia hoja de
   remiendos lleva un «header:not(.block-light)» con fondo oscuro y desenfoque
   —está ahí para la cabecera del sitio— que ganaba por especificidad y metía
   cada titular en una caja negra con el texto encima, ilegible. El CSS propio
   era correcto; lo que mandaba era una regla de más arriba. Se quita el
   <header>, que aquí no aportaba nada, en vez de pelear la especificidad:
   ganarle a una regla es dejar la trampa puesta para el siguiente. */
.casa-titular {
  max-width: 46rem; margin: 0 0 clamp(2.2rem, 4.5vw, 3.5rem);
  background: none; padding: 0; border: 0; box-shadow: none;
  position: static; backdrop-filter: none;
}
.casa-titular h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; color: var(--ink-midnight);
}
.casa-dek { font-size: var(--text-lead); line-height: 1.62; color: var(--casa-tenue); margin: 0; }

/* ── La trayectoria ──────────────────────────────────────────────────────── */
.casa-linea { list-style: none; margin: 0; padding: 0; }
.casa-hito {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start;
  padding: clamp(1.8rem, 3.5vw, 2.8rem) 0; border-top: 1px solid var(--casa-linea);
}
.casa-hito:last-child { border-bottom: 1px solid var(--casa-linea); }
.casa-hito-anio { position: relative; padding-bottom: 1.1rem; }
.casa-anio {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--text-small);
  letter-spacing: .1em; color: var(--gold-deep); font-variant-numeric: tabular-nums;
  display: inline-block; padding-top: .3rem;
}
/* El filete: el mismo que recorre las paredes de la casa de verdad. */
.casa-hito-anio::after {
  content: ""; position: absolute; left: 0; top: 2.1rem; width: 3.2rem; height: 1px;
  background: var(--gold); opacity: .55;
}
.casa-hito-cuerpo h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3);
  margin: 0 0 .6rem; line-height: 1.22; color: var(--ink-midnight);
}
.casa-hito-cuerpo p { margin: 0; line-height: 1.66; color: var(--casa-tenue); max-width: 40rem; }
.casa-hito-foto { overflow: hidden; border-radius: var(--casa-r); }
.casa-hito-foto img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  filter: saturate(.88); transition: transform .6s cubic-bezier(.22,1,.36,1), filter .6s;
}
.casa-hito:hover .casa-hito-foto img { transform: scale(1.045); filter: saturate(1); }

/* ── Dónde estamos ───────────────────────────────────────────────────────── */
.casa-lugar {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center; font-family: var(--font-body);
  max-width: var(--casa-ancho); margin-inline: auto;
  padding: var(--casa-aire) var(--casa-margen); background: var(--surface-bone);
}
.casa-lugar-texto h2 {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.1; margin: 0 0 1.2rem; text-wrap: balance; color: var(--ink-midnight);
}
.casa-lugar-texto p { line-height: 1.68; color: var(--casa-tenue); margin: 0 0 1rem; max-width: 34rem; }
.casa-lugar-texto strong { color: var(--ink-midnight); font-weight: 600; }
.casa-nota {
  border-left: 2px solid var(--gold); padding-left: 1.1rem; font-size: var(--text-small);
}
.casa-lugar-texto .casa-nota a { color: #7a5f34; text-decoration: underline; text-underline-offset: 3px; }
.casa-lugar-foto { margin: 0; }
.casa-lugar-foto img {
  width: 100%; height: auto; display: block; border-radius: var(--casa-r-grande);
  box-shadow: 0 24px 60px -34px rgba(11,31,51,.55);
}
.casa-lugar-foto figcaption {
  margin-top: .85rem; font-size: var(--text-small); color: var(--casa-suave);
}

/* ── La galería ──────────────────────────────────────────────────────────── */
.casa-galeria {
  display: grid; grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(clamp(9rem, 19vw, 16rem), 1fr));
  grid-auto-rows: clamp(7rem, 14vw, 11.5rem);
  gap: clamp(.4rem, .9vw, .75rem);
}
.casa-pieza {
  position: relative; padding: 0; border: 0; margin: 0; cursor: pointer;
  background: var(--surface-mist); overflow: hidden; border-radius: var(--casa-r);
  grid-row: span 1;
}
.casa-pieza.alta { grid-row: span 2; }
.casa-pieza img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .45s;
  filter: saturate(.92) contrast(1.02);
}
.casa-pieza:hover img, .casa-pieza:focus-visible img {
  transform: scale(1.055); filter: saturate(1.05) contrast(1.04);
}
.casa-lupa {
  position: absolute; right: .55rem; bottom: .55rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; color: #fffdf9;
  background: rgba(11,31,51,.6); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.casa-pieza:hover .casa-lupa, .casa-pieza:focus-visible .casa-lupa { opacity: 1; transform: none; }
.casa-pieza:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* ── El visor ────────────────────────────────────────────────────────────── */
.casa-visor {
  border: 0; padding: 0; margin: 0; width: 100%; height: 100%;
  max-width: 100%; max-height: 100%; background: transparent; color: #ece6da;
  overflow: hidden; font-family: var(--font-body);
}
.casa-visor::backdrop { background: rgba(6,15,26,.95); }
.casa-visor-marco {
  margin: 0; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.1rem;
  padding: clamp(1rem, 4vw, 3rem) clamp(3rem, 8vw, 6rem);
}
.casa-visor-marco img {
  max-width: 100%; max-height: 79vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--casa-r); display: block;
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.9);
}
.casa-visor-marco figcaption {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  justify-content: center; text-align: center;
  font-size: var(--text-small); color: #b6ad9c; max-width: 46rem; line-height: 1.5;
}
.casa-cuenta {
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .1em;
  color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.casa-cerrar, .casa-flecha {
  position: absolute; z-index: 2; display: grid; place-items: center;
  border: 1px solid rgba(236,230,218,.22); background: rgba(11,31,51,.55);
  color: #ece6da; cursor: pointer; border-radius: 50%;
  width: 2.9rem; height: 2.9rem; transition: background .25s, border-color .25s;
  backdrop-filter: blur(8px);
}
.casa-cerrar:hover, .casa-flecha:hover { background: rgba(194,160,106,.3); border-color: var(--gold); }
.casa-cerrar:focus-visible, .casa-flecha:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.casa-cerrar { top: clamp(.8rem, 3vw, 1.6rem); right: clamp(.8rem, 3vw, 1.6rem); }
.casa-flecha { top: 50%; transform: translateY(-50%); }
.casa-flecha.atras { left: clamp(.5rem, 2vw, 1.6rem); }
.casa-flecha.adelante { right: clamp(.5rem, 2vw, 1.6rem); }

/* ── Las dos sociedades ──────────────────────────────────────────────────── */
.casa-oscuro {
  background: var(--ink-midnight); color: #ece6da;
  max-width: none; position: relative; padding-inline: var(--casa-margen);
}
.casa-oscuro::before {
  content: ""; position: absolute; left: 0; right: 0; top: clamp(2.5rem, 6vw, 5rem);
  height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 16%, var(--gold) 84%, transparent);
  opacity: .45;
}
.casa-oscuro > * { max-width: var(--casa-ancho); margin-inline: auto; }
.casa-oscuro .casa-sello { color: var(--gold); }
.casa-oscuro .casa-titular h2 { color: #f4efe4; }
.casa-oscuro .casa-dek { color: #b6ad9c; }
.casa-dos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
}
.casa-sociedad {
  border: 1px solid rgba(194,160,106,.26); border-radius: var(--casa-r-grande);
  padding: clamp(1.5rem, 3vw, 2.4rem); background: rgba(255,255,255,.035);
}
.casa-rol {
  font-family: var(--font-stamp); font-size: var(--text-micro); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 .8rem;
}
.casa-sociedad h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3);
  margin: 0 0 1rem; line-height: 1.22; color: #f4efe4;
}
.casa-sociedad p { line-height: 1.66; color: #b6ad9c; margin: 0 0 .9rem; }
.casa-sociedad strong { color: #ece6da; font-weight: 600; }
.casa-pie-tarjeta {
  font-size: var(--text-small); color: var(--gold-bright) !important;
  border-top: 1px solid rgba(194,160,106,.2); padding-top: .85rem; margin: 1.3rem 0 0 !important;
}
.casa-remate {
  margin: clamp(1.8rem, 4vw, 2.6rem) auto 0; max-width: 46rem;
  line-height: 1.66; color: #b6ad9c;
}

/* ── El equipo ───────────────────────────────────────────────────────────── */
.casa-oficios {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.casa-oficio { border-top: 2px solid var(--gold); padding-top: 1.1rem; }
.casa-oficio h3 {
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-body);
  margin: 0 0 .6rem; color: var(--ink-midnight); line-height: 1.35;
}
.casa-oficio p { margin: 0; font-size: var(--text-small); line-height: 1.62; color: var(--casa-tenue); }
.casa-abogados {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3.5vw, 2.6rem);
  background: var(--surface-bone); border-radius: var(--casa-r-grande);
  border-left: 3px solid var(--gold);
}
.casa-abogados h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-h3);
  margin: 0 0 1rem; color: var(--ink-midnight);
}
.casa-abogados p { line-height: 1.68; color: var(--casa-tenue); margin: 0 0 1rem; max-width: 44rem; }
.casa-abogados strong { color: var(--ink-midnight); font-weight: 600; }
.casa-abogados .casa-enlace {
  display: inline-block; font-family: var(--font-stamp); font-size: var(--text-micro);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7a5f34;
  text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
.casa-abogados .casa-enlace:hover { color: #0b1f33; border-color: #0b1f33; }

/* ── Las plazas ──────────────────────────────────────────────────────────── */
.casa-mapa {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.casa-mapa li {
  border-top: 1px solid var(--casa-linea); padding-top: 1rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.casa-plaza {
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: 500;
  color: var(--ink-midnight);
}
.casa-pais {
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--casa-suave);
}

/* ── El cierre ───────────────────────────────────────────────────────────── */
.casa-cierre {
  background: var(--ink-midnight); color: #ece6da; text-align: center;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--casa-margen); font-family: var(--font-body);
}
.casa-cierre h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); margin: 0 0 1rem;
  line-height: 1.1; color: #f4efe4;
}
.casa-cierre > p { max-width: 34rem; margin: 0 auto 2rem; line-height: 1.65; color: #b6ad9c; }
.casa-botones { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
/* ⚠️ La hoja de la casa lleva un «.jbh-marketing a { color: inherit }» que, por
   especificidad (0,1,1), le gana a «.casa-boton» (0,1,0): el texto del botón
   heredaba el crema del apartado oscuro y salía en #b6ad9c sobre el dorado
   —1,2:1 de contraste, ILEGIBLE—. Por eso todos los enlaces de esta página se
   escriben con su contenedor delante: no es adorno de especificidad, es lo que
   hace falta para ganarle a una regla que alcanza a cualquier <a> del sitio. */
.casa-cierre .casa-boton {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2rem; border-radius: var(--casa-r); min-height: 46px;
  background: var(--gold); color: #0b1f33; text-decoration: none;
  font-weight: 600; font-size: var(--text-small); letter-spacing: .01em;
  transition: background .25s, transform .25s;
}
.casa-cierre .casa-boton:hover { background: var(--gold-bright); color: #0b1f33; transform: translateY(-2px); }
.casa-cierre .casa-boton.suave { background: transparent; color: #ece6da; border: 1px solid rgba(236,230,218,.32); }
.casa-cierre .casa-boton.suave:hover { border-color: var(--gold); color: var(--gold-bright); background: transparent; }
.casa-cierre .casa-boton:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; }
.casa-fino {
  margin: 2rem 0 0; font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: .1em; color: #8a8070;
}

/* ── De 992 para abajo ───────────────────────────────────────────────────── */
@media (max-width: 62rem) {
  .casa-apertura { grid-template-columns: 1fr; }
  .casa-apertura-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .casa-apertura-foto::after { background: linear-gradient(180deg, transparent 58%, rgba(255,253,249,.6)); }
  .casa-lugar { grid-template-columns: 1fr; }
  .casa-hito { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .casa-hito-foto { display: none; }
}
@media (max-width: 34rem) {
  .casa-hito { grid-template-columns: 1fr; gap: .35rem; }
  .casa-hito-anio { padding-bottom: .2rem; }
  .casa-hito-anio::after { display: none; }
  .casa-galeria { grid-auto-rows: clamp(6rem, 26vw, 9rem); }
  .casa-visor-marco { padding: 3.6rem 1rem 1rem; }
  .casa-visor-marco img { max-height: 66vh; }
  .casa-flecha { top: auto; bottom: 1.1rem; transform: none; }
  .casa-cifras { gap: 1.5rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .casa-pieza img, .casa-hito-foto img, .casa-boton, .casa-lupa { transition: none; }
  .casa-pieza:hover img, .casa-hito:hover .casa-hito-foto img { transform: none; }
  .casa-boton:hover { transform: none; }
}

/* El envoltorio del cuerpo, sin cortar el pegado. «clip» recorta igual que
   «hidden» pero no crea contenedor de desplazamiento, que era lo que dejaba al
   índice sin pegarse. */
.legal-cuerpo { overflow: clip; }

/* ── La columna de al lado de un artículo de ley ──────────────────────────────
   Mismo patrón que las legales, misma razón: el texto de la ley se lee a 58
   caracteres y a su derecha quedaban 676 píxeles en blanco en las 10.494
   fichas. Aquí el hueco lo llena la navegación por la norma. */
.art-cuerpo { overflow: clip; }   /* «clip» y no «hidden»: hidden mata el pegado */
.art-doble {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(13rem, 17rem);
  justify-content: space-between;
  column-gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: start;
  grid-auto-rows: min-content;
}
.art-doble > .art-texto-col { grid-column: 1; min-width: 0; }
.art-doble > .art-lateral {
  grid-column: 2; grid-row: 1 / span 999; align-self: start;
  position: sticky; top: 6.5rem;
}
.art-lateral-caja {
  border: 1px solid rgba(58,47,32,.14); border-radius: 10px;
  background: rgba(255,255,255,.6); padding: 1.15rem 1.2rem 1.3rem;
}
.art-lado-rotulo {
  font-family: var(--font-stamp); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #7a5f34;
  margin: 0 0 .7rem;
}
.art-lado-rotulo.con-aire {
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(58,47,32,.12);
}
.art-doble .art-paso {
  display: block; text-decoration: none; padding: .5rem .7rem; margin: 0 0 .35rem;
  border-left: 2px solid rgba(194,160,106,.45); border-radius: 0 4px 4px 0;
  background: rgba(194,160,106,.06);
}
.art-doble .art-paso .et {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase; color: #6b6253;
}
.art-doble .art-paso .que {
  display: block; font-family: var(--font-display); font-size: 1.02rem;
  color: #0b1f33; line-height: 1.25; margin-top: .12rem;
}
.art-doble .art-paso:hover { background: rgba(194,160,106,.14); border-left-color: var(--gold); }
.art-doble .art-lado-enlace {
  display: block; padding: .4rem 0 .4rem .7rem; font-size: .875rem;
  color: #3f382d; text-decoration: none; border-left: 2px solid transparent;
}
.art-doble .art-lado-enlace:hover { color: #0b1f33; border-left-color: rgba(194,160,106,.55); }
.art-lado-dek { font-size: .82rem; line-height: 1.5; color: #574e41; margin: 0 0 .85rem; }
.art-doble .art-lado-boton {
  display: block; text-align: center; padding: .7rem 1rem; border-radius: 6px;
  background: var(--gold); color: #0b1f33; text-decoration: none;
  font-weight: 600; font-size: .84rem; min-height: 44px; line-height: 1.8;
}
.art-doble .art-lado-boton:hover { background: var(--gold-bright); color: #0b1f33; }
.art-doble :is(.art-paso, .art-lado-enlace, .art-lado-boton):focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px;
}

@media (max-width: 71rem) {
  .art-doble { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
  .art-doble > .art-lateral {
    grid-column: 1; grid-row: auto; position: static;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
  }
}

/* ── Las páginas legales: dos columnas ────────────────────────────────────────
   El texto ocupaba 64rem de un contenedor de 92,5rem y las otras 28 se
   quedaban en blanco. Ensanchar el texto para llenarlas habría sido peor: una
   línea de ciento veinte caracteres se lee mal, y un documento legal es
   exactamente donde no conviene que se lea mal.
   Así que el hueco se llena con lo que ese hueco pide: el índice, quieto al
   lado mientras se baja. El texto conserva su medida y el borde izquierdo
   sigue alineado con el titular del hero. */
.legal-doble {
  max-width: none;
  display: grid;
  /* El texto conserva su medida de lectura y el índice se va al borde derecho:
     con «start» quedaban ciento noventa píxeles muertos a la derecha, que es
     justo lo que se venía a arreglar. El aire del medio es deliberado. */
  grid-template-columns: minmax(0, 48rem) minmax(14rem, 18rem);
  justify-content: space-between;
  column-gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: start;
  /* Que cada fila mida lo que mide su contenido. Sin esto, la primera fila se
     estiraba hasta la altura del índice y dejaba medio folio en blanco bajo el
     párrafo de entrada. */
  grid-auto-rows: min-content;
}
.legal-doble > * { grid-column: 1; min-width: 0; }
.legal-doble > .legal-lateral {
  grid-column: 2;
  /* ⚠️ «1 / -1» aquí NO abarca el documento: sin filas explícitas declaradas,
     «-1» es la última línea EXPLÍCITA, o sea la 2, y el índice se quedaba en la
     primera fila estirándola. Con «span 999» abarca de verdad, y el pegado
     tiene toda la altura del documento por donde recorrer. */
  grid-row: 1 / span 999;
  align-self: start;      /* …pero pegado arriba */
  position: sticky;
  top: 6.5rem;
  margin: 0;
  max-width: none;
  /* Si el índice fuera más alto que la ventana, se desplaza él solo en vez de
     cortarse: con veinte apartados en un portátil de 13 pulgadas, pasa. */
  max-height: calc(100dvh - 9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* ── El índice ───────────────────────────────────────────────────────────── */
.legal-indice { margin: 0; max-width: 47rem; }
.legal-lateral > .legal-indice { max-width: none; }
.legal-indice-caja {
  border: 1px solid rgba(58,47,32,.14); border-radius: 10px;
  background: rgba(255,255,255,.6); padding: 0;
}
.legal-indice-caja > summary {
  cursor: pointer; list-style: none; padding: .9rem 1.1rem;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
  font-family: var(--font-stamp); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #7a5f34;
}
.legal-indice-caja > summary::-webkit-details-marker { display: none; }
.legal-indice-caja > summary::after {
  content: "▾"; margin-left: auto; font-size: .9rem; transition: transform .25s;
  color: #7a5f34; font-family: var(--font-body); letter-spacing: 0;
}
.legal-indice-caja[open] > summary::after { transform: rotate(180deg); }
.legal-cuantos {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  color: #6b6253; text-transform: none;
}
.legal-indice-caja ol {
  list-style: none; margin: 0; padding: 0 1.1rem 1rem; columns: 1;
}
.legal-indice-caja li { margin: 0; }
.legal-indice-caja li.n3 { padding-left: .9rem; }
.legal-indice-caja a {
  display: block; padding: .36rem 0 .36rem .7rem; font-size: .875rem;
  line-height: 1.35; color: #3f382d; text-decoration: none;
  border-left: 2px solid transparent;
}
.legal-indice-caja a:hover { color: #0b1f33; border-left-color: rgba(194,160,106,.55); }
.legal-indice-caja a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.legal-indice-caja li.aqui > a {
  color: #0b1f33; font-weight: 600; border-left-color: var(--gold);
}

/* La caja de llamada bajo el índice. */
.legal-lado-caja {
  border: 1px solid rgba(58,47,32,.14); border-radius: 10px;
  background: rgba(255,255,255,.6); padding: 1.15rem 1.2rem 1.3rem;
  margin-top: 1rem;
}
.legal-lado-rotulo {
  font-family: var(--font-stamp); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #7a5f34; margin: 0 0 .7rem;
}
.legal-lado-dek { font-size: .82rem; line-height: 1.5; color: #574e41; margin: 0 0 .9rem; }
.legal-doble .legal-lado-boton {
  display: block; text-align: center; padding: .7rem 1rem; border-radius: 6px;
  background: var(--gold); color: #0b1f33; text-decoration: none;
  font-weight: 600; font-size: .84rem; min-height: 44px; line-height: 1.8;
}
.legal-doble .legal-lado-boton:hover { background: var(--gold-bright); color: #0b1f33; }
.legal-doble .legal-lado-boton:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Que al saltar a un apartado no quede debajo de la cabecera fija. */
.jbh-lectura :is(h2, h3)[id] { scroll-margin-top: 6.5rem; }

/* ── Cuando ya no caben dos columnas ─────────────────────────────────────── */
@media (max-width: 71rem) {
  .legal-doble {
    grid-template-columns: minmax(0, 1fr);
    max-width: 48rem;
  }
  .legal-doble > .legal-lateral {
    grid-column: 1; grid-row: auto; position: static;
    max-height: none; overflow: visible;
    margin-bottom: clamp(2rem, 4vw, 3rem);
  }
  /* Aquí el índice va DELANTE del texto, así que se pliega: veinte líneas antes
     de empezar a leer son un muro, no una ayuda. */
  .legal-indice-caja > summary { padding: 1rem 1.2rem; }
  .legal-indice-caja ol { columns: 2; column-gap: 2rem; padding-bottom: 1.1rem; }
  .legal-indice-caja li { break-inside: avoid; }
}
@media (max-width: 44rem) {
  .legal-indice-caja ol { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-indice-caja > summary::after { transition: none; }
}