/**
 * Eventos — Terrazas
 * Figma (página "Desktop diseño 6" > EVENTOS > Frame 89 > "Terrazas FINAL"; frames de 1460 en x = 3,
 * aquí todo va centrado en 1440). Misma base que salas-de-juntas/capacidades.
 *   Banda "Info capacidades" --color-olive 1460 × 463 (medida al 49%, 0.7336):
 *     eyebrow "TERRAZAS" Heading/H1.2 50 "Blanco Colabora 2" (#FFF) uppercase espaciado (mayúsculas en y = 92.7) ·
 *     "Encuentra el espacio ideal para tu evento." Heading/H3 40 light 70% (y = 171.8) ·
 *     texto Body/L light 70% en 2 líneas (y = 244 / 266) · "Line 21" en y ≈ 327 ·
 *     tabs CDMX / Guadalajara / Cancún iguales a salas de juntas (arriba en y = 369.4, 43.6 de alto).
 *   Cuerpo --color-light, contenido de 1262 (padding 99.5 arriba / 136 abajo), filas cada 216:
 *     tarjeta de información 424 de ancho, mín. 437 de alto (fondo blanco, borde navy 0.7, radio 15):
 *       nombre Heading/H4 32 terracota (mayúsculas a 52.5 del borde; si ocupa 2 líneas crece hacia
 *       arriba y abajo por igual) · por bloque: reloj 21 navy (+ nombre de la terraza Body/M terracota)
 *       y líneas Body/L navy cada 37.3 · divisor 0.7 navy 50% entre terrazas · nota Body/M navy 50% (318).
 *     Sede con 2 terrazas: tarjetas de 293 con 100 entre ellas, alineadas a la derecha:
 *       foto 293 × 300 con arco arriba-derecha 124 × 132 (ajustado a los píxeles del Figma) · nombre
 *       Apercu 24.34 terracota · sede 17.26 Light navy · "Hasta N" 17.26 navy con ícono users 22 ·
 *       "*Dependiendo de montaje" 9 navy 50% · desplegable "Ver mobiliario disponible" / "Ocultar
 *       mobiliario" Medium 12 navy con chevron y línea navy 50% 0.6 · mobiliario en 2 columnas (ícono 32,
 *       cantidad 12 navy, texto 9 navy) · botón "Reservar →" 240 × 26 (texto 9.96, borde navy 0.44).
 *     Sede con 1 terraza: foto 670 × 303 (arco 118 × 126, el de la exportación) y debajo 3 columnas
 *       (texto en x = 0, mobiliario en x = 318, desplegable y botón de 166 en x = 504).
 *     Galería: scroll horizontal con scroll-snap (dedo, trackpad, arrastre con mouse, puntos y cambio
 *     automático); puntos de 6.5 cada 14 (blancos, el activo al 90%) centrados a 14.5 del borde inferior
 *     (tarjeta angosta) o a la derecha a 18 / 26 (tarjeta ancha).
 *   Distancias verticales de las tarjetas medidas en la captura al 97% (1.455) y en el prototipo (1.333).
 */

.eventos-terrazas {
	--ter-arch-small-x: 124px;
	--ter-arch-small-y: 132px;
	--ter-arch-wide-x: 118px;
	--ter-arch-wide-y: 126px;
	box-sizing: border-box;
	width: 100%;
	background-color: var(--color-light);
	color: var(--color-navy);
}

/* ---------- Banda ---------- */
.eventos-terrazas__band {
	padding: 86.8px 0 50px;
	background-color: var(--color-olive);
	text-align: center;
}

.eventos-terrazas__head {
	padding: 0 24px 42px;
	border-bottom: 1px solid color-mix(in srgb, var(--color-white) 7%, var(--color-olive));
}

.eventos-terrazas .eventos-terrazas__eyebrow {
	margin: 0;
	color: var(--color-white);
	line-height: 50px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-indent: 0.1em; /* compensa el espacio final del tracking: queda centrado */
}

.eventos-terrazas .eventos-terrazas__title {
	margin: 25.2px 0 0;
	color: var(--color-light-70);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
}

.eventos-terrazas__text {
	margin: 27.6px 0 0;
	color: var(--color-light-70);
}

/* Tabs */
.eventos-terrazas__tabs {
	display: flex;
	justify-content: center;
	gap: 118px;
	margin-top: 41.2px;
	padding: 0 24px;
}

