/* ==========================================================================
   PORTADA · hoja única. Se carga SOLO en la portada (functions.php,
   jrv_estilos_portada), así que nada de aquí puede alcanzar al blog.

   Móvil primero. Ni un selector de etiqueta suelta: todo cuelga de una clase
   jrv-. La única excepción son los <ul>/<li>/<a> del menú, que los escribe
   wp_nav_menu y no llevan clase propia; van todos bajo .jrv-cabecera__menu.

   Es la unión de las cinco traducciones. Lo que se ha unificado:
     · UNA paleta de variables, con prefijo --jrv-p- para que no pueda pisar
       las seis del tema hijo (--jrv-azul, --jrv-azul-vivo, --jrv-amarillo,
       --jrv-tinta, --jrv-suave, --jrv-linea), que son las del blog.
     · UN botón (.jrv-cta), UN contenedor (.jrv-contenedor), UN título de
       sección (.jrv-seccion__titulo), UNA proporción de vídeo (.jrv-video16)
       y UN par de utilidades de dispositivo (.jrv-solo-movil/.jrv-solo-ancha).
     · UN solo punto de corte para el par móvil/ancha: 768px, el mismo que
       separa [SOLO MÓVIL] de [SOLO ANCHA] en el guion. El segundo corte,
       1025px, es solo para la cabecera, que es donde el guion lo pide.
   ========================================================================== */

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

/* Y el hueco que quedaba entre el pie y el final de la página: GeneratePress separa
   el contenido del pie con un margen que aquí no hace falta, porque el pie propio de
   la portada ya trae su relleno. */
body.home .site-content,
body.home #content { margin-block-end: 0; }
body.home .jrv-pie { margin-block-end: 0; }
body.home #primary,
body.home #main { width: 100%; max-width: none; }
body.home #page { background-color: #fff; }


/* ==========================================================================
   1 · VARIABLES
   ==========================================================================
   Los once colores de la primera lista son literales del guion. Los de la
   segunda NO están en el guion: son deducciones de los traductores para
   resolver piezas que venían con el texto del mismo color que su fondo, y
   cada una está anotada donde se usa. Son las que hay que confirmar contra
   el _elementor_data antes de publicar.
   ========================================================================== */
/* La paleta y los bloques compartidos viven ahora en componentes.css, que se
   declara ANTES que esta hoja. Aquí queda solo lo propio de la portada. */




/* ==========================================================================
   3 · CABECERA PEGAJOSA · piezas 1-4
   ========================================================================== */

/* El centinela: un punto de 1px que se queda quieto arriba de la página
   mientras la cabecera se despega. El margen negativo de 1px cancela su propia
   altura, así que no mueve nada de sitio. Lo vigila el IntersectionObserver de
   portada.js. */
.jrv-cabecera-centinela {
  height: 1px;
  margin-bottom: -1px;
}

/* Transparente al principio —para que se vea el hero azul por debajo— y azul
   sólida al pasar los 100px, con la transición de 1,5s del original. */
.jrv-cabecera {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: transparent;
  transition: background-color 1.5s ease;
}

/* La clase la pone portada.js cuando el centinela pasa los 100px. */
.jrv-cabecera--fijada {
  background-color: var(--jrv-p-cielo);
}

/* Con el menú de móvil abierto la cabecera también se pone azul: el panel es
   azul y arriba de la página, con la cabecera transparente, quedaría flotando
   sin nada que lo sujete. Sin JavaScript extra. */
.jrv-cabecera:has(.jrv-cabecera__interruptor[aria-expanded="true"]) {
  background-color: var(--jrv-p-cielo);
}

/* La barra es el «elementor-container» del original: es la que mide 100px y
   baja a 70px en 1,2s. position: relative porque el panel del menú se cuelga
   de su borde. Lleva también .jrv-contenedor, que le da el ancho de 1100px. */
.jrv-cabecera__barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--jrv-p-cabecera-alto);
  padding-inline: 20px;
  transition: min-height 1.2s ease;
}

.jrv-cabecera--fijada .jrv-cabecera__barra {
  min-height: var(--jrv-p-cabecera-alto-fija);
}

/* --- El logotipo --------------------------------------------------------- */
/* En móvil queda centrado en el hueco que deja la hamburguesa; desde 1025px se
   va al borde izquierdo (columna 22% del guion). */
.jrv-cabecera__logo {
  display: block;
  width: clamp(170px, 44vw, 230px);
  margin-inline: auto;
  line-height: 0;
}

/* El ancho lo manda el enlace y el alto sale del viewBox del SVG, así que no
   hay salto de maquetado aunque WordPress no dé width ni height (no genera
   metadatos de tamaño para SVG). */
.jrv-cabecera__logo img,
.jrv-cabecera__logo picture {
  display: block;
  width: 100%;
  height: auto;
}

.jrv-cabecera__logo:focus-visible {
  outline: 2px solid var(--jrv-p-blanco);
  outline-offset: 4px;
}

/* --- La hamburguesa ------------------------------------------------------ */
/* En el original el menú de tableta y móvil era el desplegable del widget de
   Elementor. Aquí es un botón de verdad, con aria-expanded, y el JavaScript que
   lo abre. EN EL INTENTO ANTERIOR ESTE BOTÓN ERA UN ADORNO: nadie cambiaba su
   aria-expanded, así que por debajo de 1025px la portada se quedaba sin
   navegación. La mitad del tráfico entra por ahí: hay que probarlo en un
   teléfono de verdad, con Tab, Enter y Esc. */
.jrv-cabecera__interruptor {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;   /* 44px es el mínimo para acertar con el pulgar */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--jrv-p-blanco);
  cursor: pointer;
}

.jrv-cabecera__interruptor:focus-visible {
  outline: 2px solid var(--jrv-p-blanco);
  outline-offset: 2px;
}

/* El nombre del botón existe para quien no ve el icono. */
.jrv-cabecera__interruptor-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Tres rayas hechas con la propia caja y sus dos pseudoelementos: cero
   peticiones y toman el color del botón. */
.jrv-cabecera__hamburguesa,
.jrv-cabecera__hamburguesa::before,
.jrv-cabecera__hamburguesa::after {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

.jrv-cabecera__hamburguesa { position: relative; }

.jrv-cabecera__hamburguesa::before,
.jrv-cabecera__hamburguesa::after {
  content: "";
  position: absolute;
  left: 0;
  transition: top .2s ease, transform .2s ease;
}

.jrv-cabecera__hamburguesa::before { top: -8px; }
.jrv-cabecera__hamburguesa::after  { top:  8px; }

/* Abierto, las tres rayas se convierten en una cruz. */
.jrv-cabecera__interruptor[aria-expanded="true"] .jrv-cabecera__hamburguesa {
  background-color: transparent;
}
.jrv-cabecera__interruptor[aria-expanded="true"] .jrv-cabecera__hamburguesa::before {
  top: 0;
  transform: rotate(45deg);
}
.jrv-cabecera__interruptor[aria-expanded="true"] .jrv-cabecera__hamburguesa::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --- El menú ------------------------------------------------------------- */
/* Por debajo de 1025px es un panel que cae del borde de la cabecera. Se abre
   con el propio aria-expanded del botón: el estado que oye un lector de
   pantalla y el que se ve son EL MISMO, así que no pueden desincronizarse. */
.jrv-cabecera__menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  max-height: calc(100vh - var(--jrv-p-cabecera-alto-fija));
  max-height: calc(100dvh - var(--jrv-p-cabecera-alto-fija));
  overflow-y: auto;
  background-color: var(--jrv-p-cielo);
  box-shadow: 0 12px 24px rgb(0 0 0 / 18%);
}

