/* ========================================
   Estilos para la página Vacunas Recomendadas
   ======================================== */

/* Intro — Figma 11384:51882 */
.vacunas-recomendadas-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 35px;
	max-width: 1120px;
}

.vacunas-recomendadas-intro__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
}

.vacunas-recomendadas-intro__cards {
	width: 100%;
}

/* Título de categoría — debajo de Calendario vacunal (Figma 13309:113320) */
.vacunas-recomendadas-intro__category-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-bottom: 24px;
}

.vacunas-category-title {
	font-family: 'Inter', sans-serif;
	font-size: 24px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	color: #151515;
	text-align: center;
	margin: 0;
	max-width: 1120px;
	width: 100%;
	word-break: break-word;
}

.vacunas-category-title__ref {
	font-size: 0.645em;
	line-height: 0;
	vertical-align: super;
	font-weight: 700;
}

/* Contenedor de cards de categorías — Figma 11423:81617 */
.wrap-flex-thumb-categorys {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 20px;
	width: 100%;
}

/* Cards de categorías — altura según Figma (node 11423:81617) */
.thumb-categorys-white {
	background-color: #fff;
	text-align: center;
	color: var(--text-color);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-decoration: none;
	border: 1px solid #C6C5C5;
	border-radius: 24px;
	width: 170px;
	height: 132px;
	padding: 16px;
	gap: 12px;
	flex-shrink: 0;
	box-sizing: border-box;
}

.thumb-categorys-white .wrap-img {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.thumb-categorys-white .wrap-img::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 16px;
	mix-blend-mode: color;
	pointer-events: none;
}

/* Imágenes de las cards por categoría */
.thumb-categorys-white[data-category="bebes"]>.wrap-img {
	background: #000 url("/images/portada-bebes.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="bebes"]>.wrap-img::after {
	background-color: #00c84c;
}

.thumb-categorys-white[data-category="Ninos"]>.wrap-img {
	background: #000 url("/images/portada-niños.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="Ninos"]>.wrap-img::after {
	background-color: #493bdd;
}

.thumb-categorys-white[data-category="Adolescentes"]>.wrap-img {
	background: #000 url("/images/portada-adolescentes.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="Adolescentes"]>.wrap-img::after {
	background-color: #59018e;
}

.thumb-categorys-white[data-category="Adultos"]>.wrap-img {
	background: #000 url("/images/portada-adulots.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="Adultos"]>.wrap-img::after {
	background-color: #89402f;
}

.thumb-categorys-white[data-category="Gestantes"]>.wrap-img {
	background: #000 url("/images/portada-embarazadas.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="Gestantes"]>.wrap-img::after {
	background-color: #fab503;
}

.thumb-categorys-white[data-category="Adultos-mayores"]>.wrap-img {
	background: #000 url("/images/portada-adultos-mayores.png") no-repeat center top / cover;
	width: 138px;
	height: 64px;
	margin: 0 auto;
	border-radius: 16px;
	flex-shrink: 0;
	box-shadow: 0px 688.946px 192.664px 0px rgba(0, 0, 0, 0),
		0px 441.235px 176.322px 0px rgba(0, 0, 0, 0.01),
		0px 247.711px 148.799px 0px rgba(0, 0, 0, 0.03),
		0px 110.094px 110.094px 0px rgba(0, 0, 0, 0.04),
		0px 27.523px 61.068px 0px rgba(0, 0, 0, 0.05),
		0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.thumb-categorys-white[data-category="Adultos-mayores"]>.wrap-img::after {
	background-color: #ff5500;
}

/* Estados hover y active de las cards */
.thumb-categorys-white[data-category="bebes"]:hover,
.thumb-categorys-white[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);
}

.thumb-categorys-white[data-category="Ninos"]:hover,
.thumb-categorys-white[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);
}

.thumb-categorys-white[data-category="Adolescentes"]:hover,
.thumb-categorys-white[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);
}

