/* ==========================================================================
   Jingle Night · carga transitoria de su hoja

   La submarca Jingle Night tiene hoja propia, `jingle-night.css`, igual que
   PONARTE tiene `ponarte.css`. Lo que no ha podido tener todavía es su
   `wp_enqueue_style`: Novamira rechaza escribir PHP fuera de su sandbox, así
   que `inc/rotarianas-assets.php` solo se toca por SFTP (README §17.2). Hasta
   entonces la hoja entra por `@import`, que cuesta una petición encadenada.

   AL PRÓXIMO ACCESO POR SFTP: borrar este `@import` y añadir en
   `inc/rotarianas-assets.php`, junto a los otros dos enqueue:

     $jingle = $dir . '/assets/css/jingle-night.css';
     if ( file_exists( $jingle ) ) {
         wp_enqueue_style(
             'rotarianas-jingle-night',
             $uri . 'assets/css/jingle-night.css',
             [ 'rotarianas-sitio' ],
             filemtime( $jingle )
         );
     }
   ========================================================================== */
/* El `?v=` es a mano y hay que subirlo cada vez que se toque `jingle-night.css`:
   el `@import` no lleva el `filemtime` que WordPress sí le pone a esta hoja, así
   que sin él un visitante que ya haya estado en la página se queda con la
   versión vieja en caché. Con el enqueue de arriba el problema desaparece. */
@import url("jingle-night.css?v=20260909-2");

/* ==========================================================================
   Comité de Damas · Club Rotario Guatemala Sur
   Estilos personalizados del sitio — complementan los globales de Elementor.

   Cada bloque indica el ÁREA o SECCIÓN a la que pertenece y la clase que hay
   que escribir en el campo "Clases CSS" del widget correspondiente.

   Índice
   00 · Tokens                     :root
   01 · Utilidades transversales   .rds-regla, .rds-tag, .rds-serif, .rds-nota
   02 · Encabezado (plantilla)     .rds-header
   03 · Pie de página (plantilla)  .rds-footer
   04 · Home · Hero deslizante     .rds-hero
   05 · Internas · Cabecera        .rds-page-head
   06 · Bloque imagen + texto      .rds-split
   07 · Proyectos · Impacto        .rds-impacto
   08 · Proyectos · Sin fotografía .rds-reservado
   09 · Proyectos · Comunidades    .rds-comunidades
   10 · Cifras                     .rds-cifras
   11 · Quiénes somos · Ejes       .rds-eje
   12 · Quiénes somos · Historia   .rds-timeline
   13 · Qué hacemos · Cita         .rds-cita
   14 · Proyectos · Banda CTA      (sin estilos propios)
   15 · Contacto · Formulario      .rds-form
   ========================================================================== */

/* ---------- 00 · Tokens -------------------------------------------------- */
/* Los colores y las tipografías viven en el Kit de Elementor (post 7) y se
   consumen aquí con var(--e-global-color-…) y var(--e-global-typography-…),
   para que un cambio desde el constructor llegue a todo el sitio.
   En este bloque solo quedan los valores que el Kit no sabe guardar. */
