#reforma-pensiones-landing {
  color: #464646;
}

/* main.css solo pone la fuente 'bold' custom (FSElliotPro-Bold) en
   h1 strong / h2 strong - un <strong>, <b> o <h2> sueltos (como los que
   escriben los editores en el body del articulo, ej. <h2>La ventaja de
   un equipo experto</h2>, o las respuestas de la FAQ) quedan con el
   bold sintetico del navegador en vez de la tipografia real. Se pareja
   aca para toda la seccion - h2 incluido, porque cualquier <h2> escrito
   a mano en contenido WYSIWYG (articulo, FAQ) deberia caer aca. */
#reforma-pensiones-landing b,
#reforma-pensiones-landing strong,
#reforma-pensiones-landing h2 {
  font-family: 'bold';
}

/* Los h2 de titulo/chrome de pagina (no los que escriben los editores
   dentro del contenido) pisan lo de arriba con la fuente mas pesada -
   mismo criterio "heavy" que ya se usa en h1 strong / h2 strong de
   main.css. Especificidad igual (id + 1 clase + tag) a la regla de
   arriba pero mas selectores/mas abajo en el archivo, gana. */
#reforma-pensiones-landing .rp-block__head h2,
#reforma-pensiones-landing .rp-cta h2,
#reforma-pensiones-landing #rp-modal-title {
  color: #162b48;
  font-family: 'heavy';
}

/* "Te puede interesar" (single de articulo): mas chico y en altas. */
#reforma-pensiones-landing .rp-section-title {
  color: #0076cf;
  font-family: 'bold';
  font-size: 1rem;
  text-transform: uppercase;
}

/* Los titulos de pagina ya no necesitan un <strong> interno: el peso
   heavy se aplica directamente al h1, manteniendo el color propio de
   cada contexto (blanco en el hero, oscuro en el resto). */
#reforma-pensiones-landing h1 {
  font-family: 'heavy';
  letter-spacing: -1px;
}

/* El item activo del menu principal usa amarillo (#f2af32, main.css
   .current-menu-item a) - muy poco contraste sobre el fondo celeste
   claro del nav. Esta hoja solo carga en las paginas de Reforma, asi
   que el override queda acotado a esta seccion sin tocar el resto del
   sitio (donde el amarillo sigue igual). */
.current-menu-item a {
  color: #003865 !important;
}

/* Header del sitio (logo + botones, main.css "header{background-color:
   #0076CF}") a Prussian Blue (#003865, color primario del manual de
   marca Cuprum 2026) solo en Reforma - mismo mecanismo que el override
   de arriba: esta hoja solo carga en estas 4 paginas, asi que el bare
   "header" (sin #reforma-pensiones-landing, que no es ancestro del
   header) no se filtra al resto del sitio. */
header {
  background-color: #003865;
}

/* Sticky: la barra completa (trail + selects) queda fija arriba al
   scrollear. El header/nav principal del sitio es position:relative (no
   fijo), asi que top:0 no queda tapado por nada. */
#reforma-pensiones-landing .rp-breadcrumb {
  background: #fff;
  box-shadow: 0 1px 0 rgba(22, 43, 72, 0.06);
  color: #464e7e;
  font-size: 0.875rem;
  position: sticky;
  top: 0;
  z-index: 40;
}

#reforma-pensiones-landing .rp-breadcrumb .container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: flex-start;
  padding-bottom: 0.95rem;
  padding-top: 0.95rem;
}

#reforma-pensiones-landing .rp-breadcrumb .rp-breadcrumb__trail {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

#reforma-pensiones-landing .rp-breadcrumb a {
  color: #464e7e;
  text-decoration: none;
}

/* Titulo del articulo en el breadcrumb (single-post-reforma.php): ya
   viene cortado a 40 caracteres desde PHP, esto es ademas una red de
   seguridad por si igual no entra en una pantalla angosta. Letra un
   poco mas chica que el resto del trail. */
#reforma-pensiones-landing .rp-breadcrumb__current {
  display: inline-block;
  font-size: 0.8rem;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

/* "Inicio" reemplazado por la marca Sala 360° (el mismo logo del header
   -assets/img/sala.png- tiene "Sala" en blanco, invisible sobre el fondo
   blanco del breadcrumb, asi que se recrea como texto en vez de imagen). */
#reforma-pensiones-landing .rp-breadcrumb__brand {
  color: #162b48;
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-breadcrumb__brand-sala {
  color: #0076cf;
  font-family: 'heavy';
}

#reforma-pensiones-landing .rp-breadcrumb__brand-360 {
  color: #f2af32;
  font-family: 'heavy';
}

/* Navegacion transversal de Reforma dentro de la franja sticky. Los
   filtros propios de cada pagina viven en el encabezado del contenido. */
#reforma-pensiones-landing .rp-breadcrumb__subnav {
  align-items: center;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}

#reforma-pensiones-landing .rp-breadcrumb__subnav-menu {
  align-items: center;
  display: flex;
  gap: 0.25rem;
}

#reforma-pensiones-landing .rp-breadcrumb__subnav-trigger {
  display: none;
}

#reforma-pensiones-landing .rp-breadcrumb__subnav::-webkit-scrollbar {
  display: none;
}

#reforma-pensiones-landing .rp-breadcrumb__subnav a {
  border-radius: 999px;
  flex: 0 0 auto;
  font-family: 'bold';
  padding: 0.45rem 0.75rem;
  white-space: nowrap;
}

#reforma-pensiones-landing .rp-breadcrumb__subnav a:hover,
#reforma-pensiones-landing .rp-breadcrumb__subnav a.is-current {
  background: #e5f3fb;
  color: #0076cf;
}

#reforma-pensiones-landing .rp-profile-pill {
  align-items: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  color: #464646;
  display: flex;
  flex: 0 0 auto;
  gap: 0.65rem;
  padding: 0.35rem 0.45rem 0.35rem 1rem;
}

#reforma-pensiones-landing .rp-profile-pill strong {
  color: #003764;
  font-family: 'bold';
  white-space: nowrap;
}

#reforma-pensiones-landing .rp-profile-pill button {
  background: #e5f3fb;
  border: 0;
  border-radius: 999px;
  color: #003764;
  font-family: 'bold';
  padding: 0.45rem 0.9rem;
}

#reforma-pensiones-landing .rp-submenu {
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

#reforma-pensiones-landing .rp-submenu .container {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.95rem;
  padding-top: 0.95rem;
}

#reforma-pensiones-landing .rp-submenu a {
  color: #162b48;
  flex: 0 0 auto;
  font-family: 'bold';
  text-decoration: none;
}

#reforma-pensiones-landing .rp-submenu a:hover {
  color: #0076cf;
}

#reforma-pensiones-landing .rp-eyebrow {
  color: #f2af32;
  display: block;
  font-family: 'bold';
  font-size: 0.78rem;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

/* Hero fusionado con la linea de tiempo (a pedido): texto introductorio
   a la izquierda, linea de tiempo a la derecha, sobre el mismo fondo
   navy que antes tenia solo la seccion de la linea de tiempo. */
#reforma-pensiones-landing .rp-hero {
  background: linear-gradient(135deg, #0a2540 0%, #163a63 55%, #1c5fa0 100%);
  overflow: hidden;
  padding: 4rem 0 4.5rem;
  position: relative;
}

/* Circulo decorativo + punto (mismo motivo que bg_timeline.png en
   fondosgeneracionales.cl), recreado en SVG puro para no depender de un
   bitmap externo. Ancla al borde derecho de .rp-hero, que va de punta a
   punta del viewport (no tiene el max-width del .container), asi que
   right:0 lo deja pegado al borde derecho real de la pantalla. Mas
   grande que el bloque de la linea de tiempo a proposito: se recorta
   con overflow:hidden de .rp-hero. */
#reforma-pensiones-landing .rp-hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 888 829'%3E%3Ccircle cx='959' cy='75' r='401' fill='none' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='1.5'/%3E%3Ccircle cx='597' cy='248' r='16' fill='%23f2af32'/%3E%3C/svg%3E");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 920px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -160px;
  width: 980px;
  z-index: 0;
}

#reforma-pensiones-landing .rp-hero__grid {
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-hero .rp-eyebrow {
  color: #f2af32;
}

#reforma-pensiones-landing .rp-hero__content h1 {
  color: #fff;
  font-family: 'light';
}

/* "Reforma de Pensiones" dentro del titulo va en bold, el resto en
   light (mismo juego tipografico que Contenidos) - ver el wrap con
   <strong> en el template. */
#reforma-pensiones-landing .rp-hero__content h1 strong {
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-hero__content p {
  color: rgba(255, 255, 255, 0.78);
}

#reforma-pensiones-landing .rp-hero__grid,
#reforma-pensiones-landing .rp-block__head,
#reforma-pensiones-landing .rp-cta .container {
  align-items: center;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
}

/* Los items de estos grids son "auto" por default (min-width:auto), o
   sea que el track no se achica mas alla del contenido "natural" del
   item mas ancho - en el hero eso es .rp-actions (los 2 botones) sin
   wrapear, ~400px, mas ancho que cualquier mobile. Con min-width:0 el
   grid si puede angostar el item hasta el ancho real disponible, y
   recien ahi el flex-wrap:wrap de adentro (o el word-wrap del texto)
   entra a tallar. Sin esto, en mobile <991px (grid-template-columns:1fr
   mas abajo) el track igual queda forzado a ~400px y el excedente se
   recorta con el overflow:hidden de .rp-hero (texto/boton cortados a la
   mitad en vez de bajar de linea). */
#reforma-pensiones-landing .rp-hero__grid > *,
#reforma-pensiones-landing .rp-block__head > *,
#reforma-pensiones-landing .rp-cta .container > * {
  min-width: 0;
}

#reforma-pensiones-landing .rp-hero__grid {
  align-items: start;
}

/* Mas aire entre las dos columnas del hero (texto intro | linea de
   tiempo) - quedaban pegadas con solo el gap del grid. */
#reforma-pensiones-landing .rp-hero__content {
  padding-right: 2rem;
}

#reforma-pensiones-landing .rp-hero__content p,
#reforma-pensiones-landing .rp-block__head p,
#reforma-pensiones-landing .rp-cta p {
  font-size: 1.125rem;
  line-height: 1.65;
  margin-bottom: 0;
}

#reforma-pensiones-landing .rp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

#reforma-pensiones-landing .rp-hero .btn {
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-hero__timeline {
  padding-left: 2rem;
  padding-top: 0.4rem;
}

#reforma-pensiones-landing .rp-hero__timeline-lead {
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

#reforma-pensiones-landing .rp-hero__timeline .rp-timeline__layout {
  margin-top: 1.75rem;
}

#reforma-pensiones-landing .rp-block {
  padding: 3.35rem 0 4rem;
}

#reforma-pensiones-landing .rp-block--page-gradient {
  background: linear-gradient(135deg, #0a2540 0%, #163a63 55%, #1c5fa0 100%);
  color: #fff;
}

#reforma-pensiones-landing .rp-block--page-gradient h1,
#reforma-pensiones-landing .rp-block--page-gradient .rp-block__head h2,
#reforma-pensiones-landing .rp-block--page-gradient .rp-block__head .rp-content-tool__title {
  color: #fff;
}