.thumb-categorys-white[data-category="Adultos"]:hover,
.thumb-categorys-white[data-category="Adultos"].active {
	background-color: #89402f;
	color: var(--white-color);
	scale: 1.05;
	transition: all 0.1s;
	box-shadow: var(--box-shadow);
}

.thumb-categorys-white[data-category="Gestantes"]:hover,
.thumb-categorys-white[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);
}

.thumb-categorys-white[data-category="Adultos-mayores"]:hover,
.thumb-categorys-white[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);
}

/* Estilos para títulos en thumb-categorys-white según Figma */
.thumb-categorys-white strong {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	color: #4B4B4B;
	text-align: center;
	width: 100%;
	display: block;
}

/* Texto blanco en estados hover y active */
.thumb-categorys-white:hover strong,
.thumb-categorys-white.active strong {
	color: #FFFFFF !important;
}

/* Ocultar textos descriptivos según diseño Figma */
.descriptionvacunas1 {
	font-size: 14px;
	display: none !important;
}

/* Títulos principales — Figma 11384:51884 */
.main-vaccine-title {
	font-family: 'Inter', sans-serif;
	font-size: 40px;
	font-weight: 900;
	font-style: normal;
	line-height: 1.2;
	color: #151515;
	text-align: center;
	margin: 0;
	width: 100%;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.main-vaccine-subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: #4b4b4b;
	text-align: center;
	margin: 0;
}

.textvacu {
	font-size: 14px;
}

/* Línea separadora desktop */
.linea-desktop-only {
	display: block;
	height: 2px;
	background-color: #959595;
	margin-top: 1em;
	margin-left: 2em;
	margin-right: 2em;
}

/* Contenedor de barra de acciones */
.action-bar-container {
	display: flex;
	padding: 0px 24px;
	margin-top: 15px;
	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 */
}

/* Barra de acciones */
.actionBar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

@media screen and (max-width: 768px) {
	.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;
}

/* Botón de descarga */
.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;
}

/* Botones personalizados */
.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;
}

/* Action bar — Figma 11423:81726 (vacunas recomendadas) */
body.backgroundvacunas .action-bar-container {
	padding: 0;
	margin-top: 24px;
	gap: 0;
	width: 100%;
}

body.backgroundvacunas .actionBar {
	width: 100%;
	gap: 0;
}

body.backgroundvacunas .actionBar .button-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap: 20px;
	width: 100%;
	flex-wrap: nowrap;
	margin: 0;
}

