/* ==========================================================================
   Card producto — componente reutilizable
   Prefijo: vit-product-card-{versión}

   v1 — Tarjeta vertical: imagen con margen interior, cuerpo con subtítulo,
        título, extracto, precio, highlights, tags y CTA pill.
        Diseñada para grids flex (toma flex: 1 1 0 por defecto).
   ========================================================================== */

/* ── v1 ──────────────────────────────────────────────────────────────────── */

.vit-product-card-v1 {
	background:     var(--vit-bg);
	border:         1px solid #DCDCDC;
	border-radius:  16px;
	display:        flex;
	flex:           1 1 0;
	flex-direction: column;
	gap:            24px;
	max-width:      450px;
	padding:        16px;
}

/* Imagen ------------------------------------------------------------------ */
.vit-product-card-v1__img-wrap {
	aspect-ratio:  9 / 7;
	border-radius: 8px;
	overflow:      hidden;
	width:         100%;
}

.vit-product-card-v1__img {
	aspect-ratio: 450 / 350;
	display:    block;
	height:     100%;
	object-fit: cover;
	width:      100%;
}

.vit-product-card-v1__img--placeholder {
	background: #D9D9D9;
	height:     100%;
	width:      100%;
}

/* Cuerpo ------------------------------------------------------------------ */
.vit-product-card-v1__body {
	display:        flex;
	flex:           1;
	flex-direction: column;
	gap:            16px;
}