:root {
  --rds-radius-img: 12px;
  --rds-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* El Kit guarda una sola familia por tipografía, sin pila de reserva. Estos
   dos tokens existen solo para añadirle esa reserva: el valor sigue viniendo
   del Kit. Van en .elementor-kit-7 y no en :root porque es ahí donde
   Elementor declara sus variables globales. */
.elementor-kit-7 {
  --rds-serif: var(--e-global-typography-secondary-font-family), "Times New Roman", serif;
  --rds-sans:  var(--e-global-typography-text-font-family), Arial, Helvetica, sans-serif;
}

/* ---------- 00b · Animaciones de entrada --------------------------------- */
/* Las animaciones se configuran widget a widget con el sistema nativo de
   Elementor (Avanzado > Efectos de movimiento > Animación de entrada), para que
   se puedan cambiar desde el constructor. Elementor marca el bloque con
   .elementor-invisible (visibility:hidden) y su manejador se la quita al entrar
   en pantalla.

   Aquí solo van dos salvaguardas que Elementor no trae de serie:

   1. Si la persona pidió reducir el movimiento, el bloque se muestra sin
      animarse. El sitio de origen respeta esta preferencia y aquí también.
   2. Ver también el <noscript> del cargador del tema: sin JavaScript el
      contenido se muestra en lugar de quedar oculto. */
@media (prefers-reduced-motion: reduce) {
  .elementor-invisible { visibility: visible !important; }
  .animated {
    animation-name: none !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- 01 · Utilidades transversales -------------------------------- */

/* Regla de acento dorada — único adorno gráfico del sistema.
   Clase en el widget Divisor que precede a cada titular de sección. */
.rds-regla .elementor-divider-separator,
.rds-regla.elementor-widget-divider .elementor-divider-separator {
  width: 44px;
  border-top-width: 3px;
  border-top-color: var(--e-global-color-gold);
}
.rds-regla .elementor-divider { padding-block: 0; }
/* La regla deja 1.75rem hasta el titular, como en el sistema de origen. */
.rds-regla { margin-bottom: 1.75rem; }

/* Etiqueta de categoría — clase en el widget Título de la etiqueta.
   El borde va en Royal Blue, no en la línea gris: es la variante «acento»
   del sistema de origen, la única que se usa en el sitio. */
.rds-tag .elementor-heading-title {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--e-global-color-royal_blue);
  border-radius: 100px;
  background: #fff;
  color: var(--e-global-color-royal_blue);
  font-family: var(--rds-sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.7;
}

/* Escala visual independiente de la etiqueta, igual que las utilidades .h1 y
   .h2 del sitio de origen: ahí casi todos los titulares de sección son <h2
   class="h1"> y los de bloque <h3 class="h2">. La etiqueta la manda la
   jerarquía del documento; el tamaño, estas clases. */

/* Párrafo destacado en Georgia — clase en el widget Editor de texto. */
.rds-serif,
.rds-serif p { font-family: var(--rds-serif); }

/* Nota al pie de una sección (fuente de un dato, aviso de privacidad).
   Interlineado 1.7, el del cuerpo: es lo que hereda el .small del origen. */
.rds-nota,
.rds-nota p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--e-global-color-pewter);
}

/* El último párrafo de un bloque no arrastra margen: el hueco entre widgets ya
   lo pone el contenedor. Sin esto se suman los dos y el ritmo vertical se
   estira respecto al sistema de origen. */
.e-con .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Ritmo entre titular y lo que le sigue. El contenedor aporta 18px de hueco;
   estas dos reglas lo llevan a los valores del sistema de origen:
   — titular de bloque pegado a su primer párrafo (0)
   — entradilla de sección a 24px del titular */
.e-con .rds-h1 + .rds-serif { margin-top: -18px; }
.e-con .rds-h1 + .rds-page-head-lead { margin-top: 6px; }
/* En la cabecera de una página interna la entradilla respira algo más que en
   un encabezado de sección: 28px en lugar de 24px, como en el origen. */
.rds-page-head .rds-h1 + .rds-page-head-lead { margin-top: 10px; }

/* Medida de lectura cómoda para textos largos. El cuerpo corrido va en
   Charcoal, no en tinta plena: así el titular manda sobre el párrafo. */
.rds-medida p { max-width: 66ch; color: var(--e-global-color-charcoal); }
.rds-serif p { color: var(--e-global-color-charcoal); }

/* ---------- 02 · Encabezado (plantilla «Encabezado · Comité») ------------- */
/* Elementor envuelve la plantilla del encabezado en un <header> propio, y ese
   envoltorio mide exactamente lo que mide el encabezado: un `position: sticky`
   dentro de él no tiene recorrido y la barra se va con el resto de la página.
   Con `display: contents` el envoltorio deja de generar caja y la barra se
   pega respecto al documento. Es lo que necesita el encabezado del Comité.
   El de PONARTE ya no: ahí se pega el encabezado entero —franja azul de
   regreso incluida— y para eso el envoltorio sí tiene que generar caja;
   `ponarte.css` se la devuelve solo a ese, en su sección 02. */
.elementor-location-header { display: contents; }

.rds-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--e-global-color-linea);
  background: #fff;
}

