/*
Theme Name: CDS Providencia
Theme URI: https://www.cdsprovidencia.cl
Author: R&O Infraestructura Digital SpA — AltaHosting
Author URI: https://www.altahosting.cl
Description: Tema institucional de la Corporación de Desarrollo Social de Providencia. Reproduce la propuesta visual aprobada (portada A providencia.cl o B Puente Alto, seleccionable), con las páginas internas comunes. Paleta municipal y tipografía Raleway. Preparado para migración desde Joomla, gestor de noticias, directorio de establecimientos y repositorio documental.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: cds-providencia
*/

:root{
  --azul:#3E96B4; --azul-osc:#2C6E85; --azul-prof:#1B4757;
  --turquesa:#03C2AE; --verde:#8BB844;
  --naranja:#F7931E; --amarillo:#FFCC33; --magenta:#ED1E79; --morado:#662D91; --azul-vivo:#3B6AF4;
  --tinta:#17262C; --gris:#5B6B72; --linea:#DFE7EA; --fondo:#F4F8F9;
  --radio:14px; --sombra:0 2px 4px rgba(23,38,44,.05), 0 12px 28px rgba(23,38,44,.07);
}
*{box-sizing:border-box}
body{margin:0;font-family:Raleway,-apple-system,'Segoe UI',sans-serif;color:var(--tinta);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Barra superior legal / accesibilidad */
.legal{background:var(--azul-prof);color:#fff;font-size:13.5px}
.legal .wrap{display:flex;flex-wrap:wrap;gap:4px 28px;align-items:center;min-height:44px;justify-content:flex-end}
.legal .access{margin-right:auto;display:flex;align-items:center;gap:18px}
.legal .access a{display:flex;align-items:center;gap:6px;font-weight:600;opacity:.85}
.legal .access sup{font-size:.7em}
.legal a{opacity:.9;padding:6px 0;white-space:nowrap;border-bottom:2px solid transparent}
.legal a:hover{opacity:1;border-bottom-color:var(--turquesa)}
.legal .sep{width:1px;height:16px;background:rgba(255,255,255,.25)}
/* El menu "legal" sale de WordPress como <ul>; se le da la misma fila de la maqueta,
   con la rayita separadora dibujada por CSS en vez de un <i class="sep">. */
.legal-menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;margin:0;padding:0;list-style:none}
.legal-menu li{position:relative}
.legal-menu li + li::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:1px;height:16px;background:rgba(255,255,255,.25)}
.legal-menu li,.legal-menu a{white-space:nowrap}
/* Los tres controles son <button>, no enlaces: hacen algo en la pagina, no llevan a otra. */
.legal .access button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-weight:600;opacity:.85;padding:6px 0;
  border-bottom:2px solid transparent}
.legal .access button:hover{opacity:1;border-bottom-color:var(--turquesa)}
.legal .access button:disabled{opacity:.4;cursor:default;border-bottom-color:transparent}
.legal .access button[aria-pressed="true"]{opacity:1;border-bottom-color:var(--amarillo)}

/* --- Tamaño de texto (A+ / A−) -----------------------------------------------
   El sitio esta hecho en px, asi que cambiar la letra raiz no escala nada: se
   escala la pagina completa con zoom, que respeta el diseño y las imagenes. */
.cds-txtm1 body{zoom:.92}
.cds-txt1 body{zoom:1.12}
.cds-txt2 body{zoom:1.25}

/* --- Alto contraste ---------------------------------------------------------
   Fondo negro, texto blanco y enlaces amarillos. Se aplica en bloque a todo el
   documento: si se hiciera seccion por seccion, cualquier bloque nuevo quedaria
   con el fondo claro encima del texto blanco, que es peor que no tener la
   funcion. Las fotos se conservan; lo que se apaga son los fondos decorativos,
   porque encima de ellos el texto deja de leerse. */
