/* ==========================================================================
   Umivale — estilos del chrome del tema (header + footer).
   Réplica de Layout/Header.vue y Layout/Footer.vue.
   ========================================================================== */

:root {
  --uv-azul: #124D91;       /* azul corporativo */
  --uv-naranja: #FA6000;    /* naranja activo (nav) */
  --uv-texto: #3C4858;      /* gris de texto */
  --uv-rojo: #D92727;       /* rojo botón Centros */
  --uv-naranja-hero: #e84e0f;
  --uv-max: 1380px;         /* ancho del topbar / nav */
  --uv-max-footer: 1170px;  /* ancho del footer (Bootstrap container) */
}

/* BLOCK COLOR PRESETS — cascade fix
   global-styles-inline-css (cargado antes que theme.css) genera
   .has-text-color { color: var(--wp--preset--color--text) !important }
   desde el slug "text". Eso pisa los colores de bloque específicos
   (.has-primary-color, etc.) si no los reforzamos aquí. */
.has-primary-color    { color: var(--wp--preset--color--primary)    !important; }
.has-accent-color     { color: var(--wp--preset--color--accent)      !important; }
.has-accent-dark-color { color: var(--wp--preset--color--accent-dark) !important; }
.has-white-color      { color: var(--wp--preset--color--white)       !important; }

/* ── Reset mínimo ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Texto solo para lectores de pantalla (accesibilidad). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Clase utilitaria: link en azul corporativo (usar en <a> dentro de uv_html/bloques). */
.uv-link-azul { color: var(--uv-azul); }

