/* ========================================
   PÁGINAS INTERNAS DE ENFERMEDADES
   Extracted from style.css
   ======================================== */

/* ========================================
   HIB BANNER V2 - Diseño desde Figma
   ======================================== */
.hib-banner-v2 {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 64px;
	border-radius: 32px;
	width: 100%;
	min-height: 216px;
	overflow: hidden;
}

.hib-banner-background {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 32px;
}

.hib-banner-background::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #ff4e00;
	border-radius: 32px;
}

.hib-banner-overlay {
	position: absolute;
	inset: 0;
	opacity: 0.7;
	overflow: hidden;
	border-radius: 32px;
	background-image: url('/images/diseases/hib/banner-img.png');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}

.hib-banner-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #ff4e00, rgba(255, 78, 0, 0));
	border-radius: 32px;
}

.hib-banner-content {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
}

.hib-banner-title {
	font-family: 'Inter', sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	color: #FFF7EC;
	margin: 0;
	white-space: pre-wrap;
}

.hib-banner-title i {
	font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
	.hib-banner-v2 {
		padding: 24px 32px;
		min-height: 180px;
	}
	
	.hib-banner-title {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.hib-banner-v2 {
		padding: 20px 24px;
		min-height: 160px;
	}
	
	.hib-banner-title {
		font-size: 28px;
	}
}

/* ========================================
   COMPONENTES GENERALES DE PÁGINAS INTERNAS
   ======================================== */

/* Accordion Components */
.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cg clip-path='url(%23clip0_44_3426)'%3E%3Cpath d='M10.9997 5.5V16.67L6.11973 11.79C5.72973 11.4 5.08973 11.4 4.69973 11.79C4.30973 12.18 4.30973 12.81 4.69973 13.2L11.2897 19.79C11.6797 20.18 12.3097 20.18 12.6997 19.79L19.2897 13.2C19.6797 12.81 19.6797 12.18 19.2897 11.79C18.8997 11.4 18.2697 11.4 17.8797 11.79L12.9997 16.67V5.5C12.9997 4.95 12.5497 4.5 11.9997 4.5C11.4497 4.5 10.9997 4.95 10.9997 5.5Z' fill='%23FF4E00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_44_3426'%3E%3Crect width='24' height='24' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}

.accordion-button::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cg clip-path='url(%23clip0_44_3426)'%3E%3Cpath d='M10.9997 5.5V16.67L6.11973 11.79C5.72973 11.4 5.08973 11.4 4.69973 11.79C4.30973 12.18 4.30973 12.81 4.69973 13.2L11.2897 19.79C11.6797 20.18 12.3097 20.18 12.6997 19.79L19.2897 13.2C19.6797 12.81 19.6797 12.18 19.2897 11.79C18.8997 11.4 18.2697 11.4 17.8797 11.79L12.9997 16.67V5.5C12.9997 4.95 12.5497 4.5 11.9997 4.5C11.4497 4.5 10.9997 4.95 10.9997 5.5Z' fill='%23FF4E00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_44_3426'%3E%3Crect width='24' height='24' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}

.accordion-button.ignore-arrow::after {
    content: none !important; /* Elimina el pseudo-elemento */
    background-image: none !important; /* Asegura que no se cargue la flechita */
}

.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Content Container */
.content-container {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.4s ease;
}

.content-container.second-state {
	max-height: none !important;
	overflow: visible !important;
	height: auto !important;
	display: block !important; /* o flex si necesitás */
}
.ep-card-white h3.textcard1{
	font-size: 32px !important;
}

/* ========================================
   SECCIONES ESPECÍFICAS DE ENFERMEDADES
   ======================================== */

/* Tratamiento */
.tratamiento {
	padding-top: 70px;
}

.tratamiento1 {
	padding-top: 40px;
}

.containerTratamiento {
	padding-top: 30px;
}

.textcircle10 {
	padding-top: 40px;
}

/* Complicaciones */
.complicaciones {
	font-size: 18px;
}

/* Vacunación */
.vacunacion {
	margin-top: 10px;
}

/* ========================================
   ENFERMEDAD NEUMOCÓCICA
   ======================================== */

.neumococica .que-es {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
	align-self: stretch;
}

.neumococica .que-es .accordion,
.neumococica .que-es .accordion-item,
.neumococica .que-es .accordion-header,
.neumococica .que-es .accordion-body,
.neumococica .que-es .accordion-button {
	background-color: transparent !important;
	background: transparent !important;
}

.neumococica .que-es .accordion {
	border: transparent;
	border-radius: 0;
}