.eventos-terrazas .eventos-terrazas__tab {
	position: relative;
	flex: 0 0 auto;
	min-width: 116.5px;
	min-height: 43px;
	margin: 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 46px;
	background: transparent;
	box-shadow: none;
	color: var(--color-warm-gray-50);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	cursor: pointer;
	transition: color .2s ease;
}

/* Borde de la tab activa en un pseudo-elemento: el reset de Hello Elementor
   (button:focus:not(:focus-visible) → box-shadow/outline none) no lo toca,
   así se ve también mientras la tab tiene el foco después del clic. */
.eventos-terrazas .eventos-terrazas__tab::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: inherit;
	pointer-events: none;
	transition: border-color .2s ease;
}

.eventos-terrazas .eventos-terrazas__tab:hover,
.eventos-terrazas .eventos-terrazas__tab:focus {
	background: transparent;
	box-shadow: none;
	color: var(--color-light);
}

.eventos-terrazas .eventos-terrazas__tab[aria-selected="true"],
.eventos-terrazas .eventos-terrazas__tab[aria-selected="true"]:hover,
.eventos-terrazas .eventos-terrazas__tab[aria-selected="true"]:focus {
	background: transparent;
	color: var(--color-white);
}

.eventos-terrazas .eventos-terrazas__tab[aria-selected="true"]::before {
	border-color: var(--color-white);
}

.eventos-terrazas .eventos-terrazas__tab:focus:not(:focus-visible) {
	outline: none;
}

.eventos-terrazas .eventos-terrazas__tab:focus-visible {
	outline: 2px solid var(--color-ochre);
	outline-offset: 3px;
}

/* ---------- Cuerpo ---------- */
.eventos-terrazas__body {
	padding: 99.5px 24px 136px;
}

.eventos-terrazas__panel {
	display: flex;
	flex-direction: column;
	gap: 216px;
	width: min(100%, 1262px);
	margin: 0 auto;
}

.eventos-terrazas__panel[hidden] {
	display: none;
}

.eventos-terrazas__panel:focus-visible {
	outline: 2px solid var(--color-ochre);
	outline-offset: 8px;
}

.eventos-terrazas__row {
	display: grid;
	grid-template-columns: minmax(0, 424px) minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
}

/* ---------- Tarjeta de información ---------- */
.eventos-terrazas__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	box-sizing: border-box;
	min-height: 437px;
	padding: 45.2px 24px 38.6px 58px;
	border: 0.7px solid var(--color-navy);
	border-radius: 15px;
	background-color: var(--color-white);
}

/* Caja del título del alto de una línea: si ocupa 2 líneas crece hacia arriba y abajo por igual (como el Figma) */
.eventos-terrazas__info-title {
	display: flex;
	align-items: center;
	min-height: 40px;
	max-height: 40px;
}

.eventos-terrazas .eventos-terrazas__name {
	margin: 0;
	max-width: 298px;
	color: var(--color-terracotta);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
}

.eventos-terrazas__block {
	margin-top: 46.3px;
}

/* Con el nombre de la terraza junto al reloj (Juárez) el primer bloque sube, como el Figma */
.eventos-terrazas__info-title + .eventos-terrazas__block:has(.eventos-terrazas__block-label) {
	margin-top: 35px;
}

.eventos-terrazas__block + .eventos-terrazas__block {
	margin-top: 24px;
}

.eventos-terrazas__block-head {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 21px;
	margin: 0;
}

.eventos-terrazas__clock {
	display: inline-flex;
	margin-left: -1.9px;
	color: var(--color-navy);
}

.eventos-terrazas__clock svg {
	width: 21px;
	height: 21px;
}

.eventos-terrazas__clock path {
	stroke-width: 0.64; /* 0.84 del Figma en 21px → viewBox de 16 */
}

.eventos-terrazas__block-label {
	color: var(--color-terracotta);
}

.eventos-terrazas__schedule {
	display: flex;
	flex-direction: column;
	gap: 14.3px;
	margin: 16px 0 0;
	color: var(--color-navy);
}

.eventos-terrazas .eventos-terrazas__divider {
	align-self: stretch;
	width: auto;
	height: 0;
	margin: 35px 34px 0 0;
	border: 0;
	border-top: 0.7px solid var(--color-navy-50);
	background: none;
}

.eventos-terrazas__divider + .eventos-terrazas__block {
	margin-top: 35px;
}

.eventos-terrazas__note {
	max-width: 318px;
	margin: auto 0 0;
	padding-top: 34px;
	color: var(--color-navy-50);
	line-height: 20px;
}

