/* ==========================================================================
   LOS DOS «BIENVENIDO A SPI-PRO» · lo propio de estas dos páginas
   ==========================================================================
     /spi-pro/bienvenido-spipro-oto/         página 17531
     /spi-pro/bienvenido-spipro-fullprice/   página 17740

   UNA SOLA HOJA PARA LAS DOS, Y ES A PROPÓSITO. Son gemelas exactas: las 20
   piezas visibles, sus tamaños, sus colores y sus puntos de corte coinciden
   una por una (comprobado leyendo las dos hojas que Elementor genera,
   post-17531.css y post-17740.css: no se diferencian en un solo valor). Dos
   copias de este archivo significarían corregir dos veces cada ajuste, que es
   justo lo que llevó a sacar componentes.css de la portada. Lo que sí vive
   separado es el TEXTO, en las dos plantillas PHP, porque el texto de estas
   dos páginas sí puede separarse algún día: la OTO tiene una oferta dormida
   que la de precio completo no tiene.

   ══ DE DÓNDE SALEN ESTOS NÚMEROS ══
   NO SON DEDUCCIONES. Están leídos de la web publicada el 11 de agosto de
   2026, de cuatro fuentes:
     · post-17531.css y post-17740.css — la hoja que Elementor genera para
       cada página: colores, tamaños de letra, rellenos y anchos de columna.
     · el HTML publicado — el formato por tramos (negritas, subrayados y los
       tramos en rojo), los destinos de los enlaces y los archivos de imagen.
     · post-79342.css — el «kit» de Elementor, que es quien pone el peso de
       los titulares que no lo declaran (600) y el ancho de contenedor por
       omisión (1140px).
     · frontend.min.css y shapes.min.css de Elementor y el CSS del propio
       GeneratePress, para los valores heredados que ninguna hoja repite:
         .elementor-heading-title       line-height 1 · margin 0 · padding 0
         .elementor-widget:not(:last-child)   margin-bottom 20px
         .elementor-column-gap-default … .elementor-element-populated  padding 10px
         .elementor-button              padding 12px 24px · line-height 1
         h1 del tema                    35px (25px en móvil)
         body del tema                  17px · line-height 1,4

   ══ LAS MEDIDAS, SECCIÓN POR SECCIÓN (a 1440px) ══
     1 cabecera   fondo #004361 · contenedor 1140px · logotipo al 25% (70% móvil)
     2 aviso      contenedor 900px · relleno 40px arriba y 120px abajo
                  (móvil 20px/50px) · separador de forma «triángulo» abajo
     3 wapp       fondo #EDE310 · contenedor 900px · relleno 60px arriba
     4 app        fondo #EDE310 · contenedor 900px · relleno 30px/60px
                  columnas 60% y 39,946%
     5 gracias    contenedor 1140px · relleno 60px/10px
     6 vídeo 01   contenedor 800px · relleno 10px/60px · columnas 50/50
     7 pie        margen 40px arriba y abajo · contenedor 1140px

   ══ POR QUÉ EL BOTÓN NO ES .jrv-cta ══
   .jrv-cta de componentes.css tiene la geometría de los botones de la PORTADA,
   medida en post-81494.css: relleno 18px/36px, 16px de letra, peso 500, sombra
   y amarillo. Los dos botones de estas páginas son otra cosa medida: relleno
   12px/24px, 21px y 18px de letra, cursiva, borde de 2px y de 4px, y sin
   sombra. Usar .jrv-cta obligaría a pisarle siete propiedades, así que aquí
   hay una clase propia. Lo que sí se reutiliza de la librería es todo lo demás:
   .jrv-video16 para los dos vídeos y .jrv-solo-movil/.jrv-solo-ancha para el
   único titular que cambia de redacción entre móvil y pantalla ancha.
   ========================================================================== */

/* ==========================================================================
   0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO
   ==========================================================================
   EL SELECTOR ES `page-id-NNNNN` Y NO `page-template-…`. WordPress solo añade
   page-template-{archivo} cuando la plantilla se elige en el desplegable del
   editor; una plantilla cogida por la jerarquía deja el body diciendo
   page-template-default. Comprobado en el HTML publicado: hoy el body de estas
   dos páginas dice `page-template-elementor_canvas`, y en cuanto se devuelva la
   plantilla a «default» dirá `page-template-default`. Lo que no cambia nunca es
   el identificador.

   Sin este bloque la página sale metida en una columna de 900px con franjas
   grises a los lados y franjas blancas arriba y bajo el pie, por los 40px que
   GeneratePress da a #content. Ya pasó dos veces.
   ========================================================================== */
