/** * Hero de los casos de estudio en movil y tablet: solo el video. * * Todas las fichas de portafolio comparten uno de dos templates dentro de * `div.project-hero`. El que se solapa es el 4914 ("Project Hero - Fullscreen * Image"), que usan 46 de las 56 fichas en ambos idiomas: en escritorio el * titulo gigante, la categoria y la marquesina conviven con el showreel a * proposito, pero por debajo de ~1025px el bloque de texto se pinta ENCIMA * del video, la categoria se sale por el borde izquierdo y el titulo se corta * por la derecha. Las otras 10 fichas usan el 6855 ("Boxed Image"), que apila * el texto DEBAJO de la imagen y se lee bien: por eso aqui no se toca. * * - b048452: columna de texto del hero (titulo h1 + categoria + descripcion). * display:none la quita del flujo; el h1 sigue en el DOM para el SEO. * - 73a0766: el boton-marquesina "CASE STUDY" fijo abajo (wd--always--show). * Enlaza a /portfolio-services/ — destino que en movil ya se alcanza por el * menu — y su marquesina tapa la franja baja del video en toda la pagina. * * El corte va en 1024px y no en 767px porque el solape es identico en tablet: * medido el 21-08-2026 en 768, 900 y 1024px, la columna cubre el 100% del * video y la categoria queda cortada. A 1100px ya es el diseno de escritorio. * * Esta hoja se encola en TODAS las paginas (ver lewebsite_project_hero_mobile * en functions.php): con Barba el no se renueva al cambiar de pagina. */ @media only screen and (max-width: 1024px) { .single-portfolio .project-hero .elementor-element-b048452 { display: none; } .single-portfolio .elementor-element-73a0766 { display: none; } } /** * El video del hero, a la medida de la pantalla (21-08-2026). * * Reportado por el usuario: en movil los videos de las fichas "se ven muy * grandes", y pidio que se vieran como el de UI/UX —una ficha cuyo hero es una * imagen y por eso siempre se vio entera—. * * Que pasaba: el contenedor 5963be7 del template 4914 fuerza min-height de * 100vh, y el reproductor Plyr rellena esa altura conservando la proporcion * del video. Con un video cuadrado eso da 896x896 px dentro de una pantalla de * 390, centrado con `transform: translate(-248px,0)` en ESTILO EN LINEA: solo * se veia la franja central, ampliada. Medido en sunrise-discovery, halo, * yardontime y concaval, todos iguales. * * El arreglo suelta la altura del hero y devuelve al reproductor el ancho de * la pantalla; el video se ve completo y la ficha sigue debajo. Los * `!important` no son decorativos: el ancho, la altura y el transform del * wrapper los escribe JavaScript en el atributo style, y sin ellos la regla * pierde. * * En escritorio no cambia nada: el showreel a pantalla completa es el diseno. */ @media only screen and (max-width: 1024px) { /* el hero deja de medir una pantalla completa */ .single-portfolio .project-hero .elementor-element-5963be7, .single-portfolio .project-hero .elementor-element-318d450, .single-portfolio .project-hero .elementor-element-3efe01d { min-height: 0 !important; height: auto !important; } .single-portfolio .project-hero .project-featured-image, .single-portfolio .project-hero .pe-video { height: auto !important; min-height: 0 !important; } /* * De aqui en adelante SOLO los videos autoalojados (`.pe-self`). * Las fichas con video incrustado —UI/UX es de Vimeo, `.pe-vimeo`— usan * una caja de proporcion con padding, y forzarle `height:auto` la rompe: * el hero quedaba en 260 px con el iframe de 936 px recortado dentro. * Esas ya se veian bien; el problema era solo el video propio. */ .single-portfolio .project-hero .pe-self .plyr { height: auto !important; min-height: 0 !important; } /* Plyr escribe width, height y transform en linea: hay que ganarle */ .single-portfolio .project-hero .pe-self .plyr__video-wrapper { width: 100% !important; height: auto !important; min-height: 0 !important; transform: none !important; } .single-portfolio .project-hero .pe-self video.p-video, .single-portfolio .project-hero .pe-self .plyr video { width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; } }