/* ---------- Terrazas ---------- */
.eventos-terrazas .eventos-terrazas__list {
	display: flex;
	justify-content: flex-end;
	gap: 100px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eventos-terrazas__terraza {
	display: flex;
	flex: 0 1 293px;
	flex-direction: column;
	min-width: 0;
	margin: 0;
}

.eventos-terrazas__row--wide .eventos-terrazas__terraza {
	flex-basis: 670px;
}

/* Galería: fotos apiladas con fundido */
.eventos-terrazas__gallery {
	position: relative;
	width: 100%;
	aspect-ratio: 293 / 300;
	overflow: hidden;
	border-top-right-radius: var(--ter-arch-small-x) var(--ter-arch-small-y);
	background-color: var(--color-warm-gray-50);
}

.eventos-terrazas__row--wide .eventos-terrazas__gallery {
	aspect-ratio: 670 / 303;
	border-top-right-radius: var(--ter-arch-wide-x) var(--ter-arch-wide-y);
}

.eventos-terrazas__slides {
	position: absolute;
	inset: 0;
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.eventos-terrazas__slides::-webkit-scrollbar {
	display: none;
}

.eventos-terrazas__slides.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.eventos-terrazas .eventos-terrazas__img {
	flex: 0 0 100%;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	-webkit-user-drag: none;
	transition: transform .6s ease;
}

.eventos-terrazas__dots {
	position: absolute;
	left: 50%;
	bottom: 4.5px;
	display: flex;
	transform: translateX(-50%);
}

.eventos-terrazas__row--wide .eventos-terrazas__dots {
	left: auto;
	right: 12.5px;
	bottom: 8px;
	transform: none;
}

.eventos-terrazas__dots[hidden] {
	display: none;
}

.eventos-terrazas .eventos-terrazas__dot {
	position: relative;
	width: 14px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.eventos-terrazas__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6.5px;
	height: 6.5px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.45);
	transform: translate(-50%, -50%);
	transition: background-color .3s ease;
}

.eventos-terrazas .eventos-terrazas__dot:hover,
.eventos-terrazas .eventos-terrazas__dot:focus {
	background: transparent;
	box-shadow: none;
}

.eventos-terrazas__dot:hover::before,
.eventos-terrazas__dot[aria-current="true"]::before {
	background-color: rgba(255, 255, 255, 0.9);
}

.eventos-terrazas .eventos-terrazas__dot:focus:not(:focus-visible) {
	outline: none;
}

.eventos-terrazas .eventos-terrazas__dot:focus-visible {
	outline: 2px solid var(--color-ochre);
	outline-offset: -2px;
}

/* Cuerpo de la tarjeta: angosta = todo apilado; ancha = 3 columnas */
.eventos-terrazas__card-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"info"
		"toggle"
		"mob"
		"btn";
	align-items: start;
}

.eventos-terrazas__row--wide .eventos-terrazas__card-body {
	grid-template-columns: minmax(0, 318fr) minmax(0, 186fr) minmax(0, 166fr);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"info mob toggle"
		"info mob btn";
}

.eventos-terrazas__card-info {
	grid-area: info;
	min-width: 0;
	padding-top: 13.5px;
}

.eventos-terrazas__row--wide .eventos-terrazas__card-info {
	padding-top: 19.5px;
}

.eventos-terrazas .eventos-terrazas__terraza-name {
	margin: 0;
	color: var(--color-terracotta);
	font-family: var(--font-sans);
	font-size: 24.34px;
	font-weight: var(--fw-regular);
	line-height: 30px;
}

.eventos-terrazas__sede {
	margin: 8px 0 0;
	color: var(--color-navy);
	font-size: 17.26px;
	font-weight: var(--fw-light);
	line-height: 22px;
}

.eventos-terrazas__capacity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	color: var(--color-navy);
	font-size: 17.26px;
	line-height: 22px;
}

.eventos-terrazas__users {
	display: inline-flex;
	color: var(--color-navy);
}

.eventos-terrazas__users svg {
	width: 23px;
	height: 23px;
}

.eventos-terrazas__users path {
	stroke-width: 0.82;
}

.eventos-terrazas__montaje {
	margin: 5px 0 0;
	color: var(--color-navy-50);
	font-size: 9px;
	line-height: 12px;
}

.eventos-terrazas__row--wide .eventos-terrazas__sede {
	margin-top: 8.5px;
}

.eventos-terrazas__row--wide .eventos-terrazas__capacity {
	margin-top: 18.5px;
}

.eventos-terrazas__row--wide .eventos-terrazas__montaje {
	margin-top: 8.5px;
}

