/* =====================================================================
   REDISEÑO — Web Consorcio de Bomberos de Tenerife
   Sistema de diseño (tokens) basado en el Figma "WEB Consorcio de Bomberos".
   ---------------------------------------------------------------------
   IMPORTANTE: los valores HEX de color son ESTIMACIONES calibradas a las
   capturas del Figma (asiento de solo-vista no permitía exportar el HEX
   exacto). Cuando se confirmen los valores reales de la página "Brand",
   solo hay que ajustar las variables de :root — el resto del CSS no cambia.

   Esta hoja se carga DESPUÉS de bootstrap.css para poder sobreescribirlo.
   ===================================================================== */

/* Tipografía — confirmada en Figma: Barlow (variable H1 = Barlow Bold 72/78). */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Barlow+Condensed:wght@500&display=swap');

:root {
  /* ---------------------------------------------------------------
     COLOR — Foundation (escalas 50–900). Valores ESTIMADOS.
     --------------------------------------------------------------- */

  /* Blue (50/200/500/600/900 EXACTOS del Figma; 100/300/400/700/800 interpolados) */
  --blue-50:  #E6EEF6;
  --blue-100: #BFD4E8;
  --blue-200: #8AB0D3;
  --blue-300: #5C8FC2;
  --blue-400: #2E71B1;
  --blue-500: #0153A0;   /* azul base / primario (exacto) */
  --blue-600: #014C92;   /* exacto */
  --blue-700: #013D78;
  --blue-800: #012F5A;
  --blue-900: #002343;   /* navy oscuro: cifras, tarjetas oscuras (exacto) */

  /* Red (red-500 confirmado en Figma: #E40520) */
  --red-50:  #FDEAEC;
  --red-100: #FBCED3;
  --red-200: #F6A0A9;
  --red-300: #F26B79;
  --red-400: #EC3347;
  --red-500: #E40520;    /* rojo acento / CTA — exacto del Figma */
  --red-600: #CF051D;    /* exacto */
  --red-700: #AB0418;
  --red-800: #7E0312;
  --red-900: #52020C;

  /* Yellow */
  --yellow-50:  #FEF6E0;
  --yellow-100: #FCE9B3;
  --yellow-200: #F9D870;
  --yellow-300: #F6C73D;
  --yellow-400: #F3BA1A;
  --yellow-500: #EFB100;  /* amarillo del escudo */
  --yellow-600: #C8930A;
  --yellow-700: #9E7408;
  --yellow-800: #6F5206;
  --yellow-900: #463303;

  /* Neutrals */
  --white:     #FFFFFF;
  --black-50:  #F4F5F6;
  --black-100: #E4E6E8;
  --black-200: #C9CCD0;
  --black-300: #A6ABB1;
  --black-400: #7E848C;
  --black-500: #5A6068;
  --black-600: #41464D;
  --black-700: #2C3035;
  --black-800: #1B1E22;
  --black-900: #0F1113;   /* texto principal */

  /* ---------------------------------------------------------------
     ALIASES SEMÁNTICOS — usar estos en los componentes, no los crudos.
     Así, si cambia la marca, se reasigna aquí en un solo sitio.
     --------------------------------------------------------------- */
  --color-primary:        var(--blue-500);
  --color-primary-dark:   var(--blue-900);
  --color-accent:         var(--red-500);
  --color-accent-hover:   var(--red-600);
  --color-highlight:      var(--yellow-500);

  --color-text:           var(--black-900);
  --color-text-muted:     var(--black-500);
  --color-text-invert:    var(--white);

  --color-bg:             var(--white);
  --color-bg-alt:         var(--black-50);
  --color-bg-dark:        var(--blue-900);
  --color-border:         var(--black-100);

  --color-link:           var(--blue-600);
  --color-link-hover:     var(--blue-800);

  /* ---------------------------------------------------------------
     TIPOGRAFÍA — escala del Figma (tamaño / interlineado en px).
     H1 72/78 · H2 48/54 · H3 40/48 · H4 32/38 · Subtitle 24/30
     Body1 18/24 · Body2 16/22 · Body3 16/22 · Button 16/22 · Caption 14/20
     --------------------------------------------------------------- */
  --font-base: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Barlow Condensed (Medium) — segunda familia de la guía de marca. */
  --font-condensed: 'Barlow Condensed', 'Barlow', Arial Narrow, sans-serif;

  --fs-h1: 72px;   --lh-h1: 78px;
  --fs-h2: 48px;   --lh-h2: 54px;
  --fs-h3: 40px;   --lh-h3: 48px;
  --fs-h4: 32px;   --lh-h4: 38px;
  --fs-subtitle: 24px; --lh-subtitle: 30px;
  --fs-body1: 18px; --lh-body1: 24px;
  --fs-body2: 16px; --lh-body2: 22px;
  --fs-button: 16px; --lh-button: 22px;
  --fs-caption: 14px; --lh-caption: 20px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* ---------------------------------------------------------------
     ESPACIADO, RADIOS Y SOMBRAS (base; afinar con el Figma)
     --------------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(15, 17, 19, 0.08);
  --shadow-md: 0 6px 20px rgba(15, 17, 19, 0.10);

  --container-max: 1200px;
}

/* =====================================================================
   BASE — tipografía y utilidades de texto según los estilos del Figma.
   Clases con prefijo .rd- para no colisionar con Bootstrap mientras
   migramos página por página.
   ===================================================================== */

/* Tipografía de marca en TODO el sitio público, no solo en los bloques
   rediseñados: bootstrap.css fija 'Open Sans' en el body y hay que ganarle. */
body,
body input, body select, body textarea, body button,
.rd-scope,
.rd-scope * {
  font-family: var(--font-base);
  /* Figma dibuja el texto con suavizado fino; sin esto el navegador
     engorda los trazos y la tipografía se ve distinta a la del diseño. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Seguridad: ningún icono SVG inline del rediseño debe salir gigante,
   aunque falle/caché una regla específica. Las reglas .rd-ico svg /
   .rd-pill svg (más abajo) afinan el tamaño exacto. */
.rd-scope svg { width: 24px; height: 24px; }

/* Escala de texto (equivale a los estilos de Figma) */
.rd-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.rd-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.rd-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.rd-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--color-text); margin: 0; }
.rd-subtitle { font-size: var(--fs-subtitle); line-height: var(--lh-subtitle); font-weight: var(--fw-semibold); color: var(--color-text); }
.rd-body  { font-size: var(--fs-body1); line-height: var(--lh-body1); font-weight: var(--fw-regular); color: var(--color-text); }
.rd-body-sm { font-size: var(--fs-body2); line-height: var(--lh-body2); font-weight: var(--fw-regular); color: var(--color-text); }
.rd-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); color: var(--color-text-muted); }

/* Utilidades de color */
.rd-text-primary { color: var(--color-primary); }
.rd-text-accent  { color: var(--color-accent); }
.rd-text-muted   { color: var(--color-text-muted); }
.rd-text-invert  { color: var(--color-text-invert); }
.rd-bg-dark      { background: var(--color-bg-dark); color: var(--color-text-invert); }
.rd-bg-accent    { background: var(--color-accent); color: var(--color-text-invert); }
.rd-bg-alt       { background: var(--color-bg-alt); }

/* =====================================================================
   BOTONES — patrón del Figma (primario rojo, secundario, enlace).
   ===================================================================== */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-base);
  font-size: var(--fs-button);
  line-height: var(--lh-button);
  font-weight: var(--fw-semibold);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.rd-btn--primary { background: var(--color-accent); color: var(--white); }
.rd-btn--primary:hover { background: var(--color-accent-hover); color: var(--white); }
.rd-btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.rd-btn--secondary:hover { background: var(--color-primary); color: var(--white); }
.rd-btn--dark { background: var(--color-primary-dark); color: var(--white); }
.rd-btn--dark:hover { background: var(--blue-800); color: var(--white); }
.rd-btn--link { background: transparent; color: var(--color-link); padding-left: 0; padding-right: 0; }
.rd-btn--link:hover { color: var(--color-link-hover); }

/* =====================================================================
   CONTENEDOR base del rediseño
   ===================================================================== */
.rd-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

/* =====================================================================
   AJUSTE RESPONSIVE de la escala tipográfica (los tamaños del Figma son
   de escritorio; en móvil se reducen los titulares para que no desborden).
   ===================================================================== */
@media (max-width: 768px) {
  :root {
    --fs-h1: 40px; --lh-h1: 46px;
    --fs-h2: 32px; --lh-h2: 38px;
    --fs-h3: 26px; --lh-h3: 32px;
    --fs-h4: 22px; --lh-h4: 28px;
    --fs-subtitle: 20px; --lh-subtitle: 26px;
  }
}

/* =====================================================================
   HEADER — barra utilitaria + navegación principal + menú móvil.
   Markup en includes/header.php. Menú sin JS (checkbox + <details>).
   ===================================================================== */
.rd-header { font-family: var(--font-base); background: var(--white); position: sticky; top: 0; z-index: 100; }
.rd-header a { text-decoration: none; }

/* Barra utilitaria superior */
.rd-utilitybar { background: var(--black-50); border-bottom: 1px solid var(--color-border); }
.rd-utilitybar__inner {
  display: flex; justify-content: flex-end; gap: var(--space-lg);
  padding-top: 8px; padding-bottom: 8px;
}
.rd-utilitybar a {
  font-size: 13px; line-height: 1; color: var(--color-text-muted); font-weight: var(--fw-medium);
}
.rd-utilitybar a:hover { color: var(--color-accent); }

/* Barra principal */
.rd-navbar { border-bottom: 1px solid var(--color-border); }
.rd-navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); padding-top: 12px; padding-bottom: 12px;
}
.rd-logo { display: inline-flex; align-items: center; }
.rd-logo img { height: 56px; width: auto; display: block; }

/* Navegación */
.rd-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.rd-nav__list > li > a,
.rd-nav summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 0;
  font-size: 16px; font-weight: var(--fw-medium); color: var(--color-text);
  cursor: pointer; white-space: nowrap;
}
.rd-nav__list > li > a:hover,
.rd-nav summary:hover { color: var(--color-accent); }

/* Quita el triángulo nativo de <details> y añade un chevron propio */
.rd-nav summary { list-style: none; }
.rd-nav summary::-webkit-details-marker { display: none; }
.rd-nav summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}

/* Submenú */
.rd-submenu {
  list-style: none; margin: 0; padding: 8px; background: var(--white);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); min-width: 260px;
}
.rd-submenu a {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 15px; color: var(--color-text);
}
.rd-submenu a:hover { background: var(--blue-50); color: var(--color-primary); }

/* Hamburguesa (oculta en escritorio) */
.rd-nav-toggle { display: none; }
.rd-hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.rd-hamburger span { width: 26px; height: 2px; background: var(--color-text); display: block; }

/* ---------- ESCRITORIO ---------- */
@media (min-width: 992px) {
  .rd-nav__item--has-sub { position: relative; }
  .rd-nav details > .rd-submenu {
    position: absolute; top: 100%; left: 0; margin-top: 8px; display: none; z-index: 100;
  }
  /* Puente invisible para que el ratón no pierda el hover al bajar al submenú */
  .rd-nav details > .rd-submenu::before {
    content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
  }
  /* Mostrar al pasar el ratón, ignorando el estado open de <details> */
  .rd-nav__item--has-sub:hover > details > .rd-submenu { display: block; }
  .rd-nav__item--has-sub:hover summary::after { transform: rotate(225deg); }
}

/* ---------- MÓVIL ---------- */
@media (max-width: 991px) {
  .rd-navbar__inner { flex-wrap: wrap; }
  .rd-hamburger { display: flex; }
  .rd-nav { display: none; width: 100%; }
  .rd-nav-toggle:checked ~ .rd-nav { display: block; }
  .rd-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-top: 8px; }
  .rd-nav__list > li { border-top: 1px solid var(--color-border); }
  .rd-nav__list > li > a,
  .rd-nav summary { padding: 14px 4px; font-size: 17px; }
  .rd-nav details[open] summary::after { transform: rotate(225deg); }
  .rd-submenu { box-shadow: none; border: none; padding: 0 0 8px 12px; min-width: 0; }
  .rd-submenu a { font-size: 16px; }
}

/* =====================================================================
   FOOTER — 4 columnas + logos institucionales + redes + contacto.
   Columnas plegables en móvil con <details> (sin JS).
   ===================================================================== */
.rd-footer { background: var(--black-50); border-top: 1px solid var(--color-border); font-family: var(--font-base); color: var(--color-text); }
.rd-footer a { text-decoration: none; color: var(--color-text-muted); }
.rd-footer a:hover { color: var(--color-accent); }

.rd-footer__top {
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px;
  align-items: start; padding-top: 48px; padding-bottom: 32px;
}
.rd-footer__brand img { height: 84px; width: auto; display: block; }

.rd-foot-col > summary {
  list-style: none; cursor: default;
  font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.rd-foot-col > summary::-webkit-details-marker { display: none; }
.rd-foot-col ul { list-style: none; margin: 14px 0 0; padding: 0; }
.rd-foot-col li { margin-bottom: 10px; }
.rd-foot-col a { font-size: 14px; line-height: 1.4; }

.rd-footer__bottom {
  border-top: 1px solid var(--color-border);
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 32px;
  align-items: start; padding-top: 28px; padding-bottom: 28px;
}
.rd-footer__logos { display: flex; align-items: center; gap: 18px; }
.rd-footer__logos img { height: 52px; width: auto; }
.rd-footer__col-title { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--color-primary-dark); margin: 0 0 12px; }
.rd-footer__social { display: flex; gap: 12px; align-items: center; }
.rd-footer__social img { width: 22px; height: 22px; }
.rd-footer__contact { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); }
.rd-footer__contact a { color: var(--color-link); }
.rd-footer__address { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); max-width: 260px; }

.rd-footer__copy {
  border-top: 1px solid var(--color-border);
  text-align: center; font-size: 13px; color: var(--color-text-muted);
  padding: 16px 0;
}

.rd-foot-chevron { display: none; }

/* ---------- MÓVIL: columnas en acordeón ---------- */
@media (max-width: 991px) {
  .rd-footer__top { grid-template-columns: 1fr; gap: 0; }
  .rd-footer__brand { margin-bottom: 24px; }
  .rd-foot-col { border-top: 1px solid var(--color-border); padding: 14px 0; }
  .rd-foot-col > summary { cursor: pointer; }
  .rd-foot-chevron { display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
  .rd-foot-col[open] .rd-foot-chevron { transform: rotate(225deg); }
  .rd-footer__bottom { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .rd-footer__address { max-width: none; }
}

/* ---------- ESCRITORIO: columnas siempre abiertas ---------- */
@media (min-width: 992px) {
  .rd-foot-col ul { display: block !important; }
  .rd-foot-col > summary { pointer-events: none; }
}

/* =====================================================================
   HOME — hero, accesos rápidos, noticias, misión, features, cifras, social.
   ===================================================================== */
.rd-home { font-family: var(--font-base); color: var(--color-text); }
.rd-home img { max-width: 100%; }

/* Secciones */
.rd-section { padding: 56px 0; }
.rd-section--alt { background: var(--black-50); }
.rd-eyebrow { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 10px; display: inline-block; }
.rd-section__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 28px; max-width: 760px; }

/* Iconos circulares */
.rd-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--color-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rd-ico svg { width: 22px; height: 22px; }

/* HERO */
.rd-hero { position: relative; background: var(--blue-900); background-size: cover; background-position: center; color: #fff; }
.rd-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,31,61,.92) 0%, rgba(10,31,61,.70) 55%, rgba(10,31,61,.35) 100%); }
.rd-hero__inner { position: relative; padding: 88px 0 130px; max-width: 720px; }
.rd-hero .rd-eyebrow { color: #fff; opacity: .85; }
.rd-hero h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); letter-spacing: -.015em; margin: 0 0 18px; }
.rd-hero__lead { font-size: var(--fs-body1); line-height: var(--lh-body1); opacity: .92; margin: 0 0 28px; max-width: 560px; }

