/* =========================================================================
   INSteractúa — Propuesta A (referencia visual: Foxiz / demo AZPets)
   Todo va con prefijo .inst- para no chocar con el tema padre `fox`.
   ========================================================================= */

@font-face {
	font-family: 'Montserrat';
	src: url('fonts/montserrat-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
	font-family: 'Montserrat';
	src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}

:root {
	--inst-brand: #224687;
	--inst-brand-d: #18325F;
	--inst-ink: #20222A;
	--inst-muted: #6E7480;
	--inst-line: #E9EDF4;
	--inst-soft: #F5F8FC;
	--inst-info: #1CA38B;
	--inst-video: #E0455B;
	--inst-pod: #7A4BD8;
	--inst-nota: #3A72D8;
	--inst-preg: #F0A128;
	--inst-r: 18px;
	--inst-sh: 0 6px 22px rgba(20, 40, 80, .09);
}

body.inst {
	font-family: 'Montserrat', system-ui, -apple-system, Arial, sans-serif;
	color: var(--inst-ink);
	background: #fff;
	line-height: 1.6;
	margin: 0;
}
/* `:where()` no aporta especificidad: así este color base cede ante cualquier
   regla con clase (.inst-bar a, .inst-tags a, .inst-single__cuerpo a…), en vez
   de ganarles por ser `body.inst a`. */
:where(body.inst) a { color: inherit; text-decoration: none; }
:where(body.inst) a:hover { text-decoration: none; }
/* Con `:where()`, que no aporta especificidad: escrita como `body.inst img`
   —dos elementos y una clase— le ganaba a cualquier regla de una sola clase y
   dejaba sin efecto la altura del logo del pie, la de las miniaturas de las
   tarjetas y la de «Información similar». Como valor por defecto está bien;
   lo que no puede es ganar. */
:where(body.inst) img { max-width: 100%; height: auto; }
.inst-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.inst-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- etiquetas de formato ---- */
.inst-chip {
	display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
	text-transform: uppercase; padding: 5px 12px; border-radius: 999px; color: #fff;
}
.inst-c-info { background: var(--inst-info); }
.inst-c-video { background: var(--inst-video); }
.inst-c-pod { background: var(--inst-pod); }
.inst-c-nota { background: var(--inst-nota); }
.inst-c-preg { background: var(--inst-preg); }

/* ---- cabecera: social a la izquierda, logo centrado, barra oscura ---- */
.inst-topb { display: flex; align-items: center; gap: 14px; padding: 18px 0 14px; }
.inst-topb .inst-soc { display: flex; gap: 14px; color: var(--inst-brand); font-size: 15px; min-width: 120px; }
.inst-topb .inst-lg { flex: 1; text-align: center; }
.inst-topb .inst-lg img { height: 62px; width: auto; }
.inst-topb .inst-lg .inst-lg-txt { font-weight: 900; font-size: 26px; color: var(--inst-brand); letter-spacing: -.5px; }
.inst-topb .inst-rt { min-width: 120px; display: flex; justify-content: flex-end; }

.inst-bar {
	background: #141A2A; border-radius: 14px; display: flex; justify-content: center;
	align-items: center; gap: 30px; padding: 16px 22px; position: sticky; top: 12px;
	z-index: 50; box-shadow: var(--inst-sh); flex-wrap: wrap;
}
.inst-nav-lista, .inst-bar ul {
	list-style: none; margin: 0; padding: 0; display: flex; gap: 30px;
	align-items: center; flex-wrap: wrap;
}
.inst-bar a { color: #fff; font-weight: 700; font-size: 14.5px; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.inst-bar a:hover, .inst-bar .current-menu-item > a, .inst-bar .inst-on > a, .inst-bar a.inst-on {
	border-bottom-color: #6FA8FF;
}
.inst-bar .inst-sr-form { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 4px 6px 4px 14px; }
.inst-bar .inst-sr-form input {
	background: transparent; border: 0; outline: 0; color: #fff; font-family: inherit;
	font-size: 12.5px; width: 130px;
}
.inst-bar .inst-sr-form input::placeholder { color: rgba(255, 255, 255, .7); }
.inst-bar .inst-sr-form button {
	background: rgba(255, 255, 255, .18); border: 0; color: #fff; border-radius: 999px;
	padding: 5px 12px; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ---- hero ---- */
.inst-hero {
	position: relative; border-radius: 22px; overflow: hidden; min-height: 440px;
	display: flex; align-items: center; justify-content: center; text-align: center;
	margin: 22px 0 0; box-shadow: var(--inst-sh);
	background: linear-gradient(135deg, var(--inst-brand-d), var(--inst-brand));
}
.inst-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.inst-hero__sh { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16, 28, 52, .35), rgba(16, 28, 52, .78)); }
.inst-hero__bd { position: relative; z-index: 2; color: #fff; max-width: 800px; padding: 40px 30px; }
.inst-hero__bd h1 { font-size: 38px; line-height: 1.16; margin: 16px 0 14px; font-weight: 900; letter-spacing: -.5px; color: #fff; }
.inst-hero__bd p { margin: 0 0 20px; font-size: 15.5px; color: rgba(255, 255, 255, .92); }
.inst-pill {
	display: inline-flex; align-items: center; gap: 8px; background: #4B7BE5; color: #fff;
	font-weight: 800; font-size: 13.5px; padding: 12px 24px; border-radius: 999px;
}
.inst-pill:hover { background: #3C6AD4; }

/* ---- accesos por formato ---- */
.inst-fmts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: -46px 0 0; position: relative; z-index: 5; }
.inst-fm {
	background: #fff; border: 1px solid var(--inst-line); border-radius: var(--inst-r);
	padding: 20px 14px; text-align: center; box-shadow: var(--inst-sh); display: block;
	transition: transform .15s ease, box-shadow .15s ease;
}
.inst-fm:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 40, 80, .14); }
.inst-fm .inst-ic {
	width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; display: flex;
	align-items: center; justify-content: center; font-size: 23px; color: #fff;
}
.inst-fm h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 800; }
.inst-fm span { font-size: 12px; color: var(--inst-muted); }

