/* ================================
   Estilos exclusivos para el blog herpes-vs-genital
   ================================ */

/* Contenedor de la tabla: separación clara entre todos los cuadros */
.herpes-vs-genital .table-comparativa-blog {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 8px 8px; /* Espacio entre TODOS los cuadros */
	background: transparent;
	margin-bottom: 2rem;
  }
  
  /* Encabezados de la tabla (arriba, naranja) */
  .herpes-vs-genital .table-comparativa-blog th {
	background: #FF4E00 !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	text-align: center;
	font-size: 16px;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 4px;
	box-shadow: none;
  }
  
  /* Primera columna (títulos de fila, durazno) */
  .herpes-vs-genital .table-comparativa-blog td:first-child {
	background: #FFEDD3 !important;
	color: #151515 !important;
	font-weight: 700 !important;
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 12px;
	border-radius: 4px;
	box-shadow: none;
	min-width: 176px;
	vertical-align: top;
  }
  
  /* Celdas normales (datos) */
  .herpes-vs-genital .table-comparativa-blog td:not(:first-child) {
	color: #151515;
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 12px;
	border: 1px solid #C6C5C5;
	border-radius: 4px;
	box-shadow: none;
	font-weight: 400;
	vertical-align: top;
	background: white;
  }
  
  /* Responsive para móviles */
  @media (max-width: 768px) {
	.herpes-vs-genital .table-comparativa-blog th,
	.herpes-vs-genital .table-comparativa-blog td {
	  font-size: 0.95rem;
	  padding: 12px 8px;
	}
	.herpes-vs-genital .table-comparativa-blog {
	  border-spacing: 6px 6px;
	}
  }
  .mobile-only {
    display: none !important;
  }
  /* Aviso informativo con borde superior e inferior naranja, fondo claro y texto centrado */
.alert-informativo {
    border-top: 2px solid #FF6D00;    /* Línea naranja arriba */
    border-bottom: 2px solid #FF6D00; /* Línea naranja abajo */
    background: #FFFCFA;              /* Fondo muy claro, casi blanco */
    color: #151515;                   /* Color de texto principal */
    text-align: center;               /* Centra el texto */
    padding: 1.5rem 1rem;             /* Espaciado interno */
    font-size: 18px;                  /* Tamaño de fuente grande */
    font-family: inherit;             /* Usa la fuente del sitio */
    margin: 2rem 0;                   /* Espacio arriba y abajo */
    font-weight: 400;                 /* Peso normal para el texto */
}

.alert-informativo strong {
    font-weight: 700;                 /* Destaca la parte importante en negrita */
}
/* Banner informativo con imagen de fondo y botón naranja */
.banner-herpes-zoster {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 260px;
  border-radius: 40px;
  background: #FFFCFA;
  overflow: hidden;
  margin: 2rem 0;
  padding: 0;
}

/* Contenido del banner (texto y botón) */
.banner-content {
  position: relative;
  z-index: 2;
  padding: 2.5rem 0 2.5rem 6vw;
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-content h2 {
  color: #151515;
  font-size: 2.3rem;
  font-weight: 800;
  margin: 0 0 2rem 0;
  line-height: 1.1;
  max-width: 600px;
}

/* Botón naranja */
.banner-btn {
  display: inline-block;
  background: #FF4E00;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  padding: 1.1rem 3.2rem;
  border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(255, 78, 0, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
  margin-top: 0.5rem;
  border: none;
  cursor: pointer;
}

.banner-btn:hover {
  background: #e64500;
  box-shadow: 0 6px 32px rgba(255, 78, 0, 0.15);
}

/* Imagen de fondo en escala de grises y opaca */
.banner-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: url('/images/banner-herpes-zoster-bg.png') center center/cover no-repeat;
  filter: grayscale(1) brightness(1.1) opacity(0.55);
}

/* Responsive para móviles */
@media (max-width: 700px) {
  .banner-herpes-zoster {
    min-height: 200px;
    border-radius: 20px;
  }
  .banner-content {
    padding: 1.5rem 1rem;
  }
  .banner-content h2 {
    font-size: 1.2rem;
    max-width: 100%;
  }
  .banner-btn {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 24px;
  }
}
/* Fondo suave para el bloque de artículos relacionados */
.related-articles-bg {
	background: linear-gradient(90deg, #FFF7F3 0%, #F8F6FF 100%);
	border-radius: 32px;
	padding: 3rem 2rem 2.5rem 2rem;
	margin: 3rem 0;
  }
  
  /* Título */
  .related-title {
	font-size: 2rem;
	font-weight: 800;
	margin-bottom: 2rem;
	text-align: left;
  }
  
  /* Cards en fila */
  .related-articles-list {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
	justify-content: flex-start;
  }
  
  /* Card individual */
  .related-article-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.04);
	width: 300px;
	padding: 0 0 1.5rem 0;
	display: flex;
	flex-direction: column;
	position: relative;
	cursor: pointer;
	transition: box-shadow 0.2s;
  }
  .related-article-card:hover {
	box-shadow: 0 8px 32px rgba(255, 78, 0, 0.10);
  }
  
  /* Imagen y el icono */
  .card-image-container {
	position: relative;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	height: 160px;
  }
  
  .card-image-container img:first-child {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .card-icon {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 8px;
	padding: 4px;
  }
  
  /* Tags */
  .card-tags {
	color: #888;
	font-size: 0.85rem;
	margin: 1rem 1.2rem 0.5rem 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
  }
  
  .card-tags .dot {
	color: #bbb;
	margin: 0 0.3em;
  }
  
  /* Título y descripción */
  .card-title {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 1.2rem 0.5rem 1.2rem;
  }
  
  .card-description {
	color: #444;
	font-size: 1rem;
	margin: 0 1.2rem;
  }
  
  /* Hace toda la card clickeable */
  .card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-indent: -9999px;
  }
  
  /* Botón centrado */
  .text-center {
	text-align: center;
  }
  .mt-4 {
	margin-top: 2rem;
  }
  
  /* Botón personalizado */

  /* Fondo decorativo para la sección "Mantente informado" */
  .mantente-informado-bg {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-image: url('/images/blogcard/fondos/frame-164000.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 0; /* O usa 32px si quieres bordes redondeados solo en desktop */
	min-height: 400px;
	/* Opcional: padding si quieres más espacio arriba/abajo */
	/* padding: 3rem 0; */
	z-index: 0;
  }
  .textherpesgen{
	text-align: left;

  }
  .alerta-aviso-naranja {
	background: #FFF7EC;
	border: 2px solid #FF6D00;
	color: #FF6D00;
	font-size: 12px;
	font-family: inherit;
	text-align: center;
	padding: 18px 24px !important;

    margin:  2.5rem auto !important; 
	font-weight: 700;
	border-radius: 2px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
  width: 73%;
  }
  */

  .alerta-aviso-naranja strong {
	color: #FF6D00;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	display: block;
	width: 100%;
  }

  /* Breadcrumbs con mismo ancho que el recuadro de advertencia */
  .mitos-herpes .container.first-state {
	width: 100% !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
  }

  /* Ocultar referencias solo en la primera página - el JavaScript maneja la visibilidad */
  .mitos-herpes #referenciasContainer {
	display: none; /* Oculto por defecto, el JS lo mostrará cuando sea necesario */
  }
  
  /* Estilos para referencias en el test - sin línea y alineadas con el texto */
  .mitos-herpes .referencias.second-state {
	margin-top: 0 !important;
	padding: 0 !important;
  }
  
  .mitos-herpes .referencias.second-state p {
	margin-top: 0 !important;
	margin-bottom: 8px !important;
  }
  
  .mitos-herpes .referencias.second-state .text-container {
	margin-top: 0 !important;
  }
  
  /* Mismo ancho que texto-adicional-test para mantener consistencia */
  .mitos-herpes #referenciasContainer {
	width: 100%;
	max-width: 1280px;
	margin: -20px auto 0 auto; /* Margen superior negativo para subir las referencias */
	padding: 0;
	box-sizing: border-box;
  }
  
  .mitos-herpes #referenciasContainer .referencias.second-state {
	width: 100%;
  }
  
  /* Estilos para question-right en el test */
  .question-right ul li {
	margin-bottom: 0px;
  }
  
  /* Media query para pantalla 1024px */
  @media screen and (max-width: 1350px) and (min-width: 769px) {
	/* Todos los elementos con mismo ancho en 1024px */
	.test-intro-section {
		position: relative;
		width: 93% !important;
		max-width: none !important;
	}
	
	/* Todas las secciones del test con mismo ancho en 1024px */
	.test-question-section,
	.test-question-section1,
	#finalResult,
	#lowRiskResult {
		width: 93% !important;
		max-width: none !important;
	}
	
	/* Estilos específicos para test-question-section en 1024px */
	.test-question-section {
		background-color: #FFD6A5;
		padding: 2em;
		border-radius: 20px;
		max-width: 1265px;
		height: 553px;
	}
	
	/* Texto de advertencia con mismo ancho en 1024px */
	.mitos-herpes .alerta-aviso-naranja,
	.mitos-herpes .alerta-aviso-naranja.text-center {
		width: 93% !important;
		max-width: none !important;
	}
	
	/* Texto adicional con mismo ancho en 1024px */
	.mitos-herpes .texto-adicional-test {
		width: 93% !important;
		max-width: none !important;
	}
	
	/* Referencias con mismo ancho en 1024px */
	.mitos-herpes #referenciasContainer {
		width: 93% !important;
		max-width: none !important;
	}
	
	/* Estilos para botones de navegación en 1024px */
	.navigation-buttons {
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-top: 9em;
		margin-left: 15px;
	}
	
	/* Estilos para question-right en 1024px */
	.question-right {
		flex: 1;
		background-color: #461104;
		border-radius: 16px;
		padding: 24px 22px 32px 24px;
	}
  }
  
  /* ================================
	 Fin estilos exclusivos herpes-vs-genital
	 ================================ */