/* Accesos rápidos (sobre el hero) */
.rd-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: -64px; position: relative; z-index: 3; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.rd-quick__card { background: #fff; border: none; border-radius: 0; padding: 24px; box-shadow: none; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--color-text); transition: background .15s ease; }
.rd-quick__card + .rd-quick__card { border-left: 1px solid var(--color-border); }
.rd-quick__card:hover { background: var(--black-50); }
.rd-quick__card h3 { font-size: var(--fs-subtitle); line-height: 1.2; font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0; }
.rd-quick__card p { font-size: 15px; line-height: 1.5; color: var(--color-text-muted); margin: 0; }

/* NOTICIAS */
.rd-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-news__card { display: block; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--color-text); transition: box-shadow .15s ease; }
.rd-news__card:hover { box-shadow: var(--shadow-md); }
.rd-news__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--black-100); }
.rd-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-news__body { padding: 18px 20px 22px; }
.rd-news__date { font-size: 13px; color: var(--color-text-muted); margin: 0 0 6px; text-transform: capitalize; }
.rd-news__title { font-size: 17px; line-height: 1.35; font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 0 0 12px; }
.rd-news__more { font-size: 14px; font-weight: var(--fw-semibold); color: var(--color-accent); }
.rd-center { text-align: center; margin-top: 32px; }

/* MISIÓN */
.rd-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.rd-mission__red { background: var(--color-accent); color: #fff; border-radius: var(--radius-lg); padding: 36px; }
.rd-mission__red ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.rd-mission__red h4 { font-size: 18px; font-weight: var(--fw-bold); margin: 0 0 6px; }
.rd-mission__red p { font-size: 15px; line-height: 1.5; margin: 0; opacity: .95; }
.rd-mission__dark { background: var(--blue-900); color: #fff; border-radius: var(--radius-lg); padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.rd-mission__dark h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 0 0 16px; }
.rd-mission__dark p { font-size: var(--fs-body1); line-height: var(--lh-body1); opacity: .9; margin: 0 0 24px; }

/* FEATURES */
.rd-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-feature { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; text-decoration: none; color: var(--color-text); display: flex; flex-direction: column; gap: 12px; transition: box-shadow .15s ease; }
.rd-feature:hover { box-shadow: var(--shadow-md); }
.rd-feature__eyebrow { font-size: 13px; color: var(--color-accent); font-weight: var(--fw-semibold); }
.rd-feature h3 { font-size: var(--fs-subtitle); line-height: 1.25; font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0; }
.rd-feature__more { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); margin-top: auto; }

/* CIFRAS + HISTORIA */
.rd-stats { background: var(--blue-900); color: #fff; border-radius: var(--radius-lg); display: grid; grid-template-columns: repeat(4, 1fr); }
.rd-stat { padding: 32px 24px; border-right: 1px solid rgba(255,255,255,.12); }
.rd-stat:last-child { border-right: none; }
.rd-stat__num { font-size: 40px; line-height: 1; font-weight: var(--fw-extrabold); margin: 0 0 8px; }
.rd-stat__label { font-size: 14px; line-height: 1.4; opacity: .85; margin: 0; }
.rd-history { position: relative; margin-top: 24px; border-radius: var(--radius-lg); overflow: hidden; background: var(--blue-800); background-size: cover; background-position: center; min-height: 240px; display: flex; align-items: center; }
.rd-history::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,31,61,.88), rgba(10,31,61,.55)); }
.rd-history__inner { position: relative; padding: 40px; color: #fff; max-width: 520px; }
.rd-history__inner h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 0 0 16px; }

/* ACTUALIDAD: imagen destacada de la noticia */
.rd-articlefull__media { margin: 26px 0 30px; }
.rd-articlefull__media img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }

/* ACTUALIDAD: botón "Cargar más" */
.rd-loadmore { text-align: center; margin-top: 36px; }
.rd-loadmore__btn { font-family: inherit; background: none; border: none; cursor: pointer; color: var(--color-link); font-size: 13px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; }
.rd-loadmore__btn:hover { color: var(--color-accent); }
.rd-loadmore__btn span { font-size: 15px; line-height: .8; }

/* Pill "ALERTA" del héroe (placeholder de referencia, sin destino aún) */
.rd-alerta { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .1em; padding: 7px 14px; border-radius: 999px; text-decoration: none; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(228,5,32,.35); }
.rd-alerta:hover { background: var(--color-accent-hover); color: #fff; }
.rd-alerta__ico { display: inline-flex; width: 15px; height: 15px; }
.rd-alerta__ico svg { width: 15px; height: 15px; }
.rd-alerta__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: rd-alerta-pulse 1.6s ease-in-out infinite; }
@keyframes rd-alerta-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rd-alerta__dot { animation: none; } }

/* Anclas: compensar el header pegajoso al saltar desde la Home */
.rd-anchor { scroll-margin-top: 120px; }

/* ESTRUCTURA DE GOBIERNO (El Consorcio) */
.rd-gov { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: start; margin-bottom: 34px; }
.rd-gov__intro p { font-size: 15px; line-height: 1.65; color: var(--color-text-muted); margin: 0 0 14px; }
.rd-gov__rol { font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--color-accent); margin: 0 0 4px; }
/* Chips de cargo (Figma): pastilla gris redondeada */
.rd-gov__chip { display: inline-block; background: var(--black-50); border: 1px solid var(--color-border); color: var(--color-text); font-size: 13px; font-weight: var(--fw-medium); padding: 4px 14px; border-radius: 999px; margin: 0 0 8px; }
.rd-gov__cargos > .rd-gov__chip { margin-top: 18px; }
.rd-gov__cargos > .rd-gov__chip:first-child { margin-top: 0; }
/* Vocales planos en 3 columnas (sin tarjetas) */
.rd-gov__vocales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; margin-top: 30px; }
.rd-vocal .rd-gov__nombre { margin: 0 0 2px; }
@media (max-width: 991px) { .rd-gov__vocales { grid-template-columns: 1fr; } }
.rd-gov__cargos .rd-gov__rol + * { margin-top: 0; }
.rd-gov__cargos > .rd-gov__rol ~ .rd-gov__rol { margin-top: 22px; }
.rd-gov__nombre { font-size: 16px; font-weight: var(--fw-bold); color: var(--color-link); margin: 0 0 2px; }
.rd-gov__puesto { font-size: 14px; line-height: 1.5; color: var(--color-text-muted); margin: 0; }
@media (max-width: 991px) { .rd-gov { grid-template-columns: 1fr; gap: 28px; } }

/* CINTA DIAGONAL "BOMBEROS DE TENERIFE" */
.rd-ribbon { overflow: hidden; }
/* El margen vertical (48px) deja sitio a las esquinas de la banda girada:
   con menos, el overflow del contenedor las recorta y la cinta se ve cortada. */
.rd-ribbon__band { background: var(--color-primary); color: #fff; transform: rotate(2deg); width: 108%; margin: 48px 0 48px -4%; padding: 15px 0; white-space: nowrap; overflow: hidden; }
.rd-ribbon__track { display: inline-block; }
.rd-ribbon__track span { display: inline-block; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .12em; font-size: 15px; padding: 0 24px; }
.rd-ribbon__track i { font-style: normal; font-size: 9px; opacity: .55; vertical-align: middle; }

/* Botón píldora rellena sin icono (p. ej. "Ver todas") */
.rd-btn--round { border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: var(--fw-bold); padding-left: 26px; padding-right: 26px; }

/* SOCIAL */
.rd-social__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rd-social__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.rd-social__head h2 { margin: 8px 0 0; }
.rd-social__links { display: flex; gap: 10px; flex-shrink: 0; }
.rd-social__ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--red-500); color: #fff; transition: background .15s ease; }
.rd-social__ico:hover { background: var(--red-600); }
.rd-social__ico svg { width: 20px; height: 20px; }
.rd-social__feed { min-height: 200px; }
/* Ocultar la cabecera de perfil del widget de SociableKit (emblema + @usuario):
   dejamos solo la cuadrícula de publicaciones, como en el Figma. */
.sk-instagram-feed .instagram-user-root-container { display: none !important; }

/* ---------- RESPONSIVE HOME ---------- */
@media (max-width: 991px) {
  .rd-quick, .rd-news, .rd-features { grid-template-columns: 1fr; }
  .rd-quick { margin-top: -40px; grid-template-columns: 1fr; }
  .rd-quick__card + .rd-quick__card { border-left: none; border-top: 1px solid var(--color-border); }
  .rd-mission { grid-template-columns: 1fr; }
  .rd-stats { grid-template-columns: 1fr 1fr; }
  .rd-stat:nth-child(2) { border-right: none; }
  .rd-stat:nth-child(1), .rd-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.12); }
  .rd-social__grid { grid-template-columns: 1fr; }
  .rd-social__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rd-hero__inner { padding: 56px 0 96px; }
}

/* =====================================================================
   PÁGINAS INTERNAS — breadcrumb, título, contenido (prose) y artículo.
   ===================================================================== */
.rd-page { padding: 40px 0 64px; font-family: var(--font-base); color: var(--color-text); }
.rd-breadcrumb { font-size: 13px; color: var(--color-text-muted); margin: 0 0 22px; }
.rd-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.rd-breadcrumb a:hover { color: var(--color-accent); }
.rd-breadcrumb span { color: var(--color-text); }
.rd-page__eyebrow { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); display: block; margin: 0 0 8px; }
.rd-page__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 28px; }

/* Contenido enriquecido (HTML que viene de la BD) */
.rd-prose { font-size: var(--fs-body1); line-height: 1.75; color: var(--color-text); max-width: 840px; }
.rd-prose > *:first-child { margin-top: 0; }
.rd-prose h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 32px 0 14px; }
.rd-prose h3 { font-size: 22px; line-height: 1.3; font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 26px 0 12px; }
.rd-prose h4 { font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 22px 0 10px; }
.rd-prose p { margin: 0 0 16px; }
.rd-prose a { color: var(--color-link); text-decoration: underline; }
.rd-prose a:hover { color: var(--color-link-hover); }
.rd-prose ul, .rd-prose ol { margin: 0 0 18px 22px; padding: 0; }
.rd-prose li { margin-bottom: 8px; }
.rd-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.rd-prose blockquote { margin: 18px 0; padding: 12px 20px; border-left: 4px solid var(--color-accent); background: var(--black-50); color: var(--color-text-muted); }
.rd-prose hr { border: none; border-top: 1px solid var(--color-border); margin: 28px 0; }
.rd-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.rd-prose th, .rd-prose td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; }
.rd-prose th { background: var(--black-50); font-weight: var(--fw-semibold); color: var(--color-primary-dark); }

/* Artículo (detalle de noticia) con sidebar */
.rd-article { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.rd-article__meta { font-size: 14px; color: var(--color-text-muted); margin: 0 0 22px; display: flex; gap: 18px; flex-wrap: wrap; }
.rd-article__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 14px; }
.rd-article__sidebar { background: var(--black-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; }

@media (max-width: 991px) {
  .rd-article { grid-template-columns: 1fr; gap: 32px; }
}

/* =====================================================================
   ACORDEÓN / FAQ — preguntas frecuentes (sin JS, con <details>).
   ===================================================================== */
.rd-accordion { max-width: 840px; }
.rd-accordion details { border-bottom: 1px solid var(--color-border); }
.rd-accordion summary {
  list-style: none; cursor: pointer; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-primary-dark);
}
.rd-accordion summary::-webkit-details-marker { display: none; }
.rd-accordion summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent); transform: rotate(45deg); transition: transform .15s ease; }
.rd-accordion details[open] summary::after { transform: rotate(225deg); }
.rd-accordion__body { padding: 0 0 20px; color: var(--color-text); line-height: 1.7; }

/* FAQ por categorías (título a la izquierda, acordeón a la derecha) */
.rd-faqgroup { display: grid; grid-template-columns: 1fr 2.2fr; gap: 36px; align-items: start; margin-bottom: 40px; }
.rd-faqgroup__title { font-size: 18px; font-weight: var(--fw-bold); color: var(--color-primary); margin: 6px 0 0; }
.rd-faqgroup__title::before { content: "» "; color: var(--color-primary); }
.rd-faqgroup .rd-accordion { max-width: none; }
.rd-faqgroup .rd-accordion details:first-child { border-top: 1px solid var(--color-border); }
@media (max-width: 768px) { .rd-faqgroup { grid-template-columns: 1fr; gap: 10px; } }

/* =====================================================================
   BLOQUES DE CONTENIDO (para páginas tipo "landing" desde el CMS):
   imagen+texto, y reutilización de cifras/tarjetas dentro de .rd-prose.
   ===================================================================== */
.rd-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; margin: 28px 0; }
.rd-split--reverse .rd-split__media { order: 2; }
.rd-split__media img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.rd-split__text h2 { margin-top: 0; }
@media (max-width: 991px) { .rd-split, .rd-split--reverse .rd-split__media { grid-template-columns: 1fr; order: 0; } }

/* Tarjetas de información en fila (sin enlace) */
.rd-infocards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 24px 0; }
.rd-infocard { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.rd-infocard h3 { font-size: var(--fs-subtitle); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 12px 0 8px; }
.rd-infocard p { margin: 0; color: var(--color-text-muted); line-height: 1.5; }

/* Defensivo: cifras y tarjetas de la home reutilizadas dentro de .rd-prose */
.rd-prose .rd-stats, .rd-prose .rd-features, .rd-prose .rd-infocards, .rd-prose .rd-split { margin: 28px 0; }
.rd-prose .rd-stat__num, .rd-prose .rd-stat__label,
.rd-prose .rd-feature h3, .rd-prose .rd-infocard p { margin: 0; }
.rd-prose .rd-stat__num { margin-bottom: 8px; }
.rd-prose .rd-feature, .rd-prose .rd-quick__card { text-decoration: none; }

/* =====================================================================
   PÁGINA "EL CONSORCIO" — píldoras, tarjetas de cifras, organigrama,
   directorio de parques y banner. (Plantilla includes/tpl-el-consorcio.php)
   ===================================================================== */
/* Píldoras rojas sobre el hero */
.rd-pills { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--color-accent); border-radius: var(--radius-lg); margin-top: -46px; position: relative; z-index: 3; box-shadow: var(--shadow-md); overflow: hidden; }
.rd-pill { padding: 26px 24px; color: #fff; border-right: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: row; align-items: center; gap: 14px; }
.rd-pill span strong { display: block; font-weight: var(--fw-bold); }
.rd-pill:last-child { border-right: none; }
.rd-pill svg { width: 26px; height: 26px; }
.rd-pill span { font-weight: var(--fw-semibold); font-size: 15px; line-height: 1.25; }
@media (max-width: 991px) { .rd-pills { grid-template-columns: 1fr 1fr; } .rd-pill:nth-child(2) { border-right: none; } .rd-pill:nth-child(1), .rd-pill:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.22); } }
@media (max-width: 520px) { .rd-pills { grid-template-columns: 1fr; } .rd-pill { border-right: none; border-bottom: 1px solid rgba(255,255,255,.22); } }

/* Misión (2 columnas) */
.rd-mission2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 991px) { .rd-mission2 { grid-template-columns: 1fr; gap: 28px; } }

