/* ===========================================================================
   Radar Animal — sistema compartido (cabecera, menú, buscador, sesión)
   Un solo archivo para las 30 páginas (web/ y mobile/).
   Escrito en CSS plano a propósito: NO depende de la config de Tailwind de
   cada página, que es distinta en varias de ellas. Así la cabecera es
   idéntica en todo el sitio y no puede volver a divergir.
   =========================================================================== */

:root {
  --ra-verde: #1b6b47;        /* verde de marca (acentos) */
  --ra-verde-oscuro: #005232; /* botones, enlaces activos */
  --ra-teal: #004245;         /* color del footer y de las letras del logo */
  --ra-teal-hover: #00595d;
  --ra-tinta: #0b1c30;
  --ra-gris: #5b6763;
  --ra-linea: #dbe3de;
  --ra-fondo: #ffffff;
  --ra-fondo-suave: #f4f7f4;
  --ra-rojo: #ba1a1a;
  --ra-h: 80px;               /* altura de la cabecera */
  --ra-max: 1280px;
}

/* --- Contrato tipográfico único -------------------------------------------
   Titulares Chivo · Texto redactado Source Serif 4 · Todo lo demás Work Sans.

   INVERTIDO EL 28 DE AGOSTO DE 2026, y este es el cambio importante:

   Antes el `body` era serif y la sans se aplicaba por excepción, con una lista
   de selectores que había que ir ampliando. Eso contradecía la regla que la
   propia Tania fijó el 13 de agosto —«la serif es SOLO para el texto
   redactado: ni botones, ni enlaces de acción, ni etiquetas, ni datos de
   tarjeta»— y hacía que fueran apareciendo agujeros uno tras otro: «Urgencias
   24h» y «Ver seguros» en la portada, el botón «Leer noticia», el aviso de
   afiliados, los textos de Normativa y de Viajar...

   Ahora la sans es la base y la serif se pide expresamente donde toca. Así la
   regla se cumple sola en cualquier página nueva, en vez de depender de que
   alguien se acuerde de poner `ra-ui`.                                       */
body {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
}

/* La serif, solo donde hay texto redactado de verdad: el cuerpo del artículo
   (`.ra-article-body`, más abajo) y las páginas legales, que son prosa larga
   aunque no sean noticias. */
.ra-legal-texto {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Chivo', system-ui, -apple-system, sans-serif;
}
button, input, select, textarea, label,
nav, .ra-ui, [class*='label'], [class*='meta'], [class*='badge'], [class*='pill'],
[class*='chip'], [class*='tag'], [class*='eyebrow'], [class*='caps'] {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
}

/* ===========================  CABECERA  =================================== */
.ra-header {
  position: sticky;      /* sticky, no fixed: ocupa su sitio en el flujo y no
                            hace falta compensar con padding en <main> */
  top: 0;
  z-index: 60;
  background: var(--ra-fondo);
  border-bottom: 1px solid var(--ra-linea);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
}
.ra-header-inner {
  max-width: var(--ra-max);
  margin: 0 auto;
  height: var(--ra-h);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1024px) { .ra-header-inner { padding: 0 24px; } }

/* --- Marca ---------------------------------------------------------------
   Las dos líneas ("RADAR ANIMAL" y el eslogan) se ajustan al MISMO ancho.
   El ancho lo fija el eslogan; ra-site.js calcula el letter-spacing exacto
   de "RADAR ANIMAL" para que ambas líneas midan igual, con las letras
   repartidas de forma uniforme. Sin text-align:justify, que sólo abría un
   hueco enorme entre las dos palabras.                                     */
.ra-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .2s ease;
}
.ra-brand:hover { opacity: .85; }
.ra-brand-mark { height: 46px; width: auto; display: block; flex-shrink: 0; }
/* En móvil se reduce para que quepa junto al nombre y la hamburguesa sin
   apretarse, pero se sigue viendo. */
@media (max-width: 560px) {
  .ra-brand-mark { height: 34px; }
  .ra-header-inner { gap: 8px; padding: 0 12px; }
}
.ra-brand-text { display: flex; flex-direction: column; line-height: 1; }
.ra-brand-name {
  font-family: 'Chivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: 19px;
  color: var(--ra-teal);          /* color del footer, como pidió Tania */
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}
.ra-brand-slogan {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ra-gris);
  white-space: nowrap;
  margin-top: 3px;
  display: block;
}

/* --- Navegación (escritorio) -------------------------------------------- */
/* El menú de escritorio aparece a 1024px, no a 900px como estaba (corregido
   el 12 de agosto de 2026). Con el corte en 900px, entre 900 y ~990px de
   ancho la cabecera necesitaba unos 987px para marca + navegación + accesos
   y solo tenía 945: se salía por la derecha y provocaba scroll horizontal en
   TODAS las páginas (se vio primero en /contacto/, con "Salir" cortado).
   Por debajo de 1024px se encarga el menú hamburguesa, que ya existía y
   funciona. Los cuatro cortes de la cabecera van juntos a propósito: si se
   cambia uno hay que cambiar los cuatro, o vuelve el solape. */
.ra-nav { display: none; align-items: center; gap: 4px; margin: 0 auto; height: 100%; }
@media (min-width: 1024px) { .ra-nav { display: flex; } }
.ra-nav a {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ra-gris);
  text-decoration: none;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  /* el botón crece un poco al pasar el cursor (petición de Tania) */
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), color .18s ease,
              background-color .18s ease, border-color .18s ease;
  transform-origin: center bottom;
}
.ra-nav a:hover {
  color: var(--ra-verde);
  background: var(--ra-fondo-suave);
  border-bottom-color: var(--ra-verde);
  transform: scale(1.09);
}
.ra-nav a:active { transform: scale(.97); }
/* Estado activo del menu (21 sep 2026): antes era solo un subrayado, poco
 * visible. Tania pidio algo mas destacado (fondo + mas peso) sin que el
 * boton se mueva al pasar el cursor -- el padding/border-radius ya estan
 * reservados en .ra-nav a de base, asi que un fondo aqui no desplaza nada,
 * y el hover (transform: scale) sigue funcionando igual encima. */
.ra-nav a[aria-current='page'] {
  color: var(--ra-verde-oscuro);
  background: var(--ra-fondo-suave);
  border-bottom-color: var(--ra-verde-oscuro);
  font-weight: 800;
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .ra-nav a, .ra-nav a:hover { transition: color .18s ease; transform: none; }
}

