/* ==========================================================================
   MediActiv - videocar.css - Carrusel de videos verticales (estilo glo910)
   Se carga solo en la home. Depende de tokens de main.css (--mc-*).
   ========================================================================== */

.mc-videocar{padding:clamp(48px,7vw,88px) 0;background:transparent}
.mc-videocar .mc-sechead{max-width:var(--mc-wrap);margin-inline:auto;padding-inline:var(--mc-gut)}
.mc-videocar__text{max-width:640px;margin:.6rem auto 0;color:var(--mc-muted)}

/* ---- wrapper glo910 ---- */
.main-wrapper.isCarousel{position:relative;max-width:var(--mc-wrap);margin-inline:auto;padding-inline:var(--mc-gut)}

/* pista con scroll horizontal + snap */
.mc-vc-track{
	display:flex;gap:clamp(10px,1.4vw,18px);
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;padding:4px 2px 12px;scroll-padding-left:2px;
}
.mc-vc-track::-webkit-scrollbar{display:none}

/* tarjeta vertical 9:16 */
.mc-vc-item{
	position:relative;flex:0 0 auto;
	width:clamp(200px,20vw,244px);aspect-ratio:9/16;
	border-radius:14px;overflow:hidden;background:transparent;
	scroll-snap-align:start;cursor:pointer;
	transition:transform .3s ease;
}
.mc-vc-item:hover{transform:translateY(-3px)}
.mc-vc-video{width:100%;height:100%;object-fit:cover;display:block;background:transparent}

/* boton play overlay */
.mc-vc-play{
	position:absolute;inset:0;margin:0;border:0;padding:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(180deg,rgba(13,26,34,.05) 0%,rgba(13,26,34,.28) 100%);
	color:#fff;transition:opacity .28s ease;
}
.mc-vc-play::before{
	content:"";position:absolute;width:56px;height:56px;border-radius:50%;
	background:rgba(255,255,255,.92);box-shadow:0 4px 16px rgba(0,0,0,.28);
	transition:transform .28s ease,background .28s ease;
}
.mc-vc-play svg{position:relative;z-index:1;color:var(--mc-dark);margin-left:3px}
.mc-vc-play:hover::before{transform:scale(1.08);background:#fff}

/* estado activo: video reproduciendo con sonido -> oculta overlay */
.mc-vc-item.is-playing .mc-vc-play{opacity:0;pointer-events:none}
.mc-vc-item.is-playing{cursor:default}
.mc-vc-item.is-playing:hover{transform:none}
/* cargando el video completo tras pulsar play: spinner sobre el poster */
.mc-vc-item.is-loading::after{
	content:"";position:absolute;top:50%;left:50%;z-index:2;
	width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
	border:3px solid rgba(255,255,255,.35);border-top-color:#fff;
	animation:mc-vc-spin .8s linear infinite;pointer-events:none;
}
@keyframes mc-vc-spin{to{transform:rotate(360deg)}}

/* mientras otro reproduce, los demas se atenuan ligeramente */
.main-wrapper.has-active .mc-vc-item:not(.is-playing){opacity:.55;transition:opacity .3s ease}

/* flechas navegacion */
.mc-vc-nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	background:#fff;color:var(--mc-dark);
	box-shadow:0 6px 20px rgba(23,44,58,.22);
	transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.mc-vc-nav:hover{background:var(--mc-dark);color:#fff}
.mc-vc-nav--prev{left:calc(var(--mc-gut) - 22px)}
.mc-vc-nav--next{right:calc(var(--mc-gut) - 22px)}
.mc-vc-nav[hidden]{display:none}

@media (max-width:900px){
	.main-wrapper.isDesktop .mc-vc-nav{display:none}
	.mc-vc-item{width:clamp(158px,44vw,190px)}
}
/* ---- Rejilla alineada con "Tu rutina facial paso a paso" (.mc-rituals__grid):
   mismo ancho de seccion (--mc-wrap + --mc-gut), mismo hueco (1rem) y mismo
   ancho de tarjeta: 5 por pantalla en escritorio, 3 en tablet. ---- */
.mc-vc-track{gap:1rem;padding-inline:0;scroll-padding-left:0}
.mc-vc-item{width:calc((100% - 4rem) / 5)}
@media (max-width:1024px){
	.mc-vc-item{width:calc((100% - 2rem) / 3)}
}
@media (max-width:560px){
	/* movil: 2 y un asomo de la siguiente, para que se vea que desliza */
	.mc-vc-item{width:clamp(150px,42vw,190px)}
}

@media (prefers-reduced-motion:reduce){
	.mc-vc-item,.mc-vc-play::before,.mc-vc-nav{transition:none}
}