/* ==========================================================================
   /curso-express-whatsapp/ · identificador 79472 · lo propio de esta página
   ==========================================================================
   Los bloques compartidos —contenedor, botón (.jrv-cta), .jrv-media, el vídeo
   16:9 y las utilidades de dispositivo— vienen de componentes.css, que se
   declara antes desde la propia plantilla. Aquí solo lo que usa esta página.

   NO SE DECLARA NI UN TAMAÑO DE LETRA EN PÍXELES. La tipografía la pone
   GP Premium (cuerpo Montserrat 16/1.4, h1 Roboto Slab 35 negrita, h2
   Montserrat 25 peso 300) y componentes.css la hereda. Donde el original tenía
   una jerarquía que significa algo de verdad —el nombre del curso a 46px contra
   el pie de entrada a 26px, o el precio a 26px dentro del botón— se usa `em`,
   que escala con lo que ponga la marca. Decisión del dueño del 11-08-2026: va a
   rediseñar, así que la fidelidad al píxel no es el objetivo; lo que no se
   negocia es el texto, las imágenes, los enlaces y el orden.

   LOS COLORES SÍ SON LOS DEL GUION, tal cual. Los de esta página no están en
   componentes.css porque no los usa ninguna otra: es la única con la paleta
   verde de WhatsApp.
   ========================================================================== */

/* LO PRIMERO DE TODO: SOLTAR EL CONTENEDOR DEL TEMA.
   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 en este proyecto.

   EL SELECTOR ES `page-id-79472` Y NUNCA `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 su nombre de archivo deja el
   body en `page-template-default`. El identificador además no cambia nunca; el
   slug sí podría. */
body.page-id-79472 #page,
body.page-id-79472 .site.grid-container {
  max-width: none;
  margin-inline: 0;
  width: 100%;
}

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

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

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

/* EL ENVOLTORIO <picture> DEL PLUGIN DE IMÁGENES MODERNAS, A BLOQUE.
   Cada <img> de la biblioteca sale envuelta en `<picture class="jrv-picture">`
   (servir-imagenes-modernas.php), y `<picture>` es INLINE de serie. La clase que
   pasa jrv_imagen_biblioteca() se queda en el <img> de dentro, así que un
   `margin-inline: auto` para centrar una imagen con ancho máximo no centraba
   nada: el que manda es el envoltorio, y al ser inline se iba al borde
   izquierdo. Con el envoltorio a bloque, el `auto` del <img> vuelve a valer.
   componentes.css ya hace lo mismo dentro de .jrv-media; aquí se extiende a las
   imágenes de esta página que no la llevan. Los SVG no se envuelven, así que el
   logotipo de la cabecera no se ve afectado. */
body.page-id-79472 .jrv-picture { display: block; }

/* --- La paleta de la página, medida en el _elementor_data ------------------
   Prefijo --jrv-cew- (Curso Express WhatsApp). No se reutiliza ninguno de los
   nombres del blog (--jrv-azul, --jrv-amarillo, --jrv-tinta, --jrv-suave,
   --jrv-linea) porque están declarados en style.css con OTROS valores y
   pisarlos cambiaría de color el blog entero. */
body.page-id-79472 {
  --jrv-cew-verde:    #075E54; /* el verde de WhatsApp: las dos ofertas y los módulos */
  --jrv-cew-azul:     #004361; /* la barra del logotipo y los títulos de sección */
  --jrv-cew-sol:      #FFDD59; /* el amarillo de «AGENTES INMOBILIARIOS» */
  --jrv-cew-comprar:  #D64D5C; /* los dos botones «COMPRAR EN - $97 USD» */
  --jrv-cew-hotmart:  #fff200; /* el botón «PAGAR $97 USD» */
  --jrv-cew-crema:    #FFF9C4; /* el fondo de la sección del pago */
  --jrv-cew-visto:    #61CE70; /* el icono verde del icon-list (pieza 10) */
  --jrv-cew-linea:    #999999; /* el divider de la pieza 20 */
  --jrv-cew-gris:     #54595f; /* el texto del pie */
  --jrv-cew-corazon:  rgb(228 59 44); /* el color exacto del icono del corazón */
  --jrv-cew-enlace:   #2980B9; /* el enlace de AUTOSEN, dentro del MÓDULO #03 */

  /* Los anchos del guion. 1100px (--jrv-p-ancho de componentes.css) es el de las
     secciones sin ancho declarado. */
  --jrv-cew-ancho-video: 900px; /* el vídeo de venta y el bloque del problema */
  --jrv-cew-ancho-modulo: 800px; /* las cinco filas de módulo y el caso de éxito */
  --jrv-cew-ancho-pago: 600px; /* la sección amarilla del pago */
}

