.elementor-kit-13{--e-global-color-primary:#060606;--e-global-color-secondary:#FAA57A;--e-global-color-text:#FFF4F4;--e-global-color-accent:#8DA4D3;--e-global-color-9e68837:#C7758F;--e-global-color-1fd5262:#606E8F;--e-global-typography-primary-font-family:"Kalam";--e-global-typography-primary-font-size:clamp(2.027rem, 1.5844rem + 1.9672vw, 2.986rem);--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-family:"Kalam";--e-global-typography-secondary-font-size:clamp(1.802rem, 1.4854rem + 1.4072vw, 2.488rem);--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-text-font-family:"Nunito";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-line-height:1.3em;--e-global-typography-accent-font-family:"Nunito";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-line-height:1.3em;--e-global-typography-0e2e0a2-font-family:"Kalam";--e-global-typography-0e2e0a2-font-size:clamp(1.602rem, 1.3842rem + 0.9682vw, 2.074rem);--e-global-typography-0e2e0a2-font-weight:300;--e-global-typography-0e2e0a2-text-transform:uppercase;--e-global-typography-0e2e0a2-line-height:1.2em;--e-global-typography-958f684-font-family:"Kalam";--e-global-typography-958f684-font-size:clamp(1.424rem, 1.2837rem + 0.6236vw, 1.728rem);--e-global-typography-958f684-font-weight:300;--e-global-typography-958f684-text-transform:uppercase;--e-global-typography-958f684-line-height:1.2em;--e-global-typography-25aadff-font-family:"Kalam";--e-global-typography-25aadff-font-size:clamp(1.266rem, 1.1857rem + 0.3569vw, 1.44rem);--e-global-typography-25aadff-font-weight:300;--e-global-typography-25aadff-text-transform:uppercase;--e-global-typography-25aadff-line-height:1.2em;--e-global-typography-e682bd6-font-family:"Kalam";--e-global-typography-e682bd6-font-size:clamp(1rem, 0.9423rem + 0.2564vw, 1.125rem);--e-global-typography-e682bd6-font-weight:400;--e-global-typography-e682bd6-text-transform:uppercase;--e-global-typography-e682bd6-line-height:1.3em;--e-global-typography-c25e38f-font-family:"Lora";--e-global-typography-c25e38f-font-size:1rem;--e-global-typography-c25e38f-font-weight:400;--e-global-typography-c25e38f-text-transform:none;--e-global-typography-c25e38f-line-height:1.3em;--e-global-typography-3b8cf95-font-family:"Nunito";--e-global-typography-3b8cf95-font-size:0.889rem;--e-global-typography-3b8cf95-font-weight:400;--e-global-typography-3b8cf95-text-transform:none;--e-global-typography-3b8cf95-line-height:1.3em;--e-global-typography-5e1cd39-font-family:"Lora";--e-global-typography-5e1cd39-font-size:0.889rem;--e-global-typography-5e1cd39-font-weight:400;--e-global-typography-5e1cd39-text-transform:none;--e-global-typography-5e1cd39-line-height:1.3em;--e-global-typography-157b3d8-font-family:"Nunito";--e-global-typography-157b3d8-font-size:0.79rem;--e-global-typography-157b3d8-font-weight:400;--e-global-typography-157b3d8-text-transform:none;--e-global-typography-157b3d8-line-height:1.3em;--e-global-typography-e022ac8-font-family:"Lora";--e-global-typography-e022ac8-font-size:0.79rem;--e-global-typography-e022ac8-text-transform:none;--e-global-typography-e022ac8-font-style:italic;--e-global-typography-e022ac8-line-height:1.3em;--e-global-typography-eca9d78-font-family:"Lora";--e-global-typography-eca9d78-font-size:0.889rem;--e-global-typography-eca9d78-font-weight:400;--e-global-typography-eca9d78-text-transform:none;--e-global-typography-eca9d78-font-style:italic;--e-global-typography-eca9d78-line-height:1.3em;--e-global-typography-447adce-font-family:"Lora";--e-global-typography-447adce-font-size:0.8889rem;--e-global-typography-447adce-font-weight:400;--e-global-typography-447adce-text-transform:none;--e-global-typography-447adce-font-style:italic;--e-global-typography-447adce-line-height:1.3em;--e-global-typography-eebabda-font-family:"Kalam";--e-global-typography-eebabda-font-size:1rem;--e-global-typography-eebabda-font-weight:400;--e-global-typography-eebabda-text-transform:none;--e-global-typography-eebabda-line-height:1.3em;--e-global-typography-d339f26-font-family:"Kalam";--e-global-typography-d339f26-font-size:1rem;--e-global-typography-d339f26-font-weight:400;--e-global-typography-d339f26-text-transform:uppercase;--e-global-typography-d339f26-line-height:1.3em;--e-global-typography-6191819-font-family:"Kalam";--e-global-typography-6191819-font-size:0.889rem;--e-global-typography-6191819-font-weight:400;--e-global-typography-6191819-text-transform:uppercase;--e-global-typography-6191819-line-height:1.3em;--e-global-typography-fc7bb6a-font-family:"Lora";--e-global-typography-fc7bb6a-font-weight:400;--e-global-typography-fc7bb6a-text-transform:none;--e-global-typography-fc7bb6a-font-style:italic;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{background-color:var( --e-global-color-primary );font-family:var( --e-global-typography-e682bd6-font-family ), Sans-serif;font-size:var( --e-global-typography-e682bd6-font-size );font-weight:var( --e-global-typography-e682bd6-font-weight );text-transform:var( --e-global-typography-e682bd6-text-transform );line-height:var( --e-global-typography-e682bd6-line-height );color:var( --e-global-color-text );border-style:groove;border-width:2px 2px 2px 2px;border-color:var( --e-global-color-text );border-radius:50px 50px 50px 50px;}.elementor-kit-13 button:hover,.elementor-kit-13 button:focus,.elementor-kit-13 input[type="button"]:hover,.elementor-kit-13 input[type="button"]:focus,.elementor-kit-13 input[type="submit"]:hover,.elementor-kit-13 input[type="submit"]:focus,.elementor-kit-13 .elementor-button:hover,.elementor-kit-13 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-text );border-style:groove;border-width:2px 2px 2px 2px;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-13{--e-global-typography-e682bd6-line-height:1.3em;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-e682bd6-font-size );line-height:var( --e-global-typography-e682bd6-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-13{--e-global-typography-primary-font-size:clamp(2.027rem, 1.5844rem + 1.9672vw, 2.986rem);--e-global-typography-primary-line-height:1.1em;--e-global-typography-secondary-font-size:clamp(1.802rem, 1.4854rem + 1.4072vw, 2.488rem);--e-global-typography-secondary-line-height:1.1em;--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:1.3em;--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1.3em;--e-global-typography-0e2e0a2-font-size:clamp(1.602rem, 1.3842rem + 0.9682vw, 2.074rem);--e-global-typography-0e2e0a2-line-height:1.1em;--e-global-typography-958f684-font-size:clamp(1.424rem, 1.2837rem + 0.6236vw, 1.728rem);--e-global-typography-958f684-line-height:1.2em;--e-global-typography-25aadff-font-size:clamp(1.266rem, 1.1857rem + 0.3569vw, 1.44rem);--e-global-typography-25aadff-line-height:1.2em;--e-global-typography-e682bd6-line-height:1.4em;--e-global-typography-c25e38f-font-size:1rem;--e-global-typography-c25e38f-line-height:1.3em;--e-global-typography-3b8cf95-font-size:0.889rem;--e-global-typography-3b8cf95-line-height:1.3em;--e-global-typography-5e1cd39-font-size:0.889rem;--e-global-typography-5e1cd39-line-height:1.3em;--e-global-typography-157b3d8-font-size:0.79rem;--e-global-typography-157b3d8-line-height:1.3em;--e-global-typography-e022ac8-font-size:0.79rem;--e-global-typography-e022ac8-line-height:1.3em;--e-global-typography-eca9d78-font-size:0.889rem;--e-global-typography-eca9d78-line-height:1.3em;--e-global-typography-447adce-font-size:0.889rem;--e-global-typography-447adce-line-height:1.3em;--e-global-typography-eebabda-font-size:1rem;--e-global-typography-eebabda-line-height:1.3em;--e-global-typography-d339f26-font-size:0.889rem;--e-global-typography-d339f26-line-height:1.3em;--e-global-typography-fc7bb6a-font-size:0.889rem;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:var( --e-global-typography-e682bd6-font-size );line-height:var( --e-global-typography-e682bd6-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Estilos para el título completo (contenedor) */ .fondo-texto-inline { /* Opcional: Centra el texto si lo deseas, ya que el fondo se ajustará al contenido */ text-align: center; } /* Estilos para el texto real dentro del título */ .fondo-texto-inline .elementor-heading-title { display: inline; /* O inline-block, si necesitas más control vertical */ background-color: #0000006B; /* Color de fondo del texto - ¡CÁMBIALO! */ color: #333333; /* Color del texto - ¡CÁMBIALO! */ padding: 5px 5px; /* Espaciado alrededor del texto - ¡AJÚSTALO! */ line-height: 1; /* Asegura que el padding no se superponga entre líneas */ box-decoration-break: clone; /* IMPORTANTE para que el fondo se aplique correctamente en cada línea */ /* --- NUEVA LÍNEA PARA EL BORDE REDONDEADO --- */ border-radius: 20px; /* Redondea las esquinas con un radio de 30 píxeles */ } /* ============================================================ FONDO UNIVERSO - AJUSTE PARA TABLETS ============================================================ */ /* --- 1. ESCRITORIO Y TABLETS (Pantallas grandes y medianas) --- */ /* Cambiamos el límite a 600px para que las tablets entren aquí */ @media (min-width: 601px) { body { background-image: url('https://majopuga.com/wp-content/uploads/2026/02/fondo-universo.avif') !important; background-position: top center !important; background-size: 100% auto !important; background-repeat: repeat-y !important; background-attachment: scroll !important; background-color: #060606 !important; image-rendering: auto !important; filter: none !important; } } /* --- 2. SÓLO MÓVILES (Pantallas pequeñas) --- */ @media (max-width: 600px) { body { background-image: url('https://majopuga.com/wp-content/uploads/2026/02/fondo-universo-celular.avif') !important; background-position: top center !important; background-size: 100% auto !important; background-repeat: repeat-y !important; background-attachment: scroll !important; background-color: #060606 !important; image-rendering: -webkit-optimize-contrast !important; filter: none !important; } } /* Desactivar stickers solo en móviles pequeños */ /* --- 3. LIMPIEZA Y STICKERS .elementor-background-overlay, .elementor-section-overlay { display: none !important; } @media (max-width: 600px) { #universo-dinamico-scroll { display: none !important; visibility: hidden !important; } } */ /* 1. FONDO NEGRO INSTANTÁNEO EN TODA LA WEB */ /* 1. Evitar el salto visual del fondo entre páginas*/ html { background-color: #060606 !important; Color } body { transition: background-color 0.3s ease; } /* 1. Suavizar la entrada del Off-Canvas y evitar el salto */ .e-off-canvas, .elementor-off-canvas { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; height: 100vh !important; } /* 2. Evitar que el contenido 'tiemble' al abrirse */ body.e-off-canvas--shown { overflow: hidden; position: fixed; width: 100%; } /* 3. Forzar fluidez: usamos el mismo bezier para entrada y salida */ .e-off-canvas__content { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; will-change: transform; } /* 4. EL PARCHE: Subimos un poco el delay para cubrir el tiempo del script */ .e-off-canvas:not(.e-off-canvas--shown) { transition: opacity 0.4s ease, visibility 0.4s !important; transition-delay: 0.2s !important; /* Sincronizado con los 200ms del script */ } /* DESACTIVAR UNIVERSO DINÁMICO EN MÓVILES @media (max-width: 768px) { #universo-dinamico-scroll { display: none !important; visibility: hidden !important; pointer-events: none !important; } }*/ /* 1. Escondemos el cursor personalizado por defecto */ .cursor-personalizado { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* Para que no interfiera con los clics */ } /* 2. Solo lo mostramos cuando el mouse entra en movimiento */ body.mouse-active .cursor-personalizado { opacity: 1; } /* Esto mata la flecha blanca desde el primer segundo */ * { cursor: none !important; } html, body { cursor: none !important; } /* 1. Evitar el salto visual del fondo entre páginas html { background-color: #060606 !important; Color } body { transition: background-color 0.3s ease; }*/ /* 2. Corregir el Zoom y el parpadeo de las imágenes del carrusel */ .e-n-carousel .swiper-slide img { /* Forzamos que la imagen no "baile" al cargar */ transform: scale(1) !important; transition: opacity 0.5s ease-in-out !important; /* Solo fade, nada de zoom */ backface-visibility: hidden; /* Evita micro-saltos en navegadores Webkit */ will-change: opacity; } /* 3. Prevenir que el contenedor del carrusel se expanda de golpe */ .elementor-widget-n-carousel { min-height: 400px; /* Ajusta a la altura promedio de tus obras */ background-color: transparent; } .contenedor-ilustracion { height: 100vh; height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); display: flex; /* Convierte el contenedor en flexible */ flex-direction: column; /* Alinea los hijos en columna */ justify-content: center; /* Centra verticalmente lo que haya dentro */ overflow: hidden; /* Evita que pequeños desbordamientos creen scroll innecesario */ } .majo-foto { width: 100% !important; display: flex !important; justify-content: center !important; align-items: center !important; padding-bottom: 4%; } .majo-foto img { max-height: 90vh !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* ================================================================ 1. SISTEMA DE MARCOS DE ALTO TOTAL ================================================================*/ @media (max-width: 1024px) { /* El padre crece según la cantidad de imágenes */ .contenedor-fijo-movil { height: auto !important; display: block !important; overflow: visible !important; } /* EL MARCO: Ahora ocupa el 100% del alto visual disponible */ .foto-proyecto { height: 65svh !important; /* Llena toda la pantalla vertical */ width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; /* Margen mínimo entre fotos cuando hay varias */ margin-bottom: 4px !important; overflow: hidden !important; position: relative !important; box-sizing: border-box !important; } /* La Imagen: Máximo aprovechamiento del espacio */ .foto-proyecto img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } } /* ================================================================ 2. CONTENEDOR ILUSTRACIÓN (GESTIÓN DE FLUJO) ================================================================ */ @media (max-width: 1024px) { .contenedor-ilustracion { height: auto !important; min-height: 100vh; display: flex !important; flex-direction: column !important; overflow: visible !important; } } /* ================================================================ 3. AJUSTE ESPECÍFICO PARA CELULAR (767px) ================================================================ */ @media (max-width: 767px) { /* Mantenemos el alto de pantalla completa también en móvil */ .contenedor-fijo-movil .foto-proyecto { height: 72svh !important; /* margin-bottom: 2px !important; Margen casi imperceptible entre fotos */ } /* Ajuste para que el último marco no pegue con lo que sigue */ .contenedor-fijo-movil .foto-proyecto:last-child { margin-bottom: 32px !important; /* Margen inferior mayor solo al final */ } /* Liberamos los contenedores de Elementor para que no limiten el alto */ .contenedor-fijo-movil .elementor-widget-container, .contenedor-fijo-movil .elementor-image { height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* --- ESTILOS DE LA FLECHA SWIPE (VERSIÓN ESTABLE) --- */ @media (max-width: 1024px) { .swipe-hint-fixed { position: fixed !important; top: 50% !important; left: 50% !important; /* El transform inicial es clave para el centrado */ transform: translate(-50%, -50%) !important; width: fit-content !important; pointer-events: none; z-index: 999999; opacity: 0; animation: quickFade 3s ease-in-out forwards 2s; } .swipe-hint-fixed svg { filter: drop-shadow(0px 4px 8px rgba(0,0,0,0.4)); /* Aplicamos la animación de vaivén */ animation: bounceCenter 1.2s ease-in-out 1.2s 2; } @keyframes quickFade { 0% { opacity: 0; } 20% { opacity: 0.9; } 80% { opacity: 0.9; } 100% { opacity: 0; visibility: hidden; } } @keyframes bounceCenter { 0%, 100% { left: 0; } 50% { transform: translateX(20px); } 50% { transform: translateX(-20px); } } } } /* Transición suave para el cambio de proyecto */ .contenedor-swipe { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; will-change: transform, opacity; } /* Ocultar en escritorio para evitar ruidos visuales */ @media (min-width: 1025px) { .swipe-hint-fixed { display: none !important; } } .swipe-hint-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .swipe-label { background-color: rgba(6, 6, 6, 0.7) !important; color: #fff4f4 !important; font-family: 'Lora', sans-serif; font-style: italic; font-size: 0.79rem !important; font-weight: 400; padding: 3px 6px; border-radius: 30px; margin-top: 8px; white-space: nowrap; letter-spacing: 0.5px; box-shadow: 0 6px 15px rgba(0,0,0,0.5); opacity: 1 !important; } /* 1. LÓGICA DE DIAPOSITIVAS ACF: Oculta slides vacíos */ .swiper-slide:not(:has(img[src])), .swiper-slide:has(img[src=""]), .swiper-slide:has(img[src*="placeholder"]) { display: none !important; } /* Escritorio por defecto */ .e-n-carousel .swiper-slide { width: 100% !important; min-width: 100% !important; max-width: 100% !important; } /* 2. EFECTOS VISUALES Y TRANSICIONES */ .majo-foto img { opacity: 0; animation: fadeInLimpio 0.6s ease-out forwards !important; } @keyframes fadeInLimpio { to { opacity: 1; } } .es-carrusel-real .swiper-slide { transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) !important; } .swiper-pagination:hover ~ #custom-cursor { display: none !important; } .es-carrusel-real .elementor-swiper-button-next:hover { transform: translateX(5px) !important; } .es-carrusel-real .elementor-swiper-button-prev:hover { transform: translateX(-5px) !important; } .es-carrusel-real .swiper-slide-next, .es-carrusel-real .swiper-slide-prev { opacity: 0.3 !important; transform: scale(0.9) !important; z-index: 99999 !important; /* Capa máxima */ pointer-events: auto !important; /* Obligatorio para que el clic atraviese capas */ } /* Forzamos que el icono interno de la flecha también sea clicable */ .es-carrusel-real .elementor-swiper-button-next i, .es-carrusel-real .elementor-swiper-button-prev i, .es-carrusel-real .elementor-swiper-button-next svg, .es-carrusel-real .elementor-swiper-button-prev svg { pointer-events: none; /* Que el clic pase al contenedor padre (el botón) */ } /* 3. CURSOR PERSONALIZADO */ body.cursor-grab-mode #custom-cursor { width: 50px !important; height: 50px !important; background-image: url('data:image/svg+xml;utf8,') !important; background-size: contain !important; z-index: 999999 !important; pointer-events: none !important; } .es-carrusel-real .elementor-swiper-button-next, .es-carrusel-real .elementor-swiper-button-prev { cursor: none !important; display: flex !important; width: 60px !important; height: 60px !important; z-index: 100 !important; } /* 4. AJUSTES RESPONSIVE (TABLET Y MÓVIL) */ @media (max-width: 1024px) { .e-n-carousel .elementor-main-swiper { touch-action: pan-y !important; } .e-n-carousel .swiper-slide img { pointer-events: none !important; -webkit-user-drag: none !important; } } @media (max-width: 767px) { .e-n-carousel .swiper-wrapper { display: block !important; height: auto !important; transform: none !important; } .e-n-carousel .swiper-slide { display: block !important; width: 100% !important; height: auto !important; margin-bottom: 4px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none !important; } .e-n-carousel .swiper-slide img { width: 100% !important; height: auto !important; display: block !important; opacity: 1 !important; } .e-n-carousel .elementor-swiper-button, .e-n-carousel .swiper-pagination { display: none !important; } } /* Seleccionamos el contenedor al que le pusiste la clase */ .mi-navegacion-responsiva .elementor-post-navigation { display: flex !important; flex-wrap: wrap !important; /* Permite el salto de línea */ gap: 8px; /* Espacio entre los botones cuando saltan */ } /* Forzamos a que los elementos hijos (prev/next) tengan un ancho mínimo */ .mi-navegacion-responsiva .elementor-post-navigation__prev, .mi-navegacion-responsiva .elementor-post-navigation__next { flex: 1 1 180px; /* Si el espacio es menos de ~360px, saltará uno abajo */ display: flex; flex-direction: column; /* Alinea flecha y título verticalmente si quieres */ } /* Alineamos el botón de 'Siguiente' a la derecha cuando hay espacio */ .mi-navegacion-responsiva .elementor-post-navigation__next { text-align: left; align-items: flex-start; } /* En celulares muy pequeños, centramos todo para que se vea profesional */ @media (max-width: 480px) { .mi-navegacion-responsiva .elementor-post-navigation__prev, .mi-navegacion-responsiva .elementor-post-navigation__next { text-align: center; align-items: center; flex: 1 1 100%; /* Ocupan todo el ancho de la pantalla */ } } /* 1. EFECTO CASCADA (Retraso de aparición) */ /* Solo funciona si tienes activada una Animación de Entrada en el widget */ .mi-grid-dinamico .e-loop-item:nth-child(3n+1) { animation-delay:1s !important; } .mi-grid-dinamico .e-loop-item:nth-child(3n+2) { animation-delay: 0.5s !important; } .mi-grid-dinamico .e-loop-item:nth-child(3n+3) { animation-delay: 1.5s !important; } /* 2. DESFASE DE COLUMNAS (Para romper la línea recta) */ @media (min-width: 1025px) { /* La columna 2 baja un poco */ .mi-grid-dinamico .e-loop-item:nth-child(3n+2) { margin-top: 36px !important; } /* La columna 3 baja más */ .mi-grid-dinamico .e-loop-item:nth-child(3n+3) { margin-top: 72px !important; } } /* --- CONFIGURACIÓN PARA TABLET (2 COLUMNAS) --- */ /* Se activa entre 768px y 1024px */ @media (min-width: 768px) and (max-width: 1024px) { /* Efecto Cascada 2 col (Alternado) */ .mi-grid-dinamico .e-loop-item:nth-child(even) { animation-delay: 0.5s !important; } .mi-grid-dinamico .e-loop-item:nth-child(odd) { animation-delay: 1s !important; } /* Desfase 2 col */ /* Reseteamos cualquier margen previo y solo bajamos la segunda columna */ .mi-grid-dinamico .e-loop-item { margin-top: 16 !important; } .mi-grid-dinamico .e-loop-item:nth-child(even) { margin-top: 40px !important; } } /* Agrégalo al final de todo el código que ya tienes */ @media (min-width: 1025px) { .mi-grid-dinamico { /* Este espacio extra compensa los 72px que bajamos la 3ra columna */ padding-bottom: 100px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .mi-grid-dinamico { /* En tablet bajamos menos (40px), así que con 60px de aire basta */ padding-bottom: 60px !important; } } .boton-muerto { pointer-events: none !important; /* Hace que el mouse lo ignore por completo */ /*cursor: default !important; /* Quita la "manito" de clic */ } .columna-imagenes img { /* Esto obliga al navegador a ignorar el width="1080" height="1080" del HTML */ width: auto !important; height: auto !important; aspect-ratio: auto !important; object-fit: scale-down !important; } /* Fuerza la lectura de proporciones en formatos modernos como AVIF */ .columna-imagenes img[src*=".avif"], .columna-imagenes img { aspect-ratio: attr(width) / attr(height) !important; /* Usa los atributos nativos */ aspect-ratio: auto !important; /* Si el anterior falla, fuerza el original */ height: auto !important; width: auto !important; } /* --- HORIZONTALES --- */ .columna-imagenes .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 43dvh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-imagenes .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height:69dvh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } /* --- SOLO PARA TABLET --- */ @media (min-width: 768px) and (max-width: 1024px) { .columna-imagenes .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 22dvh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-imagenes .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 37dvh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } } @media (min-width: 1025px){ /* 1. La base: permite que la transición funcione al "regresar" */ .columna-imagenes .elementor-widget-image img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } /* 2. El efecto: solo el crecimiento al pasar el ratón */ .columna-imagenes .elementor-widget-image:hover img { transform: scale(1.08); } } /* RESPONSIVE */ @media (max-width: 767px) { .columna-imagenes .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 31vh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-imagenes .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 50vh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } } /* ----------COLUMNA-LIBROS----------------- */ /* Fuerza la lectura de proporciones en formatos modernos como AVIF .columna-libros img[src*=".avif"], .columna-libros img { aspect-ratio: auto !important; height: auto !important; width: auto !important; } */ /* --- HORIZONTALES --- */ .columna-libros .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 60dvh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-libros .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 90dvh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } /* --- SOLO PARA TABLET --- */ @media (min-width: 768px) and (max-width: 1024px) { .columna-libros .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 70dvh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-libros .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 65dvh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } } @media (min-width: 1025px){ /* 1. La base: permite que la transición funcione al "regresar" */ .columna-libros .elementor-widget-image img { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important; } /* 2. El efecto: solo el crecimiento al pasar el ratón .columna-libros .elementor-widget-image:hover img { transform: scale(1.08); } */ } /* RESPONSIVE */ @media (max-width: 767px) { .columna-libros .widget-horizontal img { width: auto !important; /* Permite que la imagen dicte su ancho */ max-width: 100% !important; height: auto !important; max-height: 90vh !important; /* Límite de altura sin relleno */ aspect-ratio: auto !important; object-fit: scale-down !important; /* Se asegura de que quepa sin estirar */ } /* --- VERTICALES --- */ .columna-libros .widget-vertical img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: 90vh !important; /* Límite de altura para verticales */ aspect-ratio: auto !important; object-fit: scale-down !important; } } /* ----------foto-LIBROS----------------- */ /* --- CONFIGURACIÓN DEL WIDGET --- */ /* Forzamos al widget a medir solo lo que mide la imagen (anula el grow del padre) */ .foto-libro.elementor-widget-image { width: auto !important; max-width: 100% !important; flex: 0 0 auto !important; display: flex !important; justify-content: center !important; } /* Limpieza de contenedores internos de Elementor */ .foto-libro .elementor-widget-container, .foto-libro .elementor-image { width: auto !important; height: auto !important; } /* --- TAMAÑOS DIFERENCIADOS --- */ /* Si el script detecta que es VERTICAL */ .foto-libro.es-vertical img { height: 90dvh !important; /* Altura predominante */ width: auto !important; max-width: 75vw !important; object-fit: contain !important; } /* Si el script detecta que es HORIZONTAL */ .foto-libro.es-horizontal img { height: 80dvh !important; /* Altura reducida */ width: auto !important; max-width: 85vw !important; object-fit: contain !important; } /* --- Scrol horizontal libros y etodo eso --- */ /* --- BASE SEGURA Y LIMPIA --- */ .mdw-horizontal-scroll { position: relative; display: block; width: 100%; } .mdw-horizontal-scroll > .e-con, .mdw-horizontal-scroll > .e-container { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; height: 100vh !important; width: max-content !important; /* Fuerza al contenedor a expandirse con el contenido */ transition: none !important; } .mdw-horizontal-scroll.fixed > .e-con { position: fixed !important; top: 0; left: 0; width: 100vw !important; z-index: 5; } .mdw-horizontal-scroll.bottom > .e-con { position: absolute !important; bottom: 0 !important; top: auto !important; } .mdw-horizontal-scroll > .e-con, .mdw-horizontal-scroll > .e-container { gap: 0 !important; margin: 0 !important; padding: 0 !important; } /* BARRA DE PROGRESO */ .mdw-horizontal-scroll-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 4px; background: #fff4f4; transform: scaleX(0); transform-origin: left; z-index: 10000; pointer-events: none; transition: opacity 0.4s ease-out; opacity: 1; } /* AL LLEGAR AL FINAL */ .mdw-horizontal-scroll.bottom .mdw-horizontal-scroll-bar { position: absolute !important; bottom: 0 !important; top: auto !important; /* NUEVO: Se desvanece al llegar al final */ opacity: 0; } /* FOTOS */ .foto-libro { flex: 0 0 auto !important; margin-right: 0px; /* Asegura espacio entre libros */ } .foto-libro img { display: block; max-width: none !important; /* Evita que Elementor las colapse */ } /* 1. Resetear los contenedores de Elementor para que no bloqueen el z-index */ .elementor-widget, .elementor-widget-container, .elementor-column, .elementor-column-wrap { z-index: auto !important; /* Esto rompe la "burbuja" que te impide subir */ } .columna-hero { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; /* Se pega al borde superior */ display: flex !important; justify-content: center !important; /* Centro horizontal */ align-items: center !important; /* Centro vertical */ z-index: 999999 !important; pointer-events: none; /* Para que no bloquee los clics en los libros */ } /* 2. Darle jerarquía real a la imagen */ #foto-hero { object-fit: contain !important; display: block !important; margin: auto !important; will-change: transform; } /* El contenedor horizontal se queda abajo */ .mdw-horizontal-scroll { position: relative; z-index: 1 !important; /* Lo mantenemos en 1 */ background: transparent !important; } /* --- SOLO LA ANIMACIÓN --- */ @keyframes moverIzquierda { from { transform: translate3d(0vw, 0%, 0); /* El -50% la mantiene centrada */ } to { transform: translate3d(-60vw, 0%, 0); /* Aquí también */ } } @media (min-width: 1025px) { #foto-hero { /* Vincula la animación a la sección del scroll horizontal */ view-timeline-name: --scrollHorizontal; view-timeline-axis: block; animation: moverIzquierda linear both; animation-timeline: --scrollHorizontal; /* LA CLAVE DEL RETRASO: 'contain 0%' hace que empiece justo cuando la sección horizontal asoma por el borde inferior de la pantalla. */ animation-range: entry 200% exit 200%; } } /* Asegúrate de que tu sección horizontal tenga este nombre asignado */ .mdw-horizontal-scroll { view-timeline-name: --scrollHorizontal; } /* Solo para la barra: cuando la sección llega al final, se vuelve absoluta para subir */ .mdw-horizontal-scroll.bottom .mdw-horizontal-scroll-bar { position: absolute !important; bottom: 0 !important; top: auto !important; } /* --- lightbox personalizado --- */ /* 1. FONDO NEGRO 80% */ .elementor-lightbox { background-color: rgba(6, 6, 6, 0.8) !important; } /* 2. OCULTAR TODO EXCEPTO EL CIERRE */ .elementor-lightbox .elementor-slideshow__header > *:not(.elementor-lightbox-close-button), .elementor-lightbox .elementor-slideshow__footer, .elementor-lightbox .elementor-lightbox-image-data { display: none !important; } /* 3. ICONO DE CIERRE FINO Y #FFF4F4 */ .elementor-lightbox .eicon-close { color: #FFF4F4 !important; font-size: 20px !important; font-weight: 100 !important; -webkit-text-stroke: 0.1px #FFF4F4; opacity: 0.8; } /* 4. COMPORTAMIENTO DEL NUEVO ZOOM */ .elementor-lightbox-image { cursor: zoom-in; transition: transform 0.3s ease-out; } .elementor-lightbox-image.img-zoom-custom { cursor: zoom-out; transform: scale(2.2) !important; /* Ajusta este número para más o menos zoom */ z-index: 9999; } /* Evitar que la imagen se salga del contenedor al ampliar */ .elementor-lightbox-item { overflow: hidden !important; } /* Cambia el cursor por defecto a una lupa de zoom */ .elementor-lightbox-image { cursor: zoom-in !important; } /* Cuando ya tiene zoom, el cursor cambia a una lupa de alejar */ .elementor-lightbox-image.img-zoom-custom { cursor: zoom-out !important; } /* Lupa GRANDE con círculo negro (64px) */ .elementor-lightbox-image { cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23060606'/%3E%3Cg fill='none' stroke='%23FFF4F4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(16, 16) scale(1.5)'%3E%3Ccircle cx='9' cy='9' r='6'%3E%3C/circle%3E%3Cline x1='19' y1='19' x2='13.5' y2='13.5'%3E%3C/line%3E%3Cline x1='9' y1='6' x2='9' y2='12'%3E%3C/line%3E%3Cline x1='6' y1='9' x2='12' y2='9'%3E%3C/line%3E%3C/g%3E%3C/svg%3E") 32 32, auto !important; } /* Lupa Zoom Out GRANDE (64px) */ .elementor-lightbox-image.img-zoom-custom { cursor: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23060606'/%3E%3Cg fill='none' stroke='%23FFF4F4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(16, 16) scale(1.5)'%3E%3Ccircle cx='9' cy='9' r='6'%3E%3C/circle%3E%3Cline x1='19' y1='19' x2='13.5' y2='13.5'%3E%3C/line%3E%3Cline x1='6' y1='9' x2='12' y2='9'%3E%3C/line%3E%3C/g%3E%3C/svg%3E") 32 32, auto !important; } /* icnoco lupa en imagen */ /* 1. Preparamos el contenedor del widget */ .zoom-custom { position: relative !important; display: inline-block !important; } /* 2. Creamos la lupa usando CSS puro sobre la clase existente */ .zoom-custom::after { content: ""; /* Crea un elemento extra */ position: absolute !important; top: 16px !important; right: 16px !important; width: 64px !important; height: 64px !important; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23060606' fill-opacity='0.6'/%3E%3Cg fill='none' stroke='%23FFF4F4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' transform='translate(16, 16) scale(1.4)'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cline x1='19' y1='19' x2='13.5' y2='13.5'/%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 64px !important; z-index: 9999 !important; pointer-events: none !important; display: block !important; } /* ---cruz lightbox personalizado --- */ /* 1. Ocultamos el icono original de Elementor */ .e-font-icon-svg.e-eicon-close.dialog-close-button-icon, .elementor-lightbox-close-button svg { display: none !important; } /* 2. Aplicamos tu X con efecto mano alzada y rotación sutil */ html body .elementor-lightbox .dialog-close-button { background-color: rgba(6, 6, 6, 0.7) !important; border-radius: 50% !important; width: 64px !important; height: 64px !important; top: 0px !important; right: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; /* Tu SVG con trazo blanco y filtro de vibración */ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08' numOctaves='2' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='1.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23f)' stroke='%23FFF4F4' stroke-width='4' stroke-linecap='round'%3E%3Cline x1='25' y1='25' x2='75' y2='75'/%3E%3Cline x1='75' y1='25' x2='25' y2='75'/%3E%3C/g%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 45px !important; /* Transición suave para que el giro no sea brusco */ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease !important; } /* 3. Efecto Hover: Rotación de solo 15 grados y un pelín de escala */ html body .elementor-lightbox .dialog-close-button:hover { background-color: rgba(0, 0, 0, 1) !important; transform: rotate(5deg) scale(1.05) !important; } /* 2. El Año (Columna 1) */ .cv-lista-majo .cv-date { grid-column: 1 !important; position: relative !important; /* Eliminamos el absolute */ color: #F09F75 !important; font-size: 0.889rem; line-height: 1.2 !important; margin-bottom: 1px; white-space: normal !important; /* Si el año es largo, salta de línea sin romper nada */ display: block !important; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Kalam'; font-style: normal; font-weight: normal; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/kalam-v17-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/kalam-v17-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Kalam'; font-style: normal; font-weight: 300; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/kalam-v17-latin-300.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Nunito'; font-style: normal; font-weight: normal; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/07/nunito-v31-latin-regular.woff2') format('woff2'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Lora'; font-style: normal; font-weight: normal; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: normal; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-italic.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 500; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-500italic.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-700.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 700; font-display: swap; src: url('https://majopuga.com/wp-content/uploads/2025/06/lora-v36-latin-700italic.woff2') format('woff2'); } /* End Custom Fonts CSS */