#reforma-pensiones-landing .rp-block--page-gradient .rp-block__head p,
#reforma-pensiones-landing .rp-block--page-gradient .rp-block__head .rp-content-tool__help,
#reforma-pensiones-landing .rp-block--page-gradient .rp-faq-count {
  color: rgba(255, 255, 255, 0.82);
}

#reforma-pensiones-landing .rp-block--page-gradient .rp-filter-reset {
  color: #bcdfff;
}

#reforma-pensiones-landing .rp-block--page-gradient .rp-filter-reset:hover:not(:disabled),
#reforma-pensiones-landing .rp-block--page-gradient .rp-filter-reset:focus-visible:not(:disabled) {
  color: #fff;
}

#reforma-pensiones-landing .rp-block--page-gradient .rp-filter-reset:disabled {
  color: rgba(255, 255, 255, 0.55);
}

#reforma-pensiones-landing .rp-block--page-gradient .rp-block__head--content-hero {
  margin-bottom: 0;
}

/* position+z-index para que esta seccion (filtros/cards) pinte siempre
   por encima del circulo de linea del hero de arriba, que se desborda
   hacia abajo a proposito (overflow:visible) - sin esto, un elemento
   position:absolute con z-index pinta por encima del contenido normal
   de un hermano posterior aunque venga despues en el DOM (asi funciona
   el stacking de CSS), y la linea se veria cruzando sobre las cards. */
/* Fondo blanco para separar visualmente el listado de cards del hero. */
#reforma-pensiones-landing .rp-block--page-content {
  background: #fff;
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-block--content-list {
  background: #e5f3fb;
}

#reforma-pensiones-landing .rp-block--content-list .rp-eyebrow {
  color: #0076cf;
}

#reforma-pensiones-landing .rp-block__head .rp-content-list__title {
  font-family: 'light';
}

#reforma-pensiones-landing .rp-block__head .rp-content-list__title strong {
  font-family: 'bold';
}

/* ---------- Linea de tiempo (hub) ----------
   Lista vertical de hitos + linea/puntos a la izquierda, panel de
   detalle grande a la derecha (referencia: fondosgeneracionales.cl -
   misma estructura, paleta Cuprum en vez de la de ese sitio). Vive
   fusionada dentro de .rp-hero (fondo navy compartido), no en su
   propia seccion. */
/* Linea de tiempo: lista vertical de hitos con linea/puntos a la
   izquierda + panel de detalle grande a la derecha (revertido - el
   intento de mes-a-la-derecha/linea-al-centro/contenido-angosto quedo
   con overlaps entre columnas y se descarto). */
#reforma-pensiones-landing .rp-timeline__layout {
  display: flex;
  gap: 2.5rem;
}

@media (min-width: 901px) {
  #reforma-pensiones-landing .rp-hero__timeline {
    padding-left: 5rem;
  }

  #reforma-pensiones-landing .rp-timeline__layout {
    gap: 1.5rem;
  }

  #reforma-pensiones-landing .rp-hero__timeline .rp-timeline__nav {
    flex-basis: 220px;
  }

  #reforma-pensiones-landing .rp-hero__timeline .rp-timeline__nav::before {
    top: 0.9rem;
  }
}

#reforma-pensiones-landing .rp-timeline__nav {
  display: flex;
  flex: 0 0 260px;
  flex-direction: column;
  gap: 1.35rem;
  padding-left: 0;
  position: relative;
}

#reforma-pensiones-landing .rp-timeline__nav::before {
  background: rgba(255, 255, 255, 0.25);
  bottom: 0.9rem;
  content: '';
  left: 5px;
  position: absolute;
  top: 0.5rem;
  width: 2px;
}

#reforma-pensiones-landing .rp-timeline__navbtn {
  align-items: center;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 12px minmax(0, 1fr) 18px;
  padding: 0;
  position: relative;
  text-align: left;
  transition: color 0.2s ease;
}

#reforma-pensiones-landing .rp-timeline__navbtn:hover {
  color: #fff;
}

#reforma-pensiones-landing .rp-timeline__dot {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  height: 10px;
  position: relative;
  transition: all 0.2s ease;
  width: 10px;
  z-index: 1;
}

#reforma-pensiones-landing .rp-timeline__navlabel {
  font-size: 0.85rem;
  line-height: 1.25;
}

/* Version abreviada ("Mar 2025" en vez de "Marzo 2025") para los chips
   del carril horizontal en mobile - ver @media (max-width: 900px) mas
   abajo. En desktop no se muestra: la lista vertical usa el nombre
   completo (.rp-timeline__navlabel). */
#reforma-pensiones-landing .rp-timeline__navlabel-short {
  display: none;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
}

#reforma-pensiones-landing .rp-timeline__navarrow {
  color: #bcdfff;
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#reforma-pensiones-landing .rp-timeline__navbtn.is-selected {
  color: #bcdfff;
}

#reforma-pensiones-landing .rp-timeline__navbtn.is-selected .rp-timeline__navlabel {
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-timeline__navbtn.is-selected .rp-timeline__dot {
  background: #bcdfff;
  box-shadow: 0 0 0 5px #162b48;
  height: 14px;
  width: 14px;
}

#reforma-pensiones-landing .rp-timeline__navbtn.is-selected .rp-timeline__navarrow {
  opacity: 1;
  transform: translateX(0);
}

/* Punto del mes actual (hoy, no el seleccionado en la UI - reemplaza el
   texto "Estamos aqui" que tenia antes). Laten como un heartbeat en vez
   de parpadear en opacidad, sutil. La segunda regla es necesaria porque
   cuando el mes actual tambien es el seleccionado por defecto, la regla
   de arriba (.is-selected .rp-timeline__dot, misma especificidad) pisa
   el color si no se repite con la misma especificidad y despues en el
   archivo. */
#reforma-pensiones-landing .rp-timeline__dot--current {
  animation: rp-timeline-heartbeat 1.8s ease-in-out infinite;
  background: #f2af32;
}

#reforma-pensiones-landing .rp-timeline__navbtn.is-selected .rp-timeline__dot--current {
  background: #f2af32;
}

@keyframes rp-timeline-heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.22);
  }
}

#reforma-pensiones-landing .rp-timeline__detail {
  align-items: center;
  display: flex;
  flex: 1;
  min-width: 0;
}

/* Sin width:100%, un .rp-timeline__panel-item (flex item sin flex-basis
   propio) se dimensiona solo a su contenido - como el resto de los
   panel-item estan [hidden] (display:none, no compiten por espacio), el
   visible no tiene con que "achicarse" y crece hasta el max-width:400px
   del carrusel Swiper que contiene, aunque .rp-timeline__detail (su
   padre) sea mas angosto en mobile. Eso ademas hace que Swiper mida
   400px de contenedor al iniciar y fije ese ancho inline en cada slide
   (swiper-slide), recortando el texto del hito. width:100% ata el
   panel-item (y por cascada el carrusel) al ancho real disponible. */
#reforma-pensiones-landing .rp-timeline__panel-item {
  min-width: 0;
  width: 100%;
}

/* El color de aca cae sobre el nombre del mes (texto suelto antes del
   <br>) - el año en <strong> lo pisa a blanco de vuelta abajo, para que
   no quede tambien celeste. */
#reforma-pensiones-landing .rp-timeline__date {
  color: #bcdfff;
  display: block;
  font-family: 'light';
  font-size: 2.35rem;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

#reforma-pensiones-landing .rp-timeline__date strong {
  color: #fff;
  display: block;
  font-family: 'heavy';
  margin-top: 0.2rem;
}

#reforma-pensiones-landing .rp-timeline__items {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  max-width: 400px;
  padding: 0;
}

#reforma-pensiones-landing .rp-timeline__items li {
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.4;
  padding-left: 0.9rem;
}

/* Carrusel para meses con 3+ hitos (alternativa a .rp-timeline__items
   arriba) - ver tmpl-reforma-pensiones-landing.php. */
#reforma-pensiones-landing .rp-timeline-carousel {
  max-width: 400px;
  width: 100%;
}

#reforma-pensiones-landing .rp-timeline-carousel__text {
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
  min-height: 3.9rem;
  padding-left: 0.9rem;
}

#reforma-pensiones-landing .rp-timeline-carousel__nav {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.1rem;
}

/* Swiper trae su propio look para .swiper-button-prev/next (absolute,
   27x44px, icono propio via ::after) - se resetea aca porque el boton
   usa un icono bi- en vez del de Swiper y va inline en .rp-timeline-carousel__nav,
   no flotando sobre las slides. */
#reforma-pensiones-landing .rp-timeline-carousel__arrow {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  margin-top: 0;
  position: static;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 2rem;
}

#reforma-pensiones-landing .rp-timeline-carousel__arrow::after {
  content: none;
}

#reforma-pensiones-landing .rp-timeline-carousel__arrow:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
}

#reforma-pensiones-landing .rp-timeline-carousel__arrow.swiper-button-disabled {
  cursor: default;
  opacity: 0.35;
}

#reforma-pensiones-landing .rp-timeline-carousel .swiper-pagination {
  flex: 1;
  position: static;
}

#reforma-pensiones-landing .rp-timeline-carousel .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.35);
  opacity: 1;
}

#reforma-pensiones-landing .rp-timeline-carousel .swiper-pagination-bullet-active {
  background: #f2af32;
}

@media (max-width: 900px) {
  #reforma-pensiones-landing .rp-timeline__layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Carril horizontal en vez de lista vertical: no hace falta ver los 7
     hitos a la vez, se hace swipe (scroll nativo, sin JS - los
     touchscreens ya scrollean con gesto sobre overflow-x) para llegar a
     los que no entran. Se mantiene el mismo lenguaje visual que en
     desktop (punto + linea que los conecta, sin fondo tipo chip/badge -
     se probo esa version y no convencio), solo que la linea/los items
     pasan de una columna a una fila. scroll-snap-type alinea cada item
     al soltar en vez de quedar a mitad de camino. */
  #reforma-pensiones-landing .rp-timeline__nav {
    align-items: flex-start;
    flex-basis: auto;
    flex-direction: row;
    gap: 1.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.5rem;
    padding-top: 0.35rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #reforma-pensiones-landing .rp-timeline__nav::-webkit-scrollbar {
    display: none;
  }

  /* Misma linea de antes, rotada: de vertical (izquierda, punta a
     punta del alto) a horizontal (arriba, punta a punta del ancho),
     centrada en la altura del punto (0.35rem de padding-top + mitad de
     los 10px del punto). */
  #reforma-pensiones-landing .rp-timeline__nav::before {
    bottom: auto;
    height: 2px;
    left: 0;
    right: 0;
    top: calc(0.35rem + 5px);
    width: auto;
  }

  #reforma-pensiones-landing .rp-timeline__navbtn {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0.65rem;
    scroll-snap-align: start;
  }

  /* La flecha marca "seleccionado" apuntando a la derecha en la lista
     vertical - en una fila no tiene a donde apuntar, el punto grande +
     el label en negrita ya cumplen esa funcion. */
  #reforma-pensiones-landing .rp-timeline__navarrow {
    display: none;
  }

  #reforma-pensiones-landing .rp-timeline__navlabel {
    display: none;
  }

  #reforma-pensiones-landing .rp-timeline__navlabel-short {
    display: block;
  }

  #reforma-pensiones-landing .rp-timeline__date {
    font-size: 2.25rem;
    text-align: center;
    width: 100%;
  }
}

#reforma-pensiones-landing .rp-block--soft {
  background: #f6f6f6;
}

