/* ==========================================================================
   /herramientas/  ·  identificador 79524  ·  lo propio de esta página
   ==========================================================================
   Los bloques compartidos —.jrv-contenedor, .jrv-seccion, .jrv-media, .jrv-cta—
   vienen de componentes.css, que se declara antes. Aquí solo lo que usa esta
   página y nada más.

   NO SE DECLARAN TAMAÑOS DE LETRA salvo dos casos, y los dos están razonados en
   su sitio. Decisión del dueño del 11-08-2026: la tipografía la pone la marca
   (GP Premium — cuerpo Montserrat 16/1.4, h1 Roboto Slab 35 negrita, h2
   Montserrat 25 peso 300), y va a rediseñar el sitio en cuanto Elementor esté
   fuera. Inventar una escala aquí sería trabajo que se tira.

   LOS COLORES SÍ SON LOS DEL GUION, tal cual. Y los nombres llevan el prefijo
   --jrv-h- («herramientas») porque los de componentes.css son --jrv-p- y los del
   blog, en style.css, son --jrv-. Ninguno de los tres se pisa. Comprobado que
   --jrv-h-* no existía en ningún otro archivo del tema antes de escribir esto.
   ========================================================================== */


/* ==========================================================================
   0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO
   ==========================================================================
   Sin este bloque la página sale metida en una columna de 900px con franjas
   grises a los lados, y con franjas blancas arriba y bajo el pie por el relleno
   de 40px (30 en móvil) que GeneratePress da a #content. En el protocolo consta
   que ya ha pasado TRES veces.

   EL SELECTOR ES `page-id-79524` Y NO `page-template-…`. WordPress solo añade
   `page-template-{archivo}` cuando la plantilla se elige en el desplegable del
   editor; una plantilla que la jerarquía coge por el nombre del archivo
   —`page-79524.php`— deja el body en `page-template-default`. Un selector
   `page-template-…` no coincidiría con nada. El identificador, además, no cambia
   nunca; el slug sí podría.
   ========================================================================== */

body.page-id-79524 #page,
body.page-id-79524 .site.grid-container {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

body.page-id-79524 #content,
body.page-id-79524 .site-content {
  padding: 0;
  margin-block-end: 0;
}

body.page-id-79524 #primary,
body.page-id-79524 #main {
  width: 100%;
  max-width: none;
}

body.page-id-79524 #page { background-color: #fff; }


/* ==========================================================================
   1 · LOS COLORES Y LAS MEDIDAS DEL GUION
   ========================================================================== */

body.page-id-79524 {
  /* --- Del guion, sin retocar ---------------------------------------- */
  --jrv-h-hondo:  #004361; /* el azul de esta página: h1, nombres, fondos oscuros */
  --jrv-h-humo:   #F9F9F9; /* fondo del héroe */
  --jrv-h-nube:   #F5F6F7; /* fondo de las categorías claras */
  /* El rojo del guion (#C23616) es EL MISMO que --jrv-p-rojo de componentes.css, así
     que se hereda en vez de repetir el valor: un color, un sitio donde cambiarlo. Los
     demás de esta página (#004361, #F9F9F9, #F5F6F7, #FFDD59, #2E7D32, #54595F,
     #0F719D) no están en la paleta compartida y por eso se declaran aquí. */
  --jrv-h-rojo:   var(--jrv-p-rojo); /* #C23616 · títulos de categoría clara y los dos iconos */
  --jrv-h-oro:    #FFDD59; /* títulos de categoría oscura */
  --jrv-h-verde:  #2E7D32; /* los catorce botones «MÁS INFORMACIÓN» */
  --jrv-h-gris:   #54595F; /* las dos líneas del pie */
  --jrv-h-menu:   #0F719D; /* enlaces del menú (hover y activo: --jrv-h-hondo) */
  --jrv-h-tinta:  #000000; /* el texto corrido: el guion dice #000000, no el #3a3a3a del tema */

  /* --- Leídos del _elementor_data, no del guion ---------------------- */
  --jrv-h-marco:    #2980B9; /* marco de 7px de la pieza 83 y filo de 5px de su sección */
  --jrv-h-corazon:  #E43B2C; /* rgb(228,59,44), el corazón del pie */

  /* --- El aire de cada sección, tal como lo da el guion -------------- */
  --jrv-h-aire-corto: 45px;  /* héroe, entrada, aviso y la categoría «Diseñar…» */
  --jrv-h-aire-largo: 90px;  /* el titular y las otras cinco categorías */
}