/* El ancla de los dos botones «COMPRAR». Sin esto el título de la sección queda
   pegado al filo de arriba al saltar. */
body.page-id-79472 [id] { scroll-margin-block-start: 20px; }

/* ==========================================================================
   1 · LA BARRA DEL LOGOTIPO (pieza 1)
   ==========================================================================
   Fondo #004361, sin relleno, y `margen sup -8px`.

   EL MARGEN NEGATIVO VA EN LA SECCIÓN Y CON z-index, no en la imagen. En el
   hijo se colapsa y arrastra la sección entera (en la portada eso costó 617px
   de hueco), y sin `position: relative` con `z-index` el elemento mide bien
   pero se pinta DEBAJO del fondo y no se ve. */
.jrv-cew-cabecera {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  margin-block-start: -8px;
  padding: 0 20px;
  background-color: var(--jrv-cew-azul);
}

/* El original da «ancho 25%» a la imagen. */
.jrv-cew-cabecera__logo {
  display: block;
  width: 25%;
  min-width: 150px;
  max-width: 280px;
  height: auto;
}

/* ==========================================================================
   2 · EL TITULAR Y EL VÍDEO DE VENTA (piezas 2 y 3)
   ========================================================================== */
.jrv-cew-entrada {
  box-sizing: border-box;
  padding-block: 40px;
  background-color: #fff;
}

/* El <h1> de la página. El original va centrado, en #004361, y con el texto en
   negrita (un <b> dentro del titular). */
.jrv-cew-entrada__titular {
  margin: 0;
  color: var(--jrv-cew-azul);
  font-weight: 700;
  text-align: center;
}

/* El guion da 900px de ancho al vídeo. El envoltorio .jrv-video16 de
   componentes.css es el que pone la proporción 16:9; aquí solo el ancho. */
.jrv-cew-entrada__video {
  width: 100%;
  max-width: var(--jrv-cew-ancho-video);
  margin: 30px auto 0;
}

/* ==========================================================================
   3 · LAS DOS SECCIONES DE OFERTA (piezas 4-15 y 56-65)
   ==========================================================================
   Fondo #075E54 y dos columnas 60/40 con `content_position: center`, o sea
   centradas verticalmente. En móvil se apilan y el pack va primero, que es como
   se lee la oferta: primero ves qué te llevas.
   ========================================================================== */
.jrv-cew-oferta {
  box-sizing: border-box;
  background-color: var(--jrv-cew-verde);
  color: #fff;
}

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

@media (min-width: 768px) {
  .jrv-cew-oferta__rejilla {
    /* El 60/40 del original. */
    grid-template-columns: 60fr 40fr;
  }
  /* En pantalla ancha el texto va primero, como en el original. */
  .jrv-cew-oferta__texto { order: 1; }
  .jrv-cew-oferta__pack  { order: 2; }
}

@media (max-width: 767px) {
  .jrv-cew-oferta__pack  { order: 1; }
  .jrv-cew-oferta__texto { order: 2; }
}

/* --- Los titulares de la oferta ------------------------------------------
   Cuatro líneas en la primera (piezas 4-7) y dos en la segunda (56-57). Los
   tamaños son relativos: en el original la jerarquía era 26px el pie de
   entrada, 46px el nombre del curso y 30px el «Especializado para…». Se
   respeta la PROPORCIÓN, no el número. */
.jrv-cew-oferta__entradilla {
  margin: 0 0 10px;
  color: var(--jrv-cew-sol);
  font-weight: 700;
}

.jrv-cew-oferta__reclamo {
  margin: 0 0 6px;
  color: #fff;
}

/* La pieza más grande de la sección: el nombre del curso (46px / peso 800). */
.jrv-cew-oferta__nombre {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.75em;
  font-weight: 800;
  line-height: 1.15;
}

