/*
	Hoja de estilos del tema.

	QUE REPLICA Y CON QUE AUTORIDAD. La decision del proyecto es replicar el aspecto del
	sitio actual, asi que la especificacion es el sitio vivo y se leyo por HTTP publico
	—solo GET, cero escrituras—. Los valores de abajo no son gusto: son los valores
	MEDIDOS en el navegador sobre el sitio en produccion (contenedor 1200 px, cabecera
	90 px, cuerpo Open Sans 14/1.9 en #777, titulos Open Sans 600 en #333, navegacion
	Montserrat 700 de 13 px en mayusculas, pie #262626 sobre #888, franja de copyright
	#1b1b1b). Nada de esto se copio: se leyo el valor y se re-implemento la regla.

	LO QUE NO SE REPLICA, Y POR QUE. El sitio anterior arrastra ~34 hojas de estilo de
	trece extensiones. Aca hay dos archivos: este y el de las tipografias. La forma se
	replica; la manera de conseguirla, no.

	Las clases de grilla y de visibilidad son el otro lado del contrato de la traduccion
	de contenido: lo que emite CIBIC\Theme\Contenido\Traductores\ColumnaInterna tiene que
	existir aca, o las paginas migradas quedan con columnas apiladas y con contenido
	duplicado visible en todos los viewports.

	Los tres cortes son los tres viewports que mide el contrato visual
	(scripts/thresholds.json): 375, 768 y 1440.
*/

/*
	La hoja de tipografias se encola APARTE (CIBIC\Theme\Arranque::encolar_estilos) y esta
	declarada como dependencia de esta. Un @import conseguiria el mismo orden pero
	encadenaria las dos descargas en serie.
*/

/* ------------------------------------------------------------------
   1. Fichas de diseno. Un valor se cambia aca y en ningun otro lado.
   ------------------------------------------------------------------ */

:root {
	--cibic-columnas: 12;

	/* Tipografia. Medida en produccion: cuerpo Open Sans 14 px con interlineado 1.9. */
	--cibic-fuente-texto: "Open Sans", Arial, Helvetica, sans-serif;
	--cibic-fuente-especial: "Montserrat", Arial, Helvetica, sans-serif;
	--cibic-cuerpo-tamano: 0.875rem;
	--cibic-cuerpo-interlineado: 1.9;

	/* Paleta. */
	--cibic-texto: #777777;
	--cibic-texto-fuerte: #333333;
	--cibic-fondo: #ffffff;
	--cibic-fondo-suave: #f5f5f5;
	--cibic-fondo-oscuro: #262626;
	--cibic-fondo-copyright: #1b1b1b;
	--cibic-texto-sobre-oscuro: #888888;
	--cibic-borde: #efefef;
	--cibic-borde-oscuro: #333333;

	/* Acento del tema anterior (gris) y color de marca (verde azulado), medidos los dos.
	   El gris es el "accent" configurado; el verde es el que usan de verdad la barra
	   superior, los botones destacados y los accesos laterales. */
	--cibic-acento: #a5a5a5;
	--cibic-marca: #00a8a3;
	--cibic-marca-clara: #43a697;

	/* Medidas. */
	--cibic-ancho-maximo: 1200px;
	--cibic-separacion: 40px;
	--cibic-alto-cabecera: 90px;
	--cibic-radio: 2px;
}

/* ------------------------------------------------------------------
   2. Base.
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--cibic-fondo);
	color: var(--cibic-texto);
	font-family: var(--cibic-fuente-texto);
	font-size: var(--cibic-cuerpo-tamano);
	line-height: var(--cibic-cuerpo-interlineado);
}

/*
	Los enlaces del sitio anterior NO van subrayados ni en azul: van en el color del
	texto y se distinguen por el cambio al pasar por encima. Un enlace azul subrayado por
	omision es la senal mas visible de que no hay hoja de estilos.
*/
a {
	color: #000000;
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--cibic-texto-fuerte);
}

/* El foco de teclado SI se ve: quitar el subrayado no puede costar la navegacion sin raton. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--cibic-marca);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 20px;
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-texto);
	font-weight: 600;
	line-height: 1.3;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
h4,
h5,
h6 { font-size: 1rem; }

h6 {
	font-family: var(--cibic-fuente-especial);
	font-weight: 700;
}

p {
	margin: 0 0 20px;
}

img,
iframe,
video {
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

hr {
	height: 0;
	margin: 30px 0;
	border: 0;
	border-top: 1px solid var(--cibic-borde);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 8px 10px;
	border: 1px solid var(--cibic-borde);
	text-align: left;
}

th {
	background: var(--cibic-fondo-suave);
	color: var(--cibic-texto-fuerte);
	font-weight: 600;
}

/* El enlace de salto solo aparece al recibir foco de teclado. */
.cibic-salto-al-contenido {
	position: absolute;
	left: -9999px;
}

.cibic-salto-al-contenido:focus {
	position: static;
	z-index: 100;
	display: inline-block;
	padding: 0.5rem 1rem;
	background: var(--cibic-marca);
	color: #ffffff;
}

/* ------------------------------------------------------------------
   3. Envolturas de ancho. Todo lo que es "una franja del sitio" ocupa el ancho
   completo y centra su contenido en 1200 px, que es lo que mide el contenedor de
   produccion.
   ------------------------------------------------------------------ */

.cibic-ancho {
	width: 100%;
	max-width: var(--cibic-ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
}

.cibic-principal {
	display: block;
	min-height: 40vh;
	/*
		`clip` y no `hidden`: `hidden` crea un contexto de desplazamiento que rompe el
		`position: sticky` de cualquier descendiente. Existe para que las franjas que se
		salen del contenedor (el carrusel) no generen barra horizontal.
	*/
	overflow-x: clip;
}

/*
	Una seccion cuyo unico contenido dinamico quedo vacio no puede seguir ocupando su
	relleno: es el hueco que se ve entre la franja de novedades y el carrusel. Pasa con la
	variante movil del carrusel, que a proposito no se dibuja: el contenido traia un
	contenedor por tamaño de pantalla y la pieza nueva responde a los tres.
*/
.cibic-seccion:has( > .cibic-columna > .cibic-carrusel-principal:empty ) {
	padding-top: 0;
	padding-bottom: 0;
}

/*
	Y la seccion que SI trae carrusel tampoco lleva relleno arriba: el carrusel es una
	franja a sangre y en produccion arranca pegado a la franja de novedades (medido: la
	fila del carrusel tiene `padding-top: 0`). Con los 20 px del peldaño quedaba una banda
	blanca de 20 px entre la franja gris y la imagen, que es la mitad del defecto 2.
*/
.cibic-seccion:has( > .cibic-columna > .cibic-carrusel-principal:not(:empty) ) {
	padding-top: 0;
}

/*
	Las paginas y las publicaciones sueltas —las que no traen secciones propias— tambien
	se centran, porque su contenido no lo hace por si mismo.
*/
.cibic-pagina,
.cibic-listado,
.cibic-entrada,
.cibic-no-encontrado,
.cibic-sin-resultados,
.cibic-encabezado-de-archivo,
.cibic-encabezado-de-busqueda,
.cibic-principal > .navigation {
	width: 100%;
	max-width: var(--cibic-ancho-maximo);
	margin: 0 auto;
	padding: 40px 20px;
}

/*
	La portada arma su propio ancho por seccion: si se lo impusiera el contenedor, las
	franjas de ancho completo dejarian de serlo.
*/
.cibic-portada-contenedor .cibic-pagina {
	max-width: none;
	padding: 0;
}

/*
	El titulo de la portada queda solo para lectores de pantalla. En produccion la portada
	no muestra la palabra "Inicio" en ningun lado: lo primero que se ve es el carrusel.
	Se OCULTA a la vista y no se BORRA, porque la jerarquia de encabezados de la pagina
	necesita su h1.
*/
.cibic-portada > .cibic-titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
	El titulo de las paginas, igual (D-10). Produccion no muestra el titulo de ninguna pagina
	arriba del contenido: medido en institucional, pacientes, medicos, centros-de-atencion,
	laboratorios-derivantes, heritas, contacto, capital-humano y noticias, el encabezado
	existe en el DOM y ocupa 0 px. Tampoco aca se BORRA: centros-de-atencion y otras seis
	paginas no tienen ningun otro h1.
*/
.cibic-pagina > .cibic-titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
	Y SIN HUECO ARRIBA (D-10). En produccion, del borde inferior del encabezado al primer
	contenido hay 40 px en institucional, pacientes y contacto, a 375, 768 y 1440 (medido
	2026-09-15). Las tres arrancan con una fila que declara 80 px arriba, y el tema de
	produccion la dibuja con 40. Aca se sumaban los 40 del contenedor y los 80 de la
	seccion, 120 en total. Solo aplica a las paginas que arrancan con una seccion grande:
	la portada tiene su propia regla, y las demas formas de arrancar no se midieron.
*/
.cibic-pagina:has( > .cibic-cuerpo > .cibic-seccion.cibic-espacio-arriba--grande:first-child ) {
	padding-top: 0;
}

.cibic-pagina > .cibic-cuerpo > .cibic-seccion.cibic-espacio-arriba--grande:first-child {
	padding-top: 40px;
}

/* ------------------------------------------------------------------
   4. Barra superior, cabecera y navegacion.
   ------------------------------------------------------------------ */

.cibic-barra-superior {
	background: var(--cibic-fondo-suave);
	color: var(--cibic-texto);
	font-size: 0.875rem;
}

.cibic-barra-superior .cibic-ancho {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	align-items: center;
	justify-content: flex-end;
	min-height: 40px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.cibic-barra-superior__destacado {
	color: var(--cibic-marca-clara);
	font-weight: 700;
}

.cibic-barra-superior a {
	color: inherit;
}

.cibic-barra-superior a:hover {
	color: var(--cibic-texto-fuerte);
}

/*
	LAS DOS REDES DE LA BARRA SUPERIOR. Medido en produccion el 2026-08-31: caja de 40x40,
	fondo transparente, glifo de 21 px en #777. La barra vertical que las separa del texto
	no es un caracter del contenido: en el sitio actual la pone la hoja de estilos con un
	`::after` sobre el item de texto, y aca se hace igual —si fuera contenido, aparecerian
	dos barras cuando alguien edite la linea—.
*/
.cibic-barra-superior__linea::after {
	content: "|";
	padding: 0 4px;
	color: var(--cibic-marca-clara);
	font-weight: 700;
}

.cibic-barra-superior__redes {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cibic-red {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	color: #777777;
}

.cibic-red:hover,
.cibic-red:focus {
	color: var(--cibic-marca-clara);
}

.cibic-red__icono {
	width: 21px;
	height: 21px;
}

/*
	Texto que existe para quien no ve el dibujo. No se usa `display: none` porque eso lo
	saca tambien del lector de pantalla, que es justo lo contrario de lo que hace falta.
*/
.cibic-solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cibic-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cibic-fondo);
	border-bottom: 1px solid var(--cibic-borde);
}

.cibic-cabecera .cibic-ancho {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cibic-alto-cabecera);
}

.cibic-marca {
	margin: 0;
	font-family: var(--cibic-fuente-especial);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
}

.cibic-marca a {
	display: block;
	color: var(--cibic-texto-fuerte);
}

.cibic-marca img {
	display: block;
	width: auto;
	max-width: 240px;
	height: auto;
	max-height: 65px;
}