.rds-header .rds-nav .elementor-item {
  font-family: var(--rds-sans);
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--e-global-color-charcoal);
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--rds-ease), border-color 0.2s var(--rds-ease);
}
.rds-header .rds-nav .elementor-item:hover,
.rds-header .rds-nav .elementor-item:focus { color: var(--e-global-color-royal_blue); }

/* Página activa: subrayado dorado, como en el sitio de origen. */
.rds-header .rds-nav .elementor-item.elementor-item-active,
.rds-header .rds-nav .elementor-item[aria-current="page"] {
  color: var(--e-global-color-tinta);
  border-bottom-color: var(--e-global-color-gold);
}

/* «Jingle Night» aún no tiene página: se muestra en gris y sin destino.
   La especificidad sube a propósito: Elementor genera para el widget una regla
   de cinco clases que si no gana este color. */
.rds-header .rds-nav ul.elementor-nav-menu li.menu-item-pendiente > a.elementor-item {
  color: var(--e-global-color-smoke);
  cursor: default;
  pointer-events: none;
}

/* El CTA del encabezado no cabe en la barra en móvil, así que ahí viaja dentro
   del menú desplegable como último ítem, igual que en el sitio de origen. En el
   menú horizontal de escritorio se oculta, porque el botón ya está a la derecha. */
.rds-header .elementor-nav-menu--main ul.elementor-nav-menu li.menu-item-cta-movil,
.pa-header .elementor-nav-menu--main ul.elementor-nav-menu li.menu-item-cta-movil,
.elementor-nav-menu--main li.menu-item-cta-movil { display: none; }

/* La especificidad sube a propósito: Elementor genera para el desplegable una
   regla de cinco clases que si no gana el color del botón. */
.rds-header .elementor-nav-menu--dropdown li.menu-item-cta-movil > a.elementor-item,
.pa-header .elementor-nav-menu--dropdown li.menu-item-cta-movil > a.elementor-item {
  display: inline-flex;
  margin: 0.9rem 0 0.9rem 20px;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  background: var(--e-global-color-royal_blue);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pa-header .elementor-nav-menu--dropdown li.menu-item-cta-movil > a.elementor-item {
  border-radius: 0;
  background: #f4ac22;
  color: #000;
}

/* Enlace con flecha — alternativa ligera al botón dentro de un bloque. */
.rds-link-arrow .elementor-button {
  padding: 0 0 0.35rem;
  border: 0;
  border-bottom: 1px solid var(--e-global-color-silver);
  border-radius: 0;
  background: transparent;
  color: var(--e-global-color-tinta);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rds-link-arrow .elementor-button:hover {
  background: transparent;
  color: var(--e-global-color-royal_blue);
  border-bottom-color: var(--e-global-color-royal_blue);
}

/* Botón fantasma — borde gris, sin relleno. */
.rds-btn-ghost .elementor-button {
  background: transparent;
  color: var(--e-global-color-tinta);
  border-color: var(--e-global-color-silver);
}
.rds-btn-ghost .elementor-button:hover {
  background: transparent;
  color: var(--e-global-color-royal_blue);
  border-color: var(--e-global-color-royal_blue);
}

/* CTA del encabezado — píldora compacta. */
.rds-header-cta .elementor-button {
  padding: 0.75rem 1.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
}

/* ---------- 03 · Pie de página (plantilla «Pie · Comité») ----------------- */
.rds-footer-dato,
.rds-footer-dato p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--e-global-color-charcoal);
}
.rds-footer-dato a { color: var(--e-global-color-charcoal); text-decoration: none; }
.rds-footer-dato a:hover { color: var(--e-global-color-royal_blue); }