/* ============================
   Estilos exclusivos - Blog Vacunas Combinadas
   ============================ */
  .vacunas-combinadas-hero-text {
    margin-top: 12px;
    margin-bottom: 0;
    color: #4B4B4B;
    font-size: 18px;
    line-height: 1.5;
  }

   .icon-text-row {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 16px;
  }
  .icon-text-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
  }
  .icon-circle {
	background: #ff6600;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16px;
	flex-shrink: 0;
  }
  .icon-circle img {
	width: 28px;
	height: 28px;
  }
  .link-orange-large {
	color: #FF4E00;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
	margin-top: 1rem;
  }
  .text-negro{
	color: #000000 !important;
  }
  .link-orange-large:hover {
	text-decoration: underline;
	color: #FF4E00;
  }
  
  /* Estilos para secciones de enfermedades en vacunas combinadas */
  .vacunas-combinadas-disease-title {
	color: #151515;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	font-family: 'Inter', sans-serif;
  }
  
  .vacunas-combinadas-disease-text-bold {
	color: #4B4B4B;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	font-family: 'Inter', sans-serif;
  }
  
  .vacunas-combinadas-disease-text {
	color: #4B4B4B;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-family: 'Inter', sans-serif;
  }
  
  .vacunas-combinadas-icon-text {
	color: #4B4B4B;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-family: 'Inter', sans-serif;
  }
  
  .vacunas-combinadas-disease-text ul {
	list-style-type: disc;
	padding-left: 20px;
	margin-top: 0;
	margin-bottom: 0;
  }
  
  .vacunas-combinadas-disease-text ul li {
	color: #4B4B4B;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-family: 'Inter', sans-serif;
	margin-bottom: 0;
  }
  
  .link-orange-large-arrow {
	font-size: 1.2em;
  }
  /* ====== Fin estilos exclusivos - Blog Vacunas Combinadas ====== */
    /* ====== iNICIO estilos exclusivos - Blog RAZONES VACUNARSE ====== */
	.lista-vacunas{
		margin-top: 16px !important;
	}
    /* ====== Fin estilos exclusivos - Blog RAZONES VACUNARSE ====== */

/* ====== RAZONES VACUNARSE (ajustes Figma 11051-21188) ====== */
.razones-vacunarse-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

.razones-vacunarse-list {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
  padding-left: 20px;
  list-style: disc;
}

.razones-vacunarse-hero-img {
  border-radius: 8px;
  width: 100%;
  height: 148px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .razones-vacunarse-hero-img {
    height: auto;
  }
}

.razones-vacunarse-cta {
  background: #FFD6A5;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.razones-vacunarse-cta-icon {
  flex-shrink: 0;
  width: 55px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.razones-vacunarse-cta-icon-img {
  max-width: 100%;
  max-height: 100%;
}

.razones-vacunarse-cta-body {
  flex: 1;
  min-width: 0;
}

.razones-vacunarse-cta-text {
  color: #151515;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.razones-vacunarse-cta-highlight {
  color: var(--UI-GSK-Orange-02, #FF4E00);
}

.razones-vacunarse-cta-btn.btn-custom {
  height: 50px;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0),
    0px 81px 32px 0px rgba(0, 0, 0, 0.01),
    0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09),
    0px 5px 11px 0px rgba(0, 0, 0, 0.1),
    0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .razones-vacunarse-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .razones-vacunarse-cta-btn.btn-custom {
    width: 100%;
    justify-content: center;
  }
}
/* ====== Fin RAZONES VACUNARSE ====== */
	/* ESTILOS PARA EL BANNER DE VACUNAS RECOMENDADAS */
.banner-vacunas-recomendadas {
    /* Layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px; /* Espacio entre texto y botón */
    
    /* Sizing */
    width: 100%;
    height: auto;
    
    /* Spacing - Padding según Figma */
    padding: 17px 32px; /* py-[17px] px-[32px] */
    
    /* Appearance */
    background-color: #FF4E00; /* UI/GSK/Orange 02 */
    border-radius: 16px;
    
    /* Text alignment */
    text-align: center;
}

