/* Matmap Proyectos · frontend
   Antes iba incrustado en el HTML de cada ficha de producto con
   proyectos. Ahora es un fichero cacheable, minificable y versionado
   por filemtime. Se encola desde enqueue_frontend(). */

/* Los tokens propios pasan a derivar de Matmap Tokens, para que la tarjeta de
   proyecto sea la misma pieza que la de producto y no un componente de otra
   web: mismo blanco, mismo borde, mismo radio, misma sombra, misma curva. */
.mipro-wrap {
	--mp-p:      var(--mm-brand,     #3A3971);
	--mp-p-dark: var(--mm-brand-ink, #2b2a57);
	--mp-p-dim:  var(--mm-brand-tint,rgba(58,57,114,.08));
	--mp-s:      var(--mm-accent,    #e69130);
	--mp-s-dim:  rgba(230,145,48,.12);
	--mp-txt:    var(--mm-ink,       #1e1b3a);
	--mp-txt-2:  var(--mm-muted,     #6b6b8a);
	--mp-border: var(--mm-line,      #e2e1ef);
	--mp-bg:     var(--mm-paper,     #ffffff);
	--mp-bg-2:   var(--mm-wash,      #f6f6fb);
	--mp-star:   var(--mm-accent,    #e69130);
	--mp-r:      var(--mm-r-lg,      16px);
	font-family: var(--mm-font, inherit);
	margin: var(--mm-flow, 48px) 0;
}

/* Cabecera de bloque alineada a la izquierda, como el resto de secciones.
   Iba centrada y por eso se leía como una pieza aparte. */
.mipro-cabecera {
	text-align: left;
	margin-bottom: 20px;
}
.mipro-titulo {
	font-size: var(--mm-fs-h2, clamp(20px, 2vw, 26px));
	font-weight: var(--mm-fw-bold, 700);
	color: var(--mp-p);
	margin: 0 0 10px;
	letter-spacing: var(--mm-ls-title, -0.012em);
	line-height: var(--mm-lh-tight, 1.2);
}

/* Misma píldora que los badges de las tarjetas de producto. */
.mipro-badge-total {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--mp-p-dim);
	color: var(--mp-p);
	font-size: var(--mm-fs-eyebrow, 11.5px);
	font-weight: var(--mm-fw-medium, 600);
	padding: 4px 10px;
	border-radius: var(--mm-r-full, 999px);
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.25;
}
.mipro-badge-total svg { width: 12px; height: 12px; }

/* ── Tarjeta ──
   Mismo tratamiento de superficie que .mm-card: en reposo una sombra mínima,
   y el realce solo al pasar por encima. Antes no tenía sombra en reposo y
   flotaba sin apoyo sobre el fondo. */
.mipro-tarjeta {
	background: var(--mp-bg);
	border: 1px solid var(--mp-border);
	border-radius: var(--mp-r);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--mm-sh-1, 0 1px 2px rgba(26,26,46,.06));
	transition: box-shadow var(--mm-ease, .18s), transform var(--mm-ease, .18s),
	            border-color var(--mm-ease, .18s);
}
@media (hover:hover){
	.mipro-tarjeta:hover {
		box-shadow: var(--mm-sh-2, 0 4px 16px rgba(26,26,46,.08));
		border-color: var(--mm-line-strong, #CFCFDC);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion:reduce){
	.mipro-tarjeta { transition: none; }
	.mipro-tarjeta:hover { transform: none; }
}

/* ── Galería deslizable ──
   Mismo patrón que la tarjeta de producto del catálogo: proporción fija,
   pista con scroll-snap (el gesto de deslizar es nativo), flechas que
   aparecen al pasar por encima y puntos abajo. Antes era un mosaico en
   rejilla de hasta 4 fotos, que daba a cada tarjeta una altura distinta. */
.mipro-media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--mp-bg-2);
	flex-shrink: 0;
}
/* El carrusel se posiciona absoluto dentro de .mipro-media en vez de encadenar
   height:100%. Así llena la caja siempre, tanto cuando la altura la marca el
   aspect-ratio (tarjeta en columna) como cuando la marca el hermano de al lado
   (tarjeta única en horizontal), donde el porcentaje no resolvía y la foto se
   quedaba a su alto natural. */
.mipro-carousel { position: absolute; inset: 0; }
.mipro-carousel__track { width: 100%; height: 100%; }

.mipro-carousel__track {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.mipro-carousel__track::-webkit-scrollbar { display: none; }

.mipro-carousel__slide {
	flex: 0 0 100%;
	scroll-snap-align: center;
	height: 100%;
}
/* Doble clase a propósito.
   WooCommerce trae `.woocommerce img { height:auto }`, que tiene la MISMA
   especificidad que `.mipro-carousel__slide img` y carga después, así que
   ganaba: la foto se quedaba a su alto natural (219 px en una caja de 318) y
   dejaba una franja vacía. Con dos clases pasa a (0,2,1) y gana esta. */
.mipro-carousel .mipro-carousel__slide a {
	display: block;
	width: 100%; height: 100%;
}
.mipro-carousel .mipro-carousel__slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.mipro-carousel .mipro-carousel__slide a:hover img { transform: scale(1.04); }

/* Flechas */
.mipro-carousel__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border: 1px solid var(--mp-border);
	border-radius: var(--mm-r-full, 999px);
	background: rgba(255,255,255,.92);
	backdrop-filter: saturate(160%) blur(6px);
	color: var(--mp-p);
	font-size: 20px; line-height: 1;
	cursor: pointer; z-index: 3;
	box-shadow: var(--mm-sh-1, 0 1px 2px rgba(26,26,46,.06));
	transition: opacity var(--mm-ease, .18s), background var(--mm-ease, .18s);
}
.mipro-carousel__nav.is-prev { left: 8px; }
.mipro-carousel__nav.is-next { right: 8px; }
.mipro-carousel__nav:hover { background: #fff; }
.mipro-carousel__nav:focus-visible { outline: 3px solid rgba(58,57,113,.38); outline-offset: 2px; }
@media (hover: hover) {
	.mipro-carousel__nav { opacity: 0; pointer-events: none; }
	.mipro-media:hover .mipro-carousel__nav,
	.mipro-media:focus-within .mipro-carousel__nav { opacity: 1; pointer-events: auto; }
}

/* Puntos */
.mipro-dots {
	position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 4px;
	padding: 4px 7px;
	border-radius: var(--mm-r-full, 999px);
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(5px);
	box-shadow: var(--mm-sh-1, 0 1px 2px rgba(26,26,46,.06));
	z-index: 3;
}
.mipro-dot {
	appearance: none; border: 0; padding: 0; cursor: pointer;
	width: 6px; height: 6px;
	border-radius: var(--mm-r-full, 999px);
	background: rgba(26,26,46,.25);
	transition: width var(--mm-ease, .16s), background var(--mm-ease, .16s);
}
.mipro-dot.is-active { width: 16px; background: var(--mp-p); }
.mipro-dot:focus-visible { outline: 2px solid var(--mp-p); outline-offset: 2px; }

/* Contador de fotos */
.mipro-count {
	position: absolute; top: 10px; right: 10px; z-index: 3;
	padding: 3px 9px;
	border-radius: var(--mm-r-full, 999px);
	background: rgba(26,26,46,.62);
	color: #fff;
	font-size: var(--mm-fs-eyebrow, 11.5px);
	font-weight: var(--mm-fw-medium, 600);
	line-height: 1.3;
	letter-spacing: .02em;
}

@media (prefers-reduced-motion: reduce) {
	.mipro-carousel__track { scroll-behavior: auto; }
	.mipro-carousel__slide img { transition: none; }
	.mipro-carousel__slide a:hover img { transform: none; }
}

/* ── Cuerpo ── */
.mipro-cuerpo {
	padding: 16px 15px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

/* Estrellas */
.mipro-stars { display: flex; gap: 2px; }
.mipro-stars svg { width: 16px; height: 16px; flex-shrink: 0; }
.mp-star-on  { fill: var(--mp-star); }
.mp-star-off { fill: #dde; }

/* Cliente */
.mipro-cliente-row {
	display: flex; align-items: center; gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--mp-border);
}
.mipro-avatar {
	width: 38px; height: 38px;
	border-radius: 50%;
	background: var(--mp-p);
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.mipro-cliente-datos { min-width: 0; }
.mipro-nombre {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--mp-txt);
	margin: 0 0 2px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mipro-meta-line {
	display: flex; flex-wrap: wrap; gap: 7px;
	font-size: 0.72rem; color: var(--mp-txt-2);
}
.mipro-meta-line span { display: flex; align-items: center; gap: 3px; }
.mipro-meta-line svg  { width: 10px; height: 10px; opacity: .65; }

/* Badge producto */
.mipro-prod-badge {
	margin: 0;
	font-size: var(--mm-fs-eyebrow, 11.5px);
	font-weight: var(--mm-fw-medium, 600);
	letter-spacing: var(--mm-ls-eyebrow, .07em);
	text-transform: uppercase;
	color: var(--mp-txt-2);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mipro-prod-badge svg { width: 10px; height: 10px; }

/* Testimonio */
.mipro-testimonio {
	margin: 0;
	padding: 10px 13px 10px 14px;
	border-left: 3px solid var(--mp-s);
	background: var(--mp-bg-2);
	border-radius: 0 8px 8px 0;
	font-size: 0.855rem; line-height: 1.65;
	color: #38355a; font-style: italic;
	position: relative;
}
.mipro-testimonio p { margin: 0; }
.mipro-testimonio::before {
	content: '\201C';
	position: absolute; top: -4px; left: 7px;
	font-size: 2rem; color: var(--mp-s);
	opacity: .22; font-style: normal; line-height: 1;
}

/* ── Contenedor único ── */
.mipro-unico { max-width: 640px; margin: 0 auto; }

/* ── Slider ── */
.mipro-slider-outer { position: relative; padding-bottom: 40px; }
.mipro-swiper { overflow: hidden; }
.mipro-swiper .swiper-slide { height: auto; box-sizing: border-box; }
.mipro-slider-outer .swiper-pagination {
	bottom: 0; position: absolute; width: 100%; text-align: center;
}
.mipro-slider-outer .swiper-pagination-bullet {
	width: 7px; height: 7px;
	background: var(--mp-border); opacity: 1; margin: 0 3px;
	transition: width .25s, background .25s;
}
.mipro-slider-outer .swiper-pagination-bullet-active {
	background: var(--mp-p); width: 22px; border-radius: 4px;
}
.mipro-nav { display: none; }

/* ── Tablet 640px ── */
@media (min-width: 640px) {
	.mipro-cuerpo { padding: 18px 16px 20px; gap: 11px; }
}

/* ── Desktop 768px ── */
@media (min-width: 768px) {

	/* Tarjeta única horizontal: foto a la izquierda, testimonio a la derecha.
	   ------------------------------------------------------------------
	   Esta regla venía del mosaico antiguo, que traía sus propios anchos.
	   Con el carrusel el contenedor no tenía límite, así que en una fila
	   flex la imagen imponía su ancho natural (1200 px dentro de una tarjeta
	   de 640) y aplastaba el cuerpo hasta hacerlo desaparecer.

	   flex-basis fija el ancho de la foto y min-width:0 permite que el
	   cuerpo se encoja: sin eso, un hijo flex nunca baja de su contenido. */
	.mipro-unico .mipro-tarjeta {
		flex-direction: row;
		max-height: none;
		min-height: 320px;
	}
	.mipro-unico .mipro-media {
		flex: 0 0 46%;
		max-width: 46%;
		min-width: 0;
		aspect-ratio: auto;      /* la altura la marca el cuerpo */
		align-self: stretch;
	}
	.mipro-unico .mipro-cuerpo {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
	}
	/* Con un solo proyecto el testimonio es el protagonista. */
	.mipro-unico .mipro-testimonio { font-size: 1.02rem; line-height: 1.6; }

	/* Slider cards: altura galería fija */

	/* Botones nav */
	.mipro-nav {
		display: flex; align-items: center; justify-content: center;
		position: absolute;
		top: 50%; transform: translateY(calc(-50% - 20px));
		z-index: 10;
		width: 36px; height: 36px; border-radius: 50%;
		background: var(--mp-bg);
		border: 1.5px solid var(--mp-border);
		box-shadow: 0 2px 8px rgba(0,0,0,.10);
		cursor: pointer; color: var(--mp-p-dark);
		transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
		padding: 0;
	}
	.mipro-nav:hover {
		background: var(--mp-p); color: #fff;
		border-color: var(--mp-p);
		box-shadow: 0 4px 14px rgba(58,57,114,.3);
	}
	.mipro-nav.swiper-button-disabled { opacity: .2; pointer-events: none; }
	.mipro-nav svg { width: 16px; height: 16px; }
	.mipro-prev { left: -18px; }
	.mipro-next { right: -18px; }

	.mipro-cuerpo { padding: 20px 18px 22px; gap: 12px; }
}

/* ── Desktop 1024px ── */
@media (min-width: 1024px) {
	/* Slider con 2 cols: galería un poco más pequeña para que quepan bien */
	.mipro-cuerpo { padding: 20px 18px 22px; gap: 12px; }
}