/* Menú del pie — lista simple, sin versales. */
.rds-footer-nav .elementor-item {
  font-family: var(--rds-sans);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--e-global-color-charcoal);
  padding: 0.2rem 0;
}
.rds-footer-nav .elementor-item:hover { color: var(--e-global-color-royal_blue); }

.rds-footer-bottom,
.rds-footer-bottom p {
  font-size: 0.8125rem;
  color: var(--e-global-color-pewter);
}

/* ---------- 04 · Home · Hero deslizante ---------------------------------- */
/* Widget Diapositivas (Slides) de Elementor Pro. El degradado reemplaza al
   overlay plano del widget: hace falta esta diagonal para que el titular
   blanco tenga contraste sobre la fotografía sin apagar la imagen entera. */
.rds-hero .swiper-slide-contents { max-width: 760px; position: relative; z-index: 2; }

/* Encuadre de la fotografía: al 32 % desde arriba, no centrada. Es lo que deja
   los rostros en el tercio superior y libera la franja inferior para los
   controles. Elementor la centra, de ahí la especificidad. */
.rds-hero .elementor-slides .swiper-slide-bg { background-position: center 32%; }

.rds-hero .swiper-slide-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    95deg,
    rgba(8, 20, 34, 0.86) 0%,
    rgba(8, 20, 34, 0.72) 34%,
    rgba(8, 20, 34, 0.34) 66%,
    rgba(8, 20, 34, 0.18) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* La regla dorada va sobre el titular, dentro de la diapositiva. */
.rds-hero .elementor-slide-heading::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 1.75rem;
  background: var(--e-global-color-gold);
}
.rds-hero .elementor-slide-heading {
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: 17ch;
}
.rds-hero .elementor-slide-description {
  font-family: var(--rds-serif);
  max-width: 46ch;
  line-height: 1.6;
}
/* Botón claro sobre fotografía — píldora Powder Blue, como en rotary.org. */
.rds-hero .elementor-slide-button {
  background: var(--e-global-color-powder_blue);
  border-color: var(--e-global-color-powder_blue);
  color: var(--e-global-color-royal_blue);
}
.rds-hero .elementor-slide-button:hover {
  background: #fff;
  border-color: #fff;
  color: var(--e-global-color-royal_blue);
}

/* Controles del slider: flechas redondas y guiones, abajo a la izquierda y
   alineados con el contenedor de 1112 px. Elementor los coloca a los lados y
   centrados; el sistema de origen los agrupa en una barra. */
.rds-hero {
  --rds-hero-inset: max(4rem, calc((100% - 1112px) / 2));
  /* Swiper separa los puntos con su propia variable; el hueco lo pone el flex */
  --swiper-pagination-bullet-horizontal-gap: 0px;
}

/* La especificidad sube a propósito: Elementor coloca estas flechas con
   selectores de tres clases (.elementor-element .swiper .elementor-swiper-button). */
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-prev,
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-next {
  top: auto;
  bottom: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: 0;
  transform: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  transition: background 0.25s var(--rds-ease), color 0.25s var(--rds-ease),
              border-color 0.25s var(--rds-ease);
}
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-prev:hover,
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-next:hover {
  background: #fff;
  color: var(--e-global-color-royal_blue);
  border-color: #fff;
}
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-prev {
  left: var(--rds-hero-inset);
  right: auto;
}
.rds-hero .swiper .elementor-swiper-button.elementor-swiper-button-next {
  left: calc(var(--rds-hero-inset) + 60px);
  right: auto;
}

/* Elementor dibuja un galón (chevron); la referencia usa una flecha larga con
   asta. Se oculta el icono del widget y se pinta el mismo trazo del SVG de
   origen como máscara, para que herede el color en reposo y en hover. */
.rds-hero.elementor-widget-slides .swiper .elementor-swiper-button svg,
.rds-hero.elementor-widget-slides .swiper .elementor-swiper-button i { display: none; }