/* Desplegable de mobiliario */
.eventos-terrazas .eventos-terrazas__toggle {
	grid-area: toggle;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: 100%;
	min-height: 0;
	margin: 38.3px 0 0;
	padding: 0 2px 12.8px 0;
	border: 0;
	border-bottom: 0.6px solid var(--color-navy-50);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--color-navy);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-medium);
	line-height: 15px;
	text-align: left;
	cursor: pointer;
}

.eventos-terrazas__row--wide .eventos-terrazas__toggle {
	margin-top: 31.5px;
}

.eventos-terrazas__toggle-label {
	white-space: nowrap;
}

.eventos-terrazas .eventos-terrazas__toggle:hover,
.eventos-terrazas .eventos-terrazas__toggle:focus {
	background: transparent;
	box-shadow: none;
	color: var(--color-navy);
}

.eventos-terrazas .eventos-terrazas__toggle:focus:not(:focus-visible) {
	outline: none;
}

.eventos-terrazas .eventos-terrazas__toggle:focus-visible {
	outline: 2px solid var(--color-ochre);
	outline-offset: 3px;
}

.eventos-terrazas__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	margin: -6px -6px -6px 0;
	color: var(--color-navy);
}

.eventos-terrazas__chevron svg {
	width: 26px;
	height: 26px;
}

.eventos-terrazas__chevron path {
	stroke-width: 0.62;
	transition: stroke-width .2s ease;
}

.eventos-terrazas__toggle:hover .eventos-terrazas__chevron path,
.eventos-terrazas__toggle:focus-visible .eventos-terrazas__chevron path {
	stroke-width: 1;
}

/* Lista de mobiliario */
.eventos-terrazas .eventos-terrazas__mob {
	grid-area: mob;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 37.5px;
	align-items: center;
	margin: 19.3px 0 0;
	padding: 0;
	list-style: none;
}

/* Tarjeta ancha: una columna repartida en 128 (4 filas cada 32 como el prototipo; 3 filas cada 48 como el Figma) */
.eventos-terrazas__row--wide .eventos-terrazas__mob {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 128px;
	margin-top: 20px;
}

.eventos-terrazas__row--wide .eventos-terrazas__mob-item {
	min-height: 32px;
}

.eventos-terrazas .eventos-terrazas__mob[hidden],
.eventos-terrazas__row--wide .eventos-terrazas__mob[hidden] {
	display: none;
}

.eventos-terrazas__mob-item {
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	color: var(--color-navy);
}

.eventos-terrazas__mob-icon {
	display: inline-flex;
	flex: 0 0 32px;
	color: var(--color-navy);
}

.eventos-terrazas__mob-icon svg {
	width: 32px;
	height: 32px;
}

.eventos-terrazas__mob-qty {
	flex: 0 0 18px;
	font-size: 12px;
	line-height: 16px;
	text-align: right;
}

.eventos-terrazas__mob-label {
	margin-left: 13px;
	font-size: 9px;
	line-height: 12px;
	white-space: nowrap;
}

/* Botón "Reservar" = componente Botones escalado */
.eventos-terrazas .eventos-terrazas__btn {
	grid-area: btn;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6.22px;
	box-sizing: border-box;
	width: 240px;
	max-width: 100%;
	min-height: 26px;
	margin-top: 34.5px;
	padding: 6.22px;
	border: 0.44px solid var(--color-navy);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-navy);
	font-family: var(--font-sans);
	font-size: 9.96px;
	font-weight: var(--fw-regular);
	line-height: 12.5px;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.eventos-terrazas__row--wide .eventos-terrazas__btn {
	width: 100%;
}

/* Con el mobiliario abierto el botón baja como en el Figma */
.eventos-terrazas__toggle[aria-expanded="true"] ~ .eventos-terrazas__btn {
	margin-top: 38px;
}

.eventos-terrazas__row--wide .eventos-terrazas__toggle[aria-expanded="true"] ~ .eventos-terrazas__btn {
	margin-top: 52.5px;
}

/* Hover (ver "Hovers"): texto en Medium, flecha más gruesa y borde más grueso — sin cambio de color ni de tamaño */
.eventos-terrazas .eventos-terrazas__btn:hover,
.eventos-terrazas .eventos-terrazas__btn:focus-visible {
	background: transparent;
	color: var(--color-navy);
	box-shadow: inset 0 0 0 0.44px var(--color-navy);
}

