/* Webtilia Content Tabs — front-end
 * Basado en el diseño original (.dmre-*), migrado a namespace .wtct-* con
 * color de acento configurable vía la variable CSS --wtct-accent.
 */

.wtct-wrapper {
	--wtct-accent: #01B2C5;
	display: flex;
	gap: 20px;
	font-family: "Montserrat", sans-serif;
	flex-wrap: wrap;
}

/* Menú izquierdo */
.wtct-menu {
	width: 280px;
	border: 2px solid var(--wtct-accent);
	border-radius: 20px;
	overflow: hidden;
	height: fit-content;
	background: #fff;
	margin-bottom: 20px;
	box-shadow: 0 8px 24px rgba(1, 178, 197, .10);
}

.wtct-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid #eee;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	padding: 18px 20px;
	cursor: pointer;
}

.wtct-menu-item.active {
	background: #e8f8fa;
	color: var(--wtct-accent);
}

.wtct-menu-item:last-child {
	border-bottom: none;
}

/* Panel derecho */
.wtct-content {
	flex: 1;
	min-width: 300px;
	border: 2px solid var(--wtct-accent);
	border-radius: 20px;
	padding: 40px 30px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(1, 178, 197, .12);
}

.wtct-panel {
	display: none;
}

.wtct-panel.active {
	display: block;
}

.wtct-panel h2 {
	margin-top: 0;
	font-size: 30px;
	color: #1b2d2f;
}

/* Sub-pestañas horizontales */
.wtct-subtabs {
	display: flex;
	gap: 30px;
	border-bottom: 1px solid #eee;
	margin: 20px 0;
	flex-wrap: wrap;
}

.wtct-subtab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	padding: 10px 0;
	cursor: pointer;
}

.wtct-subtab.active {
	color: var(--wtct-accent);
	border-bottom-color: var(--wtct-accent);
}

.wtct-subcontent {
	display: none;
}

.wtct-subcontent.active {
	display: block;
}

.wtct-subcontent h3 {
	color: var(--wtct-accent);
	font-size: 20px;
}

.wtct-subcontent p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #335464;
	padding: 20px 0;
	padding-bottom:0;
  


}

.wtct-subcontent img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin-top: 15px;
}

/* Responsive */
@media (max-width: 768px) {
	.wtct-menu {
		width: 100%;
	}
}

/* =========================================================================
 * Modo "patologías" — diseño Figma (glaucoma): menú de técnicas + panel único
 * (encabezado + texto + imagen), sin sub-pestañas. Tokens Dulanto:
 * turquesa #01B2C5 · verde oscuro #052E38 · título #1B2D2F · Montserrat.
 * ===================================================================== */
.wtct--patologias {
	--wtct-accent: #01B2C5;
	--wtct-dark: #052E38;
	--wtct-title: #1B2D2F;
	display: flex;
	gap: 40px;
	align-items: flex-start;
	font-family: "Montserrat", sans-serif;
	flex-wrap: wrap;
}

/* --- Menú izquierdo (card) --- */
.wtct--patologias .wtct-menu {
	flex: 0 0 330px;
	width: 330px;
	border: 2px solid var(--wtct-accent);
	border-radius: 20px;
	background: #fff;
	padding: 8px 30px;
	overflow: visible;
	margin-bottom: 0;
}

.wtct--patologias .wtct-menu-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-bottom: 1px solid var(--wtct-accent);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--wtct-dark);
	padding: 22px 0;
	cursor: pointer;
	transition: color .15s ease;
}

.wtct--patologias .wtct-menu-item:last-child {
	border-bottom: none;
}

.wtct--patologias .wtct-menu-item.active {
	color: var(--wtct-accent);
	background: none;
}

/* Barra vertical de acento a la izquierda del ítem activo (pegada al borde de la card) */
.wtct--patologias .wtct-menu-item.active::before {
	content: "";
	position: absolute;
	left: -30px;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 32px;
	background: var(--wtct-accent);
	border-radius: 0 4px 4px 0;
}

.wtct--patologias .wtct-menu-label {
	flex: 1;
}

/* Chevron ">" (triángulo CSS, apunta a la derecha) */
.wtct--patologias .wtct-menu-chevron {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .9;
}

/* --- Panel derecho (card) --- */
.wtct--patologias .wtct-content {
	flex: 1 1 480px;
	min-width: 300px;
	border: 2px solid var(--wtct-accent);
	border-radius: 20px;
	background: #fff;
	padding: 40px;
}

.wtct--patologias .wtct-panel {
	display: none;
}

.wtct--patologias .wtct-panel.active {
	display: block;
}

.wtct--patologias .wtct-panel-heading {
	margin: 0 0 24px;
	font-family: inherit;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--wtct-title);
}

.wtct--patologias .wtct-panel-body,
.wtct--patologias .wtct-panel-body p {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--wtct-dark);
}