.site-header img,
.site-footer img { max-width: 100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* ── Fila 1: topbar ────────────────────────────────────────────────────── */
.topbar { background: #fff; }
.topbar--bordered { border-bottom: 1px solid #e0e0e0; } /* solo en home (sin Nav1) */

.topbar__inner {
  max-width: var(--uv-max);
  margin: 0 auto;
  padding: 0.25rem 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar__logo {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
}
.topbar__logo img {
  width: 178px;
  height: 70px;
  object-fit: contain;
  display: block;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 16px;
  color: var(--uv-azul);
  text-decoration: none;
}
.topbar__link .fa { font-size: 1.35em; }
.topbar__link-text { font-weight: 500; text-decoration: underline; }
.topbar__link:hover .topbar__link-text { text-decoration: none; }

.topbar__lang {
  border: none;
  border-right: 10px solid transparent;
  border-radius: 30px;
  min-width: 132px;
  padding: 5px 10px;
  background-color: #E5E5E5;
  color: #717171;
  font-weight: 500;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

/* Botones pastilla (Centros / Online) */
.btn-centros,
.btn-online {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 22px;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.btn-centros:hover,
.btn-online:hover { opacity: 0.9; }

.btn-centros {
  background-color: var(--uv-rojo);
  box-shadow: 0 2px 2px 0 rgba(217, 39, 39, .14), 0 3px 1px -2px rgba(217, 39, 39, .2), 0 1px 5px 0 rgba(217, 39, 39, .12);
}
.btn-online {
  background-color: var(--uv-azul);
  box-shadow: 0 2px 2px 0 rgba(18, 77, 145, .14), 0 3px 1px -2px rgba(18, 77, 145, .2), 0 1px 5px 0 rgba(18, 77, 145, .12);
}
.btn-online img { width: 17px; height: 15px; object-fit: contain; display: block; }

/* Dropdown Online */
.online { position: relative; }
.online__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 280px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 110;
}
.online.is-open .online__menu { display: block; }

.online__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.online__item:hover { background: #f8fafc; }
.online__item + .online__item { border-top: 1px solid #f0f0f0; }

.online__badge {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}
.online__badge--azul { background-color: var(--uv-azul); }
.online__badge--naranja { background-color: var(--uv-naranja-hero); }
.online__badge span {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.online__badge img { width: 22px; height: 20px; object-fit: contain; }
.online__label { color: var(--uv-texto); font-size: 15px; font-weight: 500; }

.topbar__search {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--uv-azul);
  font-size: 1.1em;
  line-height: 1;
  padding: 0;
  margin-left: 2px;
}

/* ── Fila 2: Nav1 (perfiles) ───────────────────────────────────────────── */
.nav1 { background: #fff; height: 56px; }
.nav1__inner {
  max-width: var(--uv-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
}
.nav1__tab {
  flex: 1;
  text-align: center;
  padding: 12px 15px 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 38px;
  color: rgba(18, 77, 145, .5);
  text-decoration: none;
  border-bottom: 6px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav1__tab:hover,
.nav1__tab.is-active {
  color: var(--uv-azul);
  border-bottom-color: var(--uv-naranja);
}

/* ==========================================================================
   NAV SECUNDARIO  (Nav2 + Nav3 — réplica de Layout/NavSecundario.vue)
   ========================================================================== */

/* Banner azul: 185px de alto; la fila de ítems ocupa la franja superior y la
   mitad inferior queda como fondo de la CardFlotante. position:relative SIN
   z-index propio: así el Nav3 (z-index alto) puede flotar sobre la card. */
.nav-secundario {
  position: relative;
  width: 100%;
  height: 185px;
  background-color: #124D91;
}
/* Ancla del Nav3: envuelve solo la fila del Nav2 (las franjas .nav3 son
   absolute y salen del flujo), así su alto = alto real de la fila. */
.nav-secundario__nav { position: relative; }

.nav-secundario__items {
  list-style: none;
  margin: 0;
  padding: 3px 0; /* despega levemente la fila del Nav2 del hero */
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.nav-secundario__li { display: block; }

.nav-secundario__item {
  display: block;
  margin-left: 4px;
  padding: 12px;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-secundario__item.is-static { cursor: default; }
/* Hover: idéntico al activo (fondo naranja, texto blanco, redondeado). */
.nav-secundario__item:hover,
.nav-secundario__item--active {
  background-color: #FA6000;
  color: #fff;
  border-radius: 4px;
}

/* Nav3: franja gris pegada justo debajo de la fila de ítems. Flota por encima
   de todo (CardFlotante incluida) sin empujar el layout. */
.nav3 {
  display: none;
  position: absolute;
  top: calc(100% + 2px); /* borde inferior real de la fila del Nav2 + 2px de separación */
  left: 0;
  width: 100%;
  z-index: 50;
  padding: 2px 0;
  background-color: #EEEEEE;
  border-bottom: 1px solid #e0e0e0;
}
.nav3--visible { display: block; }

.nav3__items {
  list-style: none;
  margin: 0;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
}
.nav3__li {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
}
.nav3__link {
  color: #124D91;
  font-size: 0.9em;
  font-weight: 500;
  white-space: normal;
  word-wrap: break-word;
  text-decoration: none;
  cursor: pointer;
}
.nav3 a { text-decoration: none; }
.nav3__link:hover { text-decoration: none; }

/* ==========================================================================
   HERO  (réplica de Layout/Hero.vue)
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.hero__bg,
.hero__overlay {
  position: absolute;
  inset: 0;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2.5rem;
  text-align: center;
  color: #fff;
}
@media (min-width: 768px) {
  .hero__content { padding: 5rem 2.5rem; }
}

.hero__titulo-img {
  max-width: min(90%, 420px);
  height: auto;
  margin: 20px 0 10px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.hero__titulo {
  font-family: 'Lato', sans-serif;
  font-size: 2.8em;
  font-weight: 700;
  line-height: 1.1;
  margin: 20px 0 10px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.hero__descripcion {
  font-family: 'Lato', sans-serif;
  font-size: 1.825em;
  line-height: 1.4em;
  font-weight: 400;
  color: #fff;
  margin: 5px 0;
  padding: 0 150px;
}
@media (max-width: 768px) {
  .hero__descripcion { padding: 0; font-size: 1.3em; }
}
.hero__boton {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  background-color: #e84e0f;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hero__boton:hover { opacity: 0.9; }

/* ==========================================================================
   CARD FLOTANTE  (réplica de Layout/CardFlotante.vue)
   ========================================================================== */

/* Card blanca superpuesta al banner azul del Nav2 (margin negativo).
   z-index:10 → por encima del banner (sin z-index) pero por debajo del
   Nav3 (z-index:50), igual que en el frontend Nuxt. */
.card-flotante {
  position: relative;
  z-index: 10;
  max-width: 1380px;
  margin: -127px auto 0; /* sube 127px sobre el banner de 185px → 58px de azul + 8px de gap. margin-bottom:0 */
  padding: 40px 60px;
  background: #fff;
  border-radius: 12px;
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08), 4px 0 15px rgba(0, 0, 0, 0.08);
}
@media (max-width: 768px) {
  .card-flotante { padding: 24px; margin-left: 12px; margin-right: 12px; }
}

/* Bloques full-width: rompen el padding horizontal (60px) de la card para
   ocupar todo su ancho. Apuntamos directo a la clase del bloque porque
   `align:full` es el default de block.json y Gutenberg no lo serializa, así
   que la clase `.alignfull` no llega a emitirse (la dejamos por si algún
   bloque la trae explícita). */
.card-flotante .wp-block-umivale-banner-cta,
.card-flotante .wp-block-umivale-banner-licitaciones,
.card-flotante .wp-block-umivale-banner-icono,
.card-flotante .alignfull {
  margin-left: -60px;
  margin-right: -60px;
  max-width: calc(100% + 120px);
  width: calc(100% + 120px);
}
@media (max-width: 768px) {
  /* En mobile la card usa padding 24px. */
  .card-flotante .wp-block-umivale-banner-cta,
  .card-flotante .wp-block-umivale-banner-licitaciones,
  .card-flotante .wp-block-umivale-banner-icono,
  .card-flotante .alignfull {
    margin-left: -24px;
    margin-right: -24px;
    max-width: calc(100% + 48px);
    width: calc(100% + 48px);
  }
}

/* Galería de fotos: full-bleed propio, distinto del de arriba porque este
   bloque además hereda `.page__content > * { padding:0 1.5rem; max-width:1024px }`
   (style.css raíz, mecanismo tipo "constrained layout" para bloques sin
   align) — sin cancelar ESE padding, la imagen quedaba a 24px del borde de
   la card. padding:15px (no 0) porque el `container-fluid` del original
   TAMBIÉN tiene su propio padding de 15px (medido); el mecanismo interno
   del grid (row -15px + col +15px) está pensado para correr sobre esos
   15px y reproducir el inset exacto de producción, no cero. Regla propia
   (no se suma a la lista de arriba) para no tocar el comportamiento ya
   verificado de los banners. */
.card-flotante .wp-block-umivale-galeria-fotos {
  margin-left: -60px;
  margin-right: -60px;
  max-width: calc(100% + 120px);
  width: calc(100% + 120px);
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 768px) {
  .card-flotante .wp-block-umivale-galeria-fotos {
    margin-left: -24px;
    margin-right: -24px;
    max-width: calc(100% + 48px);
    width: calc(100% + 48px);
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* grid-cards-media (blog) a casi ancho completo de la card; el acotado
   (Novedades legislativas) conserva su max-width 1170. Gutter interno de 1rem
   para que las tarjetas no toquen el borde de la card. */
.card-flotante .wp-block-umivale-grid-cards-media:not(.is-acotado) {
  margin-left: -60px;
  margin-right: -60px;
  max-width: calc(100% + 120px);
  width: calc(100% + 120px);
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 768px) {
  .card-flotante .wp-block-umivale-grid-cards-media:not(.is-acotado) {
    margin-left: -24px;
    margin-right: -24px;
    max-width: calc(100% + 48px);
    width: calc(100% + 48px);
  }
}

/* grid-cards (p. ej. "Información Institucional" del portal) a casi ancho
   completo de la card. El grid cols-1 interno sigue centrado (max-width propio). */
.card-flotante .wp-block-umivale-grid-cards {
  margin-left: -60px;
  margin-right: -60px;
  max-width: calc(100% + 120px);
  width: calc(100% + 120px);
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (max-width: 768px) {
  .card-flotante .wp-block-umivale-grid-cards {
    margin-left: -24px;
    margin-right: -24px;
    max-width: calc(100% + 48px);
    width: calc(100% + 48px);
  }
}

/* ── Home: franja de perfiles (réplica de Home/Perfiles.vue) ───────────── */
.home-perfiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  background: #ffffff;
}
@media (min-width: 640px) {
  .home-perfiles { grid-template-columns: 1fr 1fr; }
}

.home-perfiles__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 208px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  text-decoration: none;
  overflow: hidden;
}

/* Overlay en reposo: negro semitransparente. */
.home-perfiles__tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
  transition: background 0.25s ease;
}

/* Hover: azul (Empresa/Despacho) o naranja (Paciente/Autónoma). */
.home-perfiles__tile.hover-azul:hover::before {
  background: linear-gradient(0deg, rgba(18, 77, 145, 0.88), rgba(18, 77, 145, 0.45));
}
.home-perfiles__tile.hover-naranja:hover::before {
  background: linear-gradient(0deg, rgba(255, 152, 0, 0.88), rgba(255, 152, 0, 0.45));
}

.home-perfiles__label {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-family: 'Lato', sans-serif;
  font-size: 2.2em;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

@media (max-width: 767px) {
  .home-perfiles__tile { min-height: 140px; }
  .home-perfiles__label { font-size: 1.5em; }
}

/* ── Breadcrumbs ────────────────────────────────────────────────────────
   Re-medido contra producción real (2026-07-14, getComputedStyle en 2 URLs
   distintas: /actualidad/asamblea-general-2022 y ficha-novedades) — el
   16px/500 anterior venía de un port sin verificar de Layout/Breadcrumbs.vue,
   nunca confirmado contra el computed style real. Patrón confirmado: SOLO
   el primer ítem (home/"Umivale Activa") es 18px/400; el resto (intermedios
   Y el activo/current) es 16px/300, sin importar cuántos niveles tenga. */
.breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Cancela el padding 40/60 de la card para pegarlas al borde sup-izq;
     16px de separación con el contenido debajo. */
  margin: -40px -60px 16px;
  padding: 16px 24px;
  text-align: left;
  font-size: 16px;
}
.breadcrumbs__sep { color: #777; }
.breadcrumbs__link {
  color: #124D91;
  font-weight: 300;
  text-decoration: none;
}
.breadcrumbs__link--first { font-weight: 400; font-size: 18px; }
.breadcrumbs__link:hover { text-decoration: underline; }
.breadcrumbs__current { color: #777; font-weight: 300; }
/* Home: único item, se ve como un título azul (réplica de Breadcrumbs.vue).
   Conserva el tamaño 18px del primer nivel (hace ese rol). */
.breadcrumbs__current--home { color: #124D91; font-weight: 700; font-size: 18px; }

/* ==========================================================================
   CONTENIDO DE BLOQUES (dentro de la card)
   ========================================================================== */

/* Título de sección (core/heading con className umivale-section-title). */
.umivale-section-title {
  font-size: 2em;
  font-weight: bold;
  line-height: 1.3;
  color: #124D91;
  text-align: center;
  margin-bottom: 1rem;
}
/* textAlign override: .has-text-align-left (Gutenberg block-library) tiene misma
   especificidad que .umivale-section-title pero carga antes → pierde. Doble clase
   (0,2,0) gana. Mismo patrón para right si se necesita en el futuro. */
.umivale-section-title.has-text-align-left  { text-align: left; }
.umivale-section-title.has-text-align-right { text-align: right; }

/* Espaciado entre bloques. Los bloques de the_content() viven en
   .page__content y no llevan clase .wp-block en frontend, así que apuntamos
   a sus hijos directos dentro de la card. */
.card-flotante .page__content > * {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.card-flotante .page__content > *:first-child { margin-top: 0; }
.card-flotante .page__content > *:last-child { margin-bottom: 0; }

/* Párrafos consecutivos: menos separación entre sí (los <p> de core/paragraph
   y core/html NO llevan clase .wp-block-paragraph en frontend, por eso se
   apunta a `> p + p`). */
.card-flotante .page__content > p + p { margin-top: 0.5rem; }

/* Lista con checks azules (ul.checks de los bloques texto → core/html).
   Réplica de .bloque-texto :deep(ul.checks) de suma-intermutual.vue. */
.card-flotante .page__content ul.checks {
  list-style: none;
  width: fit-content;
  margin: 0 auto;
  padding-left: 24px;
}
.card-flotante .page__content ul.checks li {
  position: relative;
  padding-left: 24px;
}
.card-flotante .page__content ul.checks li::before {
  content: "\2714";
  color: #124D91;
  position: absolute;
  left: 0;
}

/* ==========================================================================
   Clases custom del HTML de los mocks (portal-de-transparencia, canal,
   currículums, normativa) — venían de <style scoped> de las pages Vue.
   ========================================================================== */

/* Subtítulo de sección (spans/h3 dentro del HTML libre). */
.card-flotante .page__content .subtitulo-seccion { font-weight: 600; color: #124D91; }

/* Fallback del grid Tailwind "grid gap-8 md:grid-cols-2" (info económica):
   izq = "1. Contratos y convenios"; der = "2-5". Columnas alineadas arriba. */
.card-flotante .page__content .grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 768px) {
  .card-flotante .page__content .grid { grid-template-columns: repeat(2, 1fr); }
}
/* Enlaces de la info económica (portal): sin subrayado (underline solo en hover). */
.card-flotante .page__content .grid a { text-decoration: none; }
.card-flotante .page__content .grid a:hover { text-decoration: underline; }

/* ── Canal de cumplimiento ──────────────────────────────────────────────── */
.card-flotante .page__content .callout-azul {
  background: #eef3f9;
  border-left: 4px solid #124D91;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.card-flotante .page__content .callout-azul p { margin: 0; }
.card-flotante .page__content .subtitulo-portal {
  text-align: center;
  color: #124D91;
  font-weight: 700;
  font-size: 1.25em;
  margin: 1.5rem 0 0.5rem;
}
.page-canal-cumplimiento .umivale-grid-imagen-texto { padding: 0; }
/* WP auto-centra .wp-block-heading a 1024px (margin-left:auto) dentro del contenedor de 1160px
   → heading queda en left:128px. Los párrafos (core/paragraph → <p>) no reciben ese centering
   por defecto — se lo aplicamos manualmente para alinearlos al mismo punto. */
.page-canal-cumplimiento .card-flotante .page__content > p,
.page-empleados-empleadas-del-hogar .card-flotante .page__content > p,
.page-trabajador .card-flotante .page__content > p {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
.page-canal-cumplimiento .umivale-grid-iconos__item h4 { font-size: 1.1em; margin: 0 0 0.25rem; }

/* ── Currículums ────────────────────────────────────────────────────────── */
.card-flotante .page__content .cv-rol {
  text-align: center;
  color: #3C4858;
  font-weight: 600;
  font-size: 1.1em;
  margin: 0 0 1rem;
}
.card-flotante .page__content .cv-foto {
  float: right;
  width: 170px;
  height: 178px;
  overflow: hidden;
  margin: 0 1.5rem 1rem 1.5rem;
  border-radius: 8px;
}
.card-flotante .page__content .cv-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .card-flotante .page__content .cv-foto { float: none; display: block; margin: 0 auto 1.5rem; }
}
.card-flotante .page__content .cv-rubro { color: #124D91; font-weight: 700; margin-top: 1.25rem; }

/* Currículums: el contenido (texto + foto si existe) se centra como una unidad
   de ancho fijo dentro de la card. La foto flota a la derecha DENTRO de este
   contenedor centrado (no relativa a la card completa). */
body[class*="page-curriculum-"] .card-flotante .page__content .cv-content {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ── Normativa de gestión ───────────────────────────────────────────────── */
.card-flotante .page__content .marco-legal-img {
  width: 520px;
  height: 198px;
  max-width: 100%;
  overflow: hidden;
  float: right;
  margin: 0 0 1rem 1.5rem;
}
.card-flotante .page__content .marco-legal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .card-flotante .page__content .marco-legal-img { float: none; display: block; margin: 0 0 1rem; }
}

/* Espaciado compacto entre párrafos top-level (core/paragraph). */
.card-flotante .page__content > p { margin: 0.75rem 0; }

/* ── Texto enriquecido (uv_html → .uv-richtext): caja única, contenido
   alineado con los títulos, espaciado compacto. ── */
.card-flotante .page__content .uv-richtext > * { margin-top: 0; margin-bottom: 0.5rem; }
.card-flotante .page__content .uv-richtext > *:last-child { margin-bottom: 0; }
.card-flotante .page__content .uv-richtext > h2 { margin-top: 1.5rem; margin-bottom: 0.75rem; }
.card-flotante .page__content .uv-richtext > h2:first-child { margin-top: 0; }
.card-flotante .page__content .uv-richtext > h3 { font-size: 1.3em; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.card-flotante .page__content .uv-richtext > h3:first-child { margin-top: 0; }
.card-flotante .page__content .uv-richtext > h4 { font-size: 1.2em; font-weight: 700; margin-top: 1.25rem; margin-bottom: 0.25rem; }
.card-flotante .page__content .uv-richtext > h4:first-child { margin-top: 0; }
/* h3/h2 al inicio de un bloque html que sigue a otro: recuperar separación que :first-child elimina */
.card-flotante .page__content .wp-block-html + .wp-block-html .uv-richtext > h3:first-child { margin-top: 2.5rem; }
.card-flotante .page__content .wp-block-html + .wp-block-html .uv-richtext > h2:first-child { margin-top: 2.5rem; }
/* h3/h2 al inicio de un bloque html que sigue a un banner-cta */
.card-flotante .page__content .wp-block-umivale-banner-cta + .wp-block-html .uv-richtext > h3:first-child { margin-top: 2.5rem; }
.card-flotante .page__content .wp-block-umivale-banner-cta + .wp-block-html .uv-richtext > h2:first-child { margin-top: 2.5rem; }
/* h2 al inicio de un bloque html que sigue a un banner-licitaciones */
.card-flotante .page__content .wp-block-umivale-banner-licitaciones + .wp-block-html .uv-richtext > h2:first-child { margin-top: 2.5rem; }
/* Separación entre banner-licitaciones y banner-cta consecutivos */
.card-flotante .page__content .wp-block-umivale-banner-licitaciones + .wp-block-umivale-banner-cta { margin-top: 2rem; }
/* Tablas en contenido richtext */
.card-flotante .page__content .uv-richtext table { width: 100%; border-collapse: collapse; font-size: 0.9em; margin: 1rem 0; }
.card-flotante .page__content .uv-richtext table th,
.card-flotante .page__content .uv-richtext table td { border: 1px solid #d0d9e8; padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.card-flotante .page__content .uv-richtext table th { background: #f0f4fa; font-weight: 700; color: #124D91; }
.card-flotante .page__content .uv-richtext table tr:nth-child(even) td { background: #f8fafc; }
/* DL: términos en negrita con separación vertical entre entradas */
.card-flotante .page__content .uv-richtext dl dt { font-weight: 700; margin-top: 1rem; }
.card-flotante .page__content .uv-richtext dl dt:first-child { margin-top: 0; }
.card-flotante .page__content .uv-richtext > ul:not(.checks),
.card-flotante .page__content .uv-richtext > ol { padding-left: 1.25rem; }

/* Título de sección pegado a su contenido richtext (en vez del gap de 2.5rem). */
.card-flotante .page__content > .umivale-section-title { margin-bottom: 0.75rem; }
.card-flotante .page__content > .umivale-section-title + .uv-richtext { margin-top: 0; }

/* Normativa de gestión: subtítulo "Normativa de aplicación" a 1.8em, gris oscuro.
   Section-titles (umivale-section-title) usan el default 2em global — sin override. */
.page-normativa-de-gestion .card-flotante .page__content .subtitulo-seccion { color: #3C4858; font-size: 1.8em; }

/* Headings nativos: WP inyecta margin-left:auto !important en .wp-block-heading
   globalmente vía layout CSS de theme.json. Se override con !important para
   alinear el borde izquierdo de los headings con el de los párrafos (left=90).
   core/paragraph renderiza como <p class=""> — selector por tag, no por clase WP. */
.page-normativa-de-gestion .card-flotante .page__content > .wp-block-heading {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 64rem;
}
.page-normativa-de-gestion .card-flotante .page__content > p {
  max-width: 64rem;
}

/* Legal (accesibilidad, política de cookies): los headings nativos reciben
   margin-left:auto inyectado por WP (ver comentario arriba) y quedan
   centrados; los párrafos no reciben ese margin, así que con solo
   max-width quedan pegados a la izquierda — se les agrega el mismo
   margin:auto para alinear el borde con los headings.
   Selector .page-bare__content (no .card-flotante .page__content): estas 2
   vistas corren en page-bare.php desde el fix de chrome — el selector viejo
   apuntaba a markup que ya no existe ahí y dejó de aplicar. */
.page-accesibilidad .page-bare__content > p,
.page-politica-de-cookies .page-bare__content > p {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* politica-de-cookies: la tabla de cookies (core/table, hasFixedLayout) se
   desborda del ancho de página_bare__content (860px) en columnas anchas
   (ej. "Descripción") — fixed layout + word-wrap para que envuelva en vez
   de generar scroll horizontal. */
.page-politica-de-cookies .page-bare__content table {
  width: 100%;
  table-layout: fixed;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* proteccion-de-datos: el fondo verde de los headers de tabla (#d1ec9f en el
   original) no tiene dónde ir en los atributos de core/table (sin soporte de
   color por celda) — se resuelve por CSS, mismo color en las 4 tablas. */
.page-proteccion-de-datos .page-bare__content table thead td,
.page-proteccion-de-datos .page-bare__content table thead th {
  background-color: #d1ec9f;
}

/* Atención al cliente: h3 "Otros canales"/"Hojas de reclamaciones" salían con
   el tamaño h3 default del tema (18.72px); el original usa 28.8px (.featured-news h3). */
.page-atencion-al-cliente .card-flotante .page__content h3 {
  font-size: 1.5rem;
}

/* "Otros canales"/"Hojas de reclamaciones": bullets redondos normales. */
.page-atencion-al-cliente .card-flotante .page__content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
}

/* Quienes somos: H2 "Suma Intermutual" — font-size y text-align fijos de diseño.
   Color viene del atributo textColor:"primary" emitido por uv_heading() en el build. */
.page-quienes-somos .wp-block-heading.umivale-section-title {
  font-size: 1.8em;
  text-align: left;
}

/* Alineación de bloques nativos sueltos en quienes-somos, sección
   "¿Qué es Suma Intermutual?" — para que coincidan con el ancho de
   los bloques umivale/grid-imagen-texto (max 64rem) de la misma vista. */
.page-quienes-somos .wp-block-heading.umivale-section-title,
.page-quienes-somos .page__content > p,
.page-quienes-somos .page__content > .wp-block-image {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Trabaja con nosotros: indentación adicional del cuerpo para alinear
   visualmente con el breadcrumb "Conócenos" (~165px desde card-left).
   .card-flotante ya aporta 60px de padding → +100px aquí = 160px total.
   Scoped para no afectar otras vistas institucionales. */
.page-trabaja-con-nosotros .page__content {
  padding-left: 100px;
  padding-right: 100px;
}


/* Separador.
   Core (block-library/theme.css) fija width:100px con
   .wp-block-separator:not(.is-style-wide):not(.is-style-dots) — especificidad
   (0,3,0) — que pisa cualquier width nuestro de menor especificidad. Por eso
   forzamos el ancho completo con !important. */
.wp-block-separator {
  border: none;
  border-top: 1px solid rgb(226, 232, 240);
  margin: 1.5rem 0;
}
.card-flotante .wp-block-separator {
  width: 90% !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   CUERPO DE ARTÍCULO (ficha_novedad) — Fase 1 verbatim
   Replica las clases de imagen embebida del CMS original (Liferay/Bootstrap)
   para reproducir 1:1 el cuerpo capturado: imagen flotada + texto que la
   envuelve. El resto del estilo del cuerpo (text-align:justify, font-size,
   color de texto) viaja como estilos INLINE dentro del HTML verbatim guardado
   en el core/html, así que no necesita reglas aquí. Reusable por todas las
   fichas.
   ========================================================================== */

/* Imágenes embebidas en párrafo con float (clases del HTML original). El float
   no viene en estilo inline sino en estas clases, así que hay que declararlas. */
.card-flotante .page__content .uv-richtext .pull-right,
.card-flotante .page__content .uv-richtext .img-embeded-paragraph-right {
  float: right;
  margin: 6px 0 16px 28px;
}
.card-flotante .page__content .uv-richtext .pull-left,
.card-flotante .page__content .uv-richtext .img-embeded-paragraph-left {
  float: left;
  margin: 6px 28px 16px 0;
}
.card-flotante .page__content .uv-richtext img.img-fluid { max-width: 100%; height: auto; }

/* Botón de descarga del original (clase Liferay `.download-button.text-center`),
   usado por la serie "Consejo Saludable": infografía + enlace de descarga debajo.
   Font Awesome 4.7 (icono fa-download) ya lo encola el tema. NOTA: es un componente
   RECURRENTE → propuesto como bloque umivale/boton-descarga para Fase 2; este CSS es
   la réplica de Fase 1 (centrado + icono), a afinar al crear el bloque. */
.card-flotante .page__content .uv-richtext .download-button { clear: both; text-align: center; margin: 1.5rem 0; }
.card-flotante .page__content .uv-richtext .download-button .fa-download { margin-right: 8px; }

/* La caja del cuerpo debe contener sus floats: la fecha y la navegación van
   como hermanos fuera de .page__content y no deben solaparse con la imagen. */
body.single-ficha_novedad .page__content::after { content: ''; display: table; clear: both; }

/* Cuerpo de artículo: tipografía base + espaciado de párrafos (las reglas
   genéricas .uv-richtext > * son más compactas, pensadas para institucionales). */
body.single-ficha_novedad .page__content .uv-richtext { color: #3C4858; line-height: 1.7; }
body.single-ficha_novedad .page__content .uv-richtext > p { margin: 0 0 1rem; }

/* Subtítulos de fichas (<h2>). Corregido 2026-06-30, dos rondas:
   (1) El primer intento medía el font-size COMPUTADO del <h2> en sí, pero el
   texto real siempre viaja envuelto en `<span style="font-size:11pt"><strong>...`
   (artefacto de pegado Word→Liferay) — ese span, por ser estilo INLINE, le
   gana a CUALQUIER regla externa apuntando al <h2>, así que ese primer fix
   era HTML válido pero invisible en la práctica.

   Medido el span/strong REAL (no el h2) con un perfil de Chrome limpio (sin
   zoom, devicePixelRatio:1, para descartar contaminación de sesiones
   anteriores) contra 2 artículos reales: 29.3333px — consistente en 5
   headings de los 2 artículos. El bold ya lo da el <strong> (weight:700),
   no hace falta tocarlo. OJO: "11pt" NO resuelve a su conversión estándar
   (11pt=14.667px) en el sitio original — el framework base de Liferay hace
   algo distinto adentro de un heading vs. adentro de un párrafo normal (un
   <span style="font-size:11pt"> dentro de un <p> mide 16px en el original,
   no 14.667 ni 29.33 — un TERCER valor) — no se pudo determinar el mecanismo
   exacto sin cargar su framework completo, así que esto es un valor medido y
   fijado, no derivado de una fórmula. Acotado a <h2> nomás (es el único nivel
   de heading real que usa este lote) — si aparece <h3>/<h4>/etc. verbatim en
   otra ficha, medir ese span puntual antes de asumir el mismo valor.

   (2) El selector original solo cubría Fase 1 (`.uv-richtext > h2`). Al pasar
   estas fichas a Fase 2 (bloques), `uv_article_blocks()` convierte el <h2> en
   `core/heading` (`uv_strip_attrs()` limpia el <h2> pero NO es recursivo —
   el <span style="font-size:11pt"> interno queda intacto) — el heading ya no
   vive dentro de `.uv-richtext` (ese wrapper desaparece en Fase 2), así que
   el selector original dejó de matchear y el bug volvió. Generalizado a
   `.page__content h2` (sin `.uv-richtext >` ni hijo-directo) para cubrir
   ambos modos con una sola regla — confirmado que sigue sin afectar
   institucionales (selector arranca en `body.single-ficha_novedad`).

   !important es necesario: es la ÚNICA forma de que una regla externa le
   gane a un estilo inline (`style="font-size:11pt"` en el span) — no hay
   selector, por específico que sea, que lo logre sin esto. */
body.single-ficha_novedad .page__content h2 {
  font-size: 36.4px !important; /* h2 BARE (sin span) — ej. <h2><strong>Vídeo interactivo</strong></h2>. Encontrado 2026-06-30 (Fase 2, accidentes-bicis-patinetes-208): faltaba esta regla, el caso bare caía a 24px (default crudo). !important por el mismo motivo de especificidad que h3/h4 (nota más abajo). */
  font-weight: 400 !important; /* base para que el <strong> anidado (bolder relativo) resuelva a 700, no a 900 — ver nota abajo */
  margin-top: 20px;    /* medido en original: 20px (vs 2.5rem/40px del genérico page__content > *) */
  margin-bottom: 10px; /* medido en original: 10px */
  clear: both; /* evita que las imágenes con float:right (wp-block-image alignright) reduzcan el ancho disponible del heading — en el original los h2 siempre ocupan el ancho completo */
}
body.single-ficha_novedad .page__content .uv-richtext > h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}
body.single-ficha_novedad .page__content h2 span {
  font-size: 29.3333px !important; /* h2 CON span — gana por !important sobre la regla bare de arriba Y sobre el inline del span */
}
/* <strong>/<b> del navegador usan font-weight:bolder (RELATIVO) por default,
   no un 700 fijo — anidado dentro de un <h2> que el browser pone en bold
   (700) por su cuenta, "bolder" salta a 900 (demasiado pesado, no coincide
   con el original que mide 700 ahí). Forzar el weight base del h2 a 400
   (arriba) hace que "bolder" resuelva a 700 correctamente — confirmado con
   getComputedStyle tras el fix. */

/* <h3> de fichas — encontrado 2026-06-30, mismo día, lote siguiente.
   HALLAZGO CLAVE que reescribe el modelo mental del fix de h2 de arriba: el
   tamaño renderizado NO depende del valor declarado en el span/strong — el
   framework del original fuerza un tamaño FIJO POR NIVEL DE HEADING,
   ignorando por completo qué pt/px haya puesto el autor inline. Confirmado
   midiendo el MISMO `<span style="font-size:18px">` en 2 contextos
   distintos del mismo artículo (mitos-alimentarios): dentro de un <h2> mide
   29.3333px (el mismo valor ya fijado arriba, que antes solo se había visto
   con "11pt" declarado) — dentro de un <h3> mide 16px. Re-confirmado el
   mismo 16px en un <h3> de OTRO artículo (tabaquismo-laboral, su propio
   "18px" declarado). Caso aparte: un <h3> SIN span (bare `<h3><strong>...`,
   ej. valencia-contra-cancer) mide 25.55px — un tercer valor, porque ahí no
   hay un inline que vencer, el <h3> usa el tamaño base del framework
   directo. Los 3 valores (h2-span 29.33 / h3-span 16 / h3-bare 25.55) son
   medidas reales, no una fórmula — si aparece h4+ con o sin span, medir de
   nuevo antes de asumir que seguirá el mismo patrón.

   !important en la regla bare (sin span) — gotcha encontrado al verificar
   contra una ficha que SEGUÍA en Fase 1 (no en Fase 2 como los primeros
   casos probados): en modo verbatim `.uv-richtext` sí existe como ancestro,
   así que la regla institucional genérica `.card-flotante .page__content
   .uv-richtext > h3 { font-size:1.3em }` (3 clases) le GANA en especificidad
   a esta regla de ficha sin !important (solo 2 clases: single-ficha_novedad
   + page__content) — confirmado que sin !important quedaba en 20.8px (el
   1.3em institucional) en vez de 25.55px en una ficha recién migrada.
   Mismo motivo aplica a la regla de h4 de abajo. */
body.single-ficha_novedad .page__content h3 {
  font-size: 25.55px !important; /* h3 bare (sin span) — ej. <h3><strong>texto</strong></h3> */
  font-weight: 400 !important;   /* mismo motivo que h2: base para que <strong> (bolder) resuelva a 700 */
  margin-top: 20px;    /* medido en original (bienestar-emocional--el-miedo/la-rabia/la-tristeza): 20px, igual que h2 (vs 2.5rem/40px del genérico page__content > *, que es lo que se aplicaba sin esta regla) */
  margin-bottom: 10px; /* medido en original: 10px */
}
body.single-ficha_novedad .page__content .uv-richtext > h3 {
  margin-top: 20px; /* mismo fix que la regla de arriba, pero para Fase 1 (verbatim): la regla institucional
                        `.uv-richtext > h3 { margin-top:1.5rem; margin-bottom:0.5rem }` (línea ~732, 3 clases)
                        empata en especificidad con la de arriba (2 clases) y gana por orden de aparición si
                        no se declara acá explícitamente — mismo patrón que la regla `.uv-richtext > h2` de arriba. */
  margin-bottom: 10px;
}
body.single-ficha_novedad .page__content h3 span {
  font-size: 16px !important; /* h3 CON span — gana por !important, vence al inline Y a la regla de arriba */
}

/* <h4> bare de fichas — encontrado 2026-06-30, mismo día (abuso-ansioliticos:
   "Riesgos y dudas", "Relación Laboral", ambos `<h4><strong>texto</strong></h4>`
   sin span). Medido contra el original: 18.2px / weight 400 base (strong→700)
   — confirmado en 2 instancias del mismo artículo. La regla institucional
   genérica (.uv-richtext > h4, más abajo en el archivo) da 1.2em/700 directo
   en el h4 = 19.2px Y hace que el <strong> anidado (bolder) salte a 900 (el
   mismo problema de h2/h3 sin resolver para h4). !important necesario por el
   mismo motivo de especificidad que h3 (ver nota arriba) — confirmado sin
   él quedaba en 19.2px/900 en vez de 18.2px/700. Sin casos de h4 CON span
   medidos todavía — si aparece, medir antes de asumir que sigue el patrón de
   h2/h3 (cada nivel tuvo su propio valor, no hay fórmula). */
body.single-ficha_novedad .page__content h4 {
  font-size: 18.2px !important;
  font-weight: 400 !important;
  line-height: 25.48px; /* medido en original: 18.2px × 1.4 */
  margin-top: 10px !important;    /* medido en original (vs 24px browser default) */
  margin-bottom: 10px !important; /* medido en original (vs 8px WP default) */
}
/* h4 CON span — el framework Liferay fuerza 16px ignorando el inline de autor (18px).
   Mismo patrón que h2 span (29.33px) y h3 span (16px). Medido en compra-saludable. */
body.single-ficha_novedad .page__content h4 span {
  font-size: 16px !important;
}

/* Párrafos de artículo: Liferay ignora TODOS los inline font-size del autor
   y fuerza 16px/22px sin excepción. Confirmado midiendo compra-saludable:
   — 11pt (86 fichas) → 16px
   — 18px (29 fichas, ej. <p has-text-color style="color:...;font-size:18px">) → 16px
   — 12pt (23 fichas) → 16px (coincide con valor computado de 12pt, sin efecto visual)
   — <p> sin font-size → 16px
   Verificado: no existe font-size:9pt ni 7pt en ninguna ficha (0 en BD), por lo
   que la regla universal es segura. Los 10pt (2 fichas) tampoco existen según BD. */
body.single-ficha_novedad .page__content p {
  font-size: 16px !important;
  line-height: 22px !important;
}

/* "También te puede interesar" (h2.umivale-section-title) — sobreescribe
   la regla bare de h2 (36.4px !important) con +1 clase de especificidad.
   Ficha-novedades: label chico neutro (16px/500).
   Blog wrapper: título de sección azul (22.4px/700) — el inline del template
   ya lo intentaba a 22.4px pero sin !important, perdía contra la regla bare. */
body.single-ficha_novedad .page__content h2.umivale-section-title {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #124D91 !important; /* medido en original (ficha-novedades): azul institucional */
}
body.single-ficha_novedad.uv-wrapper-blog .page__content h2.umivale-section-title {
  font-size: 22.4px !important;
  font-weight: 700 !important;
  color: #124D91 !important;
}

/* Listas verbatim (<ul>/<ol> sin clase — el navegador ya las indenta 40px por
   default de fábrica, PERO la regla genérica .uv-richtext > ul:not(.checks)
   las pisa a 1.25rem/20px, pensada para institucionales). Medido contra el
   original: padding-left:40px consistente en los artículos comparados. */
body.single-ficha_novedad .page__content .uv-richtext > ul:not(.checks),
body.single-ficha_novedad .page__content .uv-richtext > ol {
  padding-left: 40px;
}

/* En mobile la imagen flotante pasa a bloque completo. */
@media (max-width: 640px) {
  .card-flotante .page__content .uv-richtext .pull-right,
  .card-flotante .page__content .uv-richtext .pull-left,
  .card-flotante .page__content .uv-richtext .img-embeded-paragraph-right,
  .card-flotante .page__content .uv-richtext .img-embeded-paragraph-left {
    float: none; display: block; margin: 0 auto 16px;
  }
}

/* --------------------------------------------------------------------------
   FASE 2 (cuerpo en bloques nativos editables). Sin wrapper .uv-richtext: los
   bloques son hijos directos de .page__content. El estilo GLOBAL del artículo
   (que en Fase 1 viajaba inline) vive acá, así los bloques quedan limpios y
   válidos sin perder fidelidad. El color de texto SÍ va por bloque (atributo).
   -------------------------------------------------------------------------- */
/* Centrar el CONTENEDOR del cuerpo (no cada hijo). Por defecto el tema centra
   cada hijo de .page__content individualmente (.page__content > * { margin:auto })
   para que alignfull/alignwide se extiendan. Pero con ese modelo una IMAGEN
   FLOTADA no se alinea con el texto: el float se posiciona contra el borde del
   contenedor ancho (~1260), no contra el bloque de texto (1024), y "sobresale".
   Centrando el contenedor a 1024 y dejando los hijos a ancho completo, el float
   queda contra el mismo borde que el texto → alineados. Las fichas no usan
   alignfull en el cuerpo, así que no se pierde nada. Scope solo fichas: NO toca
   las páginas institucionales (que sí necesitan el centrado por-hijo). */
body.single-ficha_novedad .page__content {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* Blog wrapper: ancho del contenido ampliado para igualar el original
   (1140px medido con getBoundingClientRect en el sitio real a 1440px).
   El padding propio del page__content (1.5rem) se quita porque la card
   ya provee 60px de margen lateral — así el box de contenido queda
   exactamente a 1140px, centrado en los 1260px del interior de la card. */
body.single-ficha_novedad.uv-wrapper-blog .page__content {
  max-width: 1140px;
  padding-left: 0;
  padding-right: 0;
}
body.single-ficha_novedad .page__content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
body.single-ficha_novedad .page__content > p {
  text-align: justify;  /* core/paragraph no soporta justify como atributo */
  margin: 0 0 10px;     /* medido en original: margin-bottom:10px (vs 1rem/16px anterior) */
}
/* Los <li> del original traen text-align:justify (se quita del <li> al decomponer)
   + el <ul> traía margin-left:40px (indentación). Como es estilo GLOBAL del cuerpo,
   va por CSS: justify de items + sangrado de la lista. El margen vertical se baja
   del 2.5rem genérico para que la lista vaya PEGADA a su párrafo introductorio
   (como en el original), no separada por un hueco grande. */
body.single-ficha_novedad .page__content .wp-block-list {
  margin: 0.25rem 0 1rem 40px;
}
body.single-ficha_novedad .page__content .wp-block-list li { text-align: justify; }
/* El font-size NO se fija global: varía por artículo y por elemento (la letra
   chica legal es 7pt) → se preserva por bloque (style.typography.fontSize). */
body.single-ficha_novedad .page__content > p.has-text-align-right { text-align: right; }
body.single-ficha_novedad .page__content > p.has-text-align-center { text-align: center; }
body.single-ficha_novedad .page__content > h2:not(.umivale-section-title),
body.single-ficha_novedad .page__content > h3:not(.umivale-section-title),
body.single-ficha_novedad .page__content > h4 { color: #3C4858; }
/* "También te puede interesar" (y cualquier section-title de ficha): es un label
   chico (16px/500), no el 2em/bold de las páginas institucionales. */
body.single-ficha_novedad .page__content .umivale-section-title {
  font-size: 1em;
  font-weight: 500;
}
/* Título de las cards de relacionados (umivale/grid-cards-enlace, bloque compartido —
   también lo usan páginas institucionales como portal-de-transparencia, por eso el
   override va ACÁ scopeado a fichas y no en el style.css del bloque). El bloque por
   defecto las pinta en #124D91 (azul), pero el original de Liferay las muestra en
   #3C4858 (el mismo gris del h1/h4 del artículo) — confirmado con getComputedStyle. */
body.single-ficha_novedad .umivale-gce__title { color: #3C4858; }
/* Títulos de cards relacionadas — tamaños medidos en el original (1440px):
   - ficha-novedades (canónica): 22px/700 — la regla de h3 (25.55px !important)
     aplasta el default; necesita !important para ganarle.
   - blog wrapper: 20px/400 — el selector .uv-wrapper-blog añade una clase extra,
     gana por especificidad sobre la regla de ficha-novedades de arriba. */
body.single-ficha_novedad .page__content .umivale-gce__title {
  font-size: 22px !important;
  font-weight: 700 !important;
}
body.single-ficha_novedad.uv-wrapper-blog .page__content .umivale-gce__title {
  font-size: 20px !important;
  font-weight: 400 !important;
}
/* Links del cuerpo SIN color propio (sin <span style="color:..."> en el
   original): color institucional #124D91, SIN subrayado. Corregido
   2026-06-30 — el valor anterior (#00549a + underline) no se sostenía contra
   el original: medido en 2 artículos reales (un link "aquí." suelto en
   claves-seguridad-social, y los 2 CTA de habitos-alimentarios-sostenibles)
   y en ambos casos el <a> en sí NO lleva subrayado (textDecorationLine:none
   medido con getComputedStyle). El primer chequeo de estos 2 CTA había
   medido mal: el color real (#00549a) vive en un <span> HIJO del <a> en el
   HTML capturado (preservado verbatim, ya se ve bien sin tocar nada), pero
   el <a> ancestro con text-decoration:underline propaga la línea por debajo
   del span igual aunque el span no declare su propio text-decoration — por
   eso se veía subrayado pese al span. El link "aquí." (sin span propio)
   confirma el default real: color #124D91 (el mismo azul institucional de
   nav/breadcrumbs), sin subrayado. Cualquier link con su propio <span
   style="color:..."> en el HTML capturado sigue ganando (más específico),
   esta regla es solo el fallback para links sin estilo propio. */
body.single-ficha_novedad .page__content a { color: #124D91; text-decoration: none; }
/* Regresión encontrada al hacer el fix de arriba (2026-06-30): en Fase 2 el
   color de un link-CTA NO vive en un span anidado (eso es solo Fase 1
   verbatim) — vive en el atributo del BLOQUE, como `<p class="has-text-color"
   style="color:#00549a">` (Gutenberg ya marca así cualquier core/paragraph
   con color custom). Un color heredado del ancestro NUNCA gana contra una
   regla declarada que apunta directo al <a> (la herencia es la prioridad más
   baja del cascade, sin importar qué tan poco específica sea la regla
   declarada) — por eso la regla de arriba pisaba el color del párrafo en
   CUALQUIER párrafo con color propio, no solo en el caso ya conocido de
   "Volver a la Newsletter" (que tenía su propio parche, ahora innecesario
   porque éste lo cubre en general). Confirmado el bug en vivo:
   alimentacion-saludable (Fase 2) mostraba su CTA en #124D91 en vez del
   #00549a real del bloque, hasta agregar esta regla. */
body.single-ficha_novedad .page__content p.has-text-color a { color: inherit; }
/* <mark class="has-inline-color"> (color de un fragmento dentro de un párrafo,
   Fase 2) hereda el fondo amarillo por defecto de <mark> del navegador — el
   tema no lo resetea en ningún otro lado. Solo color de texto, sin resaltado.
   Diagnóstico del regreso del amarillo en aviso-legal/politica-de-cookies:
   NO es un problema de especificidad (3 clases + 1 tag le gana de sobra al
   `mark{}` del user-agent, que es 1 tag) — es que el selector `.page__content`
   dejó de existir ahí: esas 2 vistas pasaron a page-bare.php (fix de chrome),
   cuyo contenedor es `.page-bare__content`, no `.card-flotante .page__content`.
   El selector viejo nunca dejó de estar en el CSS, dejó de MATCHEAR. */
body.single-ficha_novedad .page__content mark.has-inline-color,
body.page .page__content mark.has-inline-color,
.page-bare__content mark.has-inline-color { background: none; }

/* core/image con align (float). WP no encola classic-themes.css (que trae el
   float de .alignleft/.alignright) en temas con theme.json → se declara acá. */
body.single-ficha_novedad .page__content .wp-block-image.alignright { float: right; margin: 6px 0 16px 28px; }
body.single-ficha_novedad .page__content .wp-block-image.alignleft  { float: left;  margin: 6px 28px 16px 0; }
body.single-ficha_novedad .page__content .wp-block-image.aligncenter { margin-left: auto; margin-right: auto; }
body.single-ficha_novedad .page__content .wp-block-image img { max-width: 100%; height: auto; }
@media (max-width: 640px) {
  body.single-ficha_novedad .page__content .wp-block-image.alignright,
  body.single-ficha_novedad .page__content .wp-block-image.alignleft { float: none; margin: 0 auto 16px; }
}

/* Galería de imágenes sin float lado a lado (uv_img_row_to_block): el layout
   flex + blockGap + flex-wrap ya los provee WordPress de forma nativa (atributo
   `layout` del core/group, sin necesidad de CSS propia — confirmado insertando
   un bloque real y leyendo el HTML renderizado). La única declaración propia
   que hacía falta acá (display/gap/wrap/min-width) quedó retirada: era para la
   versión vieja, donde cada <img> era hijo DIRECTO del flex container (un
   <span>) — eso sí disparaba el problema de "specified size suggestion" de
   flexbox. Ahora el hijo flex es el <figure class="wp-block-image"> de cada
   core/image (no el <img>), así que el shrink proporcional funciona solo, sin
   el hack de min-width:0. Ver build-helpers.php / docs/Bitacora.md (2026-06-29). */

/* <table align="center|left|right"> (HTML legacy, preservado verbatim por el fallback
   core/html — ver uv_article_blocks). El navegador resolvería esto solo vía su hoja de
   estilos por defecto (margin:auto / float), pero `.page__content > *` (arriba) resetea
   margin-left/right:0 en TODOS los hijos directos con más prioridad que esa resolución
   por defecto — hay que restaurarlo a mano, por tabla, según SU PROPIO atributo (no es
   una decisión global: varía de ficha a ficha según cómo estaba la tabla en el original). */
body.single-ficha_novedad .page__content table[align="center"] { margin-left: auto; margin-right: auto; }
body.single-ficha_novedad .page__content table[align="left"] { float: left; margin-right: 16px; }
body.single-ficha_novedad .page__content table[align="right"] { float: right; margin-left: 16px; }

/* Tablas con `border="1" cellpadding="1" cellspacing="1"` (atributos HTML legacy,
   preservados verbatim). El navegador, SIN reset de CSS, los renderiza con
   border-collapse:separate + border-spacing:1px (líneas dobles / "relieve" 3D, mucho
   más gruesas y separadas que el original). El original SÍ tiene un reset de tabla
   (border-collapse:collapse + padding:0 en celdas, confirmado con getComputedStyle) —
   por eso ahí se ven líneas finas simples y las celdas compactas. */
/* La tabla (core/html, sin wrapper en frontend) es hijo DIRECTO de .page__content y
   por eso hereda el margin-top/bottom:2.5rem genérico institucional (`.page__content
   > * `, arriba) — el mismo que párrafo/lista/imagen ya tienen sobreescrito cada uno
   por su lado, pero que nadie había anulado para tabla. El original no tiene gap propio
   (margin:0, el espacio visible viene del margin-bottom:10px del <p> anterior). */
body.single-ficha_novedad .page__content table { border-collapse: collapse; border-spacing: 0; margin-top: 0; margin-bottom: 0; }
body.single-ficha_novedad .page__content table td,
body.single-ficha_novedad .page__content table th { padding: 0; }
/* Altura de fila: el <p> de cada celda NO hereda el reset de párrafo del cuerpo
   (`.page__content > p`, que es selector de HIJO DIRECTO — un <p> dentro de
   table>tbody>tr>td no es hijo directo). Sin ese reset cae al default crudo del
   navegador (margin:1em 0 = 16px arriba y abajo ⇒ filas ~84px), mucho más alto que el
   original (confirmado con getComputedStyle: margin-top:0, margin-bottom:10px ⇒ filas
   61px — es el reset `p{margin:0 0 10px}` típico de Bootstrap, que el sitio Liferay
   aplica globalmente y nuestro tema no tenía para <p> dentro de tablas). */
body.single-ficha_novedad .page__content table p { margin: 0 0 10px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background-color: #3C4858;
  color: #FFFFFF;
  padding: 1.875rem 0;
  font-family: 'Lato', sans-serif;
}
.site-footer,
.site-footer a,
.site-footer h4,
.site-footer p { color: #FFFFFF; }

.site-footer__inner {
  max-width: var(--uv-max-footer);
  margin: 0 auto;
  padding: 0 15px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

.footer-col__title {
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1.4em;
  margin: 10px 0 15px;
}
.footer-col__desc {
  font-size: 12pt;
  font-weight: 400;
  color: #fff;
  margin: 0 0 10px;
}
.footer-col__sellos {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.footer-col__sellos img { height: 32px; width: auto; object-fit: contain; }

.footer-col__list { list-style: none; margin: 0; padding: 0; }
.footer-col__list a {
  display: block;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.footer-col__list a:hover { background: rgba(255, 255, 255, 0.1); }

/* Barra inferior */
.site-footer__bottom { margin-top: 1.875rem; }
.site-footer__sep {
  border: none;
  border-top: 1.5px solid #fff;
  margin: 0 0 1.25rem;
}
.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.site-footer__social a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.site-footer__social a:hover { opacity: 0.75; }

.site-footer__copy {
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.site-footer__copy strong { font-weight: 700; }

/* ── Responsive topbar ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .topbar__inner { flex-wrap: wrap; }
  .topbar__actions { gap: 0.75rem; flex-wrap: wrap; }
  .topbar__link-text { display: none; }
}

/* ── Layout con sidebar (prestaciones) ──────────────────────────────────── */
.card-flotante .page__content.has-sidebar {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.card-flotante .page__content.has-sidebar .page__main {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 40px;
}

/* Full-width blocks dentro de page__main compensan el padding del card-flotante */
.card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-cta,
.card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-licitaciones,
.card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-icono,
.card-flotante .page__content.has-sidebar .page__main .alignfull {
  margin-left: -40px;
  margin-right: -60px;
}

@media (max-width: 768px) {
  .card-flotante .page__content.has-sidebar {
    flex-direction: column;
  }
  .card-flotante .page__content.has-sidebar .wp-block-umivale-sidebar-prestaciones {
    width: 100% !important;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid #e8eaed;
  }
  .card-flotante .page__content.has-sidebar .wp-block-umivale-sidebar-salud-absentismo {
    width: 100% !important;
    border-bottom: 1px solid #e8eaed;
  }
  .card-flotante .page__content.has-sidebar .page__main {
    padding-left: 0;
    padding-top: 24px;
  }
  .card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-cta,
  .card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-licitaciones,
  .card-flotante .page__content.has-sidebar .page__main .wp-block-umivale-banner-icono,
  .card-flotante .page__content.has-sidebar .page__main .alignfull {
    margin-left: -24px;
    margin-right: -24px;
  }
}

/* ── page-empresa — ajustes específicos de vista ─────────────────────────── */

/* Hero: título más estrecho para evitar que ocupe todo el ancho */
.page-empresa .hero__titulo {
  max-width: 600px;
}

/* Hero: botón CTA rojo institucional */
.page-empresa .hero__boton {
  background-color: #e63946;
}

/* S2 grid-iconos: PRL.svg → azul corporativo vía CSS filter (img, no SVG inline) */
.page-empresa .umivale-grid-iconos__icon-img[src*="PRL.svg"] {
  filter: brightness(0) saturate(100%) invert(27%) sepia(54%) saturate(893%) hue-rotate(186deg) brightness(87%) contrast(90%);
}

/* /trabajador: hero naranja → botón rojo */
.page-trabajador .hero__boton {
  background-color: #D92727;
}

/* /trabajador S1+S4 grid-iconos: PRL.svg → azul corporativo vía CSS filter */
.page-trabajador .umivale-grid-iconos__icon-img[src*="PRL.svg"] {
  filter: brightness(0) saturate(100%) invert(27%) sepia(54%) saturate(893%) hue-rotate(186deg) brightness(87%) contrast(90%);
}

/* /autonomo: hero naranja → botón rojo */
.page-autonomo .hero__boton {
  background-color: #D92727;
}

/* /autonomo S2 grid-iconos: PRL.svg → azul corporativo vía CSS filter */
.page-autonomo .umivale-grid-iconos__icon-img[src*="PRL.svg"] {
  filter: brightness(0) saturate(100%) invert(27%) sepia(54%) saturate(893%) hue-rotate(186deg) brightness(87%) contrast(90%);
}

/* /despacho: hero → botón rojo */
.page-despacho .hero__boton {
  background-color: #D92727;
}

/* online/empresas y online/personas: hero → botón rojo institucional, mismo
   valor que /trabajador, /autonomo y /despacho. */
.page-empresas .hero__boton,
.page-personas .hero__boton {
  background-color: #D92727;
}

/* S2 grid-iconos: labels enlazados — sin subrayado, color texto gris */
.page-empresa .umivale-grid-iconos__label a {
  color: #3c4858;
  text-decoration: none;
}
.page-empresa .umivale-grid-iconos__label a:hover {
  text-decoration: underline;
}

/* page-bare.php: páginas legales sin chrome del tema (fiel al original). */
.page-bare .page-bare__content {
  max-width: 860px;
  margin: 2rem auto;
  padding: 1rem 2rem;
}

/* ============================================================
   Ficha de centro (single-centro.php) — migración Red de Centros.
   TODO scoped a body.single-centro (R10: nada en style.css de bloques).
   Réplica del grid Bootstrap del original (col-md-6/12, embed-responsive,
   img-responsive/rounded) solo para esta plantilla.
   ============================================================ */
body.single-centro .hidden { display: none; }

body.single-centro .centro-content {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 0 2rem;
  color: #3C4858;
  font-family: 'Lato', sans-serif;
}
/* Validación V3: entre 1200 y 1260 de viewport el padding 60px de la
   card-flotante deja la fila en 1080px (columnas de 540 vs 570 en producción,
   que no tiene card) y el empaquetado de floats de las fichas justas —
   yecla/vega-baja — se invierte. Padding reducido SOLO en ese rango para que
   la fila mida los 1140 del original. */
@media (min-width: 1200px) and (max-width: 1260px) {
  body.single-centro .card-flotante { padding-left: 30px; padding-right: 30px; }
}
/*
 * Validación V3 — grid por FLOATS reales (Bootstrap 3, como el original).
 * El original posiciona todas las columnas con float:left; el float-flow
 * ATRAVIESA los wrappers itemscope (sin clearfix, su caja colapsa): así la
 * primera foto "fuera de scope" de murcia/yecla sube AL LADO del texto, las
 * demás caen en grilla de 2 (medido contra producción: left 23/593), y los
 * elementos no flotados (h2 suelto de la variante v2, texto roto de reus)
 * fluyen igual que en el original. Las emulaciones con flex/display:contents
 * probadas primero rompían esos casos de borde.
 * El clearfix va en .centro-content (el "row" único).
 */
body.single-centro .centro-content::after { content: ""; display: block; clear: both; }
/* Topología A del original: el wrapper de ubicación CONTIENE sus floats
   (equivale al clearfix del componente Liferay) → las fotos fuera de scope
   arrancan en pareja debajo, nunca en el hueco intermedio. */
body.single-centro .centro-content .uv-row-contenida::after { content: ""; display: block; clear: both; }
body.single-centro .centro-content .col-md-6 { float: left; width: 50%; box-sizing: border-box; padding: 0 15px; }
body.single-centro .centro-content .col-md-12 { float: left; width: 100%; box-sizing: border-box; padding: 0 15px; }
body.single-centro .centro-content .col-md-3 { float: left; width: 25%; box-sizing: border-box; padding: 0 15px; }
/* Clases de columna del dataset sin regla previa (H6 de la validación). */
body.single-centro .centro-content .col-md-4 { float: left; width: 33.3333%; box-sizing: border-box; padding: 0 15px; }
body.single-centro .centro-content .col-md-7 { float: left; width: 58.3333%; box-sizing: border-box; padding: 0 15px; }
body.single-centro .centro-content .col-xs-12 { float: left; width: 100%; box-sizing: border-box; padding: 0 15px; }
body.single-centro .centro-content .mb50 { margin-bottom: 50px; }
body.single-centro .centro-content .mt15 { margin-top: 15px; }
body.single-centro .centro-content .mb15 { margin-bottom: 15px; }
body.single-centro .centro-content .mt30 { margin-top: 30px; }
body.single-centro .centro-content .mb30 { margin-bottom: 30px; }
body.single-centro .centro-content .umivale-section-title.pl0 { padding-left: 0; text-align: left; }
/* margin-top 0 medido en producción (el default del tema metía 26.56px y
   alteraba la altura de la columna → empaquetado de floats — validación V3) */
body.single-centro .centro-content .umivale-section-title { margin-top: 0; margin-bottom: 15px; }
body.single-centro .centro-content p,
body.single-centro .centro-content address { font-style: normal; line-height: 24px; }
/* Validación V3: margen de párrafo de Bootstrap 3 (medido en producción:
   0 0 10px; el default del tema era 16px 0 y agrandaba la columna de texto,
   cambiando el empaquetado de floats en yecla). */
body.single-centro .centro-content p { margin: 0 0 10px; }
body.single-centro .centro-content { line-height: 24px; }
body.single-centro .centro-content a { color: #124D91; text-decoration: none; }
body.single-centro .centro-content a:hover { text-decoration: underline; }

body.single-centro .centro-content .img-responsive { max-width: 100%; height: auto; display: block; }
body.single-centro .centro-content .img-rounded { border-radius: 6px; }
body.single-centro .centro-content .imageBox { text-align: center; }

/* Mapa embebido 16:9 (equivalente de embed-responsive de Bootstrap). */
body.single-centro .centro-content .embed-responsive {
  position: relative;
  width: 100%;
  /* el original NO usa 16:9 real: caja de mapa a 30% del ancho (342/1140, medido) */
  padding: 0 15px 30%;
  height: 0;
  overflow: hidden;
}
body.single-centro .centro-content .embed-responsive .embed-responsive-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Validación V3: en el original el link vive en su propio htmlComponent
   col-md-12 (fila completa del row) — float a fila completa para que las
   fotos que vienen después no se le pongan al lado. Texto en el mismo lugar. */
body.single-centro .centro-content .uv-maps-link { float: left; width: 100%; margin: 10px 15px 30px; font-weight: 300; }
/* breadcrumb: producción usa 400/24px en estas fichas (medido; override scoped) */
body.single-centro .breadcrumbs__link,
body.single-centro .breadcrumbs__current,
body.single-centro .breadcrumbs__sep { font-weight: 400; line-height: 24px; }

/* Franja CTA de la app (bloque compartido de la sección). */
body.single-centro .umivale-call-action-container {
  background-image: url('../images/red-de-centros/cta/bg-blue-header.png');
  background-size: cover;
  background-position: center;
  padding: 40px 20px;
}
body.single-centro .uv-cta-row {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}
body.single-centro .uv-cta-img { flex: 0 0 33%; max-width: 33%; }
body.single-centro .uv-cta-img img { max-width: 100%; height: auto; margin: 0 auto; }
body.single-centro .uv-cta-text { flex: 1; }
body.single-centro .umivale-call-action-title {
  color: #fff;
  font-size: 28px;    /* medido: 28px exactos (no em — el base difiere) */
  font-weight: 500;
  line-height: 1.46;
  margin: 0 0 20px;
}
body.single-centro .umivale-btn-orange {
  display: inline-block;
  background: #FA6000;
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 11px 30px;
  font-size: 18px;    /* medido contra producción: 18px/400/lh1.4286 centrado */
  font-weight: 400;
  line-height: 1.4286;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
body.single-centro .umivale-btn-orange:hover { background: #d95300; text-decoration: none; }

/* Lightbox vanilla (réplica de los modales Bootstrap del original). */
body.single-centro .uv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.single-centro .uv-lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 6px;
}
body.single-centro .uv-lightbox__close {
  position: absolute;
  top: 16px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* Responsive: 1 columna en mobile (verificado contra el original en 375/768). */
@media (max-width: 767px) {
  body.single-centro .centro-content { padding: 0 8px 2rem; }
  body.single-centro .centro-content .col-md-6,
  body.single-centro .centro-content .col-md-4,
  body.single-centro .centro-content .col-md-3,
  body.single-centro .centro-content .col-md-7 { width: 100%; }
  body.single-centro .uv-cta-row { flex-direction: column; }
  body.single-centro .uv-cta-img { max-width: 70%; }
}

/* Sección parking/aviso de las fichas de centro (div.ccentros del original). */
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* V3: el texto y las fotos del parking FLUYEN en el float-flow como columnas
   hermanas del original (SIN clear: en port-barcelona la col del parking va
   EN FILA con la foto impar anterior — medido contra producción). El wrapper
   uv-parking-row es transparente al flow. */
body.single-centro .uv-parking-row {
  margin-top: 30px;
}
body.single-centro .uv-parking-row::after { content: ""; display: block; clear: both; }
body.single-centro .ccentros-text { color: #124D91; font-size: 18px; font-weight: 700; margin: 0 0 15px; }
body.single-centro .ccentros .icon-asistencia-social {
  display: block;
  float: left;
  padding: 0 20px 20px 0;
  font-family: 'icomoon';
  font-size: 68.8px;   /* medido contra producción (4.3em) */
  font-style: normal;
  line-height: 1;
  color: #124D91;
}
body.single-centro .ccentros .icon-asistencia-social::before { content: "\e907"; }

/* ============================================================
   Índice /red-de-centros/centros-propios (page-centros-propios.php).
   Scoped a body.page-centros-propios. Valores medidos con getComputedStyle
   contra producción (2026-07-06).
   ============================================================ */
body.page-centros-propios .hidden { display: none; }
body.page-centros-propios .cp-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 0 3rem;
  color: #3C4858;
  font-family: 'Lato', sans-serif;
}
body.page-centros-propios .cp-intro { max-width: 1340px; margin: 0 auto; padding: 0 30px; text-align: center; }
body.page-centros-propios .cp-intro h2 { color: #124D91; font-size: 32px; font-weight: 700; line-height: 1.3; margin: 0 0 24px; }
body.page-centros-propios .cp-intro h3 { color: #124D91; font-size: 29.2px; font-weight: 700; line-height: 1.3; max-width: 863px; margin: 40px auto 20px; }
body.page-centros-propios .cp-intro p { line-height: 24px; margin: 0 0 16px; }
body.page-centros-propios .cp-intro ul { display: inline-block; text-align: left; line-height: 24px; margin: 0 0 16px; }
body.page-centros-propios .cp-boton-wrap { margin: 10px 0 40px; }
body.page-centros-propios .umivale-btn-red {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #D92727;
  color: #fff;
  border-radius: 30px;
  padding: 5px 22px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: rgba(217, 39, 39, 0.14) 0 2px 2px 0, rgba(217, 39, 39, 0.2) 0 3px 1px -2px;
}
body.page-centros-propios .umivale-btn-red .material-icons { font-size: 17px; }
body.page-centros-propios .centros-grid-container .row { display: flex; flex-wrap: wrap; }
body.page-centros-propios .centros-grid-container h2 {
  flex: 0 0 100%;
  color: #3C4858;
  font-size: 32px;
  font-weight: 700;
  margin: 30px 0 0;
}
/* ⚠ el original repite la clase "centro-card" en TODOS los sub-elementos de la
   tarjeta (BEM roto, replicado verbatim) → las reglas de columna van SOLO al
   article; el resto se resetea. */
body.page-centros-propios article.centro-card {
  flex: 0 0 25%;
  max-width: 25%;
  box-sizing: border-box;
  padding: 0 15px;
  margin-bottom: 30px;
}
body.page-centros-propios article.centro-card .centro-card { flex: none; max-width: 100%; padding: 0; }
body.page-centros-propios article.centro-card img { width: 100%; max-width: none; height: 115px; display: block; }
body.page-centros-propios article.centro-card h4 { font-size: 20.8px; font-weight: 700; line-height: 1.3; margin: 10px 0 8px; }
body.page-centros-propios article.centro-card h4 a { color: #3C4858; text-decoration: none; }
body.page-centros-propios article.centro-card h4 a:hover { color: #124D91; }
body.page-centros-propios article.centro-card p { margin: 0; font-size: 16px; line-height: 24px; }
@media (max-width: 991px) {
  body.page-centros-propios article.centro-card { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 767px) {
  body.page-centros-propios article.centro-card { flex: 0 0 100%; max-width: 100%; }
  body.page-centros-propios article.centro-card img { height: auto; }
}

/* Caja de aviso de cierre (div.featured-news del original; medido en producción). */
body.single-centro .centro-content .featured-news {
  background: rgb(230, 237, 245);
  margin: 0 0 15px;
  float: left;
  width: 100%;
  box-sizing: border-box;
}
body.single-centro .centro-content .featured-news .wrapper { padding: 15px; }
body.single-centro .centro-content .featured-news h4 {
  font-size: 20.8px;
  font-weight: 700;
  color: #3C4858;
  line-height: 1.3;
  margin: 0;
}

/* ── /prevencion-y-salud/otros-enlaces-de-interes ────────────────────────────
   Grid de logos-enlace fiel al original SIN tocar el bloque compartido
   grid-cards-enlace (lo comparten empresa, trabajador, etc.). Scope: la clase
   body page-<slug> que agrega functions.php. NOTA: la celda del bloque es
   .umivale-gce__cell (NO __item); ya es flex column, acá solo se reordena y se
   ajustan color/tamaño de título e imagen. */

/* 1. Título ARRIBA de la imagen (el original pone el caption encima). */
.page-otros-enlaces-de-interes .umivale-gce__title { order: 1; }
.page-otros-enlaces-de-interes .umivale-gce__media { order: 2; }
.page-otros-enlaces-de-interes .umivale-gce__desc  { order: 3; }

/* 2. Título gris, pequeño, bold (el bloque lo pinta azul 1.4em). */
.page-otros-enlaces-de-interes .umivale-gce__title {
  color: #3c4858;
  font-size: 0.85rem;
  font-weight: 700;
}

/* 3. Logos a tamaño natural centrados, sin estirar ni recortar (cover). */
.page-otros-enlaces-de-interes .umivale-gce__img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: unset;
  margin: 0 auto;
  display: block;
}

/* 4. Texto centrado (sección "Herramientas" y párrafo intro). */
.page-otros-enlaces-de-interes .page__content { text-align: center; }

/* 5. Párrafo intro centrado horizontalmente en la página (mismo patrón que
   normativa-de-gestion / canal-cumplimiento / trabajador). margin-left/right
   auto explícito (NO el shorthand margin, que rompería el centrado del tema). */
.page-otros-enlaces-de-interes .card-flotante .page__content > p {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── Callout destacado (caja azul-suave) ─────────────────────────────────────
   Réplica del `blue-soft-background` del original. Usado en las subsecciones de
   Prevención (actuacion-ante-emergencias, gestion-…) vía core/group con
   className 'umivale-callout-destacado'. */
.umivale-callout-destacado {
  background-color: #e8f0f8;
  border-left: 4px solid #124D91;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
}
.umivale-callout-destacado .tag {
  display: inline-block;
  background: #124D91;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}

/* ── Grupo 4: párrafos sueltos alineados al nivel de los títulos ─────────────
   equipo-de-trabajo, tareas-de-especial-riesgo y material-interactivo tienen
   core/paragraph sueltos; se acotan y centran su caja (margin auto explícito,
   NO shorthand) para que arranquen al mismo nivel que los headings. */
.page-tareas-de-especial-riesgo .card-flotante .page__content > p,
.page-equipo-de-trabajo .card-flotante .page__content > p,
.page-material-interactivo-en-seguridad-en-el-trabajo .card-flotante .page__content > p,
.page-equipos-de-proteccion-individual .card-flotante .page__content > p {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Q4: títulos dentro de las 2 columnas (texto | video) en azul institucional. */
.page-tareas-de-especial-riesgo .wp-block-columns .umivale-git__texto h2,
.page-tareas-de-especial-riesgo .wp-block-columns .umivale-git__texto h3,
.page-equipo-de-trabajo .wp-block-columns .umivale-git__texto h2,
.page-equipo-de-trabajo .wp-block-columns .umivale-git__texto h3 {
  color: #124D91;
}

/* Q8: reduce el hueco entre un heading y su grid-imagen-texto (lista de 1 PDF)
   dentro de columnas en equipos-de-proteccion-individual. */
.page-equipos-de-proteccion-individual .wp-block-column .umivale-grid-imagen-texto {
  margin-top: 0;
}
.page-equipos-de-proteccion-individual .wp-block-column > .wp-block-heading {
  margin-bottom: 0.4rem;
}

/* Fix1: en las secciones 2-col (texto | video), el grid-imagen-texto de la
   columna izquierda arranca con su padding-top (32px) y desalinea el título
   respecto al video (margin-top 0). Anular ese padding-top dentro de columns. */
.page-tareas-de-especial-riesgo .wp-block-columns .umivale-grid-imagen-texto {
  padding-top: 0;
}

/* Fix2: hueco excesivo entre un core/heading suelto y su grid-imagen-texto
   (lista de PDFs) — reduce el padding-top del git en equipo-de-trabajo. */
.page-equipo-de-trabajo .card-flotante .page__content .umivale-grid-imagen-texto {
  padding-top: 8px;
}
/* Fix1 (equipo): dentro de columns el git alinea al tope (gana por especificidad
   sobre la regla de 8px de arriba). */
.page-equipo-de-trabajo .card-flotante .page__content .wp-block-columns .umivale-grid-imagen-texto {
  padding-top: 0;
}

/* ── /prevencion-y-salud/prevencion/higiene-industrial ───────────────────────
   Las dos listas ul.checks ("Etiquetado…" y "Prevención en laboratorios") van
   una debajo de otra en la misma columna de texto. La regla global las centra
   (width:fit-content + margin:0 auto), así que cada lista arranca en una X
   distinta según su ancho → se ven desalineadas. Acá las alineamos a la
   izquierda (mismo borde) SOLO en esta página. */
.page-higiene-industrial .card-flotante .page__content ul.checks {
  margin-left: 0;
  margin-right: 0;
}

/* ── /prevencion-y-salud/prevencion/seguridad-vial (root) ─────────────────────
   Fix 1 (Grupo 5): las descripciones de las cards del índice se centran por
   default (herencia del grid); en esta vista van alineadas a la izquierda. */
.page-seguridad-vial .umivale-gce__desc {
  text-align: left;
}

/* ── Sección Prevención: espaciado grid-imagen-texto ─────────────────────────
   Fix 2 (Grupo 5): reduce el padding-top de 32px (default del bloque) a 8px en
   TODA la sección Prevención, para acercar el texto/título a sus PDFs/contenido.
   Scoped a .section-prevencion (body_class por subárbol, ver functions.php) →
   cero impacto en vistas fuera de Prevención (empresa, canal-cumplimiento, etc.,
   que conservan su padding original o sus reglas propias). */
.section-prevencion .card-flotante .page__content .umivale-grid-imagen-texto {
  padding-top: 8px;
}
/* Fix 4a (Grupo 5), especificidad elevada para ganar al Fix 2: la S1 (infografía
   360º) de material-interactivo va sin padding-top (cierra el hueco bajo el
   heading "Infografía 360º interactiva"). Slug real = ...-seguridad-vial. */
.section-prevencion .page-material-interactivo-en-seguridad-vial .card-flotante .page__content .umivale-grid-imagen-texto {
  padding-top: 0;
}

/* Callout destacado (grupo azul .umivale-callout-destacado): el link del heading
   no lleva subrayado (el texto ya se distingue por el fondo del callout). */
.umivale-callout-destacado h2 a,
.umivale-callout-destacado h3 a {
  text-decoration: none;
}

/* material-interactivo-en-seguridad-vial: los párrafos sueltos (core/paragraph)
   de la S2 se alinean/acotan igual que los bloques git (max 64rem, centrado)
   para que no queden desalineados respecto al resto del cuerpo. */
.page-material-interactivo-en-seguridad-vial .card-flotante .page__content > p {
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* Lista de PDFs como core/list nativo (.uv-pdf-list): list-items limpios (sin
   <i> inline → isValid) con el ícono fa-file-pdf-o azul puesto por CSS. FA 4.7
   ya lo encola el tema (font-family "FontAwesome", fa-file-pdf-o = \f1c1). */
.uv-pdf-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.4rem;
}
.uv-pdf-list li {
  position: relative;
  padding-left: 1.9em;
  margin: 0.3rem 0;
}
.uv-pdf-list li::before {
  font-family: "FontAwesome";
  content: "\f1c1";
  color: #124D91;
  font-size: 1.3em;
  line-height: 1.2;
  position: absolute;
  left: 0;
  top: 0;
}
.uv-pdf-list a { color: #124D91; text-decoration: none; }
.uv-pdf-list a:hover { text-decoration: underline; }

/* estudios-y-articulos-cientificos: los enlaces de las listas checks (2 col)
   no llevan subrayado (el ✔ azul ya los marca como enlace). Scoped a la vista. */
.page-estudios-y-articulos-cientificos .card-flotante .page__content ul.checks li a {
  text-decoration: none;
}