.eventos-terrazas__btn:hover .colabora-label,
.eventos-terrazas__btn:focus-visible .colabora-label {
	font-weight: var(--fw-medium);
}

.eventos-terrazas .eventos-terrazas__btn:focus-visible {
	outline: 2px solid var(--color-ochre);
	outline-offset: 3px;
}

.eventos-terrazas__arrow {
	display: inline-flex;
}

.eventos-terrazas__arrow svg {
	width: 10px;
	height: 10px;
}

.eventos-terrazas__arrow path {
	transition: stroke-width .2s ease;
}

.eventos-terrazas__btn:hover .eventos-terrazas__arrow path,
.eventos-terrazas__btn:focus-visible .eventos-terrazas__arrow path {
	stroke-width: 1.6;
}

.eventos-terrazas__terraza:has(.eventos-terrazas__btn:hover) .eventos-terrazas__img,
.eventos-terrazas__terraza:has(.eventos-terrazas__btn:focus-visible) .eventos-terrazas__img {
	transform: scale(1.03);
}

/* ---------- ≤1360: columnas fluidas ---------- */
@media (max-width: 1360px) {
	.eventos-terrazas__body {
		padding-left: clamp(24px, 4vw, 48px);
		padding-right: clamp(24px, 4vw, 48px);
	}

	.eventos-terrazas__panel {
		gap: clamp(96px, 15vw, 216px);
	}

	.eventos-terrazas__row {
		grid-template-columns: minmax(0, 380fr) minmax(0, 670fr);
		column-gap: clamp(32px, 5vw, 96px);
	}

	.eventos-terrazas .eventos-terrazas__list {
		gap: clamp(24px, 4.5vw, 100px);
	}

	.eventos-terrazas__info {
		padding-left: clamp(32px, 4.3vw, 58px);
	}
}

@media (max-width: 1180px) {
	.eventos-terrazas__br {
		display: none;
	}

	.eventos-terrazas__text {
		max-width: 760px;
		margin-left: auto;
		margin-right: auto;
		text-wrap: balance;
	}

	.eventos-terrazas__tabs {
		gap: clamp(24px, 8vw, 118px);
	}
}

/* ---------- Tablet: tarjeta de información arriba y terrazas abajo ---------- */
@media (max-width: 1024px) {
	.eventos-terrazas__band {
		padding-top: 72px;
	}

	.eventos-terrazas__head {
		padding: 0 48px 36px;
	}

	.eventos-terrazas .eventos-terrazas__eyebrow {
		font-size: 40px;
		line-height: 44px;
	}

	.eventos-terrazas .eventos-terrazas__title {
		margin-top: 14px;
		font-size: 34px;
		line-height: 42px;
	}

	.eventos-terrazas__body {
		padding: 88px 48px 96px;
	}

	.eventos-terrazas__panel {
		gap: 96px;
		width: min(100%, 680px);
	}

	.eventos-terrazas__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.eventos-terrazas__info {
		min-height: 0;
		padding: 36px 32px 32px;
	}

	.eventos-terrazas__info-title {
		min-height: 0;
		max-height: none;
	}

	.eventos-terrazas__block,
	.eventos-terrazas__info-title + .eventos-terrazas__block:has(.eventos-terrazas__block-label) {
		margin-top: 24px;
	}

	.eventos-terrazas__block + .eventos-terrazas__block,
	.eventos-terrazas__divider + .eventos-terrazas__block {
		margin-top: 20px;
	}

	.eventos-terrazas .eventos-terrazas__divider {
		margin: 24px 0 0;
	}

	.eventos-terrazas__schedule {
		gap: 8px;
		margin-top: 10px;
	}

	.eventos-terrazas__note {
		max-width: none;
		padding-top: 24px;
	}

	.eventos-terrazas .eventos-terrazas__list {
		justify-content: space-between;
		gap: 32px;
	}

	.eventos-terrazas__terraza {
		flex: 1 1 0;
	}

	.eventos-terrazas__row--wide .eventos-terrazas__terraza {
		flex-basis: 100%;
	}

	/* Textos legibles en las tarjetas */
	.eventos-terrazas__montaje {
		font-size: 11px;
		line-height: 14px;
	}

	.eventos-terrazas .eventos-terrazas__toggle {
		font-size: 13px;
		line-height: 16px;
	}

	.eventos-terrazas__mob-qty {
		font-size: 13px;
	}

	.eventos-terrazas__mob-label {
		margin-left: 10px;
		font-size: 11px;
		line-height: 14px;
	}

	.eventos-terrazas .eventos-terrazas__btn {
		min-height: 34px;
		padding: 6px 16px;
		gap: 8px;
		border-width: 0.7px;
		font-size: 13px;
		line-height: 16px;
	}

	.eventos-terrazas .eventos-terrazas__btn:hover,
	.eventos-terrazas .eventos-terrazas__btn:focus-visible {
		box-shadow: inset 0 0 0 0.7px var(--color-navy);
	}

	.eventos-terrazas__arrow svg {
		width: 13px;
		height: 13px;
	}
}