body.page-id-17531 #page,
body.page-id-17531 .site.grid-container,
body.page-id-17740 #page,
body.page-id-17740 .site.grid-container {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

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

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

/* La cuarta regla del bloque, igual que en pagina-gbi-gracias.css (ver allí la
   explicación larga y lo que queda por medir). Resumen: en la estructura de
   flotados que usa este sitio, #page lleva `grid-parent`, que ya pone a 0 el
   relleno lateral de 10px de `.grid-container`, así que esto no cambia ninguna
   medida hoy; se pone para que las dos gemelas queden inmunes si algún día
   alguien le devuelve relleno lateral al envoltorio. */
body.page-id-17531 #page,
body.page-id-17740 #page,
body.page-id-17531 .site.grid-container,
body.page-id-17740 .site.grid-container {
  box-sizing: border-box;
  padding-inline: 0;
}

/* El fondo del tema es #ecf0f1 (gris) y estas dos páginas lo pisan a blanco:
   `body.elementor-page-17531{background-color:#ffffff}` está en la hoja
   publicada. Sin esto asomaría gris alrededor del pie. */
body.page-id-17531 #page,
body.page-id-17740 #page {
  background-color: #fff;
}

/* ==========================================================================
   1 · LOS VALORES DE ESTAS DOS PÁGINAS
   ==========================================================================
   Prefijo propio --jrv-bien- porque ninguno de estos colores está en la paleta
   de componentes.css y porque --jrv-azul, --jrv-amarillo, --jrv-tinta,
   --jrv-suave y --jrv-linea ya existen en style.css CON LOS VALORES DEL BLOG:
   reutilizar esos nombres cambiaría de color el blog entero.
   ========================================================================== */
:root {
  /* --- Leídos de la hoja publicada --------------------------------------- */
  --jrv-bien-azul:         #004361; /* la banda del logotipo, arriba */
  --jrv-bien-limon:        #EDE310; /* las dos secciones de Wapp OnFire */
  --jrv-bien-verde:        #198443; /* «Despierta los superpoderes de…» */
  --jrv-bien-verde-hondo:  #1B5E20; /* «WhatsApp» y el filo del botón verde */
  --jrv-bien-verde-cta:    #2E7D32; /* fondo del botón verde */
  --jrv-bien-verde-sobre:  #43a047; /* el sobre del aviso de correo */
  --jrv-bien-rojo:         #ff0000; /* los tramos «VIDEO #01» */
  --jrv-bien-rojo-cta:     #E53935; /* fondo del botón rojo */
  --jrv-bien-rojo-filo:    #D32F2F; /* borde del botón rojo */
  --jrv-bien-cerco:        #2080B9; /* el marco de 5px de la miniatura */
  --jrv-bien-firma:        #54595f; /* el «Desarrollado con ♥ por mí» */
  --jrv-bien-negro:        #000000;

  /* --- Medidas ----------------------------------------------------------- */
  --jrv-bien-ancho:      1140px; /* contenedor por omisión del kit */
  --jrv-bien-ancho-900:   900px;
  --jrv-bien-ancho-800:   800px;
  --jrv-bien-columna:      10px; /* el relleno de columna de Elementor */
  --jrv-bien-hueco:        20px; /* el hueco entre piezas de una columna */

  /* --- Tipografías -------------------------------------------------------
     MONTSERRAT la carga GeneratePress (es la familia de sus <h2>). OPEN SANS
     y RALEWAY las cargaba el kit de Elementor: cuando Elementor se
     desinstale hay que declararlas en el tema o el navegador usará la de
     reserva. Está anotado para el dueño. */
  --jrv-bien-tipo-titulos: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jrv-bien-tipo-texto:   "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jrv-bien-tipo-botones: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jrv-bien-tipo-firma:   "Raleway", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==========================================================================
   2 · EL ANDAMIO: SECCIÓN, CONTENEDOR Y COLUMNA
   ==========================================================================
   Tres clases reproducen lo que Elementor hacía con seis divs anidados.

   `box-sizing: border-box` EN TODAS LAS QUE LLEVAN RELLENO. El tema hereda
   content-box y el relleno se sumaría por encima del ancho: es el fallo que
   dejó el hero de la portada en 850px cuando medía 650.
   ========================================================================== */
.jrv-bien-seccion {
  box-sizing: border-box;
  position: relative; /* lo necesita el separador de forma de la sección 2 */
  width: 100%;
}

.jrv-bien-caja {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--jrv-bien-ancho);
  margin-inline: auto;
}
.jrv-bien-caja--900 { max-width: var(--jrv-bien-ancho-900); }
.jrv-bien-caja--800 { max-width: var(--jrv-bien-ancho-800); }

