/* ==========================================================================
   PORTAL WEB DRTC ANCASH - Capa de diseno moderna (aditiva)
   Se carga DESPUES de style.css / extra.css / extranuev.css para ganar.
   No modifica los estilos legacy, los sobreescribe de forma controlada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DE DISENO
   -------------------------------------------------------------------------- */
:root {
  /* Azules institucionales: progresivos, no fluorescentes */
  --drtc-blue: #0a6ebd;
  --drtc-blue-dark: #075a96;
  --drtc-blue-darker: #08324d;
  --drtc-blue-deep: #052539;
  --drtc-blue-soft: #eaf3fb;
  --drtc-blue-line: #cfe2f2;

  /* Naranja de acento: calido y legible, no chillon.
     --drtc-orange (2.85:1) es solo para bordes, fondos e iconos grandes.
     --drtc-orange-text (5.6:1) es el unico seguro para texto sobre claro. */
  --drtc-orange: #f2760c;
  --drtc-orange-text: #a84e00;
  --drtc-orange-dark: #c85c00;
  --drtc-orange-soft: #fff3e5;

  /* Neutros con contraste suficiente sobre fondo claro */
  --drtc-ink: #16222e;
  --drtc-body: #37475a;
  --drtc-muted: #5d6d80;
  --drtc-line: #dfe7ef;
  --drtc-bg: #f3f7fb;
  --drtc-white: #fff;
  --drtc-ok: #147a4f;

  --drtc-radius: 14px;
  --drtc-radius-sm: 9px;
  --drtc-shadow-sm: 0 1px 2px rgba(8, 50, 77, .07), 0 2px 8px rgba(8, 50, 77, .06);
  --drtc-shadow: 0 4px 6px rgba(8, 50, 77, .06), 0 12px 28px rgba(8, 50, 77, .10);
  --drtc-shadow-lg: 0 10px 20px rgba(8, 50, 77, .09), 0 24px 60px rgba(8, 50, 77, .15);
  --drtc-nav-h: 56px;
  --drtc-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --drtc-font-head: "Segoe UI Semibold", "Segoe UI", Roboto, Arial, sans-serif;
  --drtc-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* IMPORTANTE: no dejar overflow-x: hidden en el body.
   Convierte al body en contenedor de scroll y ROMPE el position: sticky del
   menu (el menu se va hacia arriba en vez de quedarse fijo). `clip` recorta el
   desborde horizontal sin crear contexto de scroll, que es justo lo que
   necesita sticky. style.css declara `body { overflow-x: hidden }`, asi que
   hay que anularlo; al cargar portal.css despues, esta regla gana. */
body,
body#inicio {
  overflow-x: hidden;
  overflow-x: clip;
}

/* El recorte real se hace en <html>, que al ser el elemento raiz propaga su
   overflow al viewport sin crear un contenedor de scroll intermedio. */
html {
  overflow-x: hidden;
  /* Deja libre la altura del menu fijo al navegar por cualquier ancla
     (enlaces con #, foco de teclado, scrollIntoView). Complementa al
     scroll-margin-top de las secciones y cubre los casos que ese no
     alcanza, como una URL que ya llega con el fragmento. */
  scroll-padding-top: calc(var(--drtc-nav-h) + 14px);
}

body#inicio {
  font-family: var(--drtc-font);
  color: var(--drtc-body);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--drtc-bg) !important;
  background-image: linear-gradient(180deg, #eaf2f9 0, var(--drtc-bg) 420px);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--drtc-font-head);
  color: var(--drtc-ink);
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* Daño heredado: extra.css obliga a h4 { font-size: 10px } de forma global */
#noticia_portada_front .h4,
h4 {
  font-size: 1.05rem;
}

a {
  color: var(--drtc-blue);
  text-decoration: none;
  transition: color .18s var(--drtc-ease);
}

a:hover,
a:focus {
  color: var(--drtc-orange-text);
  text-decoration: underline;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--drtc-orange-text);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace de salto (accesibilidad) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 99999;
  padding: 12px 20px;
  background: var(--drtc-blue-darker);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--drtc-radius-sm) var(--drtc-radius-sm);
  transition: top .2s var(--drtc-ease);
}

.skip-link:focus {
  top: 0;
  color: #fff;
  text-decoration: none;
}

::selection {
  background: var(--drtc-orange);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. BARRA SUPERIOR DE CONTACTO (#mu-header)
   -------------------------------------------------------------------------- */
#mu-header {
  /* Degradado azul profundo -> azul medio: crea jerarquia visual entre la
     barra de contacto (oscura) y el menu principal (claro). */
  background: linear-gradient(90deg, var(--drtc-blue-deep) 0%, var(--drtc-blue-darker) 55%, var(--drtc-blue-dark) 100%);
  font-size: .8rem;
  border-bottom: 2px solid var(--drtc-orange);
}

#mu-header .mu-header-area {
  padding: 7px 0;
  display: block;
}

#mu-header .mu-header-area .row {
  flex-wrap: wrap;
  align-items: center;
}

#mu-header .mu-header-area .mu-header-top-left {
  display: flex;
  align-items: center;
  gap: 18px;
  width: auto;
}

#mu-header .mu-header-area .mu-header-top-left .mu-top-email,
#mu-header .mu-header-area .mu-header-top-left .mu-top-phone {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: #e8f6fd;
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

#mu-header .mu-header-area .mu-header-top-left i {
  margin-right: 0;
  opacity: .9;
}

#mu-header .mu-header-top-right {
  width: auto;
  text-align: right;
}

#mu-header .mu-top-social-nav {
  display: inline-flex;
  gap: 6px;
}

#mu-header .mu-top-social-nav li {
  display: inline-block;
}

#mu-header .mu-top-social-nav li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff !important;
  font-size: .85rem;
  transition: background .2s var(--drtc-ease), transform .2s var(--drtc-ease);
}

#mu-header .mu-top-social-nav li a:hover,
#mu-header .mu-top-social-nav li a:focus {
  background: var(--drtc-orange);
  transform: translateY(-2px);
}

/* Enlace de intranet visible en la barra superior en pantallas grandes */
.topbar-extra {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: #d6eefb;
  margin-right: 14px;
  white-space: nowrap;
}

.topbar-extra a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px dotted rgba(255, 255, 255, .6);
}

.topbar-extra a:hover {
  color: var(--drtc-orange-text);
  border-bottom-color: var(--drtc-orange);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. CABECERA INSTITUCIONAL
   -------------------------------------------------------------------------- */
#cabecera {
  background: var(--drtc-white);
  border-bottom: 1px solid var(--drtc-line);
  box-shadow: 0 1px 0 rgba(16, 40, 66, .04);
}

#cabecera .container-fluid {
  padding: 14px 0;
  background: transparent !important;
}

#cabecera .row {
  align-items: center;
}

.col_img_institucional {
  display: flex;
  align-items: center;
  gap: 12px;
}

#cabecera .logo-inst {
  max-height: 76px;
  width: auto;
  object-fit: contain;
}

#cabecera .escudo-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

#cabecera .escudo-texto .titulo-entidad {
  font-family: var(--drtc-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--drtc-blue-darker);
  text-transform: uppercase;
  letter-spacing: .2px;
}

#cabecera .escudo-texto .titulo-entidad span {
  color: var(--drtc-blue);
}

#cabecera .escudo-texto .sub-entidad {
  font-size: .74rem;
  color: var(--drtc-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
}

#cabecera-center {
  text-align: center;
  padding-top: 0 !important;
  color: var(--drtc-muted) !important;
}

#cabecera .deno_anual {
  font-family: var(--drtc-font) !important;
  font-size: .7rem !important;
  font-style: italic;
  line-height: 1.35;
  color: var(--drtc-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

#cabecera .enlaces-rapidos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
}

#cabecera .enlaces-rapidos p {
  margin: 0;
  font-size: 0;
  color: transparent !important;
}

#cabecera .enlaces-rapidos a {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--drtc-blue) !important;
  padding: 6px 10px;
  border-radius: 999px;
}

#cabecera .enlaces-rapidos a:hover,
#cabecera .enlaces-rapidos a:focus {
  background: var(--drtc-blue-soft);
  color: var(--drtc-blue-darker) !important;
  text-decoration: none;
}

#cabecera .enlaces-rapidos .sep {
  color: #c6d3de;
  font-size: .8rem;
  padding: 0 2px;
}

#cabecera .img-imgtrans {
  width: 100%;
  max-width: 150px;
  height: auto;
  padding: 0 !important;
  border-radius: 6px;
}

#cabecera .img-imgSecundario {
  width: auto;
  max-width: 150px;
  height: auto;
  padding: 0 !important;
  margin-left: auto;
  display: block;
}

/* --------------------------------------------------------------------------
   5. NAVEGACION PRINCIPAL
   -------------------------------------------------------------------------- */
#menupri.navbar {
  /* position: sticky mantiene el menu siempre visible sin sacar el elemento
     del flujo, a diferencia de position: fixed (que provocaba un salto).
     Solo funciona si ningun ancestro declara overflow hidden/auto/scroll. */
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--drtc-blue) !important;
  padding: 0;
  margin-bottom: 0;
  box-shadow: 0 2px 14px rgba(7, 90, 150, .28);
  font-size: 13px;
  transition: box-shadow .25s var(--drtc-ease);
}

/* Al desplazarse, el menu gana una sombra mas marcada para separarse del
   contenido que pasa por debajo. */
