/* Experiencias — extraído de src/lib/components/Experiencias.svelte.
   Scopeado con anidamiento nativo bajo su raíz para evitar colisiones
   de nombres de clase al pasar de CSS scoped de Svelte a CSS global. */

.experiencias {
	background: var(--hueso);
	padding: var(--section-y) var(--pad);

	.head {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: var(--space-9);
		flex-wrap: wrap;
		gap: var(--space-5);
	}

	.head .eyebrow {
		margin-bottom: var(--space-4);
	}

	.title {
		font-family: var(--serif);
		font-size: var(--fs-h2);
		font-weight: 400;
		line-height: 0.96;
	}

	.intro {
		max-width: 38ch;
		margin: 0;
		color: var(--text-muted);
		font-size: var(--fs-lg);
		line-height: 1.55;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.sc-card {
		color: var(--text);
		display: flex;
		flex-direction: column;
		background: var(--hueso-2);
		border-radius: var(--radius);
		overflow: hidden;
		border: 1px solid var(--line);
	}

	.frame {
		display: block;
		position: relative;
		overflow: hidden;
		aspect-ratio: 4 / 5;
	}

	.frame .exp-img {
		transition: transform 0.7s var(--ease);
	}

	.sc-card:hover .frame .exp-img {
		transform: scale(1.05);
	}

	.idx {
		position: absolute;
		top: var(--space-4);
		left: var(--space-4);
		font-family: var(--sans);
		font-size: var(--fs-label);
		font-weight: 700;
		letter-spacing: var(--track-caps-md);
		color: var(--accent-ink);
		background: var(--accent-deep);
		width: 30px;
		height: 30px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tag {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		color: var(--bg);
		background: var(--fg);
		padding: 6px 12px;
		border-radius: 100px;
	}

	.body {
		padding: var(--space-6);
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.who {
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-sm);
		text-transform: uppercase;
		color: var(--text-muted);
		margin-bottom: var(--space-3);
	}

	h3 {
		font-family: var(--serif);
		font-size: var(--fs-h3);
		font-weight: 400;
		margin: 0 0 var(--space-3);
		line-height: 1.02;
	}

	.body p {
		margin: 0 0 var(--space-6);
		color: var(--text-muted);
		font-size: var(--fs-sm);
		line-height: 1.55;
		flex: 1;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		border-top: 1px solid var(--line);
		padding-top: var(--space-5);
	}

	/* En la tarjeta no caben precio y botón en la misma línea: un "desde
	   $1.200.000 / pareja" junto a "Ver experiencia →" se parte en varios
	   renglones y descuadra las tarjetas entre sí. Apilados, el pie mide
	   siempre lo mismo y los botones quedan a la misma altura. */
	.sc-card .foot,
	.mini .foot {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-4-5);
	}

	.sc-card .price,
	.mini .price {
		white-space: nowrap;
	}

	.pricing {
		display: flex;
		align-items: baseline;
		gap: 6px;
	}

	.price {
		font-weight: 700;
		font-size: var(--fs-lg);
	}

	.per {
		font-size: var(--fs-label);
		color: var(--text-muted);
	}

	.foot .btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		cursor: pointer;
		font-family: var(--sans);
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		padding: var(--btn-pad-sm);
		border-radius: 100px;
		border: 1.5px solid var(--line-strong);
		background: transparent;
		color: var(--tinta);
		white-space: nowrap;
		transition:
			transform 0.3s var(--ease),
			background 0.3s,
			color 0.3s,
			border-color 0.3s;
	}

	.foot .btn span {
		font-size: var(--fs-sm);
		line-height: 1;
	}

	.foot .btn:hover {
		transform: translateY(-2px);
		background: var(--accent-deep);
		color: var(--accent-ink);
		border-color: var(--accent-deep);
	}

	/* --- Express: mismo material que las principales, un peldaño abajo. Sin foto
	   y en dos columnas para que no compitan con la grilla de arriba. --- */
	.express {
		margin-top: var(--space-9);
		padding-top: var(--space-8);
		border-top: 1px solid var(--line);
	}

	.express-head {
		max-width: 52ch;
		margin-bottom: var(--space-7);
	}

	.express-head .eyebrow {
		margin-bottom: var(--space-4);
	}

	.express-title {
		font-family: var(--serif);
		font-style: italic;
		font-size: var(--fs-h3);
		font-weight: 400;
		line-height: 1;
		margin: 0 0 var(--space-3);
	}

	.express-intro {
		margin: 0;
		color: var(--text-muted);
		font-size: var(--fs-body);
		line-height: 1.55;
	}

	.express-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	.mini {
		display: flex;
		flex-direction: column;
		background: var(--hueso-2);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: var(--space-6);
	}

	.mini-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		margin-bottom: var(--space-5);
	}

	/* El índice de la express no va sobre una foto, así que sale del absoluto. */
	.idx--flat {
		position: static;
		width: 26px;
		height: 26px;
		font-size: var(--fs-micro);
	}

	.mini-tag {
		font-family: var(--sans);
		font-size: var(--fs-micro);
		font-weight: 600;
		letter-spacing: var(--track-caps-md);
		text-transform: uppercase;
		color: var(--text-muted);
		border: 1px solid var(--line-strong);
		padding: 5px 11px;
		border-radius: 100px;
	}

	.mini-name {
		color: inherit;
		text-decoration: none;
		display: block;
	}

	.mini h3 {
		font-size: var(--fs-h4);
	}

	.mini .who {
		margin-bottom: var(--space-3);
	}

	.mini p {
		margin: 0 0 var(--space-6);
		color: var(--text-muted);
		font-size: var(--fs-sm);
		line-height: 1.55;
		flex: 1;
	}

	@media (max-width: 900px) {
		.grid,
		.express-grid {
			grid-template-columns: 1fr;
			max-width: 460px;
			margin: 0 auto;
		}
		.head {
			margin-bottom: var(--space-7);
		}
		.express {
			margin-top: var(--space-8);
			padding-top: var(--space-7);
		}
	}
}

/* Las descripciones vienen del panel y son largas; en la tarjeta se recortan.
   El texto completo vive en la página de producto. */
.desc-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}