.jrv-cabecera__interruptor[aria-expanded="true"] ~ .jrv-cabecera__menu {
  display: block;
}

/* ÚNICA EXCEPCIÓN A LA REGLA DE «UNA CLASE POR BLOQUE»: los <ul>, <li> y <a>
   del menú los escribe wp_nav_menu y no llevan clase jrv-. Todas estas reglas
   cuelgan de .jrv-cabecera__menu, así que no pueden alcanzar nada del resto de
   la portada. Es a propósito: el menú se sigue editando en Apariencia > Menús. */
.jrv-cabecera__menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jrv-cabecera__menu a {
  display: block;
  padding: 15px 20px;
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.jrv-cabecera__menu li + li {
  border-top: 1px solid rgb(255 255 255 / 22%);
}

/* EL HOVER DEL GUION NO SE PUEDE USAR TAL CUAL: el #A1C7FF sobre el azul
   #0077C4 de la cabecera da 2,75 de contraste, MENOS que el blanco en reposo
   (4,73). Es decir, al pasar el ratón el enlace se volvía menos legible. Se
   queda blanco y el aviso lo da el subrayado, que además funciona para quien no
   distingue colores. Si el dueño quiere el azul claro del original, es una
   línea: color: var(--jrv-p-hielo). */
.jrv-cabecera__menu a:hover,
.jrv-cabecera__menu a:focus-visible {
  color: var(--jrv-p-blanco);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Los submenús, en el panel de móvil, van sangrados debajo de su padre. */
.jrv-cabecera__menu ul ul a {
  padding-block: 12px;
  padding-inline-start: 40px;
  font-size: 15px;
  font-weight: 500;
}

/* --- De 1025px en adelante: la cabecera del guion para escritorio -------- */
@media (min-width: 1025px) {
  /* Logotipo a la izquierda (columna 22%) y menú a la derecha (78%). */
  .jrv-cabecera__interruptor { display: none; }

  .jrv-cabecera__logo {
    width: 242px;
    margin-inline: 0;
  }

  .jrv-cabecera__menu {
    position: static;
    display: block;
    max-height: none;
    margin-inline-start: auto;
    overflow: visible;
    background: none;
    box-shadow: none;
  }

  .jrv-cabecera__lista {
    display: flex;
    align-items: center;
    gap: 22px;
  }

  .jrv-cabecera__menu li {
    position: relative;
    border-top: 0;
  }

  .jrv-cabecera__menu a {
    padding: 8px 0;
    font-size: 15px;
  }

  /* Los submenús se abren al pasar el ratón Y al llegar con el tabulador
     (:focus-within), que es lo que hace falta para recorrer el menú sin ratón.
     El fondo es azul sólido porque arriba de la página la cabecera es
     transparente y el desplegable caería sobre el hero. */
  .jrv-cabecera__menu ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: none;
    min-width: 260px;
    padding-block: 6px;
    background-color: var(--jrv-p-cielo);
    box-shadow: 0 12px 24px rgb(0 0 0 / 18%);
  }

  .jrv-cabecera__menu li:hover > ul,
  .jrv-cabecera__menu li:focus-within > ul {
    display: block;
  }

  .jrv-cabecera__menu ul ul a {
    padding: 12px 18px;
    font-size: 15px;
  }
}


/* ==========================================================================
   4 · HERO AZUL «Zona Caliente» · piezas 5-8
   ========================================================================== */

/* EL MARGEN NEGATIVO ES EL EFECTO, NO UN FALLO: el hero se mete justo por
   debajo de la cabecera transparente, y por eso se ve el azul detrás del
   logotipo blanco. Sale de la misma variable que fija el alto de la cabecera
   para que las dos medidas no puedan separarse.

   LA FIGURA DE JESÚS YA ESTÁ PUESTA, Y NO ES UNA SUPOSICIÓN. Antes las variables
   valían `none` y la mitad derecha del hero salía azul vacía: 650px de alto con
   contenido solo en el 48,955% izquierdo, justo en lo primero que se ve.

   La hoja publicada (post-81494.css) la declara como `background-overlay` de la
   sección, y por eso el volcado —que solo lista widgets— no la traía. Son DOS
   ARCHIVOS distintos, no el mismo a dos tamaños:
     · móvil (<768px)      2021/05/Jesus-02b.png    355px auto, abajo y centrada
     · desde 768px         2021/05/Recorte-JRV.png  450px auto
     · 768-1024px          posición 340px 0
     · desde 1025px        posición 70% 75px
   Al ser fondo y no <img> no hace falta un elemento posicionado ni z-index.

   LAS DOS DIRECCIONES LAS PONE PHP, no este archivo: portada.php declara
   --jrv-hero-figura-movil y --jrv-hero-figura-ancha en el propio <section> con la
   URL real de la biblioteca. Así no hay rutas relativas que se rompan si cambia la
   carpeta de subidas, y aquí se queda solo el punto de corte, que es lo que un CSS
   sabe hacer y un atributo `style` no. Si alguna variable no llegara, no se pinta
   figura y el hero se queda como estaba: no se rompe nada.

   EL DEGRADADO LLEVA PARADAS: `60deg, #004A8F 28%, #0077C4 85%`. Sin ellas el azul
   claro subía demasiado y el titular perdía contraste. */
.jrv-hero {
  /* `border-box` Y NO EL VALOR HEREDADO, que en este tema es `content-box`.
     Con content-box el `min-height` cuenta SOLO el contenido y los 200px de relleno
     se suman encima: el hero medía 850px cuando la web publicada mide 650 exactos.
     Esos 200px de más eran el azul de sobra que quedaba bajo la figura de Jesús y lo
     que empujaba la tarjeta del Reto hacia abajo. Medido en las dos webs a 1440px. */
  box-sizing: border-box;
  min-height: 560px; /* el original baja a 560px en móvil */
  margin-top: calc(var(--jrv-p-cabecera-alto) * -1);
  padding-block: calc(var(--jrv-p-cabecera-alto) + 50px) 50px; /* el «spacer 150px» */
  padding-inline: 20px;
  background-color: var(--jrv-p-hondo);
  background-image:
    var(--jrv-hero-figura-movil, none),
    linear-gradient(60deg, var(--jrv-p-hondo) 28%, var(--jrv-p-cielo) 85%);
  background-repeat: no-repeat;
  /* `border-box` Y NO EL VALOR POR DEFECTO, que es `padding-box`.
     En Elementor la figura de Jesús no es un fondo de la sección: es una capa
     superpuesta que ocupa la sección ENTERA, así que sus coordenadas cuentan desde el
     borde de la sección. Aquí es un fondo, y por defecto los fondos se colocan desde
     el borde INTERIOR del relleno. Como el hero tiene 150px de relleno arriba y 50px
     abajo, la figura caía 150px más abajo de lo debido en escritorio y quedaba 50px
     levantada del borde en móvil: justo el hueco que se veía entre la cintura y la
     franja blanca. Con `border-box` los 70% 75px y el `bottom center` significan lo
     mismo que en la web publicada. */
  background-origin: border-box;
  background-position: bottom center, 0 0;
  background-size: 355px auto, cover;
  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 10%);
}

.jrv-hero__contenido { max-width: 100%; }

