/*
Recursos:
https://placeholder.com/
https://fonts.google.com/
https://www.cssmatic.com/box-shadow

*/

/* ========================================
   1. VARIABLES CSS Y CONFIGURACIÓN GLOBAL
   ======================================== */
:root {
  --bk-sm: 576px;
  --bk-md: 768px;
  --bk-lg: 992px;
  --bk-xl: 1200px;
  --bk-xxl: 1400px;
  --gap-number: 10px;
  --light-orange-color: #ff7900;
  --orange-color: #ff4e00;
  --peach-color: #ffb96d;
  --white-color: #f5f5f5;
  --text-color: #4b4b4b;
  --text-gray: #3a3e56;
  --line-color: #c6c5c5;
  --black-color: #151515;
  --red-colose: "#BE3A28";
  --font-size: 16px;
  --font-family: "Inter", sans-serif;
  --border-radius: 24px;
  --box-shadow: 0px 20px 20px -5px rgba(0, 0, 0, 0.1);
  --swiper-theme-color: #ff4e00;
  --swiper-pagination-bullet-inactive-color: #ff4e00d6;
  --cat-color-wine: #461104;
  --cat-color-green: #00c84c;
  --cat-color-blue: #493bdd;
  --cat-color-violet: #59018e;
  --cat-color-yellow: #fab503;
  --cat-color-red: #e72e49;
  --cat-color-orange: #ff5500;
}

body {
  font-family: var(--font-family);
  overflow-x: hidden;
}

/* Reset */

html {
  box-sizing: border-box;
  font-size: var(--font-size);
  font-family: var(--font-family);
  overflow-x: hidden;
}

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

body,
p,
ol,
ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 16px;
  color: #4b4b4b;
}

ol,
ul {
  list-style: none;
}

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

/* Structure */
body {
  background: #fffbfa;
  color: var(--text-color);
  font-size: var(--font-size);
  padding-top: 0; /* Remove top padding to allow full background coverage */
  min-height: 100vh;
  position: relative;
}

/* Slider background states */

h1 {
  color: var(--black-color);
  font-weight: 900;
  font-size: 40px;
}

h2 {
  color: var(--black-color);
  font-weight: 700;
  font-size: 32px;
}

h3 {
  color: var(--black-color);
  font-weight: 900;
  font-size: 1rem;
}

h4 {
  color: #ff9770;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 900;
}

select:focus,
input[type="text"]:focus {
  border-color: var(--light-orange-color) !important;
  box-shadow: none !important;
}

/* Header styles */
header.container {
  /* Especificidad de clase para que gane siempre al max-width responsive
     de Bootstrap (.container en md/lg/xl), que si no clampea el header
     por debajo de los 1280px con los que está diseñado el navbar. */
  max-width: 1280px;
}

header {
  position: fixed;
  /* top: 30px; quitado para subir el navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1280px; /* Ancho del navbar según Figma */
  background: transparent;
  padding: 32px 90px 24px 90px; /* Según diseño Figma */
}
header > a {
  width: 130px;
}

/* Main content wrapper */

/* Content overlay */

h1 {
  color: var(--black-color);
  font-weight: 900;
  font-size: 40px;
}

h2 {
  color: var(--black-color);
  font-weight: 700;
  font-size: 32px;
}

h3 {
  color: var(--black-color);
  font-weight: 900;
  font-size: 1rem;
}

h4 {
  color: #ff9770;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 900;
}

select:focus,
input[type="text"]:focus {
  border-color: var(--light-orange-color) !important;
  box-shadow: none !important;
}


/* header */
header > a {
  width: 130px;
}

/* nav */
/* nav */

/* ========================================
   3. NAVEGACIÓN Y HEADER
   ======================================== */

  
nav {
  --nav-padding-x: 40px;
  background-color: #fff;
  border-radius: 40px;
  width: 100%;
  max-width: 1280px;
  padding: 12px var(--nav-padding-x);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  box-shadow:
    0px 856px 240px 0px rgba(0, 0, 0, 0),
    0px 548px 219px 0px rgba(0, 0, 0, 0.01),
    0px 308px 185px 0px rgba(0, 0, 0, 0.04),
    0px 137px 137px 0px rgba(0, 0, 0, 0.06),
    0px 34px 75px 0px rgba(0, 0, 0, 0.07),
    0px 0px 0px 0px rgba(0, 0, 0, 0.07);
}

nav .wrap-menu {
  display: flex;
  align-items: center;
  gap: 24px; /* Según diseño Figma */
  flex: 1 0 0;
}

nav .wrap-menu .wrap-nav a {
  text-decoration: none;
  color: var(--text-color);
  padding: 16px 20px;
  border: 1px solid transparent;
  border-radius: 100px;
  font-size: 14px;
  line-height: 16.8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

nav .wrap-menu .wrap-nav a:hover {
  border-color: var(--orange-color);
}

a#nav-magnifier {
  box-shadow: 0px 26px 40px 0px rgba(0, 0, 0, 0.1) !important;
}

nav .wrap-menu a.active {
  background-color: var(--light-orange-color);
  color: var(--white-color);

  & img {
    filter: brightness(4);
  }
}
nav .wrap-logo a,
nav .wrap-logo a:hover,
nav .wrap-logo a:focus,
nav .wrap-logo a:active {
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  border: none !important;
}

nav .wrap-logo a img {
  width: 79px;
  height: 56px;
  flex-shrink: 0;
  aspect-ratio: 79 / 56;
  padding: 0;
}

#nav-magnifier.active img {
  rotate: none !important;
}

nav .wrap-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
}

nav .wrap-nav a img {
  width: 18px;
  height: 18px;
}

nav .wrap-nav-extend {
  display: none;
  padding: 75px 64px 24px 64px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 0 0 16px 16px;
  background: #fff;
  overflow: hidden;
  flex-basis: calc(100% + 2 * var(--nav-padding-x));
  width: calc(100% + 2 * var(--nav-padding-x));
  margin: 0 calc(-1 * var(--nav-padding-x)) -12px calc(-1 * var(--nav-padding-x));
}

#nav-burguer {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
}

/* subemenu */

.submenu-first {
  justify-content: center;
}

.submenu-first,
.submenu-second {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 48px;
}

.submenu-detalle {
  display: flex;
  width: 340px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  align-self: stretch;
}
.submenu-detalle1 {
  width: 340px;
}

.submenu-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line-color);
}
.submenu-detalle p {
  font-size: 14px !important;
}
.textvacunas {
  white-space: nowrap !important;
  font-size: 24px !important;
  line-height: 120%;
}
.submenu-fourth {
  display: flex;
  width: 100%;
}

.submenu-fourth {
  display: flex;
  width: 100%;
}

.submenu-fourth .submenu-detalle {
  width: 50%;
  padding: 0 40px;
}

