/*
Theme Name: Most
Theme URI: https://themeforest.net/user/madsparrow/portfolio
Author: Mad Sparrow
Author URI: https://themeforest.net/user/madsparrow
Description: Most Creative Agency and Portfolio Theme – It is a modern, stylish and versatile WordPress theme, ideal for creative agencies, portfolio designers, photographers, freelancers and startups. The theme offers unique animations, responsive design, SEO optimization, and powerful settings to create impressive websites without programming skills.
Version: 1.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-menu, post-formats, sticky-post, translation-ready, editor-style, featured-images, footer-widgets, theme-options, threaded-comments
Text Domain: most
Requires PHP: 7.4
Tested up to: 6.7
*/

/* ------- Home ------- */
.features-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: stretch;
}

.feature-card {
    display: flex;
    flex-direction: column;
    text-align: center;
	background: rgba(255, 255, 255, 0.49);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3.2px);
	-webkit-backdrop-filter: blur(3.2px);
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    padding:.5rem; 
    flex: 1 1 300px;
    max-width: 32%;
}

.feature-icon {
    font-size: 3.5rem;
    color: #2a2c8c;
    margin-bottom: 1rem;
}

.feature-card h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    min-height: 3rem;
}

.feature-card p {
    font-size: .9rem;
    color: #666;
    line-height: 1.6;
    margin: .4rem 0 0;
    flex-grow: 1;
}
/* ------- Home ------- */
@media (max-width: 767px) {
	.main-header__logo a, .main-header__logo svg, .main-header__logo img{
		height:unset !important;
	}
	.feature-container{
		flex-direction:column;
	}
	.feature-card{
		max-width:unset;
	}
	.elementor-element .elementor-widget-container .elementor-shortcode img#img-ppal{
		overflow: unset;
		aspect-ratio: 1/1;
		object-fit: contain;
		min-width: unset;
		border-radius: 15px;
	}
	.elementor-element .elementor-widget-container .elementor-shortcode div#imagenes{
		flex-direction: row;
		margin-top: 10px;
	}
	.elementor-element .elementor-widget-container div.elementor-shortcode{
		flex-direction: column-reverse;
	}
	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
		bottom: 0rem !important;
	}
	.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
		width: 14px !important;
	}
	.swiper-slide{
		width: 100% !important;
	}
}

@media (max-width: 992px) and (min-width: 768px){
	.elementor-element .elementor-widget-container .elementor-shortcode div#imagenes{
		margin-top: 10px;
		max-height: fit-content;
	}
	.elementor-element .elementor-widget-container .elementor-shortcode img#img-ppal{
		width: 80%;
		height: auto;
		display: flex;
		justify-content: center;
		flex: none;
		max-width: unset;
		min-width: unset;
		aspect-ratio: 1 / 1;
		overflow: unset;
		object-fit: contain;
		border-radius: 15px;
	}
}

/*CSS galería interactiva*/
#imagenes{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 500px;
	flex: 1;
}
#img-ppal{
	width: auto;
	height: 400px;
	object-fit: cover;
	transition: opacity 0.15s ease-in-out;
	border-radius: 15px;
}

img.thumb-img.bordeGaleria{
	border-radius: 5px;
	cursor: pointer;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
	width: 985px;
}

img#img-ppal{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	overflow: hidden;
	flex: 3;
	max-width: 500px;
	min-width: 500px;
}
div.elementor-shortcode{
	display: flex;
	gap: 2%;
}


/*CSS Swiper Galería interactiva videos*/
.swiper {
    width: 100%;
}

.swiper-slide {
    width: 65%;
    opacity: 0.45;
    transform: scale(0.85);
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.swiper-slide.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  cursor: default;
  z-index: 10;
}

.swiper-slide video {
    width: 100%;
    border-radius: 4px;
    display: block;
	height: 100%;
	object-fit: cover;
}
/* Corrige las bullets del paginador de videos */
.swiper-pagination{
	position:relative;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: 1.5rem;
}
/* Corrige las bullets del paginador de videos */
.video-wrapper {
    position: relative;
	height: 350px;
}

.play-pause-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid white;
  background: transparent; /* sin gris */
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.3s ease;
  filter: invert(52%) sepia(26%) saturate(906%) hue-rotate(77deg) brightness(96%) contrast(88%);
  box-shadow: 1px 1px 10px white;
}

/* Icono ▶️ por defecto */
.play-pause-btn::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-left: 2px; /* leve ajuste a la derecha */
  border-left: 14px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* Icono ⏸️ cuando está en pausa */
.play-pause-btn.paused::before {
  content: '';
  display: block;
  width: 14px;
  height: 16px;
  background: white;
  mask: linear-gradient(90deg, black 35%, transparent 35%, transparent 65%, black 65%);
  -webkit-mask: linear-gradient(90deg, black 35%, transparent 35%, transparent 65%, black 65%);
}

.swiper-slide.swiper-slide-duplicate {
  pointer-events: none;
}