#reforma-pensiones-landing .rp-block--accesses {
  background: #fff;
}

#reforma-pensiones-landing .rp-block__head {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 1.5rem;
}

#reforma-pensiones-landing .rp-block__head-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.65rem;
}

#reforma-pensiones-landing .rp-block__head-controls .rp-select {
  flex: 0 0 220px;
}

#reforma-pensiones-landing .rp-filter-reset {
  align-items: center;
  align-self: center;
  background: transparent;
  border: 0;
  color: #0076cf;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: 'bold';
  font-size: 0.9rem;
  gap: 0.4rem;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.4rem;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
  white-space: nowrap;
}

#reforma-pensiones-landing .rp-filter-reset:hover:not(:disabled),
#reforma-pensiones-landing .rp-filter-reset:focus-visible:not(:disabled) {
  color: #162b48;
}

#reforma-pensiones-landing .rp-filter-reset:disabled {
  color: #8a98a6;
  cursor: default;
  opacity: 0.6;
  text-decoration: none;
}

@media (max-width: 560px) {
  #reforma-pensiones-landing .rp-block__head-controls {
    flex-wrap: wrap;
  }

  #reforma-pensiones-landing .rp-block__head-controls .rp-select {
    flex: 1 1 100%;
  }
}

#reforma-pensiones-landing .rp-select {
  position: relative;
}

#reforma-pensiones-landing .rp-select__trigger {
  align-items: center;
  background: #fff;
  border: 1px solid #d7dee6;
  border-radius: 999px;
  color: #162b48;
  cursor: pointer;
  display: flex;
  font-family: 'bold';
  font-size: 0.9rem;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

#reforma-pensiones-landing .rp-select__trigger:hover,
#reforma-pensiones-landing .rp-select__trigger[aria-expanded="true"] {
  border-color: #0076cf;
  box-shadow: 0 0 0 3px rgba(0, 118, 207, 0.12);
}

#reforma-pensiones-landing .rp-select__icon {
  color: #0076cf;
  font-size: 1.05rem;
}

#reforma-pensiones-landing .rp-select__value {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#reforma-pensiones-landing .rp-select__caret {
  color: #8a98a6;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}

#reforma-pensiones-landing .rp-select__trigger[aria-expanded="true"] .rp-select__caret {
  transform: rotate(180deg);
}

#reforma-pensiones-landing .rp-select__menu {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0.65rem;
  box-shadow: 0 12px 28px rgba(22, 43, 72, 0.14);
  left: 0;
  margin-top: 0.4rem;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.4rem;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
}

#reforma-pensiones-landing .rp-select__option {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  color: #464646;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 0.85rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
  width: 100%;
}

#reforma-pensiones-landing .rp-select__option[hidden] {
  display: none;
}

#reforma-pensiones-landing .rp-select__option i {
  color: #0076cf;
  flex-shrink: 0;
  font-size: 1rem;
  -webkit-text-stroke: 0.3px currentColor;
  width: 1.1rem;
}

#reforma-pensiones-landing .rp-select__option:hover {
  background: #e5f3fb;
}

#reforma-pensiones-landing .rp-select__option.is-active {
  background: #162b48;
  color: #fff;
}

#reforma-pensiones-landing .rp-select__option.is-active i {
  color: #fff;
}

#reforma-pensiones-landing .rp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
  margin-top: 1.25rem;
}

#reforma-pensiones-landing .rp-filter button {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 2rem;
  color: #464646;
  font-family: 'bold';
  padding: 0.55rem 1rem;
}

#reforma-pensiones-landing .rp-filter .is-active {
  background: #162b48;
  border-color: #162b48;
  color: #fff;
}

#reforma-pensiones-landing .rp-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#reforma-pensiones-landing .rp-pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
}

#reforma-pensiones-landing .rp-pagination[hidden] {
  display: none;
}

#reforma-pensiones-landing .rp-pagination__button {
  align-items: center;
  background: #fff;
  border: 1px solid #d7dee6;
  border-radius: 50%;
  color: #162b48;
  cursor: pointer;
  display: inline-flex;
  font-family: 'bold';
  height: 2.75rem;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  width: 2.75rem;
}

#reforma-pensiones-landing .rp-pagination__button:hover:not(:disabled),
#reforma-pensiones-landing .rp-pagination__button:focus-visible:not(:disabled),
#reforma-pensiones-landing .rp-pagination__button.is-active {
  background: #0076cf;
  border-color: #0076cf;
  color: #fff;
}

#reforma-pensiones-landing .rp-pagination__button:disabled {
  cursor: default;
  opacity: 0.35;
}

/* Señal visual de que el filtro (tema/etapa/buscador) hizo algo -
   sin esto el cambio de [hidden] es instantaneo y puede pasar
   desapercibido si el resultado se parece al anterior. No es un loader
   real (el filtrado es sincronico, no hay nada async que esperar) -
   ver updateCards() en el JS: atenua, filtra, vuelve a 1. Mismo target
   que .rp-faq (data-rp-content-list o data-rp-faq-list, lo que exista
   en la pagina). */
#reforma-pensiones-landing [data-rp-content-list],
#reforma-pensiones-landing [data-rp-faq-list] {
  transition: opacity 0.15s ease;
}

#reforma-pensiones-landing .is-filtering {
  opacity: 0.35;
  pointer-events: none;
}

#reforma-pensiones-landing .rp-webinar-list {
  margin: 0 auto;
  max-width: 980px;
}

#reforma-pensiones-landing .rp-webinar {
  color: #003764;
  text-align: center;
}

#reforma-pensiones-landing .rp-webinar h2 {
  color: #464e7e;
  font-family: 'bold';
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

#reforma-pensiones-landing .rp-webinar p {
  color: #464646;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-left: auto;
  margin-right: auto;
  max-width: 1020px;
}

#reforma-pensiones-landing .rp-webinar iframe {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  margin: 3rem auto 0;
  max-width: 100%;
  width: 900px;
}

#reforma-pensiones-landing .rp-webinar .ratio {
  margin: 3rem auto 0;
  max-width: 900px;
}

#reforma-pensiones-landing .rp-webinar .ratio iframe {
  margin: 0;
  width: 100%;
}

/* isolation:isolate fuerza un stacking context propio en la card - sin
   esto, el z-index:1 de .rp-card__body vs el z-index:0 de
   .rp-card__media (el circulo) quedaba resolviendose contra un
   ancestro mas arriba en vez de compararse entre si directamente, y el
   circulo terminaba pintandose ENCIMA del texto en vez de detras
   (tapaba letras sueltas del parrafo donde se cruzaban). Con esto,
   scoped a la card, el texto siempre gana. */
#reforma-pensiones-landing .rp-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.08);
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

/* Sombra mas marcada, la imagen hace un leve zoom adentro (ver
   .rp-card__media img mas abajo) y el titulo/flecha del "Leer articulo"
   toman el azul de marca - varias señales chicas juntas en vez de un
   solo cambio de borde. Sin translateY: se probo el "levantado" y no
   convencio que la card se mueva de lugar en hover. */
/* Un box-shadow inset (no border-width) dibuja el "grosor" extra del
   borde - cambiar border-width de 1 a 2px encogia 1px el area de
   contenido en cada lado (aun con box-sizing:border-box) y se sentia
   como que la card se movia/saltaba. box-shadow no participa del layout,
   asi que no hay ningun shift. El anillo (inset, 1px, mismo color que
   el border-color de al lado) se suma a la sombra de elevacion en el
   mismo box-shadow - dos box-shadow en el mismo elemento no se apilan,
   tienen que ir juntos separados por coma. */
#reforma-pensiones-landing .rp-card:hover {
  border-color: #0076cf;
  box-shadow: inset 0 0 0 1px #0076cf, 0 1.25rem 2.25rem rgba(18, 38, 63, 0.18);
}

#reforma-pensiones-landing .rp-block--content-list .rp-card {
  border: 0;
}

#reforma-pensiones-landing .rp-block--content-list .rp-card:hover {
  box-shadow: 0 1.25rem 2.25rem rgba(18, 38, 63, 0.18);
}

/* Ya no es un stack flex (imagen arriba, texto abajo) - el texto ocupa
   el flujo normal de la card y la imagen queda como circulo decorativo
   anclado en la esquina inferior derecha (position:relative aca para
   que .rp-card__media, absolute, se posicione contra esta card y no
   contra un ancestro mas arriba). */
#reforma-pensiones-landing .rp-card a {
  color: inherit;
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
}

#reforma-pensiones-landing .rp-card--featured {
  grid-column: span 3;
}

#reforma-pensiones-landing .rp-card--featured a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* aspect-ratio + align-items:stretch (default de grid) no se llevan
   bien: cuando la columna del texto (con badge/titulo/parrafo/cta) es
   mas alta que el 16:9 que da aspect-ratio, algunos navegadores igual
   usan el alto derivado del aspect-ratio en vez de estirar - queda un
   espacio en blanco bajo la imagen dentro de su columna. Ac se saca el
   aspect-ratio en esta variante especifica y se deja que la columna se
   estire a la altura real de la fila (grid); el <img> con object-fit:cover
   ya se encarga de recortar prolijo sea cual sea el alto resultante. */
/* La card destacada mantiene la imagen rectangular de siempre (mitad
   del grid) - todas las propiedades nuevas de .rp-card__media (circulo
   anclado en una esquina, position:absolute) quedan revertidas aca. */
#reforma-pensiones-landing .rp-card--featured .rp-card__media {
  aspect-ratio: auto;
  border-radius: 0;
  bottom: auto;
  height: 100%;
  position: relative;
  right: auto;
  width: 100%;
}

/* Imagen como circulo decorativo anclado en la esquina inferior
   derecha, recortado por el borde de la card (overflow:hidden de
   .rp-card) - mismo motivo "circulo recortado por un borde" que se usa
   en el resto del sitio, aplicado aca a la miniatura de cada card en
   vez del banner 16:9 de antes. El texto (.rp-card__body) queda en el
   flujo normal, arriba/al lado, sin competir por espacio con la
   imagen. */
#reforma-pensiones-landing .rp-card__media {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: #bcdfff;
  border-radius: 50%;
  bottom: -14%;
  color: #0076cf;
  display: flex;
  font-size: 0.875rem;
  height: auto;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: -14%;
  text-align: center;
  width: 46%;
  z-index: 0;
}

#reforma-pensiones-landing .rp-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
  width: 100%;
}

#reforma-pensiones-landing .rp-card:hover .rp-card__media img {
  transform: scale(1.06);
}

#reforma-pensiones-landing .rp-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2.25rem;
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-card__body h3 {
  color: #162b48;
  font-family: 'bold';
  font-size: 1.25rem;
  margin: 0;
  transition: color 0.2s ease;
}

#reforma-pensiones-landing .rp-card:hover .rp-card__body h3 {
  color: #0076cf;
}

/* La card destacada (la primera del grid, ocupa las 3 columnas) tiene
   mas espacio horizontal para el titulo que una card normal - se ve
   chico si se queda en el mismo tamaño que el resto. */
#reforma-pensiones-landing .rp-card--featured .rp-card__body h3 {
  font-size: 1.75rem;
}

#reforma-pensiones-landing .rp-card--featured .rp-card__body {
  padding: 3rem;
}

/* max-width para que el parrafo no se extienda hasta donde queda el
   circulo de la imagen (anclado abajo a la derecha) - antes, aunque el
   texto ya ganaba el z-index, las lineas se cruzaban visualmente por
   encima de la foto; asi directamente no llegan hasta ahi. */