.banner-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    white-space: pre-wrap;
}

.banner-button {
    background-color: white;
    color: #4B4B4B;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    border: 1px solid #C6C5C5;
    border-radius: 100px;
    padding: 16px 32px;
    height: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.banner-button:hover {
    background-color: #f8f9fa;
    text-decoration: none;
    color: #4B4B4B;
}

.box-meningitis1{
	margin-left: -34px !important;
}

/* Banner Test Herpes Zóster */
.banner-test-herpes {
  position: relative;
  width: 100%;
  padding: 48px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(90deg, #FF5500 0%, #FF5500 100%);
  background-image: url('/images/blogcard/fondos/banner-test.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 37px;
}

.banner-test-herpes-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 85, 0, 0) 43.034%, rgba(255, 85, 0, 1) 96.582%);
  opacity: 0.25;
  pointer-events: none;
}

.banner-test-herpes-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-align: center;
}

.banner-test-herpes-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #FFFFFF;
  margin: 0;
  width: 732px;
  max-width: 100%;
  text-align: center;
}

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

.banner-test-herpes-btn:hover {
  background: #f8f9fa;
  text-decoration: none;
  color: #4B4B4B;
}

.banner-test-herpes-btn img {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .banner-test-herpes {
    padding: 32px 24px;
    min-height: 180px;
  }
  
  .banner-test-herpes-title {
    font-size: 24px;
  }
  
  .banner-test-herpes-btn {
    padding: 12px 24px;
    height: auto;
    font-size: 14px;
  }
}
.box-meningitis2{
	margin-left: -7px !important;
}
.box-meningitis3{
	margin-left: 17px !important;
}
/* 
ESTILOS PARA EL DISCLAIMER MÉDICO
Clase: .medical-disclaimer
- Fondo: #FFF7EC (crema claro)
- Bordes: #FF4E00 (naranja)
- Texto: #FF4E00 (naranja)
*/
.medical-disclaimer {
    background-color: #FFF7EC;
    border: 2px solid #FF4E00;
    border-radius: 8px;
    padding: 28px 20px !important;
    color: #FF4E00;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
}

/* 
ESTILOS PARA BAJAR TODO EL CONTENIDO INTERNO DEL BANNER
Clase: .banner-spacing-fixed
*/
.banner-spacing-fixed .ep-card-white {
    padding: 50px 25px 30px 25px !important;
}

.banner-spacing-fixed .textcard45 {
    margin-top:54px !important;
    margin-bottom: 15px !important;
}

.banner-spacing-fixed p {
    margin-bottom: 20px !important;
}