.submenu-fourth .submenu-links {
  width: 50%;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.submenu-third {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.submenu-links a {
  text-decoration: none !important;
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.submenu-links a:hover {
  border-bottom-color: var(--orange-color);
}

.submenu-links a:hover span {
  color: var(--orange-color);
}

.submenu-links a:hover img[src="/images/arrow_forward_black.svg"] {
  content: url("/images/arrow_forward_orange.svg");
}

.submenu-links a:hover img[src="/images/icons/Vector.svg"] {
  content: url("/images/Vector.svg");
}

.submenu-col a img {
  width: 24px;
  height: 24px;
}

.submenu-col a span {
  color: var(--text-color);
  font-family: Inter;
  font-size: 14px;
  font-weight: 700;
  line-height: 17.313px;
}

.submenu-links-grid {
  display: flex;
  flex-direction: row;
  gap: 3em;
  align-items: flex-start;
  width: 100%;
  max-width: 614px;
}

.submenu-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 283px;
  gap: 18px;
  align-self: stretch;
}
.submenu-magnifier {
  display: flex;
  height: 70px;
  align-items: center;
  justify-content: center;
}

.submenu-magnifier input[type="text"] {
  background-color: transparent;
  border: 1px solid var(--line-color);
  color: var(--text-color);
  border-radius: var(--border-radius);
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  min-width: 300px;
  width: 40%;
}

.submenu-magnifier input[type="submit"] {
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  margin-left: 20px;
}

/* banner-vivir */
.banner-vivir {
  display: flex;
  padding: 16px 39px;
  justify-content: center;
  align-items: center;
  gap: 22px;
  align-self: stretch;
  border-radius: 8px;
  background: #59018f;
}

.banner-vivir p {
  color: var(--UI-GSK-White, #fff);
  /* P1/P1 Regular 18 */
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.banner-vivir h3 {
  color: var(--UI-GSK-White, #fff);
  /* H2/H2 Bold 32 */
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

/* breadcrumb */
.breadcrumb {
  padding: 136px 89px 0 89px;
  margin-bottom: 20px;
  gap: 4px;
  --bs-breadcrumb-divider-color: var(--text-color);

  & .breadcrumb-item {
    font-size: 14px;
    line-height: 1.2;
    margin-top: 20px;
  }

  & .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
  }

  & .breadcrumb-item + .breadcrumb-item::before {
    padding-right: 4px;
  }

  & .breadcrumb-item a {
    text-decoration: none;
    color: var(--text-color);
  }

  & .breadcrumb-item.active {
    font-weight: bold;
    color: var(--text-color);
  }
}

/* swiper */

.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  width: 35px;
  border-radius: 3px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: none;
}

/* #p-slider-enfermedades .swiper-pagination-bullets {
	display: none;
} */

#slider-enfermedades-vacunas .swiper-button-prev {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: var(--border-radius);
  top: -160px;
  left: 160px;
  background-color: var(--orange-color);
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slider-enfermedades-vacunas .swiper-button-prev img {
  transform: rotate(180deg);
  max-width: 100%;
}

#slider-enfermedades-vacunas .swiper-button-next {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: var(--border-radius);
  top: -85px;
  left: 263px;
  background-color: var(--orange-color);
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slider-enfermedades-vacunas .swiper-button-next img {
  max-width: 100%;
}

.align-left {
  display: flex;
  justify-content: flex-start;
  /* Aligns items to the left */
}

/* Solo afecta a los botones del slider de enfermedades */
.controles-enfermedades {
  margin-left: -106px;
  padding-top: 39px;
}

.controles-enfermedades .swiper-pagination {
  text-align: center;
}
.btn-enfermedades-prev {
  top: 499px !important;
  left: calc(50% - -5px) !important;
}
.btn-enfermedades-next {
  top: 498px !important;
  left: calc(54% - -5px) !important;
}

.controles-enfermedades .swiper-button-prev,
.controles-enfermedades .swiper-button-next {
  z-index: 20; /* Eleva las flechas sobre cualquier otro contenido */
}

.swiper-preventable-diseases .swiper-slide {
  width: 280px;
}

.swiper-preventable-diseases .swiper-wrapper {
  gap: 10px;
}

.swiper-notas .swiper-slide,
.swiper-tre-notas .swiper-slide,
.swiper-conoce-mas .swiper-slide {
  width: 100% !important;
  max-width: 280px !important;
}
.swiper-tre-notas12 .swiper-slide12,
.swiper-slide12 {
  width: 100% !important;
  max-width: 300px !important;
}

.swiper-tre-notas .swiper-slide .box-white {
  min-height: 530px;
  padding-bottom: 30px;
  align-items: flex-start;
  margin-bottom: 30px;

  & .float-category {
    background: var(--cat-color-orange);
    color: var(--white-color);
    line-height: 30px;
    height: 30px;
    display: inline-block;
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 0;
    left: 30px;
    white-space: nowrap;
    /* Mantener el texto en una sola línea */
    overflow: hidden;
    /* Ocultar el desbordamiento */
    text-overflow: ellipsis;
    /* Mostrar los tres puntos al final */
    max-width: 320px;
    z-index: 100;
  }
  & .float-category15 {
    margin-top: 4px !important;
    font-size: 12px;
  }

  & .img-thumb-notas {
    object-fit: contain;
    width: 100%;
    padding-bottom: 20px;
  }

  & h2 {
    text-align: left;
    padding: 0 30px;
    color: #4b4b4b;
    font-size: 24px;
  }

  & h3 {
    text-align: left;
    padding: 0 30px;
  }

  & p {
    text-align: left;
    padding: 0 30px;
  }

  & a.text-orange {
    position: absolute;
    display: block;
    bottom: 60px;
    left: 30px;
  }
}

/* Dot Styles */

ul {
  list-style-type: none;
  /* Elimina los puntos predeterminados de la lista */
  padding: 0;
}

li.has-dot {
  position: relative;
  /* Establece el contexto de posicionamiento para el pseudo-elemento */

  /* Espacio para el punto personalizado */
  text-align: left;
}

li

/* Banner Vivir */

/* Puntos de vacunación */

.textbanner12 {
  color: #4b4b4b;
}

.banner-punto-de-vacunacion .content {
  display: flex;
  max-width: 557px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.banner-punto-de-vacunacion .content .tag-text {
  color: var(--UI-GSK-Light-Orange, #ff9770);

  /* SubH 16 */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
  /* 19.2px */
  letter-spacing: 3.84px;
  text-transform: uppercase;
}

/* Banner Descubriste */

.banner-descubriste {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  padding-left: 48px;
  padding-right: 48px;
}

.banner-descubriste .image-container {
  position: relative;
  display: flex;

  width: 295.698px;
  height: 330.698px;
  flex-shrink: 0;
  background-image: url("/images/familia2.png");
  background-size: cover;
  background-position: center;
}

.banner-descubriste .image-container .ellipse-1 {
  position: absolute;
  left: -23px;
  top: 62px;
}

.banner-descubriste .image-container .ellipse-2 {
  position: absolute;
  right: 10px;
  bottom: 23px;
}

.banner-descubriste .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.banner-descubriste .content h3 {
  color: var(--UI-GSK-Black, #151515);

  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
  /* 48px */
}

/* Referencias */

.referencias {
  display: flex;
  padding: 0px 0px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.refe {
  display: flex;
  margin-top: 20px;

  flex-direction: column;
  align-items: flex-start;

  align-self: stretch;
}

.referencias .text-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.referencias p {
  font-size: 14px !important;
}

.referencias .first::before {
  content: "1.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .second::before {
  content: "2.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .third::before {
  content: "3.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .fourth::before {
  content: "4.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .fifth::before {
  content: "5.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .sixth::before {
  content: "6.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .seventh::before {
  content: "7.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .eight::before {
  content: "8.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .ninth::before {
  content: "9.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .ten::before {
  content: "10.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.referencias .eleventh::before {
  content: "11.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Light Orange Circle Start */

.light-orange-circle {
  display: flex;
  width: 108px;
  height: 108px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: 100px;
  background: var(--UI-GSK-Orange-01, #ff7900);
}

.light-orange-circle p {
  text-align: center;
}

/* Light Orange Circle End */

/* footer  */

footer {
  color: var(--white-color);
  font-size: 12px;
}

footer a {
  color: var(--white-color);
  text-decoration: none;
  line-height: 30px;
  font-size: 12px;
}

footer .footer-logos .container, footer .footer-columns .container {
  max-width: 1120px;
  width: 100%;
}

footer .footer-columns .container {
  padding-left: 0;
  padding-right: 0;
}

.footer-columns > .container > .row {
  --bs-gutter-x: 0;
}

@media (min-width: 992px) {
  .footer-columns > .container > .row {
    gap: 82px;
  }

  .footer-columns > .container > .row > .col-lg-3 {
    width: calc(25% - 41px);
  }

  .footer-columns > .container > .row > .col-lg-6 {
    width: calc(50% - 82px);
  }

  .footer-logos-row .wrap-rrss {
    gap: 10px !important;
  }
}

/* Mobile/tablet (Figma 11129:58581): logo + GSK en una fila (gap 26px) y los
   3 íconos de redes en su propia fila debajo (gap 16px entre filas), en vez
   de las 3 filas apiladas que resultaban de justify-content-between + wrap. */
@media (max-width: 991.98px) {
  .footer-logos-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 16px;
    column-gap: 26px;
  }

  .footer-logos-row .wrap-rrss {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  .footer-columns {
    padding-right: 20px;
    padding-left: 20px;
  }
  .footer-columns > .container > .row {
    gap: 16px;
  }

  .footer-columns > .container > .row > .col-12 {
    margin-bottom: 0 !important;
  }

  .footer-columns .footer-col-links.row {
    flex-direction: column;
  }

  .footer-columns .footer-col-links.row > .col-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .bk-black .col-12 {
    padding-left: 0;
    padding-right: 0;
  }

  .bk-black .d-flex.flex-column.flex-md-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px 20px !important;
  }

  .bk-black .d-flex.flex-column.flex-md-row > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 18px !important;
  }
}

.back-to-top:not(.footer-back-to-top) {
	display: none !important;
}

.textfooterprin {
  font-size: 16px !important;
  margin-bottom: 10px;
}

.textfooter {
  color: #fff;
  font-size: 12px;
  padding-bottom: 2em;
}
.full-width-line {
  border: 0;
  height: 2px;
  background-color: #fff;
  width: 100%;
  margin: 0; /* elimina el espacio adicional por defecto */
}
.descriptionvacunas {
  font-size: 15px;
}
.descriptionvacunas1 {
  font-size: 14px;
}

footer .bk-orange strong {
  font-size: 16px;
  display: block;
  height: 60px;
}

.wrap-rrss a {
  height: 40px;
  width: 40px;
  display: inline-block;
}

/* Footer v2 (Figma) */
.footer-columns .footer-col-title {
	font-family: Inter, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: #f0efed;
	text-decoration: none;
}

.footer-columns .footer-col-title--blog {
	color: #f5f5f5;
	letter-spacing: -0.176px;
}

.footer-columns .footer-col-links .footer-link {
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: #ffffff;
	text-decoration: none;
	margin-bottom: 16px;
}

.footer-columns .footer-col-links .footer-link:hover {
	text-decoration: underline;
}

.footer-elaboration {
	font-family: Inter, sans-serif;
	font-size: 12px;
	line-height: 1.5;
}

/* misc */

.hidden {
  display: none !important;
}

.hide-no-force {
  display: none;
}

.error-municipio {
  color: var(--cat-color-red);
  font-size: 14px;
}

.btn-custom {
  background-color: #ff4e00;
  border-color: #ff4e00;
  color: var(--white-color);
  height: 46px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  padding: 0 30px;
  font-weight: 600;
  justify-content: center;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

  &:active {
    box-shadow: none;
  }
}

.btn-custom-outline {
  background-color: var(--white-color);
  border: 1px solid var(--line-color);
  color: var(--text-color);
  height: 46px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  box-shadow: var(--box-shadow);
  border-radius: var(--border-radius);
  padding: 0 29px;
  font-weight: 600;
  justify-content: center;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, color 0.2s ease-in-out;

  & img {
    margin-top: 3px;
    margin-left: 8px;
  }

  &:active {
    background-color: #ff4d001a;
    box-shadow: none;
  }
}

.wrap-box-white .box-white {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.box-white {
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
.box-white2 {
  background-color: #fff;

  box-shadow: var(--box-shadow);
}

.box-white-home {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.box-white a {
  text-decoration: none;
}

.box-orange {
  background: transparent url(/images/Card-featureOrange.png) no-repeat center
    center / cover;
  border-radius: var(--border-radius);

  min-height: 400px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 322px;

  & h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-color);
  }

  & .btn-custom-outline {
    background: var(--white-color);
  }
}

.box-verde {
  background: transparent url(/images/Card_Verde.png) no-repeat center center /
    cover;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 150%;
  /* Aumenta el ancho total de la caja */
  max-width: 380px;
  /* Controla el ancho máximo si quieres limitarlo */

  & h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
  }

  & .btn-custom-outline {
    background: var(--white-color);
  }
}

.textbox {
  color: #fff;
}

.box-blue {
  background: transparent url(/images/Card_Azul.png) no-repeat center center /
    cover;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 150%;
  /* Aumenta el ancho total de la caja */
  max-width: 380px;
  /* Controla el ancho máximo si quieres limitarlo */
  margin-left: 102px;

  & h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-color);
  }

  & .btn-custom-outline {
    background: var(--white-color);
  }
}

.box-morado {
  background: transparent url(/images/Card_Morada.png) no-repeat center center /
    cover;
  border-radius: 20px;
  /* Aumenta el valor para bordes más redondeados */
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 150%;
  /* Aumenta el ancho total de la caja */
  max-width: 380px;
  /* Controla el ancho máximo si quieres limitarlo */
  margin-left: 215px;

  /* Ajuste del título */
  h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-color);
    text-align: center;
  }
}

.box-light-orange {
  background: #ffd6a5;
  display: flex;
  border-radius: var(--border-radius);
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
  padding: 20px;
}

.box-light-orange p {
  font-weight: 700;
}

.box-normal-orange {
  background: var(--orange-color);
  display: flex;
  border-radius: var(--border-radius);
  color: var(--white-color);
  align-items: center;
  gap: 20px;
  padding: 20px;
  justify-content: center;
  flex-direction: column;
}

/* -- Contenido adicional -- */

.contenido-adicional {
  display: flex;
  margin-top: 64px;
  margin-bottom: -64px;
  padding: 48px 160px 48px 160px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  align-self: stretch;
  background: rgba(240, 239, 237, 0.5);
}

.contenido-adicional h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;

  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

.contenido-adicional .box-container {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.contenido-adicional .box-container .box {
  display: flex;
  max-width: 265px;
  width: 100%;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--International-Orange-200, #ffd6a5);
}

.contenido-adicional .box-container .box .title {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 28.8px */
}

.contenido-adicional .box-container .box .btn.video p::after {
  display: inline-block;
  vertical-align: middle;
  /* Helps fine-tune vertical alignment */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_75_21893)'%3E%3Cpath d='M13.5 14.25H4.5C4.0875 14.25 3.75 13.9125 3.75 13.5V4.5C3.75 4.0875 4.0875 3.75 4.5 3.75H8.25C8.6625 3.75 9 3.4125 9 3C9 2.5875 8.6625 2.25 8.25 2.25H3.75C2.9175 2.25 2.25 2.925 2.25 3.75V14.25C2.25 15.075 2.925 15.75 3.75 15.75H14.25C15.075 15.75 15.75 15.075 15.75 14.25V9.75C15.75 9.3375 15.4125 9 15 9C14.5875 9 14.25 9.3375 14.25 9.75V13.5C14.25 13.9125 13.9125 14.25 13.5 14.25ZM10.5 3C10.5 3.4125 10.8375 3.75 11.25 3.75H13.1925L6.345 10.5975C6.0525 10.89 6.0525 11.3625 6.345 11.655C6.6375 11.9475 7.11 11.9475 7.4025 11.655L14.25 4.8075V6.75C14.25 7.1625 14.5875 7.5 15 7.5C15.4125 7.5 15.75 7.1625 15.75 6.75V3C15.75 2.5875 15.4125 2.25 15 2.25H11.25C10.8375 2.25 10.5 2.5875 10.5 3Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_75_21893'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.contenido-adicional .box-container .box .btn.content p::after {
  display: inline-block;
  vertical-align: middle;
  /* Helps fine-tune vertical alignment */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_75_19807)'%3E%3Cpath d='M12.4425 6.75H11.25V3C11.25 2.5875 10.9125 2.25 10.5 2.25H7.5C7.0875 2.25 6.75 2.5875 6.75 3V6.75H5.5575C4.89 6.75 4.5525 7.56 5.025 8.0325L8.4675 11.475C8.76 11.7675 9.2325 11.7675 9.525 11.475L12.9675 8.0325C13.44 7.56 13.11 6.75 12.4425 6.75ZM3.75 14.25C3.75 14.6625 4.0875 15 4.5 15H13.5C13.9125 15 14.25 14.6625 14.25 14.25C14.25 13.8375 13.9125 13.5 13.5 13.5H4.5C4.0875 13.5 3.75 13.8375 3.75 14.25Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_75_19807'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* -- Contenido adicional disponible -- */

.contenido-adicional-disponible {
  display: flex;
  margin-top: 64px;
  margin-bottom: -64px;
  padding: 48px 160px 48px 160px;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  align-self: stretch;
  background: rgba(240, 239, 237, 0.5);
}

.contenido-adicional-disponible h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

.contenido-adicional-disponible .content {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}

.contenido-adicional-disponible .content .left {
  position: relative;
  width: 70%;
  height: 394px;
  flex-shrink: 0;
}

.contenido-adicional-disponible .content .left p {
  position: absolute;
  bottom: 33px;
  left: 35px;
  color: var(--UI-GSK-White, #fff);
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
  width: 382px;
  height: 76px;
  flex-shrink: 0;
}

.contenido-adicional-disponible .content .right {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 24px;
  background: var(--International-Orange-200, #ffd6a5);
}

.contenido-adicional-disponible .content .right .image {
  width: 177.826px;
  height: 149px;
  border-radius: 24px;
}

.contenido-adicional-disponible .content .right .title {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 28.8px */
}

.contenido-adicional-disponible .content .btn p::after {
  display: inline-block;
  vertical-align: middle;
  /* Helps fine-tune vertical alignment */
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cg clip-path='url(%23clip0_75_19807)'%3E%3Cpath d='M12.4425 6.75H11.25V3C11.25 2.5875 10.9125 2.25 10.5 2.25H7.5C7.0875 2.25 6.75 2.5875 6.75 3V6.75H5.5575C4.89 6.75 4.5525 7.56 5.025 8.0325L8.4675 11.475C8.76 11.7675 9.2325 11.7675 9.525 11.475L12.9675 8.0325C13.44 7.56 13.11 6.75 12.4425 6.75ZM3.75 14.25C3.75 14.6625 4.0875 15 4.5 15H13.5C13.9125 15 14.25 14.6625 14.25 14.25C14.25 13.8375 13.9125 13.5 13.5 13.5H4.5C4.0875 13.5 3.75 13.8375 3.75 14.25Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_75_19807'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.swiper-notas .box-white {
  margin-bottom: 40px;
  min-width: 250px;
  padding-bottom: 10px;

  & > img {
    width: 100%;
  }

  & h2 {
    padding: 0 30px 10px;
    font-size: 18px !important;
    color: #4b4b4b;
  }

  & p {
    padding: 0 30px;
  }

  & > a {
    margin: 20px 30px;
    padding-bottom: 10px;
    display: block;
  }
}

.swiper-notas .swiper-slide .box-white {
  position: relative;
  min-height: 490px;
}

.swiper-notas .swiper-slide .box-orange {
  min-height: 490px;
}

.swiper-notas .swiper-slide .box-white a {
  position: absolute;
  bottom: 0;
}

.swiper-notas,
.swiper-notas .swiper-pagination,
.swiper-disease .swiper-pagination {
  bottom: auto;
  position: absolute;
  height: 30px;
  text-align: center;
  width: 550px;
  right: auto;
  left: auto;
}

.swiper-notas .swiper-pagination {
  top: 96px;
}

.swiper-disease .swiper-pagination {
  top: 569px;
  margin-left: -469px;
}

.bk-insta {
  height: 650px;
  background: transparent url(/images/Contenedorinstagram.png) no-repeat center
    top / 100%;
  margin-top: 30px;
}

.bk-insta h2 {
  font-weight: 800;
  font-size: 40px;
}

.textvacunas h2 {
  font-weight: 700;
}
.textvpuntovacunas {
  font-family: "Inter", sans-serif; /* Familia tipográfica */
  font-weight: bold; /* Grosor del texto */
  font-size: 32px !important; /* Tamaño de la fuente */
  line-height: 120%; /* Altura de línea */
  letter-spacing: 0%; /* Espaciado entre letras */
  color: #000; /* Asegura que sea negro, como en el ejemplo */
}

.puntos-vacuna li {
  margin-bottom: 10px; /* Espacio entre cada elemento de la lista */
  line-height: 1.5; /* Altura de línea para evitar solapamientos */
}

.textvacu {
  font-size: 14px;
}
/* Cuando el select está habilitado */
.form-select + .form-label1 {
  opacity: 1; /* Opacidad al 100% */
  transition: opacity 0.3s ease; /* Transición suave */
}

/* Cuando el select está deshabilitado */
.form-select:disabled + .form-label1 {
  opacity: 0.4; /* Opacidad al 40% */
}

.bk-insta > div {
  padding: 180px 0 0 120px;
  width: 370px;
}

.referencias {
  font-size: 0.8rem;

  & a {
    text-decoration: underline;
    color: var(--text-color);
  }

  & ul li {
    margin-left: 20px;
    list-style-type: decimal;
    word-break: break-all;
  }
}

.text-orange {
  color: var(--orange-color);
}

a.text-orange {
  color: var(--orange-color);
  position: relative;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  padding-bottom: 4px;
  padding-top: 0em;
}

a.text-orange::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--orange-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

.float-icon {
  float: left;
}

/* .wrap-flex */

.wrap-flex {
  display: flex;
}

/* Puntos de vacunación */
.puntos-vacuna {
  border-radius: var(--border-radius);
  border-top: 3px solid var(--orange-color);
  padding: 16px; /* Reducido de 24px */
  background-color: #fff;
  font-size: 14px; /* Más pequeño */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Sombra más suave */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Ya no estira elementos */
  gap: 0.5em; /* Espaciado interno entre elementos */
  min-height: auto; /* Elimina altura mínima fija */
}

.marginvacunas {
  margin-top: 40px;
}

/* Listas dentro de puntos-vacuna */
.puntos-vacuna li {
  text-align: left !important;
  line-height: 1.5; /* Incrementa la legibilidad */
  padding: 10px 0; /* Más espacio entre elementos */
  word-wrap: break-word; /* Evita desbordamiento del texto */
}

/* Título en la primera línea */
.puntos-vacuna li h3 {
  line-height: 1.2; /* Mejora legibilidad */
  text-transform: capitalize;
  margin-bottom: 8px; /* Espacio debajo del título */
}

/* Botón centrado al final */
.puntos-vacuna li:nth-last-child(1) {
  margin-top: auto; /* Empuja el botón al fondo */
  text-align: center;
}

.puntos-vacuna li a img {
  vertical-align: middle;
  margin-left: 5px; /* Espacio entre texto e imagen */
}

/* Información adicional */
.puntos-vacuna .additional-info {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ddd; /* Línea para separar del contenido anterior */
  font-size: 14px;
  color: #666; /* Color más claro para diferenciarlo */
  line-height: 1.4;
}

.pagination-controls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.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;
}
/* Tarjeta solitaria: centrada y ajustada a su contenido */
.grid-container .grid-item.solo-card {
  margin: 0 auto;
  height: auto; /* Se adapta al contenido */
}

/* Estructura interna: flex para distribuir bien */
.grid-container .grid-item.solo-card .puntos-vacuna {
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Alinea a la izquierda para texto */
  padding: 1em;
  gap: 0.5em;
}
.grid-container .grid-item {
  flex: 1 1 260px;
  max-width: 280px;
}

/* Ya que .puntos-vacuna es un <ul>, no necesitas un ul dentro */
.grid-container .grid-item.solo-card .puntos-vacuna li {
  width: 100%;
  text-align: left;
}

/* paginador */
.custom-pag {
  text-align: center;
  padding: 10px;

  & .custom-pag-bullet {
    margin: 0 5px;
    text-decoration: none;
    color: var(--text-color);
    text-align: center;
    border: 1px solid var(--line-color);
    border-radius: 15px;
    height: 30px;
    width: 30px;
    display: inline-block;
    line-height: 27px;
  }

  & .custom-pag-bullet.active {
    background-color: var(--orange-color);
    font-weight: bold;
    border-color: var(--orange-color);
    color: var(--white-color);
  }

  & .custom-pag-prev img {
    rotate: 90deg;
    vertical-align: -3px;
  }

  & .custom-pag-next img {
    rotate: 270deg;
    vertical-align: -3px;
  }
}

/* etapas de la vida  */

.swiper-cat-color .swiper-wrapper a {
  width: auto;
}

.wrap-flex-thumb-categorys {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.thumb-categorys {
  text-align: center;
  color: var(--white-color);
  border-radius: var(--border-radius);
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  gap: 20px;
  text-decoration: none;
  font-weight: bold;
  height: 240px;
  justify-content: flex-end;

  & .wrap-ico-categorys {
    background-color: var(--white-color);
    border-radius: 40px;
    height: 80px;
    width: 80px;
  }

  &[data-category="bebes"] {
    background: var(--cat-color-green) url("/images/Frame_164001.png") no-repeat
      center center / cover;
    transition: all 0.1s;
  }

  &[data-category="Ninos"] {
    background: var(--cat-color-blue) url("/images/Frame_164002.png") no-repeat
      center center / cover;
    transition: all 0.1s;
  }

  &[data-category="Adolescentes"] {
    background: var(--cat-color-violet) url("/images/Frame_164003.png")
      no-repeat center center / cover;
    transition: all 0.1s;
  }

  &[data-category="Adultos"] {
    background: var(--cat-color-red) url("/images/Frame_164004.jpg") no-repeat
      center center / cover;
    transition: all 0.1s;
  }

  &[data-category="Gestantes"] {
    background: var(--cat-color-yellow) url("/images/Frame_164005.png")
      no-repeat center center / cover;
    transition: all 0.1s;
  }

  &[data-category="Adultos-mayores"] {
    background: var(--cat-color-orange) url("/images/Frame_164006v2.jpg")
      no-repeat center center / cover;
    transition: all 0.1s;
  }
}

/* vacunas recomendadas */
.thumb-categorys-white {
  background-color: #fff;
  text-align: center;
  color: var(--text-color);
  display: block;
  text-decoration: none;
  border: 1px solid var(--line-color);
  border-radius: var(--border-radius);
  width: 100%;
  padding: 20px;
  gap: 20px;
  height: 233px;

  &[data-category="bebes"] > .wrap-img {
    background: var(--cat-color-green) url("/images/portada-bebes.png")
      no-repeat center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 80px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="Ninos"] > .wrap-img {
    background: var(--cat-color-blue) url("/images/portada-niños.png") no-repeat
      center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 80px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="Adolescentes"] > .wrap-img {
    background: var(--cat-color-violet) url("/images/portada-adolescentes.png")
      no-repeat center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 80px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="Adultos"] > .wrap-img {
    background: var(--cat-color-red) url("/images/portada-adulots.png")
      no-repeat center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 80px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="Gestantes"] > .wrap-img {
    background: var(--cat-color-yellow) url("/images/portada-embarazadas.png")
      no-repeat center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 80px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="Adultos-mayores"] > .wrap-img {
    background: var(--cat-color-orange)
      url("/images/portada-adultos-mayores.png") no-repeat center top / cover;
    width: 100%;
    margin: 0 auto 20px;
    height: 100px;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius);
  }

  &[data-category="bebes"]:hover,
  &[data-category="bebes"].active {
    background-color: var(--cat-color-green);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }

  &[data-category="Ninos"]:hover,
  &[data-category="Ninos"].active {
    background-color: var(--cat-color-blue);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }

  &[data-category="Adolescentes"]:hover,
  &[data-category="Adolescentes"].active {
    background-color: var(--cat-color-violet);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }

  &[data-category="Adultos"]:hover,
  &[data-category="Adultos"].active {
    background-color: var(--cat-color-red);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }

  &[data-category="Gestantes"]:hover,
  &[data-category="Gestantes"].active {
    background-color: var(--cat-color-yellow);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }

  &[data-category="Adultos-mayores"]:hover,
  &[data-category="Adultos-mayores"].active {
    background-color: var(--cat-color-orange);
    color: var(--white-color);
    scale: 1.05;
    transition: all 0.1s;
    box-shadow: var(--box-shadow);
  }
}

[data-color="wine"] {
  background-color: var(--cat-color-wine);
}

/* ========================================
   THUMB DISEASE1 - CARDS DE ENFERMEDADES
   MOVED TO diseases.css
   ======================================== */

.thumb-disease1 {
  display: flex;
  flex-direction: column;
  width: 91%;
  max-width: 235px;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 22px 38px;
  height: 280px;
  margin: 0px auto;
  position: relative;
}

.thumb-disease1 h2 {
  font-size: 16px;
  text-align: center;
  padding: 15px 0;
  color: #4b4b4b;
  line-height: 1.2;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.thumb-disease1 .vsr-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #4b4b4b;
  text-align: center;
  margin: 0;
  padding: 0;
}

.thumb-disease1 i {
  font-size: 16px;
}

.thumb-disease1 > img {
  object-fit: cover;
  width: 270px;
  height: 125px;
  border-radius: 24px;
}

.thumb-disease1 .ver-en-maps {
  position: absolute;
  bottom: -10px !important;
  padding-bottom: 28px !important;
}

/* ========================================
   CATEGORY MISC - LÍNEAS DE COLORES
   ======================================== */

.category-misc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.category-misc li {
  width: 30px;
  height: 8px;
  border-radius: 0 0 4px 4px;
  display: inline-block;
}

.category-misc li[data-color="green"] {
  background-color: var(--cat-color-green);
}

.category-misc li[data-color="blue"] {
  background-color: var(--cat-color-blue);
}

.category-misc li[data-color="violet"] {
  background-color: var(--cat-color-violet);
}

.category-misc li[data-color="yellow"] {
  background-color: var(--cat-color-yellow);
}

.category-misc li[data-color="red"] {
  background-color: var(--cat-color-red);
}

.category-misc li[data-color="orange"] {
  background-color: var(--cat-color-orange);
}

.category-misc li.hidden {
  display: none;
}

/* ========================================
   SMALL NAV IMAGES - IMÁGENES DE NAVEGACIÓN
   ======================================== */

.small-nav-images {
  display: flex;
  align-items: center;
  gap: 4px;
}

.small-nav-img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

[data-color="green"] {
  background-color: var(--cat-color-green);
}

[data-color="blue"] {
  background-color: var(--cat-color-blue);
}

[data-color="violet"] {
  background-color: var(--cat-color-violet);
}

[data-color="yellow"] {
  background-color: var(--cat-color-yellow);
}

[data-color="red"] {
  background-color: var(--cat-color-red);
}

[data-color="orange"] {
  background-color: var(--cat-color-orange);
}

.fitlers-bebes {
  display: flex;
  margin: 20px;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;

  & a {
    border: 1px solid var(--line-color);
    line-height: 30px;
    padding: 4px 20px;
    text-decoration: none;
    color: var(--text-color);
    border-radius: var(--border-radius);
    background: #fff;
  }

  & a:hover,
  a.active {
    background: var(--cat-color-green);
    color: #fff;
  }
}

.bk-violet-img {
  background: transparent url("/images/violetbk.png") no-repeat center center /
    cover;
  border-radius: var(--border-radius);
}

.bk-violet-img .swiper-bk-violet .box-white {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.grid-vaccines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  align-items: start; /* ✅ hace que en CADA FILA las cards tengan misma altura */
}

.thumb-vaccines {
  display: flex;
  flex-direction: column;
  padding: 24px;
  align-items: flex-start;
  gap: 16px;
  height: auto; /* ← fuerza que todas ocupen el mismo alto disponible */

  border-radius: 24px;
  border: 1px solid var(--UI-GSK-Space-grey, #959595);
  margin-top: 17px;
  position: relative;
  overflow: hidden; /* ← clave para evitar que lo abierto empuje otras cards */
}

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

/* Al abrir, expandí verticalmente hacia afuera sin empujar las demás */
.thumb-vaccines.open .content-container {
  max-height: none;
}
.thumb-vaccines .title-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.thumb-vaccines .title-container h3 {
  max-width: 93%;
  flex: 1 0 0;
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 28.8px */
}

@media screen and (max-width: 768px) {
  /* Adjust the max-width value as needed */
  .thumb-vaccines .title-container h3 {
    max-width: 100%;
    font-size: 17px;
  }
}

.thumb-vaccines .title-container .iconos-vaccines {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  gap: 8px;
}

.thumb-vaccines ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style-type: disc;
  padding-left: 26px;
}

.thumb-vaccines .content-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style-type: none;
  padding-left: 26px;
}

.thumb-vaccines .content-container .dosis {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkRvc2lzIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTEyLjg2NDcgMTIuMTkyNUwxMi45MDQ5IDEyLjE1MTRDMTMuMTgyMiAxMS44Njc3IDEzLjE0OSAxMS4zNzIgMTIuODI5NyAxMS4wNDUzTDEyLjc5MzggMTEuMDA4NkMxMy4xMDg3IDEwLjQ5MDUgMTMuMDQ3NSA5LjgwMDU4IDEyLjYwODQgOS4zNTEzNkw3LjcxMjAzIDQuMzQyODNMNy45NjMxIDQuMDg2QzguMTMzNjkgMy45MTE1MSA4LjEzMzY5IDMuNjI3ODQgNy45NjMxIDMuNDUzMzRDNy43OTI1MiAzLjI3ODg0IDcuNTE1MiAzLjI3ODg0IDcuMzQ0NjEgMy40NTMzNEw1LjY3ODEgNS4xNTgwNUw1LjE2NzIxIDQuNjM1NDVMNS4zMjgxNyA0LjQ3MDc5QzUuOTc5OTEgMy44MDQxMiA2LjA3MzUxIDIuODU2NDcgNS41NDI1IDIuMzEyMzlMNS40Mjg3NyAyLjE5NjA2QzUuMTUxNDYgMS45MTE1IDQuNjg4NjggMS45NDAxMyA0LjM3NjM4IDIuMjU5NkwyLjI1NDA4IDQuNDMyMzJDMS45NDA5IDQuNzUxNzggMS45MTM3OCA1LjIyNTE2IDIuMTkxOTcgNS41MDg4M0wyLjMwNTcgNS42MjUxNkMyLjUzNjY1IDUuODYxNDEgMi44NDI4MyA1Ljk3Njg0IDMuMTY4MjYgNS45NzY4NEMzLjU5MDc5IDUuOTc2ODQgNC4wNDc0NSA1Ljc4MjY2IDQuNDE1NzQgNS40MDU5Mkw0LjU0OTU5IDUuMjY5MDFMNS4wNjA0OCA1Ljc5MTYxIDMuNTE3MzEgNy4zNzAxNEMzLjM0NjcyIDcuNTQ0NjQgMy4zNDY3MiA3LjgyODMxIDMuNTE3MzEgOC4wMDI4QzMuNjAzMDQgOC4wOTA1IDMuNzE1MDIgOC4xMzM0NSAzLjgyNjk5IDguMTMzNDVDMy45Mzg5NyA4LjEzMzQ1IDQuMDUwOTUgOC4wODk2MSA0LjEzNjY4IDguMDAyOEw0LjM4Njg3IDcuNzQ2ODdMOS4yODMyIDEyLjc1NTRDOS41Mzg2NCAxMy4wMTY3IDkuODc1NDQgMTMuMTQ4MiAxMC4yMTE0IDEzLjE0ODJDMTAuNDUxOSAxMy4xNDgyIDEwLjY5MjUgMTMuMDgwMiAxMC45MDQyIDEyLjk0NTFMMTAuOTQwMSAxMi45ODE4QzExLjI1OTQgMTMuMzA4NCAxMS43NDMyIDEzLjM0MzMgMTIuMDIxNCAxMy4wNTg4TDEyLjA3NTYgMTMuMDAzM0wxNC41OTc3IDE1LjUzM0gxNkwxMi44NjY0IDEyLjE5NDNMMTIuODY0NyAxMi4xOTI1Wk00LjcwOTY4IDMuODM5MDJMMy43OTU1IDQuNzczMjZDMy40ODIzMiA1LjA5MzYyIDMuMDk1NjUgNS4xNDk5OSAyLjkzMjk0IDUuMDAyMzRMNC45MzM2MyAyLjk1NjY5QzUuMDc3MSAzLjEyMzE0IDUuMDIxOTkgMy41MTc3NyA0LjcwODggMy44MzgxM0w0LjcwOTY4IDMuODM5MDJaTTExLjk4OTkgMTAuNjE3NkwxMS44NTUxIDEwLjc1NTRMOS4yOTgwNyA4LjEzOTcyTDcuNjUyNTUgOS44MjI5NUw3LjE3MDUyIDkuMzI5ODhMOC4yODUwMyA4LjE4OTgzTDcuNjY2NTQgNy41NTcxNkw2LjU1MjAzIDguNjk3MjFMNi4wODQwMSA4LjIxODQ3TDcuMTk4NTIgNy4wNzg0MUw2LjU4MDAzIDYuNDQ1NzVMNS40NjU1MiA3LjU4NThMNS4wMDM2MiA3LjExMzMxTDcuMDkyNjcgNC45NzYzOUwxMS45ODkgOS45ODQ5MkMxMi4wNzEyIDEwLjA2OSAxMi4xMTY3IDEwLjE4MTggMTIuMTE2NyAxMC4zMDE3QzEyLjExNjcgMTAuNDIxNiAxMi4wNzEyIDEwLjUzMzUgMTEuOTg5IDEwLjYxODVMMTEuOTg5OSAxMC42MTc2WiIgZmlsbD0iI0ZGNEUwMCIvPgo8L2c+Cjwvc3ZnPgo=");
}

.thumb-vaccines .content-container .edad-recomendada {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IkNhcGFfMSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQwMDAwMDAyXzM1NzQ0KSI+CjxwYXRoIGlkPSJWZWN0b3IiIGQ9Ik02Ljk5OTI0IDBDMy4xNDMwMSAwIDAgMy4xNDMzNiAwIDdDMCA5LjE4MjYzIDEuMDA0OTEgMTEuMTM2MiAyLjU4NDA1IDEyLjQyMjJDMi41OTAxNiAxMi40MjgzIDIuNTk2MjcgMTIuNDM0NCAyLjYwMjM4IDEyLjQzNDRDMy44MDU4MyAxMy40MTUgNS4zMzMwNCAxNCA2Ljk5OTI0IDE0QzguNjY1NDMgMTQgMTAuMTk0MiAxMy40MTUgMTEuMzk2MSAxMi40MzQ0QzExLjQwMjIgMTIuNDM0NCAxMS40MDgzIDEyLjQyODMgMTEuNDE0NCAxMi40MjIyQzEyLjk5MiAxMS4xMzYyIDEzLjk5ODUgOS4xODI2MyAxMy45OTg1IDdDMTQgMy4xNDMzNiAxMC44NTcgMCA3LjAwMDc2IDBINi45OTkyNFpNNS44MzU1IDcuNDI2MTRDNS4xMzYwMyA3LjAxODMzIDQuNjY0MTIgNi4yNjIyNyA0LjY2NDEyIDUuMzk2MjVDNC42NjQxMiA0LjExMDE5IDUuNzE0ODUgMy4wNjA4OCA2Ljk5OTI0IDMuMDYwODhDOC4yODM2MyAzLjA2MDg4IDkuMzM0MzUgNC4xMTE3MiA5LjMzNDM1IDUuMzk2MjVDOS4zMzQzNSA2LjI2ODM4IDguODU3ODYgNy4wMjU5NyA4LjE1Njg3IDcuNDI2MTRDNy44MTMyNCA3LjYxNzA2IDcuNDE5MjIgNy43MzE2MiA2Ljk5OTI0IDcuNzMxNjJDNi41NzkyNSA3LjczMTYyIDYuMTc3NTkgNy42MTcwNiA1LjgzNTUgNy40MjYxNFpNMy4wOTI2MSAxMi4wMjJDMy4wODY1MSAxMS45MTk3IDMuMDgwNCAxMS44MTEzIDMuMDgwNCAxMS43MDQzQzMuMDgwNCAxMC4wNjI0IDQuMDk5MDUgOC42MDUyOCA1LjYyNjI3IDguMDMyNTFDNi4wNDAxNCA4LjI0OTQgNi41MDQ0MiA4LjM3MDA2IDcuMDAwNzYgOC4zNzAwNkM3LjQ5NzExIDguMzcwMDYgNy45NjEzOCA4LjI0OTQgOC4zNzUyNiA4LjAzMjUxQzkuOTAyNDggOC42MDUyOCAxMC45MjExIDEwLjA2MjQgMTAuOTIxMSAxMS43MDQzQzEwLjkyMTEgMTEuODEyOCAxMC45MTUgMTEuOTIxMiAxMC45MDg5IDEyLjAyMkM5LjgzMzc1IDEyLjg2MjEgOC40Nzc1OCAxMy4zNjQ2IDcuMDAyMjkgMTMuMzY0NkM1LjUyNyAxMy4zNjQ2IDQuMTcwODMgMTIuODYyMSAzLjA5NTY3IDEyLjAyMkgzLjA5MjYxWiIgZmlsbD0iI0ZGNEUwMCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQwMDAwMDAyXzM1NzQ0Ij4KPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

.thumb-vaccines .content-container .protege-contra {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzc2NDhfMjk3NzUpIj4KPHBhdGggZD0iTTkuMDU4ODMgNS45MTQwNkM5LjA1ODgzIDUuOTE0MDYgMTIuMTM0OCA5LjE1NDg2IDEyLjEzNDggMTAuODczNUMxMi4xMzQ4IDEyLjU5MjIgMTAuNzU3NiAxMy45ODU0IDkuMDU4ODMgMTMuOTg1NEM3LjM2MDA1IDEzLjk4NTQgNS45ODI5IDEyLjU5MjIgNS45ODI5IDEwLjg3MzVDNS45ODI5IDkuMTU0ODYgOS4wNTg4MyA1LjkxNDA2IDkuMDU4ODMgNS45MTQwNlpNNy43MjQ4MiAxMS4wMjMyQzcuNzI0ODIgMTEuMTI3NSA3LjgwODQ5IDExLjIxMjEgNy45MTE1NSAxMS4yMTIxSDguNTY3ODRWMTEuODc2MUM4LjU2Nzg0IDExLjk4MDMgOC42NTE1MSAxMi4wNjUgOC43NTQ1NyAxMi4wNjVIOS4zNjMxQzkuNDY2MTYgMTIuMDY1IDkuNTQ5ODIgMTEuOTgwMyA5LjU0OTgyIDExLjg3NjFWMTEuMjEyMUgxMC4yMDYxQzEwLjMwOTIgMTEuMjEyMSAxMC4zOTI4IDExLjEyNzUgMTAuMzkyOCAxMS4wMjMyVjEwLjQwNzVDMTAuMzkyOCAxMC4zMDMzIDEwLjMwOTIgMTAuMjE4NiAxMC4yMDYxIDEwLjIxODZIOS41NDk4MlY5LjU1NDY1QzkuNTQ5ODIgOS40NTAzOCA5LjQ2NjE2IDkuMzY1NzQgOS4zNjMxIDkuMzY1NzRIOC43NTQ1N0M4LjY1MTUxIDkuMzY1NzQgOC41Njc4NCA5LjQ1MDM4IDguNTY3ODQgOS41NTQ2NVYxMC4yMTg2SDcuOTExNTVDNy44MDg0OSAxMC4yMTg2IDcuNzI0ODIgMTAuMzAzMyA3LjcyNDgyIDEwLjQwNzVWMTEuMDIzMloiIGZpbGw9IiNGRjRFMDAiLz4KPHBhdGggZD0iTTQuNjA2MzIgMy4xODc1SDYuMDI3MTlDNi4wMTU2MSAzLjIyOTM4IDYuMDA5MjQgMy4yNzMzMiA2LjAwOTI0IDMuMzE4NzFWNC4wNDY1NEg1LjUyNjA2QzUuMjE3NDYgNC4wNDY1NCA0Ljk2NjQ2IDQuMzAwNDcgNC45NjY0NiA0LjYxMjRWMTQuNTc0OUM0Ljk2NjQ2IDE0Ljg4NzIgNS4yMTc0NiAxNS4xNDExIDUuNTI2MDYgMTUuMTQxMUgxMi41OTE2QzEyLjkwMDIgMTUuMTQxMSAxMy4xNTEyIDE0Ljg4NzIgMTMuMTUxMiAxNC41NzQ5VjQuNjEyNEMxMy4xNTEyIDQuMzAwNDcgMTIuOTAwMiA0LjA0NjU0IDEyLjU5MTYgNC4wNDY1NEgxMi4xMDg0VjMuMzE4NzFDMTIuMTA4NCAzLjI3MzMyIDEyLjEwMjAzLjIyOTM4IDEyLjA5MDUgMy4xODc1SDEzLjUxMTNDMTMuNzgwOCAzLjE4NzUgMTQgMy40MDk1MSAxNCAzLjY4MjE5VjE1LjUwNTVDMTQgMTUuNzc4MSAxMy43ODA4IDE1Ljk5OTggMTMuNTExMyAxNS45OTk4SDQuNjA2MzJDNC4zMzY4IDE1Ljk5OTggNC4xMTc2NSAxNS43NzgxIDQuMTE3NjUgMTUuNTA1NVYzLjY4MjE5QzQuMTE3NjUgMy40MDk1MSA0LjMzNjggMy4xODc1IDQuNjA2MzIgMy4xODc1WiIgZmlsbD0iI0ZGNEUwMCIvPgo8cGF0aCBkPSJNNTEuNjMxMyA0LjQxNjMySDYuNDg2MDZDNi40MTQ1NiA0LjQxNjMyIDYuMzU2MzcgNC4zNTc0NSA2LjM1NjM3IDQuMjg1MVYzLjMxODg3QzYuMzU2MzcgMy4yNDY1MyA2LjQxNDU2IDMuMTg3NjYgNi40ODYwNiAzLjE4NzY2SDYuNTAyODVDNi45ODgzNCAzLjE4NzY2IDcuNDQxNDEgMi45NTYyOCA3Ljc0NTk2IDIuNTUyMzhDOC4wMDMwNCAyLjIxMTc2IDguNTA1OSAyIDkuMDU4NTUgMkM5LjYxMTIxIDIgMTAuMTE0MSAyLjIxMTc2IDEwLjM3MTEgMi41NTIzOEMxMC42NzU3IDIuOTU1OTggMTEuMTI4OCAzLjE4NzY2IDExLjYxNDMgMy4xODc2NkgxMS42MzFDMTEuNzAyNiAzLjE4NzY2IDExLjc2MDcgMy4yNDY1MyAxMS43NjA3IDMuMzE4ODdWNC4yODUxQzExLjc2MDcgNC4zNTc0NSAxMS43MDI2IDQuNDE2MzIgMTEuNjMxIDQuNDE2MzJIMTEuNjMxM1pNOS4wNTg4NCAyLjY1NDZDOC44NjM3MiAyLjY1NDYgOC43MDU2NSAyLjgxNDUyIDguNzA1NjUgMy4wMTE5MkM4LjcwNTY1IDMuMjA5MzMgOC44NjM3MiAzLjM2OTI1IDkuMDU4ODQgMy4zNjkyNUM5LjI1Mzk3IDMuMzY5MjUgOS40MTIwMyAzLjIwOTMzIDkuNDEyMDMgMy4wMTE5MkM5LjQxMjAzIDIuODE0NTIgOS4yNTM5NyAyLjY1NDYgOS4wNTg4NCAyLjY1NDZaIiBmaWxsPSIjRkY0RTAwIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNzY0OF8yOTc3NSI+CjxyZWN0IHdpZHRoPSI5Ljg4MjM1IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMTAgMCAwIDEgLTEpIi8+CjwvY2xpcFBhdGggPjwvZGVmcz4KPC9zdmc+Cg==");
}

.thumb-vaccines .content-container .uso-situaciones-especiales {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzc2NDhfMjk3NzUpIj4KPHBhdGggZD0iTTkuMDU4ODMgNS45MTQwNkM5LjA1ODgzIDUuOTE0MDYgMTIuMTM0OCA5LjE1NDg2IDEyLjEzNDggMTAuODczNUMxMi4xMzQ4IDEyLjU5MjIgMTAuNzU3NiAxMy45ODU0IDkuMDU4ODMgMTMuOTg1NEM3LjM2MDA1IDEzLjk4NTQgNS45ODI5IDEyLjU5MjIgNS45ODI5IDEwLjg3MzVDNS45ODI5IDkuMTU0ODYgOS4wNTg4MyA1LjkxNDA2IDkuMDU4ODMgNS45MTQwNlpNNy43MjQ4MiAxMS4wMjMyQzcuNzI0ODIgMTEuMTI3NSA3LjgwODQ5IDExLjIxMjEgNy45MTE1NSAxMS4yMTIxSDguNTY3ODRWMTEuODc2MUM4LjU2Nzg0IDExLjk4MDMgOC42NTE1MSAxMi4wNjUgOC43NTQ1NyAxMi4wNjVIOS4zNjMxQzkuNDY2MTYgMTIuMDY1IDkuNTQ5ODIgMTEuOTgwMyA5LjU0OTgyIDExLjg3NjFWMTEuMjEyMUgxMC4yMDYxQzEwLjMwOTIgMTEuMjEyMSAxMC4zOTI4IDExLjEyNzUgMTAuMzkyOCAxMS4wMjMyVjEwLjQwNzVDMTAuMzkyOCAxMC4zMDMzIDEwLjMwOTIgMTAuMjE4NiAxMC4yMDYxIDEwLjIxODZIOS41NDk4MlY5LjU1NDY1QzkuNTQ5ODIgOS40NTAzOCA5LjQ2NjE2IDkuMzY1NzQgOS4zNjMxIDkuMzY1NzRIOC43NTQ1N0M4LjY1MTUxIDkuMzY1NzQgOC41Njc4NCA5LjQ1MDM4IDguNTY3ODQgOS41NTQ2NVYxMC4yMTg2SDcuOTExNTVDNy44MDg0OSAxMC4yMTg2IDcuNzI0ODIgMTAuMzAzMyA3LjcyNDgyIDEwLjQwNzVWMTEuMDIzMloiIGZpbGw9IiNGRjRFMDAiLz4KPHBhdGggZD0iTTQuNjA2MzIgMy4xODc1SDYuMDI3MTlDNi4wMTU2MSAzLjIyOTM4IDYuMDA5MjQgMy4yNzMzMiA2LjAwOTI0IDMuMzE4NzFWNC4wNDY1NEg1LjUyNjA2QzUuMjE3NDYgNC4wNDY1NCA0Ljk2NjQ2IDQuMzAwNDcgNC45NjY0NiA0LjYxMjRWMTQuNTc0OUM0Ljk2NjQ2IDE0Ljg4NzIgNS4yMTc0NiAxNS4xNDExIDUuNTI2MDYgMTUuMTQxMUgxMi41OTE2QzEyLjkwMDIgMTUuMTQxMSAxMy4xNTEyIDE0Ljg4NzIgMTMuMTUxMiAxNC41NzQ5VjQuNjEyNEMxMy4xNTEyIDQuMzAwNDcgMTIuOTAwMiA0LjA0NjU0IDEyLjU5MTYgNC4wNDY1NEgxMi4xMDg0VjMuMzE4NzFDMTIuMTA4NCAzLjI3MzMyIDEyLjEwMjAzLjIyOTM4IDEyLjA5MDUgMy4xODc1SDEzLjUxMTNDMTMuNzgwOCAzLjE4NzUgMTQgMy40MDk1MSAxNCAzLjY4MjE5VjE1LjUwNTVDMTQgMTUuNzc4MSAxMy43ODA4IDE1Ljk5OTggMTMuNTExMyAxNS45OTk4SDQuNjA2MzJDNC4zMzY4IDE1Ljk5OTggNC4xMTc2NSAxNS43NzgxIDQuMTE3NjUgMTUuNTA1NVYzLjY4MjE5QzQuMTE3NjUgMy40MDk1MSA0LjMzNjggMy4xODc1IDQuNjA2MzIgMy4xODc1WiIgZmlsbD0iI0ZGNEUwMCIvPgo8cGF0aCBkPSJNNTEuNjMxMyA0LjQxNjMySDYuNDg2MDZDNi40MTQ1NiA0LjQxNjMyIDYuMzU2MzcgNC4zNTc0NSA2LjM1NjM3IDQuMjg1MVYzLjMxODg3QzYuMzU2MzcgMy4yNDY1MyA2LjQxNDU2IDMuMTg3NjYgNi40ODYwNiAzLjE4NzY2SDYuNTAyODVDNi45ODgzNCAzLjE4NzY2IDcuNDQxNDEgMi45NTYyOCA3Ljc0NTk2IDIuNTUyMzhDOC4wMDMwNCAyLjIxMTc2IDguNTA1OSAyIDkuMDU4NTUgMkM5LjYxMTIxIDIgMTAuMTE0MSAyLjIxMTc2IDEwLjM3MTEgMi41NTIzOEMxMC42NzU3IDIuOTU1OTggMTEuMTI4OCAzLjE4NzY2IDExLjYxNDMgMy4xODc2NkgxMS42MzFDMTEuNzAyNiAzLjE4NzY2IDExLjc2MDcgMy4yNDY1MyAxMS43NjA3IDMuMzE4ODdWNC4yODUxQzExLjc2MDcgNC4zNTc0NSAxMS43MDI2IDQuNDE2MzIgMTEuNjMxIDQuNDE2MzJIMTEuNjMxM1pNOS4wNTg4NCAyLjY1NDZDOC44NjM3MiAyLjY1NDYgOC43MDU2NSAyLjgxNDUyIDguNzA1NjUgMy4wMTE5MkM4LjcwNTY1IDMuMjA5MzMgOC44NjM3MiAzLjM2OTI1IDkuMDU4ODQgMy4zNjkyNUM5LjI1Mzk3IDMuMzY5MjUgOS40MTIwMyAzLjIwOTMzIDkuNDEyMDMgMy4wMTE5MkM5LjQxMjAzIDIuODE0NTIgOS4yNTM5NyAyLjY1NDYgOS4wNTg4NCAyLjY1NDZaIiBmaWxsPSIjRkY0RTAwIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNzY0OF8yOTc3NSI+CjxyZWN0IHdpZHRoPSI5Ljg4MjM1IiBoZWlnaHQ9IjE0IiBmaWxsPSJ3aGl0ZSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMTAgMCAwIDEgLTEpIi8+CjwvY2xpcFBhdGggPjwvZGVmcz4KPC9zdmc+Cg==");
}

.thumb-vaccines ul .correct-bullet {
  margin-top: 10px;
  margin-bottom: 10px;
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzY1ODhfNjcwMTkpIj4KPHBhdGggZD0iTTkgMS41QzQuODYgMS41IDEuNSA0Ljg2IDEuNSA5QzEuNSAxMy4xNCA0Ljg2IDE2LjUgOSAxNi41QzEzLjE0IDE2LjUgMTYuNSAxMy4xNCAxNi41IDlDMTYuNSA0Ljg2IDEzLjE0IDEuNSA5IDEuNVpNNi45Njc1IDEyLjIxNzVMNC4yNzUgOS41MjVDMy45ODI1IDkuMjMyNSAzLjk4MjUgOC43NiA0LjI3NSA4LjQ2NzVDNC41Njc1IDguMTc1IDUuMDQgOC4xNzUgNS4zMzI1IDguNDY3NUw3LjUgMTAuNjI3NUwxMi42NiA1LjQ2NzVDMTIuOTUyNSA1LjE3NSAxMy40MjUgNS4xNzUgMTMuNzE3NSA1LjQ2NzVDMTQuMDEgNS43NiAxNC4wMSA2LjIzMjUgMTMuNzE3NSA2LjUyNUw4LjAyNSAxMi4yMTc1QzcuNzQgMTIuNTEgNy4yNiAxMi41MSA2Ljk2NzUgMTIuMjE3NVoiIGZpbGw9IiNGRjRFMDAiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF82NTg4XzY3MDE5Ij4KPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=");
}

#contenido-vacunas .icons-reference-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

#contenido-vacunas .icons-reference-container .icon-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

#contenido-vacunas .icons-reference-container .icon-container img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

#contenido-vacunas .icons-reference-container .icon-container p {
  flex: 1 0 0;
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
}

#contenido-vacunas .subtitle {
  margin-top: 108px;
  margin-bottom: 32px;
  align-self: stretch;
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-align: center;
  /* 28.8px */
}

#contenido-vacunas .pregnant-woman-extra-content {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

#contenido-vacunas .pregnant-woman-extra-content .pregnant-warning-text {
  color: var(--UI-GSK-Text-Gray, #4B4B4B);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 14.4px */
  align-self: stretch;
  margin: 0;
}

#contenido-vacunas .pregnant-woman-extra-content h3 {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  align-self: stretch;
}

#contenido-vacunas .pregnant-woman-extra-content .bullet-container {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}

@media screen and (max-width: 768px) {
  /* Adjust the max-width value as needed */
  #contenido-vacunas .pregnant-woman-extra-content .bullet-container {
    flex-direction: column;
  }
}

#contenido-vacunas .pregnant-woman-extra-content .bullet-container ul {
  flex: auto;
  list-style-type: disc;
  list-style-position: inside;
}

#contenido-vacunas .pregnant-woman-extra-content .orange-banner,
.orange-banner {
  display: flex;
  padding: 16px 64px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  align-self: stretch;
  border-radius: 8px;
  background: var(--UI-GSK-Orange-02, #ff4e00);
}

#contenido-vacunas .pregnant-woman-extra-content .orange-banner p,
.orange-banner p {
  color: var(--UI-GSK-White, #fff);

  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 27px */
}

/* filters tags - MOVED TO diseases.css */

.ep-filter a {
  border-radius: var(--border-radius);
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--line-color);
  padding: 0 20px;
  cursor: pointer;
  color: var(--text-color);
  text-decoration: none;
}

.ep-filter a.active {
  color: var(--white-color);
  font-weight: bold;
}

.ep-filter a[data-value="todas"].active {
  background-color: var(--cat-color-wine);
  border: 1px solid var(--cat-color-wine);
}

.ep-filter a[data-value="bebes"].active {
  background-color: var(--cat-color-green);
  border: 1px solid var(--cat-color-green);
}

.ep-filter a[data-value="ninos"].active {
  background-color: var(--cat-color-blue);
  border: 1px solid var(--cat-color-blue);
}

.ep-filter a[data-value="adolescentes"].active {
  background-color: var(--cat-color-violet);
  border: 1px solid var(--cat-color-violet);
}

.ep-filter a[data-value="mujeres-embarazadas"].active {
  background-color: var(--cat-color-yellow);
  border: 1px solid var(--cat-color-yellow);
}

.ep-filter a[data-value="adultos"].active {
  background-color: var(--cat-color-red);
  border: 1px solid var(--cat-color-red);
}

.ep-filter a[data-value="adultos-mayores"].active {
  background-color: var(--cat-color-orange);
  border: 1px solid var(--cat-color-orange);
}

.ep-double-box {
  background-color: #be3a28;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 16px; /* Según Figma (corner radius) */
  text-align: left;
  color: var(--white-color);
  min-height: 352px;
  width: 595px; /* Desde Figma: W 550 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Flow descendente */
  align-items: flex-start; /* Alineado a la izquierda */
  gap: 2px; /* Desde Figma: Gap entre elementos */
  padding: 32px; /* Padding uniforme según Figma */

  & h3 {
    font-size: 24px !important;
    color: var(--white-color);
    margin-top: 5rem;
  }
}

.ep-card-white {
  background-image: url("/images/Card_White.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 16px; /* Coincide con Figma */
  text-align: left;
  color: var(--white-color); /* Conservado si ya está definido globalmente */
  min-height: 359px; /* Altura según Figma */
  width: 645px; /* Ancho según Figma */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px; /* Espacio entre hijos (como en Auto Layout) */
  padding: 32px; /* Padding uniforme */
}
.custom-gap-container {
  gap: 39px !important;
  padding-top: 1em;
}
.ep-card-white h3 {
  font-size: 24px !important;
}
.calendar-image {
  max-width: 300px !important;
  width: 100%;
}
.textbox1 {
  margin-top: 7rem;
}

/* grid*/

.grid-container,
.grid-container2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px;
}

.grid-item {
  padding: 10px;
  text-align: center;
}

.gap-55 {
  gap: 5.5rem !important;
}
.textcovid {
  margin-top: 60px;
}
.imgcard {
  object-fit: cover;
  width: 270px;
  height: 125px !important;
  border-radius: 24px;
}
.blog-section-wrapper {
  background-color: #ffedd3;
  width: 100%;
}

.blog-section-content {
  padding: 3em 1em;
}

.pt-2_4rem {
  padding-top: 2.4rem;
}
.pt-1_4rem {
  padding-top: 1.4rem;
}
.treatment-image {
  width: 480px;
  height: auto;
}
.conocemasvacunas {
  position: absolute;
  bottom: -10px !important;
  padding-bottom: 10px !important;
}

/* bks */
.bk-light-orange {
  background-color: var(--light-orange-color);
}

.bk-orange {
  background-color: var(--orange-color);
}

.bk-black {
  background-color: var(--black-color);
}
/* max-width:991.98px para calzar con el resto del footer (.footer-columns,
   .footer-logos-row ya usan ese mismo corte) — antes quedaba en 767.98px y
   la sección se quedaba sin padding-top/bottom en tablet (768-991.98px),
   pegada al <hr> de arriba. */
@media (max-width: 991.98px) {
  .bk-black {
    padding: 24px 20px 24px 20px !important;
  }
}

/* -- -- */

/* -- Start Meningococo -- */

.container.title-container {
  margin-top: 0px;
}

.disease-banner .side-image {
  width: 100%;
  height: 336px;
}

.disease-banner {
  display: flex;
  padding: 48px 0px;
}

.diseases h3 {
  color: var(--UI-GSK-Black, #151515);
  /* H2/H2 Bold 32 */
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

/* ========================================
   TÍTULOS ESPECÍFICOS POR CONTEXTO
   ======================================== */

/* Para página de enfermedades prevenibles (24px) */
.diseases-prevenibles h3 {
  font-size: 24px;
}

.diseases .content .box-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Crea cuatro columnas */
  grid-gap: 32px;
  /* Espacio entre las cajas */
  align-items: stretch;
  /* Estira los items para que todos tengan la misma altura */
  justify-items: center;
  /* Centra los elementos horizontalmente */
  padding: 20px 0;
  /* Espacio superior e inferior para el contenedor */
}

.diseases .content .box-container .box {
  background: var(--UI-GSK-Red, #be3a28);
  color: #fff;
  text-decoration: none;
  padding: 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  /* Alinea el contenido de cada box verticalmente */
  justify-content: center;
  /* Alinea el contenido de cada box horizontalmente */
  outline: none;
  border: #be3a28;
  gap: 8px;
  /* Espacio entre el texto y el SVG dentro del box */
  transition-duration: 300ms;
}

.diseases .content .box-container .box:hover {
  background-color: var(--orange-color);
  transition-duration: 300ms;
}

.diseases .content .box-container .box p {
  color: #fff;

  /* P2/P2 Bold 16 */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 24px */
}

.diseases .otras {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-top: 64px;
  margin-bottom: 64px;
  background: var(--UI-GSK-Light-Peach-02, #ffedd3);
  padding: 64px 0px;
  margin-bottom: 0px;
}

.diseases .otras h3 {
  color: var(--UI-GSK-Orange-02, #ff4e00);
  max-width: 255px;
  /* H2/H2 Bold 32 */
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

.diseases .otras .button-container {
  display: flex;
  align-items: flex-end;
  align-content: flex-end;
  gap: 20px;
  flex: 1 0 0;
  flex-wrap: wrap;
}

.diseases .otras .button-container .box {
  display: flex;
  text-decoration: none;
  padding: 8px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 45px;
  border: 1px solid var(--UI-GSK-Grey, #c6c5c5);
}

.diseases .otras .button-container .box:hover {
  border: 1px solid var(--orange-color);
  transition-duration: 300ms;
}

.diseases .otras .button-container .box p {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  text-align: center;

  /* P2/P2 Regular 16 */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
}

.diseases .disclaimer {
  display: flex;
  flex-direction: column;
  padding: 29px 23px;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.disclaimer-date {
  text-align: center;
  /* Centra el texto */
  padding-top: -20px;
}

.diseases .disclaimer p {
  max-width: none;
  color: var(--UI-GSK-Orange-02, #ff4e00);
  text-align: left;

  /* Details/D bold 12 */
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  /* 18px */
}

.diseases /* ========================================
   7. BANNERS Y SECCIONES PROMOCIONALES
   ======================================== */
.banner {
  border-radius: 32px;
  width: 100%;
  max-width: 1120px;
  height: auto;
  min-height: 216px;
  display: flex;
  padding: 24px 64px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.diseases .banner h3 {
  color: var(--UI-GSK-Light-Cream, var(--International-Orange-50, #fff7ec));
  /* H1/H1 Regular 40 */
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%;
  /* 48px */
}

.diseases .content-container {
  position: relative;
  display: flex;
  padding-left: 285px;
  align-items: flex-start;
  gap: 20px;
  margin-top: 64px;
  max-width: 1120px;
  width: 100%;
}

/* Estado normal */
.diseases .content-container .sidemenu {
  left: 0;
  position: absolute;
  display: flex;
  width: 245px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--UI-GSK-Grey, #c6c5c5);
  padding: 1em;
}

/* Estado fijo — activado por el script inline de cada página de enfermedad
   (patrón ya existente, ej. tetanos.html/meningitis-por-meningococo.html)
   cuando el sidemenu scrollea por encima de top:150px, mientras no llegue
   a la sección de disclaimer (.alerta-aviso-naranja1). `left` lo calcula
   cada script en JS (no un valor fijo en px) para no desalinearse en
   anchos de pantalla distintos. */
.diseases .content-container .sidemenu.fixed {
  position: fixed;
  top: 150px;
  width: 245px;
  z-index: 100;
}

.diseases .content-container .sidemenu .title {
  display: flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  flex: 1 0 0;

  color: #151515; /* Asegúrate que sea el color exacto */

  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px; /* 150% de 18px */
}

.diseases .content-container .sidemenu .subtitle-container {
  max-width: 242px;
  display: flex;
  padding: 4px 12px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  flex: 1 0 0;
}

.diseases .content-container .sidemenu .subtitle-container a {
  color: #4b4b4b;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700; /* Bold */
  line-height: 120%;
  letter-spacing: 0;
  transition: all 0.3s ease;
  padding-bottom: 0.25rem;
}

.diseases .content-container .sidemenu .subtitle-container a:hover {
  border-bottom: 1px solid var(--orange-color);
  transition: all 0.3s ease;
}

.diseases .content-container .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
}

.content-container .content .title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}

.diseases .content-container .content .title-container h3 {
  color: var(--UI-GSK-Black, #151515);

  /* H2/H2 Bold 32 */
  font-family: Inter;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 38.4px */
}

.diseases .content-container .content p {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  /* P2/P2 Regular 16 */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 24px */
}

.diseases .bottom-line {
  height: 2px;
  background: var(--UI-GSK-Orange-02, #ff4e00);
}

/* -- End Meningococo -- */
/* -- Start Enfermedad sarampion -- */

.textocircle {
  margin-left: 10px;
}

.element10 {
  margin-left: 160px;
  padding-top: 20px;
}

.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 */

.columna-primeros-tres,
.columna-ultimos-dos {
  flex: 1;
}

.element3 {
  margin-bottom: 20px;
}

/* -- End sarampion -- */
/* -- Start Enfermedad Paperas -- */

.texth {
  padding-top: 20px;
}

.circletext {
  text-align: justify;
}

.circlecolumn3 {
  padding-top: 20px;
  margin-right: 30px;
}

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

.textinter {
  padding-top: 30px;
}

.aligned-content {
  margin-top: 61px;
  padding-top: 8px;
}

.containercircle {
  margin-top: 60px;
  /* Puedes ajustar este valor según sea necesario */
}

.textcual {
  text-align: right;
}

.text4 {
  padding-top: 40px;
}

.circleimg {
  padding-top: 30px;
}

.circlecol {
  padding-top: 60px;
}

.circleconjun {
  margin-top: -10px;
  /* Ajusta este valor según sea necesario */
}

.circlerube {
  margin-top: -70px;
}

/* -- End rubeola -- */

/* -- Start HIB -- */

/* -- Start Enfermedad Paperas -- */

.circlecolumn {
  margin-left: 250px;
  padding-top: 20px;
}

.circletext {
  text-align: justify;
}

/* -- End paperas -- */
/* -- Start Enfermedad Rubeola -- */

.circle-R {
  margin-left: 160px !important;
  /* Ajusta el valor según sea necesario */
}

.containercircle {
  margin-top: 60px;
  /* Puedes ajustar este valor según sea necesario */
}

.text4 {
  padding-top: 40px;
}

.circleimg {
  padding-top: 30px;
}

.circlecol {
  padding-top: 60px;
}

.textinter {
  padding-top: 30px;
}

.circleconjun {
  margin-top: -10px;
  /* Ajusta este valor según sea necesario */
}

.circlerube {
  margin-top: -70px;
}

/* -- End rubeola -- */

/* -- Start Vacunas Recomendadas -- */

.action-bar-container {
  display: flex;
  padding: 0px 24px;
  margin-top: 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 24px;
}

.action-bar-container h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 28.8px */
}

.actionBar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

@media screen and (max-width: 768px) {
  /* Adjust the max-width as needed */
  .actionBar {
    flex-direction: column;
  }
}

.actionBar .portada-calendario {
  width: 426px;
  height: 210px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 35.5%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
    url(<path-to-image>) lightgray 0px -1.746px / 100% 139.011% no-repeat;
}

.actionBar .button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.actionBar .actionBarBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 10px;
  padding: 0px;
  background-color: transparent;
  border: none;
  transition-duration: 300ms;
}

.actionBar .actionBarBtn:hover p {
  color: white;
  transition-duration: 300ms;
}

.actionBar .actionBarBtn:hover img {
  filter: brightness(0) invert(1);
  transition-duration: 300ms;
}

.actionBar .actionBarBtn img {
  transition-duration: 300ms;
}

.actionBar .actionBarBtn p {
  color: var(--UI-GSK-Orange-02, #ff4e00);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 16.8px */
  padding: 8px 4px;
  transition-duration: 300ms;
}

.actionBarPopUpContainer {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2.5px);
  z-index: 1001;
}

.actionBarPopUpContainer .actionBarPopUp {
  display: flex;
  max-width: 738px;
  margin: 10px;
  width: 100%;
  padding: 32px 64px 64px 64px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 16px;
  background: var(--Gray-100, #fafafa);
}

.actionBarPopUpContainer .actionBarPopUp .actionBarPopUpBtnClose {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
}

/* Download */

.actionBarPopUpContainer.download .actionBarPopUp .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.actionBarPopUpContainer.download .actionBarPopUp .content h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 38px;
  /* 118.75% */
  letter-spacing: -0.48px;
}

.actionBarPopUpContainer.download .actionBarPopUp .content p {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.actionBarPopUpContainer.download
  .actionBarPopUp
  .content
  .button-container
  button {
  width: 156px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Share */

.actionBarPopUpContainer.share .actionBarPopUp {
  max-width: 386px;
  padding: 48px;
  gap: 32px;
  position: relative;
}

.actionBarPopUpContainer.share .actionBarPopUp .share-close-container {
  position: absolute;
  top: 16px;
  right: 16px;
  width: auto;
  z-index: 1;
}

.actionBarPopUpContainer.share .actionBarPopUp .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.actionBarPopUpContainer.share .actionBarPopUp .content h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.actionBarPopUpContainer.share .actionBarPopUp .content .share-container {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}

.actionBarPopUpContainer.share
  .actionBarPopUp
  .content
  .share-container
  .share-btn {
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.actionBarPopUpContainer.share .actionBarPopUp .content .share-container p {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  text-align: left;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  /* 125% */
}

.actionBarPopUpContainer.share
  .actionBarPopUp
  .content
  .share-container
  .share-btn:hover {
  background-color: var(--orange-color);
  border-radius: 8px;
  padding: 8px;
  margin: 0px;
  transition-duration: 300ms;
}

.actionBarPopUpContainer.share
  .actionBarPopUp
  .content
  .share-container
  .share-btn:hover
  p {
  color: white;
  transition-duration: 300ms;
}

.actionBarPopUpContainer.share
  .actionBarPopUp
  .content
  .share-container
  .share-btn:hover
  img {
  filter: brightness(0) invert(1);
  transition-duration: 300ms;
}

/* Animación botón Share Direct */
.action-effect {
  position: relative;
}

.action-effect:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 8px;
  left: 0;
  top: 0;
  width: 100%;
  height: 42px;
  opacity: 0;
  transition: all 0.5s;
  box-shadow: 0 0 5px 20px var(--orange-color);
}

.action-effect:active:after {
  box-shadow: 0 0 0 0 white;
  position: absolute;
  border-radius: 8px;
  left: 0;
  top: 0;
  opacity: 1;
  transition: 0s;
}

.action-effect.rounded:after {
  border-radius: 0.375rem;
}

.action-effect.rounded:after {
  border-radius: 0.375rem;
}

.action-effect:active {
  top: 1px;
}

#p-swiper-conoce-mas-vacunas-recomendadas h3 {
  color: var(--UI-GSK-Black, #151515);
  text-align: center;
  font-family: Inter;
  font-feature-settings: "ss01" on;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

#p-swiper-conoce-mas-vacunas-recomendadas /* ========================================
   4. SWIPERS Y CAROUSELS
   ======================================== */
.swiper {
  padding-bottom: 50px;
}

#p-swiper-conoce-mas-vacunas-recomendadas .swiper .swiper-slide {
  display: flex;
  height: 263px;
}

@media screen and (max-width: 576px) {
  #p-swiper-conoce-mas-vacunas-recomendadas .swiper .swiper-slide {
    max-width: 68vw;
  }

  #p-swiper-conoce-mas-vacunas-recomendadas .navigation-container {
    display: none;
  }

  #p-slider-enfermedades .my-5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .swiper
  .swiper-slide
  #p-swiper-conoce-mas-vacunas-recomendadas
  .swiper
  .swiper-slide
  .image-representation {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 18px;
}

#p-swiper-conoce-mas-vacunas-recomendadas .swiper .swiper-slide h3 {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  text-align: center;

  /* P3/P3 Bold 14 */
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  /* 16.8px */
  height: 51px;
  align-self: stretch;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container span {
  width: 30px;
  height: 8px;
  border-radius: 0px 0px 4px 4px;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-green {
  background: #00c84c;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-blue {
  background: #493bdd;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-violet {
  background: #59018e;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-yellow {
  background: #fcb602;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-red {
  background: #e72e49;
}

#p-swiper-conoce-mas-vacunas-recomendadas .slugs-container .slug-orange {
  background: #ff5500;
}

#p-swiper-conoce-mas-vacunas-recomendadas .navigation-container {
  height: 34px;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #ff4e00;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button-container {
  position: absolute;
  left: 47vw;
  display: flex;
  align-items: center;
  gap: 28px;
}

@media screen and (max-width: 1600px) {
  #p-swiper-conoce-mas-vacunas-recomendadas
    .navigation-container
    .button-container {
    left: 56vw;
    /* Ajusta según sea necesario */
  }
}

@media screen and (max-width: 1200px) {
  #p-swiper-conoce-mas-vacunas-recomendadas
    .navigation-container
    .button-container {
    left: 57vw;
    /* Ajusta según sea necesario */
  }
}

@media screen and (max-width: 800px) {
  #p-swiper-conoce-mas-vacunas-recomendadas
    .navigation-container
    .button-container {
    left: 60vw;
    /* Ajusta según sea necesario */
  }
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button-container
  .button {
  position: relative;
  width: 72px;
  height: 34px;
  top: 52px;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-next {
  right: 0 !important;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-prev {
  left: 0 !important;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-next:after,
#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-prev:after {
  content: none;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-prev {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: var(--border-radius);

  background-color: var(--orange-color);

  & img {
    rotate: 180deg;
  }
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-next {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border-radius: var(--border-radius);

  background-color: var(--orange-color);
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-prev.swiper-button-disabled,
#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-next.swiper-button-disabled {
  opacity: 0.5;
  cursor: pointer;
  pointer-events: all;
}

#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-prev.swiper-button-lock,
#p-swiper-conoce-mas-vacunas-recomendadas
  .navigation-container
  .button
  .swiper-button-next.swiper-button-lock {
  display: block;
}

/* - referencias - */

.references {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  word-wrap: break-word; /* Soporte para navegadores antiguos */
  overflow-wrap: break-word; /* Soporte moderno */
  font-size: 14px !important;
}

.references strong {
  font-size: 14px !important;
}

.references .text-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.references p {
  font-size: 14px !important;
}

.references a {
  color: var(--UI-GSK-Text-Gray, #4b4b4b);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  text-decoration-line: underline;
}

.references .first::before {
  content: "1.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.references .second::before {
  content: "2.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.references .third::before {
  content: "3.";
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* -- End Vacunas Recomendadas -- */

/* -- Responsive Corrections START -- */

@media screen and (min-width: 1200px) {
  .swiper-tre-notas .swiper-slide {
    width: 100% !important;
    max-width: 31% !important;
  }
}

@media screen and (min-width: 901px) {
  /* Muestra el nav desktop */
  nav .wrap-menu-mobile {
    display: none;
  }

  nav .wrap-nav-extend-mobile {
    display: none !important;
  }

  nav .wrap-menu a.active {
    background: var(--light-orange-color);
    color: white;
  }

  nav .wrap-menu a.active img {
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
  }

  .hide-desktop {
    display: none !important;
  }
}

@media screen and (max-width: 1199px) {
  .wrap-box-white {
    flex-direction: column;
    margin: 0;
    gap: 40px;
  }

  .wrap-box-white .box-white-element {
    width: 100%;
    margin: 0 !important;
  }

  /* .swiper-home .swiper-pagination {
		display: none;
	} */

  .swiper-tre-notas .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
  }

  .submenu-detalle {
    max-width: 340px;
    width: 100%;
    padding: 0 80px 0 31px;
  }

  .submenu-links {
    width: auto;
    padding: 0 50px;
  }
}

@media screen and (max-width: 994px) {
  .submenu-detalle {
    width: auto;
    padding: 0 40px 0 31px;
  }
  .titledescargamobile {
    color: #ff4e00;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
  }
  .textcalendario {
    color: var(--text-color, #4b4b4b);
    font-size: 16px;
    font-weight: bold;
  }

  .submenu-links {
    width: auto;
    padding: 0 11px;
  }

  /* .submenu-links a {
    width: 150px;
  }
  .submenumobile a {
    width: 322px !important;
  } */
}

/* -- Responsive Corrections END -- */

/* -- Animations Start -- */

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* -- Animations End -- */
/*blog*/
/* Texto en naranja */
.text-orange {
  color: #ff6d00;
  /* Naranja */
}

/* Botón de compartir artículo */
.btn-share-article {
  border: 2px solid #ff6d00;
  color: #ff6d00;
  font-weight: bold;
  padding: 0.75em 1.5em;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn-share-article:hover {
  background-color: #ffe0b2;
  /* Fondo naranja claro al pasar el mouse */
  color: #ff6d00;
}

.text-orange1 {
  color: inherit;
  /* Mantiene el color original del texto */
}

.text-orange2 {
  color: #ff6d00;
  /* Mantiene el color original del texto */
}

a.text-orange1 {
  color: inherit !important;
  /* Asegura que no cambie el color del texto */
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  /* Quita el subrayado predeterminado */
  padding-bottom: 4px;
}

a.text-orange1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--orange-color);
  /* Línea en color naranja */
  transform: scaleX(0);
  /* Oculta la línea inicialmente */
  transform-origin: left;
  transition: transform 0.3s ease-out;
  /* Transición de animación */
}

a.text-orange1:hover::after {
  transform: scaleX(1);
  /* Muestra la línea al hacer hover */
}

.myths-container {
  position: relative;
  padding-left: 20px;
}

.myths-container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: 90%;
  width: 1px;
  background-color: #c6c5c5;
}

.myths-container ul li {
  padding: 5px 0;
  margin-bottom: 10px;
}

.text-orange-false {
  color: #ff4e00;
}

.risk-factors {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.factor {
  display: flex;
  align-items: flex-start;
}

.factor-icon {
  width: 60px;

  margin-right: 15px;
}

.symptom-icon {
  width: 80px;

  margin-bottom: 10px;
}

.mitos-herpes {
  margin-top: 10px;
}

.mitos-herpes1 {
  margin-top: 10px;
}

.vacunacion {
  margin-top: 10px;
}

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

.textosinicio {
  font-family: "Inter", sans-serif;
  /* Font family */
  font-weight: 400;
  /* Font weight */
  font-size: 14px;
  /* Font size */
  line-height: 16.8px;
  /* Line height */
  color: #ff9770;
  letter-spacing: 0.08em;
}

.preventable-diseases-title {
  color: #ff9770 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 19.8px !important;
  letter-spacing: 24% !important;
}
.preventable-diseases-title2 {
  color: #ff9770 !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  line-height: 1.5 !important; /* Aumenta el espaciado entre líneas */
  letter-spacing: 0.3em !important; /* Incrementa el espaciado entre letras */
}

.title-tosferina {
  padding-top: 30px;
}

.title-tosferina1 {
  padding-top: 30px;
  font-size: 32px !important;
}

.text-gray {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 400;
  line-height: 18px;
  color: #4b4b4b !important;
}

.article-section {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4b4b4b;
  padding-top: 90px;
}

.article-section h5 {
  font-weight: 600;
}

.text-full-width {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-left: -70px !important;
}
.text-full-width1 {
  white-space: nowrap;
  width: 100%;
  text-align: center;
}
.text-full-width2 {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-left: -41px;
}
.top-rotavirus {
  margin-top: 20px;
}

.article-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #c6c5c5;
  /* Updated vertical line color */
  padding-left: 1em;
  padding-top: 1em;
  /* Additional space to lower content */
}

.article-list li {
  margin-bottom: 1.5em;
  padding-left: 0.5em;
  text-align: left;
}

.custom-title {
  font-family: "Inter", sans-serif;
  /* Ensure 'Inter' is imported in your project */
  font-weight: 700;
  /* Bold weight */
  font-size: 16px;
  /* Font size */
  line-height: 28.8px;
  /* Line height */
  color: #151515;
  /* Adjust color if specified */
}

.custom-title1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  /* Bold weight */
  font-size: 24px !important;
  /* Font size */
  line-height: 28.8px;
  /* Line height */
  color: #151515;
  /* Adjust color if specified */
}

.text11 {
  padding-top: 30px;
}

.titleprincipal {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  color: #151515;
  padding-top: 16px;
}
.titleprincipalprevenible {
  font-size: 24px;
}

.textmitos {
  padding-top: 18px;
}

.custom-heading {
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  word-spacing: 20% !important;
}

.explore-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 27px;
  color: #151515;
  padding-top: 30px;
}

.list-unstyled {
  padding-top: 10px;
}

.explore-section {
  margin-top: -1rem;
}

.padding-text {
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 12px;
}

.textsintomas {
  text-align: left !important;
  margin-left: -390px;
}

.textsintomastetanos {
  text-align: left !important;
  margin-left: -360px;
}

.text-sintomas {
  text-align: left !important;
}

.prevention-section {
  text-align: left;
  margin-left: -80px;
}

.circle-container.adjusted {
  margin-top: -120px;
}

.symptoms-title {
  padding-top: 40px;
}

.custom-gap {
  gap: 2rem !important;
}

.custom-col {
  flex: 0 0 20.83%;
  max-width: 20.83%;
}

.text-conth {
  padding-top: 20px;
}

.margin-top-large {
  margin-top: 20px;
}

.textosarticulos {
  font-size: 18px;
}

.textmitoszoster {
  padding-top: 40px;
}

.swiper-pagination-bullet {
  display: none;
}

.swiper-pagination-bullet:nth-child(-n + 6) {
  display: inline-block;
}

.textosvacunasr {
  padding-top: 50px;
}

.text-white {
  color: #ffffff;
}

.text-limited {
  max-width: 100%;
  /* Ajusta el ancho máximo */
  white-space: normal;
  /* Permite que el texto se ajuste a múltiples líneas */
  word-wrap: break-word;
  /* Rompe las palabras largas si es necesario */
  overflow-wrap: break-word;
  /* Controla el desbordamiento para palabras largas */
  text-align: center;
  /* Centra el texto */
}

/* estilos title principal*/
.titleenfermedadesp {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* Black */
  font-size: 40px;
  line-height: 120%;
  /* 120% of the font size */
  letter-spacing: 0%;
}

/* Estilos para título de enfermedades prevenibles según Figma */
.enfermedades-hero h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 900;
	font-size: 40px;
	line-height: 1.2;
	letter-spacing: 0;
	color: #151515;
}

/* Estilos para párrafo de enfermedades prevenibles según Figma */
.enfermedades-hero p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0;
	color: #4b4b4b;
}

/*END estilos */

/*banner vacunacion*/
.banneraldiavacunacion {
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  /* Black */
  font-size: 32px !important;
}

/*END VACUNACION */
.textcardvacunas {
  color: #fff;
}

.textohepatitisbvacunas {
  margin-left: 100px !important;
}

.enfermedadesinfecciosas {
  width: 40%;
}

.box-light-orange1 {
  background: #ffd6a5;
  display: flex;
  border-radius: 10px;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
  padding: 15px;
  max-width: 600px;
  /* Limita el ancho máximo */
  margin: 0 auto;
  /* Centra horizontalmente */
  text-align: center;
  margin-right: -240px;
}
.box-light-orange2 {
  background: #ffd6a5;
  display: flex;
  border-radius: 10px;
  align-items: left;
  flex-direction: row;
  justify-content: space-evenly;
  gap: 20px;
  padding: 15px;
  max-width: 800px;
  /* Limita el ancho máximo */
  margin: 0 auto;
  /* Centra horizontalmente */
  text-align: left;
  margin-right: -361px;
}

.box-light-orange1 p {
  font-weight: 700;
}

.title-heading {
  color: var(--UI-GSK-Light-Cream, var(--International-Orange-50, #fff7ec));
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* Black */
  font-size: 40px;
  line-height: 120%;
  letter-spacing: 0;
}

.title-heading1 {
  color: var(--UI-GSK-Light-Cream, var(--International-Orange-50, #fff7ec));
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* Black */
  font-size: 28px;
  line-height: 120%;
  letter-spacing: 0;
}
.title-heading3 {
  color: var(--UI-GSK-Light-Cream, var(--International-Orange-50, #fff7ec));
  font-family: "Inter", sans-serif;
  font-weight: 900;
  /* Black */
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0;
}
.btn-disabled:disabled {
  background: #c6c5c5;
  color: white;
  border: 0;
}
.custom-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-toggle-btn {
  width: 100%;
  height: 56px; /* Ajustar la altura */
  background-color: #be3a28;
  color: #fff;
  border: none;
  text-align: left;
  font-weight: bold; /* Cambiado de 'black' a 'bold' */
  cursor: pointer;
  border-radius: 20px;
  padding: 0 20px; /* Alinear el texto */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacio entre texto e icono */
}

.dropdown-toggle-btn img.dropdown-chevron {
  width: 16px; /* Ajustar tamaño del icono */
  height: 16px;
}
.dropdown-icon {
  width: 16px !important;
  height: 16px;
  margin-left: 10px; /* Separación del texto */
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  padding: 10px;
  z-index: 10;
}
.dropdown-toggle-btn img.dropdown-chevron {
  position: absolute;
  right: 15px; /* Ajusta la posición horizontal */
  top: 50%; /* Centra verticalmente */
  transform: translateY(-50%);
  width: 12px; /* Tamaño de la imagen */
  height: auto;
  pointer-events: none; /* Evita que interfiera con los clics */
}
.dropdown-menu.show {
  display: block;
}

.dropdown-menu li {
  list-style: none;
  padding: 10px;
  font-size: 16px;
}

.dropdown-menu li a {
  color: #333;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  color: #ff4e00;
}

.text-links a {
  color: inherit;
  text-decoration: none; /* Removes the underline */
}

.text-links a:hover {
  text-decoration: underline; /* Adds an underline on hover, if desired */
}
/* Estilo para los enlaces de la lista */
.text-link {
  color: inherit; /* Mantiene el color del texto del contenedor */
  font-size: 14px; /* Ajusta el tamaño de fuente si es necesario */
}

.no-decoration {
  text-decoration: none; /* Elimina el subrayado */
}

.no-decoration:hover {
  text-decoration: underline; /* Subrayado al hacer hover (opcional) */
}
.iconclose {
  width: 40px;
  height: 40px;
}
.btndes {
  border-radius: 25px !important;
}
.box-light-orange p {
  color: inherit !important; /* Utiliza el color heredado del contenedor */
  font-weight: bold !important; /* Aplica solo el bold sin cambiar el color */
}
/* Estilo del botón */
/* Estilo del botón */
.btn-custom-dropdown {
  background-color: #be3a28;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  width: 100%;

  height: 56px; /* Altura ajustada a 56px */
  padding: 10px;
  font-weight: bold;
  text-align: center;
  display: flex; /* Para centrar contenido */
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
}

/* Mantener el color del botón al hacer clic */
.btn-custom-dropdown:focus,
.btn-custom-dropdown:active,
.btn-custom-dropdown:not(.show) {
  background-color: #be3a28 !important;
  color: #ffffff !important;
  box-shadow: none;
}

/* Estilo del menú desplegable */
.custom-dropdown-menu {
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 10px 0;
}

/* Estilo de los elementos del menú */
.custom-dropdown-menu .dropdown-item {
  color: #333;
  font-weight: normal;
  padding: 10px 20px;
}

.custom-dropdown-menu .dropdown-item:hover {
  background-color: #f5f5f5;
}

.swiper-tre-notas12 .swiper-slide12 .box-white {
  min-height: 530px;
  padding-bottom: 30px;
  align-items: flex-start;
  margin-bottom: 30px;

  & .float-category {
    background: var(--cat-color-orange);
    color: var(--white-color);
    line-height: 30px;
    height: 30px;
    display: inline-block;
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
    position: absolute;
    top: 0;
    left: 30px;
    white-space: nowrap;
    /* Mantener el texto en una sola línea */
    overflow: hidden;
    /* Ocultar el desbordamiento */
    text-overflow: ellipsis;
    /* Mostrar los tres puntos al final */
    max-width: 320px;
    z-index: 100;
    font-size: 12px;
  }

  & .img-thumb-notas {
    object-fit: contain;
    width: 100%;
    padding-bottom: 20px;
  }

  & h2 {
    text-align: left;
    padding: 0 30px;
    color: #4b4b4b;
    font-size: 24px;
  }

  & h3 {
    text-align: left;
    padding: 0 30px;
  }

  & p {
    text-align: left;
    padding: 0 30px;
  }

  & a.text-orange {
    position: absolute;
    display: block;
    bottom: 60px;
    left: 30px;
  }
}
.float-category1 {
  background: var(--cat-color-orange);
  color: var(--white-color);
  line-height: 30px;
  height: 30px;
  display: inline-block;
  padding: 0 10px;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: 0;
  left: 30px;
  white-space: nowrap;
  /* Mantener el texto en una sola línea */
  overflow: hidden;
  /* Ocultar el desbordamiento */
  text-overflow: ellipsis;
  /* Mostrar los tres puntos al final */
  max-width: 320px;
  z-index: 100;
  font-size: 12px;
}
.float-category2 {
  background: var(--cat-color-orange);
  color: var(--white-color);
  line-height: 30px;
  height: 30px;
  display: inline-block;
  padding: 0 10px;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: 5px;
  left: 30px;
  white-space: nowrap;
  /* Mantener el texto en una sola línea */
  overflow: hidden;
  /* Ocultar el desbordamiento */
  text-overflow: ellipsis;
  /* Mostrar los tres puntos al final */
  max-width: 320px;
  z-index: 100;
  font-size: 12px;
}
.float-right {
  right: 28px; /* Ajusta la posición hacia el lado derecho */
  left: auto; /* Asegura que no esté anclado al lado izquierdo */
}
.textcard {
  font-size: 32px !important;
}
.varicelacontainer2 {
  padding-top: 110px;
}
.icon-large {
  width: 70%;
}
.textmeningitis {
  font-size: 24px !important;
}
.quien-esta1 {
  font-size: 12px !important;
}

.custom-btn-margin {
  margin-top: 30px !important; /* Ajusta el valor según sea necesario */
}
.pb-custom {
  padding-bottom: 2em;
}

/* fondo blog */
.new-background-class {
  background-color: #fffbfa !important;
}
.enfermedades-prevenibles-section {
  background-image: url("/images/fondos/MODULO HOME 2.png"); /* reemplaza con la ruta correcta */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 48px;
  margin-bottom: 48px;
}
.text-white4 {
  color: #fff;
}
.reference-link {
  font-size: 12px !important;
  color: black;
}
.textmcenter {
  text-align: center !important;
  margin-left: -20px;
}
/* ========================================
   12. RESPONSIVE DESIGN - MEDIA QUERIES
   ======================================== */
@media (min-width: 992px) {
  /* Solo afecta a pantallas grandes */
  .move-up {
    margin-top: -40px !important; /* Ajusta el valor según lo necesites */
  }
  .circlesignosrube {
    padding-top: 2px !important;
  }
}

/* ERROR: EN EL HOME SE JUSTIFICA EL TITULO / Imagen de fondo para escritorio */
/* .title-tosferina {
    text-align: justify;
}
/* Estilo general */
.textpaddingt {
  padding-top: 20px;
}
.text-margin {
  margin-top: 30px !important;
}
.extra-margin {
  margin-top: 50px; /* Ajusta este valor según lo necesario */
}

.move-up {
  margin-top: -10px; /* Ajusta el valor según la necesidad */
}
.text-start {
  font-size: 14px;
}
.influezagap {
  grid-gap: 85px !important;
}
.paddinghepatitisa {
  padding-top: 20px;
}
.contentbeneficios {
  margin-left: 271px;
}
.important-vaccination {
  text-align: center; /* Centra el texto */
  font-size: 32px; /* Margen superior */
  color: #000;
  padding-bottom: 1em;
}
.textmeningitis-blog {
  font-size: 32px !important;
}
.textsecuelas {
  margin-top: -50px !important;
}
.container-blog-meningitis {
  padding: 0 1em;
}
.border-top-referencias {
  border-top: 1px solid #959595; /* Define el color y grosor de la línea */
  margin-top: -1px; /* Asegura que la línea esté unida al contenido */
  padding-top: 10px; /* Opcional: agrega espacio interno si es necesario */
}
.container-desktop {
  display: flex;
  justify-content: center; /* Centrado por defecto */
  width: 100%; /* Asegura que ocupe todo el ancho */
  margin-left: 151px !important;
}
/* Estilos para pantallas de escritorio */
@media (min-width: 900px) {
  .swipperarrow {
    position: absolute !important; /* Posiciona el elemento relativo al contenedor */
    bottom: -37px !important; /* Ajusta para colocarlo debajo de las tarjetas */
    left: 50% !important; /* Centra horizontalmente */
    transform: translateX(
      -50%
    ) !important; /* Mantiene el centrado horizontal */
    width: 100% !important; /* Opcional: ajusta el ancho si lo necesitas */
  }
  .content-blog-meningitis {
    margin-left: 185px;
  }
  .mitoicondestok {
    margin-left: 10px !important;
  }
  .mitoicondestok1 {
    margin-left: 10px !important;
    margin-top: 20px !important;
  }
  .boton-continuar-leyendo {
    margin-top: 15px !important; /* Separa el botón del texto superior */
    padding-top: 10px !important; /* Opcional: agrega espacio interno si es necesario */
    display: flex; /* Mantén la alineación de los elementos dentro del botón */
    align-items: center; /* Asegura que el texto y el ícono estén alineados */
  }
  .separar-boton {
    margin-top: 20px !important; /* Asegura que el margen superior se aplique */
    padding-top: 5px; /* Agrega espacio interno si es necesario */
    display: flex; /* Asegura la alineación del ícono y el texto */
    align-items: center;
  }
}

/* Media query específica para pantallas de 1024px a 1270px */
@media screen and (max-width: 1270px) and (min-width: 1024px) {
  nav {
    width: calc(100% - -17px);
  }

  .submenu-links {
    width: auto;
    padding: 0 12px;
  }

  .submenu-links a {
    width: 254px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .submenu-detalle {
    width: auto;
    padding: 0px 80px 0 0px;
  }

  nav .wrap-menu .wrap-nav a {
    text-decoration: none;
    display: block;
    padding: 15px 9px;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 12px;
  }
}

/* Ajuste "a criterio" (sin spec de Figma para tablet) para que el submenu
   desktop del navbar no se desborde entre 901px y 1279px: en ese rango, el
   contenido fijo del submenu (340px detalle + 48px gap + 614px grid + 128px
   de padding = 1130px) no entra en el ancho real del nav. Achicamos padding,
   gaps y el ancho del detalle, y dejamos que el título pase a 2 líneas en
   vez de recortarse. Las reglas previas de .submenu-detalle en este archivo
   (max-width:1199 y 1024-1270) quedan sin efecto real en este rango porque
   sus paddings agregados (80px) las empujan de nuevo contra el max-width. */
@media screen and (min-width: 901px) and (max-width: 1279px) {
  nav .wrap-nav-extend {
    padding: 75px 32px 24px 32px;
  }

  .submenu-first,
  .submenu-second,
  .submenu-third {
    gap: 24px;
  }

  .submenu-detalle,
  .submenu-detalle1 {
    width: 240px;
    max-width: 240px;
    padding: 0;
  }

  .textvacunas {
    white-space: normal !important;
  }

  .submenu-links-grid {
    gap: 1.5em;
  }
}

/* Media query específica para pantallas de 1024px */
@media screen and (max-width: 1350px) and (min-width: 769px) {
  nav {
    --nav-padding-x: 20px;
    padding: 12px var(--nav-padding-x);
  }

  /* Navbar - texto e icono en una sola línea para 1024px */
  nav .wrap-menu {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  nav .wrap-menu .wrap-nav a {
    text-decoration: none;
    display: flex !important;
    align-items: center !important;
    padding: 12px 2px !important;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-size: 12px;
    gap: 6px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }

  nav .wrap-menu .wrap-nav a img {
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  .thumb-categorys {
    height: 192px;
  }

  .grid-vaccines {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .thumb-disease1 h2 {
    font-size: 12px !important;
  }

  .actionBarBtn.download {
    width: 247px !important;
    height: 78px !important;
  }
  .custom-download-button {
    width: 212px !important;
    height: 78px !important;
  }
  .button-text {
    font-size: 12px !important;
  }
  .thumb-categorys-white {
    height: 231px;
    padding: 10px;
  }

  .thumb-disease1 {
    display: flex;
    height: 227px;
  }

  .custom-download-button p {
    font-size: 14px;
  }

  .custom-action-btn {
    width: 222px !important;
    height: 78px !important;
  }

  .custom-action-btn p {
    font-size: 14px !important;
  }
}

/* Default styles for mobile */
@media (min-width: 1024px) {
  .swiper-tre-notas .swiper-slide .box-white {
    min-height: 480px; /* Ajusta el tamaño mínimo */
    width: 92%; /* Ajusta el ancho según el diseño */
    padding-bottom: 20px; /* Ajusta el padding */
    margin-bottom: 20px; /* Reduce el margen inferior */

    & .float-category {
      max-width: 250px; /* Reduce el ancho máximo */
      font-size: 12px;
      margin-top: 0px; /* Ajusta el tamaño de fuente */
      font-size: 12px;
    }
    & .float-category4 {
      background: var(--cat-color-orange);
      color: var(--white-color);
      line-height: 30px;
      height: 30px;
      display: inline-block;
      padding: 0 10px;
      border-radius: 0 0 10px 10px;
      position: absolute;
      top: 4px;
      left: 30px;
      white-space: nowrap;
      /* Mantener el texto en una sola línea */
      overflow: hidden;
      /* Ocultar el desbordamiento */
      text-overflow: ellipsis;
      /* Mostrar los tres puntos al final */
      max-width: 320px;
      z-index: 100;
      font-size: 12px;
    }

    & h2 {
      font-size: 20px; /* Reduce el tamaño del título */
    }

    & p {
      font-size: 14px; /* Ajusta el tamaño del texto */
    }

    & a.text-orange {
      bottom: 40px; /* Ajusta la posición */
    }
  }
}
/*Cajas blog meningitis */

.box-verde1 {
  background: transparent url(/images/Card_Verde.png) no-repeat center center /
    cover;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 139%;
  /* Aumenta el ancho total de la caja */
  max-width: 439px;
  margin-left: 50px;
  /* Controla el ancho máximo si quieres limitarlo */

  & h3 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-align: left;
  }

  & .btn-custom-outline {
    background: var(--white-color);
  }
}

.textbox {
  color: #fff;
  text-align: left;
}

.box-blue1 {
  background: transparent url(/images/Card_Azul2.png) no-repeat center center /
    cover;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 139%;

  max-width: 432px;
  /* Controla el ancho máximo si quieres limitarlo */
  margin-left: 148px;

  & h3 {
    font-size: 24px;
    font-weight: bold;
    color: var(--white-color);
    text-align: left;
  }

  & .btn-custom-outline {
    background: var(--white-color);
  }
}

.box-morado1 {
  background: transparent url(/images/Card_Morada2.png) no-repeat center center /
    cover;
  border-radius: 20px;
  /* Aumenta el valor para bordes más redondeados */
  box-shadow: var(--box-shadow);
  min-height: 450px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 141%;
  /* Aumenta el ancho total de la caja */
  max-width: 432px;
  /* Controla el ancho máximo si quieres limitarlo */
  margin-left: 242px;

  /* Ajuste del título */
  h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--white-color);
    text-align: left;
  }
}
.box-content {
  position: relative;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.single-line-btn:hover {
  background-color: transparent; /* Fondo transparente */
  color: #ff6d00; /* Texto naranja */
}

.text-separated {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
  line-height: 1.5; /* Ajusta este valor según la separación deseada */
  padding-top: 10px;
}
.paddingvacunacion {
  margin-top: 10px;
}
/* Ocultar menú móvil por defecto */
.wrap-nav-extend-mobile {
  display: none;
}

/* Opcional: transiciones para un efecto más suave */
.wrap-nav-extend-mobile {
  transition: all 0.3s ease-in-out;
}
.content1 {
  gap: 6px !important;
}
.paddinghepatitis {
  padding-top: 20px;
}

.paddingvacunas {
  font-size: 20px !important;
}
@media (min-width: 768px) {
  .img-icon-signos {
    padding-top: 2px;
  }
  .img-icon-signos1 {
    padding-top: 8px;
  }
  .img-icon-signos3 {
    margin-top: 43px;
  }
}
.article-heading {
  font-size: 20px;
  font-family: "Inter", sans-serif;
}
.article-heading1 {
  padding-top: 90px;
  font-size: 20px;
  font-family: "Inter", sans-serif;
}

/* Contenedor personalizado para las flechas */
.navigation-container-custom {
  gap: 20px; /* Espaciado entre las flechas */

  width: 1700px;
}

/* Asegúrate de que las flechas sean visibles */
.imgbuttonnext {
  position: static; /* Evita que Swiper las alinee automáticamente */
  z-index: 10; /* Asegúrate de que estén sobre el contenido */
}

.titlesaram {
  text-align: center;
}
.adjust-position {
  margin-top: -26px; /* Ajusta el valor para moverlo más o menos hacia arriba */
}

.textva1-desktop {
  margin-top: 38px;
}

select {
  font-size: 1.2rem !important; /* Ajusta el tamaño de la fuente según necesites */
}

.thumb-categorys:visited,
.thumb-categorys:active,
.thumb-categorys:focus {
  color: #fff; /* Mantiene el mismo color */
  text-decoration: none;
}
.subtitle-text {
  font-size: 32px;
}
/* --- Filtros Blog General --- */
.blog-filtros-wrapper {
  background-color: #fff;
  padding: 32px 160px;
}

.blog-filtros-titulo {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.2;
  color: #151515;
  margin-bottom: 24px;
  text-align: center;
}

.blog-filtros-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #151515;
  margin-bottom: 24px;
  text-align: center;
}

.blog-filtros-subtitulo {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #151515;
  margin-bottom: 16px;
  text-align: center;
}

/* Botón Ver Filtros - Solo en Mobile */
.blog-filtros-verfiltros-btn {
  display: none; /* Desktop: oculto */
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  border: 2px solid #e6531d;
  color: #e6531d;
  font-weight: bold;
  font-size: 16px;
  padding: 14px 110px;
  border-radius: 100px;
  margin-bottom: 1.5em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-filtros-icon img {
  width: 20px;
  height: 20px;
}

/* --- Barra de Filtros --- */
.blog-filtros-barra {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  width: 100%;
  flex-wrap: nowrap !important;
}

/* Dropdowns dentro de la barra de filtros */
.blog-filtros-barra .custom-select-wrapper {
  position: relative;
  flex: 0 0 auto;
  width: 250px;
  margin-bottom: 0;
}

.blog-filtros-barra .custom-select-trigger {
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1441px) {
  .blog-filtros-barra .custom-select-trigger {
    width: 270px;
    box-sizing: border-box;
  }
}

/* Media query para pantallas de 1024px */
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .blog-filtros-wrapper {
    padding: 32px 40px;
  }

  .blog-filtros-barra {
    gap: 10px;
    padding: 12px;
  }

  .blog-filtros-barra .custom-select-wrapper {
    width: 160px;
  }

  .blog-filtros-barra .custom-select-trigger {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
  }

  .blog-filtros-btn {
    padding: 12px 24px;
    font-size: 14px;
    white-space: nowrap;
  }

  .blog-filtros-titulo {
    font-size: 32px;
  }

  .blog-filtros-desc,
  .blog-filtros-subtitulo {
    font-size: 16px;
  }

  .blog-card {
    margin-bottom: 1.5rem;
  }

  #home-blog-cards {
    padding-top: 40px;
  }
}

/* Botón aplicar filtros */
.blog-filtros-btn {
  background-color: #ff4e00;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  padding: 16px 32px;
  height: 50px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  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);
}

/* -- Estilos para las flechas -- */

.swiper-button-next-blog {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.arrow-back img {
  width: 46px;
  height: auto;
  transform: rotate(360deg);
}

.swiper-button-next-blog {
  background-color: #f2572d;
  border: none;
}

.swiper-button-prev-blog img,
.swiper-button-next-blog img {
  width: 20px;
  height: 20px;
}

/* -- Estilos para la paginación (bullets) -- */
.swiper-pagination {
  position: static; /* 👈 IMPORTANTE: no absoluto */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px; /* espacio entre flechas y bullets */
  gap: 8px;
}

.swiper-pagination-bullet {
  width: 35px;
  height: 5px;
  background-color: #e6cfc4;
  border-radius: 3px;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: #f2572d;
}
/* Fondo de la sección */

/* Cards */

.descarga-card-img {
  position: relative;
  overflow: hidden;
}

.calendario-img {
  width: 100%;
  height: 142px;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.descarga-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  width: 40px;
  height: 40px;
}

.descarga-icon img {
  width: 82%;
  height: auto;
  display: block;
  padding-top: 210px;
}

.descarga-section-body {
  background-color: #ffedd3 !important;
  padding: 1em 0;
}
.sin-padding {
  background-color: transparent !important;
  padding: 0 !important;
}

.descarga-titulo {
  font-weight: bold;
  font-size: 24px !important;
}

.descarga-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.descarga-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.descarga-card-link {
  color: #fa541c;
  font-weight: bold;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  margin-top: 0;
}

.descarga-card-link:hover {
  text-decoration: underline;
}

/* Icono de descargar */
/* Ajuste para botón de descarga sobre imagen */

/* Cuerpo de la card */
.descarga-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 162px;
  border: 0.86px solid #f0efed;
  border-top: none;
}

/* Tags */
.descarga-card-tags {
  color: #aaa;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

/* Título */
.descarga-card-title {
  font-size: 16px !important;
  font-weight: normal !important;
  margin-bottom: auto;
}

/* blog */
/* Paginación */
.pagination {
  display: flex;
  gap: 10px;
}

.pagination .page-item .page-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: #212121;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d1d1; /* 🔥 Borde gris para no activos */
  padding: 0;
}

.pagination .page-item.active .page-link {
  background-color: #f15822; /* 🔥 Fondo naranja activo */
  color: #fff;
  border: none; /* 🔥 Sin borde en activo */
}

/* Activo */
.pagination .page-item.active .page-link {
  background-color: #ff5722; /* Fondo naranja solo para el activo */
  color: #fff;
}

/* Hover en botones */
.pagination .page-link:hover {
  background-color: rgba(
    255,
    87,
    34,
    0.1
  ); /* Naranja muy clarito al pasar mouse */
}

/*card final home-blog*/
.recomendacion-card {
  border-radius: 20px;
  padding: 2em;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.recomendacion-card h3 {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 1rem;
  color: #fff;
}

.recomendacion-card p {
  font-size: 16px;
  margin-bottom: 2rem;
  color: #fff;
}
.text-n {
  font-size: 20px;
  color: #151515 !important;
}

.recomendacion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.75em 1.5em;
  font-weight: bold;
  font-size: 1rem;
  text-decoration: none;
  gap: 0.5em;
  transition: all 0.3s ease;
}

.recomendacion-btn img {
  width: 16px;
  height: auto;
}

/* Colores de fondo */
.recomendacion-card-orange {
  background-color: #f15a24; /* 🔥 Naranja fuerte */
}

.recomendacion-card-lightorange {
  background-color: #facd9e; /* 🔥 Naranja claro */
  color: #000;
}

.recomendacion-card-brown {
  background-color: #3b0d00; /* 🔥 Marrón oscuro */
}

/* Botones */
.recomendacion-btn-white {
  background: #fff;
  color: #000;
  border: 1px solid #ccc;
}

.recomendacion-btn-orange {
  background: #f15a24;
  color: white;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

/*card de paginacion*/
.blog-card-tags {
  font-size: 13px;
  color: #959595;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.ordenar-label {
  margin-bottom: 0.5rem;
}

.custom-select-ordenar {
  width: 100%;
}

.blog-card1 {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 1em;
  border-radius: 8px;
  background-color: transparent; /* 🔥 sin fondo blanco */
}

.blog-card1-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0.5em 0;
}

.blog-card1-desc {
  font-size: 0.95rem;
  color: #666;
  margin-top: auto; /* 🔥 esto empuja el texto hacia abajo */
}

.blog-card1 img {
  width: 100%;
  height: 145px;
  object-fit: cover;
  border-radius: 8px;
}
.titlehome {
  font-size: 24px;
}
/* select ordenar*/
.ordenar-por-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.ordenar-por-label {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  color: #444;
}

.ordenar-por-label .ordenar-por-icon {
  width: 14px;
  margin-right: 0.5rem;
}

.ordenar-dropdown {
  position: relative;
  width: 220px;
}

.ordenar-toggle {
  width: 100%;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #888;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow-icon {
  width: 12px;
}

.ordenar-menu {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  margin-top: 0.5rem;
  background: #f2f0ee;
  border-radius: 10px;
  list-style: none;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.ordenar-contenedor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: auto; /* para empujarlo a la derecha si está dentro de un flex padre */
}

.ordenar-label {
  font-weight: bold;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
  color: #333;
}

.ordenar-icon {
  width: 16px;
  vertical-align: middle;
}

.custom-select-ordenar {
  width: 220px;
  padding: 0.6em 1em;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  appearance: none;
  background-color: white;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23212121" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
}

.custom-select-ordenar:focus {
  outline: none;
  border-color: #e95e1f;
  box-shadow: 0 0 0 2px rgba(233, 94, 31, 0.2);
}
.swipperblog {
  padding-top: 20px;
}

#resultados-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; /* por defecto alineados centro */
  margin-bottom: 1rem !important;
}

/* ocultamos sólo el contador cuando no hay filtros */
#contador-resultados {
  text-align: left !important;
}

/* Desktop (por defecto) */
body.todos-activos .ordenar-contenedor {
  margin-top: -570px;
}

/* Mobile */
@media (max-width: 768px) {
  body.todos-activos .ordenar-contenedor {
    margin-top: -498px;
  }
}

body.todos-activos #cards-container {
  margin-top: -200px;
}

.descarga-section.solo-cards {
  background: none;
}

#descarga-titulo {
  transition: all 0.3s ease;
  margin-top: 17px;
}
.descarga-section.solo-cards .descarga-card {
  display: block !important;
}
.ordenar-contenedor.filtrar-sin {
  margin-top: 8px !important;
}
.blog-card-title:hover {
  color: #e95e1f; /* tu color naranja */
  transition: color 0.3s ease;
  cursor: pointer;
}

.enlace-blog {
  text-decoration: none; /* quita la línea */
}

.enlace-blog:hover {
  text-decoration: none; /* sigue sin línea cuando pasa el mouse */
}
.swiper-wrapper {
  height: auto !important;
}

/* Intro sección del test interactivo */
.test-intro-section {
  position: relative;
  width: 100%;
  max-width: 1280px; /* Mismo ancho que el navbar según Figma */
  height: 512px; /* igual al diseño */
  margin: 0 auto 2em; /* centrado */
  border-radius: 20px;
  overflow: hidden; /* para que nada se salga de los bordes */
}

.test-intro-section img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#startTestBtn {
  background: white;
  color: black;
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: bold;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
  text-align: center !important;
}

#startTestBtn:hover {
  background: #f0f0f0;
  color: black;
}
/* Fondo general de la sección */
.test-question-section {
  background-color: #ffd6a5;
  padding: 2em;
  border-radius: 20px;
  max-width: 1265px; /* igual al diseño */
  height: 512px; /* igual al diseño */
  margin: 2em auto;
}

/* Estructura interna: lado izq + lado der */
.question-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: stretch;
  height: 100%;
}

/* Parte izquierda */
.question-left {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 100%;
}

.question-left h2 {
  font-size: 24px;
  margin-bottom: 1em;
  font-weight: bold;
  color: #000;

  margin-left: 40px;
}

.answers {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.answer-option {
  font-size: 20px;
  color: #e95e1f;
  margin-left: 40px;
}

.answer-option input {
  margin-right: 0.5em;
}

/* Botones navegación */
.navigation-buttons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-left: -178px;
  position: absolute;
  bottom: 69px;
  left: 0;
  right: 0;
  margin-top: 0;
}

.prev-btn,
.next-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px; /* 16 arriba/abajo, 32 laterales */
  border-radius: 100px; /* ovalado */
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  gap: 8px; /* separación interna (por ejemplo entre ícono y texto) */
  transition:
    background 0.3s,
    color 0.3s;
}

.prev-btn {
  background: #d9d9d9;
  color: #666;
  cursor: not-allowed;
}
.prev-btn.active {
  background: #e95e1f;
  color: white;
  cursor: pointer;
}

.next-btn {
  background: #e95e1f;
  color: white;
}

/* Parte derecha */
/* Parte derecha */
.question-right {
  flex: 1;
  background-color: #461104;
  border-radius: 16px;
  padding: 24px 24px 72px 24px;
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: 86%;
  min-height: 84%;
  box-sizing: border-box;
}

.question-right1 {
  flex: 1;

  border-radius: 16px;
  padding: 24px 24px 72px 24px; /* 👈 más espacio abajo */
  color: white;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.question-right p {
  margin-bottom: 1em;
  color: #fff;
}
.test-progress {
  display: flex;
  justify-content: center;
  gap: 16px; /* separación entre cada número */
  padding: 0;
  margin-bottom: 2em;
}

.test-progress .step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px; /* ancho fijo como en la captura */
  padding: 8px 32px; /* 8px arriba/abajo, 32px lados */
  border: 2px solid #e95e1f;
  background-color: transparent;
  color: #e95e1f;
  border-radius: 100px; /* súper ovalado */
  font-weight: bold;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s;
  font-family: "Inter", sans-serif;
  font-size: 16px;
}

.test-progress .step.active {
  background-color: #e95e1f;
  color: white;
}
#referenciasContainer {
  max-width: 100%;
  margin: 1.5em 50px;
  padding: 24px;
  box-sizing: border-box;
}
.test-progress .step.completed {
  background-color: #ffe8d1;
  color: #e95e1f;
  border: 2px solid #e95e1f;
}
.answer-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  color: #000;
  position: relative;
}

.answer-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #e95e1f;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: border 0.3s ease;
}

.answer-option input[type="radio"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #e95e1f;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s ease-in-out;
}

.answer-option input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Evitar borde azul en focus */
.answer-option input[type="radio"]:focus {
  box-shadow: none;
}
.arrow-back img {
  width: 46px;
  height: auto;
  transform: rotate(360deg);
}
.final-result-section {
  background-color: #fcd6a7;
  border-radius: 16px;
  padding: 2em;
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.final-result-section h3 {
  font-weight: bold;
  font-size: 1.5em;
  margin: 1em 0;
  color: #29204c;
}

.final-result-section p {
  margin: 1em 0;
  color: #333;
}

.factores-riesgo {
  background: #f4a261;
  border-radius: 12px;
  padding: 1em;
  margin: 1em 0;
}

.factores-riesgo h4 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.factores-riesgo ul {
  list-style: disc;
  margin-left: 1.5em;
}

.btn-orange {
  display: inline-block;
  background-color: #e95e1f;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 30px;
  margin-top: 1em;
  transition: background-color 0.3s;
}

.btn-orange:hover {
  background-color: #c94f18;
}

.btn-orange-vacunacion {
  display: inline-block;
  background-color: #e95e1f;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 25px;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.3s;
}

.btn-orange-vacunacion:hover {
  background-color: #c94f18;
  color: white;
  text-decoration: none;
}

.question-right ul {
  padding-left: 20px;
  list-style: disc;
}

.questionback {
  background-color: #ffb96d !important;
}
/* Ajuste del color del cuadro derecho solo en la pantalla final */
#finalResult .question-right {
  background-color: #ffb96d;
}

#finalResult .question-right ul {
  list-style: disc;
  padding-left: 20px;
  color: #000;
}

#finalResult .question-right p {
  font-weight: bold;
  color: #000;
}
/* 🟠 Sección bajo riesgo */
.low-risk-section .question-content {
  align-items: center; /* Centra verticalmente */
}

.low-risk-subtitle {
  margin-left: 40px;
  font-size: 14px;
  color: #000;
}

.low-risk-title {
  margin-left: 40px;
  color: #000;
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}

.low-risk-text {
  margin-left: 40px;
  font-size: 16px;
  color: #000;
  margin-top: 10px;
  max-width: 90%;
}

.low-risk-btn {
  margin-left: 40px;
  display: inline-block;
  margin-top: 130px;
}

/* Imagen derecha (sin fondo marrón) */
.no-bg-right {
  background-color: transparent !important;
  padding: 0;
}

.no-bg-right img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}
.test-question-section1 {
  background-color: #ffd6a5;
  padding: 3em;
  border-radius: 20px;
  max-width: 1265px; /* igual al diseño */
  height: 512px; /* igual al diseño */
  margin: 2em auto;
}

/* 🔴 Sección riesgo alto */
.high-risk-subtitle {
  margin-left: 40px;
  margin-bottom: 1em;
  font-size: 16px;
  color: #000;
}

.high-risk-title {
  margin-left: 40px;
  font-size: 24px !important;
  font-weight: bold;
  color: #000;
}

.high-risk-text {
  margin-left: 40px !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;

  margin-top: 1em !important;
}

.high-risk-btn {
  margin-left: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  margin-top: 20px;
  text-decoration: none;
  background-color: #ff4e00 !important;
  color: #ffffff !important;
  padding: 12px 24px;
  border-radius: 100px;
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  width: 62%;
  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);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.high-risk-btn:hover,
.low-risk-btn:hover {
  background-color: #e04500 !important;
  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);
  text-decoration: none !important;
  color: #fff !important;
}
/* El cuadro marrón (factor de riesgo box) */
.high-risk-box {
  background-color: #ffb96d !important;
  border-radius: 16px;
  padding: 24px;
  font-size: 16px !important;
  color: #000;
}

.high-risk-box p {
  font-weight: bold;
  margin-bottom: 1em;
}

.high-risk-box ul {
  padding-left: 1.5em;
  list-style: disc;
}

.high-risk-box li {
  margin-bottom: 0.2em;
  color: #000;
  line-height: 1.4;
}
.blog-card-title a {
  color: #000;
  text-decoration: none;
  transition: color 0.3s;
}

.blog-card-title a:hover {
  color: #e95e1f;
}
.actionBarBtn.download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 15px;
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  width: 288px;
  height: 78px;
  background-color: #ef5b25;
}

.button-content {
  display: flex;
  align-items: center;
}

.download-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.button-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.button-text .button-bold {
  font-weight: bold;
}

.custom-download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid #e72e49;
  border-radius: 15px;
  background-color: transparent;
  color: #e72e49;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  width: 263px;
  height: 78px;
}

