/* ==========================================================================
   /curso-express-facebook-instagram-ads-acelerado/ · identificador 79434
   ==========================================================================
   Lo propio de esta página. Los bloques compartidos —.jrv-contenedor, .jrv-seccion,
   .jrv-media, .jrv-video16, .jrv-cta y las utilidades de dispositivo— vienen de
   componentes.css, que se declara ANTES desde la propia plantilla (page-79434.php).

   ESTA PÁGINA NO TIENE LA PALETA DE LA PORTADA. Su azul es #004361, que no está en
   componentes.css y no es ninguno de los --jrv-p-*. Los seis colores del guion se
   declaran aquí abajo, con el prefijo --jrv-cx- (curso express) por dos razones:
   no pisan nada de style.css —donde --jrv-azul, --jrv-amarillo, --jrv-tinta,
   --jrv-suave y --jrv-linea ya existen con los valores del BLOG— y no toco
   componentes.css, que ahora mismo lo están usando otros trabajos en paralelo.

   TIPOGRAFÍA: la de la marca, heredada de GP Premium (cuerpo Montserrat 16/1.4,
   h1 Roboto Slab 35 negrita, h2 Montserrat 25 peso 300). Aquí NO se declara
   font-size salvo en cinco sitios donde el diseño lo pide de verdad, y siempre en
   unidades relativas. Los tamaños de Elementor no se persiguen: el dueño va a
   rediseñar y lo que importa es que el texto, las imágenes, los enlaces y el orden
   estén completos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · SOLTAR EL CONTENEDOR DEL TEMA · LO PRIMERO DE TODO
   --------------------------------------------------------------------------
   EL SELECTOR ES `page-id-79434` 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 nombre de archivo la aplica sin
   que el editor sepa nada, así que el body sigue diciendo `page-template-default`
   y un selector por plantilla no coincide con NADA.

   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.
   -------------------------------------------------------------------------- */

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

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

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

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

/* --------------------------------------------------------------------------
   1 · LOS COLORES DEL GUION, TAL CUAL
   --------------------------------------------------------------------------
   Ninguno se deduce: los seis salen del guion podado de las 66 piezas.
   -------------------------------------------------------------------------- */

body.page-id-79434 {
  --jrv-cx-hondo:   #004361; /* el azul de la página: cabecera, oferta, casos, cierre */
  --jrv-cx-oro:     #FFDD59; /* el <h1> sobre el azul */
  --jrv-cx-rojo:    #D64D5C; /* los tres botones «COMPRAR/COMPRA EN … $97 USD» */
  --jrv-cx-limon:   #FFF9C4; /* fondo de la sección del pago */
  --jrv-cx-pagar:   #fff200; /* fondo del botón de Hotmart (pieza 41) */
  --jrv-cx-humo:    #F6F6F6; /* fondo de las dos tarjetas de caso de éxito */
  --jrv-cx-linea:   #999999; /* la pieza 20, un divider */
  --jrv-cx-firma:   #54595f; /* la firma del pie (pieza 65) */
  --jrv-cx-negro:   #000000;
  --jrv-cx-blanco:  #FFFFFF;

  /* Los tres anchos de sección del guion, además del 1100px de .jrv-contenedor. */
  --jrv-cx-ancho-video:  900px;
  --jrv-cx-ancho-texto:  900px;
  --jrv-cx-ancho-modulo: 800px;
  --jrv-cx-ancho-pago:   600px;
}

/* Todas las secciones de esta página en border-box: el tema hereda content-box y el
   relleno se suma encima del alto (arreglo 3 del protocolo). */
