/**
 * Sky Tabla — tabla comparativa.
 * Escritorio: <table> con separación entre celdas. Móvil: .szt-mob (una columna
 * debajo de otra). Solo una de las dos se muestra; la otra queda en display:none
 * (así los lectores de pantalla no leen el contenido dos veces).
 */

.szt {
	width: 100%;
	color: var( --szt-cell-color, #1e2033 );
}

.szt *,
.szt *::before,
.szt *::after {
	box-sizing: border-box;
}

/* ── Escritorio ── */
.szt-desk {
	overflow-x: auto; /* si no cabe, se desliza de lado en vez de desbordar */
	-webkit-overflow-scrolling: touch;
}

.szt-table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: separate;
	border-spacing: var( --szt-gap, 10px ) var( --szt-row-gap, 6px );
	table-layout: fixed;
}

.szt-col-label {
	width: var( --szt-label-w, 36% );
}

.szt-table th,
.szt-table td {
	border: 0;
	vertical-align: middle;
}

.szt-table .szt-head {
	padding-left: 6px;
	padding-right: 6px;
}

.szt-corner {
	background: none;
}

.szt-head {
	padding: var( --szt-head-pad, 34px ) 10px;
	background: var( --szt-h-bg, #1e2033 );
	color: var( --szt-h-color, #fff );
	/* En escritorio el nombre se achica si la columna es angosta, para no partir
	   la palabra (SUMME/R); nunca pasa del tamaño configurado. */
	font-size: min( var( --szt-head-size, 30px ), 2.1vw );
	font-weight: var( --szt-head-weight, 900 );
	line-height: 1.05;
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: var( --szt-head-case, uppercase );
	overflow-wrap: normal;
	word-break: keep-all;
}

.szt-label {
	padding: 0;
	color: var( --szt-label-color, #fff );
	font-size: var( --szt-label-size, 18px );
	font-weight: var( --szt-label-weight, 500 );
	line-height: 1.25;
	text-align: var( --szt-label-align, center );
}

.szt-label__in {
	display: block;
	padding: 10px 18px;
}

/* Celda completa (tabla de características): el fondo es de la celda y ocupa todo
   el alto de la fila (un solo fondo: antes se pintaba dos veces y se veía una línea). */
.szt--label-full .szt-label {
	background: var( --szt-label-bg, #1e2033 );
}

/* Etiqueta compacta (tabla de precios): el fondo es solo del texto */
.szt--label-tag .szt-label__in {
	background: var( --szt-label-bg, #1e2033 );
}

/* Etiqueta compacta (tabla de precios): alineada arriba, a la altura del precio */
.szt--label-tag .szt-table .szt-label {
	vertical-align: top;
	padding-top: var( --szt-cell-pad, 10px );
}

.szt-cell {
	padding: var( --szt-cell-pad, 10px ) 4px;
	font-size: var( --szt-cell-size, 18px );
	font-weight: var( --szt-cell-weight, 400 );
	line-height: 1.3;
	text-align: center;
}

.szt-cell__text {
	display: block;
}

.szt-cell__text + .szt-btn {
	margin-top: 14px;
}

/* ── Botón: colores de su columna (variables en .szt-cN), forma y hover globales ── */
.szt .szt-btn {
	justify-content: center;
	max-width: 100%;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

.szt--btn-full .szt-btn {
	display: flex;
	width: 100%;
}

.szt-hl {
	color: var( --szt-hl, inherit );
	white-space: nowrap; /* "1 Mes" no se parte en dos líneas */
	transition: color 0.25s ease;
}

.szt .szt-btn:hover .szt-hl,
.szt .szt-btn:focus-visible .szt-hl {
	color: inherit;
}

.szt-btn__arrow {
	display: inline-block;
	margin-left: 0.35em;
	vertical-align: 0.02em;
}

/* ── Móvil / tablet: columnas apiladas ── */
.szt-mob {
	display: none;
}

.szt-group {
	display: grid;
	grid-template-columns: var( --szt-m-label, 42% ) minmax( 0, 1fr );
	gap: 8px 14px;
	align-items: center;
}

.szt-group + .szt-group {
	margin-top: var( --szt-m-gap, 56px );
}

.szt-group .szt-head {
	grid-column: 2;
	margin-bottom: 4px;
	font-size: min( var( --szt-head-size, 30px ), 9vw ); /* en móvil el encabezado es ancho */
}

.szt-group .szt-label {
	font-size: var( --szt-label-size-m, 15px );
	/* Una palabra larga ("Acompañantes") se parte en vez de salirse del bloque */
	overflow-wrap: break-word;
	hyphens: auto;
	min-width: 0;
}

.szt-group .szt-label__in {
	padding: 8px 10px;
}

/* Celda completa: el título ocupa todo el alto de su fila (también con botón) */
.szt--label-full .szt-group .szt-label {
	display: flex;
	align-items: center;
	align-self: stretch;
}

.szt--label-full .szt-group .szt-label__in {
	width: 100%;
}

/* Etiqueta compacta: arriba, a la altura del precio */
.szt--label-tag .szt-group .szt-label {
	align-self: start;
	margin-top: 2px;
}

.szt-group .szt-cell {
	padding: 6px 0;
}

@media ( max-width: 1024px ) {
	.szt--stack-tablet .szt-desk {
		display: none;
	}

	.szt--stack-tablet .szt-mob {
		display: block;
	}
}

@media ( max-width: 767px ) {
	.szt--stack-mobile .szt-desk {
		display: none;
	}

	.szt--stack-mobile .szt-mob {
		display: block;
	}

	.szt-head {
		padding: calc( var( --szt-head-pad, 34px ) * 0.8 ) 10px;
	}
}

/* ── Separadores entre filas ── */
.szt-table .szt-sep td {
	padding: calc( var( --szt-sep-space, 24px ) / 2 ) 0;
}

.szt-group .szt-sep {
	grid-column: 1 / -1;
	padding: calc( var( --szt-sep-space, 24px ) / 2 ) 0;
}

.szt-sep__in {
	display: flex;
	align-items: center;
}

.szt-sep__in::before,
.szt-sep__in::after {
	content: "";
	flex: 1;
	height: var( --szt-sep-thick, 2px );
	background: var( --szt-sep-line, #e3e6ea );
}

.szt-sep__text {
	padding: 0 14px;
	color: var( --szt-sep-color, #1e2033 );
	font-size: var( --szt-sep-size, 16px );
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.szt--empty {
	padding: 24px;
	border: 2px dashed #c9ccd6;
	color: #5c6470;
	text-align: center;
}