body.nav-fija #menupri.navbar {
  box-shadow: 0 4px 18px rgba(7, 90, 150, .38);
}

#menupri .navbar-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: var(--drtc-nav-h);
  margin-right: 6px;
  padding: 0;
  border-right: 1px solid rgba(255, 255, 255, .18);
}

#menupri .navbar-brand img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

#menupri .navbar-nav {
  align-items: stretch;
}

/* Enlaces del menu en horizontal. Van compactos porque, con todos los
   apartados y el buscador, el menu necesita del orden de 1.500px: sin esto se
   salen de la ventana en pantallas de 1.280 a 1.500 y el ultimo bloque
   ("Acceder", "Intranet") queda cortado. */
#menupri .nav-item > .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--drtc-nav-h);
  padding: 0 9px;
  font-weight: 700;
  font-size: .655rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .94) !important;
  border-bottom: 3px solid transparent;
  transition: background .18s var(--drtc-ease), color .18s var(--drtc-ease);
  white-space: nowrap;
}

#menupri .nav-item > .nav-link:hover,
#menupri .nav-item > .nav-link:focus,
#menupri .nav-item.show > .nav-link,
#menupri .nav-item.active > .nav-link {
  color: #fff !important;
  background: rgba(0, 0, 0, .12);
  border-bottom-color: var(--drtc-orange);
  text-decoration: none;
}

/* Submenus */
#menupri .dropdown-menu {
  margin: 0;
  padding: 8px 0;
  min-width: 236px;
  border: 0;
  border-top: 3px solid var(--drtc-orange);
  border-radius: 0 0 var(--drtc-radius-sm) var(--drtc-radius-sm);
  background: #fff;
  box-shadow: var(--drtc-shadow-lg);
  font-size: 13px;
}

#menupri .dropdown-item {
  display: block;
  padding: 8px 20px;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--drtc-body) !important;
  white-space: normal;
}

#menupri .dropdown-item:hover,
#menupri .dropdown-item:focus,
#menupri .dropdown-item.active {
  background: var(--drtc-blue-soft);
  color: var(--drtc-blue-darker) !important;
  text-decoration: none;
}

#menupri .dropdown-item::before {
  content: "\f105";
  font-family: FontAwesome;
  float: right;
  margin-left: 12px;
  color: #b7c6d4;
  font-size: .75rem;
}

#menupri .dropdown-item:hover::before,
#menupri .dropdown-item:focus::before {
  color: var(--drtc-orange-text);
}

#menupri .dropdown-divider {
  margin: 5px 0;
  border-top: 1px solid var(--drtc-line);
}

/* El ultimo apartado ("Intranet") se resalta en crema sobre el azul del nav.
   Este color solo vale sobre fondo azul: si la regla se aplicase tambien con el
   menu plegado, el texto saldia casi blanco sobre el panel blanco y
   desaparecia (contraste 1.09:1). Por eso se limita al nav en horizontal. */
@media (min-width: 1360px) {
  #menupri .nav-item.dropdown:last-child > .nav-link {
    color: var(--drtc-orange-soft) !important;
  }
}

/* El desplegable del ultimo elemento se alinea a la derecha para no salirse
   de la ventana en pantallas anchas, donde el nav ocupa todo el ancho. */
#menupri .dropdown-menu-right {
  right: 0;
  left: auto;
}

/* Entre 992px y 1.359px Bootstrap (navbar-expand-lg) aun obliga a dejar el nav
   en horizontal, pero el menu completo con buscador necesita del orden de
   1.310px: en pantallas mas estrechas el nav se salia de la ventana y el
   ultimo bloque ("Acceder", "Intranet") quedaba cortado, sin poder pulsarse.
   En esa franja se vuelve al menu plegado con su boton, igual que en movil. */
@media (min-width: 992px) and (max-width: 1359.98px) {
  /* El nav de Bootstrap es nowrap: con flex-basis:100% el panel se aplastaba
     en la misma fila, pegado al logotipo, en vez de bajar debajo. */
  #menupri {
    flex-wrap: wrap;
  }

  #menupri .navbar-collapse {
    display: none !important;
    flex-basis: 100%;
  }

  #menupri .navbar-collapse.show {
    display: block !important;
  }

  #menupri .navbar-nav {
    flex-direction: column;
  }

  #menupri .navbar-toggler {
    display: inline-flex;
  }
}

#menupri .navbar-toggler {
  margin: 10px 12px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 8px;
}

#menupri .navbar-toggler-icon {
  background-image: none;
  position: relative;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

#menupri .navbar-toggler-icon::before,
#menupri .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

#menupri .navbar-toggler-icon::before { top: -7px; }
#menupri .navbar-toggler-icon::after { top: 7px; }

/* Menu desplegado cuando el nav esta plegado (por debajo de 1.360px).
   El nav sigue en el flujo con position: sticky (fijarlo con position: fixed
   lo sacaria del flujo y el contenido de abajo saltaria al abrir y cerrarse).
   El panel es la unica zona desplazable: los submenus se despliegan dentro
   con position: static, asi que al abrirlos crece el panel en vez de
   aparecer una segunda barra dentro del submenu.
   El alto es constante, calculado con la altura de la barra del nav, y no
   depende de donde este pegada: asi no hay realimentacion entre el limite y
   el alto que produce. dvh evita que la barra de direcciones del movil
   recorte el contenido; el primer valor (vh) es el respaldo para navegadores
   antiguos.

   Importante: el limite de alto y el desplazamiento SOLO valen con el menu
   plegado. Con el nav en horizontal los submenus flotan fuera del panel, y un
   overflow-y: auto aqui los recortaba: el desplegable se dibujaba pero quedaba
   cortado justo al borde inferior del nav, que es lo que hacia que "no se vieran
   los submenus". */
@media (max-width: 1359.98px) {
  #menupri .navbar-collapse {
    background: var(--drtc-white);
    border-top: 3px solid var(--drtc-orange);
    max-height: calc(100vh - var(--drtc-nav-h) - 3px);
    max-height: calc(100dvh - var(--drtc-nav-h) - 3px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Dentro del panel el fondo es blanco, asi que el buscador invierte sus
     colores: texto oscuro sobre un campo claro. Sin esto el texto blanco del
     campo se perdia sobre el panel. */
  #menupri .navbar-collapse .nav-search {
    margin: 10px 16px;
    padding: 0;
    border-right: 0;
  }

  #menupri .navbar-collapse .nav-search input[type="search"] {
    color: var(--drtc-ink);
    background: var(--drtc-blue-soft);
    border-color: var(--drtc-line);
    color-scheme: light;
  }

  #menupri .navbar-collapse .nav-search input[type="search"]::placeholder {
    color: var(--drtc-body);
  }

  #menupri .navbar-collapse .nav-search button {
    color: var(--drtc-blue-darker);
  }
}

/* Con el nav en horizontal el panel no debe recortar nada: los desplegables
   flotan sobre el contenido y tienen que poder salir de la barra. */
@media (min-width: 1360px) {
  #menupri .navbar-collapse {
    max-height: none;
    overflow: visible;
  }
}

/* Estilos del menu desplegado: se aplican siempre que el menu este plegado,
   es decir por debajo de 1.360px. En pantallas anchas el nav esta desplegado en
   horizontal sobre fondo azul, y poner aqui texto oscuro lo haria ilegible:
   esas reglas deben quedar dentro del media query.
   Los submenus se despliegan dentro del panel (position: static) y sin limites
   de alto propios, para que el unico scroll sea el del panel y no aparezca una
   segunda barra dentro del submenu. */
@media (max-width: 1359.98px) {
  #menupri .navbar-collapse .nav-link {
    font-size: .8rem;
    padding: 12px 16px;
    border-bottom: 1px solid var(--drtc-line);
    border-left: 3px solid transparent;
    color: var(--drtc-ink) !important;
  }

  #menupri .navbar-collapse .nav-link:hover,
  #menupri .navbar-collapse .nav-link:focus {
    background: var(--drtc-blue-soft);
    border-left-color: var(--drtc-orange);
    color: var(--drtc-blue-darker) !important;
  }

  #menupri .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    background: var(--drtc-blue-soft);
  }

  #menupri .navbar-collapse .dropdown-item {
    font-size: .78rem;
    padding-left: 30px;
  }
}

/* Buscador en la navegacion */
.nav-search {
  display: flex;
  align-items: center;
  padding-left: 12px;
  margin-right: 4px;
}

.nav-search form {
  position: relative;
  display: flex;
}

.nav-search input[type="search"] {
  width: 132px;
  height: 32px;
  padding: 5px 30px 5px 11px;
  font-size: .74rem;
  /* Sobre la barra azul el texto va en blanco y el campo con un velo oscuro:
     con el blanco translucido anterior el contraste bajaba a 3.94:1. */
  color: #fff;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color-scheme: dark;
}

.nav-search input[type="search"]::placeholder {
  color: rgba(255, 255, 255, .75);
}

.nav-search input[type="search"]:focus {
  background: #fff;
  color: var(--drtc-ink);
  outline-offset: 1px;
}

.nav-search input[type="search"]:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s;
}

