.konekta-container {
	max-width: var(--kmc-content-width);
	margin-inline: auto;
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.konekta-section {
	padding-block: var(--kmc-space-section);
}

/* Header */
/* En producción la cabecera va fija arriba (79px, fondo #FAFBFB, z-index 99)
   y acompaña al scroll, en escritorio y en móvil. Aquí se usa `sticky`: mismo
   efecto sin tener que compensar el hueco con relleno en el body. */
.konekta-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.75rem;
	background: #FAFBFB;
	position: sticky;
	top: 0;
	z-index: 99;
}

.konekta-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1.5rem;
}

.konekta-header__logo,
.konekta-header .custom-logo-link {
	flex: 0 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
}

.konekta-header .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-height: 52px;
}

.konekta-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: nowrap;
}

.konekta-nav__list {
	display: flex;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
}

.konekta-nav__list a {
	color: var(--kmc-color-ink);
	transition: color var(--kmc-transition);
	white-space: nowrap;
}

/* Los separadores son de la barra horizontal de cabecera. El pie reutiliza la
   misma clase y allí sobran: descolocaban el último enlace de redes.

   Van como BORDE y no como un "|" escrito. El glifo era contenido en línea y
   podía saltar de renglón por su cuenta: "Servicios" se quedaba con su
   separador debajo y el elemento medía el doble de alto que los demás. Un
   borde no se parte nunca. */
.konekta-nav .konekta-nav__list > li {
	/* Sin esto los elementos se encogen y el texto se parte. */
	flex: 0 0 auto;
	white-space: nowrap;
}

.konekta-nav .konekta-nav__list > li:not(:last-child) {
	padding-inline-end: 20px;
	border-inline-end: 1px solid rgba(37, 52, 78, 0.25);
}

/* Submenú de "Servicios". En producción es un desplegable real con los 19
   servicios; el tema solo tenía la flecha dibujada. Se abre con el ratón y
   también al tabular dentro (`:focus-within`), sin JavaScript. */
.konekta-nav__list li {
	position: relative;
}

.konekta-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}

@media (min-width: 1150px) {
	.konekta-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		/* 19 servicios en una sola columna se salen de la pantalla: en
		   producción el panel es ancho, así que va a dos columnas. */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.5rem;
		min-width: 34rem;
		padding: 0.75rem 0.5rem;
		background: var(--kmc-color-white);
		border-radius: var(--kmc-radius-card);
		box-shadow: 0 12px 32px rgba(37, 52, 78, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--kmc-transition), transform var(--kmc-transition), visibility var(--kmc-transition);
	}

	.konekta-nav__list li:hover > .sub-menu,
	.konekta-nav__list li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.konekta-nav__list .sub-menu a {
		display: block;
		padding: 0.5rem 0.9rem;
		border-radius: 8px;
		white-space: normal;
	}

	.konekta-nav__list .sub-menu a:hover,
	.konekta-nav__list .sub-menu a:focus-visible {
		background: rgba(232, 165, 195, 0.14);
	}
}

.konekta-nav__list a:hover,
.konekta-nav__list a:focus-visible,
.konekta-nav__list .current-menu-item > a,
.konekta-nav__list .current_page_item > a {
	color: var(--kmc-color-pink);
}

/* Círculo rosa con tres barras blancas, como el de producción (48x48). */
.konekta-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	border: 0;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	cursor: pointer;
	flex: 0 0 auto;
}

@media (max-width: 1149px) {
	/* Todo lo de aquí va acotado a la navegación de CABECERA (.konekta-nav).
	   El pie reutiliza la clase .konekta-nav__list para sus enlaces y sus
	   redes: sin acotar, la regla de ocultar los hacía desaparecer enteros
	   por debajo de ese ancho. */
	.konekta-nav .konekta-nav__list {
		display: none;
	}

	.konekta-nav .konekta-nav__list > li:not(:last-child)::after {
		content: none;
	}

	/* En móvil el submenú se pliega: sin esto, los 19 servicios quedaban
	   siempre desplegados y el menú se hacía interminable. Lo abre el botón
	   que añade main.js. */
	.konekta-nav .konekta-nav__list .sub-menu {
		display: none;
		padding: 0.25rem 0 0.5rem 1rem;
		border-left: 2px solid rgba(232, 165, 195, 0.5);
		margin-top: 0.5rem;
	}

	.konekta-nav .konekta-nav__list .is-open > .sub-menu {
		display: block;
	}

	/* El padre y su botón, en la misma línea. */
	.konekta-nav .konekta-nav__list .menu-item-has-children {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		width: 100%;
	}

	.konekta-nav .konekta-nav__list .menu-item-has-children > .sub-menu {
		grid-column: 1 / -1;
	}

	.konekta-nav__expand {
		width: 40px;
		height: 40px;
		border: 0;
		background: none;
		color: var(--kmc-color-navy);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: transform var(--kmc-transition);
	}

	.konekta-nav .konekta-nav__list .is-open > .konekta-nav__expand {
		transform: rotate(180deg);
	}

	.konekta-nav .konekta-nav__list .sub-menu li {
		margin-bottom: 0.5rem;
	}

	.konekta-nav .konekta-nav__list .sub-menu a {
		font-size: 0.95rem;
	}

	/* Producción no muestra el botón de cita en la barra móvil: solo el logo
	   y el botón de menú. La reserva sigue accesible desde el propio menú y
	   desde las llamadas a la acción de la página. */
	.konekta-header__actions .konekta-btn {
		display: none;
	}

	.konekta-header__inner {
		gap: 0.75rem;
	}

	.konekta-header .custom-logo {
		max-height: 48px;
		max-width: 210px;
	}

	.konekta-nav .konekta-nav__list.is-open {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--kmc-color-white);
		padding: 1rem clamp(1rem, 0.5rem + 2vw, 2.5rem) 1.5rem;
		box-shadow: 0 8px 16px rgba(37, 52, 78, 0.08);
	}

	.konekta-header__toggle {
		display: inline-flex;
	}
}

/* Hero */
.konekta-hero {
	background: var(--kmc-gradient-hero);
	color: var(--kmc-color-white);
	border-radius: var(--kmc-radius-card);
	padding: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.konekta-hero h1 {
	color: var(--kmc-color-white);
}

.konekta-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
}

/* Home hero (front page only) */
.konekta-home-hero {
	padding-bottom: 0;
	overflow: visible;
	position: relative;
}

.konekta-home-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 2rem;
	align-items: center;
}

@media (max-width: 900px) {
	.konekta-home-hero__grid {
		grid-template-columns: 1fr;
	}
}

.konekta-home-hero__accent {
	display: block;
	color: var(--kmc-color-pink);
}

.konekta-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.konekta-btn--white {
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
}

.konekta-btn__icon--whatsapp {
	background: #25d366;
	color: var(--kmc-color-white);
}

.konekta-home-hero__media {
	position: relative;
}

.konekta-home-hero__media img {
	border-radius: var(--kmc-radius-card);
}

.konekta-home-hero__badge {
	position: absolute;
	bottom: -1.5rem;
	right: 0;
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
	border-radius: var(--kmc-radius-card);
	padding: 1rem 1.5rem;
	text-align: center;
	box-shadow: 0 12px 24px rgba(37, 52, 78, 0.25);
}

.konekta-home-hero__badge strong {
	display: block;
	font-family: var(--kmc-font-heading);
	font-size: 1.75rem;
	color: var(--kmc-color-pink);
}

.konekta-home-hero__stars {
	display: block;
	color: #fcb900;
	letter-spacing: 0.1em;
	margin-top: 0.25rem;
}

.konekta-home-hero__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	transform: translateY(3rem);
	margin-bottom: 3rem;
}

.konekta-card.konekta-home-hero__card--photo {
	background-color: var(--kmc-color-navy);
	background-size: cover;
	background-position: center;
	color: var(--kmc-color-white);
}

.konekta-card.konekta-home-hero__card--dark {
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
}

.konekta-home-hero__card--photo h3,
.konekta-home-hero__card--dark h3 {
	color: var(--kmc-color-white);
}

.konekta-home-hero__progress-label {
	font-size: 0.875rem;
	opacity: 0.85;
	margin-bottom: 0.35rem;
}

.konekta-home-hero__progress {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
	margin-bottom: 1rem;
}

.konekta-home-hero__progress span {
	display: block;
	height: 100%;
	background: var(--kmc-color-pink);
	border-radius: 999px;
}

/* "Sigue para consejos diarios": en producción es una píldora blanca de radio
   50px con 20px de aire. Antes era texto navy suelto sobre el degradado
   oscuro del hero, así que no se leía. Los círculos van con el color real de
   cada red, como allí. */
.konekta-home-hero__social {
	display: inline-flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--kmc-color-white);
	border-radius: 50px;
	padding: 20px;
	margin-block: 1.5rem 2rem;
	max-width: 100%;
	flex-wrap: wrap;
}

.konekta-home-hero__social-mark {
	color: var(--kmc-color-navy);
	display: inline-flex;
	flex: 0 0 auto;
}

.konekta-home-hero__social-title {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-size: var(--kmc-h3-size);
	font-weight: 600;
	line-height: 1.25;
	color: var(--kmc-color-navy);
}

.konekta-home-hero__social-sep {
	width: 1px;
	align-self: stretch;
	background: var(--kmc-color-blue-heading);
	flex: 0 0 auto;
}

.konekta-home-hero__social-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.konekta-home-hero__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	color: var(--kmc-color-white);
}

.konekta-home-hero__social-icon--fb { background: #3B5998; }
.konekta-home-hero__social-icon--ig { background: #262626; }
.konekta-home-hero__social-icon--yt { background: #CD201F; }

/* Info strip (front page: location / booking / hours) */
.konekta-info-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
	position: relative;
	z-index: 5;
}

.konekta-info-strip__item h3 {
	margin: 0;
}

.konekta-info-strip__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--kmc-color-pink);
}

.konekta-info-strip__divider {
	border: none;
	border-top: 1px solid rgba(232, 165, 195, 0.4);
	margin: 1rem 0;
}

.konekta-info-strip__icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: rgba(232, 165, 195, 0.15);
	color: var(--kmc-color-pink);
	margin-bottom: 1rem;
}

.konekta-info-strip__hours {
	color: var(--kmc-color-navy);
}

.konekta-info-strip__hours span {
	color: var(--kmc-color-pink);
}

.konekta-info-strip__cta {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.konekta-card.konekta-info-strip__item--accent {
	background-color: var(--kmc-color-navy);
	background-size: cover;
	background-position: center;
	color: var(--kmc-color-white);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 260px;
}

.konekta-info-strip__item--accent h3,
.konekta-info-strip__item--accent a {
	color: var(--kmc-color-white);
}

.konekta-info-strip__mini-card {
	background: var(--kmc-color-white);
	color: var(--kmc-color-ink);
	border-radius: var(--kmc-radius-card);
	padding: 1.25rem;
	margin-top: 1rem;
}

.konekta-info-strip__mini-card a {
	color: var(--kmc-color-navy);
	font-weight: 500;
}

/* Doctor bio (front page) */
.konekta-doctor-bio {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 3rem;
	align-items: center;
}

@media (max-width: 900px) {
	.konekta-doctor-bio {
		grid-template-columns: 1fr;
	}
}

.konekta-doctor-bio__media {
	position: relative;
}

.konekta-doctor-bio__media img {
	border-radius: var(--kmc-radius-card);
}

.konekta-doctor-bio__badge {
	position: absolute;
	top: 1.5rem;
	right: -1.5rem;
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
	border-radius: var(--kmc-radius-card);
	padding: 1rem 1.5rem;
	text-align: center;
	box-shadow: 0 12px 24px rgba(37, 52, 78, 0.25);
}

.konekta-doctor-bio__badge strong {
	display: block;
	font-family: var(--kmc-font-heading);
	font-size: 1.75rem;
	color: var(--kmc-color-pink);
}

.konekta-doctor-bio__author {
	display: flex;
	flex-direction: column;
	margin-block: 1rem;
}

.konekta-doctor-bio__author strong {
	color: var(--kmc-color-navy);
}

.konekta-doctor-bio__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
	margin-block: 1.5rem;
}



@media (max-width: 900px) {
	.konekta-trust__layout {
		grid-template-columns: 1fr;
	}
}











/* How it works (3-step, front page)
   Reproduce producción: cabecera centrada, foto circular con aro rosa a la
   izquierda y tres tarjetas-píldora apiladas a la derecha. En producción la
   tarjeta se distingue solo por su sombra: el relleno es el mismo gris de la
   sección, no blanco. */
.konekta-steps-section__head {
	text-align: center;
	max-width: 52rem;
	margin-inline: auto;
}

.konekta-steps-section__head .konekta-hero__eyebrow {
	justify-content: center;
}

.konekta-steps-section__title {
	margin-bottom: 0.75rem;
}

.konekta-steps-section__title-accent {
	color: var(--kmc-color-blue-heading);
}

.konekta-steps-section__lead {
	color: var(--kmc-color-ink);
	margin: 0;
	max-width: 44rem;
	margin-inline: auto;
}