/* --- Acciones ----------------------------------------------------------- */
.ra-actions { display: none; align-items: center; gap: 14px; margin-left: auto; }
@media (min-width: 1024px) { .ra-actions { display: flex; } }
/* "Iniciar sesión" y "Regístrate gratis" iban pegados: se separan entre sí */
.ra-auth-out, .ra-auth-in { display: flex; align-items: center; gap: 12px; }
.ra-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ra-gris); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.ra-icon-btn:hover { background: var(--ra-fondo-suave); color: var(--ra-verde); transform: scale(1.1); }
.ra-btn-ghost, .ra-btn-solid {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 13px; font-weight: 700; text-decoration: none;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.ra-btn-ghost { color: var(--ra-verde-oscuro); border: 2px solid var(--ra-verde-oscuro); }
.ra-btn-ghost:hover { background: #e6f4ed; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.ra-btn-solid { color: #fff; background: var(--ra-verde-oscuro); border: 2px solid var(--ra-verde-oscuro); }
.ra-btn-solid:hover { background: #003d25; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }

/* --- Sesión iniciada ---------------------------------------------------- */
.ra-userchip {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 5px 12px 5px 5px; border-radius: 999px;
  border: 1px solid var(--ra-linea); background: var(--ra-fondo-suave);
  transition: border-color .18s ease, transform .18s ease;
}
.ra-userchip:hover { border-color: var(--ra-verde); transform: translateY(-1px); }
.ra-avatar {
  width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  background: var(--ra-verde); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
}
.ra-username {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ra-tinta); max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.ra-logout {
  font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600;
  color: var(--ra-gris); background: none; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; text-decoration: underline;
}
.ra-logout:hover { color: var(--ra-rojo); background: var(--ra-fondo-suave); }
[hidden] { display: none !important; }

/* --- Hamburguesa -------------------------------------------------------- */
.ra-burger {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; width: 42px; height: 42px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--ra-tinta); cursor: pointer;
}
.ra-burger:hover { background: var(--ra-fondo-suave); color: var(--ra-verde); }
@media (min-width: 1024px) { .ra-burger { display: none; } }

/* --- Buscador desplegable de la cabecera -------------------------------- */
.ra-searchbar { border-top: 1px solid var(--ra-linea); background: var(--ra-fondo-suave); }
.ra-searchbar form {
  max-width: var(--ra-max); margin: 0 auto; padding: 12px 16px;
  display: flex; gap: 8px; align-items: center;
}
.ra-searchbar input {
  flex: 1 1 auto; min-width: 0;
  font-family: 'Work Sans', sans-serif; font-size: 15px;
  padding: 11px 14px; border: 1px solid var(--ra-linea);
  border-radius: 8px; background: #fff; color: var(--ra-tinta);
}
.ra-searchbar input:focus { outline: 2px solid var(--ra-verde); outline-offset: 1px; border-color: var(--ra-verde); }
.ra-searchbar button {
  font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 700;
  padding: 11px 20px; border: 0; border-radius: 8px;
  background: var(--ra-verde-oscuro); color: #fff; cursor: pointer; white-space: nowrap;
}
.ra-searchbar button:hover { background: #003d25; }

/* --- Cajón lateral (móvil) --------------------------------------------- */
.ra-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, .45); border: 0; padding: 0; cursor: pointer;
  opacity: 0; transition: opacity .25s ease;
}
.ra-backdrop.ra-on { opacity: 1; }
.ra-drawer {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: min(85vw, 330px); height: 100%;
  background: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.2, .8, .3, 1);
  overflow-y: auto;
}
.ra-drawer.ra-on { transform: translateX(0); }
.ra-drawer-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px; border-bottom: 1px solid var(--ra-linea);
}
.ra-drawer nav { display: flex; flex-direction: column; padding: 8px 0; }
.ra-drawer nav a {
  font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ra-tinta); text-decoration: none;
  padding: 14px 18px; border-left: 4px solid transparent;
}
.ra-drawer nav a:hover { background: var(--ra-fondo-suave); color: var(--ra-verde); }
.ra-drawer nav a[aria-current='page'] {
  color: var(--ra-verde-oscuro); border-left-color: var(--ra-verde-oscuro);
  background: #eef6f1; text-decoration: underline; text-underline-offset: 3px;
}
.ra-drawer-foot { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ra-linea); }
.ra-drawer-foot .ra-btn-ghost, .ra-drawer-foot .ra-btn-solid { text-align: center; padding: 11px 14px; font-size: 14px; }
.ra-drawer-search { padding: 14px 16px; border-bottom: 1px solid var(--ra-linea); display: flex; gap: 8px; }
.ra-drawer-search input {
  flex: 1 1 auto; min-width: 0; font-family: 'Work Sans', sans-serif; font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--ra-linea); border-radius: 8px;
}
.ra-drawer-search button {
  border: 0; border-radius: 8px; background: var(--ra-verde-oscuro); color: #fff;
  width: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}

/* --- Barra "volver" (artículos) ---------------------------------------- */
.ra-backbar {
  position: sticky; top: var(--ra-h); z-index: 55;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--ra-linea);
}
.ra-backbar-inner { max-width: var(--ra-max); margin: 0 auto; padding: 8px 16px; }
.ra-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--ra-verde-oscuro); background: none; border: 0; cursor: pointer;
  padding: 7px 12px 7px 6px; border-radius: 999px; text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}
