/*
 * Landing de la comunidad. Shortcode [comunidad_vitaltrain].
 *
 * PREFIJO vtl-, DISTINTO DE vt.css, Y A PROPOSITO.
 *
 * vt.css vive dentro del escritorio y todo cuelga de .vt-panel, que le sirve
 * de valla. Esto se pega en una pagina cualquiera, junto a Elementor y al
 * tema. Compartir prefijo seria arreglar un boton aqui y romper otro alli sin
 * enterarse hasta semanas despues.
 *
 * Todo cuelga de .vtl y ninguna regla toca un elemento a secas, asi que no
 * puede afectar a nada del tema que la rodee.
 *
 * Sin !important en toda la hoja. Si algo del tema gana, se sube la
 * especificidad repitiendo .vtl -- como en vt.css -- y no se cierra la puerta
 * a ajustar nada desde el Personalizador.
 */

.vtl {
	/*
	 * LOS MISMOS VALORES QUE .vt-escuela, Y NO PARECIDOS.
	 *
	 * Antes esta paleta era casi la de Escuela pero no: #16263f contra
	 * #0E2A3A, #ef6c4a contra #F26649. Dos landings del mismo embudo con dos
	 * azules que se parecen mucho se leen peor que con dos que se distinguen
	 * -- parece la misma marca mal impresa.
	 *
	 * Manda Escuela porque es la que lleva meses publicada. Si alguno de estos
	 * cambia, se cambia en los dos ficheros: son dos plugins distintos y uno
	 * puede desactivarse, asi que ninguno depende del otro para pintarse.
	 */
	--vtl-navy: #0E2A3A;
	--vtl-navy-soft: #3A5568;
	--vtl-coral: #F26649;
	--vtl-coral-dark: #C8462C;
	--vtl-tinte: #FDEEE8;
	--vtl-arena: #F7F4F1;
	--vtl-borde: #E4DDD8;
	--vtl-gris: #3A5568;

	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;

	/*
	 * SIN font-family. Aqui ponia "Albert Sans" y NADIE la cargaba: el plugin
	 * no encola ninguna fuente, asi que lo que se veia era el primer respaldo
	 * de la lista, la del sistema. Una landing en la letra del sistema junto a
	 * un checkout en la del tema.
	 *
	 * Heredando, las dos landings, el blog y el checkout usan la misma.
	 */
	color: var(--vtl-navy);
	line-height: 1.6;
}

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

/* --- aviso para quien ya es miembro o lo fue ---------------------------- */

.vtl.vtl .vtl__aviso {
	margin: 0 0 24px;
	padding: 12px 16px;
	border-left: 3px solid var(--vtl-coral);
	border-radius: 0 14px 14px 0;
	background: var(--vtl-tinte);
	font-size: 14px;
	color: var(--vtl-navy);
}

/* --- hero --------------------------------------------------------------- */

.vtl__hero {
	padding: 8px 0 44px;
	text-align: center;
}

.vtl.vtl .vtl__ojo {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vtl-coral);
}

.vtl.vtl .vtl__titular {
	margin: 0 0 18px;
	font-size: clamp(38px, 5vw, 58px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--vtl-navy);
	text-transform: none;
}

.vtl.vtl .vtl__entrada {
	max-width: 620px;
	margin: 0 auto 30px;
	font-size: 20px;
	font-weight: 500;
	color: var(--vtl-gris);
}

.vtl__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px;
}

/* --- el bloque de oferta ------------------------------------------------ */

/*
 * Una sola pieza con el precio, la prueba y los dos limites de la promo.
 * Antes eran cuatro parrafos del mismo cuerpo y del mismo color, y el precio
 * de lanzamiento pasaba desapercibido entre ellos.
 */
.vtl__oferta {
	max-width: 520px;
	margin: 0 auto 14px;
	padding: 22px 26px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	text-align: center;
}

/* Con promo viva, la pieza se tine y el borde pasa a coral: se ve de lejos. */
.vtl__oferta--promo {
	border: 2px solid var(--vtl-coral);
	background: var(--vtl-tinte);
}