/* La columna. En Elementor cada columna es una caja flexible en vertical con
   10px de relleno, y entre pieza y pieza hay 20px. Aquí es lo mismo con dos
   reglas, y así los márgenes negativos del original se leen como lo que son:
   correcciones sobre esos 20px.

   VA EN FLEX Y NO EN BLOQUE A PROPÓSITO: los márgenes de los hijos de un
   contenedor flexible NO se colapsan, así que un margen negativo tira del
   elemento hacia arriba sin arrastrar la sección. En bloque, el -30px de la
   pieza 6 en móvil se colapsaría con el padre y abriría un hueco, que es
   exactamente la trampa del margen negativo en un hijo. */
.jrv-bien-col {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--jrv-bien-columna);
  min-width: 0; /* sin esto un vídeo o una imagen ancha desborda la columna */
}
.jrv-bien-col > * { margin: 0; }
.jrv-bien-col > * + * { margin-top: var(--jrv-bien-hueco); }

/* Columna con el contenido centrado en vertical: el ajuste «align-items:center»
   que llevan la columna de Wapp OnFire, las dos de la sección 4 y la del texto
   del VIDEO #01. */
.jrv-bien-col--centrada { justify-content: center; }

/* La rejilla de columnas. Por debajo de 768px Elementor apila las columnas al
   100%, y por eso TODAS sus reglas de ancho van dentro de
   `@media(min-width:768px)`. Aquí igual: una sola columna y, a partir de 768,
   las proporciones medidas. */