body.page-id-79434 .jrv-seccion,
body.page-id-79434 .jrv-cx-cabecera,
body.page-id-79434 .jrv-cx-pie {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1 bis · LOS HIJOS DE LAS TRES REJILLAS, A `min-width: 0`
   --------------------------------------------------------------------------
   No es cosmético. Un hijo de grid tiene `min-width: auto`, o sea que no baja del
   ancho mínimo de su contenido: un vídeo de 1280px, una palabra larga o una imagen
   ancha empujan la columna y la página acaba con `document.scrollWidth` mayor que
   `window.innerWidth` — el desborde horizontal que comprueba la fase 3 del
   protocolo a 390, 768 y 1440. Con esto las tres rejillas (oferta, módulo y caso)
   se encogen de verdad.
   -------------------------------------------------------------------------- */

.jrv-cx-oferta__texto,
.jrv-cx-oferta__pack,
.jrv-cx-modulo__imagen,
.jrv-cx-modulo__texto,
.jrv-cx-caso__video,
.jrv-cx-caso__texto {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   2 · CABECERA PROPIA · pieza 1
   -------------------------------------------------------------------------- */

.jrv-cx-cabecera {
  padding: 20px;
  background-color: var(--jrv-cx-hondo);
  text-align: center;
}

/* El ancho va en el <figure>: componentes.css pone `width:100%` al <img>, así que
   sin acotar el padre el logotipo saldría a 1100px. */
.jrv-cx-cabecera__logo {
  width: 200px;
  max-width: 100%;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3 · EL GANCHO Y EL VÍDEO · piezas 2-3
   -------------------------------------------------------------------------- */

.jrv-cx-gancho {
  padding-block: 40px;                 /* «relleno 40px» */
  background-color: var(--jrv-cx-blanco);
}

/* Es un <p> y no un <h2> a propósito (ver la nota de la pieza 2 en page-79434.php): va
   antes del <h1> en el documento, así que en <h2> el esquema de encabezados de la página
   arrancaba en h2. Como <p> heredaría el cuerpo de 16px y este gancho es lo primero que
   se lee de la página, así que aquí SÍ el diseño pide tamaño: es el quinto y último
   `font-size` de la hoja, en unidades relativas como los otros cuatro. */
.jrv-cx-gancho__titulo {
  margin: 0;
  color: var(--jrv-cx-hondo);
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* «ancho 900px» de la sección interior del vídeo. */
.jrv-cx-gancho__video {
  max-width: var(--jrv-cx-ancho-video);
  margin: 30px auto 0;
}

/* --------------------------------------------------------------------------
   4 · LA OFERTA Y EL CIERRE · piezas 4-15 y 53-62
   --------------------------------------------------------------------------
   Las dos son la misma composición: «estructura 20 · fondo #004361 · relleno
   60px», columna de 60% con el texto y columna de 40% con el pack. Una sola
   clase para las dos, y el cierre solo añade el centrado.
   -------------------------------------------------------------------------- */

.jrv-cx-oferta {
  background-color: var(--jrv-cx-hondo);
  color: var(--jrv-cx-blanco);
}

.jrv-cx-oferta__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}

@media (min-width: 768px) {
  /* 60% / 40%, los porcentajes del guion. */
  .jrv-cx-oferta__rejilla { grid-template-columns: 3fr 2fr; gap: 40px; }
}

/* AQUÍ HABÍA UN `order: -1` PARA SUBIR EL PACK EN MÓVIL Y SE HA QUITADO. Elementor
   apila las columnas en el orden del documento, así que en la web publicada el texto
   va primero y el pack después también en móvil. Reordenar en CSS habría cambiado el
   orden del contenido, que es justo lo que no se toca. Se apila en orden del guion. */

.jrv-cx-oferta__texto { text-align: left; }
.jrv-cx-oferta__texto--centrado { text-align: center; }

/* El <h1> en #FFDD59 y alineado a la izquierda, como el guion. El tamaño lo pone
   GP Premium (Roboto Slab 35 negrita): no se declara aquí. */
.jrv-cx-oferta__titulo {
  margin: 0;
  color: var(--jrv-cx-oro);
}

.jrv-cx-oferta__entrada,
.jrv-cx-oferta__producto,
.jrv-cx-oferta__para,
.jrv-cx-ssl {
  color: var(--jrv-cx-blanco);
}

.jrv-cx-oferta__entrada { margin: 18px 0 0; }

/* EL ÚNICO TAMAÑO QUE SE DECLARA EN ESTE BLOQUE, y en unidades relativas: el
   nombre del producto es el rótulo grande del reclamo y sin esto se pierde entre
   las dos líneas de al lado. */
.jrv-cx-oferta__producto {
  margin: 6px 0 0;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}

.jrv-cx-oferta__para { margin: 6px 0 0; }

.jrv-cx-cierre__titulo {
  margin: 0;
  color: var(--jrv-cx-blanco);
  text-align: center;
}

/* Las cinco estrellas (piezas 8-9 y 55). En el cierre van centradas. */
.jrv-cx-estrellas {
  max-width: 220px;
  margin-block-start: 20px;
}
.jrv-cx-oferta__texto--centrado .jrv-cx-estrellas { margin-inline: auto; }

/* --- La lista de la pieza 10 ---------------------------------------------
   Un `icon-list` de Elementor. El palote es un carácter con ::before, NO una
   fuente de iconos: los 443 KB de fuentes de Elementor son justo lo que se está
   sacando del sitio, y volver a necesitarlas aquí sería tirar el trabajo. */
.jrv-cx-puntos {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.jrv-cx-puntos li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--jrv-cx-blanco);
}

.jrv-cx-puntos li + li { margin-block-start: 12px; }

.jrv-cx-puntos li::before {
  content: "\2713";                    /* ✓ */
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--jrv-cx-oro);
  font-weight: 700;
}

/* --- Los botones -------------------------------------------------------- */

.jrv-cx-accion { margin: 26px 0 0; }
.jrv-cx-oferta__texto--centrado .jrv-cx-accion { text-align: center; }

/* La geometría es la de .jrv-cta de componentes.css (relleno, radio, sombra,
   Poppins, foco visible); aquí solo van los colores del guion. */
.jrv-cx-comprar {
  background-color: var(--jrv-cx-rojo);
  border-color: var(--jrv-cx-rojo);
  color: var(--jrv-cx-blanco);
}

.jrv-cx-comprar:hover,
.jrv-cx-comprar:focus-visible {
  background-color: #C03F4E;           /* el mismo rojo, un 8% más oscuro */
  color: var(--jrv-cx-blanco);
}

/* Piezas 11 y 12 en un solo botón: la de escritorio llevaba `font-size:26px` en su
   <b> y la de móvil no. Es la única diferencia entre las dos, y se resuelve con
   esta regla en vez de con dos botones en el HTML. */
@media (min-width: 768px) {
  .jrv-cx-comprar b { font-size: 1.6em; }
}

/* ⚠️ ESTAS DOS REGLAS SON OBLIGATORIAS Y NO SON UN ADORNO.
   Los botones 56 y 57 llevan .jrv-solo-movil / .jrv-solo-ancha, y en
   componentes.css `.jrv-cta { display:inline-block }` se declara DESPUÉS de
   `.jrv-solo-movil { display:none }`: misma especificidad (0,1,0), gana el
   último, así que sin esto los DOS botones se verían a la vez en escritorio.
   Con la clase doble (0,1,0 → 0,2,0) el ocultado vuelve a ganar. El mismo choque
   afectaría a cualquier .jrv-cta con clase de dispositivo en otra página. */
@media (min-width: 768px) {
  .jrv-cta.jrv-solo-movil { display: none; }
}
@media (max-width: 767px) {
  .jrv-cta.jrv-solo-ancha { display: none; }
}

/* --- Los sellos de pago seguro ------------------------------------------ */

.jrv-cx-ssl { margin: 18px 0 0; }

.jrv-cx-sello         { max-width: 260px; margin-block-start: 12px; }
.jrv-cx-cierre__hotmart { max-width: 260px; margin-block-start: 20px; }
.jrv-cx-cierre__seguro  { max-width: 220px; margin-block-start: 16px; }

.jrv-cx-oferta__texto--centrado .jrv-cx-sello,
.jrv-cx-oferta__texto--centrado .jrv-cx-cierre__hotmart,
.jrv-cx-oferta__texto--centrado .jrv-cx-cierre__seguro {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5 · «PEGA PRIMERO» · piezas 16-19, y la línea de la pieza 20
   --------------------------------------------------------------------------
   «relleno 60px · ancho 900px». La pieza 20 es un `divider` de #999999 y sale
   como el borde inferior de este bloque, no como un elemento. Va aquí y no en la
   sección siguiente porque en el original la línea mide lo que la caja de 900px,
   no el ancho de la pantalla.
   -------------------------------------------------------------------------- */

.jrv-cx-relato { padding-block: 60px; }   /* «relleno 60px» */

.jrv-cx-relato__interior {
  max-width: var(--jrv-cx-ancho-texto);
  margin-inline: auto;
  padding-block-end: 40px;
  border-block-end: 1px solid var(--jrv-cx-linea);
  color: var(--jrv-cx-negro);
}

.jrv-cx-relato__titulo {
  margin: 0 0 20px;
  color: var(--jrv-cx-negro);
  text-align: left;
}

.jrv-cx-relato__interior p {
  margin: 0 0 1em;
  color: var(--jrv-cx-negro);
}

.jrv-cx-relato__interior p:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   6 · LOS CUATRO MÓDULOS · piezas 21-33
   -------------------------------------------------------------------------- */

/* EL GUION DICE «relleno 060px» EN ESTA SECCIÓN Y ESE VALOR NO EXISTE. Se lee como
   60px arriba y abajo, que es lo que traen todas las demás secciones de la página y
   lo que deja el título separado de la línea de la pieza 20. La otra lectura posible
   —0 arriba, 60 abajo— pegaría el título a la línea. Anotado para el repaso visual
   contra producción: es la única medida de la página que no sale limpia del guion. */
.jrv-cx-modulos { padding-block: 60px; }

.jrv-cx-modulos__titulo {
  margin: 0 0 30px;
  color: var(--jrv-cx-hondo);
  text-align: center;
}

/* «estructura 20 · relleno 20px · ancho 800px» de cada una de las cuatro. */
.jrv-cx-modulo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
  max-width: var(--jrv-cx-ancho-modulo);
  margin-inline: auto;
  padding: 20px;
}

@media (min-width: 768px) {
  /* 40% / 60%, los porcentajes del guion. */
  .jrv-cx-modulo { grid-template-columns: 2fr 3fr; gap: 24px; }
}

.jrv-cx-modulo__rotulo {
  margin: 0;
  color: var(--jrv-cx-hondo);
  text-align: left;
}

.jrv-cx-modulo__que {
  margin: 8px 0 0;
  color: var(--jrv-cx-negro);
  text-align: left;
}

/* --------------------------------------------------------------------------
   7 · EL RECUENTO · piezas 34-36
   --------------------------------------------------------------------------
   El guion no da relleno ni fondo a esta sección: las de arriba y abajo ya traen
   sus 60px, así que aquí solo hace falta el aire de los propios textos.
   -------------------------------------------------------------------------- */

.jrv-cx-recuento { padding-block: 24px; }

.jrv-cx-recuento__cifras {
  margin: 0;
  color: var(--jrv-cx-negro);
  font-weight: 700;
  text-align: center;
}

.jrv-cx-recuento__titulo {
  margin: 16px 0 0;
  color: var(--jrv-cx-hondo);
  text-align: center;
}

/* --------------------------------------------------------------------------
   8 · EL PAGO · piezas 37-44 · destino de los cuatro botones
   --------------------------------------------------------------------------
   «fondo #FFF9C4 · relleno 60px · ancho 600px». La pieza 37 es el `menu-anchor`:
   es el id de esta sección, no un elemento.
   -------------------------------------------------------------------------- */

.jrv-cx-pago {
  background-color: var(--jrv-cx-limon);
  /* Al llegar por #pagar-curso, que el título no quede pegado al filo. */
  scroll-margin-top: 20px;
}

.jrv-cx-pago__interior {
  max-width: var(--jrv-cx-ancho-pago);
  /* «margen sup 20px» de la sección interior del guion. */
  margin: 20px auto 0;
  color: var(--jrv-cx-negro);
  text-align: center;
}

.jrv-cx-pago__titulo {
  margin: 0;
  color: var(--jrv-cx-negro);
  text-align: center;
}

.jrv-cx-pago__entrada,
.jrv-cx-pago__aviso {
  margin: 14px 0 0;
  color: var(--jrv-cx-negro);
}

.jrv-cx-pago__hotmart { max-width: 200px; margin: 20px auto 0; }
.jrv-cx-pago__medios  { max-width: 100%;  margin: 18px auto 0; }
.jrv-cx-pago__sello   { max-width: 220px; margin: 20px auto 0; }

.jrv-cx-pago .jrv-cx-accion { text-align: center; }

/* El botón de Hotmart. Geometría de .jrv-cta; el fondo es el #fff200 del guion, que
   NO es el --jrv-p-oro (#FFFF00) de componentes.css: por dos puntos de diferencia
   no se reutiliza el modificador, se pone el color que dice el guion. */
.jrv-cx-pagar {
  background-color: var(--jrv-cx-pagar);
  border-color: #E6DA00;
  color: var(--jrv-cx-negro);
}

.jrv-cx-pagar:hover,
.jrv-cx-pagar:focus-visible {
  background-color: #FFF95C;
  color: var(--jrv-cx-negro);
}

.jrv-cx-pagar b { font-size: 1.15em; }

/* --------------------------------------------------------------------------
   9 · LOS DOS CASOS DE ÉXITO · piezas 45-50
   -------------------------------------------------------------------------- */

.jrv-cx-casos {
  padding-block: 40px;                 /* «relleno 40px» de la primera */
  background-color: var(--jrv-cx-hondo);
}

/* La segunda sección no trae relleno en el guion; lo que trae la TARJETA es
   «margen sup 40px». Va como relleno superior de la SECCIÓN y no como margen del
   hijo: en el hijo se colapsa hacia fuera, el fondo azul no lo cubre y arrastra la
   sección entera (arreglo 4 del protocolo). */
.jrv-cx-casos--segundo { padding-block: 40px 0; }

/* «fondo #F6F6F6 · relleno 30px» de las dos tarjetas. */
.jrv-cx-caso {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  padding: 30px;
  background-color: var(--jrv-cx-humo);
}

@media (min-width: 768px) {
  /* Caso 1: vídeo 60% / texto 40%. */
  .jrv-cx-caso { grid-template-columns: 3fr 2fr; gap: 30px; }
  /* Caso 2: texto 40% / vídeo 60%, y en el HTML el texto va primero, que es el
     orden del guion. */
  .jrv-cx-caso--invertido { grid-template-columns: 2fr 3fr; }
}

.jrv-cx-caso__titulo {
  margin: 0 0 14px;
  color: var(--jrv-cx-negro);
  text-align: left;
}

.jrv-cx-caso__texto p {
  margin: 0;
  color: var(--jrv-cx-negro);
}

/* El texto del caso 2 va alineado a la derecha, como en el original. En móvil, con
   una sola columna, la alineación a la derecha se lee mal: vuelve a la izquierda. */
@media (min-width: 768px) {
  .jrv-cx-caso__texto--derecha,
  .jrv-cx-caso__texto--derecha .jrv-cx-caso__titulo { text-align: right; }
}

/* --------------------------------------------------------------------------
   10 · LOGOTIPOS DE CLIENTES · piezas 51-52
   -------------------------------------------------------------------------- */

.jrv-cx-logos { padding-block: 60px; }   /* «relleno 60px» */

.jrv-cx-logos__tira { width: 100%; }

/* --------------------------------------------------------------------------
   11 · PIE PROPIO · piezas 63-65
   --------------------------------------------------------------------------
   El «margen sup 40px» de la sección va como relleno superior del pie.
   -------------------------------------------------------------------------- */

.jrv-cx-pie {
  padding: 40px 20px 30px;
  text-align: center;
}

.jrv-cx-pie__retrato { max-width: 180px; margin-inline: auto; }
.jrv-cx-pie__logo    { max-width: 220px; margin: 20px auto 0; }

.jrv-cx-pie__firma {
  margin: 14px 0 0;
  color: var(--jrv-cx-firma);
  text-align: center;
}