/* ============================================================
   Vías Verdes Murcia v7 — Ficha de Ruta (R3c)
   ------------------------------------------------------------
   Rediseño high-end del modal de detalle de ruta (openRouteModal)
   siguiendo el handoff §5.9. Mismo lenguaje de craft que R3a/R3b
   (weather-modal.css / transport-modal.css): superficie SÓLIDA,
   marca verde (#4A8C3F / #1A4A18) + COLOR DE CADA RUTA como acento
   del hero/CTAs/tabs (var --rd-accent), tipografía Manrope,
   double-bezel en tiles, eyebrow labels, hairlines + sombras
   difusas, motion físico (cubic-bezier .32,.72,0,1), fade-up y
   prefers-reduced-motion.

   Todas las clases con prefijo .rd-* para no colisionar.
   NO toca el contrato de tests:
     - #elevationChart (canvas) + #chartStats viven dentro de
       #tab-resumen (los pinta renderElevationChart, intacta).
     - switchModalTab + ids #tab-resumen/#tab-itinerario/
       #tab-patrimonio/#tab-servicios/#tab-acceso + clases
       .modal-tab / .modal-tab-content (se restilizan, no se
       renombran).
     - open360Tour, zoomToRoute, closeRouteModal sin cambios.
   El acento por ruta se inyecta inline como --rd-accent en el
   contenedor .rd; aquí cae a verde por defecto.
   ============================================================ */

