/* ==========================================================================
   COMPONENTES COMPARTIDOS DE LAS PÁGINAS NATIVAS
   ==========================================================================
   De aquí salen todas las páginas que sustituyen a Elementor. Se extrajo de
   portada.css el 11 de agosto de 2026, cuando quedaban 26 páginas por convertir:
   dejarlo dentro de la portada habría significado 26 copias del mismo botón, del
   mismo contenedor y del mismo título de sección, y 26 sitios donde cambiar un
   color.

   MEDIDO SOBRE LAS 27 PÁGINAS: 2.307 piezas visibles de Elementor, y ONCE tipos
   cubren el 97% — heading e image solos son el 73%. Por eso este archivo es
   pequeño y no crece: lo que cambia de una página a otra es la composición, no
   las piezas.

   QUÉ VA AQUÍ Y QUÉ NO
     · Aquí: lo que usan DOS o más páginas.
     · En el CSS de cada página: lo que solo usa ella.
   Si algo de aquí se toca, se comprueba en todas las páginas que lo usan. La
   lista está en 03_plan/protocolo-conversion-elementor.md.

   AVISO QUE YA COSTÓ UN SUSTO: style.css declara en :root --jrv-azul,
   --jrv-azul-vivo, --jrv-amarillo, --jrv-tinta, --jrv-suave y --jrv-linea con
   OTROS valores, los del blog; y la clase .jrv-boton también existe ahí. Los
   nombres de este archivo llevan el prefijo --jrv-p- y el botón se llama
   .jrv-cta justamente para no pisarlos.
   ========================================================================== */

:root {
  /* --- Del guion ---------------------------------------------------- */
  --jrv-p-hondo:    #004A8F; /* arranque de los dos degradados */
  --jrv-p-cielo:    #0077C4; /* azul de acento y cierre del degradado */
  --jrv-p-marino:   #00325C; /* titulares de sección, banda del blog, pie */
  --jrv-p-acero:    #46648D; /* sin uso en las 14 páginas de la tanda (comprobado por
                                grep el 11-08-2026). Se deja porque está en el guion:
                                antes de borrarla, volver a comprobar */
  --jrv-p-celeste:  #95CAE3; /* fondo de la sección de testimonios */
  --jrv-p-hielo:    #A1C7FF; /* líneas divisorias claras */
  --jrv-p-verde:    #00BB2D; /* verde de la guía de WhatsApp (78833): el acento y el
                                fondo del cierre, en pagina-guias.css. NO BORRAR: decía
                                «no se usa» y era falso; borrarla tumba esa página */
  --jrv-p-oro:      #FFFF00; /* fondo de los botones */
  --jrv-p-nube:     #F5F7FB; /* fondos claros */
  --jrv-p-carbon:   #1D2C33; /* texto corrido */
  --jrv-p-rojo:     #C23616; /* pastillas y «¡SON GRATUITOS!» */
  --jrv-p-gris:     #BEC0CB; /* la línea de la pieza 129 */

  /* --- Deducidos, NO están en el guion ------------------------------ */
  --jrv-p-blanco:     #FFFFFF;
  --jrv-p-cerco:      #E6E7ED; /* línea dentro de los testimonios */
  --jrv-p-estrella:   #F5A623; /* color de las estrellas */

  /* --- Comprobados en la hoja publicada (post-81494.css) ------------
     Estos NO son deducciones: se han leído de la hoja que Elementor genera
     para esta misma página, así que son los colores que la web tiene hoy. */
  --jrv-p-oro-filo:   #EFC800; /* borde del botón amarillo */
  --jrv-p-oro-luz:    #FBF424; /* el botón amarillo al pasar el ratón */
  --jrv-p-oro-texto:  #FBE127; /* amarillo TEXTO sobre azul, y el galón del entrenamiento */
  --jrv-p-rosa:       #E32762; /* la franja del reclamo del entrenamiento (pieza 41) */
  --jrv-p-plomo:      #868BA3; /* el rótulo de las tres cifras */
  --jrv-p-filo-claro: #E5ECF6; /* el borde de la tarjeta de «Hola, soy Jesús» */

  /* --- Medidas ------------------------------------------------------ */
  --jrv-p-ancho:       1100px; /* «ancho 1100px», el de casi todas */
  --jrv-p-ancho-medio:  800px; /* el muro de testimonios */
  --jrv-p-ancho-pie:    950px; /* «ancho 950px» del pie */
  --jrv-p-aire:          60px; /* «relleno 60px» */
  --jrv-p-radio:         14px;
  --jrv-p-radio-cta:    100px; /* el guion no da el radio del botón */

  /* Los dos altos de la cabecera. El hero usa la MISMA variable en su margen
     negativo, así que las dos medidas no pueden separarse. */
  --jrv-p-cabecera-alto:      100px;
  --jrv-p-cabecera-alto-fija:  70px;

  --jrv-p-tipo-titulos: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --jrv-p-tipo-botones: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   2 · BLOQUES COMPARTIDOS
   Los cinco traductores escribieron cinco copias de cada uno de estos. Aquí
   hay UNA, y todas las secciones la usan.
   ========================================================================== */