.vtl.vtl .vtl__oferta-eti {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vtl-coral-dark);
}

.vtl.vtl .vtl__oferta-precio {
	margin: 0 0 4px;
	font-size: clamp(32px, 4.4vw, 44px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--vtl-navy);
}

/*
 * El precio anterior, tachado.
 *
 * Lo escribimos nosotros: Woo no lo pinta en productos variables -- ahi
 * ensena el importe minimo y se acabo. Va pequeno y apagado porque tiene
 * que leerse como referencia, no competir con el que se cobra.
 */
.vtl .vtl__oferta-precio del {
	margin-right: 10px;
	font-size: 0.5em;
	font-weight: 400;
	opacity: 0.6;
	text-decoration-thickness: 2px;
}

.vtl .vtl__oferta-precio ins {
	text-decoration: none;
	color: var(--vtl-coral-dark);
}

/*
 * "Desde:" fuera.
 *
 * Lo mete Woo porque el producto es variable y hay dos importes. Pero aqui
 * el segundo ya se dice entero en la linea de abajo ("O 150 EUR al año"),
 * asi que "Desde" no informa: solo le pone un pero al numero grande, justo
 * donde hace falta que no lo tenga.
 */
.vtl .vtl__oferta-precio .from {
	display: none;
}

/*
 * Woo escribe el precio en piezas sueltas: el importe, el sufijo de
 * impuestos y la coletilla del ciclo. En bloque salian en tres renglones y
 * el recuadro parecia una lista de la compra.
 *
 * El salto se fuerza ANTES del sufijo y no poniendo el importe en bloque,
 * que es la forma obvia y la que rompe las rebajas: en rebaja el importe
 * son dos, el tachado y el nuevo, y en bloque se irian uno debajo del otro.
 * Asi el importe manda en su linea -- tachado incluido -- y las dos
 * aclaraciones comparten la de abajo.
 */
.vtl .vtl__oferta-precio small::before {
	content: "\A";
	white-space: pre;
}

/* Ni la coletilla "/ mes" ni el "IVA incluido" pueden ir a 44px. */
.vtl .vtl__oferta-precio .subscription-details,
.vtl .vtl__oferta-precio small {
	display: inline;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--vtl-navy-soft);
}

.vtl .vtl__oferta-anual del {
	margin-right: 4px;
	opacity: 0.6;
}

.vtl.vtl .vtl__oferta-anual {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--vtl-navy-soft);
}

.vtl.vtl .vtl__oferta-prueba {
	margin: 0;
	padding: 10px 0 0;
	border-top: 1px solid var(--vtl-borde);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--vtl-navy);
}

/* Los dos limites, uno al lado del otro: son condiciones hermanas. */
.vtl.vtl .vtl__oferta-limites {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.vtl.vtl .vtl__oferta-limite {
	flex: 1 1 180px;
	margin: 0;
	padding: 10px 12px;
	border-radius: 14px;
	background: #ffffff;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--vtl-navy-soft);
	list-style: none;
}

.vtl .vtl__oferta-limite::before,
.vtl .vtl__oferta-limite::marker {
	content: none;
}

.vtl .vtl__oferta-limite strong {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--vtl-coral-dark);
}

.vtl.vtl .vtl__oferta-letra {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--vtl-navy-soft);
}

.vtl.vtl .vtl__letra {
	margin: 0;
	font-size: 14px;
	color: var(--vtl-gris);
}

/* --- botón -------------------------------------------------------------- */

/*
 * Mismas medidas que .vt-escuela-btn-lg: pastilla, 12px 26px, 15px y peso
 * 500. Antes esto era un rectangulo de 12px de radio con 17px y peso 600, y
 * el visitante que venia de la Escuela se encontraba otro boton.
 *
 * El hover tambien: cambia el fondo a coral oscuro, no levanta la pieza. Dos
 * botones de la misma marca no pueden reaccionar distinto al raton.
 */
.vtl.vtl .vtl__cta {
	display: inline-block;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--vtl-coral);
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	transition: background 180ms ease;
}

.vtl .vtl__cta:hover,
.vtl .vtl__cta:focus {
	color: #ffffff;
	background: var(--vtl-coral-dark);
}

