/* ==========================================================================
   /sobre-mi/ · identificador 123 · lo propio de esta página
   ==========================================================================
   Los bloques compartidos —.jrv-contenedor, .jrv-cta, .jrv-media, .jrv-video16,
   .jrv-solo-movil / .jrv-solo-ancha y la paleta --jrv-p-*— vienen de
   componentes.css, que se declara antes. Aquí SOLO lo que usa esta página.

   NO SE DECLARAN TAMAÑOS DE LETRA salvo donde el diseño lo pide de verdad (los
   rótulos de dos líneas de las tarjetas y el galón de las fichas de vídeo), y
   cuando se declara va en unidades relativas. La tipografía la pone GP Premium,
   que es la identidad de marca real: cuerpo Montserrat 16/1.4, h1 Roboto Slab 35
   negrita, h2 Montserrat 25 peso 300. Decisión del dueño (2026-08-11): la
   fidelidad al píxel con Elementor no es el objetivo; el contenido sí.

   LOS COLORES SÍ SON LOS DEL GUION, uno por uno. Se declaran como variables
   locales bajo `body.page-id-123` y con prefijo --jrv-sm- para no rozar ni con
   la paleta de componentes.css (--jrv-p-*) ni, sobre todo, con la del blog en
   style.css (--jrv-azul, --jrv-amarillo, --jrv-tinta, --jrv-suave, --jrv-linea),
   que si se pisa cambia de color el blog entero.
   ========================================================================== */

/* ==========================================================================
   0 · SOLTAR EL CONTENEDOR DEL TEMA · ESTO VA PRIMERO Y NO SE TOCA
   ==========================================================================
   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 le da a #content. Ha pasado tres veces.

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

body.page-id-123 #page,
body.page-id-123 .site.grid-container { max-width: none; margin-inline: 0; width: 100%; }
body.page-id-123 #content,
body.page-id-123 .site-content { padding: 0; margin-block-end: 0; }
body.page-id-123 #primary,
body.page-id-123 #main { width: 100%; max-width: none; }

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

/* ==========================================================================
   1 · LA PALETA Y LAS MEDIDAS DEL GUION
   ========================================================================== */

body.page-id-123 {
  /* --- Colores, tal cual salen del guion --------------------------------- */
  --jrv-sm-marino:      #004361; /* hero, «UN Entrenamiento…» y las tres fichas */
  --jrv-sm-oro-a:       #ffffc9; /* arranque de las cinco bandas doradas */
  --jrv-sm-oro-b:       #ffff00; /* cierre del degradado y el <h1> del hero */
  --jrv-sm-linea: rgba(61, 61, 61, .27); /* los diez `divider` largos */
  --jrv-sm-azul:        #2980B9; /* la línea de cada guía y la línea 2 del titular */
  --jrv-sm-rojo:        #C23616; /* botones de las guías, franja y boletín */
  --jrv-sm-verde:       #2E7D32; /* los cuatro «QUIERO COMPRAR» */
  --jrv-sm-oro-boton:   #ffdd59; /* los tres botones de WhatsApp */
  --jrv-sm-gris:        #7a7a7a; /* «Pero sobre todo…» y la promesa del vídeo */
  --jrv-sm-nube:        #F8F8F8; /* fondo de la sección de las tres guías */
  --jrv-sm-pie-texto:   #54595f; /* «Desarrollado con por mí ;)» */
  --jrv-sm-menu:        #0F719D; /* el menú de la cabecera */
  --jrv-sm-menu-activo: #004361; /* y su color al pasar por encima */

  /* --- Deducido, NO está en el guion ------------------------------------ */
  --jrv-sm-oro-filo:    #e8c94f; /* el borde del botón amarillo de WhatsApp */

  /* --- Anchos de contenedor, del guion ---------------------------------- */
  --jrv-sm-ancho:         1000px; /* el de casi todas las secciones */
  --jrv-sm-ancho-hero:    1300px;
  --jrv-sm-ancho-video:    900px;
  --jrv-sm-ancho-boletin:  940px;
  --jrv-sm-ancho-ancha:   1140px; /* las secciones sin `ancho` en el guion */
}

/* ==========================================================================
   2 · LOS ANDAMIOS: CONTENEDORES, SECCIONES Y REJILLAS
   ========================================================================== */