.ra-back:hover { background: #e6f4ed; transform: translateX(-2px); }
.ra-back .material-symbols-outlined { font-size: 20px; }

/* --- Aviso de cookies -------------------------------------------------- */
.ra-cookies {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  background: var(--ra-teal); color: #fff;
  padding: 14px 16px; box-shadow: 0 -2px 16px rgba(0, 0, 0, .2);
}
.ra-cookies-inner {
  max-width: var(--ra-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.ra-cookies p { font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 1.5; margin: 0; flex: 1 1 320px; }
.ra-cookies a { color: #a6f3c5; }
.ra-cookies button {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  background: #fff; color: var(--ra-teal); border: 0; border-radius: 8px;
  padding: 10px 18px; cursor: pointer; white-space: nowrap;
}

/* =====================  UTILIDADES COMPARTIDAS  ========================== */

/* Sólo visible para lectores de pantalla (SEO/accesibilidad) */
.ra-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --- Selector lista/cuadrícula ----------------------------------------- */
.ra-viewtoggle { display: inline-flex; border: 1px solid var(--ra-linea); border-radius: 8px; overflow: hidden; background: #fff; }
.ra-viewtoggle button {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border: 0; background: #fff; color: var(--ra-gris); cursor: pointer;
}
.ra-viewtoggle button + button { border-left: 1px solid var(--ra-linea); }
.ra-viewtoggle button[aria-pressed='true'] { background: var(--ra-verde-oscuro); color: #fff; }
.ra-viewtoggle .material-symbols-outlined { font-size: 18px; }

/* --- Tarjetas de producto (generadas desde ra-products.js) -------------- */
.ra-products { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ra-products.ra-col1 { grid-template-columns: 1fr; }
.ra-product {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--ra-linea); border-radius: 12px;
  overflow: hidden; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ra-product:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); border-color: var(--ra-verde); }
.ra-product-img {
  aspect-ratio: 1 / 1; width: 100%; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 10px;
  border-bottom: 1px solid var(--ra-linea);
}
.ra-product-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ra-product-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.ra-product-name {
  font-family: 'Chivo', sans-serif; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  color: var(--ra-tinta); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ra-product-cta {
  margin-top: auto; font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--ra-verde-oscuro); display: inline-flex; align-items: center; gap: 4px;
}
.ra-afil {
  font-family: 'Work Sans', sans-serif; font-size: 11px; color: var(--ra-gris);
  margin: 10px 0 0; line-height: 1.45;
}

/* --- Fichas de clínicas (Urgencias) ------------------------------------ */
.ra-clinics { display: grid; gap: 14px; }
.ra-clinics.ra-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ra-clinics.ra-list { grid-template-columns: 1fr; }
.ra-clinic {
  background: #fff; border: 1px solid var(--ra-linea); border-left: 4px solid var(--ra-verde);
  border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ra-clinic h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--ra-tinta); line-height: 1.3; }
.ra-clinic-head { display: flex; flex-direction: column; gap: 7px; }
.ra-clinic-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-clinic-meta { display: flex; flex-direction: column; gap: 7px; }
.ra-clinic-horario { font-family: 'Work Sans', sans-serif; font-size: 12.5px; color: var(--ra-gris); line-height: 1.45; margin: 0; }
.ra-clinic-horario a { color: var(--ra-verde-oscuro); }

/* Cuadrícula: la ficha es una columna y nada debe estirarse a lo alto, o
   aparece un hueco en blanco entre las etiquetas y la dirección. */
.ra-clinics.ra-grid .ra-clinic { gap: 8px; }
.ra-clinics.ra-grid .ra-clinic > * { flex: 0 0 auto; }

/* Lista: todo en una fila, y ahí sí interesa que los bloques repartan ancho */
.ra-clinics.ra-list .ra-clinic { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }
.ra-clinics.ra-list .ra-clinic-head { flex: 1 1 100%; }
.ra-clinics.ra-list .ra-clinic-meta { flex: 1 1 260px; }
.ra-clinics.ra-list .ra-clinic-horario { flex: 1 1 100%; }
.ra-clinic-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: 'Work Sans', sans-serif; font-size: 13.5px; color: var(--ra-tinta); line-height: 1.45;
}
.ra-clinic-row .material-symbols-outlined { font-size: 18px; color: var(--ra-verde); flex-shrink: 0; margin-top: 1px; }
.ra-clinic-row a { color: var(--ra-verde-oscuro); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.ra-clinic-row a:hover { color: var(--ra-teal); }
.ra-badge {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  font-family: 'Work Sans', sans-serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
}
.ra-badge-24h { background: #e6f4ed; color: var(--ra-verde-oscuro); }

/* --- Modelo de servicio de cada clínica ---------------------------------
   La diferencia entre "puedes presentarte" y "hay que llamar antes" tiene que
   verse de un vistazo: es información de seguridad, no decoración. */
.ra-m-abierto { background: #e6f4ed; color: #005232; }
.ra-m-llamar { background: #fff4e5; color: #8a4b00; }
.ra-m-deriva { background: #eef2f7; color: #44515e; }
.ra-m-domicilio { background: #e8eefc; color: #274690; }

.ra-clinic-aviso {
  display: flex; align-items: flex-start; gap: 7px; margin: 0;
  font-family: 'Work Sans', sans-serif; font-size: 12.5px; line-height: 1.45;
  background: #fff4e5; color: #8a4b00;
  border-left: 3px solid #d98324; border-radius: 6px; padding: 8px 10px;
}
.ra-clinic-aviso .material-symbols-outlined { font-size: 17px; flex-shrink: 0; }
.ra-clinic.ra-mod-presencial { border-left-color: var(--ra-verde); }
.ra-clinic.ra-mod-llamar,
.ra-clinic.ra-mod-sin_aclarar { border-left-color: #d98324; }
.ra-clinic.ra-mod-derivacion { border-left-color: #8a97a5; }
.ra-clinic.ra-mod-domicilio { border-left-color: #4667c4; }

.ra-tel-etiqueta { font-size: 11.5px; color: var(--ra-gris); }
.ra-note-fuente { color: var(--ra-gris); font-size: 12px; }
.ra-solo-abierto {
  margin: 12px 0 4px; padding: 10px 12px; border-radius: 8px;
  background: #fff; border: 1px solid var(--ra-linea); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.ra-solo-abierto:hover { border-color: var(--ra-verde); }
.ra-badge-dist { background: #eef2f7; color: var(--ra-gris); }
.ra-badge-warn { background: #fff4e5; color: #8a4b00; }
.ra-badge-ok { background: #e6f4ed; color: var(--ra-verde-oscuro); }
.ra-pending { color: #8a4b00; font-style: italic; }

/* --- Filtro por código postal ----------------------------------------- */
.ra-cpbox {
  background: var(--ra-fondo-suave); border: 1px solid var(--ra-linea);
  border-radius: 12px; padding: 16px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.ra-field { display: flex; flex-direction: column; gap: 5px; }
.ra-field label { font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ra-gris); }
.ra-field input, .ra-field select {
  font-family: 'Work Sans', sans-serif; font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--ra-linea); border-radius: 8px; background: #fff; color: var(--ra-tinta);
}
.ra-field input:focus, .ra-field select:focus { outline: 2px solid var(--ra-verde); outline-offset: 1px; }
.ra-btn-primary {
  font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 700;
  padding: 11px 20px; border: 0; border-radius: 8px;
  background: var(--ra-verde-oscuro); color: #fff; cursor: pointer; white-space: nowrap;
}
.ra-btn-primary:hover { background: #003d25; }
.ra-btn-link {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 600;
  background: none; border: 0; color: var(--ra-verde-oscuro);
  text-decoration: underline; cursor: pointer; padding: 11px 4px;
}
.ra-note {
  font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--ra-gris);
  margin: 0; line-height: 1.5;
}
.ra-empty {
  font-family: 'Work Sans', sans-serif; text-align: center; color: var(--ra-gris);
  padding: 40px 20px; border: 1px dashed var(--ra-linea); border-radius: 12px; background: var(--ra-fondo-suave);
}
/* --- Paginación de Urgencias 24h (17 sep 2026), arriba y abajo del listado */
.ra-paginacion {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 6px 0;
}
.ra-paginacion:empty { display: none; }
.ra-pag-btn {
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  padding: 8px 16px; border: 1px solid var(--ra-verde-oscuro); border-radius: 999px;
  background: #fff; color: var(--ra-verde-oscuro); cursor: pointer;
}
.ra-pag-btn:hover:not(:disabled) { background: var(--ra-verde-oscuro); color: #fff; }
.ra-pag-btn:disabled { opacity: .4; cursor: not-allowed; border-color: var(--ra-linea); color: var(--ra-gris); }
.ra-pag-info {
  font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--ra-gris); white-space: nowrap;
}
.ra-ver-todos-pag { margin-left: 6px; padding: 8px 4px; }
.ra-info-pag {
  text-align: center; margin: 2px 0 18px; font-size: 13px;
}
.ra-paginacion + .ra-info-pag:last-of-type { margin-bottom: 6px; }

/* --- ¿Buscas alojamiento? (Viajar) ------------------------------------ */
.ra-ask { background: var(--ra-fondo-suave); border: 1px solid var(--ra-linea); border-radius: 12px; padding: 16px; }
.ra-ask-q { font-family: 'Chivo', sans-serif; font-size: 16px; font-weight: 700; color: var(--ra-tinta); margin: 0 0 12px; }
.ra-ask-opts { display: flex; gap: 10px; flex-wrap: wrap; }
.ra-ask-opts button {
  font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 700;
  padding: 10px 24px; border: 2px solid var(--ra-verde-oscuro); border-radius: 999px;
  background: #fff; color: var(--ra-verde-oscuro); cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.ra-ask-opts button:hover { transform: scale(1.05); }
.ra-ask-opts button[aria-pressed='true'] { background: var(--ra-verde-oscuro); color: #fff; }
.ra-ask-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ra-linea); }

/* --- Buscador: página de resultados ----------------------------------- */
.ra-results-wrap { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1024px) { .ra-results-wrap { grid-template-columns: 270px 1fr; } }
.ra-filters { background: #fff; border: 1px solid var(--ra-linea); border-radius: 12px; padding: 18px; position: sticky; top: calc(var(--ra-h) + 16px); }
.ra-filters h2 { font-size: 15px; margin: 0 0 14px; }
.ra-fgroup { border: 0; margin: 0 0 18px; padding: 0; }
.ra-fgroup legend {
  font-family: 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ra-gris);
  margin-bottom: 8px; padding: 0;
}
.ra-check {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: 'Work Sans', sans-serif; font-size: 13.5px; color: var(--ra-tinta);
  padding: 4px 0; cursor: pointer; line-height: 1.4;
}
.ra-check input { margin-top: 2px; accent-color: var(--ra-verde-oscuro); width: 16px; height: 16px; flex-shrink: 0; }
.ra-fscroll { max-height: 230px; overflow-y: auto; padding-right: 6px; }
.ra-result {
  display: block; padding: 18px 0; border-bottom: 1px solid var(--ra-linea); text-decoration: none;
}
.ra-result:hover .ra-result-title { color: var(--ra-verde); text-decoration: underline; }
.ra-result-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 7px; }
.ra-result-title { font-family: 'Chivo', sans-serif; font-size: 19px; font-weight: 700; color: var(--ra-tinta); margin: 0 0 6px; line-height: 1.3; }
.ra-result-sum { font-size: 15px; color: var(--ra-gris); margin: 0; line-height: 1.55; }
.ra-result mark { background: #fff2a8; color: inherit; padding: 0 2px; border-radius: 2px; }
.ra-results-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ra-chipline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ra-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Work Sans', sans-serif; font-size: 12px; font-weight: 600;
  background: #eef6f1; color: var(--ra-verde-oscuro);
  border: 1px solid #cfe6da; border-radius: 999px; padding: 5px 10px;
}
.ra-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }

/* --- Tarjetas de acceso rápido de la portada --------------------------
   El problema era texto recortado con line-clamp y alturas fijas. Aquí las
   tarjetas crecen con su contenido pero todas quedan a la misma altura
   porque el grid iguala las filas y el pie se ancla abajo con margin-top. */
.ra-quick { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.ra-quickcard {
  display: flex; flex-direction: column; height: 100%; gap: 8px;
  background: #fff; border: 1px solid var(--ra-linea); border-radius: 14px;
  padding: 20px; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ra-quickcard:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); border-color: var(--ra-verde); }
.ra-quickcard-icon {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e6f4ed; color: var(--ra-verde-oscuro);
}
.ra-quickcard-icon .material-symbols-outlined { font-size: 24px; }
.ra-quickcard h3 { font-size: 17px; font-weight: 700; margin: 4px 0 0; color: var(--ra-tinta); line-height: 1.25; }
/* sin line-clamp: el texto se muestra completo */
.ra-quickcard p { font-size: 14.5px; line-height: 1.5; color: var(--ra-gris); margin: 0; }
.ra-quickcard-cta {
  margin-top: auto; padding-top: 10px;
  font-family: 'Work Sans', sans-serif; font-size: 13px; font-weight: 700;
  color: var(--ra-verde-oscuro); display: inline-flex; align-items: center; gap: 4px;
}
.ra-quickcard-cta .material-symbols-outlined { font-size: 17px; }
.ra-quickcard.ra-urgente { border-left: 4px solid var(--ra-rojo); }
.ra-quickcard.ra-urgente .ra-quickcard-icon { background: #ffe9e7; color: var(--ra-rojo); }

/* --- Producto en fila (el diseño de la barra lateral de Noticias) --------
   Imagen pequeña a la izquierda y título a la derecha. Es el que pidió Tania
   para todas las cajas de "Productos recomendados" del sitio. */
.ra-products.ra-col1 { gap: 10px; }
.ra-products.ra-col1 .ra-product {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 8px; border-radius: 10px;
}
.ra-products.ra-col1 .ra-product-img {
  width: 64px; height: 64px; aspect-ratio: auto; flex-shrink: 0;
  border: 1px solid var(--ra-linea); border-right: 1px solid var(--ra-linea);
  border-radius: 8px; padding: 4px; background: #fff;
}
.ra-products.ra-col1 .ra-product-body { padding: 0; gap: 3px; }
.ra-products.ra-col1 .ra-product-name { font-size: 13px; -webkit-line-clamp: 2; }
.ra-products.ra-col1 .ra-product-cta { font-size: 11px; margin-top: 2px; }

/* Enlace "ver todos / ver más" de las cajas de producto */
.ra-vermas {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Work Sans', sans-serif; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ra-verde-oscuro); text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: 8px 0 0;
  transition: gap .18s ease, color .18s ease;
}
.ra-vermas:hover { color: var(--ra-verde); text-decoration: underline; gap: 9px; }

/* --- Enlaces "LEER" de las tarjetas de noticia --------------------------
   Iban en el verde oscuro de marca y a 14 px, y a ese tamaño y ese tono se
   confundían con los titulares en negro. Ahora son más pequeños y en un verde
   más claro, que se lee como enlace y no como titular. */
.ra-leer {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: 'Work Sans', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: #3d9b6b; text-decoration: none; margin-top: auto;
  transition: gap .18s ease, color .18s ease;
}
.ra-leer:hover { color: var(--ra-verde); text-decoration: underline; gap: 8px; }
.ra-leer .material-symbols-outlined { font-size: 15px; }

/* --- Resúmenes de las tarjetas de Noticias -----------------------------
   Un poco más pequeños y con las líneas algo más juntas. */
body.ra-noticias main article p { font-size: 14.6px; line-height: 1.45; }

/* --- Noticias: vista de cuadrícula y de lista --------------------------
   La de lista no hacía nada. Ahora pone una noticia por fila, con la imagen a
   la izquierda, que es lo que se espera de una vista de lista. */
.ra-news.ra-news-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ra-news.ra-news-list { display: flex !important; flex-direction: column; gap: 16px; }
.ra-news.ra-news-list > article { flex-direction: row !important; align-items: stretch; }
.ra-news.ra-news-list > article > :first-child {
  width: 210px; flex-shrink: 0; aspect-ratio: auto !important; min-height: 150px;
}
.ra-news.ra-news-list > article > :last-child { flex: 1 1 auto; }
@media (max-width: 640px) {
  .ra-news.ra-news-list > article { flex-direction: column !important; }
  .ra-news.ra-news-list > article > :first-child { width: 100%; min-height: 170px; }
}
/* botón de vista activo */
button.ra-view-on { background: var(--ra-verde-oscuro) !important; color: #fff !important; }
button.ra-view-on .material-symbols-outlined { color: #fff !important; }

/* --- Normativa: la etiqueta territorial no debe comerse el titular -----
   "MADRID CAPITAL" y la fecha compartían una fila sin poder partirse, y al no
   caber empujaban al titular. Ahora la fila se reparte en dos líneas si hace
   falta y la etiqueta nunca se corta. */
.ra-normativa-cab {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 12px; margin-bottom: 14px;
}
.ra-normativa-cab > span:first-child { white-space: nowrap; flex-shrink: 0; }
.ra-normativa-cab > span:last-child { white-space: nowrap; }

/* --- Normativa: caja "Normativas más consultadas" ----------------------
   Los títulos van con la tipografía de los titulares (Chivo), no con la de
   interfaz, como el resto de títulos de norma. */
.ra-masconsultadas a, .ra-masconsultadas h4, .ra-masconsultadas h5 {
  font-family: 'Chivo', system-ui, sans-serif !important;
  font-size: 14.5px; font-weight: 700; line-height: 1.35;
}

/* --- Desplegables: sitio para la flecha --------------------------------
   Los <select> de Normativa llevan appearance-none (les quita la flecha nativa)
   y encima un <span> con la flecha en posición absoluta. Como el select no
   reservaba hueco a la derecha, la flecha se montaba sobre el texto y sobre el
   número de "Resultados por página". */
body select { padding-right: 2.4rem !important; }
body select.ra-mini { padding-right: 1.9rem !important; }

/* --- Normativa: caja "Radar Jurídico" a la mitad -----------------------
   Ocupaba tanto como una ficha de norma. Se reduce el relleno, el título y el
   texto, y el formulario pasa a una sola línea. */
.ra-radar-juridico { padding: 16px !important; }
.ra-radar-juridico h4 { font-size: 15px !important; line-height: 1.25; margin-bottom: 4px !important; }
.ra-radar-juridico p { font-size: 12px !important; line-height: 1.45; margin-bottom: 10px !important; }
.ra-radar-juridico input { padding: 8px 10px !important; font-size: 13px !important; }
.ra-radar-juridico button { padding: 8px 12px !important; font-size: 13px !important; }
.ra-radar-juridico > div,
.ra-radar-juridico .space-y-3 > * + * { margin-top: 8px !important; }

/* --- Normativa: vista de lista y de cuadrícula ------------------------- */
.ra-norm.ra-norm-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ra-norm.ra-norm-list { display: flex !important; flex-direction: column; gap: 14px; }
.ra-norm.ra-norm-list > div { flex-direction: column; }
.ra-norm.ra-norm-list .ra-normativa-cab { margin-bottom: 8px; }

/* --- Carrusel de "Lo más reciente" ------------------------------------ */
.ra-carrusel-nav[disabled] { opacity: .35; cursor: not-allowed; }
.ra-carrusel-cuenta {
  font-family: 'Work Sans', sans-serif; font-size: 12px; color: var(--ra-gris);
  white-space: nowrap; padding: 0 4px;
}

/* --- Viajar: botón de transporte elegido ------------------------------- */
button.ra-elegido {
  border-color: var(--ra-verde-oscuro) !important;
  background: #e6f4ed !important;
  box-shadow: inset 0 0 0 2px var(--ra-verde-oscuro);
}
button.ra-elegido .material-symbols-outlined,
button.ra-elegido span { color: var(--ra-verde-oscuro) !important; }

/* --- Páginas legales: texto un poco más pequeño ------------------------ */
body.ra-legal main p,
body.ra-legal main li,
body.ra-legal main td { font-size: 14.5px; line-height: 1.62; }
body.ra-legal main h1 { font-size: 30px; }
body.ra-legal main h2 { font-size: 20px; }
body.ra-legal main h3 { font-size: 16.5px; }

/* --- Aviso de "sin resultados" en las cajas de consulta ---------------- */
.ra-inline-aviso {
  font-family: 'Work Sans', sans-serif; font-size: 13px; line-height: 1.5;
  margin: 12px 0 0; padding: 12px 14px; border-radius: 8px;
}
.ra-inline-aviso.ra-vacio { background: rgba(255, 255, 255, .14); }
.ra-inline-aviso.ra-hay { background: rgba(255, 255, 255, .14); }
.ra-inline-aviso ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ra-inline-aviso a { color: inherit; text-decoration: underline; font-weight: 600; }

/* Que las imágenes nunca desborden en móvil */
img { max-width: 100%; }

/* ===========================================================================
   Cuerpo del artículo (.ra-article-body)
   ---------------------------------------------------------------------------
   single.php envolvía el contenido en .ra-article-body desde el principio,
   pero LA CLASE NUNCA EXISTIÓ EN ESTE ARCHIVO. Resultado: los encabezados H2
   y H3 se veían igual que un párrafo normal, las tablas salían sin bordes y
   con las columnas pegadas, y no había separación entre bloques. Lo detectó
   Tania al abrir la primera noticia importada (12 agosto 2026).

   Criterio tipográfico, el mismo del resto del sitio:
   - Titulares en Chivo (sans), cuerpo en Source Serif 4 (serif).
   - Los H2 llevan además un filete verde encima, para que se lean como
     descansos de sección y no como una frase en negrita.
   =========================================================================== */
.ra-article-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ra-tinta);
}

/* Párrafos: la separación entre ellos es lo que hacía que el texto se
   amontonara. flex-column + gap en el contenedor no basta cuando WordPress
   mete márgenes propios. */
.ra-article-body > p { margin: 0 0 1.25em; }
.ra-article-body > *:last-child { margin-bottom: 0; }

.ra-article-body h2 {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ra-teal);
  margin: 2.2em 0 .7em;
  padding-top: .8em;
  border-top: 2px solid var(--ra-linea);
}
.ra-article-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ra-article-body h3 {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ra-verde-oscuro);
  margin: 1.8em 0 .5em;
}

.ra-article-body h4 {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 18px; font-weight: 700; color: var(--ra-tinta);
  margin: 1.5em 0 .4em;
}

.ra-article-body strong { font-weight: 700; color: var(--ra-tinta); }
.ra-article-body em { font-style: italic; }

.ra-article-body a {
  color: var(--ra-verde-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ra-article-body a:hover { color: var(--ra-verde); }

.ra-article-body ul,
.ra-article-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.ra-article-body li { margin-bottom: .5em; }
.ra-article-body li::marker { color: var(--ra-verde); }

/* Tablas: sin esto salían las columnas pegadas ("Villamanrique de la
   Condesa7"). Se envuelven en un contenedor con scroll propio para que en
   móvil la tabla se desplace sola y NO empuje el ancho de la página. */
.ra-article-body figure.wp-block-table,
.ra-article-body .ra-tabla-scroll { overflow-x: auto; margin: 0 0 1.5em; }
.ra-article-body table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 15px;
}
.ra-article-body thead th {
  background: var(--ra-fondo-suave);
  color: var(--ra-teal);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--ra-linea);
  white-space: nowrap;
}
.ra-article-body tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--ra-linea);
  vertical-align: top;
}
.ra-article-body tbody tr:last-child td { border-bottom: 0; }
.ra-article-body tbody tr:nth-child(even) { background: rgba(244, 247, 244, .55); }

.ra-article-body blockquote {
  margin: 1.6em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 4px solid var(--ra-verde);
  color: var(--ra-gris);
  font-style: italic;
}
.ra-article-body blockquote p { margin: 0; }

.ra-article-body hr {
  border: 0;
  border-top: 1px solid var(--ra-linea);
  margin: 2em 0;
}

.ra-article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--ra-fondo-suave);
  padding: 1px 5px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .ra-article-body { font-size: 17px; }
  .ra-article-body h2 { font-size: 23px; }
  .ra-article-body h3 { font-size: 19px; }
}

/* --- Píldora de categoría -------------------------------------------------
   Etiqueta corta ("Salud" en vez de "Salud, medicamentos y alertas"): con el
   nombre completo ocupaba dos líneas dentro de las tarjetas y descuadraba la
   rejilla. El nombre completo se conserva en el atributo title, así que al
   pasar el cursor se sigue viendo entero.
   El color llega por la variable --ra-chip desde PHP (ra_theme_cat_color).  */
.ra-cat-chip {
  display: inline-block;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;          /* nunca parte en dos líneas */
  padding: 4px 9px;
  border-radius: 5px;
  color: var(--ra-chip, #6B7280);
  background: color-mix(in srgb, var(--ra-chip, #6B7280) 12%, transparent);
  line-height: 1.2;
}
/* Reserva para navegadores sin color-mix: el fondo queda transparente y el
   texto se sigue leyendo por su color propio. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ra-cat-chip { background: var(--ra-fondo-suave); }
}

/* --- Código de descuento --------------------------------------------------
   Antes era una línea de 11 px en negrita, indistinguible del resto de la
   tarjeta. Tania pidió (13 ago 2026) destacarlo: es lo único accionable de
   la ficha, y si el lector no lo copia antes de contratar, el descuento se
   pierde y no se puede aplicar después.                                     */
.ra-codigo-descuento {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ra-verde-oscuro);
  background: #e6f4ed;
  border: 1px dashed var(--ra-verde);
  border-radius: 7px;
  padding: 7px 11px;
  text-align: center;
  user-select: all;              /* un clic selecciona el código entero */
  /* Los códigos son una sola palabra sin espacios: sin esto no hay por dónde
     partirlos y se salen de la caja en cualquier columna estrecha. Pasó en el
     lateral de Viajar con «RADARANIMAL25» (28 ago 2026). */
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* --- Contrato tipográfico, reforzado --------------------------------------
   REGLA (Tania, 13 ago 2026): la serif (Source Serif 4) es SOLO para el
   texto redactado. Ni botones, ni enlaces de acción, ni etiquetas, ni datos
   de tarjeta — ahí se lee peor y desentona. Los titulares van en Chivo.

   El bloque de arriba del archivo ya declaraba parte de esto, pero se
   colaban elementos por clases de Tailwind como font-meta-text, que apunta a
   Work Sans en unas páginas y a la serif en otras según la config de cada
   una. Esto lo fija de forma explícita y gana por especificidad.            */
.ra-ui,
a.ra-btn-ghost, a.ra-btn-solid,
button, input, select, textarea, label,
.ra-cat-chip, .ra-codigo-descuento,
[class*='ra-btn'], [class*='ra-chip'], [class*='ra-tag'],
.ra-card-cta, .ra-leer, .ra-meta {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif !important;
}

/* ===========================================================================
   ARTÍCULO: lateral y bloques de recirculación   (17 ago 2026)
   ---------------------------------------------------------------------------
   La columna de texto sigue midiendo 760 px: el lateral se pone AL LADO, no
   le quita ancho de lectura. Por debajo de 1024 px no hay lateral, y su
   contenido aparece una sola vez más abajo (.ra-solo-estrecho), nunca los dos
   a la vez.
   =========================================================================== */

.ra-art-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 48px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px)  { .ra-art-layout { padding-left: 24px; padding-right: 24px; } }
/* align-items se deja en su valor por defecto (stretch) A PROPÓSITO: con
   flex-start la columna del lateral mide solo lo que ocupa su contenido, y
   entonces el position:sticky de dentro no tiene recorrido y el lateral se
   queda arriba dejando media pantalla vacía al bajar. Estirada, el sticky
   acompaña toda la lectura. */
@media (min-width: 1024px) { .ra-art-layout { flex-direction: row; } }

.ra-art-col { flex: 1 1 auto; min-width: 0; max-width: 760px; }
@media (min-width: 1024px) { .ra-art-col { margin: 0; } }

.ra-art-lateral { display: none; }
@media (min-width: 1024px) {
  .ra-art-lateral { display: block; width: 300px; flex: 0 0 300px; }

  /* El desplazamiento se calcula desde la altura real de la cabecera fija
     (--ra-h), no con un 96px a ojo: si la cabecera cambia de alto, esto se
     ajusta solo. Con sesión abierta WordPress añade encima su barra de 32px,
     y sin tenerlo en cuenta el título del lateral quedaba medio tapado. */
  .ra-lateral-caja { position: sticky; top: calc(var(--ra-h, 80px) + 16px); }
  body.admin-bar .ra-lateral-caja { top: calc(var(--ra-h, 80px) + 48px); }
}

/* El bloque duplicado para pantallas estrechas: solo cuando NO hay lateral. */
.ra-solo-estrecho { display: block; }
@media (min-width: 1024px) { .ra-solo-estrecho { display: none; } }

.ra-lateral-t {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ra-teal, #004245);
  margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ra-linea, #dbe3de);
}

.ra-bloque-rel { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ra-linea, #dbe3de); }
.ra-bloque-rel-t {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 22px; font-weight: 800; color: var(--ra-teal, #004245);
  margin: 0 0 18px;
}

/* --- Noticias sugeridas --------------------------------------------------- */
.ra-sugeridas { display: grid; gap: 18px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 560px) { .ra-sugeridas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ra-sugerida {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; transition: transform .18s ease;
}
.ra-sugerida:hover { transform: translateY(-3px); }
.ra-sugerida-img {
  display: block; aspect-ratio: 16 / 10; width: 100%;
  border-radius: 12px; overflow: hidden;
  background: var(--ra-fondo-suave, #eef3f2);
  border: 1px solid rgba(219, 227, 222, .6);
}
.ra-sugerida-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ra-sugerida:hover .ra-sugerida-img img { transform: scale(1.07); }
.ra-sugerida-txt { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ra-sugerida-titulo {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 16px; font-weight: 700; line-height: 1.3;
  color: var(--ra-tinta, #0b1c30); transition: color .18s ease;
}
.ra-sugerida:hover .ra-sugerida-titulo { color: var(--ra-verde, #1b6b47); }

/* --- Tarjetas de producto relacionadas ------------------------------------ */
.ra-prodrel-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ra-prodrel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ra-prodrel {
  display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit; transition: transform .18s ease;
}
.ra-prodrel:hover { transform: translateY(-3px); }
.ra-prodrel-img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; width: 100%; background: #fff;
  border: 1px solid rgba(219, 227, 222, .7); border-radius: 12px; overflow: hidden;
  transition: box-shadow .18s ease;
}
.ra-prodrel:hover .ra-prodrel-img { box-shadow: 0 6px 16px rgba(11, 28, 48, .12); }
.ra-prodrel-img img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box;
  transition: transform .5s ease;
}
.ra-prodrel:hover .ra-prodrel-img img { transform: scale(1.06); }
.ra-prodrel-txt { display: flex; flex-direction: column; gap: 2px; }
.ra-prodrel-nombre {
  font-family: 'Chivo', system-ui, sans-serif;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--ra-tinta, #0b1c30); transition: color .18s ease;
}
.ra-prodrel:hover .ra-prodrel-nombre { color: var(--ra-verde-oscuro, #005232); }
.ra-prodrel-cta {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ra-verde, #1b6b47);
}

/* Variante en fila, para el lateral estrecho: la imagen a la izquierda. */
.ra-prodrel--fila { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 16px; }
.ra-prodrel--fila .ra-prodrel-img { width: 76px; flex: 0 0 76px; aspect-ratio: 1 / 1; }
.ra-prodrel--fila .ra-prodrel-nombre { font-size: 13.5px; }

.ra-afiliado-nota {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 12px; line-height: 1.5; color: var(--ra-gris, #5b6763);
  margin: 16px 0 0;
}

/* ===========================================================================
   Botón de guardado (bookmark) — 27 de agosto de 2026
   ---------------------------------------------------------------------------
   Dorado, excepción deliberada a la paleta de marca (verde/teal/tinta/gris/
   rojo). Es la convención habitual en aplicaciones para "guardado/favorito", y
   así se distingue de cualquier otra acción de la interfaz. La excepción vale
   SOLO para este botón, en cualquier pantalla donde aparezca: no abre la puerta
   a usar dorado en otros elementos sin decidirlo aparte (documento de diseño §5).
   =========================================================================== */
.ra-btn-guardar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  flex-shrink: 0;
  color: #F2B90F;
  background: #FBEED9;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ra-btn-guardar:hover {
  transform: scale(1.08);
}
.ra-btn-guardar:disabled {
  opacity: 0.6;
  cursor: default;
}
.ra-btn-guardar .material-symbols-outlined {
  font-size: 20px;
}

/* Listado de noticias: la vista de LISTA necesita dos lineas, no tres.
   La tarjeta en lista tiene una altura fija de unos 222 px. Con tres lineas
   de titular MAS tres de extracto el contenido no cabe, y como el extracto es
   el unico que encoge, se cortaba A MEDIA LINEA y sin puntos suspensivos.
   En lista el titular tiene 760 px de ancho, asi que dos lineas ya dan unos
   138 caracteres: de sobra para la mediana de 115. En rejilla, en cambio, el
   titular tiene 352 px y ahi si hacen falta las tres, que es lo que deja la
   plantilla por defecto. (8 sep 2026) */
.ra-news.ra-news-list > article h3,
.ra-news.ra-news-list > article p {
  -webkit-line-clamp: 2;
  flex-shrink: 0;
}

/* Caja "Fuente:" al final de cada noticia (single.php) — el enlace es la
 * URL en crudo y se salía del recuadro con URLs largas (21 sep 2026). Mismo
 * patrón que .ra-codigo-descuento: overflow-wrap: anywhere en vez de
 * break-all, para no cortar a mitad de palabra si cupiera entera. */
.ra-fuente-link {
	overflow-wrap: anywhere;
}

/* Boton "Ver todas las noticias" de la home (21 sep 2026): era solo texto
 * subrayado, Tania dijo que se pasaba por alto facilmente. Ahora es una
 * pastilla visible, con el mismo lenguaje de movimiento (elevar + sombra)
 * que los botones de Viajar. */
.ra-btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ra-verde);
  color: #fff;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, box-shadow .18s ease;
}
.ra-btn-chip .material-symbols-outlined { font-size: 16px; }
.ra-btn-chip:hover {
  background: var(--ra-verde-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* Botón destacado "Ver todas las noticias" de portada (21 sep 2026): Tania
   pidió que resaltara más y que el hover afectara a toda el área de color,
   no solo al texto — bloque grande con esquina cortada en vez de píldora. */
.ra-btn-chip--destacado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 220px;
  min-width: 220px;
  padding: 22px 30px;
  border-radius: 4px 4px 4px 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 100%, 0 100%);
  background: var(--ra-verde-oscuro);
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
}
.ra-btn-chip--destacado-txt {
  font-size: 15px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ra-btn-chip--destacado .material-symbols-outlined {
  font-size: 20px;
  transition: transform .18s cubic-bezier(.2,.8,.3,1);
}

/* Botón "Ver todas las noticias" junto a Lo más reciente (22 sep 2026):
   Tania pidió más contraste frente al verde repetido de la página y más
   separación de las flechas del carrusel — acento ámbar (mismo tono que
   los avisos de "en construcción") en vez de otro verde más. */
.ra-btn-chip--acento {
  background: #B98900;
  padding: 11px 22px;
  font-size: 14px;
}
.ra-btn-chip--acento:hover {
  background: #7A5B00;
}
.ra-btn-chip--destacado:hover {
  background: var(--ra-verde);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.ra-btn-chip--destacado:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* Vista "cuadrícula de 6" en NOTICIAS (21 sep 2026): misma tecnica de
 * auto-fill que ya usa .ra-news-grid, con una anchura minima de tarjeta
 * menor para que quepan mas columnas -- se ajusta sola al ancho
 * disponible, sin fijar breakpoints a mano. */
.ra-news.ra-news-grid6 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Paginacion de NOTICIAS (21 sep 2026): the_posts_pagination() de WP no
 * llevaba ningun estilo propio del tema, solo el CSS por defecto de
 * WordPress -- Tania la vio pobre visualmente. Mismo lenguaje que el
 * resto de botones del sitio: pildoras, elevacion al pasar el cursor,
 * la pagina actual en verde solido. */
.pagination.navigation .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pagination.navigation .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ra-verde-oscuro);
  background: var(--ra-fondo-suave);
  text-decoration: none;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, color .18s ease;
}
.pagination.navigation a.page-numbers:hover {
  background: var(--ra-verde);
  color: #fff;
  transform: translateY(-2px);
}
.pagination.navigation .page-numbers.current {
  background: var(--ra-verde-oscuro);
  color: #fff;
}
.pagination.navigation .page-numbers.dots {
  background: none;
  min-width: auto;
  padding: 0 4px;
}
.pagination.navigation .prev.page-numbers,
.pagination.navigation .next.page-numbers {
  background: var(--ra-verde-oscuro);
  color: #fff;
}
.pagination.navigation .prev.page-numbers:hover,
.pagination.navigation .next.page-numbers:hover {
  background: var(--ra-verde);
}
.pagination.navigation .page-numbers .material-symbols-outlined {
  font-size: 18px;
}

/* Vista "cuadrícula de 6" en NORMATIVA (21 sep 2026): mismo patron que
 * .ra-news-grid6 en NOTICIAS. */
.ra-norm.ra-norm-grid6 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Ir a página en NORMATIVA (21 sep 2026): campo numerico junto a
 * Anterior/Siguiente para saltar directo a una pagina. */
.ra-pag-ir { display: inline-flex; align-items: center; gap: 6px; font-family: 'Work Sans', sans-serif; font-size: 13px; color: var(--ra-gris); margin-left: 8px; }
.ra-pag-input { width: 56px; padding: 6px 8px; border: 1px solid var(--ra-verde-oscuro); border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 13px; text-align: center; }

/* Aviso de construcción continua en URGENCIAS y NORMATIVA (21 sep 2026) */
.ra-aviso-construccion {
  display: flex; align-items: flex-start; gap: 10px;
  background: #FFF8E1; border: 1px solid #F4CD65; border-radius: 12px;
  padding: 14px 16px; margin: 16px 0;
  color: #7A5B00; font-family: 'Work Sans', sans-serif; font-size: 14px;
}
.ra-aviso-construccion .material-symbols-outlined { color: #B98900; font-size: 20px; flex-shrink: 0; }
.ra-aviso-construccion p { margin: 0; }

/* --- Movil: desbordamiento horizontal (23 sep 2026, v46) --------------
   La pagina se arrastraba a la derecha y dejaba una franja blanca, y el
   boton ENTENDIDO del aviso de cookies quedaba fuera de la pantalla.
   La causa NO era el aviso: .ra-cookies es position:fixed y se ancla al
   viewport de layout, que era mas ancho que la pantalla. Lo que sobraba
   eran dos filas que no caben en 375px y no envolvian:
     - home: "Lo mas reciente" = titulo + chip "Ver todas" + flechas
       (medido: 524px de ancho en una pantalla de 375)
     - normativa: .ra-paginacion = 4 bloques en una sola linea (424px)
   Al dejarlas envolver, scrollWidth vuelve a ser 375 y el boton se puede
   pulsar. Solo afecta a <=767px; el escritorio queda igual.
   OJO: el mr-4 del chip era el ultimo pixel que sobraba, por eso se
   anula dentro del media query.
*/
@media (max-width: 767px) {
  .flex.justify-between.items-center { flex-wrap: wrap; row-gap: 12px; }
  .flex.justify-between.items-center > .flex.items-center { flex-wrap: wrap; gap: 12px; margin-left: auto; }
  .flex.justify-between.items-center > .flex.items-center > .ra-btn-chip { margin-right: 0; }
  .ra-btn-chip { max-width: 100%; }
  .ra-paginacion { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
}
/* --- Movil: atajos de la home en lista (23 sep 2026, v47) -------------
   Los 5 atajos (Articulos, Normativa, Viajar, Seguros, Urgencias) iban en
   rejilla de 2 columnas: al ser impares, la ultima fila dejaba siempre un
   hueco blanco que se leia como un fallo de maquetacion.
   Por debajo de 767px pasan a una tarjeta por fila, en horizontal: el icono
   a la izquierda ocupando las dos filas, y titulo + descripcion a la derecha.
   La tarjeta baja de 233px a 110px de alto y el bloque de 747px a 590px.
   En escritorio no cambia nada (md:grid-cols-5).
*/
@media (max-width: 767px) {
  .grid.grid-cols-2.md\:grid-cols-5 { grid-template-columns: 1fr; gap: 10px; }
  .grid.grid-cols-2.md\:grid-cols-5 > a {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 2px;
    align-items: center; text-align: left; padding: 10px 14px;
  }
  .grid.grid-cols-2.md\:grid-cols-5 > a > :first-child { grid-row: 1 / span 2; align-self: center; padding: 10px; }
  .grid.grid-cols-2.md\:grid-cols-5 > a > h3 { grid-column: 2; align-self: end; margin: 0; }
  .grid.grid-cols-2.md\:grid-cols-5 > a > p  { grid-column: 2; align-self: start; margin: 0; }
}
/* --- Buscador: filtros plegables en movil (23 sep 2026, v50) -----------
   El panel de filtros es un <aside id="ra-filtros" class="ra-filters"> que
   va ANTES que los resultados dentro de .ra-results-wrap. En movil mide unos
   2.200 px, asi que al buscar aparecia un muro de casillas y el primer
   resultado caia sobre el pixel 3.500: parecia que la busqueda no funcionaba.
   Y no habia manera de cerrarlo.

   Ahora en movil arranca plegado y se abre con un boton que indica cuantos
   filtros hay puestos. El atributo data-ra-plegado lo pone el JS sobre
   .ra-results-wrap, que es el padre. En escritorio no cambia nada: el boton
   se oculta y el panel se ve entero, con su sticky de siempre.
*/
.ra-filtros-toggle { display: none; }

@media (max-width: 1023px) {
  .ra-results-wrap > .ra-filters { position: static; }
  .ra-filtros-toggle {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 13px 16px;
    font-family: "Work Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: var(--ra-teal);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  .ra-results-wrap[data-ra-plegado="1"] > .ra-filters { display: none; }
}
/* Boton "ver mas" del buscador (23 sep 2026, v51). Los resultados se pintan
   de 20 en 20 en vez de los 939 de golpe. Ojo: existe ya .ra-mas-leido, que
   es otra cosa; por eso el selector se escribe con su llave pegada. */
.ra-mas {
  display: block;
  width: 100%;
  margin: 18px 0 4px;
  padding: 14px 18px;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ra-teal);
  background: transparent;
  border: 2px solid var(--ra-teal);
  border-radius: 10px;
  cursor: pointer;
}
.ra-mas:hover { background: var(--ra-teal); color: #fff; }
/* Explicacion bajo cada categoria en el buscador (23 sep 2026, v54).
   La etiqueta que se lee es el nombre corto (el mismo de las tarjetas) y
   debajo, en pequeno, que hay dentro. El valor que filtra sigue siendo el
   nombre completo de la taxonomia. */
.ra-opt-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ra-gris, #6b6b6b);
}