/* =====================================================
   HOME UNIFICADA V3
   Ricardo Lozano Child / GeneratePress
   Archivo: assets/css/home/00-home-base.css
   ===================================================== */

/* =====================================================
   1. VARIABLES
   ===================================================== */

body.page-id-7,
body.home {
  --rl-bg: #f6f8fb;
  --rl-white: #ffffff;
  --rl-ink: #071126;
  --rl-text: #334155;
  --rl-border: #dbe4ee;

  --rl-blue: #2f62ff;
  --rl-green: #10b981;
  --rl-amber: #f59e0b;
  --rl-pink: #f263ee;
  --rl-navy: #09142f;

  --rl-home-max: 1280px;
  --rl-home-side: 48px;
  --rl-home-width: min(calc(100vw - (var(--rl-home-side) * 2)), var(--rl-home-max));

  --rl-pill: 999px;
  --rl-radius: 34px;
  --rl-radius-xl: 38px;

  --rl-speed: .24s;
  --rl-ease: cubic-bezier(.2, .8, .2, 1);
}

/* =====================================================
   2. LIMPIEZA GENERAL HOME
   ===================================================== */

body.page-id-7,
body.page-id-7 #page,
body.page-id-7 .site-content,
body.page-id-7 #primary,
body.page-id-7 #main,
body.page-id-7 #post-7,
body.page-id-7 #post-7 .inside-article,
body.page-id-7 #post-7 .entry-content {
  background: var(--rl-bg) !important;
}

body.page-id-7.separate-containers .site-main,
body.page-id-7.separate-containers .inside-article,
body.page-id-7.one-container .site-content,
body.page-id-7 #primary,
body.page-id-7 #main,
body.page-id-7 #post-7,
body.page-id-7 #post-7 .inside-article {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--rl-bg) !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.page-id-7 .entry-title,
body.page-id-7 #post-7 .entry-title,
body.page-id-7 h1.entry-title {
  display: none !important;
}

body.page-id-7 #post-7 .entry-content,
body.page-id-7 #post-7 .entry-content * {
  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content a {
  text-decoration: none !important;
}

body.page-id-7 #post-7 .entry-content figure {
  margin: 0 !important;
}

body.page-id-7 #post-7 .entry-content img {
  max-width: 100% !important;
}

/* =====================================================
   3. HERO GRID PRINCIPAL
   ===================================================== */

body.page-id-7 #post-7 .entry-content {
  position: relative !important;

  display: grid !important;
  grid-template-columns: minmax(0, 680px) minmax(420px, 1fr) !important;
  column-gap: clamp(58px, 5.8vw, 88px) !important;
  row-gap: 0 !important;
  align-items: start !important;

  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;

  margin: 0 auto !important;
  padding: 108px 0 92px !important;

  overflow: visible !important;
}

/* Bloque izquierdo real: chips + H1 */
body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665),
body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 {
  grid-column: 1 !important;
  grid-row: 1 !important;

  width: 100% !important;
  max-width: 680px !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
  justify-self: start !important;
  align-self: start !important;
}

body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665,
body.page-id-7 #post-7 .entry-content .gb-element-5ab4b76c {
  display: block !important;

  width: 100% !important;
  max-width: 680px !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

/* =====================================================
   4. CHIPS HERO - RECONSTRUCCION LIMPIA
   ===================================================== */

/* Reset duro del bloque de chips para evitar dobles */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  column-gap: 18px !important;
  row-gap: 12px !important;

  align-items: start !important;
  justify-content: start !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 0 0 54px 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Segunda fila antigua */
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
  margin-top: 12px !important;
}

/* Aplanar wrappers internos sin convertirlos en chips */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 :where(.wp-block-group, .is-layout-flex, [class*="gb-element"]),
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 :where(.wp-block-group, .is-layout-flex, [class*="gb-element"]),
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 :where(.wp-block-group, .is-layout-flex, [class*="gb-element"]) {
  display: contents !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Quitar puntos manuales y pseudos de wrappers */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 :where(div, span, .wp-block-group)::before,
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 :where(div, span, .wp-block-group)::after,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 :where(div, span, .wp-block-group)::before,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 :where(div, span, .wp-block-group)::after,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 :where(div, span, .wp-block-group)::before,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 :where(div, span, .wp-block-group)::after {
  content: none !important;
  display: none !important;
}

/* Oculta divs vacios que GenerateBlocks usaba como puntos */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 div:empty,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 div:empty,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 div:empty {
  display: none !important;
}

/* El parrafo es el chip visual real */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
  --rl-chip-dot: var(--rl-blue);

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  width: fit-content !important;
  max-width: 100% !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 7px 14px !important;

  border-radius: var(--rl-pill) !important;
  border: 1.1px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.98)) padding-box,
    linear-gradient(
      135deg,
      rgba(47, 98, 255, .62),
      rgba(16, 185, 129, .34),
      rgba(245, 158, 11, .36),
      rgba(242, 99, 238, .54)
    ) border-box !important;

  box-shadow:
    0 5px 14px rgba(47, 98, 255, .055),
    0 1px 4px rgba(15, 23, 42, .018),
    inset 0 1px 0 rgba(255, 255, 255, .78) !important;

  color: var(--rl-ink) !important;
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
  text-align: left !important;

  overflow: hidden !important;
}

/* Punto unico */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p::before,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p::before,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p::before {
  content: "" !important;

  display: inline-block !important;

  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  flex: 0 0 8px !important;

  border-radius: 999px !important;
  background: var(--rl-chip-dot) !important;
}

/* Evita segundo pseudo dentro del chip */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p::after,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p::after,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p::after {
  content: none !important;
  display: none !important;
}

/* Colores por estructura actual */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 > *:nth-child(1) p {
  --rl-chip-dot: var(--rl-blue);
}

body.page-id-7 #post-7 .entry-content .gb-element-3c232162 > *:nth-child(2) p {
  --rl-chip-dot: var(--rl-amber);
}

body.page-id-7 #post-7 .entry-content .gb-element-3c232162 > *:nth-child(3) p {
  --rl-chip-dot: var(--rl-green);
}

body.page-id-7 #post-7 .entry-content .gb-element-3c232162 > *:nth-child(4) p {
  --rl-chip-dot: var(--rl-pink);
}

/* Colores por estructura antigua */
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 > div:nth-child(1) p {
  --rl-chip-dot: var(--rl-blue);
}

body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 > div:nth-child(2) p {
  --rl-chip-dot: var(--rl-amber);
}

body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 > div:nth-child(1) p {
  --rl-chip-dot: var(--rl-green);
}

body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 > div:nth-child(2) p {
  --rl-chip-dot: var(--rl-pink);
}

@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p:hover,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p:hover,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p:hover {
    transform: translateY(-1px) !important;

    box-shadow:
      0 7px 18px rgba(47, 98, 255, .075),
      0 2px 6px rgba(15, 23, 42, .025),
      inset 0 1px 0 rgba(255, 255, 255, .86) !important;
  }
}

/* =====================================================
   5. H1 HERO - SIEMPRE A LA IZQUIERDA
   ===================================================== */

body.page-id-7 #post-7 .entry-content .rl-hero-title,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text {
  display: block !important;

  width: 100% !important;
  max-width: 680px !important;

  margin: 0 0 32px 0 !important;
  padding: 0 !important;

  color: var(--rl-ink) !important;

  font-size: clamp(56px, 5.2vw, 82px) !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;

  text-align: left !important;
  text-wrap: balance !important;
}

body.page-id-7 #post-7 .entry-content .rl-hero-title,
body.page-id-7 #post-7 .entry-content .rl-hero-title *,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text * {
  text-align: left !important;
}

body.page-id-7 #post-7 .entry-content .rl-hero-title span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

body.page-id-7 #post-7 .entry-content .rl-hero-title strong,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text strong,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text b,
body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text mark {
  color: var(--rl-blue) !important;
  background: transparent !important;
  font-style: normal !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* =====================================================
   6. PARRAFO HERO
   ===================================================== */

body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p {
  grid-column: 1 !important;
  grid-row: 2 !important;

  max-width: 660px !important;
  margin: 0 0 34px 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  color: var(--rl-text) !important;
  font-size: 20px !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;

  text-align: left !important;
}

body.page-id-7 #post-7 .entry-content > p.has-background,
body.page-id-7 #post-7 .entry-content > p.has-base-3-background-color {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =====================================================
   7. BOTONES HERO - SOMBRA SUAVE
   ===================================================== */

body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
  grid-column: 1 !important;
  grid-row: 3 !important;

  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-height: 60px !important;

  margin: 0 0 40px 0 !important;
  padding: 0 34px !important;

  border-radius: var(--rl-pill) !important;

  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: nowrap !important;

  overflow: hidden !important;

  transition:
    transform var(--rl-speed) var(--rl-ease),
    box-shadow var(--rl-speed) var(--rl-ease),
    background var(--rl-speed) var(--rl-ease),
    border-color var(--rl-speed) var(--rl-ease),
    color var(--rl-speed) var(--rl-ease) !important;
}

/* Boton principal */
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309 {
  justify-self: start !important;

  color: #ffffff !important;
  border: 1px solid rgba(125, 166, 255, .35) !important;

  background:
    linear-gradient(135deg, #071126 0%, #102452 56%, #2454df 100%) !important;

  box-shadow:
    0 10px 22px rgba(47, 98, 255, .12),
    0 3px 8px rgba(9, 20, 47, .08) !important;
}

body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309::after {
  content: "\2192" !important;
  display: inline-block !important;
  margin-left: 12px !important;
  font-size: 23px !important;
  line-height: 1 !important;
}

/* Boton secundario */
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
  justify-self: start !important;
  margin-left: 244px !important;

  color: var(--rl-ink) !important;
  border: 1px solid rgba(219, 228, 238, .95) !important;

  background: rgba(255, 255, 255, .82) !important;

  box-shadow:
    0 6px 14px rgba(15, 23, 42, .035),
    inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:hover,
  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:hover {
    transform: translateY(-1px) !important;
  }

  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:hover {
    background: linear-gradient(135deg, #102452 0%, #2454df 58%, #3f73ff 100%) !important;

    box-shadow:
      0 13px 28px rgba(47, 98, 255, .17),
      0 4px 10px rgba(9, 20, 47, .09) !important;
  }

  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:hover {
    color: var(--rl-blue) !important;
    border-color: rgba(191, 208, 255, .9) !important;

    box-shadow:
      0 8px 18px rgba(47, 98, 255, .06),
      inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  }
}

/* =====================================================
   8. TIPS HERO
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d {
  grid-column: 1 !important;
  grid-row: 4 !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 34px !important;
  row-gap: 22px !important;

  width: 100% !important;
  max-width: 660px !important;

  margin: 0 !important;
  padding: 30px 0 0 0 !important;

  border-top: 1px solid rgba(219, 228, 238, .92) !important;
  background: transparent !important;
}

body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d > div {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;

  margin: 0 !important;
  padding: 0 !important;
}

body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d > div::before {
  content: "\2713" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;

  margin-top: 1px !important;

  border: 2px solid var(--rl-blue) !important;
  border-radius: 999px !important;

  color: var(--rl-blue) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d p {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--rl-text) !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
}

/* =====================================================
   9. FOTO HERO - BAJA A ZONA H1, NO A CHIPS
   ===================================================== */

body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
  grid-column: 2 !important;
  grid-row: 1 / span 4 !important;

  display: block !important;

  width: 100% !important;
  height: clamp(500px, 36vw, 540px) !important;

  margin: 126px 0 0 0 !important;

  border-radius: var(--rl-radius-xl) !important;
  overflow: hidden !important;

  object-fit: cover !important;
  object-position: center 38% !important;

  align-self: start !important;
  justify-self: stretch !important;

  box-shadow:
    0 18px 42px rgba(15, 23, 42, .09),
    0 8px 22px rgba(47, 98, 255, .035) !important;
}

body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) img.gb-media-0b3bf00f {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  border-radius: var(--rl-radius-xl) !important;

  object-fit: cover !important;
  object-position: center 38% !important;
}

/* =====================================================
   10. BASE SECCIONES FUTURAS
   Metodo, sobre mi, FAQ...
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-page-section,
body.page-id-7 #post-7 .entry-content > .rl-metodo-section,
body.page-id-7 #post-7 .entry-content > .rl-about-section {
  grid-column: 1 / -1 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .rl-home-inner,
body.page-id-7 #post-7 .rl-section-inner,
body.page-id-7 #post-7 .rl-metodo-inner,
body.page-id-7 #post-7 .rl-about-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* =====================================================
   11. TABLET
   ===================================================== */

@media (min-width: 768px) and (max-width: 980px) {
  body.page-id-7,
  body.home {
    --rl-home-max: 760px;
    --rl-home-side: 56px;
  }

  body.page-id-7 #post-7 .entry-content {
    grid-template-columns: 1fr !important;

    width: var(--rl-home-width) !important;
    max-width: var(--rl-home-max) !important;

    padding: 74px 0 72px !important;
  }

  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665),
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665,
  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p,
  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c,
  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d,
  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    grid-column: 1 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-hero-title,
  body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text {
    max-width: 720px !important;
    font-size: clamp(52px, 7.5vw, 72px) !important;
    line-height: 1 !important;
    text-align: left !important;
  }

  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p {
    max-width: 720px !important;
    font-size: 19px !important;
  }

  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    grid-row: 5 !important;

    height: 560px !important;
    margin-top: 46px !important;

    border-radius: 34px !important;
    object-position: center 34% !important;
  }
}

/* =====================================================
   12. MOVIL
   ===================================================== */

@media (max-width: 767px) {
  body.page-id-7,
  body.home {
    --rl-home-max: 100%;
    --rl-home-side: 24px;
  }

  body.page-id-7 #post-7 .entry-content {
    grid-template-columns: 1fr !important;

    width: var(--rl-home-width) !important;
    max-width: var(--rl-home-max) !important;

    padding: 48px 0 56px !important;
    overflow: hidden !important;
  }

  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665),
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665,
  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p,
  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c,
  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d,
  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    grid-column: 1 !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important;
    column-gap: 0 !important;

    width: 100% !important;
    margin-bottom: 42px !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-hero-title,
  body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text {
    max-width: 100% !important;
    margin-bottom: 30px !important;

    font-size: clamp(44px, 12vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;

    text-align: left !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-hero-title span {
    white-space: normal !important;
  }

  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p {
    max-width: 100% !important;
    margin-bottom: 32px !important;

    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
    width: 100% !important;
    min-height: 56px !important;

    margin-left: 0 !important;
    padding: 0 22px !important;

    font-size: 16.5px !important;
  }

  body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309 {
    grid-row: 3 !important;
    margin-bottom: 14px !important;
  }

  body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
    grid-row: 4 !important;
    margin-bottom: 36px !important;
  }

  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d {
    grid-row: 5 !important;

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 20px !important;

    max-width: 100% !important;
    padding-top: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d > div {
    gap: 9px !important;
  }

  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d > div::before {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    font-size: 10.5px !important;
    border-width: 1.6px !important;
  }

  body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d p {
    font-size: 13.5px !important;
    line-height: 1.28 !important;
  }

  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    grid-row: 6 !important;

    height: 430px !important;
    margin-top: 38px !important;

    border-radius: 28px !important;

    object-position: center 36% !important;

    box-shadow:
      0 14px 34px rgba(15, 23, 42, .08),
      0 6px 16px rgba(47, 98, 255, .035) !important;
  }
}

/* =====================================================
   13. MOVIL PEQUENO
   ===================================================== */

@media (max-width: 430px) {
  body.page-id-7,
  body.home {
    --rl-home-side: 24px;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    font-size: 13.5px !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7,
  body.home {
    --rl-home-side: 18px;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    white-space: normal !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-hero-title,
  body.page-id-7 #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text {
    font-size: clamp(38px, 11vw, 46px) !important;
  }

  body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
  body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p {
    font-size: 16.5px !important;
  }

  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    height: 390px !important;
  }
}

/* =====================================================
   14. ACCESIBILIDAD
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  body.page-id-7 #post-7 .entry-content *,
  body.page-id-7 #post-7 .entry-content *::before,
  body.page-id-7 #post-7 .entry-content *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   PARCHE UNICO DEFINITIVO HERO HOME
   Chips PC/tablet 2x2, movil 1x4, sombras suaves y foto alta
   ===================================================== */

/* =========================
   CHIPS - BASE
   ========================= */

body.page-id-7 #post-7 .entry-content .gb-element-3c232162,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
  display: grid !important;
  width: fit-content !important;
  max-width: 100% !important;
  align-items: start !important;
  justify-content: start !important;
}

body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
  border: 1.35px solid transparent !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,252,255,.99)) padding-box,
    linear-gradient(135deg, rgba(47,98,255,.82), rgba(16,185,129,.46), rgba(245,158,11,.48), rgba(242,99,238,.68)) border-box !important;
  box-shadow:
    0 3px 9px rgba(147,197,253,.07),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* =========================
   PC Y TABLET - 2 x 2
   ========================= */

@media (min-width: 768px) {
  body.page-id-7 #post-7 .entry-content .gb-element-3c232162,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    grid-template-columns: repeat(2, max-content) !important;
    gap: 11px 20px !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    margin-top: 11px !important;
  }
}

/* =========================
   MOVIL - 1 x 4 REAL
   ========================= */

@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .gb-element-3c232162,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    margin-top: 9px !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: calc(100vw - 48px) !important;

    min-height: 31px !important;
    padding: 6px 11px !important;
    margin: 0 0 9px 0 !important;

    font-size: 12.5px !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p::before,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p::before,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p::before {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    flex: 0 0 7px !important;
  }
}

/* =========================
   BOTONES - SOMBRA BAJA
   ========================= */

body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
  box-shadow:
    0 4px 12px rgba(147,197,253,.10),
    0 1px 4px rgba(15,23,42,.025) !important;
}

/* =========================
   FOTO HERO
   ========================= */

body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
  height: clamp(620px, 42vw, 700px) !important;
  object-position: center 34% !important;
  box-shadow:
    0 10px 26px rgba(147,197,253,.12),
    0 4px 12px rgba(15,23,42,.035) !important;
}

body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) img.gb-media-0b3bf00f {
  object-position: center 34% !important;
}

/* Tablet: foto mas larga */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    height: 760px !important;
    object-position: center 30% !important;
  }
}

/* Movil: foto correcta */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    height: 470px !important;
    object-position: center 34% !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    font-size: 12px !important;
    padding: 6px 10px !important;
    max-width: calc(100vw - 36px) !important;
  }

  body.page-id-7 #post-7 .entry-content > img.gb-media-0b3bf00f,
  body.page-id-7 #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
    height: 430px !important;
  }
}

/* =====================================================
   REMATE FINAL MOVIL - UNIR LOS 4 CHIPS EN UNA SOLA COLUMNA
   Corrige el hueco entre el chip 2 y el chip 3
   ===================================================== */

@media (max-width: 767px) {

  /* El hueco grande viene del margen del primer grupo de chips */
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 {
    margin: 0 0 9px 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px 0 !important;
  }

  /* El segundo grupo entra pegado al primero, como continuacion natural */
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 {
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px 0 !important;
  }

  /* Evita que los parrafos anadan otra separacion distinta */
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    margin: 0 !important;
  }
}

/* =====================================================
   FIX DEFINITIVO HOME NO BLOQUEA MENU
   Mantiene la home por debajo del header y libera clicks del menu
   ===================================================== */

/* La home nunca debe quedar por encima del header/menu */
body.page-id-7 #page,
body.page-id-7 .site-content,
body.page-id-7 #primary,
body.page-id-7 #main,
body.page-id-7 #post-7,
body.page-id-7 #post-7 .inside-article,
body.page-id-7 #post-7 .entry-content {
  z-index: auto !important;
}

/* El header y el menu abierto mandan siempre */
body.page-id-7 .site-header {
  position: relative !important;
  z-index: 99999 !important;
}

body.page-id-7 .main-navigation,
body.page-id-7 .main-navigation .inside-navigation,
body.page-id-7 .main-navigation.toggled,
body.page-id-7 .main-navigation.toggled .main-nav,
body.page-id-7 .main-navigation.toggled #primary-menu {
  pointer-events: auto !important;
  z-index: 100000 !important;
}