.rds-hero.elementor-widget-slides .swiper .elementor-swiper-button::before {
  content: "";
  width: 16px;
  height: 14px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.rds-hero.elementor-widget-slides .swiper .elementor-swiper-button-prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M6 1 1 7l5 6M1 7h15' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M6 1 1 7l5 6M1 7h15' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.rds-hero.elementor-widget-slides .swiper .elementor-swiper-button-next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M10 1l5 6-5 6M15 7H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M10 1l5 6-5 6M15 7H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Los guiones van en la misma línea que las flechas, a su derecha. Elementor
   los baja a 5px del borde con un selector de cuatro clases en e-swiper.css,
   así que aquí hace falta una más para ganarle. La cuenta del bottom centra el
   guión de 3px con la flecha de 44px: base + 22 - 1.5. */
.rds-hero.elementor-widget-slides .swiper .swiper-horizontal > .swiper-pagination-bullets,
.rds-hero.elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.rds-hero.elementor-widget-slides .swiper ~ .swiper-pagination-bullets {
  display: flex;
  gap: 0.5rem;
  width: auto;
  right: auto;
  left: calc(var(--rds-hero-inset) + 128px);
  bottom: calc(clamp(1.75rem, 4vw, 2.75rem) + 20.5px);
}
.rds-hero .swiper-pagination-bullet {
  width: 34px;
  height: 3px;
  margin: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
}
.rds-hero .swiper-pagination-bullet-active { background: var(--e-global-color-gold); }

@media (max-width: 700px) {
  /* En vertical el degradado diagonal deja de funcionar: pasa a de arriba
     abajo, como en el sitio de origen. */
  .rds-hero .swiper-slide-inner::before {
    background: linear-gradient(
      180deg,
      rgba(8, 20, 34, 0.62) 0%,
      rgba(8, 20, 34, 0.82) 55%,
      rgba(8, 20, 34, 0.92) 100%
    );
  }
  .rds-hero .swiper-pagination-bullets { left: var(--rds-hero-inset); bottom: 1rem; }
  .rds-hero .elementor-swiper-button { bottom: 3.5rem; }
}

/* Flecha de los botones. Es el mismo trazo del .btn__arrow del origen, puesto
   como máscara para que herede el color del botón en cada variante. Se excluyen
   los CTA de encabezado y los de PONARTE, que en el origen no la llevan. */
.rds-hero .elementor-slide-button::after,
.e-con .elementor-widget-button:not(.rds-header-cta):not(.pa-btn):not(.pa-btn--oro):not(.pa-btn--linea):not(.pa-link) .elementor-button-content-wrapper::after {
  content: "";
  flex: none;
  align-self: center;
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s var(--rds-ease);
}
/* El contenedor del botón no centra en el eje transversal, así que la flecha
   quedaba pegada arriba en lugar de a la altura del texto. */
.e-con .elementor-widget-button .elementor-button-content-wrapper {
  gap: 0.7rem;
  align-items: center;
}
/* Especificidad alta a propósito: Elementor define el botón de la diapositiva
   con .elementor-slides .swiper-slide-inner .elementor-slide-button. Sin
   inline-flex la flecha no ocupa caja y no se ve. */
.rds-hero .elementor-slides .swiper-slide-inner .elementor-slide-button {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  /* Elementor deja el botón de diapositiva con interlineado 1 y borde de 2px;
     el sistema de origen usa el interlineado del cuerpo y 1px. */
  line-height: 1.7;
  border-width: 1px;
}
.e-con .elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::after,
.rds-hero .elementor-slide-button:hover::after { transform: translateX(4px); }

/* ---------- 05 · Internas · Cabecera de página --------------------------- */
.rds-page-head { border-bottom: 0; }
.rds-page-head-lead p {
  font-family: var(--rds-serif);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  max-width: 66ch;
  line-height: 1.65;
  color: var(--e-global-color-charcoal);
}
/* Cabecera centrada (Contáctenos). La entradilla se acorta a 56ch: centrada, la
   medida de 66ch deja las líneas demasiado desiguales. */
.rds-page-head--centro { text-align: center; }
.rds-page-head--centro .rds-page-head-lead p {
  margin-inline: auto;
  max-width: 56ch;
}

/* ---------- 06 · Bloque imagen + texto ----------------------------------- */
/* La fotografía lleva el radio de 12 px del sistema y se recorta a 4:3, que es
   lo que iguala la altura de las dos columnas del bloque. La variante alta
   (3:4) se usa donde el texto es largo, como en las preguntas frecuentes. */
.rds-split-img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rds-radius-img);
}
.rds-split-img--alta img { aspect-ratio: 3 / 4; }
/* Variante «llena» — la fotografía toma toda la altura de la columna de texto en
   lugar de quedarse en su 4:3. Se usa donde el texto es claramente más largo que
   la foto y el bloque se veía descuadrado (PonArte en «Qué hacemos»). Pide que
   el contenedor de la fila esté en «estirar», no en «centrar».
   Por debajo de 768 px las dos columnas se apilan y la foto vuelve al 4:3: a lo
   ancho de la pantalla, estirarla no tiene sentido. */