/* --- El contenedor -------------------------------------------------------
   La caja centrada de dentro de cada sección. Antes cada parte lo resolvía
   con `padding-inline: max(20px, calc((100% - 1100px)/2))` sobre la propia
   sección; ahora la sección lleva el fondo y el relleno, y esto lleva el
   ancho. El resultado en pantalla es el mismo y se lee de un golpe. */
.jrv-contenedor {
  width: 100%;
  max-width: var(--jrv-p-ancho);
  margin-inline: auto;
}
.jrv-contenedor--pie { max-width: var(--jrv-p-ancho-pie); }

/* --- La sección ----------------------------------------------------------
   Fondo a sangre y el aire vertical del guion. El fondo lo pone cada bloque. */
.jrv-seccion {
  padding-block: var(--jrv-p-aire);
  padding-inline: 20px;
}

/* --- El título de sección ------------------------------------------------
   Todos los <h2> de la portada.

   HAY DOS FAMILIAS DE TITULAR Y ANTES SE PINTABAN LAS DOS IGUAL. Comprobado en
   post-81494.css, la hoja que Elementor genera para esta página:

     LIGEROS (esta clase) · 60px y peso 400, línea 1em
       «Casos de Éxito» (móvil 40px), «He trabajado con» ×2 (32px),
       «Testimonios» (39px), «Hola, soy Jesús Rico Vargas» (32px),
       «Lo más reciente» (40px)

     FUERTE (el modificador --fuerte) · 32px y peso 800
       solo «¿Quién es Jesús Rico Vargas y por qué hace lo que hace?» (móvil 24px)

   Antes todo iba a peso 700 y con tope de 40px, así que los seis titulares
   ligeros salían en negrita y hasta un 33% más pequeños de lo publicado: es lo
   que más se nota al comparar una captura de la página entera. El clamp va de
   32px en móvil a 60px, que son los dos extremos reales. */
.jrv-seccion__titulo {
  margin: 0;
  color: var(--jrv-p-marino);
  font-family: var(--jrv-p-tipo-titulos);
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
}
/* El único titular pesado de la portada: los DIFERENCIADORES. */
.jrv-seccion__titulo--fuerte {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.1;
}
.jrv-seccion__titulo--cielo  { color: var(--jrv-p-cielo); }
.jrv-seccion__titulo--blanco { color: var(--jrv-p-blanco); }

/* --- Las utilidades de dispositivo ---------------------------------------
   Solo para las parejas en que el ARCHIVO de imagen cambia de verdad entre
   móvil y ancha y no se puede resolver con un solo elemento. El corte, 768px,
   es el que usa el guion. */
.jrv-solo-movil { display: block; }
.jrv-solo-ancha { display: none; }

@media (min-width: 768px) {
  .jrv-solo-movil { display: none; }
  .jrv-solo-ancha { display: block; }
}

/* --- Las imágenes --------------------------------------------------------
   Vale para <img> y para el <picture> con el que el plugin de imágenes
   modernas envuelve cada una. `display:block` quita el hueco de la línea
   base, que es lo que obliga al típico line-height:0 del padre. */
.jrv-media { margin: 0; line-height: 0; }
.jrv-media img,
.jrv-media picture {
  display: block;
  width: 100%;
  height: auto;
}

/* --- La proporción 16:9 de TODOS los vídeos ------------------------------
   Los catorce de la portada: doce de Vimeo y dos de YouTube.

   VA EN EL ENVOLTORIO, NO EN EL IFRAME, Y ESTE ES EL ÚNICO SITIO DONDE SE
   DECLARA. El «pulsa para ver» del plugin es un <button position:absolute;
   inset:0> y necesita un padre posicionado y con alto propio; si el
   aspect-ratio se le pone solo al iframe, el botón se descuelga y el vídeo
   sale deformado. Eso fue el fallo del intento anterior, en el que los vídeos
   salieron verticales y recortados. Si alguien copia el patrón viejo en otra
   plantilla, volverá a salir igual. */
/* ESQUINAS RECTAS. En el original los catorce vídeos no llevan border-radius
   ninguno (no hay una sola regla de radio en post-81494.css), y se había puesto
   14px: multiplicado por los 14 vídeos, se notaba. */