/* Enlaces del menu, incluido Ver Clases, siempre clicables */
body.page-id-7 .main-navigation a,
body.page-id-7 .main-navigation .main-nav a,
body.page-id-7 .main-navigation #primary-menu a,
body.page-id-7 .main-navigation li.nav-button > a {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* Decoraciones del menu no bloquean el click */
body.page-id-7 .main-navigation a::before,
body.page-id-7 .main-navigation a::after,
body.page-id-7 .main-navigation li.nav-button > a::before,
body.page-id-7 .main-navigation li.nav-button > a::after {
  pointer-events: none !important;
}

/* La zona hero no captura clicks cuando el menu esta abierto */
body.page-id-7:has(.main-navigation.toggled) #post-7,
body.page-id-7:has(.main-navigation.toggled) #post-7 .inside-article,
body.page-id-7:has(.main-navigation.toggled) #post-7 .entry-content {
  pointer-events: none !important;
}

/* Pero los botones de la home funcionan normalmente cuando el menu esta cerrado */
body.page-id-7:not(:has(.main-navigation.toggled)) #post-7 .entry-content > a.gb-text-0c608309,
body.page-id-7:not(:has(.main-navigation.toggled)) #post-7 .entry-content > a.gb-text-fdfdcd7c {
  pointer-events: auto !important;
}

/* =====================================================
   PARCHE FINAL BOTONES HOME - FIREFOX + DEGRADADO SECUNDARIO
   Pegar al final de 00-home-base.css
   ===================================================== */

/* Base común: botones preparados para Firefox, móvil y tablet */
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c {
  position: relative !important;
  isolation: isolate !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(47, 98, 255, 0.18) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease !important;
}

/* Botón principal: estado normal */
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309,
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:visited {
  color: #ffffff !important;
  border: 1px solid rgba(125, 166, 255, 0.42) !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(91, 141, 255, 0.28), transparent 34%),
    linear-gradient(135deg, #071126 0%, #102452 54%, #2454df 100%) !important;

  box-shadow:
    0 8px 20px rgba(47, 98, 255, 0.13),
    0 3px 8px rgba(9, 20, 47, 0.07) !important;
}

/* Botón secundario: degradado visible sin clickar */
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:visited {
  color: #2454df !important;
  border: 1.35px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(241,247,255,0.96)) padding-box,
    linear-gradient(
      135deg,
      rgba(47, 98, 255, 0.58),
      rgba(147, 197, 253, 0.34),
      rgba(16, 185, 129, 0.18)
    ) border-box !important;

  box-shadow:
    0 7px 18px rgba(147, 197, 253, 0.16),
    0 2px 7px rgba(15, 23, 42, 0.025),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

/* Estados activos: Firefox, Chrome, móvil y tablet */
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:hover,
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:focus,
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:focus-visible,
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:active {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,0.24), transparent 35%),
    linear-gradient(135deg, #102452 0%, #2454df 55%, #3f73ff 100%) !important;

  border-color: rgba(191, 219, 254, 0.78) !important;

  box-shadow:
    0 11px 26px rgba(47, 98, 255, 0.19),
    0 4px 10px rgba(9, 20, 47, 0.08) !important;

  transform: translateY(-1px) !important;
}

body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:hover,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:focus,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:focus-visible,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:active {
  color: #0f4fe8 !important;

  background:
    linear-gradient(145deg, #ffffff, #eaf3ff) padding-box,
    linear-gradient(
      135deg,
      rgba(47, 98, 255, 0.78),
      rgba(147, 197, 253, 0.48),
      rgba(16, 185, 129, 0.24)
    ) border-box !important;

  box-shadow:
    0 10px 24px rgba(147, 197, 253, 0.22),
    0 3px 9px rgba(47, 98, 255, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;

  transform: translateY(-1px) !important;
}

/* Quita outline feo pero mantiene foco elegante */
body.page-id-7 #post-7 .entry-content > a.gb-text-0c608309:focus-visible,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:focus-visible {
  outline: 3px solid rgba(47, 98, 255, 0.22) !important;
  outline-offset: 4px !important;
}

/* Boton "Como son las clases": texto negro y azul al pulsar */
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:visited {
  color: #071126 !important;
}

body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:hover,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:focus,
body.page-id-7 #post-7 .entry-content > a.gb-text-fdfdcd7c:active {
  color: #2f62ff !important;
}

/* =====================================================
   BLOQUE OSCURO METODO - FINAL HOME
   Usa las clases ya creadas en GenerateBlocks:
   rl-metodo-section / rl-metodo-inner / rl-metodo-grid
   rl-metodo-card / rl-metodo-icon / rl-metodo-svg
   rl-metodo-title / rl-metodo-text
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: clamp(70px, 7vw, 96px) !important;
  margin-bottom: 0 !important;

  padding: clamp(120px, 9vw, 156px) 0 clamp(118px, 8vw, 148px) !important;

  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background:
    linear-gradient(145deg, #061026 0%, #09142f 48%, #071126 100%) !important;

  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%) !important;
  scroll-margin-top: 120px !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(24px, 2.4vw, 36px) !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 370px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 38px 34px 36px !important;

  border-radius: 30px !important;
  border: 1px solid rgba(125, 166, 255, .24) !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.045)) !important;

  box-shadow:
    0 20px 46px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(47, 98, 255, .055),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;

  box-sizing: border-box !important;

  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    border-color .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s cubic-bezier(.2, .8, .2, 1),
    background .25s cubic-bezier(.2, .8, .2, 1) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(47, 98, 255, .16), transparent 42%),
    linear-gradient(315deg, rgba(125, 166, 255, .10), transparent 48%) !important;

  opacity: .75 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card > * {
  position: relative !important;
  z-index: 1 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;

  margin: 0 0 34px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 20px !important;
  background: linear-gradient(145deg, #3868ff, #2858f0) !important;

  box-shadow:
    0 16px 36px rgba(47, 98, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;

  color: #ffffff !important;
  box-sizing: border-box !important;

  transition:
    transform .25s cubic-bezier(.2, .8, .2, 1),
    box-shadow .25s cubic-bezier(.2, .8, .2, 1),
    background .25s cubic-bezier(.2, .8, .2, 1) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-svg,
body.page-id-7 #post-7 .entry-content .rl-metodo-svg svg,
body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg {
  width: 34px !important;
  height: 34px !important;

  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-svg svg *,
body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg * {
  stroke: currentColor !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-title,
body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(26px, 1.8vw, 32px) !important;
  line-height: 1.13 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-text,
body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(226, 232, 240, .78) !important;

  font-size: 17px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-card:hover {
    transform: translateY(-8px) !important;

    border-color: rgba(47, 98, 255, .78) !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.115), rgba(255,255,255,.06)) !important;

    box-shadow:
      0 30px 70px rgba(47, 98, 255, .24),
      0 20px 46px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card:hover .rl-metodo-icon {
    transform: scale(1.05) !important;

    background: linear-gradient(145deg, #4777ff, #2454df) !important;

    box-shadow:
      0 20px 42px rgba(47, 98, 255, .42),
      inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {
  body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
    margin-top: 72px !important;
    padding: 112px 0 108px !important;
    clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    min-height: 330px !important;
    padding: 34px 30px 32px !important;
    border-radius: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    margin-bottom: 30px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    font-size: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 17px !important;
    line-height: 1.62 !important;
  }
}

/* Movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
    margin-top: 64px !important;
    padding: 86px 0 82px !important;
    clip-path: none !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    min-height: 350px !important;
    padding: 34px 28px 32px !important;
    border-radius: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    margin-bottom: 30px !important;
    border-radius: 20px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-svg,
  body.page-id-7 #post-7 .entry-content .rl-metodo-svg svg,
  body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg {
    width: 33px !important;
    height: 33px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    margin-bottom: 18px !important;
    font-size: clamp(27px, 7vw, 34px) !important;
    line-height: 1.14 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: clamp(19px, 5vw, 23px) !important;
    line-height: 1.58 !important;
  }
}

/* Movil pequeno */
@media (max-width: 430px) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    min-height: 338px !important;
    padding: 30px 26px 30px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    font-size: 27px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 20px !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    min-height: 320px !important;
    padding: 28px 24px 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    font-size: 25px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 18.5px !important;
  }
}

/* =====================================================
   FIX MOVIL BLOQUE OSCURO METODO
   Corrige ancho completo, escala y tarjetas
   ===================================================== */

@media (max-width: 767px) {

  body.page-id-7 {
    overflow-x: hidden !important;
  }

  body.page-id-7 #post-7 .entry-content {
    overflow: visible !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-section,
  body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
    grid-column: 1 / -1 !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 56px !important;
    margin-bottom: 0 !important;

    padding: 72px 0 76px !important;

    background:
      linear-gradient(145deg, #061026 0%, #09142f 52%, #071126 100%) !important;

    clip-path: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    width: 100% !important;
    min-height: auto !important;

    padding: 28px 24px 30px !important;

    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;

    margin: 0 0 24px 0 !important;

    border-radius: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-svg,
  body.page-id-7 #post-7 .entry-content .rl-metodo-svg svg,
  body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    margin: 0 0 14px 0 !important;

    font-size: 24px !important;
    line-height: 1.16 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 17px !important;
    line-height: 1.58 !important;
    font-weight: 500 !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-inner {
    width: calc(100vw - 36px) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    padding: 26px 22px 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
    font-size: 22.5px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 16px !important;
  }
}

/* =====================================================
   FIX COLOR Y DEGRADADO BLOQUE OSCURO METODO
   Fondo azul profundo + tarjetas con borde/luz azul
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
  background:
    radial-gradient(circle at 18% 18%, rgba(47, 98, 255, .22), transparent 34%),
    radial-gradient(circle at 82% 42%, rgba(47, 98, 255, .16), transparent 38%),
    linear-gradient(180deg, #071126 0%, #081938 48%, #061126 100%) !important;
}

body.page-id-7 #post-7 .entry-content > .rl-metodo-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(90deg, rgba(47, 98, 255, .12), transparent 18%, transparent 82%, rgba(47, 98, 255, .12)),
    radial-gradient(circle at 50% 0%, rgba(47, 98, 255, .16), transparent 42%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content > .rl-metodo-section > * {
  position: relative !important;
  z-index: 1 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card {
  background:
    radial-gradient(circle at 88% 10%, rgba(47, 98, 255, .18), transparent 36%),
    linear-gradient(145deg, rgba(31, 47, 82, .92), rgba(18, 31, 58, .94)) padding-box,
    linear-gradient(145deg, rgba(75, 115, 255, .60), rgba(47, 98, 255, .22), rgba(255, 255, 255, .08)) border-box !important;

  border: 1.4px solid transparent !important;

  box-shadow:
    0 24px 58px rgba(0, 0, 0, .24),
    0 18px 46px rgba(47, 98, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card::before {
  background:
    radial-gradient(circle at 88% 0%, rgba(47, 98, 255, .22), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, .06), transparent 52%) !important;
  opacity: 1 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(145deg, #3f73ff 0%, #2f62ff 56%, #2454df 100%) !important;

  box-shadow:
    0 18px 38px rgba(47, 98, 255, .42),
    0 8px 18px rgba(47, 98, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-title,
body.page-id-7 #post-7 .entry-content .rl-metodo-card h2,
body.page-id-7 #post-7 .entry-content .rl-metodo-card h3,
body.page-id-7 #post-7 .entry-content .rl-metodo-card .gb-headline {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-text,
body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
  color: rgba(218, 226, 240, .82) !important;
}

@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-card:hover {
    background:
      radial-gradient(circle at 88% 10%, rgba(47, 98, 255, .26), transparent 38%),
      linear-gradient(145deg, rgba(35, 54, 96, .96), rgba(18, 31, 58, .96)) padding-box,
      linear-gradient(145deg, rgba(82, 125, 255, .88), rgba(47, 98, 255, .38), rgba(255, 255, 255, .12)) border-box !important;

    border-color: transparent !important;

    box-shadow:
      0 30px 70px rgba(47, 98, 255, .24),
      0 22px 52px rgba(0, 0, 0, .26),
      inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  }
}

/* =====================================================
   PARCHE FINAL HOME - METODO + SOBRE MI + ORDEN SECCIONES
   Sustituye los parches anteriores de Metodo/Sobre mi
   ===================================================== */

/* Evita que el grid del hero coloque secciones donde no toca */
body.page-id-7 {
  overflow-x: hidden !important;
}

body.page-id-7 #post-7 .entry-content {
  overflow: visible !important;
  grid-auto-flow: row !important;
}

/* Secciones principales: siempre ancho completo y en orden */
body.page-id-7 #post-7 .entry-content > .rl-metodo-section,
body.page-id-7 #post-7 .entry-content > .rl-about-section,
body.page-id-7 #post-7 .entry-content > .rl-classes-section {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  justify-self: stretch !important;
  align-self: start !important;

  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
  order: 10 !important;
}

body.page-id-7 #post-7 .entry-content > .rl-about-section {
  order: 20 !important;
}

body.page-id-7 #post-7 .entry-content > .rl-classes-section {
  order: 30 !important;
}

/* =====================================================
   BLOQUE OSCURO METODO
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  margin-top: clamp(76px, 7vw, 104px) !important;
  margin-bottom: 0 !important;

  padding: clamp(140px, 9vw, 168px) 0 clamp(150px, 9vw, 180px) !important;

  background:
    radial-gradient(circle at 16% 16%, rgba(47,98,255,.24), transparent 34%),
    radial-gradient(circle at 84% 42%, rgba(47,98,255,.16), transparent 40%),
    linear-gradient(180deg, #071126 0%, #081936 52%, #061126 100%) !important;

  clip-path: polygon(0 6%, 100% 0, 100% calc(100% - 54px), 0 100%) !important;
}

body.page-id-7 #post-7 .entry-content > .rl-metodo-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(90deg, rgba(47,98,255,.14), transparent 20%, transparent 80%, rgba(47,98,255,.12)),
    radial-gradient(circle at 50% 0%, rgba(47,98,255,.16), transparent 44%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-inner {
  position: relative !important;
  z-index: 1 !important;

  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(24px, 2.4vw, 36px) !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card {
  position: relative !important;
  overflow: hidden !important;

  min-height: 370px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 38px 34px 36px !important;

  border-radius: 30px !important;
  border: 1.4px solid transparent !important;

  background:
    radial-gradient(circle at 88% 10%, rgba(47,98,255,.18), transparent 36%),
    linear-gradient(145deg, rgba(31,47,82,.92), rgba(18,31,58,.94)) padding-box,
    linear-gradient(145deg, rgba(75,115,255,.60), rgba(47,98,255,.22), rgba(255,255,255,.08)) border-box !important;

  box-shadow:
    0 24px 58px rgba(0,0,0,.24),
    0 18px 46px rgba(47,98,255,.14),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(circle at 88% 0%, rgba(47,98,255,.22), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 52%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-card > * {
  position: relative !important;
  z-index: 1 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
  width: 78px !important;
  height: 78px !important;

  margin: 0 0 34px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 20px !important;

  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(145deg, #3f73ff 0%, #2f62ff 56%, #2454df 100%) !important;

  box-shadow:
    0 18px 38px rgba(47,98,255,.42),
    0 8px 18px rgba(47,98,255,.18),
    inset 0 1px 0 rgba(255,255,255,.20) !important;

  color: #ffffff !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg,
body.page-id-7 #post-7 .entry-content .rl-metodo-icon svg * {
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-title,
body.page-id-7 #post-7 .entry-content .rl-metodo-card h3 {
  margin: 0 0 18px 0 !important;
  color: #ffffff !important;

  font-size: clamp(26px, 1.8vw, 32px) !important;
  line-height: 1.13 !important;
  font-weight: 900 !important;
}

body.page-id-7 #post-7 .entry-content .rl-metodo-text,
body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
  margin: 0 !important;
  color: rgba(218,226,240,.82) !important;

  font-size: 17px !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* =====================================================
   SOBRE MI
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-about-section {
  position: relative !important;

  margin-top: -1px !important;
  margin-bottom: 0 !important;

  padding: 150px 0 140px !important;

  background: #ffffff !important;
  overflow: hidden !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-grid {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) !important;
  column-gap: clamp(76px, 7vw, 118px) !important;
  align-items: center !important;

  width: 100% !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-image-col {
  display: block !important;
  width: 100% !important;
}

body.page-id-7 #post-7 .entry-content img.rl-about-image,
body.page-id-7 #post-7 .entry-content .rl-about-image img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: 760px !important;

  object-fit: cover !important;
  object-position: center 42% !important;

  border-radius: 34px !important;

  box-shadow:
    0 34px 90px rgba(15,23,42,.13),
    0 12px 30px rgba(15,23,42,.07) !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-title {
  margin: 0 0 34px 0 !important;

  color: #071126 !important;

  font-size: clamp(52px, 4.4vw, 72px) !important;
  line-height: 1.03 !important;
  font-weight: 900 !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-text {
  max-width: 760px !important;
  margin: 0 0 28px 0 !important;

  color: #334155 !important;

  font-size: 20px !important;
  line-height: 1.72 !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-divider {
  width: 100% !important;
  height: 1px !important;

  margin: 48px 0 36px !important;

  background: rgba(15,23,42,.13) !important;
  border: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-points {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: center !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
  width: 58px !important;
  height: 58px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 17px !important;
  border: 1.3px solid transparent !important;

  background:
    linear-gradient(145deg, #ffffff, #f5f9ff) padding-box,
    linear-gradient(135deg, rgba(47,98,255,.38), rgba(147,197,253,.20)) border-box !important;

  box-shadow:
    0 14px 32px rgba(47,98,255,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  color: #2f62ff !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg,
body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg * {
  width: 27px !important;
  height: 27px !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-text {
  margin: 0 !important;
  color: #071126 !important;

  font-size: 18px !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (min-width: 768px) and (max-width: 980px) {
  body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
    padding: 120px 0 150px !important;
    clip-path: polygon(0 4%, 100% 0, 100% calc(100% - 42px), 0 100%) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content > .rl-about-section {
    padding: 112px 0 112px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-grid {
    grid-template-columns: 1fr !important;
    row-gap: 58px !important;
  }

  body.page-id-7 #post-7 .entry-content img.rl-about-image,
  body.page-id-7 #post-7 .entry-content .rl-about-image img {
    height: 820px !important;
    border-radius: 32px !important;
    object-position: center 40% !important;
  }
}

/* =====================================================
   MOVIL
   ===================================================== */