@media (min-width: 768px) {
  .rds-split-img--llena {
    flex: 1 1 auto;
    align-self: stretch;
  }
  .rds-split-img--llena img {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Pie de foto — línea funcional bajo la imagen, nunca encima. */
.rds-split-caption figcaption,
.rds-split-caption .widget-image-caption {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-global-color-pewter);
}

/* ---------- 07 · Proyectos · Comparación de impacto ---------------------- */
/* Dos valores antes/después separados por una flecha. Se arma con un
   contenedor .rds-impacto y tres hijos: valor, flecha y valor. */
/* Una sola hairline, arriba: en el origen el bloque abre la comparación pero no
   la cierra, porque debajo va la nota que la matiza. */
.rds-impacto-valor .elementor-heading-title {
  font-family: var(--rds-sans);
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--e-global-color-royal_blue);
  /* Cifras de ancho fijo: los dos valores se leen como una comparación. */
  font-variant-numeric: tabular-nums;
}
/* El dato «antes» va en gris: la mejora se lee en el contraste. */
.rds-impacto-valor--antes .elementor-heading-title { color: var(--e-global-color-pewter); }

.rds-impacto-pie,
.rds-impacto-pie p {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--e-global-color-charcoal);
}
/* La flecha es dorada, como la regla de acento: es el único signo gráfico que
   marca la dirección de la mejora. */
.rds-impacto-flecha { color: var(--e-global-color-gold); display: flex; }

@media (max-width: 767px) {
  /* En móvil la flecha gira: los dos valores pasan a leerse en vertical. */
  .rds-impacto-flecha { transform: rotate(90deg); }
}

/* ---------- 08 · Proyectos · Bloque sin fotografía ----------------------- */
/* La institución que atiende a niñas se presenta sin imagen por protección
   de las beneficiarias: en lugar de la foto va este marco con la razón. */
/* El marco es continuo y del mismo gris que las demás hairlines, no punteado:
   la ausencia de foto se explica con el texto, no con un aviso gráfico. El
   alto lo da el propio texto, como en el origen. */
.rds-reservado-texto,
.rds-reservado-texto p {
  font-family: var(--rds-serif);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--e-global-color-pewter);
}

/* ---------- 09 · Proyectos · Lista de comunidades ------------------------ */
/* La hairline va ENCIMA de cada nombre, no debajo: así las dos columnas abren
   a la misma altura y la lista no cierra con una línea suelta. */
.rds-comunidades ul {
  column-count: 2;
  column-gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.rds-comunidades li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--e-global-color-linea);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--e-global-color-charcoal);
  break-inside: avoid;
}
@media (max-width: 520px) { .rds-comunidades ul { column-count: 1; } }