.jrv-video16 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0b1220;
}
.jrv-video16 iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* AQUÍ NO SE TOCA EL BOTÓN «pulsa para ver» DEL PLUGIN, Y ES A PROPÓSITO.
   jrv_video_diferido() devuelve DOS hermanos dentro de este envoltorio: el
   <button class="jrv-portada-video"> y el <iframe class="jrv-video-diferido">.
   El botón ya se coloca solo —position:absolute; inset:0— con el CSS en línea del
   plugin (videos-diferidos.php), que además lo pone display:flex para centrar el
   círculo de reproducir. Una regla `.jrv-video16 button { display:block }` aquí
   tendría más especificidad que la del plugin (0,1,1 contra 0,1,0), le ganaría, y
   el círculo se iría a la esquina de arriba a la izquierda en los catorce vídeos.
   El envoltorio solo tiene que ser el padre posicionado y con la proporción; del
   resto se encarga el plugin. */

/* --- El botón ------------------------------------------------------------
   Se llama .jrv-cta y NO .jrv-boton porque ese nombre ya existe en el
   style.css del tema hijo. Una geometría y tres colores; el color va siempre
   en un modificador, así que un .jrv-cta suelto no existe en el HTML.

   LA GEOMETRÍA Y EL COLOR SON LOS PUBLICADOS, ya no una estimación. En
   post-81494.css los botones traen, todos iguales:
     background #FFFF00 · borde 2px #EFC800 · radio 100px · Poppins 16px peso 500
     color #000000 · padding 18px 36px · box-shadow 0 0 10px -2px rgba(0,0,0,.15)
     y al pasar el ratón #FBF424
   En móvil bajan a 14px de letra y 14px/22px de relleno. Antes iban en peso 700, a
   17px y con el texto en MARINO en vez de negro: son ocho botones repartidos por
   toda la página, así que la diferencia se acumulaba. El radio ya coincidía. */
.jrv-cta {
  display: inline-block;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: var(--jrv-p-radio-cta);
  box-shadow: 0 0 10px -2px rgb(0 0 0 / 15%);
  font-family: var(--jrv-p-tipo-botones);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

@media (min-width: 768px) {
  .jrv-cta {
    padding: 18px 36px;
    font-size: 16px;
    line-height: 1.3;
  }
}
.jrv-cta:focus-visible {
  outline: 3px solid var(--jrv-p-cielo);
  outline-offset: 3px;
}

/* El texto va en NEGRO, que es lo que declara la hoja publicada (color:#000000).
   El guion solo daba el fondo (#FFFF00) y se había supuesto marino. */
.jrv-cta--amarillo {
  background-color: var(--jrv-p-oro);
  border-color: var(--jrv-p-oro-filo);
  color: #000;
}
.jrv-cta--amarillo:hover,
.jrv-cta--amarillo:focus-visible {
  background-color: var(--jrv-p-oro-luz);
  color: #000;
}

.jrv-cta--azul {
  background-color: var(--jrv-p-marino);
  color: var(--jrv-p-blanco);
}
.jrv-cta--azul:hover,
.jrv-cta--azul:focus-visible {
  background-color: var(--jrv-p-cielo);
  color: var(--jrv-p-blanco);
}

.jrv-cta--contorno {
  background-color: transparent;
  border-color: var(--jrv-p-marino);
  color: var(--jrv-p-marino);
}
.jrv-cta--contorno:hover,
.jrv-cta--contorno:focus-visible {
  background-color: var(--jrv-p-marino);
  color: var(--jrv-p-blanco);
}

/* ==========================================================================
   TIPOGRAFÍA: LA DE TU MARCA, NO UNA INVENTADA
   ==========================================================================
   Decisión del dueño (2026-08-11): la fidelidad al píxel con Elementor no es el
   objetivo — va a rediseñar la portada, el listado del blog y la plantilla de
   artículo en cuanto Elementor esté fuera. Lo que importa es salir de Elementor
   con el sitio coherente.

   Así que en vez de inventar una escala, las páginas nativas usan la que ya está
   configurada en GP Premium, que es su identidad de marca real y la que ve todo
   el blog:

     cuerpo      Montserrat 16px / 1.4        texto #3a3a3a
     h1          Roboto Slab 35px negrita
     h2          Montserrat 25px peso 300
     h3          20px
     enlaces     #1e73be (hover #000)

   Esto también arregla un desajuste que se vio en las guías: el título de sección
   compartido venía con los 60px medidos EN LA PORTADA, y en una página pequeña
   salía más grande que su propio h1. Ahora ninguna página nativa declara tamaños
   sueltos: heredan estos y solo los ajustan cuando el diseño lo pide de verdad.
   ========================================================================== */

.jrv-seccion h1,
.jrv-seccion h2,
.jrv-seccion h3,
.jrv-contenedor h1,
.jrv-contenedor h2,
.jrv-contenedor h3 {
  /* Se hereda del tema: sin font-size aquí, GeneratePress ya pone el de la marca. */
  line-height: 1.25;
  text-wrap: balance;
}

/* El título de sección compartido pasa a ser relativo, no un tamaño fijo: escala con
   el h2 de la marca y se queda entre 26 y 44px según el ancho de pantalla. */
.jrv-seccion__titulo {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
}