/* ==========================================================================
   /whatsapp/ · «Crea Enlaces Personalizados» · página 18007
   ==========================================================================
   Los bloques compartidos (contenedor, sección, título de sección, botón,
   media, vídeo 16:9, utilidades de dispositivo) vienen de componentes.css,
   que se declara antes. Aquí solo lo que usa esta página.

   PÁGINA INTOCABLE: 2.876 visitas, 152 clics, y es una herramienta que el
   dueño usa de verdad. Nada de lo que se lee cambia.

   TIPOGRAFÍA: no se declara `font-size` casi en ningún sitio. La pone GP
   Premium, que es la identidad de marca real del sitio (cuerpo Montserrat
   16/1.4, h1 Roboto Slab 35 negrita, h2 Montserrat 25 peso 300, texto
   #3a3a3a). Donde hace falta un tamaño de verdad —el titular de la página de
   aterrizaje, el número de las fichas, la caja del enlace— va en unidades
   RELATIVAS (rem / clamp), nunca en píxeles fijos.

   LOS COLORES SÍ SON LOS DEL GUION, tal cual. Van todos aquí arriba, con el
   prefijo --jrv-wa- para no pisar nada: ni las seis de style.css
   (--jrv-azul, --jrv-azul-vivo, --jrv-amarillo, --jrv-tinta, --jrv-suave,
   --jrv-linea) ni las --jrv-p- de componentes.css. Comprobado por grep: no
   había ni una aparición de «jrv-wa» en el tema.

   AVISO SOBRE #004361: es el azul de ESTA página y NO es ninguno de los de
   la paleta compartida (--jrv-p-hondo es #004A8F y --jrv-p-marino #00325C).
   Por eso se declara aquí y no se reutiliza uno parecido.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO
   --------------------------------------------------------------------------
   EL SELECTOR ES `page-id-18007` Y NO `page-template-…`. WordPress solo añade
   `page-template-{archivo}` cuando la plantilla se elige en el desplegable del
   editor. Una plantilla por nombre de archivo —`page-18007.php`— la coge la
   jerarquía sin que el editor sepa nada, así que el body sigue diciendo
   `page-template-default`. El identificador no cambia nunca; el slug sí podría.

   SIN ESTE BLOQUE la página sale metida en una columna de 900px con franjas
   grises a los lados, y con franjas blancas arriba y bajo el pie por el
   relleno de 40px (30 en móvil) que GeneratePress da a #content. Ha pasado
   tres veces en esta migración.
   -------------------------------------------------------------------------- */