.konekta-steps-layout {
	display: grid;
	grid-template-columns: minmax(0, 35%) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: center;
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.konekta-steps-photo {
	position: relative;
	aspect-ratio: 1;
	width: 100%;
}

.konekta-steps-photo__img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* Aro rosa desplazado a la derecha. Va DETRÁS de la foto: en producción solo
   se ve el arco que asoma por la derecha, no el trazo sobre la cara. */
.konekta-steps-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 50%;
	border: 2px solid var(--kmc-color-pink);
	transform: translateX(1.25rem) scale(1.035);
	pointer-events: none;
}

.konekta-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.konekta-steps__item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	background: var(--kmc-color-surface);
	border-radius: var(--kmc-radius-pill);
	padding: 1.25rem 1.75rem;
	box-shadow: 0 10px 30px rgba(37, 52, 78, 0.10);
}

/* La tarjeta central va desplazada a la derecha en producción. */
@media (min-width: 900px) {
	.konekta-steps__item:nth-child(2) {
		margin-left: clamp(1rem, 3vw, 3rem);
	}
}

.konekta-steps__icon {
	flex: 0 0 auto;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: rgba(232, 165, 195, 0.22);
	color: var(--kmc-color-pink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.konekta-steps__body {
	flex: 1 1 auto;
	min-width: 0;
}

.konekta-steps__title {
	margin: 0 0 0.25rem;
	color: var(--kmc-color-navy);
}

.konekta-steps__text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--kmc-color-ink);
}

.konekta-steps__number {
	flex: 0 0 auto;
	font-family: var(--kmc-font-heading);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	color: var(--kmc-color-pink);
}

@media (max-width: 899px) {
	.konekta-steps-layout {
		grid-template-columns: 1fr;
	}

	.konekta-steps__item {
		border-radius: var(--kmc-radius-card);
		padding: 1.25rem;
		gap: 1rem;
	}
}

@media (max-width: 520px) {
	.konekta-steps__item {
		flex-wrap: wrap;
	}

	.konekta-steps__number {
		margin-left: auto;
	}
}

/* Orientation CTA band (front page) */
.konekta-orientation-cta {
	background-size: cover;
	background-position: center;
	border-radius: var(--kmc-radius-card);
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 320px;
}

.konekta-orientation-cta__panel {
	background: rgba(37, 52, 78, 0.72);
	color: var(--kmc-color-white);
	padding: clamp(2rem, 1.5rem + 2vw, 3rem);
	max-width: 640px;
	text-align: center;
	margin-inline: auto;
	border-radius: var(--kmc-radius-card);
}

.konekta-orientation-cta__panel h2,
.konekta-orientation-cta__panel p {
	color: var(--kmc-color-white);
}

.konekta-orientation-cta__panel h2 {
	font-size: 2.25rem;
}

/* Final CTA band ("no esperes más", front page) */
.konekta-final-cta {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 2rem;
	align-items: center;
	background: var(--kmc-gradient-hero);
	color: var(--kmc-color-white);
	border-radius: var(--kmc-radius-card);
	padding: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 900px) {
	.konekta-final-cta {
		grid-template-columns: 1fr;
	}
}

.konekta-final-cta h2,
.konekta-final-cta p {
	color: var(--kmc-color-white);
}

.konekta-final-cta__media img {
	border-radius: var(--kmc-radius-card);
}

/* Footer */



/* ---------------------------------------------------------------------------
   "Nuestros servicios" (portada).
   Medidas tomadas de producción con scripts/extract-design.mjs: panel
   #E7F1F3 con radio 20px, contenido a 1280px con 100px de aire arriba y
   abajo, cabecera a dos columnas, píldoras blancas de radio 15px con círculo
   rosa de 42px, y tarjeta de consulta con borde en degradado navy→rosa
   dibujado en un pseudoelemento, igual que allí.
   --------------------------------------------------------------------------- */
.konekta-services-band {
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.konekta-services-band__panel {
	background: var(--kmc-color-alt-bg);
	border-radius: 20px;
}

.konekta-services-band__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6.25rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.konekta-services-band__head {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: end;
}

.konekta-services-band__head h2 {
	margin-bottom: 0;
}

.konekta-services-band__lead {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-heading-accent {
	color: var(--kmc-color-blue-heading);
	/* En línea, no en bloque. Con `display:block` el tramo resaltado caía
	   SIEMPRE a su propia línea: "Transparencia / total", "¿Cuándo es el mejor /
	   momento / ?". En producción es un <span> normal y solo parte cuando no
	   cabe. */
	display: inline;
}

.konekta-eyebrow-icon {
	color: var(--kmc-color-pink);
	display: inline-flex;
}

.konekta-services-band__body {
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 2.5rem;
	align-items: stretch;
}

/* Píldoras de categoría */
.konekta-service-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	align-content: space-between;
}

.konekta-service-pill {
	display: flex;
	align-items: center;
	gap: 0.9375rem;
	background: var(--kmc-color-white);
	border-radius: 15px;
	padding: 1.0625rem 0.9375rem;
	color: var(--kmc-color-navy);
	transition: box-shadow var(--kmc-transition), transform var(--kmc-transition);
}

.konekta-service-pill:hover,
.konekta-service-pill:focus-visible {
	box-shadow: 0 10px 24px rgba(37, 52, 78, 0.10);
	transform: translateX(3px);
}

.konekta-service-pill__icon {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.konekta-service-pill__title {
	font-family: var(--kmc-font-heading);
	font-size: var(--kmc-h3-size);
	font-weight: 600;
	line-height: 1.15;
}

/* Tarjeta de consulta en línea */
/* El degradado va directamente en la tarjeta. Producción lo pinta en un
   pseudoelemento con z-index -1, pero esa combinación cuelga el renderizador
   al capturar la página entera, y el resultado visible es idéntico porque
   todos los hijos llevan su propio fondo. */
.konekta-online-card {
	display: grid;
	grid-template-columns: 40fr 60fr;
	gap: 1.25rem;
	padding: 25px;
	border-radius: 20px;
	background: linear-gradient(90deg, #1F3C5B 50%, #E8A5C3 100%);
}

.konekta-online-card__photo {
	border-radius: 15px;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 15rem;
}

.konekta-online-card__panel {
	background: var(--kmc-color-white);
	border-radius: 15px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.konekta-online-card__head {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.9375rem;
	border-bottom: 1px solid rgba(37, 52, 78, 0.12);
	padding-bottom: 1rem;
}

.konekta-online-card__head h3 {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
	line-height: 1.15;
}

.konekta-online-card__icon {
	color: var(--kmc-color-pink);
	flex: 0 0 auto;
}

.konekta-online-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.3125rem;
}

.konekta-online-card__list li {
	display: flex;
	gap: 0.3125rem;
	color: var(--kmc-color-navy);
	font-weight: 500;
}

.konekta-online-card__list li > span:first-child {
	color: var(--kmc-color-pink);
}

.konekta-online-card .konekta-btn {
	align-self: stretch;
	justify-content: space-between;
	margin-top: auto;
}

@media (max-width: 899px) {
	.konekta-services-band__head,
	.konekta-services-band__body,
	.konekta-online-card {
		grid-template-columns: 1fr;
	}

	.konekta-online-card__head {
		flex-direction: row;
	}
}

@media (prefers-reduced-motion: reduce) {
	.konekta-service-pill:hover,
	.konekta-service-pill:focus-visible {
		transform: none;
	}
}


/* ---------------------------------------------------------------------------
   Pie de página. Medidas de producción (scripts/extract-design.mjs): fondo
   claro heredado de la página —no navy, como estaba antes—, cuatro columnas
   de 290px con 40px de separación, titulares de 24px en navy, círculos
   sociales rosas de 36px y barra inferior #E7F1F3 de radio 20px.
   --------------------------------------------------------------------------- */
.konekta-footer {
	padding-inline: 20px;
	color: var(--kmc-color-ink);
}

.konekta-footer__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: 40px 0 20px;
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 1rem + 4vw, 5rem);
}

.konekta-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.konekta-footer__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.konekta-footer__col h2 {
	margin: 0;
	font-size: var(--kmc-h3-size);
	color: var(--kmc-color-navy);
}

.konekta-footer__col p {
	margin: 0;
}

.konekta-footer__logo img {
	max-width: 250px;
	height: auto;
	display: block;
}

.konekta-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.75rem;
}

.konekta-footer__social a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.konekta-footer__links,
.konekta-footer__contact,
.konekta-footer__posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.konekta-footer__links a,
.konekta-footer__contact a {
	color: var(--kmc-color-ink);
}

.konekta-footer__links a:hover,
.konekta-footer__links a:focus-visible,
.konekta-footer__contact a:hover,
.konekta-footer__contact a:focus-visible,
.konekta-footer__posts a:hover span,
.konekta-footer__posts a:focus-visible span {
	color: var(--kmc-color-pink);
}

.konekta-footer__contact li {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 0.5rem;
	align-items: center;
}

.konekta-footer__contact-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(232, 165, 195, 0.22);
	color: var(--kmc-color-pink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.konekta-footer__posts {
	gap: 1rem;
}

.konekta-footer__posts a {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 0.75rem;
	align-items: center;
	color: var(--kmc-color-navy);
	font-size: 0.9rem;
	line-height: 1.35;
}

.konekta-footer__posts img {
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: 8px;
}

.konekta-footer__bar {
	background: var(--kmc-color-alt-bg);
	border-radius: 20px;
	padding: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 1.25rem;
	text-align: center;
}

.konekta-footer__bar p {
	margin: 0;
}

/* Crédito de desarrollo: discreto, en la misma línea que el copyright, como
   pide docs/BACKLINKS-CREDITO-CLIENTES.md. */
.konekta-footer__credit {
	font-size: 0.8rem;
	color: var(--kmc-color-ink-soft);
}

.konekta-footer__credit a {
	color: var(--kmc-color-ink);
	font-weight: 500;
}

@media (max-width: 899px) {
	.konekta-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

@media (max-width: 560px) {
	.konekta-footer__cols {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   "Sobre nosotros — Tu socio de confianza" (portada).
   Medidas de producción: dos columnas 806/434 con 40px de separación y 100px
   de aire arriba y abajo; foto vertical de 230px, tarjetas de 15px de radio
   con sombra suave, y el marcador navy de años encajado entre las dos fotos
   de la derecha.
   --------------------------------------------------------------------------- */
.konekta-about {
	display: grid;
	grid-template-columns: 806fr 434fr;
	gap: 40px;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 6.25rem);
	align-items: start;
}

.konekta-about__main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}

.konekta-about__head h2 {
	margin-bottom: 0;
}

.konekta-about__body {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 40px;
}

.konekta-about__portrait {
	border-radius: 15px;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 25rem;
}

.konekta-about__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
}

.konekta-about__text > p {
	margin: 0;
}

.konekta-about__byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.konekta-about__byline img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	object-fit: cover;
}

.konekta-about__byline h3 {
	margin: 0;
	font-size: var(--kmc-h4-size);
}

.konekta-about__byline p {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-about__values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

.konekta-about__values li {
	background: var(--kmc-color-white);
	border-radius: 15px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
	padding: 1.25rem;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
}

.konekta-about__values h3 {
	margin: 0;
	font-size: var(--kmc-h3-size);
}

.konekta-about__values p {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-about__value-icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--kmc-color-white);
}

.konekta-about__value-icon--navy { background: var(--kmc-color-navy); }
.konekta-about__value-icon--rosa { background: var(--kmc-color-pink); }

/* Columna derecha: dos fotos con el marcador encajado en medio. */
.konekta-about__side {
	display: grid;
	gap: 20px;
	position: relative;
}

.konekta-about__side-photo {
	border-radius: 15px;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 16rem;
}

.konekta-about__badge {
	background: var(--kmc-color-navy);
	border-radius: 15px;
	padding: 1.25rem;
	text-align: center;
	display: grid;
	gap: 0.25rem;
	justify-self: start;
	min-width: 13.75rem;
	margin-block: -3.5rem;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 10px var(--kmc-color-surface);
}

.konekta-about__badge-number {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--kmc-color-pink);
}

.konekta-about__badge-label {
	margin: 0;
	color: var(--kmc-color-white);
	font-weight: 500;
}

@media (max-width: 1099px) {
	.konekta-about {
		grid-template-columns: 1fr;
	}

	.konekta-about__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.konekta-about__badge {
		margin-block: 0;
		grid-column: 1 / -1;
		justify-self: center;
	}
}

@media (max-width: 720px) {
	.konekta-about__body,
	.konekta-about__values,
	.konekta-about__side {
		grid-template-columns: 1fr;
	}

	.konekta-about__portrait {
		min-height: 18rem;
	}
}


/* ---------------------------------------------------------------------------
   "Lo que dicen nuestros pacientes" (portada).
   Medidas de producción: panel #E7F1F3 radio 20px, contenido a 1280px con
   100px de aire, tarjeta de puntuación de 435px y reseñas de 805px, ambas
   blancas con radio 20px, y debajo foto ancha + marcador navy de 435x300.
   --------------------------------------------------------------------------- */