/* ---- secciones ---- */
.inst-sec { padding: 46px 0; }
.inst-sec.inst-soft { background: var(--inst-soft); }
.inst-sh2 { text-align: center; margin-bottom: 28px; }
.inst-sh2 .inst-bg { display: inline-block; color: #fff; font-weight: 900; font-size: 22px; padding: 9px 26px; border-radius: 12px; }
.inst-sh2 p { margin: 10px 0 0; color: var(--inst-muted); font-size: 14.5px; }
.inst-sh2.inst-left { text-align: left; }

/* ---- rejillas y tarjetas ---- */
.inst-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.inst-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.inst-card {
	background: #fff; border: 1px solid var(--inst-line); border-radius: var(--inst-r);
	overflow: hidden; box-shadow: var(--inst-sh); display: flex; flex-direction: column;
}
.inst-card__im { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: block; background: var(--inst-soft); }
.inst-card__im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.inst-card:hover .inst-card__im img { transform: scale(1.05); }
.inst-card__vacia { position: absolute; inset: 0; background: linear-gradient(135deg, #DCE5F2, #EFF4FA); }
.inst-card__tag { position: absolute; left: 12px; bottom: 12px; }
.inst-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.inst-card__play b {
	width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .94);
	color: var(--inst-video); display: flex; align-items: center; justify-content: center;
	font-size: 19px; padding-left: 4px;
}
.inst-card__bd { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.inst-card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; }
.inst-card h3 a:hover { color: var(--inst-brand); }
.inst-card__by { font-size: 12.5px; color: var(--inst-muted); margin: 0; }
.inst-card__by b { color: var(--inst-ink); font-weight: 700; }
.inst-dots { border-top: 2px dotted #D8DFEA; margin: 2px 0; }
.inst-card p { margin: 0; font-size: 13.5px; color: #4C5563; }

/* ---- «El firme de la salud»: bloque de enlace, no de contenido ---- */
.inst-firme {
	background: linear-gradient(120deg, var(--inst-brand-d), #2D5CB8); color: #fff;
	border-radius: 22px; padding: 38px 40px; display: grid;
	grid-template-columns: 1.4fr auto; gap: 26px; align-items: center;
}
.inst-firme h2 { margin: 8px 0 10px; font-size: 27px; font-weight: 900; color: #fff; }
.inst-firme p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .92); }
.inst-firme .inst-pill { background: #fff; color: var(--inst-brand-d); }
.inst-firme .inst-pill:hover { background: #EAF1FF; }

/* ---- dos columnas: lo más leído + barra lateral ---- */
.inst-two { display: grid; grid-template-columns: 1.6fr .95fr; gap: 38px; align-items: start; }
.inst-rk { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--inst-line); }
.inst-rk:last-child { border-bottom: none; }
.inst-rk .inst-n { font-size: 30px; font-weight: 900; color: #C9D5E6; line-height: 1; }
.inst-rk h4 { margin: 5px 0 4px; font-size: 16px; font-weight: 800; line-height: 1.3; }
.inst-rk h4 a:hover { color: var(--inst-brand); }
.inst-rk .inst-m { font-size: 12.5px; color: var(--inst-muted); }
.inst-box { background: #fff; border: 1px solid var(--inst-line); border-radius: var(--inst-r); padding: 22px; box-shadow: var(--inst-sh); margin-bottom: 20px; }
.inst-box h5 { margin: 0 0 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--inst-muted); }
.inst-links a { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--inst-line); font-weight: 700; font-size: 14px; }
.inst-links a:last-child { border-bottom: none; }
.inst-links a:hover { color: var(--inst-brand); }
.inst-links .inst-d { width: 8px; height: 8px; border-radius: 50%; background: var(--inst-brand); flex: none; }
.inst-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.inst-tags a { font-size: 12.5px; font-weight: 700; border: 1px solid var(--inst-line); border-radius: 999px; padding: 6px 13px; color: #4C5563; }
.inst-tags a:hover, .inst-tags a.inst-on { background: var(--inst-brand); border-color: var(--inst-brand); color: #fff; }
.inst-years a { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-radius: 11px; font-weight: 700; font-size: 14px; }
.inst-years a.inst-on, .inst-years a:hover { background: var(--inst-soft); color: var(--inst-brand); }
.inst-years .inst-c { font-size: 11.5px; color: var(--inst-muted); border: 1px solid var(--inst-line); border-radius: 999px; padding: 2px 9px; background: #fff; }

/* ---- páginas interiores ---- */
.inst-phead { background: linear-gradient(120deg, var(--inst-brand-d), #2D5CB8); color: #fff; border-radius: 22px; padding: 38px 40px; margin-top: 22px; }
.inst-phead .inst-cr { font-size: 12.5px; color: rgba(255, 255, 255, .75); margin-bottom: 9px; }
.inst-phead .inst-cr a:hover { text-decoration: underline; }
.inst-phead h1 { margin: 0 0 10px; font-size: 33px; font-weight: 900; color: #fff; }
.inst-phead p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .92); max-width: 760px; }
.inst-ptabs { display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.inst-ptabs a {
	background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px; padding: 8px 17px; font-size: 13px; font-weight: 700; color: #fff;
}
.inst-ptabs a.inst-on { background: #fff; color: var(--inst-brand); }

/* ---- filtros de la vista Conocimiento ---- */
/* Buscador y botón en la misma línea: antes el botón caía debajo porque los
   campos crecían sin límite y forzaban el salto (observación del 27-08-2026). */
.inst-filtros {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 26px;
}
.inst-filtros select, .inst-filtros input[type="search"] {
	font-family: inherit; font-size: 13.5px; padding: 10px 14px; border: 1px solid var(--inst-line);
	border-radius: 999px; background: #fff; color: var(--inst-ink); outline: none;
	height: 42px; min-width: 0;
}
.inst-filtros select { flex: 1 1 150px; max-width: 220px; }
.inst-filtros input[type="search"] { flex: 2 1 190px; }
.inst-filtros button { height: 42px; flex: 0 0 auto; }
.inst-filtros .inst-limpiar { flex: 0 0 auto; }
.inst-filtros button {
	background: var(--inst-brand); color: #fff; border: 0; border-radius: 999px;
	font-weight: 800; font-size: 13px; padding: 11px 20px; cursor: pointer; font-family: inherit;
}
.inst-filtros .inst-limpiar { color: var(--inst-muted); font-size: 13px; font-weight: 700; }
.inst-filtros .inst-limpiar:hover { color: var(--inst-brand); }
.inst-conteo { color: var(--inst-muted); font-size: 13.5px; margin: 0 0 18px; }

/* ---- artículo ---- */
.inst-single { max-width: 820px; margin: 0 auto; }
.inst-single__meta { color: var(--inst-muted); font-size: 13px; margin: 14px 0 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.inst-single__cuerpo { font-size: 16px; line-height: 1.75; }
.inst-single__cuerpo h2 { font-size: 22px; font-weight: 800; margin: 30px 0 12px; }
.inst-single__cuerpo h3 { font-size: 18px; font-weight: 800; margin: 26px 0 10px; }
.inst-single__cuerpo img { border-radius: 14px; }
.inst-single__cuerpo a { color: var(--inst-brand); text-decoration: underline; }
.inst-single__foto { border-radius: 22px; overflow: hidden; margin: 22px 0 0; box-shadow: var(--inst-sh); }
.inst-single__foto img { width: 100%; display: block; }
.inst-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.inst-rc { display: flex; gap: 13px; align-items: center; border: 1px solid var(--inst-line); border-radius: 14px; padding: 12px; box-shadow: var(--inst-sh); }
.inst-rc img { width: 80px; height: 60px; object-fit: cover; border-radius: 10px; flex: none; }
.inst-rc h4 { margin: 5px 0 0; font-size: 14px; font-weight: 800; line-height: 1.3; }

/* ---- medios dentro del artículo ----
   Las entradas de vídeo usan el bloque «media y texto» de Gutenberg, que sin
   estas reglas deja el vídeo a su tamaño intrínseco y se sale de la columna. */
.inst-single__cuerpo video,
.inst-single__cuerpo iframe,
.inst-single__cuerpo embed,
.inst-single__cuerpo object {
	display: block; width: 100%; max-width: 100%; height: auto;
	border-radius: 14px; background: #000;
}
.inst-single__cuerpo iframe { aspect-ratio: 16 / 9; height: auto; }
.inst-single__cuerpo figure { margin: 22px 0; }
.inst-single__cuerpo .wp-block-media-text { display: block; }
.inst-single__cuerpo .wp-block-media-text__media { margin: 0 0 14px; }
/* Infografías: son imágenes altas; se muestran completas y centradas. */
.inst-single__cuerpo img { display: block; margin: 18px auto; }
.inst-single__cuerpo .wp-block-image { margin: 22px 0; }

/* ---- pregunta de la semana ---- */
.inst-pregb {
	background: #FFF7E9; border: 1px solid #F3DFB4; border-left: 6px solid var(--inst-preg);
	border-radius: var(--inst-r); padding: 24px 28px; display: flex; gap: 22px; align-items: center;
}
.inst-pregb .inst-q {
	width: 60px; height: 60px; border-radius: 50%; background: var(--inst-preg); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; flex: none;
}
.inst-pregb h3 { margin: 7px 0; font-size: 20px; font-weight: 900; color: #7A5520; }
.inst-pregb p { margin: 0; font-size: 14px; color: #7A5520; }

/* ---- Nosotros ---- */
.inst-obj { background: var(--inst-soft); border-radius: var(--inst-r); padding: 30px 34px; font-size: 16px; color: #3C4553; text-align: justify; }
.inst-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.inst-tm { text-align: center; }
.inst-tm .inst-av {
	width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 12px;
	background: linear-gradient(135deg, var(--inst-brand), #4B7BE5); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900;
}
.inst-tm h4 { margin: 0 0 3px; font-size: 16px; font-weight: 800; }
.inst-tm span { font-size: 12.5px; color: var(--inst-muted); }
.inst-cts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.inst-ct { background: #fff; border: 1px solid var(--inst-line); border-radius: var(--inst-r); padding: 20px; box-shadow: var(--inst-sh); text-align: center; }
.inst-ct .inst-ic { width: 46px; height: 46px; border-radius: 13px; background: var(--inst-soft); color: var(--inst-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 19px; }
.inst-ct b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.inst-ct span { font-size: 13px; color: var(--inst-muted); }
.inst-ct a { color: var(--inst-brand); }
.inst-ct a:hover { text-decoration: underline; }

/* ---- paginación ---- */
.inst-pag { display: flex; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.inst-pag .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
	padding: 0 13px; border: 1px solid var(--inst-line); border-radius: 999px; font-weight: 700;
	font-size: 13.5px; background: #fff; color: var(--inst-ink);
}
.inst-pag .page-numbers.current, .inst-pag .page-numbers:hover { background: var(--inst-brand); border-color: var(--inst-brand); color: #fff; }

.inst-vacio { text-align: center; color: var(--inst-muted); padding: 40px 0; font-size: 15px; }

/* ---- pie ---- */
.inst-foot { background: #141A2A; color: #A7B3C6; padding: 48px 0 24px; margin-top: 40px; }
.inst-fg { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 38px; }
.inst-foot h6 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.inst-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.inst-foot a:hover { color: #fff; }
.inst-foot .inst-lg-txt { color: #fff; font-weight: 900; font-size: 22px; display: block; margin-bottom: 12px; }
.inst-fb { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 18px; font-size: 12.5px; color: #7E8CA3; text-align: center; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
	.inst-g3, .inst-g4, .inst-two, .inst-team, .inst-cts, .inst-rel, .inst-fg, .inst-firme {
		grid-template-columns: 1fr;
	}
	.inst-fmts { margin-top: 20px; }
	.inst-bar { gap: 16px; padding: 14px 16px; }
	.inst-bar ul, .inst-nav-lista { gap: 16px; justify-content: center; }
	.inst-hero { min-height: 340px; }
	.inst-hero__bd h1 { font-size: 28px; }
	.inst-phead, .inst-firme { padding: 26px 22px; }
	.inst-phead h1 { font-size: 25px; }
}
@media (max-width: 640px) {
	.inst-topb { flex-wrap: wrap; justify-content: center; }
	.inst-topb .inst-soc, .inst-topb .inst-rt { min-width: 0; }
	.inst-obj { padding: 22px; }
	.inst-pregb { flex-direction: column; text-align: center; }
}


/* =====================================================================
   Ajustes de la revisión del 27-08-2026
   ===================================================================== */

/* obs 4 · Cada sección con su propio fondo, para que se distingan al ojear.
   El acento de color sigue siendo el del formato (verde infografías, rojo
   vídeos, ámbar pregunta), aquí solo cambia el lienzo. */
.inst-sec--infografias { background: #F2FAF8; }
.inst-sec--videos      { background: #FEF5F6; }
.inst-sec--pregunta    { background: #FFFBF2; }
.inst-sec--notas       { background: #F4F7FD; }
.inst-sec--destacado   { background: var(--inst-soft); }

/* obs 16 · Fotos del equipo, individuales y de grupo. */
.inst-av--foto { object-fit: cover; border: 3px solid #fff; box-shadow: var(--inst-sh); }
.inst-foto-grupal { margin: 34px 0 0; text-align: center; }
.inst-foto-grupal img {
	max-width: 100%; border-radius: var(--inst-r); box-shadow: var(--inst-sh);
}

/* obs 5 · Logo institucional en el pie. */
.inst-foot-logo { display: inline-block; background: #fff; padding: 10px 14px; border-radius: 14px; margin-bottom: 14px; }
.inst-foot-logo img { height: 52px; width: auto; display: block; }

/* obs 18 · Comentarios reales al pie del artículo. */
.inst-com { margin-top: 44px; padding-top: 30px; border-top: 2px dotted #D8DFEA; }
.inst-com-lista { list-style: none; margin: 0 0 30px; padding: 0; }
.inst-com-lista .comment-body {
	background: #fff; border: 1px solid var(--inst-line); border-radius: 14px;
	padding: 18px 20px; margin-bottom: 14px; box-shadow: var(--inst-sh);
}
.inst-com-lista .children { list-style: none; margin: 0 0 0 28px; padding: 0; }
.inst-com-lista .comment-author { font-weight: 800; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.inst-com-lista .comment-author img { border-radius: 50%; }
.inst-com-lista .comment-meta { font-size: 12.5px; color: var(--inst-muted); margin: 4px 0 10px; }
.inst-com-lista .comment-meta a { color: var(--inst-muted); }
.inst-com-lista p { font-size: 14.5px; margin: 0 0 8px; }
.inst-com-lista .reply { font-size: 13px; font-weight: 700; }
.inst-com-lista .reply a { color: var(--inst-brand); }
.inst-com-aviso { font-size: 13px; color: var(--inst-muted); margin: 0 0 16px; }
.inst-com-campo { margin: 0 0 14px; }
.inst-com-campo label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.inst-com-campo input, .inst-com-campo textarea {
	width: 100%; font-family: inherit; font-size: 14.5px; padding: 12px 15px;
	border: 1px solid var(--inst-line); border-radius: 14px; background: #fff;
	color: var(--inst-ink); outline: none;
}
.inst-com-campo input:focus, .inst-com-campo textarea:focus { border-color: var(--inst-brand); }
.inst-com-campo textarea { resize: vertical; min-height: 120px; }
.inst-com .comment-form-cookies-consent { font-size: 13px; color: var(--inst-muted); display: flex; gap: 8px; align-items: flex-start; }
.inst-com-enviar { border: 0; cursor: pointer; font-family: inherit; }
.inst-com .comment-reply-title { font-size: 18px; font-weight: 800; margin: 0 0 12px; }

/* =====================================================================
   Logotipo definitivo (INS, 02-09-2026)
   =====================================================================
   El archivo que envió el INS es el lockup completo: símbolo + INSTERACTÚA +
   «Blog de Salud, Ciencia y Tecnología». La bajada ocupa muy poca altura
   dentro de la imagen, así que el logo necesita más alto que el provisional
   para que esa línea se lea. */
.inst-topb .inst-lg img { height: 78px; }

/* `body.inst img { height: auto }` pesa más que `.inst-foot-logo img` (dos
   elementos frente a uno), así que la altura del logotipo del pie nunca se
   aplicaba y la imagen salía enorme. Con la clase del pie delante ya gana. */
.inst-foot .inst-foot-logo { padding: 12px 16px; }
.inst-foot .inst-foot-logo img { height: 62px; width: auto; }

@media (max-width: 760px) {
	.inst-topb .inst-lg img { height: 58px; }
	.inst-foot .inst-foot-logo img { height: 52px; }
}

/* =====================================================================
   Revisión del 03-09-2026
   ===================================================================== */

/* obs 02 · Iconos dibujados, no emoticones: se ven igual en cualquier equipo. */
.inst-fm .inst-ic svg, .inst-ct .inst-ic svg { display: block; }
.inst-card__play b svg { margin-left: 2px; }

/* obs 23 · Redes del INS: arriba a la izquierda y en el pie. */
.inst-topb .inst-soc { align-items: center; }
.inst-soc a, .inst-foot-soc a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; transition: background .15s ease, color .15s ease;
}
.inst-soc a { color: var(--inst-brand); }
.inst-soc a:hover { background: var(--inst-soft); }
.inst-foot-soc { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.inst-foot-soc a { color: #A7B3C6; background: rgba(255, 255, 255, .06); }
.inst-foot-soc a:hover { color: #fff; background: var(--inst-brand); }

/* obs 17 · El pie pasa a cuatro columnas: se suman «El portal» y las redes. */
.inst-fg { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 30px; }

/* obs 24 · Barra de compartir, con enlaces normales: no carga código de
   terceros, así que no hay rastreo ni peso añadido. */
.inst-comp {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--inst-line);
}
.inst-comp__t { font-size: 13px; font-weight: 800; color: var(--inst-muted); margin-right: 4px; }
.inst-comp__b {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--inst-line); color: #4C5563; background: #fff;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.inst-comp__b:hover { background: var(--inst-brand); border-color: var(--inst-brand); color: #fff; }
.inst-comp__copiar.inst-copiado { background: var(--inst-info); border-color: var(--inst-info); color: #fff; }
.inst-comp__copiar.inst-copiado::after {
	content: 'Copiado'; position: absolute; margin-top: -62px; font-size: 11.5px;
	font-weight: 800; background: var(--inst-ink); color: #fff; padding: 4px 9px; border-radius: 8px;
}
.inst-comp__copiar { position: relative; }

/* obs 19 · Pie de la imagen del artículo, cuando el adjunto lo tiene escrito. */
.inst-single__foto { border-radius: 22px; }
.inst-single__foto figcaption {
	font-size: 13px; color: var(--inst-muted); background: var(--inst-soft);
	padding: 10px 16px; margin: 0; line-height: 1.5;
}

/* obs 16 · Recuento junto a cada tema y enlace al catálogo completo. */
.inst-tags a .inst-c { opacity: .6; font-weight: 800; margin-left: 3px; }
.inst-tags a:hover .inst-c, .inst-tags a.inst-on .inst-c { opacity: .85; }
.inst-box__pie { margin: 14px 0 0; font-size: 13px; font-weight: 700; }
.inst-box__pie a { color: var(--inst-brand); }

/* obs 27 y 28 · El menú en el teléfono.
   No se compactaba —no existía el botón— y los enlaces eran demasiado
   pequeños para tocarlos con el dedo. El mínimo recomendado es 44 px. */
.inst-burger {
	display: none; width: 46px; height: 46px; border: 0; background: transparent;
	cursor: pointer; padding: 11px 10px; flex-direction: column; justify-content: space-between;
}
.inst-burger span {
	display: block; height: 3px; border-radius: 3px; background: var(--inst-brand);
	transition: transform .2s ease, opacity .2s ease;
}
.inst-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.inst-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.inst-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

@media (max-width: 900px) {
	.inst-burger { display: flex; }
	.inst-topb { flex-wrap: nowrap; }
	.inst-topb .inst-soc { display: none; }
	.inst-topb .inst-rt { min-width: 0; }

	/* El menú se pliega y solo se despliega con el botón. */
	.inst-bar {
		position: static; flex-direction: column; align-items: stretch; gap: 0;
		padding: 0; max-height: 0; overflow: hidden; box-shadow: none;
		transition: max-height .25s ease, padding .25s ease;
	}
	.inst-bar.inst-abierto { max-height: 640px; padding: 10px 12px 16px; }
	.inst-nav-lista, .inst-bar ul { flex-direction: column; gap: 0; width: 100%; }
	.inst-bar li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.inst-bar li:last-child { border-bottom: 0; }
	.inst-bar a {
		display: flex; align-items: center; min-height: 48px; padding: 4px 6px;
		font-size: 15.5px;
	}
	.inst-sr-form { width: 100%; margin-top: 12px; }
	.inst-sr-form input { min-height: 46px; }
	.inst-sr-form button { min-height: 46px; }

	/* Zonas táctiles cómodas también fuera del menú. */
	.inst-tags a { padding: 10px 15px; }
	.inst-years a { min-height: 46px; }
	.inst-ptabs a { min-height: 44px; display: inline-flex; align-items: center; }
	.inst-card h3 a { display: block; padding: 2px 0; }
	.inst-pag a, .inst-pag span { min-width: 44px; min-height: 44px; }
}

/* obs 21 · Encuadre de las miniaturas.
   Todas las tarjetas comparten ya la misma caja (16:10), pero las imágenes que
   entran van de 0,67 a 3,04 de proporción, así que el recorte se comía el
   título de las infografías y de los carteles, que va arriba. Se desplaza el
   encuadre hacia la parte alta, que es donde está lo que identifica la pieza. */
.inst-card__im img { object-position: 50% 35%; }

/* =====================================================================
   Correcciones del 07-09-2026
   ===================================================================== */

/* corr 15 · Los recortes de las miniaturas.
   La causa era de especificidad, no de proporciones: la regla general
   `body.inst img { height: auto }` pesa más (dos elementos) que
   `.inst-card__im img { height: 100% }` (uno), así que la altura nunca se
   aplicaba. La imagen conservaba su alto natural dentro de un recuadro fijo:
   las alargadas dejaban banda gris debajo y las verticales lo desbordaban.
   Con la clase de la tarjeta delante ya gana, la imagen llena el recuadro y
   se recorta por el centro. Además, al tener alto real, el navegador elige de
   `srcset` el archivo pequeño en vez del de 1280. */
.inst-card .inst-card__im img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Las miniaturas de «Información similar» sufrían lo mismo: sin la clase del
   contenedor delante, `height: 60px` perdía contra `height: auto`. */
.inst-rel .inst-rc img { width: 80px; height: 60px; object-fit: cover; }
.inst-card .inst-card__im { aspect-ratio: 3 / 2; }
.inst-card .inst-card__im img { object-position: 50% 35%; }

/* corr 03 · El texto del botón de filtrar, centrado en su altura. */
.inst-filtros button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0 22px; line-height: 1;
}

/* corr 07 · El número de cada botón de El firme, y el activo bien marcado. */
.inst-ptabs__n {
	display: inline-block; margin-left: 7px; font-size: 11.5px; font-weight: 800;
	background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 2px 8px;
}
.inst-ptabs a.inst-on { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); font-weight: 800; }
.inst-ptabs a.inst-on .inst-ptabs__n { background: var(--inst-brand); color: #fff; }

/* corr 01 · El botón de buscar pasa a ser la lupa. */
.inst-bar .inst-sr-form button { display: inline-flex; align-items: center; justify-content: center; }

/* corr 08 · Encabezado de cada grupo de resultados de búsqueda. */
.inst-grupo { display: flex; align-items: center; gap: 12px; margin: 34px 0 18px; }
.inst-grupo:first-child { margin-top: 0; }
.inst-grupo__n { font-size: 13px; color: var(--inst-muted); font-weight: 700; }

/* corr 13 · Versión en texto de una infografía. */
.inst-alt-txt {
	margin: 26px 0 0; padding: 22px 24px; background: var(--inst-soft);
	border-radius: var(--inst-r); border: 1px solid var(--inst-line);
}
.inst-alt-txt h2 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.inst-alt-txt p { margin: 0 0 10px; font-size: 15px; }
.inst-alt-txt p:last-child { margin-bottom: 0; }

/* corr 02 · El pie en el celular.
   Conservaba la rejilla de cuatro columnas en pantallas angostas y el texto
   se partía; era la única parte de la web que se quedó sin regla propia. */
@media (max-width: 860px) {
	.inst-fg { grid-template-columns: 1fr; gap: 26px; }
	.inst-foot { padding: 36px 0 20px; }
	.inst-foot-logo img { height: 52px; }
	.inst-foot ul { gap: 12px; }
	.inst-foot a { display: inline-flex; align-items: center; min-height: 30px; }
	.inst-foot-soc { margin-top: 14px; }
	.inst-foot-soc a { width: 42px; height: 42px; }
	.inst-fb { margin-top: 26px; font-size: 12px; }
}

/* El botón de enviar comentario salía negro: lo pinta una regla del tema
   padre para `input[type=submit]`, que pesa más que `.inst-pill`. */
.inst-com .inst-com-enviar,
.inst-com input[type="submit"].inst-com-enviar {
	background: #4B7BE5; color: #fff; border: 0; border-radius: 999px;
	font-weight: 800; font-size: 13.5px; padding: 12px 24px; font-family: inherit;
	cursor: pointer; -webkit-appearance: none; appearance: none;
}
.inst-com .inst-com-enviar:hover { background: #3C6AD4; }

/* El equipo, centrado (11-09-2026).
   `.inst-team` tenía la rejilla fijada a cuatro columnas, pero el INS corrigió
   el 27-08 que son tres personas: la cuarta columna quedaba vacía y empujaba
   todo el bloque hacia la izquierda, descuadrado respecto al título.
   Con flex y `justify-content: center` el grupo queda centrado sea cual sea el
   número de personas, así que tampoco se rompe si mañana entra una cuarta. */
.inst-team {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 28px 48px;
}
.inst-tm { flex: 0 1 200px; }

@media (max-width: 560px) {
	.inst-team { gap: 24px 26px; }
	.inst-tm { flex: 0 1 132px; }
	.inst-tm .inst-av { width: 88px; height: 88px; font-size: 26px; }
}