/* ==========================================================================
   2 · LOS ANCHOS DE CONTENEDOR
   ==========================================================================
   Esta página usa SEIS anchos distintos y ninguno es el 1100px de
   .jrv-contenedor, así que se declaran como modificadores en lugar de repetir el
   `margin-inline: auto` seis veces.

   Van con DOS clases en el selector —`.jrv-contenedor.jrv-h-ancho--800`— y no con
   una: con una sola tendrían la misma especificidad que .jrv-contenedor y
   ganarían solo por el orden de carga. Con dos ganan siempre, aunque algún día
   alguien cambie el orden de las hojas.
   ========================================================================== */

.jrv-contenedor.jrv-h-ancho--1140 { max-width: 1140px; }
.jrv-contenedor.jrv-h-ancho--1110 { max-width: 1110px; }
.jrv-contenedor.jrv-h-ancho--1000 { max-width: 1000px; }
.jrv-contenedor.jrv-h-ancho--900  { max-width:  900px; }
.jrv-contenedor.jrv-h-ancho--800  { max-width:  800px; }
.jrv-contenedor.jrv-h-ancho--500  { max-width:  500px; }

/* box-sizing en TODAS las secciones de esta página (arreglo 3 del protocolo).
   El tema hereda content-box y cualquier relleno se sumaría por encima del ancho
   en vez de por dentro. Aquí no hay altos fijos, pero la regla se pone igual: es
   una línea y cierra la puerta a la trampa que infló la portada de 650 a 850px. */
.jrv-h-cabecera,
.jrv-h-hero,
.jrv-h-entrada,
.jrv-h-aviso,
.jrv-h-titular,
.jrv-h-grupo,
.jrv-h-tarjeta,
.jrv-h-pie { box-sizing: border-box; }

/* Lo que se lee con lector de pantalla pero no se ve. Se declara aquí y no se usa
   `.screen-reader-text` del tema para no depender de una clase ajena. */
.jrv-h-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3 · CABECERA (piezas 1 y 2)
   ==========================================================================
   Fondo #FFFFFF del guion. El relleno vertical es el único que el original
   declara —`padding_mobile` de 10px— así que se usa ese y no se inventa otro.
   ========================================================================== */

.jrv-h-cabecera {
  padding-block: 10px;
  padding-inline: 20px;
  background-color: #fff;
}

/* `position: relative` aquí y no en el <nav>: el panel del menú del móvil se
   despliega a lo ancho de toda la cabecera («full_width: stretch» en el
   original), así que su referencia tiene que ser esta caja, no la del nav. */