.cibic-navegacion {
	display: flex;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.cibic-menu,
.cibic-menu-pie {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cibic-menu > li {
	position: relative;
}

.cibic-menu > li > a {
	display: block;
	padding: 0 15px;
	color: var(--cibic-texto);
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: var(--cibic-alto-cabecera);
	text-transform: uppercase;
	white-space: nowrap;
}

.cibic-menu > li > a:hover,
.cibic-menu > li:focus-within > a {
	color: #303030;
}

.cibic-menu > li.current-menu-item > a,
.cibic-menu > li.current-menu-ancestor > a,
.cibic-menu > li.current-page-ancestor > a {
	color: #000000;
	box-shadow: inset 0 -3px 0 0 #000000;
}

/*
	Submenus: fondo oscuro, como el del sitio anterior. Se abren al pasar por encima y
	TAMBIEN al recibir foco de teclado, que es lo que el sitio anterior no hace.
*/
.cibic-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: block;
	visibility: hidden;
	min-width: 250px;
	margin: 0;
	padding: 0;
	background: var(--cibic-fondo-oscuro);
	list-style: none;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cibic-menu > li:hover > .sub-menu,
.cibic-menu > li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
}

.cibic-menu .sub-menu a {
	display: block;
	padding: 10px 20px;
	border-bottom: 1px solid var(--cibic-borde-oscuro);
	color: #bbbbbb;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.cibic-menu .sub-menu li:last-child a {
	border-bottom: 0;
}

.cibic-menu .sub-menu a:hover,
.cibic-menu .sub-menu li.current-menu-item > a {
	background: var(--cibic-borde-oscuro);
	color: #ffffff;
}

/*
	Debajo de 960 px el sitio anterior cambia a una cabecera con boton de menu. Aca lo
	abre una casilla oculta con su etiqueta: sin JavaScript y sin que el navegador decida
	por nosotros que se ve. En escritorio las dos piezas se ocultan y la lista se dibuja
	siempre. Ver la nota de header.php sobre por que NO es un <details>.
*/
.cibic-menu-interruptor,
.cibic-menu-boton {
	display: none;
}

/* ------------------------------------------------------------------
   5. Pie.
   ------------------------------------------------------------------ */

.cibic-pie {
	margin-top: 60px;
	padding: 60px 0 0;
	background: var(--cibic-fondo-oscuro);
	color: var(--cibic-texto-sobre-oscuro);
}

.cibic-pie a {
	color: var(--cibic-texto-sobre-oscuro);
}

.cibic-pie a:hover {
	color: #ffffff;
}

.cibic-pie__columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cibic-separacion);
	padding-bottom: 40px;
}

.cibic-pie__titulo,
.cibic-pie-titulo {
	margin: 0 0 20px;
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cibic-pie-lista,
.cibic-pie__sedes {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cibic-barra-superior__linea {
	margin: 0;
}

.cibic-barra-superior__separador {
	padding: 0 4px;
}

.cibic-pie-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--cibic-borde-oscuro);
}

.cibic-pie-item:last-child {
	border-bottom: 0;
}

/*
	Los centros de atencion pasaron de terminos de una lista de definiciones a ENCABEZADOS
	con su parrafo: el aspecto es el mismo y el marcado ahora dice lo que la pagina tiene.
*/
.cibic-pie__sede {
	margin: 0;
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cibic-pie__direccion {
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cibic-borde-oscuro);
}

.cibic-pie__sedes .cibic-pie__direccion:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

/*
	La franja de copyright es mas oscura que el pie: son dos bandas distintas, y sin la
	diferencia el pie termina en un borde que no se ve.
*/
.cibic-aviso-de-pie {
	margin: 0;
	padding: 20px 0;
	background: var(--cibic-fondo-copyright);
	color: #777777;
	font-size: 0.8125rem;
}

.cibic-aviso-de-pie > span {
	display: block;
	width: 100%;
	max-width: var(--cibic-ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
}

/* ------------------------------------------------------------------
   6. Grilla: lo que emite la traduccion del contenido maquetado.
   ------------------------------------------------------------------ */

/*
	En movil la fila es de UNA columna, y no de doce apiladas.

	MEDIDO, y era un desborde real: con doce pistas y 40 px de separacion, los once huecos
	suman 440 px de ancho MINIMO, o sea mas que la pantalla de 375 px. La consecuencia no
	era una grilla apretada sino columnas de 440 px dentro de una ventana de 375: el texto
	se cortaba contra el borde derecho. Doce pistas de las que once quedan vacias tampoco
	dicen nada: en movil toda columna ocupa el ancho completo, asi que la pista es una.
*/
.cibic-fila {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cibic-separacion);
	margin-bottom: var(--cibic-separacion);
}

.cibic-fila:last-child {
	margin-bottom: 0;
}

/*
	En movil toda columna ocupa el ancho completo: doce columnas de 31 px no son una
	grilla, son una lista de palabras cortadas. `min-width: 0` es lo que permite que el
	contenido se achique en vez de empujar la pista.
*/
.cibic-columna {
	grid-column: 1 / -1;
	min-width: 0;
}

.cibic-columna--centrada {
	justify-self: center;
}

/*
	Aire entre bloques de texto (D-10), medido en produccion: 40 px debajo de cada bloque y
	ninguno debajo del ultimo de su contenedor. Es lo que separa cada valor de la lista de
	/institucional/ (paso de 67 px con una linea de 27) y el h1 de su bajada.
*/
.cibic-texto {
	margin-bottom: 40px;
}

.cibic-texto:last-child {
	margin-bottom: 0;
}

.cibic-texto > *:first-child {
	margin-top: 0;
}

.cibic-texto > *:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   7. Componentes: lo que emite cada traductor.
   ------------------------------------------------------------------ */

/* 7.1 Seccion — la franja horizontal. */
.cibic-seccion {
	padding: 40px 0;
}