#reforma-pensiones-landing .rp-card__body p {
  line-height: 1.55;
  margin: 0;
  max-width: 78%;
}

#reforma-pensiones-landing .rp-card__date {
  align-items: center;
  color: #5b6b7c;
  display: inline-flex;
  font-size: 0.85rem;
  gap: 0.4rem;
}

#reforma-pensiones-landing .rp-card__date i {
  color: #0076cf;
}

#reforma-pensiones-landing .rp-tag,
#reforma-pensiones-landing .rp-badge {
  align-self: flex-start;
  background: #e5f3fb;
  border-radius: 2rem;
  color: #0076cf;
  font-family: 'bold';
  font-size: 0.75rem;
  padding: 0.35rem 0.75rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Redes sociales (manual pag.34): las frases clave van resaltadas con
   una caja de color solido (ej. "nuestro sitio web", "valor cuota").
   Se replica ese "pop" en el tag de tema, pero solo al hacer hover -
   en reposo se mantiene clara/suave para no saturar de color el grid
   de cards (a pedido). */
#reforma-pensiones-landing .rp-card:hover .rp-tag {
  background: #0076cf;
  color: #fff;
}

#reforma-pensiones-landing .rp-badge {
  background: rgba(22, 43, 72, 0.92);
  color: #fff;
  left: 0.85rem;
  position: absolute;
  top: 0.85rem;
}

/* Badge de los articulos curados a mano (rp_articulos_destacados) -
   mismo componente que .rp-badge (posicion/tamaño), color dorado propio
   para distinguirlo del badge "Webinar" (navy) de Recursos. */
#reforma-pensiones-landing .rp-badge--destacado {
  background: #f2af32;
  color: #162b48;
}

/* Destacados del hub (ACF repeater rp_articulos_destacados): con 1 solo
   elegido, card grande unica sin slider (.rp-featured-single, reusa
   .rp-card--featured tal cual aunque no este dentro de .rp-grid - su
   grid-column:span no hace nada fuera de un grid, queda como bloque
   normal de ancho completo); con 2+, slider Swiper de 1 slide completa
   a la vez (no varias cards asomando - se probo esa version y no
   convencio). Separados del "ultimos articulos" (.rp-grid) de mas
   abajo, que siempre muestra los 3 mas recientes sin importar esto. */
#reforma-pensiones-landing .rp-featured-single,
#reforma-pensiones-landing .rp-featured-slider {
  margin-bottom: 2.5rem;
}

#reforma-pensiones-landing .rp-featured-slider {
  overflow: hidden;
  padding-bottom: 0.25rem;
}

#reforma-pensiones-landing .rp-featured-slider .swiper-slide {
  height: auto;
}

#reforma-pensiones-landing .rp-featured-slider__nav {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* Swiper trae .swiper-pagination con position:absolute por defecto
   (pensado para flotar encima del slider) - sin resetear eso, los dots
   quedan fuera del flujo del flex y terminan flotando encima/pegados a
   las flechas en vez de ocupar su lugar en la fila. Mismo fix que ya se
   uso en .rp-timeline-carousel .swiper-pagination. */
#reforma-pensiones-landing .rp-featured-slider__nav .swiper-pagination {
  position: static;
}

/* Swiper trae sus propios .swiper-button-prev/next con position:absolute
   (flotando sobre las slides, a mitad de altura) - se resetea a static
   porque estos van en fila junto a la paginacion, debajo del slider
   (mismo patron que .rp-timeline-carousel__arrow). */
#reforma-pensiones-landing .rp-featured-slider__arrow {
  align-items: center;
  background: #fff;
  border: 1px solid #d7dee6;
  border-radius: 999px;
  color: #0076cf;
  cursor: pointer;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  margin-top: 0;
  position: static;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 2.5rem;
}

#reforma-pensiones-landing .rp-featured-slider__arrow::after {
  content: none;
}

#reforma-pensiones-landing .rp-featured-slider__arrow:hover {
  background: #e5f3fb;
  border-color: #0076cf;
}

#reforma-pensiones-landing .rp-featured-slider__arrow.swiper-button-disabled {
  cursor: default;
  opacity: 0.4;
}

#reforma-pensiones-landing .rp-featured-slider__arrow.swiper-button-disabled:hover {
  background: #fff;
  border-color: #d7dee6;
}

#reforma-pensiones-landing .rp-featured-slider__nav .swiper-pagination-bullet-active {
  background: #0076cf;
}

#reforma-pensiones-landing .rp-meta,
#reforma-pensiones-landing .rp-link-label {
  color: #0076cf;
  font-family: 'bold';
  margin-top: auto;
}

/* Flechita que se corre un poco al pasar el mouse por la card completa
   (no solo el texto) - misma logica que el link inline del articulo
   (rp-single__content a::after mas abajo), reforzando el afordance de
   "esto es clickeable" en toda la tarjeta. */
#reforma-pensiones-landing .rp-meta::after {
  content: '\2192';
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.2s ease;
}

#reforma-pensiones-landing .rp-card:hover .rp-meta::after {
  transform: translateX(4px);
}

/* Rediseñado (antes: caja gris con borde punteado, se sentia como un
   placeholder de desarrollo) - ahora con icono, jerarquia clara y un
   boton para salir del estado vacio sin tener que subir a buscar el
   "Limpiar filtros" de arriba. */
/* background:#fff (no el gris casi blanco de antes) + sombra en vez de
   borde: en FAQ esta caja vive sobre el fondo celeste claro de
   .rp-block--page-content (rp-block--hero-dark), y un gris muy claro
   se perdia contra ese celeste - blanco solido + sombra suave contrasta
   en las dos paginas que usan este componente (FAQ celeste, Contenidos
   blanco). */
#reforma-pensiones-landing .rp-empty {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 0.75rem 2rem rgba(18, 38, 63, 0.08);
  padding: 3.5rem 2rem;
  text-align: center;
}

#reforma-pensiones-landing .rp-empty__icon {
  align-items: center;
  background: #e5f3fb;
  border-radius: 50%;
  color: #0076cf;
  display: flex;
  font-size: 1.5rem;
  height: 64px;
  justify-content: center;
  margin: 0 auto 1.25rem;
  width: 64px;
}

#reforma-pensiones-landing .rp-empty h3 {
  color: #162b48;
  font-family: 'bold';
  font-size: 1.375rem;
  margin: 0 0 0.5rem;
}

#reforma-pensiones-landing .rp-empty p {
  color: #6b7280;
  margin: 0 auto;
  max-width: 420px;
}

#reforma-pensiones-landing .rp-empty__reset {
  margin: 1.75rem auto 0;
}

#reforma-pensiones-landing .rp-search {
  display: block;
  margin-bottom: 1.25rem;
}

#reforma-pensiones-landing .rp-faq-tools {
  margin: 1.75rem 0 2rem;
}

#reforma-pensiones-landing .rp-faq-tools__row {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
}

/* min-height explicito en el filtro y el buscador (mas abajo) porque
   quedaban de alto ligeramente distinto: el select tiene menos padding
   vertical + texto mas chico que el buscador, con align-items:center
   alcanza para centrar el contenido de cada uno dentro del mismo alto. */
#reforma-pensiones-landing .rp-select--faq-filter {
  width: 100%;
}

#reforma-pensiones-landing .rp-select--faq-filter .rp-select__trigger {
  height: 3.25rem;
}

#reforma-pensiones-landing .rp-faq-filter-stack {
  flex: 0 0 260px;
  width: 260px;
}

/* Envuelve el input + el dropdown de sugerencias, para poder posicionar
   el dropdown (absolute) relativo al buscador y no a toda la fila. */
#reforma-pensiones-landing .rp-faq-search-wrap {
  flex: 1;
  position: relative;
}

#reforma-pensiones-landing .rp-block__head--content-hero {
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  margin-bottom: 0;
}

#reforma-pensiones-landing .rp-block__head--content-hero .rp-block__head-main {
  grid-column: 2;
}

@media (min-width: 992px) {
  #reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero .rp-block__head-main {
    transform: translateX(120px);
  }
}

#reforma-pensiones-landing .rp-block--content-hero {
  overflow: hidden;
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
  position: relative;
}

#reforma-pensiones-landing .rp-block__head--content-hero h1 {
  font-family: 'bold';
}

/* ---------- Hero "outline" (fondo blanco + circulo de linea) ----------
   Variante nueva del hero de contenido, siguiendo el recurso "Orbita"
   del manual de marca Cuprum 2026 (pag.28, "El circulo como elemento
   grafico principal - Variacion digital"): circulo grande de solo
   linea (sin relleno), recortado del borde izquierdo del diseño, con
   un punto montado en su borde (trigonometria cos/sin de 25° para que
   quede exactamente sobre la linea, no suelto). Titulo afuera, en azul,
   al lado - a diferencia del intento anterior (circulo solido con
   texto blanco adentro, ver historial), esto es lo pedido finalmente.
   Por ahora solo en Contenidos (Principales cambios) - en revision. */
#reforma-pensiones-landing .rp-block--hero-outline {
  background: #fff;
}

#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head-main {
  max-width: 600px;
}

#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero h1 {
  color: #003865;
  font-family: 'light';
}

/* "Reforma de Pensiones" dentro del titulo va en bold, el resto en
   light (a pedido) - ver el wrap con <strong> en el template. */
#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero h1 strong {
  font-family: 'bold';
}

/* Bajada estatica (sin data-rp-profile-copy a proposito, por ahora no
   cambia segun la etapa elegida - ver JS) - gris neutro, no el azul
   del titulo, para que quede claro que es texto secundario. */
#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero p {
  color: #828282;
  font-size: 1.25rem;
}

/* Mas aire abajo: le da lugar al circulo con foto
   (.rp-content-hero__circle-photo) y empuja filtros/cards mas lejos
   del circulo de linea grande, que se desborda hacia abajo a
   proposito. */
#reforma-pensiones-landing .rp-block--hero-outline.rp-block--content-hero {
  padding-bottom: 4.75rem;
  padding-top: 4.75rem;
}

/* Vuelve a grid (texto en columna 2, al lado del circulo - no mas
   adentro de el). overflow:visible + el circulo bien grande: se
   desborda arriba/abajo de la seccion a proposito, tapado por el
   header/seccion siguiente donde corresponda (es solo una linea fina,
   no un relleno solido, asi que cruzar sobre otro contenido no genera
   problema de contraste).
   grid-template-columns con guard min-width:992px (mismo corte que usa
   el resto del hero para colapsar a 1 columna, ver @media (max-width:
   991px) mas abajo) - sin este guard, al tener mas clases esta regla
   es mas especifica que la de mobile y gana igual en pantallas chicas,
   dejando texto y circulo superpuestos en vez de apilados. */
#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero {
  min-height: 340px;
  position: relative;
}

#reforma-pensiones-landing .rp-block--hero-outline .rp-block__head-main {
  align-self: center;
}

@media (min-width: 992px) {
  #reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero {
    grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1fr);
  }
}

#reforma-pensiones-landing .rp-block--hero-outline.rp-block--content-hero {
  overflow: visible;
}