.nav-search button {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.nav-search button:hover,
.nav-search button:focus {
  background: var(--drtc-orange);
}

/* Compensation: cuando el menu esta fijo, los enlaces internos y los titulos
   con ancla no deben quedar escondidos detras de el. */
body.nav-fija main,
body.nav-fija section,
body.nav-fija [id] {
  scroll-margin-top: calc(var(--drtc-nav-h) + 14px);
}

/* --------------------------------------------------------------------------
   6. TITULOS DE SECCION
   -------------------------------------------------------------------------- */
.titulo_principal,
.section-title {
  color: var(--drtc-blue-darker) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  text-align: left !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0;
  padding: 0 0 12px !important;
  border: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.titulo_principal::before,
.section-title::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--drtc-orange) 0%, var(--drtc-orange-dark) 100%);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--drtc-line);
}

.section-heading .section-title {
  padding: 0 !important;
}

.section-heading .section-title::before {
  display: none;
}

.section-heading::after {
  content: "";
  position: absolute;
}

.section-rule {
  position: relative;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--drtc-line);
}

.section-rule::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 92px;
  height: 2px;
  background: var(--drtc-orange);
  border-radius: 2px;
}

.pb-3.pt-2.border-bottom.titulo_principal {
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--drtc-line) !important;
  margin-bottom: 22px;
  position: relative;
}

.pb-3.pt-2.border-bottom.titulo_principal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 92px;
  height: 2px;
  background: var(--drtc-orange);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   7. ESPACIADO DE SECCIONES
   -------------------------------------------------------------------------- */
#noticia,
#video,
#social,
#importante,
#recomendacion,
#preg_frecuentes,
#enlaces_interes,
#anuncios,
#main {
  margin-top: 0;
  margin-bottom: 0;
  padding: 38px 0;
}

#video,
#recomendacion,
#preg_frecuentes,
#importante,
#social,
#anuncios {
  background: transparent;
}

.seccion {
  padding: 40px 0;
}

.seccion-alterna {
  background: linear-gradient(180deg, #fff 0%, var(--drtc-blue-soft) 100%);
}

.seccion-oscura {
  background: linear-gradient(135deg, var(--drtc-blue-darker) 0%, var(--drtc-blue) 100%);
  color: #fff;
}

.seccion-oscura .titulo_principal,
.seccion-oscura .section-title {
  color: #fff !important;
}

.seccion-oscura .section-rule {
  border-bottom-color: rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------------------
   8. TARJETAS GENERICAS (noticias, videos, documentos, enlaces)
   -------------------------------------------------------------------------- */
.drtc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--drtc-ease), box-shadow .25s var(--drtc-ease), border-color .25s var(--drtc-ease);
}

.drtc-card:hover,
.drtc-card:focus-within {
  transform: translateY(-5px);
  border-color: var(--drtc-blue-line);
  box-shadow: var(--drtc-shadow);
}

.drtc-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #e4eef6 0%, #dbe7f0 100%);
  overflow: hidden;
}

.drtc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--drtc-ease);
}

.drtc-card:hover .drtc-card__media img {
  transform: scale(1.06);
}

.drtc-card__badge {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #fff;
  background: var(--drtc-blue);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(11, 60, 93, .3);
}

.drtc-card__badge--orange { background: var(--drtc-orange); }
.drtc-card__badge--red { background: #d93025; }
.drtc-card__badge--green { background: var(--drtc-ok); }

.drtc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  padding: 16px 18px 18px;
}

.drtc-card__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--drtc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drtc-card__title a {
  color: inherit;
}

.drtc-card__title a:hover,
.drtc-card__title a:focus {
  color: var(--drtc-blue);
  text-decoration: none;
}

.drtc-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--drtc-muted);
}

.drtc-card__meta i {
  color: var(--drtc-orange-text);
}

/* Overlay heredado (videos / documentos) modernizado */
.contenedor {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--drtc-radius);
  overflow: hidden;
  background: #dbe7f0;
}

.contenedor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  border-radius: var(--drtc-radius) !important;
  transition: transform .45s var(--drtc-ease);
}

.contenedor:hover img,
.contenedor:focus-visible img {
  transform: scale(1.07);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  border-radius: var(--drtc-radius);
  background: linear-gradient(180deg, rgba(11, 60, 93, .1) 0%, rgba(11, 60, 93, .82) 78%);
  opacity: 1;
  transition: opacity .3s var(--drtc-ease);
}

a:hover .overlay,
a:focus-visible .overlay {
  opacity: 0;
}

.texto-encima {
  position: absolute;
  top: 12px;
  left: 12px;
}

.post-cat,
.covid_fig {
  display: inline-block;
  padding: 5px 11px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff !important;
  background: var(--drtc-orange);
  border-radius: 999px;
  height: auto;
  margin: 0;
}

.centrado {
  position: static !important;
  transform: none !important;
  max-width: 100%;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta,
.post-date {
  font-size: .74rem !important;
  color: var(--drtc-muted) !important;
}

.post-date i {
  color: var(--drtc-orange-text);
}

/* --------------------------------------------------------------------------
   8.b VISOR DE DOCUMENTOS (modal de PDFs)
Lo inyectan includes/get_doc_view.php e includes/get_res_view.php dentro de
   cualquier modal que tenga un <div id="viewpdf">, asi queda igual en todo el
   portal sin repetir CSS en cada pagina.
   -------------------------------------------------------------------------- */
.drtc-visor {
  display: flex;
  flex-direction: column;
  /* #doc_view .modal-body va sin padding, asi que el visor lo aporta. */
  padding: 18px 20px 20px;
  background: #fff;
  font-size: 1rem;
  color: var(--drtc-body);
}

/* Cabecera: icono + titulo del documento */
.drtc-visor__cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--drtc-line);
}

.drtc-visor__icono {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 1.2rem;
  color: #fff;
  background: var(--drtc-blue);
  border-radius: var(--drtc-radius-sm);
  box-shadow: 0 2px 8px rgba(11, 60, 93, .3);
}

.drtc-visor__icono--alerta {
  background: #d93025;
}

.drtc-visor__datos {
  min-width: 0;
}

.drtc-visor__titulo {
  margin: 0;
  font-family: var(--drtc-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--drtc-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drtc-visor__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-size: .74rem;
  color: var(--drtc-muted);
}

.drtc-visor__meta span + span::before {
  content: "\00b7";
  margin-right: 6px;
}

.drtc-visor__etiqueta {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--drtc-orange-text);
  background: var(--drtc-orange-soft);
  border: 1px solid #f6d5b3;
  border-radius: 999px;
}

/* Marco del PDF: fondo claro y borde para que el visor nativo destaque */
.drtc-visor__marco {
  position: relative;
  flex: 1 1 auto;
  height: min(74vh, 780px);
  min-height: 340px;
  background: #eef3f8;
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  overflow: hidden;
}

.drtc-visor__marco > object,
.drtc-visor__marco > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Aviso cuando el documento no se puede mostrar */
.drtc-visor__aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 40px 24px;
  text-align: center;
}

.drtc-visor__aviso i {
  font-size: 2.4rem;
  color: #9fb6c9;
}

.drtc-visor__aviso--error i {
  color: #d93025;
}

.drtc-visor__aviso p {
  margin: 0;
  max-width: 46ch;
  color: var(--drtc-muted);
}

/* Pie: acciones del documento */
.drtc-visor__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--drtc-line);
}

.drtc-visor__pie .btn {
  border-radius: 8px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0;
}

.drtc-visor__enlace-directo {
  font-size: .76rem;
  color: var(--drtc-muted);
  word-break: break-all;
}

.drtc-visor__enlace-directo a {
  color: var(--drtc-blue);
}

.drtc-visor__acciones {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 575px) {
  .drtc-visor__marco {
    height: 62vh;
    min-height: 260px;
  }

  .drtc-visor__cabecera {
    align-items: flex-start;
  }

  .drtc-visor__pie {
    justify-content: stretch;
  }

  .drtc-visor__pie .btn {
    flex: 1 1 auto;
  }
}

/* Rejilla de 6 items en escritorio / 2 en movil */
.row-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.row-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   9. NOTICIAS
   -------------------------------------------------------------------------- */
#noticia .row {
  margin: 0 -10px;
}

#noticia_slider_prin {
  padding: 0 10px;
  margin-bottom: 22px;
}

#noticia .col-sm-5 {
  padding: 0 10px;
}

.drtc-news-hero {
  position: relative;
  border-radius: var(--drtc-radius);
  overflow: hidden;
  box-shadow: var(--drtc-shadow);
  background: #dbe7f0;
}

.drtc-news-hero .carousel-inner,
.drtc-news-hero .carousel-item {
  border-radius: var(--drtc-radius);
}

/* Alto fijo y recorte centrado: sin esto la altura la marcaba el aspecto de la
   foto, asi que al subir una imagen de otra proporcion el carrusel cambiaba de
   alto al pasar de una diapositiva a otra. */
.drtc-news-hero .carousel-item img {
  display: block;
  width: 100%;
  height: clamp(210px, 25vw, 400px);
  object-fit: cover;
  object-position: center;
}

#noticia #img_noticia_principal,
#img_noticia_principal {
  width: 100%;
  height: clamp(210px, 25vw, 400px);
  object-fit: cover;
  display: block;
  border-radius: var(--drtc-radius);
}

/* El pie del hero se mide en proportion a la imagen: en movil llega a medir mas
   que la propia foto y el degradado la tapaba entera. */
#noticia .carousel-caption {
  right: 0;
  left: 0;
  bottom: 0;
  top: auto;
  padding: clamp(16px, 2.4vw, 30px) clamp(16px, 2.2vw, 26px);
  text-align: left;
  background: linear-gradient(0deg, rgba(9, 30, 48, .92) 0%, rgba(9, 30, 48, .7) 55%, rgba(9, 30, 48, 0) 100%);
}