.jrv-bien-rejilla {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  /* Sección 2, aviso del correo: 23,409% + 66,364% + 10,226%. La tercera
     columna va VACÍA en el original y aquí también: no se pinta nada dentro,
     pero el hueco se reserva, que es lo que empuja el texto a su sitio. */
  .jrv-bien-rejilla--sobre { grid-template-columns: 23.409% 66.364% 10.226%; }
  /* Sección 4, Wapp OnFire: el vídeo y el texto. */
  .jrv-bien-rejilla--app   { grid-template-columns: 60% 39.946%; }
  /* Sección 6, VIDEO #01: mitad y mitad. */
  .jrv-bien-rejilla--mitad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Las imágenes con ancho en porcentaje se quedan EN LÍNEA, como en el
   original: el porcentaje se resuelve contra la columna y el envoltorio las
   centra. Por eso no llevan .jrv-media, que las pondría al 100%. */
.jrv-bien-centrada { text-align: center; }

/* ==========================================================================
   3 · CABECERA · pieza 1
   ==========================================================================
   El logotipo blanco sobre la banda azul. El guion no le da destino, así que va
   como imagen y no como enlace, igual que el del pie de la portada.
   ========================================================================== */
.jrv-bien-cabecera {
  background-color: var(--jrv-bien-azul);
}

.jrv-bien-cabecera__logo {
  width: 25%;
  height: auto;
  max-width: 100%;
}

/* En móvil el original lo sube al 70%: al 25% de una pantalla de 375px el
   logotipo se quedaría en 84px y no se leería. Está medido, no supuesto. */
@media (max-width: 767px) {
  .jrv-bien-cabecera__logo { width: 70%; }
}

/* ==========================================================================
   4 · AVISO DEL CORREO · piezas 2 a 7
   ========================================================================== */
.jrv-bien-aviso {
  padding: 40px 0 120px;
  background-color: #fff;
}

/* --- El separador de forma ------------------------------------------------
   NO ES UN ADORNO INVENTADO NI UNA SUPOSICIÓN: está en el HTML publicado, en
   los ajustes de la sección —{"shape_divider_bottom":"triangle",
   "shape_divider_bottom_negative":"yes"}— con su SVG dentro y el relleno
   #EDE310 en la hoja de la página. Es el triángulo amarillo que enlaza esta
   sección blanca con la sección de Wapp OnFire que va debajo, y es la razón de
   que la sección tenga 120px de relleno abajo: le está haciendo sitio.

   Los tres valores raros son los de Elementor (shapes.min.css) y están a
   propósito: `bottom:-1px` y `width:calc(100% + 1.3px)` tapan la línea de un
   píxel que dejan los redondeos, y el `translateX(-50%)` con `left:50%` es lo
   que centra ese sobreancho. El alto no se declara: el SVG tiene una
   proporción de 1000×100, así que mide la décima parte del ancho de la
   pantalla, y con `preserveAspectRatio="none"` se estira sin deformar el
   dibujo. */
.jrv-bien-filo {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  direction: ltr;
}

.jrv-bien-filo svg {
  position: relative;
  left: 50%;
  display: block;
  width: calc(100% + 1.3px);
  height: auto;
  transform: translateX(-50%);
}

.jrv-bien-filo path { fill: var(--jrv-bien-limon); }

/* --- El titular ----------------------------------------------------------
   EL ÚNICO <h1> DE LA PÁGINA, y lleva las DOS redacciones del original: la de
   móvil parte la frase en dos líneas y pone la flecha en medio, y la de
   pantalla ancha la deja de una pieza con la flecha delante. No son la misma
   pieza escrita dos veces, son dos textos distintos, así que se conservan los
   dos y el punto de corte de 768px enseña uno u otro. Van en dos <span>
   dentro de UN <h1> para no dejar dos <h1> en el HTML.

   `line-height: 1` es el de Elementor (.elementor-heading-title) y aquí se
   nota: en móvil el titular son dos líneas pegadas, como en la web publicada.
   35px en pantalla ancha los pone el <h1> del tema; 20px en móvil los declara
   la propia página. El peso 600 sale del kit. */
.jrv-bien-titulo {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-titulos);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

@media (min-width: 768px) {
  .jrv-bien-titulo { font-size: 35px; }
}

/* --- El sobre ------------------------------------------------------------
   EL ORIGINAL LO PINTA CON FONT AWESOME (`far fa-envelope`, 100px, #43a047).
   Aquí va como SVG en línea: traer las 30 KB de Font Awesome por un sobre no
   se sostiene cuando Elementor —que es quien la cargaba— se va a desinstalar.
   El dibujo mantiene las proporciones de la fuente: el sobre ocupa la franja
   central del cuadro de 100px, así que se ve del mismo tamaño que hoy.
   Alineado a la derecha de su columna, y centrado en móvil a 40px. */
.jrv-bien-sobre { line-height: 0; text-align: right; }

.jrv-bien-sobre svg {
  display: inline-block;
  width: 100px;
  height: 100px;
  color: var(--jrv-bien-verde-sobre);
}

/* --- «En breve te llegará un correo...» · pieza 6 ------------------------
   El original declara peso normal y mete el texto en <b>: se ve en negrita
   porque lo pone la etiqueta, no la hoja. Se reproduce igual, con el <b>
   dentro, para no cambiar ni el peso ni el marcado. */
.jrv-bien-sobre__titulo {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-texto);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}

/* --- El párrafo del correo · pieza 7 -------------------------------------
   El original es un «heading» con etiqueta h2 que en realidad es texto
   corrido: aquí va en <p>. El margen de arriba es 0 porque el original le
   pone -20px sobre los 20px de hueco: 20 - 20 = 0. */
.jrv-bien-sobre__texto {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-texto);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.jrv-bien-col > .jrv-bien-sobre__texto { margin-top: 0; }

/* El tramo en rojo de «VIDEO #01». Está en el HTML publicado como
   <span style="color:#ff0000"> dentro de un <b><u>, así que es contenido y no
   adorno del tema. */
.jrv-bien-rojo { color: var(--jrv-bien-rojo); }

@media (max-width: 767px) {
  .jrv-bien-aviso { padding: 20px 0 50px; }
  .jrv-bien-sobre { text-align: center; }
  .jrv-bien-sobre svg { width: 40px; height: 40px; }
  /* El -30px del original: sube el titular hacia el sobre, que en móvil queda
     justo encima porque las columnas se apilan. */
  .jrv-bien-sobre__titulo {
    margin-top: -30px;
    font-size: 18px;
    text-align: center;
  }
  /* -10px sobre los 20px de hueco = 10px. */
  .jrv-bien-col > .jrv-bien-sobre__texto { margin-top: 10px; }
  .jrv-bien-sobre__texto { font-size: 15px; }
}