#reforma-pensiones-landing .rp-content-hero__circle {
  background: transparent;
  border: 1px solid #003865;
  border-radius: 50%;
  box-sizing: border-box;
  height: clamp(680px, 58vw, 980px);
  /* Se ancla contra el viewport, no solo contra el container: asi en
     monitores anchos la foto sigue saliendo por el borde izquierdo y
     nunca queda una franja azul antes del circulo. */
  left: calc((100vw - 100%) / -2 - 18vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateY(-18%);
  width: clamp(680px, 58vw, 980px);
  z-index: 0;
}

@media (min-width: 1400px) {
  #reforma-pensiones-landing .rp-block--hero-outline .rp-content-hero__circle {
    transform: translateY(-26%);
  }
}

/* Segundo circulo grande, decorativo, mas abajo en la seccion de
   filtros/cards - recortado del borde DERECHO (a diferencia del
   circulo del hero, que se recorta por la izquierda), para variar la
   composicion. z-index:-1 (no el 0 del circulo base) para que quede
   siempre detras del contenido normal de esta seccion (.container,
   que participa del mismo stacking context via el
   position:relative;z-index:1 de .rp-block--page-content) y solo se
   vea por los huecos, igual que el circulo del hero. */
#reforma-pensiones-landing .rp-content-hero__circle--secondary {
  bottom: 0;
  height: clamp(460px, 42vw, 680px);
  left: auto;
  opacity: 0.3;
  right: -22%;
  top: auto;
  transform: none;
  width: clamp(460px, 42vw, 680px);
  z-index: -1;
}

/* La foto ocupa el 90% del circulo y permanece exactamente concentrica. */
#reforma-pensiones-landing .rp-content-hero__circle-photo {
  border-radius: 50%;
  display: block;
  height: 90%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

#reforma-pensiones-landing .rp-content-hero__circle-photo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

#reforma-pensiones-landing .rp-content-hero__circle-dot {
  background: #f2af32;
  border-radius: 50%;
  height: clamp(14px, 1.7vw, 22px);
  left: 95.32%;
  position: absolute;
  top: 28.89%;
  transform: translate(-50%, -50%);
  width: clamp(14px, 1.7vw, 22px);
}

/* Variante cromatica del hero para FAQ: conserva imagen a la izquierda
   y texto a la derecha, invirtiendo solamente la paleta. */
#reforma-pensiones-landing .rp-block--hero-dark {
  background: linear-gradient(135deg, #0a2540 0%, #163a63 55%, #1c5fa0 100%);
}

#reforma-pensiones-landing .rp-block--hero-dark .rp-block__head--content-hero h1 {
  color: #fff;
}

#reforma-pensiones-landing .rp-block--hero-dark .rp-block__head--content-hero p {
  color: rgba(255, 255, 255, 0.78);
}

#reforma-pensiones-landing .rp-block--hero-dark .rp-content-hero__circle {
  border-color: rgba(255, 255, 255, 0.55);
}

#reforma-pensiones-landing .rp-content-hero__media {
  bottom: 0;
  height: 100%;
  left: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300'%3E%3Ccircle cx='120' cy='150' r='390' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 300'%3E%3Ccircle cx='120' cy='150' r='390' fill='white'/%3E%3C/svg%3E");
  mask-position: left center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  max-width: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: clamp(320px, 37vw, 540px);
}

#reforma-pensiones-landing .rp-content-hero__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

#reforma-pensiones-landing .rp-content-filters {
  align-items: end;
  border-bottom: 1px solid #e6e6e6;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.9fr);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

#reforma-pensiones-landing .rp-content-filters__copy {
  max-width: 520px;
}

#reforma-pensiones-landing .rp-content-filters__copy .rp-filter-reset {
  margin-top: 0.75rem;
}

#reforma-pensiones-landing .rp-content-filters .rp-content-tool__title {
  color: #162b48;
  font-family: 'bold';
  font-size: 1rem;
  margin: 0 0 0.2rem;
}

#reforma-pensiones-landing .rp-content-filters .rp-content-tool__help {
  color: #464646;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

#reforma-pensiones-landing .rp-content-filters__actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#reforma-pensiones-landing .rp-block--content-list .rp-content-filters {
  border-bottom-color: #fff;
}

#reforma-pensiones-landing .rp-block--content-list .rp-select__trigger {
  border: 0;
}

#reforma-pensiones-landing .rp-block--content-list .rp-faq-search {
  background: #fff;
  border: 0;
}

#reforma-pensiones-landing .rp-block--content-list .rp-faq-search:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 118, 207, 0.12);
}

#reforma-pensiones-landing .rp-content-filters .rp-block__head-controls {
  width: 100%;
}

#reforma-pensiones-landing .rp-content-filters .rp-block__head-controls .rp-select {
  flex: 1 1 0;
  min-width: 0;
}

#reforma-pensiones-landing .rp-faq-search {
  align-items: center;
  border: 2px solid #e6e6e6;
  border-radius: 999px;
  box-sizing: border-box;
  display: flex;
  gap: 0.75rem;
  height: 3.25rem;
  margin-bottom: 0;
  padding: calc(0.85rem - 1px) calc(1rem - 1px);
  transition: border-color 0.15s ease;
  width: 100%;
}

/* Borde celeste marca que hay una busqueda activa - mientras se tipea
   (:focus-within) y tambien despues, mientras quede texto cargado
   (:has input con valor), para que no se pierda el indicador apenas se
   hace click en una sugerencia y el foco se va del input. */
#reforma-pensiones-landing .rp-faq-search:focus-within,
#reforma-pensiones-landing .rp-faq-search:has(input:not(:placeholder-shown)) {
  border-color: #0076cf;
}

#reforma-pensiones-landing .rp-faq-search span {
  color: #464e7e;
  font-size: 1.75rem;
  line-height: 1;
}

#reforma-pensiones-landing .rp-faq-search input {
  border: 0;
  color: #464646;
  flex: 1;
  font-size: 1rem;
  outline: 0;
  width: 100%;
}

/* Dropdown predictivo (ver data-rp-faq-suggestions / applyFaqSuggestions
   en el JS): flota debajo del buscador, mismo look que .rp-select__menu
   (fondo blanco, sombra, radio) para sentirse parte del mismo lenguaje
   de "menu flotante" del resto del sitio. */
#reforma-pensiones-landing .rp-faq-suggestions {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 1rem;
  box-shadow: 0 1.25rem 2.5rem rgba(22, 43, 72, 0.14);
  left: 0;
  margin-top: 0.4rem;
  max-height: 340px;
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}

#reforma-pensiones-landing .rp-faq-suggestions__item {
  background: none;
  border: 0;
  border-bottom: 1px solid #f1f1f1;
  color: #162b48;
  cursor: pointer;
  display: block;
  font-size: 0.95rem;
  padding: 0.85rem 1.25rem;
  text-align: left;
  width: 100%;
}

#reforma-pensiones-landing .rp-faq-suggestions__item:last-child {
  border-bottom: 0;
}

#reforma-pensiones-landing .rp-faq-suggestions__item:hover,
#reforma-pensiones-landing .rp-faq-suggestions__item.is-active {
  background: #eef7fb;
  color: #0076cf;
}

#reforma-pensiones-landing .rp-faq-suggestions__item mark {
  background: none;
  color: #0076cf;
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-faq-suggestions__empty {
  color: #8a8a8a;
  font-size: 0.9rem;
  padding: 0.85rem 1.25rem;
}

#reforma-pensiones-landing .rp-topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

#reforma-pensiones-landing .rp-topic-filter button {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  color: #162b48;
  font-family: 'regular';
  padding: 0.65rem 1.05rem;
}

#reforma-pensiones-landing .rp-topic-filter button.is-active {
  background: #003764;
  border-color: #003764;
  color: #fff;
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-faq-count {
  color: #464e7e;
  margin: 1.5rem 0 0;
}

#reforma-pensiones-landing .rp-faq__group {
  color: #0076cf;
  font-family: 'heavy';
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 3rem 0 0.5rem;
  text-transform: uppercase;
}

#reforma-pensiones-landing .rp-faq__group:first-of-type {
  margin-top: 0.5rem;
}

#reforma-pensiones-landing .rp-faq__item {
  border-bottom: 1px solid #e6e6e6;
}

#reforma-pensiones-landing .rp-faq__item > button {
  background: transparent;
  border: 0;
  color: #162b48;
  font-family: 'bold';
  font-size: 1.08rem;
  padding: 1.2rem 2.5rem 1.2rem 0;
  position: relative;
  text-align: left;
  width: 100%;
}

#reforma-pensiones-landing .rp-faq__item > button:after {
  color: #0076cf;
  content: '+';
  font-family: 'bold';
  font-size: 1.75rem;
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
}

#reforma-pensiones-landing .rp-faq__item > button[aria-expanded='true']:after {
  content: '-';
}

#reforma-pensiones-landing .rp-faq__item > button span {
  color: #0076cf;
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

/* Con el header de grupo visible, la etiqueta de tema dentro de cada
   pregunta es redundante (ya la dice el rp-faq__group de arriba) */
#reforma-pensiones-landing .rp-faq__item--grouped > button span {
  display: none;
}

/* Expansion suave (no fade) al abrir una pregunta: grid-template-rows
   de 0fr a 1fr es el truco estandar para animar un alto que no se
   conoce de antemano (la respuesta puede tener cualquier largo) sin
   JS de por medio - a diferencia de max-height (que obliga a inventar
   un numero de sobra) escala exacto al contenido real. min-height:0 en
   el hijo es necesario porque los items de grid no se achican solos
   por debajo de su min-content (mismo problema que min-width:0 en los
   grids horizontales, version vertical). */
#reforma-pensiones-landing .rp-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

#reforma-pensiones-landing .rp-faq__answer-wrap.is-open {
  grid-template-rows: 1fr;
}

/* Sin padding aca a proposito: con contenido colapsado a 0 de alto, un
   padding-bottom en el mismo elemento que tiene min-height:0 igual se
   renderiza completo (padding no se "aplasta" con el contenido), asi
   que con la pregunta cerrada se veian ~20px (el 1.25rem de abajo) -
   quedaba la primera linea de la respuesta asomando. El padding se
   movio a .rp-faq__answer-inner (un nivel mas adentro, fuera del
   elemento que colapsa) para que el que colapsa quede realmente en 0. */
#reforma-pensiones-landing .rp-faq__answer {
  min-height: 0;
  overflow: hidden;
}

#reforma-pensiones-landing .rp-faq__answer-inner {
  max-width: 760px;
  padding: 0 2rem 1.25rem 0;
}

/* Ya cubierto en general por #reforma-pensiones-landing strong (arriba
   del archivo, linea ~11) pero lo dejamos explicito aca tambien para la
   respuesta de la FAQ - misma razon que en el body del articulo: sin
   esto un <strong>/<b> escrito en el contenido usa el bold sintetico
   del navegador en vez de FSElliotPro-Bold. */
#reforma-pensiones-landing .rp-faq__answer-inner strong,
#reforma-pensiones-landing .rp-faq__answer-inner b {
  font-family: 'bold';
}

/* El banner vive anidado dentro del .container de la pagina (single-post-reforma.php
   .rp-single > .container > .rp-cta), asi que su fondo hereda el
   max-width de ese contenedor a menos que se lo saque a la fuerza. Los
   margenes negativos lo estiran de borde a borde del viewport; el
   contenido interno (h2/p/boton) sigue adentro de su propio .container
   (linea 941 mas abajo), que es el que queda centrado y con el
   max-width normal del sitio. */