#bs-slider-overlay {
  display: none !important;
}

/* Titular del hero. Los titulos llegan de la base de datos con su propia
   capitalizacion: forzarlos a mayusculas (text-transform) convierte una
   frase larga en un bloque incomodo de leer, asi que se respeta la que trae. */
#noticia .tituloprincinoticia,
#tituloprincinoticia {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #fff !important;
  font-size: clamp(1rem, 1.45vw, 1.28rem) !important;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

#noticia .tituloprincinoticia:hover,
#noticia .tituloprincinoticia:focus {
  color: #ffd9a8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#noticia .text_principal {
  margin: 0;
  line-height: 1.32 !important;
}

.drtc-news-hero .carousel-caption .covid_fig {
  margin-bottom: 10px;
  background: var(--drtc-orange);
}

.drtc-news-hero .carousel-indicators {
  bottom: 10px;
  right: auto;
  left: 26px;
  margin: 0;
  justify-content: flex-start;
}

.drtc-news-hero .carousel-indicators li {
  width: 9px;
  height: 9px;
  margin-left: 6px;
  margin-right: 0;
  border: 2px solid rgba(255, 255, 255, .7);
  background-color: transparent;
}

.drtc-news-hero .carousel-indicators li.active {
  width: 22px;
  border-radius: 5px;
  background-color: var(--drtc-orange);
  border-color: var(--drtc-orange);
}

/* Los controles solo aparecian al pasar el raton: en pantallas tactiles no hay
   hover, asi que quedaban invisibles y sin poder pulsarse. Ahora se ven siempre
   de forma discreta y resaltan al pasar el rator o al recibir el foco. */
.carousel-control-prev,
.carousel-control-next {
  width: 8%;
  opacity: .55;
  transition: opacity .25s var(--drtc-ease);
}

.drtc-news-hero:hover .carousel-control-prev,
.drtc-news-hero:hover .carousel-control-next,
.drtc-news-hero:focus-within .carousel-control-prev,
.drtc-news-hero:focus-within .carousel-control-next {
  opacity: 1;
}

.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  opacity: 1;
  outline: 3px solid var(--drtc-orange);
  outline-offset: -3px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background-color: var(--drtc-orange) !important;
  background-size: 13px 13px !important;
  box-shadow: var(--drtc-shadow);
}

/* Lista lateral de noticias */
.drtc-news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.drtc-news-item {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: stretch;
  padding: 12px;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-left: 3px solid var(--drtc-blue);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  transition: transform .22s var(--drtc-ease), box-shadow .22s var(--drtc-ease),
              border-left-color .22s var(--drtc-ease);
}

.drtc-news-item:hover,
.drtc-news-item:focus-within {
  transform: translateX(4px);
  border-left-color: var(--drtc-orange);
  box-shadow: var(--drtc-shadow);
}

.drtc-news-item__thumb {
  flex: 0 0 118px;
  border-radius: var(--drtc-radius-sm);
  overflow: hidden;
  background: #dbe7f0;
}

.drtc-news-item__thumb img {
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--drtc-ease);
}

.drtc-news-item:hover .drtc-news-item__thumb img {
  transform: scale(1.08);
}

.drtc-news-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}

/* Titular de la lista: se respeta la capitalizacion del titular y se limita a
   cuatro lineas para que las tarjetas queden a la misma altura. */
.drtc-news-item__title {
  margin: 0;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--drtc-ink);
  text-transform: none;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drtc-news-item__title a {
  color: inherit;
}

.drtc-news-item__title a:hover,
.drtc-news-item__title a:focus {
  color: var(--drtc-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.drtc-news-item__title a:focus-visible {
  outline: 2px solid var(--drtc-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.drtc-news-item__date {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--drtc-line);
  font-size: .73rem;
  font-weight: 600;
  color: var(--drtc-muted);
}

.drtc-news-item__date i {
  color: var(--drtc-orange-text);
}

/* A partir de dos columnas, la noticia destacada y las cuatro noticias de la
   lista se estiran a la misma altura: manda la mas alta de las dos y la otra se
   ajusta, para que el bloque no quede con un lado mas alto que el otro.
   Va al final de la seccion a proposito: si se pondria antes, estas reglas
   perderian contra las de arriba, que tienen la misma especificidad.
   Solo desde 1200px porque por debajo la columna de las cuatro noticias es
   demasiado angosta para igualar alturas: habria que recortar la foto a menos
   de la mitad de su ancho. Ahi se apila y cada bloque ocupa el ancho completo. */
@media (min-width: 1200px) {
  #noticia > .container > .row {
    display: flex;
    align-items: stretch;
  }

  #noticia > .container > .row > .col-sm-7,
  #noticia > .container > .row > .col-sm-5 {
    display: flex;
  }

  /* Con las columnas a la misma altura, el margen que separaba el carrusel del
     bloque de al lado dejaria el lado izquierdo mas bajo que el derecho. */
  #noticia_slider_prin {
    margin-bottom: 0;
  }

  .drtc-news-hero {
    flex: 1 1 auto;
    display: flex;
    min-height: clamp(210px, 25vw, 400px);
  }

  /* El carrusel se ancla al hero en vez de aportar su propio alto, para que la
     foto llegue hasta la altura que imponga la columna de las cuatro noticias.
     Con la foto suelta, el alto en porcentaje no llega a resolverse y el bloque
     quedaba con un hueco vacio bajo la imagen. */
  .drtc-news-hero .carousel-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .drtc-news-hero .carousel-item {
    height: 100%;
  }

  .drtc-news-hero .carousel-item img {
    height: 100%;
    min-height: 0;
  }

  .drtc-news-list {
    flex: 1 1 auto;
  }
}

/* Entre 576 y 1199px el carrusel y la lista se apilan. Antes se ponian en
   columnas, pero con la lista tan alta el lado derecho quedaba mucho mas
   largo que la foto y el recorte de la foto era excesivo. */
@media (min-width: 576px) and (max-width: 1199.98px) {
  #noticia > .container > .row {
    display: block;
  }

  #noticia > .container > .row > .col-sm-7,
  #noticia > .container > .row > .col-sm-5 {
    display: block;
    width: 100%;
  }

  #noticia_slider_prin {
    margin-bottom: 22px;
  }

  .drtc-news-hero .carousel-inner {
    position: static;
    width: 100%;
  }

  .drtc-news-hero .carousel-item img {
    height: clamp(210px, 30vw, 340px);
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   10. BANNER / CAROUSEL
   -------------------------------------------------------------------------- */
.drtc-banner {
  position: relative;
  margin: 18px auto 0;
  padding: 0;
  background: var(--drtc-blue-darker);
  border-radius: var(--drtc-radius);
  overflow: hidden;
  box-shadow: var(--drtc-shadow);
}

.drtc-banner .carousel-item img {
  display: block;
  width: 100%;
  height: clamp(240px, 32vw, 470px);
  object-fit: cover;
}

.drtc-banner .carousel-indicators {
  bottom: 14px;
  z-index: 3;
}

.drtc-banner .carousel-indicators li {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-right: 0;
  background-color: rgba(255, 255, 255, .55);
  border: 2px solid rgba(255, 255, 255, .8);
}

.drtc-banner .carousel-indicators li.active {
  background-color: var(--drtc-orange);
  border-color: var(--drtc-orange);
  width: 24px;
  border-radius: 6px;
}

.drtc-banner .carousel-control-prev,
.drtc-banner .carousel-control-next {
  opacity: 1;
  width: 7%;
}

.drtc-banner .carousel-control-prev-icon,
.drtc-banner .carousel-control-next-icon {
  width: 40px !important;
  height: 40px !important;
  background-color: rgba(11, 60, 93, .55);
}

.drtc-banner .carousel-control-prev:hover .carousel-control-prev-icon,
.drtc-banner .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--drtc-orange);
}

/* --------------------------------------------------------------------------
   11. VIDEOS DE REDES SOCIALES (reemplaza la tabla al 236%)
   -------------------------------------------------------------------------- */
.drtc-social-videos {
  background: linear-gradient(135deg, var(--drtc-blue-darker) 0%, var(--drtc-blue-dark) 55%, var(--drtc-blue) 100%);
  border-radius: var(--drtc-radius);
  padding: 26px;
  box-shadow: var(--drtc-shadow);
}

.drtc-social-videos__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.drtc-social-videos__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
}

.drtc-social-videos__title .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--drtc-orange);
  box-shadow: 0 0 0 4px rgba(255, 128, 0, .25);
}

.drtc-social-videos__title span:last-child {
  color: #f8c68a;
}

.drtc-social-videos__social {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--drtc-blue-line);
}

.drtc-social-videos__social a {
  color: #fff;
}

.drtc-social-videos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px;
}

.drtc-social-videos__main {
  border-radius: var(--drtc-radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  aspect-ratio: 16 / 9;
}

.drtc-social-videos__main iframe,
.drtc-social-videos__thumb iframe,
.drtc-social-videos__thumb .play-poster {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.drtc-social-videos__main {
  position: relative;
}

.drtc-social-videos__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.drtc-social-videos .drtc-subtitle {
  color: #f8c68a;
  margin-top: 0;
  font-size: .78rem;
  letter-spacing: 1.2px;
}

.drtc-social-videos .drtc-subtitle::after {
  background: rgba(255, 255, 255, .25);
}

.drtc-social-videos__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--drtc-radius-sm);
  overflow: hidden;
  background: var(--drtc-blue-deep);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  cursor: pointer;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.drtc-social-videos__thumb .play-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, var(--drtc-blue-dark) 0%, var(--drtc-blue-deep) 100%);
  font-size: .68rem;
  font-weight: 600;
  text-align: center;
  padding: 6px;
}