.vtl .vtl__cta:focus-visible {
	outline: 3px solid var(--vtl-coral);
	outline-offset: 3px;
}

/* Sobre el navy del cierre, el coral no contrasta: ahi el boton va en blanco. */
.vtl.vtl .vtl__cta--claro {
	background: #ffffff;
	color: var(--vtl-navy);
}

.vtl .vtl__cta--claro:hover,
.vtl .vtl__cta--claro:focus {
	color: var(--vtl-navy);
	background: var(--vtl-tinte);
}

/* --- rejilla de bloques ------------------------------------------------- */

.vtl__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-bottom: 48px;
}

.vtl__bloque {
	padding: 26px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
}

.vtl__icono {
	display: block;
	margin-bottom: 12px;
	font-size: 26px;
	line-height: 1;
}

.vtl.vtl .vtl__bloque-titulo {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vtl-navy);
	text-transform: none;
}

.vtl.vtl .vtl__bloque-texto {
	margin: 0;
	font-size: 15.5px;
	color: var(--vtl-gris);
}

/* --- formaciones incluidas ---------------------------------------------- */

.vtl__incluidas,
.vtl__dudas {
	margin-bottom: 48px;
}

.vtl.vtl .vtl__seccion-titulo {
	margin: 0 0 6px;
	font-size: clamp(28px, 3.2vw, 36px);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--vtl-navy);
	text-transform: none;
}

.vtl.vtl .vtl__seccion-entrada {
	margin: 0 0 20px;
	font-size: 15.5px;
	color: var(--vtl-gris);
}

.vtl.vtl .vtl__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtl.vtl .vtl__lista li {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: var(--vtl-tinte);
	font-size: 15px;
	font-weight: 600;
	list-style: none;
}

.vtl .vtl__lista li::before,
.vtl .vtl__lista li::marker {
	content: none;
}

/* --- dudas -------------------------------------------------------------- */

/*
 * <details> nativo: abre y cierra sin una linea de JavaScript, es accesible
 * de fabrica y el navegador lo encuentra al buscar en la pagina con Ctrl+F.
 */
.vtl__duda {
	padding: 16px 0;
	border-bottom: 1px solid var(--vtl-borde);
}

.vtl .vtl__duda summary {
	font-size: 16px;
	font-weight: 600;
	color: var(--vtl-navy);
	cursor: pointer;
	list-style: none;
}

.vtl .vtl__duda summary::-webkit-details-marker {
	display: none;
}

.vtl .vtl__duda summary::after {
	content: "+";
	float: right;
	font-size: 20px;
	line-height: 1;
	color: var(--vtl-coral);
}

.vtl .vtl__duda[open] summary::after {
	content: "–";
}

.vtl.vtl .vtl__duda p {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--vtl-gris);
}

/* --- cierre ------------------------------------------------------------- */

.vtl__cierre {
	padding: 44px 24px;
	border-radius: 14px;
	background: var(--vtl-navy);
	text-align: center;
}

.vtl.vtl .vtl__cierre-titulo {
	margin: 0 0 10px;
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 700;
	color: #ffffff;
	text-transform: none;
}

.vtl.vtl .vtl__cierre-precio {
	margin: 0 0 22px;
	font-size: 17px;
	color: rgba(255, 255, 255, 0.82);
}

.vtl .vtl__cierre-precio del {
	opacity: 0.6;
}

.vtl .vtl__cierre-precio ins {
	text-decoration: none;
	color: #ffffff;
}

.vtl.vtl .vtl__cierre p {
	margin: 0;
}

/* --- movil -------------------------------------------------------------- */