:root {
  --rd-green: var(--vvb-green, #4A8C3F);
  --rd-green-dark: var(--vvb-green-dark, #1A4A18);
  --rd-green-light: #8DBA8A;
  --rd-green-soft: var(--color-brand-soft, #EAF1E7);
  --rd-green-softer: var(--color-brand-softer, #F4F8F2);
  --rd-ink: var(--text-primary, #1c2418);
  --rd-ink-soft: var(--text-secondary, #4F6661);
  --rd-line: var(--line, #E1E6DC);
  --rd-amber: var(--vvb-amber, #E8A13A);
  --rd-white: #ffffff;
  --rd-hairline: rgba(26, 74, 24, .08);
  --rd-hairline-2: rgba(26, 74, 24, .12);
  --rd-inset-hi: inset 0 1px 1px rgba(255, 255, 255, .5);
  --rd-shadow-tile: var(--shadow-card, 0 1px 3px rgba(20, 30, 15, .05));
  --rd-shadow-soft: var(--shadow-popover, 0 6px 22px rgba(15, 30, 12, .08));
  --rd-shadow-row: 0 6px 18px rgba(15, 30, 12, .1);
  --rd-ease: cubic-bezier(.32, .72, 0, 1);
  --rd-font: 'Manrope', system-ui, sans-serif;
}

/* ---------- Shell: superficie sólida, ancho 620, fade-up ---------- */
#routeModal .rd-content {
  background: var(--rd-white);
  max-width: 620px;
  border-radius: 22px;
}
.rd {
  --rd-accent: var(--rd-green);   /* fallback; se sobreescribe inline por ruta */
  font-family: var(--rd-font);
  color: var(--rd-ink);
  background: var(--rd-white);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  animation: rdFadeUp .42s var(--rd-ease) both;
}
@keyframes rdFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero ---------- */
.rd-hero {
  position: relative;
  min-height: 168px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  flex-shrink: 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--rd-accent) 92%, #000 0%),
      var(--rd-green-dark));
  overflow: hidden;
}
/* Foto real de la ruta de fondo (si existe) con overlay legible */
.rd-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.rd-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(15, 30, 12, .12) 0%, rgba(15, 30, 12, .62) 100%),
    linear-gradient(135deg, color-mix(in srgb, var(--rd-accent) 55%, transparent), transparent 70%);
}
/* Marca de agua del icono route */
.rd-hero-wm {
  position: absolute;
  right: -14px;
  top: -20px;
  z-index: 1;
  opacity: .14;
  color: #fff;
  pointer-events: none;
}
.rd-hero-wm svg { width: 156px; height: 156px; }
.rd-hero-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: auto;
}
.rd-hero-close {
  width: 36px; height: 36px; border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  background: rgba(15, 30, 12, .28);
  color: #fff; font-size: 22px; line-height: 1;
  box-shadow: var(--rd-inset-hi);
  backdrop-filter: blur(6px);
  transition: transform .2s var(--rd-ease), background .2s var(--rd-ease);
}
.rd-hero-close:hover { transform: scale(1.06); background: rgba(15, 30, 12, .42); }
.rd-hero-close:active { transform: scale(.95); }

.rd-hero-eyebrow {
  position: relative; z-index: 2;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.rd-hero-title {
  position: relative; z-index: 2;
  margin: 6px 0 11px;
  font-size: 25px; font-weight: 800; line-height: 1.12;
  letter-spacing: -.015em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .32);
}
/* Tags del hero (dificultad / superficie / forma / estado) */
.rd-tags {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.rd-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
  box-shadow: var(--rd-inset-hi);
  white-space: nowrap;
}
.rd-tag svg { width: 12px; height: 12px; flex-shrink: 0; }
.rd-tag--ok { background: rgba(46, 139, 63, .82); border-color: rgba(255, 255, 255, .3); }
.rd-tag--warn { background: color-mix(in srgb, var(--rd-amber) 88%, transparent); border-color: rgba(255, 255, 255, .3); }
.rd-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ---------- Cuerpo con scroll ---------- */
.rd-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

/* ---------- Fila de CTAs ---------- */
.rd-cta {
  display: flex; gap: 9px;
  padding: 14px 16px 4px;
}
.rd-cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 14px; border-radius: 13px;
  font-family: var(--rd-font); font-size: 13.5px; font-weight: 700;
  cursor: pointer; border: none; white-space: nowrap;
  transition: transform .2s var(--rd-ease), box-shadow .2s var(--rd-ease),
              background .2s var(--rd-ease), border-color .2s var(--rd-ease);
}
.rd-cta-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.rd-cta-btn:active { transform: scale(.975); }
/* Primario: color de la ruta */
.rd-cta-primary {
  flex: 1.4;
  background: var(--rd-accent);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--rd-accent) 34%, transparent), var(--rd-inset-hi);
}
.rd-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--rd-accent) 38%, transparent), var(--rd-inset-hi); }
/* Secundario: Tour 360° */
.rd-cta-secondary {
  flex: 1;
  background: var(--rd-green-soft);
  color: var(--rd-green-dark);
  box-shadow: var(--rd-shadow-tile), var(--rd-inset-hi);
}
.rd-cta-secondary:hover { transform: translateY(-1px); box-shadow: var(--rd-shadow-row), var(--rd-inset-hi); }
/* Bookmark */
.rd-cta-bookmark {
  flex: 0 0 auto; width: 46px; padding: 12px;
  background: var(--rd-green-soft);
  color: var(--rd-green-dark);
  box-shadow: var(--rd-shadow-tile), var(--rd-inset-hi);
}
.rd-cta-bookmark:hover { transform: translateY(-1px); }
.rd-cta-bookmark.is-active { background: var(--rd-accent); color: #fff; }
.rd-cta-bookmark.is-active svg { fill: currentColor; }

/* ---------- Rejilla de 4 stats (tiles double-bezel) ---------- */
.rd-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 12px 16px;
}
.rd-stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 6px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), var(--rd-green-softer));
  border: 1px solid var(--rd-hairline);
  box-shadow: var(--rd-shadow-tile);
}
.rd-stat-core {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 9px 4px;
  border-radius: 11px;
  background: var(--rd-white);
  box-shadow: var(--rd-inset-hi), 0 1px 2px rgba(20, 30, 15, .04);
}
.rd-stat-ic { color: var(--rd-accent); margin-bottom: 4px; display: inline-flex; }
.rd-stat-ic svg { width: 17px; height: 17px; }
.rd-stat-val {
  font-size: 18px; font-weight: 800; color: var(--rd-ink);
  line-height: 1.05; letter-spacing: -.01em;
}
.rd-stat-lbl {
  font-size: 10px; font-weight: 700; color: var(--rd-ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 3px;
  white-space: nowrap;
}

/* ---------- Tabs (subrayado color ruta) ---------- */
#routeModal .modal-tabs.rd-tabs {
  display: flex; gap: 4px; overflow-x: auto;
  padding: 4px 16px 0; margin: 0;
  border-bottom: 1px solid var(--rd-line);
  scrollbar-width: thin;
  background: var(--rd-white);
}
#routeModal .modal-tabs.rd-tabs::-webkit-scrollbar { height: 4px; }
#routeModal .modal-tabs.rd-tabs::-webkit-scrollbar-thumb { background: var(--rd-line); border-radius: 99px; }
#routeModal .rd-tabs .modal-tab {
  flex: 0 0 auto;
  padding: 10px 12px; margin-bottom: -1px;
  border: none; background: none; cursor: pointer;
  font-family: var(--rd-font); font-size: 13.5px; font-weight: 700;
  color: var(--rd-ink-soft); white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  border-radius: 0;
  transition: color .18s var(--rd-ease), border-color .18s var(--rd-ease);
}
#routeModal .rd-tabs .modal-tab:hover { color: var(--rd-ink); }
#routeModal .rd-tabs .modal-tab.active {
  color: var(--rd-accent);
  border-bottom-color: var(--rd-accent);
  background: none;
}