@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-metodo-section {
    margin-top: 64px !important;
    padding: 82px 0 104px !important;
    clip-path: none !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-inner,
  body.page-id-7 #post-7 .entry-content .rl-about-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-card {
    min-height: auto !important;
    padding: 28px 24px 30px !important;
    border-radius: 26px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-icon {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 24px !important;
    border-radius: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-title,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card h3 {
    font-size: 24px !important;
    line-height: 1.16 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-metodo-text,
  body.page-id-7 #post-7 .entry-content .rl-metodo-card p {
    font-size: 17px !important;
    line-height: 1.58 !important;
  }

  body.page-id-7 #post-7 .entry-content > .rl-about-section {
    padding: 84px 0 96px !important;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #f6f8fb 100%) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-grid {
    display: block !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-image-col {
    display: none !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-title {
    margin-bottom: 34px !important;
    font-size: clamp(46px, 12vw, 56px) !important;
    line-height: 1.02 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-text {
    max-width: 100% !important;
    margin-bottom: 32px !important;
    font-size: 20px !important;
    line-height: 1.72 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-divider {
    margin: 48px 0 36px !important;
    background: rgba(15,23,42,.42) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-points {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-height: 96px !important;

    padding: 17px 20px !important;

    border-radius: 24px !important;
    border: 1.3px solid transparent !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) padding-box,
      linear-gradient(135deg, rgba(47,98,255,.24), rgba(147,197,253,.14)) border-box !important;

    box-shadow:
      0 18px 42px rgba(47,98,255,.075),
      0 8px 22px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
    width: 62px !important;
    height: 62px !important;
    border-radius: 20px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 20px !important;
    line-height: 1.18 !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-metodo-inner,
  body.page-id-7 #post-7 .entry-content .rl-about-inner {
    width: calc(100vw - 36px) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-text {
    font-size: 18.5px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    padding: 15px 16px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 18px !important;
  }
}

/* Mostrar foto Sobre mi en movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 42px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-image-col {
    display: block !important;
  }

  body.page-id-7 #post-7 .entry-content img.rl-about-image,
  body.page-id-7 #post-7 .entry-content .rl-about-image img {
    display: block !important;
    width: 100% !important;
    height: 560px !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    border-radius: 30px !important;
  }
}

/* Sobre mi - puntos mas compactos en movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-about-points {
    gap: 14px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point {
    min-height: 54px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    column-gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg,
  body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg * {
    width: 18px !important;
    height: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 14px !important;
    line-height: 1.18 !important;
    font-weight: 900 !important;
  }
}

/* Sobre mi - puntos premium ajustados */
body.page-id-7 #post-7 .entry-content .rl-about-points {
  gap: 18px !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point {
  min-width: 0 !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  column-gap: 15px !important;

  padding: 10px 12px !important;
  border-radius: 22px !important;
  border: 1.2px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(247,251,255,.62)) padding-box,
    linear-gradient(135deg, rgba(47,98,255,.20), rgba(147,197,253,.08)) border-box !important;

  box-shadow:
    0 16px 34px rgba(47,98,255,.055),
    0 7px 18px rgba(15,23,42,.025),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(47,98,255,.16), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,247,255,.84)) !important;

  border: 1.2px solid rgba(47,98,255,.20) !important;

  box-shadow:
    0 12px 26px rgba(47,98,255,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg,
body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg * {
  width: 26px !important;
  height: 26px !important;
  color: #2f62ff !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-text {
  font-size: 17px !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  color: #071126 !important;
  overflow-wrap: anywhere !important;
}

/* Movil: mantiene el tamano pero con mas efecto 3D */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-about-points {
    gap: 16px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point {
    min-height: 72px !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    padding: 11px 14px !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,250,255,.88)) padding-box,
      linear-gradient(135deg, rgba(47,98,255,.28), rgba(147,197,253,.14), rgba(16,185,129,.08)) border-box !important;

    box-shadow:
      0 18px 38px rgba(47,98,255,.085),
      0 8px 20px rgba(15,23,42,.04),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(47,98,255,.04) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 15px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 16.5px !important;
  }
}

/* =====================================================
   RUTAS DE APRENDIZAJE - PREMIUM DARK
   rl-classes-section
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-classes-section {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 30 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: clamp(120px, 9vw, 160px) 0 clamp(120px, 9vw, 160px) !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 15% 18%, rgba(47,98,255,.20), transparent 34%),
    radial-gradient(circle at 86% 32%, rgba(47,98,255,.15), transparent 38%),
    linear-gradient(180deg, #071126 0%, #081936 50%, #061126 100%) !important;

  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content > .rl-classes-section::before {
  content: "01." !important;
  position: absolute !important;
  right: 5vw !important;
  top: 70px !important;

  color: rgba(255,255,255,.045) !important;
  font-size: clamp(150px, 17vw, 280px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content > .rl-classes-section::after {
  content: "03" !important;
  position: absolute !important;
  right: 6vw !important;
  bottom: 10px !important;

  color: rgba(255,255,255,.035) !important;
  font-size: clamp(160px, 18vw, 300px) !important;
  line-height: .8 !important;
  font-weight: 900 !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-inner {
  position: relative !important;
  z-index: 1 !important;

  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;

  margin: 0 auto !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/* Cabecera */
body.page-id-7 #post-7 .entry-content .rl-classes-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px) !important;
  column-gap: clamp(48px, 7vw, 110px) !important;
  row-gap: 32px !important;
  align-items: end !important;

  margin: 0 0 72px 0 !important;
  padding: 0 0 56px 0 !important;

  border-bottom: 1px solid rgba(185,212,255,.16) !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-kicker {
  grid-column: 1 !important;

  margin: 0 0 26px 0 !important;
  padding: 0 !important;

  color: #4aa3ff !important;

  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-title {
  grid-column: 1 !important;

  margin: 0 !important;
  padding: 0 !important;

  max-width: 760px !important;

  color: #ffffff !important;

  font-size: clamp(52px, 5.8vw, 86px) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-intro {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  margin: 0 !important;
  padding: 26px 30px !important;

  border-radius: 22px !important;
  border: 1px solid rgba(185,212,255,.14) !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  color: rgba(218,226,240,.72) !important;

  font-size: 20px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* Grid */
body.page-id-7 #post-7 .entry-content .rl-classes-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: clamp(24px, 2.4vw, 36px) !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

/* Tarjetas */
body.page-id-7 #post-7 .entry-content .rl-classes-card {
  --rl-route-color: #4aa3ff;
  --rl-route-rgb: 74, 163, 255;

  position: relative !important;
  overflow: hidden !important;

  min-height: 560px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 38px 34px 40px !important;

  border-radius: 30px !important;
  border: 1.4px solid transparent !important;

  background:
    radial-gradient(circle at 88% 8%, rgba(var(--rl-route-rgb), .16), transparent 36%),
    linear-gradient(145deg, rgba(31,47,82,.88), rgba(18,31,58,.94)) padding-box,
    linear-gradient(145deg, rgba(var(--rl-route-rgb), .55), rgba(47,98,255,.18), rgba(255,255,255,.07)) border-box !important;

  box-shadow:
    0 26px 64px rgba(0,0,0,.24),
    0 16px 42px rgba(var(--rl-route-rgb), .12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;

  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(circle at 88% 0%, rgba(var(--rl-route-rgb), .20), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 54%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card::after {
  content: "0" !important;
  position: absolute !important;
  right: 28px !important;
  top: -8px !important;

  color: rgba(255,255,255,.045) !important;
  font-size: 92px !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card-1 {
  --rl-route-color: #4aa3ff;
  --rl-route-rgb: 74, 163, 255;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card-2 {
  --rl-route-color: #10b981;
  --rl-route-rgb: 16, 185, 129;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card-3 {
  --rl-route-color: #fbbf24;
  --rl-route-rgb: 251, 191, 36;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card-4 {
  --rl-route-color: #f263ee;
  --rl-route-rgb: 242, 99, 238;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Iconos */
body.page-id-7 #post-7 .entry-content .rl-classes-icon {
  width: 78px !important;
  height: 78px !important;

  margin: 0 0 34px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 20px !important;

  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.20), transparent 34%),
    linear-gradient(145deg, rgba(var(--rl-route-rgb), .92), rgba(var(--rl-route-rgb), .56)) !important;

  box-shadow:
    0 18px 38px rgba(var(--rl-route-rgb), .30),
    0 8px 18px rgba(var(--rl-route-rgb), .14),
    inset 0 1px 0 rgba(255,255,255,.18) !important;

  color: var(--rl-route-color) !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-svg,
body.page-id-7 #post-7 .entry-content .rl-classes-svg svg {
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-svg svg *,
body.page-id-7 #post-7 .entry-content .rl-classes-icon svg * {
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* Texto tarjeta */
body.page-id-7 #post-7 .entry-content .rl-classes-card-title {
  margin: 0 0 22px 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(25px, 1.75vw, 31px) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card-text,
body.page-id-7 #post-7 .entry-content .rl-classes-card > p {
  margin: 0 0 22px 0 !important;
  padding: 0 !important;

  color: rgba(226,232,240,.86) !important;

  font-size: 17px !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card strong {
  color: #ffffff !important;
  font-weight: 900 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card h4 {
  margin: 18px 0 18px 0 !important;

  color: rgba(147,169,205,.92) !important;

  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card ul {
  display: grid !important;
  gap: 13px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card li {
  position: relative !important;

  margin: 0 !important;
  padding: 0 0 0 30px !important;

  color: rgba(238,244,255,.92) !important;

  font-size: 16px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;
}

body.page-id-7 #post-7 .entry-content .rl-classes-card li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  color: var(--rl-route-color) !important;

  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

/* Ocultar cualquier Ver ruta / enlace inferior */
body.page-id-7 #post-7 .entry-content .rl-classes-card a,
body.page-id-7 #post-7 .entry-content .rl-classes-card .wp-block-button,
body.page-id-7 #post-7 .entry-content .rl-classes-card .wp-block-buttons,
body.page-id-7 #post-7 .entry-content .rl-classes-card [class*="link"],
body.page-id-7 #post-7 .entry-content .rl-classes-card [class*="button"] {
  display: none !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {
  body.page-id-7 #post-7 .entry-content > .rl-classes-section {
    padding: 112px 0 120px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-header {
    grid-template-columns: 1fr !important;
    margin-bottom: 52px !important;
    padding-bottom: 42px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-intro {
    grid-column: 1 !important;
    grid-row: auto !important;
    max-width: 620px !important;
    text-align: left !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card {
    min-height: auto !important;
  }
}

/* Movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-classes-section {
    padding: 92px 0 104px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-header {
    display: block !important;
    margin: 0 0 42px 0 !important;
    padding: 0 0 34px 0 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-kicker {
    margin-bottom: 22px !important;
    font-size: 11px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-title {
    max-width: 100% !important;
    margin-bottom: 28px !important;

    font-size: clamp(38px, 10.5vw, 48px) !important;
    line-height: 1.08 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-intro {
    padding: 18px 20px !important;
    border-radius: 18px !important;

    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card {
    min-height: auto !important;
    padding: 30px 26px 34px !important;
    border-radius: 26px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-icon {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 28px !important;
    border-radius: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-svg,
  body.page-id-7 #post-7 .entry-content .rl-classes-svg svg {
    width: 29px !important;
    height: 29px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card-title {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card-text,
  body.page-id-7 #post-7 .entry-content .rl-classes-card > p {
    font-size: 15.5px !important;
    line-height: 1.58 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card li {
    font-size: 14.5px !important;
    line-height: 1.42 !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-classes-inner {
    width: calc(100vw - 36px) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card {
    padding: 28px 22px 32px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-classes-card-title {
    font-size: 22px !important;
  }
}

/* =====================================================
   BLOQUE COMO SON LAS CLASES - PREMIUM WHITE
   GenerateBlocks / Home
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-lessons-section {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 40 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: clamp(112px, 9vw, 150px) 0 clamp(105px, 8vw, 140px) !important;

  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 18% 22%, rgba(47, 98, 255, 0.055), transparent 32%),
    radial-gradient(circle at 82% 34%, rgba(16, 185, 129, 0.045), transparent 34%),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 42%, #f7faff 100%) !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-header {
  max-width: 900px !important;
  margin: 0 auto clamp(68px, 6vw, 92px) !important;
  padding: 0 !important;
  text-align: center !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-title {
  margin: 0 0 24px 0 !important;
  padding: 0 !important;

  color: #071126 !important;
  font-size: clamp(44px, 4.6vw, 72px) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-title strong,
body.page-id-7 #post-7 .entry-content .rl-lessons-title b,
body.page-id-7 #post-7 .entry-content .rl-lessons-title mark {
  color: #2f62ff !important;
  background: transparent !important;
  font-weight: 900 !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-intro {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;

  color: #475569 !important;
  font-size: 20px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* Grid tarjetas */
body.page-id-7 #post-7 .entry-content .rl-lessons-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(26px, 2.4vw, 38px) !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card {
  --rl-lesson-color: #2f62ff;
  --rl-lesson-rgb: 47, 98, 255;

  position: relative !important;
  overflow: hidden !important;

  min-height: 360px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: 40px 34px 38px !important;

  border-radius: 30px !important;
  border: 1.25px solid transparent !important;

  background:
    radial-gradient(circle at 85% 8%, rgba(var(--rl-lesson-rgb), 0.085), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(251,253,255,0.94)) padding-box,
    linear-gradient(145deg, rgba(var(--rl-lesson-rgb), 0.24), rgba(219,228,238,0.34)) border-box !important;

  box-shadow:
    0 26px 55px rgba(15, 23, 42, 0.075),
    0 12px 28px rgba(var(--rl-lesson-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;

  box-sizing: border-box !important;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1) !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(var(--rl-lesson-rgb), 0.07), transparent 44%),
    radial-gradient(circle at 18% 16%, rgba(var(--rl-lesson-rgb), 0.10), transparent 30%) !important;

  opacity: .9 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Colores por tarjeta */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-1 {
  --rl-lesson-color: #2f62ff;
  --rl-lesson-rgb: 47, 98, 255;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card-2 {
  --rl-lesson-color: #6366f1;
  --rl-lesson-rgb: 99, 102, 241;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card-3 {
  --rl-lesson-color: #10b981;
  --rl-lesson-rgb: 16, 185, 129;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card-4 {
  --rl-lesson-color: #f59e0b;
  --rl-lesson-rgb: 245, 158, 11;
}

/* Iconos */
body.page-id-7 #post-7 .entry-content .rl-lessons-icon {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;

  margin: 0 0 46px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 22px !important;
  border: 1.2px solid rgba(var(--rl-lesson-rgb), 0.20) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-lesson-rgb), 0.18), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-lesson-rgb), 0.095), rgba(255,255,255,0.88)) !important;

  box-shadow:
    0 18px 38px rgba(var(--rl-lesson-rgb), 0.18),
    0 8px 18px rgba(var(--rl-lesson-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;

  color: var(--rl-lesson-color) !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-svg,
body.page-id-7 #post-7 .entry-content .rl-lessons-svg svg,
body.page-id-7 #post-7 .entry-content .rl-lessons-icon svg {
  width: 34px !important;
  height: 34px !important;
  color: var(--rl-lesson-color) !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-svg svg *,
body.page-id-7 #post-7 .entry-content .rl-lessons-icon svg * {
  stroke: currentColor !important;
}

/* Texto tarjetas */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-title {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;

  color: #071126 !important;
  font-size: clamp(25px, 1.65vw, 30px) !important;
  line-height: 1.14 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-card-text,
body.page-id-7 #post-7 .entry-content .rl-lessons-card p {
  margin: 0 !important;
  padding: 0 !important;

  color: #64748b !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
}

/* Nota final */
body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  width: fit-content !important;
  max-width: min(920px, 100%) !important;

  margin: clamp(62px, 5vw, 82px) auto 0 !important;
  padding: 18px 34px !important;

  border-radius: 999px !important;
  border: 1.25px solid rgba(147, 197, 253, 0.34) !important;

  background:
    radial-gradient(circle at 18% 20%, rgba(47,98,255,0.08), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(241,247,255,0.78)) !important;

  box-shadow:
    0 18px 42px rgba(47,98,255,0.06),
    0 8px 22px rgba(15,23,42,0.025),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;

  color: #475569 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Hover PC */
@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content .rl-lessons-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
      0 34px 70px rgba(15, 23, 42, 0.10),
      0 18px 44px rgba(var(--rl-lesson-rgb), 0.15),
      inset 0 1px 0 rgba(255,255,255,0.98) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-7 #post-7 .entry-content > .rl-lessons-section {
    padding: 98px 0 112px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-card {
    min-height: 330px !important;
  }
}

/* Movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-lessons-section {
    padding: 76px 0 84px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-header {
    margin-bottom: 44px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-title {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-intro {
    font-size: 15.5px !important;
    line-height: 1.62 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-card {
    min-height: 0 !important;
    padding: 30px 26px 34px !important;
    border-radius: 26px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-icon {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    margin-bottom: 30px !important;
    border-radius: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-svg,
  body.page-id-7 #post-7 .entry-content .rl-lessons-svg svg,
  body.page-id-7 #post-7 .entry-content .rl-lessons-icon svg {
    width: 29px !important;
    height: 29px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-card-title {
    font-size: 20px !important;
    line-height: 1.18 !important;
    margin-bottom: 12px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-card-text,
  body.page-id-7 #post-7 .entry-content .rl-lessons-card p {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-note {
    width: 100% !important;
    margin-top: 46px !important;
    padding: 16px 22px !important;
    border-radius: 28px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-lessons-inner {
    width: calc(100vw - 36px) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-card {
    padding: 28px 22px 32px !important;
  }
}

/* =====================================================
   PARCHE LESSONS - DEGRADADO TITULO + FONDO + NOTA FULL
   Pegar al final de 00-home-base.css
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-lessons-section {
  isolation: isolate !important;

  background:
    linear-gradient(120deg,
      rgba(47, 98, 255, 0.075) 0%,
      rgba(246, 248, 251, 0.98) 28%,
      rgba(255, 255, 255, 0.98) 46%,
      rgba(16, 185, 129, 0.055) 70%,
      rgba(245, 158, 11, 0.050) 100%
    ),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 46%, #f7faff 100%) !important;
}

body.page-id-7 #post-7 .entry-content > .rl-lessons-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: clamp(360px, 34vw, 520px) !important;
  height: clamp(360px, 30vw, 520px) !important;

  background:
    linear-gradient(90deg,
      rgba(47, 98, 255, 0.12) 0%,
      rgba(99, 102, 241, 0.075) 28%,
      rgba(16, 185, 129, 0.09) 58%,
      rgba(245, 158, 11, 0.08) 100%
    ) !important;

  opacity: 0.72 !important;
  filter: blur(44px) !important;
  transform: skewY(-2deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* "las clases" con el mismo degradado que "con criterio" */
body.page-id-7 #post-7 .entry-content .rl-lessons-title strong,
body.page-id-7 #post-7 .entry-content .rl-lessons-title b,
body.page-id-7 #post-7 .entry-content .rl-lessons-title mark {
  color: transparent !important;
  background:
    linear-gradient(90deg, #2f62ff 0%, #2454df 46%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

/* Si la nota está metida dentro del grid, fuerza que ocupe toda la fila */
body.page-id-7 #post-7 .entry-content .rl-lessons-grid > .rl-lessons-note,
body.page-id-7 #post-7 .entry-content .rl-lessons-grid > *:has(.rl-lessons-note) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
}

/* Nota final horizontal, larga y centrada */
body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  display: block !important;

  width: min(100%, 1040px) !important;
  max-width: 1040px !important;

  margin: clamp(58px, 5vw, 82px) auto 0 !important;
  padding: 19px 36px !important;

  border-radius: 999px !important;
  border: 1.35px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(241,247,255,0.86)) padding-box,
    linear-gradient(135deg,
      rgba(47, 98, 255, 0.30),
      rgba(99, 102, 241, 0.18),
      rgba(16, 185, 129, 0.14)
    ) border-box !important;

  box-shadow:
    0 18px 42px rgba(47, 98, 255, 0.075),
    0 8px 22px rgba(15, 23, 42, 0.030),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;

  color: #475569 !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* Ajuste movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-lessons-section::before {
    top: 320px !important;
    height: 720px !important;
    filter: blur(34px) !important;
    opacity: 0.65 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-lessons-note {
    width: 100% !important;
    margin-top: 46px !important;
    padding: 16px 22px !important;
    border-radius: 28px !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}

/* =====================================================
   PARCHE LESSONS - COLORES COMO CHIPS
   Orden: azul, naranja, verde, rosa
   ===================================================== */

/* 1. Fundamentos - azul */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-1 {
  --rl-lesson-color: #2f62ff !important;
  --rl-lesson-rgb: 47, 98, 255 !important;
}

/* 2. Taller guiado - naranja */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-2 {
  --rl-lesson-color: #f59e0b !important;
  --rl-lesson-rgb: 245, 158, 11 !important;
}

/* 3. Auditoria / diagnostico - verde */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-3 {
  --rl-lesson-color: #10b981 !important;
  --rl-lesson-rgb: 16, 185, 129 !important;
}

/* 4. QA / optimizacion - rosa */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-4 {
  --rl-lesson-color: #f263ee !important;
  --rl-lesson-rgb: 242, 99, 238 !important;
}

/* Refuerza borde, luz e icono con el color de cada tarjeta */
body.page-id-7 #post-7 .entry-content .rl-lessons-card {
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--rl-lesson-rgb), 0.18), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(var(--rl-lesson-rgb), 0.10), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(249,252,255,0.94)) padding-box,
    linear-gradient(145deg, rgba(var(--rl-lesson-rgb), 0.34), rgba(219,228,238,0.28)) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 26px 58px rgba(15, 23, 42, 0.075),
    0 18px 46px rgba(var(--rl-lesson-rgb), 0.13),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-icon {
  color: var(--rl-lesson-color) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-lesson-rgb), 0.22), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-lesson-rgb), 0.115), rgba(255,255,255,0.90)) !important;

  border-color: rgba(var(--rl-lesson-rgb), 0.24) !important;

  box-shadow:
    0 18px 40px rgba(var(--rl-lesson-rgb), 0.22),
    0 8px 20px rgba(var(--rl-lesson-rgb), 0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

body.page-id-7 #post-7 .entry-content .rl-lessons-svg,
body.page-id-7 #post-7 .entry-content .rl-lessons-svg svg,
body.page-id-7 #post-7 .entry-content .rl-lessons-icon svg {
  color: var(--rl-lesson-color) !important;
  stroke: currentColor !important;
}

/* =====================================================
   PARCHE FONDOS SUAVES HERO + SOBRE MI
   Mismo ambiente premium que el bloque "Como son las clases"
   ===================================================== */

/* HERO: capa de degradado suave detrás del primer bloque */
body.page-id-7 #post-7 .entry-content {
  position: relative !important;
  isolation: isolate !important;
}

body.page-id-7 #post-7 .entry-content::before {
  content: "" !important;
  position: absolute !important;

  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  height: clamp(820px, 62vw, 1080px) !important;

  background:
    radial-gradient(circle at 14% 22%, rgba(47, 98, 255, 0.105), transparent 34%),
    radial-gradient(circle at 54% 18%, rgba(245, 158, 11, 0.050), transparent 30%),
    radial-gradient(circle at 78% 34%, rgba(16, 185, 129, 0.070), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(242, 99, 238, 0.055), transparent 32%),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 72%, rgba(246, 248, 251, 0) 100%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* Mantiene el contenido del hero por encima del fondo */
body.page-id-7 #post-7 .entry-content > :not(.rl-metodo-section):not(.rl-about-section):not(.rl-classes-section):not(.rl-lessons-section) {
  position: relative !important;
  z-index: 1 !important;
}

/* Las secciones posteriores siguen mandando sobre el fondo del hero */
body.page-id-7 #post-7 .entry-content > .rl-metodo-section,
body.page-id-7 #post-7 .entry-content > .rl-about-section,
body.page-id-7 #post-7 .entry-content > .rl-classes-section,
body.page-id-7 #post-7 .entry-content > .rl-lessons-section {
  position: relative !important;
  z-index: 2 !important;
}

/* SOBRE MI: fondo blanco con degradado suave, mismo lenguaje visual */
body.page-id-7 #post-7 .entry-content > .rl-about-section {
  isolation: isolate !important;

  background:
    radial-gradient(circle at 16% 26%, rgba(47, 98, 255, 0.080), transparent 34%),
    radial-gradient(circle at 46% 18%, rgba(245, 158, 11, 0.040), transparent 30%),
    radial-gradient(circle at 76% 32%, rgba(16, 185, 129, 0.060), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(242, 99, 238, 0.045), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 54%, #f6f8fb 100%) !important;
}

body.page-id-7 #post-7 .entry-content > .rl-about-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(120deg,
      rgba(47, 98, 255, 0.045) 0%,
      transparent 28%,
      rgba(16, 185, 129, 0.035) 64%,
      rgba(242, 99, 238, 0.030) 100%
    ) !important;

  opacity: 0.95 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Movil: degradado más compacto para que no manche demasiado */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content::before {
    height: 920px !important;

    background:
      radial-gradient(circle at 18% 18%, rgba(47, 98, 255, 0.095), transparent 36%),
      radial-gradient(circle at 78% 28%, rgba(16, 185, 129, 0.055), transparent 38%),
      radial-gradient(circle at 92% 16%, rgba(242, 99, 238, 0.045), transparent 34%),
      linear-gradient(180deg, #f6f8fb 0%, #ffffff 76%, rgba(246, 248, 251, 0) 100%) !important;
  }

  body.page-id-7 #post-7 .entry-content > .rl-about-section {
    background:
      radial-gradient(circle at 18% 18%, rgba(47, 98, 255, 0.070), transparent 36%),
      radial-gradient(circle at 82% 26%, rgba(16, 185, 129, 0.045), transparent 38%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 62%, #f6f8fb 100%) !important;
  }
}

/* =====================================================
   PARCHE LESSONS - NOTA FINAL MAS DISCRETA
   ===================================================== */

body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  background:
    linear-gradient(145deg, rgba(248, 250, 252, 0.72), rgba(241, 245, 249, 0.58)) !important;

  border: 1px solid rgba(203, 213, 225, 0.48) !important;

  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.030),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;

  color: #64748b !important;
  font-weight: 700 !important;
}