@media (max-width: 600px) {
	.vtl__hero {
		padding-bottom: 32px;
	}

	.vtl.vtl .vtl__cta {
		display: block;
		width: 100%;
		text-align: center;
	}

	.vtl__acciones {
		flex-direction: column;
		align-items: stretch;
	}

	.vtl__oferta {
		padding: 20px 18px;
	}

	/*
	 * Los avisos de la promo NO se giran a columna aqui, y es a proposito.
	 *
	 * Llevan flex: 1 1 180px, que en fila reparte el ANCHO. En columna ese
	 * 180px pasa a ser el ALTO de base y cada aviso sale como un ladrillo
	 * con medio palmo de blanco debajo del texto. Y encima sobraba: con
	 * flex-wrap bajan solos cuando no caben -- a 600px caben los dos en
	 * fila, y en un movil de 360 se apilan sin que nadie se lo pida.
	 */
}

@media (prefers-reduced-motion: reduce) {
	.vtl .vtl__cta {
		transition: none;
	}

	.vtl .vtl__cta:hover,
	.vtl .vtl__cta:focus {
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * SECCIONES NUEVAS Y MAQUETAS DE PANTALLA
 *
 * Las maquetas son HTML, no capturas: pesan cero, se ven nitidas en
 * cualquier pantalla y no hay que rehacerlas cuando cambia un color.
 * ═══════════════════════════════════════════════════════════════════ */

/* --- portada a dos columnas --- */

.vtl__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
	padding: 8px 0 56px;
	text-align: left;
}

@media (min-width: 900px) {
	.vtl__hero {
		grid-template-columns: 1fr 1.05fr;
		gap: 48px;
	}
}

.vtl__hero .vtl__acciones {
	justify-content: flex-start;
}

.vtl__hero .vtl__oferta {
	margin-left: 0;
	margin-right: 0;
}

.vtl.vtl .vtl__entrada {
	margin-left: 0;
	margin-right: 0;
}

.vtl.vtl .vtl__pie-maqueta {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--vtl-gris);
	text-align: center;
}

/* --- secciones --- */

.vtl__seccion {
	margin-bottom: 56px;
}

.vtl__rejilla--tres {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- el hueco de precio --- */

.vtl__hueco {
	margin-bottom: 56px;
	padding: 32px 28px;
	border-radius: 14px;
	background: var(--vtl-tinte);
}

.vtl.vtl .vtl__escala {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vtl.vtl .vtl__escala li {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	list-style: none;
	text-align: center;
}

.vtl .vtl__escala li::before,
.vtl .vtl__escala li::marker {
	content: none;
}

/* El hueco se pinta hueco: borde discontinuo y sin fondo. Es el unico
   elemento de la pagina que representa una ausencia. */
.vtl.vtl .vtl__escala--hueco {
	border: 2px dashed var(--vtl-coral);
	background: transparent;
}

.vtl__escala-precio {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: var(--vtl-navy);
}

.vtl__escala--hueco .vtl__escala-precio {
	color: var(--vtl-coral);
}

.vtl__escala-que {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--vtl-gris);
}

.vtl.vtl .vtl__hueco-cierre {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--vtl-navy);
}

/* --- el caso y el movil, a dos columnas --- */

.vtl__caso,
.vtl__movil {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
}

@media (min-width: 900px) {
	.vtl__caso,
	.vtl__movil {
		grid-template-columns: 1fr 1fr;
		gap: 44px;
	}

	/*
	 * "Quien esta detras" se vende con foto, pero la foto es opcional. Sin
	 * ella el texto se quedaba en la columna izquierda con medio bloque
	 * vacio al lado, que se lee como una imagen que no ha cargado. Aqui se
	 * recoge a una sola columna centrada.
	 */
	.vtl__detras:not(:has(.vtl__caso-maqueta)) {
		grid-template-columns: minmax(0, 46em);
		justify-content: center;
	}
}

.vtl.vtl .vtl__pasos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtl.vtl .vtl__pasos li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vtl-gris);
	list-style: none;
}

.vtl .vtl__pasos li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--vtl-coral);
	font-weight: 700;
}

.vtl .vtl__pasos li::marker {
	content: none;
}

/* --- lo que NO incluye --- */

.vtl__bloque--no {
	border-color: var(--vtl-borde);
	background: var(--vtl-tinte);
}

.vtl__cruz {
	display: inline-flex;
	width: 26px;
	height: 26px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--vtl-tinte);
	color: var(--vtl-coral-dark);
	font-size: 14px;
	font-weight: 700;
	align-items: center;
	justify-content: center;
}