/* ---------- 10 · Cifras -------------------------------------------------- */
/* Retícula de datos sobre hairline superior, sin tarjetas. Cada dato se separa
   del anterior con una hairline vertical y el primero no la lleva, como el
   .stat del sistema de origen. Los tamaños son los de ahí, no una escala
   aparte: el valor sube hasta 44px y la etiqueta va en versales Pewter. */
/* La hairline superior es opcional: el origen la pone en Quiénes somos y no en
   Qué hacemos, así que la clase .rds-cifras solo se escribe donde toca. */
@media (max-width: 767px) { .rds-cifra-item--sep { border-left: 0; } }
.rds-cifra-label,
.rds-cifra-label p {
  font-size: 0.875rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--e-global-color-pewter);
}

/* ---------- 11 · Quiénes somos · Ejes «Lo que nos mueve» ----------------- */
/* Sin tarjetas. En el sistema de origen (.blocks) esto es una retícula de DOS
   columnas: hairline superior en el contenedor, hairline inferior en cada
   bloque y hairline izquierda solo en los de la columna derecha, que además
   son los únicos con relleno a la izquierda. La versión de cuatro columnas que
   había aquí antes no existe en el origen. */
@media (max-width: 1024px) { .rds-eje-item--der { border-left: 0; } }
.rds-eje-texto,
.rds-eje-texto p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--e-global-color-charcoal);
}

/* ---------- 12 · Quiénes somos · Cronología ------------------------------ */
/* En el origen la cronología es una lista vertical de filas «año | texto», no
   una retícula de columnas: la hairline va encima de cada fila y la última
   cierra con otra debajo. El año va en Royal Blue, no en dorado: el dorado
   queda reservado para la regla de acento. */
.rds-timeline-texto,
.rds-timeline-texto p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--e-global-color-charcoal);
  max-width: 62ch;
}
.rds-timeline-texto strong { color: var(--e-global-color-tinta); }

/* ---------- 13 · Qué hacemos · Cita -------------------------------------- */
/* Sin cursiva: la cita se distingue por la serif y por la medida corta.
   La medida (36ch) va en el contenedor del bloque, no en el titular: en el
   titular la unidad ch se calcula sobre Georgia 30px y sale casi el doble de
   ancha que el .quote del origen, que la mide sobre el cuerpo de 16px. */
.rds-cita { max-width: 36ch; }
.rds-cita-fuente,
.rds-cita-fuente p {
  font-family: var(--rds-sans);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--e-global-color-pewter);
}

/* ---------- 13b · Home · Preguntas frecuentes ---------------------------- */
/* Widget Acordeón anidado. El sistema de origen no usa caja ni relleno: solo
   hairlines arriba y entre ítems, y la respuesta en Georgia. */
.rds-faq .e-n-accordion { border-top: 1px solid var(--e-global-color-linea); }
.rds-faq .e-n-accordion-item { border-bottom: 1px solid var(--e-global-color-linea); }

.rds-faq .e-n-accordion-item-title {
  padding: 1.6rem 0;
  background: transparent;
  transition: color 0.2s var(--rds-ease);
}
/* En el HTML de origen el botón del acordeón vive dentro de un <h3>, que hereda
   el interlineado 1.12 de los titulares. Con 1.4 el trigger crecía 10px. */
.rds-faq .e-n-accordion-item-title-text {
  font-family: var(--rds-sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--e-global-color-tinta);
}
.rds-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text,
.rds-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text {
  color: var(--e-global-color-royal_blue);
}
.rds-faq .e-n-accordion-item-title-icon { color: var(--e-global-color-charcoal); }
.rds-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon { color: var(--e-global-color-royal_blue); }

/* La respuesta va en la serif del cuerpo, con medida corta y con el aire
   inferior del sistema de origen (1.75rem) antes de la siguiente hairline. */
.rds-faq .e-n-accordion-item > .e-con p {
  font-family: var(--rds-serif);
  color: var(--e-global-color-charcoal);
  max-width: 58ch;
  padding-bottom: 1.75rem;
}