@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-lessons-note {
    background:
      linear-gradient(145deg, rgba(248, 250, 252, 0.68), rgba(241, 245, 249, 0.52)) !important;

    border-color: rgba(203, 213, 225, 0.42) !important;

    color: #64748b !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    box-shadow:
      0 8px 20px rgba(15, 23, 42, 0.026),
      inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  }
}

/* =====================================================
   FINAL REAL RUTAS DARK V3 - DOBLE PREMIUM
   Bloque: rl-classes-section / tarjetas Ruta 1, 2, 3
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-classes-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  padding: clamp(132px, 9vw, 176px) 0 clamp(132px, 9vw, 176px) !important;

  background:
    radial-gradient(circle at 12% 12%, rgba(47, 98, 255, .30), transparent 34%),
    radial-gradient(circle at 78% 20%, rgba(16, 185, 129, .18), transparent 38%),
    radial-gradient(circle at 70% 86%, rgba(245, 158, 11, .13), transparent 38%),
    linear-gradient(180deg, #061026 0%, #081936 50%, #061126 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-classes-section::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(90deg, rgba(47,98,255,.16), transparent 22%, transparent 76%, rgba(16,185,129,.10)),
    radial-gradient(circle at 50% 0%, rgba(47,98,255,.18), transparent 46%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-inner {
  position: relative !important;
  z-index: 1 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2.7vw, 42px) !important;
}

/* Base tarjetas */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  min-height: 650px !important;
  padding: 42px 38px 42px !important;

  border-radius: 32px !important;
  border: 1.5px solid transparent !important;

  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s cubic-bezier(.2,.8,.2,1) !important;
}

/* Ruta 1 - azul */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card.rl-classes-card-1 {
  --rl-route-color: #4aa3ff;
  --rl-route-rgb: 74, 163, 255;
  --rl-route-color-2: #2f62ff;
  --rl-route-rgb-2: 47, 98, 255;

  background:
    radial-gradient(circle at 18% 12%, rgba(74,163,255,.32), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(47,98,255,.18), transparent 34%),
    linear-gradient(145deg, rgba(31,47,82,.95), rgba(17,30,58,.97)) padding-box,
    linear-gradient(145deg, rgba(74,163,255,.78), rgba(47,98,255,.34), rgba(255,255,255,.10)) border-box !important;

  box-shadow:
    0 30px 76px rgba(74,163,255,.20),
    0 24px 58px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

/* Ruta 2 - verde */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card.rl-classes-card-2 {
  --rl-route-color: #10b981;
  --rl-route-rgb: 16, 185, 129;
  --rl-route-color-2: #14b8a6;
  --rl-route-rgb-2: 20, 184, 166;

  background:
    radial-gradient(circle at 18% 12%, rgba(16,185,129,.34), transparent 35%),
    radial-gradient(circle at 86% 10%, rgba(20,184,166,.20), transparent 34%),
    linear-gradient(145deg, rgba(28,58,72,.95), rgba(17,30,58,.97)) padding-box,
    linear-gradient(145deg, rgba(16,185,129,.82), rgba(20,184,166,.34), rgba(255,255,255,.10)) border-box !important;

  box-shadow:
    0 30px 76px rgba(16,185,129,.20),
    0 24px 58px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

/* Ruta 3 - oro */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card.rl-classes-card-3 {
  --rl-route-color: #f59e0b;
  --rl-route-rgb: 245, 158, 11;
  --rl-route-color-2: #fbbf24;
  --rl-route-rgb-2: 251, 191, 36;

  background:
    radial-gradient(circle at 18% 12%, rgba(245,158,11,.34), transparent 35%),
    radial-gradient(circle at 86% 10%, rgba(251,191,36,.18), transparent 34%),
    linear-gradient(145deg, rgba(64,55,42,.94), rgba(22,31,54,.97)) padding-box,
    linear-gradient(145deg, rgba(245,158,11,.82), rgba(251,191,36,.32), rgba(255,255,255,.10)) border-box !important;

  box-shadow:
    0 30px 76px rgba(245,158,11,.20),
    0 24px 58px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 44%),
    radial-gradient(circle at 100% 0%, rgba(var(--rl-route-rgb), .22), transparent 40%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card::after {
  position: absolute !important;
  top: -12px !important;
  right: 24px !important;

  color: rgba(255,255,255,.06) !important;
  font-size: clamp(120px, 10vw, 190px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card-1::after {
  content: "01" !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card-2::after {
  content: "02" !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card-3::after {
  content: "03" !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Iconos */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-icon {
  width: 82px !important;
  height: 82px !important;
  min-width: 82px !important;
  margin: 0 0 36px 0 !important;

  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.25), transparent 36%),
    linear-gradient(145deg, var(--rl-route-color) 0%, var(--rl-route-color-2) 100%) !important;

  box-shadow:
    0 24px 52px rgba(var(--rl-route-rgb), .44),
    0 10px 24px rgba(var(--rl-route-rgb), .22),
    inset 0 1px 0 rgba(255,255,255,.24) !important;

  color: #ffffff !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-svg,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-svg svg,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-icon svg {
  width: 35px !important;
  height: 35px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: none !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-svg svg *,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-icon svg * {
  stroke: currentColor !important;
}

/* Texto */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-card h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.14) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card p {
  color: rgba(226,232,240,.82) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card strong {
  color: #ffffff !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card h4 {
  color: rgba(203,213,225,.68) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-card li::before {
  color: var(--rl-route-color) !important;
  text-shadow: 0 0 18px rgba(var(--rl-route-rgb), .55) !important;
}

@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-classes-card:hover {
    transform: translateY(-8px) !important;

    box-shadow:
      0 38px 90px rgba(var(--rl-route-rgb), .25),
      0 26px 62px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }
}

@media (max-width: 980px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-classes-grid {
    grid-template-columns: 1fr !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-classes-card {
    min-height: auto !important;
  }
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-classes-section {
    padding: 92px 0 104px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-classes-card {
    padding: 32px 26px 36px !important;
    border-radius: 28px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-classes-icon {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    margin-bottom: 28px !important;
    border-radius: 19px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-classes-card::after {
    top: 10px !important;
    right: 18px !important;
    font-size: 118px !important;
  }
}

/* =====================================================
   RUTAS - INTRO BOX LUZ SUAVE PREMIUM
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  border: 1.25px solid rgba(185, 212, 255, .22) !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(74, 163, 255, .13), transparent 36%),
    radial-gradient(circle at 86% 24%, rgba(16, 185, 129, .10), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.020)) !important;

  box-shadow:
    0 22px 56px rgba(47, 98, 255, .10),
    0 16px 42px rgba(16, 185, 129, .055),
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(185,212,255,.055) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;

  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 38%, transparent 68%) !important;

  opacity: .72 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* =====================================================
   METODO DARK - COLOR REAL POR TARJETA V2
   Estructura real: .rl-metodo-grid > div > .rl-metodo-card
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-grid > div {
  min-width: 0 !important;
  display: flex !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card {
  --rl-metodo-color: #2f62ff;
  --rl-metodo-rgb: 47, 98, 255;
  --rl-metodo-color-2: #2454df;

  width: 100% !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  border: 1.45px solid transparent !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(var(--rl-metodo-rgb), .24), transparent 36%),
    radial-gradient(circle at 86% 10%, rgba(var(--rl-metodo-rgb), .12), transparent 34%),
    linear-gradient(145deg, rgba(31,47,82,.94), rgba(17,30,58,.965)) padding-box,
    linear-gradient(145deg, rgba(var(--rl-metodo-rgb), .64), rgba(255,255,255,.08)) border-box !important;

  box-shadow:
    0 28px 68px rgba(var(--rl-metodo-rgb), .16),
    0 22px 54px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* 1 azul */
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-grid > div:nth-child(1) > .rl-metodo-card {
  --rl-metodo-color: #2f62ff;
  --rl-metodo-rgb: 47, 98, 255;
  --rl-metodo-color-2: #2454df;
}

/* 2 verde */
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-grid > div:nth-child(2) > .rl-metodo-card {
  --rl-metodo-color: #10b981;
  --rl-metodo-rgb: 16, 185, 129;
  --rl-metodo-color-2: #14b8a6;
}

/* 3 naranja */
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-grid > div:nth-child(3) > .rl-metodo-card {
  --rl-metodo-color: #f59e0b;
  --rl-metodo-rgb: 245, 158, 11;
  --rl-metodo-color-2: #fbbf24;
}

/* 4 rosa */
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-grid > div:nth-child(4) > .rl-metodo-card {
  --rl-metodo-color: #f263ee;
  --rl-metodo-rgb: 242, 99, 238;
  --rl-metodo-color-2: #6366f1;
}

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(var(--rl-metodo-rgb), .22), transparent 42%) !important;

  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Icono vuelve a tener caja premium */
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card .rl-metodo-icon {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;

  margin: 0 0 34px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 21px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.25), transparent 36%),
    linear-gradient(145deg, var(--rl-metodo-color), var(--rl-metodo-color-2)) !important;

  box-shadow:
    0 24px 52px rgba(var(--rl-metodo-rgb), .40),
    0 10px 24px rgba(var(--rl-metodo-rgb), .20),
    inset 0 1px 0 rgba(255,255,255,.24) !important;

  color: #ffffff !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card .rl-metodo-icon svg,
html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card .rl-metodo-icon svg * {
  width: 34px !important;
  height: 34px !important;
  color: #ffffff !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-metodo-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
      0 36px 84px rgba(var(--rl-metodo-rgb), .24),
      0 26px 62px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.14) !important;
  }
}

/* =====================================================
   PATCH SOBRE MI + PUNTOS + NOTA LESSONS
   ===================================================== */

/* Titulo Sobre mi con degradado tipo "con criterio" / "las clases" */
body.page-id-7 #post-7 .entry-content .rl-about-title {
  color: transparent !important;
  background:
    linear-gradient(90deg, #071126 0%, #2454df 38%, #2f62ff 68%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Puntos Sobre mi: mas ancho util para que no corte "Explicaciones" */
@media (min-width: 981px) {
  body.page-id-7 #post-7 .entry-content .rl-about-points {
    grid-template-columns: 1.12fr .96fr 1.18fr !important;
    gap: 14px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    padding: 12px 14px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 16.5px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* Base color premium de los 3 contenedores */
body.page-id-7 #post-7 .entry-content .rl-about-point {
  --rl-about-accent: #2f62ff;
  --rl-about-rgb: 47, 98, 255;

  position: relative !important;
  overflow: hidden !important;

  border: 1.25px solid transparent !important;

  background:
    radial-gradient(circle at 18% 22%, rgba(var(--rl-about-rgb), .12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,251,255,.78)) padding-box,
    linear-gradient(135deg, rgba(var(--rl-about-rgb), .34), rgba(255,255,255,.38)) border-box !important;

  box-shadow:
    0 18px 40px rgba(var(--rl-about-rgb), .105),
    0 8px 20px rgba(15,23,42,.030),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point:nth-child(1) {
  --rl-about-accent: #2f62ff;
  --rl-about-rgb: 47, 98, 255;
}

body.page-id-7 #post-7 .entry-content .rl-about-point:nth-child(2) {
  --rl-about-accent: #f59e0b;
  --rl-about-rgb: 245, 158, 11;
}

body.page-id-7 #post-7 .entry-content .rl-about-point:nth-child(3) {
  --rl-about-accent: #10b981;
  --rl-about-rgb: 16, 185, 129;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon {
  color: var(--rl-about-accent) !important;
  border-color: rgba(var(--rl-about-rgb), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-about-rgb), .20), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,255,.84)) !important;

  box-shadow:
    0 14px 30px rgba(var(--rl-about-rgb), .16),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg,
body.page-id-7 #post-7 .entry-content .rl-about-point-icon svg * {
  color: var(--rl-about-accent) !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-point-text {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Movil: mantiene el formato grande, pero con color y luz */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-about-point {
    background:
      radial-gradient(circle at 16% 22%, rgba(var(--rl-about-rgb), .15), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,251,255,.88)) padding-box,
      linear-gradient(135deg, rgba(var(--rl-about-rgb), .32), rgba(255,255,255,.34)) border-box !important;

    box-shadow:
      0 18px 42px rgba(var(--rl-about-rgb), .105),
      0 8px 20px rgba(15,23,42,.035),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-point-text {
    font-size: 16.5px !important;
    line-height: 1.16 !important;
  }
}

/* Nota final de "Como son las clases": color suave, sin competir con tarjetas */
body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  background:
    radial-gradient(circle at 14% 20%, rgba(47,98,255,.055), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(16,185,129,.045), transparent 34%),
    linear-gradient(145deg, rgba(248,250,252,.82), rgba(241,245,249,.62)) padding-box,
    linear-gradient(135deg, rgba(47,98,255,.18), rgba(16,185,129,.12), rgba(245,158,11,.10)) border-box !important;

  border: 1.15px solid transparent !important;

  box-shadow:
    0 12px 30px rgba(47,98,255,.045),
    0 6px 18px rgba(15,23,42,.026),
    inset 0 1px 0 rgba(255,255,255,.82) !important;

  color: #64748b !important;
  font-weight: 750 !important;
}

/* =====================================================
   PATCH SOBRE MI - TITULO MAS GRANDE + TEXTO MAS FINO
   ===================================================== */

body.page-id-7 #post-7 .entry-content .rl-about-title {
  font-size: clamp(64px, 5.4vw, 88px) !important;
  line-height: .98 !important;
  font-weight: 950 !important;
  margin-bottom: 32px !important;
}

body.page-id-7 #post-7 .entry-content .rl-about-text {
  max-width: 720px !important;
  color: #475569 !important;

  font-size: 18px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-about-title {
    font-size: clamp(58px, 15vw, 72px) !important;
    line-height: .98 !important;
    margin-bottom: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-text {
    font-size: 18px !important;
    line-height: 1.62 !important;
    color: #475569 !important;
  }
}

@media (max-width: 380px) {
  body.page-id-7 #post-7 .entry-content .rl-about-title {
    font-size: clamp(50px, 14vw, 62px) !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-about-text {
    font-size: 17px !important;
  }
}

/* =====================================================
   PATCH HOME - GRISES MAS CLAROS EN PARRAFOS
   ===================================================== */

body.page-id-7,
body.home {
  --rl-text: #475569 !important;
  --rl-ink-soft: #475569 !important;
  --rl-text-soft: #64748b !important;
}

/* Parrafo hero */
body.page-id-7 #post-7 .entry-content > div:has(> .gb-element-2c9b9665) + p,
body.page-id-7 #post-7 .entry-content > .gb-element-2c9b9665 + p {
  color: #475569 !important;
}

/* Textos Sobre mi */
body.page-id-7 #post-7 .entry-content .rl-about-text {
  color: #475569 !important;
}

/* Intro de Como son las clases */
body.page-id-7 #post-7 .entry-content .rl-lessons-intro {
  color: #475569 !important;
}

/* Textos de tarjetas blancas */
body.page-id-7 #post-7 .entry-content .rl-lessons-card-text,
body.page-id-7 #post-7 .entry-content .rl-lessons-card p {
  color: #64748b !important;
}

/* Nota final, suave pero legible */
body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  color: #64748b !important;
}

/* Textos normales de la home que no sean bloques oscuros */
body.page-id-7 #post-7 .entry-content p:not(
  .rl-metodo-card p
):not(
  .rl-classes-card p
) {
  color: #475569 !important;
}

/* Nota final de clases - mas clara y discreta */
body.page-id-7 #post-7 .entry-content .rl-lessons-note {
  color: #94a3b8 !important;
  font-weight: 600 !important;

  background:
    linear-gradient(145deg, rgba(248,250,252,.46), rgba(241,245,249,.34)) padding-box,
    linear-gradient(135deg, rgba(203,213,225,.24), rgba(226,232,240,.18)) border-box !important;

  border: 1px solid transparent !important;

  box-shadow:
    0 8px 22px rgba(15,23,42,.018),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content .rl-lessons-note {
    color: #94a3b8 !important;
    font-weight: 600 !important;
  }
}

/* =====================================================
   FIX FINAL - INTRO RUTAS LEGIBLE + NOTA CLASES MAS CLARA
   ===================================================== */