/* --- El contenedor centrado ---------------------------------------------- */
.jrv-sm-caja {
  width: 100%;
  max-width: var(--jrv-sm-ancho);
  margin-inline: auto;
}
.jrv-sm-caja--hero    { max-width: var(--jrv-sm-ancho-hero); }
.jrv-sm-caja--video   { max-width: var(--jrv-sm-ancho-video); }
.jrv-sm-caja--boletin { max-width: var(--jrv-sm-ancho-boletin); }
.jrv-sm-caja--ancha   { max-width: var(--jrv-sm-ancho-ancha); }

/* --- La sección ----------------------------------------------------------
   El guion da el relleno de algunas secciones («relleno Npx») y de otras no.
   Donde no lo da va este de 40px, que es el aire que la página tiene entre
   bloques; los demás son los del guion, en sus modificadores. */
.jrv-sm-seccion {
  box-sizing: border-box;
  padding-block: 40px;
  padding-inline: 20px;
}
.jrv-sm-seccion--p40 { padding-block: 40px; }
.jrv-sm-seccion--p50 { padding-block: 50px; }
.jrv-sm-seccion--p60 { padding-block: 60px; }

.jrv-sm-blanco { background-color: #fff; }

/* --- Las dos columnas ----------------------------------------------------
   Una sola columna hasta 768px y los repartos del guion a partir de ahí. Se
   escriben con `fr` y los porcentajes reales para que se lea de dónde salen. */
.jrv-sm-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

@media (min-width: 768px) {
  .jrv-sm-duo--56 { grid-template-columns: 56.2fr 43.8fr; align-items: start; }
  .jrv-sm-duo--40 { grid-template-columns: 40fr 60fr; align-items: start; }
  .jrv-sm-duo--50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jrv-sm-duo--65 { grid-template-columns: 65fr 35fr; }
  .jrv-sm-duo { gap: 34px; }
}

/* --- Tres columnas (estructura 30) y cuatro (estructura 40) --------------- */
.jrv-sm-tres,
.jrv-sm-cuatro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

@media (min-width: 600px) {
  /* Los cuatro productos entran de dos en dos antes que las tarjetas de texto. */
  .jrv-sm-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .jrv-sm-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  .jrv-sm-cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Las columnas centradas de las estructuras 34 -------------------------
   En el guion son tres columnas (16% / 66% / 16% y 10% / 80% / 9,998%) con las
   dos laterales VACÍAS: o sea, el margen de la del medio. Aquí es un bloque
   centrado y no tres columnas de las que dos no pintan nada. */
.jrv-sm-centro,
.jrv-sm-ochenta { width: 100%; margin-inline: auto; }

@media (min-width: 768px) {
  .jrv-sm-centro  { max-width: 66%; }
  .jrv-sm-ochenta { max-width: 80%; }
}

/* ==========================================================================
   3 · LOS QUINCE `divider`, QUE NO SON ELEMENTOS
   ==========================================================================
   Arreglo 2 del protocolo: un `divider` es un borde, no una etiqueta. Cada uno
   va arriba o abajo del contenedor que le toca, elegido para que la línea caiga
   sobre fondo blanco y con el ancho del contenido, igual que en el original:
   `--abajo` cuando el `divider` va después de un bloque blanco (piezas 14, 22,
   26, 38, 44, 70 y 81) y `--arriba` cuando va entre una banda de color y el
   bloque blanco siguiente (piezas 28, 40 y 101).
   ========================================================================== */

.jrv-sm-filo-abajo {
  padding-block-end: 40px;
  border-block-end: 1px solid var(--jrv-sm-linea);
}
.jrv-sm-filo-arriba {
  padding-block-start: 40px;
  border-block-start: 1px solid var(--jrv-sm-linea);
}

/* ==========================================================================
   4 · PIEZAS 1-2 · LA CABECERA
   ==========================================================================
   SIN JAVASCRIPT Y A PROPÓSITO. La portada esconde su menú tras una hamburguesa
   que abre portada.js; aquí ese archivo no se carga, así que un botón de menú
   sería un adorno y por debajo de 1025px no habría forma de llegar al menú. Por
   ahí entra la mitad del tráfico del sitio. Solución: el menú no se esconde
   nunca — se apila bajo el logotipo en móvil y se pone en fila desde 768px.
   Los submenús se abren con :hover Y con :focus-within, así que también se
   recorren con el tabulador.
   ========================================================================== */

.jrv-sm-cabecera {
  box-sizing: border-box;
  padding: 16px 20px;
  background-color: #fff;
}

.jrv-sm-cabecera__barra {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  width: 100%;
  max-width: var(--jrv-sm-ancho-ancha);
  margin-inline: auto;
}

/* El logotipo es el SVG EN COLOR: el fondo de esta cabecera es blanco y el
   archivo blanco sería invisible (ya pasó con el logotipo del tema). */
.jrv-sm-cabecera__logo {
  width: 100%;
  max-width: 220px;
}

.jrv-sm-cabecera__menu { width: 100%; }

.jrv-sm-cabecera__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jrv-sm-cabecera__lista li { position: relative; }

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

.jrv-sm-cabecera__lista a:hover,
.jrv-sm-cabecera__lista a:focus-visible {
  color: var(--jrv-sm-menu-activo);
  text-decoration: underline;
}

/* El submenú: plegado, y se despliega al pasar por encima o al entrar con el
   tabulador. En móvil va debajo, en el flujo, para no salirse de la pantalla. */
.jrv-sm-cabecera__lista .sub-menu {
  margin: 0;
  padding: 0 0 0 16px;
  list-style: none;
}

@media (min-width: 768px) {
  .jrv-sm-cabecera__barra { flex-direction: row; justify-content: space-between; }
  /* ANCHO EXPLÍCITO Y NO SOLO `max-width`. El logotipo es un SVG y WordPress no
     siempre puede leerle las dimensiones, así que no hay tamaño intrínseco del
     que tirar: con `flex-basis: auto` el hueco quedaría indefinido y el
     `width: 100%` que .jrv-media le pone a la imagen no tendría contra qué
     resolverse. El 25% del guion se queda como tope. */
  .jrv-sm-cabecera__logo { flex: 0 0 auto; width: 220px; max-width: 25%; }
  .jrv-sm-cabecera__menu { width: auto; }
  .jrv-sm-cabecera__lista { justify-content: flex-end; }

  .jrv-sm-cabecera__lista .sub-menu {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    display: none;
    min-width: 220px;
    padding: 8px 14px;
    background-color: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  }
  .jrv-sm-cabecera__lista li:hover > .sub-menu,
  .jrv-sm-cabecera__lista li:focus-within > .sub-menu { display: block; }
}

/* ==========================================================================
   5 · PIEZAS 3-6 · EL HERO
   ==========================================================================
   Alto 500px, fondo #004361 con img-sobre-mi-002b.jpg encima, ancho 1300px y
   columnas 52,018% / 47,983%.

   `box-sizing: border-box` es OBLIGATORIO (arreglo 3): el tema hereda
   content-box y con él los 500px de alto y el relleno se suman, que es lo que
   dejó el hero de la portada en 850px en vez de 650px.
   `background-origin: border-box` para que la figura no se desplace tanto como
   el relleno y no quede un hueco de azul debajo.
   El guion no recoge la posición ni el tamaño del fondo, así que va centrado y a
   `cover`, que es lo que aguanta cualquier ancho sin dejar el azul a la vista.
   ========================================================================== */

.jrv-sm-hero {
  box-sizing: border-box;
  min-height: 500px;
  padding: 40px 20px;
  background-color: var(--jrv-sm-marino);
  background-image: var(--jrv-sm-hero-fondo);
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  display: flex;
  align-items: center;
}

.jrv-sm-hero__reja { width: 100%; }

.jrv-sm-hero__antetitulo {
  margin: 0 0 6px;
  color: #fff;
}

/* EL ÚNICO <h1> DE LA PÁGINA. El tamaño lo pone la marca (Roboto Slab 35
   negrita); aquí solo el color del guion. */
.jrv-sm-hero__titulo {
  margin: 0 0 14px;
  color: var(--jrv-sm-oro-b);
}

.jrv-sm-hero__texto p { color: #fff; }
.jrv-sm-hero__texto p:last-child { margin-bottom: 0; }

/* ==========================================================================
   6 · LAS CINCO BANDAS DORADAS · piezas 7-10, 27, 39, 45 y 46
   ==========================================================================
   Degradado #ffffc9 → #ffff00. EL GUION NO RECOGIÓ EL ÁNGULO («a ?º»), así que
   va el de fábrica de Elementor: 180º, de arriba abajo. Está anotado.
   ========================================================================== */

.jrv-sm-oro {
  box-sizing: border-box;
  padding-inline: 20px;
  background-image: linear-gradient(180deg, var(--jrv-sm-oro-a) 0%, var(--jrv-sm-oro-b) 100%);
  text-align: center;
}
.jrv-sm-oro--p20 { padding-block: 20px; }
.jrv-sm-oro--p40 { padding-block: 40px; }

.jrv-sm-oro__antetitulo { margin: 0 0 4px; color: var(--jrv-sm-gris); }
.jrv-sm-oro__reclamo    { margin: 0 0 8px; color: #000; }

.jrv-sm-oro__titulo {
  margin: 0;
  color: var(--jrv-sm-marino);
  text-align: center;
  text-wrap: balance;
}
.jrv-sm-oro__titulo--negro { color: #000; }

/* ==========================================================================
   7 · LOS BLOQUES DE TEXTO
   ========================================================================== */

.jrv-sm-prosa > p:last-child { margin-bottom: 0; }

.jrv-sm-antetitulo { margin: 0 0 4px; color: var(--jrv-sm-gris); }

.jrv-sm-titulo { margin: 0 0 14px; color: #000; }
.jrv-sm-titulo--centro { text-align: center; }

/* La columna lateral con la imagen: en móvil se centra y no se estira. */
.jrv-sm-lateral { width: 100%; margin-inline: auto; }

/* Un <a> que envuelve una imagen: sin subrayado ni hueco de línea base. */
.jrv-sm-enlace-media { display: block; text-decoration: none; }

/* La ficha bajo una foto o un vídeo (piezas 33 y 37). */
.jrv-sm-ficha__pie {
  margin: 12px 0 0;
  color: var(--jrv-sm-gris);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   8 · PIEZAS 47-58 · LAS TRES GUÍAS
   ==========================================================================
   Fondo #F8F8F8. La línea azul de cada tarjeta (piezas 48, 52 y 56) es el borde
   inferior del rótulo, no un elemento.
   ========================================================================== */

.jrv-sm-guias { background-color: var(--jrv-sm-nube); }

.jrv-sm-guia {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jrv-sm-guia__rotulo {
  margin: 0;
  padding-block-end: 10px;
  border-block-end: 3px solid var(--jrv-sm-azul);
  color: var(--jrv-sm-marino);
}

/* El botón, a lo ancho de la tarjeta y pegado al fondo para que los tres queden
   a la misma altura aunque el rótulo ocupe dos líneas. */
.jrv-sm-guia__portada { margin-block-end: auto; }
.jrv-sm-guia .jrv-cta { display: block; }

/* ==========================================================================
   9 · PIEZAS 59-69 · LOS TRES SERVICIOS
   ==========================================================================
   Los dos `divider` [SOLO MÓVIL] (piezas 62 y 66) separan las tarjetas cuando
   van una debajo de otra: son un borde que solo existe por debajo de 768px. El
   guion no da su color, así que llevan el de los demás.
   ========================================================================== */

.jrv-sm-servicio {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jrv-sm-servicio__rotulo { margin: 0; color: var(--jrv-sm-marino); }

/* Las dos líneas del rótulo: la etiqueta pequeña arriba y el nombre debajo. En
   el guion vienen pegadas («DIRECCIÓN DEMarketing DigitaL INMOBILIARIO») porque
   el extractor se come el salto. Los tamaños van en `em`, relativos al h3 de la
   marca: no se inventa ninguna escala. */
.jrv-sm-servicio__etiqueta {
  display: block;
  font-size: .7em;
  font-weight: 400;
  letter-spacing: .04em;
}
.jrv-sm-servicio__nombre { display: block; }

/* El texto empuja el botón al fondo de la tarjeta: las tres descripciones no
   miden lo mismo y así los tres botones quedan a la misma altura. */
.jrv-sm-servicio__texto { margin: 0 0 auto; }
.jrv-sm-servicio .jrv-cta { display: block; }

@media (max-width: 767px) {
  .jrv-sm-tres--servicios > .jrv-sm-servicio:not(:last-child) {
    padding-block-end: 30px;
    border-block-end: 1px solid var(--jrv-sm-linea);
  }
}

/* ==========================================================================
   10 · PIEZAS 71-80 · LOS CUATRO PRODUCTOS Y LOS MEDIOS DE PAGO
   ========================================================================== */

.jrv-sm-producto {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.jrv-sm-producto .jrv-media { margin-block-end: auto; }
.jrv-sm-producto .jrv-cta { display: block; }

.jrv-sm-garantia {
  margin: 30px 0 0;
  color: var(--jrv-sm-marino);
  text-align: center;
}

/* PIEZA 80 · MARGEN SUPERIOR DE -10px.
   Va en la SECCIÓN —este envoltorio, que es lo que el guion llama sección— y no
   en la imagen: en el hijo el margen se colapsa y arrastra la sección entera
   (arreglo 4; en la portada eso dejó 617px de hueco). Y con position: relative y
   z-index, o el elemento mide bien y se pinta por debajo del fondo. */
.jrv-sm-pagos {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  margin: -10px auto 0;
}

/* ==========================================================================
   11 · PIEZAS 82-91 · EL ENTRENAMIENTO
   ========================================================================== */

/* Pieza 82 · la franja roja. Relleno 5px, el del guion. */
.jrv-sm-franja-roja {
  box-sizing: border-box;
  padding: 5px 20px;
  background-color: var(--jrv-sm-rojo);
}
.jrv-sm-franja-roja__titulo {
  margin: 0;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

/* Piezas 83-85 · UN titular de tres líneas, cada una con el color del guion. */
.jrv-sm-entrena__titulo { margin: 0; text-align: center; text-wrap: balance; }
.jrv-sm-entrena__linea { display: block; color: #000; }
.jrv-sm-entrena__linea--azul { color: var(--jrv-sm-azul); }

/* Pieza 86 · EL RECLAMO EN BLANCO.
   El guion le da color #ffffff y NO le da fondo a su sección: en blanco sobre
   blanco el texto desaparecería. Va sobre una franja del azul de esta misma
   página. El dueño ha dicho que el color exacto le da igual; que el texto se
   lea, no. Anotado. */
.jrv-sm-entrena__reclamo {
  box-sizing: border-box;
  margin: 26px 0 0;
  padding: 16px 20px;
  background-color: var(--jrv-sm-marino);
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

/* Sección 32 · margen superior de 20px, el del guion. Positivo: no necesita
   z-index. */
.jrv-sm-entrena-duo { margin-block-start: 20px; }

.jrv-sm-entrena__promesa {
  margin: 16px 0 0;
  color: var(--jrv-sm-gris);
  text-align: center;
}

/* Pieza 91 · el `spacer` de 20px: relleno de la columna, no un div vacío. */
.jrv-sm-entrena__lado { padding-block-end: 20px; }

/* Pieza 89 · el `icon-list` de tres puntos. El guion NO recoge el icono de la
   lista, así que va un marcador normal en vez de inventar uno. Anotado. */
.jrv-sm-puntos { margin: 0; padding-inline-start: 1.2em; }
.jrv-sm-puntos li { margin-block-end: 14px; }
.jrv-sm-puntos li:last-child { margin-block-end: 0; }

/* ==========================================================================
   12 · PIEZAS 92-100 · LAS TRES FICHAS DE VÍDEO
   ========================================================================== */

.jrv-sm-marino {
  box-sizing: border-box;
  padding-inline: 20px;
  background-color: var(--jrv-sm-marino);
  color: #fff;
}
.jrv-sm-marino--p20 { padding-block: 20px; }
.jrv-sm-marino--p60 { padding-block: 60px; }

.jrv-sm-marino__titulo {
  margin: 0;
  color: #fff;
  text-align: center;
  text-wrap: balance;
}

.jrv-sm-ficha-video { display: flex; flex-direction: column; gap: 14px; }

.jrv-sm-ficha-video__rotulo { margin: 0; color: #fff; text-align: center; }
.jrv-sm-ficha-video__galon { display: block; font-weight: 700; }
.jrv-sm-ficha-video__texto {
  display: block;
  font-size: .72em;
  font-weight: 400;
}

/* ==========================================================================
   13 · PIEZAS 102-106 · EL CIERRE
   ========================================================================== */

/* Pieza 103 · un `icon-list` de un solo punto; su icono tampoco consta. */
.jrv-sm-lista-simple {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
  font-weight: 700;
}

/* La línea de guiones del original es literalmente texto: se conserva, y se le
   pone corte para que no desborde en una pantalla estrecha (la comprobación de
   scrollWidth === innerWidth a 390px). */
.jrv-sm-guiones { overflow-wrap: anywhere; }

.jrv-sm-firma { width: 100%; max-width: 320px; margin-block: 20px 10px; }

.jrv-sm-firma__nombre { margin: 0; font-weight: 700; }

.jrv-sm-logos { margin-block-start: 24px; }

/* ==========================================================================
   14 · PIEZAS 110-112 · LA FRANJA DEL BOLETÍN
   ==========================================================================
   Fondo #c23616, ancho 940px, columnas 64,667% / 35,333%. El formulario de la
   pieza 111 NO está: es un `form` de Elementor Pro y el CRM interno todavía no
   existe. El hueco está marcado con un comentario en la plantilla.
   ========================================================================== */

.jrv-sm-boletin {
  box-sizing: border-box;
  padding: 40px 20px;
  background-color: var(--jrv-sm-rojo);
  color: #fff;
}

.jrv-sm-boletin__titulo { margin: 0; color: #fff; }

.jrv-sm-boletin__retrato { width: 100%; margin-inline: auto; }

/* ==========================================================================
   15 · PIEZAS 113-114 · EL PIE
   ==========================================================================
   Margen superior de 40px, el del guion. El logotipo va con su ancho real
   (340x120) y no estirado al contenedor.
   ⚠️ EL ARCHIVO ES logo-jrv-340x120px-B.png Y LA «B» PUEDE SER LA VERSIÓN
   BLANCA, sobre un pie de fondo blanco. Está en el informe para comprobarlo en
   pantalla antes de publicar: si sale invisible hay que usar la versión en color
   o darle fondo. Es exactamente la trampa del logotipo blanco del tema sobre
   cabecera blanca.
   ========================================================================== */

.jrv-sm-pie {
  box-sizing: border-box;
  margin-block-start: 40px;
  padding: 20px;
  text-align: center;
}

.jrv-sm-pie__logo {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
}

.jrv-sm-pie__firma {
  margin: 10px 0 0;
  color: var(--jrv-sm-pie-texto);
  text-align: center;
}

/* ==========================================================================
   16 · LOS TRES BOTONES DE COLOR
   ==========================================================================
   La geometría —relleno, radio, sombra, tipografía— la pone .jrv-cta de
   componentes.css. Aquí solo el color, que es lo que cambia, y en un
   modificador, igual que los .jrv-cta--amarillo / --azul / --contorno de allí.
   Los tres colores son los del guion: #C23616 las guías, #ffdd59 WhatsApp y
   #2E7D32 los productos.
   ========================================================================== */

.jrv-sm-cta--rojo {
  background-color: var(--jrv-sm-rojo);
  border-color: var(--jrv-sm-rojo);
  color: #fff;
}
.jrv-sm-cta--rojo:hover,
.jrv-sm-cta--rojo:focus-visible { background-color: #9c2b12; color: #fff; }

.jrv-sm-cta--oro {
  background-color: var(--jrv-sm-oro-boton);
  border-color: var(--jrv-sm-oro-filo);
  color: #000;
}
.jrv-sm-cta--oro:hover,
.jrv-sm-cta--oro:focus-visible { background-color: #ffe98a; color: #000; }

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

/* ==========================================================================
   17 · NADA DESBORDA
   ==========================================================================
   La comprobación del protocolo es `document.scrollWidth === window.innerWidth`
   a 390, 768 y 1440. Las dos causas de desborde en esta página serían una
   imagen sin tope y una palabra larga en una columna estrecha: las dos van
   atadas aquí.
   ========================================================================== */

body.page-id-123 img,
body.page-id-123 picture,
body.page-id-123 iframe { max-width: 100%; }