.vtl.vtl .vtl__cierre-letra {
	margin: 18px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

/* ─── MAQUETA DE NAVEGADOR ─────────────────────────────────────────── */

.vtl-maq {
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.12);
	font-size: 12px;
	line-height: 1.45;
}

.vtl-maq__barra {
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 10px 14px;
	border-bottom: 1px solid var(--vtl-borde);
	background: var(--vtl-arena);
}

.vtl-maq__punto {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vtl-borde);
}

.vtl-maq__url {
	flex: 1;
	margin-left: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: #ffffff;
	font-size: 11px;
	color: var(--vtl-gris);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vtl-maq__cuerpo {
	display: grid;
	grid-template-columns: 132px 1fr;
}

.vtl-maq__lado {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 16px 10px;
	border-right: 1px solid var(--vtl-borde);
	background: var(--vtl-arena);
}

.vtl-maq__logo {
	margin-bottom: 10px;
	padding: 0 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--vtl-navy);
}

.vtl-maq__item {
	padding: 7px 9px;
	border-radius: 7px;
	color: var(--vtl-gris);
}

.vtl-maq__item.is-activo {
	background: var(--vtl-tinte);
	color: var(--vtl-coral);
	font-weight: 600;
}

.vtl-maq__panel,
.vtl-maq__hilo {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
}

.vtl-maq__directo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px;
	border-radius: 14px;
	background: var(--vtl-navy);
	color: #ffffff;
}

.vtl-maq__eti {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.12em;
	opacity: 0.72;
}

.vtl-maq__meta {
	font-size: 11px;
	opacity: 0.82;
}

.vtl-maq__boton {
	align-self: flex-start;
	margin-top: 6px;
	padding: 6px 14px;
	border-radius: 7px;
	background: var(--vtl-coral);
	font-weight: 600;
}

.vtl-maq__tarjeta {
	padding: 12px 14px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
}

.vtl-maq__tarjeta--sangrada {
	margin-left: 18px;
}

.vtl-maq__tarjeta--equipo {
	border-color: var(--vtl-borde);
	background: var(--vtl-tinte);
}

.vtl-maq .vtl-maq__autor {
	margin: 0 0 5px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--vtl-navy);
}

.vtl-maq__rol {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--vtl-navy);
	color: #ffffff;
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.vtl-maq__cuando {
	margin-left: 6px;
	font-weight: 400;
	font-size: 10.5px;
	color: var(--vtl-gris);
}

.vtl-maq .vtl-maq__texto {
	margin: 0;
	color: var(--vtl-navy-soft);
}

.vtl-maq .vtl-maq__pie {
	margin: 8px 0 0;
	font-size: 11px;
	color: var(--vtl-gris);
}

/* ─── MAQUETA DE MÓVIL ─────────────────────────────────────────────── */

.vtl-maq__movil {
	display: flex;
	justify-content: center;
}

.vtl-maq__tel {
	position: relative;
	width: 260px;
	padding: 26px 12px 18px;
	border: 8px solid var(--vtl-navy);
	border-radius: 30px;
	background: var(--vtl-arena);
	box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
	font-size: 12px;
	line-height: 1.45;
}

.vtl-maq__muesca {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 74px;
	height: 5px;
	border-radius: 999px;
	background: var(--vtl-navy);
	opacity: 0.35;
}

.vtl-maq__aviso {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-bottom: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: var(--vtl-navy);
	color: #ffffff;
}

/* --- móvil de verdad: las maquetas anchas se estrechan --- */