/* Caja "Elige el camino..." en bloque oscuro: mas contraste y lectura */
html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro p,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro span,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro strong {
  color: #f1f7ff !important;
  -webkit-text-fill-color: #f1f7ff !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, .28),
    0 0 18px rgba(147, 197, 253, .16) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-classes-intro {
  background:
    radial-gradient(circle at 18% 18%, rgba(74, 163, 255, .18), transparent 38%),
    radial-gradient(circle at 86% 24%, rgba(16, 185, 129, .13), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;

  border-color: rgba(219, 234, 254, .30) !important;

  box-shadow:
    0 24px 58px rgba(47, 98, 255, .13),
    0 18px 44px rgba(16, 185, 129, .07),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(185,212,255,.08) !important;
}

/* Nota inferior de "Como son las clases": gris claro real y discreto */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note p,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note span,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note b {
  color: #9aa8b8 !important;
  -webkit-text-fill-color: #9aa8b8 !important;
  font-weight: 600 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
  background:
    linear-gradient(145deg, rgba(248,250,252,.42), rgba(241,245,249,.28)) padding-box,
    linear-gradient(135deg, rgba(203,213,225,.20), rgba(226,232,240,.16)) border-box !important;

  border: 1px solid transparent !important;

  box-shadow:
    0 8px 20px rgba(15,23,42,.014),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

/* Nota clases - un pelin mas visible */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note p,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note span,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note b {
  color: #8391a5 !important;
  -webkit-text-fill-color: #8391a5 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
  background:
    linear-gradient(145deg, rgba(248,250,252,.54), rgba(241,245,249,.40)) padding-box,
    linear-gradient(135deg, rgba(148,163,184,.30), rgba(203,213,225,.22)) border-box !important;

  border: 1.15px solid transparent !important;

  box-shadow:
    0 10px 24px rgba(15,23,42,.020),
    inset 0 1px 0 rgba(255,255,255,.68) !important;
}

/* Nota clases - luz y borde suave */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
  border: 1.15px solid transparent !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(47,98,255,.050), transparent 36%),
    radial-gradient(circle at 86% 24%, rgba(16,185,129,.040), transparent 38%),
    linear-gradient(145deg, rgba(248,250,252,.58), rgba(241,245,249,.42)) padding-box,
    linear-gradient(135deg, rgba(147,197,253,.24), rgba(16,185,129,.14), rgba(226,232,240,.18)) border-box !important;

  box-shadow:
    0 12px 28px rgba(47,98,255,.030),
    0 8px 22px rgba(16,185,129,.020),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* Hero chips - texto negro y fuerte */
body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
  color: #071126 !important;
  -webkit-text-fill-color: #071126 !important;
  font-weight: 900 !important;
}

/* =====================================================
   BLOQUE AUDIENCIA - PARA QUIEN SON ESTAS CLASES
   GenerateBlocks: section + inner + grid directo
   ===================================================== */

body.page-id-7 #post-7 .entry-content > .rl-audience-section {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  order: 50 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  padding: clamp(96px, 8vw, 136px) 0 clamp(110px, 8vw, 150px) !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 14% 18%, rgba(47, 98, 255, .055), transparent 34%),
    radial-gradient(circle at 84% 30%, rgba(16, 185, 129, .045), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 52%, #ffffff 100%) !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-header {
  max-width: 920px !important;
  margin: 0 auto clamp(58px, 5.5vw, 82px) !important;
  text-align: center !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #071126 !important;
  font-size: clamp(44px, 4.8vw, 74px) !important;
  line-height: 1.04 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-title strong,
body.page-id-7 #post-7 .entry-content .rl-audience-title b,
body.page-id-7 #post-7 .entry-content .rl-audience-title mark {
  color: transparent !important;
  background: linear-gradient(90deg, #2f62ff 0%, #2454df 46%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

/* Grid directo de GenerateBlocks */
body.page-id-7 #post-7 .entry-content .rl-audience-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(26px, 2.5vw, 40px) !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Por si GenerateBlocks mete columnas intermedias */
body.page-id-7 #post-7 .entry-content .rl-audience-grid > .gb-grid-column,
body.page-id-7 #post-7 .entry-content .rl-audience-grid > div {
  min-width: 0 !important;
  display: flex !important;
}

/* Tarjetas */
body.page-id-7 #post-7 .entry-content .rl-audience-card {
  --rl-audience-color: #2f62ff;
  --rl-audience-rgb: 47, 98, 255;

  width: 100% !important;
  min-height: 300px !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  padding: clamp(34px, 3vw, 52px) !important;

  border-radius: 32px !important;
  border: 1.25px solid transparent !important;

  background:
    radial-gradient(circle at 14% 12%, rgba(var(--rl-audience-rgb), .105), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.94)) padding-box,
    linear-gradient(145deg, rgba(var(--rl-audience-rgb), .22), rgba(219,228,238,.38)) border-box !important;

  box-shadow:
    0 24px 58px rgba(15, 23, 42, .065),
    0 12px 30px rgba(var(--rl-audience-rgb), .075),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-1 {
  --rl-audience-color: #2f62ff;
  --rl-audience-rgb: 47, 98, 255;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-2 {
  --rl-audience-color: #10b981;
  --rl-audience-rgb: 16, 185, 129;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-3 {
  --rl-audience-color: #f59e0b;
  --rl-audience-rgb: 245, 158, 11;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-4 {
  --rl-audience-color: #6366f1;
  --rl-audience-rgb: 99, 102, 241;
}

body.page-id-7 #post-7 .entry-content .rl-audience-icon {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;

  margin: 0 0 34px 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 20px !important;
  border: 1.2px solid rgba(var(--rl-audience-rgb), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-audience-rgb), .18), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-audience-rgb), .12), rgba(255,255,255,.92)) !important;

  box-shadow:
    0 16px 34px rgba(var(--rl-audience-rgb), .16),
    inset 0 1px 0 rgba(255,255,255,.94) !important;

  color: var(--rl-audience-color) !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-svg,
body.page-id-7 #post-7 .entry-content .rl-audience-svg svg,
body.page-id-7 #post-7 .entry-content .rl-audience-icon svg {
  width: 30px !important;
  height: 30px !important;
  color: var(--rl-audience-color) !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-title {
  margin: 0 0 22px 0 !important;
  color: #071126 !important;

  font-size: clamp(27px, 2vw, 36px) !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

body.page-id-7 #post-7 .entry-content .rl-audience-card-text,
body.page-id-7 #post-7 .entry-content .rl-audience-card p {
  margin: 0 !important;
  color: #64748b !important;

  font-size: 19px !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

@media (hover: hover) {
  body.page-id-7 #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-6px) !important;
    box-shadow:
      0 32px 74px rgba(15, 23, 42, .085),
      0 18px 42px rgba(var(--rl-audience-rgb), .13),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-id-7 #post-7 .entry-content .rl-audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-card {
    min-height: 280px !important;
    padding: 34px 30px !important;
  }
}

/* Movil */
@media (max-width: 767px) {
  body.page-id-7 #post-7 .entry-content > .rl-audience-section {
    padding: 78px 0 88px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-header {
    margin-bottom: 42px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-title {
    font-size: clamp(34px, 9vw, 44px) !important;
    line-height: 1.08 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-card {
    min-height: auto !important;
    padding: 30px 26px 34px !important;
    border-radius: 28px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-icon {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    margin-bottom: 28px !important;
    border-radius: 18px !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-card-title {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }

  body.page-id-7 #post-7 .entry-content .rl-audience-card-text,
  body.page-id-7 #post-7 .entry-content .rl-audience-card p {
    font-size: 16px !important;
    line-height: 1.62 !important;
  }
}

/* =====================================================
   AUDIENCIA - DOBLE PREMIUM FINAL
   Orden colores: azul, naranja, verde, rosa
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 12% 18%, rgba(47, 98, 255, .115), transparent 34%),
    radial-gradient(circle at 42% 22%, rgba(245, 158, 11, .060), transparent 32%),
    radial-gradient(circle at 78% 30%, rgba(16, 185, 129, .080), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(242, 99, 238, .060), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f7faff 46%, #ffffff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 250px !important;
  height: 520px !important;

  background:
    linear-gradient(90deg,
      rgba(47, 98, 255, .10),
      rgba(245, 158, 11, .060),
      rgba(16, 185, 129, .085),
      rgba(242, 99, 238, .070)
    ) !important;

  filter: blur(48px) !important;
  opacity: .72 !important;
  transform: skewY(-2deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* H2: evita que "clases?" se corte y queda más profesional */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
  max-width: 1120px !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  font-size: clamp(46px, 4.45vw, 78px) !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title mark {
  display: inline !important;
  white-space: normal !important;

  color: transparent !important;
  background:
    linear-gradient(90deg, #2f62ff 0%, #2454df 42%, #6366f1 72%, #f263ee 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Grid */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-grid {
  gap: clamp(30px, 3vw, 48px) !important;
}

/* Base tarjetas */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
  --rl-audience-color: #2f62ff;
  --rl-audience-rgb: 47, 98, 255;
  --rl-audience-color-2: #2454df;
  --rl-audience-rgb-2: 36, 84, 223;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  min-height: 360px !important;

  border: 1.45px solid transparent !important;
  border-radius: 34px !important;

  background:
    radial-gradient(circle at 14% 12%, rgba(var(--rl-audience-rgb), .22), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(var(--rl-audience-rgb-2), .11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,252,255,.92)) padding-box,
    linear-gradient(145deg,
      rgba(var(--rl-audience-rgb), .46),
      rgba(var(--rl-audience-rgb-2), .20),
      rgba(255,255,255,.36)
    ) border-box !important;

  box-shadow:
    0 30px 70px rgba(15, 23, 42, .075),
    0 24px 58px rgba(var(--rl-audience-rgb), .14),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,.62), transparent 46%),
    radial-gradient(circle at 100% 0%, rgba(var(--rl-audience-rgb), .16), transparent 42%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 1 azul */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-1 {
  --rl-audience-color: #2f62ff;
  --rl-audience-rgb: 47, 98, 255;
  --rl-audience-color-2: #2454df;
  --rl-audience-rgb-2: 36, 84, 223;
}

/* 2 naranja */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2 {
  --rl-audience-color: #f59e0b;
  --rl-audience-rgb: 245, 158, 11;
  --rl-audience-color-2: #fbbf24;
  --rl-audience-rgb-2: 251, 191, 36;
}

/* 3 verde */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-3 {
  --rl-audience-color: #10b981;
  --rl-audience-rgb: 16, 185, 129;
  --rl-audience-color-2: #14b8a6;
  --rl-audience-rgb-2: 20, 184, 166;
}

/* 4 rosa */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
  --rl-audience-color: #f263ee;
  --rl-audience-rgb: 242, 99, 238;
  --rl-audience-color-2: #6366f1;
  --rl-audience-rgb-2: 99, 102, 241;
}

/* Iconos */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon {
  color: var(--rl-audience-color) !important;

  border: 1.25px solid rgba(var(--rl-audience-rgb), .28) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-audience-rgb), .25), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-audience-rgb), .14), rgba(255,255,255,.94)) !important;

  box-shadow:
    0 20px 44px rgba(var(--rl-audience-rgb), .24),
    0 8px 20px rgba(var(--rl-audience-rgb), .10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-svg,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-svg svg,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon svg {
  color: var(--rl-audience-color) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Títulos y textos */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-title {
  color: #071126 !important;
  font-weight: 900 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-text,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card p {
  color: #475569 !important;
}

/* Hover */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
      0 36px 84px rgba(15, 23, 42, .09),
      0 26px 62px rgba(var(--rl-audience-rgb), .20),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
    font-size: clamp(44px, 6.2vw, 62px) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
    min-height: 330px !important;
  }
}

/* Movil */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
    top: 230px !important;
    height: 760px !important;
    filter: blur(34px) !important;
    opacity: .62 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
    font-size: clamp(34px, 8.7vw, 43px) !important;
    line-height: 1.08 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
    min-height: auto !important;
    border-radius: 28px !important;
  }
}

/* =====================================================
   AUDIENCIA - HOVER 3D + TITULOS POR COLOR
   ===================================================== */

/* Titulo de cada tarjeta: color propio con degradado fino */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-card-title {
  color: transparent !important;

  background:
    linear-gradient(
      90deg,
      var(--rl-audience-color) 0%,
      var(--rl-audience-color-2) 58%,
      #071126 140%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    filter .24s cubic-bezier(.2,.8,.2,1),
    background .24s cubic-bezier(.2,.8,.2,1) !important;
}

/* Movimiento base de tarjeta e icono */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
  transform: translateY(0) scale(1) !important;
  transform-origin: center !important;

  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s cubic-bezier(.2,.8,.2,1),
    border-color .26s cubic-bezier(.2,.8,.2,1),
    background .26s cubic-bezier(.2,.8,.2,1) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-icon {
  transform: translateY(0) scale(1) !important;

  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    box-shadow .26s cubic-bezier(.2,.8,.2,1),
    background .26s cubic-bezier(.2,.8,.2,1) !important;
}

/* Hover: la tarjeta sale hacia fuera */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-12px) scale(1.018) !important;

    border-color: rgba(var(--rl-audience-rgb), .34) !important;

    background:
      radial-gradient(circle at 14% 12%, rgba(var(--rl-audience-rgb), .28), transparent 36%),
      radial-gradient(circle at 88% 10%, rgba(var(--rl-audience-rgb-2), .15), transparent 35%),
      linear-gradient(145deg, rgba(255,255,255,1), rgba(248,252,255,.96)) padding-box,
      linear-gradient(145deg,
        rgba(var(--rl-audience-rgb), .62),
        rgba(var(--rl-audience-rgb-2), .28),
        rgba(255,255,255,.40)
      ) border-box !important;

    box-shadow:
      0 42px 92px rgba(15, 23, 42, .12),
      0 30px 72px rgba(var(--rl-audience-rgb), .24),
      0 10px 28px rgba(var(--rl-audience-rgb-2), .11),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-icon {
    transform: translateY(-6px) scale(1.08) !important;

    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,.34), transparent 36%),
      linear-gradient(145deg, var(--rl-audience-color) 0%, var(--rl-audience-color-2) 100%) !important;

    color: #ffffff !important;

    box-shadow:
      0 28px 58px rgba(var(--rl-audience-rgb), .34),
      0 12px 28px rgba(var(--rl-audience-rgb), .18),
      inset 0 1px 0 rgba(255,255,255,.28) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-icon svg,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-icon svg * {
    color: #ffffff !important;
    stroke: currentColor !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title {
    filter: saturate(1.16) brightness(.98) !important;
    transform: translateY(-2px) !important;

    background:
      linear-gradient(
        90deg,
        var(--rl-audience-color) 0%,
        var(--rl-audience-color-2) 52%,
        var(--rl-audience-color) 100%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
}

/* En movil no hay hover real: dejamos los titulos con color pero sin saltos */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-card-title {
    background:
      linear-gradient(
        90deg,
        var(--rl-audience-color) 0%,
        var(--rl-audience-color-2) 72%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
  }
}

/* =====================================================
   HOME FINAL - UNION SECCIONES + DEGRADADO MARCA + ICONOS
   ===================================================== */

html body.page-id-7,
html body.home {
  --rl-brand-gradient:
    linear-gradient(90deg, #2454df 0%, #2f62ff 34%, #6366f1 70%, #f263ee 100%);
}

/* 1. Quitar hueco entre "Como son las clases" y "Para quien..." */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  padding-bottom: clamp(46px, 4vw, 68px) !important;

  background:
    linear-gradient(120deg,
      rgba(47, 98, 255, .070) 0%,
      rgba(246, 248, 251, .98) 28%,
      rgba(255, 255, 255, .98) 46%,
      rgba(16, 185, 129, .055) 70%,
      rgba(245, 158, 11, .045) 100%
    ),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 46%, #f7faff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  margin-top: -1px !important;
  padding-top: clamp(48px, 4.5vw, 72px) !important;

  background:
    radial-gradient(circle at 12% 10%, rgba(47, 98, 255, .090), transparent 34%),
    radial-gradient(circle at 44% 14%, rgba(245, 158, 11, .050), transparent 32%),
    radial-gradient(circle at 78% 18%, rgba(16, 185, 129, .070), transparent 38%),
    radial-gradient(circle at 92% 10%, rgba(242, 99, 238, .055), transparent 34%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 46%, #f8fbff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  top: -80px !important;
  height: clamp(560px, 42vw, 760px) !important;
  opacity: .58 !important;
}

/* 2. Nuevo degradado azul premium para titulares destacados */
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title mark,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title mark,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title mark,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-title mark,
html body.page-id-7 #page #post-7 .entry-content .rl-about-title {
  color: transparent !important;
  background: var(--rl-brand-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 950 !important;
}

/* 3. Anti-corte de textos grandes y titulos de tarjetas */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
  width: 100% !important;
  max-width: min(1180px, calc(100vw - 64px)) !important;
  overflow: visible !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
  display: block !important;
  width: 100% !important;
  max-width: min(1180px, calc(100vw - 64px)) !important;

  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 2px 8px !important;

  font-size: clamp(40px, 4.05vw, 74px) !important;
  line-height: 1.08 !important;

  white-space: normal !important;
  text-wrap: balance !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  overflow: visible !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-title *,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title *,
html body.page-id-7 #page #post-7 .entry-content .rl-about-title *,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point-text {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  overflow: visible !important;
}

/* 4. Iconos estandar premium en todos los bloques */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon {
  --rl-icon-color: var(--rl-lesson-color);
  --rl-icon-rgb: var(--rl-lesson-rgb);
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon {
  --rl-icon-color: var(--rl-audience-color);
  --rl-icon-rgb: var(--rl-audience-rgb);
}

html body.page-id-7 #page #post-7 .entry-content .rl-about-point-icon {
  --rl-icon-color: var(--rl-about-accent);
  --rl-icon-rgb: var(--rl-about-rgb);
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point-icon {
  border-radius: 20px !important;
  border: 1.25px solid rgba(var(--rl-icon-rgb), .26) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-icon-rgb), .24), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-icon-rgb), .13), rgba(255,255,255,.94)) !important;

  box-shadow:
    0 18px 40px rgba(var(--rl-icon-rgb), .20),
    0 8px 20px rgba(var(--rl-icon-rgb), .09),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  color: var(--rl-icon-color) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-metodo-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-classes-icon {
  border-radius: 21px !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.26), transparent 36%),
    linear-gradient(145deg, var(--rl-metodo-color, var(--rl-route-color)) 0%, var(--rl-metodo-color-2, var(--rl-route-color-2)) 100%) !important;

  box-shadow:
    0 24px 52px rgba(var(--rl-metodo-rgb, var(--rl-route-rgb)), .40),
    0 10px 24px rgba(var(--rl-metodo-rgb, var(--rl-route-rgb)), .20),
    inset 0 1px 0 rgba(255,255,255,.24) !important;

  color: #ffffff !important;
}

html body.page-id-7 #page #post-7 .entry-content :is(
  .rl-lessons-icon,
  .rl-audience-icon,
  .rl-about-point-icon,
  .rl-metodo-icon,
  .rl-classes-icon
) svg,
html body.page-id-7 #page #post-7 .entry-content :is(
  .rl-lessons-icon,
  .rl-audience-icon,
  .rl-about-point-icon,
  .rl-metodo-icon,
  .rl-classes-icon
) svg * {
  stroke: currentColor !important;
  fill: none !important;
}

/* 5. Responsive del H2 audiencia */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-bottom: 42px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 52px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-header,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
    max-width: calc(100vw - 48px) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-title {
    font-size: clamp(32px, 8.2vw, 40px) !important;
    line-height: 1.10 !important;
  }
}

/* =====================================================
   HOME - BOTONES HERO DOBLE PREMIUM V2
   Ver rutas + Como son las clases
   ===================================================== */