/* Tarjetas de cifras (mezcla azul/clara, 2x2) */
.rd-statcards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rd-statcard { border-radius: var(--radius-sm); padding: 34px 28px; border-left: 4px solid var(--color-accent); aspect-ratio: 1.7 / 1; display: flex; flex-direction: column; justify-content: center; }
.rd-statcard__num { font-size: 44px; font-weight: var(--fw-bold); line-height: 1; margin: 0 0 8px; }
.rd-statcard__label { font-size: 15px; margin: 0; }
.rd-statcard--blue { background: var(--blue-500); color: #fff; }
.rd-statcard--light { background: var(--black-50); color: var(--color-primary-dark); }
.rd-statcard--light .rd-statcard__num { color: var(--color-primary); }

/* Carrusel simple (solo imagen estática en la plantilla) */
.rd-figbanner { width: 100%; border-radius: var(--radius-lg); overflow: hidden; }
.rd-figbanner img { width: 100%; display: block; }

/* Bloque con título de sección "»" */
.rd-block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; }
.rd-block__title { font-size: 20px; font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 20px; }
.rd-block__title::before { content: "» "; color: var(--color-accent); }

/* Organigrama */
.rd-org__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rd-orgcard { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; text-align: center; }
.rd-orgcard__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--black-100); margin: 0 auto 12px; }
.rd-orgcard__name { font-weight: var(--fw-semibold); color: var(--color-primary-dark); font-size: 15px; margin: 0 0 4px; }
.rd-orgcard__role { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.rd-org__subtitle { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-accent); margin: 28px 0 14px; }
@media (max-width: 768px) { .rd-org__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .rd-org__grid { grid-template-columns: 1fr; } }

/* Directorio de parques */
.rd-parks { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.rd-parks__map img { width: 100%; height: auto; }
/* Mapa minimalista: silueta SVG + emblemas como marcadores (activo en rojo) */
.rd-parks__map--svg { position: relative; }
/* Mas especifico que la regla de seguridad `.rd-scope svg` (24px),
   que encogia la silueta hasta hacerla invisible. */
.rd-scope svg.rd-parks__island, .rd-parks__island { width: 100% !important; height: auto !important; display: block; }
.rd-parks__pin { position: absolute; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2.5px solid var(--blue-800); box-shadow: 0 4px 12px rgba(0,35,67,.18); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rd-parks__pin img { width: 78%; height: 78%; object-fit: contain; }
.rd-parks__pin--big { width: 62px; height: 62px; border-color: var(--blue-500); border-width: 3px; z-index: 2; }
.rd-parks__pin--active { border-color: var(--color-accent); box-shadow: 0 4px 14px rgba(228,5,32,.35); }
.rd-parks__list { list-style: none; margin: 0; padding: 0; }
.rd-parks__list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); color: var(--color-link); font-size: 15px; }
.rd-parks__list li::before { content: "» "; color: var(--color-text-muted); font-weight: var(--fw-bold); }
.rd-parks__list li:first-child::before { color: var(--color-accent); }
@media (max-width: 768px) { .rd-parks { grid-template-columns: 1fr; } }

/* Banner grande (25 años) */
.rd-bigbanner { background: var(--blue-900); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; color: #fff; }
.rd-bigbanner__text { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.rd-bigbanner__text h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 12px 0; }
.rd-bigbanner__text p { opacity: .9; margin: 0 0 20px; }
.rd-bigbanner__img { background-size: cover; background-position: center; min-height: 240px; }
@media (max-width: 768px) { .rd-bigbanner { grid-template-columns: 1fr; } .rd-bigbanner__img { min-height: 180px; } }
/* Variante del Figma: azul claro, corte diagonal hacia la foto, emblema arriba */
.rd-bigbanner--diag { background: var(--blue-500); grid-template-columns: 1fr 1.2fr; position: relative; min-height: 420px; }
.rd-bigbanner--diag .rd-bigbanner__text { position: relative; z-index: 2; padding: 48px; background: var(--blue-500); clip-path: none; }
.rd-bigbanner--diag .rd-bigbanner__text::after { content: ""; position: absolute; top: 0; bottom: 0; right: -110px; width: 110px; background: var(--blue-500); clip-path: polygon(0 0, 100% 0, 0 100%); }
.rd-bigbanner__emblem { width: 88px; height: auto; max-width: 88px; object-fit: contain; display: block; margin-bottom: 18px; filter: brightness(0) invert(1); }
.rd-bigbanner--diag .rd-bigbanner__img { position: relative; z-index: 1; }
.rd-btn--whitered { background: #fff; color: var(--color-accent); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; padding: 12px 22px; border-radius: var(--radius-sm); }
.rd-btn--whitered:hover { background: var(--red-50); color: var(--color-accent); }
@media (max-width: 768px) { .rd-bigbanner--diag { min-height: 0; } .rd-bigbanner--diag .rd-bigbanner__text::after { display: none; } }

/* Tarjetas azules informativas ("¿Sabías que…?") */
.rd-bluecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rd-bluecard { background: var(--blue-900); color: #fff; border-radius: var(--radius-md); border-left: 4px solid var(--color-accent); padding: 24px; }
.rd-bluecard h3 { font-size: 18px; font-weight: var(--fw-bold); margin: 0 0 12px; color: #fff; }
.rd-bluecard p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; opacity: .92; }
.rd-bluecard ul { margin: 0 0 10px 18px; padding: 0; }
.rd-bluecard li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; opacity: .92; }
@media (max-width: 768px) { .rd-bluecards { grid-template-columns: 1fr; } }

/* Banner rojo (visitas escolares) */
.rd-redbanner { background: var(--color-accent); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; color: #fff; }
.rd-redbanner__text { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.rd-redbanner__text h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 10px 0; }
.rd-redbanner__text p { opacity: .96; margin: 0 0 10px; line-height: 1.5; }
.rd-redbanner__img { background-size: cover; background-position: center; min-height: 240px; }
@media (max-width: 768px) { .rd-redbanner { grid-template-columns: 1fr; } .rd-redbanner__img { min-height: 180px; } }

/* Hero solo con foto (sin título), p.ej. Historia */
.rd-photohero { position: relative; min-height: 400px; background-size: cover; background-position: center; }
.rd-photohero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,61,.45), rgba(10,31,61,0) 45%); }
.rd-photohero .rd-container { position: relative; }
.rd-photohero .rd-breadcrumb { padding-top: 18px; color: rgba(255,255,255,.9); }
.rd-photohero .rd-breadcrumb a { color: rgba(255,255,255,.9); }
.rd-photohero .rd-breadcrumb span { color: #fff; }

/* Eyebrow con línea (— TEXTO) */
.rd-eyebrow--line { display: flex; align-items: center; gap: 12px; }
.rd-eyebrow--line::before { content: ""; width: 32px; height: 2px; background: var(--color-primary); }

/* Galería de fotos (1 grande + 2 apiladas) */
.rd-gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin: 28px 0; }
.rd-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); display: block; }
.rd-gallery__tall { grid-row: 1 / span 2; }
@media (max-width: 768px) { .rd-gallery { grid-template-columns: 1fr; grid-template-rows: none; } .rd-gallery__tall { grid-row: auto; } }

/* Texto destacado (cita azul en caja) */
.rd-highlight { border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md); padding: 28px; }
.rd-highlight p { font-size: 20px; line-height: 1.4; font-weight: var(--fw-semibold); font-style: italic; color: var(--color-primary); margin: 0; }

/* Banda de cifras en rojo (variante) */
.rd-stats--red { background: var(--color-accent); }

/* Caja de información lateral (horario / teléfono / dirección) */
.rd-infobox { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px; }
.rd-infobox__icon { width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--fw-bold); margin-bottom: 14px; }
.rd-infobox__label { font-size: 14px; font-weight: var(--fw-bold); color: var(--color-primary); margin: 0 0 2px; }
.rd-infobox__value { font-size: 14px; line-height: 1.5; color: var(--color-text); margin: 0 0 14px; }

/* =====================================================================
   ACTUALIDAD — hero de noticia, etiqueta de categoría, medios y prensa.
   ===================================================================== */
/* Etiqueta de categoría sobre la imagen de la tarjeta de noticia */
.rd-news__media { position: relative; }
.rd-news__tag { position: absolute; left: 0; bottom: 0; background: var(--blue-900); color: #fff; font-size: 12px; font-weight: var(--fw-semibold); padding: 5px 12px; }

/* Hero de noticia destacada (Actualidad) */
.rd-newshero { position: relative; overflow: hidden; min-height: 420px; background-size: cover; background-position: center; display: flex; align-items: flex-end; border-radius: var(--radius-md); }
.rd-newshero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,61,.15), rgba(10,31,61,.85)); }
.rd-newshero__inner { position: relative; padding: 36px 40px; color: #fff; max-width: 720px; }
.rd-newshero__inner h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 0; color: #fff; }
.rd-newshero__bc { position: absolute; top: 18px; left: 40px; z-index: 2; color: rgba(255,255,255,.85); font-size: 13px; }
.rd-newshero__bc a { color: rgba(255,255,255,.85); text-decoration: none; }

/* Carrusel de noticia destacada */
.rd-carousel { position: relative; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 28px; }
.rd-carousel__track { display: flex; transition: transform .45s ease; }
.rd-carousel__slide { min-width: 100%; min-height: 480px; background-size: cover; background-position: center; }
@media (max-width: 768px) { .rd-carousel__slide { min-height: 300px; } }
.rd-carousel__slide a { display: block; position: relative; min-height: 420px; background-size: cover; background-position: center; text-decoration: none; }
.rd-carousel__slide a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,61,.15) 30%, rgba(10,31,61,.85)); }
.rd-carousel__caption { position: absolute; left: 0; bottom: 0; padding: 36px 44px; color: #fff; max-width: 760px; }
.rd-carousel__caption .rd-carousel__bc { font-size: 13px; opacity: .85; margin: 0 0 10px; }
.rd-carousel__caption h2 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); margin: 0; color: #fff; }
.rd-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(10,31,61,.35); color: #fff; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; }
.rd-carousel__btn:hover { background: rgba(10,31,61,.6); }
.rd-carousel__btn--prev { left: 16px; }
.rd-carousel__btn--next { right: 16px; }
.rd-carousel__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.rd-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; cursor: pointer; padding: 0; }
.rd-carousel__dot.is-active { background: var(--color-accent); }
@media (max-width: 768px) { .rd-carousel__slide a { min-height: 300px; } .rd-carousel__caption { padding: 24px; } }

/* Medios y prensa */
.rd-mediacards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rd-mediacard { position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 250px; background-size: cover; background-position: center; display: flex; align-items: flex-end; text-decoration: none; }
.rd-mediacard__box { position: relative; margin: 0 16px 16px; background: var(--blue-900); border-left: 4px solid var(--color-accent); padding: 16px 18px; color: #fff; width: 100%; box-sizing: border-box; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rd-mediacard__title { font-size: 14px; font-weight: var(--fw-semibold); margin: 0 0 8px; line-height: 1.35; }
.rd-mediacard__src { font-size: 12px; opacity: .85; }
.rd-mediacard__arrow { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; color: #fff; }
@media (max-width: 768px) { .rd-mediacards { grid-template-columns: 1fr; } }

/* Detalle de noticia a una columna (full width centrado) */
.rd-articlefull { max-width: 880px; margin: 0 auto; }
.rd-articlefull__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 14px; }
.rd-articlefull__meta { font-size: 14px; color: var(--color-text-muted); margin: 0 0 24px; display: flex; gap: 24px; flex-wrap: wrap; }
.rd-articlefull .rd-prose { max-width: none; }
.rd-articlefull .rd-prose img { width: 100%; height: auto; }
.rd-related { border-top: 1px solid var(--color-border); margin-top: 48px; padding-top: 40px; }

/* =====================================================================
   PERFIL DEL CONTRATANTE / PUBLICACIONES — restilado del módulo
   publicaciones (pestañas Bootstrap -> barra lateral + listas de docs).
   ===================================================================== */
.rd-publi { padding: 40px 0 64px; font-family: var(--font-base); color: var(--color-text); }
.rd-publi #tabs { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start; width: 100%; max-width: none; padding: 0; margin-top: 8px; }
/* Fijar columnas explícitamente: el menú (nav-tabs) a la izquierda (260px) y
   el contenido (tab-content) a la derecha (1fr). Sin esto, el auto-flow del
   grid los intercambiaba y el panel de contenido quedaba a 260px (texto roto). */
.rd-publi #tabs > .nav-tabs { grid-column: 1; }
.rd-publi #tabs > .tab-content { grid-column: 2; min-width: 0; }
.rd-publi .nav-tabs { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.rd-publi .nav-tabs > li { margin: 0 !important; float: none; border-bottom: 1px solid var(--color-border); }
.rd-publi .nav-tabs > li:last-child { border-bottom: none; }
.rd-publi .nav-tabs > li > a { display: block; padding: 12px 16px; margin: 0 !important; border: none !important; border-radius: 0 !important; background: none !important; color: var(--color-text); }
.rd-publi .nav-tabs > li > a:hover { background: var(--black-50) !important; }
.rd-publi .nav-tabs > li > a h5 { margin: 0; font-size: 14px; line-height: 1.35; font-weight: var(--fw-medium); }
.rd-publi .nav-tabs > li.active > a { background: var(--black-50) !important; border-left: 3px solid var(--color-accent) !important; color: var(--color-primary) !important; }
.rd-publi .tab-content { padding: 0; min-width: 0; }
.rd-publi .tab-pane > h3 { font-size: 20px; font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 16px; }
.rd-publi .publicaciones { list-style: none; margin: 0; padding: 0; }
.rd-publi .publicaciones > li { padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 10px; font-size: 15px; line-height: 1.5; }
.rd-publi .publicaciones > li > ul { list-style: none; margin: 10px 0 0; padding: 0; }
.rd-publi .publicaciones > li > ul > li { padding: 8px 0; border-top: 1px solid var(--color-border); margin: 0; }
.rd-publi .publicaciones a { color: var(--color-link); text-decoration: none; }
.rd-publi .publicaciones a:hover { color: var(--color-accent); }
.rd-publi .publicaciones strong { color: var(--color-primary-dark); }
@media (max-width: 768px) {
  .rd-publi #tabs { grid-template-columns: 1fr; }
  .rd-publi .nav-tabs { flex-direction: row; flex-wrap: wrap; }
  .rd-publi .nav-tabs > li { border-bottom: none; border-right: 1px solid var(--color-border); }
}

/* =====================================================================
   PULIDO RESPONSIVE — red de seguridad para móvil.
   ===================================================================== */
@media (max-width: 768px) {
  /* Evitar desbordes horizontales por contenido largo */
  .rd-prose { overflow-wrap: break-word; }
  .rd-prose table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rd-doclink__label, .rd-news__title, .rd-mediacard__title { overflow-wrap: break-word; word-break: break-word; }
  /* La barra utilitaria envuelve en vez de apretarse */
  .rd-utilitybar__inner { flex-wrap: wrap; gap: 8px 16px; }
  /* Algo menos de aire vertical en móvil */
  .rd-section { padding: 40px 0; }
  /* Pestañas: si hay muchas, que envuelvan */
  .rd-tabs__nav { flex-wrap: wrap; }
  /* El iframe del mapa de contacto no fuerza ancho */
  .rd-contact__map iframe { height: 300px; }
  /* Pasos numerados: menos sangría */
  .rd-steps > li { padding-left: 46px; }
}

/* En pantallas muy estrechas, el contenedor pierde algo de padding lateral */
@media (max-width: 400px) {
  .rd-container { padding-inline: 14px; }
  .rd-hero__inner { padding-left: 0; padding-right: 0; }
}

/* =====================================================================
   ACCESIBILIDAD — foco visible para teclado, salto al contenido y
   respeto por "reducir movimiento".
   ===================================================================== */
/* Foco visible y claro al navegar con teclado (Tab) */
.rd-scope a:focus-visible,
.rd-scope button:focus-visible,
.rd-scope summary:focus-visible,
.rd-scope input:focus-visible,
.rd-scope textarea:focus-visible,
.rd-scope [tabindex]:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: 3px;
}
/* En fondos oscuros (hero, banners, cifras), el foco se ve en blanco */
.rd-hero a:focus-visible, .rd-newshero a:focus-visible, .rd-carousel a:focus-visible,
.rd-carousel button:focus-visible, .rd-mission__dark a:focus-visible,
.rd-bigbanner a:focus-visible, .rd-redbanner a:focus-visible, .rd-bluecard a:focus-visible {
  outline-color: #fff;
}

/* Enlace "saltar al contenido" para lectores de pantalla / teclado */
.rd-skip { position: absolute; left: -9999px; top: 0; background: var(--color-accent); color: #fff; padding: 10px 16px; z-index: 9999; border-radius: 0 0 var(--radius-sm) 0; }
.rd-skip:focus { left: 0; }

/* Respetar la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
  .rd-scope *, .rd-carousel__track {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   LISTADO DE NOTICIAS (legacy) — restilado de .noticia / .noticias-fecha
   sin tocar el PHP de category.php (que mezcla público, privado y buscador).
   ===================================================================== */
.contenido.rd-scope { padding-top: 8px; padding-bottom: 48px; }
.contenido.rd-scope .title {
  font-family: var(--font-base);
  font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-bold);
  color: var(--color-primary-dark); border-bottom: 2px solid var(--color-border);
  padding-bottom: 14px; margin: 8px 0 28px;
}
.contenido.rd-scope .title a { color: var(--color-text-muted); text-decoration: none; }
.contenido.rd-scope .title a:hover { color: var(--color-accent); }

.contenido.rd-scope .noticia {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; overflow: hidden;
}
.contenido.rd-scope .noticias-fecha {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--blue-900); color: #fff; border-radius: var(--radius-md);
  padding: 12px 6px; min-width: 66px; margin-bottom: 10px;
}
.contenido.rd-scope .noticias-dia { font-size: 24px; font-weight: var(--fw-extrabold); line-height: 1; }
.contenido.rd-scope .noticias-mes { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.contenido.rd-scope .noticias-anyo { font-size: 12px; opacity: .8; }
.contenido.rd-scope .noticia h4 { font-size: 18px; line-height: 1.35; font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 0 0 8px; }
.contenido.rd-scope .noticia a { text-decoration: none; }
.contenido.rd-scope .noticia a h4 { color: var(--color-primary-dark); }
.contenido.rd-scope .noticia a:hover h4 { color: var(--color-accent); }
.contenido.rd-scope .wrapper-notices-title { color: var(--color-accent); }

/* --- Transparencia: buscador + listado de secciones/documentos --- */
.contenido.rd-scope #form_buscar { display: flex; gap: 8px; align-items: center; }
.contenido.rd-scope #form_buscar input[type="text"] {
  flex: 1 1 auto; width: auto; padding: 10px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-base); font-size: 15px;
}
.contenido.rd-scope #form_buscar input[type="submit"] {
  flex: 0 0 auto; width: auto; background: var(--color-accent); color: #fff;
  border: none; border-radius: var(--radius-md); padding: 10px 18px;
  font-weight: var(--fw-semibold); cursor: pointer; font-family: var(--font-base);
}
.contenido.rd-scope #content h4 { font-size: 18px; font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.contenido.rd-scope #content h5 { font-size: 16px; font-weight: var(--fw-semibold); margin: 14px 0 6px; }
.contenido.rd-scope #content h5 a { color: var(--color-link); text-decoration: none; }
.contenido.rd-scope #content h5 a:hover { color: var(--color-accent); }
.contenido.rd-scope #content ul { list-style: none; margin: 0 0 14px; padding: 0; }
.contenido.rd-scope #content li { padding: 10px 2px; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.contenido.rd-scope #content li img { vertical-align: middle; }