@media (max-width: 620px) {
	.vtl-maq__cuerpo {
		grid-template-columns: 1fr;
	}

	.vtl-maq__lado {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid var(--vtl-borde);
	}

	.vtl-maq__logo {
		width: 100%;
		margin-bottom: 4px;
	}

	.vtl-maq__tarjeta--sangrada {
		margin-left: 10px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * BLOQUES DEL DOCUMENTO DE MONTAJE (septiembre 2026)
 * ═══════════════════════════════════════════════════════════════════ */

/* --- iconos de linea, en lugar de emoji --- */

/*
 * Heredan el color con currentColor, asi que el mismo SVG vale para el
 * bloque normal y para uno sobre fondo oscuro sin duplicar nada.
 */
.vtl .vtl__svg {
	width: 28px;
	height: 28px;
	color: var(--vtl-coral);
}

.vtl .vtl__icono {
	display: block;
	margin-bottom: 14px;
	line-height: 0;
}

/* --- linea de cierre bajo una rejilla --- */

.vtl.vtl .vtl__cierre-linea {
	margin: 24px 0 0;
	padding: 18px 22px;
	border-left: 3px solid var(--vtl-coral);
	border-radius: 0 14px 14px 0;
	background: var(--vtl-tinte);
	font-size: 15px;
	line-height: 1.6;
	color: var(--vtl-navy);
}

/* --- rejilla de dos --- */

.vtl__rejilla--dos {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- "cómo es un mes aquí dentro" --- */

/*
 * El "cuándo" en coral y en versalitas: es una etiqueta temporal, no un
 * titulo de contenido, y conviene que se lea distinto de los demas bloques.
 */
.vtl.vtl .vtl__cuando {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vtl-coral);
}

.vtl__bloque--mes {
	background: var(--vtl-tinte);
	border-color: transparent;
}

/* --- los cinco minutos: lista numerada de verdad --- */

.vtl.vtl .vtl__minutos {
	counter-reset: vtl-paso;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtl.vtl .vtl__minutos li {
	position: relative;
	margin: 0 0 14px;
	padding: 16px 20px 16px 58px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vtl-gris);
	list-style: none;
}

.vtl .vtl__minutos li::marker {
	content: none;
}

.vtl .vtl__minutos li::before {
	counter-increment: vtl-paso;
	content: counter(vtl-paso);
	position: absolute;
	left: 18px;
	top: 16px;
	display: flex;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--vtl-navy);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	align-items: center;
	justify-content: center;
}

/* --- quién está detrás --- */

.vtl .vtl__foto {
	width: 100%;
	height: auto;
	border-radius: 14px;
	object-fit: cover;
}

/* --- tira de imágenes --- */

.vtl.vtl .vtl__tira {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 0 0 56px;
}

/*
 * aspect-ratio recorta todas al mismo alto sin deformar ninguna: sin esto,
 * tres fotos de proporciones distintas dejan la fila con tres alturas y la
 * página parece rota. Y con object-position: center se recorta por los
 * bordes, no por el centro de la cara.
 */
.vtl.vtl .vtl__tira-foto {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 14px;
}

/*
 * Una sola imagen en la tira: sin esto ocupa el ancho entero y deja de ser
 * una tira para ser un banner. Se contiene y se centra hasta que haya dos.
 */
.vtl.vtl .vtl__tira-foto:only-child {
	max-width: 520px;
	margin-inline: auto;
}

/* --- dos formas de entrar --- */

.vtl__plan {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vtl.vtl .vtl__plan .vtl__bloque-titulo {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	font-size: 20px;
}

.vtl .vtl__plan-precio {
	font-size: 22px;
	font-weight: 700;
	color: var(--vtl-coral);
	font-variant-numeric: tabular-nums;
}

/* La anual destacada con el borde en color, como pide el documento. */
.vtl.vtl .vtl__plan--destacado {
	border: 2px solid var(--vtl-coral);
	background: var(--vtl-tinte);
}

/* --- cierre con dos botones --- */

.vtl__cierre-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

.vtl.vtl .vtl__cierre-sub {
	margin: 0 0 22px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
}

/*
 * El secundario es un contorno, no otro boton solido: dos botones con el
 * mismo peso obligan a decidir cual es el importante, y aqui lo es uno.
 */
.vtl.vtl .vtl__cta--fantasma {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.42);
	color: #ffffff;
}

.vtl .vtl__cta--fantasma:hover,
.vtl .vtl__cta--fantasma:focus {
	border-color: #ffffff;
	color: #ffffff;
	box-shadow: none;
}

@media (max-width: 600px) {
	.vtl__cierre-botones {
		flex-direction: column;
	}
}

/* --- el precio garantizado ---------------------------------------------- */

/*
 * Va justo debajo del boton y antes de la letra pequena: es una razon para
 * decidir hoy, no una condicion del contrato. Sin cuenta atras ni numeros
 * rojos -- la promesa es real y no necesita disfraz.
 */
.vtl.vtl .vtl__garantia {
	margin: 0 0 10px;
	padding: 10px 14px;
	border-left: 3px solid var(--vtl-coral);
	border-radius: 0 14px 14px 0;
	background: var(--vtl-tinte);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* Sobre el azul del cierre, el mismo aviso con los colores invertidos. */
.vtl.vtl .vtl__cierre .vtl__garantia--cierre {
	display: inline-block;
	margin: 0 0 20px;
	border-left-color: var(--vtl-coral);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	text-align: left;
}

/* --- aviso de apertura --------------------------------------------------- */

/*
 * Antes de abrir, esto ocupa el sitio del precio. Con caja y a mas cuerpo
 * porque es LA informacion de la pagina ese dia: cuando se puede entrar.
 */
.vtl.vtl .vtl__abre {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	font-size: 16px;
	font-weight: 600;
}

/* --- lista de espera (formulario de FluentForms) ------------------------ */

/*
 * La caja que envuelve al formulario mientras la comunidad esta cerrada.
 * Ocupa el sitio del bloque de oferta, asi que lleva su mismo ancho y su
 * mismo borde: en esos dias ES la accion de la pagina.
 */
.vtl__espera {
	max-width: 520px;
	margin: 0 0 14px;
	padding: 22px 26px;
	border: 2px solid var(--vtl-coral);
	border-radius: 14px;
	background: var(--vtl-tinte);
}

.vtl.vtl .vtl__espera-titulo {
	margin: 0 0 14px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--vtl-navy);
}

/*
 * FluentForms trae su propia hoja y no se toca ninguna clase suya: se pinta
 * por el elemento, dentro de nuestra caja. Si un dia renombran sus clases,
 * esto sigue valiendo.
 *
 * El campo a ancho completo y el boton con la forma de la marca -- el suyo es
 * un rectangulo azul que no se parece a ningun otro boton del sitio.
 */
.vtl .vtl__espera input[type="text"],
.vtl .vtl__espera input[type="email"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	font: inherit;
	font-size: 15px;
	color: var(--vtl-navy);
}

.vtl .vtl__espera input[type="text"]:focus,
.vtl .vtl__espera input[type="email"]:focus {
	outline: 3px solid var(--vtl-coral);
	outline-offset: 1px;
}

.vtl .vtl__espera button,
.vtl .vtl__espera input[type="submit"] {
	width: 100%;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--vtl-coral);
	color: #ffffff;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: background 180ms ease;
}