/* La pastilla «APRENDE».

   EL FONDO ESTÁ CONFIRMADO, NO ERA UNA DEDUCCIÓN. El guion pide el texto en
   #1D2C33, que sobre el azul del hero da 1,63 de contraste —invisible—, así que se
   supuso que al volcado le faltaba el fondo de la pieza. Era exactamente eso: en el
   HTML publicado la pieza es
     <span style="background-color: #A1C7FF;padding: 5px 15px">APRENDE</span>
   o sea el mismo #A1C7FF y el mismo relleno que ya estaban puestos. Se queda igual. */
.jrv-hero__antetitulo {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 15px;
  background-color: var(--jrv-p-hielo);
  color: var(--jrv-p-carbon);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1.5px;
}

/* EL ÚNICO <h1> DE LA PORTADA. En el original era un h2 más, como todo.

   LLEVA FORMATO POR TRAMOS, y es el del original: el volcado aplanaba el titular
   entero a texto plano y así salía irreconocible, siendo el texto más grande de la
   página. En el HTML publicado es
     Estrategias de <b><u>Marketing Inmobiliario</u></b> para
     <b style="color: #FBE127">Aumentar tus Ventas</b> de manera efectiva y
     <b>al mejor precio posible.</b>
   No cambia ni una palabra del literal, así que el SEO queda intacto. */