html body.page-id-7,
html body.home {
  --rl-premium-gradient: linear-gradient(90deg, #2454df 0%, #2f62ff 34%, #6366f1 70%, #f263ee 100%);
}

/* Base comun */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  min-height: 58px !important;
  border-radius: 999px !important;
  border: 1.35px solid transparent !important;

  font-weight: 950 !important;
  letter-spacing: 0 !important;

  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s cubic-bezier(.2,.8,.2,1),
    background .22s cubic-bezier(.2,.8,.2,1),
    color .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* Boton principal: Ver rutas */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:visited {
  color: #ffffff !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 36%) padding-box,
    linear-gradient(135deg, #071126 0%, #102452 42%, #2454df 78%, #6366f1 100%) padding-box,
    var(--rl-premium-gradient) border-box !important;

  box-shadow:
    0 20px 46px rgba(47,98,255,.20),
    0 10px 24px rgba(9,20,47,.16),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 38%, transparent 66%) !important;

  opacity: .44 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:hover,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:focus {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.24), transparent 36%) padding-box,
    linear-gradient(135deg, #102452 0%, #2454df 48%, #6366f1 76%, #f263ee 120%) padding-box,
    var(--rl-premium-gradient) border-box !important;

  box-shadow:
    0 28px 62px rgba(47,98,255,.26),
    0 14px 34px rgba(99,102,241,.14),
    inset 0 1px 0 rgba(255,255,255,.22) !important;

  transform: translateY(-2px) !important;
}

/* Flecha del boton principal */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309::after {
  content: "\2192" !important;
  margin-left: 13px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

/* Boton secundario: Como son las clases */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:visited {
  color: #071126 !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(47,98,255,.070), transparent 36%) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(247,251,255,.82)) padding-box,
    var(--rl-premium-gradient) border-box !important;

  box-shadow:
    0 16px 38px rgba(47,98,255,.075),
    0 8px 22px rgba(99,102,241,.040),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:hover,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:focus {
  color: transparent !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(47,98,255,.10), transparent 36%) padding-box,
    linear-gradient(145deg, #ffffff, #eef5ff) padding-box,
    var(--rl-premium-gradient) border-box !important;

  -webkit-background-clip: padding-box, padding-box, border-box !important;
  box-shadow:
    0 22px 52px rgba(47,98,255,.13),
    0 10px 26px rgba(242,99,238,.055),
    inset 0 1px 0 rgba(255,255,255,.98) !important;

  transform: translateY(-2px) !important;
}

/* Texto degradado solo en hover del secundario */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:hover {
  color: #2454df !important;
}

/* Mobile: botones full-width y proporcionados */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309,
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    font-size: 16.5px !important;
  }
}

/* =====================================================
   HOME - BOTONES COLOR DOBLE PREMIUM CLARO
   Base como la i/t de "criterio"
   ===================================================== */

html body.page-id-7,
html body.home {
  --rl-button-premium:
    linear-gradient(100deg, #2f62ff 0%, #3f73ff 34%, #6366f1 66%, #f263ee 100%);
}

/* Boton principal Ver rutas: mas azul/violeta, menos oscuro */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:visited {
  color: #ffffff !important;

  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 34%) padding-box,
    linear-gradient(115deg, #2454df 0%, #2f62ff 34%, #6366f1 70%, #f263ee 112%) padding-box,
    linear-gradient(100deg, #2f62ff 0%, #6366f1 62%, #f263ee 100%) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 22px 52px rgba(47,98,255,.24),
    0 12px 30px rgba(99,102,241,.16),
    0 8px 22px rgba(242,99,238,.10),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Brillo interior */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309::before {
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.26) 38%, transparent 66%) !important;
  opacity: .55 !important;
}

/* Hover: mas luminoso, no mas oscuro */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:hover,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:focus {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.34), transparent 34%) padding-box,
    linear-gradient(115deg, #2f62ff 0%, #3f73ff 36%, #6366f1 68%, #f263ee 106%) padding-box,
    linear-gradient(100deg, #3f73ff 0%, #6366f1 58%, #f263ee 100%) border-box !important;

  box-shadow:
    0 28px 68px rgba(47,98,255,.30),
    0 16px 40px rgba(99,102,241,.18),
    0 10px 28px rgba(242,99,238,.15),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* Boton secundario: borde y luz con el mismo degradado */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:visited {
  color: #071126 !important;

  background:
    radial-gradient(circle at 86% 18%, rgba(242,99,238,.055), transparent 36%) padding-box,
    radial-gradient(circle at 18% 18%, rgba(47,98,255,.075), transparent 36%) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,251,255,.84)) padding-box,
    linear-gradient(100deg, #2f62ff 0%, #6366f1 62%, #f263ee 100%) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 16px 38px rgba(47,98,255,.085),
    0 8px 22px rgba(242,99,238,.055),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Boton secundario home - azul pizarra suave */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:visited,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:hover,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:focus,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:active {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c,
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:visited,
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:hover,
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:focus,
  html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:active {
    color: #3f4d60 !important;
    -webkit-text-fill-color: #3f4d60 !important;
  }
}

/* Hero chips PC - borde arcoiris un pelin mas visible */
@media (min-width: 981px) {
  body.page-id-7 #post-7 .entry-content .gb-element-3c232162 p,
  body.page-id-7 #post-7 .entry-content .gb-element-9480c1f5 p,
  body.page-id-7 #post-7 .entry-content .gb-element-335d2dd0 p {
    border-width: 1.65px !important;

    background:
      linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,252,255,.99)) padding-box,
      linear-gradient(
        135deg,
        rgba(47,98,255,.92),
        rgba(16,185,129,.56),
        rgba(245,158,11,.58),
        rgba(242,99,238,.78)
      ) border-box !important;
  }
}

/* =====================================================
   HOME - COLOR SUAVE HERO TIPS + FOTO + SOBRE MI
   Color sin cargar el diseño
   ===================================================== */

/* Ambiente suave en hero: cerca de tips y foto */
html body.page-id-7 #page #post-7 .entry-content::after {
  content: "" !important;
  position: absolute !important;

  top: 250px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  height: clamp(520px, 42vw, 760px) !important;

  background:
    radial-gradient(circle at 18% 72%, rgba(47,98,255,.070), transparent 30%),
    radial-gradient(circle at 34% 80%, rgba(245,158,11,.040), transparent 26%),
    radial-gradient(circle at 74% 34%, rgba(16,185,129,.060), transparent 34%),
    radial-gradient(circle at 92% 26%, rgba(242,99,238,.045), transparent 30%) !important;

  opacity: .88 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* La foto gana un poco de luz, pero sigue siendo protagonista */
html body.page-id-7 #page #post-7 .entry-content > img.gb-media-0b3bf00f,
html body.page-id-7 #page #post-7 .entry-content > figure:has(img.gb-media-0b3bf00f) {
  border: 1.2px solid rgba(255,255,255,.62) !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.10),
    0 16px 42px rgba(47,98,255,.070),
    0 10px 30px rgba(16,185,129,.040),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