.neumococica .que-es .accordion-item:first-of-type {
	border-top: 1px solid var(--UI-GSK-Space-grey, #959595);
}

.neumococica .que-es .accordion-item {
	border-left: transparent;
	border-right: transparent;
	border-top: transparent;
	border-bottom: 1px solid var(--UI-GSK-Space-grey, #959595);
}

.neumococica .quien-esta {
	width: 100%;
}

.neumococica .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.neumococica .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

/* ¿Quién está en riesgo? neumocócica (Figma 11169:93538) */
.neumococica-riesgo-titulo.title-container {
	gap: 12px;
	
}

.neumococica-riesgo-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.neumococica .neumococica-riesgo-body .riesgo-neumococica.box-container {
	grid-gap: 20px;
}

.neumococica .neumococica-riesgo-body.quien-esta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	width: 100%;
}

.neumococica-riesgo-intro {
	color: #4b4b4b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.neumococica .quien-esta .box-container .element p {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* Cuales son */
.neumococica .content .cuales-son {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 36px;
	align-self: stretch;
}

.neumococica .content .cuales-son .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	align-self: stretch;
}

.neumococica .content .cuales-son .content .element {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	align-self: stretch;
}

.neumococica .content .cuales-son .content .element .circle-container p {
	text-align: center;
	width: 150px;
}

.neumococica .circle-container p {
	text-align: center;
	width: 150px;
}

.neumococica .content .cuales-son .has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Otitis iconos 3 círculos (Figma 11169:93563) */
.neumococica-otitis-iconos {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

.neumococica-sintoma-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	flex: 1 0 0;
	min-width: 149px;
	max-width: 260px;
}

.neumococica-sintoma-item p {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
	margin: 0;
}

/* Subtítulo sección (Otitis, Neumonía) - Bold 24px #151515 */
.neumococica-otitis-subtitulo,
.neumococica-neumonia-header .neumococica-otitis-subtitulo {
	font-family: 'Inter', sans-serif;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1.2;
	color: #151515;
	margin: 0;
}

/* Neumonía (Figma 11169:93574) */
.neumococica-neumonia-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.neumococica-neumonia-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.neumococica-neumonia-desc {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.neumococica-neumonia-iconos {
	display: flex;
	flex-wrap: wrap;
	gap: 45px;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

.neumococica-sintoma-item-wide {
	min-width: 172px;
}

.neumococica-neumonia-nota {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
	padding-left: 1.5rem;
	list-style: disc;
}

.neumococica-neumonia-nota li {
	margin-bottom: 0;
}

/* Meningitis neumocócica (Figma 11169:93587) */
.neumococica-meningitis-block {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.neumococica-meningitis-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.neumococica-meningitis-iconos {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.neumococica-meningitis-bebes-intro {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.neumococica-meningitis-bebes-iconos {
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

/* ¿Cómo se transmite? (Figma 11169:93606) */
.neumococica-transmite-titulo.title-container {
	gap: 12px;

}

.neumococica-transmite-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.neumococica-transmite-body.como-se-transmite {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
}

.neumococica-transmite-body.como-se-transmite p {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

/* ¿Cómo se puede tratar? (Figma 11169:93614) */
.neumococica-tratar-titulo.title-container {
	gap: 12px;
	margin-bottom: 48px;
}

.neumococica-tratar-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.neumococica-tratar-body {
	gap: 20px;
	width: 100%;
	align-items: center;
}

.neumococica-tratar-texto {
	flex: 1 0 0;
	min-width: 0;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.neumococica-tratar-imagen {
	width: 360px;
	height: 172px;
	border-radius: 8px;
	overflow: hidden;
}

.neumococica-tratar-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ¿Cómo se puede prevenir? (Figma 11169:93621) */
.neumococica-prevenir-titulo.title-container {
	gap: 12px;
	
}

.neumococica-prevenir-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.neumococica-prevenir-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.neumococica-prevenir-subtitulo {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.4;
	color: #4b4b4b;
	margin: 0;
}

.neumococica-prevenir-fila {
	gap: 20px;
}

.neumococica-prevenir-texto {
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

.neumococica-prevenir-manos {
	color: #3a3e56;
}

.neumococica-prevenir-dos-columnas {
	width: 100%;
}

.neumococica .content .como-se-transmite .has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Referencias neumocócica (Figma 11169:93663) - numeración 1, 2, 3... visible */
.neumococica-referencias .neumococica-referencias-list,
ol.neumococica-referencias-list {
	list-style-type: decimal !important;
	list-style-position: outside;
	margin-left: 0;
}

.neumococica-referencias-list {
	color: #4b4b4b;
	font-size: 14px;
	line-height: 1.5;
	padding-left: 21px;
}

.neumococica-referencias-list li {
	margin-bottom: 0;
}

.neumococica-referencias-list a {
	color: #4b4b4b;
	text-decoration: underline;
}

.neumococica .content .como-se-puede-prevenir {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 20px;
}

.neumococica .content .como-se-puede-prevenir .has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* Neumococica - Contenido acordeón Otitis (Figma 11169:93533) */
.neumococica .que-es .accordion-body.neumococica-accordion-body {
	padding: 24px 0 24px 0;
	font-family: Inter, 'Noto Sans', sans-serif;
}

.neumococica-accordion-body .text-container {
	margin-bottom: 24px;
}

.neumococica-accordion-body .text-container:last-child {
	margin-bottom: 0;
}

.neumococica-accordion-body .text-container .title {
	display: block;
	font-family: Inter, 'Noto Sans', sans-serif;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.4;
	margin: 0 0 8px 0 !important;
	color: #151515 !important;
}

.neumococica-accordion-body .text-container p {
	color: #4b4b4b;
	font-family: Inter, 'Noto Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 8px 0;
}

.neumococica-accordion-body .text-container p:last-of-type {
	margin-bottom: 0;
}

.neumococica-accordion-list {
	margin: 8px 0 0 1.2em;
	padding-left: 0;
	list-style-type: disc;
	color: #4b4b4b;
	font-family: Inter, 'Noto Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
}

.neumococica-accordion-list li {
	margin-bottom: 4px;
}

/* ========================================
   ESTILOS MOBILE PARA ACCORDION DE ENFERMEDADES INTERNAS
   ======================================== */

/* Accordion de enfermedades internas en mobile */
@media (max-width: 900px) {
	/* Asegurar que los estilos se apliquen dentro de la clase interna-enfer */
	.interna-enfer .disease-accordion .accordion-button,
	.disease-accordion .accordion-button {
		font-size: 18px !important;
		font-weight: bold !important;
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		padding: 12px 0 !important;
		color: #151515 !important;
		text-align: left !important;
		box-shadow: none !important;
		position: relative !important;
	}
	
	.disease-accordion .accordion-button:focus {
		box-shadow: none !important;
		border: none !important;
		outline: none !important;
	}
	
	.disease-accordion .accordion-button:not(.collapsed) {
		background-color: transparent !important;
		color: #151515 !important;
		box-shadow: none !important;
	}
	
	.disease-accordion .accordion-item {
		background-color: transparent !important;
		border: none !important;
		margin-bottom: 24px !important;
	}

	.disease-accordion .accordion-body {
		background-color: transparent !important;
		padding: 16px 0 20px 0 !important;
	}
	
	/* Eliminar fondo blanco de los títulos */
	.disease-accordion .accordion-button::before {
		display: none !important;
	}
	
	.disease-accordion .accordion-button::after {
		background-image: url("/images/icons/expand_more.svg") !important;
		background-size: 32px 32px !important;
		width: 32px !important;
		height: 32px !important;
		transform: rotate(0deg) !important;
		transition: transform 0.3s ease !important;
	}
	
	.disease-accordion .accordion-button:not(.collapsed)::after {
		transform: rotate(180deg) !important;
	}

	.disease-accordion .accordion-item:has(.accordion-collapse.show) .accordion-button::after {
		transform: rotate(180deg) !important;
	}
	
	/* Eliminar cualquier pseudo-elemento que pueda crear fondo blanco */
	.disease-accordion .accordion-button::before {
		content: none !important;
		display: none !important;
		background: none !important;
	}
	
	/* Asegurar que no hay fondo en el header del accordion */
	.disease-accordion .accordion-header {
		background-color: transparent !important;
		background: transparent !important;
	}
	
	/* Eliminar cualquier estilo de Bootstrap que pueda interferir */
	.disease-accordion .accordion-button:not(.collapsed) {
		background-color: transparent !important;
		background: transparent !important;
		color: #151515 !important;
		box-shadow: none !important;
	}
	
	/* Asegurar que el accordion item no tenga fondo */
	.disease-accordion .accordion-item {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		margin-bottom: 24px !important;
	}

	/* Líneas de separación entre elementos del accordion */
	.disease-accordion .accordion-item {
		border-top: 1px solid #959595 !important;
		border-bottom: none !important;
		border-left: none !important;
		border-right: none !important;
	}

	.disease-accordion .accordion-item:last-child {
		margin-bottom: 0 !important;
	}
}

.banner-inmunizacion {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: #FF4E00;
	border-radius: 8px;
	padding: 16px 39px;
	color: #FFF7EC;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.banner-inmunizacion img {
	width: auto;
	height: 66px;
}

.banner-inmunizacion p {
	color: #FFF7EC;
}

/* ========================================
   ESTILOS RESPONSIVE PARA AVISO LEGAL
   ======================================== */

/* ========================================
   TÍTULOS ESPECÍFICOS PARA PÁGINAS INTERNAS
   ======================================== */

/* Para páginas internas de enfermedades (32px) */


/* ========================================
   HIB (Haemophilus influenzae tipo b)
   ======================================== */

.hib .content .box-container {
	grid-template-columns: repeat(2, 1fr) !important;
}

.hib .quien-esta .text-container ul {
	padding-left: 0;
}

.hib .quien-esta .text-container li.has-dot {
	padding-left: 0;
}

.hib .quien-esta .text-container .has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.hib .como-se-transmite-list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hib .como-se-transmite-list li.has-dot {
	padding-left: 30px;
	position: relative;
	margin-bottom: 0;
}

.hib .como-se-transmite-list li.has-dot::before {
	content: "•";
	color: #000;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 20px;
	line-height: 1.2;
}

/* ========================================
   ROTAVIRUS
   ======================================== */

/* Banner de rotavirus según diseño Figma */
.rotavirus-banner-figma {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 216px;
}

.rotavirus-banner-title {
	font-family: 'Inter', sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.2;
	color: #FFF7EC;
	margin: 0;
	white-space: pre-wrap;
}

@media (max-width: 768px) {
	.rotavirus-banner-figma {
		padding: 24px 32px !important;
		min-height: 180px;
	}
	
	.rotavirus-banner-title {
		font-size: 32px;
	}
}

@media (max-width: 480px) {
	.rotavirus-banner-figma {
		padding: 20px 24px !important;
		min-height: 160px;
	}
	
	.rotavirus-banner-title {
		font-size: 28px;
	}
}

/* Separación de iconos de síntomas según diseño Figma */
.rotavirus-sintomas-icons {
	gap: 89px;
}

@media (max-width: 768px) {
	.rotavirus-sintomas-icons {
		gap: 24px;
	}
}

/* Reducir espaciado entre elementos has-dot en rotavirus */
.rotavirus .como-se-transmite .has-dot {
	margin-bottom: 0;
}

.rotavirus .como-se-transmite .has-dot + .has-dot {
	margin-top: 0;
}

.rotavirus .quien-esta {
	width: 100%;
}

.rotavirus .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.rotavirus .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

/* ========================================
   HEPATITIS B
   ======================================== */

.hepatitis-b .people-banner {
	max-width: 100% !important;
	width: 100%;
	margin: 24px 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background: #FFD6A5;
	border-radius: 8px;
	padding: 16px 39px;
	gap: 22px;
}

.hepatitis-b .quien-esta {
	width: 100%;
}

/* ========================================
   MENINGOCOCO - ESTILOS ESPECÍFICOS
   Movidos desde style.css
   ======================================== */

.meningococo [name="que-es-child"] {
	flex-direction: column;
	display: flex;
	gap: 32px;
}

/* Banner callout: icono al lado del texto (override mobile flex-direction: column) */
.meningococo .people-banner,
.people-banner-inline {
	flex-direction: row !important;
	display: flex !important;
	gap: 22px;
	padding: 16px 39px;
	border-radius: 8px;
	max-width: 645px;
	margin: 0 auto;
}

/* Tablet intermedio (901–991px): imagen y banner mismo ancho para armonía visual */
@media screen and (min-width: 901px) and (max-width: 991px) {
	.meningococo .banner-background {
		width: 100%;
	}
	.meningococo .people-banner {
		width: 100%;
		max-width: none;
		margin: 0 !important;
	}
}

.meningococo .quien-esta {
	width: 100%;
}

.meningococo .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.meningococo .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

.meningococo .content .cuales-son {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 36px;
	align-self: stretch;
}

.meningococo .content .cuales-son .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	align-self: stretch;
}

.meningococo .content .cuales-son .content .element {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;
	align-self: stretch;
}

.meningococo .content .cuales-son .content .element .circle-container p {
	width: 150px;
}

.meningococo .content .tiene-secuelas {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	align-self: stretch;
}

.meningococo .content .tiene-secuelas .has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.meningococo .como-se-puede-prevenir {
	width: 100%;
}

.meningococo .como-se-puede-prevenir .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.meningococo .como-se-puede-prevenir .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

/* Content */
.hidden {
	display: none;
}

/* ========================================
   MENINGOCOCO - RESPONSIVE
   Movidos desde style.css
   ======================================== */

@media screen and (max-width: 1200px) {
	.meningococo .content .box-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 996px) {
	.breadcrumb {
		padding-top: 50px;
	}

	.meningococo .container.title-container {
		margin-top: 32px;
	}

	.meningococo .content .box-container {
		grid-template-columns: repeat(1, 1fr);
	}

	.meningococo .otras {
		margin-top: 32px;
		margin-bottom: 0;
		padding-bottom: 32px;
		padding-top: 32px;
	}

	.meningococo .otras .container {
		flex-direction: column;
		row-gap: 20px;
	}

	.meningococo .otras .button-container .box {
		flex: auto;
	}
}

/* ========================================
   TÉTANOS - ESTILOS ESPECÍFICOS
   Movidos desde style.css
   ======================================== */

.circleTetanos {
	padding-top: 20px;
}

.circle9 {
	padding-top: 30px;
}

.textcircle {
	padding-top: 30px;
}

.btntextvacunas {
	white-space: nowrap;
}

.texto-container {
	text-align: justify;
	line-height: 1.5;
	/* Ajustar el espaciado entre líneas */
}

/* Estilos para el contenedor flex que contiene el texto y la imagen */
.content-flex {
	display: flex;
	align-items: flex-start;
	/* Alinea los elementos al inicio verticalmente */
	justify-content: flex-start;
	/* Alinea los elementos al inicio horizontalmente */
}

.text-container {
	flex: 1;
	/* Permite que el contenedor de texto ocupe todo el espacio disponible */
	padding-right: 20px;
	/* Añade espacio a la derecha del texto para evitar que toque la imagen */
}

.image-container {
	flex-shrink: 0;
	/* Evita que la imagen se encoja más allá de su tamaño de contenido */
	width: 40%;
	/* Establece un ancho fijo para la imagen */
	margin-left: 20px;
	/* Añade un margen izquierdo para separar la imagen del texto */
}

.tratamiento {
	padding-top: 70px;
}

.tratamiento1 {
	padding-top: 40px;
}

.containerTratamiento {
	padding-top: 30px;
}

.textcircle10 {
	padding-top: 40px;
}

.rectangle1 {
	width: 600px;
	/* Ancho reducido */
	height: 50px;
	/* Altura reducida */
	padding: 10px 20px;
	background-color: #ffd6a5;
	text-align: center;
	line-height: 100px;
	/* Esto centra verticalmente el texto */
	margin-left: 90px;
	border-radius: 5px;
}

.rectangle10 {
	width: 600px; /* Ancho del rectángulo */
	height: 50px; /* Altura del rectángulo */
	padding: 10px 20px; /* Espaciado interno */
	background-color: #ffd6a5; /* Color de fondo */
	text-align: center; /* Alineación del texto */
	line-height: 50px; /* Alineación vertical del texto */
	margin-left: 175px; /* Margen izquierdo */
	margin-top: 20px; /* Margen superior para desplazar hacia abajo */
	border-radius: 5px; /* Bordes redondeados */
}

.transmicion {
	padding-top: 50px;
}

.rectangle1 p {
	margin: 0;
	/* Elimina el margen predeterminado del párrafo */
	color: #000;
	/* Color del texto */
}

/* ========================================
   HERPES - ESTILOS ESPECÍFICOS
   Movidos desde style.css
   ======================================== */

.text-justify {
	text-align: justify;
	/* Alineación justificada para pantallas más grandes */
}

.element98 {
	display: flex;
	flex-direction: row;
	/* Horizontal al lado del texto */
	align-items: center;
	/* Alinea verticalmente el círculo y el texto */
}

.orange-background {
	background-color: #ffd6a5;
	display: flex;
	align-items: center;
	padding: 10px 50px;
}



.tittlelef {
	text-align: center;
	margin-right: 400px;
}

.circlel {
	margin-right: 300px;
	padding: 1em;
}

.image-text-container {
	display: flex;
	align-items: center;
	gap: 20px;
	/* Espacio entre la imagen y el texto, ajusta según sea necesario */
}

.image-text-container img {
	max-width: 400px;
	/* Ajusta el tamaño máximo de la imagen según sea necesario */
}

.title-pequ {
	font-size: 8px;
	padding-top: 1rem;
}

.complicaciones {
	font-size: 18px;
}

.btnorange {
	padding-top: 1rem;
}

.image-herpes {
	margin-top: 1rem;
	/* Ajusta el valor según sea necesario */
}

.como-se-trata {
	margin-top: 24px;
	/* Espacio entre este contenido y el contenido anterior */
}

.como-se-trata img {
	height: auto;
	/* La altura se ajustará automáticamente para mantener la proporción */
}

.circle-btn {
	margin-right: 120px;
	/* Ajusta el margen derecho según sea necesario */
	margin-left: auto;
	/* Centra el div horizontalmente */
}

.element1 {
	margin-left: 20px;
}

.dolor {
	padding-top: 1rem;
}

.title-centr {
	text-align: center;
	padding-top: 20px;
}

.title-dolor {
	color: #ff4e00 !important;
}

.text-container {
	margin-left: 10px;
	/* Ajusta el espacio entre la imagen y el texto según sea necesario */
}

.before-text-image {
	width: 50px;
	/* Ajusta el ancho de la imagen según sea necesario */
	height: auto;
	/* Mantiene la proporción de la imagen */
	margin-right: 10px;
	/* Ajusta el margen derecho según sea necesario */
}

/* ========================================
   SARAMPIÓN - ESTILOS ESPECÍFICOS
   Movidos desde style.css
   ======================================== */

.textocircle {
	margin-left: 10px;
}

.element10 {
	margin-left: 160px;
}

.puntos-negros {
	list-style-type: none;
	/* Elimina el marcador predeterminado de la lista */
}

.puntos-negros li::before {
	content: "•";
	/* Agrega un punto negro como marcador */
	margin-right: 8px;
	/* Espacio entre el punto y el texto */
}

/* Estilos para los círculos */

/* Estilos para los elementos */

/* Estilos para las columnas */
.columna-primeros-tres,
.columna-ultimos-dos {
	flex: 1;
}

.element3 {
	margin-bottom: 20px;
}

/* ========================================
   TÉTANOS - ESTILOS ADICIONALES
   Movidos desde style.css
   ======================================== */

.circleTetanos {
	padding-top: 20px;
}

.textcircle {
	padding-top: 30px;
}

.texto-container {
	text-align: justify;
	line-height: 1.5;
	/* Ajustar el espaciado entre líneas */
}

.textratamiento {
	padding-top: 30px;
}

.tratamiento {
	padding-top: 70px;
}

.tratamiento1 {
	padding-top: 40px;
}

.containerTratamiento {
	padding-top: 30px;
}

.textcircle10 {
	padding-top: 40px;
}

.rectangle1 {
	width: 600px;
	/* Ancho reducido */
	height: 50px;
	/* Altura reducida */
	padding: 10px 20px;
	background-color: #ffd6a5;
	text-align: center;
	line-height: 100px;
	/* Esto centra verticalmente el texto */
	margin-left: 90px;
}

.transmicion {
	padding-top: 50px;
}

/* Estilos para el texto dentro del rectángulo */
.rectangle1 p {
	margin: 0;
	/* Elimina el margen predeterminado del párrafo */
	color: #000;
	/* Color del texto */
}

/* ========================================
   HERPES - ESTILOS ADICIONALES
   Movidos desde style.css
   ======================================== */

.orange-background {
	background-color: #ffd6a5;
	display: flex;
	align-items: center;
	padding: 10px 50px;
}



.tittlelef {
	text-align: center;
	margin-right: 400px;
}

.circlel {
	margin-right: 300px;
	padding: 1em;
}

.image-text-container {
	display: flex;
	align-items: center;
	gap: 20px;
	/* Espacio entre la imagen y el texto, ajusta según sea necesario */
}

.image-text-container img {
	max-width: 400px;
	/* Ajusta el tamaño máximo de la imagen según sea necesario */
}

.title-pequ {
	font-size: 8px;
	padding-top: 1rem;
}

.complicaciones {
	font-size: 18px;
}

.btnorange {
	padding-top: 1rem;
}

.image-herpes {
	margin-top: 1rem;
	/* Ajusta el valor según sea necesario */
}

.como-se-trata {
	margin-top: 24px;
	/* Espacio entre este contenido y el contenido anterior */
}

.como-se-trata img {
	height: auto;
	/* La altura se ajustará automáticamente para mantener la proporción */
}

.circle-btn {
	margin-right: 120px;
	/* Ajusta el margen derecho según sea necesario */
	margin-left: auto;
	/* Centra el div horizontalmente */
}

.element1 {
	margin-left: 20px;
}

.dolor {
	padding-top: 1rem;
}

.title-centr {
	text-align: center;
	padding-top: 20px;
}

.title-dolor {
	color: orange;
}

.text-container {
	margin-left: 10px;
	/* Ajusta el espacio entre la imagen y el texto según sea necesario */
}

.before-text-image {
	width: 50px;
	/* Ajusta el ancho de la imagen según sea necesario */
	height: auto;
	/* Mantiene la proporción de la imagen */
	margin-right: 10px;
	/* Ajusta el margen derecho según sea necesario */
}

.hepatitis-b .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.hepatitis-b .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

.hepatitis-b .cuales-son .content .element .circle-container {
	width: 150px;
}

.hepatitis-b .cuales-son .content .element .circle-container p {
	text-align: center;
}

/* ========================================
   HEPATITIS A
   ======================================== */

.hepatitis-a .quien-esta {
	width: 100%;
}

.hepatitis-a .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.hepatitis-a .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

.hepatitis-a .cuales-son .content .element .circle-container {
	width: 150px;
}

.hepatitis-a .cuales-son .content .element .circle-container p {
	text-align: center;
}

/* ========================================
   TOS FERINA
   ======================================== */

.tosferina .quien-esta {
	width: 100%;
}

.tosferina .quien-esta .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.tosferina .quien-esta .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}

/* ========================================
   POLIOMIELITIS
   ======================================== */

.poliomielitis .quien-esta {
	width: 100%;
}

.poliomielitis .quien-esta .element .circle-container {
	width: 33%;
}

.poliomielitis .quien-esta .element .circle-container p {
	text-align: center;
}

.poliomielitis .cuales-son {
	width: 100%;
}

.poliomielitis .cuales-son .element {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: center;
	width: 100%;
}

.poliomielitis .cuales-son .element .circle-container p {
	text-align: center;
}

.poliomielitis-text-spacing {
	padding-top: 1em;
}

/* ========================================
   VARICELA
   ======================================== */

.varicela .como-se-puede-prevenir .box-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* Crea cuatro columnas */
	grid-gap: 15px;
	/* Espacio entre las cajas */
	align-items: stretch;
	/* Estira los items para que todos tengan la misma altura */
	justify-items: start;
	/* Centra los elementos horizontalmente */
	width: 100%;
}

.varicela .como-se-puede-prevenir .box-container .element {
	display: flex;
	width: 100%;
	max-width: 407px;
	align-items: center;
	gap: 20px;
}
.textva1{
	margin-top: 24px;
}
/* ========================================
   INFLUENZA
   ======================================== */

.influenza .cuales-son .content .sintomas .elements-container {
	justify-content: space-between;
}

.influenza .cuales-son .content .sintomas .circle-container {
	min-width: 149px;
}

.influenza .cuales-son .content .box-container {
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
}

.influenza .cuales-son .content .box-container .element {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* ========================================
   SARAMPIÓN
   ======================================== */

.textocircle {
	margin-left: 10px;
}

/* ========================================
   TÉTANOS
   ======================================== */

.circleTetanos {
	padding-top: 20px;
}

/* ========================================
   PAPERAS
   ======================================== */

.texth {
	padding-top: 20px;
}

.circlecolumn {
	margin-left: 250px;
}

/* ========================================
   RUBÉOLA
   ======================================== */

.textcual p {
	text-align: left;
	/* Asegura que el texto esté alineado a la izquierda */
}

.circle-R {
	margin-left: 160px !important;
}

.rubeola-ganglios-margin {
	margin-top: 3em;
}

.rubeola-symptoms-gap {
	gap: 4rem;
}

/* ========================================
   HERPES ZÓSTER
   ======================================== */

.text-justify {
	text-align: justify;
	/* Alineación justificada para pantallas más grandes */
}

.orange-background {
	background-color: #ffd6a5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 20px;
	border-radius: 16px;
}

.image-herpes {
	margin-top: 1rem;
	/* Ajusta el valor según sea necesario */
}

.btnorange {
	padding-top: 1rem;
}

/* ========================================
   COMPONENTES DE VACUNACIÓN
   ======================================== */

.vacunacion-wrapper {
	padding: 2em 1em;
}

.contenedor-vacunas {
	display: flex;
	flex-direction: row;
	gap: 1em;
	height: 80vh;
}

/* ========================================
   COMPONENTES DE PÁGINA
   ======================================== */

.page-button {
	border: 1px solid #ddd;
	background-color: #fff;
	padding: 10px 15px;
	cursor: pointer;
	border-radius: 20px;
}

.page-button.active {
	background-color: var(--orange-color);
	color: #fff;
	font-weight: bold;
}

/* ========================================
   TIPOGRAFÍA Y TEXTOS
   ======================================== */

.textosbanner {
	font-size: 40px !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 900 !important;
}

/* Estilos para textos de inicio - eliminado ruleset vacío */

.diseases .content-container .content p.subtitle {
	color: var(--UX-ux-03, #3a3e56) !important;
	font-size: 24px !important;
	font-style: normal;
	font-weight: 700;
	line-height: 27.5px;
	/* 114.583% */
}

/* ========================================
   UTILIDADES
   ======================================== */

.has-dot::before {
	content: "•";
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

/* ========================================
   RESPONSIVE DESIGN PARA PÁGINAS INTERNAS
   ======================================== */

/* Mobile adjustments for disease detail pages */
@media (max-width: 768px) {
	.neumococica .quien-esta .box-container,
	.rotavirus .quien-esta .box-container,
	.hepatitis-b .quien-esta .box-container,
	.hepatitis-a .quien-esta .box-container,
	.tosferina .quien-esta .box-container {
		grid-template-columns: 1fr;
		grid-gap: 10px;
	}
	
	.poliomielitis .cuales-son .element {
		grid-template-columns: 1fr;
	}
	
	.influenza .cuales-son .content .box-container {
		grid-template-columns: 1fr;
	}
	
	.varicela .como-se-puede-prevenir .box-container {
		grid-template-columns: 1fr;
	}
	
	.circlecolumn {
		margin-left: 0;
	}
	
	.circle-R {
		margin-left: 0 !important;
	}
}
body.enfermedades-prevenibles .thumb-disease {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 247px;
    align-items: center;
    justify-content: flex-start;
    padding: 16px;
    height: 266px;
    margin: 0px auto;
    position: relative;
}

/* Orange Circle Start */

.orange-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 93px;
	height: 93px;
	background-color: var(--cat-color-orange);
	border-radius: 1000px;
}

.orange-circle p {
	color: var(--UI-GSK-White, #fff) !important;
	text-align: center !important;
	font-size: 36px !important;
	font-style: normal;
	font-weight: 700;
	line-height: 27.5px;
	/* 76.389% */
}

/* Orange Circle End */

/* Estilos específicos para pantallas de 1024px */
@media screen and (max-width: 1350px) and (min-width: 769px) {
	body.enfermedades-prevenibles .thumb-disease {
		width: 91%;
	}
	
	.grid-container {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 10px;
	}
	.grid-container2{
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.ep-double-box {
		width: 454px;
	}
	
	.ep-card-white {
		width: 460px;
	}
	
	.wrap-box-white {
		flex-direction: row !important;
	}
	
	body.enfermedades-prevenibles .thumb-disease img[alt] {
		object-fit: cover;
		width: 260px;
		height: 77px;
		border-radius: 24px;
	}
	
	/* Ajustes para las cajas de vacunación en 1024px */
	.ep-card-white h3.textcard1 {
		font-size: 24px !important;
	}
	
	.section-vacunacion .textcard45 {
		font-size: 24px !important;
	}
	
	.section-vacunacion .d-flex.flex-lg-row > div {
		width: 440px !important;
	}
	
	.section-vacunacion .card-vacunacion {
		width: 471px !important;
		min-height: 280px !important;
		padding: 24px !important;
		margin-left: -16px !important;
	}
	
	.section-vacunacion .card-personalizada {
		width: 477px !important;
		min-height: 280px !important;
		padding: 24px !important;
	}
	
	.section-vacunacion .fs-18 {
		font-size: 14px !important;
	}
	
	.section-vacunacion .textbtn {
		font-size: 12px !important;
		padding: 10px 20px !important;
	}
	
	.blog-full-bg {
		position: relative;
		left: 29%;
		right: 50%;
	}
	
	.section-descarga-index1 {
		width: 100vw;
		position: relative;
		left: 36%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
		background-image: url(/images/fondos/Frame\ 164218.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		margin-top: -45px;
		margin-bottom: 48px;
	}
	
	.referencias {
		display: flex;
		margin-top: 20px;
		padding: 0px 35px;
		flex-direction: column;
		align-items: flex-start;
		align-self: stretch;
		margin-bottom: 2em;
	}
}

/* COVID-19 - Fila 3 de signos y síntomas */
.covid-sintomas-fila3 {
	gap: 8rem;
}

/* COVID-19 - Lista con viñetas en ¿Cómo se puede prevenir? */
.covid-prevenir-lista {
	list-style-type: disc;
	padding-left: 1.5rem;
}

/* COVID-19 - Sección ¿Cómo se puede tratar? según Figma 11369:47888 */
.covid-tratar-wrapper {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
}

.covid-tratar-titulo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.covid-tratar-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.covid-tratar-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.covid-tratar-contenido {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.covid-tratar-fila {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.covid-tratar-imagen-wrap {
	flex: 1 0 0;
	min-width: 0;
	max-width: 360px;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.covid-tratar-imagen {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center 30%;
}

.covid-tratar-texto {
	flex: 1 0 0;
	min-width: 0;
}

.covid-tratar-texto p,
.covid-tratar-fullwidth p {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.covid-tratar-spacer {
	line-height: 1.5;
}

.covid-tratar-fullwidth {
	width: 100%;
}

/* Responsive: apilar en móvil */
@media screen and (max-width: 991px) {
	.covid-tratar-fila {
		flex-direction: column;
	}
}

/* Tuberculosis - ¿Cómo se puede tratar? según Figma 11384:48979 */
.tuberculosis-tratar-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.tuberculosis-tratar-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.tuberculosis-tratar-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.tuberculosis-tratar-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.tuberculosis-tratar-content p,
.tuberculosis-tratar-list li {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.tuberculosis-tratar-list ul {
	list-style-type: disc;
	padding-left: 1.2em;
	margin-top: 0;
}

.tuberculosis-tratar-list ul:not(:first-child) {
	margin-top: 16px;
}

.tuberculosis-tratar-list li {
	margin-bottom: 0;
}

/* Banner morado - Espaciado según Figma */

/* Cards de descarga - Más espacio arriba */
.section-descarga-index1.descarga-section {
	padding-top: 48px;
}

.section-descarga-index1 .textdescarga {
	color: #4b4b4b;
}

.section-descarga-index1 .descarga-titulo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 32px !important;
}

.section-descarga-index1 .text-descarga1,
.section-descarga-index1 .textdescarga {
	display: block;
}

.section-descarga-index1 #descarga-cards {
	display: flex !important;
	flex-direction: row;
	gap: 20px;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	max-width: 1120px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
}

.section-descarga-index1 .descarga-card-col {
	padding: 0 !important;
	margin-bottom: 0 !important;
}

@media (min-width: 901px) {
	.section-descarga-index1 .descarga-card-col {
		width: 265px !important;
		flex: 0 0 265px !important;
	}
}

.descarga-meningitis .descarga-icon img {
	padding-top: 165px;
}

.section-descarga-index1 .descarga-card-link,
.section-descarga-index1 .link-descargar {
	position: relative;
	align-self: flex-start;
}

.section-descarga-index1 .descarga-card-link::after,
.section-descarga-index1 .link-descargar::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: #FF4E00;
	transform: translateX(-50%) scaleX(0);
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	.section-descarga-index1 .descarga-card-link:hover,
	.section-descarga-index1 .link-descargar:hover {
		color: #FF4E00;
		text-decoration: none;
	}

	.section-descarga-index1 .descarga-card-link:hover::after,
	.section-descarga-index1 .link-descargar:hover::after {
		transform: translateX(-50%) scaleX(1);
	}
}


.section-descarga-index1 {
	left: 275px;
	margin-top: -48px;
}

@media (max-width: 1119px) {
	.section-descarga-index1 {
		left: calc(50vw - 285px);
	}
}

/* Fiebre amarilla - Etapas según Figma 11374:49525 */
.fiebre-amarilla-etapas {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fiebre-amarilla-etapa {
	gap: 20px;
}

.fiebre-amarilla-etapa-texto {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.fiebre-amarilla-icon {
	width: 108px;
	height: 108px;
}

.fiebre-amarilla-icon img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

@media screen and (max-width: 768px) {
	.fiebre-amarilla-etapa {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* Fiebre amarilla - ¿Cómo se transmite? según Figma 11374:49535 */
.fiebre-amarilla-transmite {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.fiebre-amarilla-transmite-intro,
.fiebre-amarilla-transmite-cierre,
.fiebre-amarilla-transmite-ul {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.fiebre-amarilla-transmite-fila {
	gap: 32px;
}

.fiebre-amarilla-transmite-imagen {
	width: 264px;
	min-width: 264px;
	border-radius: 8px;
	overflow: hidden;
}

.fiebre-amarilla-transmite-imagen img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

.fiebre-amarilla-transmite-ul {
	list-style-type: disc;
	padding-left: 1.5rem;
}

@media screen and (max-width: 767px) {
	.fiebre-amarilla-transmite-imagen {
		width: 100%;
		min-width: 0;
	}
}

/* Fiebre amarilla - ¿Cómo se puede prevenir? según Figma 11374:49548 */
.fiebre-amarilla-prevenir {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.fiebre-amarilla-prevenir-item {
	gap: 20px;
}

.fiebre-amarilla-prevenir-icon {
	width: 64px;
	height: 64px;
}

.fiebre-amarilla-prevenir-icon img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

@media screen and (min-width: 901px) {
	.fiebre-amarilla-prevenir-icon {
		width: 108px;
		height: 108px;
	}
	.fiebre-amarilla-prevenir-icon img {
		width: 60px;
		height: 60px;
	}
}

.fiebre-amarilla-prevenir-texto {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

@media screen and (max-width: 900px) {
	.fiebre-amarilla-prevenir-item {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

/* Fiebre amarilla - ¿Cómo se puede tratar? según Figma 11374:49569 */
.fiebre-amarilla-tratar {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fa-tratar-desktop {
	display: none;
	flex-direction: column;
	gap: 24px;
}

.fa-tratar-mobile {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

@media screen and (min-width: 901px) {
	.fa-tratar-desktop {
		display: flex;
	}
	.fa-tratar-mobile {
		display: none;
	}
}

.fiebre-amarilla-tratar ul {
	list-style-type: disc;
	padding-left: 1.2em;
}

.fiebre-amarilla-tratar-texto {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* COVID-19 - Banner naranja de vacunación (estilos desde style.css) */
.banner-inmunization {
	display: flex;
	padding: 16px 81px;
	justify-content: center;
	align-items: center;
	gap: 22px;
	align-self: stretch;
	border-radius: 8px;
	background: var(--UI-GSK-Orange-02, #ff4e00);
}

.banner-inmunization p,
.banner-inmunization p strong,
.banner-inmunization p sup {
	color: #ffffff;
}

.textbannercovid,
.textbannercovid * {
	color: #ffffff !important;
}

.banner-inmunization p {
	font-family: Inter;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 150%;
}

/* Dengue - ¿Qué es? (Figma 11384:46075) */
.que-es-dengue-figma sup {
	font-size: 10.32px;
	font-weight: 400;
	line-height: 1.5;
}

/* Dengue - ¿Quién está en riesgo? (Figma 11384:46084) */
.quien-riesgo-dengue sup {
	font-size: 10.32px;
	font-weight: 400;
	line-height: 1.5;
}

/* Dengue - ¿Cuáles son sus signos y síntomas? (Figma 11384:46095) */
.sintomas-dengue-figma sup {
	font-size: 10.32px;
	font-weight: 400;
	line-height: 1.5;
}

/* ========================================
   DENGUE - Clases para evitar estilos inline
   ======================================== */

/* Contenedor principal del contenido dengue */
.content.dengue-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* Títulos de sección dengue (¿Qué es?, ¿Quién está?, etc.) */
.dengue-titulo-seccion.title-container {
	gap: 12px;
}

.dengue-titulo-seccion.title-container h3 {
	color: #151515;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.dengue-titulo-seccion .bottom-line {
	width: 150px;
	height: 2px;
	background: #FF4E00;
}

/* VPH - ¿Qué es el VPH? según Figma 11384:50274 */
.vph-que-es-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.vph-que-es-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.vph-que-es-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

/* VPH - ¿Qué es el VPH? contenido según Figma 11384:50273 */
.vph-que-es-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
}

.vph-que-es-body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
	width: 100%;
}

.vph-que-es-row {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
}

.vph-que-es-img-wrap {
	width: 360px;
	height: 220px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}

.vph-que-es-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vph-que-es-intro {
	flex: 1 0 0;
	min-width: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.vph-que-es-list {
	list-style-type: disc;
	padding-left: 1.2em;
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-que-es-list li {
	margin-bottom: 0;
}

.vph-que-es-list li:not(:last-child) {
	margin-bottom: 0.5em;
}

@media (max-width: 767px) {
	.vph-que-es-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.vph-que-es-img-wrap {
		width: 100%;
		max-width: 360px;
	}
}

/* VPH - ¿Quién está en riesgo? según Figma 11384:50282 */
.vph-quien-esta-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.vph-quien-esta-titulo {
	gap: 12px;
}

.vph-quien-esta-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.vph-quien-esta-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.vph-quien-esta-intro {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-quien-esta-items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.vph-quien-esta-fila {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
}

.vph-quien-esta-circulo {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	border-radius: 100px;
	background: #ff7900;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vph-quien-esta-circulo img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.vph-quien-esta-texto {
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-quien-esta-texto strong {
	color: #151515;
	font-weight: 700;
}

@media (max-width: 767px) {
	.vph-quien-esta-fila {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* VPH - ¿Cuáles son sus signos y síntomas? según Figma 11384:50295 */
.vph-sintomas-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.vph-sintomas-titulo {
	gap: 12px;
}

.vph-sintomas-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.vph-sintomas-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.vph-sintomas-intro {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-sintomas-subtitulo {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.vph-sintomas-fila {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
}

.vph-sintomas-circulo {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	border-radius: 100px;
	background: #ff7900;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vph-sintomas-circulo img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.vph-sintomas-texto {
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-sintomas-texto strong {
	color: #151515;
	font-weight: 700;
}

.vph-sintomas-alto-riesgo {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: flex-start;
	width: 100%;
}

.vph-sintomas-lista {
	margin: 0;
	padding-left: 1.5em;
	list-style-type: disc;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-sintomas-lista li {
	margin-bottom: 0;
}

.vph-sintomas-lista li:not(:last-child) {
	margin-bottom: 0.5em;
}

@media (max-width: 767px) {
	.vph-sintomas-fila {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* VPH - ¿Cómo se puede prevenir? según Figma 11384:50319 */
.vph-prevenir-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.vph-prevenir-titulo {
	gap: 12px;
}

.vph-prevenir-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.vph-prevenir-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

.vph-prevenir-fila {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
}

.vph-prevenir-circulo {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	border-radius: 100px;
	background: #ff7900;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vph-prevenir-circulo img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.vph-prevenir-texto {
	margin: 0;
	flex: 1 1 0;
	min-width: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.vph-prevenir-texto strong {
	color: #151515;
	font-weight: 700;
}

.vph-prevenir-texto em {
	font-style: italic;
	font-weight: 400;
}

@media (max-width: 767px) {
	.vph-prevenir-fila {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* VPH - ¿Cómo se puede tratar? según Figma 11384:50340 */
.vph-tratar-content {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.vph-tratar-titulo {
	gap: 12px;
}

.vph-tratar-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.vph-tratar-body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	width: 100%;
}

.vph-tratar-texto {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

/* Meningitis - Referencias */
.meningitis-referencias-list {
	list-style-type: decimal !important;
	list-style-position: outside;
	padding-left: 21px;
}

/* VPH - Referencias según Figma 11384:50358 */
.vph-referencias-list {
	color: #4b4b4b;
	list-style-type: decimal;
	padding-left: 21px;
	font-size: 14px;
	line-height: 1.5;
	font-family: Inter, sans-serif;
}

.vph-referencias-list a {
	color: #4b4b4b;
	text-decoration: underline;
}

/* Herpes zóster - ¿Qué es el herpes zóster? (Figma 11169:124063) */
.herpes-zoster-que-es-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-que-es-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-que-es-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-que-es-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-que-es-content {
	width: 100%;
}

.herpes-zoster-que-es-row {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.herpes-zoster-que-es-img-wrap {
	width: 360px;
	height: 172px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}

.herpes-zoster-que-es-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.herpes-zoster-que-es-texto {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-que-es-texto sup {
	font-size: 0.65em;
	vertical-align: super;
}

@media (max-width: 767px) {
	.herpes-zoster-que-es-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.herpes-zoster-que-es-img-wrap {
		width: 100%;
		max-width: 360px;
	}
	.herpes-zoster-que-es-img-wrap .img-fluid {
		margin-left: 0;
	}
}

/* Herpes zóster - ¿Quién está en riesgo? (Figma 11169:124071) */
.herpes-zoster-quien-riesgo-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-quien-riesgo-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-quien-riesgo-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-quien-riesgo-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-quien-riesgo-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.herpes-zoster-quien-riesgo-item {
	display: flex;
	gap: 21px;
	align-items: center;
	width: 100%;
}

.herpes-zoster-quien-riesgo-item.hide-mobile {
	display: flex;
}

.herpes-zoster-quien-riesgo-icon {
	width: 108px;
	height: 108px;
	min-width: 108px;
	min-height: 108px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF7900;
	border-radius: 50%;
	overflow: hidden;
}

.herpes-zoster-quien-riesgo-icon img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.herpes-zoster-quien-riesgo-texto {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-quien-riesgo-texto sup {
	font-size: 0.65em;
	vertical-align: super;
}

.herpes-zoster-quien-riesgo-box {
	display: flex;
	gap: 22px;
	align-items: center;
	width: 100%;
	background: #FFD6A5;
	border-radius: 8px;
	padding: 16px 39px;
}

.herpes-zoster-quien-riesgo-box-icon {
	width: 59px;
	height: 80px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.herpes-zoster-quien-riesgo-box-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.herpes-zoster-quien-riesgo-box-texto {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-quien-riesgo-box-texto sup {
	font-size: 0.65em;
	vertical-align: super;
}

@media (max-width: 767px) {
	.herpes-zoster-quien-riesgo-item {
		flex-direction: column;
		align-items: flex-start;
	}
	.herpes-zoster-quien-riesgo-icon {
		width: 64px;
		height: 64px;
		min-width: 64px;
		min-height: 64px;
	}
	.herpes-zoster-quien-riesgo-icon img {
		width: 36px;
		height: 36px;
	}
	.herpes-zoster-quien-riesgo-box {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 24px;
	}
	.herpes-zoster-quien-riesgo-box-icon {
		height: 60px;
		width: auto;
		margin:auto;
	}
}

/* Herpes zóster - ¿Cuáles son sus signos y síntomas? + Complicaciones (Figma 11169:124109) */
.herpes-zoster-signos-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-signos-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-signos-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-signos-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-signos-content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

.herpes-zoster-signos-block {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.herpes-zoster-signos-p {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-signos-p sup {
	font-size: 0.65em;
	vertical-align: super;
}

.herpes-zoster-signos-primeros {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.herpes-zoster-signos-list {
	margin: 0.5em 0 0 0;
	padding-left: 1.2em;
	list-style-type: disc;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
}

.herpes-zoster-signos-iconos {
	display: flex;
	gap: 50px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-signos-icon-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	min-width: 149px;
	max-width: 260px;
}

.herpes-zoster-signos-icon-circle {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF7900;
	border-radius: 100px;
	overflow: hidden;
}


.herpes-zoster-signos-icon-circle img {
	width: 67px;
	height: 69px;
	object-fit: contain;
}

@media (max-width: 768px) {
  .herpes-zoster-signos-icon-circle {
	width: 64px;
	height: 64px;
	min-width: 64px;
    min-height: 64px;
  }

  .herpes-zoster-signos-icon-circle img {
	width: 36px;
    height: 36px;
  }
}

.herpes-zoster-signos-icon-item > p {
	margin: 0;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.herpes-zoster-dolor-cards {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	width: 100%;
}

.herpes-zoster-dolor-card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.herpes-zoster-dolor-badge {
	background: #ff7900;
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding: 4px 8px;
	border-radius: 8px;
	white-space: nowrap;
}

.herpes-zoster-dolor-icon {
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	justify-items: center;
}

.herpes-zoster-dolor-icon img {
	max-width: 96px;
	max-height: 132px;
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.herpes-zoster-dolor-texto {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.herpes-zoster-signos-nota {
	margin: 0;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
}

/* Complicaciones */
.herpes-zoster-complicaciones {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

/* Especificidad alta para que no lo pise .diseases .content-container .content p (16px) */
.herpes-zoster-complicaciones .herpes-zoster-complicaciones-titulo,
p.herpes-zoster-complicaciones-titulo {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.2;
}

.herpes-zoster-complicaciones-row {
	display: flex;
	gap: 20px;
	align-items: center;
	width: 100%;
	flex-wrap: wrap;
}

.herpes-zoster-complicaciones-img {
	width: 360px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}

.herpes-zoster-complicaciones-img img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.herpes-zoster-complicaciones-img-172 {
	height: 172px;
}

.herpes-zoster-complicaciones-img-172 img {
	height: 100%;
	object-fit: cover;
}

.herpes-zoster-complicaciones-texto {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-complicaciones-texto sup {
	font-size: 0.65em;
	vertical-align: super;
}

/* Bloque dolor + McGill (Figma 11169:124148): gap 16px entre los 3 elementos */
.herpes-zoster-dolor-mcgill-figma {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-dolor-destacado {
	margin: 0;
	color: #ff4e00 !important;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700 !important;
	line-height: 1.5;
}

.herpes-zoster-dolor-destacado sup {
	font-size: 0.65em;
	font-weight: 400;
	vertical-align: super;
}

.herpes-zoster-mcgill-titulo {
	margin: 0;
	color: #ff4e00 !important;
	font-family: Inter, sans-serif;
	font-size: 18px;
	font-weight: 700 !important;
	line-height: 1.5;
	text-align: center;
	width: 100%;
}

.herpes-zoster-mcgill-titulo sup {
	font-size: 0.65em;
	vertical-align: super;
}

.herpes-zoster-mcgill-img {
	width: 100%;
	border: 1px solid #ff4e00;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.herpes-zoster-mcgill-img img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: top;
}

@media (max-width: 767px) {
	.herpes-zoster-signos-iconos {
		gap: 24px;
	}
	.herpes-zoster-dolor-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}
	.herpes-zoster-dolor-card {
		align-items: center;
		text-align: center;
	}
	.herpes-zoster-complicaciones-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.herpes-zoster-complicaciones-img,
	.herpes-zoster-complicaciones-img-172 {
		width: 100%;
		max-width: 360px;
	}
	.herpes-zoster-mcgill-img img {
		height: auto;
	}
}

/* Herpes zóster - ¿Cómo se transmite? (Figma 11169:124159) */
.herpes-zoster-transmite-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-transmite-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-transmite-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-transmite-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-transmite-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.herpes-zoster-transmite-p {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-transmite-p sup {
	font-size: 0.65em;
	vertical-align: super;
}

/* Herpes zóster - ¿Cómo se puede tratar? (Figma 11169:124167) */
.herpes-zoster-tratar-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-tratar-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-tratar-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-tratar-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-tratar-row {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	width: 100%;
	flex-wrap: wrap;
}

/* Texto e imagen con el mismo ancho (el contenido cubre lo mismo que la imagen) */
.herpes-zoster-tratar-texto {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.herpes-zoster-tratar-p {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-tratar-p sup {
	font-size: 0.65em;
	vertical-align: super;
}

.herpes-zoster-tratar-img-wrap {
	flex: 1 1 360px;
	min-width: 0;
	max-width: 100%;
	border-radius: 8px;
	overflow: hidden;
}

.herpes-zoster-tratar-img-wrap img {
    max-width: 360px;
	max-height: 408px;
    width: 100%;
    align-self: stretch;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.herpes-zoster-tratar-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.herpes-zoster-tratar-img-wrap {
		width: 100%;
		max-width: 360px;
	}
}

/* Herpes zóster - ¿Cómo evitar la propagación? (Figma 11169:124176) */
.herpes-zoster-propagation-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-propagation-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-propagation-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-propagation-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-propagation-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.herpes-zoster-propagation-subtitulo {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.herpes-zoster-propagation-iconos {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	width: 100%;
}

.herpes-zoster-propagation-icon-item {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	min-width: 149px;
	max-width: 260px;
	flex: 1 1 149px;
}

.herpes-zoster-propagation-icon-circle {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF7900;
	border-radius: 50%;
	overflow: hidden;
}

.herpes-zoster-propagation-icon-circle img {
	width: 67px;
	height: 69px;
	object-fit: contain;
}

.herpes-zoster-propagation-icon-item > p {
	margin: 0;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.herpes-zoster-propagation-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-propagation-item .herpes-zoster-propagation-icon-circle {
	width: 108px;
	height: 108px;
	flex-shrink: 0;
}

.herpes-zoster-propagation-item .herpes-zoster-propagation-icon-circle img {
	width: 60px;
	height: 60px;
}

.herpes-zoster-propagation-texto {
	flex: 1 0 0;
	min-width: 0;
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-propagation-texto sup {
	font-size: 0.65em;
	vertical-align: super;
}

@media (max-width: 767px) {
	.herpes-zoster-propagation-iconos {
		gap: 20px;
	}
	.herpes-zoster-propagation-item {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Herpes zóster - ¿Cómo se puede prevenir? (Figma 13904:67819) */
.herpes-zoster-prevenir-figma {
	display: flex;
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-prevenir-titulo.title-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.herpes-zoster-prevenir-titulo h3 {
	color: #151515;
	font-family: Inter, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.herpes-zoster-prevenir-titulo .bottom-line {
	width: 150px;
	height: 2px;
	background: #ff4e00;
}

.herpes-zoster-prevenir-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.herpes-zoster-prevenir-p {
	margin: 0;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

.herpes-zoster-prevenir-p sup {
	font-size: 0.65em;
	vertical-align: super;
}

.herpes-zoster-prevenir-content .hide-desktop {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.herpes-zoster-prevenir-bold {
	font-weight: 700;
}

.herpes-zoster-prevenir-icon-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	width: 100%;
}

.herpes-zoster-prevenir-icon-circle {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	background: #FF7900;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.herpes-zoster-prevenir-icon-circle img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

/* Sidemenu herpes zóster - línea naranja antes de Test de riesgo (Figma 11169:125130) */
.menu-divider-top-orange {
	border-top: 1px solid #ff4e00;
	padding-top: 0.75rem;
	margin-top: 0.5rem;
	margin-left: 12px;
	margin-right: 12px;
	padding-left: 0;
	padding-right: 0;
}

/* Sidemenu herpes zóster - estilos Figma (borde, esquinas) */
.herpes-zoster .content-container .sidemenu {
	border: 1px solid #c6c5c5;
	border-radius: 8px;
	padding: 8px;
}

.herpes-zoster .content-container .sidemenu .title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: #151515;
	padding: 8px 12px;
}

/* Herpes zóster — blog desktop container max-width */
.blog-herpes-zoster .container {
	max-width: 1120px;
}

/* Herpes zóster — hover título cards blog */
.blog-herpes-zoster .blogSwiper .swiper-slide a h3,
.blog-herpes-zoster #home-blog-cards a h3 {
	transition: color 0.2s;
}

.blog-herpes-zoster .blogSwiper .swiper-slide a:hover h3,
.blog-herpes-zoster #home-blog-cards a:hover h3 {
	color: #FF4E00 !important;
}

/* Herpes zóster — blog mobile: BannerTest + Mantente informado (Figma 11210-95377) */
.herpes-blog-adicional-mobile {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	width: 100%;
	margin-bottom: 32px;
}

.herpes-blog-titulo-mobile {
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #151515;
	text-align: center;
	margin: 0;
}

.herpes-banner-test-mobile {
	width: 100%;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(180deg, rgba(255, 85, 0, 0.88) 43%, #FF5500 100%),
		url('/images/blogcard/fondos/banner-test.png');
	background-size: cover;
	background-position: center;
}

.herpes-banner-test-titulo {
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: white;
	text-align: center;
	margin: 0;
}

.herpes-banner-test-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 50px;
	padding: 16px 32px;
	background: white;
	border: 1px solid #C6C5C5;
	border-radius: 100px;
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.herpes-banner-test-icon {
	width: 18px;
	height: 18px;
}

/* Banner Test de riesgo - herpes zóster */
.test-riesgo-banner-box {
	background-image: url('/images/blogcard/fondos/banner-test.png');
	background-size: cover;
	background-position: center;
	color: white;
	min-height: 300px;
	border-radius: 16px;
	border: 2px solid rgba(255, 255, 255, 0.9);
	overflow: hidden;
}
.test-riesgo-banner-titulo {
	color: white !important;
}
.test-riesgo-banner-icon {
	width: 14px;
	height: 14px;
	margin-left: 8px;
}
@media (min-width: 769px) {
	.test-riesgo-banner-box {
		max-width: 1120px;
		width: 100%;
		justify-self: center;
	}
}

/* Banner vivir */
.banner-vivir img {
	width: 186px;
	height: auto;
	min-width: 80px;
}

.banner-vivir-titulo {
	color: #fff !important;
}
.banner-vivir-texto {
	color: #fff !important;
}
.banner-vivir-btn {
	margin-top: 24px;
}
.btn-continuar-leyendo {
	text-decoration: none;
	color: #fff;
	position: relative;
}

.btn-continuar-leyendo::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: translateX(-50%) scaleX(0);
	transition: transform 0.3s ease;
}

/* Section vacunación - herpes zóster */
.herpes-zoster .section-vacunacion {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.section-vacunacion-row {
	margin-left: -2vw;
}
.section-vacunacion-col {
	width: 553px;
}
.section-vacunacion-card {
	min-height: 313px;
	padding: 32px;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
}
.section-vacunacion-card-puntos {
	background-image: url('/images/banner-puntos-de-vacunacion.png');
	width: 620px;
	margin-left: -65px;
}
.section-vacunacion-card-familia {
	background-image: url('/images/Banner_Familia Vacunas_V2.jpg');
	width: 624px;
}

/* Flecha learn-more */
.flecha-abajo-icon {
	width: 20px;
	height: 20px;
}

/* Section vacunación - meningitis overrides */
.vacunacion-meningitis .d-flex.flex-lg-row {
	gap: 20px;
	padding-bottom: 48px;
	max-width: 1120px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.vacunacion-meningitis .textcard45 {
	font-size: 32px !important;
}
.vacunacion-meningitis .fs-18 {
	font-size: 18px !important;
}

/* Card vacunación meningitis - fondos layered y botones (Figma 11193-69290) */
.vacunacion-meningitis .card-vacunacion {
	background: #e6e6e6;
	position: relative;
	overflow: hidden;
}
.vacunacion-meningitis .card-vacunacion::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/images/banner-puntos-de-vacunacion.png');
	background-size: cover;
	background-position: right center;
	opacity: 0.25;
	border-radius: 16px;
}
.vacunacion-meningitis .card-vacunacion::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(-89.82deg, rgba(255, 255, 255, 0) 56.95%, #ffffff 113.49%);
	border-radius: 16px;
}
.vacunacion-meningitis .card-vacunacion > * {
	position: relative;
	z-index: 1;
}
.vacunacion-meningitis .card-vacunacion .btn-custom {
	background-color: #ff7900;
	border-color: #ff7900;
	border-radius: 100px;
	height: 50px;
	padding: 0 32px;
	font-weight: 700;
}
.vacunacion-meningitis .card-personalizada {
	background: #ff5500;
	position: relative;
	overflow: hidden;
}
.vacunacion-meningitis .card-personalizada::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/images/Banner_Familia Vacunas_V2.jpg');
	background-size: cover;
	background-position: bottom center;
	opacity: 0.20;
	border-radius: 16px;
}
.vacunacion-meningitis .card-personalizada::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(269.34deg, rgba(255, 85, 0, 0) 21.39%, rgb(255, 85, 0) 95%);
	border-radius: 16px;
}
.vacunacion-meningitis .card-personalizada > * {
	position: relative;
	z-index: 1;
}
.vacunacion-meningitis .card-personalizada .btn-custom-outline {
	border-radius: 100px;
	height: 50px;
	padding: 0 32px;
	font-weight: 700;
}

@media (max-width: 991px) {
	.diseases .section-vacunacion .d-flex.flex-column.flex-lg-row > div {
		width: 100% !important;
	}
	.diseases .section-vacunacion .ep-card-white,
	.diseases .section-vacunacion .card-personalizada {
		width: 100% !important;
		border-radius: 0 !important;
	}
}

/* Banner herpes zóster - second state */
.banner-herpes-zoster {
	background-image: url('/images/herpes-zoster/banner-herpes.png');
	background-size: cover;
	background-position: center;
}
.banner-herpes-zoster-mobile {
	background-image: url('/images/herpes-zoster/banner-herpes.png');
	background-size: cover;
	background-position: center;
}

/* Referencias herpes zóster (Figma 11169:125891) */
.referencias-seccion {
	margin-top: -1.5rem;
	margin-bottom: 2rem;
	max-width: 1120px;
}
.herpes-zoster-referencias {
	padding: 0;
}
.herpes-zoster-referencias .herpes-zoster-referencias-list,
ol.herpes-zoster-referencias-list {
	list-style-type: decimal !important;
	list-style-position: outside;
	margin-left: 0;
}
.herpes-zoster-referencias-list {
	color: #4b4b4b;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	padding-left: 21px;
}
.herpes-zoster-referencias-list li {
	margin-bottom: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}
.herpes-zoster-referencias-list a {
	color: #4b4b4b;
	text-decoration: underline;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Referencias divider */
.referencias-divider {
	background-color: #959595;
	height: 1px;
	align-self: stretch;
	width: 100%;
}

/* Contenido adicional y herramientas interactivas disponibles (Figma 11169:125638) */
.contenido-adicional-titulo-figma {
	font-family: Inter, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: #151515;
	text-align: center;
	margin: 0 0 1.5rem 0;
}

/* ¿Qué es el dengue? */
.que-es-dengue-figma {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.que-es-dengue-figma .que-es-dengue-row {
	gap: 20px;
}

.que-es-dengue-img-wrap {
	width: 360px;
	max-width: 100%;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
}

.que-es-dengue-img-wrap img {
	width: 100%;
	height: 172px;
	display: block;
	object-fit: cover;
}

.que-es-dengue-texto {
	font-family: 'Inter', sans-serif;
	color: #4b4b4b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	flex: 1 1 0%;
	min-width: 0;
}

/* ¿Quién está en riesgo? */
.quien-riesgo-dengue-titulo.title-container {
	margin-top: 2.5rem;
	gap: 12px;
}

.quien-riesgo-dengue {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.quien-riesgo-dengue-items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.quien-riesgo-dengue-fila {
	gap: 20px;
}

.quien-riesgo-dengue .quien-riesgo-circulo {
	width: 108px;
	height: 108px;
	border-radius: 100px;
	background: #FF7900;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.quien-riesgo-dengue .quien-riesgo-circulo img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.quien-riesgo-dengue-texto {
	font-family: 'Inter', sans-serif;
	color: #4b4b4b;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	min-width: 0;
}

.quien-riesgo-dengue-texto strong {
	font-weight: 700;
}

/* ¿Cuáles son sus signos y síntomas? */
.sintomas-dengue-figma {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sintomas-dengue-texto {
	font-family: 'Inter', sans-serif;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
}

.sintomas-dengue-fila {
	gap: 40px;
}

.sintoma-item-dengue {
	flex: 1 1 0;
	min-width: 149px;
	max-width: 260px;
	gap: 16px;
}

.sintoma-item-dengue .sintoma-icono-dengue {
	width: 108px;
	height: 108px;
	border-radius: 100px;
	background: #FF7900;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sintoma-item-dengue .sintoma-icono-dengue img {
	width: 67px;
	height: 69px;
	object-fit: contain;
}

.sintomas-dengue-grave-block {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* Dengue - ¿Cómo se puede prevenir? (Figma 11384:46132) */
.prevenir-dengue-figma {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.prevenir-dengue-texto {
	font-family: 'Inter', sans-serif;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	text-align: left !important;
}

.prevenir-dengue-figma sup {
	font-size: 10.32px;
	font-weight: 400;
	line-height: 1.5;
}

.prevenir-vacunacion-block {
	width: 100%;
	text-align: left !important;
}

.prevenir-vacunacion-block .prevenir-vacunacion-titulo {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
	text-align: left !important;
}

/* Dengue - ¿Cómo se puede tratar? (Figma 11384:46144) */
.tratar-dengue-figma {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.tratar-dengue-texto {
	font-family: 'Inter', sans-serif;
	color: #4b4b4b;
	font-size: 16px;
	line-height: 1.5;
}

.tratar-dengue-figma sup {
	font-size: 10.32px;
	font-weight: 400;
	line-height: 1.5;
}

/* Dengue: margen del título de descargables solo en esta página */
.descarga-dengue #descarga-titulo {
	transition: all 0.3s ease;
	margin-top: 77px;
}

/* Difteria: margen del título de descargables solo en esta página */
.difteria #descarga-titulo {
	transition: all 0.3s ease;
	margin-top: 69px;
}

/* Difteria: alineación izquierda de párrafos del contenido */
.difteria .content-container .content p {
	text-align: left !important;
}

/* Meningitis: blog section overrides */
.blog-meningitis .container {
	max-width: 1120px;
}

.blog-meningitis .blog-title-home {
	font-size: 24px;
	margin-bottom: 24px !important;
}

.blog-meningitis #home-blog-cards {
	--bs-gutter-x: 20px;
}

.blog-meningitis #home-blog-cards h3 {
	transition: color 0.3s ease;
}

@media (hover: hover) {
	.blog-meningitis #home-blog-cards .col-md-4 a:hover h3 {
		color: var(--orange-color);
	}
}

.blog-full-bg {
	left: 275px;
}

@media (max-width: 1119px) {
	.blog-full-bg {
		left: calc(50vw - 285px);
	}
}