.konekta-reviews {
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.konekta-reviews__panel {
	background: var(--kmc-color-alt-bg);
	border-radius: 20px;
}

.konekta-reviews__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6.25rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.konekta-reviews__head {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.konekta-reviews__head .konekta-hero__eyebrow {
	justify-content: center;
}

.konekta-reviews__head h2 {
	margin-bottom: 0.75rem;
}

.konekta-reviews__lead {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-reviews__top {
	display: grid;
	grid-template-columns: 435fr 805fr;
	gap: 40px;
	align-items: start;
}

/* Tarjeta de puntuación */
.konekta-reviews__score {
	background: var(--kmc-color-white);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.konekta-reviews__score-photo {
	border-radius: 15px;
	background-size: cover;
	background-position: 50% 30%;
	min-height: 10rem;
}

.konekta-reviews__score-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-items: center;
}

.konekta-reviews__score-label {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--kmc-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--kmc-color-navy);
	line-height: 1.2;
}

.konekta-reviews__google {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	flex: 0 0 auto;
}

.konekta-reviews__score-value {
	margin: 0.25rem 0 0;
	color: var(--kmc-color-navy);
	font-weight: 500;
}

.konekta-stars {
	display: inline-flex;
	gap: 2px;
	color: #F5B301;
}

/* Reseñas */
/* Producción muestra una reseña cada vez, en carrusel. Aquí es un carril con
   anclaje de desplazamiento: mismo efecto, se pasa con el dedo o con el
   teclado, y sin una línea de JavaScript. */
.konekta-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.konekta-reviews__list > li {
	scroll-snap-align: center;
}

.konekta-review {
	position: relative;
	background: var(--kmc-color-white);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
	padding: 25px;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	text-align: center;
	overflow: hidden;
}

/* Comilla decorativa en la esquina, como en producción. */
.konekta-review::after {
	content: "”";
	position: absolute;
	top: 0.5rem;
	right: 1.25rem;
	font-family: var(--kmc-font-heading);
	font-size: 4rem;
	line-height: 1;
	color: rgba(232, 165, 195, 0.6);
	pointer-events: none;
}

.konekta-review__avatar {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	object-fit: cover;
}

.konekta-review h3 {
	margin: 0;
	font-size: var(--kmc-h3-size);
}

.konekta-review__source {
	margin: 0;
	color: var(--kmc-color-navy);
}

.konekta-review__text {
	margin: 0;
	color: var(--kmc-color-ink);
	max-width: 46rem;
}

/* Franja inferior */
.konekta-reviews__bottom {
	display: grid;
	grid-template-columns: 805fr 435fr;
	gap: 40px;
	align-items: stretch;
}

.konekta-reviews__banner {
	border-radius: 20px;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 18.75rem;
}

.konekta-reviews__stat {
	background: var(--kmc-color-navy);
	border-radius: 20px;
	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.konekta-reviews__stat-number {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-size: var(--kmc-h2-size);
	font-weight: 600;
	line-height: 1;
	color: var(--kmc-color-pink);
}

.konekta-reviews__stat-label {
	margin: 0;
	color: var(--kmc-color-white);
	font-family: var(--kmc-font-heading);
	font-size: var(--kmc-h3-size);
	font-weight: 600;
	line-height: 1.25;
}

@media (max-width: 899px) {
	.konekta-reviews__top,
	.konekta-reviews__bottom,
	.konekta-reviews__score-body {
		grid-template-columns: 1fr;
	}
}


/* ---------------------------------------------------------------------------
   "El Bienestar del paciente primero" (portada).
   Producción: panel navy #1F3C5B de radio 20px y 50px de aire en 807px, con
   el titular a dos colores y cuatro tarjetas 2×2 de radio 15px. La foto de la
   derecha desborda su columna y lleva el marcador encajado encima.
   --------------------------------------------------------------------------- */
.konekta-trust {
	display: grid;
	grid-template-columns: 807fr 433fr;
	gap: 40px;
	align-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 6.25rem) clamp(1.5rem, 1rem + 2vw, 3.125rem);
}

.konekta-trust__panel {
	background: var(--kmc-color-navy);
	border-radius: 20px;
	padding: clamp(1.5rem, 1rem + 2vw, 3.125rem);
	color: var(--kmc-color-white);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.konekta-trust__eyebrow {
	color: var(--kmc-color-white);
}

.konekta-trust__eyebrow .konekta-eyebrow-icon {
	color: var(--kmc-color-pink);
}

.konekta-trust__panel h2 {
	margin: 0;
	color: var(--kmc-color-white);
}

.konekta-trust__accent {
	color: var(--kmc-color-pink);
	display: block;
}

.konekta-trust__rest {
	display: block;
}

.konekta-trust__lead {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	/* El contenido del panel ocupa 707 de sus 807px en producción: sin este
	   tope, el párrafo se mete debajo de la foto que desborda por la derecha. */
	max-width: 44rem;
}

.konekta-trust__grid {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.konekta-trust__card {
	display: flex;
	gap: 15px;
	align-items: flex-start;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 15px;
	padding: 1.25rem;
}

.konekta-trust__icon {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	border: 1px solid var(--kmc-color-pink);
	color: var(--kmc-color-pink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.konekta-trust__card h3 {
	margin: 0 0 0.25rem;
	font-size: var(--kmc-h4-size);
	color: var(--kmc-color-white);
}

.konekta-trust__card p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

/* Columna derecha: la foto desborda hacia la izquierda, como en producción. */
.konekta-trust__side {
	position: relative;
	min-width: 0;
}

.konekta-trust__photo {
	border-radius: 20px;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 31.25rem;
	margin-left: -3rem;
}

.konekta-trust__badge {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	background: var(--kmc-color-navy);
	border-radius: 15px;
	padding: 1rem 1.25rem;
	text-align: center;
	box-shadow: 0 0 0 10px var(--kmc-color-white);
	min-width: 12rem;
}

.konekta-trust__badge-number {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--kmc-color-pink);
}

.konekta-trust__badge-label {
	margin: 0;
	color: var(--kmc-color-white);
	font-weight: 500;
}

@media (max-width: 1099px) {
	.konekta-trust {
		grid-template-columns: 1fr;
	}

	.konekta-trust__photo {
		margin-left: 0;
		min-height: 20rem;
	}
}

@media (max-width: 620px) {
	.konekta-trust__grid {
		grid-template-columns: 1fr;
	}

	.konekta-trust__badge {
		position: static;
		margin-top: 1rem;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
   Preguntas frecuentes de la portada.
   Producción: panel #E7F1F3 radio 20px, columnas 682/558 con 40px de
   separación. A la izquierda el collage con el círculo rosa decorativo, la
   foto de 477x500 y la tarjeta encajada de 380x320; a la derecha el titular a
   dos colores y las barras del acordeón, rosas cerradas y navy abiertas.
   --------------------------------------------------------------------------- */
.konekta-faq-band {
	padding-inline: clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.konekta-faq-band__panel {
	background: var(--kmc-color-alt-bg);
	border-radius: 20px;
}

.konekta-faq-band__inner {
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6.25rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem);
	display: grid;
	grid-template-columns: 682fr 558fr;
	gap: 40px;
	align-items: center;
}

.konekta-faq-band__media {
	position: relative;
	min-height: 31.25rem;
}

.konekta-faq-band__circle {
	position: absolute;
	top: 0;
	right: 2rem;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(232, 165, 195, 0.55), rgba(232, 165, 195, 0));
	pointer-events: none;
}

.konekta-faq-band__photo {
	width: min(100%, 477px);
	min-height: 31.25rem;
	border-radius: 20px;
	background-size: cover;
	background-position: 50% 50%;
	position: relative;
}

.konekta-faq-band__card {
	position: absolute;
	right: 0;
	bottom: 0;
	width: min(100%, 380px);
	border-radius: 20px;
	padding: 1.25rem;
	background-size: cover;
	background-position: 50% 50%;
	color: var(--kmc-color-white);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: 0 0 0 10px #E7F1F3;
}

.konekta-faq-band__card-head {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

.konekta-faq-band__mark {
	flex: 0 0 auto;
	width: 49px;
	height: 49px;
	border-radius: 50%;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kmc-font-heading);
	font-size: 25px;
}

.konekta-faq-band__card h3 {
	margin: 0 0 0.25rem;
	color: var(--kmc-color-white);
	font-size: var(--kmc-h3-size);
	line-height: 1.2;
}

.konekta-faq-band__card p {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
}

.konekta-faq-band__card .konekta-btn {
	align-self: flex-start;
}

.konekta-faq-band__content h2 {
	margin-bottom: 0.75rem;
}

.konekta-faq-band__lead {
	margin: 0 0 1.5rem;
	color: var(--kmc-color-ink);
}

/* Barras del acordeón */
.konekta-faq--bars {
	display: grid;
	gap: 0.75rem;
}

.konekta-faq--bars details {
	border-bottom: 0;
	padding-block: 0;
}

.konekta-faq--bars summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	border-radius: 8px;
	padding: 14px 30px;
	font-weight: 500;
	list-style: none;
}

.konekta-faq--bars summary::-webkit-details-marker {
	display: none;
}

.konekta-faq--bars details[open] > summary {
	background: var(--kmc-color-navy);
	border-radius: 8px 8px 0 0;
}

.konekta-faq--bars details[open] .konekta-faq__chevron {
	transform: rotate(180deg);
}

.konekta-faq__chevron {
	flex: 0 0 auto;
	transition: transform var(--kmc-transition);
}

.konekta-faq--bars details > p {
	margin: 0;
	background: var(--kmc-color-white);
	border-radius: 0 0 8px 8px;
	padding: 1rem 30px 1.25rem;
	color: var(--kmc-color-ink);
}

@media (max-width: 999px) {
	.konekta-faq-band__inner {
		grid-template-columns: 1fr;
	}

	.konekta-faq-band__media {
		min-height: 0;
	}

	.konekta-faq-band__photo {
		width: 100%;
		min-height: 20rem;
	}

	.konekta-faq-band__card {
		position: static;
		width: 100%;
		margin-top: 1rem;
		box-shadow: none;
	}

	.konekta-faq-band__circle {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Blog de la portada.
   Producción: cabecera a tres columnas 600/360/240 y tarjetas blancas a todo
   el ancho, radio 20px con 25px de aire, con la fecha en etiqueta rosa sobre
   la foto.
   --------------------------------------------------------------------------- */
.konekta-blog {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 6.25rem);
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.konekta-blog__head {
	display: grid;
	grid-template-columns: 600fr 360fr 240fr;
	gap: 40px;
	align-items: end;
}

.konekta-blog__head h2 {
	margin-bottom: 0;
}

.konekta-blog__lead {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-blog__head .konekta-btn {
	justify-self: end;
}

/*
 * Tres tarjetas en fila, no una debajo de otra.
 *
 * La regla anterior era una rejilla de UNA columna: los tres artículos de la
 * portada salían a todo el ancho, con la foto enorme, y ocupaban tres
 * pantallas. El mismo listado se usa ahora en la página del blog, donde con
 * una sola columna era aún peor.
 */
.konekta-blog__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 20px;
	align-items: start;
}

/* En el listado del blog la tarjeta ya no es un adelanto: se le da aire. */
.konekta-blog__list--archivo {
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Paginación del listado. No existía: con más de diez artículos, la segunda
   página aparecía sin ninguna forma de llegar a ella. */
.konekta-section .pagination,
.konekta-section .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.konekta-section .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.9rem;
	border-radius: var(--kmc-radius-pill);
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
	font-weight: 500;
	text-decoration: none;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.konekta-section .page-numbers.current {
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
}

.konekta-section a.page-numbers:hover,
.konekta-section a.page-numbers:focus-visible {
	background: rgba(232, 165, 195, 0.2);
}

.konekta-post-card {
	background: var(--kmc-color-white);
	border-radius: 20px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.konekta-post-card__media {
	position: relative;
}

.konekta-post-card__media img {
	width: 100%;
	height: auto;
	border-radius: 15px;
	display: block;
	aspect-ratio: 16 / 7;
	object-fit: cover;
}

.konekta-post-card__date {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	border-radius: 0 8px 0 15px;
	padding: 0.5rem 0.9rem;
	font-family: var(--kmc-font-heading);
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
}

.konekta-post-card__date span {
	display: block;
	font-size: 1.25rem;
}

.konekta-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

.konekta-post-card__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.9rem;
}

.konekta-post-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.konekta-post-card__author {
	color: var(--kmc-color-pink);
}

.konekta-post-card__day {
	color: var(--kmc-color-ink);
}

.konekta-post-card h3 {
	margin: 0;
}

.konekta-post-card h3 a {
	color: var(--kmc-color-navy);
}

.konekta-post-card h3 a:hover,
.konekta-post-card h3 a:focus-visible {
	color: var(--kmc-color-pink);
}

.konekta-post-card__excerpt {
	margin: 0;
	color: var(--kmc-color-ink);
	max-width: 60ch;
}

@media (max-width: 899px) {
	.konekta-blog__head {
		grid-template-columns: 1fr;
	}

	.konekta-blog__head .konekta-btn {
		justify-self: start;
	}
}

/* ---------------------------------------------------------------------------
   Barra fija inferior (solo móvil), igual que producción: 60px de alto,
   fondo #E7F1F3, píldoras navy de radio 50px con icono en círculo blanco.
   --------------------------------------------------------------------------- */
.konekta-mobile-bar {
	display: none;
}

@media (max-width: 782px) {
	.konekta-mobile-bar {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 99;
		height: 60px;
		background: var(--kmc-color-alt-bg);
		padding: 10px 5px;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		gap: 5px;
	}

	.konekta-mobile-bar__btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		background: var(--kmc-color-navy);
		color: var(--kmc-color-white);
		border-radius: 50px;
		padding: 4px 4px 4px 16px;
		font-size: 14px;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
	}

	.konekta-mobile-bar__icon {
		width: 31px;
		height: 31px;
		border-radius: 50%;
		background: var(--kmc-color-white);
		color: var(--kmc-color-navy);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}

	/* Sin esto la barra tapa el final del pie. */
	body {
		padding-bottom: 60px;
	}

	/* El botón de menú lleva las barras más gruesas, como en producción. */
	.konekta-header__toggle svg {
		width: 26px;
		height: 26px;
	}

	.konekta-header__toggle svg path {
		stroke-width: 2.4;
	}
}

/* Flechas del carrusel de reseñas (las añade el JavaScript). */
.konekta-reviews__controls {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.konekta-reviews__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(37, 52, 78, 0.12);
	transition: background var(--kmc-transition), color var(--kmc-transition);
}

.konekta-reviews__arrow:hover,
.konekta-reviews__arrow:focus-visible {
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
}


/* El botón de plegado es solo para móvil: en escritorio el desplegable se
   abre al pasar por encima o al tabular dentro. */
@media (min-width: 1150px) {
	.konekta-nav__expand {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Páginas de servicio.
   Cabecera oscura a dos columnas de 620px con la foto a la derecha, y cuerpo
   partido en bandas de fondo alterno, como en producción.
   --------------------------------------------------------------------------- */
.konekta-service-hero {
	background: linear-gradient(120deg, #1F3C5B 0%, #3A4C6B 55%, #6B5C82 100%);
	color: var(--kmc-color-white);
	padding-inline: 20px;
}

.konekta-service-hero__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: center;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 6.25rem);
}

.konekta-service-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.konekta-service-hero__chip {
	margin: 0;
	background: #6B849C;
	color: var(--kmc-color-white);
	border-radius: 30px;
	padding: 0.375rem 1rem;
	font-size: 0.95rem;
}

.konekta-service-hero h1 {
	margin: 0;
	color: var(--kmc-color-white);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	font-weight: 700;
	line-height: 1.15;
}

.konekta-service-hero h1 span {
	color: var(--kmc-color-pink);
}

.konekta-service-hero__lead {
	margin: 0;
	color: #E7F1F3;
	font-size: 1.125rem;
	max-width: 42rem;
}

.konekta-service-hero__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.konekta-service-hero__badges li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(191, 191, 191, 0.37);
	border-radius: 30px;
	padding: 0.375rem 1rem;
	color: var(--kmc-color-white);
	font-size: 0.95rem;
}

.konekta-service-hero__media img {
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
	aspect-ratio: 620 / 490;
	object-fit: cover;
}

.konekta-breadcrumb-bar {
	padding-block: 1rem 0;
}

/* Bandas del cuerpo */
.konekta-band {
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.75rem);
}

.konekta-band--clara {
	background: var(--kmc-color-white);
}

.konekta-band--tenue {
	background: var(--kmc-color-surface);
}

.konekta-band > .konekta-prose > :first-child {
	margin-top: 0;
}

@media (max-width: 899px) {
	.konekta-service-hero__inner {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Megamenú de "Servicios".
   Producción lo agrupa por categoría y pone un icono delante de cada
   servicio. Con 20 servicios la agrupación no es estética: sin ella, dar con
   uno cuesta.
   --------------------------------------------------------------------------- */
.konekta-nav__item-icon {
	display: inline-flex;
	color: var(--kmc-color-pink);
	margin-inline-end: 0.4rem;
	vertical-align: -0.2em;
}

@media (min-width: 1150px) {
	/* Panel de cinco columnas, una por categoría. */
	.konekta-nav__list > .menu-item-has-children > .sub-menu {
		grid-template-columns: repeat(5, minmax(11rem, 1fr));
		min-width: min(72rem, calc(100vw - 4rem));
		column-gap: 1.25rem;
		padding: 1.5rem;
		/* Se centra bajo el ítem en vez de desbordar por la derecha. */
		left: 50%;
		transform: translate(-50%, 6px);
	}

	.konekta-nav__list > .menu-item-has-children:hover > .sub-menu,
	.konekta-nav__list > .menu-item-has-children:focus-within > .sub-menu {
		transform: translate(-50%, 0);
	}

	/* Cabecera de columna: la categoría. */
	.konekta-nav__list .sub-menu > .menu-item-has-children > a {
		font-family: var(--kmc-font-heading);
		font-weight: 600;
		color: var(--kmc-color-navy);
		padding-bottom: 0.5rem;
		margin-bottom: 0.25rem;
		border-bottom: 1px solid rgba(37, 52, 78, 0.12);
	}

	/* Los servicios cuelgan dentro de su columna, no en otro desplegable. */
	.konekta-nav__list .sub-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: none;
		box-shadow: none;
		display: block;
		min-width: 0;
		padding: 0;
	}

	.konekta-nav__list .sub-menu .sub-menu a {
		font-size: 0.9rem;
		padding: 0.35rem 0.5rem;
	}
}

@media (max-width: 1149px) {
	/* En móvil, cada categoría es un bloque con sus servicios debajo. */
	.konekta-nav .konekta-nav__list .sub-menu .sub-menu {
		display: block;
		border-left: 0;
		padding: 0.25rem 0 0.5rem 0.75rem;
		margin-top: 0.25rem;
	}

	.konekta-nav .konekta-nav__list .sub-menu > .menu-item-has-children > a {
		font-weight: 600;
		color: var(--kmc-color-navy);
	}

	/* Las categorías de dentro no llevan botón de plegar: ya están abiertas. */
	.konekta-nav .konekta-nav__list .sub-menu .konekta-nav__expand {
		display: none;
	}
}

/* Índice de servicios y páginas de categoría */
.konekta-service-hero--simple {
	background: linear-gradient(120deg, #1F3C5B 0%, #3A4C6B 60%, #6B5C82 100%);
}

.konekta-service-hero__inner--solo {
	grid-template-columns: 1fr;
}

.konekta-service-hero--simple .konekta-breadcrumb,
.konekta-service-hero--simple .konekta-breadcrumb a {
	color: rgba(255, 255, 255, 0.85);
}

.konekta-cat + .konekta-cat {
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.konekta-cat > h2 a {
	color: var(--kmc-color-navy);
}

.konekta-cat > h2 a:hover,
.konekta-cat > h2 a:focus-visible {
	color: var(--kmc-color-pink);
}

.konekta-service-pills--grid {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	align-content: start;
}

/* Cabecera de banda: etiqueta sobre el titular y titular a dos colores, como
   en producción. La entradilla que sigue va a 18px. */
.konekta-band__head {
	margin-bottom: 2.5rem;
	max-width: 60rem;
}

/* Las bandas con etiqueta llevan la cabecera centrada y el titular a peso
   800, como en producción; las que no la llevan van a la izquierda y a 36px. */
.konekta-band__head--centrada {
	text-align: center;
	margin-inline: auto;
}

/* El fondo y el color de la etiqueta los pone cada banda con su valor real de
   producción; estos son solo el respaldo. */
.konekta-band__chip {
	margin: 0 0 1rem;
	display: inline-flex;
	align-items: center;
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
	border-radius: 30px;
	padding: 0.5rem 1.25rem;
	font-weight: 400;
}

.konekta-band__head h2 {
	margin: 0;
}

.konekta-band__head--centrada h2 {
	font-weight: 800;
}

.konekta-band__head:not(.konekta-band__head--centrada) h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}

/* Banda a dos columnas: imagen a la izquierda, texto al lado. */
.konekta-band__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 50px;
	align-items: center;
}

.konekta-band__media {
	display: grid;
	gap: 1.25rem;
}

.konekta-band__media figure,
.konekta-band__media img {
	margin: 0;
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}

.konekta-band__media img {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (max-width: 899px) {
	.konekta-band__split {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

.konekta-band__head + .konekta-prose > p:first-child {
	font-size: 1.125rem;
	color: var(--kmc-color-ink);
	max-width: 52rem;
}

/* Varias imágenes en una banda: rejilla bajo el texto. */
.konekta-band__galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}

.konekta-band__galeria figure,
.konekta-band__galeria img {
	margin: 0;
	width: 100%;
	height: auto;
	border-radius: 20px;
	display: block;
}

.konekta-band__galeria img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
}

/* Las preguntas de una página de servicio ocupan su propia banda, con el
   acordeón centrado y con el ancho de lectura acotado. */
.konekta-service-faq__lista {
	max-width: 56rem;
	margin-inline: auto;
}

/* Testimonio de una página de servicio. */
.konekta-testimonio figure {
	margin: 0;
	max-width: 52rem;
	margin-inline: auto;
	text-align: center;
	position: relative;
	background: var(--kmc-color-surface);
	border-radius: 20px;
	padding: 2.5rem 2rem 2rem;
}

.konekta-testimonio__comilla {
	position: absolute;
	top: 0.25rem;
	left: 1.5rem;
	font-family: var(--kmc-font-heading);
	font-size: 4.5rem;
	line-height: 1;
	color: rgba(232, 165, 195, 0.6);
}

.konekta-testimonio blockquote {
	margin: 0;
}

.konekta-testimonio blockquote p {
	margin: 0;
	font-size: 1.125rem;
	color: var(--kmc-color-navy);
}

.konekta-testimonio figcaption {
	margin-top: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--kmc-color-pink);
	font-weight: 500;
}

/* Acordeón de las páginas de servicio: filas blancas de radio 20px con 20px
   de aire. Las barras rosas son de la portada; aquí producción usa esto. */
.konekta-faq--filas {
	display: grid;
	gap: 0.75rem;
}

.konekta-faq--filas details {
	border-bottom: 0;
	padding-block: 0;
	background: var(--kmc-color-white);
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(37, 52, 78, 0.05);
}

.konekta-faq--filas summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 20px;
	font-family: var(--kmc-font-body);
	font-weight: 400;
	color: #1F2124;
	list-style: none;
}

.konekta-faq--filas summary::-webkit-details-marker {
	display: none;
}

.konekta-faq--filas details[open] > summary {
	color: var(--kmc-color-navy);
	font-weight: 500;
}

.konekta-faq--filas details[open] .konekta-faq__chevron {
	transform: rotate(180deg);
}

.konekta-faq--filas details > p {
	margin: 0;
	padding: 0 20px 20px;
	color: var(--kmc-color-ink);
}

/* Variantes de color de la cabecera de banda usadas por las plantillas
   propias (las que no salen del contenido migrado). */
.konekta-band__chip--claro {
	background: #E5F3F9;
	color: #2E7CBF;
}

.konekta-heading-accent--rosa {
	color: var(--kmc-color-pink);
}

.konekta-band__lead {
	margin: 1rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 1.125rem;
}

/* Tarjetas de "Servicios relacionados" -------------------------------------
   Producción: tarjeta blanca de radio 20px con una cabecera azul en degradado,
   el icono del servicio en un círculo navy centrado, el nombre debajo y un
   botón rosa "Ver más" a todo el ancho. Antes eran tarjetitas planas con el
   mismo icono de matraz repetido y un enlace de texto. */

.konekta-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.konekta-related__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	background: var(--kmc-color-white);
	box-shadow: 0 4px 20px rgba(37, 52, 78, 0.06);
	text-decoration: none;
	transition: transform var(--kmc-transition), box-shadow var(--kmc-transition);
}

.konekta-related__card:hover,
.konekta-related__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(37, 52, 78, 0.12);
}

.konekta-related__cabecera {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 130px;
	background: linear-gradient(150deg, #A5D5E9 0%, #6C9DD1 100%);
}

.konekta-related__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #2E6FB5;
	color: var(--kmc-color-white);
}

.konekta-related__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	flex: 1;
	padding: 1.5rem;
}

.konekta-related__title {
	color: var(--kmc-color-navy);
	font-family: var(--kmc-font-heading, inherit);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.konekta-related__more {
	margin-top: auto;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
}

@media (max-width: 900px) {
	.konekta-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.konekta-related__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   Banda oscura de cierre de las páginas de servicio.
   Producción: navy con patrón de fondo, titular de 46px peso 800 centrado,
   dos botones —rosa y translúcido— con su icono en círculo blanco, y nota.
   --------------------------------------------------------------------------- */
.konekta-cta-oscura {
	background-color: #22354E;
	background-size: cover;
	background-position: 50% 50%;
	color: var(--kmc-color-white);
}

.konekta-cta-oscura__inner {
	max-width: 980px;
	margin-inline: auto;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6.25rem) 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.konekta-cta-oscura h2 {
	margin: 0;
	color: var(--kmc-color-white);
	font-weight: 800;
}

.konekta-cta-oscura__lead {
	margin: 0;
	color: #E7F1F3;
	font-size: 1.125rem;
	max-width: 50rem;
}

.konekta-cta-oscura__botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 15px;
	padding-block: 15px;
}

/* Botón translúcido de la banda oscura. */
.konekta-btn--fantasma {
	background: rgba(191, 191, 191, 0.37);
	color: var(--kmc-color-white);
}

.konekta-btn--fantasma:hover,
.konekta-btn--fantasma:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.konekta-cta-oscura__nota {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #E7F1F3;
	font-size: 0.875rem;
}

/* Ficha flotante sobre la foto de la cabecera. */
.konekta-service-hero__media {
	position: relative;
}

.konekta-service-hero__ficha {
	position: absolute;
	left: -1.25rem;
	bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--kmc-color-white);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	box-shadow: 0 12px 30px rgba(31, 60, 91, 0.18);
	max-width: min(20rem, 80%);
}

.konekta-service-hero__ficha-icono {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.konekta-service-hero__ficha-titulo {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-weight: 600;
	color: var(--kmc-color-navy);
	line-height: 1.2;
}

.konekta-service-hero__ficha-texto {
	margin: 0;
	color: var(--kmc-color-ink);
}

@media (max-width: 899px) {
	.konekta-service-hero__ficha {
		left: 1rem;
		bottom: 1rem;
	}
}

/* Legales en la barra inferior del pie. */
.konekta-footer__legales {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	font-size: 0.875rem;
}

.konekta-footer__legales a {
	color: var(--kmc-color-ink);
}

.konekta-footer__legales a:hover,
.konekta-footer__legales a:focus-visible {
	color: var(--kmc-color-pink);
}

/* Servicio con su descripción, en las páginas de categoría. */
.konekta-service-pill--desc {
	align-items: flex-start;
	padding: 1.25rem;
}

.konekta-service-pill--desc .konekta-service-pill__title {
	display: block;
	margin-bottom: 0.25rem;
}

.konekta-service-pill__desc {
	display: block;
	color: var(--kmc-color-ink);
	font-family: var(--kmc-font-body);
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.45;
}

.konekta-service-faq__salida {
	margin: 1.5rem auto 0;
	max-width: 56rem;
	text-align: center;
	color: var(--kmc-color-ink);
}

.konekta-service-faq__salida a {
	color: var(--kmc-color-navy);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.konekta-service-faq__salida a:hover,
.konekta-service-faq__salida a:focus-visible {
	color: var(--kmc-color-pink);
}

/* Firma clínica de las páginas de servicio. */
.konekta-firma {
	padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.konekta-firma__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	max-width: 56rem;
	margin-inline: auto;
	background: var(--kmc-color-surface);
	border-radius: var(--kmc-radius-card);
	padding: 1.25rem 1.5rem;
}

.konekta-firma__icono {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.konekta-firma__texto {
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-firma__texto a {
	color: var(--kmc-color-navy);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.konekta-firma__texto a:hover,
.konekta-firma__texto a:focus-visible {
	color: var(--kmc-color-pink);
}

/* ---------------------------------------------------------------------------
   Portada de sección (páginas institucionales)

   Medidas reales de producción, tomadas con scripts/measure.mjs sobre
   /doctor-angel-rodriguez-mata/ el 22-ago-2026:

     banda        min-height 350px, padding lateral 40px, inner 1360px
     foto         background-size cover, position 50% 100%  (anclada abajo:
                  recorta por la cabeza, no por los pies)
     velo         ::before  #1F3C5B  opacidad 0.7
     h1           60px / 600 / #FFF / centrado, arranca en y=117
     ruta         16px / 500 / #FFF / centrada, en y=209

   El velo va en ::before y no en un degradado sobre la foto porque así el
   navy es exactamente el de la marca al 70 %, que es lo que hace producción.
--------------------------------------------------------------------------- */

.konekta-page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 350px;
	padding-inline: 40px;
	background-color: var(--kmc-color-navy);
	background-size: cover;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	color: var(--kmc-color-white);
}

.konekta-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kmc-color-navy);
	opacity: 0.7;
}

/* Sin foto no hay nada que velar: el navy va macizo. */
.konekta-page-hero--liso::before {
	opacity: 1;
}

.konekta-page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	text-align: center;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.konekta-page-hero h1 {
	margin: 0;
	max-width: 1024px;
	color: var(--kmc-color-white);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
	font-weight: 600;
	line-height: 1.2;
}

.konekta-page-hero__lead {
	margin: 0;
	max-width: 68ch;
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* La ruta es la misma marca que en el resto del sitio, pero sobre navy: hay
   que forzar el blanco, porque su color por defecto es el gris del texto. */
.konekta-page-hero .konekta-breadcrumb,
.konekta-page-hero .konekta-breadcrumb a,
.konekta-page-hero .konekta-breadcrumb span {
	color: var(--kmc-color-white);
	font-size: 1rem;
	font-weight: 500;
}

.konekta-page-hero .konekta-breadcrumb a {
	text-decoration: none;
}

.konekta-page-hero .konekta-breadcrumb a:hover,
.konekta-page-hero .konekta-breadcrumb a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 767px) {
	.konekta-page-hero {
		min-height: 260px;
		padding-inline: 20px;
	}
}

/* Motor de reservas -------------------------------------------------------- */

.konekta-booking {
	padding-block: clamp(2rem, 1.25rem + 2.5vw, 3.5rem);
}

.konekta-booking__slot iframe {
	display: block;
	width: 100%;
	min-height: 920px;
	border: 0;
	border-radius: var(--kmc-radius-card);
}

.konekta-booking__noscript {
	margin: 0;
	padding: 1.25rem;
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

/* /consulta/ — formulario de llamada ---------------------------------------- */

.konekta-consulta {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.konekta-consulta__lead {
	margin: 0 0 1.5rem;
	color: var(--kmc-color-navy);
	font-size: 1.125rem;
	font-weight: 500;
}

.konekta-consulta__campo {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0 0 1.125rem;
}

.konekta-consulta__campo label {
	color: var(--kmc-color-navy);
	font-size: 0.9375rem;
	font-weight: 500;
}

.konekta-consulta__campo input,
.konekta-consulta__campo select {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid #D5DDE5;
	border-radius: 12px;
	background: var(--kmc-color-white);
	color: var(--kmc-color-ink);
	font: inherit;
}

.konekta-consulta__campo input:focus-visible,
.konekta-consulta__campo select:focus-visible {
	outline: 2px solid var(--kmc-color-blue-heading);
	outline-offset: 1px;
}

.konekta-consulta__consentimiento {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.konekta-consulta__consentimiento input {
	margin-top: 0.2rem;
	flex: none;
}

/* La trampa no puede ir con display:none: hay robots que lo detectan y la
   saltan. Se saca de la pantalla, que además la deja fuera del lector. */
.konekta-consulta__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.konekta-aviso {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border-radius: 12px;
	font-size: 0.9375rem;
}

.konekta-aviso--bien {
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

.konekta-aviso--mal {
	background: #FDECEF;
	color: #8A2A44;
}

.konekta-consulta__vias {
	padding: 1.75rem;
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-alt-bg);
}

.konekta-consulta__vias h2 {
	margin: 0 0 1.125rem;
	font-size: 1.25rem;
	color: var(--kmc-color-navy);
}

.konekta-consulta__via {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 0.75rem;
	padding: 0.875rem 1rem;
	border-radius: 12px;
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
	font-weight: 500;
	text-decoration: none;
}

.konekta-consulta__via:hover,
.konekta-consulta__via:focus-visible {
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
}

.konekta-consulta__firma {
	margin: 1.25rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 0.875rem;
	line-height: 1.5;
}

@media (max-width: 900px) {
	.konekta-consulta {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* Páginas de gracias --------------------------------------------------------- */

.konekta-gracias {
	display: flex;
	justify-content: center;
	padding: clamp(2.5rem, 1.5rem + 4vw, 6rem) 20px;
	background: var(--kmc-color-surface);
}

.konekta-gracias__tarjeta {
	max-width: 620px;
	width: 100%;
	padding: clamp(2rem, 1.25rem + 2.5vw, 3rem);
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-white);
	text-align: center;
}

.konekta-gracias__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

.konekta-gracias__tarjeta h1,
.konekta-gracias__tarjeta h2 {
	margin: 0 0 0.75rem;
	color: var(--kmc-color-navy);
}

.konekta-gracias__salidas {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.konekta-gracias__enlace {
	color: var(--kmc-color-navy);
	font-size: 0.9375rem;
}

/* Precios sueltos ----------------------------------------------------------
   En producción cada precio venía como titular de sección (un <h2> con «89€»
   dentro), al mismo nivel que «Transparencia total». Aquí bajan a párrafo,
   porque un precio no abre una sección, pero conservan el peso visual que
   tenían: es la cifra que la paciente busca con la mirada. */

.konekta-precio {
	margin: 0.25rem 0 0.75rem;
	color: var(--kmc-color-navy);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
}

/* Opiniones de paciente en ficha de servicio -------------------------------- */

.konekta-testimonio__estrellas {
	display: inline-flex;
	gap: 2px;
	color: #E8A33C;
	vertical-align: -2px;
}

.konekta-testimonio figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
	color: var(--kmc-color-navy);
	font-size: 0.9375rem;
}

.konekta-testimonio__fuente {
	color: var(--kmc-color-ink);
	font-weight: 400;
}

/* La media agregada va debajo y en pequeño: respalda la opinión de arriba sin
   competir con ella. Es el dato que la web no daba en ninguna parte. */
.konekta-testimonio__agregado {
	margin: 1.25rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 0.875rem;
}

/* Tarjeta de reseña sin foto: las de Doctoralia no traen avatar, así que se
   pinta la inicial en un círculo con los colores de la marca. Mejor eso que
   un hueco o una silueta genérica. */

.konekta-review__inicial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
	font-size: 1.125rem;
	font-weight: 600;
}

.konekta-reviews__score-extra {
	margin: 0.375rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 0.875rem;
}

/* Filas de tarjetas ---------------------------------------------------------
   Es EL patrón de las páginas de servicio: un titular, una entradilla y debajo
   una fila de dos, tres o cuatro bloques en paralelo — los tres precios, los
   tres momentos del embarazo, las razones para elegir la clínica.

   Antes se aplanaban en una sola columna: el texto estaba todo, pero puesto uno
   debajo de otro. Por eso la página no se parecía a la original aunque no
   faltara ni una palabra. */

/*
 * Las tarjetas ya no se estiran para igualarse.
 *
 * Con `stretch`, una tarjeta de una línea al lado de otra larga se estiraba a
 * su altura y salía como una caja en blanco enorme: pasaba en "La Clínica",
 * con "Años de experiencia" ocupando media pantalla vacía. La conversión desde
 * Elementor se dejó por el camino el número de esos contadores, y estirarlos
 * convertía un dato que falta en un agujero.
 *
 * Cada tarjeta ocupa ahora lo que necesita. Que falte el número sigue siendo
 * un problema de contenido, pero deja de parecer que la web está rota.
 */
.konekta-tarjetas {
	display: grid;
	gap: 24px;
	margin: 1.75rem 0;
	align-items: start;
}

/* Una tarjeta sin nada dentro no debe dibujarse: era un rectángulo blanco
   suelto sin explicación. */
.konekta-tarjeta:empty {
	display: none;
}

.konekta-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.konekta-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.konekta-tarjetas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.konekta-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem;
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-white);
	box-shadow: 0 2px 14px rgba(31, 60, 91, 0.06);
}

/* Sobre banda clara la tarjeta blanca desaparecería, así que ahí va tintada. */
.konekta-band--clara .konekta-tarjeta {
	background: var(--kmc-color-surface);
}

.konekta-tarjeta > :first-child { margin-top: 0; }
.konekta-tarjeta > :last-child { margin-bottom: 0; }

.konekta-tarjeta h3 {
	margin: 0;
	color: var(--kmc-color-navy);
	font-size: 1.25rem;
}

/* Una tarjeta dentro de otra ya no necesita su propio marco: sería una caja
   dentro de una caja. */
.konekta-tarjeta .konekta-tarjeta {
	padding: 0;
	background: none;
	box-shadow: none;
}

.konekta-tarjeta .konekta-precio {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
}

.konekta-tarjeta img {
	border-radius: 14px;
}

@media (max-width: 900px) {
	.konekta-tarjetas--3,
	.konekta-tarjetas--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.konekta-tarjetas { grid-template-columns: minmax(0, 1fr); }
}

/* Hueco de la columna de imagen --------------------------------------------
   Cuando una banda lleva una foto y mucho texto, la columna de la foto se
   quedaba corta y dejaba medio ancho en blanco durante toda la altura del
   texto. Se veía en la sección de precios: la foto abajo a la izquierda y un
   vacío enorme encima.

   Dos arreglos que se complementan:
   · La foto se queda pegada al hacer scroll, así acompaña al texto en vez de
     quedarse arriba mientras el otro lado sigue bajando.
   · Si el texto es mucho más alto, la foto crece hasta un tercio de la
     pantalla recortando por el centro, que es lo que hace producción. */

.konekta-band__split {
	align-items: start;
}

.konekta-band__media {
	position: sticky;
	top: 96px;
}

.konekta-band__media figure {
	margin: 0;
}

.konekta-band__media img {
	width: 100%;
	height: auto;
	max-height: 66vh;
	object-fit: cover;
	border-radius: var(--kmc-radius-card);
}

@media (max-width: 900px) {
	.konekta-band__media {
		position: static;
	}
}

/* Reduce motion: quien lo pide no quiere elementos que se peguen al scroll. */
@media (prefers-reduced-motion: reduce) {
	.konekta-band__media {
		position: static;
	}
}

/* Tarjeta con cabecera de color -------------------------------------------
   Medido sobre producción (/citologia/, 23-ago): tarjeta blanca de radio 20px
   con una cabecera de 190px de alto y degradado a 150 grados. El color va por
   posición, no por contenido: la primera azul, la segunda rosa —que es la
   destacada, la que lleva la insignia— y la tercera navy.

     azul  #A5D5E9 → #6C9DD1
     rosa  #D691B5 → #D490B3
     navy  #2A5480 → #1F3C5B */

.konekta-tarjeta--con-cabecera {
	padding: 0;
	overflow: hidden;
}

/* Cabecera de tarjeta con icono --------------------------------------------
   Era una franja de degradado de 190px de alto con un icono de 46px flotando
   en medio: un tercio de la tarjeta ocupado por nada, leyéndose como el hueco
   donde debería ir una foto que no está, y con cinco colores escritos a mano
   que no existen en el sistema.

   OJO CON EL PRIMER INTENTO: se redujo la franja a un cuadrado de 56px con el
   icono dentro, y se rompió. Esa cabecera no lleva UNA cosa, lleva DOS: la
   etiqueta ("RECOMENDADO", "SEMANA 12-20") y el icono. Metidas en un cuadrado
   de 56px, la etiqueta lo desbordaba y el icono desaparecía: quedaban unos
   cuadrados de color vacíos con la etiqueta encima.

   La cabecera es ahora una columna: la etiqueta arriba y el icono debajo, cada
   uno con su sitio. El color se lo queda el icono, que es a quien identifica;
   la etiqueta va en píldora clara, que sobre fondo blanco sí se lee. */
.konekta-tarjeta__cabecera {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0 0 0.85rem;
	padding: 0;
	background: none;
	border-radius: 0;
}

.konekta-tarjeta__cabecera .konekta-icon {
	width: 56px;
	height: 56px;
	padding: 14px;
	box-sizing: border-box;
	border-radius: 14px;
	stroke-width: 1.6;
	flex: none;
}

.konekta-tarjeta__cabecera--azul .konekta-icon {
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

.konekta-tarjeta__cabecera--rosa .konekta-icon {
	background: rgba(232, 165, 195, 0.22);
	color: #9C4C74;
}

.konekta-tarjeta__cabecera--navy .konekta-icon {
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
}

/* La etiqueta iba flotando y centrada dentro de la franja; sin franja, se
   coloca en el flujo, y su blanco translúcido pasa a un tono claro que se lea
   sobre la tarjeta. */
.konekta-tarjeta--con-cabecera .konekta-tarjeta__insignia {
	position: static;
	transform: none;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

/* Con la cabecera reducida, la tarjeta vuelve a ser una sola caja con su
   relleno: antes el cuerpo tenía que compensar la franja. */
.konekta-tarjeta--con-cabecera {
	padding: 1.75rem;
}

.konekta-tarjeta--con-cabecera .konekta-tarjeta__cuerpo {
	padding: 0;
}


.konekta-tarjeta__insignia {
	position: absolute;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.25rem 0.75rem;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.22);
	color: var(--kmc-color-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.konekta-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}

.konekta-tarjeta__chip {
	align-self: flex-start;
	margin: 0 0 0.25rem;
	padding: 0.2rem 0.7rem;
	border-radius: 30px;
	font-size: 0.75rem;
	font-weight: 600;
}

.konekta-tarjeta__chip--azul { background: #DCEDF6; color: #2A5480; }
.konekta-tarjeta__chip--rosa { background: #F7E1EC; color: #A4406F; }
.konekta-tarjeta__chip--navy { background: #1F3C5B; color: #FFFFFF; }

/* La tarjeta destacada se levanta un poco, como en producción. */
.konekta-tarjetas > .konekta-tarjeta--con-cabecera:nth-child(2) {
	box-shadow: 0 10px 30px rgba(214, 145, 181, 0.28);
}

.konekta-boton-bloque {
	margin: 1.25rem 0 0;
}

/* Lista de comprobación: en producción va apretada, con el check delante.
   Como párrafos sueltos ocupaba el triple. */
.konekta-lista-check {
	margin: 0.75rem 0;
	padding-left: 1.15rem;
}

.konekta-lista-check li {
	margin-bottom: 0.35rem;
	line-height: 1.55;
}

/* Tarjeta de precio --------------------------------------------------------
   Medido sobre producción (/citologia/, 23-ago): cabecera ROSA MACIZA
   #D591B4 —no degradado, a diferencia de las otras tarjetas— con la insignia
   en blanco de 16px peso 500 y el nombre de 20px peso 600. Debajo, sobre
   blanco, la cifra en el rosa de marca #E8A5C3 a 46px peso 600, el "desde" en
   gris de 14px, y el botón. */

.konekta-precio-card {
	max-width: 340px;
	margin: 2rem auto 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--kmc-color-white);
	box-shadow: 0 8px 26px rgba(31, 60, 91, 0.08);
	text-align: center;
}

.konekta-precio-card__cabecera {
	padding: 1.75rem 1.25rem;
	background: #D591B4;
	color: var(--kmc-color-white);
}

.konekta-precio-card__insignia {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.konekta-precio-card__titulo {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

.konekta-precio-card__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 2rem 1.5rem 2.25rem;
}

.konekta-precio-card__cifra {
	margin: 0;
	color: var(--kmc-color-pink);
	font-size: 2.875rem;
	font-weight: 600;
	line-height: 1.1;
}

.konekta-precio-card__nota {
	margin: 0;
	color: var(--kmc-color-ink);
	font-size: 0.875rem;
}

.konekta-precio-card .konekta-btn {
	margin-top: 1.5rem;
}

/* Barra con icono ----------------------------------------------------------
   "Garantía" y similares: barra blanca de radio 12px a todo el ancho, con el
   icono en círculo rosa delante y el titular en navy de 20px peso 600. */

.konekta-barra-icono {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	background: var(--kmc-color-white);
	box-shadow: 0 4px 18px rgba(31, 60, 91, 0.06);
}

.konekta-barra-icono__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
}

.konekta-barra-icono__titulo {
	margin: 0;
	color: var(--kmc-color-navy);
	font-size: 1.25rem;
	font-weight: 600;
}

/* Distintivo flotando sobre la foto ----------------------------------------
   Producción pone "Médico Colegiado / Nº 282861234" en una tarjeta blanca de
   radio 12px encima de la imagen, no debajo. */

.konekta-foto-distintivo {
	position: relative;
}

.konekta-foto-distintivo figure,
.konekta-foto-distintivo img {
	margin: 0;
	display: block;
	width: 100%;
	border-radius: var(--kmc-radius-card);
}

.konekta-foto-distintivo__caja {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 78%;
	padding: 0.75rem 1rem;
	border-radius: 12px;
	background: var(--kmc-color-white);
	box-shadow: 0 6px 20px rgba(31, 60, 91, 0.14);
	color: var(--kmc-color-navy);
}

.konekta-foto-distintivo__caja > span {
	color: var(--kmc-color-navy);
	display: inline-flex;
}

.konekta-foto-distintivo__titulo {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
}

.konekta-foto-distintivo__texto {
	margin: 0.15rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 0.8125rem;
}

@media (max-width: 600px) {
	.konekta-foto-distintivo__caja {
		position: static;
		max-width: none;
		margin-top: 0.75rem;
		box-shadow: none;
		padding: 0.75rem 0;
	}
}

/* Cuando la cabecera de la banda va centrada, la entradilla que la sigue
   también: en producción forman un bloque. Centrar solo el titular dejaba el
   texto pegado a la izquierda debajo de un titular en el medio. */
.konekta-band__head--centrada + .konekta-prose > p:first-child,
.konekta-band__head--centrada + .konekta-prose > .konekta-band__lead {
	max-width: 62ch;
	margin-inline: auto;
	text-align: center;
}

.konekta-band__head--centrada + .konekta-prose > .konekta-precio-card,
.konekta-band__head--centrada + .konekta-prose > .konekta-barra-icono {
	margin-inline: auto;
}

/* Aviso de la agenda fuera del dominio bueno -------------------------------- */

.konekta-booking__aviso {
	padding: 1.5rem;
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
	text-align: center;
}

.konekta-booking__aviso-titulo {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
}

.konekta-booking__aviso p {
	max-width: 62ch;
	margin-inline: auto;
}

/* Titulares que acaban en signo -------------------------------------------
   "…(Virus del [Papiloma Humano])" y "¿Cuándo es el mejor [momento]?" dejaban
   el paréntesis y el signo caídos en su propia línea. El resalte es un <span>
   suelto, así que hay que pegarle lo que sigue para que no pueda partirse, y
   dar aire al titular para que no tenga que romper tan pronto. */

.konekta-band__head h2 {
	/* Sin tope estrecho: producción pone "¿Cuándo es el mejor momento?" en una
	   sola línea y con 26ch partía en tres. `balance` reparte las líneas cuando
	   de verdad hacen falta. */
	max-width: 44ch;
	margin-inline: auto;
	text-wrap: balance;
}

.konekta-band__head--centrada h2 {
	max-width: 46ch;
}

.konekta-heading-cierre {
	white-space: nowrap;
}

.konekta-barra-icono__texto {
	margin: 0.2rem 0 0;
	color: var(--kmc-color-ink);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Botones seguidos: en producción van en fila y centrados bajo el titular, no
   apilados y pegados a la izquierda. */
.konekta-boton-bloque {
	display: inline-block;
	margin: 1.25rem 0.75rem 0 0;
}

.konekta-band__head--centrada + .konekta-prose {
	text-align: center;
}

.konekta-band__head--centrada + .konekta-prose > ul,
.konekta-band__head--centrada + .konekta-prose > .konekta-tarjetas {
	text-align: left;
}

.konekta-band__head--centrada + .konekta-prose > ul {
	display: inline-block;
	text-align: left;
}

/* Escala de titulares -------------------------------------------------------
   El titular que ABRE una sección es más grande que uno que va dentro del
   texto. Sin esta distinción, "Servicios y precios de ginecología" salía del
   mismo tamaño que la portada de la página. */

.konekta-band__head h2,
.konekta-reviews__head h2,
.konekta-about__head h2,
.konekta-cta-oscura h2 {
	font-size: var(--kmc-h2-seccion);
}

.konekta-prose h2 {
	margin-top: 2rem;
	font-size: var(--kmc-h2-size);
}

/* Dentro de una tarjeta el titular es todavía más pequeño: compite con el
   resto de la tarjeta, no con la sección. */
.konekta-tarjeta h2,
.konekta-tarjeta h3 {
	font-size: 1.25rem;
}

/* La media agregada iba suelta al pie de la banda, alineada a la izquierda y
   sin estilo, como si se hubiera caído del bloque de arriba. Va centrada bajo
   la opinión y con la marca de Doctoralia. */
.konekta-testimonio__agregado {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	max-width: 640px;
	margin: 1.25rem auto 0;
	padding: 0.625rem 1rem;
	border-radius: 30px;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
	font-size: 0.875rem;
	font-weight: 500;
	text-align: center;
}

/* La nota del cierre no es una lista: era una viñeta suelta al lado de los
   botones. */
.konekta-band__head--centrada + .konekta-prose > ul:last-child {
	display: block;
	list-style: none;
	padding: 0;
	margin-top: 1.25rem;
	color: var(--kmc-color-ink);
	font-size: 0.9375rem;
	text-align: center;
}

.konekta-band__head--centrada + .konekta-prose > ul:last-child li::marker {
	content: "";
}

/* Página de pedir cita ------------------------------------------------------
   Es la que vende, así que lleva la misma maqueta que las de servicio en vez
   de titulares sueltos y listas de viñetas. */

.konekta-tarjeta--simple {
	gap: 0.5rem;
	text-align: left;
}

.konekta-tarjeta__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 0.5rem;
	border-radius: 12px;
	background: var(--kmc-color-alt-bg);
	color: var(--kmc-color-navy);
}

.konekta-ficha-consulta h3 {
	margin: 0 0 0.5rem;
	color: var(--kmc-color-navy);
}

.konekta-ficha-consulta p {
	margin: 0 0 0.35rem;
	line-height: 1.6;
}

/* Tarifas: nombre a la izquierda, precio a la derecha. En una lista de quince
   viñetas el precio se perdía dentro de la frase. */
/* Tarifas ------------------------------------------------------------------
   Eran diecisiete tarjetas iguales, cada una con su sombra, repartidas en tres
   columnas. Dos problemas: diecisiete sombras es ruido, y sobre todo los
   precios quedaban a distinta altura en cada tarjeta, así que no se podían
   comparar de un vistazo. Y una paciente no ojea esta sección: la ESCANEA
   buscando cuánto cuesta lo suyo.

   Ahora es un listado de dos columnas con una línea fina separando cada fila.
   Los precios caen alineados en su columna, que es lo que permite compararlos
   de un vistazo.

   Se probó con una guía de puntos entre el nombre y el precio y se quitó: un
   pseudo-elemento vacío no tiene línea base, así que con nombres de dos y tres
   líneas la guía se iba flotando por encima de la fila.

   El precio iba en un granate (#A4406F) escrito a mano que no existe en el
   sistema. Va en navy: el nombre en tinta normal y la cifra en navy fuerte,
   para que la vista baje por la columna de precios. El rosa no se toca, que
   es el color de "reserva". */
.konekta-tarifas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	row-gap: 0;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	max-width: none;
}

.konekta-tarifa {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid rgba(31, 60, 91, 0.1);
}

.konekta-tarifa__nombre {
	grid-column: 1;
	color: var(--kmc-color-ink);
	font-weight: 500;
	line-height: 1.35;
}

.konekta-tarifa__precio {
	grid-column: 2;
	color: var(--kmc-color-navy);
	font-family: var(--kmc-font-heading);
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
	.konekta-tarifas { grid-template-columns: minmax(0, 1fr); }
}

/* Punto con icono ----------------------------------------------------------
   "Sin Ingreso", "Rápido", "Indoloro", "Recuperación Inmediata": en producción
   cada uno lleva su dibujo en un cuadrado navy delante del titular. Sin el
   icono quedaban titulares pelados uno detrás de otro, sin nada que los
   separase visualmente. */

.konekta-punto {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin: 1.25rem 0;
}

.konekta-punto__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--kmc-color-navy);
	color: var(--kmc-color-white);
}

.konekta-punto__titulo {
	margin: 0 0 0.2rem;
	color: var(--kmc-color-navy);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.konekta-punto__texto {
	margin: 0;
	color: var(--kmc-color-ink);
	line-height: 1.6;
}

/*
 * Franjas de dos columnas sin su foto.
 *
 * `.konekta-steps-layout` y `.konekta-final-cta` reservan una columna para una
 * foto del doctor. Cuando el número de imagen escrito a mano dejó de valer al
 * pasar a producción, la foto desapareció pero la columna se quedó: los pasos
 * se apretaban en el 35 % de la izquierda y la mitad de la pantalla quedaba en
 * blanco. Con la foto ausente, una sola columna.
 */
.konekta-steps-layout--sin-foto,
.konekta-final-cta--sin-foto {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Las flechas del carrusel, otra vez, con más peso.
 *
 * Elementor da estilo a TODOS los `<button>` de la página mientras siga
 * pintando la cabecera y el pie:
 *
 *   .elementor-kit-19 button { background-color: var(--e-global-color-accent);
 *                              padding: 13px 26px; border-radius: 50px; ... }
 *
 * Nuestras flechas quedaban como dos pastillas rosas de 54x44 en vez de dos
 * círculos blancos de 44x44. Repetir la clase basta para ganarle. Esto se
 * quita el día que la cabecera y el pie dejen de ser de Elementor.
 */
.konekta-reviews__arrow.konekta-reviews__arrow {
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
	font-size: 1rem;
	line-height: 1;
}

.konekta-reviews__arrow.konekta-reviews__arrow:hover,
.konekta-reviews__arrow.konekta-reviews__arrow:focus-visible {
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
}

/* Pasos dentro de una banda -------------------------------------------------
   "Cómo funciona" de la página de orientación: tres pasos que al migrar se
   quedaron como titulares y párrafos sueltos, apilados y sin numerar. */
.konekta-pasos-banda {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.konekta-pasos-banda__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: var(--kmc-color-white);
	border-radius: var(--kmc-radius-card);
	padding: 1.75rem;
	box-shadow: 0 2px 14px rgba(31, 60, 91, 0.06);
}

.konekta-pasos-banda__numero {
	font-family: var(--kmc-font-heading);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	color: var(--kmc-color-pink);
	flex-shrink: 0;
}

.konekta-pasos-banda__item h3 {
	margin: 0 0 0.35rem;
	font-size: 1.25rem;
}

.konekta-pasos-banda__item p {
	margin: 0;
	color: var(--kmc-color-ink);
}

/* El asistente de orientación ----------------------------------------------
   Vive dentro de `/patient-guidance/`, justo debajo de la portada. Antes esa
   página explicaba en qué consiste la orientación y terminaba sin dejar
   empezarla. */
.konekta-orientacion {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.konekta-orientacion__cabecera {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.konekta-orientacion__cabecera h2 {
	margin: 0;
}

.konekta-orientacion__lead {
	max-width: 56ch;
	margin: 0;
}

.konekta-orientacion__directa {
	text-align: center;
	margin: 0;
	color: var(--kmc-color-ink);
}

.konekta-orientacion__directa a {
	color: var(--kmc-color-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Herramienta externa incrustada ------------------------------------------- */
.konekta-embed {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.konekta-embed__marco {
	width: 100%;
	border: 0;
	border-radius: var(--kmc-radius-card);
	background: var(--kmc-color-white);
	display: block;
}

.konekta-embed__ayuda,
.konekta-embed__vuelta {
	margin: 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--kmc-color-ink);
}

.konekta-embed__ayuda a,
.konekta-embed__vuelta a {
	color: var(--kmc-color-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cuando sabemos que el navegador lo va a bloquear, se explica en vez de
   dejar que salga su página de error dentro de la web del doctor. */
.konekta-embed__aviso {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var(--kmc-radius-card);
	background: rgba(232, 165, 195, 0.12);
	border: 1px solid rgba(232, 165, 195, 0.4);
}

.konekta-embed__aviso-titulo {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-weight: 600;
	color: var(--kmc-color-navy);
}

.konekta-embed__aviso p {
	margin: 0;
}

.konekta-embed__aviso .konekta-btn {
	margin-top: 0.5rem;
}

/* Cifras de los contadores --------------------------------------------------
   Al convertir las páginas desde Elementor se perdió el NÚMERO de sus
   contadores y solo sobrevivió la etiqueta: "Años de experiencia" a secas,
   dentro de una tarjeta vacía. Los números se recuperaron de la copia de
   seguridad del 23-ago (30+ años, 98 % de satisfacción, 2.500 pacientes,
   900 ecografías 5D) y se repusieron en el contenido; esto les da la forma que
   tenían: cifra grande en rosa con el signo más pequeño al lado. */
.konekta-cifra {
	margin: 0;
	font-family: var(--kmc-font-heading);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--kmc-color-pink);
	display: flex;
	align-items: flex-start;
	gap: 0.1em;
}

.konekta-cifra span {
	font-size: 0.5em;
	line-height: 1.2;
}

/* La etiqueta que va justo debajo de la cifra. */
.konekta-cifra + p {
	margin-top: 0.35rem;
	font-family: var(--kmc-font-heading);
	font-weight: 600;
	color: var(--kmc-color-navy);
}

/* ===========================================================================
   RITMO DE LECTURA DE LAS BANDAS

   Qué estaba mal, medido en `/pedir-cita-ginecologo-madrid/`: la página entera
   era UNA banda blanca, los párrafos ocupaban 1.128px —unos 120 caracteres por
   línea, cuando lo legible son 65-75— y los nueve titulares salían todos al
   mismo tamaño y peso. No era falta de adornos: era que nada indicaba dónde
   empieza un asunto y dónde acaba. Se leía como un documento de Word.

   Se arregla con tres cosas, ninguna decorativa:
   1. El texto tiene un ancho de lectura; las rejillas y tarjetas, no.
   2. El titular que abre banda es visiblemente mayor que el de dentro.
   3. Las bandas alternan fondo, y la primera línea de cada una respira.
   =========================================================================== */

/* 1. Ancho de lectura -------------------------------------------------------
   Solo para lo que se LEE seguido. Las rejillas de tarjetas, las fotos y los
   listados de precios siguen a todo el ancho: son de ojear o de comparar, no
   de leer renglón a renglón.

   El criterio para distinguirlos es tener clase propia del tema: un `<ul>` sin
   clase es una lista escrita en el texto; uno con `konekta-…` es un componente.
   Estrangular el listado de tarifas a 68ch lo dejaba en la mitad izquierda con
   media pantalla vacía al lado. */
.konekta-band .konekta-prose > p:not([class*="konekta-"]),
.konekta-band .konekta-prose > ul:not([class*="konekta-"]),
.konekta-band .konekta-prose > ol:not([class*="konekta-"]),
.konekta-band .konekta-prose > blockquote {
	max-width: 68ch;
}

/* 2. Jerarquía de titulares -------------------------------------------------
   El que abre la banda usa el tamaño de sección; el que va dentro del texto,
   el pequeño. Los dos tamaños ya existían en `tokens.css` y no se estaban
   usando: todos los H2 salían igual. */
.konekta-band .konekta-prose > h2 {
	font-size: var(--kmc-h2-seccion);
	font-weight: var(--kmc-h2-weight);
	line-height: 1.1;
	letter-spacing: var(--kmc-h2-tracking);
	max-width: 28ch;
	/* Reparte las líneas del titular en vez de dejar una palabra sola abajo.
	   Un tope en `ch` a secas partía "Consulta Presencial (Madrid)" justo
	   antes del paréntesis. */
	text-wrap: balance;
}

.konekta-band .konekta-prose > h2:first-child {
	margin-top: 0;
}

/* Un H2 que no abre banda es un subtítulo: no puede gritar igual. */
.konekta-band .konekta-prose > h2 ~ h2 {
	font-size: var(--kmc-h2-size);
	max-width: 34ch;
}

.konekta-band .konekta-prose > h3 {
	margin-top: 1.75rem;
	font-size: var(--kmc-h3-size);
	max-width: 38ch;
	text-wrap: balance;
}

/* Evita que un párrafo termine con una palabra sola en su última línea. */
.konekta-band .konekta-prose > p {
	text-wrap: pretty;
}

/* La entradilla que sigue al titular de sección va un punto más grande: marca
   dónde empieza el asunto sin necesidad de otro adorno. */
.konekta-band .konekta-prose > h2:first-child + p {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--kmc-color-ink);
	margin-top: 0.75rem;
}

/* 3. Aire ------------------------------------------------------------------
   Espaciado desigual a propósito: mucho antes de un titular, poco después. Así
   el titular se lee pegado a su texto y separado del anterior, que es lo que
   agrupa la información sin dibujar una sola línea. */
.konekta-band .konekta-prose > * + h2 {
	margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.konekta-band .konekta-prose > h2 + * {
	margin-top: 0.75rem;
}

.konekta-band .konekta-prose > p + p {
	margin-top: 1rem;
}

/* Dos bandas seguidas del mismo color se leen como una sola: la de abajo se
   queda sin su aire de arriba para que no parezca un corte a mitad de asunto. */
.konekta-band--clara + .konekta-band--clara,
.konekta-band--tenue + .konekta-band--tenue {
	padding-block-start: 0;
}


/* Bandas de solo titular y entradilla -------------------------------------
   Varias secciones son un titular y un párrafo, nada más. Apiladas a la
   izquierda dejaban media pantalla vacía y se leían como el índice de un
   documento: título, párrafo, título, párrafo.

   Cuando la banda NO trae tarjetas, listas ni fotos y tiene como mucho dos
   párrafos, pasa a dos columnas desiguales: el titular a la izquierda, el
   texto a la derecha. Se ocupa el ancho sin alargar la línea de lectura, y
   estas secciones dejan de parecerse a las que sí llevan contenido.

   Va con `:has()`. Donde no exista, la banda se queda apilada, que es
   exactamente lo que había: no se rompe nada. */
@supports selector(:has(*)) {
	@media (min-width: 860px) {
		.konekta-band .konekta-prose:not(:has(.konekta-tarjetas, .konekta-tarjeta, figure, img, ul, ol, table, iframe)):not(:has(> p:nth-of-type(3))):has(> h2:first-child + p) {
			display: grid;
			grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
			gap: clamp(1.5rem, 1rem + 3vw, 4rem);
			align-items: start;
		}

		.konekta-band .konekta-prose:not(:has(.konekta-tarjetas, .konekta-tarjeta, figure, img, ul, ol, table, iframe)):not(:has(> p:nth-of-type(3))):has(> h2:first-child + p) > h2 {
			margin: 0;
			max-width: 18ch;
		}

		.konekta-band .konekta-prose:not(:has(.konekta-tarjetas, .konekta-tarjeta, figure, img, ul, ol, table, iframe)):not(:has(> p:nth-of-type(3))):has(> h2:first-child + p) > p {
			margin-top: 0.4rem;
			max-width: 62ch;
		}
	}
}

/* Varias fotos dentro de una tarjeta ---------------------------------------
   En "Sobre Mí" la conversión metió CUATRO fotos seguidas dentro de la tarjeta
   de la calificación de Google. Al ser bloques de nivel se apilaban una debajo
   de otra, cada una de medio metro de alto, en la columna izquierda, con la
   mitad derecha de la pantalla en blanco. Era la primera cosa que se veía mal
   de la página.

   Cuando una tarjeta trae más de una foto, su cuerpo pasa a rejilla y las
   fotos se reparten; lo que no es foto sigue ocupando el ancho completo. Con
   una sola foto no cambia nada: ahí es una ilustración del texto. */
@supports selector(:has(*)) {
	.konekta-tarjeta__cuerpo:has(> figure + figure) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: 1rem;
		align-items: start;
	}

	.konekta-tarjeta__cuerpo:has(> figure + figure) > :not(figure) {
		grid-column: 1 / -1;
	}

	.konekta-tarjeta__cuerpo:has(> figure + figure) > figure {
		margin: 0;
	}

	.konekta-tarjeta__cuerpo:has(> figure + figure) > figure img {
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		border-radius: 14px;
		display: block;
	}
}

/* Portada de sección con retrato -------------------------------------------
   La de "Sobre Mí". La composición está reflejada respecto a la portada del
   sitio —allí el texto va a la izquierda y él a la derecha— para que se
   reconozca a la misma persona sin que las dos pantallas parezcan la misma.

   El degradado es el de la marca. Es el tercer sitio donde aparece, y es a
   propósito: portada, esta página y el cierre. Los tres hablan de él. */
.konekta-page-hero--retrato {
	/* El degradado va al revés que en la portada del sitio: allí el texto está
	   sobre el extremo navy y él sobre el rosa. Aquí la composición está
	   reflejada, así que el degradado también, y el texto vuelve a caer sobre
	   la parte oscura. No es un capricho: blanco sobre el rosa de la marca no
	   llega al contraste que necesita un texto. */
	background: linear-gradient(270deg, #25344E 0%, #6B5C82 50%, #E8A5C3 100%);
	padding-block: 0;
	padding-inline: 40px;
	overflow: hidden;
}

/* La portada normal lleva un velo navy al 70 % encima de su foto, para que el
   texto se lea. Aquí no hay foto de fondo que velar: el velo solo apagaba el
   degradado y lo dejaba en un gris azulado. */
.konekta-page-hero--retrato::before {
	content: none;
}

.konekta-page-hero__split {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	align-items: end;
	min-height: 22rem;
}

.konekta-page-hero__retrato {
	align-self: end;
	display: flex;
	justify-content: center;
}

.konekta-page-hero__retrato img {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
	/* Pegado al borde inferior: el recorte termina en el pecho y flotarlo lo
	   dejaría cortado en el aire. */
	margin-bottom: -1px;
	/* El recorte arrastra un resto de fondo gris en la esquina de abajo. Se
	   desvanece el último tramo: tapa el defecto y de paso funde la figura con
	   la banda en vez de cortarla en seco. */
	-webkit-mask-image: linear-gradient(to top, transparent 0, #000 7%);
	mask-image: linear-gradient(to top, transparent 0, #000 7%);
}

.konekta-page-hero__texto {
	align-self: center;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	color: var(--kmc-color-white);
}

.konekta-page-hero__texto h1 {
	margin: 0;
	color: var(--kmc-color-white);
	font-size: var(--kmc-h1-size);
	line-height: 1.05;
	text-wrap: balance;
}

.konekta-page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--kmc-color-white);
	font-weight: 500;
	/* Sobre el degradado, el texto claro pide algo más de aire entre líneas. */
	line-height: 1.6;
}

.konekta-page-hero--retrato .konekta-page-hero__lead {
	margin: 0.9rem 0 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.0625rem;
	/* Texto claro sobre fondo oscuro: pide algo más de interlineado, porque se
	   percibe más fino de lo que es. */
	line-height: 1.65;
}

.konekta-page-hero--retrato .konekta-breadcrumb {
	margin-top: 1.25rem;
	justify-content: flex-start;
}

.konekta-page-hero--retrato .konekta-breadcrumb,
.konekta-page-hero--retrato .konekta-breadcrumb a,
.konekta-page-hero--retrato .konekta-breadcrumb span {
	color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 860px) {
	.konekta-page-hero__split {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
	}

	/* En móvil manda el texto: la foto va debajo y más pequeña. */
	.konekta-page-hero__retrato {
		order: 2;
	}

	.konekta-page-hero__retrato img {
		max-width: 15rem;
	}

	.konekta-page-hero__texto {
		order: 1;
		padding-bottom: 1.5rem;
	}
}

/* Misión y visión, en pareja ------------------------------------------------
   Eran dos tarjetas de ancho completo con dos líneas de texto cada una: mil
   cien píxeles de caja para "Atención experta en cada etapa de la vida". Dicen
   lo mismo y se leen juntas, así que van juntas. */
.konekta-barra-icono {
	display: inline-flex;
	width: 100%;
	vertical-align: top;
}

@media (min-width: 780px) {
	.konekta-barra-icono {
		width: calc(50% - 0.75rem);
	}

	.konekta-barra-icono + .konekta-barra-icono {
		margin-inline-start: 0.75rem;
	}
}

/* Una frase suelta no es una tarjeta ---------------------------------------
   La conversión envolvió en tarjeta párrafos sueltos de una sola frase. Una
   caja con sombra alrededor de una línea promete un componente que no existe,
   y sumaba una caja gris más a una página que ya eran todo cajas grises.

   Se le quita el envoltorio y se le da tamaño: pasa a ser lo que es, una frase
   que introduce lo que viene. El párrafo de un botón no cuenta, que ese sí es
   un componente. */
@supports selector(:has(*)) {
	.konekta-tarjeta:has(> p:only-child:not([class*="konekta-"])) {
		background: none;
		box-shadow: none;
		padding: 0;
		margin-block: 0.5rem;
	}

	.konekta-tarjeta:has(> p:only-child:not([class*="konekta-"])) > p {
		max-width: 60ch;
		font-size: 1.125rem;
		line-height: 1.6;
		color: var(--kmc-color-ink);
	}

	.konekta-band--clara .konekta-tarjeta:has(> p:only-child:not([class*="konekta-"])),
	.konekta-band--tenue .konekta-tarjeta:has(> p:only-child:not([class*="konekta-"])) {
		background: none;
	}
}

/* Foto ancha de cierre ------------------------------------------------------
   La última imagen de "Sobre Mí" y de "La Clínica". A todo el ancho del
   contenido, con su pie: es la prueba de que detrás hay una persona y un sitio
   de verdad, no un catálogo de fotos de banco. */
.konekta-foto-ancha {
	width: min(var(--kmc-content-width), 100% - 80px);
	margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0;
}

.konekta-foto-ancha img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 7;
	object-fit: cover;
	object-position: 50% 40%;
	border-radius: var(--kmc-radius-card);
}

.konekta-foto-ancha figcaption {
	margin-top: 0.85rem;
	max-width: 62ch;
	color: var(--kmc-color-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* Tira de fotos reales -----------------------------------------------------
   Debajo de la portada de "Sobre Mí". Tres fotos suyas trabajando, con su pie.

   Todas se recortan al mismo alto aunque vengan en orientaciones distintas: la
   biblioteca tiene retratos verticales y encuadres apaisados, y sin recorte
   común la fila salía en escalera. */
.konekta-tira {
	margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* El carril. Se ven tres fotos y se intuye la cuarta, que es lo que invita a
   arrastrar: si entran justas, nadie sabe que hay más. */
.konekta-tira__carril {
	display: grid;
	grid-auto-flow: column;
	/* Tamaño FIJO, sin `minmax(0, …)`: ese mínimo de cero deja que las
	   columnas se encojan hasta caber todas, y entonces el carril no desborda
	   y no hay nada que arrastrar. Con las cinco fotos se quedaba en 210px
	   cada una y el carrusel no era carrusel. */
	grid-auto-columns: calc((100% - 3 * 20px) / 3.35);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	/* Sin esto, el borde de la foto que asoma se corta en seco contra el
	   margen del contenedor. */
	scroll-padding-inline: 0;
}

.konekta-tira__carril > * {
	scroll-snap-align: start;
}

@media (max-width: 900px) {
	.konekta-tira__carril {
		grid-auto-columns: calc((100% - 20px) / 2.2);
	}
}

@media (max-width: 600px) {
	.konekta-tira__carril {
		grid-auto-columns: 78%;
	}
}

.konekta-tira__foto {
	margin: 0;
}

.konekta-tira__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--kmc-radius-card);
}

.konekta-tira__foto figcaption {
	margin-top: 0.75rem;
	color: var(--kmc-color-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
}

@media (max-width: 700px) {
	/* En móvil una debajo de otra sería una tira interminable: se dejan dos
	   por fila y el pie más pequeño. */
	.konekta-tira {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.konekta-tira__foto figcaption {
		font-size: 0.875rem;
	}
}


/* Flechas de carrusel (comunes) --------------------------------------------
   Las reseñas ya las tenían con nombre propio; al montar el carrusel de fotos
   se generalizan para no acabar con dos juegos de flechas distintos. */
.konekta-carrusel__controles {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 1rem;
}

.konekta-carrusel__flecha {
	width: 44px;
	height: 44px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--kmc-color-white);
	color: var(--kmc-color-navy);
	font-size: 1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(37, 52, 78, 0.12);
	transition: background var(--kmc-transition), color var(--kmc-transition);
}

.konekta-carrusel__flecha:hover,
.konekta-carrusel__flecha:focus-visible {
	background: var(--kmc-color-pink);
	color: var(--kmc-color-white);
}

/* Mientras Elementor estuvo activo hacía falta repetir la clase para ganarle
   el estilo de `<button>`. Ya no está, pero se deja: cuesta nada y protege de
   cualquier plugin que vuelva a pintar todos los botones. */
.konekta-carrusel__flecha.konekta-carrusel__flecha {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
}


/* Marcador de sección -------------------------------------------------------
   Una raya corta en rosa encima del titular que abre banda. Es lo único que
   distingue "aquí empieza un asunto nuevo" de "esto es un subtítulo", ahora que
   las bandas alternan un blanco y un gris casi iguales.

   Va ARRIBA y no al lado: un borde lateral de color pegado al texto es el
   recurso de relleno de siempre y no dice nada. */
.konekta-band .konekta-prose > h2:first-child::before {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-bottom: 1rem;
	border-radius: 3px;
	background: var(--kmc-color-pink);
}

/* El titular de la portada de sección, también con peso. */
.konekta-page-hero h1,
.konekta-page-hero__texto h1 {
	font-weight: var(--kmc-h1-weight);
	letter-spacing: var(--kmc-h1-tracking);
	line-height: 1.03;
}

/* El texto corrido gana aire: con titulares más fuertes, un interlineado corto
   hace que el bloque parezca apelmazado debajo. */
.konekta-band .konekta-prose > p {
	line-height: 1.7;
}

/* Proporción de las filas de tarjetas ---------------------------------------

   1. CUATRO COLUMNAS PARA TEXTO LARGO. En "La Clínica" cuatro tarjetas de
      párrafo entero salían a 264px de ancho: descontado el relleno, unos 26
      caracteres por línea. Cada tarjeta se convertía en una torre de texto de
      medio metro y las cuatro terminaban a alturas distintas. Pasan a dos por
      fila: 552px, unos 62 caracteres, que es un ancho de lectura de verdad.

      Es la ÚNICA fila de cuatro que hay en toda la web (comprobado en las 40
      páginas), así que esto no descoloca ninguna otra.

   2. UNA CIFRA O UN BOTÓN NO NECESITAN MEDIA PÁGINA. "30+ Años de experiencia"
      ocupaba una columna de 552px al lado de un bloque de texto de 621px de
      alto: 470px de blanco debajo de una cifra. Igual con la tarjeta que solo
      tiene el botón de reservar. Cuando la fila lleva una de esas, la columna
      del texto se lleva el espacio y la otra se estrecha.
   =========================================================================== */
.konekta-tarjetas--4 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@supports selector(:has(*)) {
	.konekta-tarjetas--2:has(> .konekta-tarjeta > .konekta-cifra),
	.konekta-tarjetas--2:has(> .konekta-tarjeta > .konekta-boton-bloque:only-child) {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}

	/* La tarjeta corta se centra respecto a la larga en vez de quedarse
	   colgando arriba del todo. */
	.konekta-tarjetas--2:has(> .konekta-tarjeta > .konekta-cifra) {
		align-items: center;
	}
}

@media (max-width: 760px) {
	.konekta-tarjetas--2:has(> .konekta-tarjeta > .konekta-cifra),
	.konekta-tarjetas--2:has(> .konekta-tarjeta > .konekta-boton-bloque:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}
}