.vtl .vtl__espera button:hover,
.vtl .vtl__espera input[type="submit"]:hover {
	background: var(--vtl-coral-dark);
}

.vtl .vtl__espera button:focus-visible,
.vtl .vtl__espera input[type="submit"]:focus-visible {
	outline: 3px solid var(--vtl-coral);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vtl .vtl__espera button,
	.vtl .vtl__espera input[type="submit"] {
		transition: none;
	}
}

/* --- marcas colaboradoras ----------------------------------------------- */

.vtl.vtl .vtl__marcas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtl.vtl .vtl__marca {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	justify-content: space-between;
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--vtl-borde);
	border-radius: 14px;
	background: #ffffff;
	list-style: none;
}

.vtl .vtl__marca::before,
.vtl .vtl__marca::marker {
	content: none;
}

.vtl.vtl .vtl__marca-nombre {
	font-size: 15.5px;
	font-weight: 600;
	color: var(--vtl-navy);
}

.vtl .vtl__marca-nombre a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vtl .vtl__marca-nombre a:hover {
	color: var(--vtl-coral-dark);
}

/* El porcentaje en coral: es el dato por el que se lee esta lista. */
.vtl.vtl .vtl__marca-descuento {
	font-size: 14px;
	font-weight: 600;
	color: var(--vtl-coral-dark);
}