/* ==========================================================================
   5 · WAPP ONFIRE · piezas 8 a 12
   ==========================================================================
   Dos secciones seguidas del mismo amarillo: la del logotipo (relleno 60px
   arriba y 0 abajo) y la del vídeo con el texto (30px arriba y 60px abajo). Se
   dejan como dos y no como una porque son dos secciones en el original y sus
   rellenos son distintos en móvil.
   ========================================================================== */
.jrv-bien-wapp {
  padding: 60px 0 0;
  background-color: var(--jrv-bien-limon);
}

.jrv-bien-wapp__logo {
  width: 35%;
  height: auto;
  max-width: 100%;
}

.jrv-bien-app {
  padding: 30px 0 60px;
  background-color: var(--jrv-bien-limon);
}

/* «Despierta los superpoderes de WhatsApp». En el original es un «heading» con
   etiqueta h1; aquí es el <h2> que titula la sección, porque el <h1> ya está
   arriba. La palabra WhatsApp va en verde oscuro y el resto en verde medio:
   los dos colores están en el HTML publicado. */
.jrv-bien-app__titulo {
  color: var(--jrv-bien-verde);
  font-family: var(--jrv-bien-tipo-titulos);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.jrv-bien-verde { color: var(--jrv-bien-verde-hondo); }

.jrv-bien-app__texto {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-texto);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}

/* El botón se queda a la izquierda en los dos anchos: el original solo lleva
   `elementor-align-left`, sin variante de móvil. */
.jrv-bien-app__accion { text-align: left; }

@media (max-width: 767px) {
  .jrv-bien-wapp { padding: 20px 0; }
  .jrv-bien-wapp .jrv-bien-col { padding: 0; }
  .jrv-bien-wapp__logo { width: 50%; }

  .jrv-bien-app { padding: 0 20px 30px; }
  .jrv-bien-app .jrv-bien-col { padding: 0; }
  /* En móvil el original separa el titular del vídeo con RELLENO, no con
     margen: 20px por arriba dentro del propio elemento. */
  .jrv-bien-app__titulo {
    padding-top: 20px;
    font-size: 24px;
    text-align: center;
  }
  .jrv-bien-col > .jrv-bien-app__texto { margin-top: 10px; }
  .jrv-bien-app__texto { font-size: 14px; }
}

/* ==========================================================================
   6 · LOS DOS BOTONES
   ==========================================================================
   Geometría medida en las dos hojas publicadas: relleno 12px 24px, línea 1,
   radio 100px, cursiva, y la familia del kit (Roboto, peso 500). El original
   no declara ningún cambio al pasar el ratón —solo `transition: all .3s`—, así
   que aquí tampoco hay uno: el botón se queda del mismo color. Lo único que se
   añade es el cerco de foco, que no se ve con el ratón y sin el cual no hay
   forma de saber dónde está uno navegando con el tabulador.
   ========================================================================== */
.jrv-bien-cta {
  box-sizing: border-box;
  display: inline-block;
  padding: 12px 24px;
  border-style: solid;
  border-radius: 100px;
  color: #fff;
  font-family: var(--jrv-bien-tipo-botones);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease;
}

.jrv-bien-cta:focus-visible {
  outline: 3px solid var(--jrv-bien-azul);
  outline-offset: 3px;
}

/* El interior del botón es una caja flexible con 5px de hueco, igual que en
   Elementor. La flecha del botón verde va DETRÁS del texto (row-reverse en el
   original) y la doble flecha del rojo DELANTE. */
.jrv-bien-cta__interior {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
}
.jrv-bien-cta__interior--invertido { flex-direction: row-reverse; }

.jrv-bien-cta__flecha {
  flex: 0 0 auto;
  width: auto;
  height: 1em;
  color: currentColor;
}

.jrv-bien-cta--verde {
  border-width: 2px;
  border-color: var(--jrv-bien-verde-hondo);
  background-color: var(--jrv-bien-verde-cta);
  font-size: 21px;
}