.jrv-hero__titulo {
  margin: 0;
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(22px, 3.4vw, 33px);
  font-weight: 500;
  line-height: 1.22;
  text-align: left;
  text-wrap: balance;
}
.jrv-hero__titulo strong { font-weight: 700; }
/* El subrayado, separado de la letra para que se lea. */
.jrv-hero__titulo-sub {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jrv-hero__titulo-oro { color: var(--jrv-p-oro-texto); }

@media (min-width: 768px) {
  /* La columna del guion: 48.955%. La otra mitad es el hueco de la figura. */
  .jrv-hero { min-height: 650px; }
  .jrv-hero__contenido { max-width: 48.955%; }
  .jrv-hero__antetitulo { font-size: 15px; }

  /* De 768px en adelante la figura es OTRO ARCHIVO y otro tamaño. */
  .jrv-hero {
    background-image:
      var(--jrv-hero-figura-ancha, none),
      linear-gradient(60deg, var(--jrv-p-hondo) 28%, var(--jrv-p-cielo) 85%);
    background-position: 340px 0, 0 0;
    background-size: 450px auto, cover;
  }
}

@media (min-width: 1025px) {
  /* En escritorio la figura se coloca al 70% del ancho y 75px por debajo del
     borde de arriba, así que se le mete por detrás de la cabecera. */
  .jrv-hero { background-position: 70% 75px, 0 0; }
}


/* ==========================================================================
   5 · BANNER DEL RETO 7 DÍAS · piezas 9-10
   ========================================================================== */

/* La sección no lleva relleno vertical: el guion solo le da fondo blanco y
   ancho 1100px. El aire de abajo lo pone la sección siguiente.

   NO MONTA SOBRE EL HERO, Y ESTO SE HA COMPROBADO ANTES DE NO TOCARLO. Se propuso
   subirla con `margin-top:-226px` para que el banner cayera encima del degradado
   azul. En la hoja publicada esta sección NO tiene ningún margen negativo: solo
   `background-color:#FFFFFF` y el contenedor a 1100px. El único margen negativo del
   arranque de la página es el del hero (-100px), que ya está puesto y es el que mete
   el hero por debajo de la cabecera. Subir el banner 226px le comería el titular al
   hero: es justo el tipo de cambio que alargó y descuadró el intento anterior. */
.jrv-reto {
  /* LA TARJETA MONTA SOBRE EL HERO, y el margen negativo va AQUÍ, en la sección.
     En Elementor el valor vive en la propia imagen (-220px la horizontal, -120px la
     vertical), pero puesto en la imagen el margen se COLAPSA hacia fuera —la sección
     no tiene relleno arriba— y arrastraba la sección entera dejando 617px de hueco
     encima de la tarjeta. Medido en pantalla. En la sección el efecto visual es el
     mismo y el cálculo es estable.
     `position: relative` + z-index: sin ellos la tarjeta se pinta DEBAJO del fondo
     del hero y no se ve; también comprobado. */
  position: relative;
  z-index: 2;
  margin-top: -80px;
  padding-block: 0;
  padding-inline: 20px;
  background-color: transparent;
}

@media (min-width: 768px) {
  .jrv-reto { margin-top: -220px; }
}

/* AQUÍ NO SE DECLARA `display`, Y ES A PROPÓSITO: lo ponen las utilidades
   .jrv-solo-movil / .jrv-solo-ancha, que tienen la misma especificidad que esta
   regla. Un `display: block` aquí le ganaría al `display: none` de la utilidad
   por venir después, y en escritorio se verían LOS DOS banners. */
.jrv-reto__banner { line-height: 0; }

.jrv-reto__banner img,
.jrv-reto__banner picture {
  display: block;
  width: 100%;
  height: auto;
}

.jrv-reto__banner:focus-visible {
  outline: 2px solid var(--jrv-p-cielo);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  /* El 65% de la columna del guion. */
  .jrv-reto__banner { width: 65%; }
}


/* ==========================================================================
   6 · LOS TRES DIFERENCIADORES · piezas 11-17
   ========================================================================== */
.jrv-diferenciadores {
  background-color: var(--jrv-p-blanco);
  color: var(--jrv-p-carbon);
}

/* El «margen sup -10px» del guion. Con los 30px de abajo del título quedan
   20px reales de aire, que es lo que se ve en el original. */
.jrv-diferenciadores__lista {
  display: grid;
  gap: 40px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* La pastilla roja abraza su texto, no la columna entera.

   CONFIRMADA CONTRA EL HTML PUBLICADO: las tres etiquetas vienen en el guion con
   color=#FFFFFF dentro de una sección #FFFFFF, así que tal cual serían invisibles, y
   se dedujo que faltaba el fondo. La deducción era correcta y el color y el relleno
   también; en la web cada una es
     <span style="background-color: #c23616;padding: 6px 20px">DIFERENCIADOR #01</span>
   O sea exactamente esta regla. Blanco sobre ese rojo da 5,48:1, pasa AA. */
.jrv-diferenciadores__etiqueta {
  display: inline-block;
  margin: 0;
  padding: 6px 20px;
  background-color: var(--jrv-p-rojo);
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

/* Este texto ERA un <h2> en Elementor. Aquí es texto corrido. */
.jrv-diferenciadores__texto {
  margin: 15px 0 0;
  color: var(--jrv-p-carbon);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.jrv-diferenciadores__resalte { color: var(--jrv-p-rojo); }

/* El subrayado del original, separado de la letra para que se lea. */
.jrv-diferenciadores__texto u {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

@media (min-width: 768px) {
  .jrv-diferenciadores__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}


/* ==========================================================================
   7 · BANNER DE CONFERENCISTAS · piezas 18-19
   Franja de imagen sin fondo ni relleno propios: el guion no le da ninguno.

   VA A ANCHO DE VENTANA Y A TAMAÑO NATURAL, NO DENTRO DE LOS 1100px. En el original
   la sección es `elementor-section-full_width` Y `elementor-section-stretched`: se
   sale del contenedor y ocupa toda la ventana, y la imagen (1500px de ancho natural)
   se pinta centrada sin estirarse ni encogerse. Metida en .jrv-contenedor con
   width:100% se quedaba en 1060px, un 28% más estrecha, y la tira perdía presencia
   justo antes de la franja azul. Por eso la <figure> ya no lleva contenedor y aquí se
   le quita el `width:100%` que hereda de .jrv-media.
   ========================================================================== */
.jrv-conferencistas { padding-inline: 0; }

.jrv-conferencistas__tira img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}


/* ==========================================================================
   8 · FAJA DE GUÍAS · pieza 20
   Banda azul a sangre con el título dentro. Es toda la sección: en la web
   publicada no tiene guías debajo (ver problemas detectados).

   LA MUESCA DE ABAJO ES REAL: en el original la sección lleva un «shape divider»
   de tipo `arrow` en negativo, o sea una punta de flecha del mismo azul que cuelga
   del borde inferior, centrada y de 15px de alto (post-81494.css:
   `.elementor-shape-bottom svg{width:calc(100% + 1.3px);height:15px}`). Sin ella la
   banda queda como un rectángulo suelto y se pierde el gesto que lleva la vista al
   entrenamiento. Se dibuja con un pseudoelemento y no con un SVG en el HTML porque
   es puramente decorativa y así no se anuncia a ningún lector de pantalla.
   ========================================================================== */
.jrv-guias {
  position: relative;
  padding: 40px 20px;
  background-color: var(--jrv-p-cielo);
}

.jrv-guias::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-inline: 26px solid transparent;
  border-top: 15px solid var(--jrv-p-cielo);
  transform: translateX(-50%);
}

/* No usa .jrv-seccion__titulo porque no es un titular grande: es una faja. */
.jrv-guias__texto {
  margin: 0;
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 1.4;
  text-align: center;
}


/* ==========================================================================
   9 · ENTRENAMIENTO GRATUITO · piezas 21-42
   ========================================================================== */
.jrv-entrenamiento {
  background: var(--jrv-p-blanco);
  /* La cabecera es pegajosa y mide 100px: sin esto el ancla #entrenamiento
     deja el titular escondido debajo. */
  scroll-margin-top: 110px;
}

/* EL GALÓN ES AMARILLO Y DE TAMAÑO DE ICONO, NO AZUL Y PEQUEÑO. En post-81494.css el
   widget lleva `color:#FBE127` y no declara tamaño, así que usa el de fábrica de
   Elementor (caja de 50px), que para el chevron macizo de Font Awesome da unos 44px de
   ancho. Iba en azul y a 26px, o sea que cambiaba el arranque de la sección más
   importante de la página. */
.jrv-entrenamiento__flecha {
  display: block;
  width: 44px;
  height: auto;
  margin: 0 auto 18px;
  color: var(--jrv-p-oro-texto);
}

/* Sobre .jrv-seccion__titulo: este titular es más grande y más pesado que el
   resto porque reúne los tres renglones de las piezas 23, 24 y 25. */
.jrv-entrenamiento__titulo {
  margin-bottom: 30px;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  line-height: 1.12;
}
.jrv-entrenamiento__antetitulo {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(16px, 3.4vw, 21px);
  font-weight: 700;
  line-height: 1.35;
}
/* EN CURSIVA Y PESO MEDIO, que es como está publicado (`font-weight:500;
   font-style:italic`, 34px y 24px en móvil). Iba en 700 y sin cursiva, y como va
   encima de uno de los dos titulares más grandes de la página, se perdía el contraste
   de pesos que buscaba el diseño. */
.jrv-entrenamiento__subtitulo {
  display: block;
  margin-top: 10px;
  color: var(--jrv-p-cielo);
  font-size: clamp(24px, 3.4vw, 34px);
  font-style: italic;
  font-weight: 500;
}

.jrv-entrenamiento__oferta {
  display: grid;
  gap: 26px;
}

.jrv-entrenamiento__claves {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.jrv-entrenamiento__lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jrv-entrenamiento__lista li {
  position: relative;
  margin: 0;
  padding-left: 32px;
  color: var(--jrv-p-carbon);
  font-size: 16px;
  line-height: 1.55;
}
/* El icono de la «icon-list» de Elementor, dibujado sin Font Awesome, que se va
   con Elementor. */
.jrv-entrenamiento__lista li::before {
  content: "✔";
  position: absolute;
  top: .12em;
  left: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--jrv-p-cielo);
  color: var(--jrv-p-blanco);
  font-size: 11px;
  line-height: 21px;
  text-align: center;
}

/* Aquí se resuelve el «spacer» de 20px (el margen de arriba). La línea de la pieza 31
   NO es el borde de este titular: va aparte, ver .jrv-entrenamiento__separador.
   El tamaño y el peso son los publicados: 24px y 600 (22px en móvil). */
.jrv-entrenamiento__apartado {
  margin: 46px 0 0;
  color: var(--jrv-p-cielo);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(22px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

/* LA LÍNEA DE LA PIEZA 31 VA PARTIDA POR UN GALÓN, Y NO ES UN BORDE CONTINUO.
   En el original es un divider de tipo «line_icon»: línea de 3px en #A1C7FF al 77%
   del contenedor, centrada, y cortada en el medio por un chevron hacia abajo de 37px
   del mismo azul. Un `border-bottom` no se puede partir, así que son dos
   pseudoelementos y el galón en medio. En móvil el original la lleva al 100%.
   Valores de post-81494.css: --divider-color:#A1C7FF, --divider-border-width:3px,
   --divider-icon-size:37px. */
.jrv-entrenamiento__separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 18px auto 0;
  color: var(--jrv-p-hielo);
}
.jrv-entrenamiento__separador::before,
.jrv-entrenamiento__separador::after {
  content: "";
  flex: 1;
  height: 3px;
  background-color: currentColor;
}
.jrv-entrenamiento__separador-galon {
  flex: 0 0 auto;
  width: 37px;
  height: auto;
}

@media (min-width: 768px) {
  .jrv-entrenamiento__separador { max-width: 77%; }
}

.jrv-entrenamiento__videos {
  display: grid;
  gap: 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.jrv-previo {
  display: flex;
  flex-direction: column;
  margin: 0;
}
/* Esquinas RECTAS: el original no tiene radio en estas miniaturas (el widget de
   imagen no declara ninguno). Y ya no hace falta `position:relative` ni
   `overflow:hidden`, porque la etiqueta no va encima de la imagen. */
.jrv-previo__figura {
  margin: 0;
  line-height: 0;
}
.jrv-previo__figura img,
.jrv-previo__figura picture {
  display: block;
  width: 100%;
  height: auto;
}

/* «VIDEO #01/02/03» ES UNA PASTILLA DEBAJO DE LA MINIATURA, NO ENCIMA.
   El color azul y el relleno estaban bien —en la web es
   <span style="background-color: #0077C4;padding: 6px 20px">— pero se habían puesto
   en posición absoluta sobre la esquina de la imagen, con una esquina redondeada. En
   el original la pastilla es un bloque normal ENTRE la imagen y el texto, de esquinas
   rectas. Aquí el <figcaption> es el bloque y el <span> es la pastilla, que abraza su
   texto en vez de ocupar la columna entera. */
.jrv-previo__etiqueta {
  margin: 14px 0 0;
  line-height: 1.2;
}
.jrv-previo__pastilla {
  display: inline-block;
  padding: 6px 20px;
  background-color: var(--jrv-p-cielo);
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.2;
}
.jrv-previo__texto {
  margin: 16px 0 0;
  color: var(--jrv-p-carbon);
  font-size: 16px;
  line-height: 1.55;
}

/* EL REMATE ES UNA FRANJA ROSA DE ESQUINAS RECTAS, NO UN PANEL AZUL REDONDEADO.
   La pieza 41 viene en el guion en blanco sobre fondo blanco y se había resuelto
   envolviéndola en un panel con el degradado de la casa. La deducción («ese blanco
   solo se lee sobre algo oscuro») era razonable, pero el dato la desmiente: en
   post-81494.css el widget lleva
     background-color:#E32762; padding:15px 0; margin:40px 10px 0
   y el texto blanco a 21px (16px y padding 15px en móvil). O sea una franja ROSA a
   todo el ancho del contenedor, sin redondear, y el botón amarillo FUERA de ella,
   centrado sobre el blanco de la página. Ya no hay div envoltorio: son hermanos.
   Blanco sobre #E32762 da 4,9:1, pasa AA. */
.jrv-entrenamiento__reclamo {
  margin: 46px 0 0;
  padding: 15px;
  background-color: var(--jrv-p-rosa);
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.jrv-entrenamiento__remate-accion {
  margin: 26px 0 0;
  text-align: center;
}

@media (min-width: 768px) {
  .jrv-entrenamiento__reclamo {
    margin: 40px 10px 0;
    padding: 15px 0;
  }
}

@media (min-width: 768px) {
  /* Los porcentajes del guion: 62% para el vídeo, 37,954% para las claves. */
  .jrv-entrenamiento__oferta {
    grid-template-columns: 62fr 38fr;
    gap: 32px;
    align-items: center;
  }
  /* Las tres columnas al 33% del guion. */
  .jrv-entrenamiento__videos {
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
}


/* ==========================================================================
   10 · CASOS DE ÉXITO · piezas 43-94
   ========================================================================== */
.jrv-casos {
  background: var(--jrv-p-nube);
  scroll-margin-top: 110px;
}

/* «Casos de Éxito» es del grupo LIGERO: 60px y peso 400 (40px en móvil). Iba a 800 y
   con tope de 46px, o sea negrita y un 23% más pequeño de lo publicado. */
.jrv-casos__titulo {
  font-size: clamp(40px, 6.4vw, 60px);
  font-weight: 400;
  line-height: 1;
}
/* El antetítulo va en peso NORMAL (400), no en negrita: 19px, 18px en móvil. */
.jrv-casos__antetitulo {
  display: block;
  margin-bottom: 8px;
  color: var(--jrv-p-cielo);
  font-size: clamp(18px, 1.9vw, 19px);
  font-weight: 400;
  line-height: 1.2;
}

.jrv-casos__destacados,
.jrv-casos__breves {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los dos casos con relato. El «margen sup 40px» del guion es este hueco. */
.jrv-casos__destacados {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

.jrv-caso {
  display: grid;
  gap: 22px;
  margin: 0;
}

/* LAS ESTRELLAS: el color ámbar NO viene en el guion, y el número tampoco (el
   volcado trae «? de 5»). Ver problemas detectados. */
.jrv-caso__estrellas {
  margin: 0 0 10px;
  color: var(--jrv-p-estrella);
  font-size: 20px;
  letter-spacing: 4px;
  line-height: 1;
  text-align: center;
}

.jrv-caso__nombre {
  margin: 0;
  color: var(--jrv-p-cielo);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(21px, 4vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.jrv-caso__cargo {
  margin: 5px 0 0;
  color: var(--jrv-p-carbon);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* El «divider» que separa la firma del relato: un borde, no un elemento. */
.jrv-caso__cita {
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--jrv-p-cerco);
  quotes: none;
}
.jrv-caso__cita p {
  margin: 0;
  color: var(--jrv-p-carbon);
  font-size: 16px;
  line-height: 1.62;
}
.jrv-caso__cita .jrv-caso__logro {
  margin-bottom: 14px;
  font-size: clamp(17px, 3.2vw, 20px);
  font-weight: 800;
  line-height: 1.35;
}

/* Los nueve testimonios que son solo vídeo. */
.jrv-casos__breves {
  display: grid;
  gap: 34px;
  margin-top: 40px;
}
.jrv-breve {
  display: grid;
  gap: 14px;
  margin: 0;
  align-content: start;
}
/* El vídeo y las estrellas se pegan; el nombre respira. */
.jrv-breve .jrv-caso__estrellas { margin: 0; }

@media (min-width: 768px) {
  .jrv-caso {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
  }
  .jrv-casos__destacados { gap: 56px; }
  .jrv-casos__breves {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 34px;
  }
  /* Carlos Pérez Newman: en el original tiene su propia sección de una sola
     columna, así que ocupa el ancho entero de la rejilla. */
  .jrv-breve--ancho { grid-column: 1 / -1; }
}


/* ==========================================================================
   11 · HE TRABAJADO CON · piezas 95-97 y 135-137
   LAS DOS COPIAS COMPARTEN DE VERDAD LAS REGLAS. Antes la segunda no llevaba
   .jrv-seccion y repetía el relleno a mano en su propia regla: dos secciones que en
   el original son idénticas, mantenidas con dos mecanismos distintos, que es como
   acaban desincronizándose. Ahora las dos llevan .jrv-seccion y la única diferencia
   —el «spacer» de la pieza 134, que solo afecta al aire de arriba de la segunda— es
   un modificador de una línea.
   ========================================================================== */
.jrv-clientes { background: var(--jrv-p-blanco); }

/* El «spacer» de la pieza 134 mide 50px en la hoja publicada, no los 40px que se
   habían estimado (el guion lo daba como «alto ?px»). */
.jrv-clientes--cierre { padding-top: 50px; }

/* LOS LOGOTIPOS VAN A SU TAMAÑO NATURAL Y CENTRADOS, NO ESTIRADOS.
   El archivo mide 900px de ancho y en el original el widget NO declara ancho ninguno,
   así que se pinta tal cual, centrado. Tratado como .jrv-media con width:100% se
   estiraba a los 1060px del contenedor, un 18% más grande de lo publicado, y las dos
   veces que aparece. */
.jrv-clientes__logos { margin-top: 28px; }
.jrv-clientes__logos img {
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}


/* ==========================================================================
   12 · WEBINARS DE LOS JUEVES · piezas 98-111
   ========================================================================== */
.jrv-webinars {
  background-color: var(--jrv-p-nube);
  color: var(--jrv-p-carbon);
}

/* SOLO MÓVIL. En el JSON la sección entera está oculta en escritorio y tableta,
   así que a partir de 768px no se pinta. ESTA REGLA ES LA ÚNICA QUE LO HACE:
   borrarla es todo lo que hay que hacer para mostrarla también en pantallas
   grandes, porque el bloque ya está escrito para las dos anchuras. */
/* LA SECCIÓN DE WEBINARS NO SE MUESTRA EN NINGÚN TAMAÑO.
   En Elementor estaba oculta solo en escritorio y tableta —decisión suya de entonces—
   y en móvil sí se veía. El dueño decidió el 11 de agosto de 2026 ocultarla también en
   móvil: el bloque de las tres tarjetas de grabación desbordaba a la derecha y, sobre
   todo, ya no quiere ese registro en la portada.
   Se oculta con `display: none` y NO se borra el HTML a propósito: el día que quiera
   recuperarla, se quita esta regla y vuelve entera, con sus tarjetas y su formulario.
   Para que Google tampoco la cuente, el bloque lleva además `hidden` en el PHP. */
.jrv-webinars { display: none; }

/* Piezas 98 y 99: dos títulos de media columna cada uno. Van en una línea
   mientras quepan y se parten solos cuando no. */
.jrv-webinars__antetitulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 0 0 12px;
  font-family: var(--jrv-p-tipo-titulos);
}

/* El guion pide este texto en #FFFF00 sobre un fondo #F5F7FB: 1,07 de
   contraste, es decir, invisible. El volcado no guardó el fondo de los widgets
   de título, y el resto de la portada usa antetítulos en pastilla. Se conserva
   el amarillo declarado y se le pone debajo el azul de la casa: 10,9. */
.jrv-webinars__envivo {
  padding: 6px 16px;
  border-radius: 100px;
  background-color: var(--jrv-p-marino);
  color: var(--jrv-p-oro);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.jrv-webinars__dia {
  color: var(--jrv-p-cielo);
  font-size: clamp(20px, 5.5vw, 26px);
  font-weight: 700;
  line-height: 1.15;
}

/* Era heading en el guion; aquí es <p> porque es un reclamo, no estructura. */
.jrv-webinars__gratis {
  margin: 8px 0 0;
  color: var(--jrv-p-rojo);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 700;
  text-align: center;
}

.jrv-webinars__oferta {
  display: grid;
  gap: 24px;
  margin-top: 28px;
}

.jrv-webinars__cartel { display: block; line-height: 0; }
.jrv-webinars__cartel img,
.jrv-webinars__cartel picture {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--jrv-p-radio);
}

.jrv-webinars__detalle {
  display: grid;
  gap: 22px;
  justify-items: center;
}

/* Pieza 103: los tres puntos del icon-list. La palomita es un SVG incrustado en
   el propio CSS —ni un archivo más que pedir al servidor— y se pinta con
   background-color, así que hereda el color de la variable. */
.jrv-webinars__ventajas {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.6;
}
.jrv-webinars__ventajas li {
  position: relative;
  padding-left: 32px;
}
.jrv-webinars__ventajas li::before {
  content: "";
  position: absolute;
  top: .15em;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--jrv-p-cielo);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.9-1.9 3.65 3.65L18.1 5.35 20 7.25z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.9-1.9 3.65 3.65L18.1 5.35 20 7.25z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Aquí se resuelven dos piezas sin pintar ningún div vacío: el spacer de 40px
   (pieza 105) es este margen de arriba, y la línea divisoria (pieza 107) es
   este borde de abajo. */
.jrv-webinars__subtitulo {
  margin: 40px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--jrv-p-hielo);
  color: var(--jrv-p-cielo);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(20px, 5.5vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

.jrv-webinars__grabaciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
/* LAS TRES TARJETAS DE GRABACIÓN. En Elementor son `call-to-action`: la foto del
   invitado de fondo a 370x432, la cinta «GRATUITO» en diagonal arriba a la derecha y
   el botón encima. Antes eran tres pastillas azules idénticas. */
.jrv-grabacion { margin: 0; }

.jrv-grabacion__enlace {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--jrv-p-radio, 10px);
  text-decoration: none;
  line-height: 0;
}

.jrv-grabacion__foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 370 / 432;
  object-fit: cover;
  transition: transform .5s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .jrv-grabacion__enlace:hover .jrv-grabacion__foto { transform: scale(1.04); }
}

/* La cinta, en diagonal en la esquina superior derecha como la de Elementor. */
.jrv-grabacion__cinta {
  position: absolute;
  top: 26px;
  right: -34px;
  z-index: 2;
  width: 150px;
  padding: 5px 0;
  transform: rotate(45deg);
  background-color: var(--jrv-p-verde, #00BB2D);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
}

/* El botón va sobre la foto, abajo, con un velo para que se lea siempre. */
.jrv-grabacion__boton {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 16px 12px 18px;
  background: linear-gradient(to top, rgb(0 32 60 / 88%), rgb(0 32 60 / 0%));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.jrv-grabacion__enlace:focus-visible {
  outline: 3px solid var(--jrv-p-oro, #FFFF00);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  /* Tres en fila cuando hay sitio, igual que el original. */
  .jrv-webinars__grabaciones { grid-template-columns: repeat(3, 1fr); }
}

.jrv-webinars__cierre {
  margin: 26px 0 0;
  text-align: center;
}

/* Estas dos reglas HOY NO SE VEN: la sección está oculta desde 768px. Están
   escritas —con los porcentajes de columna del guion— para que el día que se
   decida mostrarla en tableta y escritorio no haya que rehacer el bloque. */
@media (min-width: 768px) {
  .jrv-webinars__oferta {
    grid-template-columns: 59fr 41fr;
    align-items: center;
  }
  .jrv-webinars__grabaciones {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   13 · TESTIMONIOS · piezas 112-116
   ========================================================================== */
/* DETRÁS DEL AZUL HAY UNA FOTOGRAFÍA, y faltaba: la sección salía en un #95CAE3
   plano. En post-81494.css el fondo es el color más un `background-overlay` con
   2021/03/fdo-testimonios.jpg a `cover`, centrado, con opacidad 0,3 y en modo
   `multiply`. Se reproduce con un pseudoelemento —mismo archivo, misma opacidad y
   mismo modo de fusión— para no perder el color de respaldo si la imagen no carga.
   La dirección la pone portada.php con --jrv-testimonios-fondo, por lo mismo que la
   figura del hero: nada de rutas relativas. */
.jrv-testimonios {
  position: relative;
  isolation: isolate; /* encierra el `multiply` para que no tiña lo de detrás */
  background-color: var(--jrv-p-celeste);
  color: var(--jrv-p-carbon);
}

.jrv-testimonios::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jrv-testimonios-fondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .3;
  mix-blend-mode: multiply;
}

/* Las dos columnas al 50% del original: el dibujo pegado a la derecha de su mitad y
   el titular a la izquierda de la suya. */
.jrv-testimonios__cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.jrv-testimonios__cabecera .jrv-seccion__titulo { text-align: left; }

/* PIEZA 112: ES EL BOCADILLO DE DIÁLOGO DE VERDAD, ya no una comilla de imprenta.
   El volcado lo daba como «Array» —era un SVG de la biblioteca— y se había puesto un
   &ldquo; de Georgia al 50% de opacidad como sustituto. El SVG está incrustado en el
   HTML publicado y se ha recuperado tal cual; va en #0077C4 y a 169px de alto, 51px en
   móvil (post-81494.css). El color se pone aquí con `fill` y no en el marcado. */
.jrv-testimonios__marca {
  flex: 0 0 auto;
  width: auto;
  height: 51px;
  fill: var(--jrv-p-cielo);
}

/* El margen de arriba es el spacer de 20px de la pieza 115. */
.jrv-testimonios__muro {
  max-width: var(--jrv-p-ancho-medio);
  margin: 20px auto 0;
}
/* EL PORCENTAJE VA SOLO EN EL <img>. Si se le pone también al <picture> —que es lo que
   el plugin de imágenes modernas envuelve alrededor— los dos se multiplican: el 90%
   del guion se quedaba en un 81% real. Ver la nota larga de .jrv-tv__canal.
   Y no lleva radio: lo que lleva es una sombra, que es lo que hay publicado. */
.jrv-testimonios__muro img {
  width: 90%; /* el «ancho 90%» del guion */
  max-width: 100%;
  margin-inline: auto;
  box-shadow: 1px 5px 12px -3px rgb(0 0 0 / 35%);
}

@media (min-width: 768px) {
  .jrv-testimonios__marca { height: 169px; }
}


/* ==========================================================================
   14 · BLOG INMOBILIARIO · piezas 117-120
   ========================================================================== */
/* LLEVA UNA MARCA DE AGUA DETRÁS y faltaba: la banda salía en color plano. En
   post-81494.css el fondo es #00325C más un `background-overlay` con
   2021/03/jrv-simbolo-stroke-blanco.svg centrado, sin repetir, con opacidad 0,24 y en
   modo `overlay`: es el símbolo del logotipo, enorme y muy tenue. Sin él la franja se
   ve vacía comparada con la web. La dirección la pone portada.php. */
.jrv-blog {
  position: relative;
  isolation: isolate;
  background-color: var(--jrv-p-marino);
  color: var(--jrv-p-blanco);
  text-align: center;
}

.jrv-blog::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jrv-blog-fondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .24;
  mix-blend-mode: overlay;
}

.jrv-blog__antetitulo { margin: 0 0 14px; }

/* LA PASTILLA ES AZUL CLARA Y RECTA, NO AMARILLA Y REDONDEADA.
   La pieza 117 viene con color de texto #00325C, que es EXACTAMENTE el fondo de esta
   banda: tal cual el texto no existe (contraste 1:1), así que se dedujo que faltaba un
   fondo. La deducción era correcta; el color elegido, no. En el HTML publicado es
     <span style="background-color: #A1C7FF;padding: 8px 15px">BLOG INMOBILIARIO</span>
   o sea el mismo azul de la pastilla «APRENDE» del hero y sin redondear. Marino sobre
   #A1C7FF da 8,3:1. */
.jrv-blog__pastilla {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--jrv-p-hielo);
  color: var(--jrv-p-marino);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
}

.jrv-blog__bajada {
  margin: 8px 0 0;
  color: var(--jrv-p-oro-texto);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.jrv-blog__accion { margin: 28px 0 0; }


/* ==========================================================================
   15 · SOY JESÚS + LAS TRES CIFRAS · piezas 121-128
   ========================================================================== */
.jrv-sobre-mi {
  background-color: var(--jrv-p-blanco);
  color: var(--jrv-p-carbon);
}

/* «Hola,» va en azul vivo y el resto del titular en marino: es bicolor en el original
   (<span style="color: #0077C4">Hola,</span>) y el volcado aplanaba el color por
   tramos, igual que hacía con el <h1>. */
.jrv-sobre-mi__saludo { color: var(--jrv-p-cielo); }

/* La tarjeta clara: el contenedor anidado con fondo #F5F7FB.
   El margen de arriba es el espaciador de la pieza 122, que no trae alto.

   LOS VALORES SON LOS PUBLICADOS: radio 30px (no 14px), borde de 1px en #E5ECF6 —que
   faltaba— y relleno `30px 30px 0 30px`, o sea SIN relleno abajo, que es lo que deja
   que el retrato llegue a ras del borde inferior. En móvil el original lo baja a
   `20px 0`. Y `overflow:visible` para que la cabeza pueda salirse por arriba. */
.jrv-sobre-mi__tarjeta {
  display: grid;
  gap: 24px;
  /* EL HUECO ENTRE EL TITULAR Y LA TARJETA SON 90px, MEDIDOS EN LA WEB PUBLICADA.
     El espaciador de la pieza 122 mide 50px (--spacer-size:50px) y el guion lo daba
     como «alto ?px», pero al 50px del espaciador Elementor le suma los márgenes que
     pone alrededor del titular y del widget: de la base del <h2> al borde de la tarjeta
     hay 90px, tanto en móvil como en escritorio. Importa porque el retrato sube por
     encima del borde de la tarjeta: con 90px nunca llega a tocar el titular, y con 50px
     se lo comía. */
  margin-top: 90px;
  padding: 20px 0;
  border: 1px solid var(--jrv-p-filo-claro);
  border-radius: 30px;
  background-color: var(--jrv-p-nube);
  overflow: visible;
}

/* EL RETRATO SE SALE DE LA TARJETA POR ARRIBA, Y ESO ES EL GESTO DE LA COMPOSICIÓN.
   En post-81494.css el widget lleva `margin:-100px 0 0 0` y la imagen `width:80%`, así
   que la cabeza y los hombros asoman por encima del borde superior de la tarjeta y el
   cuerpo queda cortado a ras del inferior. Estaba metido dentro del relleno, centrado
   y con aire por los cuatro lados, y la foto perdía el asomo.

   CUÁNTO SOBRESALE, MEDIDO EN LA WEB PUBLICADA: 79px por encima del borde de la tarjeta
   en móvil y 60px en pantalla ancha (el original declara -100px y el resto lo deciden
   los rellenos de la tarjeta, que cambian con el ancho). Aquí se reproducen esas dos
   cifras: -100px con los 20px de relleno de móvil dan 80px, y -90px con los 30px de
   escritorio dan 60px. `align-self:end` es lo que pega el cuerpo al fondo de la
   tarjeta. El porcentaje va SOLO en el <img>: ver la nota de .jrv-tv__canal. */
.jrv-sobre-mi__retrato {
  align-self: end;
  margin-top: -100px;
}
.jrv-sobre-mi__retrato img {
  width: 80%;
  max-width: 100%;
  margin-inline: auto;
}

.jrv-sobre-mi__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* La pieza 124 es UN solo «heading» con todo el texto seguido. Aquí son tres
   <p> partidos por sus propios puntos: no cambia ni una palabra. */
.jrv-sobre-mi__parrafo {
  margin: 0;
  color: var(--jrv-p-carbon);
  font-size: 16px;
  line-height: 1.62;
}

/* Las tres cifras. Eran contadores animados; la cifra va escrita y no hace
   falta JavaScript. El margen de arriba es el «margen sup 40px» del guion. */
.jrv-cifras {
  display: grid;
  gap: 30px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
/* LOS DOS COLORES ESTABAN CAMBIADOS. En post-81494.css:
     el número  → color #00325C (marino), 75px, peso bold, línea 1.2em (55px en móvil)
     el rótulo  → color #868BA3 (gris azulado), 18px, peso 500, línea 1.3em
   Iban al revés: el número en azul vivo y el rótulo en casi negro. */
.jrv-cifras__dato {
  margin: 0;
  text-align: center;
}
.jrv-cifras__numero {
  margin: 0;
  color: var(--jrv-p-marino);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(55px, 7vw, 75px);
  font-weight: 700;
  line-height: 1.2;
}
/* El rótulo va alineado a la IZQUIERDA dentro de un bloque centrado: sus dos renglones
   arrancan en la misma x, y centrándolos el <br> partía la frase de otra manera. El
   inline-block es lo que permite las dos cosas a la vez. */
.jrv-cifras__rotulo {
  display: inline-block;
  margin: 10px 0 0;
  color: var(--jrv-p-plomo);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

@media (min-width: 768px) {
  /* Las dos columnas del guion: 46,092% y 53,908%.
     El relleno publicado es `30px 30px 0 30px`: el 0 de abajo es lo que deja que el
     retrato llegue a ras del borde inferior de la tarjeta. `align-items:end` pega el
     cuerpo de la foto a ese borde; el texto se centra por su cuenta. */
  /* LAS COLUMNAS VAN SIN HUECO ENTRE ELLAS, con los porcentajes exactos del guion.
     El aire entre la foto y el texto no lo pone un `gap`: lo pone la propia foto, que
     mide el 80% de su columna y va centrada. Con un gap de 32px las dos columnas
     salían un 6% más estrechas, la foto se encogía y el texto se envolvía en más
     líneas, así que la tarjeta crecía y el cuerpo de la foto dejaba de llegar al borde
     de abajo. Medido en la web: columna de la foto 407px y foto 326px en una ventana
     de 966px, que es exactamente el 80% de la columna. */
  .jrv-sobre-mi__tarjeta {
    grid-template-columns: 46.092% 53.908%;
    gap: 0;
    align-items: start;
    padding: 30px 30px 0;
  }
  /* Con los 30px de relleno de arriba, -90px dejan el retrato sobresaliendo 60px por
     encima del borde de la tarjeta, que es lo medido en la web publicada. El
     `align-self` se queda en `start`: con `end` el retrato se pegaba al fondo de la
     fila y el margen negativo dejaba de sacarlo por arriba, que es el gesto. El cuerpo
     queda a ras del borde inferior porque la tarjeta no tiene relleno abajo y la foto
     es más alta que el texto de al lado. */
  .jrv-sobre-mi__retrato {
    align-self: start;
    margin-top: -90px;
  }
  .jrv-sobre-mi__texto { align-self: center; }
  /* Las tres columnas al 33%. */
  .jrv-cifras { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   16 · APARICIONES EN TV · piezas 129-133
   El «divider» de la pieza 129 es este border-top: no es un elemento.
   ========================================================================== */
.jrv-tv { background-color: var(--jrv-p-blanco); }

/* LA LÍNEA VA EN EL CONTENEDOR, NO EN LA SECCIÓN. La sección va a sangre, así que el
   border-top puesto en ella cruzaba la ventana entera. En el original la pieza 129 es
   un divider DENTRO de la columna, así que mide lo que mide el contenedor: 1100px
   centrados. Valores publicados: 1px en #BEC0CB y 40px de aire arriba y abajo. */
.jrv-tv__caja {
  padding-top: 40px;
  border-top: 1px solid var(--jrv-p-gris);
}

/* El «ancho 37%» de la pieza 131 (100% en móvil).

   EL PORCENTAJE VA SOLO EN EL <img>, Y ESTE ES EL FALLO QUE MÁS ENCOGÍA UNA IMAGEN.
   El plugin de imágenes modernas envuelve cada <img> en <picture class="jrv-picture">.
   Ese plugin le pone `display:contents`, que quitaría el <picture> del maquetado y
   haría inofensivo un ancho puesto sobre él... pero .jrv-media declara
   `.jrv-media picture { display:block; width:100% }`, y `.jrv-media picture` (0,1,1)
   le gana en especificidad a `.jrv-picture` (0,1,0). Así que dentro de .jrv-media el
   <picture> SÍ genera caja, y poner el 37% al <picture> y al <img> los multiplicaba:
   37% de 37% ≈ 13,7%. El logotipo de Canal TRO salía en unos 81px cuando publicado
   mide 392px. Lo mismo le pasaba al retrato (80%→64%) y al muro de testimonios
   (90%→81%); las que están al 100% no se notaban porque 100% de 100% es 100%.

   Y FUERA EL max-width:220px, que no está en el original: 37% de 1060 son 392px, que es
   exactamente lo publicado. */
.jrv-tv__canal { margin-top: 24px; }
.jrv-tv__canal img {
  width: 100%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .jrv-tv__canal img { width: 37%; }
}

.jrv-tv__videos {
  display: grid;
  gap: 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  /* Las dos columnas al 50% del guion. */
  .jrv-tv__videos { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   17 · REDES SOCIALES · piezas 138-142
   ========================================================================== */
/* El degradado lleva las mismas paradas que el del hero, y detrás hay una MARCA DE
   AGUA que faltaba: en post-81494.css la sección lleva un `background-overlay` con
   2021/03/fdo-lead-generator-2.jpg centrado, sin repetir, opacidad 0,18 y modo
   `multiply`. La dirección la pone portada.php. */
.jrv-redes {
  position: relative;
  isolation: isolate;
  background-color: var(--jrv-p-hondo);
  background-image: linear-gradient(60deg, var(--jrv-p-hondo) 28%, var(--jrv-p-cielo) 85%);
  color: var(--jrv-p-blanco);
}

.jrv-redes::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jrv-redes-fondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  opacity: .18;
  mix-blend-mode: multiply;
}

/* Este titular es del grupo ligero pero con su propio tamaño: 34px y peso 400
   (24px en móvil). Iba con el tope de 40px y en negrita. */
.jrv-redes__titulo {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.2;
}

.jrv-redes__lista {
  display: grid;
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.jrv-redes__item { margin: 0; }

/* NI CAJA NI BORDE: ICONO ARRIBA Y USUARIO DEBAJO.
   Los cuatro «icon-box» se habían pintado como rectángulos con borde de 2px y solo el
   @usuario, porque el volcado no guardó ni el icono ni el destino. En el original no
   hay ninguna caja: es el icono de la red en blanco con el nombre de usuario debajo, en
   blanco, pequeño y en negrita (`elementor-position-top`). Los cuatro iconos y los
   cuatro destinos están recuperados del HTML publicado; van en el marcado, con su
   aria-label cada uno. */
.jrv-redes__enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere; /* @agenciajesusricovargas no cabe en 375px */
  transition: opacity .16s ease;
}
.jrv-redes__enlace:hover,
.jrv-redes__enlace:focus-visible { opacity: .75; }
.jrv-redes__enlace:focus-visible {
  outline: 3px solid var(--jrv-p-blanco);
  outline-offset: 3px;
}

/* El icono toma el color del enlace, así que no hay que repetirlo. */
.jrv-redes__icono {
  width: auto;
  height: 52px;
  fill: currentColor;
}

@media (min-width: 768px) {
  /* Las cuatro columnas al 25% del guion. */
  .jrv-redes__lista { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   18 · PIE · piezas 143-144
   ========================================================================== */
/* TAMBIÉN LLEVA MARCA DE AGUA: en post-81494.css el pie tiene un `background-overlay`
   con 2021/03/jrv-simbolo-stroke-blue.svg centrado, a `50% auto` y con opacidad 0,4
   (341px de ancho en móvil). Es un trazado de líneas y arcos muy tenue; sin él el pie
   se ve plano al lado de la web. La dirección la pone inc/portada-pie.php. */
.jrv-pie {
  position: relative;
  isolation: isolate;
  padding: 20px 15px;
  background-color: var(--jrv-p-marino);
  color: var(--jrv-p-blanco);
  text-align: center;
}

.jrv-pie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jrv-pie-fondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 341px auto;
  opacity: .4;
}

/* El «ancho 35%» de la pieza 143, y 90% en móvil.

   FUERA EL max-width:240px. El logotipo es un SVG, así que el plugin no lo envuelve en
   <picture> y ese tope SÍ se aplicaba: el 35% de los 950px del pie son 332px, o sea que
   el tope lo dejaba un 28% más pequeño de lo publicado. En el original no hay ningún
   max-width. El porcentaje va solo en el <img>, por lo mismo que en el resto. */
.jrv-pie__logo img {
  width: 90%;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .jrv-pie { padding: 30px 20px; }
  .jrv-pie__logo img { width: 35%; }
  .jrv-pie::before { background-size: 50% auto; }
}

/* La pieza 144 era un «heading» con etiqueta=h2: un aviso de derechos no
   titula nada, así que va en <p>. */
.jrv-pie__derechos {
  margin: 18px 0 0;
  color: var(--jrv-p-blanco);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}


/* ==========================================================================
   19 · MOVIMIENTO REDUCIDO
   Quien pide en su sistema menos animación no ve el fundido de la cabecera, ni
   la cruz de la hamburguesa, ni los cambios de color de los botones: el cambio
   ocurre igual, pero de golpe. No se toca ningún estado final, así que no se
   pierde nada.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .jrv-cabecera,
  .jrv-cabecera__barra,
  .jrv-cabecera__hamburguesa::before,
  .jrv-cabecera__hamburguesa::after,
  .jrv-cta,
  .jrv-redes__enlace {
    transition: none;
  }
}