.drtc-social-videos__thumb .play-poster i {
  font-size: 1.5rem;
  color: var(--drtc-orange-text);
  transition: transform .25s var(--drtc-ease);
}

.drtc-social-videos__thumb:hover .play-poster i,
.drtc-social-videos__thumb:focus-visible .play-poster i {
  transform: scale(1.15);
}

/* --------------------------------------------------------------------------
   12. ATENCION AL CIUDADANO / REQUISITOS (barra_empleo)
   -------------------------------------------------------------------------- */
.drtc-quicklinks {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  padding: 22px;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
}

.drtc-quicklink {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 14px 8px;
  text-align: center;
  border-radius: var(--drtc-radius);
  background: var(--drtc-blue-soft);
  border: 1px solid transparent;
  transition: transform .22s var(--drtc-ease), background .22s var(--drtc-ease), border-color .22s var(--drtc-ease), box-shadow .22s var(--drtc-ease);
}

.drtc-quicklink:hover,
.drtc-quicklink:focus-visible {
  transform: translateY(-4px);
  background: #fff;
  border-color: var(--drtc-blue-line);
  box-shadow: var(--drtc-shadow);
  text-decoration: none;
}

.drtc-quicklink img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.drtc-quicklink--wide img {
  width: 100%;
  max-width: 120px;
  height: 52px;
}

/* Tarjeta en modo texto: sin icono, solo el titulo y el subtitulo.
   El texto largo vive dentro de la pagina de destino. */
.drtc-quicklink--sin-icono {
  align-items: flex-start;
}

.drtc-quicklink--sin-icono .drtc-quicklink__label {
  margin-top: 0;
  padding-top: 6px;
}

/* Banner: la imagen grande de arriba. Se cambia o se apaga desde el panel; si
   esta apagado no se imprime y el texto sube de sitio. */
.licencia-banner {
  margin: 0 0 18px;
  text-align: center;
}

.licencia-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

/* Bloque de texto que se imprime dentro de la pagina del requisito. */
.licencia-bloque {
  margin: 18px 0 26px;
  padding: 0 0 4px;
}

.licencia-bloque__titulo {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--drtc-blue-darker);
}

.licencia-bloque__subtitulo {
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 600;
  color: #5b6b7b;
}

.licencia-bloque__contexto {
  font-size: .9rem;
  line-height: 1.65;
  color: #333;
  text-align: justify;
}

.licencia-bloque__notas {
  margin-top: 18px;
  padding: 12px 14px;
  background: #f5f9fc;
  border-left: 4px solid var(--drtc-blue-line);
  border-radius: 0 8px 8px 0;
}

.licencia-bloque__notas-titulo {
  margin: 0 0 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--drtc-blue-darker);
}

.licencia-bloque__notas-texto {
  font-size: .85rem;
  line-height: 1.6;
  color: #444;
}

/* El contexto y las notas admiten formato: parrafos, listas, colores, tamanos y
   tablas tipo Excel. Se redefinen los estilos para que no dependan del HTML
   guardado y se vean iguales en cualquier pagina del sitio. */
.licencia-bloque__contexto > p:last-child,
.licencia-bloque__notas-texto > p:last-child {
  margin-bottom: 0;
}

.licencia-bloque__contexto h1,
.licencia-bloque__contexto h2,
.licencia-bloque__contexto h3,
.licencia-bloque__contexto h4,
.licencia-bloque__contexto h5,
.licencia-bloque__contexto h6,
.licencia-bloque__notas-texto h1,
.licencia-bloque__notas-texto h2,
.licencia-bloque__notas-texto h3,
.licencia-bloque__notas-texto h4,
.licencia-bloque__notas-texto h5,
.licencia-bloque__notas-texto h6 {
  margin: 18px 0 8px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--drtc-blue-darker);
}

.licencia-bloque__contexto ul,
.licencia-bloque__contexto ol,
.licencia-bloque__notas-texto ul,
.licencia-bloque__notas-texto ol {
  margin: 0 0 12px;
  padding-left: 1.4em;
  list-style: revert;
}

.licencia-bloque__contexto a,
.licencia-bloque__notas-texto a {
  color: var(--drtc-blue);
  font-weight: 600;
  text-decoration: underline;
}

.licencia-bloque__contexto blockquote,
.licencia-bloque__notas-texto blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--drtc-blue-line);
  background: var(--drtc-blue-soft);
  border-radius: 0 var(--drtc-radius-sm) var(--drtc-radius-sm) 0;
}

/* Tablas: se muestran como tablas de verdad, no como bloques de codigo. */
.licencia-bloque__contexto table,
.licencia-bloque__notas-texto table {
  width: 100%;
  margin: 14px 0;
  border-collapse: collapse;
  font-size: .88rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(5, 37, 57, .08);
}

.licencia-bloque__contexto th,
.licencia-bloque__contexto td,
.licencia-bloque__notas-texto th,
.licencia-bloque__notas-texto td {
  border: 1px solid var(--drtc-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.licencia-bloque__contexto th,
.licencia-bloque__notas-texto th {
  font-weight: 700;
  background: var(--drtc-blue-soft);
  color: var(--drtc-blue-darker);
}

.licencia-bloque__contexto caption,
.licencia-bloque__notas-texto caption {
  padding: 6px 0;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--drtc-muted);
  caption-side: top;
}

/* En pantallas de telefono una tabla de cinco columnas no entra: se deja
   deslizar en horizontal en lugar de apretar las letras. */
@media (max-width: 575.98px) {
  .licencia-bloque__contexto table,
  .licencia-bloque__notas-texto table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


.drtc-quicklink__label {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--drtc-blue-darker);
}

.drtc-quicklink__label span {
  color: var(--drtc-orange-text);
}

.drtc-subtitle {
  margin: 26px 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--drtc-blue-darker);
  display: flex;
  align-items: center;
  gap: 10px;
}

.drtc-subtitle::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--drtc-line);
}

/* --------------------------------------------------------------------------
   13. ANUNCIOS REGIONALES / PAGINAS CON FORMAS
   -------------------------------------------------------------------------- */
#preg_frecuentes .row {
  margin: 0 -8px;
}

#preg_frecuentes .row > [class*="col"] {
  padding: 0 8px;
}

/* Anuncios regionales: replican los datos del panel
   _admin/admin_anuncio_list.php (imagen, titulo, doc y link). El titulo usa el
   mismo section-heading / section-title que Videos, Actualidades y demas.
   Los sistemas interactivos ya no viven aqui: se mudaron a la lista
   "Consultas, simulacros y sistemas interactivos externos" de barra_empleo.php
   y ahora usan el formato drtc-quicklink. */
.drtc-anuncios__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.drtc-anuncio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  transition: transform .2s var(--drtc-ease), box-shadow .2s var(--drtc-ease),
              border-color .2s var(--drtc-ease);
}

.drtc-anuncio-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--drtc-shadow);
  border-color: var(--drtc-blue-line);
}

/* El enlace envuelve imagen y titulo: se comporta como un bloque para poder
   poner el cursor y el foco de teclado sobre toda la tarjeta. */
.drtc-anuncio-card > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.drtc-anuncio-card > a:hover,
.drtc-anuncio-card > a:focus-visible {
  color: inherit;
  text-decoration: none;
}

.drtc-anuncio-card__figura {
  position: relative;
  display: block;
  aspect-ratio: 100 / 120;
  overflow: hidden;
  background: var(--drtc-blue-soft);
  border-bottom: 1px solid var(--drtc-line);
}

/* Tarjeta con destino: el cursor y el foco delatan que se puede pulsar. */
.drtc-anuncio-card--click {
  cursor: pointer;
}

.drtc-anuncio-card--click > a:focus-visible {
  outline: 3px solid var(--drtc-blue);
  outline-offset: -3px;
}

/* Lupa sobre la imagen: avisa de que al pulsar se abre en grande. */
.drtc-anuncio-card__lupa {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  background: rgba(8, 50, 77, .55);
  opacity: 0;
  transition: opacity .22s var(--drtc-ease);
}

.drtc-anuncio-card__lupa i {
  transform: scale(.7);
  transition: transform .22s var(--drtc-ease);
}

.drtc-anuncio-card--click:hover .drtc-anuncio-card__lupa,
.drtc-anuncio-card--click > a:focus-visible .drtc-anuncio-card__lupa {
  opacity: 1;
}

.drtc-anuncio-card--click:hover .drtc-anuncio-card__lupa i,
.drtc-anuncio-card--click > a:focus-visible .drtc-anuncio-card__lupa i {
  transform: scale(1);
}

.drtc-anuncio-card__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .35s var(--drtc-ease);
}

.drtc-anuncio-card:hover .drtc-anuncio-card__figura img {
  transform: scale(1.05);
}

/* Aviso cuando el anuncio no tiene imagen subida. */
.drtc-anuncio-card__sinimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.9rem;
  color: var(--drtc-blue);
  opacity: .45;
}

.drtc-anuncio-card__titulo {
  flex: 1 1 auto;
  margin: 0;
  padding: 12px 14px 6px;
  min-height: 0;
  font-family: var(--drtc-font-head);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--drtc-ink);
  text-align: center;
}