/* Tips hero: ticks en nuestros colores */
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div {
  --rl-tip-color: #2f62ff;
  --rl-tip-rgb: 47,98,255;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(1) {
  --rl-tip-color: #2f62ff;
  --rl-tip-rgb: 47,98,255;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(2) {
  --rl-tip-color: #f59e0b;
  --rl-tip-rgb: 245,158,11;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(3) {
  --rl-tip-color: #10b981;
  --rl-tip-rgb: 16,185,129;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(4) {
  --rl-tip-color: #f263ee;
  --rl-tip-rgb: 242,99,238;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div::before {
  color: var(--rl-tip-color) !important;
  border-color: var(--rl-tip-color) !important;

  background:
    radial-gradient(circle at 30% 25%, rgba(var(--rl-tip-rgb), .13), transparent 42%),
    rgba(255,255,255,.72) !important;

  box-shadow:
    0 8px 18px rgba(var(--rl-tip-rgb), .14),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d p {
  color: #334155 !important;
}

/* Sobre mi: fondo con vida sin quitar presencia a la foto */
html body.page-id-7 #page #post-7 .entry-content > .rl-about-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(47,98,255,.075), transparent 34%),
    radial-gradient(circle at 42% 26%, rgba(245,158,11,.038), transparent 30%),
    radial-gradient(circle at 76% 20%, rgba(16,185,129,.055), transparent 36%),
    radial-gradient(circle at 94% 12%, rgba(242,99,238,.038), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 52%, #f6f8fb 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-about-section::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(120deg,
      rgba(47,98,255,.030) 0%,
      transparent 30%,
      rgba(16,185,129,.028) 66%,
      rgba(242,99,238,.024) 100%
    ) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* La foto de Sobre mi mantiene presencia */
html body.page-id-7 #page #post-7 .entry-content img.rl-about-image,
html body.page-id-7 #page #post-7 .entry-content .rl-about-image img {
  position: relative !important;
  z-index: 2 !important;

  border: 1.2px solid rgba(255,255,255,.66) !important;

  box-shadow:
    0 34px 86px rgba(15,23,42,.14),
    0 16px 42px rgba(47,98,255,.060),
    0 10px 30px rgba(16,185,129,.035) !important;
}

/* Movil: un poco mas compacto y nada invasivo */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content::after {
    top: 210px !important;
    height: 720px !important;

    background:
      radial-gradient(circle at 18% 46%, rgba(47,98,255,.060), transparent 34%),
      radial-gradient(circle at 84% 30%, rgba(16,185,129,.045), transparent 36%),
      radial-gradient(circle at 92% 20%, rgba(242,99,238,.035), transparent 32%) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div::before {
    box-shadow:
      0 6px 14px rgba(var(--rl-tip-rgb), .12),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-about-section {
    background:
      radial-gradient(circle at 18% 14%, rgba(47,98,255,.060), transparent 36%),
      radial-gradient(circle at 82% 24%, rgba(16,185,129,.045), transparent 38%),
      radial-gradient(circle at 92% 16%, rgba(242,99,238,.030), transparent 32%),
      linear-gradient(180deg, #ffffff 0%, #f8fbff 58%, #f6f8fb 100%) !important;
  }
}

/* =====================================================
   UNION LESSONS + AUDIENCIA - TRANSICION FLUIDA
   Nota con mas presencia, sin cargar
   ===================================================== */

/* Final de Como son las clases: deja una base que continue hacia audiencia */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  padding-bottom: clamp(34px, 3.4vw, 52px) !important;

  background:
    radial-gradient(circle at 16% 18%, rgba(47,98,255,.070), transparent 34%),
    radial-gradient(circle at 42% 30%, rgba(245,158,11,.040), transparent 30%),
    radial-gradient(circle at 74% 34%, rgba(16,185,129,.060), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(242,99,238,.042), transparent 32%),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 40%, #f7faff 78%, #f7faff 100%) !important;
}

/* Luz de cierre debajo de las tarjetas y alrededor de la nota */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
  content: "" !important;
  position: absolute !important;

  left: 50% !important;
  bottom: -110px !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  height: 300px !important;

  background:
    radial-gradient(circle at 20% 35%, rgba(47,98,255,.080), transparent 34%),
    radial-gradient(circle at 52% 40%, rgba(16,185,129,.075), transparent 38%),
    radial-gradient(circle at 84% 36%, rgba(242,99,238,.050), transparent 34%),
    linear-gradient(180deg, rgba(247,250,255,0), rgba(247,250,255,.96)) !important;

  filter: blur(8px) !important;
  opacity: .95 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Nota: mas presente y mas integrada */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
  position: relative !important;
  z-index: 2 !important;

  width: min(100%, 1120px) !important;
  max-width: 1120px !important;

  margin-top: clamp(48px, 4.2vw, 66px) !important;
  margin-bottom: 0 !important;

  padding: 20px 42px !important;

  border-radius: 999px !important;
  border: 1.25px solid transparent !important;

  background:
    radial-gradient(circle at 16% 20%, rgba(47,98,255,.080), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(16,185,129,.060), transparent 36%),
    radial-gradient(circle at 94% 20%, rgba(242,99,238,.050), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.80), rgba(242,247,255,.62)) padding-box,
    linear-gradient(100deg, rgba(47,98,255,.34), rgba(16,185,129,.20), rgba(242,99,238,.24)) border-box !important;

  box-shadow:
    0 18px 42px rgba(47,98,255,.055),
    0 14px 34px rgba(16,185,129,.032),
    0 8px 22px rgba(242,99,238,.024),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note p,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note span,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note b {
  color: #66758a !important;
  -webkit-text-fill-color: #66758a !important;
  font-weight: 750 !important;
}

/* Inicio audiencia: se funde con el cierre anterior */
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  margin-top: -1px !important;
  padding-top: clamp(34px, 3.2vw, 52px) !important;

  background:
    linear-gradient(180deg, #f7faff 0%, rgba(247,250,255,.94) 8%, rgba(255,255,255,.98) 34%, #ffffff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  top: -180px !important;
  height: clamp(620px, 44vw, 820px) !important;

  background:
    linear-gradient(90deg,
      rgba(47,98,255,.080),
      rgba(245,158,11,.042),
      rgba(16,185,129,.070),
      rgba(242,99,238,.056)
    ) !important;

  filter: blur(48px) !important;
  opacity: .78 !important;
}

/* H2 audiencia: baja un poco para no parecer separado de otra pagina */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
  margin-top: 0 !important;
  margin-bottom: clamp(52px, 5vw, 74px) !important;
}

/* Movil */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-bottom: 32px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
    width: 100% !important;
    margin-top: 42px !important;
    padding: 17px 20px !important;
    border-radius: 26px !important;
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 38px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
    top: -120px !important;
    height: 640px !important;
    filter: blur(36px) !important;
  }
}

/* Audiencia tarjeta 4 - titulo mas rosa premium */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 .rl-audience-card-title {
  background:
    linear-gradient(
      90deg,
      #f263ee 0%,
      #d946ef 36%,
      #a855f7 68%,
      #6366f1 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Un poco mas de rosa tambien en la luz de la tarjeta 4 */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
  background:
    radial-gradient(circle at 16% 14%, rgba(242,99,238,.28), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(168,85,247,.15), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(252,248,255,.94)) padding-box,
    linear-gradient(145deg, rgba(242,99,238,.58), rgba(168,85,247,.28), rgba(255,255,255,.38)) border-box !important;
}

/* =====================================================
   AUDIENCIA - TITULOS NEGROS + DEGRADADO SOLO EN HOVER/TOUCH
   ===================================================== */

/* Estado normal: negro premium, sin degradado */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-card-title {
  color: #071126 !important;
  -webkit-text-fill-color: #071126 !important;
  background: none !important;
  background-image: none !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;

  transition:
    color .22s cubic-bezier(.2,.8,.2,1),
    transform .22s cubic-bezier(.2,.8,.2,1),
    filter .22s cubic-bezier(.2,.8,.2,1),
    background .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* PC: degradado al pasar el raton por la tarjeta */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    background:
      linear-gradient(
        90deg,
        var(--rl-audience-color) 0%,
        var(--rl-audience-color-2) 56%,
        #f263ee 112%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    transform: translateY(-2px) !important;
    filter: saturate(1.12) brightness(.98) !important;
  }
}

/* Movil/tablet: degradado solo mientras se toca */
@media (hover: none) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:active .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-within .rl-audience-card-title {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    background:
      linear-gradient(
        90deg,
        var(--rl-audience-color) 0%,
        var(--rl-audience-color-2) 58%,
        #f263ee 112%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    transform: translateY(-1px) !important;
    filter: saturate(1.08) brightness(.99) !important;
  }
}

/* =====================================================
   HERO TIPS + FIREFOX AUDIENCE CLICK
   ===================================================== */

/* Tips del hero: todos al azul luminoso del inicio del boton */
body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d > div::before {
  border-color: #4f7cff !important;
  color: #4f7cff !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(79, 124, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,255,.88)) !important;

  box-shadow:
    0 10px 24px rgba(79, 124, 255, .16),
    0 4px 12px rgba(79, 124, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

body.page-id-7 #post-7 .entry-content > .gb-element-bea2ce3d p {
  color: #334155 !important;
  font-weight: 900 !important;
}

/* Firefox: los titulos de audiencia quedan negros en reposo */
@-moz-document url-prefix() {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-card-title {
    color: #071126 !important;
    -webkit-text-fill-color: #071126 !important;
    background: none !important;
    background-image: none !important;
  }

  /* Firefox: color al pasar, tocar o cuando la tarjeta queda enfocada */
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-visible .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-within .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:active .rl-audience-card-title {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    background:
      linear-gradient(
        90deg,
        var(--rl-audience-color) 0%,
        var(--rl-audience-color-2) 58%,
        #f263ee 112%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    transform: translateY(-1px) !important;
    filter: saturate(1.1) brightness(.99) !important;
  }
}

/* =====================================================
   HERO TIPS - TODOS EN AZUL PREMIUM
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div::before,
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(1)::before,
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(2)::before,
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(3)::before,
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div:nth-child(4)::before {
  border-color: #4f7cff !important;
  color: #4f7cff !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(79, 124, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,255,.88)) !important;

  box-shadow:
    0 10px 24px rgba(79, 124, 255, .16),
    0 4px 12px rgba(79, 124, 255, .08),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* Por si algun parche anterior estaba cambiando color por svg/pseudo extra */
html body.page-id-7 #page #post-7 .entry-content > .gb-element-bea2ce3d > div::after {
  content: none !important;
  display: none !important;
}

/* =====================================================
   DESTACADOS HOME - AZUL PREMIUM SIN DEGRADADO
   ===================================================== */

body.page-id-7,
body.home {
  --rl-premium-blue: #4f7cff !important;
}

/* H1 hero: "con criterio" */
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-hero-title mark,
html body.page-id-7 #page #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text strong,
html body.page-id-7 #page #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text b,
html body.page-id-7 #page #post-7 .entry-content .gb-element-2c9b9665 > h1.gb-text mark,

/* Sobre mi */
html body.page-id-7 #page #post-7 .entry-content .rl-about-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-about-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-about-title mark,

/* Como son las clases */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title mark,

/* Para quien son estas clases */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title mark {
  color: var(--rl-premium-blue) !important;
  -webkit-text-fill-color: var(--rl-premium-blue) !important;

  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;

  font-weight: 900 !important;
}

/* Si algun titulo entero tenia degradado, lo dejamos azul premium */
html body.page-id-7 #page #post-7 .entry-content .rl-about-title {
  color: var(--rl-premium-blue) !important;
  -webkit-text-fill-color: var(--rl-premium-blue) !important;
  background: none !important;
  background-image: none !important;
}

/* =====================================================
   AUDIENCIA - TITULOS NEGROS Y COLOR AL TOCAR / FOCUS
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card .rl-audience-card-title {
  color: #071126 !important;
  -webkit-text-fill-color: #071126 !important;
  background: none !important;
  background-image: none !important;
}

/* PC hover + focus */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus .rl-audience-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-visible .rl-audience-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-within .rl-audience-card-title {
  color: var(--rl-audience-color) !important;
  -webkit-text-fill-color: var(--rl-audience-color) !important;
  background: none !important;
  background-image: none !important;
}

/* iPhone / tactil: mantiene color si la tarjeta recibe foco */
@media (hover: none) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-visible .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:focus-within .rl-audience-card-title,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:active .rl-audience-card-title {
    color: var(--rl-audience-color) !important;
    -webkit-text-fill-color: var(--rl-audience-color) !important;
    background: none !important;
    background-image: none !important;
  }
}

/* =====================================================
   HOME BOTONES - AZUL PREMIUM MENOS ROSA/MORADO
   ===================================================== */

/* Boton principal: Ver rutas */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:visited {
  color: #ffffff !important;

  border: 1.35px solid rgba(125, 166, 255, .56) !important;

  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(
      135deg,
      #4f7cff 0%,
      #3f73ff 42%,
      #4b6ff1 76%,
      #7568f0 100%
    ) !important;

  box-shadow:
    0 18px 42px rgba(79, 124, 255, .24),
    0 8px 22px rgba(47, 98, 255, .13),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

/* Hover/touch boton principal */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:hover,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:focus,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-0c608309:active {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(
      135deg,
      #5b86ff 0%,
      #4777ff 44%,
      #5570f2 78%,
      #7a6df2 100%
    ) !important;

  box-shadow:
    0 22px 50px rgba(79, 124, 255, .28),
    0 10px 26px rgba(47, 98, 255, .15),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

/* Boton secundario: Como son las clases */
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c,
html body.page-id-7 #page #post-7 .entry-content > a.gb-text-fdfdcd7c:visited {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;

  border: 1.35px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,255,.90)) padding-box,
    linear-gradient(
      135deg,
      rgba(79, 124, 255, .86),
      rgba(63, 115, 255, .56),
      rgba(117, 104, 240, .34)
    ) border-box !important;

  box-shadow:
    0 14px 34px rgba(79, 124, 255, .10),
    0 6px 18px rgba(47, 98, 255, .055),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

/* =====================================================
   SOBRE MI - 3 PUNTOS AZUL LILA SUAVE
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-about-point,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(1),
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(2),
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(3) {
  --rl-about-accent: #4f7cff !important;
  --rl-about-rgb: 79, 124, 255 !important;
  --rl-about-accent-2: #7a6df2 !important;
  --rl-about-rgb-2: 122, 109, 242 !important;

  background:
    radial-gradient(circle at 16% 20%, rgba(79,124,255,.105), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(122,109,242,.055), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,251,255,.82)) padding-box,
    linear-gradient(135deg, rgba(79,124,255,.30), rgba(122,109,242,.16), rgba(255,255,255,.38)) border-box !important;

  border: 1.25px solid transparent !important;

  box-shadow:
    0 18px 40px rgba(79,124,255,.085),
    0 8px 20px rgba(122,109,242,.035),
    0 4px 14px rgba(15,23,42,.018),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-about-point-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(1) .rl-about-point-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(2) .rl-about-point-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point:nth-child(3) .rl-about-point-icon {
  color: #4f7cff !important;
  border-color: rgba(79,124,255,.24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(79,124,255,.18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,247,255,.88)) !important;

  box-shadow:
    0 14px 30px rgba(79,124,255,.14),
    0 5px 14px rgba(122,109,242,.045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-about-point-icon svg,
html body.page-id-7 #page #post-7 .entry-content .rl-about-point-icon svg * {
  color: #4f7cff !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* =====================================================
   COMPARATIVA FINAL - NO HACEMOS / SI ENCONTRARAS
   Bloque HTML: rl-compare-section
   ===================================================== */

/* Orden fijo de secciones principales */
html body.page-id-7 #page #post-7 .entry-content > .rl-metodo-section {
  order: 10 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-about-section {
  order: 20 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-classes-section {
  order: 30 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  order: 40 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  order: 50 !important;
  grid-row: auto !important;
}

/* Si el HTML aparece como section directo */
html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
  grid-column: 1 / -1 !important;
  grid-row: 999 !important;
  order: 999 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Si WordPress envuelve el HTML en un div */
html body.page-id-7 #page #post-7 .entry-content > div:has(.rl-compare-section),
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-compare-section),
html body.page-id-7 #page #post-7 .entry-content > .wp-block-group:has(.rl-compare-section) {
  grid-column: 1 / -1 !important;
  grid-row: 999 !important;
  order: 999 !important;

  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Seccion comparativa */
html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: clamp(90px, 8vw, 132px) 0 !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 16% 18%, rgba(79,124,255,.070), transparent 34%),
    radial-gradient(circle at 84% 28%, rgba(122,109,242,.045), transparent 34%),
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 52%, #f8fbff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 32% !important;
  height: 42% !important;

  background:
    linear-gradient(
      90deg,
      rgba(79,124,255,.070),
      rgba(122,109,242,.045),
      rgba(79,124,255,.050)
    ) !important;

  filter: blur(46px) !important;
  opacity: .68 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-inner {
  position: relative !important;
  z-index: 1 !important;

  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;

  margin: 0 auto !important;
  padding: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-grid {
  position: relative !important;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(70px, 7vw, 130px) !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-grid::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;

  width: 1px !important;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(148,163,184,.26),
      transparent
    ) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;

  width: fit-content !important;

  margin: 0 0 58px 0 !important;
  padding: 11px 22px !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-kicker span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-bad .rl-compare-kicker {
  color: #dc2626 !important;
  background: rgba(254,226,226,.58) !important;
  border: 1px solid rgba(248,113,113,.24) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-bad .rl-compare-kicker span {
  background: #ef4444 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good .rl-compare-kicker {
  color: #2454df !important;
  background: rgba(239,246,255,.78) !important;
  border: 1px solid rgba(79,124,255,.20) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good .rl-compare-kicker span {
  background: #4f7cff !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-list {
  display: grid !important;
  gap: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-list li {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-icon {
  width: 46px !important;
  height: 46px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 15px !important;

  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-bad .rl-compare-icon {
  color: #ff3b45 !important;

  background: rgba(255,241,241,.92) !important;
  border: 1px solid rgba(255,59,69,.18) !important;

  box-shadow:
    0 8px 18px rgba(239,68,68,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good .rl-compare-icon {
  color: #4f7cff !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(79,124,255,.16), transparent 38%),
    rgba(239,246,255,.96) !important;

  border: 1px solid rgba(79,124,255,.20) !important;

  box-shadow:
    0 8px 18px rgba(79,124,255,.13),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-bad li span:last-child {
  color: #64748b !important;
  font-size: 21px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good li span:last-child {
  color: #071126 !important;
  font-size: 21px !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
    padding: 64px 0 78px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-grid::before {
    display: none !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel {
    padding: 30px 26px 34px !important;

    border-radius: 26px !important;
    border: 1px solid rgba(219,228,238,.76) !important;

    background:
      radial-gradient(circle at 18% 16%, rgba(79,124,255,.045), transparent 34%),
      rgba(255,255,255,.92) !important;

    box-shadow:
      0 22px 50px rgba(15,23,42,.08),
      inset 0 1px 0 rgba(255,255,255,.96) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-kicker {
    margin-bottom: 34px !important;
    padding: 10px 16px !important;

    font-size: 10px !important;
    letter-spacing: .14em !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-list {
    gap: 28px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-list li {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: 19px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-bad li span:last-child,
  html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good li span:last-child {
    font-size: 15px !important;
    line-height: 1.58 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-panel-good li span:last-child {
    font-weight: 850 !important;
  }
}

/* =====================================================
   FUSION FONDOS - AUDIENCIA + COMPARATIVA
   ===================================================== */

/* La seccion anterior y la nueva comparten el mismo ambiente blanco premium */
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section,
html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
  background:
    radial-gradient(circle at 14% 18%, rgba(79,124,255,.060), transparent 34%),
    radial-gradient(circle at 72% 22%, rgba(122,109,242,.035), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(242,99,238,.030), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 46%, #ffffff 100%) !important;
}

/* La audience baja con luz suave para que no termine en corte plano */
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  padding-bottom: clamp(82px, 7vw, 118px) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -90px !important;
  height: 210px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0) 0%,
      rgba(251,253,255,.88) 38%,
      rgba(255,255,255,1) 100%
    ),
    radial-gradient(circle at 26% 60%, rgba(79,124,255,.050), transparent 36%),
    radial-gradient(circle at 76% 54%, rgba(122,109,242,.035), transparent 38%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* La comparativa entra antes, sin franja gris */
html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
  margin-top: -1px !important;
  padding-top: clamp(78px, 6vw, 110px) !important;
}

/* Quitamos la capa azulada grande que hacia parecer otra pagina */
html body.page-id-7 #page #post-7 .entry-content .rl-compare-section::before {
  background:
    radial-gradient(circle at 18% 18%, rgba(79,124,255,.045), transparent 36%),
    radial-gradient(circle at 84% 22%, rgba(122,109,242,.028), transparent 36%) !important;

  top: 0 !important;
  height: 360px !important;
  filter: blur(42px) !important;
  opacity: .55 !important;
}

/* En movil aun mas unido y menos gris */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-bottom: 64px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
    padding-top: 62px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section,
  html body.page-id-7 #page #post-7 .entry-content .rl-compare-section {
    background:
      radial-gradient(circle at 18% 18%, rgba(79,124,255,.050), transparent 36%),
      radial-gradient(circle at 88% 18%, rgba(122,109,242,.030), transparent 34%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 52%, #ffffff 100%) !important;
  }
}

/* =====================================================
   FAQ - PREGUNTAS FRECUENTES
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-faq-section) {
  grid-column: 1 / -1 !important;
  order: 1000 !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-section {
  padding: clamp(92px, 8vw, 138px) 0 clamp(82px, 7vw, 116px) !important;
  margin: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 16% 18%, rgba(79,124,255,.050), transparent 34%),
    radial-gradient(circle at 86% 24%, rgba(122,109,242,.030), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 48%, #ffffff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-inner {
  width: min(var(--rl-home-width), 960px) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
  margin: 0 0 clamp(50px, 5vw, 74px) !important;
  text-align: center !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-title {
  margin: 0 !important;
  color: #071126 !important;
  font-size: clamp(42px, 4.6vw, 68px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-list {
  display: grid !important;
  gap: 20px !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item {
  border-radius: 18px !important;
  border: 1.25px solid rgba(219,228,238,.72) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow:
    0 14px 34px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  overflow: hidden !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item[open] {
  border-color: rgba(79,124,255,.46) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(79,124,255,.055), transparent 38%),
    rgba(248,251,255,.96) !important;
  box-shadow:
    0 18px 42px rgba(79,124,255,.09),
    0 8px 22px rgba(15,23,42,.035),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary {
  list-style: none !important;
  cursor: pointer !important;
  min-height: 108px !important;
  padding: 0 30px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  gap: 22px !important;
  align-items: center !important;
  color: #071126 !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary::-webkit-details-marker {
  display: none !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary i {
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(219,228,238,.72) !important;
  box-shadow:
    0 7px 18px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  position: relative !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary i::before {
  content: "" !important;
  position: absolute !important;
  width: 10px !important;
  height: 10px !important;
  left: 50% !important;
  top: 48% !important;
  border-right: 2px solid #8aa0bd !important;
  border-bottom: 2px solid #8aa0bd !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
  transition: transform .22s ease !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item[open] summary i::before {
  transform: translate(-50%, -35%) rotate(225deg) !important;
  border-color: #4f7cff !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer {
  margin: 0 30px 28px !important;
  padding: 0 0 0 20px !important;
  border-left: 2px solid rgba(79,124,255,.30) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer p {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
}

/* Importante: no hay linea horizontal azul dentro de la respuesta */

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-faq-section {
    padding: 76px 0 72px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-title {
    font-size: clamp(34px, 9vw, 44px) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary {
    min-height: 86px !important;
    padding: 0 20px !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 16px !important;
    font-size: 17px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary i {
    width: 40px !important;
    height: 40px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer {
    margin: 0 20px 24px !important;
    padding-left: 16px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer p {
    font-size: 15.5px !important;
    line-height: 1.6 !important;
  }
}

/* =====================================================
   CTA FINAL DARK - DOBLE PREMIUM + FUSION FOOTER
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-final-cta-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-final-cta-section) {
  grid-column: 1 / -1 !important;
  order: 1001 !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-section {
  margin: 0 !important;
  padding: clamp(54px, 5vw, 78px) 0 clamp(78px, 7vw, 112px) !important;
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 42%, #ffffff 100%) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-inner {
  width: var(--rl-home-width) !important;
  max-width: var(--rl-home-max) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;

  min-height: clamp(390px, 30vw, 520px) !important;
  padding: clamp(64px, 7vw, 108px) clamp(28px, 6vw, 90px) !important;

  border-radius: clamp(34px, 3.5vw, 58px) !important;
  border: 1.35px solid transparent !important;

  background:
    radial-gradient(circle at 18% 82%, rgba(79,124,255,.28), transparent 36%),
    radial-gradient(circle at 86% 16%, rgba(79,124,255,.18), transparent 38%),
    radial-gradient(circle at 34% 92%, rgba(122,109,242,.12), transparent 38%),
    linear-gradient(145deg, #071126 0%, #0b1634 52%, #112d72 100%) padding-box,
    linear-gradient(135deg, rgba(79,124,255,.54), rgba(122,109,242,.24), rgba(255,255,255,.10)) border-box !important;

  box-shadow:
    0 34px 90px rgba(15,23,42,.18),
    0 24px 68px rgba(79,124,255,.14),
    inset 0 1px 0 rgba(255,255,255,.10) !important;

  text-align: center !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%),
    radial-gradient(circle at 50% 0%, rgba(79,124,255,.16), transparent 48%) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-card > * {
  position: relative !important;
  z-index: 1 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-title {
  max-width: 820px !important;
  margin: 0 auto 28px !important;
  color: #ffffff !important;
  font-size: clamp(46px, 5vw, 78px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-title span {
  display: block !important;
  color: #78a0ff !important;
  -webkit-text-fill-color: #78a0ff !important;
  background: none !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-text {
  max-width: 760px !important;
  margin: 0 auto 54px !important;
  color: rgba(226,232,240,.82) !important;
  font-size: clamp(18px, 1.45vw, 23px) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  margin: 0 0 48px !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-primary,
html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-secondary {
  min-height: 70px !important;
  padding: 0 40px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-primary {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(135deg, #4f7cff 0%, #3f73ff 48%, #5570f2 100%) !important;
  border: 1.35px solid rgba(125,166,255,.56) !important;
  box-shadow:
    0 22px 54px rgba(79,124,255,.28),
    0 10px 26px rgba(47,98,255,.15),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-secondary {
  color: #ffffff !important;
  background: rgba(255,255,255,.10) !important;
  border: 1.2px solid rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 28px rgba(0,0,0,.14) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-note {
  margin: 0 !important;
  color: rgba(203,213,225,.66) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* Fusion con el pie: elimina franjas de otro color */
body.page-id-7 #post-7 .entry-content {
  padding-bottom: 0 !important;
}

body.page-id-7 .site-footer,
body.page-id-7 .footer-widgets,
body.page-id-7 .site-info {
  margin-top: 0 !important;
  background: #ffffff !important;
  border-top: 0 !important;
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-section {
    padding: 46px 0 70px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-inner {
    width: calc(100vw - 48px) !important;
    max-width: 430px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-card {
    min-height: auto !important;
    padding: 58px 24px 54px !important;
    border-radius: 32px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-title {
    font-size: clamp(34px, 9vw, 44px) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-text {
    margin-bottom: 38px !important;
    font-size: 16px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-actions {
    gap: 14px !important;
    margin-bottom: 34px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-primary,
  html body.page-id-7 #page #post-7 .entry-content .rl-final-cta-secondary {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    font-size: 16px !important;
  }
}

/* =====================================================
   ORDEN FINAL - COMPARATIVA ANTES DE FAQ Y CTA
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-audience-section) {
  order: 50 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-compare-section),
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-compare-section) {
  order: 60 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-faq-section),
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-faq-section) {
  order: 70 !important;
  grid-row: auto !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-final-cta-section,
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-final-cta-section),
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-final-cta-section) {
  order: 80 !important;
  grid-row: auto !important;
}

/* =====================================================
   ANCLAS RUTAS - SALTO DESDE FOOTER
   ===================================================== */

html body.page-id-7 #ruta-ia-prompt,
html body.page-id-7 #ruta-seo-analitica,
html body.page-id-7 #ruta-wordpress-diseno,
html body.page-id-7 #como-son-las-clases {
  scroll-margin-top: 132px !important;
}

/* Pequeño realce cuando se llega desde el footer */
html body.page-id-7 #ruta-ia-prompt:target,
html body.page-id-7 #ruta-seo-analitica:target,
html body.page-id-7 #ruta-wordpress-diseno:target {
  outline: 2px solid rgba(79, 124, 255, .42) !important;
  outline-offset: 8px !important;
}

/* Movil: algo menos de margen */
@media (max-width: 767px) {
  html body.page-id-7 #ruta-ia-prompt,
  html body.page-id-7 #ruta-seo-analitica,
  html body.page-id-7 #ruta-wordpress-diseno,
  html body.page-id-7 #como-son-las-clases {
    scroll-margin-top: 104px !important;
  }

  html body.page-id-7 #ruta-ia-prompt:target,
  html body.page-id-7 #ruta-seo-analitica:target,
  html body.page-id-7 #ruta-wordpress-diseno:target {
    outline-offset: 5px !important;
  }
}

/* =====================================================
   FAQ - REMATE PREMIUM AZUL SUAVE
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-faq-title {
  color: #4f7cff !important;
  -webkit-text-fill-color: #4f7cff !important;

  background: none !important;
  background-image: none !important;

  font-weight: 950 !important;
  text-shadow:
    0 14px 34px rgba(79,124,255,.10) !important;
}

/* Contenedores FAQ: borde premium muy suave */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-item {
  border: 1.25px solid transparent !important;

  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,251,255,.92)) padding-box,
    linear-gradient(135deg, rgba(79,124,255,.20), rgba(122,109,242,.08), rgba(219,228,238,.42)) border-box !important;

  box-shadow:
    0 18px 42px rgba(15,23,42,.045),
    0 8px 22px rgba(79,124,255,.035),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Pregunta cerrada */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary span {
  color: #071126 !important;
  -webkit-text-fill-color: #071126 !important;

  transition:
    color .22s cubic-bezier(.2,.8,.2,1),
    -webkit-text-fill-color .22s cubic-bezier(.2,.8,.2,1) !important;
}

/* Estado abierto: pregunta en azul premium */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-item[open] {
  border-color: transparent !important;

  background:
    radial-gradient(circle at 14% 20%, rgba(79,124,255,.075), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(242,247,255,.94)) padding-box,
    linear-gradient(135deg, rgba(79,124,255,.48), rgba(122,109,242,.18), rgba(219,228,238,.36)) border-box !important;

  box-shadow:
    0 24px 54px rgba(79,124,255,.11),
    0 10px 28px rgba(15,23,42,.045),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item[open] summary span {
  color: #4f7cff !important;
  -webkit-text-fill-color: #4f7cff !important;
}

/* Boton circular */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-item summary i {
  border-color: rgba(79,124,255,.16) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(79,124,255,.08), transparent 42%),
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 10px 24px rgba(15,23,42,.055),
    0 5px 16px rgba(79,124,255,.050),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-item[open] summary i {
  border-color: rgba(79,124,255,.24) !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(79,124,255,.16), transparent 42%),
    rgba(255,255,255,.98) !important;
}

/* Linea vertical azul clarita en la respuesta */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer {
  border-left-color: rgba(79,124,255,.34) !important;
}

/* Respuesta un poco mas elegante */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-answer p {
  color: #64748b !important;
  font-weight: 400 !important;
}

/* =====================================================
   BLOQUE DOBLE INMERSIVO - CLASES + AUDIENCIA
   Escalera cromatica sobria: azul -> azul lila -> lila suave
   ===================================================== */

/* Fondo compartido para que parezcan una misma pieza */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section,
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 16% 18%, rgba(79,124,255,.070), transparent 34%),
    radial-gradient(circle at 48% 42%, rgba(99,102,241,.038), transparent 38%),
    radial-gradient(circle at 82% 26%, rgba(122,109,242,.045), transparent 36%),
    radial-gradient(circle at 92% 72%, rgba(242,99,238,.026), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 48%, #ffffff 100%) !important;
}

/* Une visualmente el final de clases con el inicio de audiencia */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  padding-bottom: clamp(76px, 6vw, 108px) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  margin-top: -1px !important;
  padding-top: clamp(76px, 6vw, 110px) !important;
}

/* Banda ambiental común, muy suave */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after,
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 520px !important;

  background:
    linear-gradient(
      90deg,
      rgba(79,124,255,.080) 0%,
      rgba(63,115,255,.060) 18%,
      rgba(99,102,241,.052) 42%,
      rgba(122,109,242,.045) 68%,
      rgba(242,99,238,.030) 100%
    ) !important;

  filter: blur(54px) !important;
  opacity: .58 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
  bottom: -210px !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  top: -230px !important;
}

/* Mantiene contenido por encima */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-inner,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Escalera de color 1-4: Como son las clases */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-1 {
  --rl-lesson-color: #4f7cff !important;
  --rl-lesson-rgb: 79, 124, 255 !important;
  --rl-lesson-color-2: #3f73ff !important;
  --rl-lesson-rgb-2: 63, 115, 255 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-2 {
  --rl-lesson-color: #5f7df8 !important;
  --rl-lesson-rgb: 95, 125, 248 !important;
  --rl-lesson-color-2: #6478f2 !important;
  --rl-lesson-rgb-2: 100, 120, 242 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-3 {
  --rl-lesson-color: #6674f0 !important;
  --rl-lesson-rgb: 102, 116, 240 !important;
  --rl-lesson-color-2: #746cf0 !important;
  --rl-lesson-rgb-2: 116, 108, 240 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-4 {
  --rl-lesson-color: #7a6df2 !important;
  --rl-lesson-rgb: 122, 109, 242 !important;
  --rl-lesson-color-2: #8b70f0 !important;
  --rl-lesson-rgb-2: 139, 112, 240 !important;
}

/* Escalera de color 5-8: Para quien son estas clases */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-1 {
  --rl-audience-color: #5f7df8 !important;
  --rl-audience-rgb: 95, 125, 248 !important;
  --rl-audience-color-2: #6478f2 !important;
  --rl-audience-rgb-2: 100, 120, 242 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2 {
  --rl-audience-color: #6674f0 !important;
  --rl-audience-rgb: 102, 116, 240 !important;
  --rl-audience-color-2: #746cf0 !important;
  --rl-audience-rgb-2: 116, 108, 240 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-3 {
  --rl-audience-color: #7a6df2 !important;
  --rl-audience-rgb: 122, 109, 242 !important;
  --rl-audience-color-2: #8b70f0 !important;
  --rl-audience-rgb-2: 139, 112, 240 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
  --rl-audience-color: #9a72ee !important;
  --rl-audience-rgb: 154, 114, 238 !important;
  --rl-audience-color-2: #b56eea !important;
  --rl-audience-rgb-2: 181, 110, 234 !important;
}

/* Tarjetas: mismo lenguaje, menos infantil, mas unificado */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
  border: 1.35px solid transparent !important;

  background:
    radial-gradient(circle at 16% 14%, rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .135), transparent 36%),
    radial-gradient(circle at 88% 12%, rgba(var(--rl-lesson-rgb-2, var(--rl-audience-rgb-2)), .065), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,252,255,.925)) padding-box,
    linear-gradient(
      145deg,
      rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .34),
      rgba(var(--rl-lesson-rgb-2, var(--rl-audience-rgb-2)), .14),
      rgba(255,255,255,.42)
    ) border-box !important;

  box-shadow:
    0 28px 64px rgba(15,23,42,.070),
    0 20px 50px rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .105),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Iconos: mismo estandar, color de cada paso pero suave */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon {
  color: var(--rl-lesson-color, var(--rl-audience-color)) !important;

  border: 1.2px solid rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,248,255,.88)) !important;

  box-shadow:
    0 16px 34px rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .15),
    0 6px 18px rgba(var(--rl-lesson-rgb-2, var(--rl-audience-rgb-2)), .045),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon svg,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon svg *,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon svg,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon svg * {
  color: currentColor !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Titulos de tarjetas: negros siempre, color solo en hover/touch si ya tienes ese efecto */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-title {
  color: #071126 !important;
  -webkit-text-fill-color: #071126 !important;
  background: none !important;
  background-image: none !important;
}

/* Hover sutil, no feria de color */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card:hover,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-7px) !important;

    box-shadow:
      0 34px 78px rgba(15,23,42,.085),
      0 24px 58px rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .145),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title {
    color: var(--rl-audience-color) !important;
    -webkit-text-fill-color: var(--rl-audience-color) !important;
  }
}

/* Movil: menos intensidad y mas continuidad vertical */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section,
  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    background:
      radial-gradient(circle at 18% 16%, rgba(79,124,255,.055), transparent 36%),
      radial-gradient(circle at 86% 42%, rgba(122,109,242,.034), transparent 38%),
      linear-gradient(180deg, #ffffff 0%, #fbfdff 50%, #ffffff 100%) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-bottom: 64px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 64px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
    box-shadow:
      0 22px 52px rgba(15,23,42,.065),
      0 16px 42px rgba(var(--rl-lesson-rgb, var(--rl-audience-rgb)), .095),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

/* =====================================================
   BLOQUE DOBLE PREMIUM - COMO SON + PARA QUIEN
   Mas vida visual sin exceso de color
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section,
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 14% 14%, rgba(79,124,255,.090), transparent 34%),
    radial-gradient(circle at 74% 24%, rgba(122,109,242,.060), transparent 36%),
    radial-gradient(circle at 48% 72%, rgba(79,124,255,.040), transparent 40%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 46%, #f8fbff 100%) !important;
}

/* Une visualmente los dos bloques */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  padding-bottom: clamp(84px, 7vw, 118px) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  margin-top: -1px !important;
  padding-top: clamp(82px, 7vw, 118px) !important;
}

/* Corriente suave entre los dos bloques */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
  content: "" !important;
  position: absolute !important;
  left: -8vw !important;
  right: -8vw !important;
  bottom: -170px !important;
  height: 360px !important;

  background:
    linear-gradient(90deg,
      rgba(79,124,255,.105),
      rgba(101,124,242,.070),
      rgba(122,109,242,.075),
      rgba(79,124,255,.050)
    ) !important;

  filter: blur(44px) !important;
  opacity: .82 !important;
  transform: skewY(-2deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-inner,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* Titulos principales: color premium, no infantil */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-title mark,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title strong,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title b,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-title mark {
  color: #4f7cff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #4f7cff !important;
}

/* Linea ambiental detras de las tarjetas */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-grid,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-grid {
  position: relative !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-grid::before,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-grid::before {
  content: "" !important;
  position: absolute !important;
  left: 4% !important;
  right: 4% !important;
  top: 50% !important;
  height: 1px !important;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(79,124,255,.16),
      rgba(122,109,242,.12),
      transparent
    ) !important;

  pointer-events: none !important;
  z-index: 0 !important;
}

/* Escalera cromatica suave: 8 pasos */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-1 {
  --rl-lesson-color: #4f7cff !important;
  --rl-lesson-rgb: 79, 124, 255 !important;
  --rl-lesson-color-2: #3f73ff !important;
  --rl-lesson-rgb-2: 63, 115, 255 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-2 {
  --rl-lesson-color: #597cf7 !important;
  --rl-lesson-rgb: 89, 124, 247 !important;
  --rl-lesson-color-2: #6278f3 !important;
  --rl-lesson-rgb-2: 98, 120, 243 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-3 {
  --rl-lesson-color: #6674f0 !important;
  --rl-lesson-rgb: 102, 116, 240 !important;
  --rl-lesson-color-2: #746ff0 !important;
  --rl-lesson-rgb-2: 116, 111, 240 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-4 {
  --rl-lesson-color: #746ff0 !important;
  --rl-lesson-rgb: 116, 111, 240 !important;
  --rl-lesson-color-2: #8370ee !important;
  --rl-lesson-rgb-2: 131, 112, 238 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-1 {
  --rl-audience-color: #567cf8 !important;
  --rl-audience-rgb: 86, 124, 248 !important;
  --rl-audience-color-2: #6578f2 !important;
  --rl-audience-rgb-2: 101, 120, 242 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2 {
  --rl-audience-color: #6376f2 !important;
  --rl-audience-rgb: 99, 118, 242 !important;
  --rl-audience-color-2: #7370f0 !important;
  --rl-audience-rgb-2: 115, 112, 240 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-3 {
  --rl-audience-color: #7070f0 !important;
  --rl-audience-rgb: 112, 112, 240 !important;
  --rl-audience-color-2: #8570ee !important;
  --rl-audience-rgb-2: 133, 112, 238 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
  --rl-audience-color: #8370ee !important;
  --rl-audience-rgb: 131, 112, 238 !important;
  --rl-audience-color-2: #9a72ee !important;
  --rl-audience-rgb-2: 154, 114, 238 !important;
}

/* Tarjetas bloque Como son las clases */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card {
  position: relative !important;
  z-index: 1 !important;

  background:
    radial-gradient(circle at 18% 14%, rgba(var(--rl-lesson-rgb), .150), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(var(--rl-lesson-rgb-2), .070), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,252,255,.925)) padding-box,
    linear-gradient(145deg,
      rgba(var(--rl-lesson-rgb), .34),
      rgba(var(--rl-lesson-rgb-2), .17),
      rgba(255,255,255,.42)
    ) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.060),
    0 18px 44px rgba(var(--rl-lesson-rgb), .105),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Tarjetas bloque Para quien */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
  position: relative !important;
  z-index: 1 !important;

  background:
    radial-gradient(circle at 18% 14%, rgba(var(--rl-audience-rgb), .140), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(var(--rl-audience-rgb-2), .070), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.985), rgba(248,252,255,.925)) padding-box,
    linear-gradient(145deg,
      rgba(var(--rl-audience-rgb), .34),
      rgba(var(--rl-audience-rgb-2), .17),
      rgba(255,255,255,.42)
    ) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.060),
    0 18px 44px rgba(var(--rl-audience-rgb), .105),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Iconos con el mismo sistema, pero suave */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-icon {
  color: var(--rl-lesson-color) !important;
  border-color: rgba(var(--rl-lesson-rgb), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-lesson-rgb), .22), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-lesson-rgb), .115), rgba(255,255,255,.92)) !important;

  box-shadow:
    0 18px 38px rgba(var(--rl-lesson-rgb), .18),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon {
  color: var(--rl-audience-color) !important;
  border-color: rgba(var(--rl-audience-rgb), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-audience-rgb), .22), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-audience-rgb), .115), rgba(255,255,255,.92)) !important;

  box-shadow:
    0 18px 38px rgba(var(--rl-audience-rgb), .18),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Titulos de tarjetas: negros de base, color solo al interactuar */
html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-title,
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-title {
  color: #071126 !important;
  background: none !important;
  -webkit-text-fill-color: #071126 !important;
}

/* Micro escalera en escritorio */
@media (min-width: 981px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-2,
  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card-4,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
    margin-top: 18px !important;
  }
}

/* Hover: vida sin colorear demasiado */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card:hover,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-8px) !important;
    box-shadow:
      0 34px 78px rgba(15,23,42,.085),
      0 24px 58px rgba(79,124,255,.145),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card:hover .rl-lessons-card-title {
    color: var(--rl-lesson-color) !important;
    -webkit-text-fill-color: var(--rl-lesson-color) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title {
    color: var(--rl-audience-color) !important;
    -webkit-text-fill-color: var(--rl-audience-color) !important;
  }
}

/* Movil: mantiene vida, pero sin escalones raros */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-bottom: 72px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 76px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
    bottom: -120px !important;
    height: 300px !important;
    filter: blur(34px) !important;
    opacity: .72 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-grid::before,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-grid::before {
    display: none !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-card,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
    margin-top: 0 !important;
  }
}

/* =====================================================
   AUDIENCIA FINAL - 4 COLORES PREMIUM SUAVES
   Solo bloque "Para quien son estas clases"
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  background:
    radial-gradient(circle at 12% 12%, rgba(79,124,255,.075), transparent 34%),
    radial-gradient(circle at 36% 28%, rgba(245,158,11,.045), transparent 34%),
    radial-gradient(circle at 72% 30%, rgba(16,185,129,.050), transparent 36%),
    radial-gradient(circle at 92% 18%, rgba(242,99,238,.050), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #f8fbff 100%) !important;
}

/* Mantiene el fondo unido con el bloque anterior, pero abre una nueva energia */
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  content: "" !important;
  position: absolute !important;
  left: -8vw !important;
  right: -8vw !important;
  top: 170px !important;
  height: 620px !important;

  background:
    linear-gradient(90deg,
      rgba(79,124,255,.080),
      rgba(245,158,11,.048),
      rgba(16,185,129,.058),
      rgba(242,99,238,.055)
    ) !important;

  filter: blur(54px) !important;
  opacity: .62 !important;
  transform: skewY(-2deg) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-inner {
  position: relative !important;
  z-index: 1 !important;
}

/* 1 azul */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-1 {
  --rl-audience-color: #4f7cff !important;
  --rl-audience-rgb: 79, 124, 255 !important;
  --rl-audience-color-2: #3f73ff !important;
  --rl-audience-rgb-2: 63, 115, 255 !important;
}

/* 2 naranja suave */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2 {
  --rl-audience-color: #f59e0b !important;
  --rl-audience-rgb: 245, 158, 11 !important;
  --rl-audience-color-2: #fbbf24 !important;
  --rl-audience-rgb-2: 251, 191, 36 !important;
}

/* 3 verde */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-3 {
  --rl-audience-color: #10b981 !important;
  --rl-audience-rgb: 16, 185, 129 !important;
  --rl-audience-color-2: #14b8a6 !important;
  --rl-audience-rgb-2: 20, 184, 166 !important;
}

/* 4 rosa controlado */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
  --rl-audience-color: #e85bdd !important;
  --rl-audience-rgb: 232, 91, 221 !important;
  --rl-audience-color-2: #8b70ee !important;
  --rl-audience-rgb-2: 139, 112, 238 !important;
}

/* Tarjetas: color presente, pero menos reflectante */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
  background:
    radial-gradient(circle at 18% 14%, rgba(var(--rl-audience-rgb), .135), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(var(--rl-audience-rgb-2), .060), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.988), rgba(248,252,255,.935)) padding-box,
    linear-gradient(145deg,
      rgba(var(--rl-audience-rgb), .32),
      rgba(var(--rl-audience-rgb-2), .15),
      rgba(255,255,255,.42)
    ) border-box !important;

  border: 1.35px solid transparent !important;

  box-shadow:
    0 24px 58px rgba(15,23,42,.058),
    0 18px 42px rgba(var(--rl-audience-rgb), .095),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Iconos: mismo color de cada tarjeta, mas fino */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-icon {
  color: var(--rl-audience-color) !important;
  border-color: rgba(var(--rl-audience-rgb), .24) !important;

  background:
    radial-gradient(circle at 30% 24%, rgba(var(--rl-audience-rgb), .19), transparent 38%),
    linear-gradient(145deg, rgba(var(--rl-audience-rgb), .095), rgba(255,255,255,.93)) !important;

  box-shadow:
    0 16px 34px rgba(var(--rl-audience-rgb), .145),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

/* Titulos negros por defecto */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-title {
  color: #071126 !important;
  background: none !important;
  -webkit-text-fill-color: #071126 !important;
}

/* Al pasar raton o tocar: color elegante de la tarjeta */
@media (hover: hover) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-8px) !important;

    box-shadow:
      0 34px 78px rgba(15,23,42,.085),
      0 24px 58px rgba(var(--rl-audience-rgb), .155),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover .rl-audience-card-title {
    color: var(--rl-audience-color) !important;
    -webkit-text-fill-color: var(--rl-audience-color) !important;
  }
}

/* Movil: color suave, sin reflejo exagerado */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
    top: 220px !important;
    height: 920px !important;
    filter: blur(38px) !important;
    opacity: .54 !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card {
    box-shadow:
      0 22px 52px rgba(15,23,42,.060),
      0 16px 38px rgba(var(--rl-audience-rgb), .090),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
  }
}

/* =====================================================
   AUDIENCIA - TARJETAS TODAS AL MISMO NIVEL
   ===================================================== */

@media (min-width: 981px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-1,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-2,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-3,
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card-4 {
    margin-top: 0 !important;
    transform: translateY(0) scale(1) !important;
  }
}

/* Mantiene el hover, pero sin partir de tarjetas ya levantadas */
@media (hover: hover) and (min-width: 981px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-audience-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
  }
}