body.page-id-18007 #page,
body.page-id-18007 .site.grid-container {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

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

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

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

/* --------------------------------------------------------------------------
   1 · LOS COLORES Y LAS MEDIDAS DEL GUION
   -------------------------------------------------------------------------- */
body.page-id-18007 {
  /* Fondos y textos, todos del guion */
  --jrv-wa-hondo:     #004361; /* el azul de la página: cabecera, títulos, bandas */
  --jrv-wa-limon:     #fff59d; /* las dos secciones del resultado */
  --jrv-wa-cielo:     #2980b9; /* la línea fuerte del titular (pieza 25) */
  --jrv-wa-humo:      #F6F6F6; /* fondo de las tres tarjetas de caso */
  --jrv-wa-niebla:    #f8f8f8; /* fondo de la cita */
  --jrv-wa-teja:      #922100; /* el nombre de la autora de la cita */
  --jrv-wa-plomo:     #828282; /* «Este es tu link de WhatSapp» */
  --jrv-wa-ceniza:    #7a7a7a; /* «Tendrás acceso a los 3 videos…» */
  --jrv-wa-grafito:   #54595f; /* el crédito del pie */
  --jrv-wa-negro:     #000000;

  /* La caja del enlace: valores del <style> que traía el widget html original */
  --jrv-wa-filo:      #dadcde;
  --jrv-wa-texto-caja:#676767;
  --jrv-wa-tapa:      rgb(41 123 241 / 88%);
  --jrv-wa-tapa-ok:   rgb(66 183 42 / 88%);

  /* Medidas */
  --jrv-wa-ancho-corto: 500px; /* «ancho 500px» de la sección del resultado */
  --jrv-wa-aire:         40px; /* «relleno 40px», el de casi todas las secciones */
}

/* TODO LO DE ESTA PÁGINA EN BORDER-BOX, y no una lista de selectores.
   El tema hereda content-box, así que en cuanto un elemento junta `width:100%` con
   relleno, el relleno se suma ENCIMA y el elemento sobresale de su padre. Es la
   trampa del protocolo que hizo que una sección midiera 850px donde producción
   medía 650.

   AQUÍ HABÍA UNA LISTA DE SIETE SELECTORES Y SE QUEDABA CORTA: medido en pantalla,
   el botón de copiar salía de 530x95 y su caja de 532px, las dos dentro de un hueco
   de 500px, porque ninguna de las dos estaba en la lista. En un móvil de 360px eso
   es desplazamiento horizontal. Una regla que las cubre todas no se puede quedar
   corta, y está limitada a esta página, así que no toca nada del resto del sitio. */
body.page-id-18007 *,
body.page-id-18007 *::before,
body.page-id-18007 *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2 · LAS LISTAS · piezas 3/5, 6, 9 y 30
   --------------------------------------------------------------------------
   Los `icon-list` de Elementor traen su icono de una FUENTE DE ICONOS, que es
   justo lo que este encargo está quitando (443 KB para unos pocos glifos). El
   punto se dibuja con `::before` y un carácter del sistema: no descarga nada y
   no añade texto real al documento.

   Las listas de un solo punto (piezas 3/5 y 6) son rótulos, no enumeraciones,
   así que van sin marca: `--limpia`.
   -------------------------------------------------------------------------- */
.jrv-wa-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jrv-wa-lista > li {
  position: relative;
  padding-inline-start: 1.75em;
}

.jrv-wa-lista > li + li { margin-block-start: .75em; }

.jrv-wa-lista > li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--jrv-wa-hondo);
  font-weight: 700;
  line-height: inherit;
}

.jrv-wa-lista--limpia > li { padding-inline-start: 0; }
.jrv-wa-lista--limpia > li::before { content: none; }

/* --------------------------------------------------------------------------
   3 · CABECERA PROPIA · pieza 1
   --------------------------------------------------------------------------
   Fondo #004361 y el logotipo al 30%, como dice el guion. El logotipo es el
   SVG BLANCO: si algún día se cambia el fondo de esta banda hay que mirar
   antes el color del archivo, porque el blanco sobre blanco ya dejó un
   logotipo invisible en este mismo sitio.
   -------------------------------------------------------------------------- */
.jrv-wa-cabecera {
  padding-block: 20px;
  padding-inline: 20px;
  background-color: var(--jrv-wa-hondo);
  text-align: center;
}

.jrv-wa-cabecera__logo {
  display: inline-block;
  width: 30%;
  min-width: 160px;
  max-width: 320px;
  height: auto;
}

/* --------------------------------------------------------------------------
   4 · TÍTULO DE LA PÁGINA · piezas 2-3 / 4-5
   -------------------------------------------------------------------------- */
.jrv-wa-titulo { padding-block: var(--jrv-wa-aire); }

.jrv-wa-titulo__texto {
  margin: 0;
  color: var(--jrv-wa-hondo);
  text-align: center;
}

.jrv-wa-titulo__rotulo {
  margin-block-start: .5em;
  color: var(--jrv-wa-hondo);
  text-align: center;
}

/* --------------------------------------------------------------------------
   5 · LA HERRAMIENTA · piezas 6-17
   --------------------------------------------------------------------------
   «estructura 20» = dos columnas al 50%. Se apilan por debajo de 768px, que es
   el corte del guion, y en el orden del DOM: primero el vídeo y el argumento,
   después los campos.
   -------------------------------------------------------------------------- */
.jrv-wa-creador { padding-block: var(--jrv-wa-aire); }

.jrv-wa-creador__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