.drtc-anuncio-card__pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 13px;
}

.drtc-anuncio-card__accion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: .68rem;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}

a.drtc-anuncio-card__accion:hover,
a.drtc-anuncio-card__accion:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
}

/* PDF en rojo, para que se note que abre un archivo. */
.drtc-anuncio-card__accion--doc {
  color: #c0392b;
  background: #fdecea;
  border-color: #f5c6c2;
}

a.drtc-anuncio-card__accion--doc:hover {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}

.drtc-anuncio-card__accion--doc:not(.drtc-anuncio-card__accion--pdf) {
  color: var(--drtc-blue-darker);
  background: var(--drtc-blue-soft);
  border-color: var(--drtc-blue-line);
}

.drtc-anuncio-card__accion--link {
  color: var(--drtc-blue-dark);
  background: var(--drtc-orange-soft);
  border-color: #f7d9b6;
}

a.drtc-anuncio-card__accion--link:hover {
  color: #fff;
  background: var(--drtc-orange);
  border-color: var(--drtc-orange);
}

/* "Sin documento" / "Sin link": informativos, no pulsables. */
.drtc-anuncio-card__accion--vacio {
  color: var(--drtc-muted);
  background: var(--drtc-bg);
  border-color: var(--drtc-line);
  border-style: dashed;
  opacity: .8;
}

/* --------------------------------------------------------------------------
   14. FAQ (acordeon accesible)
   -------------------------------------------------------------------------- */
.drtc-faq {
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  overflow: hidden;
}

.drtc-faq .card {
  border: 0;
  border-bottom: 1px solid var(--drtc-line);
  border-radius: 0;
}

.drtc-faq .card:last-child {
  border-bottom: 0;
}

.drtc-faq .card-header {
  padding: 0;
  background: var(--drtc-blue-soft);
  border: 0;
}

.drtc-faq .card-header h2 {
  margin: 0;
  font-size: 1rem;
}

.drtc-faq .btn-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  font-family: var(--drtc-font-head);
  font-size: .92rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  color: var(--drtc-ink);
}

.drtc-faq .btn-link:hover,
.drtc-faq .btn-link:focus {
  background: var(--drtc-blue-soft);
  color: var(--drtc-blue-darker);
  text-decoration: none;
}

.drtc-faq .btn-link::after {
  content: "\f078";
  font-family: FontAwesome;
  margin-left: auto;
  font-size: .8rem;
  color: var(--drtc-orange-text);
  transition: transform .25s var(--drtc-ease);
}

.drtc-faq .btn-link[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.drtc-faq .card-body {
  padding: 4px 18px 20px;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--drtc-body);
  background: #fff;
}

/* Cuando se llega desde el asistente con el ancla #faq<id>, esta tarjeta se
   resalta para que se vea cual de todas es la que se eligio. La regla no
   depende de .drtc-faq porque preguntas_frecuentes.php usa otro contenedor. */
.card.drtc-faq-destacada {
  border-color: var(--drtc-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 186, .22), var(--drtc-shadow);
  border-radius: var(--drtc-radius);
}

.card.drtc-faq-destacada > .card-header {
  background: #dceefa;
}

.card.drtc-faq-destacada > .card-header .btn-link {
  color: var(--drtc-blue-darker);
}

/* El salto del navegador al ancla #faq<id> debe dejar la tarjeta por debajo
   del menu fijo, no debajo de el. */
.card[id^="faq"] {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  .card.drtc-faq-destacada {
    box-shadow: 0 0 0 3px rgba(0, 122, 186, .22);
  }
}

/* --------------------------------------------------------------------------
   15. FACEBOOK WIDGET / IMPORTANTE
   -------------------------------------------------------------------------- */
.drtc-aside {
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
}

.drtc-aside__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--drtc-blue-darker), var(--drtc-blue));
}

.drtc-aside__head img {
  max-height: 34px;
  width: auto;
  border-radius: 6px;
  padding: 0 !important;
}

.drtc-aside__body {
  padding: 16px 18px;
}

.drtc-fb-fallback {
  text-align: center;
  padding: 26px 18px;
  color: var(--drtc-muted);
  font-size: .86rem;
}

.drtc-fb-fallback i {
  display: block;
  font-size: 2.4rem;
  color: #1877f2;
  margin-bottom: 10px;
}

/* TikTok: el embed oficial ocupa hasta 780px, asi que el bloque va a todo el
   ancho de la seccion. embed.js sustituye el blockquote por un iframe y deja
   un contenedor con position:relative, asi que el alto se ajusta solo. */
.drtc-tiktok__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.drtc-tiktok__embed {
  margin: 0;
  width: 100%;
}

.drtc-tiktok__embed section {
  display: block;
}

.drtc-tiktok__perfil {
  transition: transform .12s ease, box-shadow .12s ease;
}

.drtc-tiktok__perfil:hover,
.drtc-tiktok__perfil:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
  color: #fff;
  text-decoration: none;
}

.drtc-tiktok__aviso {
  font-size: .86rem;
  color: var(--drtc-muted);
  margin: 0 0 12px;
  text-align: center;
}

.drtc-fb-fallback a {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   16. ENLACES EXTERNOS (slick)
   -------------------------------------------------------------------------- */
#enlaces_interes {
  padding: 40px 0 46px;
}

.enla-title {
  text-align: center;
  width: 100%;
  margin-bottom: 26px;
}

.enla-title h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--drtc-blue-darker) !important;
}

.enla-title h2 span.txt-orange {
  color: var(--drtc-orange-text) !important;
}

.customer-logos {
  margin: 0;
}

.customer-logos .slick-slide {
  padding: 0 10px;
}

.customer-logos .client-logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 74px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
  box-shadow: var(--drtc-shadow-sm);
  transition: transform .25s var(--drtc-ease), box-shadow .25s var(--drtc-ease), border-color .25s var(--drtc-ease);
}

.customer-logos .client-logo:hover,
.customer-logos .client-logo:focus-visible {
  transform: translateY(-4px);
  border-color: var(--drtc-orange);
  box-shadow: var(--drtc-shadow);
}

.customer-logos .client-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .3s var(--drtc-ease), opacity .3s var(--drtc-ease);
}

.customer-logos .client-logo:hover img {
  filter: none;
  opacity: 1;
}

.slick-slider .slick-prev,
.slick-slider .slick-next {
  width: 38px;
  height: 38px;
  z-index: 4;
  margin-top: -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--drtc-blue);
  border-radius: 50%;
  box-shadow: var(--drtc-shadow);
  transition: background .2s var(--drtc-ease);
}

.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
  background: var(--drtc-orange);
}

.slick-slider .slick-prev::before { content: "\f104"; }
.slick-slider .slick-next::before { content: "\f105"; }
.slick-slider .slick-prev::before,
.slick-slider .slick-next::before {
  font-family: FontAwesome;
  font-size: 1.05rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   17. PIE DE PAGINA
   -------------------------------------------------------------------------- */
#mu-footer {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  font-size: .86rem;
}

#mu-footer .mu-footer-top {
  background: var(--drtc-white);
  padding: 40px 0 34px;
  width: 100%;
  border-top: 5px solid var(--drtc-orange);
}

#mu-footer .mu-footer-bottom {
  /* El pie se hunde un tono mas que la barra de contacto para cerrar la
     pagina con el color mas oscuro de la paleta. */
  background: var(--drtc-blue-deep) !important;
  padding: 14px 0;
  width: 100%;
}

#mu-footer .mu-footer-top .mu-footer-top-area {
  display: block;
  float: none;
  width: 100%;
}

#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget {
  display: block;
  float: none;
  width: 100%;
  height: 100%;
}

#mu-footer .mu-footer-widget h4 {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--drtc-blue-darker) !important;
}

#mu-footer .mu-footer-widget h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--drtc-orange);
  border-radius: 2px;
}

#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a,
#mu-footer .mu-footer-widget ul li a {
  display: block;
  padding: 5px 0 5px 18px;
  font-size: .84rem;
  font-weight: 500;
  text-transform: none;
  color: var(--drtc-body) !important;
}

#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a::before,
#mu-footer .mu-footer-widget ul li a::before {
  content: "\f105";
  left: 0;
  top: 6px;
  position: absolute;
  font-family: FontAwesome;
  font-size: .7rem;
  color: var(--drtc-orange-text);
}

#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a:hover,
#mu-footer .mu-footer-widget ul li a:hover {
  margin-left: 0 !important;
  color: var(--drtc-blue) !important;
  text-decoration: none;
}

#mu-footer .mu-footer-widget p {
  color: var(--drtc-body) !important;
  font-size: .84rem;
  margin-bottom: 6px;
}

#icodefensa_foot {
  width: 62%;
  max-width: 150px;
  height: auto;
  padding-bottom: 10px;
}

#mu-footer .mu-footer-widget address {
  font-style: normal;
  line-height: 1.65;
}

#mu-footer .mu-footer-widget address p {
  display: flex;
  gap: 8px;
}

#mu-footer .mu-footer-widget address i {
  color: var(--drtc-orange-text);
  width: 15px;
  text-align: center;
  margin-top: 3px;
}

#mu-footer .mu-footer-map {
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
  overflow: hidden;
  line-height: 0;
}

#mu-footer .mu-footer-map iframe {
  width: 100%;
  height: 190px;
  border: 0;
  display: block;
  filter: grayscale(.35);
}

#mu-footer .mu-footer-bottom .mu-footer-bottom-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  text-align: center;
}