.jrv-h-cabecera__interior {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* Columna del 25% en el guion; el logotipo mide 340px
   (`image_custom_dimension.width`). En móvil ocupaba el 80%: con flex se
   encoge solo hasta dejar sitio al botón. */
.jrv-h-cabecera__marca {
  flex: 0 1 340px;
  min-width: 0;
}


/* --- El menú -------------------------------------------------------------
   OJO AL SENTIDO DE ESTAS REGLAS, QUE ESTÁ DEL REVÉS A PROPÓSITO.

   Por omisión el panel se VE y el botón NO existe. Solo cuando el JavaScript de
   la plantilla ha corrido y ha puesto `jrv-h-nav--js` aparece el botón y el panel
   se pliega en móvil. Así, si el script no llegara a ejecutarse, el menú sale
   desplegado —más alto, pero con sus 14 enlaces accesibles— en vez de quedar
   escondido detrás de un botón muerto. En la portada pasó justo lo contrario y
   por debajo de 1025px no había forma de llegar al menú.
   ------------------------------------------------------------------------- */

.jrv-h-nav { flex: 0 1 auto; min-width: 0; }

.jrv-h-nav__boton {
  display: none;              /* sin JavaScript no hay botón que no funcione */
  align-items: center;
  justify-content: center;
  width: 44px;                /* 44px de lado: el mínimo cómodo para un dedo */
  height: 44px;
  padding: 0;
  background-color: transparent;
  border: 0;
  /* El original pone el icono en BLANCO sobre rgba(0,0,0,.2) y la cabecera es
     blanca: blanco sobre blanco al 20% no se ve. Se usa el azul del propio menú,
     que sí se lee. Es la única desviación de color de esta página y está anotada
     para el dueño. */
  color: var(--jrv-h-menu);
  cursor: pointer;
}

.jrv-h-nav--js .jrv-h-nav__boton { display: inline-flex; }

.jrv-h-nav__boton:focus-visible {
  outline: 3px solid var(--jrv-h-menu);
  outline-offset: 2px;
}

/* Las tres barras: una caja y sus dos seudoelementos. Ni una imagen ni un glifo
   de fuente de iconos, que es de lo que se trata. */
.jrv-h-nav__barras,
.jrv-h-nav__barras::before,
.jrv-h-nav__barras::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
}
.jrv-h-nav__barras { position: relative; }
.jrv-h-nav__barras::before,
.jrv-h-nav__barras::after {
  position: absolute;
  left: 0;
  content: "";
}
.jrv-h-nav__barras::before { top: -7px; }
.jrv-h-nav__barras::after  { top:  7px; }

.jrv-h-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jrv-h-menu a {
  display: block;
  padding: 6px 0;
  color: var(--jrv-h-menu);
  text-decoration: none;
}

/* Hover y activo: #004361, los dos valores del widget original
   (`color_menu_item_hover` y `color_menu_item_active`). */
.jrv-h-menu a:hover,
.jrv-h-menu a:focus-visible,
.jrv-h-menu .current-menu-item > a,
.jrv-h-menu .current-menu-ancestor > a {
  color: var(--jrv-h-hondo);
  text-decoration: underline;
}

.jrv-h-menu .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- El menú en móvil (por debajo de 768px) ------------------------------
   Este menú tiene 3 entradas de primer nivel y 11 hijas repartidas en dos de
   ellas (comprobado en la base de datos). En móvil los submenús van
   DESPLEGADOS y sangrados: sin JavaScript de por medio, las 14 entradas se
   alcanzan siempre. Un desplegable dentro de otro desplegable es justo donde
   se pierden los enlaces.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .jrv-h-nav--js .jrv-h-nav__panel {
    display: none;
    position: absolute;
    z-index: 20;              /* por encima del héroe, que va justo debajo */
    inset-inline: 0;
    top: 100%;
    padding: 10px 20px 16px;
    background-color: #fff;
    box-shadow: 0 10px 20px -8px rgb(0 0 0 / 25%);
  }

  /* El botón y el panel son hermanos dentro del <nav>, así que el selector de
     hermano adyacente vale y no hace falta que el script toque clases. */
  .jrv-h-nav--js .jrv-h-nav__boton[aria-expanded="true"] + .jrv-h-nav__panel {
    display: block;
  }

  .jrv-h-menu .sub-menu { padding-inline-start: 16px; }
}

/* --- El menú de 768px arriba --------------------------------------------- */
@media (min-width: 768px) {
  /* A este ancho no hay botón ni con JavaScript ni sin él. */
  .jrv-h-nav__boton,
  .jrv-h-nav--js .jrv-h-nav__boton { display: none; }

  .jrv-h-nav--js .jrv-h-nav__panel,
  .jrv-h-nav__panel { display: block; }

  /* «align_items: right» del original. */
  .jrv-h-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 2px 20px;
  }

  .jrv-h-menu > li { position: relative; }

  /* Los dos submenús se abren al pasar el ratón Y al entrar con el teclado:
     `:focus-within` es lo que hace que se puedan usar con tabulador sin una sola
     línea de JavaScript. */
  .jrv-h-menu .sub-menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: none;
    min-width: 220px;
    padding: 8px 16px;
    background-color: #fff;
    box-shadow: 0 10px 20px -8px rgb(0 0 0 / 25%);
  }

  .jrv-h-menu > li:hover > .sub-menu,
  .jrv-h-menu > li:focus-within > .sub-menu { display: block; }

  /* El último de la fila se abre hacia dentro para no salirse de la pantalla,
     que es desborde horizontal y una de las comprobaciones del protocolo. */
  .jrv-h-menu > li:last-child > .sub-menu { left: auto; right: 0; }
}