body.backgroundvacunas .actionBar .button-container > * {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

body.backgroundvacunas .actionBarBtn.download {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	min-height: 56px;
	width: auto;
	height: auto;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
		linear-gradient(90deg, var(--download-btn-color, #00C84C) 0%, var(--download-btn-color, #00C84C) 100%);
	transition: opacity 0.2s ease;
}

body.backgroundvacunas .actionBarBtn.download:hover {
	opacity: 0.92;
}

/* Descarga — Gestantes (Figma 11470:57473) */
body.backgroundvacunas .actionBarBtn.download[data-group="Gestantes"],
body.backgroundvacunas .actionBarBtn.download[data-group="Mujeres-embarazadas"] {
	background: #FAB503;
}

body.backgroundvacunas .actionBarBtn.download[data-group="Gestantes"] .actionBarBtn__label,
body.backgroundvacunas .actionBarBtn.download[data-group="Mujeres-embarazadas"] .actionBarBtn__label {
	color: #151515;
}

body.backgroundvacunas .actionBarBtn.download[data-group="Gestantes"] .actionBarBtn__icon,
body.backgroundvacunas .actionBarBtn.download[data-group="Mujeres-embarazadas"] .actionBarBtn__icon,
body.backgroundvacunas .actionBarBtn.download[data-group="Gestantes"]:hover .actionBarBtn__icon,
body.backgroundvacunas .actionBarBtn.download[data-group="Mujeres-embarazadas"]:hover .actionBarBtn__icon {
	filter: brightness(0);
}

body.backgroundvacunas .actionBarBtn.download .actionBarBtn__icon {
	width: 14px;
	height: 17px;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
	margin: 0;
}

body.backgroundvacunas .actionBarBtn__label {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #FFFCFA;
	text-align: center;
	word-break: break-word;
}

body.backgroundvacunas .actionBarBtn__label-main {
	font-weight: 400;
}

body.backgroundvacunas .actionBarBtn__label-bold {
	font-weight: 700;
}

body.backgroundvacunas .actionBar .actionBarBtn:hover p,
body.backgroundvacunas .actionBar .actionBarBtn:hover img {
	color: inherit;
	filter: brightness(0) invert(1);
}

body.backgroundvacunas .custom-download-button {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: 56px;
	height: 56px;
	width: auto;
	border: 1px solid #FF4E00;
	border-radius: 8px;
	background-color: #FFFFFF;
	color: #FF4E00;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	box-sizing: border-box;
}

body.backgroundvacunas .custom-download-button img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin: 0;
}

body.backgroundvacunas .custom-download-button p {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #FF4E00;
	text-align: center;
	margin: 0;
	padding: 0;
}

body.backgroundvacunas .custom-action-btn {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	min-height: 56px;
	height: 56px;
	width: auto;
	border-radius: 8px;
	background-color: #FF5500;
	border: none;
	text-decoration: none;
	box-sizing: border-box;
}

body.backgroundvacunas .custom-action-btn img {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
	margin: 0;
}

body.backgroundvacunas .custom-action-btn p {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: #FFFCFA;
	text-align: center;
	margin: 0;
	padding: 0;
}

@media screen and (max-width: 768px) {
	body.backgroundvacunas .actionBar .button-container {
		flex-direction: column;
		gap: 12px;
	}

	body.backgroundvacunas .actionBar .button-container > * {
		width: 100%;
		flex: none;
	}
}

/* Título de acción */
.action-bar-title {
	font-size: 24px !important;
	font-weight: bold;
	text-align: center;
	position: relative;
	margin-top: 23px;
	margin-bottom: 16px;
}

.dynamic-image-container .action-bar-title {
	margin-bottom: 12px;
}

.download-title {
	/* Estilos específicos si los hay */
}

/* Título de vacunas recomendadas */
.titlevacunasre {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 24px !important;
	text-align: center;
}

/* Popups de acción */
.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;
}

/* Popup de descarga */
.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;
}

/* Popup de compartir */
.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;
}

/* ========================================
   Tabla de Vacunas Alternativas
   ======================================== */

.vacunas-alternativas-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	width: 100%;
	margin: 24px auto;
}

.babies-alternative-vaccines {
	margin-top: 64px;
	width: 100%;
}

.vacunas-alt-header {
	background-color: #00C84C;
	border-radius: 8px;
	padding: 8px 12px;
	width: 100%;
	text-align: center;
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.vacunas-alt-header p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: #151515;
	margin: 0;
	text-align: center;
	letter-spacing: 0;
	word-break: break-word;
}

.vacunas-alt-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.vacunas-alt-row {
	display: flex;
	gap: 12px;
	width: 100%;
}

.vacunas-alt-cell {
	flex: 1;
	background-color: rgba(0, 200, 76, 0.2);
	border-radius: 8px;
	padding: 8px 12px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	box-sizing: border-box;
}

.vacunas-alt-cell p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: #151515;
	margin: 0;
	text-align: center;
	word-break: break-word;
}

/* Controles del slider de enfermedades */
.controles-enfermedades {
	margin-left: 0px;
	padding-top: 39px;
}

/* Botón Ver todas las enfermedades prevenibles */
.btnvacunas-recomendadas {
	margin-top: 20px;
	margin-bottom: 2rem;
	margin-left: 53px;
	background-color: #FF4E00 !important;
	border: none !important;
	color: #FFFFFF !important;
	padding: 16px 32px !important;
	border-radius: 100px !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) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease;
}