.jrv-bien-cta--rojo {
  border-width: 4px;
  border-color: var(--jrv-bien-rojo-filo);
  background-color: var(--jrv-bien-rojo-cta);
  font-size: 18px;
}

@media (max-width: 767px) {
  .jrv-bien-cta--verde { font-size: 18px; }
  .jrv-bien-cta--rojo  { font-size: 18px; }
}

/* ==========================================================================
   7 · «GRACIAS JESÚS RICO…» · pieza 13
   ==========================================================================
   Contenedor por omisión (1140px). El peso 600 lo pone el kit; el original no
   lo declara.
   ========================================================================== */
.jrv-bien-gracias {
  padding: 60px 0 10px;
}

.jrv-bien-gracias__titulo {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-titulos);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 767px) {
  .jrv-bien-gracias { padding: 30px 0 0; }
  .jrv-bien-gracias__titulo { font-size: 18px; line-height: 1.3; }
}

/* ==========================================================================
   8 · VIDEO #01 · piezas 14 a 17
   ==========================================================================
   Contenedor de 800px y dos columnas al 50%.
   ========================================================================== */
.jrv-bien-video01 {
  padding: 10px 0 60px;
}

/* La miniatura con su marco azul de 5px. `box-sizing: content-box` a propósito:
   el original suma el borde POR FUERA de los 540px de la imagen, y con el
   border-box que puede venir heredado el marco se comería 10px de la foto. */
.jrv-bien-video01__marco {
  box-sizing: content-box;
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  border: 5px solid var(--jrv-bien-cerco);
}

/* «VIDEO #01». En el original es un «heading» con etiqueta h2; aquí baja a
   <h3> porque cuelga del <h2> «Gracias Jesús Rico…» de la sección de arriba, y
   así la jerarquía queda h1 → h2 → h3 sin saltos. El tamaño y el peso son los
   medidos, que es lo que decide cómo se ve. */
.jrv-bien-video01__titulo {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-texto);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}

/* -10px sobre los 20px de hueco = 10px. */
.jrv-bien-video01__texto {
  color: var(--jrv-bien-negro);
  font-family: var(--jrv-bien-tipo-texto);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.jrv-bien-col > .jrv-bien-video01__texto { margin-top: 10px; }

.jrv-bien-video01__accion { text-align: left; }

@media (max-width: 767px) {
  /* El original le da 20px a los lados a la columna de la imagen. */
  .jrv-bien-video01__columna { padding-inline: 20px; }
  .jrv-bien-video01__titulo { font-size: 24px; text-align: center; }
  /* -20px sobre los 20px de hueco = 0. */
  .jrv-bien-col > .jrv-bien-video01__texto { margin-top: 0; }
  .jrv-bien-video01__texto { font-size: 14px; text-align: center; }
  .jrv-bien-video01__accion { text-align: center; }
}

/* ==========================================================================
   9 · PIE · piezas 18 a 20
   ==========================================================================
   Sección con 40px de margen arriba y abajo. El margen va en la SECCIÓN, no en
   los hijos.
   ========================================================================== */
.jrv-bien-pie {
  margin-block: 40px;
}

/* El retrato: la miniatura de 150px con borde blanco de 5px, esquinas de 100px
   —que en un cuadrado de 150px lo dejan redondo— y sombra. Los cuatro valores
   están en la hoja publicada. `content-box` por lo mismo que la miniatura del
   VIDEO #01: el borde va por fuera. */
.jrv-bien-pie__retrato {
  box-sizing: content-box;
  display: inline-block;
  max-width: 100%;
  height: auto;
  border: 5px solid #fff;
  border-radius: 100px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
}

.jrv-bien-pie__logo {
  width: 25%;
  height: auto;
  max-width: 100%;
}

/* «Desarrollado con ♥ por mí 😉». En el original ya es una etiqueta <p>, así
   que aquí también. Ni el tamaño ni la familia se declaran en la hoja de la
   página: los hereda del cuerpo del tema (17px) y del kit (Raleway 600). */
.jrv-bien-pie__firma {
  color: var(--jrv-bien-firma);
  font-family: var(--jrv-bien-tipo-firma);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

/* El corazón que el original pinta con Font Awesome, por la misma razón que el
   sobre: en línea y del color que herede del párrafo. */
.jrv-bien-corazon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  fill: currentColor;
}

@media (max-width: 767px) {
  .jrv-bien-pie__logo { width: 70%; }
}