.custom-download-button img {
  width: 24px;
  height: 24px;
}

.custom-download-button p {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.custom-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #ef5b25;
  color: #fff;
  padding: 10px 20px;
  border-radius: 15px;
  text-decoration: none;
  font-size: 16px;
  width: 267px;
  height: 78px;
}

.custom-action-btn img {
  width: 24px;
  height: 24px;
}

.custom-action-btn p {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: #fffcfa;
}

.titlevacunasre {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px !important;
  text-align: center;
}

.action-bar-title {
  font-size: 24px !important;
  font-weight: bold;
  text-align: center;
  position: relative;
}
.linea-desktop-only {
  display: block;
  height: 2px;
  background-color: #959595; /* o usa el color exacto que necesites */
  margin-top: 1em;
  margin-left: 2em;
  margin-right: 2em;
}

.action-bar-title {
  margin-top: 23px; /* margen arriba de la caja completa */
  margin-bottom: 32px; /* margen abajo de la caja completa */
}
.title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title-container h3 {
  margin: 0;
  font-size: 16px;
}

.iconos-grupo {
  display: flex;
  gap: 6px;
  margin-left: 10px;
  align-items: center;
}
arrow-indicator {
  width: 52px;
  height: 32px;
  margin-left: 10px;
  transition: transform 0.3s;
  cursor: pointer;

  margin-top: 1px;
}