/* =====================================================================
   COMPONENTES DE TRÁMITES — pestañas, pasos numerados, enlaces a PDF,
   cajas de aviso. Pensados para usarse dentro del contenido del CMS.
   ===================================================================== */

/* --- Pestañas (requiere rediseno.js) --- */
.rd-tabs { margin: 8px 0 24px; }
.rd-tabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.rd-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-base); font-size: 16px; font-weight: var(--fw-medium);
  color: var(--color-text-muted); padding: 12px 18px; border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.rd-tab:hover { color: var(--color-text); }
.rd-tab.is-active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.rd-tab-panel { display: none; padding-top: 24px; }
.rd-tab-panel.is-active { display: block; }

/* Subpestañas (un segundo nivel de pestañas dentro de un panel) */
.rd-subtabs { margin-top: 8px; }
.rd-subtabs > .rd-tabs__nav { border-bottom: 1px solid var(--color-border); }

/* Etiqueta de estado (ej. "Abierto") */
.rd-badge-open { display: inline-block; background: var(--color-accent); color: #fff; font-size: 12px; font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }

/* Procesos selectivos: tabs verticales a la izquierda + contenido a la derecha */
.rd-proc { display: grid; grid-template-columns: 230px 1fr; gap: 36px; align-items: start; }
.rd-proc__side { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rd-proc__side .rd-tab { text-align: left; justify-content: flex-start; width: 100%; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--color-border); border-radius: 0; }
.rd-proc__side .rd-tab:last-child { border-bottom: none; }
.rd-proc__side .rd-tab.is-active { background: var(--black-50); border-left: 3px solid var(--color-accent); color: var(--color-primary); }
@media (max-width: 768px) { .rd-proc { grid-template-columns: 1fr; gap: 16px; } .rd-proc__side { flex-direction: row; } .rd-proc__side .rd-tab { border-bottom: none; border-right: 1px solid var(--color-border); } }

/* --- Pasos numerados --- */
.rd-steps { list-style: none; counter-reset: paso; margin: 0; padding: 0; max-width: 840px; }
.rd-steps > li { position: relative; counter-increment: paso; padding: 0 0 24px 52px; }
.rd-steps > li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary);
  color: #fff; font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center;
}
.rd-steps > li::after {
  content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--color-border);
}
.rd-steps > li:last-child::after { display: none; }
.rd-steps h4 { font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-primary-dark); margin: 4px 0 8px; }
.rd-steps p { margin: 0 0 8px; line-height: 1.6; }

/* --- Filas de enlace (PDF / Web) --- */
.rd-doclink {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 16px 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  margin-bottom: 10px; background: #fff; color: var(--color-text); transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-doclink:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.rd-doclink__icon {
  flex: 0 0 auto; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .03em;
  color: var(--color-accent); border: 1px solid currentColor; border-radius: 4px; padding: 3px 6px;
}
.rd-doclink__label { flex: 1 1 auto; font-size: 15px; font-weight: var(--fw-medium); }
.rd-doclink__arrow { flex: 0 0 auto; color: var(--color-primary); }

.rd-doclist-group { margin-bottom: 28px; }
.rd-doclist-group__title { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary-dark); margin: 0 0 14px; }

/* Variante en caja: grupo con borde y filas separadas por líneas (sin tarjetas) */
.rd-doclist-group--boxed { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.rd-doclist-group--boxed .rd-doclist-group__title { padding: 16px 18px; margin: 0; border-bottom: 1px solid var(--color-border); }
.rd-doclist-group--boxed .rd-doclink { border: none; border-radius: 0; margin: 0; border-bottom: 1px solid var(--color-border); box-shadow: none; }
.rd-doclist-group--boxed .rd-doclink:last-child { border-bottom: none; }
.rd-doclist-group--boxed .rd-doclink:hover { background: var(--blue-50); }

/* --- Caja de aviso / info --- */
.rd-callout {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px;
  border: 1px solid var(--blue-200); background: var(--blue-50); border-radius: var(--radius-md);
  color: var(--color-text); margin: 0 0 20px; font-size: 15px; line-height: 1.5;
}
.rd-callout--warning { border-color: var(--red-200); background: var(--red-50); }
.rd-callout__icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: var(--fw-bold); }
.rd-callout--warning .rd-callout__icon { background: var(--color-accent); }

/* Defensivo: cuando estos componentes van dentro de .rd-prose (contenido del CMS),
   evitar que la tipografía de prosa les meta subrayados, colores o sangrías. */
.rd-prose .rd-tabs, .rd-prose .rd-steps, .rd-prose .rd-doclist-group { margin-left: 0; }
.rd-prose .rd-steps, .rd-prose .rd-tabs__nav { margin-left: 0; padding-left: 0; }
.rd-prose .rd-doclink, .rd-prose .rd-doclink:hover,
.rd-prose .rd-tab, .rd-prose .rd-btn { text-decoration: none; }
.rd-prose a.rd-doclink { color: var(--color-text); }
.rd-prose .rd-tab-panel { padding-top: 24px; }

/* =====================================================================
   CONTACTO — mapa, datos de contacto y formulario.
   ===================================================================== */
.rd-contact__map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 36px; }
.rd-contact__map iframe { display: block; width: 100%; border: 0; }

.rd-contact__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 44px; align-items: start; }

.rd-contact-info__item { margin-bottom: 18px; }
.rd-contact-info__label { font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); margin: 0 0 4px; }
.rd-contact-info__value { font-size: 15px; line-height: 1.5; color: var(--color-text); margin: 0; }
.rd-contact-info__value a { color: var(--color-link); text-decoration: none; }

/* Formulario */
.rd-form__card { background: var(--black-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; }
.rd-form__title { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-bold); color: var(--color-primary-dark); margin: 0 0 22px; }
.rd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rd-field { margin-bottom: 18px; }
.rd-field label { display: block; font-size: 14px; font-weight: var(--fw-medium); color: var(--color-text); margin-bottom: 6px; }
.rd-field label .rd-opt { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.rd-input, .rd-textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-base); font-size: 15px; color: var(--color-text); background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-input:focus, .rd-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--blue-50); }
.rd-textarea { min-height: 140px; resize: vertical; }
.rd-error { display: block; color: var(--color-accent); font-size: 13px; margin-top: 6px; }
.rd-form__consent { font-size: 14px; line-height: 1.6; color: var(--color-text-muted); margin: 6px 0 18px; }
.rd-form__consent a { color: var(--color-link); }
.rd-form .g-recaptcha { margin: 0 0 18px; }
.rd-btn--block { width: 100%; }

/* Errores de validación (getMessageError devuelve span.alert-danger) */
.rd-form .alert-danger {
  display: block; margin-top: 6px; padding: 0;
  background: none; border: none; border-radius: 0;
  color: var(--color-accent); font-size: 13px; font-weight: var(--fw-medium);
}

@media (max-width: 991px) {
  .rd-contact__grid { grid-template-columns: 1fr; gap: 32px; }
  .rd-form__row { grid-template-columns: 1fr; }
}

/* =====================================================================
   HOME — pasada de diseño Figma (barra transparente, botones píldora,
   accesos con flecha, misión solapada, cifras flotantes).
   ===================================================================== */

