/* ==========================================================================
   RMA CORE — CSS de apoyo
   Solo lo que ningún widget de Elementor resuelve bien por sí solo.
   El resto del diseño vive en el kit de Elementor como estilos de widget.
   Los tokens (--section-accent, --type-*, etc.) los imprime el plugin
   en <head> mediante RMA_Design_System::print_tokens().
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Textura de papel del fondo
   -------------------------------------------------------------------------- */
body.rma-paper {
  background-image: radial-gradient(circle at 10% 10%, rgba(107, 55, 184, .025), transparent 28%);
}

/* --------------------------------------------------------------------------
   2. Cuerpo del artículo
   Se aplica al widget «Contenido de la entrada» dentro de la plantilla
   Single. Reproduce el ritmo de lectura del sitio original.
   -------------------------------------------------------------------------- */
.rma-article-content {
  max-width: 760px;
  margin-inline: auto;
}

.rma-article-content p {
  margin: 0 0 22px;
  color: var(--ink, #071b3a);
  font-size: var(--type-lead, 18px);
  line-height: 1.75;
}

.rma-article-content h2 {
  margin: 44px 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--type-section, 38px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.rma-article-content strong {
  font-weight: 700;
}

.rma-article-content em {
  color: var(--section-accent, #6b37b8);
  font-style: italic;
}

/* Cita destacada: barra de color del acento de la sección. */
.rma-article-content .rma-pullquote,
.rma-article-content .wp-block-pullquote {
  margin: 36px 0;
  padding: 4px 0 4px 24px;
  border: 0;
  border-left: 3px solid var(--section-accent, #6b37b8);
  background: none;
  text-align: left;
}

.rma-article-content .wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.rma-article-content .wp-block-pullquote p {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--type-card-title-lg, 26px);
  font-style: normal;
  line-height: 1.35;
  color: var(--ink, #071b3a);
}

/* --------------------------------------------------------------------------
   3. Entradilla (lede)
   -------------------------------------------------------------------------- */
.rma-lede {
  max-width: 760px;
  margin: 0 auto 28px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: var(--type-statement, 26px);
  line-height: 1.4;
  color: var(--section-accent, #6b37b8);
}

/* --------------------------------------------------------------------------
   4. Recuadro de fuentes citadas
   -------------------------------------------------------------------------- */
.rma-sources {
  max-width: 760px;
  margin: 12px auto 0;
  padding: 18px 20px;
  border-radius: var(--radius-sm, 8px);
  background: var(--paper_2, #f7f3ef);
  color: var(--ink_soft, #40506a);
  font-size: var(--type-small, 14px);
  line-height: 1.6;
}

.rma-sources strong {
  color: var(--ink, #071b3a);
}

/* --------------------------------------------------------------------------
   5. Etiqueta de sección sobre la foto de portada
   -------------------------------------------------------------------------- */
.rma-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .94);
  color: var(--section-accent, #6b37b8);
  font-size: var(--type-kicker, 11px);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   6. Degradado sobre la foto del hero de artículo
   Se aplica al Container que contiene la imagen de fondo.
   -------------------------------------------------------------------------- */
.rma-hero-scrim {
  position: relative;
}

.rma-hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 15, 30, .55) 0%, rgba(7, 15, 30, 0) 55%);
  pointer-events: none;
}

.rma-hero-scrim > * {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   7. Antetítulo con guion, usado en los encabezados de sección
   -------------------------------------------------------------------------- */
.rma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--section-accent, #6b37b8);
  font-size: var(--type-meta, 12px);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.rma-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .rma-article-content p {
    font-size: var(--type-body, 16px);
  }

  .rma-article-content h2 {
    font-size: 30px;
    margin: 32px 0 14px;
  }

  .rma-lede {
    font-size: 21px;
  }
}

/* ---------------------------------------------------------------------------
   Cabecera: que el menú no se parta en dos líneas.

   Con siete entradas y nombres largos («Desde la sala de redacción»), el menú
   se desbordaba a una segunda fila y empujaba la cabecera hacia abajo.
   --------------------------------------------------------------------------- */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu {
  flex-wrap: nowrap;
}

.elementor-location-header .elementor-nav-menu--main .elementor-item {
  white-space: nowrap;
}

/* Por debajo del contenedor no cabe en una línea: pasa al menú desplegable,
   que es el comportamiento del diseño original. */
@media (max-width: 1180px) {
  .elementor-location-header .elementor-nav-menu--main .elementor-item {
    font-size: 12px;
  }
}

/* ---------------------------------------------------------------------------
   ARTÍCULO — portada y ficha.

   Reproduce .article-hero y .article-meta-row del diseño original. Va aquí y
   no en widgets de Elementor porque los equivalentes de Pro fallaban con este
   tipo de contenido.
   --------------------------------------------------------------------------- */
.rma-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  height: min(46vw, 420px);
  padding: 32px clamp(20px, 4vw, 56px);
  background-color: var(--paper-2, #f7f3ef);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.rma-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 15, 30, .55) 0%, rgba(7, 15, 30, 0) 55%);
}

.rma-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.rma-hero .rma-tag {
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .94);
  color: var(--section-accent, #6b37b8);
  font-family: var(--font-body, "DM Sans"), sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.rma-hero-title {
  max-width: 22ch;
  margin: 14px 0 0;
  color: #fff;
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.02em;
}

.rma-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule, #e6e0db);
}

.rma-meta-item {
  color: var(--ink-soft, #40506a);
  font-family: var(--font-body, "DM Sans"), sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.rma-meta-item strong {
  color: var(--ink, #071b3a);
  font-weight: 700;
}

.rma-meta-sep {
  color: var(--rule, #e6e0db);
}

@media (max-width: 700px) {
  .rma-hero-title {
    font-size: 34px;
  }
}

/* ---------------------------------------------------------------------------
   TARJETAS DE ARTÍCULO (widget Posts, skin clásico).

   El control «content_padding» del widget pertenece al skin «cards», así que
   con el clásico no aplica y el texto quedaba pegado a los bordes. Lo damos
   aquí, sobre la clase que este skin sí usa.
   --------------------------------------------------------------------------- */
.elementor-posts--skin-classic .elementor-post__text {
  padding: 20px 22px 4px;
}

.elementor-posts--skin-classic .elementor-post__title {
  margin: 0 0 6px;
}

.elementor-posts--skin-classic .elementor-post__meta-data {
  margin-bottom: 10px;
}

.elementor-posts--skin-classic .elementor-post__excerpt {
  margin-bottom: 0;
}

/* La miniatura mantiene su proporción y no se deforma al recortarse. */
.elementor-posts--skin-classic .elementor-post__thumbnail {
  aspect-ratio: 16 / 10;
}

.elementor-posts--skin-classic .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}