@media only screen and (min-width: 921px) and (max-height: 950px) {
    .post-blog .post-sidebar .sidebar-content {
        position: fixed !important;
        top: 6rem;
        transform-origin: top left;
        transform: scale(0.85); 
        width: 470px;
    }
}

@media only screen and (min-width: 921px) and (max-height: 800px) {
    .post-blog .post-sidebar .sidebar-content {
        position: fixed !important;
        transform-origin: top left;
        transform: scale(0.70);
        width: 570px;
    }
}

@media only screen and (min-width: 921px) and (max-height: 700px) {
    .post-blog .post-sidebar .sidebar-content {
        position: fixed !important;
        transform-origin: top left;
        transform: scale(0.55); 
        width: 720px;
    }
}

@media only screen and (max-width: 920px) {

	:root{
		--wp--preset--spacing--40: 30px;
	}

	header {
		height: 75px;
	}

	body:not(.home) main{
	    padding-top: 75px;
	}

	body.home .wp-block-cover:first-child span.wp-block-cover__background{
		opacity: 0.5 !important;
	}

	header #btn-menu {
		z-index: 999;
		width: 32px;
		height: 28px;
		padding: 0;
		border: 0;
		background-color: transparent;
		display: flex;
		gap: 8px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		cursor: pointer;
	}

	header.transparent #btn-menu span,
	header.transparent #btn-menu::before,
	header.transparent #btn-menu::after{
	  background-color: white;
	}

	header #btn-menu span,
	header #btn-menu::before,
	header #btn-menu::after{
	  background-color: var(--dark);
	}

	header #btn-menu span,
	header #btn-menu::before,
	header #btn-menu::after {
		content: '';
		width: 100%;
		height: 2px;
		transition: all 280ms ease;
		position: absolute;
		left: 0;
	}

	header #btn-menu::before {
		top: 5px;
	}

	header #btn-menu::after {
		bottom: 5px;
	}

	header.open #btn-menu span {
		background-color: white;
		opacity: 0;
	}

	header.open #btn-menu::before {
		background-color: white;
		transform: rotate(45deg);
		top: 50%;
	}

	header.open #btn-menu::after {
		background-color: white;
		transform: rotate(-45deg);
		top: 50%;
	}

	header .menu-principal-container {
		right: -100%;
		display: flex;
		position: fixed;
		background-color: var(--dark);
		top: 0;
		width: 100%;
		min-height: 100vh;
		align-items: end;
		justify-content: start;
		transition: all 300ms ease;
		flex-direction: column;
		padding: var(--wp--preset--spacing--40);
	}

	header .menu {
		padding-top: 80px;
		gap: 30px;
		display: flex;
		flex-direction: column;
		align-items: end;
		justify-content: center;
		text-align: end;
	}

	header .menu li a{
		color: white;
	}
		
	header .menu li a:hover,
	header li.current-menu-item a{
	    color: var(--blue-light);
	}

	header #logo, header #logo_b {
		width: 140px;
	}

	header.open .menu-principal-container {
		right: 0;
	}

	/* SUBMENÚ MÓVIL */

	header .menu .sub-menu {
		position: static; 
		background-color: transparent; 
		box-shadow: none;
		padding: 15px 0 0 0;
		margin: 0;
		min-width: auto;
		opacity: 1;
		visibility: visible;
		transform: none;
		
		display: none; 
		align-items: flex-end; 
		gap: 15px;
	}

	header .menu li.menu-item-has-children:hover > .sub-menu,
	header .menu li.menu-item-has-children:focus-within > .sub-menu {
		display: flex;
		flex-direction: column;
	}

	header .menu .sub-menu li {
		padding: 0;
	}

	header .menu .sub-menu li a {
		color: white !important;
		font-size: 16px;
		opacity: 0.7;
	}

	header .menu .sub-menu li a:hover {
		color: var(--blue-light) !important;
		opacity: 1;
	}


	header .menu li.menu-item-has-children > a::after {
		border-color: white;
	}

	.post-blog, .content-ayuda{
	    flex-direction: column;
	    gap: 50px; 
	}

	.post-blog .post-sidebar {
		max-width: 100%;
	}

	.post-blog .post-sidebar .sidebar-content, .content-ayuda .sidebar-ayuda {
		position: sticky;
		top: 10rem;
		width: 100%;
	}

	.contenedor-columnas {
	    flex-direction: column;
	    gap: 50px;
	}
	
	.contenedor-columnas .sidebar {
	    max-width: 100%;
	}

	.menu-categorias ul {
		gap: 5px;
		flex-direction: column;
	}
	
	.breadcrumbs {
		font-size: 12px !important;
	}
}


@media only screen and (max-width: 780px) {

	:root{
		--wp--preset--spacing--40: 20px;
	}

	body.home .wp-block-cover:first-child .wp-block-column:last-child .wp-block-group.is-content-justification-right{
		justify-content: start;
	}

	.reviews .swiper-wrapper {
		gap: 0px;
	}
	.reviews .swiper-button-next, .swiper-button-prev {
		top: var(--swiper-navigation-top-offset,95%) !important;
	}
	.reviews .swiper-button-next::after, .swiper-button-prev::after {
		font-size: 30px !important;
	}

	.review .cliente {
		gap: 3.5vw !important;
	}

	.stars img {
		width: 30px !important;
	}

	.dolores, .grid-ayuda, .content-ayuda {
		grid-template-columns: 1fr;
	}

	.posts-grid {
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	    gap: 50px;
	}

	.sidebar-ayuda {
	    grid-column: span 4;
	    margin-top: 10px;
	    order: 2;
	}

	.noside-ayuda {
		grid-column: span 4 / span 4;
		grid-column-start: 1;
	}

	.video-contenedor iframe {
		width: 100%;
		height: 25vh;
		 margin-top: 10px; 
	}

	.acf-faq-container, .faqs {
		max-width: 800px;
		margin: 20px auto;
	}

	.espacio-top {
		padding-top: 20px !important;
	}
	.order {
		order: 2;
	}

	.tabla-especial table th {
	    font-size: medium;
	}

	.gap-mobile{
		gap: 30px !important;
	}

	.cabecera-exito .quote {
		font-size: 20px;
	}

	.cabecera-exito .subtitulo-caso {
		font-size: 16px;
	}

	.estadisticas {
		display: flex;
		margin: 20px auto;
		flex-direction: column;
	}

	.modulos-implementados {
		grid-template-columns: repeat(1,1fr);

	}

	.cabecera-exito {
		padding: 0vw;
		width: 100%;
	}

	/* --- POPUP LEAD MAGNET MÓVIL --- */
	#leadmagnet {
	    bottom: 90px;
	    left: auto !important;
	    right: 0 !important;
	    width: max-content;
	    max-width: calc(100% - 30px);
	    border-radius: 12px 0 0 12px !important; 
	    transform: translate(100%, 30px) !important; 
	    cursor: pointer; 
	}

	#leadmagnet.show-leadmagnet {
	    transform: translate(calc(100% - 60px), 0) !important; 
	}

	#leadmagnet.show-leadmagnet.is-expanded {
	    transform: translate(0, 0) !important;
	    right: 15px !important;
	    border-radius: 12px !important;
	    width: calc(100% - 30px);
	}
	#leadmagnet .leadmagnet-content {
	    opacity: 0;
	    visibility: hidden;
	    transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	#leadmagnet.is-expanded .leadmagnet-content {
	    opacity: 1;
	    visibility: visible;
	}

	.leadmagnet-text, .leadmagnet-content a.btn {
	    font-size: 12px;
	}

	#contactar {
		right: 10px;
		bottom: 12px;
	}


}