/* Landings de linea v4 - responsive (Vecta, etc.)
 * Breakpoints Figma: 1200 / 768 / 640.
 * Sin acentos en comentarios.
 */

@media (max-width: 1200px) {
	.landing_vecta_unico_origen,
	.landing_vecta_modular,
	.landing_vecta_continuidad,
	.landing_vecta_colecciones,
	.landing_vecta_eficiencia,
	.landing_vecta_mas_alla,
	.landing_vecta_hero {
		--vecta-pad-y: 120px;
		/* Figma tipografia confirmada (label/title/body); meta pendiente */
		--vecta-fs-label: 24px;
		--vecta-fs-title: 48px;
		--vecta-fs-body: 20px;
		--vecta-fs-meta: 15px;
	}

}

@media (max-width: 768px) {
	.landing_vecta_unico_origen,
	.landing_vecta_modular,
	.landing_vecta_continuidad,
	.landing_vecta_colecciones,
	.landing_vecta_eficiencia,
	.landing_vecta_mas_alla,
	.landing_vecta_hero {
		--vecta-pad-y: 80px;
		/* text_anime tablet Figma h~82 */
		--vecta-fs-label: 20px;
		--vecta-fs-title: 36px;
		/* Antes heredaba 56px de desktop: interlineado excesivo (Un lenguaje…) */
		--vecta-lh-title: 40px;
		--vecta-fs-body: 18px;
		--vecta-fs-meta: 14px;
		/* Menu lateral pasa a franja movil: sin offset 80px */
		--vecta-menu-offset: 0px;
		--vecta-pad-x: 20px;
	}

	/* Mismo margin-bottom que Colecciones Vecta (default text_anime 40px) */
	.landing_vecta_continuidad .landing_text_anime,
	.landing_vecta_eficiencia .landing_text_anime,
	.landing_vecta_mas_alla .landing_text_anime {
		margin-bottom: 40px;
	}

	body > div.vc_container > div.vc_row.landing_vecta_unico_origen,
	body > div.vc_container > div.vc_row.landing_vecta_modular,
	body > div.vc_container > div.vc_row.landing_vecta_colecciones,
	body > div.vc_container > div.vc_row.landing_vecta_continuidad,
	body > div.vc_container > div.vc_row.landing_vecta_eficiencia,
	body > div.vc_container > div.vc_row.landing_vecta_mas_alla,
	.landing_vecta_unico_origen,
	.landing_vecta_modular,
	.landing_vecta_colecciones,
	.landing_vecta_continuidad,
	.landing_vecta_eficiencia,
	.landing_vecta_mas_alla {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Continuidad + Ingenieria movil: gris 100vw; pad = mismas guias */
	body > div.vc_container > div.vc_row.landing_vecta_continuidad,
	body > div.vc_container > div.vc_row.landing_vecta_eficiencia,
	.landing_vecta_continuidad,
	.landing_vecta_eficiencia {
		width: 100vw !important;
		left: auto !important;
		margin-left: calc((100% - 100vw) / 2) !important;
		margin-right: 0 !important;
		padding-left: calc((100vw - 100%) / 2 + 20px) !important;
		padding-right: calc((100vw - 100%) / 2 + 20px) !important;
	}

	/*
	 * Hero ≤768:
	 * - Contenedor = alto del visor (100dvh); menu fijo ~68px via padding-top.
	 * - Video cuadrado pegado al borde inferior del menu.
	 * - Bajo el video, fondo blanco del contenedor.
	 * - Overlay logos centrado en el contenedor completo (no solo el video).
	 */
	body > div.vc_container > div.vc_row.landing_vecta_hero,
	.landing_vecta_hero {
		--vecta-mobile-header: 68px;
		box-sizing: border-box !important;
		padding: var(--vecta-mobile-header) 0 0 !important;
		width: 100vw !important;
		margin-left: calc((100% - 100vw) / 2) !important;
		margin-top: 0 !important;
		aspect-ratio: auto;
		background: #fff;
		overflow: hidden;
		height: 100vh !important;
		min-height: 100vh !important;
		height: 100dvh !important;
		min-height: 100dvh !important;
	}
	.landing_vecta_hero > .vc_column_container,
	.landing_vecta_hero > .vc_column_container > .vc_column-inner,
	.landing_vecta_hero .wpb_wrapper {
		position: relative;
		height: 100% !important;
		min-height: 100% !important;
	}
	/* Video cuadrado a ancho completo, anclado arriba (bajo el menu) */
	.landing_vecta_hero .landing_vecta_hero_video {
		display: block;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: 100% !important;
		aspect-ratio: 1 / 1;
		margin: 0 !important;
		padding: 0 !important;
		overflow: hidden;
		/* recorta letterbox: abajo 5px (borde inferior residual) */
		clip-path: inset(1px 2px 5px 1px);
		-webkit-clip-path: inset(1px 2px 5px 1px);
	}
	.landing_vecta_hero .landing_vecta_hero_video .landing_video {
		display: block;
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		aspect-ratio: auto;
		overflow: hidden;
	}
	.landing_vecta_hero .landing_vecta_hero_video .landing_video_el {
		display: block;
		min-height: 0 !important;
		width: calc(100% + 10px) !important;
		height: calc(100% + 12px) !important;
		margin: -4px -5px -8px -5px !important;
		object-fit: cover;
		object-position: center top;
	}
	/* Centrado vertical respecto al contenedor (ya top/left 50% en base) */
	.landing_vecta_hero .landing_vecta_hero_overlay {
		gap: 48px;
	}

	/* Espesor 8mm: maximizar imagen, sin margenes laterales */
	.landing_vecta_unico_origen .landing_vecta_espesor_8mm {
		width: 100vw !important;
		max-width: none !important;
		margin-left: calc((100% - 100vw) / 2) !important;
		margin-right: 0 !important;
		box-sizing: border-box;
	}
	.landing_vecta_unico_origen .landing_vecta_espesor_8mm .vc_single_image-wrapper,
	.landing_vecta_unico_origen .landing_vecta_espesor_8mm img,
	.landing_vecta_unico_origen .landing_vecta_espesor_8mm .vc_single_image-img {
		display: block !important;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
	}

	/* Formatos (Unico origen): sin margenes laterales, ancho completo */
	.landing_vecta_unico_origen .landing_vecta_formatos_video {
		width: 100vw !important;
		max-width: none !important;
		margin-left: calc((100% - 100vw) / 2) !important;
		margin-right: 0 !important;
		box-sizing: border-box;
		overflow: hidden;
	}
	.landing_vecta_unico_origen .landing_vecta_formatos_video.is-visible {
		clip-path: inset(1px 2px 3px 1px);
		-webkit-clip-path: inset(1px 2px 3px 1px);
	}
	.landing_vecta_unico_origen .landing_vecta_formatos_video .landing_video_el {
		width: calc(100% + 10px) !important;
		max-width: none !important;
		margin: -4px -5px -6px -5px !important;
	}

	.landing_vecta_unico_origen .wpb_text_column p,
	.landing_vecta_modular .wpb_text_column p,
	.landing_vecta_continuidad .wpb_text_column p,
	.landing_vecta_colecciones .wpb_text_column p,
	.landing_vecta_eficiencia .wpb_text_column p,
	.landing_vecta_mas_alla .wpb_text_column p {
		max-width: none;
	}

	/* Continuidad + eficiencia + Unico origen (Multiples posibilidades):
	 * texto e img en columna a ≤768 / 640 */
	.landing_vecta_continuidad .vc_row.vc_inner,
	.landing_vecta_continuidad .vc_row_inner,
	.landing_vecta_eficiencia .vc_row.vc_inner,
	.landing_vecta_eficiencia .vc_row_inner,
	.landing_vecta_unico_origen .landing_vecta_unico_origen_inner,
	.landing_vecta_unico_origen .vc_row.vc_inner,
	.landing_vecta_unico_origen .vc_row_inner {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 40px;
	}
	.landing_vecta_continuidad .vc_row.vc_inner > .vc_column_container,
	.landing_vecta_continuidad .vc_row_inner > .vc_column_container,
	.landing_vecta_eficiencia .vc_row.vc_inner > .vc_column_container,
	.landing_vecta_eficiencia .vc_row_inner > .vc_column_container,
	.landing_vecta_unico_origen .landing_vecta_unico_origen_inner > .vc_column_container,
	.landing_vecta_unico_origen .vc_row.vc_inner > .vc_column_container,
	.landing_vecta_unico_origen .vc_row_inner > .vc_column_container {
		float: none !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.landing_vecta_formatos_list {
		flex-wrap: wrap;
		gap: 20px 16px;
	}
	.landing_vecta_formatos_list li {
		flex: 1 1 calc(33.333% - 16px);
		min-width: 140px;
	}

	.landing_vecta_hero .landing_vecta_hero_logo,
	.landing_vecta_hero .landing_vecta_hero_logo .vc_single_image-wrapper,
	.landing_vecta_hero .landing_vecta_hero_logo img {
		width: 200px !important;
		max-width: 200px !important;
	}
	.landing_vecta_hero .landing_vecta_hero_stay_true,
	.landing_vecta_hero .landing_vecta_hero_stay_true .vc_single_image-wrapper,
	.landing_vecta_hero .landing_vecta_hero_stay_true img {
		width: 160px !important;
		max-width: 160px !important;
	}

	/* Mas alla 768: fila; Absolut manda (123×35); losa+silueta juntas; ambiente se encoge */
	.landing_vecta_mas_alla > .vc_column_container > .vc_column-inner > .wpb_wrapper {
		/* Col1 = Absolut + 6mm (123 + gap + 35 ≈ 166 → 168) */
		grid-template-columns: 168px auto minmax(0, 1fr);
		column-gap: 10px;
		row-gap: 16px;
	}
	.landing_vecta_mas_alla .landing_vecta_nota_18 {
		margin-bottom: 32px !important;
	}
	.landing_vecta_logo_absolut {
		width: 168px;
	}
	.landing_vecta_logo_absolut .vc_single_image-wrapper,
	.landing_vecta_logo_absolut img {
		width: 123px !important;
		max-width: 123px !important;
		height: 35px !important;
	}
	.landing_vecta_6mm .vc_single_image-wrapper,
	.landing_vecta_6mm img {
		width: 35px !important;
		max-width: 35px !important;
		height: 35px !important;
	}
	.landing_vecta_pieza_120x280 {
		width: 168px !important;
		max-width: 168px !important;
		height: 392px !important;
		min-height: 392px !important;
	}
	.landing_vecta_pieza_120x280 p,
	.landing_vecta_pieza_120x280 .landing_vecta_pieza_label,
	p.landing_vecta_pieza_label {
		font-size: 18px !important;
	}
	.landing_vecta_silueta {
		height: 392px !important;
		width: 66px;
		margin: 0 !important;
		left: -52px;
		top: 8px;
	}
	.landing_vecta_silueta .vc_single_image-wrapper,
	.landing_vecta_silueta img {
		height: 234px !important;
	}
	.landing_vecta_mas_alla_img {
		grid-column: 3 !important;
		grid-row: 4 / 6 !important;
		margin: 0 0 0 -40px !important;
		min-height: 0;
		height: auto !important;
	}
	.landing_vecta_mas_alla_img img {
		height: 100% !important;
		object-fit: cover;
	}

	/* Sellos ISO movil: mas pequenos, fila horizontal */
	.landing_vecta_sellos_iso .wpb_wrapper,
	.landing_vecta_sellos_iso,
	.wpb_text_column.landing_vecta_sellos_iso {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 24px;
	}
	.landing_vecta_sellos_iso .landing_vecta_sello_iso_item,
	.wpb_text_column.landing_vecta_sellos_iso .landing_vecta_sello_iso_item {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		width: 72px !important;
		max-width: 72px !important;
		margin-right: 0 !important;
		flex: 0 0 72px;
	}
	.landing_vecta_sellos_iso img {
		width: 72px !important;
		max-width: 72px !important;
		height: auto !important;
	}
	.landing_vecta_sello_iso_code {
		margin-top: 10px;
		font-size: 14px;
	}

	/* Slider colecciones: menos breakout en tablet/movil */
	.landing_vecta_colecciones .landing_slider_colecciones_wrapper {
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
	}
	/* Mantener cuadradas frente a height fijo de style_responsive_v4 */
	.landing_slider_colecciones .item-slider-select-material .imagen,
	.landing_slider_colecciones .item-slider-select-material .imagen img {
		height: auto !important;
	}
	.landing_slider_colecciones .item-slider-select-material .imagen {
		aspect-ratio: 1 / 1;
	}
	.landing_slider_colecciones .item-slider-select-material .imagen img {
		height: 100% !important;
	}

}

@media (max-width: 640px) {
	.landing_vecta_unico_origen,
	.landing_vecta_modular,
	.landing_vecta_continuidad,
	.landing_vecta_colecciones,
	.landing_vecta_eficiencia,
	.landing_vecta_mas_alla,
	.landing_vecta_hero {
		--vecta-pad-y: 64px;
		/* text_anime movil Figma h~80 */
		--vecta-fs-label: 18px;
		--vecta-fs-title: 30px;
		--vecta-lh-title: 34px;
		--vecta-fs-body: 18px;
		--vecta-fs-meta: 13px;
	}

	.landing_text_anime {
		margin-bottom: 28px;
	}
	.landing_vecta_continuidad .landing_text_anime,
	.landing_vecta_eficiencia .landing_text_anime,
	.landing_vecta_mas_alla .landing_text_anime {
		margin-bottom: 28px;
	}

	/* Mas alla 640: Absolut sigue a 123×35; solo aprieta gaps y ambiente */
	.landing_vecta_mas_alla > .vc_column_container > .vc_column-inner > .wpb_wrapper {
		grid-template-columns: 168px auto minmax(0, 1fr);
		column-gap: 6px;
		row-gap: 12px;
	}
	.landing_vecta_mas_alla_img {
		margin-left: -32px !important;
	}

	.landing_vecta_hero .landing_vecta_hero_overlay {
		width: 92%;
		gap: 28px;
	}

	.landing_vecta_formatos_list li {
		flex: 1 1 calc(50% - 12px);
	}

	.landing_video_play {
		width: 56px;
		height: 56px;
		margin: -28px 0 0 -28px;
	}
	.landing_video_play:before {
		left: 21px;
		top: 17px;
		border-width: 11px 0 11px 16px;
	}
	.landing_slider_colecciones .item-slider-select-material .imagen {
		height: auto !important;
		aspect-ratio: 1 / 1;
	}
	.landing_slider_colecciones .item-slider-select-material .imagen img {
		height: 100% !important;
	}
}
