/* Estilos para la sección de videos de proyectos en sectores single post */

/* Contenedor general */
.sector-video-section {
	position: relative;
	overflow: hidden;
	border-radius: 30px;
}

/* Estilos del video */
.sector-video-wrapper video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	margin-bottom: -10px;
}

.sector-video-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    background: black;
    opacity: 0.5;
    pointer-events: none;
    z-index: 9;
}

/* Overlay de texto encima del video */
.sector-overlay {
	position: absolute;
	top: 0;
	left: 0;
	padding: 60px;
	color: white;
	z-index: 99;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.sector-overlay p, .sector-overlay h3 {
    color: white;
    margin: 0;
}

.sector-label {
    text-transform: uppercase;
    background: #F25524;
    padding: 4px 20px;
    border-radius: 100px;
    border: 2px solid white;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.sector-label img {
    width: 14px;
    height: 14px;
}

/* Botones de proyectos debajo del video */
.sector-video-buttons {
	position: absolute;
    bottom: 0;
	left: 0;
	padding: 60px;
	display: flex;
	gap: 10px;
	z-index: 99;
	width: 100%;
	flex-wrap: wrap;
}

/* Estilo base de cada botón de proyecto */
.video-switch-btn {
	background: rgba(255, 255, 255, 0.3) !important;
	padding: 6px 12px;
	cursor: pointer;
	transition: opacity 0.3s;
	opacity: .5;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Hover o botón activo */
.video-switch-btn:hover,
.video-switch-btn.active {
	opacity: 1;
}

.video-switch-btn img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    object-position: center;
    border-radius: 50%;
    border: 1px solid white;
    padding: 3px;
}

/* Botón central de reproducción */
.sector-video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.2s;
	padding: 0 !important;
	background: transparent !important;
}

/* Ícono SVG dentro del botón de play */
.sector-video-play-btn img {
	pointer-events: none;
}

/* Hover visual */
.sector-video-play-btn:hover {
	transform: translate(-50%, -50%) scale(1.05);
}

/* Ocultar botón */
.sector-video-play-btn.hidden {
	display: none;
}


@media(max-width:1199px){
    .sector-overlay, .sector-video-buttons {
    	padding: 30px 20px; 
    }
}

@media(max-width:767px){
    .sector-video-wrapper video {
    	height: 80dvh !important;
    	aspect-ratio: unset !important;
    }
    .sector-overlay {
        display: none;
    }
    .sector-overlay, .sector-video-buttons {
        justify-content: center;
        gap: 10px;
    }
}


/* Gutenberg */

/* Scoped styles solo para Gutenberg */
.editor-styles-wrapper, .elementor-widget-theme-post-content {  
  font-size: 16px;
  line-height: 1.5;
  color: #212424;
}

.editor-styles-wrapper p,
.elementor-widget-theme-post-content p{
	
}
/* Opcional: headings */
.editor-styles-wrapper h1,
.single-post .elementor-widget-theme-post-content h1,
.editor-styles-wrapper h2,
.single-post .elementor-widget-theme-post-content h2,
.editor-styles-wrapper h3,
.single-post .elementor-widget-theme-post-content h3,
.editor-styles-wrapper h4,
.single-post .elementor-widget-theme-post-content h4,
.editor-styles-wrapper h5,
.single-post .elementor-widget-theme-post-content h5,
.editor-styles-wrapper h6,
.single-post .elementor-widget-theme-post-content h6 {
  font-family: "Plus Jakarta Sans", Sans-serif !important;
	color: #033350;
	font-weight: 400;
	line-height: 1.4;
}

.editor-styles-wrapper img,
.single-post .elementor-widget-theme-post-content img{
    border-radius: 12px;
}

.editor-styles-wrapper p, 
.single-post .elementor-widget-theme-post-content p,
.editor-styles-wrapper li,
.single-post .elementor-widget-theme-post-content li{
    margin: 20px 0px;
    font-family: 'Inter', Sans-Serif !important;
    font-size: 18px !important;
	line-height: 1.5;
	color: #212424;
}

.editor-styles-wrapper h2,
.single-post .elementor-widget-theme-post-content h2{
    font-size: 30px !important;
    margin-top: 12px !important;
    color: #033350 !important;
}

.editor-styles-wrapper h3,
.single-post .elementor-widget-theme-post-content h3{
    font-size: 27px !important;
    margin-top: 12px !important;
    color: #033350 !important;
}

.editor-styles-wrapper h4,
.single-post .elementor-widget-theme-post-content h4{
    font-size: 24px !important;
    margin-top: 12px !important;
    color: #033350 !important;
}

.editor-styles-wrapper h5,
.single-post .elementor-widget-theme-post-content h5{
    font-size: 22px !important;
    margin-top: 12px !important;
    color: #033350 !important;
}

.editor-styles-wrapper h6,
.single-post .elementor-widget-theme-post-content h6{
    font-size: 20px !important;
    margin-top: 12px !important;
    color: #033350 !important;
}

@media(max-width:767px){
    .editor-styles-wrapper p,
	.single-post .elementor-widget-theme-post-content p,
	.editor-styles-wrapper li,
	.single-post .elementor-widget-theme-post-content li{
    margin-bottom: 20px;
    font-family: 'Inter', Sans-Serif !important;
    font-size: 16px !important;
	}

	.editor-styles-wrapper h2,
	.single-post .elementor-widget-theme-post-content h2{
		font-size: 22px !important;
	}

	.editor-styles-wrapper h3,
	.single-post .elementor-widget-theme-post-content h3{
		font-size: 20px !important;
	}

	.editor-styles-wrapper h4,
	.single-post .elementor-widget-theme-post-content h4{
		font-size: 18px !important;
	}

	.editor-styles-wrapper h5,
	.single-post .elementor-widget-theme-post-content h5{
		font-size: 17px !important;
	}

	.editor-styles-wrapper h6,
	.single-post .elementor-widget-theme-post-content h6{
		font-size: 16px !important;
	}
}