#mu-footer .mu-footer-bottom .mu-footer-bottom-area p {
  margin: 0;
  font-size: .78rem;
  color: var(--drtc-blue-line) !important;
  letter-spacing: .2px;
}

#mu-footer .mu-footer-bottom .mu-footer-bottom-area .sep {
  opacity: .5;
}

.footer-redes {
  display: inline-flex;
  gap: 8px;
}

.footer-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff !important;
  font-size: .82rem;
  /* El pie cierra con fondo blanco, asi que un circulo blanco con icono
     blanco dejaba los enlaces invisibles. Cada red lleva su color. */
  background: var(--drtc-blue-deep);
  transition: background .2s var(--drtc-ease), transform .2s var(--drtc-ease);
}

.footer-redes a.drtc-red-facebook { background: #3b5998; }
.footer-redes a.drtc-red-x { background: #000; }
.footer-redes a.drtc-red-youtube { background: #d95232; }
.footer-redes a.drtc-red-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }

/* Al final: gana sobre los colores de marca, que tienen la misma jerarquia. */
.footer-redes a:hover,
.footer-redes a:focus {
  background: var(--drtc-orange);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Iconos de marca dibujados en SVG (FontAwesome 4.7 no incluye TikTok ni la X). */
.drtc-ico-tiktok,
.drtc-ico-x {
  width: 1em;
  height: 1em;
  max-width: 16px;
  max-height: 16px;
  display: inline-block;
  vertical-align: -.125em;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   18. REDES SOCIALES FLOTANTES
   -------------------------------------------------------------------------- */
#sociales.social {
  position: fixed;
  left: 0;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 1020;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-left: 0;
  border-right: 1px solid var(--drtc-line);
  border-radius: 0 var(--drtc-radius) var(--drtc-radius) 0;
  box-shadow: var(--drtc-shadow);
  overflow: hidden;
}

#sociales.social ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

#sociales.social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 !important;
  color: #fff;
  font-size: 1.05rem;
  transition: transform .22s var(--drtc-ease), filter .22s var(--drtc-ease);
}

#sociales.social ul li a:hover,
#sociales.social ul li a:focus {
  transform: scale(1.12);
  filter: brightness(1.12);
  text-decoration: none;
}

#sociales.social .fa-facebook { background: #3b5998; }
#sociales.social .drtc-red-x { background: #000; }
#sociales.social .fa-youtube { background: #d95232; }
#sociales.social .fa-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
#sociales.social .fa-whatsapp { background: #25d366; }
#sociales.social .drtc-red-tiktok { background: #010101; }

/* --------------------------------------------------------------------------
   19. VOLVER ARRIBA
   -------------------------------------------------------------------------- */
#drtc-top {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1025;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.1rem;
  color: #fff;
  background: var(--drtc-blue);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--drtc-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s var(--drtc-ease), transform .25s var(--drtc-ease), visibility .25s, background .2s var(--drtc-ease);
}

#drtc-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#drtc-top:hover,
#drtc-top:focus {
  background: var(--drtc-orange);
}

/* --------------------------------------------------------------------------
   20. MODALES
   -------------------------------------------------------------------------- */
.modal-content {
  border: 0;
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-lg);
  overflow: hidden;
}

.modal-header {
  border-bottom: 0;
  padding: 14px 18px;
  background: var(--drtc-blue-darker);
}

.modal-header .close {
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  opacity: .85;
  text-shadow: none;
  padding: 4px 8px;
  border-radius: 6px;
}

.modal-header .close:hover,
.modal-header .close:focus {
  color: #fff;
  opacity: 1;
  background: var(--drtc-orange);
}

/* Modal de anuncios regionales: la imagen se ve completa y sin recortarse,
   y el documento va debajo. */
#doc_view .modal-body {
  padding: 0;
  background: var(--drtc-bg);
}

#doc_view_nombre {
  display: inline-block;
  max-width: 62ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.drtc-anuncio-modal {
  padding: 16px;
}

.drtc-anuncio-modal__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 14px;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
  box-shadow: var(--drtc-shadow-sm);
}

.drtc-anuncio-modal__doc {
  display: block;
  width: 100%;
  min-height: 450px;
  background: var(--drtc-white);
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
}

.drtc-anuncio-modal__pie {
  margin: 14px 0 0;
  text-align: center;
}

.drtc-anuncio-modal__btn {
  color: #fff;
  background: var(--drtc-blue);
  border-color: var(--drtc-blue);
  font-weight: 600;
}

.drtc-anuncio-modal__btn:hover,
.drtc-anuncio-modal__btn:focus {
  color: #fff;
  background: var(--drtc-orange);
  border-color: var(--drtc-orange);
}

.modal-body {
  padding: 18px;
}

.modal-footer {
  border-top: 1px solid var(--drtc-line);
  padding: 14px 18px;
}

#anuncio .modal-dialog {
  max-width: 560px;
  margin: 1rem auto;
}

#anuncio .modal-body {
  padding: 10px 10px 30px !important;
  background: var(--drtc-blue-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}

#anuncio .modal-content {
  background: #fff;
}

#anuncio .carousel-indicators {
  bottom: 6px !important;
}

#anuncio .modal-footer {
  background: #fff;
}

/* El comunicado se muestra contenido dentro de un alto maximo: antes ocupaba
   todo el ancho del modal y los verticales quedaban enormes. */
#anuncio .carousel,
#anuncio .carousel-inner,
#anuncio .carousel-item {
  width: 100%;
}

#anuncio .carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

#anuncio img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
  border-radius: var(--drtc-radius-sm);
}

@media (max-width: 575.98px) {
  #anuncio .modal-dialog {
    max-width: 94%;
    margin: .5rem auto;
  }

  #anuncio img {
    max-height: 46vh;
  }
}

.btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 8px 20px;
  transition: all .2s var(--drtc-ease);
}

.btn-primary {
  background: var(--drtc-blue);
  border-color: var(--drtc-blue);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--drtc-blue-dark);
  border-color: var(--drtc-blue-dark);
}

.btn-outline-info {
  color: var(--drtc-blue) !important;
  border-color: var(--drtc-blue-line);
  background: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.btn-outline-info:hover,
.btn-outline-info:focus {
  background: var(--drtc-blue);
  border-color: var(--drtc-blue);
  color: #fff !important;
}

.btn-outline-info::after {
  content: " \f105";
  font-family: FontAwesome;
}

#viewpdf iframe,
#viewvid iframe {
  width: 100%;
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
}

.drtc-modal-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 220px;
  color: var(--drtc-muted);
  font-size: .88rem;
}

.drtc-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--drtc-line);
  border-top-color: var(--drtc-blue);
  border-radius: 50%;
  animation: drtcSpin .8s linear infinite;
}

@keyframes drtcSpin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   21. ESTADOS VACIOS / UTILIDADES
   -------------------------------------------------------------------------- */
.text-info {
  color: var(--drtc-muted) !important;
}

.drtc-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 46px 20px;
  text-align: center;
  color: var(--drtc-muted);
  background: #fff;
  border: 1px dashed #c4d4e2;
  border-radius: var(--drtc-radius);
}

.drtc-empty i {
  font-size: 2.2rem;
  color: #9fb6c9;
}

.drtc-alert-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--drtc-orange-dark);
  background: var(--drtc-orange-soft);
  border: 1px solid var(--drtc-orange-soft);
  border-radius: var(--drtc-radius-sm);
}

.drtc-alert-bar i {
  color: var(--drtc-orange-text);
  font-size: 1.05rem;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   22. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .row-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drtc-quicklinks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .drtc-anuncios__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #menupri .nav-item > .nav-link { padding: 0 10px; font-size: .68rem; }
  .nav-search input[type="search"] { width: 140px; }
}

@media (max-width: 992px) {
  :root { --drtc-nav-h: 52px; }

  .row-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drtc-social-videos__grid { grid-template-columns: minmax(0, 1fr); }
  .drtc-social-videos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #cabecera .img-imgtrans { max-width: 120px; }
  #cabecera .img-imgSecundario { max-width: 130px; }
  .nav-search { padding: 10px 16px 0; }
  .nav-search input[type="search"] { width: 100%; }
  .nav-search form { width: 100%; }
  #sociales.social { top: auto; bottom: 0; right: 0; left: 0; transform: none; flex-direction: row; justify-content: center; border-radius: 0; border-right: 0; border-left: 0; border-bottom: 0; }
  #sociales.social ul { flex-direction: row; }
  #sociales.social ul li a { width: 100%; height: 40px; }
  #drtc-top { bottom: 58px; }
  .drtc-quicklinks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drtc-anuncios__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #noticia,
  #video,
  #social,
  #importante,
  #recomendacion,
  #preg_frecuentes,
  #enlaces_interes,
  #anuncios,
  #main { padding: 28px 0; }

  .titulo_principal,
  .section-title { font-size: 1.15rem !important; }

  /* El alto de la imagen del hero, el padding del pie y el tamano del titular
     ya se ajustan solos con clamp(), segun el ancho disponible. */
  .drtc-banner .carousel-item img { height: 210px; }
  .drtc-social-videos { padding: 18px; }
  .drtc-social-videos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drtc-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 10px; }
  .drtc-news-item__thumb { flex-basis: 96px; }
  .drtc-anuncios__grid { grid-template-columns: minmax(0, 1fr); }
  .drtc-anuncio-card__titulo { padding: 10px 10px 5px; font-size: .8rem; }
  .drtc-anuncio-card__pie { padding: 0 10px 11px; }
  .drtc-anuncio-card__accion { font-size: .65rem; padding: 4px 8px; }
  .drtc-anuncio-modal { padding: 12px; }
  .drtc-anuncio-modal__doc { min-height: 320px; }
  #doc_view_nombre { max-width: 30ch; }
  #cabecera .deno_anual { display: none; }
  #mu-header .mu-header-area .mu-header-top-left .mu-top-phone { display: none; }
  #mu-footer .mu-footer-top { padding: 30px 0 24px; }
  .enla-title h2 { font-size: 1.05rem; }
}