.wtct--patologias .wtct-panel-body p {
	margin: 0 0 16px;
}

.wtct--patologias .wtct-panel-body a {
	color: var(--wtct-accent);
	text-decoration: underline;
}

.wtct--patologias .wtct-panel-body h4 {
	margin: 20px 0 8px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wtct-title);
}

.wtct--patologias .wtct-panel-body ul {
	margin: 0 0 16px;
	padding-left: 22px;
	list-style: disc;
}

.wtct--patologias .wtct-panel-body li {
	font-size: 16px;
	line-height: 24px;
	color: var(--wtct-dark);
	margin-bottom: 8px;
}

.wtct--patologias .wtct-panel-body strong {
	font-weight: 600;
}

/* Sub-pestañas horizontales dentro del panel (¿Qué es? · Causas · Síntomas…) */
.wtct--patologias .wtct-subtabs {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	border-bottom: 1px solid #cdeef2;
	margin: 0 0 24px;
}

.wtct--patologias .wtct-subtab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: var(--wtct-dark);
	padding: 6px 2px;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.wtct--patologias .wtct-subtab.active {
	color: var(--wtct-accent);
	border-bottom-color: var(--wtct-accent);
}

.wtct--patologias .wtct-subcontent {
	display: none;
}

.wtct--patologias .wtct-subcontent.active {
	display: block;
}

/* En el modo con sub-pestañas, el encabezado del panel (nombre de la patología)
 * va un poco más contenido para dar aire a la barra de sub-tabs. */
.wtct--patologias .wtct-subcontent .wtct-panel-body h3,
.wtct--patologias .wtct-subcontent .wtct-panel-body h4 {
	color: var(--wtct-accent);
	font-size: 20px;
	margin: 0 0 12px;
}

.wtct--patologias .wtct-panel-media {
	margin-top: 30px;
}

.wtct--patologias .wtct-panel-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
	object-fit: cover;
}

@media (max-width: 900px) {
	.wtct--patologias {
		gap: 24px;
	}
	.wtct--patologias .wtct-menu {
		flex-basis: 100%;
		width: 100%;
	}
	.wtct--patologias .wtct-menu-item.active::before {
		left: -30px;
	}
	.wtct--patologias .wtct-content {
		padding: 28px 22px;
	}
	.wtct--patologias .wtct-panel-heading {
		font-size: 24px;
	}

	/* #2 — En mobile la imagen del panel se sitúa ARRIBA (antes del encabezado
	 * y el texto). El panel activo pasa a columna flex y la media va primero. */
	.wtct--patologias .wtct-panel.active {
		display: flex;
		flex-direction: column;
	}
	.wtct--patologias .wtct-panel-media {
		order: -1;
		margin: 0 0 20px;
	}
}

/* Foco visible propio (el tema aplica :focus{outline:none} global → sin esto
 * el teclado no muestra foco en los controles del componente — WCAG 2.4.7). */
.wtct-menu-item:focus-visible,
.wtct-subtab:focus-visible,
.wtct-faq-q:focus-visible {
	outline: 2px solid var(--wtct-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =========================================================================
 * Preguntas frecuentes — [wt_faq]
 * ====================================================================== */
.wtct-faq {
	--wtct-accent: #01B2C5;
	font-family: "Montserrat", sans-serif;
	max-width: 100%;
}

.wtct-faq-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	color: #1B2D2F;
	margin: 0 0 24px;
}

.wtct-faq-accent {
	color: var(--wtct-accent);
}

.wtct-faq-item {
	background: #EAF9FB;
	border-radius: 12px;
	margin-bottom: 12px;
	padding: 0 18px;
}

.wtct-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #052E38;
	text-align: left;
	padding: 20px 0;
}

.wtct-faq-q:hover .wtct-faq-qtext {
	color: var(--wtct-accent);
}

.wtct-faq-icon {
	position: relative;
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wtct-accent);
}

.wtct-faq-icon::before,
.wtct-faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #fff;
	transform: translate(-50%, -50%);
}

.wtct-faq-icon::before {
	width: 12px;
	height: 2px;
}

.wtct-faq-icon::after {
	width: 2px;
	height: 12px;
	transition: transform .2s ease, opacity .2s ease;
}

.wtct-faq-item.open .wtct-faq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
	opacity: 0;
}

.wtct-faq-a {
	padding: 0 0 22px;
	color: #052E38;
	font-size: 16px;
	line-height: 1.6;
}

.wtct-faq-a[hidden] {
	display: none;
}

.wtct-faq-a p {
	margin: 0 0 12px;
}

.wtct-faq-a p:last-child {
	margin-bottom: 0;
}

.wtct-faq-a a {
	color: var(--wtct-accent);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.wtct-faq-title { font-size: 26px; }
	.wtct-faq-q { font-size: 16px; padding: 16px 2px; }
}