/* ==========================================================================
   4 · EL HÉROE (piezas 3-8 · una sola sección con su punto de corte)
   ==========================================================================
   El guion trae DOS secciones idénticas —una con hide_desktop, otra con
   hide_mobile— y la única diferencia real es la figura de fondo. Aquí es una, y
   la figura entra a partir de 768px.

   LA FIGURA VA AL 44% DE ANCHO Y NO A `cover`, Y ESTO ES UNA DECISIÓN LEÍDA:
   los settings traen las dos cosas a la vez —`background_size: cover` y
   `background_bg_width: 44%`— porque en Elementor el ancho personalizado se queda
   guardado aunque luego se elija «cover». Manda el 44% por tres razones:
     · la segunda columna del guion (35,767%) está VACÍA, no tiene ni una pieza:
       es precisamente el hueco que la figura ocupa a la derecha;
     · con `cover` la foto llenaría la sección entera y el texto quedaría encima
       de ella, y la capa que lo suavizaría tiene opacidad 0 (leído: ver el
       comentario de la plantilla), o sea que el titular saldría ilegible;
     · `center right` + `no-repeat` solo tienen sentido con una figura que no
       llena todo el ancho.
   Si algún día se comprueba en producción que la figura sale más grande, el único
   cambio es este `background-size`.

   `background-origin: border-box` es del protocolo: con el valor que hereda
   (padding-box) la figura se desplaza tanto como el relleno y deja un hueco de
   fondo debajo.
   ========================================================================== */

.jrv-h-hero {
  padding-block: 30px;        /* `padding_mobile` del original */
  padding-inline: 15px;
  background-color: var(--jrv-h-humo);
}

.jrv-h-hero__rejilla {
  display: grid;
  grid-template-columns: 1fr;
}

/* La segunda columna no existe en móvil: en el original la sección que se ve
   por debajo de 768px no lleva figura, así que ese hueco no reserva nada. */
.jrv-h-hero__hueco { display: none; }

@media (min-width: 768px) {
  .jrv-h-hero {
    padding-block: var(--jrv-h-aire-corto);
    padding-inline: 20px;
    background-image: var(--jrv-h-figura);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 44% auto;
    background-origin: border-box;
  }

  /* 64,054% y 35,767% del guion, en `fr` y no en `%`: los porcentajes suman
     99,821% y con el hueco entre columnas se pasarían del 100%, que es desborde
     horizontal. Con `fr` el hueco se reparte y nunca desborda. */
  .jrv-h-hero__rejilla {
    grid-template-columns: 64.054fr 35.767fr;
    gap: 20px;
  }

  .jrv-h-hero__hueco { display: block; }
}

.jrv-h-hero__titulo {
  margin: 10px 0 0;
  color: var(--jrv-h-hondo);
  text-align: left;
}

.jrv-h-hero__entrada {
  margin: 16px 0 0;
  color: var(--jrv-h-tinta);
}


/* ==========================================================================
   5 · LOS DOS RÓTULOS (piezas 3/6 y 15)
   ==========================================================================
   Eran `icon-list` de un solo punto, con los iconos `fas fa-toolbox` y
   `fas fa-bullhorn` de Font Awesome. Los iconos van en SVG dentro del HTML: todo
   este trabajo existe para poder tirar 443 KB de fuentes de iconos, así que
   volver a cargarlas para pintar dos glifos no tendría ningún sentido.

   El color del icono es #C23616 en los dos; el del texto, #004361 en «Mi
   Toolbox» y #C23616 en el aviso. Leídos del _elementor_data.
   ========================================================================== */