/* ---------- Cuerpo de cada tab ---------- */
#routeModal .rd-tabs ~ .modal-tab-content,
.rd-tabpanes .modal-tab-content { padding: 16px; }

/* ---------- Resumen: descripción + eyebrow + perfil altimétrico ---------- */
.rd-desc {
  margin: 0 0 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--rd-ink);
}
.rd-eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rd-accent);
  margin: 4px 0 10px;
}
/* Contenedor del perfil altimétrico — double-bezel, acento por ruta.
   Mantiene #elevationChart (canvas) + #chartStats intactos dentro. */
.rd-elev {
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), var(--rd-green-softer));
  border: 1px solid var(--rd-hairline);
  box-shadow: var(--rd-shadow-tile);
  padding: 5px;
  margin-bottom: 18px;
}
.rd-elev-core {
  border-radius: 12px;
  background: var(--rd-white);
  box-shadow: var(--rd-inset-hi), 0 1px 2px rgba(20, 30, 15, .04);
  padding: 12px 12px 10px;
}
.rd-elev-canvas { height: 140px; position: relative; }
/* chartStats: 4 tiles finos (Desn.+ / Desn.- / Máx / Mín) */
#routeModal #chartStats.chart-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-top: 12px; padding: 0;
}
#routeModal #chartStats .chart-stat-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: 10px;
  background: var(--rd-green-softer);
  box-shadow: inset 0 0 0 1px var(--rd-hairline);
}
#routeModal #chartStats .chart-stat-val {
  font-size: 14px; font-weight: 800; color: var(--rd-accent);
  line-height: 1.1; letter-spacing: -.01em;
}
#routeModal #chartStats .chart-stat-lbl {
  font-size: 10px; font-weight: 700; color: var(--rd-ink-soft);
  text-transform: uppercase; letter-spacing: .04em; margin-top: 3px;
}

/* ---------- Itinerario: timeline vertical ---------- */
.rd-timeline {
  position: relative;
  padding-left: 4px;
}
.rd-step {
  display: flex; gap: 14px;
  position: relative;
}
.rd-step:not(:last-child) { padding-bottom: 18px; }
.rd-step-rail {
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}
.rd-step-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rd-accent);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1.5px var(--rd-accent);
  margin-top: 2px;
  z-index: 1;
}
.rd-step-line {
  width: 2px; flex: 1; margin-top: 3px;
  background: var(--rd-line);
  border-radius: 2px;
}
.rd-step-body { padding-bottom: 2px; min-width: 0; flex: 1; }
.rd-step-km {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--rd-accent);
}
.rd-step-name {
  display: flex; align-items: center;
  font-size: 14.5px; font-weight: 700; color: var(--rd-ink);
  line-height: 1.25; margin-top: 1px;
}
.rd-step-name svg { flex-shrink: 0; }
.rd-step-type {
  font-size: 12.5px; color: var(--rd-ink-soft); margin-top: 1px;
  line-height: 1.4;
}
.rd-step--link { cursor: pointer; }
.rd-step--link:hover .rd-step-name { color: var(--rd-accent); }