.btnvacunas-recomendadas:hover {
	background-color: #c94f18 !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}

@media screen and (max-width: 768px) {
	/* Primary BTN — Figma 11384:53268 */
	body.backgroundvacunas .vacunas-enfermedades-cta {
		width: 100%;
		padding: 0 20px;
		box-sizing: border-box;
		margin-top: 0;
	}

	body.backgroundvacunas .btnvacunas-recomendadas {
		width: 100%;
		max-width: 100%;
		margin: 0;
		min-height: 0;
		height: auto;
		padding: 16px 32px !important;
		font-family: 'Inter', sans-serif !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		line-height: 1.5 !important;
		letter-spacing: 0 !important;
		border-radius: 100px !important;
		box-shadow: 0px 126px 17.5px 0px rgba(0, 0, 0, 0),
			0px 81px 16px 0px rgba(0, 0, 0, 0.01),
			0px 45px 13.5px 0px rgba(0, 0, 0, 0.05),
			0px 20px 10px 0px rgba(0, 0, 0, 0.09),
			0px 5px 5.5px 0px rgba(0, 0, 0, 0.1),
			0px 0px 0px 0px rgba(0, 0, 0, 0.1) !important;
		text-align: center;
		white-space: nowrap;
	}
}

body.backgroundvacunas[data-vacunas-group] section.disclaimer {
	margin-top: 0;
}

/* Sección "Encuentra el punto de vacunación más cercano" */
.banner-descubriste.second-state {
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 48px;
	padding: 0 160px;
	margin-top: 64px;
}

body.backgroundvacunas:not([data-vacunas-group]) .banner-descubriste.second-state,
body.backgroundvacunas:not([data-vacunas-group]) .vacunas-punto-vacunacion {
	display: none !important;
}

body.backgroundvacunas[data-vacunas-group] .banner-descubriste.second-state {
	display: flex;
}

.banner-descubriste.second-state .content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.banner-descubriste.second-state .vacunas-punto-vacunacion__copy {
	display: flex;
	flex-direction: column;
}

.banner-descubriste.second-state .custom-heading {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: #151515;
	margin: 0 0 24px 0;
}

.banner-descubriste.second-state .vacunas-punto-vacunacion__copy p {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #4B4B4B;
	margin: 0 0 32px 0;
}

.banner-descubriste.second-state .btn.btn-custom {
	background-color: #FF4E00 !important;
	border: none !important;
	color: #FFFFFF !important;
	padding: 16px 32px !important;
	border-radius: 100px !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) !important;
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease;
	margin-top: 0 !important;
}

.banner-descubriste.second-state .btn.btn-custom:hover {
	background-color: #c94f18 !important;
	color: #FFFFFF !important;
}