.jrv-h-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--jrv-h-hondo);
  font-weight: 500;           /* `icon_typography_font_weight: 500` del original */
}

.jrv-h-rotulo__icono {
  flex: 0 0 auto;
  color: var(--jrv-h-rojo);
}

.jrv-h-rotulo--alerta { color: var(--jrv-h-rojo); }


/* ==========================================================================
   6 · LA ENTRADA (piezas 9-14) · relleno 45px · ancho 800px
   ========================================================================== */

.jrv-h-entrada { padding-block: var(--jrv-h-aire-corto); }

.jrv-h-entrada p {
  margin: 0 0 1em;
  color: var(--jrv-h-tinta);
}

.jrv-h-entrada p:last-child { margin-bottom: 0; }

/* La pieza 9 era un `heading` con etiqueta h3 y es texto corrido, así que va en
   <p> (arreglo 1). Pero era el arranque de la página y en la web publicada se lee
   más grande que el resto: se le da un realce MODESTO y en unidades relativas
   —1,125em sobre el cuerpo de la marca— en vez de un tamaño en píxeles inventado.
   Es uno de los dos únicos font-size de esta hoja. */
.jrv-h-entrada__destacado {
  font-size: 1.125em;
  font-weight: 600;
  line-height: 1.45;
}


/* ==========================================================================
   7 · EL AVISO DE AFILIACIÓN (piezas 15-16) · relleno 45px · ancho 900px
   ========================================================================== */

.jrv-h-aviso { padding-block: var(--jrv-h-aire-corto); }

.jrv-h-aviso__texto {
  margin: 14px 0 0;
  color: var(--jrv-h-tinta);
}


/* ==========================================================================
   8 · EL TITULAR DEL CATÁLOGO (pieza 17) · fondo #F5F6F7 · relleno 90px
   ==========================================================================
   Sección propia en el guion, con el mismo fondo que la categoría que va justo
   debajo. Sus 90px de abajo más los 45px de arriba de la siguiente son los 135px
   de aire que hay entre los dos titulares en la web publicada. No es un error de
   suma: está así.
   ========================================================================== */

.jrv-h-titular {
  padding-block: var(--jrv-h-aire-largo);
  background-color: var(--jrv-h-nube);
}

/* Este titular SÍ usa `.jrv-seccion__titulo` de componentes.css —centrado y con el
   mismo clamp que el resto de las páginas ya convertidas— porque es el único
   titular de sección de verdad que tiene la página y encaja tal cual. Lo único que
   se cambia es el color: la librería lo pone en marino #00325C y el guion pide
   #004361. Los seis titulares de categoría NO usan esta clase: son rótulos de
   subsección, van alineados a la izquierda y heredan el h2 de la marca sin tamaño
   propio. */
.jrv-h-titular__texto { color: var(--jrv-h-hondo); }


/* ==========================================================================
   9 · LAS SEIS CATEGORÍAS (piezas 18, 31, 44, 57, 66 y 75)
   ==========================================================================
   Tres claras (#F5F6F7, titular #C23616) y tres oscuras (#004361, titular
   #FFDD59), alternándose. Todas a 90px de relleno menos la primera, «Diseñar las
   Páginas de los Embudos», que en el guion va a 45px.
   ========================================================================== */

.jrv-h-grupo { padding-block: var(--jrv-h-aire-largo); }
.jrv-h-grupo--aire-corto { padding-block: var(--jrv-h-aire-corto); }

.jrv-h-grupo--claro  { background-color: var(--jrv-h-nube); }
.jrv-h-grupo--oscuro { background-color: var(--jrv-h-hondo); }

.jrv-h-grupo__titulo {
  margin: 0 0 24px;
  text-align: left;           /* «alineado=left» en las seis */
}

.jrv-h-grupo--claro  .jrv-h-grupo__titulo { color: var(--jrv-h-rojo); }
.jrv-h-grupo--oscuro .jrv-h-grupo__titulo { color: var(--jrv-h-oro); }