/* Foto real (asesor con clientes, assets/img/asesoria/banner-asesoria.jpg
   - ya la usaba la seccion de Asesoria) en vez del navy plano. Degrade
   por encima para que el texto blanco se siga leyendo sin importar que
   parte de la foto quede detras (mas oscuro a la izquierda, donde va el
   texto, mas claro a la derecha donde esta el boton). */
#reforma-pensiones-landing .rp-cta {
  background-color: #162b48;
  background-image: linear-gradient(90deg, rgba(10, 30, 54, 0.94) 0%, rgba(10, 30, 54, 0.86) 45%, rgba(10, 30, 54, 0.55) 100%), url(../img/asesoria/banner-asesoria.jpg);
  background-position: center;
  background-size: cover;
  color: #fff;
  display: flex;
  align-items: center;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 22rem;
  overflow: hidden;
  padding: 3.75rem 0;
  position: relative;
}

/* Mismo circulo decorativo que .rp-hero (linea de tiempo del landing),
   escalado a la altura mas chica de este banner. */
#reforma-pensiones-landing .rp-cta::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 888 829'%3E%3Ccircle cx='959' cy='75' r='401' fill='none' stroke='%23ffffff' stroke-opacity='0.25' stroke-width='1.5'/%3E%3Ccircle cx='597' cy='248' r='16' fill='%23f2af32'/%3E%3C/svg%3E");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 620px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -90px;
  width: 660px;
  z-index: 0;
}

#reforma-pensiones-landing .rp-cta .container {
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-cta h2,
#reforma-pensiones-landing .rp-cta p {
  color: #fff;
}

#reforma-pensiones-landing .rp-cta .container {
  grid-template-columns: minmax(0, 1fr);
}

#reforma-pensiones-landing .rp-cta__copy {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  text-align: center;
}

#reforma-pensiones-landing .rp-cta__copy p {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.55;
}

#reforma-pensiones-landing .rp-cta .btn {
  font-family: 'bold';
  margin-top: 1.5rem;
}

#reforma-pensiones-landing .rp-accesos {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

/* Ahora es un <a> completo (antes solo el boton chico de abajo era
   clickeable) - overflow:hidden + position:relative para el circulo
   decorativo de fondo (mismo motivo que .rp-hero/.rp-cta, mas chico).
   El hover usa box-shadow inset en vez de border-width, misma razon que
   .rp-card: cambiar border-width corre el contenido 1px y se siente
   como que la card salta. */
#reforma-pensiones-landing .rp-acceso {
  background: #162b48;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  padding: 2.25rem;
  position: relative;
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}

#reforma-pensiones-landing .rp-acceso::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 888 829'%3E%3Ccircle cx='959' cy='75' r='401' fill='none' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1.5'/%3E%3Ccircle cx='597' cy='248' r='16' fill='%23f2af32'/%3E%3C/svg%3E");
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 460px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: -60px;
  width: 490px;
}

#reforma-pensiones-landing .rp-acceso:hover {
  box-shadow: inset 0 0 0 1px #0076cf, 0 1.25rem 2.25rem rgba(18, 38, 63, 0.18);
}

#reforma-pensiones-landing .rp-acceso__icon {
  align-items: center;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #fff;
  display: flex;
  font-size: 1.4rem;
  height: 3rem;
  justify-content: center;
  position: relative;
  width: 3rem;
  z-index: 1;
}

#reforma-pensiones-landing .rp-acceso h3 {
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-acceso p {
  margin: 0;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-acceso__cta {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-family: 'bold';
  gap: 0.4rem;
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}

#reforma-pensiones-landing .rp-acceso__cta i {
  transition: transform 0.2s ease;
}

#reforma-pensiones-landing .rp-acceso:hover .rp-acceso__cta i {
  transform: translateX(4px);
}

/* Variante clara: mismo circulo decorativo no funciona con trazo blanco
   sobre fondo celeste (invisible), asi que se apaga aca en vez de
   reescribir el SVG con otro color. */
#reforma-pensiones-landing .rp-acceso--alt {
  background: #bcdfff;
  color: #162b48;
}

#reforma-pensiones-landing .rp-acceso--alt::before {
  display: none;
}

#reforma-pensiones-landing .rp-acceso--alt .rp-acceso__icon {
  background: rgba(255, 255, 255, 0.6);
  color: #0076cf;
}

#reforma-pensiones-landing .rp-acceso--alt h3 {
  color: #162b48;
}

#reforma-pensiones-landing .rp-acceso--alt .rp-acceso__cta {
  color: #003764;
}

@media (max-width: 900px) {
  #reforma-pensiones-landing .rp-accesos {
    grid-template-columns: 1fr;
  }
}

#reforma-pensiones-landing .rp-single {
  padding: 3.5rem 0 4.5rem;
}

#reforma-pensiones-landing .rp-single .rp-section-title {
  margin-bottom: 1.5rem;
}

#reforma-pensiones-landing .rp-card:not(.rp-card--featured) .rp-card__body h3,
#reforma-pensiones-landing .rp-card:not(.rp-card--featured) .rp-card__body .rp-card__date,
#reforma-pensiones-landing .rp-card:not(.rp-card--featured) .rp-card__body .rp-meta {
  max-width: 72%;
}

#reforma-pensiones-landing .rp-single h1,
#reforma-pensiones-landing .rp-single h2,
#reforma-pensiones-landing .rp-single h3,
#reforma-pensiones-landing .rp-single h4,
#reforma-pensiones-landing .rp-single h5,
#reforma-pensiones-landing .rp-single h6 {
  color: #003865;
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-back {
  color: #0076cf;
  display: inline-block;
  font-family: 'bold';
  margin-bottom: 1.75rem;
  text-decoration: none;
}

#reforma-pensiones-landing .rp-single__head {
  max-width: 960px;
}

#reforma-pensiones-landing .rp-single__head h1 {
  font-size: 2.5rem;
}

#reforma-pensiones-landing .rp-single__lead {
  color: #5b6b7c;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0.75rem 0 1rem;
  max-width: 760px;
}

#reforma-pensiones-landing .rp-single--webinar .rp-single__content iframe,
#reforma-pensiones-landing .rp-single--webinar .rp-single__content video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#reforma-pensiones-landing .rp-single__eyebrow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

#reforma-pensiones-landing .rp-single__eyebrow-brand {
  color: #f2af32;
  font-family: 'bold';
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

#reforma-pensiones-landing .rp-single__date {
  color: #464e7e;
  display: flex;
  flex-wrap: wrap;
  font-family: 'bold';
  gap: 0.35rem 1.25rem;
  margin-bottom: 2.25rem;
}

#reforma-pensiones-landing .rp-single__date span {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

#reforma-pensiones-landing .rp-single__date i {
  color: #0076cf;
}

/* .rp-single__body envuelve media + content dentro de la misma columna
   del grid (no del TOC), asi la imagen queda exactamente del mismo
   ancho en el que termina el texto del post, sea que haya indice o no. */
#reforma-pensiones-landing .rp-single__body {
  max-width: 760px;
}

#reforma-pensiones-landing .rp-single__media {
  align-items: center;
  aspect-ratio: 16 / 8;
  background: #bcdfff;
  border-radius: 0.75rem;
  color: #0076cf;
  display: flex;
  justify-content: center;
  margin: 0 0 2.25rem;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

#reforma-pensiones-landing .rp-single__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

#reforma-pensiones-landing .rp-single__grid {
  align-items: start;
  display: grid;
  gap: 3rem;
  grid-template-columns: 220px minmax(0, 1fr);
}

#reforma-pensiones-landing .rp-single__grid--no-toc {
  grid-template-columns: minmax(0, 1fr);
}

/* top tiene que dejar lugar a .rp-breadcrumb, que tambien es sticky y
   queda pegado en top:0 por encima de este indice - si no, el indice
   sticky se esconde detras/se pisa con la barra al hacer scroll. */
#reforma-pensiones-landing .rp-indice {
  align-self: start;
  border-left: 3px solid #0076cf;
  padding-left: 1.15rem;
  position: sticky;
  top: 4.5rem;
}

#reforma-pensiones-landing .rp-indice p {
  color: #162b48;
  font-family: 'bold';
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

#reforma-pensiones-landing .rp-indice a {
  color: #5b6b7c;
  display: block;
  font-size: 0.875rem;
  padding: 0.4rem 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

#reforma-pensiones-landing .rp-indice a.is-active {
  color: #003865;
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-indice a:hover {
  color: #0076cf;
}

#reforma-pensiones-landing .rp-share {
  background: #e5f3fb;
  border-radius: 0.65rem;
  margin-top: 2rem;
  padding: 1.1rem 1.15rem;
}

/* Variante compacta del cuadro Compartelo dentro del breadcrumb (movida
   desde .rp-indice en el sidebar). Oculta por defecto - solo aparece
   cuando .rp-breadcrumb esta "stuck" (pegado arriba al scrollear), clase
   que pone data-rp-breadcrumb-sentinel via IntersectionObserver en
   reforma-pensiones-landing.js, porque position:sticky no tiene forma
   nativa de avisar cuando se pego. */
#reforma-pensiones-landing .rp-share--breadcrumb {
  align-items: center;
  align-self: center;
  background: none;
  border-radius: 0;
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
  margin-top: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  visibility: hidden;
}

#reforma-pensiones-landing .rp-breadcrumb.is-stuck .rp-share--breadcrumb {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

/* .rp-share.rp-share--breadcrumb (2 clases) a proposito, no solo
   .rp-share--breadcrumb: empataba en especificidad con "#id .rp-share p"
   (mas abajo en este archivo) y como esa gana por orden de aparicion,
   pisaba este margin:0 con su margin-bottom:0.85rem - el texto quedaba
   corrido hacia arriba dentro del flex centrado en vez de alineado con
   los iconos. */
#reforma-pensiones-landing .rp-share.rp-share--breadcrumb p {
  align-items: center;
  display: flex;
  height: 32px;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

#reforma-pensiones-landing .rp-share--breadcrumb .rp-share__buttons {
  align-items: center;
  gap: 0.4rem;
}

/* Un poco mas grande que antes (28 -> 32px) para que el icono no quede
   pegado al borde del circulo - el font-size del icono no cambia, asi
   que el aro de "padding" alrededor crece solo. */
#reforma-pensiones-landing .rp-share--breadcrumb .rp-share__btn {
  height: 32px;
  width: 32px;
}

/* text-transform:uppercase se filtraba desde .rp-indice p (.rp-share
   vive dentro de .rp-indice en el sidebar) - misma especificidad, se
   pisa aca. font-weight:normal explicito: 'bold' es un archivo de
   fuente estatico (FSElliotPro-Bold, no una variacion de peso), asi que
   un font-weight:bold heredado/filtrado encima le aplicaria negrita
   sintetica del navegador sobre glifos que ya son bold. */
#reforma-pensiones-landing .rp-share p {
  color: #003764;
  font-family: 'bold';
  font-size: 0.85rem;
  font-weight: normal;
  line-height: 1.4;
  margin: 0 0 0.85rem;
  text-transform: none;
}

#reforma-pensiones-landing .rp-share__buttons {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

/* Fondo celeste claro en vez del azul solido de antes - los botones
   pasan a circulos azul solido (en vez de blanco translucido sobre
   azul) para seguir teniendo contraste sobre el fondo nuevo. */