/* ---------- Patrimonio: tarjetas ---------- */
.rd-heritage { display: flex; flex-direction: column; gap: 9px; }
.rd-her-card {
  display: flex; align-items: center; gap: 12px;
  padding: 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), var(--rd-green-softer));
  border: 1px solid var(--rd-hairline);
  box-shadow: var(--rd-shadow-tile);
}
.rd-her-core {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 12px;
  background: var(--rd-white);
  box-shadow: var(--rd-inset-hi), 0 1px 2px rgba(20, 30, 15, .04);
}
.rd-her-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.rd-her-ic svg { width: 19px; height: 19px; }
.rd-her-tt { flex: 1; min-width: 0; }
.rd-her-tt h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--rd-ink); line-height: 1.25; }
.rd-her-tt p {
  margin: 2px 0 0; font-size: 12px; color: var(--rd-ink-soft); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Servicios: rejilla 2 col ---------- */
.rd-services {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
}
.rd-svc {
  display: flex; align-items: center; gap: 10px;
  padding: 5px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), var(--rd-green-softer));
  border: 1px solid var(--rd-hairline);
  box-shadow: var(--rd-shadow-tile);
}
.rd-svc-core {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 10px;
  background: var(--rd-white);
  box-shadow: var(--rd-inset-hi), 0 1px 2px rgba(20, 30, 15, .04);
}
.rd-svc-ic {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--rd-sc, var(--rd-accent));
  background: color-mix(in srgb, var(--rd-sc, var(--rd-accent)) 13%, var(--rd-white));
  box-shadow: var(--rd-inset-hi);
}
.rd-svc-ic svg { width: 17px; height: 17px; }
.rd-svc-tt { flex: 1; min-width: 0; }
.rd-svc-tt h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--rd-ink); line-height: 1.2; }
.rd-svc-tt p {
  margin: 1px 0 0; font-size: 11.5px; color: var(--rd-ink-soft); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Estado vacío de un tab ---------- */
.rd-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  padding: 28px 18px;
  color: var(--rd-ink-soft);
}
.rd-empty svg { width: 30px; height: 30px; color: var(--rd-green-light); }
.rd-empty-tt { font-size: 14px; font-weight: 700; color: var(--rd-ink); }
.rd-empty-sub { font-size: 12.5px; line-height: 1.45; max-width: 32ch; }