.banner-spacing-fixed .btn-custom {
    margin-top: 0 !important;
}
/* ===== BLOQUE CTA HERPES COMPLICACIONES ===== */
/* Contenedor principal del bloque "Tal vez te interese leer" */
.herpes-complicaciones-cta {
    display: flex;
    align-items: center;
    border-left: 4px solid var(--UI-GSK-Orange-02, #FF4E00);
    padding: 20px;
}

/* Texto introductorio "Tal vez te interese leer:" */
.herpes-complicaciones-cta .mb-1 {
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* Pregunta destacada en naranja */
.herpes-complicaciones-cta .mb-0 {
    font-size: 18px;
    margin: 0;
}

.herpes-complicaciones-cta .mb-0 strong {
    color: #151515;
    font-weight: 700;
}

.herpes-complicaciones-cta .mb-0 span {
    color: var(--UI-GSK-Orange-02, #FF4E00);
    font-weight: 700;
}

/* Botón "Leer artículo" - MÁS GRANDE Y MÁS CERCA DEL TEXTO */
.herpes-complicaciones-btn {
    background: var(--UI-GSK-Orange-02, #FF4E00);
    color: white;
    text-decoration: underline;
    padding: 12px 53px; /* Aumentado el padding para hacerlo más grande */
    border-radius: 25px;
    border: none;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 10px; /* Reducido para acercarlo más al texto */
    transition: all 0.3s ease;
    font-size: 16px; /* Tamaño de fuente más grande */
}

/* Efecto hover para el botón */
.herpes-complicaciones-btn:hover {
    background-color: #e64500;
    transform: translateY(-2px);
    color: white;
    text-decoration: underline;
}
/* ===== BANNER DE URGENCIA HERPES OFTÁLMICO ===== */
/* Contenedor principal del banner de urgencia */
.herpes-oftalmico-urgencia {
    background-color: #FFD6A5;
    border: none;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
}
.urgencia-icon img {
	width: 43px;
    height: 42px;
    margin-left: 140px;
}

/* Icono de urgencia */
.urgencia-icon {
    margin-right: 15px;
}

/* Texto del banner de urgencia - NEGRITA Y MÁS A LA DERECHA */
.urgencia-texto {
	margin-left: -1px;
    font-weight: bold;
}

.urgencia-texto strong {
    color: #000;
    font-weight: bold;
}
/* ===== BLOQUE INFORMATIVO NEURALGIA POSHERPÉTICA ===== */
/* Contenedor principal del bloque informativo */
.neuralgia-posherpetica-info {
    background-color: #FFD6A5;
    border: none;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

/* Porcentajes destacados en naranja */
.neuralgia-posherpetica-info strong {
    color: #FF6D00;
}
.neuralgia-porcentaje {
    color: var(--UI-GSK-Orange-02, #FF4E00);
    font-weight: bold;
}
.herpes-zoster-prevencion-block {
    padding-bottom: 20px;
}

/* Contenedor del icono */
.prevencion-icon {
    background-color: var(--UI-GSK-Orange-01, #FF7900);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 24px;
}

/* Estilos para el texto de prevención */
.prevencion-text {
    color: #4B4B4B;
    font-size: 16px;
    line-height: 1.4;
    flex-grow: 1;
}

.prevencion-icon img {
    width: 60px;
    height: 60px;
}
/* ===== BANNER CONSULTA MÉDICA HERPES ZÓSTER ===== */
/* Contenedor principal del banner de consulta */
.herpes-consulta-medica {
    background-color: #FFD6A5;
   
    border-radius: 8px;
    padding: 20px;
    display: flex;
}

.herpes-consulta-medica-updated {
    background-color: #FFD6A5;
    border: none;
    border-radius: 8px;
    padding: 16px 24px;
}

.herpes-consulta-texto {
    color: #151515;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.prevention-text {
    color: #4B4B4B;
    font-size: 16px;
    line-height: 1.4;
}

.herpes-prevencion-link {
    color: var(--UI-GSK-Orange-02, #FF4E00);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.herpes-prevencion-link:hover {
    color: #e64500;
    text-decoration: underline;
}

/* Icono del doctor */
.consulta-icon {
    margin-right: 15px;
}

.consulta-icon img {
	width: 69px;
    height: 62px;
}

/* Texto del banner de consulta */
.consulta-texto strong {
    color: #FF6D00;
    font-weight: bold;
	font-size: 18px;
}

.consulta-texto strong.herpes-consulta-texto {
    color: #151515;
    font-size: 16px;
    font-weight: 700;
}
/* ===== OTRAS MANERAS DE PREVENIR HERPES ZÓSTER ===== */
/* Contenedor de cada item de prevención */
.prevention-item {
    margin-bottom: 30px;
}

/* Círculo naranja que contiene el icono */
.prevention-icon-circle {
    background-color: var(--UI-GSK-Orange-01, #FF7900);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-right: 20px; /* MÁS MARGEN ENTRE ICONO Y TEXTO */
}


/* Estilo para el enlace */
.recommended-vaccine-link {
    color: #FF4E00;
    text-decoration: underline;
    font-weight: bold;
}
/* ===== TABLA COMPARATIVA MENINGOCOCO VS NEUMOCOCO ===== */
.header-meningococo,
.header-neumococo {
    background-color: #00C84C !important;
    color: #151515 !important;
    text-align: center;
    font-weight: bold !important;
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 4px;
}

.label-td {
    background-color: rgba(0, 200, 76, 0.10) !important; /* #00C84C al 10% */
    font-weight: bold;
    vertical-align: middle;
}
/* ===== TABLA COMPARATIVA MENINGOCOCO VS NEUMOCOCO - CON SEPARACIÓN ===== */
.table-comparativa-blog {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 12px 12px; /* Espacio entre TODOS los cuadros */
    background: transparent;
    margin-bottom: 2rem;
}

/* Encabezados de la tabla (arriba, verde) */
.table-comparativa-blog th {
    background: #00C84C !important;
    color: #151515 !important;
    font-weight: bold !important;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: none;
}

/* Primera columna (títulos de fila, verde claro) */
.table-comparativa-blog td:first-child {
    background: rgba(0, 200, 76, 0.10) !important; /* #00C84C al 10% */
    color: #151515 !important;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: none;
    min-width: 180px;
    vertical-align: top;
}

/* Celdas normales (datos) */
.table-comparativa-blog td:not(:first-child) {
    color: #151515;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    padding: 8px 12px;
    border: 1px solid #C6C5C5;
    border-radius: 4px;
    box-shadow: none;
    background: white;
    vertical-align: top;
}

.table-comparativa-blog td.no-bg-green {
	background: white !important;
	color: #151515;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.4;
	padding: 8px 12px;
	border: 1px solid #C6C5C5;
	border-radius: 4px;
	border-radius: 0;
	box-shadow: none;
	font-weight: normal;
  }
  .alert-motivacional {
    
    border-top: 2px solid #00C84C;
    border-bottom: 2px solid #00C84C;
    padding: 20px;
    margin: 30px 0;
    text-align: center;
    position: relative;
}

.alert-motivacional span {
    font-weight: bold;
    font-size: 18px;
    line-height: 1.5;
    color: #333;
    display: block;
}

.alert-motivacional strong {
    font-weight: bold;
    color: #333;
}.contenido-informativo {
    text-align: left;
    margin: 20px 0;
}

.contenido-informativo p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: #333;
}

.link-destacado {
    color: #FF6D00;
    text-decoration: underline;
    font-weight: bold;
}

.link-destacado:hover {
    color: #E65100;
}

.frase-motivacional {
    margin-top: 20px;
    font-size: 18px;
}
.timeline-desktop {
    display: block;
}

.timeline-mobile {
    display: none;
}
/* ===== BLOQUE FAQ MENINGOCOCO ===== */
.symptom-item {
    text-align: center;
    padding: 1rem;
}

.symptom-icon {
    width: 80px;
    height: 80px;
  
}



.symptom-name {
    text-align: center;
    font-weight: 500;
    color: #333;
    margin: 0;
}
/* ===== CULEBRILLA-PREVENCION-BLOG ===== */
.circle-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: var(--UI-GSK-Orange-02, #FF4E00);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: -5px;
}

.circle-number p {
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

/* Títulos después de los círculos numerados - 18px */
.blog-circle-title {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #151515;
    margin: 0;
}

.circle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: -5px;
}

.circle-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}
.fact-box {
    border: 1px solid #FF6B35; /* Borde naranja */
    border-radius: 12px; /* Esquinas más redondeadas */
    height: 100%; /* Misma altura para todos */
    display: flex;
    align-items: center;
}
.text-black{
    color: #000;
}
/* Estilos específicos para vacunas-habitos-adultos */
.alert-vacunacion-compact {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.icon-vacunacion-small {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-vacunacion-small img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.texto-vacunacion-compact {
    font-size: 16px;
    line-height: 1.4;
}

.texto-vacunacion-compact strong {
    font-weight: 600;
}
/* === Enfermedades prevenibles con vacunas (Vacunas-habitos-adultos) === */

/* Desktop Table */
.table-enfermedades {
    width: 100%;
    border-collapse: separate;
    border-spacing: 12px 12px; /* Espacio entre TODOS los cuadros (horizontal y vertical) */
    margin-bottom: 2rem;
    background: transparent;
}

.table-enfermedades th {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    text-align: left;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 4px;
    box-shadow: none;
}

.table-enfermedades td {
    background: #fff7ef;
    border: 1px solid #c6c5c5;
    padding: 8px 12px;
    vertical-align: top;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: none;
}

/* Las celdas de la segunda columna (complicaciones) van sin color de fondo */
.table-enfermedades td:nth-child(2) {
    background: transparent; /* Sin fondo */
}

/* Eliminar el espacio adicional entre columnas ya que ahora usamos border-spacing */
.table-enfermedades td + td {
    border-left: 1px solid #e0e0e0; /* Mantener solo el borde normal */
}

.disease-info .disease-name {
    color: #ff6600;
    font-size: 16px !important;
    margin-bottom: 0.25rem;
    font-weight: 400;
    text-decoration: underline;
}

.disease-info .disease-name a {
    color: #ff6600;
    font-weight: 400;
    text-decoration: underline;
}

.disease-info .disease-description {
    color: #151515;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4;
}

.complications-text {
    color: #151515;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Mobile Cards */
.enfermedades-mobile {
    display: flex;
    flex-direction: column;
    gap: 0; /* Sin gap general */
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
}

.disease-header-mobile {
    background: #ff6600; /* Naranja original */
    color: #fff;
    font-weight: bold;
    padding: 8px 12px;
    font-size: 16px;
    border-radius: 4px;
    text-align: center; /* Centrar el texto */
    margin-bottom: 0.5rem; /* Menos separación entre header y contenido */
}

.disease-content-mobile {
    background: #fff7ef; /* Fondo beige original */
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #c6c5c5;
    margin-bottom: 0.5rem; /* Menos separación entre enfermedad y complicaciones */
}

.complications-content-mobile {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #c6c5c5;
    margin-bottom: 1.5rem; /* Separación entre grupos de enfermedades */
}


.disease-group-mobile:last-child {
    margin-bottom: 0; /* Sin margen en el último grupo */
}

.disease-name-mobile {
    color: #ff6600; /* Naranja original */
    font-size: 16px !important;
    margin-bottom: 10px;
    font-weight: 400;
    text-decoration: underline;
}

.disease-name-mobile a {
    color: #ff6600;
    font-weight: 400;
    text-decoration: underline;
}

.disease-description-mobile {
    color: #151515;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.4;
}

.complications-section-mobile {
    border-top: 1px solid #e0e0e0; /* Separador sutil */
    padding-top: 15px;
    margin-top: 15px;
}

.complications-header-mobile {
    font-weight: bold;
    color: #222;
    font-size: 1rem;
    margin-bottom: 8px;
}

.complications-text-mobile {
    color: #151515;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .enfermedades-mobile {
        padding: 0 10px;
        
    }
    
    .disease-header-mobile {
        padding: 12px 8px; /* Padding consistente */
    }
    
    .disease-content-mobile,
    .complications-content-mobile {
        padding: 8px 12px; /* Padding consistente */
    }
    
    .disease-name-mobile {
        font-size: 16px !important;
    }
    
    .disease-description-mobile,
    .complications-text-mobile {
        font-size: 16px;
    }
    
    .complications-section-mobile {
        padding-top: 15px;
        margin-top: 15px;
    }
}
/* Responsive: hide desktop table on mobile, show cards; reverse on desktop */
@media (max-width: 767.98px) {
    .d-md-block { display: none !important; }
    .d-md-none { display: block !important; }
}
@media (min-width: 768px) {
    .d-md-block { display: block !important; }
    .d-md-none { display: none !important; }
}
/* Mobile Table - Similar to desktop but adapted for small screens */
.table-enfermedades-mobile {
    width: 100%;
    border-collapse: separate;
    border-spacing: 8px 8px; /* Menos espacio en mobile */
    margin-bottom: 2rem;
    background: transparent;
}

.table-enfermedades-mobile th {
    background: #ff6600;
    color: #fff;
    font-weight: bold;
    text-align: left;
    padding: 10px 12px; /* Menos padding en mobile */
    font-size: 14px; /* Texto más pequeño */
    border-radius: 0;
    box-shadow: none;
}

.table-enfermedades-mobile td {
    background: #fff7ef;
    border: 1px solid #e0e0e0;
    padding: 12px; /* Menos padding en mobile */
    vertical-align: top;
    font-size: 14px; /* Texto más pequeño */
    border-radius: 0;
    box-shadow: none;
}

/* Las celdas de la segunda columna (complicaciones) van sin color de fondo */
.table-enfermedades-mobile td:nth-child(2) {
    background: transparent;
}

.disease-info-mobile .disease-name-mobile {
    color: #ff6600;
    font-size: 14px !important;
    margin-bottom: 0.25rem;
    font-weight: 500;
    text-decoration: underline;
}

.disease-info-mobile .disease-description-mobile {
    color: #444;
    margin-bottom: 0;
    font-size: 14px;
}

.complications-text-mobile {
    color: #222;
    margin-bottom: 0;
    font-size: 14px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .table-enfermedades-mobile {
        border-spacing: 6px 6px; /* Aún menos espacio en pantallas muy pequeñas */
    }
    
    .table-enfermedades-mobile th,
    .table-enfermedades-mobile td {
        padding: 8px 10px; /* Menos padding */
        font-size: 13px; /* Texto más pequeño */
    }
    
    .disease-info-mobile .disease-name-mobile {
        font-size: 13px !important;
    }
    
    .disease-info-mobile .disease-description-mobile,
    .complications-text-mobile {
        font-size: 13px;
    }
}

/* Estilos para la lista de hábitos saludables */
.habitos-saludables {
    margin: 2rem 0;
}

.habito-item {
    display: flex;
    align-items: flex-end;
   
    padding: 0.8rem;
   
    border-radius: 8px;
}

.habito-icon {
    width: 80px;
    height: 80px;
    background-color: #FF7900;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

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

.habito-content {
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.habito-description {
    color: #666;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 17px;
    
}

.habito-description strong {
    color: #333;
    font-weight: bold;
}

/* Responsive para mobile */
@media (max-width: 768px) {
    .habito-item {
        padding: 0.8rem;
        margin-bottom: 1rem;
    }
    
    .habito-icon {
        width: 80px;
        height: 80px;
        margin-right: 1rem;
    }
    
    .habito-icon img {
        width: 60px;
        height: 60px;
    }
    
    .habito-description {
        font-size: 0.9rem;
    }
}
/* ===== BLOQUE MENINGITIS MENINGOCOCO PADRES ===== */
.info-action-box {
    background-color: #FFF7EC;
    border: 2px solid #FF4E00;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}
.img-meningococo{
    width: 100% !important;
}

.info-action-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.info-action-text {
    color: #333;
    line-height: 1.6;
    margin: 0;
}
/* ===== BLOQUE CINCO VERDADES NEUMOCOCO ===== */
.icon-verdades{
    width: 80px; 
    height: 80px; 
    flex-shrink: 0;
}
/* ===== BLOQUE VACUNAS SEGURAS PARA NIÑOS ===== */
.banner-content-right {
    margin-left: -1px;
}

.icon-cinco-verdades{
    margin-left: 130px !important;
}
@media (min-width: 992px) {
    .single-line-btn {
        float: left;
        margin-left: -67px;
    }
}
.compartir-blog {
    border: 2px solid #FF6D00;
    color: #FF6D00;
    font-weight: bold;
    padding: 0.75em 1.5em;
    border-radius: 5px;
    background-color: #fff7ec;
    transition: background-color 0.3s ease;
}

.compartir-blog img {
    width: 20px;
    height: 20px;
}
/* Centrar botón de compartir SOLO en móviles */
@media (max-width: 767px) {
    /* Scopeado a .blog-article-hero: sin esto, el selector genérico
       .d-flex.justify-content-between matcheaba cualquier fila con esas dos
       clases Bootstrap en OTRAS páginas (ej. el footer-logos-row del footer
       global), forzando flex-direction:column donde no correspondía. */
    .blog-article-hero .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: center !important;
    }

    .compartir-blog {
        display: block !important;
        margin: 10px auto 0 auto;
        width: fit-content;
    }
  
    
} 
.article-list a {
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: color 0.3s ease;
}

.article-list a:hover {
    color: #FF6D00; /* Color naranja */
}

.article-list a:hover::after {
    content: "↓"; /* Flecha hacia abajo */
    color: #FF6D00;
    margin-left: 8px;
    font-size: 14px;
}

/* ================================
   Estilos para la paginación del blog desktop
   ================================ */

/* Estilos específicos para la paginación del blog desktop */
.desktop-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.desktop-pagination .swiper-pagination-bullet {
  width: 35px !important;
  height: 5px !important;
  background-color: #e6cfc4 !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.desktop-pagination .swiper-pagination-bullet-active {
  background-color: #f2572d !important;
}

/* Estilos para la paginación del blog mobile */
.mobile-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 18px !important;
  padding: 16px 20px !important;
}

.mobile-pagination .swiper-pagination-bullet {
  width: 35px !important;
  height: 5px !important;
  background-color: #e6cfc4 !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.mobile-pagination .swiper-pagination-bullet-active {
  background-color: #f2572d !important;
}

/* ================================
   Estilos para las opciones de filtros del blog
   ================================ */

.custom-option {
  padding: 12px 16px;
  font-size: 14px;
  color: #a0a0a0;
  cursor: pointer;
  background-color: #f0efed;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: left;
  display: block;
  width: 100%;
  border: none;
  margin: 0;
}

.custom-option:hover {
  background-color: #f0efed;
  color: #a0a0a0;
}

.custom-option:last-child {
  border-bottom: none;
}

/* Contenedor de opciones para que se apilen verticalmente */
.custom-options {
  display: none !important;
  flex-direction: column !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: white !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.05) !important;
  z-index: 100 !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* Cuando el select está abierto, mostrar las opciones */
.custom-select-wrapper.open .custom-options {
  display: flex !important;
}

/* ================================
   Estilos para el test de herpes zóster
   ================================ */

.test-intro-content h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900; /* Black según Figma */
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 20px;
  color: #FFFFFF; /* White según Figma */
  white-space: nowrap;
}


/* Estilos para test intro content */
.test-intro-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: 0 1em;
  text-align: center;
}

.test-intro-content h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900; /* Black según Figma */
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0;
  margin-bottom: 20px;
  color: #FFFFFF; /* White según Figma */
  white-space: nowrap;
}

.test-intro-content p {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400; /* Regular */
  font-size: 24px; /* Según diseño Figma */
  line-height: 1.2; /* 120% */
  letter-spacing: 0;
  margin-bottom: 30px;
  color: #FFFFFF; /* White según Figma */
  text-align: center;
}

/* Estilos para mostrar/ocultar títulos según dispositivo */
.desktop-title {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900; /* Black según Figma */
  line-height: 1.2;
  letter-spacing: 0;
  color: #FFFFFF; /* White según Figma */
}

.mobile-title {
  display: none;
  font-family: 'Inter', sans-serif !important;
  font-weight: 900; /* Black según Figma */
  line-height: 1.2;
  letter-spacing: 0;
  color: #FFFFFF; /* White según Figma */
}

/* Estilos para mobile del test de herpes */
@media (max-width: 768px) {
  .test-intro-section img {
    content: url('/images/fondo-test-mobile.png');
  }
  
  .test-intro-content {
    top: 61%;
  }
  
  .desktop-title {
    display: none;
  }
  
  .mobile-title {
    display: block;
    font-size: 24px !important;
    margin-top: 40px;
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important; /* Black según Figma */
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    color: #FFFFFF !important; /* White según Figma */
  }
  
  .test-intro-content p {
    font-size: 18px;
    margin-top: 20px;
  }
  
  .test-intro-content button {
    margin-top: 30px;
  }
}

/* Título de 18px para meningitis-meningococo-padres */
.meningococo-title-18 {
  font-size: 18px !important;
}

/* Secuelas o complicaciones de la meningitis por meningococo */
.meningococo-secuelas-title {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.4;
  margin-bottom: 16px;
}

.meningococo-secuelas-intro {
  font-size: 16px;
  color: #4B4B4B;
  line-height: 1.4;
  margin-bottom: 16px;
}

.meningococo-secuelas-list {
  font-size: 16px;
  color: #4B4B4B;
  line-height: 1.4;
  margin-bottom: 16px;
  padding-left: 20px;
  list-style-type: disc;
}

.meningococo-secuelas-list li {
  margin-bottom: 8px;
  list-style-type: disc;
  display: list-item;
}

.meningococo-secuelas-divider {
  height: 1px;
  background-color: #FF4E00;
  width: 100%;
  margin: 16px 0;
}

.meningococo-secuelas-conclusion {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.5;
  text-align: center;
  margin: 16px 0;
}

/* Alerta informativa sobre vacunas recomendadas */
.meningococo-vacunas-alert {
  margin: 16px 0;
  text-align: center;
}

.meningococo-vacunas-divider {
  height: 1px;
  background-color: #FF4E00;
  width: 100%;
  margin: 16px 0;
}

.meningococo-vacunas-text {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.5;
  margin: 16px 0;
}

.meningococo-vacunas-link {
  color: #FF4E00;
  text-decoration: none;
  font-weight: 700;
}

.meningococo-vacunas-link:hover {
  text-decoration: underline;
}

/* Prevención de la meningitis */
.meningococo-prevencion {
  margin-top: 24px;
}

.meningococo-prevencion-title {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.4;
  margin-bottom: 16px;
}

.meningococo-prevencion-text {
  font-size: 16px;
  color: #4B4B4B;
  line-height: 1.4;
  margin-bottom: 16px;
}

.meningococo-related-block {
  border-left: 6px solid #FF4E00;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 48px;
  margin: 24px 0;
}

.meningococo-related-title {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.meningococo-related-link-text {
  color: #FF4E00;
}

.meningococo-related-btn {
  background-color: #FF4E00;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  padding: 16px 32px;
  border-radius: 100px;
  border: none;
  text-decoration: underline;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0), 0px 81px 32px 0px rgba(0, 0, 0, 0.01), 0px 45px 27px 0px rgba(0, 0, 0, 0.05), 0px 20px 20px 0px rgba(0, 0, 0, 0.09), 0px 5px 11px 0px rgba(0, 0, 0, 0.1), 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.meningococo-related-btn:hover {
  background-color: #e64500;
  color: #FFFFFF;
  text-decoration: underline;
}

/* Sección final vacunas seguras niños */
.vacunas-seguras-final-section {
  gap: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vacunas-seguras-final-image {
  flex: 0 0 auto;
}

.vacunas-seguras-final-img {
  width: 365px;
  height: 163px;
  border-radius: 18px;
  object-fit: cover;
}

.vacunas-seguras-final-text {
  flex: 1 0 0;
}

.vacunas-seguras-final-paragraph {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 0;
}

.vacunas-seguras-final-bold {
  font-weight: 700;
}

@media (max-width: 768px) {
  .vacunas-seguras-final-section {
    flex-direction: column;
    gap: 16px;
  }
  
  .vacunas-seguras-final-img {
    width: 100%;
    max-width: 365px;
    height: auto;
    aspect-ratio: 365 / 163;
  }
  
  .vacunas-seguras-final-text {
    width: 100%;
  }
}

/* Recuadro informativo */
.meningococo-info-box {
  background-color: #FFF7EC;
  border: 1px solid #FF4E00;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meningococo-info-title {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.4;
  margin: 0;
}

.meningococo-info-text {
  font-size: 16px;
  color: #4B4B4B;
  line-height: 1.4;
  margin: 0;
}

/* Green Circle Icon for Meningococo Contagio Section */
.green-circle-icon {
  display: flex;
  width: 80px;
  height: 80px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #00C84C;
  flex-shrink: 0;
}

/* Meningococo Prevention Banner */
.meningococo-prevention-banner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.meningococo-prevention-line {
  height: 1px;
  width: 100%;
  background-color: #00C84C;
}

.meningococo-prevention-text {
  font-size: 18px;
  font-weight: 700;
  color: #151515;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

.herpes-complicaciones-subtitle {
  font-size: 18px;
}

.herpes-vs-genital-intro-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

.herpes-vs-genital-section-anchor {
  scroll-margin-top: 100px;
}

/* ====== Blog: Vacunarse después de los 50 - Beneficios vacunación (Figma 11487:52731) ====== */
.beneficios-vacunacion-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.beneficios-vacunacion-img-wrap {
  flex: 1 1 0;
}

.beneficios-vacunacion-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

.beneficios-vacunacion-text {
  flex: 0 0 550px;
  max-width: 550px;
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

.sup-space {
  display: inline-block;
  width: 4px;
}

/* ====== Blog: Vacunarse después de los 50 - Enfermedades prevenibles (Figma 11487:52753) ====== */
.enfermedades-vacunacion-section {
  margin-top: 24px;
}

.enfermedades-vacunacion-title {
  color: #151515;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px 0;
}

.disease-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.disease-text-col {
  width: 550px;
  max-width: 550px;
}

.disease-name {
  color: #FF4E00;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  margin: 0 0 16px 0;
}

.disease-desc {
  color: #4B4B4B;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.disease-desc sup {
  font-size: 10.32px;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: super;
}

.disease-image-col {
  flex: 1 1 0;
}

.disease-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

.disease-paragraph {
  color: #4B4B4B;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.disease-list {
  color: #4B4B4B;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  list-style: decimal !important;
  list-style-position: outside;
  padding-left: 22px;
  margin: 16px 0 0 0;
}

.disease-list li::marker {
  font-weight: 700;
  color: #4B4B4B;
}

.disease-list strong {
  font-weight: 700;
}

.disease-paragraph sup,
.disease-list sup {
  font-size: 10.32px;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: super;
}

.disease-list li {
  display: list-item;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .disease-row {
    flex-direction: column;
  }

  .disease-text-col {
    width: 100%;
    max-width: 100%;
  }

  .disease-image {
    height: 200px;
  }
}
/* ====== Fin Enfermedades prevenibles ====== */

@media (max-width: 768px) {
  .beneficios-vacunacion-row {
    flex-direction: column;
  }

  .beneficios-vacunacion-text {
    flex: 1 1 auto;
    max-width: 100%;
  }
}
/* ====== Fin Blog Vacunarse después de los 50 ====== */

.herpes-vs-genital-section-title {
  color: #151515;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.herpes-vs-genital-section-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 24px;
}

.herpes-vs-genital-conclusion-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

.herpes-vs-genital-alert-text {
  color: #151515;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
}

.importancia-vacunas-intro-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

.importancia-vacunas-section-title {
  color: #151515;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.importancia-vacunas-section-text {
  color: #4B4B4B;
  font-size: 16px;
  line-height: 1.5;
}

/* ============================
   Estilos exclusivos - Blog Vacunas Combinadas - Sección principal
   ============================ */
.vacunas-combinadas-section-title {
  color: #151515;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0;
}

.vacunas-combinadas-section-text {
  color: #4B4B4B;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0;
}

.vacunas-combinadas-section-subtitle {
  color: #4B4B4B;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0;
}

/* ====== BANNER CONSULTA MÉDICO - VACUNACIÓN ADOLESCENTES ====== */
.vacunacion-adolescentes-cta-banner {
  background-color: #FFD6A5;
  border-radius: 8px;
  padding: 24px;
  width: 100%;
}

.vacunacion-adolescentes-cta-content {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.vacunacion-adolescentes-cta-icon {
  flex-shrink: 0;
  width: 55.215px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vacunacion-adolescentes-cta-icon-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.vacunacion-adolescentes-cta-body {
  flex: 1;
  min-width: 0;
}

.vacunacion-adolescentes-cta-text {
  color: #151515;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.vacunacion-adolescentes-cta-highlight {
  color: #FF4E00;
}

.vacunacion-adolescentes-cta-btn.btn-custom {
  background-color: #FF4E00;
  color: #FFFFFF;
  height: 50px;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  border: none;
  box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0),
    0px 81px 32px 0px rgba(0, 0, 0, 0.01),
    0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09),
    0px 5px 11px 0px rgba(0, 0, 0, 0.1),
    0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vacunacion-adolescentes-cta-btn.btn-custom:hover {
  background-color: #E64500;
  color: #FFFFFF;
  text-decoration: none;
}

@media (max-width: 768px) {
  .vacunacion-adolescentes-cta-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .vacunacion-adolescentes-cta-btn.btn-custom {
    width: 100%;
    justify-content: center;
  }
}
/* ====== Fin BANNER CONSULTA MÉDICO - VACUNACIÓN ADOLESCENTES ====== */

/* ================================
   Figma - Blog meningitis (copy + spacing)
   Node: 11487:53134
   ================================ */

/* ================================
   Figma - Banner blog hero (11051:20938)
   Título, descripción y meta tags
   ================================ */

/* Separación breadcrumb → título, descripción, tags y compartir (solo columna de contenido) */
@media (min-width: 992px) {
  body.new-background-class .content.col-lg-8 > .blog-article-hero {
    margin-top: 2.5rem;
    padding-top: 0;
  }
}

body.new-background-class .blog-article-hero .titleprincipal {
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 0;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #151515;
}

body.new-background-class .blog-article-hero .titleprincipal:has(+ p) {
  margin-bottom: 12px;
}

body.new-background-class .blog-article-hero .titleprincipal:not(:has(+ p)) {
  margin-bottom: 34px;
}

body.new-background-class .blog-article-hero > p,
body.new-background-class .blog-article-hero .titleprincipal + p {
  margin-top: 0 !important;
  margin-bottom: 34px !important;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #4b4b4b;
}

body.new-background-class .blog-article-hero > .d-flex.align-items-center {
  margin-top: 0 !important;
}

body.new-background-class .blog-article-hero > .d-flex.align-items-center > .d-flex {
  display: flex;
  align-items: center;
  gap: 20px;
}

body.new-background-class .blog-article-hero > .d-flex.align-items-center .textosinicio {
  margin: 0 !important;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #ff9770;
}

body.new-background-class .blog-article-hero > .d-flex.align-items-center .text-orange {
  margin: 0 !important;
  font-size: 0;
  width: 4px;
  height: 4px;
  min-width: 4px;
  background-color: #ff9770;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}

/* Separadores • con clase textosinicio (filas pares = punto Figma 4px) */
body.new-background-class .blog-article-hero > .d-flex.align-items-center > .d-flex > span.textosinicio:nth-child(even) {
  font-size: 0;
  width: 4px;
  height: 4px;
  min-width: 4px;
  padding: 0;
  background-color: #ff9770;
  border-radius: 50%;
  overflow: hidden;
}

/* Tipografía del párrafo según Figma (Inter 16 / 1.5 / #4B4B4B) */
.figma-body-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #4b4b4b;
}

.figma-body-text .figma-body-text__footnote {
  display: inline-block;
  margin-left: 4px; /* evita que se vea pegado al punto final */
  font-size: 10.32px;
  line-height: 1.5;
}

/* ================================
   Figma - Espaciado entre títulos y texto
   Nodos: 11487:53132, 11487:53136
   ================================ */

/* Espaciado de 24px entre .custom-title1 y el siguiente párrafo */
.custom-title1 {
  margin-bottom: 24px;
  line-height: 1.2; /* Según Figma: H3/H3 Bold 24 */
}

.custom-title1 + p {
  margin-top: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #4b4b4b;
}

/* Separación de 48px para el título de síntomas después de vacunación (Figma 11487:53226) */
#sintomas-vacuna.custom-title1 {
  margin-bottom: 32px;
}

.titlesintomas {
  margin-top: 2rem;
}

/* Ajuste para subir el párrafo después del título de síntomas */
#sintomas-vacuna + p {
  margin-top: -16px;
}

/* ================================
   Figma - Banner Infórmate sobre
   Nodo: 11487:53232
   ================================ */

.banner-informate-meningitis {
  background-image: url(/images/banner-informate.png);
  background-size: cover;
  background-position: center;
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
}

.banner-informate-meningitis::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(-89.72deg, rgba(255, 255, 255, 0) 56.95%, rgb(255, 255, 255) 113.49%);
  z-index: 1;
}

.banner-informate-meningitis::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  mix-blend-mode: color;
  z-index: 1;
}

.banner-blog-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 588px;
}

.banner-tag-text {
  color: #ff9770;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 3.84px;
  text-transform: uppercase;
  margin: 0;
}

.banner-title-text {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: #151515;
  margin: 0;
}

.banner-cta-btn {
  background: #ff4e00;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  padding: 16px 32px;
  height: 50px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-shadow: 0px 126px 35px 0px rgba(0, 0, 0, 0),
    0px 81px 32px 0px rgba(0, 0, 0, 0.01),
    0px 45px 27px 0px rgba(0, 0, 0, 0.05),
    0px 20px 20px 0px rgba(0, 0, 0, 0.09),
    0px 5px 11px 0px rgba(0, 0, 0, 0.1),
    0px 0px 0px 0px rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}

.banner-cta-btn:hover {
  background: #e64500;
  color: #ffffff;
  text-decoration: none;
}

/* ================================
   Figma - Sección de síntomas
   Nodo: 11487:53169
   ================================ */

.symptoms-grid-figma {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 8px 0;
  width: 100%;
}

.symptoms-row-figma {
  display: flex;
  gap: 20px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

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

.symptom-icon-container {
  background: #00c84c;
  border-radius: 100px;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.symptom-icon-figma {
  width: 67px;
  height: 72px;
  object-fit: contain;
}

.symptom-text-figma {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #4b4b4b;
  text-align: center;
  margin: 0;
  min-width: 100%;
}

.symptoms-cta {
  margin-top: 0;
  padding-top: 0;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .symptoms-row-figma {
    gap: 16px;
  }
  
  .symptom-item-figma {
    min-width: 120px;
    flex: 0 0 120px;
  }
  
  .symptom-icon-container {
    width: 75px;
    height: 75px;
  }
  
  .symptom-icon-figma {
    width: 45px;
    height: 45px;
  }
}

/* ================================
   Figma - Sección de secuelas
   Nodo: 11487:53209
   ================================ */

.secuelas-niño .col-lg-8 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.secuelas-niño .col-lg-8 .figma-body-text {
  margin: 0;
}

/* ================================
   Figma - Sección de prevención
   Nodo: 11487:53219
   ================================ */

.prevencion-content-figma {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prevencion-content-figma .figma-body-text {
  margin: 0;
}

.prevencion-list-figma {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prevencion-list-figma li {
  margin: 0;
  padding: 0;
}

.prevencion-list-figma li strong {
  font-weight: 700;
}

/* ================================
   Figma - Sección de importancia de vacunar
   Nodo: 11487:53222
   ================================ */

.importancia-vacuna-list-figma {
  list-style-type: disc;
  padding-left: 1.5em;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.importancia-vacuna-list-figma li {
  margin: 0;
  padding: 0;
}

/* Estilos para la sección de complicaciones según Figma (node-id: 11487-53026) */
.complications-list-figma {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}

.complication-item-figma {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.complication-icon-container {
  background: #FF7900;
  border-radius: 100px;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.complication-icon {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.complication-text-figma {
  flex: 1 0 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #4B4B4B;
  margin: 0;
  min-width: 0;
}

.complication-final-text-figma {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: #4B4B4B;
  margin: 0;
}

/* Espaciados para mitos-herpes-zoster */
.figma-body-text-spacing-16 {
  margin-top: 16px;
}

.figma-body-text-spacing-24 {
  margin-top: 24px;
}

.figma-body-text-spacing-34 {
  margin-top: 34px;
}

.figma-body-text-no-bottom {
  margin-bottom: 0;
}

.complications-list-figma-spacing {
  margin-top: 34px;
}

.list-unstyled-no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

/* Para que el párrafo y la lista queden unidos sin espacio */
.figma-body-text-no-bottom + .list-unstyled-no-margin {
  margin-top: 0;
}

.list-item-flex {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.list-item-flex:last-child {
  margin-bottom: 0;
}

.list-bullet {
  flex-shrink: 0;
}

.list-text {
  flex: 1;
}

/* Estilos para imagen de herpes diseminado según Figma (node-id: 11487-53062) */
.herpes-diseminado-image-container {
  position: relative;
  width: 100%;
  height: 230px;
  border-radius: 18px;
  overflow: hidden;
}

.herpes-diseminado-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.herpes-diseminado-label {
  position: absolute;
  top: 18px;
  right: 18px;
  background: #F36633;
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
}

/* Estilos para texto de conclusión según Figma (node-id: 11487-53074) */
.mitos-conclusion-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #151515;
  text-align: center;
  margin: 0;
}

/* Alinear "En este artículo:" con "Explora por enfermedad" (desktop) */
@media (min-width: 992px) {
  body.new-background-class .col-lg-4 .banner-img10,
  body.new-background-class .col-lg-4 .imgvacunacion {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.new-background-class .blog-article-hero {
    min-height: 332px;
  }

  body.new-background-class .content.col-lg-8 .article-section {
    padding-top: 0;
  }

  body.new-background-class .content.col-lg-8 .article-section > .article-heading,
  body.new-background-class .content.col-lg-8 .blog-toc-heading {
    padding-top: 30px;
    margin-top: 0;
  }

  body.new-background-class .content.col-lg-8 .article-heading1.blog-toc-heading {
    padding-top: 30px;
  }
}