/* =====================================================
   AJUSTE ESPACIADO AUDIENCIA - IGUALAR A COMO SON
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  padding-top: clamp(58px, 5.2vw, 86px) !important;
}

/* Cabecera mas cerca de la nota anterior */
html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
  margin-bottom: clamp(46px, 5vw, 68px) !important;
}

/* En movil elimina el hueco grande antes del titulo */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 52px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
    margin-bottom: 42px !important;
  }
}
/* =====================================================
   FAQ - QUITAR ESPACIO SUPERIOR REAL
   Corrige separacion antes de "Preguntas frecuentes"
   ===================================================== */

html body.page-id-7 #page #post-7 .entry-content .rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content section.rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content #faq.rl-faq-section {
  margin-top: 0 !important;
  padding-top: 22px !important;
}

/* Si WordPress mete el FAQ dentro de un bloque HTML */
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-faq-section),
html body.page-id-7 #page #post-7 .entry-content > div:has(.rl-faq-section) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Header interno del FAQ */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
  margin-top: 0 !important;
  margin-bottom: clamp(34px, 4vw, 54px) !important;
  padding-top: 0 !important;
}

/* Titulo FAQ sin aire extra */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce tambien el final del bloque anterior por si el hueco viene de abajo */
html body.page-id-7 #page #post-7 .entry-content .rl-compare-section,
html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
  padding-bottom: clamp(34px, 4vw, 56px) !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content section.rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content #faq.rl-faq-section {
    padding-top: 22px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
    margin-bottom: 30px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-compare-section,
  html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
    padding-bottom: 28px !important;
  }
}

/* =====================================================
   HOME FINAL - RITMO RESPONSIVE ENTRE SECCIONES
   Lessons -> Audience -> Compare -> FAQ
   ===================================================== */

/* Fondo comun para que los bloques blancos se fundan entre si */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section,
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section,
html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section,
html body.page-id-7 #page #post-7 .entry-content .rl-faq-section {
  background:
    radial-gradient(circle at 14% 12%, rgba(79, 124, 255, .052), transparent 34%),
    radial-gradient(circle at 76% 18%, rgba(16, 185, 129, .026), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(232, 91, 221, .024), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 48%, #f8fbff 100%) !important;
}

/* COMO SON LAS CLASES */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
  margin-top: 0 !important;
  padding-top: clamp(70px, 5.5vw, 96px) !important;
  padding-bottom: clamp(26px, 2.6vw, 42px) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-header {
  margin-bottom: clamp(46px, 4.8vw, 70px) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
  margin-top: clamp(36px, 3.8vw, 56px) !important;
  margin-bottom: 0 !important;
}

/* Luz de union entre Como son las clases y Para quien */
html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
  bottom: -70px !important;
  height: 150px !important;
  opacity: .42 !important;
  filter: blur(34px) !important;
}

/* PARA QUIEN SON ESTAS CLASES */
html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
  margin-top: -1px !important;
  padding-top: clamp(26px, 2.8vw, 42px) !important;
  padding-bottom: clamp(78px, 6.5vw, 112px) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
  margin-bottom: clamp(42px, 4.4vw, 62px) !important;
}

html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section::before {
  top: -90px !important;
  height: 320px !important;
  opacity: .34 !important;
  filter: blur(42px) !important;
}

/* LO QUE HACEMOS / NO HACEMOS */
html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
  margin-top: -1px !important;
  padding-top: clamp(58px, 5vw, 86px) !important;
  padding-bottom: clamp(30px, 3.4vw, 50px) !important;
}

/* FAQ */
html body.page-id-7 #page #post-7 .entry-content .rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content section.rl-faq-section,
html body.page-id-7 #page #post-7 .entry-content #faq.rl-faq-section {
  margin-top: -1px !important;
  padding-top: clamp(28px, 2.8vw, 40px) !important;
  padding-bottom: clamp(78px, 6.5vw, 112px) !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
  margin-top: 0 !important;
  margin-bottom: clamp(42px, 4.4vw, 62px) !important;
  padding-top: 0 !important;
}

html body.page-id-7 #page #post-7 .entry-content .rl-faq-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Si FAQ esta dentro de un bloque HTML, quitamos aire extra del wrapper */
html body.page-id-7 #page #post-7 .entry-content > .wp-block-html:has(.rl-faq-section),
html body.page-id-7 #page #post-7 .entry-content > div:has(> .rl-faq-section) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #f8fbff !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-top: 68px !important;
    padding-bottom: 32px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-header {
    margin-bottom: 52px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
    margin-top: 42px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 32px !important;
    padding-bottom: 86px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
    margin-bottom: 48px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
    padding-top: 56px !important;
    padding-bottom: 30px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content section.rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content #faq.rl-faq-section {
    padding-top: 26px !important;
    padding-bottom: 86px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
    margin-bottom: 44px !important;
  }
}

/* MOVIL */
@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section {
    padding-top: 54px !important;
    padding-bottom: 22px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-header {
    margin-bottom: 38px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-lessons-note {
    margin-top: 34px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-lessons-section::after {
    bottom: -52px !important;
    height: 110px !important;
    opacity: .36 !important;
    filter: blur(30px) !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-audience-section {
    padding-top: 22px !important;
    padding-bottom: 62px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-audience-header {
    margin-bottom: 34px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content > .rl-compare-section {
    padding-top: 46px !important;
    padding-bottom: 18px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content section.rl-faq-section,
  html body.page-id-7 #page #post-7 .entry-content #faq.rl-faq-section {
    padding-top: 22px !important;
    padding-bottom: 68px !important;
  }

  html body.page-id-7 #page #post-7 .entry-content .rl-faq-header {
    margin-bottom: 36px !important;
  }
}

/* Aviso legal breve Superprof en CTA final */
html body.page-id-7 #page #post-7 .entry-content .rl-superprof-notice {
  max-width: 760px !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;

  color: rgba(226, 232, 240, .62) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  text-align: center !important;
}

@media (max-width: 767px) {
  html body.page-id-7 #page #post-7 .entry-content .rl-superprof-notice {
    max-width: 100% !important;
    margin-top: 18px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}