/* ==========================================================================
   Categoría: Planes de tratamiento
   Cargado condicionalmente solo en is_tax('product_cat', 'planes-de-tratamiento').
   ========================================================================== */

/* ========== SECCIÓN PLANES ========== */
/*
   Diseño Figma: fondo claro (#F8F7F6), cabecera centrada, dos tarjetas de
   imagen (644×400 px) con overlay oscuro uniforme y texto en la esquina
   inferior izquierda dentro de la imagen.
*/

.vit-cat-planes {
	background: var(--vit-bg, #F8F7F6);
	padding:    64px 0;
}

.vit-cat-planes__inner {
	margin:    0 auto;
	max-width: 1440px;
	padding:   0 64px;
}

/* Cabecera centrada ------------------------------------------------------- */
.vit-cat-planes__header {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	margin-bottom:  48px;
	text-align:     center;
}

.vit-cat-planes__titulo {
	color:       var(--vit-dark, #102E3E);
	font-family: var(--vit-font-heading);
	font-size:   40px;
	font-weight: 400;
	line-height: 1.1;
	margin:      0;
}

.vit-cat-planes__desc {
	color:       var(--vit-slate, #415C6B);
	font-family: var(--vit-font-body);
	font-size:   16px;
	font-weight: 400;
	line-height: 1.2;
	margin:      0 auto;
	max-width:   393px;
}

.vit-cat-planes__desc p {
	margin: 0;
}

/* Grid -------------------------------------------------------------------- */
.vit-cat-planes__grid {
	display: flex;
	gap:     24px;
}

/* Tarjeta — flex column con imagen de fondo, overlay y contenido al fondo -- */
.vit-cat-planes__card {
	align-items:    flex-start;
	border-radius:  8px;
	display:        flex;
	flex:           1 1 0;
	flex-direction: column;
	height:         400px;
	justify-content: flex-end;
	overflow:       hidden;
	padding:        24px;
	position:       relative;
}

/* Imagen de fondo */
.vit-cat-planes__card-bg {
	display:         block;
	height:          100%;
	inset:           0;
	object-fit:      cover;
	object-position: center;
	position:        absolute;
	width:           100%;
	transition:      transform 0.4s ease;
}

.vit-cat-planes__card:hover .vit-cat-planes__card-bg {
	transform: scale(1.04);
}

.vit-cat-planes__card-bg-placeholder {
	background: var(--vit-slate, #415C6B);
	height:     100%;
	inset:      0;
	position:   absolute;
	width:      100%;
}

/* Overlay oscuro uniforme (40% opacidad como en Figma) */
.vit-cat-planes__card-overlay {
	background: rgba(16, 46, 62, 0.40);
	inset:      0;
	position:   absolute;
}

/* Cuerpo — texto sobre el overlay, pegado al fondo izquierdo */
.vit-cat-planes__card-body {
	display:        flex;
	flex-direction: column;
	gap:            16px;
	position:       relative;
	z-index:        1;
}

.vit-cat-planes__card-title {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-heading);
	font-size:   24px;
	font-weight: 400;
	line-height: 1;
	margin:      0;
}

.vit-cat-planes__card-desc {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-body);
	font-size:   16px;
	font-weight: 400;
	line-height: 1.2;
	margin:      0;
	max-width:   393px;
}

.vit-cat-planes__card-link {
	align-items:     center;
	color:           var(--Blanco-pureza, #F8F7F6);
	display:         inline-flex;
	font-family:     var(--vit-font-body);
	font-size:       16px;
	font-weight:     600;
	gap:             8px;
	line-height:     1;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.vit-cat-planes__card-link:hover {
	opacity: 0.75;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 991px) {
	.vit-cat-planes__inner {
		padding: 0 40px;
	}

	.vit-cat-planes__card {
		height: 320px;
	}
}

@media (max-width: 767px) {
	.vit-cat-planes {
		padding: 48px 0;
	}

	.vit-cat-planes__inner {
		padding: 0 20px;
	}

	.vit-cat-planes__titulo {
		font-size: 32px;
	}

	.vit-cat-planes__header {
		margin-bottom: 32px;
	}

	.vit-cat-planes__grid {
		flex-direction: column;
	}

	.vit-cat-planes__card {
		flex: none;
		height: 300px;
		width:  100%;
	}
}


/* ========== PRODUCTOS DESTACADOS ========== */

.vit-cat-planes-destacados {
	background: var(--vit-dark, #102E3E);
	padding:    64px 0;
}

.vit-cat-planes-destacados + .vit-cat-planes-destacados {
	padding-top: 0;
}

.vit-cat-planes-destacados__inner {
	margin:    0 auto;
	max-width: 1440px;
	padding:   0 64px;
}

/* Heading */
.vit-cat-planes-destacados__heading {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-heading);
	font-size:   40px;
	font-weight: 400;
	line-height: 1;
	margin:      0 0 40px;
	text-align:  center;
}

/* Toolbar */
.vit-cat-planes-destacados__toolbar {
	align-items: center;
	display:     flex;
	flex-direction: column;
	gap:         24px;
	margin:      0 0 56px;
}

/* Buscador */
.vit-cat-planes-destacados__search {
	display:   flex;
	gap:       8px;
	max-width: 493px;
	width:     100%;
}

.vit-cat-planes-destacados__search-field {
	align-items:   center;
	background:    #EBEBEB;
	border-radius: 72px;
	display:       flex;
	flex:          1;
	gap:           8px;
	padding:       10px 16px;
}

.vit-cat-planes-destacados__search-input {
	background:  transparent;
	border:      none;
	color:       var(--vit-dark, #102E3E);
	flex:        1;
	font-family: var(--vit-font-body);
	font-size:   14px;
	line-height: 1;
	outline:     none;
}

.vit-cat-planes-destacados__search-input::placeholder {
	color:   var(--vit-slate, #415C6B);
	opacity: 1;
}

.vit-cat-planes-destacados__search-btn {
	background:      var(--vit-teal, #25DBBF);
	border:          none;
	border-radius:   72px;
	color:           var(--vit-dark, #102E3E);
	cursor:          pointer;
	font-family:     var(--vit-font-body);
	font-size:       14px;
	font-weight:     600;
	padding:         10px 20px;
	transition:      background .2s ease;
	white-space:     nowrap;
}

.vit-cat-planes-destacados__search-btn:hover {
	background: var(--vit-mint, #AAE3DB);
}

/* Lista de filtros */
.vit-cat-planes-filters-list {
	align-items:     center;
	display:         flex;
	flex-wrap:       wrap;
	gap:             13px;
	justify-content: center;
}

.vit-cat-planes-destacados__filters-label {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-heading);
	font-size:   24px;
	font-weight: 400;
	line-height: 1;
	margin:      0 0 16px;
	text-align:  center;
	width:       100%;
}

/* Wrapper de cada filtro */
.vit-cat-planes-destacados__filter-wrap {
	display:  inline-block;
	position: relative;
}

/* Base del filtro (select y botón multi) */
.vit-cat-planes-destacados__filter {
	align-items:     center;
	background:      var(--vit-mint, #AAE3DB);
	border:          none;
	border-radius:   4px;
	color:           var(--vit-dark, #102E3E);
	cursor:          pointer;
	display:         inline-flex;
	font-family:     var(--vit-font-body);
	font-size:       14px;
	font-weight:     500;
	gap:             8px;
	line-height:     1;
	padding:         10px 16px;
	transition:      background 0.2s ease;
	white-space:     nowrap;
	field-sizing: content;
}

.vit-cat-planes-destacados__filter:hover {
	background-color: var(--vit-teal, #25DBBF);
}

/* Multi-select button: rotate inline SVG when open */
.vit-cat-planes-destacados__filter svg {
	transition: transform .2s ease;
}

.vit-cat-planes-destacados__filter[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Select nativo estilizado */
select.vit-cat-planes-destacados__filter {
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
	padding-right:       34px;
}

/* Arrow via wrapper ::after for native selects (not multi-select) */
.vit-cat-planes-destacados__filter-wrap:not(.vit-cat-planes-destacados__filter-wrap--multi)::after {
	content:             '';
	background-image:    url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23102E3E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat:   no-repeat;
	background-size:     10px 6px;
	height:              100%;
	pointer-events:      none;
	position:            absolute;
	right:               12px;
	top:                 0;
	transition:          transform .2s ease;
	width:               10px;
}

/* No existe evento JS fiable para "select cerrado sin cambiar valor"
   (p.ej. click sobre el propio select para cerrarlo), así que el giro
   se ata al estado real de apertura del <select>. Navegadores sin
   soporte de :open en <select> caen al fallback con :focus-within. */
@supports selector(:has(select:open)) {
	.vit-cat-planes-destacados__filter-wrap:not(.vit-cat-planes-destacados__filter-wrap--multi):has(select:open)::after {
		transform: rotate(180deg);
	}
}

@supports not selector(:has(select:open)) {
	.vit-cat-planes-destacados__filter-wrap:not(.vit-cat-planes-destacados__filter-wrap--multi):focus-within::after {
		transform: rotate(180deg);
	}
}

/* Dropdown multi-select */
.vit-cat-planes-destacados__filter-dropdown {
	background:     var(--vit-bg, #F8F7F6);
	border:         1px solid #DCDCDC;
	border-radius:  8px;
	box-shadow:     0 8px 24px rgba(16, 46, 62, 0.15);
	flex-direction: column;
	gap:            2px;
	left:           0;
	min-width:      220px;
	padding:        8px;
	position:       absolute;
	top:            calc(100% + 8px);
	z-index:        100;
}

.vit-cat-planes-destacados__filter-dropdown:not([hidden]) {
	display: flex;
}

.vit-cat-planes-destacados__filter-option {
	align-items:   center;
	border-radius: 4px;
	color:         var(--vit-dark, #102E3E);
	cursor:        pointer;
	display:       flex;
	font-family:   var(--vit-font-body);
	font-size:     14px;
	gap:           8px;
	padding:       8px;
	transition:    background 0.15s ease;
}

.vit-cat-planes-destacados__filter-option:hover {
	background: rgba(170, 227, 219, 0.3);
}

.vit-cat-planes-destacados__filter-option input[type="checkbox"] {
	accent-color: var(--vit-teal, #25DBBF);
	cursor:       pointer;
	flex-shrink:  0;
	height:       16px;
	width:        16px;
}

/* Grid de productos */
.vit-cat-planes-destacados__grid {
	align-items:     stretch;
	display:         flex;
	gap:             24px;
	justify-content: center;
}

.vit-cat-planes-destacados__grid.is-loading {
	opacity:        0.4;
	pointer-events: none;
	transition:     opacity 0.2s ease;
}

.vit-cat-planes-destacados__empty {
	color:       var(--vit-mint, #AAE3DB);
	font-family: var(--vit-font-body);
	font-size:   16px;
	text-align:  center;
	width:       100%;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1199px) {
	.vit-cat-planes-destacados__grid {
		flex-wrap: wrap;
	}
}

@media (max-width: 991px) {
	.vit-cat-planes-destacados__inner {
		padding: 0 40px;
	}
}

@media (max-width: 767px) {
	.vit-cat-planes-destacados {
		padding: 48px 0;
	}

	.vit-cat-planes-destacados__inner {
		padding: 0 20px;
	}

	.vit-cat-planes-destacados__heading {
		font-size:     32px;
		margin-bottom: 24px;
	}

	.vit-cat-planes-destacados__grid {
		align-items:     center;
		flex-direction: column;
	}
	.vit-cat-planes-destacados__search {
		flex-direction: column;
	}
	.vit-cat-planes-destacados__search-btn {
		text-align: center;
	}
}


/* ========== BANNER CTA (específico de planes) ========== */
/*
   Diseño Figma: fondo claro con padding 64px. Dentro: un bloque con imagen
   de fondo (1312×459 px) y gradiente 225deg. En la esquina superior izquierda
   del bloque: tarjeta frosted-glass con título, texto y dos botones.
*/

.vit-cat-planes-cta {
	background: var(--vit-bg, #F8F7F6);
	padding:    64px;
}

.vit-cat-planes-cta__inner {
	margin:    0 auto;
	max-width: 1312px;
}

/* Bloque imagen principal ------------------------------------------------- */
.vit-cat-planes-cta__block {
	border-radius: 8px;
	overflow:      hidden;
	position:      relative;
	width:         100%;
	aspect-ratio:  1312 / 459;
	min-height:    320px;
}

/* Imagen de fondo */
.vit-cat-planes-cta__bg-image {
	display:         block;
	height:          100%;
	inset:           0;
	object-fit:      cover;
	object-position: center;
	position:        absolute;
	width:           100%;
}

.vit-cat-planes-cta__bg-placeholder {
	background: var(--vit-dark, #102E3E);
	height:     100%;
	inset:      0;
	position:   absolute;
	width:      100%;
}

/* Gradiente overlay de Figma: 225deg, de transparente a 40% dark */
.vit-cat-planes-cta__overlay {
	background: linear-gradient(
		225deg,
		rgba(16, 46, 62, 0)    0%,
		rgba(16, 46, 62, 0.40) 100%
	);
	inset:          0;
	pointer-events: none;
	position:       absolute;
}

/* Tarjeta frosted-glass — esquina superior izquierda ---------------------- */
.vit-cat-planes-cta__card {
	backdrop-filter:         blur(32px);
	-webkit-backdrop-filter: blur(32px);
	background:              rgba(255, 255, 255, 0.10);
	border-radius:           8px;
	display:                 flex;
	flex-direction:          column;
	gap:                     16px;
	left:                    24px;
	max-width:               566px;
	overflow:                hidden;
	padding:                 24px;
	position:                absolute;
	top:                     24px;
	width:                   calc(100% - 48px);
}

/* Título */
.vit-cat-planes-cta__title {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-heading);
	font-size:   40px;
	font-weight: 400;
	line-height: 1.1;
	margin:      0;
}

/* Texto descriptivo */
.vit-cat-planes-cta__text {
	color:       var(--Blanco-pureza, #F8F7F6);
	font-family: var(--vit-font-body);
	font-size:   16px;
	font-weight: 400;
	line-height: 1.2;
}

.vit-cat-planes-cta__text p {
	margin: 0;
}

.vit-cat-planes-cta__text p + p {
	margin-top: 8px;
}

/* Fila de botones */
.vit-cat-planes-cta__buttons {
	align-items: center;
	display:     flex;
	flex-wrap:   wrap;
	gap:         16px;
}

/* Base de botones */
.vit-cat-planes-cta__btn {
	align-items:     center;
	border-radius:   4px;
	display:         inline-flex;
	font-family:     var(--vit-font-body);
	font-size:       16px;
	font-weight:     600;
	justify-content: center;
	padding:         10px 16px;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.vit-cat-planes-cta__btn:hover {
	opacity: 0.85;
}

/* Botón principal: fondo teal */
.vit-cat-planes-cta__btn--primary {
	background-color: var(--vit-teal, #25DBBF);
	color:            var(--vit-slate, #415C6B);
}

/* Botón secundario: outline blanco */
.vit-cat-planes-cta__btn--secondary {
	background-color: transparent;
	border:           1px solid var(--Blanco-pureza, #F8F7F6);
	color:            var(--Blanco-pureza, #F8F7F6);
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1199px) {
	.vit-cat-planes-cta {
		padding: 40px;
	}
}

@media (max-width: 991px) {
	.vit-cat-planes-cta {
		padding: 32px 24px;
	}

	.vit-cat-planes-cta__block {
		aspect-ratio: 4 / 3;
	}

	.vit-cat-planes-cta__card {
		max-width: calc(100% - 48px);
	}

	.vit-cat-planes-cta__title {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	.vit-cat-planes-cta {
		padding: 24px 20px;
	}

	.vit-cat-planes-cta__block {
		aspect-ratio: unset;
		min-height:   420px;
	}

	.vit-cat-planes-cta__card {
		left:      16px;
		max-width: calc(100% - 32px);
		top:       16px;
	}

	.vit-cat-planes-cta__title {
		font-size: 24px;
	}

	.vit-cat-planes-cta__buttons {
		flex-direction: column;
	}

	.vit-cat-planes-cta__btn {
		width: 100%;
	}
}