/* Responsive para tabla de vacunas alternativas */
@media (max-width: 768px) {
	.babies-alternative-vaccines {
		margin-top: 32px;
		padding: 0 16px;
	}

	.vacunas-alternativas-container {
		margin: 16px 0;
		gap: 10px;
	}

	.vacunas-alt-header {
		padding: 8px 12px;
		min-height: 36px;
	}

	.vacunas-alt-header p {
		font-size: 14px;
		line-height: 1.4;
	}

	.vacunas-alt-body {
		gap: 10px;
	}

	.vacunas-alt-row {
		flex-direction: column;
		gap: 10px;
	}

	.vacunas-alt-cell {
		padding: 8px 12px;
		min-height: 36px;
		width: 100%;
	}

	.vacunas-alt-cell p {
		font-size: 14px;
		line-height: 1.4;
	}
	
	.banner-descubriste.second-state {
		flex-direction: column;
		align-items: center;
		padding: 24px 20px;
		gap: 32px;
		margin-top: 0;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion.second-state .content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		padding: 0;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion__copy {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion.second-state .custom-heading {
		font-family: 'Inter', sans-serif;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
		color: #151515;
		margin: 0;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion__copy p {
		font-family: 'Inter', sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.5;
		color: #4B4B4B;
		margin: 0;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion.second-state .btn.btn-custom {
		height: 50px;
		min-height: 50px;
		padding: 16px 32px !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
	}

	body.backgroundvacunas .vacunas-punto-vacunacion__image {
		width: 227px;
		max-width: 100%;
		height: auto;
		flex: none;
		margin: 0 auto;
	}
}

/* Estilos para thumb-disease h2 en 1024px */
@media screen and (max-width: 1024px) and (min-width: 769px) {
	/* Cards de categorías para 1024px */
	.thumb-categorys-white {
		background-color: #fff;
		text-align: center;
		color: var(--text-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-decoration: none;
		border: 1px solid #C6C5C5;
		border-radius: 24px;
		width: 141px;
		padding: 7px;
		gap: 12px;
		height: auto;
	}
	
	/* Imágenes de todas las cards de categorías para 1024px */
	.thumb-categorys-white[data-category="bebes"]>.wrap-img,
	.thumb-categorys-white[data-category="Ninos"]>.wrap-img,
	.thumb-categorys-white[data-category="Adolescentes"]>.wrap-img,
	.thumb-categorys-white[data-category="Mujeres-embarazadas"]>.wrap-img,
	.thumb-categorys-white[data-category="Gestantes"]>.wrap-img,
	.thumb-categorys-white[data-category="Adultos"]>.wrap-img,
	.thumb-categorys-white[data-category="Adultos-mayores"]>.wrap-img {
		width: 127px;
	}
	
	/* Texto de las cards de categorías para 1024px */
	.thumb-categorys-white strong {
		font-family: 'Inter', sans-serif;
		font-weight: 700;
		font-size: 13px;
		line-height: 1.5;
		color: #4B4B4B;
		text-align: center;
		width: 100%;
		display: block;
		white-space: pre-wrap;
	}
	
	.thumb-disease h2 {
		font-size: 17px;
		text-align: center;
		padding: 22px 0;
	}
	
	.thumb-disease1 h2 {
		font-size: 16px !important;
	}
	
	/* Ajustar tamaño de cards en slider de enfermedades */
	#slider-enfermedades-vacunas .swiper-slide {
		width: auto !important;
		flex-shrink: 0;
	}
	
	.thumb-disease1 {
		width: 100%;
		max-width: 220px;
		margin: 0 auto;
	}
	
	/* Asegurar que el contenedor del slider tenga espacio */
	#slider-enfermedades-vacunas {
		overflow: visible;
	}
	
	#slider-enfermedades-vacunas .swiper-wrapper {
		display: flex;
		align-items: stretch;
	}
	
	/* Anular padding Bootstrap px-lg-5 en 1024px */
	.px-lg-5 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	body.backgroundvacunas .wrap-flex-thumb-categorys {
		flex-wrap: nowrap;
		gap: clamp(10px, 1.2vw, 20px);
	}

	body.backgroundvacunas .wrap-flex-thumb-categorys .thumb-categorys-white {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 170px;
		margin-top: 0;
	}
}

/* Estilos para pantallas desde 1440px */
@media screen and (min-width: 1440px) and (max-width: 1999px) {
	.wrap-flex-thumb-categorys {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 20px;
	}
	
	.thumb-categorys-white {
		background-color: #fff;
		text-align: center;
		color: var(--text-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		text-decoration: none;
		border: 1px solid #C6C5C5;
		border-radius: 24px;
		width: 170px;
		height: 142px;
		padding: 16px;
		gap: 12px;
		flex-shrink: 0;
	}
}

/* Estilos para pantallas desde 2000px en adelante */
@media screen and (min-width: 2000px) {
	.wrap-flex-thumb-categorys {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 40px;
	}
}

/* Estilos para pantallas mayores a 2560px */
@media screen and (min-width: 2561px) {
	.wrap-flex-thumb-categorys {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 33px;
	}
}

/* Cards siempre en una sola fila — vacunas recomendadas (desktop) */
@media screen and (min-width: 769px) {
	body.backgroundvacunas .wrap-flex-thumb-categorys {
		flex-wrap: nowrap;
		justify-content: center;
		gap: clamp(10px, 1.2vw, 20px);
	}

	body.backgroundvacunas .wrap-flex-thumb-categorys .thumb-categorys-white {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		max-width: 170px;
		margin-top: 0;
	}

	body.backgroundvacunas .thumb-categorys-white .wrap-img {
		width: 100%;
		max-width: 138px;
	}
}

@media screen and (max-width: 768px) {
	/* Atrás: solo visible al seleccionar una categoría */
	body.backgroundvacunas:not([data-vacunas-group]) .mobile-back-container {
		display: none !important;
	}

	body.backgroundvacunas[data-vacunas-group] .mobile-back-container {
		display: flex;
	}

	/* Espacio bajo header fijo — listado inicial sin botón Atrás */
	body.backgroundvacunas:not([data-vacunas-group]) .vacunas-recomendadas-intro {
		padding-top: 82px;
		margin-top: 0;
		gap: 35px;
	}

	body.backgroundvacunas:not([data-vacunas-group]) .main-vaccine-title {
		font-family: 'Inter', sans-serif;
		font-size: 24px;
		font-weight: 900;
		line-height: 1.2;
		color: #151515;
		text-align: center;
		width: 100%;
		margin: 0;
	}

	body.backgroundvacunas:not([data-vacunas-group]) .main-vaccine-subtitle {
		font-family: 'Inter', sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 1.5;
		color: #4B4B4B;
		text-align: center;
		margin: 0;
		width: 100%;
	}

	/* Mobile — Figma 11423:81571 (grid 2×3) */
	body.backgroundvacunas .vacunas-recomendadas-intro__cards {
		width: 100%;
		overflow: visible;
	}

	body.backgroundvacunas .wrap-flex-thumb-categorys {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		align-items: stretch;
		gap: 20px;
		width: 100%;
		overflow: visible;
	}

	body.backgroundvacunas .wrap-flex-thumb-categorys .thumb-categorys-white {
		flex: none;
		width: 100%;
		max-width: none;
		min-width: 0;
		height: auto;
		min-height: 132px;
		max-height: none;
		margin-top: 0;
		padding: 16px;
		gap: 12px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		overflow: visible;
	}

	body.backgroundvacunas .thumb-categorys-white .wrap-img {
		width: 100%;
		max-width: 138px;
		height: 64px;
		min-height: 64px;
		flex-shrink: 0;
		margin-left: auto;
		margin-right: auto;
	}

	body.backgroundvacunas .thumb-categorys-white strong {
		font-family: 'Inter', sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 1.5;
		color: #4B4B4B;
		word-break: break-word;
		white-space: normal;
		width: 100%;
		min-height: 0;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* Bebés mobile — Figma 11384:53153 */
	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-category-content {
		background: linear-gradient(180deg, rgba(240, 239, 237, 0.5) 0%, rgba(240, 239, 237, 0) 100%);
		padding: 24px 20px 32px;
		display: flex;
		flex-direction: column;
		gap: 35px;
		max-width: 100%;
		box-sizing: border-box;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-top {
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-note {
		display: block;
		font-family: 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		color: #4B4B4B;
		margin: 0;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-divider {
		display: block;
		width: 100%;
		height: 1px;
		border: none;
		margin: 0;
		background-color: #959595;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .dynamic-image-container {
		display: flex;
		flex-direction: column;
		gap: 35px;
		margin-bottom: 0 !important;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .action-bar-title {
		padding-top: 0 !important;
		margin: 0 !important;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .calendar-reference-container {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 24px;
		margin-bottom: 0;
		padding: 0;
		text-align: left;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .scp-logo-container .scp-logo-image {
		width: 64px;
		height: 51px;
		max-width: 64px;
		margin: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .calendar-title-section {
		flex: 1;
		min-width: 0;
		text-align: left;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .calendar-main-title {
		font-family: 'Inter', sans-serif;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.2;
		color: #315791;
		text-align: left;
		margin: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .calendar-main-title br {
		display: none;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-recomendadas-intro__category-heading {
		display: flex !important;
		margin-bottom: 0;
		padding: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-category-title {
		font-size: 18px;
		font-weight: 700;
		line-height: 1.5;
		color: #151515;
		text-align: center;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-category-title__ref {
		font-size: 11.61px;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-alternativas-container,
	body.backgroundvacunas[data-vacunas-group="bebes"] .dynamic-image,
	body.backgroundvacunas[data-vacunas-group="bebes"] .enfermedades-slider-section {
		display: none !important;
	}

	/* Mobile — Figma 11384:53282 (Aclaración + Referencias, todos los grupos) */
	body.backgroundvacunas[data-vacunas-group] section.disclaimer {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 25px;
		margin: 0;
		box-sizing: border-box;
	}

	body.backgroundvacunas[data-vacunas-group] section.disclaimer .texto-adicional-test {
		display: none !important;
	}

	body.backgroundvacunas[data-vacunas-group] section.disclaimer .alerta-aviso-naranja,
	body.backgroundvacunas[data-vacunas-group] section.disclaimer .alerta-aviso-naranja.container {
		background: transparent !important;
		border: none !important;
		padding: 16px 23px !important;
		margin: 0 !important;
		border-radius: 30px 30px 0 0 !important;
		text-align: center !important;
		justify-content: center !important;
		align-items: center !important;
	}

	body.backgroundvacunas[data-vacunas-group] section.disclaimer .alerta-aviso-naranja strong,
	body.backgroundvacunas[data-vacunas-group] section.disclaimer .alerta-aviso-naranja.container strong {
		font-size: 12px !important;
		line-height: 1.5 !important;
		text-align: center !important;
		color: #FF4E00 !important;
		word-break: break-word;
	}

	body.backgroundvacunas[data-vacunas-group] section.disclaimer::after {
		content: "";
		display: block;
		width: 100%;
		height: 1px;
		background-color: #959595;
		margin-top: 16px;
	}

	body.backgroundvacunas[data-vacunas-group] section.references {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		max-width: 100%;
		padding: 16px 20px 32px;
		margin: 0;
		box-sizing: border-box;
	}

	body.backgroundvacunas[data-vacunas-group] section.references.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	body.backgroundvacunas[data-vacunas-group] section.references strong {
		font-family: 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.2;
		color: #4B4B4B;
		text-align: left;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group] section.references .text-container {
		gap: 0;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group] section.references p {
		font-family: 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.2;
		color: #4B4B4B;
		word-break: break-word;
		margin: 0 0 0.5em;
	}

	body.backgroundvacunas[data-vacunas-group] section.references p:last-child {
		margin-bottom: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .action-bar-container {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .actionBar .button-container {
		flex-direction: column;
		gap: 0;
		margin-top: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .actionBarBtn.download {
		width: 100%;
		min-height: 56px;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] #contenido-vacunas {
		width: 100%;
		padding: 0;
		margin: 0;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-category-content > .row {
		margin: 0;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-disclaimer {
		display: flex;
		flex-direction: column;
		gap: 16px;
		align-items: flex-start;
		background-color: #F0EFED;
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-disclaimer p {
		font-family: 'Inter', sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		color: #4B4B4B;
		margin: 0;
		text-align: left;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-disclaimer__logo {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}

	body.backgroundvacunas[data-vacunas-group="bebes"] .vacunas-bebes-mobile-disclaimer__logo .scp-logo-image {
		width: 90px;
		height: 72px;
		max-width: 90px;
		object-fit: contain;
	}
}

.vacunas-bebes-mobile-top,
.vacunas-bebes-mobile-note,
.vacunas-bebes-mobile-divider {
	display: none;
}