/* ==========================================================================
   10 · LAS CATORCE TARJETAS (piezas 19-30, 32-43, 45-56, 58-65, 67-74, 76-79)
   ==========================================================================
   Sección interior blanca, relleno 20px, dos columnas al 38,75% y 61,25%.
   El «margen sup 40px» del guion es este `margin-block-start` y no un espaciador
   pintado (arreglo 2). La PRIMERA tarjeta de cada categoría NO lo lleva: en el
   guion va pegada a su titular, y de ahí el `:first-of-type`.
   ========================================================================== */

.jrv-h-tarjeta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;        /* `content_position: center` de la columna del texto */
  margin-block-start: 40px;
  padding: 20px;
  background-color: #fff;
}

.jrv-h-tarjeta:first-of-type { margin-block-start: 0; }

@media (min-width: 768px) {
  /* En `fr` por lo mismo que el héroe: 38,75% + 61,25% son justo el 100% y con
     el hueco entre columnas desbordarían. */
  .jrv-h-tarjeta {
    grid-template-columns: 38.75fr 61.25fr;
    gap: 24px;
  }
}

.jrv-h-tarjeta__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Los catorce logotipos a su TAMAÑO NATURAL con tope del ancho de la columna.
   Miden 300px de ancho y la columna unos 375: estirarlos al 100% los dejaría
   borrosos, y en el original van con `image_size: full` y sin ancho
   personalizado. Se cubre también el <picture> con el que el plugin de imágenes
   modernas envuelve cada <img>. */
/* `align-self: stretch` para que el enlace ocupe el ancho de la columna. Sin esto sería
   un elemento flexible del ancho de su contenido, y entonces el «70%» de Bot OnFire
   sería el 70% de sí mismo: una medida circular que cada navegador resuelve a su
   manera. Estirado, el 70% es el 70% de la columna, que es lo que dice el guion. */
.jrv-h-tarjeta__enlace-imagen {
  display: block;
  align-self: stretch;
  max-width: 100%;
  text-align: center;   /* centra la imagen dentro del enlace estirado */
}

/* SELECTOR DE HIJO DIRECTO (`>`) Y NO DE DESCENDIENTE, A PROPÓSITO. El plugin de
   imágenes modernas envuelve cada <img> en un <picture>, así que con un selector de
   descendiente estas reglas caerían sobre el <picture> Y sobre la <img> de dentro: el
   70% de Bot OnFire se aplicaría dos veces y saldría al 49%. Así solo se dimensiona el
   hijo directo, sea <img> (sin plugin) o <picture> (con plugin). */
.jrv-h-tarjeta__enlace-imagen > img,
.jrv-h-tarjeta__enlace-imagen > picture {
  display: inline-block;
  width: auto;          /* tamaño natural: 300px, no estirado hasta los ~375 de la columna */
  max-width: 100%;
  height: auto;
}

/* Y si hay <picture>, la <img> de dentro rellena a su padre y no vuelve a medirse. */
.jrv-h-tarjeta__enlace-imagen > picture > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Solo Bot OnFire: «ancho 70%» en el guion. */
.jrv-h-tarjeta__enlace-imagen--estrecha > img,
.jrv-h-tarjeta__enlace-imagen--estrecha > picture { width: 70%; }

/* El botón. La geometría (radio 100px, borde de 2px, relleno y tipo) sale de
   .jrv-cta en componentes.css; aquí solo el color, que es el de esta página:
   fondo #2E7D32, texto blanco, y al pasar el ratón se invierte —fondo blanco y
   texto verde— igual que en el original (`button_background_hover_color: #FFFFFF`,
   `hover_color: #2E7D32`). El peso 700 es el `typography_font_weight: bold` del
   widget; el tamaño lo pone .jrv-cta y ya coincide con los 16px publicados. */
.jrv-h-cta--verde {
  background-color: var(--jrv-h-verde);
  border-color: var(--jrv-h-verde);
  color: #fff;
  font-weight: 700;
}