.jrv-cew-oferta__para {
  margin: 0 0 16px;
  color: #fff;
  font-size: 1.15em;
}

/* El amarillo de «AGENTES INMOBILIARIOS» y el subrayado dorado de «Intensivo»
   y «ESPECIALIZADO». */
.jrv-cew-sol   { color: var(--jrv-cew-sol); }
.jrv-cew-u-oro { color: var(--jrv-p-oro); }

.jrv-cew-oferta__estrellas {
  display: block;
  width: 190px;
  max-width: 100%;
  height: auto;
  margin-block: 0 20px;
}

/* --- Los cuatro puntos (pieza 10) ----------------------------------------
   El icon-list traía su icono en verde #61CE70. Se dibuja con un ::before, sin
   fuente de iconos: quitar esas fuentes (443 KB) es justamente el objetivo de
   toda esta conversión. */
.jrv-cew-lista {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: #fff;
}

.jrv-cew-lista li {
  position: relative;
  margin-block-end: 14px;
  padding-inline-start: 32px;
  line-height: 1.5;
}

.jrv-cew-lista li::before {
  content: "";
  position: absolute;
  inset-block-start: .35em;
  inset-inline-start: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--jrv-cew-visto);
  /* La marca de verificado, dibujada con un degradado en ángulo: dos trazos
     blancos. Más barato que un SVG y no pide ni una petición de red. */
  background-image:
    linear-gradient(45deg, transparent 45%, #fff 45%, #fff 60%, transparent 60%),
    linear-gradient(135deg, transparent 55%, #fff 55%, #fff 70%, transparent 70%);
  background-size: 60% 60%, 60% 60%;
  background-position: 25% 65%, 60% 55%;
  background-repeat: no-repeat;
}

/* --- El botón «COMPRAR EN - $97 USD» (piezas 11/12 y 59/60) --------------- */
.jrv-cew-oferta__accion { margin: 0 0 14px; }

/* Geometría de .jrv-cta (componentes.css) y el color del guion. */
.jrv-cew-cta--comprar {
  background-color: var(--jrv-cew-comprar);
  border-color: var(--jrv-cew-comprar);
  color: #fff;
  font-weight: 700;
}

.jrv-cew-cta--comprar:hover,
.jrv-cew-cta--comprar:focus-visible {
  background-color: #c33f4e; /* el mismo rojo un paso más oscuro, para el ratón */
  color: #fff;
}

/* El precio iba a 26px dentro de un botón de 16px: 1,6 veces. En relativo. */
.jrv-cew-precio {
  font-size: 1.6em;
  font-weight: 700;
}

/* El <br> que en el original solo existía en la versión de móvil del botón.
   Es UNA pieza con su punto de corte, no dos botones. */
@media (min-width: 768px) {
  .jrv-cew-corte { display: none; }
}

.jrv-cew-oferta__seguro {
  margin: 0 0 16px;
  color: #fff;
  text-align: center;
}

/* Los sellos de garantía y de Hotmart bajo el botón. */
.jrv-cew-oferta__sello {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto 14px;
}

.jrv-cew-oferta__pack img,
.jrv-cew-oferta__pack picture {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   4 · EL PROBLEMA (piezas 16-20) · sección de 900px
   ========================================================================== */
.jrv-cew-problema {
  box-sizing: border-box;
  background-color: #fff;
}

.jrv-cew-problema__interior {
  width: 100%;
  max-width: var(--jrv-cew-ancho-video);
  margin-inline: auto;
}

.jrv-cew-problema__titulo {
  margin: 0 0 24px;
  color: #000;
  font-weight: 700;
  text-align: center;
}

.jrv-cew-problema__parrafo {
  margin: 0 0 18px;
  color: #000;
  line-height: 1.6;
}

/* LA PIEZA 20 ES UN `divider` Y NO SE PINTA COMO ELEMENTO (arreglo 2 del
   protocolo): es este borde. 3px es el `weight` del original y #999999 su
   color. */
.jrv-cew-problema__linea {
  margin-block-start: 40px;
  border-block-start: 3px solid var(--jrv-cew-linea);
}

/* ==========================================================================
   5 · LOS CINCO MÓDULOS (piezas 21-39)
   ========================================================================== */
.jrv-cew-modulos {
  box-sizing: border-box;
  background-color: #fff;
}

.jrv-cew-modulos__titulo {
  margin: 0 0 30px;
  color: var(--jrv-cew-azul);
  font-weight: 800;
  text-align: center;
}

.jrv-cew-modulos__lista {
  width: 100%;
  max-width: var(--jrv-cew-ancho-modulo);
  margin-inline: auto;
}

/* Cada fila: carátula al 40% y texto al 60%, con el relleno de 20px del guion. */
.jrv-cew-modulo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding-block: 20px;
}

@media (min-width: 768px) {
  .jrv-cew-modulo {
    grid-template-columns: 40fr 60fr;
    gap: 26px;
  }
}

.jrv-cew-modulo__caratula img,
.jrv-cew-modulo__caratula picture {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* `min-width: 0` porque un hijo de rejilla no baja de su contenido más ancho por
   omisión: sin esto, una palabra larga del texto del módulo (o el enlace de
   AUTOSEN) ensancha la columna y desborda la fila en móvil. */
.jrv-cew-modulo__texto { min-width: 0; }

.jrv-cew-modulo__titulo {
  margin: 0 0 8px;
  color: var(--jrv-cew-verde);
  font-weight: 700;
}

.jrv-cew-modulo__detalle {
  margin: 0;
  color: #000;
  line-height: 1.6;
}

/* El único enlace de salida de la página: AUTOSEN, en el MÓDULO #03. */
.jrv-cew-enlace { color: var(--jrv-cew-enlace); }

.jrv-cew-modulos__resumen {
  margin: 30px 0 0;
  color: #000;
  text-align: center;
}

.jrv-cew-modulos__cierre {
  margin: 20px 0 0;
  color: var(--jrv-cew-azul);
  font-weight: 600;
  text-align: center;
}

/* «ESPECÍFICAMENTE», en el verde de WhatsApp. */
.jrv-cew-verde   { color: var(--jrv-cew-verde); }
.jrv-cew-u-verde { color: var(--jrv-cew-verde); }
.jrv-cew-coral   { color: var(--jrv-p-rojo); } /* #C23616, ya está en componentes.css */

/* ==========================================================================
   6 · EL PAGO (piezas 40-47) · sección de 600px, fondo #FFF9C4
   ==========================================================================
   El `id="pagar-curso"` de esta sección es la pieza 40 (el menu-anchor) y el
   destino de los dos botones «COMPRAR EN - $97 USD».
   ========================================================================== */
.jrv-cew-pago {
  box-sizing: border-box;
  background-color: var(--jrv-cew-crema);
  text-align: center;
}

.jrv-cew-pago__interior {
  width: 100%;
  max-width: var(--jrv-cew-ancho-pago);
  margin-inline: auto;
  /* El original mete la caja del pago 20px por debajo del ancla. */
  padding-block-start: 20px;
}

.jrv-cew-pago__titulo {
  margin: 0 0 10px;
  color: #000;
  font-weight: 700;
}

.jrv-cew-pago__bajada {
  margin: 0 0 20px;
  color: #000;
}

.jrv-cew-pago__hotmart,
.jrv-cew-pago__medios,
.jrv-cew-pago__sello {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto 20px;
}

.jrv-cew-pago__accion { margin: 0 0 20px; }

/* El botón de Hotmart. El fondo es el #fff200 del guion —parecido al #FFFF00 de
   .jrv-cta--amarillo pero NO el mismo, así que se declara aquí— y el texto iba
   a 36px, que en relativo es algo más del doble del botón. */
.jrv-cew-cta--hotmart {
  background-color: var(--jrv-cew-hotmart);
  border-color: var(--jrv-p-oro-filo);
  color: #000;
  font-size: 1.5em;
}

.jrv-cew-cta--hotmart:hover,
.jrv-cew-cta--hotmart:focus-visible {
  background-color: var(--jrv-p-oro-luz);
  color: #000;
}

.jrv-cew-pago__aviso {
  margin: 0 0 20px;
  color: #000;
  line-height: 1.6;
}

/* ==========================================================================
   7 · EL CASO DE ÉXITO (piezas 48-53) · imagen de fondo Fondo.png
   ==========================================================================
   UNA sección donde el original tenía DOS copias (una para móvil y otra para
   pantalla ancha) del mismo titular, la misma imagen y el mismo vídeo. Además
   estaban mal marcadas —la de móvil solo se oculta en escritorio y la de ancha
   solo en teléfono— así que entre 768 y 1024px se pintaban las DOS.

   background-origin: border-box porque con el padding-box de serie la figura se
   desplaza tanto como el relleno y deja un hueco arriba. Y color de reserva
   detrás: el texto de esta sección es BLANCO, y si la imagen no llega a cargar
   sin ese color quedaría blanco sobre blanco.
   ========================================================================== */
.jrv-cew-caso {
  box-sizing: border-box;
  padding-block: 40px;
  background-color: var(--jrv-cew-azul);
  background-image: url("/wp-content/uploads/2020/02/Fondo.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: border-box;
  color: #fff;
}

.jrv-cew-caso__interior {
  width: 100%;
  max-width: var(--jrv-cew-ancho-modulo);
  margin-inline: auto;
}

.jrv-cew-caso__titulo {
  margin: 0 0 26px;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

/* En el original la imagen y el vídeo van en una columna del 79,6% con dos
   columnas vacías del 10% a los lados: eso es un ancho del 80% centrado. Las
   columnas vacías no se pintan (no son piezas). */
.jrv-cew-caso__mockup {
  width: 80%;
  margin: 0 auto 30px;
}

.jrv-cew-caso__mockup img,
.jrv-cew-caso__mockup picture {
  display: block;
  width: 100%;
  height: auto;
}

/* EL VÍDEO ES 9:16, VERTICAL, Y ASÍ SE QUEDA: es una grabación de pantalla de
   WhatsApp y en 16:9 saldría con bandas o recortada.

   PERO CON TOPE DE ANCHO. En el original ocupaba el 79,6% de la sección, unos
   900px, que a 9:16 son más de 1.600px de alto: una sola pieza más alta que tres
   pantallas de móvil. A 380px se ve como se ve un vídeo de móvil. */
.jrv-cew-caso__video {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
}

/* Solo cambia la proporción. Todo lo demás —el posicionamiento del iframe y el
   botón «pulsa para ver» del plugin— lo sigue poniendo .jrv-video16, y por eso
   NO se toca aquí: una regla sobre el botón le ganaría en especificidad a la
   del plugin y el círculo de reproducir se iría a la esquina. */
.jrv-cew-video--vertical { aspect-ratio: 9 / 16; }

/* ==========================================================================
   8 · LOS LOGOS DE CLIENTES (piezas 54-55)
   ==========================================================================
   La única pareja móvil/ancha que se queda como dos elementos: son dos
   ARCHIVOS distintos, uno recompuesto para móvil. .jrv-solo-movil y
   .jrv-solo-ancha vienen de componentes.css, con el corte en 768px.
   ========================================================================== */
.jrv-cew-clientes {
  box-sizing: border-box;
  background-color: #fff;
}

/* ==========================================================================
   9 · EL PIE (piezas 66-69)
   ==========================================================================
   40px de margen arriba y abajo, como el original.
   ========================================================================== */
.jrv-cew-pie {
  box-sizing: border-box;
  margin-block: 40px;
  padding-inline: 20px;
  background-color: #fff;
}

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

.jrv-cew-pie__retrato,
.jrv-cew-pie__logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.jrv-cew-pie__retrato { max-width: 560px; }
.jrv-cew-pie__logo    { max-width: 240px; }

.jrv-cew-pie__firma {
  margin: 0 0 20px;
  color: var(--jrv-cew-gris);
  text-align: center;
}

/* El corazón: era un icono de Font Awesome y ahora es el carácter ♥, en el
   mismo rojo. Una fuente de iconos menos. */
.jrv-cew-corazon { color: var(--jrv-cew-corazon); }

/* El descargo de responsabilidad: nueve párrafos justificados, en gris y
   pequeños. Aquí sí baja de tamaño, porque el original lo pone a 12px sobre un
   cuerpo de 16 y es el único sitio de la página donde el tamaño ES el diseño:
   es letra pequeña a propósito. En relativo, no en píxeles. */
.jrv-cew-pie__descargo {
  margin: 0 0 12px;
  color: var(--jrv-cew-gris);
  font-size: .75em;
  line-height: 1.6;
  text-align: justify;
}