/* ---------- Bloque secundario: acciones / share / aviso ---------- */
.rd-section { margin-bottom: 16px; }
.rd-section-eyebrow {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--rd-ink-soft);
  margin-bottom: 10px;
}
.rd-secondary-actions { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rd-soon {
  padding: 12px; border-radius: 12px;
  background: #fff7ed; border: 1px solid #ffedd5;
  font-size: 12.5px; color: #9a3412; text-align: center;
  margin-bottom: 16px; line-height: 1.45;
}

/* ---------- Foco visible ---------- */
.rd-cta-btn:focus-visible,
.rd-hero-close:focus-visible,
#routeModal .rd-tabs .modal-tab:focus-visible,
.rd-step--link:focus-visible {
  outline: 2px solid var(--rd-accent); outline-offset: 2px;
  border-radius: 8px;
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rd { animation: none; }
  .rd-cta-btn, .rd-hero-close, #routeModal .rd-tabs .modal-tab { transition: none; }
  .rd-cta-btn:hover, .rd-hero-close:hover { transform: none; }
}

/* ---------- Móvil ---------- */
@media (max-width: 600px) {
  #routeModal .rd-content { max-width: 100%; border-radius: 18px; }
  .rd-stats { gap: 6px; }
  .rd-stat-lbl { font-size: 9.5px; }
  .rd-hero-title { font-size: 22px; }
  .rd-services { grid-template-columns: 1fr; }
}

/* ============================================================
   R8 — "Estructura de la ruta" (leyenda iconos + recuento)
   bajo el perfil altimétrico en el tab Resumen.
   ============================================================ */
.rd-struct {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 6px 0 18px;
}
.rd-struct-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--vv-line, #e4e8df); background: var(--vv-green-soft, #EAF1E7);
}
.rd-struct-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
.rd-struct-ic svg { width: 20px; height: 20px; }
.rd-struct-lbl { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--vv-ink, #1c2418); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-struct-cnt {
  font-size: 12px; font-weight: 800; color: var(--vv-green-dark, #1A4A18);
  background: #fff; border-radius: 999px; min-width: 22px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 6px;
}
[data-theme="dark"] .rd-struct-item { background: rgba(141,186,138,0.12); border-color: rgba(141,186,138,0.2); }
[data-theme="dark"] .rd-struct-lbl { color: #e8efe6; }
[data-theme="dark"] .rd-struct-cnt { background: rgba(0,0,0,0.3); color: var(--vv-green-light, #8DBA8A); }
@media (max-width: 600px) { .rd-struct { grid-template-columns: 1fr; } }

/* ---------- v8 (Pase 3): hero — eyebrow píldora + título de marca ---------- */
#routeModal .rd-hero-eyebrow { background: rgba(255, 255, 255, .22); padding: 4px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .08em; }
#routeModal .rd-hero-title { font-family: var(--font-brand, 'Bricolage Grotesque', 'Manrope', sans-serif); letter-spacing: -.01em; }

/* ---------- v8 (Pase 3): stats como métricas sunken ---------- */
#routeModal .rd-stat-core { background: var(--surface-sunken, #F6F8F4); border: 1px solid var(--line, #E1E6DC); box-shadow: none; }
[data-theme="dark"] #routeModal .rd-stat-core { background: var(--surface, #1d2c28); border-color: rgba(141, 186, 138, .22); }

/* ---------- v8 (Pase 3): tabs como segmented ---------- */
/* Inset horizontal 16px = gutter del resto de secciones (.rd-cta/.rd-stats);
   .rd-body tiene padding 0 y sin él el riel sunken tocaría los bordes del modal. */
#routeModal .modal-tabs.rd-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 16px; background: var(--surface-sunken, #F6F8F4); border-radius: 13px; border-bottom: none; }
#routeModal .rd-tabs .modal-tab { flex: 1; margin: 0; border: none; border-bottom: none; border-radius: 10px; min-height: 38px; font-weight: 700; color: var(--text-secondary); background: transparent; }
#routeModal .rd-tabs .modal-tab.active { background: var(--surface, #fff); color: var(--text-primary); font-weight: 800; box-shadow: var(--shadow-card, 0 1px 3px rgba(20, 30, 15, .05)); }
[data-theme="dark"] #routeModal .modal-tabs.rd-tabs { background: rgba(141, 186, 138, .12); }
[data-theme="dark"] #routeModal .rd-tabs .modal-tab.active { background: var(--surface-raised, #243530); color: var(--text-primary, #ECF3F0); }

/* ---------- v8 (Pase 3): la franja respira entre stats y tabs ---------- */
#rdToday { margin: 2px 16px; }

/* ---------- v8 (Pase 3): dark — superficies del cuerpo ----------
   Los tokens re-apuntados (--rd-ink/--rd-line/--rd-green-soft*) FLIPAN con el
   tema central; sin superficie oscura el cuerpo quedaba con texto claro sobre
   blanco. Solo superficies: el hero (foto + scrim) y el bloque dark
   pre-existente de .rd-struct quedan intactos. */
[data-theme="dark"] {
  --rd-white: var(--surface, #1D2C28);
  --rd-hairline: rgba(141, 186, 138, .14);
  --rd-hairline-2: rgba(141, 186, 138, .2);
  --rd-inset-hi: inset 0 1px 1px rgba(255, 255, 255, .05);
}
[data-theme="dark"] .rd-stat,
[data-theme="dark"] .rd-elev,
[data-theme="dark"] .rd-her-card,
[data-theme="dark"] .rd-svc {
  background: linear-gradient(180deg, rgba(141, 186, 138, .08), var(--rd-green-softer));
}
[data-theme="dark"] .rd-cta-secondary,
[data-theme="dark"] .rd-cta-bookmark:not(.is-active) {
  color: var(--color-brand-light, #8DBA8A);
}