/* ---------- 14 · Proyectos · Banda de llamada a la acción ---------------- */
/* La banda no necesita estilos propios: es un contenedor de dos columnas
   (texto que crece + botón de ancho automático) resuelto con los ajustes del
   contenedor. La hairline de arriba es la de la sección, no la de la banda,
   como en el .section--ruled del origen. */

/* ---------- 15 · Contacto · Formulario ----------------------------------- */
/* La etiqueta va en versales pequenas, como el .field__label del origen: es lo
   que deja el campo como el elemento con mas peso visual de la fila. */
.rds-form .elementor-field-group > label {
  font-family: var(--rds-sans);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--e-global-color-charcoal);
  margin-bottom: 8.8px;
}
/* Asterisco de campo obligatorio en Cranberry, como el sistema de origen. */
.rds-form .elementor-mark-required .elementor-field-label::after { color: var(--e-global-color-cranberry); }

/* Alto del campo: 60px, que es relleno 0.95/1.1rem con el interlineado del
   cuerpo. El Kit de Elementor pone 0.85/1rem con un selector de cuatro piezas
   (.elementor-kit-7 input:not([type=button]):not([type=submit])), así que aquí
   hace falta encadenar .elementor-form para ganarle sin tocar el Kit, que
   comparten los formularios de PONARTE. */
.rds-form .elementor-form .elementor-field-group .elementor-field-textual {
  padding: 0.95rem 1.1rem;
  line-height: 1.7;
}
.rds-form textarea.elementor-field-textual {
  min-height: 170px;
  resize: vertical;
}
/* El desplegable se queda con el galón que pinta Elementor
   (.select-caret-down-wrapper). Antes esta regla añadía otro por
   background-image y se veían los dos, uno encima del otro. */
.rds-form .elementor-form .elementor-field-group select.elementor-field-textual {
  /* Sitio para el galón de Elementor, que va superpuesto al campo. */
  padding-right: 3rem;
  cursor: pointer;
}
.rds-form .elementor-field-textual::placeholder { color: var(--e-global-color-pewter); }
.rds-form .elementor-field-textual:focus {
  outline: 2px solid var(--e-global-color-azure);
  outline-offset: 2px;
  box-shadow: none;
}

/* Casilla de consentimiento: texto pequeño, alineado con la casilla. */
.rds-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.rds-form .elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: 0.35rem;
  accent-color: var(--e-global-color-royal_blue);
}
.rds-form .elementor-field-type-acceptance label {
  font-family: var(--rds-sans);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--e-global-color-charcoal);
}

/* El botón de envío lleva la misma flecha que los demás botones del sitio. La
   regla general solo alcanza al widget Botón, y este vive dentro del widget
   Formulario, así que se repite aquí. */
.rds-form .elementor-button-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.rds-form .elementor-button-content-wrapper::after {
  content: "";
  flex: none;
  align-self: center;
  width: 16px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M10.5 1 15 5l-4.5 4M15 5H0' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s var(--rds-ease);
}
.rds-form .elementor-button:hover .elementor-button-content-wrapper::after { transform: translateX(4px); }

/* Campo de teléfono internacional (plugin Telephone field for Elementor Forms).
   El relleno izquierdo deja sitio al selector de país, que mide 48 px. Hace
   falta la cadena larga entera: con un selector corto gana el relleno general
   del campo (0,4,0) y el número se monta sobre la bandera. Es la misma cadena
   que usa el formulario de PONARTE. */
.rds-form .iti { width: 100%; }
.rds-form .elementor-form .elementor-field-group .iti > input.elementor-field-textual {
  padding-left: 56px;
}

/* Mensajes de envío. */
.rds-form .elementor-message {
  font-family: var(--rds-sans);
  font-size: 0.875rem;
  line-height: 1.6;
}
.rds-form .elementor-message-success { color: var(--e-global-color-royal_blue); }
.rds-form .elementor-message-danger  { color: var(--e-global-color-cranberry); }