@media (min-width: 768px) {
  .jrv-wa-creador__rejilla {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.jrv-wa-creador__pie-video {
  margin-block-end: .75em;
  color: var(--jrv-wa-negro);
  font-weight: 600;
  text-align: center;
}

.jrv-wa-creador__video { margin-block-end: 1.5em; }

.jrv-wa-creador__titulo {
  margin: 0 0 .75em;
  color: var(--jrv-wa-negro);
  text-align: left;
}

.jrv-wa-creador__texto {
  margin-block: 1em 0;
  color: var(--jrv-wa-negro);
  text-align: left;
}

.jrv-wa-creador__reclamo {
  margin: 0 0 1em;
  color: var(--jrv-wa-hondo);
}

/* --- La caja de los dos campos ------------------------------------------- */
.jrv-wa-caja {
  padding: 24px;
  border: 1px solid var(--jrv-p-cerco, #E6E7ED);
  border-radius: var(--jrv-p-radio, 14px);
  background-color: var(--jrv-p-nube, #F5F7FB);
}

.jrv-wa-caja__paso {
  margin: 0 0 .75em;
  color: var(--jrv-wa-negro);
  text-align: center;
}

/* PIEZA 15 · el `divider`. No es un elemento: es esta línea, y el aire de
   arriba y abajo que la separa de los dos pasos. */
.jrv-wa-caja__linea {
  margin-block-start: 28px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--jrv-p-hielo, #A1C7FF);
}

/* --- Un campo ------------------------------------------------------------
   Las clases del original eran las de Gravity Forms (gfield_label,
   ginput_container, gfield_description) y su hoja ya no se carga: el aspecto
   lo pone este bloque. */
.jrv-wa-campo { text-align: center; }

.jrv-wa-campo__rotulo {
  display: block;
  margin-block-end: .5em;
  color: var(--jrv-wa-negro);
  font-weight: 600;
}

.jrv-wa-campo__obligatorio {
  margin-inline-start: .25em;
  color: var(--jrv-p-rojo, #C23616);
}

.jrv-wa-campo__control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--jrv-wa-filo);
  border-radius: 2px;
  background-color: #fff;
  color: var(--jrv-wa-texto-caja);
  font-family: inherit;
  font-size: 1rem;   /* relativo: 1rem = los 16px del cuerpo de la marca */
  line-height: 1.4;
}

.jrv-wa-campo__control:focus-visible {
  outline: 3px solid var(--jrv-p-cielo, #0077C4);
  outline-offset: 2px;
}

.jrv-wa-campo__nota {
  margin-block: .75em 0;
  color: var(--jrv-wa-negro);
  text-align: left;
}

/* --------------------------------------------------------------------------
   6 · «Y el resultado sale aquí...» · pieza 18
   -------------------------------------------------------------------------- */
.jrv-wa-resultado-titulo {
  padding-block: var(--jrv-wa-aire);
  background-color: var(--jrv-wa-limon);
}

.jrv-wa-resultado-titulo__texto { color: var(--jrv-wa-hondo); }

/* --------------------------------------------------------------------------
   7 · EL ENLACE · piezas 19-21
   --------------------------------------------------------------------------
   «fondo #fff59d · relleno 20px · ancho 500px». Son dos secciones distintas en
   el guion —esta y la de arriba— y se conservan las dos, porque cada una trae
   su propio relleno.
   -------------------------------------------------------------------------- */
.jrv-wa-resultado {
  padding-block: 20px;
  background-color: var(--jrv-wa-limon);
}

.jrv-wa-resultado__interior {
  width: 100%;
  max-width: var(--jrv-wa-ancho-corto);
  margin-inline: auto;
}

.jrv-wa-resultado__rotulo {
  margin: 0 0 .75em;
  color: var(--jrv-wa-plomo);
  text-align: center;
}

.jrv-wa-resultado__nota {
  margin-block: 1em 0;
  text-align: center;
}

/* --- LA CAJA DE COPIAR ---------------------------------------------------
   Los valores son los del `<style>` del widget html original: borde #dadcde,
   radio 2px, alto mínimo 65px, relleno 15px, texto #676767, centrado y con
   `overflow-wrap: break-word` (el enlace es una sola palabra larguísima y sin
   esto desborda la caja). El azul y el verde también son los suyos.

   EL BOTÓN ES UN <button> DE VERDAD. En el original era un <div> con un
   `click` de jQuery: no se podía usar con el teclado. Aquí se ve al pasar el
   ratón por la caja —como antes— y ADEMÁS cuando recibe el foco. No se usa
   `display:none` para esconderlo justamente por eso: un elemento en
   `display:none` no puede recibir el foco, así que se esconde con `opacity` y
   se le quitan los eventos de ratón, para que mientras no se pase por encima
   el enlace se pueda seleccionar con el ratón como cualquier texto.
   ------------------------------------------------------------------------- */
.jrv-wa-copia { position: relative; }

/* El espejo del enlace, para la copia de reserva. Invisible pero NO
   `display:none`: `execCommand('copy')` no puede seleccionar lo que no se
   pinta. Es el mismo truco del original (`.hiddene { opacity:0; position:absolute }`). */
.jrv-wa-copia__espejo {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  pointer-events: none;
}

/* `box-sizing: border-box` NO ES DECORACIÓN AQUÍ (arreglo 3 del protocolo). Este tema
   hereda content-box —ni componentes.css ni style.css declaran box-sizing en ningún
   sitio, comprobado—, así que sin esta línea la caja hace dos cosas mal a la vez:
   el alto sale 65 + 30 de relleno + 2 de borde = 97px en vez de 65, y el `width: 100%`
   se convierte en 100% + 32px, o sea que la caja SE SALE de su contenedor y rompe la
   comprobación `document.scrollWidth === window.innerWidth` del protocolo. */
.jrv-wa-copia__caja {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 65px;
  padding: 15px;
  border: 1px solid var(--jrv-wa-filo);
  border-radius: 2px;
  background: #fff;
  color: var(--jrv-wa-texto-caja);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  overflow-wrap: break-word;
}

.jrv-wa-copia__enlace { display: block; }

.jrv-wa-copia__tapa {
  position: absolute;
  inset: 0;
  /* BORDER-BOX Y SIN width/height: LOS 100% DEL ORIGINAL SOBRABAN Y DESBORDABAN.
     El original traía `width:100%; height:100%` junto al posicionamiento absoluto.
     Con `inset:0` el botón ya ocupa exactamente la caja, así que ese 100% es
     redundante; y como el tema hereda content-box, se le sumaban encima los 14px de
     relleno de cada lado: medido en pantalla, el botón salía de 530x95 dentro de una
     caja de 500x65. Sobresalía 28px por la derecha, que en un móvil de 360px es
     barra de desplazamiento horizontal. Medido, no supuesto. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: 14px;
  border: 0;
  background-color: var(--jrv-wa-tapa);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, background-color .15s ease;
}

/* SE REVELA CON `:focus` Y ADEMÁS CON `:focus-visible`, y no solo con el segundo.
   `:focus-visible` lo decide una heurística del navegador sobre si la última
   interacción fue de teclado; si no acierta, quien navegue con el tabulador llega
   al botón y NO LO VE, que es exactamente el fallo que se quería arreglar. Con
   `:focus` la aparición está garantizada en todos los navegadores. Lo único que se
   paga es que la tapa sigue visible tras hacer clic mientras el botón conserve el
   foco, y ahí justamente es donde se está leyendo «Copiado al portapapeles!». */
.jrv-wa-copia__caja:hover .jrv-wa-copia__tapa,
.jrv-wa-copia__tapa:focus,
.jrv-wa-copia__tapa:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.jrv-wa-copia__tapa:focus-visible {
  outline: 3px solid var(--jrv-wa-hondo);
  outline-offset: 2px;
}

/* El estado «copiado»: verde y con la marca de comprobación, como el original. */
.jrv-wa-copia__tapa.esta-copiado { background-color: var(--jrv-wa-tapa-ok); }

.jrv-wa-copia__icono { flex: none; }

.jrv-wa-copia__icono--hecho { display: none; }

.jrv-wa-copia__tapa.esta-copiado .jrv-wa-copia__icono--copiar { display: none; }
.jrv-wa-copia__tapa.esta-copiado .jrv-wa-copia__icono--hecho  { display: block; }

/* --------------------------------------------------------------------------
   8 · «Por cierto, ¿ya conoces mi...?» · pieza 22
   -------------------------------------------------------------------------- */
.jrv-wa-puente {
  padding-block: var(--jrv-wa-aire);
  background-color: #fff;
}

.jrv-wa-puente__texto {
  margin: 0;
  color: var(--jrv-wa-hondo);
}

/* --------------------------------------------------------------------------
   9 · LA BANDA ROJA · pieza 23
   --------------------------------------------------------------------------
   «relleno 5px»: banda fina. Por eso no usa `.jrv-seccion` (que impone 60px)
   ni el titular grande de sección: con el clamp de 44px la banda se volvía un
   bloque de cuatro dedos de alto donde el original tiene una línea.
   -------------------------------------------------------------------------- */
.jrv-wa-banda {
  padding-block: 5px;
  padding-inline: 20px;
  background-color: var(--jrv-p-rojo, #C23616);
}

.jrv-wa-banda__texto {
  margin: 0;
  color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10 · EL TITULAR DEL ENTRENAMIENTO · piezas 24-27
   --------------------------------------------------------------------------
   Un solo <h3> con tres <span> de bloque, uno por línea y por color. El
   tamaño va en `clamp` con unidades relativas: la línea del medio es la que
   el original destaca.
   -------------------------------------------------------------------------- */
.jrv-wa-lp { padding-block: var(--jrv-wa-aire); }

.jrv-wa-lp__titular {
  margin: 0;
  text-align: center;
}

.jrv-wa-lp__linea {
  display: block;
  color: var(--jrv-wa-negro);
  font-size: clamp(1.25rem, .9rem + 1.4vw, 2rem);
  line-height: 1.2;
}

.jrv-wa-lp__linea--fuerte {
  color: var(--jrv-wa-cielo);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
  font-weight: 700;
}

/* PIEZA 27 · LA TRAMPA DE COLOR DE ESTA PÁGINA.
   El guion la da en `color=#ffffff` y su sección padre NO TRAE FONDO: blanco
   sobre blanco, o sea texto invisible. Es un texto de los que posicionan, así
   que no se puede perder ni dejar ilegible. Se le pone al bloque el azul de la
   página, que es el color dominante. El dueño ya dijo que le da igual que un
   rótulo quede azul, morado o gris; lo que no vale es que no se lea.
   Las columnas de 10% y 9,998% que lo rodean en el guion están vacías: son
   aire, y se resuelven con el ancho máximo, no con dos <div> vacíos. */
.jrv-wa-lp__reclamo {
  width: 100%;
  max-width: 80%;
  margin: 1.5em auto 0;
  padding: 16px 20px;
  box-sizing: border-box;
  border-radius: var(--jrv-p-radio, 14px);
  background-color: var(--jrv-wa-hondo);
  color: #fff;
  font-size: clamp(1.0625rem, .95rem + .6vw, 1.5rem);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11 · VÍDEO Y PUNTOS · piezas 28-32
   --------------------------------------------------------------------------
   «estructura 20» con 65% y 35%, y «margen sup 20px». La pieza 32 es un
   `spacer` de 20px: es el relleno de abajo de la columna lateral, no un
   elemento.
   -------------------------------------------------------------------------- */
.jrv-wa-oferta {
  margin-block-start: 20px;
  padding-inline: 20px;
}

.jrv-wa-oferta__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 768px) {
  .jrv-wa-oferta__rejilla {
    grid-template-columns: 65fr 35fr;
    align-items: start;
  }
}

.jrv-wa-oferta__pie {
  margin-block: 1em 0;
  color: var(--jrv-wa-ceniza);
  text-align: center;
}

/* El `spacer` de 20px de la pieza 32. */
.jrv-wa-oferta__lateral { padding-block-end: 20px; }

/* --------------------------------------------------------------------------
   12 · «UN Entrenamiento GRATUITO EN 3 VIDEOS» · pieza 33
   -------------------------------------------------------------------------- */
.jrv-wa-tres { background-color: var(--jrv-wa-hondo); }

/* --------------------------------------------------------------------------
   13 · LAS TRES FICHAS · piezas 34-41
   --------------------------------------------------------------------------
   «estructura 30» = tres columnas al 33%, fondo #004361, relleno 20px.
   Las piezas 36 y 39 son `spacer` SOLO MÓVIL entre ficha y ficha: los resuelve
   el `gap`, que en móvil ya separa las tres. No se pintan como elementos.
   -------------------------------------------------------------------------- */
.jrv-wa-fichas {
  padding-block: 20px;
  padding-inline: 20px;
  background-color: var(--jrv-wa-hondo);
}

.jrv-wa-fichas__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

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

.jrv-wa-ficha__medio { margin-block-end: 1em; }

.jrv-wa-ficha__titulo {
  margin: 0;
  color: #fff;
  text-align: center;
}

.jrv-wa-ficha__numero {
  display: block;
  margin-block-end: .35em;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.jrv-wa-ficha__texto {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   14 · «CASOS DE ÉXITO» · pieza 42
   -------------------------------------------------------------------------- */
.jrv-wa-casos-titulo {
  padding-block: var(--jrv-wa-aire);
  background-color: #fff;
}

.jrv-wa-casos-titulo__texto { color: var(--jrv-wa-hondo); }

/* --------------------------------------------------------------------------
   15 · LOS TRES CASOS · piezas 43-51
   --------------------------------------------------------------------------
   Tres tarjetas «estructura 20» con fondo #F6F6F6 y relleno 30px. El «margen
   sup 40px» de la segunda y la tercera es el `gap` de la pila.

   EL SEGUNDO CASO VA AL REVÉS EN EL GUION: primero el texto, después el
   vídeo. El DOM conserva ese orden —así en móvil se apila como el original y
   el texto mantiene su sitio para Google— y el vídeo se manda a la derecha
   con `order` solo desde 768px.
   -------------------------------------------------------------------------- */
.jrv-wa-casos {
  padding-block: 20px;
  background-color: #fff;
}

.jrv-wa-casos__pila {
  display: grid;
  gap: 40px;
}

.jrv-wa-caso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 30px;
  background-color: var(--jrv-wa-humo);
}

@media (min-width: 768px) {
  .jrv-wa-caso {
    grid-template-columns: 60fr 40fr;
    align-items: center;
  }
  /* El caso invertido: 40% de texto a la izquierda y 60% de vídeo a la
     derecha, sin cambiar el orden del documento. */
  .jrv-wa-caso--invertido { grid-template-columns: 40fr 60fr; }
}

.jrv-wa-caso__titulo {
  margin: 0 0 .6em;
  color: var(--jrv-wa-negro);
  text-align: left;
}

.jrv-wa-caso__cuerpo {
  margin: 0;
  color: var(--jrv-wa-negro);
  text-align: left;
}

/* --------------------------------------------------------------------------
   16 · LOS TRES TESTIMONIOS EN IMAGEN · piezas 52-54
   -------------------------------------------------------------------------- */
.jrv-wa-testimonios {
  padding-inline: 20px;
  background-color: #fff;
}

/* 675px, QUE ES EL ANCHO CON EL QUE LOS PINTA LA PÁGINA PUBLICADA (medido en el
   `width` de sus <img> en el HTML de producción, no estimado). Sin este tope,
   `.jrv-media img { width: 100% }` los estiraba a los 1100px del contenedor: son
   archivos de 716, 831 y 799px de ancho, así que salían ampliados y borrosos. Y
   como el texto de estos tres testimonios va DENTRO del PNG, borroso significa
   ilegible. */
.jrv-wa-testimonios__pieza {
  max-width: 675px;
  margin-inline: auto;
}

.jrv-wa-testimonios__pieza + .jrv-wa-testimonios__pieza { margin-block-start: 20px; }

/* --------------------------------------------------------------------------
   17 · LA CITA · piezas 55-57
   --------------------------------------------------------------------------
   Las columnas de 16% de los lados están vacías: son aire, y se resuelven con
   el ancho máximo (66% del contenedor), no con dos <div> vacíos.
   -------------------------------------------------------------------------- */
.jrv-wa-cita { background-color: var(--jrv-wa-niebla); }

/* 66% del CONTENEDOR (1100px), o sea 726px, y NO `max-width: 66%`.
   Este elemento lleva también `.jrv-contenedor`, así que un porcentaje se
   resolvería contra la SECCIÓN —que va a sangre— y no contra los 1100px: en una
   pantalla de 2000px el 66% habría dado 1.300px y la cita habría salido MÁS ANCHA
   que el contenedor del resto de la página. */
.jrv-wa-cita__interior {
  max-width: 726px;
}

.jrv-wa-cita__bloque {
  margin: 0;
  padding: 0;
  border: 0;
}

.jrv-wa-cita__texto {
  margin: 0;
  color: var(--jrv-wa-negro);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.75rem);
  line-height: 1.35;
  text-align: center;
}

.jrv-wa-cita__autor {
  margin-block: 1em 0;
  color: var(--jrv-wa-teja);
  font-weight: 600;
  text-align: right;
}

.jrv-wa-cita__cargo {
  margin-block: .15em 0;
  color: var(--jrv-wa-negro);
  text-align: right;
}

/* --------------------------------------------------------------------------
   18 · EL CIERRE · piezas 58-63
   --------------------------------------------------------------------------
   «estructura 33»: 28,036% / 43,928% / 28,036%.

   FALTA EL BOTÓN (pieza 61, «SIN ENLACE», decisión del dueño), así que la
   columna del centro se queda solo con la flecha naranja de móvil y las dos
   flechas negras de escritorio apuntan a un hueco vacío. Está anotado: en
   cuanto el dueño dé el destino, el botón entra aquí con `.jrv-cta
   .jrv-cta--amarillo` de componentes.css y todo vuelve a tener sentido.
   -------------------------------------------------------------------------- */
.jrv-wa-cierre { background-color: var(--jrv-wa-hondo); }

.jrv-wa-cierre__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  justify-items: center;
  margin-block-start: 1.5em;
}

@media (min-width: 768px) {
  .jrv-wa-cierre__rejilla {
    grid-template-columns: 28.036fr 43.928fr 28.036fr;
  }
}

/* LAS FLECHAS, A SU TAMAÑO REAL Y CENTRADAS. Los archivos miden 215px las dos
   negras y 275px la naranja (medido en producción). Con `width: 100%` a secas se
   estiraban hasta los 300px de su columna, y una flecha dibujada a mano ampliada se
   ve pixelada. */
.jrv-wa-cierre__flecha {
  width: 100%;
  margin-inline: auto;
}

.jrv-wa-cierre__flecha.jrv-solo-ancha { max-width: 215px; }
.jrv-wa-cierre__flecha.jrv-solo-movil { max-width: 275px; }

.jrv-wa-cierre__centro {
  width: 100%;
  text-align: center;
}

.jrv-wa-cierre__pie {
  margin-block: 1.5em 0;
  color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------------------
   19 · PIE PROPIO · piezas 64-66
   --------------------------------------------------------------------------
   «margen sup 40px». El guion no le da fondo, así que queda el blanco de la
   página.
   -------------------------------------------------------------------------- */
.jrv-wa-pie {
  margin-block-start: var(--jrv-wa-aire);
  padding-inline: 20px;
  padding-block-end: var(--jrv-wa-aire);
}

.jrv-wa-pie__interior { text-align: center; }

/* 150px: el tamaño exacto con el que la página publicada pinta este retrato
   (width="150" height="150" en su <img>). Sin el tope, `.jrv-media img
   { width: 100% }` lo estiraba de 150 a 1100px: un retrato de 17 KB ocupando todo
   el ancho del pie y completamente desenfocado. */
.jrv-wa-pie__firma {
  max-width: 150px;
  margin-inline: auto;
}

.jrv-wa-pie__logo {
  display: inline-block;
  width: 35%;
  min-width: 160px;
  max-width: 340px;
  height: auto;
  margin-block-start: 20px;
}

.jrv-wa-pie__credito {
  margin-block: 1em 0;
  color: var(--jrv-wa-grafito);
  text-align: center;
}

/* --------------------------------------------------------------------------
   20 · MÓVIL
   --------------------------------------------------------------------------
   Solo lo que de verdad cambia por debajo de 768px. El resto ya es de una
   columna por omisión: esta hoja está escrita de móvil hacia arriba, así que
   no hay que deshacer nada.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .jrv-wa-caja { padding: 18px; }

  /* El reclamo de la pieza 27 a ancho completo: con 80% en una pantalla de
     360px se quedaba en una columna de texto muy estrecha. */
  .jrv-wa-lp__reclamo { max-width: 100%; }

  .jrv-wa-caso { padding: 20px; }
}