#reforma-pensiones-landing .rp-share__btn {
  align-items: center;
  background: #0076cf;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.85rem;
  height: 36px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease;
  width: 36px;
}

/* :link/:visited explicitos - son <a> reales a facebook.com/linkedin.com,
   asi que una vez visitados el navegador les aplica su :visited default
   (violeta en la mayoria) por encima del color blanco a menos que se
   pise puntualmente esos 2 estados, no alcanza con la regla base. */
#reforma-pensiones-landing .rp-share__btn:link,
#reforma-pensiones-landing .rp-share__btn:visited {
  color: #fff;
}

#reforma-pensiones-landing .rp-share__btn:hover {
  background: #005ba3;
  color: #fff;
}

/* Explicito en el icono mismo (no solo heredado del boton) - los
   glifos de bootstrap-icons son fuente, no imagenes, asi que toman
   `color`; esto evita cualquier duda de herencia/especificidad. */
#reforma-pensiones-landing .rp-share__btn i {
  color: #fff;
}

/* Facebook/LinkedIn como letra ("f" / "in") en vez del glifo de
   bootstrap-icons, en blanco y bold - mismo circulo que los demas
   botones de .rp-share__btn. */
#reforma-pensiones-landing .rp-share__btn--letter {
  font-family: 'bold';
}

#reforma-pensiones-landing .rp-share__btn.is-copied {
  background: #162b48;
}

#reforma-pensiones-landing .rp-single__content h2 {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  margin: 2rem 0 1rem;
}

#reforma-pensiones-landing .rp-single__content h2[id] {
  scroll-margin-top: 6.5rem;
}

#reforma-pensiones-landing .rp-single__content h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.45rem);
  margin: 1.75rem 0 0.85rem;
}

#reforma-pensiones-landing .rp-single__content h4 {
  font-size: 1.2rem;
  margin: 1.5rem 0 0.75rem;
}

#reforma-pensiones-landing .rp-single__content h5 {
  font-size: 1.075rem;
  margin: 1.35rem 0 0.65rem;
}

#reforma-pensiones-landing .rp-single__content h6 {
  font-size: 1rem;
  margin: 1.25rem 0 0.6rem;
}

#reforma-pensiones-landing .rp-single__content .accordion {
  border: 1px solid #e6e6e6;
  border-radius: 0.75rem;
  margin: 1.25rem 0 2rem;
  overflow: hidden;
}

#reforma-pensiones-landing .rp-single__content .accordion-item {
  border: 0;
  border-bottom: 1px solid #e6e6e6;
}

#reforma-pensiones-landing .rp-single__content .accordion-item:last-child {
  border-bottom: 0;
}

#reforma-pensiones-landing .rp-single__content .accordion-header {
  font-size: 1rem;
  margin: 0;
}

#reforma-pensiones-landing .rp-single__content .accordion-header > br {
  display: none;
}

#reforma-pensiones-landing .rp-single__content .accordion-button {
  background: #e5f3fb;
  color: #003865;
  font-family: 'bold';
  font-size: 1rem;
  line-height: 1.4;
  padding: 1rem 1.25rem;
}

#reforma-pensiones-landing .rp-single__content .accordion-button:not(.collapsed) {
  background: #bcdfff;
  color: #003865;
}

#reforma-pensiones-landing .rp-single__content .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

#reforma-pensiones-landing .rp-single__content .accordion-body {
  padding: 1.25rem;
}

#reforma-pensiones-landing .rp-single__content .accordion-body > :last-child {
  margin-bottom: 0;
}

#reforma-pensiones-landing .rp-related-faqs {
  margin-top: 3rem;
}

#reforma-pensiones-landing .rp-related-faqs h2 {
  color: #162b48;
  font-family: 'bold';
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

#reforma-pensiones-landing .rp-related-faqs__item {
  background: #e5f3fb;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

#reforma-pensiones-landing .rp-related-faqs__item summary {
  color: #162b48;
  cursor: pointer;
  font-family: 'bold';
  list-style: none;
  padding: 1rem 3rem 1rem 1.25rem;
  position: relative;
}

#reforma-pensiones-landing .rp-related-faqs__item summary::-webkit-details-marker {
  display: none;
}

#reforma-pensiones-landing .rp-related-faqs__item summary::after {
  content: '+';
  font-size: 1.5rem;
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}

#reforma-pensiones-landing .rp-related-faqs__item[open] summary::after {
  content: '−';
}

#reforma-pensiones-landing .rp-related-faqs__answer {
  background: #fff;
  color: #464646;
  padding: 1.1rem 1.25rem;
}

#reforma-pensiones-landing .rp-related-faqs__answer > :last-child {
  margin-bottom: 0;
}

/* Links dentro del cuerpo del articulo (main.css los deja azul default
   de Bootstrap, #0d6efd, subrayados). Color de marca + flecha al final
   en vez del subrayado fijo - el subrayado vuelve solo en hover. Flecha
   como caracter Unicode (no icono de bootstrap-icons) para no depender
   de adivinar el codepoint correcto de esa fuente de iconos. */
#reforma-pensiones-landing .rp-single__content a {
  color: #0076cf;
  text-decoration: none;
  text-underline-offset: 2px;
}

#reforma-pensiones-landing .rp-single__content a:hover {
  text-decoration: underline;
}

#reforma-pensiones-landing .rp-single__content a::after {
  content: '\2197';
  display: inline-block;
  margin-left: 0.15em;
}

#reforma-pensiones-landing .rp-single__content small {
  color: #7a8794;
  font-size: 0.8rem;
}

#reforma-pensiones-landing .rp-single__content table {
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  width: 100%;
}

#reforma-pensiones-landing .rp-single__content th,
#reforma-pensiones-landing .rp-single__content td {
  border: 1px solid #e6e6e6;
  padding: 0.6rem 0.85rem;
  text-align: left;
}

#reforma-pensiones-landing .rp-single__content th {
  background: #e5f3fb;
  color: #162b48;
}

/* El iframe de YouTube del webinar (post 2954, insertado a mano en el
   contenido) trae width="800" height="520" fijos por HTML - en mobile
   quedaba mas ancho que la pantalla (invisible/cortado, sin forzar
   scroll porque un ancestro ya venia con overflow controlado).
   max-width:100% sin mas ya lo deja dentro del viewport, pero
   height:auto solo no alcanza (el navegador no infiere el
   aspect-ratio del iframe a partir de los atributos width/height como
   si hace con <img> - sin esto la altura quedaba en 150px, el default
   de "replaced element" sin ratio, aplastando el video). Con
   aspect-ratio explicito (mismo 800:520 del HTML) la altura escala
   proporcional al ancho real. */
#reforma-pensiones-landing .rp-single__content iframe {
  aspect-ratio: 800 / 520;
  height: auto;
  max-width: 100%;
}

#reforma-pensiones-landing .rp-single__content figure {
  /* El main.css del sitio trae una regla global `figure { position:
     absolute; ... }` pensada para otro componente (overlay de imagen
     en cards). Sin este reset, cualquier <figure> en el contenido de
     un articulo se desprende del flujo normal y termina flotando
     pegado arriba de la pagina. */
  position: static;
  width: auto;
  height: auto;
  margin: 1.5rem 0;
  text-align: center;
}

#reforma-pensiones-landing .rp-single__content figure img {
  border-radius: 0.5rem;
  height: auto;
  max-height: 420px;
  max-width: 100%;
}

#reforma-pensiones-landing .rp-single__content figcaption {
  color: #5b6b7c;
  font-size: 0.875rem;
  margin-top: 0.6rem;
}

/* "Cuadro destacado" dentro del cuerpo del articulo - convencion que ya
   se uso en contenido publicado (<aside class="rp-content-note">, ver
   post "Beneficios de La Reforma de Pensiones") pero sin CSS propio
   todavia. Mismo patron visual que el cuadro celeste de la pagina vieja
   /reforma/ (.light-blue-box en reforma.css): fondo celeste, titulo en
   pildora blanca arriba. Va despues de .rp-single__content h2 en el
   archivo para poder pisarlo (misma especificidad, gana el que viene
   despues). */
#reforma-pensiones-landing .rp-content-note {
  background: #e5f3fb;
  border-radius: 1rem;
  margin: 1.75rem 0;
  padding: 2rem 2.25rem;
}

/* .rp-single__content p/li mas abajo en este archivo fija 1.075rem con
   la misma especificidad (id + 1 clase + tag) - un font-size puesto
   directo en .rp-content-note no le gana por herencia. Se agrega la
   clase .rp-single__content en el selector para pisarlo sin depender
   del orden en el archivo. */
#reforma-pensiones-landing .rp-single__content .rp-content-note p,
#reforma-pensiones-landing .rp-single__content .rp-content-note li {
  font-size: 0.95rem;
}

#reforma-pensiones-landing .rp-content-note h2 {
  background: #fff;
  border-radius: 999px;
  color: #0076cf;
  display: inline-block;
  font-size: 0.85rem;
  margin: 0 0 1rem;
  padding: 0.5rem 1.1rem;
}

#reforma-pensiones-landing .rp-content-note h3 {
  color: #003764;
  font-size: 1.05rem;
  margin: 1.1rem 0 0.35rem;
}

#reforma-pensiones-landing .rp-content-note h3:first-of-type {
  margin-top: 0;
}

#reforma-pensiones-landing .rp-content-note > :last-child {
  margin-bottom: 0;
}

#reforma-pensiones-landing .rp-video-embed {
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0;
}

#reforma-pensiones-landing .rp-video-embed iframe {
  border-radius: 0.5rem;
  height: 100%;
  width: 100%;
}

#reforma-pensiones-landing .rp-single__content .notas {
  border-top: 1px solid #e6e6e6;
  color: #7a8794;
  margin-top: 2.25rem;
  padding-top: 1.15rem;
}

#reforma-pensiones-landing .rp-single__content .notas ol {
  margin: 0;
  padding-left: 1.15rem;
}

/* El tamaño chico va en el <small> semantico de cada nota (letra fina real,
   no solo un div con font-size) - se saca de .notas para no sumarse al
   ~83% que ya aplica <small> por defecto y quedar doblemente chico. */
#reforma-pensiones-landing .rp-single__content .notas small {
  font-size: 0.8rem;
}

/* Solo margen vertical - el horizontal (los margenes negativos que
   estiran el fondo de borde a borde, definidos en .rp-cta arriba) no se
   puede tocar con el shorthand "margin" o lo pisa con 0. */
#reforma-pensiones-landing .rp-cta--single {
  /* Oculto temporalmente; se conserva el markup para reactivarlo. */
  display: none;
  margin-bottom: 2.5rem;
  margin-top: 3rem;
}

@media (max-width: 900px) {
  #reforma-pensiones-landing .rp-single__grid {
    grid-template-columns: 1fr;
  }

  #reforma-pensiones-landing .rp-indice {
    display: none;
  }

  #reforma-pensiones-landing .rp-faq-tools__row {
    flex-direction: column;
  }

  #reforma-pensiones-landing .rp-faq-search-wrap {
    width: 100%;
  }

  #reforma-pensiones-landing .rp-select--faq-filter {
    width: 100%;
  }

  #reforma-pensiones-landing .rp-faq-filter-stack {
    flex-basis: auto;
    width: 100%;
  }
}

#reforma-pensiones-landing .rp-single__content p,
#reforma-pensiones-landing .rp-single__content li {
  font-size: 1.075rem;
  line-height: 1.7;
}