/*
	`.cibic-columna` como hijo DIRECTO de la seccion no es un error del contenido: el
	maquetador escribe filas de una sola columna sin envolverlas, y la traduccion las emite
	tal cual. Fuera de una grilla, `grid-column: span 12` no hace nada, asi que sin esta
	regla ese contenido queda pegado a los bordes de la pantalla. Se le da el mismo ancho
	que a una fila.
*/
.cibic-seccion > .cibic-columna,
.cibic-seccion > .cibic-fila,
.cibic-seccion > .cibic-texto,
.cibic-seccion > .cibic-titular,
.cibic-seccion > .cibic-boton,
.cibic-seccion > .cibic-separador,
.cibic-seccion > .cibic-caja,
.cibic-seccion > .cibic-medio,
.cibic-seccion > .cibic-lista,
.cibic-seccion > .cibic-desplegable,
.cibic-seccion > .cibic-carrusel-de-tarjetas,
.cibic-seccion > p {
	width: 100%;
	max-width: var(--cibic-ancho-maximo);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/*
	La franja de ancho completo es la que lleva el carrusel y la barra de novedades: su
	fondo tiene que llegar a los dos bordes de la pantalla. El contenido de adentro se
	centra por su cuenta.
*/
.cibic-seccion--ancho-completo,
.cibic-seccion--ancho-completo > .cibic-fila,
.cibic-seccion--ancho-completo > .cibic-columna {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.cibic-seccion--alto-completo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 60vh;
}

.cibic-espacio-arriba--nulo { padding-top: 0; }
.cibic-espacio-arriba--chico { padding-top: 20px; }
.cibic-espacio-arriba--medio { padding-top: 40px; }
.cibic-espacio-arriba--grande { padding-top: 80px; }
.cibic-espacio-abajo--nulo { padding-bottom: 0; }
.cibic-espacio-abajo--chico { padding-bottom: 20px; }
.cibic-espacio-abajo--medio { padding-bottom: 40px; }
.cibic-espacio-abajo--grande { padding-bottom: 80px; }

/*
	LOS FONDOS DE SECCION. Tres, porque tres son los que el sitio actual usa: medido el
	2026-08-31 sobre sus 141 URLs, hay once filas con color y solo en dos paginas —la
	portada y /centros-de-atencion/—. El nombre viaja en el marcado y el color se decide
	aca; el hexadecimal nunca entra al HTML.

	EL RELLENO QUEDA ADENTRO DEL COLOR, y eso es lo que arregla el hueco blanco que se veia
	entre el encabezado y la franja «Cuotas sin interes...»: antes el color estaba en el div
	de adentro y los 20 px de relleno en la seccion de afuera, asi que el relleno se dibujaba
	en blanco. Con el fondo en la seccion no hay forma de que vuelva a pasar.
*/
.cibic-seccion--fondo-oscuro {
	background: #53565a;
	color: rgba(255, 255, 255, 0.9);
}

.cibic-seccion--fondo-suave {
	background: #ededed;
}

.cibic-seccion--fondo-claro {
	background: #ffffff;
}

/*
	EL TURQUESA DE FOUNDATION MEDICINE. Medido en produccion el 2026-09-15: rgb(0, 167, 162)
	en la seccion de «Web exclusiva de Foundation Medicine Argentina» y en la de los
	portfolios. El texto y los titulos van en blanco, como ahi.
*/
.cibic-seccion--fondo-turquesa {
	background: #00a7a2;
	color: #ffffff;
}

.cibic-seccion--fondo-turquesa .cibic-titular,
.cibic-seccion--fondo-turquesa h3,
.cibic-seccion--fondo-turquesa h4,
.cibic-seccion--fondo-turquesa p {
	color: #ffffff;
}

/*
	LAS DOS FRANJAS CON IMAGEN. Produccion las sirve con la imagen que CUBRE el area, fija
	al viewport (efecto de parallax) y con un alto por ancho de pantalla: 262 px a 375,
	305 a 768 y 412 a 1440. El alto va en la franja y no en los separadores de adentro
	porque es lo que se midio en la pantalla, no en el contenido.
*/
.cibic-franja-de-fondo {
	min-height: 262px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;

	/*
		LLEGA A LOS DOS BORDES DE LA PANTALLA, como en produccion (medido: 375, 768 y 1440
		px de ancho). Se sale del contenedor igual que el carrusel principal: la seccion
		vive dentro de un contenedor centrado y `max-width: none` no alcanza para salir de
		el. El contenido no se edita para acomodar la hoja de estilos.
	*/
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
}

/*
	El alto lo fija la franja y no lo que tiene adentro: los dos separadores invisibles que
	dejo la traduccion sumaban 322 px en los tres anchos, y produccion mide 262, 305 y 412.
*/
.cibic-franja-de-fondo .cibic-separador {
	display: none;
}

@media ( min-width: 768px ) {
	.cibic-franja-de-fondo {
		min-height: 305px;
	}
}

@media ( min-width: 1200px ) {
	.cibic-franja-de-fondo {
		min-height: 412px;
	}
}

/*
	EL BANNER CON TEXTO ENCIMA (la pieza del certificado COVID). Produccion pone una capa
	oscura al 60 % sobre la foto y encima el titulo y la bajada, centrados y en blanco.
*/
.cibic-carrusel-principal--banner {
	position: relative;
}

.cibic-banner__enlace {
	display: block;
	color: inherit;
	text-decoration: none;
}

/*
	EL BANNER RECORTADO. Produccion no dibuja la foto entera: la recorta a la proporcion de
	su franja (1280x385 en escritorio y 1024x600 en pantalla chica, medido). La proporcion
	la declara la pieza en el marcado; aca solo se hace que la imagen la llene.
*/
.cibic-carrusel-principal--recortado .cibic-medio,
.cibic-carrusel-principal--recortado .cibic-banner__enlace {
	height: 100%;
}

.cibic-carrusel-principal--recortado .cibic-medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
	LAS DOS SECCIONES TURQUESA llegan a los bordes de la pantalla, como en produccion
	(medido: 375, 768 y 1440 px de ancho), por el mismo camino que la franja con imagen.
*/
.cibic-seccion--fondo-turquesa {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
}

.cibic-seccion--fondo-turquesa > .cibic-columna,
.cibic-seccion--fondo-turquesa > .cibic-fila {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

.cibic-banner__velo {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
}

.cibic-banner__texto {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 0 16px;
	text-align: center;
	color: #ffffff;
}

.cibic-banner__titulo {
	margin: 0;
	font-family: var( --cibic-fuente-especial );
	font-size: 23px;
	font-weight: 700;
	line-height: 1.1;
}

.cibic-banner__bajada {
	margin: 0;
	font-size: 11px;
}

@media ( min-width: 768px ) {
	.cibic-banner__titulo {
		font-size: 48px;
	}

	.cibic-banner__bajada {
		font-size: 23px;
	}
}

@media ( min-width: 1200px ) {
	.cibic-banner__titulo {
		font-size: 64px;
	}

	.cibic-banner__bajada {
		font-size: 20px;
	}
}

/*
	QUE SE DIBUJA EN CADA ANCHO. Produccion sirve DOS piezas para el certificado COVID -una
	de escritorio y una de pantalla chica- y una sola para el test prenatal, que a 375 y 768
	no aparece. El corte es el mismo que usa el resto del tema.
*/
.cibic-carrusel-principal--solo-escritorio {
	display: none;
}

@media ( min-width: 1200px ) {
	.cibic-carrusel-principal--solo-escritorio {
		display: block;
	}

	.cibic-carrusel-principal--solo-movil {
		display: none;
	}
}

/*
	La franja de novedades trae su propio alto y su propio relleno, asi que la seccion que
	la contiene no suma el suyo: sumarlos daba una banda de 80 px donde produccion tiene 43.
*/
.cibic-seccion:has( > .cibic-columna > .cibic-texto > .cibic-ticker-de-noticias ),
.cibic-seccion:has( > .cibic-columna > .cibic-ticker-de-noticias ) {
	padding-top: 0;
	padding-bottom: 0;
}

.cibic-alineado-izquierda { text-align: left; }
.cibic-alineado-centro { text-align: center; }
.cibic-alineado-derecha { text-align: right; }
.cibic-alineado-justificado { text-align: justify; }

/*
	7.2 Titular — el encabezado del maquetador. Los peldanos de tamano son los tres que
	emite el traductor; el peso llega como clase propia.
*/
/*
	Sin color propio (D-10): medido en produccion, el titular que no trae color toma el del
	elemento — un `div` hereda el #777 del cuerpo y un h3/h4 el #333 de los encabezados —.
	Los dos grises de la bajada llegan como clase. El chico es 16 px con interlineado 1.8.
*/
.cibic-titular {
	margin: 0 0 20px;
	font-family: var(--cibic-fuente-texto);
	line-height: 1.3;
}

.cibic-titular--chico {
	font-size: 1rem;
	line-height: 1.8;
}

.cibic-titular--gris { color: #666666; }
.cibic-titular--gris-claro { color: #999999; }

.cibic-titular--sin-margen {
	margin-bottom: 0;
}
.cibic-titular--medio { font-size: 1.5rem; }
.cibic-titular--grande { font-size: 1.75rem; }

.cibic-titular--mayusculas {
	font-family: var(--cibic-fuente-especial);
	letter-spacing: 1px;
	text-transform: uppercase;
}

.cibic-titular--peso-300 { font-weight: 300; }
.cibic-titular--peso-400 { font-weight: 400; }
.cibic-titular--peso-500 { font-weight: 500; }
.cibic-titular--peso-600 { font-weight: 600; }
.cibic-titular--peso-700 { font-weight: 700; }

/*
	7.3 Boton. Medido en produccion: Montserrat 700 de 13 px en mayusculas, espaciado de
	1 px, relleno 12/20, borde de 2 px y radio de 2 px.
*/
/*
	LOS BOTONES ESTABAN INVERTIDOS, y no eran los tres de la portada: son 77 en 12
	publicaciones. Lo dijo el cliente mirando las tarjetas —«solo ahi creo, pero habria
	que revisar»— y al revisar el sitio entero resulto ser una regla de esta hoja.

	Valores medidos en el sitio actual el 2026-08-31, leyendo sus reglas desde el
	navegador. El por omision NO es el turquesa de marca: es el gris #a5a5a5.
*/
.cibic-boton {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 14px 20px;
	border: 2px solid #a5a5a5;
	border-radius: var(--cibic-radio);
	background: #a5a5a5;
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/*
	AL PASAR EL PUNTERO SE RELLENAN, todas, con el mismo gris oscuro. Antes hacian lo
	contrario —se vaciaban— y eso es la otra mitad de «invertido».
*/
.cibic-boton:hover,
.cibic-boton:focus {
	border-color: #444444;
	background: #444444;
	color: #ffffff;
}

.cibic-boton--chico {
	padding: 9px 14px;
	font-size: 0.6875rem;
}

.cibic-boton--medio {
	padding: 12px 20px;
	font-size: 0.8125rem;
}

.cibic-boton--grande {
	padding: 15px 25px;
	font-size: 0.8125rem;
}

/*
	LA VARIANTE PRIMARIA ES LA VACIA. Es la que usan 48 de los 77 botones —el «Ver mas» de
	las tarjetas entre ellos— y la que estaba al reves: salia con el turquesa relleno y
	texto blanco donde el sitio actual la dibuja transparente con borde negro al 40 %.
*/
.cibic-boton--primario {
	border-color: rgba(0, 0, 0, 0.4);
	background: transparent;
	color: rgba(0, 0, 0, 0.6);
}

.cibic-boton--alterno {
	border-color: #efefef;
	background: #efefef;
	color: #666666;
}

/* 7.4 Caja de icono. El circulo de 73 px es la medida de produccion. */
.cibic-caja {
	position: relative;
	display: block;
	padding: 20px 0;
	text-align: center;
}

.cibic-caja__titulo {
	display: block;
	margin-bottom: 12px;
	color: var(--cibic-texto-fuerte);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

a.cibic-caja:hover .cibic-caja__titulo {
	color: var(--cibic-marca);
}

/*
	LA BAJADA DE LA TARJETA. Medido en produccion: 15 px, gris #777, peso liviano y sin
	mayusculas. El `h6` del tema es la tipografia especial en negrita y mayusculas —que es
	lo correcto para un encabezado de sexto nivel suelto— pero dentro de una tarjeta ese
	texto NO es un encabezado, es la bajada, y asi es como la dibuja el sitio actual. La
	regla se acota a la tarjeta para no cambiar el `h6` del resto del sitio.
*/
.cibic-caja h6 {
	color: #777777;
	font-family: var(--cibic-fuente-texto);
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/*
	EL ICONO DE LA TARJETA DE PACIENTES. Medido en produccion el 2026-08-31: circulo de
	73 px, fondo #a5a5a5, glifo blanco de 28 px. Es la unica de las tres que NO gira, y en
	produccion tampoco: lo que tiene en vez de imagen es esto.
*/
.cibic-caja__icono {
	display: flex;
	width: 73px;
	height: 73px;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: #a5a5a5;
	color: #ffffff;
}

/*
	LAS DOS TARJETAS QUE GIRAN. Valores medidos en la hoja de estilos de produccion:
	perspectiva 800 px, alto fijo 260 px, medio segundo de giro, frente sobre #f9f9f9 y
	dorso #a5a5a5 con el texto blanco y centrado.

	EL GIRO TAMBIEN OCURRE CON EL FOCO DEL TECLADO, y eso NO esta en produccion: alli solo
	responde al puntero, asi que quien navega con teclado no llega nunca al dorso —donde
	esta el unico texto que explica a donde lleva la tarjeta—. Se agrega `:focus-within`
	porque es la misma linea de codigo y la ausencia era un defecto, no una decision.

	`prefers-reduced-motion` apaga la animacion, no el giro: quien pidio menos movimiento
	sigue pudiendo leer el dorso, pero sin medio segundo de rotacion en pantalla.
*/
.cibic-caja--giro {
	position: relative;
	display: block;
	height: 260px;
	padding: 0;
	perspective: 800px;
}

/*
	El enlace cubre la tarjeta entera. Existe porque la tarjeta NO puede ser el enlace: con
	un `<a>` envolviendo bloques, `wpautop` abre un parrafo adentro y el navegador parte el
	enlace en dos, dejando una tarjeta fantasma. Medido en la pagina servida.
*/
.cibic-caja__enlace {
	position: absolute;
	z-index: 3;
	inset: 0;
	display: block;
}

.cibic-caja__giro {
	display: block;
	width: 100%;
	height: 100%;
}

.cibic-caja__cara {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border-radius: 4px;
	backface-visibility: hidden;
	text-align: center;
	transition: transform 0.5s;
}

.cibic-caja__cara--frente {
	z-index: 1;
	background: #f9f9f9;
}

.cibic-caja__cara--dorso {
	background: #a5a5a5;
	color: #ffffff;
	transform: rotateY(-180deg);
}

.cibic-caja--giro:hover .cibic-caja__cara--frente,
.cibic-caja--giro:focus .cibic-caja__cara--frente,
.cibic-caja--giro:focus-within .cibic-caja__cara--frente {
	transform: rotateY(180deg);
}

.cibic-caja--giro:hover .cibic-caja__cara--dorso,
.cibic-caja--giro:focus .cibic-caja__cara--dorso,
.cibic-caja--giro:focus-within .cibic-caja__cara--dorso {
	backface-visibility: visible;
	transform: rotateY(0deg);
}

.cibic-caja__cara .cibic-medio,
.cibic-caja__cara figure {
	margin: 0;
}

.cibic-caja__cara img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
}

@media ( prefers-reduced-motion: reduce ) {

	.cibic-caja__cara {
		transition: none;
	}
}

.cibic-icono {
	display: block;
	width: 73px;
	height: 73px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--cibic-acento);
}

/*
	EL SOBRE DE UN ENLACE DE CORREO (CA-196). La migracion traduce el icono suelto del tema
	anterior a `<span class="cibic-icono">` sin nombre de icono; dentro de un enlace
	`mailto:` ese icono es siempre el sobre. MEDIDO EN PRODUCCION el 2026-09-14
	(/laboratorios-derivantes/, 375/768/1440 px): `fa-envelope-o`, caja de 14x14 px en la
	linea del texto, gris #888888, sin fondo ni redondeo.

	El sitio nuevo no instala la tipografia de iconos para dos glifos (mismo criterio que la
	flecha de las solapas): el sobre es un SVG propio de 14x14 usado como mascara, asi el
	color sale de `background-color` y se puede cambiar sin tocar el dibujo.
*/
a[href^="mailto:"] > .cibic-icono {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0;
	border-radius: 0;
	background: #888888;
	vertical-align: -2px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.75' y='2.25' width='12.5' height='9.5' rx='1.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M1.5 3.5 7 8l5.5-4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='.75' y='2.25' width='12.5' height='9.5' rx='1.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M1.5 3.5 7 8l5.5-4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.cibic-caja-medio {
	display: block;
	background: var(--cibic-fondo-suave);
	text-align: center;
}

.cibic-caja-medio .cibic-medio {
	margin: 0;
}

.cibic-caja-medio img {
	display: block;
	width: 100%;
}

/* 7.5 Desplegable — <details> nativo. */
.cibic-desplegable {
	margin-bottom: 8px;
	border: 1px solid var(--cibic-borde);
	border-radius: var(--cibic-radio);
}

.cibic-desplegable__titulo {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--cibic-fondo-suave);
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	list-style: none;
	cursor: pointer;
}

.cibic-desplegable__titulo::-webkit-details-marker {
	display: none;
}

.cibic-desplegable__titulo::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
}

.cibic-desplegable[open] > .cibic-desplegable__titulo {
	background: var(--cibic-acento);
	color: #ffffff;
}

.cibic-desplegable[open] > .cibic-desplegable__titulo::after {
	content: "\2212";
}

.cibic-desplegable__cuerpo {
	padding: 18px;
}

.cibic-desplegable__cuerpo > *:last-child {
	margin-bottom: 0;
}

/* 7.6 Espaciador — hueco vertical deliberado. Sin altura no separa nada. */
.cibic-espaciador {
	display: block;
	height: 40px;
}

.cibic-espaciador--nulo { height: 0; }
.cibic-espaciador--chico { height: 20px; }
.cibic-espaciador--medio { height: 40px; }
.cibic-espaciador--grande { height: 80px; }

/* 7.7 Medio — imagen suelta o enlazada. 40 px debajo y ninguno si es la ultima, medido (D-10). */
.cibic-medio {
	margin: 0 0 40px;
}

.cibic-medio:last-child {
	margin-bottom: 0;
}

.cibic-medio img {
	display: block;
	height: auto;
}

.cibic-alineado-centro .cibic-medio img,
.cibic-medio.cibic-alineado-centro img {
	margin-left: auto;
	margin-right: auto;
}

.cibic-medio__enlace {
	display: inline-block;
	max-width: 100%;
}

.cibic-medio figcaption {
	margin-top: 8px;
	color: var(--cibic-texto);
	font-size: 0.8125rem;
}

/*
	7.8 Video. El sitio anterior lo incrusta con el reproductor del tercero; aca queda el
	enlace, presentado como boton, hasta que el incrustado tenga su propia decision.
*/
.cibic-video {
	margin: 0 0 20px;
}

.cibic-video__enlace {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 12px 20px;
	border: 2px solid var(--cibic-acento);
	border-radius: var(--cibic-radio);
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.cibic-video__enlace::before {
	content: "\25B6";
	color: var(--cibic-acento);
}

.cibic-video__enlace:hover {
	background: var(--cibic-acento);
	color: #ffffff;
}

/* 7.9 Piezas menores del maquetador. */
.cibic-separador {
	margin: 30px 0;
	border-top: 1px solid var(--cibic-borde);
}

/*
	El separador invisible no tiene que ocupar lugar POR SI MISMO: su alto lo declaran sus
	clases de espacio. Con el margen de 30 px del separador visible sumaba 60 px de aire
	que nadie pidio, y la seccion ya trae los suyos. Medido: 161 px de blanco entre la
	franja de novedades y el carrusel.
*/
.cibic-separador--invisible {
	margin: 0;
	border-top-color: transparent;
}

.cibic-lista ul {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.cibic-lista li {
	position: relative;
	padding: 8px 0 8px 24px;
	border-bottom: 1px solid var(--cibic-borde);
}

.cibic-lista--sin-separador li {
	border-bottom: 0;
}

.cibic-lista li::before {
	content: "\203A";
	position: absolute;
	left: 4px;
	color: var(--cibic-acento);
	font-weight: 700;
}

.cibic-lista--acento li::before {
	color: var(--cibic-marca);
}

.cibic-contador {
	display: block;
	text-align: center;
}

.cibic-contador__numero {
	display: block;
	color: var(--cibic-acento);
	font-family: var(--cibic-fuente-especial);
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1.1;
}

.cibic-contador__titulo {
	display: block;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

.cibic-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
	margin: 0 0 20px;
}

/*
 * La celda de la galeria se llena. La regla general de `img` es `max-width: 100%`, que
 * impide el desborde pero NO empareja: una miniatura de 150 px en una celda de 240 se queda
 * en 150 y la grilla sale despareja. Hasta ahora no se notaba porque el contenedor se
 * dibujaba VACIO -ninguna galeria del sitio tenia una sola imagen adentro-.
 */
.cibic-galeria__imagen {
	display: block;
	width: 100%;
	height: auto;
}

.cibic-paneles {
	margin-bottom: 20px;
}

.cibic-panel {
	margin-bottom: 8px;
}

/* ------------------------------------------------------------------
   7 bis. El submenu de seccion: la caja de solapas.

   TODOS LOS VALORES DE ESTE BLOQUE ESTAN MEDIDOS EN PRODUCCION con el
   navegador el 2026-09-12 (Chromium, 375/768/1440 px, www.cibic.com.ar
   por HTTP publico, solo GET). No son gusto ni aproximacion:

     solapa inactiva   fondo #ebebeb  borde 1px #e3e3e3
     solapa activa     fondo #f8f8f8  borde 1px #f0f0f0
     texto             #666666, Open Sans 14 px, interlineado 26.6 px
     caja              padding 14px 20px, radio 5px
     separacion        li margin 1px 0 0 1px sobre ul margin -1px 0 0 -1px
     flecha            a 14 px del texto, 6 px de ancho (produccion la
                       dibuja con FontAwesome 105; aca con dos bordes,
                       para no instalar una tipografia de iconos entera)
     panel             padding 0 20px, que es el aire entre columna y texto

   Los DOS CORTES tambien estan medidos, uno por uno, en produccion:
     < 768   la lista de solapas no se dibuja
     >= 768  se dibuja, arriba de los paneles
     >= 992  se dibuja al costado (medido: a 960 apilada, a 999 al costado)
   ------------------------------------------------------------------ */

.cibic-solapas {
	margin-bottom: 20px;
}

.cibic-solapas__lista {
	margin: -1px 0 0 -1px;
	padding: 0;
	list-style: none;
}

.cibic-solapas__elemento {
	margin: 1px 0 0 1px;
}

.cibic-solapas__solapa {
	display: block;
	position: relative;
	padding: 14px 20px;
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	background: #ebebeb;
	color: #666666;
	font-family: var(--cibic-fuente-texto);
	font-size: var(--cibic-cuerpo-tamano);
	line-height: var(--cibic-cuerpo-interlineado);
	text-decoration: none;
}

.cibic-solapas__solapa:hover,
.cibic-solapas__solapa:focus {
	background: #f8f8f8;
	color: #666666;
}

.cibic-solapas__solapa--activa {
	border-color: #f0f0f0;
	background: #f8f8f8;
}

/*
	La flecha. Produccion usa `fa-angle-right` de FontAwesome; el rebuild no instala esa
	tipografia —son ~75 KB para un chevron— y la dibuja con dos bordes rotados. Queda a
	14 px del texto, que es donde produccion la deja: no pegada al borde derecho.
*/
.cibic-solapas__flecha {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 14px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	vertical-align: middle;
}

/*
	EL MENU DE SECCION DE PANTALLA CHICA: LA BARRA OSCURA FIJA. Lo marca
	CIBIC\Theme\Contenido\MenuDeSeccion.

	MEDIDO EN PRODUCCION con navegador el 2026-09-13 (Chromium, HTTP publico, solo
	lectura) en 320, 375, 414, 640, 766, 767, 768, 769, 770, 771 y 1440 px:

	  hasta 769    barra FIJA arriba de todo: position fixed, top 0, ancho completo,
	               fondo #262626, 20 px de relleno arriba/abajo (en el bloque) y a los
	               lados (en su envoltura), texto centrado, blanco, Open Sans 14/26.6 px.
	               Enlaces en linea -el salto de linea no se dibuja- separados por "|"
	               con 5 px a cada lado, puesto por la hoja de estilos; el ultimo no lo
	               lleva.
	  desde 770    display none. Corte medido de a un pixel: 769 se dibuja, 770 no.

	  hasta 767    con la pagina arriba de todo la barra NO SE VE: la tapan la barra
	               superior (z-index 99999, fondo blanco) y la cabecera de movil
	               (z-index 8000, fondo blanco), que no son fijas y se van con el scroll.
	               La barra aparece a medida que el encabezado sale, y ahi queda fija.
	               Por eso la captura de pagina completa a 375 px no muestra barra.
	  768 y 769    la barra superior de produccion pierde el fondo (transparente) y la
	               barra oscura queda a la vista con «CENTRAL TELEFONICA…» pintado encima;
	               la cabecera blanca sigue por encima y tapa el resto de la barra.

	ESA SUPERPOSICION SE REPLICA (decision del 2026-09-14: todo como en produccion). Es un
	desfase de dos pixeles entre dos cortes de produccion -el del fondo del encabezado
	termina en 767 y el de la barra en 769-. Medido otra vez el 2026-09-14 a 766-770 px,
	arriba y con scroll de 900, mirando que capa opaca se ve en x=10: a 768 y 769 se ve la
	barra en la franja de la barra superior y la cabecera debajo; a 766 y 767, la barra
	superior. Aca se replica con el mismo mecanismo: la barra superior sin fondo SOLO en
	768-769 y SOLO en las paginas con barra. Desde 770 no se toca: fuera de este rango la
	barra superior del sitio nuevo conserva su fondo.

	LA CABECERA DEJA DE SER PEGAJOSA en ese rango y SOLO en las paginas que tienen barra.
	En produccion la cabecera de movil se va con el scroll; aca es `sticky` en todos los
	anchos, y pegada arriba taparia la barra para siempre. El `:has()` acota el cambio a
	esas paginas: el resto del sitio no se toca.

	Capas: la barra en 40, debajo de la cabecera (50) y de la barra superior (51), y
	debajo de los accesos laterales (900) y del chat (1000), que en produccion tambien
	quedan por encima.
*/
@media (max-width: 769px) {
	.cibic-menu-de-seccion {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 40;
		margin: 0;
		padding: 20px;
		background: var(--cibic-fondo-oscuro);
		color: #ffffff;
		font-family: var(--cibic-fuente-texto);
		font-size: var(--cibic-cuerpo-tamano);
		line-height: var(--cibic-cuerpo-interlineado);
		text-align: center;
	}

	.cibic-menu-de-seccion br {
		display: none;
	}

	.cibic-menu-de-seccion a {
		color: #ffffff;
		text-decoration: none;
	}

	.cibic-menu-de-seccion a::after {
		content: "|";
		padding: 0 5px;
		color: #ffffff;
	}

	.cibic-menu-de-seccion a:last-of-type::after {
		content: none;
	}

	body:has(.cibic-menu-de-seccion) .cibic-barra-superior {
		position: relative;
		z-index: 51;
	}

	body:has(.cibic-menu-de-seccion) .cibic-cabecera {
		position: relative;
		z-index: 50;
	}
}

@media (min-width: 768px) and (max-width: 769px) {
	body:has(.cibic-menu-de-seccion) .cibic-barra-superior {
		background: transparent;
	}
}

@media (min-width: 770px) {
	.cibic-menu-de-seccion {
		display: none;
	}
}

@media (max-width: 767px) {
	.cibic-solapas__lista {
		display: none;
	}
}

@media (min-width: 768px) {
	/*
		La columna se ajusta a la etiqueta mas larga y no al ancho disponible: medido en
		produccion, 255 px en `/institucional/`, 311 en `/pacientes/` y 223 en
		`/medicos/`, con el contenedor en 728 px. O sea que el ancho lo decide el texto.
	*/
	.cibic-solapas__lista {
		width: max-content;
		max-width: 100%;
	}

	.cibic-solapas__paneles {
		padding: 0 20px;
	}
}

@media (min-width: 992px) {
	.cibic-solapas {
		display: flex;
		align-items: flex-start;
	}

	.cibic-solapas__lista {
		flex: 0 0 auto;
		max-width: 40%;
	}

	.cibic-solapas__paneles {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------
   8. Listados de publicaciones.
   ------------------------------------------------------------------ */

.cibic-resumen {
	padding: 30px 0;
	border-bottom: 1px solid var(--cibic-borde);
}

.cibic-resumen-titulo {
	margin: 0 0 8px;
	font-size: 1.25rem;
}

.cibic-resumen-fecha,
.cibic-fecha {
	display: block;
	margin-bottom: 12px;
	color: #999999;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cibic-titulo {
	margin: 0 0 20px;
}

.cibic-volver {
	display: inline-block;
	margin-top: 20px;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
}

.cibic-terminos {
	margin: 20px 0 0;
	font-size: 0.8125rem;
}

.navigation.pagination {
	padding: 20px 0;
	text-align: center;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	min-width: 36px;
	margin: 0 3px;
	padding: 8px;
	border: 1px solid var(--cibic-borde);
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
}

.navigation.pagination .page-numbers.current {
	border-color: var(--cibic-acento);
	background: var(--cibic-acento);
	color: #ffffff;
}

/* ------------------------------------------------------------------
   9. Formularios.
   ------------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid #dddddd;
	border-radius: var(--cibic-radio);
	background: #ffffff;
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-texto);
	font-size: 0.875rem;
}

textarea {
	min-height: 140px;
}

input[type="submit"],
button[type="submit"],
.wpcf7-submit {
	width: auto;
	padding: 12px 24px;
	border: 2px solid var(--cibic-marca);
	border-radius: var(--cibic-radio);
	background: var(--cibic-marca);
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
	background: transparent;
	color: var(--cibic-marca);
}

.wpcf7 label {
	display: block;
	margin-bottom: 14px;
	color: var(--cibic-texto-fuerte);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------------
   10. Bloques dinamicos: carrusel principal, franja de novedades y carrusel de
   tarjetas. El contenedor lo emite la traduccion del contenido; el contenido lo pone
   la plantilla.
   ------------------------------------------------------------------ */

/*
	EL CARRUSEL YA NO ES UNA TIRA QUE SE RECORRE DE COSTADO. Hasta T-D10 lo dibujaba una
	clase del tema con las seis diapositivas escritas en PHP, y esta hoja las maquetaba con
	`display:flex` y anclaje de desplazamiento. Ahora el interior lo pone el plugin del
	carrusel, que el cliente administra desde el panel, y este contenedor pasa a ser solo el
	envoltorio a sangre completa.

	EL `display: flex` DE LA VERSION ANTERIOR HUBO QUE SACARLO, Y NO POR PROLIJIDAD: se
	midio en el navegador que el bloque del plugin, como unico hijo de un contenedor flexible
	sin ancho intrinseco, quedaba en 0 px de ancho por 460 de alto. En pantalla eso era un
	rectangulo gris de media primera pantalla, con el carrusel entero cargado y medible por
	dentro. Una regresion que se ve solo mirando.
*/
.cibic-carrusel-principal {
	position: relative;
	background: #e7edee;

	/*
		El carrusel llega a los dos bordes de la pantalla, como en el sitio actual, aunque
		la seccion que lo contiene este limitada a 1.200 px. Se sale del contenedor en vez
		de pedirle al contenido que declare la seccion como de ancho completo: el contenido
		es el que hay y no se edita para acomodar la hoja de estilos.
	*/
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
}

/*
	EL TOKEN CON EL QUE SE SANEA LA OPCION «None» DEL PANEL, declarado inerte a proposito.

	Si el cliente elige «None» en «Content Animation», el plugin emite `data-animation=""`
	y su guion hace `classList.add("animated", "")`, que lanza `InvalidCharacterError`: se
	corta antes de registrar el enganche que muestra el contenido de las diapositivas
	siguientes, y el carrusel queda rotando sin titulo, sin bajada y sin boton. El tema
	reemplaza ese valor por este token (ver CIBIC\Theme\Contenido\AnimacionDelCarrusel).

	La regla existe para que quede ESCRITO que el token no anima por decision, y no porque
	nadie le haya puesto estilo todavia: sin ella, cualquiera podria definirlo despues como
	una animacion y «sin animacion» pasaria a animar.
*/
.cibic-carrusel-principal .cibic-sin-animacion {
	animation: none;
}

/*
	El banner de una sola imagen que reemplaza a un carrusel que no viajo: la imagen ocupa
	el ancho de la franja, como el fondo de la diapositiva en produccion (1440x434 medido).
*/
.cibic-carrusel-principal--banner .cibic-medio {
	margin: 0;
}

.cibic-carrusel-principal--banner .cibic-medio img {
	width: 100%;
	height: auto;
}

/*
	LA TIPOGRAFIA DEL CARRUSEL, sobre el marcado que emite el plugin. Son los mismos valores
	que tenia la pieza anterior —medidos en el sitio vivo— aplicados a las clases del plugin,
	para que cambiar de motor no cambie el aspecto.
*/
.cibic-carrusel-principal .carousel-slider-hero__cell__heading {
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cibic-carrusel-principal .carousel-slider-hero__cell__description {
	color: #ffffff;
	font-size: 1.125rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/*
	El boton del carrusel usa la misma forma que el resto de los botones del sitio: borde de
	2 px, esquinas casi rectas, mayusculas y la tipografia especial. El plugin lo dibuja con
	sus propias variables, asi que se re-declaran las que dan la forma.
*/
.cibic-carrusel-principal .cs-hero-button {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 20px;
	border: 2px solid #ffffff;
	border-radius: 2px;
	background: transparent;
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

.cibic-carrusel-principal .cs-hero-button:hover,
.cibic-carrusel-principal .cs-hero-button:focus {
	background: #ffffff;
	color: #323232;
}

/*
	Los controles del plugin, en los colores del sitio en vez de los suyos por omision
	(un turquesa que no es el de la marca).
*/
.cibic-carrusel-principal .swiper {
	--swiper-theme-color: #ffffff;
	--swiper-navigation-color: #ffffff;
	--swiper-pagination-color: #ffffff;
	--swiper-pagination-bullet-inactive-color: #ffffff;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
}

.cibic-ticker-de-noticias {
	background: #53565a;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
}

.cibic-ticker-de-noticias ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 40px;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: var(--cibic-ancho-maximo);
	min-height: 40px;
	margin: 0 auto;
	padding: 8px 20px;
	list-style: none;
}

.cibic-carrusel-de-tarjetas ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cibic-separacion);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cibic-tarjeta {
	margin: 0;
	padding: 24px;
	border-radius: var(--cibic-radio);
	background: var(--cibic-fondo-suave);
	font-style: italic;
	text-align: left;
}

.cibic-tarjeta > *:last-child {
	margin-bottom: 0;
}

.cibic-tarjeta__firma {
	display: block;
	margin-top: 12px;
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-especial);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
}

/*
	Lo que todavia no tiene datos se declara y no se disimula: un contenedor vacio no
	dibuja nada, y estas clases existen para que un vacio se pueda MEDIR en vez de
	adivinarse.
*/
.cibic-carrusel-principal:empty,
.cibic-ticker-de-noticias:empty,
.cibic-carrusel-de-tarjetas:empty,
.cibic-barra-pendiente:empty,
.cibic-embebido-pendiente:empty,
.cibic-formulario-externo:empty,
.cibic-buscador-de-sedes:empty,
.cibic-lista-de-noticias:empty {
	display: none;
}

.cibic-ultimas-publicaciones ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
	La tira de acreditaciones. `icons_cert` NO es una clase del tema nuevo: viene escrita a
	mano dentro del contenido migrado, asi que el traductor la deja pasar tal cual y no hay
	otro lugar donde darle forma. Sin esto, los seis sellos quedan uno debajo del otro con
	su vinieta, que es como se ve una lista sin hoja de estilos.
*/
.icons_cert {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.icons_cert li {
	margin: 0;
}

.icons_cert img {
	display: block;
	width: auto;
	max-height: 90px;
}

/* ------------------------------------------------------------------
   11. Cortes. Los tres viewports del contrato visual.
   ------------------------------------------------------------------ */

@media (min-width: 768px) {
	/* Recien aca la fila tiene sus doce pistas: es donde entran. */
	.cibic-fila {
		grid-template-columns: repeat(var(--cibic-columnas), 1fr);
	}

	.cibic-columna { grid-column: span 12; }
	.cibic-columna--1-de-12 { grid-column: span 1; }
	.cibic-columna--2-de-12 { grid-column: span 2; }
	.cibic-columna--3-de-12 { grid-column: span 3; }
	.cibic-columna--4-de-12 { grid-column: span 4; }
	.cibic-columna--5-de-12 { grid-column: span 5; }
	.cibic-columna--6-de-12 { grid-column: span 6; }
	.cibic-columna--7-de-12 { grid-column: span 7; }
	.cibic-columna--8-de-12 { grid-column: span 8; }
	.cibic-columna--9-de-12 { grid-column: span 9; }
	.cibic-columna--10-de-12 { grid-column: span 10; }
	.cibic-columna--11-de-12 { grid-column: span 11; }
	.cibic-columna--12-de-12 { grid-column: span 12; }

	.cibic-pie__columnas {
		grid-template-columns: repeat(3, 1fr);
	}

	.cibic-carrusel-de-tarjetas ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.cibic-carrusel-principal .carousel-slider-hero__cell__heading {
		font-size: 3rem;
	}
}

@media (min-width: 960px) {
	.cibic-carrusel-de-tarjetas ul {
		grid-template-columns: repeat(4, 1fr);
	}

}

/*
	Debajo de 960 px la navegacion horizontal no entra: son ocho entradas en mayusculas.
	El sitio anterior cambia de cabecera en ese mismo corte.
*/
@media (max-width: 959px) {
	.cibic-navegacion {
		position: static;
		flex: 0 0 auto;
	}

	.cibic-menu-boton {
		display: flex;
		gap: 8px;
		align-items: center;
		padding: 10px 0;
		color: var(--cibic-texto);
		font-family: var(--cibic-fuente-especial);
		font-size: 0.8125rem;
		font-weight: 700;
		text-transform: uppercase;
		cursor: pointer;
	}

	.cibic-menu-boton__barras {
		width: 22px;
		height: 2px;
		background: currentColor;
		box-shadow: 0 6px 0 0 currentColor, 0 -6px 0 0 currentColor;
	}

	/* La casilla existe para el teclado y para el estado; no se dibuja. */
	.cibic-menu-interruptor {
		position: absolute;
		display: block;
		width: 1px;
		height: 1px;
		opacity: 0;
	}

	.cibic-menu-interruptor:focus-visible + .cibic-menu-boton {
		outline: 2px solid var(--cibic-marca);
		outline-offset: 2px;
	}

	.cibic-navegacion > .cibic-menu {
		display: none;
	}

	.cibic-menu-interruptor:checked ~ .cibic-menu {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 60;
		display: block;
		max-height: 70vh;
		padding: 10px 20px 20px;
		overflow-y: auto;
		background: var(--cibic-fondo-oscuro);
	}

	.cibic-menu-interruptor:checked ~ .cibic-menu > li > a {
		padding: 10px 0;
		border-bottom: 1px solid var(--cibic-borde-oscuro);
		color: #bbbbbb;
		line-height: 1.5;
		white-space: normal;
	}

	.cibic-menu-interruptor:checked ~ .cibic-menu .sub-menu {
		position: static;
		visibility: visible;
		min-width: 0;
		opacity: 1;
	}

	.cibic-menu-interruptor:checked ~ .cibic-menu .sub-menu a {
		padding-left: 16px;
		border-bottom: 0;
		color: #999999;
	}

	.cibic-cabecera .cibic-ancho {
		position: relative;
		min-height: 70px;
	}

	.cibic-menu > li.current-menu-item > a,
	.cibic-menu > li.current-menu-ancestor > a,
	.cibic-menu > li.current-page-ancestor > a {
		color: #ffffff;
		box-shadow: none;
	}

	.cibic-barra-superior .cibic-ancho {
		justify-content: center;
		text-align: center;
	}

	.cibic-carrusel-principal .carousel-slider-hero__cell__heading {
		font-size: 1.75rem;
	}
}

/*
	OCULTO EN TODOS LOS ANCHOS. No es lo mismo que las tres clases de abajo: esas
	responden a un viewport, y esta es una decision editorial que el sitio actual toma
	con el token `hidden` del tema comercial. Sin ella, la portada del sitio nuevo
	mostraba 2.444 px de contenido que el sitio actual esconde --el 31,5 % del alto,
	medido en el navegador a 1440 px--, y no habia selector al que agarrarse porque el
	token se perdia en la traduccion.
*/
.cibic-oculto {
	display: none;
}

/* ------------------------------------------------------------------
   12. Visibilidad por viewport.

   No es decoracion: en el contenido real hay columnas duplicadas —la misma
   informacion maquetada dos veces, una para pantalla chica y otra para grande— y sin
   estas reglas las paginas migradas la muestran dos veces siempre.
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.cibic-oculto-en-movil {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.cibic-oculto-en-tablet {
		display: none;
	}
}

@media (min-width: 1200px) {
	.cibic-oculto-en-escritorio {
		display: none;
	}
}

/* Se respeta la preferencia del sistema: nada se mueve para quien pidio que no. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------------
   14. Los videos embebidos.

   El marco lo dibuja `CIBIC\Theme\Contenido\VideoIncrustado` con una proporcion
   declarada, asi que el hueco lo reserva la caja y no hay salto de maquetado
   cuando el video termina de cargar.
   ------------------------------------------------------------------ */

.cibic-video--marco {
	position: relative;
	width: 100%;
	margin: 0 0 20px;
	background: #000000;
}

.cibic-video__marco {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
	LOS MAPAS DE «UBICACION» (MapasDeCentros). La regla general de `iframe` pone
	`height: auto`, que en un marco ignora el atributo `height` y lo deja en 150 px (medido).
	Produccion los dibuja con el alto del atributo: 450 px en Alberdi y Nueve, 300 px en el
	resto, con el ancho de la columna.
*/
.cibic-mapa {
	width: 100%;
	border: 0;
}

.cibic-mapa[height="300"] {
	height: 300px;
}

.cibic-mapa[height="450"] {
	height: 450px;
}

/* ---------------------------------------------------------------------------
	LISTADOS DE NOTICIAS Y FIGURAS DE MEDIO

	Los dos contenedores que la traduccion emitia vacios: la portada y `/noticias/`
	dibujaban un hueco blanco donde produccion lista publicaciones, y las figuras de medio
	traian el numero del adjunto sin la imagen. Lo que sigue es la presentacion de lo que
	esos dos contenedores emiten ahora.
--------------------------------------------------------------------------- */

.cibic-noticias {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cibic-separacion);
	margin: 0 0 30px;
}

.cibic-noticia {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cibic-noticia__imagen {
	display: block;
	overflow: hidden;
}

.cibic-noticia__imagen img {
	display: block;
	width: 100%;
	height: auto;
}

.cibic-noticia__titulo {
	margin: 0;
	font-size: 1rem;
	line-height: 1.35;
}

.cibic-noticia__resumen {
	margin: 0;
}

.cibic-noticias--sin-resultados {
	margin: 0 0 30px;
}

/*
	La imagen se mete en la figura al servir la pagina y no trae medidas del maquetador:
	sin esto una foto de 1.280 px desborda su columna.
*/
.cibic-medio__imagen {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.cibic-noticias {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cibic-noticias {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
	Las categorias de una publicacion, al lado de su fecha. Van enlazadas a su archivo:
	sin ese enlace los once archivos de categoria del sitio existen y no se llega a ellos.
*/
.cibic-categorias {
	margin-left: 8px;
}

.cibic-categorias::before {
	content: "\00b7";
	margin-right: 8px;
}

/* ==========================================================================
	LA FRANJA DE TITULO DE SECCION
	Produccion la pone sobre el contenido de cada publicacion. Es fondo gris muy
	claro con el titulo en gris medio, no en negro: es una franja de contexto, no
	el titulo de la nota.
	========================================================================== */
.cibic-franja {
	background: #f9f9f9;
	border-bottom: 1px solid var(--cibic-borde);
	padding: 22px 0;
	margin-bottom: var(--cibic-separacion);
}

.cibic-franja__titulo {
	max-width: var(--cibic-ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
	font-family: var(--cibic-fuente-texto);
	font-size: 1.375rem;
	font-weight: 400;
	color: var(--cibic-texto);
}

/* ==========================================================================
	LA IMAGEN DESTACADA
	========================================================================== */
.cibic-destacada {
	margin: 0 0 24px;
}

.cibic-destacada__imagen,
.cibic-destacada img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
	PUBLICACION CON BARRA LATERAL
	Una sola columna en telefono; a partir de 960 px, contenido y barra.
	========================================================================== */
.cibic-con-barra {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cibic-separacion);
	max-width: var(--cibic-ancho-maximo);
	margin: 0 auto;
	padding: 0 20px;
}

@media (min-width: 960px) {
	.cibic-con-barra {
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
	}
}

.cibic-barra__bloque {
	margin-bottom: 32px;
}

.cibic-barra__titulo {
	font-family: var(--cibic-fuente-especial);
	font-size: 0.875rem;
	font-weight: 700;
	color: #444444;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.cibic-barra__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cibic-barra__item {
	border-bottom: 1px solid var(--cibic-borde);
	padding: 10px 0;
}

/*
	LA ETIQUETA DEL BUSCADOR NO SE OCULTA CON display:none. Un lector de pantalla
	tampoco anuncia lo que esta oculto asi. Se saca de la vista conservandola en el
	arbol de accesibilidad, que es lo unico que cumple las dos cosas.
*/
.cibic-buscador__etiqueta {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cibic-buscador {
	display: flex;
	gap: 8px;
}

.cibic-buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid var(--cibic-borde);
	padding: 8px 10px;
	font-family: inherit;
	font-size: inherit;
}

.cibic-buscador__boton {
	flex: 0 0 auto;
	background: var(--cibic-acento);
	border: 0;
	color: #ffffff;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	padding: 8px 14px;
	cursor: pointer;
}

/* ==========================================================================
	COMPARTIR
	========================================================================== */
.cibic-compartir {
	border-top: 1px solid var(--cibic-borde);
	margin-top: var(--cibic-separacion);
	padding-top: 16px;
}

.cibic-compartir__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cibic-compartir__enlace {
	font-family: var(--cibic-fuente-especial);
	font-size: 0.8125rem;
	text-decoration: none;
}

/*
	NAVEGACION ENTRE PUBLICACIONES. Produccion la dibuja como dos flechas sin palabra:
	los enlaces no tienen texto y el nombre accesible vive en `aria-label`. Aca se
	dibujan con un caracter de la hoja de estilos (`content`), que los lectores de
	pantalla no anuncian y que `innerText` no ve --o sea que no agrega contenido que
	produccion no tenga--, y el area de toque llega a los 44 px que pide WCAG 2.5.8.
*/
.cibic-navegacion-de-entrada {
	display: flex;
	justify-content: space-between;
	margin-top: var(--cibic-separacion);
}

.cibic-navegacion-de-entrada__anterior,
.cibic-navegacion-de-entrada__siguiente {
	align-items: center;
	display: inline-flex;
	height: 44px;
	justify-content: center;
	text-decoration: none;
	width: 44px;
}

/*
	LA FLECHA SE DIBUJA CON GEOMETRIA Y NO CON UN CARACTER, y el motivo esta medido:
	la primera version usaba `content` con un escape unicode y en pantalla se leian un
	«9» y una «A» sueltos (captura final-single-micoplasmas-1366.png). El escape se
	rompio en el camino y NADA fallo: ni el estandar, ni el analisis estatico, ni la
	suite, ni el comparador -que no mira pseudo-elementos-. Lo encontro la captura.
	Un borde girado no depende de una codificacion, asi que no se puede romper asi.
*/
.cibic-navegacion-de-entrada__anterior::before,
.cibic-navegacion-de-entrada__siguiente::before {
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
	display: block;
	height: 10px;
	width: 10px;
}

.cibic-navegacion-de-entrada__anterior::before {
	transform: rotate(-135deg);
}

.cibic-navegacion-de-entrada__siguiente::before {
	transform: rotate(45deg);
}

/* Cuando solo hay un lado, la flecha que queda no se corre al medio de la fila. */
.cibic-navegacion-de-entrada__siguiente:only-child {
	margin-left: auto;
}

/* ==========================================================================
	LA BARRA FIJA DE ACCESOS
	Replica la barra que produccion tiene pegada al borde derecho. Cada acceso
	lleva DOS textos, cada uno en su propio bloque: la leyenda corta siempre
	visible y la llamada a la accion, que en produccion aparece al pasar por
	encima. Aca la accion se ve siempre en pantallas anchas.
	========================================================================== */
.cibic-accesos {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 900;
}

.cibic-accesos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cibic-acceso {
	display: block;
	width: 82px;
	padding: 10px 6px;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	font-family: var(--cibic-fuente-especial);
	line-height: 1.5;
	border-radius: 4px 0 0 4px;
}

/*
	Cada texto en su propio bloque, y esto NO es solo estetica: el comparador lee el
	texto que la pagina muestra partido por lineas, y dos textos dentro del mismo
	elemento en linea se leerian como uno solo.
*/
.cibic-acceso__etiqueta,
.cibic-acceso__accion {
	display: block;
}

.cibic-acceso__etiqueta {
	font-size: 0.625rem;
	font-weight: 700;
}

.cibic-acceso__accion {
	font-size: 0.5625rem;
	font-weight: 400;
	margin-top: 4px;
	opacity: 0.9;
}

/* Los colores medidos en produccion, uno por acceso, en su orden. */
.cibic-accesos__item:nth-child(1) .cibic-acceso {
	background: #53565a;
}

.cibic-accesos__item:nth-child(2) .cibic-acceso {
	background: var(--cibic-marca);
}

.cibic-accesos__item:nth-child(3) .cibic-acceso {
	background: #000000;
}

/*
	EN TELEFONO LA BARRA NO SE FIJA AL COSTADO. Una columna de 82 px fija sobre una
	pantalla de 360 px tapa casi un cuarto del contenido. Debajo de 768 px pasa a ser
	una fila al pie, que es lo que produccion tambien hace.
*/
@media (max-width: 767px) {
	.cibic-accesos {
		position: static;
		transform: none;
		margin-top: var(--cibic-separacion);
	}

	.cibic-accesos__lista {
		flex-direction: row;
	}

	.cibic-acceso {
		width: auto;
		flex: 1 1 0;
		border-radius: 0;
	}
}

/* ------------------------------------------------------------------
   17. El boton flotante de chat.

   Produccion lo pone abajo a la derecha, sobre todo el contenido, en TODAS las
   paginas. Aca se dibuja con la misma ubicacion y con area de toque de 48 px, por
   encima del minimo de 44 px que pide WCAG 2.5.8.

   `z-index` 1000 y no mas: el sitio actual usa 1000 para este boton y 1001 para el
   suyo de Telegram. Quedarse en 1000 deja lugar arriba en vez de empezar la escalada.
   ------------------------------------------------------------------ */

.cibic-chat {
	bottom: 20px;
	position: fixed;
	right: 20px;
	z-index: 1000;
}

.cibic-chat__boton {
	align-items: center;
	background: #25d366;
	border-radius: 24px;
	color: #fff;
	display: inline-flex;
	font-family: var(--cibic-fuente-especial);
	font-size: 0.875rem;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	text-decoration: none;
}

.cibic-chat__boton:hover,
.cibic-chat__boton:focus {
	background: #1da851;
	color: #fff;
}

/* En pantalla chica el boton no se come el ancho util. */
@media (max-width: 767px) {
	.cibic-chat {
		bottom: 12px;
		right: 12px;
	}

	.cibic-chat__boton {
		font-size: 0.8125rem;
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------------------------
	LOS DOS CARRUSELES DE LA PORTADA — «Cibic Info» y «Comentarios» (T-D22).

	El complemento pone el motor, el arrastre, las flechas y los puntos. Lo que sigue es
	SOLO la presentacion de la publicacion adentro de la diapositiva, medida en el sitio
	actual el 2026-08-31, item por item del `.blog-carousel`:

		imagen    360x238 recortada (la foto original es 396x396: el recorte lo hace el
		          contenedor, no el archivo)
		titulo    18 px, peso 600, #333333
		resumen   14 px, peso 400, #777777, interlineado 26,6 px
		fecha     13 px, peso 700, #999999, en mayusculas
		texto     300 px de ancho dentro de los 360 del item, o sea 30 px a cada lado

	POR QUE EL RECORTE ES `aspect-ratio` Y NO UN ALTO FIJO: con alto fijo una foto vertical
	—el sitio tiene varias— se estira. Con la proporcion mas `object-fit: cover` la tarjeta
	queda pareja y la foto no se deforma, que es lo que hace el sitio actual con overflow.
--------------------------------------------------------------------------- */

.cibic-noticia--en-carrusel {
	gap: 0;
	height: 100%;
}

.cibic-noticia--en-carrusel .cibic-noticia__imagen {
	aspect-ratio: 360 / 238;
	background: #ededed;
	margin-bottom: 18px;
}

.cibic-noticia--en-carrusel .cibic-noticia__imagen img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.cibic-noticia--en-carrusel .cibic-noticia__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 30px;
}

.cibic-noticia--en-carrusel .cibic-noticia__titulo {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
}

.cibic-noticia--en-carrusel .cibic-noticia__titulo a {
	color: #333333;
	text-decoration: none;
}

.cibic-noticia--en-carrusel .cibic-noticia__resumen {
	color: #777777;
	font-size: 0.875rem;
	line-height: 1.9;
}

.cibic-noticia__mas {
	white-space: nowrap;
}

.cibic-noticia__fecha {
	color: #999999;
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
}

/*
	Los puntos del complemento se dibujan DENTRO del carrusel y encima de la ultima linea
	de texto. En el carrusel de publicaciones el contenido llega hasta abajo, asi que se
	les deja su propio renglon.
*/
.carousel-slider-outer-post-carousel .swiper-pagination {
	position: static;
	margin-top: 14px;
}

/*
	El testimonio no lleva fondo ni imagen: es texto centrado sobre el blanco de la
	seccion, igual que el del sitio actual. La regla existe porque el modulo de contenido
	del complemento esta pensado para un cartel a sangre y trae su sombra de texto.
*/
.carousel-slider-hero__cell__heading,
.carousel-slider-hero__cell__description {
	text-shadow: none;
}

/*
	EL TESTIMONIO NO VA EN NEGRITA. Medido en el sitio actual: el texto del testimonio esta
	en peso 400 y #777777; el modulo de contenido del complemento pone 700 porque esta
	pensado para el titular de un cartel a sangre.

	La regla se acota a las diapositivas SIN imagen de fondo, que es exactamente lo que
	distingue al testimonio del cartel principal —ese si va en negrita, igual que en el
	sitio actual—. Se eligio esa condicion y no el identificador del carrusel porque el
	identificador es un dato de la base y no puede quedar escrito en la hoja de estilos.
	Si el navegador no entiende `:has()`, la regla se ignora y el testimonio se ve como
	hasta ahora: la degradacion es hacia lo que ya habia, no hacia algo roto.
*/
.carousel-slider-hero__cell:not(:has(.carousel-slider-hero__cell__background[style*="background-image"])) .carousel-slider-hero__cell__heading {
	font-weight: 400;
}


/*
	8.9 EL FORMULARIO DE CONSULTAS.

	LAS MEDIDAS SALEN DE PRODUCCION, leidas con navegador el 2026-09-12 sobre
	`/pacientes/` panel `#contacto` (`getComputedStyle`, no a ojo):

	  boton     fondo rgb(82, 202, 190) - texto blanco - 15px/600 - VERSALITA con 1px de
	            espaciado - radio 4px - relleno 15px 20px - ancho completo - alto 52 px
	  control   borde 1px solid rgba(0, 0, 0, 0.09) - radio 4px - 16px - ancho completo -
	            alto 52 px
	  etiqueta  15px, peso 400

	LA ETIQUETA VA ARRIBA Y NO FLOTANDO SOBRE EL CAMPO. Produccion la usa como marcador de
	posicion y la esconde al empezar a escribir; con eso, quien vuelve a revisar lo que
	cargo ya no sabe que campo esta mirando, y el de telefono —cuya etiqueta es la
	instruccion de formato— se corta con puntos suspensivos. Aca se lee entera y siempre.
*/
.cibic-formulario {
	margin: 0 0 20px;
}

.cibic-formulario__campo {
	margin: 0 0 14px;
}

.cibic-formulario__etiqueta {
	display: block;
	margin: 0 0 5px;
	color: var(--cibic-texto-fuerte);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
}

.cibic-formulario__requerido {
	color: #e2401c;
}

.cibic-formulario__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 14px 10px;
	border: 1px solid rgba(0, 0, 0, 0.09);
	border-radius: 4px;
	background: #ffffff;
	color: var(--cibic-texto-fuerte);
	font-family: var(--cibic-fuente-texto);
	font-size: 1rem;
	line-height: 1.4;
}

textarea.cibic-formulario__control {
	min-height: 120px;
	resize: vertical;
}

/* El desplegable, con la misma caja que los demas controles: sin esto el navegador lo
   dibuja con su alto propio y la fila queda desalineada del resto del formulario. */
select.cibic-formulario__control {
	height: 51px;
	padding-right: 32px;
	background-image: linear-gradient(45deg, transparent 50%, var(--cibic-texto) 50%), linear-gradient(135deg, var(--cibic-texto) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	appearance: none;
	cursor: pointer;
}

.cibic-formulario__control:focus {
	border-color: var(--cibic-marca);
	outline: 2px solid var(--cibic-marca);
	outline-offset: 1px;
}

/* El archivo no se dibuja como una caja de texto: es un boton y su leyenda. */
input[type="file"].cibic-formulario__control {
	padding: 13px 10px;
	background: var(--cibic-fondo-suave);
	cursor: pointer;
}

.cibic-formulario__ayuda {
	display: block;
	margin: 4px 0 0;
	color: var(--cibic-texto);
	font-size: 0.75rem;
}

.cibic-formulario__campo--con-error .cibic-formulario__control {
	border-color: #e2401c;
}

.cibic-formulario__error {
	display: block;
	margin: 4px 0 0;
	color: #e2401c;
	font-size: 0.8125rem;
}

.cibic-formulario__aviso {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 4px;
	font-size: 0.875rem;
}

.cibic-formulario__aviso--ok {
	border: 1px solid rgba(82, 202, 190, 0.5);
	background: rgba(82, 202, 190, 0.12);
	color: #16706a;
}

.cibic-formulario__aviso--error {
	border: 1px solid rgba(226, 64, 28, 0.4);
	background: rgba(226, 64, 28, 0.08);
	color: #a32d14;
}

.cibic-formulario .cibic-formulario__enviar {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 20px;
	border: 0;
	border-radius: 4px;
	background: #52cabe;
	color: #ffffff;
	font-family: var(--cibic-fuente-texto);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.cibic-formulario .cibic-formulario__enviar:hover,
.cibic-formulario .cibic-formulario__enviar:focus {
	background: #3fb3a7;
}

/*
	EL CAMPO TRAMPA. Se esconde SIN `display: none` y sin `visibility: hidden`: los dos
	los detecta un robot que lee el CSS, y entonces el campo deja de filtrar nada. Se lo
	saca del flujo y se lo deja fuera de la pantalla, que es lo que un programa que
	completa por nombre de campo no mira.
*/
.cibic-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
	EL BOTON DEL SELECTOR DE ARCHIVO. Produccion dibuja «+ SELECCIONAR UN ARCHIVO» con la
	forma de un boton; el control nativo dibuja «Choose File» con la del sistema operativo.
	`::file-selector-button` lo resuelve con CSS y sin una linea de JavaScript —que es como
	lo resuelve el CRM de produccion, cargando su propio guion— y sin perder el control
	nativo, que es el que ya sabe abrir el selector y anunciarse a un lector de pantalla.
*/
.cibic-formulario .cibic-formulario__control[type="file"]::file-selector-button {
	margin: 0 12px 0 0;
	padding: 9px 16px;
	border: 0;
	border-radius: 4px;
	background: var(--cibic-texto-fuerte);
	color: #ffffff;
	font-family: var(--cibic-fuente-texto);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
}

.cibic-formulario .cibic-formulario__control[type="file"]::file-selector-button:hover {
	background: #52cabe;
}

/* ==========================================================================
	D-5 y D-6 (T-C6) · ACCESOS LATERALES, BOTON DE CHAT Y TARJETAS DE «CIBIC INFO»
	Bloque propio: pisa por orden, sin tocar las reglas de arriba.

	MEDIDO EN PRODUCCION el 2026-09-15, con Chromium y solo GET sobre la portada,
	a 375, 768 y 1440 px (`getComputedStyle` y `getBoundingClientRect`):

	  accesos  fijos al borde derecho en los tres anchos, centrados en alto, 4 px
	           entre si. Pestaña de 82x53 (leyenda 10 px) desde 1025 px; 72x45
	           (leyenda 8 px) hasta 1024. Montserrat 400. La llamada a la accion NO
	           se ve: al pasar el puntero sale una solapa de 140 px a la izquierda,
	           del mismo color y alto, 14 px, radio 10px 0 0 10px. En reposo tiene
	           ancho 0, que es como la deja produccion: el texto sigue en la pagina.
	  chat     circulo de 60x60, #25d366, sombra 1px 6px 24px rgba(7,94,84,.24),
	           logo blanco al 60 % (36 px). Borde derecho / inferior del circulo
	           respecto de la ventana: 20/96 hasta 480 px, 34/110 hasta 769 px,
	           20/94 por encima. «Abrir chat» no se ve; queda como nombre accesible.
	  noticias imagen de 238 px de alto recortada, texto con 30 px de relleno,
	           20 px entre titulo, bajada y fecha, «ver mas» oculto. Puntos de 10 px
	           con borde de 2 px #999: el activo relleno, los demas al 50 %.
	           Contenedor de 300 px centrado a 375 px.
	========================================================================== */

.cibic-accesos {
	margin-top: 0;
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 900;
}

.cibic-accesos__lista {
	flex-direction: column;
	gap: 4px;
}

.cibic-acceso {
	align-items: center;
	border-radius: 0;
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	height: 53px;
	justify-content: center;
	line-height: 1;
	padding: 0 4px;
	position: relative;
	width: 82px;
}

/* El color de enlace al pasar el puntero (regla general `a:hover`) no aplica: produccion no cambia. */
.cibic-acceso:hover,
.cibic-acceso:focus {
	color: #ffffff;
}

.cibic-accesos__item:first-child .cibic-acceso {
	border-radius: 4px 0 0 0;
}

.cibic-accesos__item:last-child .cibic-acceso {
	border-radius: 0 0 0 4px;
}

.cibic-acceso__etiqueta {
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
}

/* La solapa: ancho 0 en reposo, 140 px con el puntero o el foco encima. */
.cibic-acceso__accion {
	align-items: center;
	background: inherit;
	border-radius: 10px 0 0 10px;
	box-sizing: border-box;
	display: flex;
	font-size: 14px;
	height: 100%;
	justify-content: center;
	line-height: 1.2;
	margin: 0;
	opacity: 1;
	overflow: hidden;
	padding: 0;
	position: absolute;
	right: 100%;
	text-align: center;
	top: 0;
	width: 0;
}

.cibic-acceso:hover .cibic-acceso__accion,
.cibic-acceso:focus-visible .cibic-acceso__accion {
	padding: 0 8px;
	width: 140px;
}

@media (max-width: 1024px) {
	.cibic-acceso {
		height: 45px;
		padding: 0 11px;
		width: 72px;
	}

	.cibic-acceso__etiqueta {
		font-size: 8px;
	}
}

.cibic-chat {
	bottom: 94px;
	position: fixed;
	right: 20px;
	z-index: 1000;
}

.cibic-chat__boton,
.cibic-chat__boton:hover,
.cibic-chat__boton:focus {
	background: #25d366;
	color: #fff;
}

.cibic-chat__boton {
	border-radius: 50%;
	box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
	display: flex;
	gap: 0;
	height: 60px;
	justify-content: center;
	min-height: 0;
	padding: 0;
	width: 60px;
}

.cibic-chat__icono {
	display: block;
	height: 36px;
	width: 36px;
}

/* Fuera de la vista pero en el documento, como en produccion. */
.cibic-chat__leyenda {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@media (max-width: 769px) {
	.cibic-chat {
		bottom: 110px;
		right: 34px;
	}
}

@media (max-width: 480px) {
	.cibic-chat {
		bottom: 96px;
		right: 20px;
	}
}

.cibic-noticia--en-carrusel .cibic-noticia__imagen {
	aspect-ratio: auto;
	display: block;
	height: 238px;
	margin-bottom: 0;
	overflow: hidden;
}

.cibic-noticia--en-carrusel .cibic-noticia__cuerpo {
	gap: 20px;
	padding: 30px;
}

.cibic-noticia--en-carrusel .cibic-noticia__titulo,
.cibic-noticia--en-carrusel .cibic-noticia__resumen {
	margin: 0;
}

.cibic-noticia--en-carrusel .cibic-noticia__titulo {
	line-height: 24px;
}

.cibic-noticia--en-carrusel .cibic-noticia__mas {
	display: none;
}

.carousel-slider-outer-post-carousel .swiper-pagination-bullet {
	background: transparent;
	border: 2px solid #999999;
	box-sizing: border-box;
	height: 10px;
	margin: 0 4px;
	opacity: 0.5;
	width: 10px;
}

.carousel-slider-outer-post-carousel .swiper-pagination-bullet-active {
	background: #999999;
	opacity: 1;
}

@media (max-width: 767px) {
	.carousel-slider-outer-post-carousel {
		margin-left: auto;
		margin-right: auto;
		max-width: 300px;
	}
}

/*
	LAS FLECHAS VAN AFUERA DE LAS TARJETAS. En produccion, a 1440 px, quedan 50 px por
	fuera del bloque (x = 90 y 1336 con el bloque entre 140 y 1300); a 768 y 375 caen
	fuera de la pantalla y no se ven. Aca: ocultas por debajo de 1200 px, y por encima
	sacadas del recorte hasta 40 px, que es el hueco entre tarjetas, asi la tarjeta
	vecina no asoma. Entre 769 y 1199 px produccion no se midio.
*/
@media (max-width: 1199px) {
	.carousel-slider-outer-post-carousel .swiper-button-prev,
	.carousel-slider-outer-post-carousel .swiper-button-next {
		display: none;
	}
}

@media (min-width: 1200px) {
	.carousel-slider-outer-post-carousel {
		clip-path: inset(-10px -40px);
		overflow: visible;
	}

	.carousel-slider-outer-post-carousel .swiper-button-prev {
		left: -36px;
	}

	.carousel-slider-outer-post-carousel .swiper-button-next {
		right: -36px;
	}
}
/* ---- fin del bloque D-5 y D-6 (T-C6) ---- */

/* ------------------------------------------------------------------
   PORTADA · LA FRANJA DE NOVEDADES EN MOVIMIENTO Y LA PRIMERA DIAPOSITIVA
   (observaciones 1 y 2 del cliente). Bloque propio: todo lo de estas dos
   correcciones esta aca, y solo aca.
------------------------------------------------------------------ */

/*
	LA FRANJA SE DESPLAZA. Medido en produccion (2026-09-15, Chromium, solo GET, a 375, 768
	y 1440 px): los avisos van hacia la izquierda a 80,5 px/s en los tres anchos, entran por
	el borde derecho, salen enteros por la izquierda y vuelven a entrar, sin fin; entre aviso
	y aviso hay 59 px; con el puntero encima la franja se detiene.

	La clase `--en-movimiento` la pone el guion franja-de-novedades.js, que tambien escribe
	las dos propiedades que dan la velocidad constante. Sin guion no hay clase, y la franja
	queda quieta y centrada, como estaba.
*/
.cibic-ticker-de-noticias--en-movimiento {
	overflow: hidden;
}

.cibic-ticker-de-noticias--en-movimiento ul {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0 59px;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 8px 0;
	white-space: nowrap;
	animation: cibic-franja-de-novedades var(--cibic-franja-duracion, 25s) linear infinite;
}

.cibic-ticker-de-noticias--en-movimiento li {
	flex: none;
}

/* Con el puntero encima se detiene, igual que produccion; con el foco adentro tambien. */
.cibic-ticker-de-noticias--en-movimiento:hover ul,
.cibic-ticker-de-noticias--en-movimiento:focus-within ul {
	animation-play-state: paused;
}

@keyframes cibic-franja-de-novedades {
	from {
		transform: translateX(var(--cibic-franja-desde, 100vw));
	}

	to {
		transform: translateX(-100%);
	}
}

/*
	UNICA DESVIACION DELIBERADA: quien pidio movimiento reducido ve la franja quieta y
	centrada. Produccion no respeta la preferencia; el resto de este tema si.
*/
@media (prefers-reduced-motion: reduce) {
	.cibic-ticker-de-noticias--en-movimiento ul {
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 40px;
		width: 100%;
		max-width: var(--cibic-ancho-maximo);
		margin: 0 auto;
		padding: 8px 20px;
		animation: none !important;
	}
}

/*
	EL TITULO DE LA DIAPOSITIVA. Medido en produccion en la primera diapositiva: Montserrat
	700, interlineado igual al tamaño, sin espaciado de letras, sin sombra y sin cortar la
	linea por ancho (el corte lo pone el `<br>` del contenido). Tamaño: 22 px a 375, 45 px a
	768 y 64 px a 1440; el carrusel de produccion lo escala con el ancho, 5,86 vw, hasta 64.

	EL TITULO SI CORTA POR ANCHO (CA-238). Estuvo en `nowrap`, copiando el valor computado de
	produccion, y a 375 y 768 «DOMINGOS EN PASEO DEL SIGLO» se salia de la caja y se veia
	cortado. En produccion ese `nowrap` no corta nada porque cada titulo largo trae su `<br>`
	y el carrusel mide la capa; aca el titulo es un bloque del ancho de la diapositiva, y un
	titulo que el cliente escriba sin `<br>` tiene que envolver antes que desaparecer. Con el
	`<br>` en el contenido (scripts/corregir-titulos-del-carrusel.php) las lineas quedan
	iguales a produccion; sin el, envuelve y no desborda.
*/
.cibic-carrusel-principal .carousel-slider-hero__cell .carousel-slider-hero__cell__heading {
	font-family: var(--cibic-fuente-especial);
	font-size: clamp(1rem, 5.86vw, 4rem);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1;
	text-shadow: none;
	text-transform: none;
	white-space: normal;
}

/*
	EL BOTON. Produccion sirve dos carruseles y cambia de uno a otro entre 769 y 800 px; el
	corte se pone en 770, que es el que ya usa este tema. Medido:
	  hasta 769  17 px, 700, #000 sobre blanco, relleno 12px 35px, espaciado 1px, alto 41;
	             43 px entre el titulo y el boton
	  desde 800  13 px, 700, #444 sobre blanco, relleno 12px 20px, sin espaciado, alto 37;
	             27 px entre el titulo y el boton
	Sin borde, sin radio y sin versalitas en los dos. El margen es el que falta para esas
	distancias: el complemento ya separa los botones del titulo (15 px a 375, 30 px desde
	768, medido).

	EL `.button` DEL SELECTOR NO SOBRA: la hoja del complemento se carga despues del tema y
	pinta el boton «contorno» con `.button.cs-hero-button.cs-hero-button-stroke`, fondo
	transparente. Con igual especificidad gana el que se carga ultimo; medido, el boton
	seguia transparente.
*/
.cibic-carrusel-principal .carousel-slider-hero__cell .button.cs-hero-button {
	margin-top: 28px;
	padding: 12px 35px;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	color: #000000;
	font-family: var(--cibic-fuente-especial);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 17px;
	text-transform: none;
	opacity: 1;
}

.cibic-carrusel-principal .carousel-slider-hero__cell .button.cs-hero-button:hover,
.cibic-carrusel-principal .carousel-slider-hero__cell .button.cs-hero-button:focus {
	background: #ffffff;
	color: #000000;
}

@media (max-width: 769px) {
	/*
		El relleno lateral de la diapositiva lo escribe el complemento en linea (3rem), y
		con eso la segunda linea del titulo no entra a 375 px. Produccion deja 12 px.
	*/
	.cibic-carrusel-principal .carousel-slider-hero__cell__inner {
		padding-right: 12px !important;
		padding-left: 12px !important;
	}
}

@media (min-width: 770px) {
	.cibic-carrusel-principal .carousel-slider-hero__cell .button.cs-hero-button {
		margin-top: 0;
		padding: 12px 20px;
		color: #444444;
		font-size: 13px;
		letter-spacing: normal;
		line-height: 13px;
	}
}