@media (max-width: 480px) {
  .row-cards,
  .row-cards--3,
  .row-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .drtc-social-videos__list { grid-template-columns: minmax(0, 1fr); }
  .drtc-quicklinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drtc-banner .carousel-item img { height: 150px; }
  #drtc-top { width: 40px; height: 40px; right: 12px; }
  .carousel-control-prev,
  .carousel-control-next { opacity: 1; }
}

/* Puntos de corte heredados que sigue usando el sitio */
@media (min-width: 220px) and (max-width: 1280px) {
  .btn-outline-info { font-size: .72rem; padding: 7px 14px; }
}

@media (max-width: 640px) {
  #mu-header .mu-header-area .mu-header-top-left .mu-top-phone { display: none; }
}

/* --------------------------------------------------------------------------
   23. FICHA DE NOTICIA (actualidad.php)
   -------------------------------------------------------------------------- */
/* La miga de pan conserva el fondo y la sombra que le da style.css: aqui solo
   se ajustan separacion y tipografia, sin pelear con ese !important. */
.drtc-breadcrumb {
  margin: 0 0 18px;
  padding: 12px 18px;
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--drtc-radius-sm);
}

.drtc-breadcrumb a {
  color: var(--drtc-blue);
}

.drtc-breadcrumb .active {
  color: var(--drtc-muted);
}

.drtc-article {
  padding: 0 0 30px;
}

.drtc-article__head {
  margin-bottom: 20px;
}

/* Antetitulo: etiqueta de seccion + fecha de publicacion */
.drtc-article__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.drtc-article__fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--drtc-muted);
}

.drtc-article__fecha i {
  color: var(--drtc-orange-text);
}

/* El titular se respeta tal como viene (tituloLegible ya lo paso a caja de
   oracion): forzar mayusculas convierte una frase larga en un bloque pesado. */
.drtc-article__title {
  margin: 0 0 12px;
  font-size: clamp(1.35rem, 2.3vw, 2rem) !important;
  font-weight: 800;
  line-height: 1.22;
  text-transform: none;
  text-wrap: balance;
  color: var(--drtc-ink) !important;
}

.drtc-article__subtitle {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--drtc-orange);
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  line-height: 1.55;
  font-weight: 500;
  color: var(--drtc-muted);
}

/* --- Galeria ------------------------------------------------------------ */
.drtc-gallery {
  margin: 0 0 24px;
}

.drtc-gallery__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: #dbe7f0;
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
  overflow: hidden;
}

.drtc-gallery__stage img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
}

.drtc-gallery__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 0;
  font-size: .76rem;
  color: var(--drtc-muted);
}

.drtc-gallery__counter {
  font-weight: 800;
  color: var(--drtc-blue-dark);
}

.drtc-gallery__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.drtc-gallery__hint i {
  color: var(--drtc-orange-text);
}

.drtc-gallery__zoom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  background: var(--drtc-blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--drtc-ease);
}

.drtc-gallery__zoom:hover,
.drtc-gallery__zoom:focus {
  background: var(--drtc-blue-dark);
}

/* Miniaturas: tira horizontal con la activa resaltada. */
.drtc-gallery__thumbs {
  display: flex;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.drtc-gallery__thumb {
  flex: 0 0 auto;
}

.drtc-gallery__thumb-btn {
  display: block;
  width: 104px;
  height: 72px;
  padding: 0;
  border: 2px solid var(--drtc-line);
  border-radius: var(--drtc-radius-sm);
  background: #dbe7f0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s var(--drtc-ease), transform .2s var(--drtc-ease);
}

.drtc-gallery__thumb-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drtc-gallery__thumb-btn:hover,
.drtc-gallery__thumb-btn:focus {
  transform: translateY(-2px);
  border-color: var(--drtc-blue-line);
}

.drtc-gallery__thumb-btn.is-active {
  border-color: var(--drtc-orange);
}

/* --- Cuerpo de la noticia ------------------------------------------------ */
.drtc-prose {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--drtc-body);
}

.drtc-prose p {
  margin: 0 0 1.1em;
}

.drtc-prose p:last-child {
  margin-bottom: 0;
}

.drtc-prose a {
  color: var(--drtc-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.drtc-prose a:hover,
.drtc-prose a:focus {
  color: var(--drtc-orange-text);
}

.drtc-prose ul,
.drtc-prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
  list-style: revert;
}

.drtc-prose blockquote {
  margin: 0 0 1.1em;
  padding: 12px 16px;
  border-left: 3px solid var(--drtc-blue-line);
  background: var(--drtc-blue-soft);
  border-radius: 0 var(--drtc-radius-sm) var(--drtc-radius-sm) 0;
}

/* --- Pie: compartir y volver --------------------------------------------- */
.drtc-article__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 2px solid var(--drtc-line);
}

.drtc-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.drtc-share__label {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--drtc-muted);
}

.drtc-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.drtc-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: .76rem;
  font-weight: 700;
  color: #fff;
  background: var(--drtc-blue);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--drtc-ease), transform .2s var(--drtc-ease);
}

.drtc-share__btn:hover,
.drtc-share__btn:focus {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

.drtc-share__btn--fb { background: #1877f2; }
.drtc-share__btn--fb:hover, .drtc-share__btn--fb:focus { background: #145ec4; }
.drtc-share__btn--x { background: #15202b; }
.drtc-share__btn--x:hover, .drtc-share__btn--x:focus { background: #000; }
.drtc-share__btn--wa { background: #128c4a; }
.drtc-share__btn--wa:hover, .drtc-share__btn--wa:focus { background: #0d6d38; }
.drtc-share__btn--link { background: var(--drtc-blue-dark); }
.drtc-share__btn--link:hover, .drtc-share__btn--link:focus { background: var(--drtc-blue-darker); }
.drtc-share__btn--ok { background: var(--drtc-ok); }

/* --- Columna lateral ------------------------------------------------------ */
.drtc-side {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--drtc-line);
  border-radius: var(--drtc-radius);
  box-shadow: var(--drtc-shadow-sm);
}

.drtc-side__title {
  position: relative;
  margin: 0 0 16px;
  padding-bottom: 10px;
  font-size: 1.1rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--drtc-blue-darker) !important;
  border-bottom: 2px solid var(--drtc-line);
}

.drtc-side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 62px;
  height: 2px;
  background: var(--drtc-orange);
  border-radius: 2px;
}

.drtc-side__cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  text-align: center;
}

/* --- Visor de imagenes (modal) ------------------------------------------- */
.drtc-modal-galeria {
  padding: 0;
  background: #0d1b26;
  text-align: center;
}

.drtc-modal-galeria img {
  display: block;
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
}

.drtc-modal-galeria__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  font-size: .8rem;
  font-weight: 700;
  color: #d8e6f0;
  background: rgba(255, 255, 255, .06);
}

.drtc-modal-galeria__pie a {
  color: var(--drtc-orange);
  font-weight: 700;
}

.drtc-modal-galeria__nav {
  justify-content: space-between;
  background: var(--drtc-blue-darker);
}

.drtc-modal-galeria__nav .btn-primary {
  background: var(--drtc-blue);
  border-color: var(--drtc-blue);
  font-size: .78rem;
}

.drtc-modal-galeria__nav .btn-primary:hover,
.drtc-modal-galeria__nav .btn-primary:focus {
  background: var(--drtc-orange);
  border-color: var(--drtc-orange);
}

@media (max-width: 991.98px) {
  .drtc-side {
    margin-top: 26px;
  }
}

@media (max-width: 767.98px) {
  .drtc-article__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .drtc-article__foot .btn {
    text-align: center;
  }

  .drtc-gallery__hint {
    display: none;
  }

  .drtc-gallery__zoom {
    margin-left: auto;
  }

  .drtc-prose {
    font-size: 1rem;
  }
}

@media print {
  .drtc-gallery__thumbs,
  .drtc-gallery__zoom,
  .drtc-article__foot,
  .drtc-breadcrumb {
    display: none !important;
  }

  .drtc-article {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   24. PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  #menupri,
  #mu-header,
  #cabecera,
  #sociales,
  #drtc-top,
  .drtc-social-videos,
  #anuncio { display: none !important; }

  body#inicio { background: #fff !important; }
}

/* Barra de comunicados (includes/anuncioini.php) */
.barra-anuncios {
  margin: 28px 0;
  padding: 20px 0 24px;
  background: #f4f6f9;
  border-top: 3px solid #0f62ac;
  border-bottom: 1px solid #dfe4ea;
}

.barra-anuncios__titulo {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  color: #fbc711;
}

.barra-anuncios__titulo span { color: #0f62ac; }

.barra-anuncios__img {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid #e2e6eb;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 98, 172, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}

a:hover .barra-anuncios__img,
.barra-anuncios__img:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(15, 98, 172, .22);
}

.barra-anuncios__vacio {
  margin: 0;
  color: #6b7785;
  text-align: center;
}