/* ---------- Móvil: terrazas apiladas y cuerpo de la tarjeta ancha en una columna ---------- */
@media (max-width: 767px) {
	.eventos-terrazas {
		--ter-arch-small-x: 34%;
		--ter-arch-small-y: 34%;
		--ter-arch-wide-x: 96px;
		--ter-arch-wide-y: 102px;
	}

	.eventos-terrazas__band {
		padding: 64px 0 40px;
	}

	.eventos-terrazas__head {
		padding: 0 24px 32px;
	}

	.eventos-terrazas .eventos-terrazas__eyebrow {
		font-size: clamp(26px, 8vw, 32px);
		line-height: 1.25;
	}

	.eventos-terrazas .eventos-terrazas__title {
		font-size: 26px;
		line-height: 32px;
	}

	.eventos-terrazas__text {
		font-size: var(--fs-body-m);
		line-height: 22px;
	}

	.eventos-terrazas__tabs {
		gap: 4px;
		margin-top: 32px;
		padding: 0 12px;
	}

	.eventos-terrazas .eventos-terrazas__tab {
		min-width: 0;
		padding: 9px 14px;
		font-size: var(--fs-body-m);
	}

	.eventos-terrazas__body {
		padding: 64px 24px 72px;
	}

	.eventos-terrazas__panel {
		gap: 72px;
		width: min(100%, 420px);
	}

	.eventos-terrazas__row {
		row-gap: 24px;
	}

	.eventos-terrazas__info {
		padding: 28px 24px 26px;
	}

	.eventos-terrazas .eventos-terrazas__name {
		font-size: 28px;
		line-height: 34px;
	}

	.eventos-terrazas__schedule {
		font-size: var(--fs-body-m);
	}

	.eventos-terrazas__note {
		font-size: 15px;
	}

	.eventos-terrazas .eventos-terrazas__list {
		flex-direction: column;
		gap: 48px;
	}

	.eventos-terrazas__terraza,
	.eventos-terrazas__row--wide .eventos-terrazas__terraza {
		flex: 0 0 auto;
	}

	.eventos-terrazas__gallery {
		aspect-ratio: 1 / 1;
	}

	.eventos-terrazas__row--wide .eventos-terrazas__gallery {
		aspect-ratio: 4 / 3;
	}

	.eventos-terrazas__row--wide .eventos-terrazas__card-body {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas:
			"info"
			"toggle"
			"mob"
			"btn";
	}

	.eventos-terrazas__row--wide .eventos-terrazas__card-info {
		padding-top: 16px;
	}

	.eventos-terrazas__row--wide .eventos-terrazas__sede,
	.eventos-terrazas__row--wide .eventos-terrazas__capacity,
	.eventos-terrazas__row--wide .eventos-terrazas__montaje {
		margin-top: 8px;
	}

	.eventos-terrazas .eventos-terrazas__toggle,
	.eventos-terrazas__row--wide .eventos-terrazas__toggle {
		margin-top: 28px;
	}

	.eventos-terrazas .eventos-terrazas__mob,
	.eventos-terrazas__row--wide .eventos-terrazas__mob {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 40px;
		min-height: 0;
		margin-top: 16px;
	}

	.eventos-terrazas .eventos-terrazas__btn,
	.eventos-terrazas__row--wide .eventos-terrazas__btn,
	.eventos-terrazas__toggle[aria-expanded="true"] ~ .eventos-terrazas__btn,
	.eventos-terrazas__row--wide .eventos-terrazas__toggle[aria-expanded="true"] ~ .eventos-terrazas__btn {
		width: 100%;
		margin-top: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eventos-terrazas .eventos-terrazas__tab,
	.eventos-terrazas .eventos-terrazas__tab::before,
	.eventos-terrazas .eventos-terrazas__img,
	.eventos-terrazas .eventos-terrazas__btn,
	.eventos-terrazas__arrow path,
	.eventos-terrazas__chevron path,
	.eventos-terrazas__dot::before {
		transition: none;
	}
}