.cds-contraste{
  --azul:#FFCC33; --azul-osc:#FFCC33; --azul-prof:#000; --turquesa:#FFCC33; --verde:#FFCC33;
  --naranja:#FFCC33; --amarillo:#FFCC33; --magenta:#FFCC33; --morado:#FFCC33; --azul-vivo:#FFCC33;
  --tinta:#fff; --gris:#fff; --linea:#FFCC33; --fondo:#000; --sombra:none;
}
.cds-contraste,
.cds-contraste *:not(img):not(svg):not(svg *){
  background-color:#000!important;
  background-image:none!important;
  color:#fff!important;
  border-color:#FFCC33!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
.cds-contraste a,.cds-contraste a *{color:#FFCC33!important}
.cds-contraste a:hover,.cds-contraste a:focus{text-decoration:underline}
/* Recuadro solo en lo que ya era un bloque; los enlaces de texto van sin caja,
   o el menu se llena de rectangulos y se lee peor. */
.cds-contraste .btn,.cds-contraste .tile,.cds-contraste .dest,
.cds-contraste .equipo li,.cds-contraste .acceso,.cds-contraste .doc{border:1px solid #FFCC33!important}
.cds-contraste .legal-menu li + li::before{background:#FFCC33!important}
/* El logotipo es oscuro: sobre negro no se veria. */
.cds-contraste .logo img{background:#fff!important;padding:8px;border-radius:6px}
.cds-contraste img{filter:contrast(1.15)}
.cds-contraste :focus-visible{outline:3px solid #FFCC33;outline-offset:2px}

/* Encabezado */
.cabecera{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--linea)}
.cabecera .wrap{display:flex;align-items:center;gap:26px;min-height:92px}
.logo{flex:0 0 auto;display:block}
.logo img{width:270px;height:auto}
.menu-principal{margin-left:auto;display:flex;gap:24px;font-weight:600;font-size:15px;list-style:none;margin:0;padding:0}
.menu-principal a{padding:8px 0;border-bottom:3px solid transparent;color:var(--tinta);display:block}
.menu-principal a:hover,.menu-principal .current-menu-item>a{color:var(--azul);border-bottom-color:var(--azul)}
.lupa{flex:0 0 auto;width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:var(--fondo);border:1px solid var(--linea);color:var(--azul)}
.lupa:hover{background:#fff;border-color:var(--azul)}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:9px;font-weight:700;color:var(--azul);background:none;border:0;font-family:inherit;font-size:15px;cursor:pointer}

/* Migas */
.migas{background:var(--fondo);border-bottom:1px solid var(--linea);font-size:13.5px;color:var(--gris);padding:14px 0}
.migas a{color:var(--azul);font-weight:600}
.migas span{margin:0 8px;opacity:.5}

/* Secciones / títulos genéricos */
.seccion{padding:60px 0}
main{min-height:40vh}

/* Tarjeta de noticia (compartida portada + listado) */
.nota{border-radius:var(--radio);overflow:hidden;background:#fff;border:1px solid var(--linea);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.nota:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.nota .foto{aspect-ratio:3/2;overflow:hidden;background:var(--fondo)}
.nota .foto img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.nota:hover .foto img{transform:scale(1.04)}
.nota .txt{padding:20px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.tag{padding:4px 11px;border-radius:999px;color:#fff;background:var(--azul)}
.tag.salud{background:var(--turquesa);color:#043430}
.tag.edu{background:var(--verde);color:#2A3D0F}
.tag.corp{background:var(--azul)}
.meta time{color:var(--gris);font-weight:600;letter-spacing:0;text-transform:none;font-size:13px}
.nota h3{font-size:17.5px;line-height:1.32;margin:0;font-weight:700}
.nota:hover h3{color:var(--azul-osc)}

/* Transparencia (compartida) */
.transp{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tr{border-radius:var(--radio);padding:26px 22px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.tr svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tr b{font-size:17px;font-weight:700;line-height:1.25;display:block}
.tr small{display:block;opacity:.88;font-size:13.5px;margin-top:5px;font-weight:500}
.tr:nth-child(1){background:var(--azul)}
.tr:nth-child(2){background:var(--morado)}
.tr:nth-child(3){background:var(--azul-vivo)}
.tr:nth-child(4){background:var(--naranja);color:#3A2100}
.tr:nth-child(4) svg{stroke:#3A2100}

/* Títulos de sección centrados (base) */
.tit{margin-bottom:34px}
.tit h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin:0;line-height:1.2}
.tit h2 em{font-style:normal;color:var(--azul)}
.tit p{margin:8px 0 0;color:var(--gris);font-size:15.5px}

/* Pie */
.pie-sitio{background:var(--azul-prof);color:#fff;padding:56px 0 0;font-size:14.5px}
.pie{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.pie .logo img{width:250px}
.pie h4,.pie .pie-tit{font-size:14px;text-transform:uppercase;letter-spacing:1.1px;margin:0 0 16px;color:var(--turquesa)}
.pie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie a{opacity:.86}.pie a:hover{opacity:1;text-decoration:underline}
.pie p{opacity:.86;margin:16px 0 0;line-height:1.75}
.copy{border-top:1px solid rgba(255,255,255,.16);padding:20px 0;font-size:13px;opacity:.75;display:flex;justify-content:center;text-align:center;gap:16px;flex-wrap:wrap}

/* ============ PÁGINAS INTERNAS ============ */
.contenido{padding:44px 0 60px}
h1.tit-p{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.18;margin:0 0 10px}
.bajada{color:var(--gris);font-size:17px;margin:0 0 30px;max-width:65ch}

/* Ficha de establecimiento */
.ficha{display:grid;grid-template-columns:1.55fr 1fr;gap:38px;align-items:start}
.ficha .foto-p{border-radius:var(--radio);overflow:hidden;aspect-ratio:16/9;background:var(--fondo);margin-bottom:26px}
.ficha .foto-p img{width:100%;height:100%;object-fit:cover}
.datos{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;position:sticky;top:110px}
.datos .cab{background:var(--azul);color:#fff;padding:16px 22px;font-weight:700;font-size:16px}
.datos dl{margin:0;padding:8px 22px 18px}
.datos dt{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--azul);margin-top:16px}
.datos dd{margin:3px 0 0;font-size:15px}
.datos .btns{padding:0 22px 22px;display:flex;flex-direction:column;gap:9px}
.bt{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;padding:12px 16px;border-radius:999px;border:2px solid var(--azul);color:var(--azul)}
.bt.solido{background:var(--azul);color:#fff}
.tabla{width:100%;border-collapse:collapse;margin:8px 0 26px}
.tabla th,.tabla td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--linea);font-size:15px}
.tabla th{width:38%;font-weight:700;color:var(--azul-prof);background:var(--fondo)}
.sub{font-size:20px;font-weight:800;margin:32px 0 12px}
.cuerpo p{margin:0 0 14px;font-size:16px}

/* Listado / archivo */
.barra-f{display:flex;gap:16px;flex-wrap:wrap;align-items:center;background:var(--fondo);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 20px;margin-bottom:30px}
.barra-f .barra-f-tit{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--gris)}
.sel{border:1px solid var(--linea);background:#fff;border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:10px}
.busca-i{margin-left:auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--linea);border-radius:999px;padding:9px 18px;color:var(--gris);font-size:14.5px;min-width:230px}
.busca-i input{border:0;background:none;font-family:inherit;font-size:14.5px;width:100%;outline:none;color:var(--tinta)}
.lista{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pag{display:flex;gap:8px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.pag a,.pag span{min-width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:10px;font-weight:700;font-size:15px;color:var(--gris);padding:0 12px}
.pag .current,.pag a:hover{background:var(--azul);border-color:var(--azul);color:#fff}

/* Artículo */
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.art .cuerpo{max-width:70ch}
.art figure{margin:0 0 26px}
.art figure img{border-radius:var(--radio)}
.art figcaption{font-size:13.5px;color:var(--gris);margin-top:9px;font-style:italic}
.firma{display:flex;align-items:center;gap:14px;padding:16px 0 22px;border-bottom:1px solid var(--linea);margin-bottom:26px;font-size:14px;color:var(--gris)}
.lateral h4{font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--azul);margin:0 0 14px}
.lateral ul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.lateral li{border-bottom:1px solid var(--linea);padding-bottom:14px;font-weight:600;font-size:15px;line-height:1.35}
.lateral li small{display:block;color:var(--gris);font-weight:500;font-size:13px;margin-top:4px}
.adjunto{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.adjunto svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--magenta);fill:none;stroke-width:1.9}
.adjunto b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.adjunto small{color:var(--gris);font-size:12.5px}

/* Repositorio */
.doc{display:flex;align-items:center;gap:18px;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 20px;margin-bottom:12px;background:#fff}
.doc .ic{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:#FDEBF3}
.doc .ic svg{width:22px;height:22px;stroke:var(--magenta);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.doc .info{flex:1;min-width:0}
.doc b{display:block;font-size:16px;font-weight:700;line-height:1.35}
.doc small{color:var(--gris);font-size:13px}
.doc .bt{padding:10px 18px;white-space:nowrap}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px}
.chips a{font-size:13.5px;font-weight:600;padding:7px 17px;border-radius:999px;border:1px solid var(--linea);color:var(--gris);background:#fff}
.chips a.on{background:var(--azul);border-color:var(--azul);color:#fff}

/* Marcadores de contenido no confirmado */
/* Ficha de documento */
/* Va con a.btn-descarga porque dentro del contenido rige ".entrada-contenido a",
   que es más específico: sin esto el texto del botón quedaba azul sobre azul. */
a.btn-descarga,.entrada-contenido a.btn-descarga{display:inline-flex;align-items:center;gap:9px;
  background:var(--azul);color:#fff;font-weight:700;padding:14px 26px;border-radius:999px;
  font-size:15.5px;margin:6px 0 4px;text-decoration:none}
a.btn-descarga:hover,.entrada-contenido a.btn-descarga:hover{background:var(--azul-prof);color:#fff}
.nota-archivo{color:var(--gris);font-size:13.5px;margin:0 0 26px}
h2.tit-s{font-size:22px;font-weight:800;margin:34px 0 14px}

.marcador{border:2px dashed var(--azul);border-radius:12px;background:#F2F9FB;padding:18px 20px;font-size:14.5px;color:var(--gris);line-height:1.6}
.marcador b{display:inline-block;background:var(--amarillo);color:#4A3600;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;padding:4px 11px;border-radius:999px;margin-bottom:9px}
.pdt{color:var(--gris);font-style:italic}

/* Contenido editorial genérico (páginas) */
.entrada-contenido{max-width:70ch;font-size:16.5px}
.entrada-contenido h2{font-size:24px;font-weight:800;margin:34px 0 12px}
.entrada-contenido h3{font-size:20px;font-weight:800;margin:28px 0 10px}
.entrada-contenido p{margin:0 0 16px}
.entrada-contenido img{border-radius:var(--radio);margin:8px 0}
.entrada-contenido a{color:var(--azul);font-weight:600;text-decoration:underline}
.entrada-contenido ul,.entrada-contenido ol{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:6px}

/* Accesos destacados */
.destacados{background:var(--fondo);border-top:1px solid var(--linea)}
.rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dest{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linea);
  border-radius:12px;padding:16px 18px;transition:transform .15s,box-shadow .15s,border-color .15s}
.dest:hover{transform:translateY(-3px);box-shadow:var(--sombra);border-color:var(--azul)}
.dest .p{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-weight:800;font-size:14px;color:#fff}
.dest b{font-size:15px;font-weight:700;line-height:1.3}

/* --- Equipo directivo (Gobierno Corporativo).
   El nombre y el cargo van en texto bajo la foto, no dentro de la imagen. */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:26px 0 8px;padding:0;list-style:none}
.equipo li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.equipo .foto{aspect-ratio:4/3;background:var(--fondo)}
.equipo .foto img{width:100%;height:100%;object-fit:cover;object-position:center top}
.equipo .txt{padding:16px 18px 18px}
.equipo .cargo{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--azul-osc);margin-bottom:3px}
.equipo .nombre{font-size:17px;font-weight:700;line-height:1.3;margin:0}
.equipo .area{display:block;font-size:14px;color:var(--gris);margin-top:3px}
.equipo.destacado li:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.4fr;align-items:center}
.equipo.destacado li:first-child .foto{aspect-ratio:auto;height:100%;min-height:260px}

/* Director o directora en la ficha del establecimiento. Sólo aparece cuando la
   Corporación entregó la fotografía; sin ella el nombre queda en la tabla de
   información general y la ficha se ve igual de completa. */
.director-est{display:flex;align-items:center;gap:18px;margin:20px 0 6px;padding:14px 16px;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio)}
.director-est .foto{flex:0 0 96px;width:96px;aspect-ratio:3/4;border-radius:var(--radio);
  overflow:hidden;background:var(--fondo)}
.director-est .foto img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.director-est .cargo{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--azul-osc);margin-bottom:3px}
.director-est .nombre{font-size:17px;font-weight:700;line-height:1.3;margin:0}

@media (max-width:1000px){
  .equipo{grid-template-columns:repeat(2,1fr)}
  .equipo.destacado li:first-child{grid-template-columns:1fr}
  .equipo.destacado li:first-child .foto{min-height:0;aspect-ratio:4/3}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .transp{grid-template-columns:repeat(2,1fr)}
  .pie{grid-template-columns:1fr 1fr}
  .ficha,.art{grid-template-columns:1fr}
  .datos{position:static}
  .lista{grid-template-columns:repeat(2,1fr)}
  .menu-principal{display:none}
  .menu-btn{display:flex}
  .logo img{width:220px}
  .cabecera .wrap{min-height:82px}
}
@media (max-width:620px){
  .equipo{grid-template-columns:1fr}
  .rejilla{grid-template-columns:1fr}
  .logo img{width:184px}
  .cabecera .wrap{min-height:72px;gap:12px}
  .legal .wrap{justify-content:flex-start;font-size:12.5px;gap:2px 16px}
  .legal .sep{display:none}
  .transp{grid-template-columns:1fr}
  .pie{grid-template-columns:1fr}
  .lista{grid-template-columns:1fr}
  .seccion,.contenido{padding:46px 0}
  .busca-i{margin-left:0;width:100%}
  .doc{flex-wrap:wrap}
}

/* Mapa del sitio */
.mapa-lista{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px}
.mapa-lista li{padding:7px 0;border-bottom:1px solid var(--linea)}
.mapa-lista a{color:var(--azul-osc);font-weight:600}
.mapa-lista .sub-menu{display:none}
.mapa-sub{font-size:15px;font-weight:800;color:var(--gris);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.6px}
@media(max-width:900px){.mapa-lista{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.mapa-lista{grid-template-columns:1fr}}

/* Organigrama transcrito */
.organigrama-texto ul{margin:0 0 10px;padding-left:22px}
.organigrama-texto>ul{padding-left:0;list-style:none}
.organigrama-texto li{margin:6px 0}

/* Presentación con foto (páginas de contenido).
   El contenido de una página va a 70ch para que el texto se lea cómodo; estos
   dos bloques necesitan el ancho completo del contenedor, que es 1200 menos el
   padding lateral. Se alinean a la izquierda, igual que el resto del texto. */
.entrada-contenido .intro-media,
.entrada-contenido .galeria{width:min(1152px,calc(100vw - 48px));max-width:none}

.intro-media{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:34px;align-items:start;margin:0 0 34px}
.intro-media .intro-foto img{width:100%;border-radius:var(--radio);border:1px solid var(--linea)}
.intro-media .intro-texto>*:first-child{margin-top:0}

/* Lista de datos prácticos */
/* Va con .entrada-contenido delante porque ahi las listas son flex en columna. */
.datos-clave,.entrada-contenido ul.datos-clave{list-style:none;margin:0 0 26px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.datos-clave li{border-left:3px solid var(--turquesa);padding:4px 0 4px 14px}
.datos-clave strong{display:block;font-size:12.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--gris)}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 30px}
.galeria figure{margin:0}
.galeria img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radio);border:1px solid var(--linea)}

@media(max-width:900px){
  .intro-media{grid-template-columns:1fr;gap:22px}
  .datos-clave,.entrada-contenido ul.datos-clave{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.galeria{grid-template-columns:1fr}}

/* Saltar al contenido: sólo visible al llegar con el teclado */
.salto-contenido{position:absolute;left:-9999px;top:0;z-index:100;background:var(--azul-prof);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.salto-contenido:focus{left:0}

/* Página de búsqueda */
.busca-grande{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:6px 0 34px}
.busca-grande .campo{flex:1 1 320px;display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid var(--linea);border-radius:999px;padding:13px 22px;color:var(--gris)}
.busca-grande .campo:focus-within{border-color:var(--azul)}
.busca-grande input{border:0;background:none;font-family:inherit;font-size:16px;width:100%;
  outline:none;color:var(--tinta)}
.busca-grande button{border:0;cursor:pointer;font-family:inherit;background:var(--azul);color:#fff;
  font-weight:700;font-size:15.5px;padding:14px 30px;border-radius:999px}
.busca-grande button:hover{background:var(--azul-prof)}
.atajos{display:flex;flex-wrap:wrap;gap:10px}
.atajos a{display:inline-block;padding:10px 18px;border:1px solid var(--linea);border-radius:999px;
  font-weight:600;font-size:14.5px;color:var(--azul-osc);background:var(--fondo)}
.atajos a:hover{background:#fff;border-color:var(--azul);color:var(--azul)}

/* --- Tablas -------------------------------------------------------------
   El tema no fijaba ancho para las tablas y el contenido migrado del Joomla
   las usa a menudo, con anchos en píxeles heredados del sitio anterior. Sin
   esto se desbordan del viewport en móvil y arrastran a toda la página a un
   scroll horizontal. Las de contenido pasan a ser un bloque con scroll propio;
   la de la ficha se queda dentro del ancho y parte las palabras largas, que
   suelen ser correos institucionales. */
.tabla{width:100%;max-width:100%;border-collapse:collapse;table-layout:fixed}
.tabla th,.tabla td{overflow-wrap:anywhere;word-break:break-word}
.cuerpo table{max-width:100%;border-collapse:collapse}
.cuerpo img{max-width:100%;height:auto}
@media (max-width:640px){
	.cuerpo table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
	.tabla th{width:38%}
}

/* Botón del filtro de noticias: el formulario tenía el selector de área pero
   ninguna forma de enviarlo, así que elegir un área no hacía nada. El botón
   funciona sin JavaScript; el script sólo agrega el envío automático. */
.btn-f{background:var(--azul);color:#fff;border:0;border-radius:999px;padding:11px 22px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-f:hover{background:var(--azul-o,#2f7690)}

/* Ancho de lectura en las páginas sueltas.
   El límite de 70ch es correcto para leer, pero en una página sin barra lateral
   el bloque quedaba pegado al borde izquierdo de un contenedor de 1200 px, con
   la mitad derecha vacía. En las noticias no se toca: ahí la columna de la
   derecha la ocupa el aside. */
/* El ancho va en píxeles y no en "ch": esa unidad se calcula sobre la fuente
   del propio elemento, así que en el título (38 px) 78ch superaban el ancho del
   contenedor y el bloque nunca se centraba, aunque en el texto sí funcionara. */
.contenido.lectura > .wrap > .entrada-contenido,
.contenido.lectura > .wrap > .tit-p,
.contenido.lectura > .wrap > .bajada{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:900px){
	.contenido.lectura > .wrap > .entrada-contenido,
	.contenido.lectura > .wrap > .tit-p,
	.contenido.lectura > .wrap > .bajada{max-width:100%}
}

/* Tarjetas sin fotografía.
   El 81% de las noticias migradas del Joomla no trae imagen. Antes todas
   repetían la misma foto de reserva y un listado completo parecía un error de
   carga. Ahora ocupan el mismo espacio con el color de su área y el nombre en
   marca de agua: mantiene la altura pareja y se lee como una decisión. */
.sin-foto{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--azul);padding:12px}
/* La marca va tenue: identifica el bloque como intencional sin repetir el
   nombre del área, que ya aparece en la etiqueta de la tarjeta. */
.foto .sin-foto img{width:min(78%,260px);height:auto;object-fit:contain;opacity:.5;transform:none}
.nota:hover .foto .sin-foto img{transform:none}
.sin-foto.salud{background:var(--turquesa);color:#043430}
.sin-foto.edu{background:var(--verde);color:#2A3D0F}
.sin-foto.corp{background:var(--azul)}

/* Videos propios que venían del shortcode {mp4} del Joomla. */
.video-cds{width:100%;max-width:820px;height:auto;display:block;margin:18px auto;border-radius:var(--radio);background:#000}