/* Línea del eyebrow en blanco sobre fondos oscuros */
.rd-hero .rd-eyebrow--line::before,
.rd-mission__dark .rd-eyebrow--line::before,
.rd-figures__story .rd-eyebrow--line::before { background: #fff; }

/* ---- Barra transparente superpuesta (solo home) ---- */
.rd-header--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; transition: background .25s ease, box-shadow .25s ease; }
/* Al bajar, el header transparente de la home se vuelve sólido (clase añadida por JS) */
.rd-header--overlay.is-solid { background: var(--white); box-shadow: 0 2px 14px rgba(15,17,19,.10); }
.rd-header--overlay.is-solid .rd-utilitybar { background: var(--black-50); border-bottom: 1px solid var(--color-border); }
.rd-header--overlay.is-solid .rd-utilitybar a { color: var(--color-text); }
.rd-header--overlay.is-solid .rd-navbar { border-bottom: 1px solid var(--color-border); }
.rd-header--overlay.is-solid .rd-nav__list > li > a,
.rd-header--overlay.is-solid .rd-nav summary { color: var(--color-text); }
.rd-header--overlay.is-solid .rd-nav__list > li > a:hover,
.rd-header--overlay.is-solid .rd-nav summary:hover { color: var(--color-accent); opacity: 1; }
.rd-header--overlay.is-solid .rd-nav summary::after { border-color: var(--color-text); }
.rd-header--overlay .rd-utilitybar { background: transparent; border-bottom: 1px solid rgba(255,255,255,.16); }
.rd-header--overlay .rd-utilitybar a { color: rgba(255,255,255,.82); }
.rd-header--overlay .rd-utilitybar a:hover { color: #fff; }
.rd-header--overlay .rd-navbar { border-bottom: none; }
.rd-header--overlay .rd-nav__list > li > a,
.rd-header--overlay .rd-nav summary { color: #fff; }
.rd-header--overlay .rd-nav__list > li > a:hover,
.rd-header--overlay .rd-nav summary:hover { color: #fff; opacity: .78; }
.rd-header--overlay .rd-nav summary::after { border-color: #fff; }

/* El hero de la home deja hueco arriba para la barra superpuesta */
.rd-hero--overlay .rd-hero__inner { padding-top: 150px; padding-bottom: 150px; max-width: 640px; }

/* ---- Botón píldora con flecha en círculo ---- */
.rd-btn--pill { display: inline-flex; align-items: center; gap: 12px; border-radius: 999px; padding: 8px 8px 8px 24px; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; border: none; }
.rd-btn--pill .rd-btn__ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
.rd-btn--pill .rd-btn__ico svg { width: 16px; height: 16px; }
.rd-btn--white { background: #fff; color: var(--color-primary-dark); }
.rd-btn--white:hover { background: #fff; color: var(--color-accent); }
.rd-btn--white .rd-btn__ico { background: var(--color-primary-dark); color: #fff; transition: background .15s ease; }
.rd-btn--white:hover .rd-btn__ico { background: var(--color-accent); }
.rd-btn--glass { background: rgba(255,255,255,.10); color: #fff; border: 1.5px solid rgba(255,255,255,.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rd-btn--glass:hover { background: rgba(255,255,255,.20); color: #fff; }
.rd-btn--glass .rd-btn__ico { background: #fff; color: var(--color-primary-dark); transition: background .15s ease, color .15s ease; }
.rd-btn--glass:hover .rd-btn__ico { background: #fff; color: var(--color-accent); }
.rd-btn--redpill { background: var(--color-accent); color: #fff; }
.rd-btn--redpill:hover { background: var(--color-accent-hover); color: #fff; }
.rd-btn--redpill .rd-btn__ico { background: #fff; color: var(--color-accent); }

/* ---- Hero: subcopy debajo del botón ---- */
.rd-hero__cta { margin-bottom: 22px; }
.rd-hero__sub { font-size: 15px; line-height: 1.55; opacity: .9; margin: 0; max-width: 340px; }

/* ---- Accesos rápidos: flecha en círculo rojo ---- */
.rd-quick__card { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; }
.rd-quick__body { display: flex; flex-direction: column; gap: 6px; }
.rd-quick__arrow { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--color-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.rd-quick__arrow svg { width: 18px; height: 18px; }
.rd-quick__card:hover .rd-quick__arrow { background: var(--color-accent-hover); }

/* ---- Misión: ítems con check + tarjeta oscura flotante ---- */
.rd-mission--float { display: block; position: relative; padding: 30px 0 0; min-height: 500px; }
.rd-mission--float .rd-mission__red { position: relative; width: 79%; margin-top: 64px; border-radius: var(--radius-lg); padding: 48px 36% 48px 44px; min-height: 370px; }
.rd-mission--float .rd-mission__red ul { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.rd-mission__red .rd-check { display: flex; gap: 14px; align-items: flex-start; }
.rd-mission__red .rd-check h4 { font-size: 16px; font-weight: var(--fw-bold); margin: 0 0 6px; line-height: 1.25; }
.rd-mission__red .rd-check p { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .92; }
.rd-check__ico { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; }
.rd-check__ico svg { width: 13px; height: 11px; }
.rd-mission--float .rd-mission__dark { position: absolute; top: 0; right: 0; width: 50%; min-height: 430px; z-index: 2; margin-left: 0; border-radius: var(--radius-lg); padding: 48px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,35,67,.32); display: flex; flex-direction: column; justify-content: center; background-image: linear-gradient(110deg, rgba(0,35,67,.96) 38%, rgba(0,35,67,.75) 72%, rgba(0,35,67,.45) 100%), url('../img/consorcio-bomberos.jpg'); background-size: cover; background-position: center right; }
.rd-mission--float .rd-mission__dark h3 { font-size: 30px; line-height: 1.18; }
/* Botón "El Consorcio": pastilla blanca, texto e icono en ROJO (diseño final). */
.rd-mission__dark .rd-btn--white { color: var(--color-accent); }
.rd-mission__dark .rd-btn--white .rd-btn__ico { background: var(--color-accent); color: #fff; }
.rd-mission__dark .rd-btn--white:hover .rd-btn__ico { background: var(--color-accent-hover); color: #fff; }

/* ---- Cifras + historia: foto redondeada + tarjeta azul flotante ---- */
.rd-figures-sec { padding: 90px 0; }
.rd-figures { display: flex; position: relative; min-height: 480px; align-items: center; }
.rd-figures__photo-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-lg) 0 0 0; }
.rd-figures__photo { position: absolute; top: 0; left: 0; right: 0; height: 560px; border-radius: 140px 16px 0 0; transform: skewY(-1.8deg); transform-origin: top right; background-image: linear-gradient(90deg, rgba(0,35,67,.95) 0%, rgba(0,35,67,.82) 42%, rgba(0,35,67,.30) 76%, rgba(0,35,67,.50) 100%), url('../img/consorcio-bomberos.jpg'); background-size: cover; background-position: center; }
.rd-figures__left { position: relative; z-index: 2; padding: 52px 56px; max-width: 520px; color: #fff; }
.rd-figures__emblem { width: 72px; height: auto; display: block; margin: 0 0 20px; }
.rd-figures__left h3 { font-size: var(--fs-h4); line-height: 1.18; font-weight: var(--fw-bold); margin: 6px 0 16px; }
.rd-figures__left p { font-size: 15px; line-height: 1.55; opacity: .92; margin: 0 0 28px; }
.rd-figures__stats { position: absolute; z-index: 3; top: -52px; bottom: -52px; left: 47.5%; width: 340px; background: #001B34; border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: 0 30px 70px rgba(0,27,52,.45); display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; }
.rd-figstat { padding: 6px 0; text-align: center; color: #fff; }
.rd-figstat__num { font-size: 40px; font-weight: var(--fw-semibold); line-height: 48px; letter-spacing: 0; margin: 0 0 6px; }
.rd-figstat__label { font-size: 18px; line-height: 24px; font-weight: var(--fw-medium); letter-spacing: 0; opacity: .85; margin: 0; max-width: 200px; }
.rd-figdivider { width: 48px; height: 1px; background: rgba(255,255,255,.25); margin: 12px auto; }

@media (max-width: 991px) {
  .rd-mission--float { min-height: 0; padding: 0; }
  .rd-mission--float .rd-mission__red { width: 100%; margin-top: 0; padding: 36px; }
  .rd-mission--float .rd-mission__red ul { grid-template-columns: 1fr; }
  .rd-mission--float .rd-mission__dark { position: static; width: 100%; min-height: 0; margin-top: 20px; }
  .rd-figures-sec { padding: 48px 0; }
  .rd-figures { display: block; min-height: 0; }
  .rd-figures__photo-wrap { position: absolute; top: 0; left: 0; right: 0; height: 440px; border-radius: var(--radius-lg); }
  .rd-figures__photo { transform: none; height: 100%; border-radius: 60px 16px 0 0; }
  .rd-figures__left { position: relative; padding: 40px 28px; }
  .rd-figures__stats { position: relative; z-index: 3; top: auto; bottom: auto; left: auto; width: auto; margin: 8px 12px 0; }
}
@media (max-width: 767px) {
  .rd-header--overlay { position: sticky; top: 0; background: var(--blue-900); }
  .rd-header--overlay .rd-utilitybar { background: rgba(255,255,255,.06); }
  .rd-hero--overlay .rd-hero__inner { padding-top: 56px; padding-bottom: 96px; }
}

/* =====================================================================
   PERFIL DEL CONTRATANTE — tarjetas de contenido tipo Figma
   (contrato = tarjeta; documentos con icono, fecha propia y flecha).
   ===================================================================== */
.rd-publi .publicaciones > li { border: 1px solid var(--color-border); border-radius: 12px; padding: 4px 22px 16px; margin-bottom: 14px; }
.rd-publi .publicaciones > li > strong { display: block; font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .03em; text-transform: uppercase; color: var(--color-primary-dark); padding: 18px 0 4px; line-height: 1.4; }
.rd-publi .publicaciones > li > ul { list-style: none; margin: 0; padding: 0; }
.rd-publi .publicaciones > li > ul > li { position: relative; margin: 0; padding: 14px 46px 14px 32px; border-top: 1px solid var(--color-border); }
.rd-publi .publicaciones > li > ul > li:first-child { border-top: none; }
.rd-publi .publicaciones > li > ul > li::before { content: ""; position: absolute; left: 0; top: 15px; width: 20px; height: 20px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230153A0' stroke-width='1.5'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E"); }
.rd-publi .publicaciones > li > ul > li::after { content: ""; position: absolute; right: 0; top: 10px; width: 30px; height: 30px; border: 1px solid var(--color-border); border-radius: 50%; background: no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230153A0' stroke-width='2'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.rd-publi .publicaciones a { color: var(--color-link); font-weight: var(--fw-medium); text-decoration: none; }
.rd-publi .publicaciones a:hover { color: var(--color-accent); }
.rd-pub-date { display: block; margin-top: 4px; font-size: 13px; font-style: italic; color: var(--color-text-muted); }
.rd-publi .publicaciones > li > .rd-pub-sub { display: block; font-size: 13px; line-height: 1.45; color: var(--color-text-muted); margin: 2px 0 8px; }
.rd-publi .rd-empty { text-align: center; color: var(--color-text-muted); padding: 48px 0; margin: 0; }

/* El styles.css antiguo define `#tabs ul li { padding: 0 10px }`. Al ser un
   selector de ID gana a las reglas de clase de arriba y aplastaba el sangrado,
   dejando el icono del documento encima del texto. Subimos la especificidad. */
.rd-publi #tabs .rd-cmenu li { padding: 0; }
.rd-publi #tabs .publicaciones > li { padding: 4px 22px 16px; }
.rd-publi #tabs .publicaciones > li > ul > li { padding: 14px 48px 14px 40px; }
.rd-publi #tabs .publicaciones > li > ul > li::before { left: 2px; top: 16px; }
.rd-publi #tabs .publicaciones > li > ul > li::after { right: 4px; }

/* ---- Perfil del contratante: pestañas horizontales de las páginas hijas ---- */
.rd-publi #tabs .rd-subnav { display: flex; flex-wrap: wrap; gap: 0 26px; list-style: none; margin: 0 0 26px; padding: 0; border-bottom: 1px solid var(--color-border); }
.rd-publi #tabs .rd-subnav > li { margin: 0 !important; padding: 0; float: none; border: none; }
.rd-publi #tabs .rd-subnav > li > a { display: block; padding: 10px 2px 12px; margin: 0 !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--color-text-muted) !important; font-size: 14px; font-weight: var(--fw-medium); }
.rd-publi #tabs .rd-subnav > li > a:hover { color: var(--color-text) !important; }
.rd-publi #tabs .rd-subnav > li.active > a { color: var(--color-primary) !important; border-bottom-color: var(--color-primary) !important; }

/* ---- Perfil del contratante: paginación ---- */
.rd-pager { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.rd-pager button { font-family: inherit; font-size: 13px; line-height: 1; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); border-radius: 6px; padding: 8px 12px; cursor: pointer; transition: background .15s ease; }
.rd-pager button:hover:not(:disabled) { background: var(--black-50); }
.rd-pager button:disabled { opacity: .45; cursor: default; }
.rd-pager .rd-pager__num { min-width: 34px; padding: 8px 10px; }
.rd-pager .rd-pager__num.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---- Perfil del contratante: menú lateral desplegable anidado (Figma) ---- */
.rd-cmenu { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; list-style: none; margin: 0; padding: 0; display: block; }
.rd-cmenu li { margin: 0 !important; list-style: none; float: none; border: none; }
.rd-cmenu a { display: block; padding: 12px 16px; color: var(--color-text) !important; text-decoration: none; border-top: 1px solid var(--color-border); background: none !important; }
.rd-cmenu > li:first-child > a { border-top: none; }
.rd-cmenu a:hover { background: var(--black-50) !important; }
.rd-cmenu a h5 { margin: 0; font-size: 14px; font-weight: var(--fw-medium); line-height: 1.35; }
.rd-cmenu a.is-current { background: var(--black-50) !important; border-left: 3px solid var(--color-accent); padding-left: 13px; }
/* Bootstrap dibuja un recuadro sobre .nav-tabs > li.active > a: lo anulamos
   (dejamos solo el fondo suave + la barrita roja de .is-current). */
.rd-publi .rd-cmenu li.active > a,
.rd-publi .rd-cmenu li.active > a:hover,
.rd-publi .rd-cmenu li.active > a:focus { border-right: none; border-bottom: none; border-radius: 0; border-top: 1px solid var(--color-border); background: var(--black-50); }
.rd-publi .rd-cmenu > li:first-child > a { border-top: none; }
.rd-publi .rd-cmenu a.is-current { border-left: 3px solid var(--color-accent); padding-left: 13px; }
.rd-cmenu a.is-current h5 { color: var(--color-primary); }
.rd-cmenu details > summary { list-style: none; cursor: pointer; padding: 12px 16px; border-top: 1px solid var(--color-border); font-size: 14px; font-weight: var(--fw-medium); display: flex; justify-content: space-between; align-items: center; }
.rd-cmenu details > summary::-webkit-details-marker { display: none; }
.rd-cmenu details > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); transition: transform .15s ease; margin-left: 8px; flex-shrink: 0; }
.rd-cmenu details[open] > summary::after { transform: rotate(-135deg); }
.rd-cmenu details ul { list-style: none; margin: 0; padding: 0; background: #fff; }
.rd-cmenu details ul a, .rd-cmenu details ul > li > details > summary { padding-left: 32px; }
.rd-cmenu details ul ul a { padding-left: 48px; }

/* =====================================================================
   EL CONSORCIO — barra roja, mapa de parques y banner 25 años.
   Portado del HTML que ajustó el cliente (preview-mapa-banner.html).
   ===================================================================== */

/* Barra roja de 4 características */
.rd-redbar { background: var(--color-accent); border-radius: 16px; border: 3.5px solid #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); display: grid; grid-template-columns: repeat(4, 1fr); color: #fff; overflow: hidden; margin-top: -46px; position: relative; z-index: 3; }
.rd-redbar__item { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 22px 18px; border-right: 1px solid rgba(255,255,255,.35); }
.rd-redbar__item:last-child { border-right: none; }
.rd-redbar__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rd-redbar__text { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; }
.rd-redbar__text span { opacity: .92; font-weight: var(--fw-regular); }
.rd-redbar__text strong { font-size: 17px; font-weight: var(--fw-bold); margin-top: 1px; }
@media (max-width: 991px) { .rd-redbar { grid-template-columns: 1fr 1fr; } .rd-redbar__item:nth-child(2) { border-right: none; } .rd-redbar__item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.35); } }
@media (max-width: 560px) { .rd-redbar { grid-template-columns: 1fr; } .rd-redbar__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.35); } }

/* Mapa de parques */
.rd-parks__map--svg { position: relative; width: 100%; min-height: 360px; }
.rd-parks__pin { position: absolute; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2.5px solid var(--blue-800); box-shadow: 0 4px 12px rgba(0,35,67,.2); display: flex; align-items: center; justify-content: center; z-index: 2; }
.rd-parks__pin--red { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 4px 14px rgba(228,5,32,.35); }
.rd-parks__pin--blue { border-color: var(--blue-500); color: var(--blue-500); width: 50px; height: 50px; z-index: 3; }
.rd-parks__pin--navy { border-color: var(--blue-800); color: var(--blue-800); }
.rd-parks__pin svg { width: 68%; height: 68%; display: block; }
/* Los chevrons de esta lista vuelven al ::before de mas arriba, que era lo
   que habia y funcionaba. Hubo una version con <span class="rd-parks__ico">
   en position:absolute; como el <li> no era position:relative, los simbolos
   se posicionaban contra la ventana y aparecian apilados en el borde
   izquierdo de la pagina. Los spans ya no existen en el HTML. */
.rd-parks__list li.is-red  { color: var(--color-accent); font-weight: var(--fw-bold); }
.rd-parks__list li.is-blue { color: var(--blue-500); font-weight: var(--fw-bold); }
.rd-parks__list li.is-muted { color: var(--color-text-muted); }

/* Banner 25 años con corte diagonal */
.rd-bigbanner-diag { position: relative; background: #00539B; border-radius: 14px; overflow: hidden; min-height: 410px; display: flex; align-items: center; color: #fff; }
.rd-bigbanner-diag__left { position: relative; z-index: 2; width: 52%; padding: 48px 56px; }
/* El emblema ya viene en versión blanca calada (emblema-consorcio-blanco.png):
   NO aplicar filtros de color aquí o se pierde el detalle interior. */
.rd-bigbanner-diag__logo { width: 82px; height: auto; display: block; margin-bottom: 16px; }
.rd-bigbanner-diag__left h3 { font-size: 32px; line-height: 1.18; font-weight: var(--fw-bold); margin: 0 0 14px; }
.rd-bigbanner-diag__left p { font-size: 15px; line-height: 1.55; opacity: .92; margin: 0 0 28px; }
.rd-btn-white { display: inline-block; background: #fff; color: var(--color-accent); font-size: 13px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; padding: 12px 24px; border-radius: 4px; text-decoration: none; }
.rd-btn-white:hover { background: var(--red-50); color: var(--color-accent); }
.rd-bigbanner-diag__imgwrap { position: absolute; inset: 0; left: 34%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); z-index: 1; }
.rd-bigbanner-diag__img { width: 100%; height: 100%; background-size: cover; background-position: center; }
@media (max-width: 768px) {
  .rd-bigbanner-diag { flex-direction: column; min-height: 0; }
  .rd-bigbanner-diag__left { width: 100%; padding: 32px 24px; }
  .rd-bigbanner-diag__imgwrap { position: relative; inset: auto; left: auto; clip-path: none; width: 100%; height: 220px; }
}

/* Emblemas sueltos sobre el mapa (sin circulo), como la referencia del cliente */
.rd-parks__badge { position: absolute; transform: translate(-50%, -50%); height: auto; z-index: 2; filter: drop-shadow(0 2px 6px rgba(0,35,67,.18)); }

/* =====================================================================
   EDUCACIÓN Y PREVENCIÓN — ajustes contra el Figma.
   ===================================================================== */

/* Tarjetas "¿Sabías que...?": azul de marca + emblema, y variante clara */
.rd-bluecard { background: var(--blue-500); border-radius: 12px; padding: 28px 26px; }
.rd-bluecard__emblem { width: 40px; height: auto; display: block; margin: 0 0 22px; }
.rd-bluecard h3 { font-size: 20px; line-height: 1.25; margin: 0 0 14px; }
.rd-bluecard p, .rd-bluecard li { font-size: 15px; opacity: 1; }
.rd-bluecard ul { list-style: disc; margin: 0 0 14px 20px; }
.rd-bluecard--light { background: #fff; color: var(--color-text); box-shadow: 0 2px 10px rgba(15,17,19,.06); }
.rd-bluecard--light h3 { color: var(--blue-500); }
.rd-bluecard--light p, .rd-bluecard--light li { color: var(--color-text); }

/* Título de sección en rojo (Recomendaciones) */
.rd-block__title--accent { color: var(--color-accent); font-size: 22px; line-height: 1.3; max-width: 320px; }

/* Acordeón: signo + / − en lugar de chevron */
.rd-accordion summary::after { content: "+"; width: auto; height: auto; border: none; transform: none; font-size: 24px; font-weight: var(--fw-regular); line-height: 1; color: var(--blue-800); }
.rd-accordion details[open] summary::after { content: "\2212"; transform: none; }

/* Banner rojo con corte diagonal (Visitas escolares) — dos tonos de rojo */
.rd-redbanner--diag { position: relative; display: flex; align-items: center; min-height: 430px; border-radius: 12px; overflow: hidden; background: var(--color-accent); }
/* Cuña de rojo mas oscuro junto al corte, como en el Figma */
.rd-redbanner--diag::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #C1071C; clip-path: polygon(34% 0, 50% 0, 50% 100%, 46% 100%); }
.rd-redbanner--diag .rd-redbanner__text { position: relative; z-index: 3; width: 46%; max-width: 460px; padding: 48px 40px 48px 48px; }
.rd-redbanner--diag .rd-redbanner__text h3 { font-size: 30px; margin: 0 0 14px; }
.rd-redbanner--diag .rd-redbanner__text p { font-size: 15px; line-height: 1.55; margin: 0 0 14px; }
.rd-redbanner__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px; }
.rd-redbanner__ico svg { width: 40px; height: 40px; }
.rd-redbanner--diag .rd-redbanner__imgwrap { position: absolute; inset: 0; left: 34%; clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.rd-redbanner--diag .rd-redbanner__img { width: 100%; height: 100%; min-height: 0; }
.rd-redbanner--diag .rd-btn--dark { text-transform: uppercase; letter-spacing: .06em; font-size: 13px; margin-top: 6px; }
@media (max-width: 991px) {
  .rd-redbanner--diag { flex-direction: column; min-height: 0; }
  .rd-redbanner--diag::before { display: none; }
  .rd-redbanner--diag .rd-redbanner__text { width: 100%; max-width: none; padding: 32px 24px; }
  .rd-redbanner--diag .rd-redbanner__imgwrap { position: relative; inset: auto; left: auto; clip-path: none; width: 100%; height: 220px; }
}

/* Primera tarjeta destacada en azul oscuro (como el Figma) */
.rd-feature--dark { background: linear-gradient(160deg, var(--blue-900) 0%, #0a1b30 60%, #1a1230 100%); border-color: transparent; }
.rd-feature--dark h3, .rd-feature--dark .rd-feature__eyebrow, .rd-feature--dark .rd-feature__more { color: #fff; }
.rd-feature--dark .rd-feature__eyebrow { opacity: .9; }

/* Héroe con vídeo de fondo (home). El velo oscuro mantiene legible el texto. */
.rd-hero--video { position: relative; overflow: hidden; }
.rd-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.rd-hero--video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0,26,51,.78) 0%, rgba(0,26,51,.55) 55%, rgba(0,26,51,.35) 100%); }
.rd-hero--video .rd-hero__inner { position: relative; z-index: 2; }
/* Si el usuario prefiere menos movimiento, ocultamos el vídeo y queda la foto. */
@media (prefers-reduced-motion: reduce) { .rd-hero__video { display: none; } }

/* =====================================================================
   VISITAS ESCOLARES / prosa — colores y tamaños del Figma.
   ===================================================================== */

/* Cuerpo de texto: el Figma usa 14-15px, no 18px */
.rd-article__main.rd-prose { font-size: 14.5px; line-height: 1.6; max-width: 640px; }
.rd-article__main.rd-prose p { margin: 0 0 14px; }
.rd-article__main.rd-prose ul { margin: 0 0 14px 20px; }
.rd-article__main.rd-prose li { margin-bottom: 4px; }
.rd-article__main.rd-prose ul ul { margin-top: 4px; }
/* Títulos de bloque "» ..." en AZUL y a 18px (no navy grande) */
.rd-article__main.rd-prose h2 { font-size: 18px; line-height: 1.3; font-weight: var(--fw-medium); color: var(--blue-500); margin: 30px 0 12px; }
/* Título principal de la sección: dos líneas, tamaño del Figma */
.rd-article__main .rd-section__title { font-size: 30px; line-height: 1.2; max-width: 460px; }

/* Enlace a documento: en AZUL (el rojo no corresponde al Figma) */
.rd-doclink__icon { color: var(--blue-500); }
.rd-doclink__label { color: var(--blue-500); font-weight: var(--fw-medium); }
.rd-doclink__arrow { color: var(--blue-500); border: 1px solid var(--color-border); border-radius: 50%; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.rd-prose a.rd-doclink, .rd-prose .rd-doclink { color: var(--blue-500); }
.rd-doclink:hover { border-color: var(--blue-500); }

/* Caja de información lateral: icono en línea con el primer rótulo */
.rd-infobox { padding: 20px 22px; }
.rd-infobox__icon { background: none; color: var(--blue-500); border: 1.5px solid var(--blue-500); width: 18px; height: 18px; font-size: 11px; margin: 0 8px 0 0; vertical-align: 2px; }
.rd-infobox__label { font-size: 13.5px; color: var(--blue-500); font-weight: var(--fw-bold); }
.rd-infobox__value { font-size: 13.5px; line-height: 1.45; margin: 0 0 12px; }

/* =====================================================================
   ACTUALIDAD — Medios y prensa + ajustes del Figma.
   ===================================================================== */
.rd-mediasec { background: #F2F7FC; }
.rd-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.rd-media .rd-mediacard { position: relative; display: block; min-height: 0; background: none; border-radius: 0; overflow: visible; text-decoration: none; }
.rd-mediacard__media { height: 190px; background-size: cover; background-position: center; }
.rd-media .rd-mediacard__box { position: relative; margin: -54px 0 0 12px; background: var(--blue-500); border-left: 4px solid var(--color-accent); padding: 18px 20px; color: #fff; display: block; }
.rd-media .rd-mediacard__title { font-size: 14.5px; font-weight: var(--fw-semibold); line-height: 1.35; margin: 0 0 10px; padding-right: 44px; }
.rd-mediacard__source { font-size: 13px; opacity: .9; }
.rd-media .rd-mediacard__arrow { position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: flex; align-items: center; justify-content: center; color: #fff; }
.rd-media .rd-mediacard__arrow svg { width: 15px; height: 15px; }
.rd-mediacard:hover .rd-mediacard__arrow { background: rgba(255,255,255,.15); }
@media (max-width: 900px) { .rd-media { grid-template-columns: 1fr; } }

/* Aviso del Gabinete: caja clara con icono de contorno (como el Figma) */
.rd-page .rd-callout { background: #fff; border: 1px solid var(--color-border); font-size: 13.5px; line-height: 1.5; }
.rd-page .rd-callout__icon { background: none; color: var(--blue-500); border: 1.5px solid var(--blue-500); font-size: 11px; width: 18px; height: 18px; }

/* Carrusel de Actualidad: puntos dentro de la foto, como el diseño */
.rd-page > .rd-container > .rd-carousel .rd-carousel__dots { bottom: 22px; }

/* ---- Carrusel de Actualidad: mismo tratamiento que el héroe de la home ---- */
.rd-page .rd-carousel { border-radius: 0; }
.rd-page .rd-carousel__slide a { min-height: 470px; display: flex; align-items: center; }
/* Degradado lateral (como el hero de inicio), no solo por abajo */
.rd-page .rd-carousel__slide a::before { background: linear-gradient(90deg, rgba(0,26,51,.88) 0%, rgba(0,26,51,.62) 48%, rgba(0,26,51,.32) 100%); }
.rd-page .rd-carousel__caption { position: relative; bottom: auto; padding: 0 56px; max-width: 720px; }
.rd-page .rd-carousel__caption .rd-carousel__bc { position: absolute; top: -140px; left: 56px; font-size: 13px; opacity: .85; margin: 0; }
.rd-page .rd-carousel__caption h2 { font-size: 34px; line-height: 1.25; font-weight: var(--fw-bold); }
/* Flechas: círculo de contorno blanco, abajo a los lados */
.rd-page .rd-carousel__btn { top: auto; bottom: 28px; transform: none; width: 42px; height: 42px; background: transparent; border: 1.5px solid rgba(255,255,255,.75); }
.rd-page .rd-carousel__btn:hover { background: rgba(255,255,255,.18); }
.rd-page .rd-carousel__btn--prev { left: 28px; }
.rd-page .rd-carousel__btn--next { right: 28px; }
/* Puntos dentro de la foto */
.rd-page .rd-carousel__dots { bottom: 40px; }
.rd-page .rd-carousel__dot { background: rgba(255,255,255,.55); }
.rd-page .rd-carousel__dot.is-active { background: var(--color-accent); }
@media (max-width: 768px) {
  .rd-page .rd-carousel__slide a { min-height: 340px; }
  .rd-page .rd-carousel__caption { padding: 0 24px; }
  .rd-page .rd-carousel__caption h2 { font-size: 24px; }
  .rd-page .rd-carousel__caption .rd-carousel__bc { top: -96px; left: 24px; }
}

/* =====================================================================
   CONTACTO — ambas columnas arrancan a la misma altura + estilos del Figma.
   ===================================================================== */
/* El aviso del Gabinete "cuelga" por encima para que "Cómo encontrarnos"
   y el título del formulario queden alineados en la misma línea base. */
.rd-contact-info__callout { margin-bottom: 46px; }
.rd-contact-info__title { font-size: 18px; font-weight: var(--fw-medium); color: var(--color-primary-dark); margin: 0 0 22px; }
.rd-contact-info__title::before { content: "\00BB\00A0"; color: var(--color-primary-dark); }
/* Etiqueta en gris oscuro normal y VALOR en azul (como el Figma) */
.rd-contact-info__label { font-size: 14px; font-weight: var(--fw-regular); letter-spacing: 0; text-transform: none; color: var(--color-text); margin: 0 0 4px; }
.rd-contact-info__value { font-size: 14.5px; color: var(--blue-500); }
.rd-contact-info__value a { color: var(--blue-500); }
.rd-contact-info__item { margin-bottom: 20px; }
/* Tarjeta del formulario: el eyebrow y el título van FUERA del recuadro gris */
.rd-form__card { background: none; border: none; padding: 0; }
.rd-form__card .rd-eyebrow { margin-bottom: 6px; }
.rd-form__title { font-size: 30px; margin: 0 0 20px; }
.rd-form__card .rd-form { background: var(--black-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px; }
@media (max-width: 991px) {
  .rd-contact-info__callout { margin-bottom: 28px; }
}

/* =====================================================================
   TITULARES DE CABECERA — detalles finos contra el Figma.
   El h1 grande (48px Bold) es solo para el héroe de INICIO. En las
   páginas internas el Figma usa un titular menor y en Semibold.
   ===================================================================== */
.rd-hero:not(.rd-hero--overlay) h1 {
  font-size: 36px;
  line-height: 1.28;
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
  max-width: 660px;
  margin: 0;
}
/* Eyebrow de cabecera: más pequeño, más espaciado y en blanco sobre foto */
.rd-hero .rd-eyebrow {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: .14em;
  color: #fff;
  margin: 0 0 14px;
}
/* Bloque "+25 años": el Figma lo usa en Medium, no en Bold */
.rd-figures__left h3 { font-size: 28px; font-weight: var(--fw-medium); line-height: 1.25; }
.rd-figures__left .rd-eyebrow { font-size: 12px; letter-spacing: .14em; font-weight: var(--fw-semibold); }

@media (max-width: 768px) {
  .rd-hero:not(.rd-hero--overlay) h1 { font-size: 26px; }
  .rd-figures__left h3 { font-size: 23px; }
}

/* Carrusel de Actualidad a TODO el ancho (como el héroe de inicio).
   El texto interior se alinea con el contenedor del resto de la página. */
.rd-carousel--full { width: 100%; margin: 0 0 34px; border-radius: 0; }
.rd-page .rd-carousel--full .rd-carousel__caption { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; width: 100%; }
.rd-page .rd-carousel--full .rd-carousel__caption .rd-carousel__bc { left: 24px; }
.rd-page .rd-carousel--full .rd-carousel__btn--prev { left: max(28px, calc((100% - var(--container-max)) / 2 + 24px)); }
.rd-page .rd-carousel--full .rd-carousel__btn--next { right: max(28px, calc((100% - var(--container-max)) / 2 + 24px)); }
/* La página de Actualidad ya no lleva miga propia: el carrusel arranca arriba */
.rd-page:has(.rd-carousel--full) { padding-top: 0; }

/* =====================================================================
   MEDIDAS FIGMA (base 1440): hero de vídeo y barra principal.
   ===================================================================== */

/* Hero: 892px de alto, esquinas rectas. */
.rd-hero--video { height: 892px; border-radius: 0; }
/* Contenedor del hero (Main feature container del Figma): 1120 de ancho
   -alineado con la barra de navegacion-, 442 de alto de contenido y 241px
   por arriba = los 96 que deja la cabecera + los 145 del contenedor.
   Los textos dentro no pasan de 544 (Feature container). */
.rd-hero--video .rd-hero__inner {
  box-sizing: content-box; width: 1120px; max-width: calc(100% - 32px);
  height: 442px; padding: 241px 0 40px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
.rd-hero--video .rd-hero__inner > * { max-width: 544px; }
@media (max-width: 991px) {
  .rd-hero--video, .rd-hero--video .rd-hero__inner { height: auto; }
  .rd-hero--video .rd-hero__inner { padding-top: 120px; }
}
@media (max-width: 767px) { .rd-hero--video .rd-hero__inner { padding-top: 56px; padding-bottom: 96px; } }

/* Barra principal: 96px de alto y 160px de margen lateral. */
.rd-navbar__inner { height: 96px; max-width: 1440px; padding: 0 160px; }
@media (max-width: 1199px) { .rd-navbar__inner { padding: 0 var(--space-md); } }
@media (max-width: 991px) { .rd-navbar__inner { height: auto; padding: 12px var(--space-md); } }

/* Ítems del menú (top-bar__item): alto completo de la barra, 16/12 de
   relleno y 4px entre etiqueta y chevron. Solo escritorio: en móvil el
   menú es un desplegable apilado. */
@media (min-width: 992px) {
  .rd-nav__list > li > a,
  .rd-nav summary { box-sizing: border-box; height: 96px; padding: 16px 12px; gap: 4px; }
}

/* Escudo (escudo-bt-color-fondo-color): caja de 96px con 8px arriba y
   abajo, es decir logo de 80px de alto. */
@media (min-width: 992px) {
  .rd-logo { height: 96px; padding: 8px 0; box-sizing: border-box; }
  .rd-logo img { height: 80px; }
}

/* Estado Focus del menu: fondo gris con sombra interior. Mantiene el
   contorno del navegador (no lo quitamos: es el indicador accesible). */
.rd-nav__list > li > a:focus-visible,
.rd-nav summary:focus-visible {
  background: #F7F7F7; box-shadow: inset 0 1px 4px rgba(0,0,0,.05);
  color: var(--color-primary);
}
/* Sobre el hero el texto del menu es blanco: al enfocar hay que pasarlo a
   azul o no se leeria sobre el gris. */
.rd-header--overlay .rd-nav__list > li > a:focus-visible,
.rd-header--overlay .rd-nav summary:focus-visible { color: var(--color-primary); }

/* =====================================================================
   SUBMENU "Bomberos de Tenerife": tarjeta de 536px con rotulo y enlaces
   de titulo + descripcion, repartidos en columnas de 3 como maximo.
   ===================================================================== */
.rd-submenu__label {
  font-size: 13px; line-height: 18px; font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--black-200);
}
.rd-submenu--rich a { display: flex; flex-direction: column; gap: 4px; padding: 0; border-radius: 0; background: none; }
.rd-submenu--rich a:hover { background: none; }
.rd-submenu__t { font-size: 16px; line-height: 1.5; font-weight: var(--fw-medium); color: var(--color-primary-dark); }
.rd-submenu__d { font-size: 14px; line-height: 1.5; font-weight: var(--fw-regular); color: var(--color-primary); }

/* La tarjeta a dos columnas solo en escritorio: en movil el submenu es la
   lista apilada de siempre. */
@media (min-width: 992px) {
  .rd-submenu--rich {
    position: relative; width: 536px; min-width: 0; padding: 32px; border-radius: var(--radius-md);
    display: grid; grid-auto-flow: column;
    grid-template-columns: repeat(2, 220px); grid-template-rows: auto repeat(3, auto);
    column-gap: 32px; row-gap: 20px;
  }
  /* Pico que apunta al item del menu: cuadrado girado de 17px = 24x11 visibles. */
  .rd-submenu--rich::after {
    content: ""; position: absolute; top: -7.5px; left: 40px; width: 17px; height: 17px;
    background: var(--white); border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
    transform: rotate(45deg);
  }
  /* La regla de hover pone display:block con mas peso: hay que repetirla. */
  .rd-nav__item--has-sub:hover > details > .rd-submenu--rich { display: grid; }
  /* El rotulo ocupa las dos columnas; la rejilla separa 20px y el Figma 10. */
  .rd-submenu__label { grid-column: 1 / -1; margin-bottom: -10px; }
}
/* =====================================================================
   MENU: estado hover propio. Bootstrap trae un `a:hover{color:#E74C3C}`
   global (rojo naranja, no el de marca) cuyo subrayado ademas desplazaba
   el texto. Aqui el hover es fondo red-500 #E40520 con texto blanco.
   ===================================================================== */
.rd-nav__list > li > a:hover,
.rd-nav summary:hover,
.rd-header--overlay .rd-nav__list > li > a:hover,
.rd-header--overlay .rd-nav summary:hover,
.rd-header--overlay.is-solid .rd-nav__list > li > a:hover,
.rd-header--overlay.is-solid .rd-nav summary:hover {
  background: var(--color-accent); box-shadow: none;
  color: #fff; opacity: 1; text-decoration: none;
}
/* Enlaces del submenu: el unico movimiento es un desplazamiento de 8px a la
   derecha al pasar el raton (el padding/margin se fijan para que no lo mueva
   nada mas). */
.rd-submenu--rich a,
.rd-submenu--rich a:hover,
.rd-submenu--rich a:focus {
  padding: 0; margin: 0; text-decoration: none;
  transform: none; transition: transform .15s ease;
}
.rd-submenu--rich a:hover { transform: translateX(8px); }
.rd-submenu--rich a:hover .rd-submenu__t,
.rd-submenu--rich a:hover .rd-submenu__d { color: var(--color-accent); }

/* El submenu cuelga centrado bajo su elemento del menu, con el pico en medio. */
@media (min-width: 992px) {
  .rd-nav details > .rd-submenu--rich { left: 50%; transform: translateX(-50%); }
  .rd-submenu--rich::after { left: 50%; margin-left: -8.5px; }
}

/* Elemento del menu correspondiente a la pagina actual. El hover manda sobre
   el activo, por eso se repite despues con mas peso. */
.rd-nav__list > li > a.is-active,
.rd-nav summary.is-active { background: #F7F7F7; color: var(--color-primary); }
.rd-nav__list > li > a.is-active:hover,
.rd-nav summary.is-active:hover { background: var(--color-accent); color: #fff; }
/* En la home la cabecera va superpuesta al hero: mientras siga transparente,
   el activo tampoco pinta fondo. Aparece al desplazarse (.is-solid). */
.rd-header--overlay:not(.is-solid) .rd-nav__list > li > a.is-active,
.rd-header--overlay:not(.is-solid) .rd-nav summary.is-active { background: none; color: #fff; }

/* La barra utilitaria comparte caja con la barra principal, y suma los 12px
   de relleno del item del menu para que "Correo web" caiga justo encima del
   texto de "Contacto". */
.rd-utilitybar__inner { max-width: 1440px; padding-left: 160px; padding-right: 172px; }
@media (max-width: 1199px) { .rd-utilitybar__inner { padding-left: var(--space-md); padding-right: calc(var(--space-md) + 12px); } }

/* La pastilla de ALERTA solo se muestra en movil. */
@media (min-width: 992px) { .rd-alerta { display: none; } }

/* Titular del hero: Barlow Medium 48/120%. Se mantiene var(--fs-h2) (ya vale
   48px y baja a 32 en pantallas pequenas) y se corrigen peso, interlineado y
   el espaciado entre letras, que iba en negativa. */
.rd-hero--video h1 { font-size: var(--fs-h2); line-height: 1.2; font-weight: var(--fw-medium); letter-spacing: 0; }

/* =====================================================================
   ACCESOS RAPIDOS (Inner section container + procedures-access__link).
   El contenedor es blanco, sin borde ni sombra; dentro van las tres
   pastillas con su propio fondo y radio.
   Los 16px de separacion salen de la cuenta del Figma: 3x362,67 + 2x16 = 1120.
   ===================================================================== */
.rd-quick {
  gap: 16px; padding: 16px; background: #fff; box-shadow: none;
  border: none; border-radius: var(--radius-lg);
}
.rd-quick__card + .rd-quick__card { border-left: none; }
.rd-quick__card {
  box-sizing: border-box; height: 104px; padding: 16px;
  background: #FAFAFA; border-radius: 4px;
}
/* Sin subrayado (Bootstrap lo pone con su a:hover global) y con borde
   inferior azul al pasar el raton. El borde transparente de base evita que
   el contenido baile al aparecer. */
.rd-quick__card, .rd-quick__card:hover { text-decoration: none; }
.rd-quick__card { border-bottom: 2px solid transparent; }
/* Solo el subrayado azul al pasar el raton: el fondo NO cambia.
   Repetimos el fondo base para anular la regla antigua de mas arriba
   (.rd-quick__card:hover { background: var(--black-50) }). */
.rd-quick__card:hover { background: #FAFAFA; border-bottom-color: var(--color-primary); }
.rd-quick__body { gap: 12px; max-width: 247px; }
.rd-quick__card h3 { font-size: 18px; line-height: 28px; font-weight: var(--fw-semibold); }
.rd-quick__card p { font-size: 16px; line-height: 22px; }

/* Cabecera de seccion (antetitulo + titular), medidas del Figma. Afecta a
   todas las secciones que usan este par, no solo a "Ultimas noticias". */
.rd-eyebrow {
  font-size: 18px; line-height: 1.2; font-weight: var(--fw-medium);
  letter-spacing: 0; text-transform: none;
}
.rd-section__title {
  font-size: 28px; line-height: 32px; font-weight: var(--fw-medium);
  letter-spacing: -.0175em;
}

/* =====================================================================
   TARJETA DE NOTICIA (new__card 352x285, radio 8, gap 12).
   La foto va posicionada (151px de alto, los 163 de padding-top de la
   tarjeta = 151 + 12 de gap) para poder crecer hasta cubrir la tarjeta
   entera al pasar el raton sin descolocar el texto.
   ===================================================================== */
.rd-news { gap: 32px; }
.rd-news__card {
  position: relative; display: block; padding-top: 163px;
  min-height: 285px; border-radius: 8px; background: #FAFAFA; overflow: hidden;
}
.rd-news__media {
  position: absolute; top: 0; left: 0; right: 0; height: 151px;
  aspect-ratio: auto; border-radius: 8px 8px 0 0;
  transition: height .25s ease, border-radius .25s ease;
}
/* Velo azul (#00234333) para que la etiqueta y, en hover, el texto se lean
   sobre cualquier foto. */
.rd-news__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,35,67,0) 0%, rgba(0,35,67,.2) 100%);
}
.rd-news__tag { z-index: 1; }
.rd-news__body {
  position: relative; z-index: 1; box-sizing: border-box;
  min-height: 122px; padding: 0 16px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.rd-news__date, .rd-news__title, .rd-news__more { margin: 0; }
.rd-news__title { font-size: 16px; line-height: 22px; font-weight: var(--fw-regular); }
/* Boton "Leer mas": 110x32 y en azul oscuro, no en rojo. */
.rd-news__more {
  box-sizing: border-box; margin-top: auto; width: 110px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; line-height: 31.95px; letter-spacing: -.011em;
  font-weight: var(--fw-regular); color: var(--color-primary-dark);
}
/* Al pasar el raton la foto cubre la tarjeta y el texto pasa a blanco. */
.rd-news__card:hover .rd-news__media { height: 100%; border-radius: 8px; }
/* Con la foto cubriendo la tarjeta, un degradado oscuro (en lugar del
   desenfoque) mantiene legible el texto blanco SIN emborronar la foto. */
.rd-news__card:hover .rd-news__media::after {
  background: linear-gradient(180deg, rgba(0,20,40,.15) 0%, rgba(0,20,40,.55) 45%, rgba(0,20,40,.88) 100%);
}
.rd-news__card:hover .rd-news__date,
.rd-news__card:hover .rd-news__title,
.rd-news__card:hover .rd-news__more { color: #fff; }
/* Con la foto a tarjeta completa la etiqueta de categoria sobra. */
.rd-news__card:hover .rd-news__tag { display: none; }

/* Bloque de mision a ancho completo: cada mitad redondea solo el lado que
   da al centro; el que sale por el borde de la pantalla va recto. */
.rd-mission--float .rd-mission__red { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.rd-mission--float .rd-mission__dark { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
/* "Ver informacion" de las tarjetas: azul oscuro, no rojo. */
.rd-feature__more { color: var(--color-primary-dark); }

/* =====================================================================
   PIE: iconos de redes y logos institucionales en el mismo azul.
   Los iconos pasan a SVG (los PNG venian con estilos distintos entre si).
   Los logos se tinen con mascara: el PNG hace de silueta y el color lo
   pone el fondo, asi coinciden exactamente con los iconos.
   ===================================================================== */
.rd-footer__social { gap: 8px; }
/* El glifo iba gris: .rd-footer a pesa mas que el color del icono. */
.rd-footer__social .rd-social__ico,
.rd-footer__social .rd-social__ico:hover { color: #fff; }
.rd-footer__social .rd-social__ico { width: 24px; height: 24px; border-radius: 4px; background: var(--color-primary-dark); }
.rd-footer__social .rd-social__ico svg { width: 14px; height: 14px; }
.rd-footer__social .rd-social__ico:hover { background: var(--blue-800); }
/* Silueta en #002343: la mascara recorta con el PNG y el color lo pone el
   fondo. Va en un <span>, no en un <img>: en una imagen el bitmap tapa el
   fondo y seguirian viendose sus colores. */
.rd-footer__logo {
  display: block; height: 52px; background: var(--color-primary-dark);
  -webkit-mask: var(--rd-logo) center / contain no-repeat;
  mask: var(--rd-logo) center / contain no-repeat;
}
.rd-footer__logo--gobcan { width: 112px; --rd-logo: url("../img/gobiernodecanarias.png"); }
.rd-footer__logo--cabildo { width: 42px; --rd-logo: url("../img/logotipo_cabildo_tenerife.png"); }

/* Antetitulo del hero: en mayusculas y SemiBold (el resto de secciones lo
   lleva en caja normal y Medium). El 18/120% ya viene de .rd-eyebrow. */
.rd-hero .rd-eyebrow { text-transform: uppercase; font-weight: var(--fw-semibold); }
/* Boton "Conócenos" del hero: 16/120% SemiBold sin tracking (el resto de
   pastillas sigue con 13px, bold y letra espaciada). */
.rd-hero__cta { font-size: 16px; line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: 0; }
/* "Conócenos" y su frase van juntos: al repartir el hero con space-between,
   sueltos les tocaba el mismo hueco enorme que al resto. Agrupados, el
   reparto solo afecta a antetitulo, titular y este bloque. */
.rd-hero__cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rd-hero__cta-group .rd-hero__cta { margin-bottom: 0; }

/* =====================================================================
   HISTORIA — galería de tres fotos (foto grande + dos apiladas).
   ===================================================================== */
.rd-histgal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0 44px; align-items: start; }
.rd-histgal__col { display: grid; grid-template-rows: auto auto; gap: 20px; }
.rd-histgal figure { margin: 0; border-radius: 8px; overflow: hidden; }
.rd-histgal img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rd-histgal__main img { aspect-ratio: 554 / 510; }
.rd-histgal__col figure:first-child img { aspect-ratio: 552 / 221; }
.rd-histgal__col figure:last-child img  { aspect-ratio: 552 / 278; }
@media (max-width: 768px) { .rd-histgal { grid-template-columns: 1fr; } }

/* =====================================================================
   Sin subrayado al pasar el raton sobre tarjetas y enlaces de bloque.
   Bootstrap define `a:hover { text-decoration: underline }`, que pesa mas
   que el `text-decoration: none` de cada componente y hacia reaparecer la
   linea (en rojo) sobre titulos y textos de las tarjetas.
   ===================================================================== */
.rd-scope a.rd-feature,        .rd-scope a.rd-feature:hover,        .rd-scope a.rd-feature:focus,
.rd-scope a.rd-news__card,     .rd-scope a.rd-news__card:hover,     .rd-scope a.rd-news__card:focus,
.rd-scope a.rd-mediacard,      .rd-scope a.rd-mediacard:hover,      .rd-scope a.rd-mediacard:focus,
.rd-scope a.rd-quick__card,    .rd-scope a.rd-quick__card:hover,    .rd-scope a.rd-quick__card:focus,
.rd-scope a.rd-doclink,        .rd-scope a.rd-doclink:hover,        .rd-scope a.rd-doclink:focus,
.rd-scope a.rd-btn,            .rd-scope a.rd-btn:hover,            .rd-scope a.rd-btn:focus,
.rd-scope .rd-carousel__slide a, .rd-scope .rd-carousel__slide a:hover {
  text-decoration: none;
}
/* Y tampoco en el texto de dentro (titulos, antetitulos, "Ver informacion") */
.rd-scope a.rd-feature:hover *,
.rd-scope a.rd-news__card:hover *,
.rd-scope a.rd-mediacard:hover *,
.rd-scope a.rd-quick__card:hover * {
  text-decoration: none;
}

/* =====================================================================
   LOGO DEL CABILDO en el extremo derecho de la barra principal.
   Con un logo a cada lado, el menu queda centrado de verdad: los dos
   extremos ocupan el mismo ancho (flex-basis igual) y el nav se lleva
   el espacio sobrante, centrandose entre ambos.
   ===================================================================== */
.rd-cabildo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rd-cabildo img { height: 62px; width: auto; display: block; }
/* Los dos extremos reparten el mismo espacio (flex: 1 1 0) aunque los
   logos midan distinto; asi el menu queda centrado en la pagina. */
.rd-navbar__inner > .rd-logo    { flex: 1 1 0; justify-content: flex-start; }
.rd-navbar__inner > .rd-cabildo { flex: 1 1 0; justify-content: flex-end; }
.rd-navbar__inner > .rd-nav     { flex: 0 0 auto; }

@media (max-width: 991px) {
  /* En movil el menu se despliega en vertical: el logo del Cabildo estorba. */
  .rd-cabildo { display: none; }
}

/* =====================================================================
   MENU MOVIL — correcciones 11, 12 y 13 de las notas del Figma.
   ===================================================================== */
@media (max-width: 991px) {

  /* (11) La hamburguesa se convierte en una "X" mientras el menu esta
     abierto, para que sirva ademas de boton de cerrar. Es el <label> del
     checkbox, asi que pulsarla ya cerraba: lo que faltaba era que se
     VIERA como una X y que quedara por encima del menu desplegado. */
  .rd-hamburger {
    position: relative; z-index: 3;
    width: 42px; height: 42px; padding: 0;
    align-items: center; justify-content: center;
  }
  .rd-hamburger span { transition: transform .2s ease, opacity .15s ease; }
  /* gap 5px + barra 2px = 7px de separacion entre ejes de barra. */
  .rd-nav-toggle:checked ~ .rd-hamburger span:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
  .rd-nav-toggle:checked ~ .rd-hamburger span:nth-child(2) { opacity: 0; }
  .rd-nav-toggle:checked ~ .rd-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* (12) y (13) Las entradas del menu eran inline-flex: ocupaban solo el
     ancho de su texto, de modo que el chevron quedaba pegado a la palabra
     y el recuadro de foco no llegaba al borde. Pasan a ocupar la fila
     completa, con el chevron alineado a la derecha. */
  .rd-nav__list > li > a,
  .rd-nav summary {
    display: flex; width: 100%; box-sizing: border-box;
    align-items: center; justify-content: space-between;
  }
  .rd-nav summary::after { flex: 0 0 auto; margin-right: 8px; }

  /* (13) Lo mismo para los enlaces del submenu: el foco debe cubrir toda
     la fila, no solo el texto. */
  .rd-submenu { padding-left: 0; }
  .rd-submenu a,
  .rd-submenu--rich a {
    display: flex; width: 100%; box-sizing: border-box;
    padding: 12px 8px 12px 16px;
  }
  .rd-submenu--rich a { flex-direction: column; }
}

/* =====================================================================
   MISION + CIFRAS (nota 21 del Figma): el bloque de tarjetas debe medir
   lo mismo de alto que la columna de texto de al lado.
   El contenedor tiene align-items:start, asi que la columna de tarjetas
   solo ocupaba su alto natural (lo marcaba el aspect-ratio de cada
   tarjeta). Ahora se estira hasta el alto de la fila y las dos filas de
   tarjetas se reparten ese alto a partes iguales.
   ===================================================================== */
.rd-mission2--equal { align-items: stretch; }
.rd-mission2--equal > .rd-statcards {
  align-self: stretch; height: 100%;
  grid-template-rows: 1fr 1fr;
}
/* El aspect-ratio fijaba el alto de cada tarjeta: estorba cuando el alto
   lo tiene que marcar la fila. */
.rd-mission2--equal > .rd-statcards > .rd-statcard { aspect-ratio: auto; }

@media (max-width: 991px) {
  /* Apiladas en movil no hay columna de texto con la que igualar: se
     recupera la proporcion original para que no queden aplastadas. */
  .rd-mission2--equal { align-items: start; }
  .rd-mission2--equal > .rd-statcards { height: auto; grid-template-rows: auto auto; }
  .rd-mission2--equal > .rd-statcards > .rd-statcard { aspect-ratio: 1.7 / 1; }
}

/* =====================================================================
   VISTA MOVIL DEL INICIO — notas 14, 15, 17 y 18 del Figma.
   ===================================================================== */

/* (14a) Hamburguesa en BLANCO sobre el hero. Las barras usaban el color de
   texto (casi negro) y en la portada la barra es azul marino, asi que el
   icono practicamente no se veia. Al hacer scroll la cabecera pasa a fondo
   blanco (.is-solid) y entonces vuelven a ser oscuras. */
.rd-header--overlay .rd-hamburger span { background: #fff; }
.rd-header--overlay.is-solid .rd-hamburger span { background: var(--color-text); }

/* Boton "Cargar mas publicaciones": solo existe en movil. Se declara aqui,
   ANTES del media query, para que la regla de movil pueda sobreescribirlo. */
.rd-social__more { display: none; }

@media (max-width: 991px) {

  /* (14b) En movil se ve una tarjeta cada vez, cortada por el borde derecho
     para que se note que hay mas. El resto del carrusel esta fuera de este
     media query, porque ahora funciona tambien en escritorio. */
  .rd-quick__card { flex: 0 0 78%; }

  /* (15) Bloque Mision al reves: primero la tarjeta azul oscura y debajo la
     roja (en escritorio la azul flota sobre la roja). */
  .rd-mission--float { display: flex; flex-direction: column-reverse; }
  .rd-mission--float .rd-mission__dark { margin-top: 0; margin-bottom: 20px; }

  /* (17) Banner "+25 anos" a ancho completo: se anula el contenedor para que
     la foto llegue de borde a borde. El texto conserva su propio margen. */
  .rd-figures-sec > .rd-container {
    max-width: none; width: 100%; padding-left: 0; padding-right: 0;
  }
  .rd-figures__photo-wrap { border-radius: 0; }
  .rd-figures__photo { border-radius: 0; }

  /* (18) Feed de redes: se muestra solo una altura inicial y el resto se
     despliega con el boton. La clase is-expanded la pone rediseno.js. */
  .rd-social__feed { position: relative; max-height: 720px; overflow: hidden; }
  .rd-social__feed.is-expanded { max-height: none; }
  /* Degradado para que el corte no parezca un fallo de carga. */
  .rd-social__feed::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 85%);
    pointer-events: none;
  }
  .rd-social__feed.is-expanded::after { display: none; }
  .rd-social__more { display: flex; justify-content: center; margin-top: 20px; }
}

/* =====================================================================
   NOTAS 2, 4, 6 y 8 DEL FIGMA (escritorio).
   ===================================================================== */

/* (4 y 16) Las tarjetas destacadas van con fondo #FAFAFA, no blanco. La nota
   de escritorio da el hexadecimal exacto; la de movil pedia lo mismo. */
.rd-feature { background: #FAFAFA; }

/* (2) Bloque Mision a ancho completo. El contenedor lo sustituye este
   envoltorio: a partir de 992px ocupa todo el ancho de la ventana y por
   debajo se comporta igual que .rd-container, para no alterar el movil. */
.rd-mission-bleed { width: 100%; }
@media (max-width: 991px) {
  .rd-mission-bleed {
    max-width: var(--container-max); margin-inline: auto;
    padding-inline: var(--space-md);
  }
}
@media (min-width: 992px) {
  /* Medido sobre la maqueta: con lienzo de 1440, el rojo ocupa 1188px
     (82,5%) y la tarjeta oscura 704px (49%) pegada al borde derecho. */
  .rd-mission--float .rd-mission__red { width: 82.5%; }
  .rd-mission--float .rd-mission__dark { width: 49%; }
  /* El bloque rojo sangra hasta el borde, pero su TEXTO sigue alineado con
     el resto de la pagina: el padding izquierdo reproduce el margen del
     contenedor (y nunca baja de su padding normal en pantallas estrechas). */
  .rd-mission--float .rd-mission__red {
    padding-left: calc(max(0px, (100% - var(--container-max)) / 2) + var(--space-md) + 28px);
  }
}

/* (6) El contenedor de cifras ocupa 5 columnas de la rejilla de 12:
   40% de 1120 = 448px (medido en la maqueta: ~441px). */
@media (min-width: 992px) {
  .rd-figures__stats { width: 40%; }
}

/* (8) Separacion de los iconos sociales del pie. En el Figma el hueco mide
   la mitad del icono (19px de icono con 9-10px de hueco); con los nuestros
   de 24px son 12px. Estaba en 8px, apretado al anadir YouTube. */
.rd-footer__social { gap: 12px; }

/* (7) Feed de redes: el Figma pide 4 columnas x 2 filas. El widget de
   SociableKit pinta 3 columnas, asi que -siguiendo su recomendacion- se
   queda en 3 columnas pero solo 2 filas. Lo recorta rediseno.js, porque el
   widget llega despues de cargar la pagina. */

/* =====================================================================
   FUERA EL GRIS DE BANDA (#F4F5F6)
   ---------------------------------------------------------------------
   Peticion del cliente: no quiere ese gris ni en escritorio ni en movil.
   Afecta a las secciones alternas (Mision, +25 anos, Medios y prensa,
   Educacion y prevencion) y al pie. Aplica a todas las paginas porque
   ambas reglas son globales; no hace falta tocar el HTML.

   OJO, lo que NO se toca a proposito:
   - El #FAFAFA de las tarjetas: lo pide el Figma en la nota 4.
   - La barra superior, los chips, las fichas de formulario y demas usos
     de --black-50: no entran en la queja y tienen su propia funcion.
   Para revertirlo basta con borrar estas dos reglas.
   ===================================================================== */
.rd-section--alt { background: #fff; }
.rd-footer       { background: #fff; }

/* =====================================================================
   NOTA 5 (primera mitad): la cinta se anima en el eje X, de derecha a
   izquierda. La pista lleva la secuencia repetida dos veces, asi que
   desplazarla un 50% equivale a una secuencia entera: al reiniciarse,
   el fotograma es identico y el bucle resulta continuo.
   Queda pendiente la segunda mitad de la nota: sustituir el separador
   por el icono SVG de la sirena, que aun no tenemos.
   ===================================================================== */
@keyframes rd-ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.rd-ribbon__track {
  animation: rd-ribbon-scroll 60s linear infinite;
  will-change: transform;
}
/* Accesibilidad: quien pide menos movimiento en su sistema ve la cinta
   quieta. Es obligatorio en webs de administraciones publicas. */
@media (prefers-reduced-motion: reduce) {
  .rd-ribbon__track { animation: none; }
}

/* =====================================================================
   NOTA 3: iconos de las tarjetas destacadas, exportados del Figma.
   Son monocromos, asi que se usan como MASCARA: el archivo recorta la
   silueta y el color lo pone `background`, que hereda el blanco de
   .rd-ico. De ese modo el mismo archivo sirve para cualquier color y no
   hay que tocar el SVG.
   ===================================================================== */
.rd-ico--local-fire,
.rd-ico--fire-hydrant,
.rd-ico--account-tree { position: relative; }
.rd-ico--local-fire::before,
.rd-ico--fire-hydrant::before,
.rd-ico--account-tree::before {
  content: ""; display: block; width: 24px; height: 24px;
  background: currentColor;
  -webkit-mask: var(--rd-ico) center / contain no-repeat;
          mask: var(--rd-ico) center / contain no-repeat;
}
.rd-ico--local-fire   { --rd-ico: url("../img/icon-local-fire.svg"); }
.rd-ico--fire-hydrant { --rd-ico: url("../img/icon-fire-hydrant.svg"); }
.rd-ico--account-tree { --rd-ico: url("../img/icon-account-tree.svg"); }

/* =====================================================================
   TARJETAS DESTACADAS — medidas exactas leidas del Figma (card--consorcio).
   No son notas del documento, pero son diferencias reales con la maqueta.
   Figma: 352x342, radio 12, relleno 32, SIN borde; circulo de 56 (relleno
   16 + icono 24); separacion icono-texto 80; antetitulo Barlow Medium
   18/24 en red-600; titulo SemiBold 24/30; enlace Medium 16/22 subrayado.
   ===================================================================== */
.rd-feature {
  padding: 32px; border: none; border-radius: 12px; gap: 0;
}
.rd-feature .rd-ico { margin-bottom: 80px; }
.rd-ico { width: 56px; height: 56px; }
.rd-ico svg { width: 24px; height: 24px; }

.rd-feature__eyebrow {
  font-size: 18px; line-height: 24px; font-weight: var(--fw-medium);
  color: var(--red-600); margin-bottom: 8px;
}
.rd-feature h3 {
  font-size: var(--fs-subtitle); line-height: var(--lh-subtitle);
  font-weight: var(--fw-semibold); margin: 0 0 20px;
}
.rd-feature__more {
  font-size: 16px; line-height: 22px; font-weight: var(--fw-medium);
  letter-spacing: .02em; color: var(--color-primary-dark); margin-top: auto;
}
/* El subrayado tiene que ganarle al bloque antisubrayado de mas arriba,
   que quita text-decoration a todo lo que hay dentro de la tarjeta. */
.rd-scope a.rd-feature .rd-feature__more,
.rd-scope a.rd-feature:hover .rd-feature__more,
.rd-scope a.rd-feature:focus .rd-feature__more { text-decoration: underline; }

/* =====================================================================
   TARJETAS DE CIFRAS (El Consorcio) — medidas exactas del Figma.
   El numero estaba a 44px cuando la maqueta pide 64: era la diferencia
   mas visible de todo el bloque.
   ===================================================================== */
.rd-statcards { gap: 32px; }
.rd-statcard {
  border-radius: 0; padding: 32px 24px 24px;
  border-left: 6px solid var(--color-accent);
  justify-content: flex-start; gap: 12px;
}
.rd-statcard__num {
  font-size: 64px; line-height: 54px; font-weight: var(--fw-semibold); margin: 0;
}
.rd-statcard__label {
  font-size: 18px; line-height: 24px; font-weight: var(--fw-medium); margin: 0;
}
.rd-statcard--blue  { background: var(--blue-600); }
.rd-statcard--light { background: #F7F7F7; color: var(--blue-500); }
.rd-statcard--light .rd-statcard__num { color: var(--blue-500); }

/* =====================================================================
   NOTA 5 (segunda mitad): el separador de la cinta es el icono de la
   sirena, no un caracter. Extraido del componente Marquee del Figma.
   Va como mascara para que herede el color del texto de la cinta.
   ===================================================================== */
.rd-ribbon__track i {
  display: inline-block; width: 16px; height: 16px;
  vertical-align: middle; opacity: 1; font-size: 0;
  background: currentColor;
  -webkit-mask: url("../img/icon-sirena.svg") center / contain no-repeat;
          mask: url("../img/icon-sirena.svg") center / contain no-repeat;
}

/* =====================================================================
   NOTA 10: logo del Cabildo, SVG oficial tintado por CSS.
   El original mide 342x424, asi que a 62px de alto le tocan 50 de ancho.
   Azul oficial del Cabildo (#2E3192) sobre barra blanca; blanco mientras
   la cabecera va superpuesta al hero.
   ===================================================================== */
.rd-cabildo__mark {
  display: block; width: 50px; height: 62px;
  background: #2E3192;
  -webkit-mask: url("../img/logotipo-cabildo-tenerife.svg") center / contain no-repeat;
          mask: url("../img/logotipo-cabildo-tenerife.svg") center / contain no-repeat;
}
.rd-header--overlay:not(.is-solid) .rd-cabildo__mark { background: #fff; }

/* =====================================================================
   ACCESOS RAPIDOS — carrusel automatico e infinito (nota 9).
   La fila se desplaza sola y vuelve a empezar sin corte. En escritorio
   caben las tres tarjetas, asi que el bucle se consigue con las copias
   que anade rediseno.js: siempre hay una tarjeta entrando por la derecha.
   Se usa desplazamiento nativo con anclaje, de modo que en tactil se
   puede arrastrar con el dedo como en cualquier carrusel.
   ===================================================================== */
.rd-quick {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;             /* = relleno del contenedor, para
                                            que el anclaje caiga siempre en
                                            el mismo punto de la tarjeta */
  scrollbar-width: none;                 /* Firefox */
}
.rd-quick::-webkit-scrollbar { display: none; }   /* Chrome y Safari */
.rd-quick__card {
  flex: 0 0 calc((100% - 32px) / 3);     /* tres visibles con los 16px de gap */
  scroll-snap-align: start;
  height: auto; min-height: 104px;
}
/* El filete que separaba las tarjetas apiladas no pinta nada en horizontal. */
.rd-quick__card + .rd-quick__card { border-top: none; border-left: none; }

/* Puntos de paginacion: uno por tarjeta real, el activo en rojo. */
.rd-quick__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px; min-height: 8px;
}
.rd-quick__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--black-200); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.rd-quick__dot:hover { background: var(--black-300); }
.rd-quick__dot.is-active { background: var(--color-accent); transform: scale(1.15); }
.rd-quick__dot:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 3px; }