/* ============================================================
   Portal Tucumán — complemento local del theme oficial.
   El grueso de los estilos viene del CSS institucional (CDN).
   Aquí solo: tipografía base, páginas internas y ajustes menores.
   Paleta: celeste #00A7DD · azul #0B4A6E
   ============================================================ */
:root{ --tuc-celeste:#00A7DD; --tuc-azul:#0B4A6E; }

body{ font-family:"Montserrat",Arial,Helvetica,sans-serif; }

/* Cursor en controles del slider */
.swiper-button-prev,.swiper-button-next{ cursor:pointer; }

/* ---------- Páginas internas (listados y detalle) ---------- */
.page-head{ padding:20px 0 6px; }
.page-breadcrumb{ font-size:13px; color:#7a8a95; margin-bottom:6px; }
.page-breadcrumb a{ color:var(--tuc-celeste); }
.page-breadcrumb a:hover{ color:var(--tuc-azul); text-decoration:underline; }
.page-breadcrumb-sep{ margin:0 5px; color:#b3c1ca; }
.page-breadcrumb-actual{ color:#7a8a95; }
.page-title-lg{
  font-size:26px; font-weight:700; color:var(--tuc-azul);
  border-bottom:3px solid var(--tuc-celeste); display:inline-block; padding-bottom:6px; margin:0 0 4px;
}

/* ---------- Detalle de artículo / licitación / multimedia ----------
   IMPORTANTE: no usar la clase `.article` del CSS institucional como
   contenedor del interior. Allí `.article` es la TARJETA con imagen
   (position:relative; padding-bottom:53.7%; overflow:hidden; box-shadow),
   así que envolver el detalle con esa clase recorta el texto y deja un
   hueco enorme debajo. El contenedor del detalle es `.article-detalle`. */
.article-detalle{ padding:0 0 5rem; }
.article-detalle .article-body{ max-width:950px; margin-left:auto; margin-right:auto; }  /* ancho de lectura, centrado */
.article-title{ font-size:28px; font-weight:700; color:var(--tuc-azul); margin:10px 0 6px; line-height:1.25; }
.article-meta{ color:#767676; font-size:14px; margin:0 0 22px; }
.article-cover{ width:100%; height:auto; margin:0 0 24px; }

/* Grilla de listado (reusa el look de las tarjetas de noticias) */
.list-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:26px; padding:10px 0 20px; }
.list-card{ display:flex; flex-direction:column; }
.list-card .list-thumb{ width:100%; padding-top:56%; background:#e8eef2 center/cover no-repeat; border-radius:6px; }
.list-card h3{ font-size:18px; color:var(--tuc-azul); margin:12px 0 6px; line-height:1.3; }
.list-card h3 a{ color:inherit; }
.list-card p{ color:#5c6a73; font-size:14px; margin:0 0 12px; }
.list-empty{ color:#7a8a95; padding:30px 0; }

/* Paginación */
.pager{ display:flex; gap:6px; flex-wrap:wrap; padding:10px 0 40px; }
.pager a,.pager strong{ padding:7px 13px; border:1px solid #d8e2e8; border-radius:5px; color:var(--tuc-azul); text-decoration:none; }
.pager .active strong{ background:var(--tuc-celeste); color:#fff; border-color:var(--tuc-celeste); }

/* Reasegura que el contenido interno respete el header fijo */
/* Alto del header fijo. En móvil el header institucional mide 70px, así que
   dejar 120 o 175 abría un hueco enorme arriba de cada página. */
.l-main.l-inner{ padding-top:175px; min-height:60vh; }

@media (max-width:768px){
  .l-main.l-inner{ padding-top:70px; }
  .article-title{ font-size:23px; }
}

/* ---------- Header institucional: fijo y funcional siempre ---------- */
.l-header{
  position:fixed; top:0; left:0; right:0; width:100%;
  z-index:1000; background:#fff;
  transition:box-shadow .25s ease, padding .25s ease, transform .25s ease;
}
/* Al scrollear se simplifica (compacto) pero permanece visible y operativo */
.l-header.l-header-is-compact{ box-shadow:0 3px 14px rgba(11,74,110,.15); }
.l-header .navbar-content{ align-items:center; }
/* Los submenús se muestran/ocultan por JS mediante estilos inline (opacity/height).
   Solo garantizamos que queden por encima del contenido; el color/fondo lo define
   el CSS institucional original (no lo sobreescribimos). */
.l-header .navbar-item{ position:relative; }
.l-header .navbar-item ul{ z-index:1200; }

/* ---------- Footer: teléfonos siempre en blanco (sin hover de color) ---------- */
.l-footer .number-item,
.l-footer .number-item:hover,
.l-footer .number-item:focus,
.l-footer .number-item *,
.l-footer .number-item:hover *,
.l-footer .footer-number-container a,
.l-footer .footer-number-container a:hover,
.l-footer .footer-number-container a:hover *{
  color:#ffffff !important;
}

/* ---------- Página interna de Noticias: 3 columnas ---------- */
.news-grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  padding:10px 0 24px;
}
@media (max-width:900px){ .news-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .news-grid-3{ grid-template-columns:1fr; } }

/* ---------- Páginas internas: títulos alineados a la izquierda ---------- */
.l-inner .section-title-container{ text-align:left; }
.l-inner .section-title{ text-align:left; }
.l-inner .page-title-lg{ text-align:left; display:inline-block; }

/* ---------- Botón CTA de la página interna de noticias ---------- */
.news-cta{ margin-bottom:56px; }               /* espacio para que no quede pegado al footer */
.news-cta .cta-dominio{ color:#00A7DD; }        /* el dominio en celeste institucional */
.news-cta .button-gray .button-icon{
  background:#00A7DD !important;                /* el círculo del ícono ">" en celeste */
  color:#fff !important;
}

/* ---------- Lightbox de video ---------- */
.mm-lightbox{ position:fixed; inset:0; z-index:2000; display:none; }
.mm-lightbox.open{ display:block; }
.mm-lightbox-backdrop{ position:absolute; inset:0; background:rgba(3,20,32,.85); }
.mm-lightbox-box{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(900px,92vw); }
.mm-lightbox-video{ position:relative; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.mm-lightbox-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mm-lightbox-close{ position:absolute; top:-44px; right:0; background:none; border:0; color:#fff; font-size:34px; line-height:1; cursor:pointer; }
.mm-lightbox-close:hover{ color:#00A7DD; }

/* ---------- Grilla multimedia interna (mismo diseño que home) ---------- */
.multimedia-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:6px 0 24px; }
@media (max-width:900px){ .multimedia-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .multimedia-grid{ grid-template-columns:1fr; } }
.multimedia-grid .multimedia-item{ display:block; }
.js-mm-video{ cursor:pointer; }

/* ---------- Servicios interior: cuadrícula de 6 columnas ---------- */
.servicios-grid-6{
  display:grid; grid-template-columns:repeat(6,1fr); gap:16px;
  list-style:none; margin:0 0 30px; padding:0;
}
.servicios-grid-6 > li{ margin:0; }
@media (max-width:1100px){ .servicios-grid-6{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:800px){  .servicios-grid-6{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){  .servicios-grid-6{ grid-template-columns:repeat(2,1fr); } }


/* ============================================================
   Listados de Artículos / Licitaciones
   Replican el layout oficial: <main class="l-main l-news"> con la
   grilla .news-container (3 → 2 → 1 columnas) y tarjetas .news.
   Todo el grueso viene del CSS institucional; acá sólo lo que falta.
   ============================================================ */
.l-news .news-container{ padding-bottom:1rem; }
.news{ background:#fff; display:flex; flex-direction:column; }
.news-title{ overflow-wrap:break-word; word-break:break-word; }
.news-button{ margin-top:auto; }            /* el botón queda al pie de la tarjeta */
.news-button .button-icon i{ font-style:normal; }
.news .button-blue{ justify-content:flex-end; }   /* "leer más" alineado a la derecha */

/* En las tarjetas del feed (portada y /noticias) .news-button es un contenedor
   con el enlace adentro; el oficial lo muestra a la izquierda. En /articulos,
   /licitaciones y /eventos .news-button ES el enlace y queda a la derecha,
   igual que en el sitio oficial, así que esta regla no los toca. */
div.news-button{ display:flex; justify-content:flex-start; }
div.news-button > .button-blue{ flex:0 0 auto; justify-content:flex-start; }

/* Imágenes del feed de noticias: <img> con lazy-loading nativo, ocupando el
   contenedor de aspect-ratio como lo hacía el background-image anterior. */
img.responsive-image-asset{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}

/* ============================================================
   Contenido cargado desde CKEditor (.article-body)
   El CSS institucional trae un reset total (h1..h6, ul, ol, em, th
   quedan con font:inherit / list-style:none), así que lo que viene
   del editor pierde jerarquía si no se restituye acá.
   ============================================================ */
.article-body{ font-size:1.6rem; line-height:1.6; color:#3d464d; }
.article-body p{ margin:0 0 16px; line-height:1.6; }
.article-body h1{ font-size:28px; }
.article-body h2{ font-size:24px; }
.article-body h3{ font-size:20px; }
.article-body h4{ font-size:18px; }
.article-body h5,.article-body h6{ font-size:16px; }
.article-body h1,.article-body h2,.article-body h3,
.article-body h4,.article-body h5,.article-body h6{
  color:var(--tuc-azul); font-weight:600; line-height:1.3; margin:28px 0 12px;
}
.article-body strong,.article-body b{ font-weight:700; color:#2f3a42; }
.article-body em,.article-body i{ font-style:italic; }
.article-body u{ text-decoration:underline; }
.article-body s,.article-body strike,.article-body del{ text-decoration:line-through; }
.article-body sub{ vertical-align:sub; font-size:.8em; }
.article-body sup{ vertical-align:super; font-size:.8em; }
.article-body a{ color:var(--tuc-celeste); text-decoration:underline; }
.article-body a:hover{ color:var(--tuc-azul); }
.article-body ul{ list-style:disc; margin:0 0 16px 24px; }
.article-body ol{ list-style:decimal; margin:0 0 16px 24px; }
.article-body ul ul{ list-style:circle; margin-bottom:0; }
.article-body li{ margin-bottom:7px; line-height:1.6; }
.article-body img{ max-width:100%; height:auto; margin:10px 0; }
.article-body figure{ margin:22px 0; max-width:100%; }
.article-body figcaption{ font-size:13.5px; color:#767676; margin-top:6px; }
.article-body table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:15px; }
.article-body table td,.article-body table th{ border:1px solid #d9e2e8; padding:8px 10px; vertical-align:top; }
.article-body table th{ background:#f2f7fa; font-weight:700; color:var(--tuc-azul); text-align:left; }
.article-body blockquote{
  margin:18px 0; padding:12px 18px; border-left:4px solid var(--tuc-celeste);
  background:#f5fafd; color:#4a5a65; font-style:italic;
}
.article-body hr{ border:0; border-top:1px solid #e3eaef; margin:26px 0; }
.article-body iframe{ max-width:100%; }
.article-body > *:last-child{ margin-bottom:0; }

/* ---------- Páginas internas: imagen destacada ---------- */
/* Imagen destacada de Nuestra Provincia, Gobernador y Campañas.
   Para cambiar la altura, tocar el max-height de acá abajo (y el del media query). */
.pagina-destacada{ margin:0 0 18px; }
.pagina-destacada img{ width:100%; height:auto; max-height:440px; object-fit:cover; border-radius:4px; }
@media (max-width:768px){
  .pagina-destacada img{ max-height:260px; }
}

/* ---------- Solapas de idioma (Español / English) ----------
   El markup y el estilo son los institucionales: .text-button-list con
   .text-button/.text-button-active, y .text-content/.text-content-active
   (style.css ya oculta el bloque inactivo). Acá sólo el cursor y el hover.
   El ancho del contenido lo fija .text-container (max-width:950px, centrado). */
.text-button{ font-family:inherit; }
.text-black .text-button:hover{ color:var(--tuc-azul); }
.text-button-list{ margin:0; padding:0; list-style:none; }


/* ---------- Página del Gobernador ---------- */
/* Las redes del gobernador usan .follow-me y .social-links del CSS institucional,
   con los íconos de la tipografía "icons" (i-twitter, i-facebook, i-instagram,
   i-youtube), los mismos del header y el pie. */
.l-governor .follow-me{ margin-bottom:2.5rem; }
.gob-grid{ display:grid; grid-template-columns:1fr 320px; gap:34px; align-items:start; }
.gob-col-aside .gob-foto{ width:100%; height:auto; border-radius:4px; margin-bottom:14px; }
.gob-cvs{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 10px; }
.gob-fotos{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:36px; }
.gob-fotos img{ width:100%; height:150px; object-fit:cover; border-radius:4px; }
@media (max-width:900px){
  .gob-grid{ grid-template-columns:1fr; }
  .gob-fotos{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Listado de campañas (/informacionutil) ---------- */
.campania-grid{
  list-style:none; margin:0 0 40px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.campania-grid > li{ margin:0; }
.campania-card{ display:block; text-decoration:none; }
/* Alto fijo con recorte centrado: las tarjetas quedan parejas ahora que no
   llevan título. Para subirlo o bajarlo, tocar este height (y el de los dos
   media queries de abajo). */
.campania-card img{
  width:100%; height:205px; object-fit:cover; display:block; border-radius:4px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.campania-card:hover img{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(11,74,110,.18); }
.campania-sinimg{
  display:grid; place-items:center; height:205px; border-radius:4px;
  background:linear-gradient(135deg,#00A7DD,#0B4A6E); color:#fff; padding:16px; text-align:center; font-weight:600;
}
@media (max-width:900px){
  .campania-grid{ grid-template-columns:repeat(2,1fr); }
  .campania-card img, .campania-sinimg{ height:205px; }
}
@media (max-width:560px){
  .campania-grid{ grid-template-columns:1fr; }
  .campania-card img, .campania-sinimg{ height:195px; }
}

/* ---------- Organismos ----------
   El listado y la ficha usan las clases del CSS institucional
   (.l-organisms / .l-organisms-show, .organism-container, .organism,
   .list-item-container, .organism-tree, .font). Acá va sólo lo que ese
   CSS no cubre. */
.l-organisms .organism a,
.l-organisms-show .organism a{ display:flex; flex-direction:column; height:100%; text-decoration:none; }
.l-organisms .organism-link,
.l-organisms-show .organism-link{ margin-top:auto; }
.l-organisms .organism:hover,
.l-organisms-show .organism:hover{ background:#f5fbfe; }
.organism-tree-item .organism-tree-list{ margin-top:0.6rem; }
.l-organisms .section-text,
.l-organisms-show .section-text{ margin-bottom:2.5rem; }

/* ============================================================
   Eventos (Agenda)
   Listado sobre la grilla institucional .news-container, tarjetas
   propias, y bloque de 4 destacados en la portada.
   ============================================================ */

/* --- Filtros del listado --- */
.eventos-filtros{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin:0 0 26px;
}
.eventos-categorias{ display:flex; flex-wrap:wrap; gap:8px; }
.eventos-chip{
  display:inline-block; padding:5px 14px; border:1px solid #d9e2e8; border-radius:20px;
  font-size:13.5px; line-height:1.4; color:#5c6a73; text-decoration:none; background:#fff;
  transition:background-color .15s ease, color .15s ease;
}
.eventos-chip.is-active{ color:#fff !important; }
.eventos-mes{ display:flex; align-items:center; gap:8px; font-size:14px; color:#5c6a73; }
.eventos-mes select{
  font:inherit; font-size:14px; padding:6px 10px; border:1px solid #d9e2e8;
  border-radius:4px; background:#fff; color:#3d4a53;
}

/* --- Tarjeta del listado --- */
.evento-card{ display:flex; flex-direction:column; background:#fff; }
.evento-card-imagen{
  display:block; position:relative; padding-top:56%; overflow:hidden; background:#eef4f8;
}
.evento-card-imagen img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.evento-card-sinimagen{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; color:var(--tuc-celeste); letter-spacing:.04em;
}
.evento-card-cuerpo{ padding:0 1rem; }
.evento-card-bajada{
  margin:8px 0 0; font-size:14.5px; line-height:1.5; color:#5c6a73;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.evento-card .news-date{ margin-top:1rem; }

/* Chip de categoría, compartido por listado, detalle y portada */
.evento-chip-cat{
  display:inline-block; margin:1rem 0 0; padding:3px 12px; border-radius:20px;
  font-size:12px; font-weight:600; letter-spacing:.03em; color:#fff; text-decoration:none;
}

/* --- Detalle --- */
.evento-detalle .evento-chip-cat{ margin:0 0 12px; }
.evento-finalizado{
  margin:0 0 18px; padding:10px 16px; border-left:4px solid #E4572E;
  background:#fdf1ed; color:#8a3418; font-size:14.5px;
}
.evento-datos{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px;
  margin:0 0 30px; padding:22px 24px; background:#f5fafd; border-radius:4px; max-width:950px;
}
.evento-dato-titulo{
  margin:0 0 10px; font-size:15px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--tuc-celeste);
}
.evento-dato-texto{ margin:0 0 6px; font-size:16px; line-height:1.5; color:#3d4a53; }
.evento-jornadas{ list-style:none; margin:0; padding:0; }
.evento-jornada{
  display:flex; flex-wrap:wrap; gap:4px 14px; padding:7px 0;
  border-bottom:1px solid #e3eaef; font-size:15.5px; color:#3d4a53;
}
.evento-jornada:last-child{ border-bottom:0; }
.evento-jornada.es-pasada{ color:#9aa7b0; text-decoration:line-through; }
.evento-jornada-fecha{ font-weight:600; }
.evento-jornada-hora{ color:var(--tuc-celeste); }
.evento-jornada-nota{ font-style:italic; color:#767676; }
.evento-mapa{ display:inline-flex !important; margin-top:6px; }
.evento-masinfo{ margin:0 0 26px; max-width:950px; }
.evento-masinfo .button-blue{ display:inline-flex; }

.evento-compartir{
  display:flex; align-items:center; gap:14px; margin:28px 0 0;
  padding-top:18px; border-top:1px solid #e3eaef; max-width:950px;
}
.evento-compartir-label{ font-size:14px; color:#767676; }
.evento-compartir-item{ color:var(--tuc-celeste); font-size:22px; line-height:1; text-decoration:none; }
.evento-compartir-item:hover{ color:var(--tuc-azul); }
.evento-compartir-texto{ font-size:14px; }

/* --- Portada: 4 destacados --- */
/* Grilla de 4 destacados. El bloque de la portada se quitó a pedido; estas
   reglas quedan por si se vuelve a usar en otra pantalla. */
.eventos-home{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2rem; }
.evento-home{ display:block; text-decoration:none; color:inherit; }
.evento-home-imagen{
  position:relative; padding-top:62%; overflow:hidden; background:#eef4f8; margin-bottom:12px;
}
.evento-home-imagen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.evento-home-fecha{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; color:var(--tuc-celeste);
}
.evento-home .evento-chip-cat{ margin:0 0 8px; }
.evento-home-periodo{ margin:0 0 4px; font-size:13px; color:#767676; }
.evento-home-titulo{ margin:0; font-size:17px; line-height:1.35; font-weight:600; color:var(--tuc-azul); }
.evento-home:hover .evento-home-titulo{ color:var(--tuc-celeste); }

@media (max-width:1000px){
  .eventos-home{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .evento-datos{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:600px){
  .eventos-home{ grid-template-columns:1fr; }
  .eventos-filtros{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   Ajustes de la versión móvil
   ============================================================ */

/* Los bullets de Multimedia sólo existen en el carrusel móvil */
.mm-dots{ display:none; }

/* --- Panel lateral del menú (hamburguesa) --- */
@media (max-width:768px){
  .navbar-is-expanded{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:2rem; }
  .navbar-is-expanded .navbar-content{ width:100%; padding:1rem 1.5rem; }
  .navbar-is-expanded .navbar-item{ width:100%; }
  .navbar-is-expanded .navbar-button{ padding:6px 0; }
  .navbar-is-expanded .js-submenu{ padding-left:1.2rem; }
  .navbar-is-expanded .navbar-item a{ color:#fff; display:block; padding:4px 0; }
  .navbar-is-expanded .navbar-item.parent strong{ color:#9fd4ea; font-size:1.3rem; }
  .navbar-toggle{ padding:4px 2px; }
  /* El buscador queda arriba de todo dentro del panel */
  .navbar-is-expanded .search-input{ width:100%; }
}

/* --- Portada: menos aire entre secciones --- */
@media (max-width:768px){
  .l-home .section-title-container{ margin-top:3rem; margin-bottom:2.4rem; }
  .l-home .multimedia-container + .button-container{ margin-bottom:2.5rem; }
  .l-home .hero-slider{ margin-bottom:0; }
  .section-title-container{ margin-top:2.4rem; margin-bottom:2.4rem; }
  .l-home .section-title{ font-size:2.4rem; }
}

/* --- Noticias: carrusel en móvil ---
   Se muestran todas las noticias que trae el feed, igual que en escritorio,
   pero deslizables de a una. Los bullets y el avance automático los pone
   initCarruselMovil() en public.js. */
@media (max-width:768px){
  .l-home .news-wrapper{
    display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:1.2rem;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .l-home .news-wrapper::-webkit-scrollbar{ display:none; }
  .l-home .news-wrapper > .news{
    flex:0 0 86%; scroll-snap-align:center;
    display:flex; flex-direction:column;
  }
  /* El botón "leer más" queda al pie aunque los títulos midan distinto */
  .l-home .news-wrapper > .news .news-button{ margin-top:auto; }
  /* Con muchas noticias los bullets pasan a dos renglones en vez de desbordar */
  #newsDots{ flex-wrap:wrap; row-gap:6px; }
}

/* --- Multimedia: slider horizontal en móvil ---
   Carrusel con scroll-snap: no necesita JS ni librería, y el 86% de ancho
   deja asomar la tarjeta siguiente para que se note que se desliza. */
@media (max-width:600px){
  .l-home .multimedia-wrapper{
    display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding-bottom:1.2rem;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .l-home .multimedia-wrapper::-webkit-scrollbar{ display:none; }
  .l-home .multimedia-wrapper > div{ flex:0 0 86%; scroll-snap-align:center; }

  /* Las cuatro tarjetas con la forma de la posición 1: misma proporción de
     imagen (75%), mismo alto y el título ocupando lo que sobra. El
     `!important` es para ganarle al padding-top:39% que la posición 4 trae
     como estilo en línea. */
  .l-home .multimedia-wrapper > div{ display:flex; align-items:stretch; }
  .l-home .multimedia-wrapper .multimedia-item{ width:100%; height:100%; }
  .l-home .multimedia-wrapper .multimedia-content{ display:flex; flex-direction:column; height:100%; width:100%; }
  .l-home .multimedia-wrapper .multimedia-image-container{ padding-top:75% !important; }
  .l-home .multimedia-wrapper .multimedia-title,
  .l-home .multimedia-wrapper .multimedia-title-cut{
    height:auto; flex:1 1 auto; display:flex; align-items:center;
    font-size:1.6rem; line-height:1.4em; padding:1.5rem; text-transform:none;
  }
  .l-home .multimedia-wrapper .multimedia-title span{ max-height:none; }
  .l-home .multimedia-wrapper .multimedia-icon{ width:5.5rem; }

  /* Bullets, iguales a los del slider principal */
  .mm-dots{ display:flex; justify-content:center; gap:8px; padding-top:14px; }
  .mm-dots .swiper-pagination-bullet{ cursor:pointer; }
}

/* --- Varios del front en pantallas chicas --- */
@media (max-width:768px){
  .article-detalle .article-body,
  .doc-bajada,
  .evento-datos,
  .evento-compartir{ max-width:100%; }
  .article-body{ font-size:1.55rem; }
  /* Las tablas del editor no rompen el ancho: se deslizan */
  .article-body table{ display:block; width:100%; overflow-x:auto; white-space:nowrap; }
  .pager, .paginacion{ overflow-x:auto; }
  .gob-fotos{ grid-template-columns:repeat(2,1fr); }
  .gob-fotos img{ height:120px; }
}
@media (max-width:520px){
  .gob-fotos{ grid-template-columns:1fr; }
}