/* Encabezado: subtítulo (tipo de prueba) + título */
.vit-product-card-v1__header {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.vit-product-card-v1__subtitle {
	color:          var(--vit-teal);
	font-family:    var(--vit-font-body);
	font-size:      14px;
	font-style:     normal;
	font-weight:    700;
	letter-spacing: -0.14px;
	line-height:    1.2;
}

.vit-product-card-v1__title {
	color:          var(--vit-dark);
	font-family:    var(--vit-font-heading);
	font-size:      24px;
	font-style:     normal;
	font-weight:    400;
	letter-spacing: -0.48px;
	line-height:    1;
	margin:         0;
}

/* Extracto --------------------------------------------------------------- */
.vit-product-card-v1__desc {
	color:          var(--vit-slate);
	font-family:    var(--vit-font-body);
	font-size:      16px;
	font-style:     normal;
	font-weight:    400;
	letter-spacing: -0.14px;
	line-height:    1.2;
	margin:         0;
}

/* Fila precio + rating ---------------------------------------------------- */
.vit-product-card-v1__meta {
	align-items: center;
	display:     flex;
	flex-wrap:   wrap;
	gap:         18px;
}

/* Precio ------------------------------------------------------------------ */
.vit-product-card-v1__price {
	color:          var(--vit-teal);
	font-family:    var(--vit-font-body);
	font-size:      20px;
	font-style:     normal;
	font-weight:    600;
	letter-spacing: -0.2px;
	line-height:    20px;
	margin:         0;
}

/* Rating ------------------------------------------------------------------ */
.vit-product-card-v1__rating {
	align-items:   center;
	background:    rgba(170, 227, 219, 0.6);
	border-radius: 4px;
	display:       inline-flex;
	padding:       3px 8px 4px 8px;
}

.vit-product-card-v1__rating .star-rating {
	font-size:      14px;
	line-height:    1;
	overflow:       hidden;
	position:       relative;
	vertical-align: middle;
}

.vit-product-card-v1__rating .star-rating::before {
	color: rgba(37, 219, 191, 0.35);
}

.vit-product-card-v1__rating .star-rating span::before {
	color: var(--vit-teal, #25DBBF);
}

/* Highlights (Muestra / Resultados) --------------------------------------- */
.vit-product-card-v1__highlights {
	display:   flex;
	flex-wrap: wrap;
	gap:       24px;
}

.vit-product-card-v1__highlight {
	color:          var(--vit-teal);
	font-family:    var(--vit-font-body);
	font-size:      20px;
	font-style:     normal;
	font-weight:    600;
	letter-spacing: -0.2px;
	line-height:    20px;
}

/* Tags (características) -------------------------------------------------- */
.vit-product-card-v1__tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.vit-product-card-v1__tag {
	align-items:    center;
	background:     rgba(65, 92, 107, .1);
	border-radius:  4px;
	color:          var(--vit-slate);
	display:        flex;
	font-family:    var(--vit-font-body);
	font-size:      14px;
	font-style:     normal;
	font-weight:    400;
	letter-spacing: -0.14px;
	line-height:    1;
	padding:        8px;
}

/* CTA --------------------------------------------------------------------- */
.vit-product-card-v1__cta {
	align-items:     center;
	align-self:      stretch;
	background:      var(--vit-teal);
	border-radius:   72px;
	color:           var(--vit-dark);
	display:         flex;
	font-family:     var(--vit-font-body);
	font-size:       16px;
	font-style:      normal;
	font-weight:     600;
	gap:             8px;
	justify-content: center;
	letter-spacing:  -0.32px;
	line-height:     normal;
	margin-top:      auto;
	padding:         10px 16px;
	text-decoration: none;
	transition:      background .2s ease;
}

.vit-product-card-v1__cta:hover {
	background: var(--vit-mint);
}


/* ── v2 ──────────────────────────────────────────────────────────────────── */
/* Tarjeta vertical para planes de tratamiento: imagen + cuerpo + dos CTAs.  */

.vit-product-card-v2 {
	background:     var(--vit-bg, #F8F7F6);
	border:         1px solid #DCDCDC;
	border-radius:  16px;
	display:        flex;
	flex:           1 1 0;
	flex-direction: column;
	gap:            24px;
	max-width:      482px;
	padding:        16px;
}

/* Imagen ------------------------------------------------------------------ */
.vit-product-card-v2__img-wrap {
	border-radius: 8px;
	height:        350px;
	overflow:      hidden;
	width:         100%;
}

.vit-product-card-v2__img {
	aspect-ratio: 450 / 350;
	display:    block;
	height:     100%;
	object-fit: cover;
	width:      100%;
}

.vit-product-card-v2__img--placeholder {
	background: #D9D9D9;
	height:     100%;
	width:      100%;
}

/* Cuerpo ------------------------------------------------------------------ */
.vit-product-card-v2__body {
	display:        flex;
	flex:           1;
	flex-direction: column;
	gap:            16px;
}

/* Encabezado: etiqueta de categoría (teal) + título */
.vit-product-card-v2__header {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}

.vit-product-card-v2__subtitle {
	color:          var(--vit-teal, #25DBBF);
	font-family:    var(--vit-font-body);
	font-size:      14px;
	font-weight:    700;
	letter-spacing: -0.14px;
	line-height:    1.2;
}

.vit-product-card-v2__title {
	color:          var(--vit-dark, #102E3E);
	font-family:    var(--vit-font-heading);
	font-size:      24px;
	font-weight:    400;
	letter-spacing: -0.48px;
	line-height:    1;
	margin:         0;
}

/* Extracto ---------------------------------------------------------------- */
.vit-product-card-v2__desc {
	color:       var(--vit-slate, #415C6B);
	font-family: var(--vit-font-body);
	font-size:   16px;
	font-weight: 400;
	line-height: 1.2;
	margin:      0;
}

/* Profesional ------------------------------------------------------------- */
.vit-product-card-v2__profesional {
	color:       var(--vit-dark, #102E3E);
	font-family: var(--vit-font-body);
	font-size:   16px;
	font-weight: 500;
	line-height: 1.25;
	margin:      0;
}

/* Fila precio + rating ---------------------------------------------------- */
.vit-product-card-v2__meta {
	align-items: center;
	display:     flex;
	flex-wrap:   wrap;
	gap:         18px;
}

.vit-product-card-v2__price {
	color:          var(--vit-teal, #25DBBF);
	font-family:    var(--vit-font-body);
	font-size:      20px;
	font-weight:    600;
	letter-spacing: -0.2px;
	line-height:    1;
}

.vit-product-card-v2__price .woocommerce-Price-currencySymbol {
	font-size: inherit;
}

.vit-product-card-v2__rating {
	align-items:   center;
	background:    rgba(170, 227, 219, 0.6);
	border-radius: 4px;
	display:       inline-flex;
	padding: 3px 8px 4px 8px;
}

.vit-product-card-v2__rating .star-rating {
	font-size:      14px;
	line-height:    1;
	overflow:       hidden;
	position:       relative;
	vertical-align: middle;
}

.vit-product-card-v2__rating .star-rating::before {
	color: rgba(37, 219, 191, 0.35);
}

.vit-product-card-v2__rating .star-rating span::before {
	color: var(--vit-teal, #25DBBF);
}

/* Highlights (duración, modalidad) ---------------------------------------- */
.vit-product-card-v2__highlights {
	display:   flex;
	flex-wrap: wrap;
	gap:       24px;
}

.vit-product-card-v2__highlight {
	color:          var(--vit-teal, #25DBBF);
	font-family:    var(--vit-font-body);
	font-size:      20px;
	font-weight:    600;
	letter-spacing: -0.2px;
	line-height:    1;
}

/* Tags (indicaciones) ----------------------------------------------------- */
.vit-product-card-v2__tags {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
}

.vit-product-card-v2__tag {
	align-items:  center;
	background:   rgba(65, 92, 107, 0.1);
	border-radius: 4px;
	color:        var(--vit-slate, #415C6B);
	display:      flex;
	font-family:  var(--vit-font-body);
	font-size:    14px;
	font-weight:  400;
	line-height:  1;
	padding:      8px;
}

/* CTAs -------------------------------------------------------------------- */
.vit-product-card-v2__ctas {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-top:     auto;
}

.vit-product-card-v2__cta {
	align-items:     center;
	border-radius:   72px;
	display:         flex;
	font-family:     var(--vit-font-body);
	font-size:       16px;
	font-weight:     600;
	justify-content: center;
	letter-spacing:  -0.32px;
	padding:         10px 16px;
	text-decoration: none;
	transition:      opacity 0.2s ease;
}

.vit-product-card-v2__cta:hover {
	opacity: 0.85;
}

.vit-product-card-v2__cta--outline {
	border:     2px solid var(--vit-dark, #102E3E);
	color:      var(--vit-dark, #102E3E);
}

.vit-product-card-v2__cta--primary {
	background: var(--vit-teal, #25DBBF);
	color:      var(--vit-dark, #102E3E);
}