#reforma-pensiones-landing .rp-single__content ul,
#reforma-pensiones-landing .rp-single__content ol {
  padding-left: 1.25rem;
  margin-bottom: 1.4rem;
}

#reforma-pensiones-landing .rp-single__content ul li,
#reforma-pensiones-landing .rp-single__content ol li {
  margin-bottom: 0.85rem;
}

#reforma-pensiones-landing .rp-single__content ul li:last-child,
#reforma-pensiones-landing .rp-single__content ol li:last-child {
  margin-bottom: 0;
}

#reforma-pensiones-landing .rp-single__content ul {
  list-style: none;
  padding-left: 0;
}

#reforma-pensiones-landing .rp-single__content ul li {
  padding-left: 1.5rem;
  position: relative;
}

#reforma-pensiones-landing .rp-single__content ul li::before {
  color: #0076cf;
  content: "●";
  font-size: 0.6rem;
  left: 0;
  position: absolute;
  top: 0.5rem;
}

#reforma-pensiones-landing .rp-single__content ol li::marker {
  color: #0076cf;
  font-family: 'bold';
}

.rp-modal-open {
  overflow: hidden;
}

.rp-modal {
  align-items: center;
  background: rgba(22, 43, 72, 0.76);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  transition: background 0.38s ease;
  /* El menu mobile del sitio (section.content-menu) usa z-index:99999 -
     con 1000 el modal quedaba pintado debajo de esa barra en mobile, se
     veia la barra del sitio "montada" sobre el titulo/boton cerrar. */
  z-index: 999999;
}

.rp-modal[hidden] {
  display: none;
}

.rp-modal__panel {
  background: #003865;
  border-radius: 1rem;
  max-height: 92vh;
  max-width: 860px;
  overflow: auto;
  padding: 2.5rem;
  position: relative;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

.rp-modal.is-collapsing {
  background: rgba(22, 43, 72, 0);
  pointer-events: none;
}

.rp-modal.is-collapsing .rp-modal__panel {
  opacity: 0;
  transform: translate(var(--rp-modal-shift-x), var(--rp-modal-shift-y)) scale(var(--rp-modal-scale-x), var(--rp-modal-scale-y));
}

.rp-modal__close {
  align-items: center;
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 1.5rem;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transition: background 0.15s ease, color 0.15s ease;
  width: 2.5rem;
}

.rp-modal__close:hover,
.rp-modal__close:focus-visible {
  background: #fff;
  color: #0076cf;
}

.rp-modal__head {
  margin: 0 auto 1.5rem;
  max-width: 620px;
  text-align: center;
}

.rp-modal #rp-modal-title {
  color: #fff;
  font-family: 'bold';
  font-size: 1.65rem;
  line-height: 1.2;
}

.rp-stage-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.rp-stage-grid button {
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 0.75rem;
  cursor: pointer;
  font-family: 'bold';
  min-height: 164px;
  padding: 1rem;
  text-align: center;
}

.rp-stage-grid__icon {
  align-items: center;
  background: #0076cf;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.5rem;
  height: 3.25rem;
  justify-content: center;
  margin: 0 auto 0.85rem;
  width: 3.25rem;
  -webkit-text-stroke: 0.35px currentColor;
}

#reforma-pensiones-landing .rp-select__trigger.is-stage-pulse {
  animation: rp-stage-filter-pulse 0.5s ease-in-out 2;
}

@keyframes rp-stage-filter-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 145, 218, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(0, 145, 218, 0.28);
    transform: scale(1.035);
  }
}

.rp-stage-grid button:hover,
.rp-stage-grid button:focus {
  background: #e5f3fb;
  border-color: #0076cf;
}

.rp-stage-grid button span {
  color: #162b48;
  display: block;
  font-family: 'bold';
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.rp-stage-grid button small {
  color: #464646;
}

.rp-modal__all {
  background: transparent;
  border: 0;
  color: #bcdfff;
  display: block;
  font-family: 'bold';
  margin: 1.5rem auto 0;
  text-decoration: underline;
}

.rp-modal__all:hover,
.rp-modal__all:focus-visible {
  color: #fff;
}

@media (max-width: 991px) {
  #reforma-pensiones-landing .rp-hero__grid,
  #reforma-pensiones-landing .rp-block__head,
  #reforma-pensiones-landing .rp-cta .container,
  #reforma-pensiones-landing .rp-card--featured a {
    grid-template-columns: 1fr;
  }

  /* Apiladas en 1 columna no hay 2 columnas que igualar en alto - vuelve
     al aspect-ratio normal (el height:100% de desktop no tiene de que
     "llenar" aca, el bloque de media ya no comparte fila con el body). */
  #reforma-pensiones-landing .rp-card--featured .rp-card__media {
    aspect-ratio: 16 / 9;
    height: auto;
  }

  /* Apiladas en 1 columna, el padding lateral que las separa en desktop
     queda parejo (uno de cada lado quedaria pegado a un solo borde). */
  #reforma-pensiones-landing .rp-hero__content {
    padding-right: 0;
  }

  #reforma-pensiones-landing .rp-hero__timeline {
    padding-left: 0;
  }

  /* El circulo decorativo (980px de ancho en desktop, pensado para 2
     columnas) en 1 columna queda tan ancho que el punto naranja cae
     encima del titulo. Se achica solo el ancho (mismo height/top, sigue
     ancladO al borde derecho con right:0) - lo angosta hacia la derecha
     sin mover su posicion vertical ni la del resto del hero. */
  #reforma-pensiones-landing .rp-hero::before {
    width: 300px;
  }

  #reforma-pensiones-landing .rp-grid {
    grid-template-columns: 1fr 1fr;
  }

  #reforma-pensiones-landing .rp-card--featured {
    grid-column: auto;
  }

  .rp-stage-grid {
    grid-template-columns: 1fr 1fr;
  }

  #reforma-pensiones-landing .rp-cta__copy {
    margin-left: auto;
    margin-right: auto;
    max-width: 540px;
  }

  #reforma-pensiones-landing .rp-content-hero__media {
    height: 230px;
    margin-top: 2rem;
    max-width: 540px;
    position: static;
    transform: none;
    width: 100%;
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-content-hero__circle {
    bottom: -19rem;
    height: min(60vw, 30rem);
    left: auto;
    margin: 0;
    position: absolute;
    right: -11rem;
    top: auto;
    transform: none;
    width: min(60vw, 30rem);
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-content-hero__circle-photo {
    display: none;
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-content-hero__circle-dot {
    left: 4.68%;
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero {
    min-height: auto;
    padding-bottom: 9rem;
    position: relative;
  }

  #reforma-pensiones-landing .rp-block--hero-outline.rp-block--content-hero {
    overflow: hidden;
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }

  #reforma-pensiones-landing .rp-block__head--content-hero .rp-block__head-main {
    grid-column: auto;
    position: relative;
    z-index: 1;
  }

  #reforma-pensiones-landing .rp-content-filters {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  #reforma-pensiones-landing .rp-content-filters__actions {
    align-items: stretch;
  }

}

@media (max-width: 575px) {
  #reforma-pensiones-landing > .rp-breadcrumb .container,
  #reforma-pensiones-landing > .rp-submenu .container,
  #reforma-pensiones-landing > .rp-hero .container,
  #reforma-pensiones-landing > .rp-block .container,
  #reforma-pensiones-landing > .rp-cta .container,
  #reforma-pensiones-landing > .rp-single .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Apiladas en columna (trail arriba, subnav abajo) y todo centrado -
     con align-items:flex-start (como estaba) quedaba todo pegado al
     borde izquierdo, se veia descuadrado contra el resto de secciones
     de la pagina que si centran su contenido. */
  #reforma-pensiones-landing .rp-breadcrumb .container {
    align-items: center;
    flex-direction: column;
  }

  #reforma-pensiones-landing .rp-breadcrumb__trail {
    justify-content: center;
    text-align: center;
  }

  /* El "Compartelo" del single (rp-share--breadcrumb) trae margin-left:
     auto para pegarse a la derecha en la fila de desktop - en columna
     ese margen auto gana contra el align-items:center del padre (una
     regla de alineacion en el eje cruzado explicita en el propio item
     pisa el align-items del contenedor) y lo empuja a la derecha en vez
     de centrarlo. Se anula solo aca. */
  #reforma-pensiones-landing .rp-share--breadcrumb {
    margin-left: 0;
  }

  /* Solo en el single (article/webinar) mobile: el sticky del
     breadcrumb ocupa demasiado espacio en pantallas chicas al quedar
     pegado arriba (trail + Compartelo apilados). Se saca el sticky solo
     aca - en las 4 paginas de listado (Hub/Contenidos/Recursos/FAQ)
     sigue igual. */
  body.single-post-reforma #reforma-pensiones-landing .rp-breadcrumb {
    position: static;
  }

  /* Ya sin sticky en single mobile (regla anterior), el "Compartelo"
     gateado por .is-stuck nunca se llegaba a ver (el breadcrumb ya
     scrolleo fuera de pantalla para cuando se activa is-stuck). Se deja
     siempre visible aca en vez de esperar el scroll. */
  body.single-post-reforma #reforma-pensiones-landing .rp-share--breadcrumb {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav {
    justify-content: center;
    overflow: visible;
    position: relative;
    width: 100%;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-trigger {
    align-items: center;
    background: #e5f3fb;
    border: 0;
    border-radius: 999px;
    color: #0076cf;
    display: inline-flex;
    font-family: 'bold';
    gap: 0.65rem;
    justify-content: space-between;
    min-width: 9rem;
    padding: 0.55rem 0.85rem;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-trigger i {
    transition: transform 0.2s ease;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-menu {
    align-items: stretch;
    background: #fff;
    border-radius: 0.65rem;
    box-shadow: 0 0.5rem 1.5rem rgba(22, 43, 72, 0.16);
    display: none;
    flex-direction: column;
    left: 50%;
    min-width: 11rem;
    padding: 0.4rem;
    position: absolute;
    top: calc(100% + 0.4rem);
    transform: translateX(-50%);
    z-index: 50;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-menu.is-open {
    display: flex;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-menu a {
    border-radius: 0.45rem;
    padding: 0.65rem 0.75rem;
    width: 100%;
  }

  #reforma-pensiones-landing .rp-breadcrumb__subnav-menu a.is-current {
    display: none;
  }

  #reforma-pensiones-landing .rp-profile-pill {
    justify-content: space-between;
    width: 100%;
  }

  #reforma-pensiones-landing .rp-hero,
  #reforma-pensiones-landing .rp-block {
    padding: 2.5rem 0;
  }

  #reforma-pensiones-landing .rp-grid {
    grid-template-columns: 1fr;
  }

  .rp-modal__panel {
    padding: 1.5rem;
  }

  /* El boton cerrar (2.5rem, top:1rem) queda posicionado sobre el panel
     achicado - sin este espacio, el titulo centrado (que en mobile pasa
     a full width) arrancaba a la misma altura y se montaba con el
     boton. */
  .rp-modal__head {
    margin-top: 2rem;
  }

  .rp-stage-grid {
    grid-template-columns: 1fr;
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-block__head--content-hero {
    padding-bottom: 7rem;
  }

  #reforma-pensiones-landing .rp-block--hero-outline .rp-content-hero__circle {
    bottom: -15.5rem;
    height: 25rem;
    right: -13rem;
    width: 25rem;
  }
}