.thumb-vaccines.open .arrow-indicator {
  transform: rotate(180deg); /* gira la flecha */
}

.iconos-vaccines {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

/* Regla eliminada para mantener consistencia en alturas de cards */
.thumb-vaccines.open .content-summary {
  display: none;
}
.textcardhome {
  font-size: 18px !important;
}
.section-descarga-index {
  background-image: url("/images/fondos/Frame 164218.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 48px;
  margin-bottom: 48px;
}
.section-descarga-index1 {
  width: 100vw; /* Ocupa todo el ancho de la ventana */
  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;
}
.textdescarga {
  font-size: 18px;
  font-weight: normal;
}
.text-descarga1 {
  font-size: 32px;
  font-weight: bold;
}

.blog-home-wrapper {
  background-color: #ffedd3;
  padding-top: 64px;
  padding-bottom: 64px;
}

.blog-title-home {
  font-size: 32px;
  text-align: left;
  margin-bottom: 0;
  padding-bottom: 0;
}

#home-blog-cards {
  padding-top: 64px;
}
/* Oculta el fondo y título de la sección si solo hay descargables */

section.descarga-section.ocultar-descarga {
  display: none !important;
}
.titleexploraenfermedades {
  font-size: 32px !important;
}

@media (min-width: 992px) {
  .swiper-disease .swiper-pagination-custom {
    position: absolute;
    position: absolute;
    top: 158px;

    padding: 0;
    margin: 0;
    z-index: 1;
  }

  .swiper-disease .swiper-button-prev,
  .swiper-disease .swiper-button-next {
    position: relative;
    z-index: 2;
  }
}
.swiper-pagination.swiper-pagination-vacunas {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 1em !important;
  width: 100% !important;
  height: 20px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.swiper-pagination.swiper-pagination-vacunas .swiper-pagination-bullet {
  display: inline-block !important;
  width: 32px !important;
  height: 6px !important;
  background-color: #ff9770 !important;
  border-radius: 3px !important;
  margin: 0 4px !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  visibility: visible !important;
}

.swiper-pagination.swiper-pagination-vacunas .swiper-pagination-bullet-active {
  background-color: #ff4e00 !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}
/* End */

.blog-full-bg {
  background-color: #ffedd3;
  width: 100%;
}

.blog-full-bg {
  background-color: #ffedd3;
  width: 100vw;
  position: relative;
  left: 36%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index: 1;
}
.diseases .content-container .section-vacunacion {
  padding-left: 0 !important;
}
.btn-inverso {
  background-color: #ffffff;
  color: #000000;
  border: none;
  width: 69%;
}
.fs-18 {
  font-size: 18px;
}
.nota-informativa {
  background-color: #f2f3f2;
  padding: 1.5em;
  margin: 2em 0;
  font-size: 16px;
  color: #333;
  border-radius: 4px;
  line-height: 1.6;
}

.btn-inverso:hover {
  background-color: #f0f0f0;
  color: #000;
}

/*dengue*/
.text-icon {
  margin-left: -24px;
  text-align: left;
}
.text-icon1 {
  margin-left: -24px;
  text-align: left;
}
.text-icon2 {
  margin-left: 18px;
  text-align: left;
}
.text-icon3 {
  margin-left: -36px;
  text-align: left;
}
.text-icon4 {
  text-align: center;
  margin-left: -99px;
}
.full-screen-section {
  padding-left: 0px !important;
}
.textadvertencia {
  background-color: #f0efed !important;
  padding: 18px 24px !important;
  border-radius: 12px !important;
  max-width: 80% !important;
  margin: 16px auto 2.5rem auto !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.textadvertencia div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Los estilos originales de dropdown ya están definidos arriba en el archivo */

/* ========================================
   ESTILOS PARA CALENDARIO Y REFERENCIA 315791
   ======================================== */

/* Contenedor principal del calendario y referencia */
.calendar-reference-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

/* Logo SCP */
.scp-logo-container {
  display: flex;
  align-items: center;
}

.scp-logo-image {
  height: 60px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

/* Sección de títulos del calendario */
.calendar-title-section {
  text-align: center;
}

.calendar-main-title {
  font-family: "akzidenz-grotesk_bqmedium", sans-serif;
  font-size: 18px;
  font-weight: bold;
  color: #315791;
  margin-bottom: 5px;
  line-height: 1.1;
}

.calendar-subtitle {
  font-family: "akzidenz-grotesk_bqmedium", sans-serif;
  font-size: 18px;
  color: #315791;
  font-weight: bold;
}

/* Número de referencia */
.reference-number {
  font-family: "akzidenz-grotesk_bqmedium", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #315791;
  background-color: #e5e7eb;
  padding: 8px 12px;
  border-radius: 5px;
  border: 2px solid #315791;
}

/* Sección informativa del calendario */
.calendar-info-section {
  background-color: #f0efed;
  padding: 20px 30px;
  margin: 20px 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.calendar-info-text {
  flex: 1;
  font-family: "akzidenz-grotesk_bqmedium", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  text-align: justify;
}

.scp-logo-info {
  flex-shrink: 0;
}

.scp-logo-info .scp-logo-image {
  height: 50px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
}

/* Número de referencia 315791 */
.reference-number {
  font-size: 18px;
  font-weight: bold;
  color: #ef5714; /* Color naranja GSK */
  text-align: center;
  margin-bottom: 0;
  font-family: akzidenz-grotesk_bqmedium;
  letter-spacing: 1px;
}

/* ========================================
   BANNER DE CONSULTA MÉDICA
   ======================================== */

.medical-consultation-banner {
  background-color: #ef5b25;
  border-radius: 8px;
  padding: 0px 56px;
  margin: 19px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 69px;
}

.banner-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 20px;
  max-width: 100%;
}

.doctor-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.doctor-image {
  width: 35px;
  height: 35px;
  filter: brightness(0) invert(1);
  display: block;
}

.banner-text {
  color: white;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  display: inline-flex;
  align-items: center;
}

/* Responsive para el banner */
@media (max-width: 768px) {
  .medical-consultation-banner {
    padding: 6px 32px;
    margin: 15px 0;
  }

  .banner-content {
    gap: 15px;
  }

  .doctor-image {
    width: 30px;
    height: 30px;
  }

  .banner-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .medical-consultation-banner {
    padding: 5px 20px;
  }

  .banner-content {
    gap: 12px;
  }

  .doctor-image {
    width: 28px;
    height: 28px;
  }

  .banner-text {
    font-size: 15px;
  }
}

/* ========================================
   ESTILOS GLOBALES PARA TEXTO DE ADVERTENCIA Y TEXTO ADICIONAL
   Aplicados a todas las páginas: test interactivo, home, enfermedades prevenibles
   ======================================== */

/* Estilos para recuadro de advertencia naranja - aplicado a todas las páginas */
.alerta-aviso-naranja,
.alerta-aviso-naranja.container,
.alerta-aviso-naranja.text-center {
	background: #FFF7EC !important;
	border: 1px solid #FF4E00 !important;
	padding: 15px !important;
	text-align: left !important;
	justify-content: flex-start !important;
	align-items: flex-start !important;
	margin: 2.5rem auto 0 auto !important;
	border-radius: 2px;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	max-width: 1088px;
}

.alerta-aviso-naranja span,
.alerta-aviso-naranja.container span {
	width: 100%;
	display: block;
}

.alerta-aviso-naranja strong,
.alerta-aviso-naranja.container strong {
	color: #FF4E00 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	display: block;
	width: 100%;
}

/* Estilos para texto adicional debajo del recuadro - aplicado a todas las páginas */
.texto-adicional-test,
.texto-adicional-test.container {
	margin: 9px auto 16px auto;
	width: 100%;
	max-width: 1306px;
	text-align: left;
}

.texto-adicional-test p,
.texto-adicional-test.container p {
	color: #151515 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	border-bottom: 1px solid #959595;
}

/* Home: el disclaimer antes de "Referencias" debe alinear con el borde real de
   .referencias-section (1120px, sin el gutter de 12px de .container). Scoped a
   body.home para no afectar el disclaimer en las demás páginas que lo comparten. */
body.home .disclaimer .alerta-aviso-naranja.container,
body.home .disclaimer .texto-adicional-test.container {
	width: calc(100% + 24px) !important;
	margin-left: -12px !important;
	margin-right: -12px !important;
}

/* Home: recuadro de aviso sin border-radius y padding 16px según Figma 11129:62840.
   Scoped a body.home para no afectar el disclaimer compartido en las demás páginas. */
body.home .disclaimer .alerta-aviso-naranja.container {
	border-radius: 0 !important;
	padding: 16px !important;
}

/* Home: preserva el margin-bottom original (40px) del texto-adicional-test para que
   el margen negativo de .referencias-home en home siga funcionando igual que antes.
   El global pasó a 16px para que las páginas de enfermedad tengan gap correcto. */
body.home .disclaimer .texto-adicional-test,
body.home .disclaimer .texto-adicional-test.container {
	margin-bottom: 40px !important;
}

/* Home mobile: reintroducir la línea divisoria entre el aviso y "Referencias"
   (Figma 11129:62840 la muestra también en mobile). El reset global de
   section.disclaimer .texto-adicional-test p la quita para todas las páginas;
   acá se restaura solo para home. */
@media screen and (max-width: 768px) {
	body.home section.disclaimer .texto-adicional-test p {
		border-bottom: 1px solid #959595;
		padding-bottom: 15px;
	}
}

/* Tablet 1024px — espacio lateral en disclaimer global */
@media screen and (max-width: 1024px) and (min-width: 769px) {
	section.disclaimer {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/* Mobile — Figma 11384:51899 (REFERENCIAS / Aclaración) */
@media screen and (max-width: 768px) {
	section.disclaimer {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
		/* padding-left: 20px;
		padding-right: 20px; */
		padding-top: 64px;
		box-sizing: border-box;
	}

	section.disclaimer .alerta-aviso-naranja.container,
	section.disclaimer .texto-adicional-test.container {
		width: 100%;
		max-width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	section.disclaimer .alerta-aviso-naranja,
	section.disclaimer .alerta-aviso-naranja.container {
		padding: 16px !important;
		margin: 0 !important;
		border-radius: 2px;
	}

	section.disclaimer .texto-adicional-test,
	section.disclaimer .texto-adicional-test.container {
		margin: 0 !important;
	}

	section.disclaimer .texto-adicional-test p,
	section.disclaimer .texto-adicional-test.container p {
		border-bottom: none;
		padding-bottom: 0;
		word-break: break-word;
	}


	section.disclaimer .disclaimer-mobile-br {
		display: block;
	}
}

/* Restaura la línea divisoria en mobile para páginas de enfermedad (sin body class).
   El bloque anterior la resetea a none globalmente; este la repone para todos. */
@media screen and (max-width: 768px) {
	section.disclaimer .texto-adicional-test p,
	section.disclaimer .texto-adicional-test.container p {
		border-bottom: 1px solid #959595;
		padding-bottom: 15px;
	}
}

.disclaimer-mobile-br {
	display: none;
}

/* ========================================
   FIN ESTILOS PARA CALENDARIO Y REFERENCIA
   ======================================== */