.jrv-h-cta--verde:hover,
.jrv-h-cta--verde:focus-visible {
  background-color: #fff;
  border-color: var(--jrv-h-verde);
  color: var(--jrv-h-verde);
}

.jrv-h-tarjeta__titulo { margin: 0 0 10px; }

/* En la web publicada el nombre de la herramienta ES un enlace. Se pinta como
   texto y solo se subraya al pasar por encima: catorce nombres subrayados de
   serie convertirían el catálogo en una lista de enlaces azules. */
.jrv-h-tarjeta__titulo a {
  color: var(--jrv-h-hondo);
  text-decoration: none;
}

.jrv-h-tarjeta__titulo a:hover,
.jrv-h-tarjeta__titulo a:focus-visible {
  color: var(--jrv-h-hondo);
  text-decoration: underline;
}

.jrv-h-tarjeta__texto {
  margin: 0 0 .9em;
  color: var(--jrv-h-tinta);
}

.jrv-h-tarjeta__texto:last-child { margin-bottom: 0; }

/* El único enlace dentro de un texto de esta página (la pieza 30, hacia
   /spi-pro/programa-full-price/). En el original va en #004361 y en negrita. */
.jrv-h-tarjeta__texto a {
  color: var(--jrv-h-hondo);
  font-weight: 700;
}


/* ==========================================================================
   11 · EL PIE (piezas 80-83)
   ==========================================================================
   Relleno 40px del guion. Las dos líneas van en #54595f, también del guion.
   ========================================================================== */

.jrv-h-pie {
  padding-block: 40px;
  padding-inline: 20px;
  background-color: #fff;
}

.jrv-h-pie__credito { text-align: center; }

.jrv-h-pie__logo {
  max-width: 340px;           /* `image_custom_dimension.width` del original */
  margin-inline: auto;
}

.jrv-h-pie__firma,
.jrv-h-pie__nombre {
  margin: 12px 0 0;
  color: var(--jrv-h-gris);
}

/* La segunda línea va pegada a la primera: en el original lleva un margen
   superior de -15px. Aquí no se usa un margen negativo —el protocolo pide
   position/z-index para esos y no hace falta complicar un pie— sino simplemente
   menos aire. El resultado en pantalla es el mismo. */
.jrv-h-pie__nombre { margin-top: 2px; }

/* El corazón de la pieza 81, que era un <i> de Font Awesome. */
.jrv-h-pie__corazon {
  display: inline-block;
  vertical-align: -1px;
  color: var(--jrv-h-corazon);
}

/* --- La pieza 83 ---------------------------------------------------------
   Sección de 500px con filo inferior de 5px en #2980B9, y la imagen con su marco
   de 7px del mismo azul. Los dos valores están en el _elementor_data.
   NO VA ENLAZADA: en Elementor abría la ventana emergente 1775 (un formulario de
   captación) y al apagar Elementor esa ventana desaparece. Está en la lista de
   avisos para el dueño; es lo único de la página que cambia de comportamiento.
   ------------------------------------------------------------------------- */
.jrv-h-cierre {
  margin-block-start: 24px;
  padding-block-end: 0;
  border-block-end: 5px solid var(--jrv-h-marco);
}

/* HIJO DIRECTO otra vez, y aquí importa todavía más: con un selector de descendiente
   el marco de 7px se pintaría en el <picture> Y en la <img> de dentro, o sea DOS marcos
   concéntricos. El hijo directo es <picture> si el plugin de imágenes modernas está
   activo y <img> si no; en los dos casos se enmarca una vez.

   Y `box-sizing: border-box` no es decorativo: `.jrv-media` estira la imagen al 100% de
   sus 500px y el marco añade 14px más. Con el content-box que hereda el tema mediría
   514px en un hueco de 500 y desbordaría a lo ancho —y
   `document.scrollWidth === window.innerWidth` es una de las comprobaciones del
   protocolo. */
.jrv-h-cierre > img,
.jrv-h-cierre > picture {
  box-sizing: border-box;
  border: 7px solid var(--jrv-h-marco);
}