Resumen
Revisé la versión de celular de la página de Adrián en vertical (320, 360, 390 y 430 px) y con el teléfono girado (844×390). Lo hicieron 5 revisores y un verificador que intentó desmentirlos, y después comprobé en vivo lo que cambió entre tanto. Lo básico está bien: nada se sale de lo ancho de la pantalla, no hay fotos rotas ni errores y la página se desliza fluida. Quedan 42 detalles confirmados: 1 importante, 17 medianos y 24 menores.
Lo más importante:
1. El carrete de pósters cambia de película mientras estás leyendo su texto.
2. Con el teléfono girado, la cabecera y la barra de accesos tapan casi media pantalla, y el retrato, el póster y la foto del visor no caben.
3. Las cintas de prensa y de gobierno, y la fila de logos, no se pueden detener ni deslizar con el dedo.
4. En la galería, las fotos verticales quedan como tiras delgadas.
5. «Request this photo in HD» te deja lejos del formulario.
6. Con el visor o el diálogo abiertos, la página de atrás se mueve y al cerrar ya no estás donde estabas.
Sobre Prensa y reconocimientos, que me pediste cambiar: en el celular en vertical esa parte no tiene animación. Ahí sale la lista sencilla con laurel, como se decidió el 26-sep. El aplauso de 2025 y los pies de 2026 solo se ven en PC o con el teléfono girado, y girado el aplauso nunca se enciende (punto 20). Para verlos al revisar, gira el teléfono o míralos en PC.
Esto ya estaba corregido cuando lo comprobé en vivo:
- El menú de accesos llega hasta «Contact» y «Work & prints».
- La bio abre recortada con «Read the full story».
- El póster va centrado.
- En vertical, la leyenda de la sala ya no tapa los títulos; el crédito de las fotos va al final.
- El margen del panel de contacto es igual al del resto.
- «More coverage» muestra las 10 notas más nuevas con «Show all».
Dos avisos para cuando revises:
- La página ya está en su versión pública 0.5.0: sin notas amarillas y con el formulario encendido. Si tocas «Work with Adrián», el embudo te cuenta como visitante real, y si envías el formulario llega de verdad a info@whatsincabo.com (punto 42).
- Lo que solo se puede confirmar en un iPhone real es el punto 41: abre el visor con la barra de Safari a la vista y fíjate si el botón dorado se ve completo.
Capturas: los nombres son de /tmp/claude-1000/-config-workspace-whats-in-cabo-/55d58d5f-b15a-4b72-a697-4186dcd1afae/scratchpad/adr-build/qa/movil/. Se tomaron a las 12:30, antes de publicar la 0.5.0: todavía traen notas amarillas, y en las que dicen «top» la imagen no empieza en la portada. Cuando la página cambió después, indico también una captura más reciente:
- «adv/cap/…» está en /tmp/claude-1000/-config-workspace-whats-in-cabo-/55d58d5f-b15a-4b72-a697-4186dcd1afae/scratchpad/adv/cap/
- «qa/final/…» está en /tmp/claude-1000/-config-workspace-whats-in-cabo-/55d58d5f-b15a-4b72-a697-4186dcd1afae/scratchpad/adr-build/qa/final/
No cambié nada en el servidor ni en el código.
Ojo: la revisión se hizo sobre la vista previa, antes de publicar. Después ya se corrigieron el pie de fotos de la sala en vertical, el margen de Contact, «More coverage» (ahora 30 menciones con «Show all» / «Show fewer») y los premios en fila simétrica. Las capturas pueden traer todavía recuadros amarillos: eran de la vista previa.
Lo que está bien
- Nada se sale de lo ancho de la pantalla en ningún tamaño (320, 360, 390, 430 y girado), no hay fotos rotas y no hubo errores de JavaScript en ninguna prueba.
- Bajar con el dedo por toda la página es fluido: 28 arrastres de arriba abajo sin atorarse.
- Ya corregido y comprobado: el menú de accesos llega con el dedo hasta «Contact» y «Work & prints», marca la sección activa, y al saltar ningún título queda tapado.
- Portada en vertical: se ven completas las dos ballenas y la gaviota, sin marca de agua. El nombre entra entero (44 px en 320, 56 en 430) y los dos botones miden 48 px, a todo el ancho.
- Retratos bien encuadrados en el arco (no se corta cara, dron ni cámara). Tocar una barrita sí cambia la foto.
- La bio se lee cómoda (17 px; el primer párrafo a 19 px) y ya abre recortada con «Read the full story». About bajó de 4,314 a 2,724 px en 320.
- Carrete: pósters sin recorte, ya centrados y en el tamaño correcto. Las flechas miden 46 px y los botones «Watch…» 48 px. Deslizar con el dedo sobre el póster funciona sin bloquear el scroll, y al girar el teléfono conserva el póster.
- Sala «More projects»: fotos a pantalla completa bien encuadradas y con cambio suave. La película encendida se lee muy bien y tocar una fila la abre con texto legible y un enlace de 44 px. En vertical, el crédito de las fotos ya no tapa los títulos.
- Prensa: tocar un recorte, o su copia en la cinta, abre el visor con la captura legible y «Read the original ↗» de 48 px. «More coverage» va en una columna, con cada nota a todo el ancho, y ahora muestra las 10 más nuevas con «Show all».
- Galería: las fotos se ven al 99–100 % de su original, sin recorte.
- Visor en vertical: foto a todo el ancho. Se desliza con el dedo, las flechas de 52 px quedan abajo al alcance del pulgar, la X mide 48 px y tocar el fondo lo cierra.
- Contacto: tarjetas de redes de 52 px con los nombres completos (incluso «Adrián Matías De Antoni» en 320). La foto está bien encuadrada en vertical y el margen lateral ya es igual al del resto.
- «Work with Adrián» en vertical: los pasos caben completos de 320 a 430, las opciones miden 44–52 px y Back, la X y tocar fuera funcionan.
- Formulario: campos de 48 px con letra de 16 px (el iPhone no hace zoom al tocar), una sola columna y «Send request» a todo el ancho. Tocar el texto de privacidad marca la casilla, y si se envía vacío no manda nada y avisa qué falta.
Los 42 detalles, del más importante al menor
11altaProjects · carrete de pósters
El carrete cambia de película mientras lees su texto
Qué se ve: En celular, el carrete va así: póster, flechas y debajo el texto. Para leer la descripción hay que bajar y el póster sale de la pantalla, pero el carrete sigue cambiando cada 4 s. El texto que estás leyendo se borra y aparece el de otra película, sin que veas su póster. Con el lector de voz del iPhone (VoiceOver) se anuncia un proyecto nuevo cada 4 s.
Dónde: Todas (320 a 430 y girado)
Propuesta: Que el carrete solo avance solo mientras el póster está a la vista; que se detenga unos 10 s si tocas el texto; y que el lector de voz anuncie solo cuando la persona cambia de película. Opcional: en celular, 6 a 7 s por póster en lugar de 4.
Detalle técnico
1) En ≤900 px, reloj(ventana…) con umbral de ~0.6, en lugar de observar todo el carrete con 0.35 (adrian.js, reloj(carrete…)). 2) touchstart en .adr-carrete__textos → relC.reinicia(10000). 3) aria-live="off" durante el avance automático y "polite" con flecha o deslizamiento (zona de textos en pagina.php). Medido: con el póster ya fuera de la pantalla, el carrete pasó de 0 a 2 en 9 s (320) con el bloque visible al 49–66 %.
Capturas: m320-projects-1.png (póster arriba, texto abajo); más clara adv/cap/m320-carrete-leyendo.png (texto de otra película sin su póster)
Los botones y el nombre quedan abajo de la primera pantalla
Qué se ve: La foto de las ballenas ocupa más de la mitad del alto de la pantalla. En celulares chicos (320 y 360), los botones «See his work» y «Request HD material» quedan abajo de la primera pantalla; en 390 quedan justo en la orilla. Con el teléfono girado, la primera pantalla es solo foto y ni siquiera se ve el nombre de Adrián.
Dónde: 320, 360 y 390 en vertical; 844×390 girado (ahí es lo más notorio). En 430 sí se ven.
Propuesta: En celular, bajar un poco el alto de la foto para que el nombre y el primer botón asomen en la primera pantalla, sin sacar del encuadre a las ballenas ni a la gaviota. Con el teléfono girado, dejar la foto baja para que el nombre se vea de entrada.
Detalle técnico
@media (max-width:760px){ #wic-adr .adr-hero__foto{height:clamp(240px,46svh,520px)} } (hoy 58svh). Girado: @media (orientation:landscape) and (max-height:500px){ #wic-adr .adr-hero__foto{height:210px} }. Medido: primer botón en y=705 (320×640), 751–799 (360×780) y 796–844 (390×844); H1 en y=437 con pantalla de 390 de alto.
Capturas: m320-top-1.png (botones ya abajo). Más claras: adv/cap/m320-inicio.png y adv/cap/land844-inicio.png (en qa/movil las capturas «top» no empiezan en la portada).
Con el teléfono girado, la barra tapa casi media pantalla
Qué se ve: Con el teléfono girado, la barra pegada lleva en 2 renglones la miga «Home › Adrián De Antoni» y los accesos. Junto con la cabecera del sitio tapan 173 de 390 px (44 % de la pantalla), y al bajar la barra sigue tapando 93 px. Se come el retrato, el póster y los años de los reconocimientos.
Dónde: 844×390 (girado). En vertical está bien.
Propuesta: Con el teléfono girado, usar la misma barra de un renglón que ya tiene el celular en vertical: solo los accesos, con la miga arriba y fuera de la barra. Los 7 accesos caben en una línea, así que la barra bajaría a unos 48 px.
Detalle técnico
Extender el bloque «Barra en celular» (final de adrian.css) a @media (max-width:760px), (orientation:landscape) and (max-height:500px) { #wic-adr .adr-migas-movil{display:block} #wic-adr .adr-crumbs--pc{display:none} #wic-adr .adr-bar__in{min-height:0} … }, ajustando el margen de .adr-jump al --gut de 32 px. Medido hoy en vivo: barra [0,666] de 844×93; accesos de 634 px sin desbordar.
Capturas: adv/cap/land844-barra-arriba.png y adv/cap/land844-rec.png (no hay en qa/movil)
El retrato no se puede pasar con el dedo
Qué se ve: En celular lo natural es deslizar la foto con el dedo, pero no pasa nada: el retrato solo avanza solo o tocando las barritas de abajo, que miden 22 px de alto y cuesta atinarles.
Dónde: Todas (320 a 430 y girado)
Propuesta: Que el retrato se pueda deslizar con el dedo, igual que el carrete de pósters, y agrandar la zona que se puede tocar de las barritas sin cambiar cómo se ven.
Detalle técnico
En adrian.js (bloque de retratos), agregar touchstart/touchend en .adr-retratos__marco: si |dx|>40 y |dx|>|dy|, llamar mover(pos±1,true) y relR.reinicia(6000). Para ir hacia atrás desde 0, saltar sin animación al clon y animar a nR-1. CSS: #wic-adr .adr-barra{height:32px;padding:14px 0} (la raya visible sigue de 3 px). Medido: translate3d igual antes y después del gesto en 320, 390 y 844; barras de 90×22 (320) y 113×22 (390).
Capturas: m320-about-0.png (barritas bajo el retrato)
Con el teléfono girado, el retrato no cabe y sobra media pantalla
Qué se ve: Con el teléfono girado, el retrato mide 441 px de alto en una pantalla de 390, y encima están la cabecera y la barra: nunca se ve completo. Además, el retrato y la lista usan solo la columna izquierda y dejan la mitad derecha en blanco durante casi pantalla y media.
Dónde: 844×390
Propuesta: Con el teléfono girado, usar dos columnas como en PC: el retrato más chico a la izquierda (unos 230 px de ancho, que sí cabe) y la bio a la derecha.
Detalle técnico
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){ #wic-adr .adr-about__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} #wic-adr .adr-about__media{max-width:none} #wic-adr .adr-retratos__marco, #wic-adr .adr-retratos__barras{width:min(100% - 7px,230px)} }. El arco queda de unos 230×287. Medido: marco de 353×441 y columna de 360 en una pantalla de 844.
Capturas: land844-top-0.png (retrato cortado y mitad derecha vacía); más reciente adv/cap/land844-about1.png
Con el teléfono girado, el póster no cabe y su texto queda en otra pantalla
Qué se ve: Con el teléfono girado, el póster mide 385 px de alto en una pantalla de 390, con la cabecera y la barra encima: nunca se ve completo. Su texto queda en la pantalla siguiente, así que póster y texto nunca están juntos mientras el carrete sigue cambiando.
Dónde: 844×390
Propuesta: Con el teléfono girado, poner el póster más chico a la izquierda y su texto a la derecha, todo en una pantalla.
Detalle técnico
@media (orientation:landscape) and (max-height:500px){ #wic-adr .adr-carrete{ grid-template-columns:var(--cw) minmax(0,1fr); grid-template-areas:"ventana textos" "ventana ctrl"; --cw:calc((100svh - var(--cab) - 110px) / 1.4141 + 60px); } }. El póster queda de unos 200–210 px de ancho. Medido: ventana de 300×385.
Capturas: land844-projects-0.png y land844-projects-1.png; más reciente adv/cap/land844-carrete.png
Nada indica que las películas se abren al tocarlas
Qué se ve: Cada película de «More projects» se abre al tocarla y muestra su descripción y el enlace para verla («Watch on Wahu ↗», «Watch on Visit Los Cabos ↗»). Pero en celular no hay flecha, «+» ni subrayado que indique que se puede tocar, así que casi nadie va a descubrir los enlaces.
Dónde: Todas
Propuesta: Agregar un indicador pequeño en dorado junto al título («+» o «Details ↓») que cambie a «−» al abrir.
Detalle técnico
El summary tiene list-style:none y ::-webkit-details-marker oculto, sin ::after. Agregar .adr-row__t::after (o un span) de 12–13 px en dorado, que cambie a «−» o gire con [open]. El toque ya funciona: abre con un enlace de 199×44 px.
Capturas: m320-projects-3.png y m430-projects-3.png (filas sin ninguna señal)
Títulos apagados que casi no se leen sobre fotos claras
Qué se ve: Solo se enciende la película que cruza el centro de la pantalla; las demás quedan en blanco al 50 %. Sobre fotos claras, como las rocas de la Sierra de la Laguna, esos títulos casi no se leen.
Dónde: 320 a 430 (girado, menos)
Propuesta: En celular, dar más blanco a los títulos apagados y oscurecer un poco la foto de fondo.
Detalle técnico
≤760: títulos apagados en rgba(255,255,255,.72) en lugar de .5. Velo más oscuro en .adr-sala__escena::after: linear-gradient(180deg,rgba(6,16,28,.5),rgba(6,16,28,.7)) (hoy .38→.58). Opcional: text-shadow 0 1px 12px rgba(0,0,0,.7) en .adr-row__t. Contraste medido: ~2.8:1 sobre el fondo medio y 1.85:1 sobre las rocas; el mínimo es 3:1.
Capturas: m430-projects-2.png y m320-projects-2.png; en la versión pública, adr-build/qa/pub/m390-projects-2.png
Con el teléfono girado, el crédito de la foto tapa los títulos
Ya en parte: En vertical ya quedó (26-sep: el pie flotante se quitó en celular y va una línea fija al final). Girado sigue pendiente.
Qué se ve: En vertical esto ya está resuelto: la píldora «Photo by Adrián De Antoni in…» ya no sale y el crédito va en una línea al final de la lista (lo comprobé hoy en vivo). Con el teléfono girado la píldora sigue fija abajo a la derecha y los títulos, etiquetas y enlaces pasan por debajo: queda letra sobre letra en todas las posiciones que se midieron.
Dónde: 844×390 (en vertical ya está corregido)
Propuesta: Con el teléfono girado, hacer lo mismo que en vertical: esconder la píldora y dejar el crédito al final de la lista.
Detalle técnico
Aplicar también en (orientation:landscape) and (max-height:500px) la regla de ≤760: #wic-adr .adr-sala__cap{display:none} #wic-adr .adr-sala__creditos{display:block}. Medido: choques en 11 de 11 posiciones en 844; hoy en 844 la píldora sigue con display:block.
Capturas: land844-projects-3.png; más reciente adv/cap/land844-sala-choque-0.png. Vertical ya corregido: qa/final/m390-sala-final.png
En vertical no hay animación; girado, el aplauso nunca se enciende
Aviso: En vertical no hay animación por tu decisión del 26-sep; lo que queda es el aplauso girado.
Qué se ve: En el celular en vertical no sale ninguna animación. En su lugar sale la lista sencilla con laurel, como se decidió el 26-sep. La versión animada (trofeo con confeti, aplauso de 2025 y escena de 2026) solo sale en PC y con el teléfono girado, y girado falla de tres formas: las tarjetas van en 2 columnas y la del aplauso (Tuma Umutú 2025) nunca se enciende al bajar; el confeti de 2023 se dispara al cargar la página, antes de que llegues; y solo el título abre la fuente. Si revisas en tu teléfono en vertical, no vas a ver el «clap clap» ni los pies de 2026.
Dónde: Vertical 320 a 430: lista sencilla. Girado 844×390: versión animada con las fallas.
Propuesta: Elegir una sola versión para todos los teléfonos. Recomiendo usar la lista sencilla también con el teléfono girado: es lo que ya decidiste para celular y quita las tres fallas de golpe. Si prefieres la animación en celular, hay que mostrar una tarjeta a la vez para que el aplauso sí se vea.
Detalle técnico
(a) Cambiar la condición del bloque «Reconocimientos en celular» (adrian.css) a @media (max-width:760px), (max-height:500px). (b) Si se quedan animadas en el teléfono girado: en el callback de ioRc (adrian.js) elegir la entrada con el centro más cerca del centro de la pantalla, no la última; con angosto.matches, quitar is-activa de recs[0] al iniciar para que el confeti salga al llegar; y en .adr-rec__titulo a::after{content:'';position:absolute;inset:0;z-index:1} agregar « ↗». Medido girado: se encienden la 0, la 1 y la 3; la 2 (aplauso) nunca. Los ajustes del aplauso (palabras «clap» junto a las manos, golpe sin cruzarse) van con el cambio que pediste.
Capturas: adv/cap/m320-rec-simple.png (vertical) y adv/cap/land844-rec.png (girado: el aplauso apagado y FIC La Paz encendida)
Las cintas de prensa no se detienen ni se deslizan con el dedo
Qué se ve: Las dos cintas corren solas y con el dedo no se detienen ni se deslizan: la pausa solo funciona con mouse. Quien quiere leer un titular largo lo tiene que leer en movimiento, y si se le pasó una nota debe esperar la vuelta completa: casi 1 minuto en prensa y hasta minuto y medio en gobierno. Tocar una tarjeta sí abre el original correcto.
Dónde: Todas (320 a 430 y girado)
Propuesta: Mantener el movimiento pero dar control al dedo: que la cinta se pause al tocarla, que se pueda deslizar a mano y que vuelva a correr unos segundos después de soltarla. El mismo arreglo sirve para la fila de logos (punto 29).
Detalle técnico
En (hover:none), no añadir .listo y usar la regla que ya existe, .adr-marquesina:not(.listo){overflow-x:auto}, con scroll-snap-type:x mandatory, avanzando con scrollBy({left:ancho de tarjeta,behavior:'smooth'}) cada 4 s mientras nadie la toque. Mínimo: pointerdown de cualquier tipo → quitar .corre y reponerla 3–6 s después de touchend (hoy pausaMouse solo actúa con pointerType mouse). Vueltas medidas: prensa 47.9–63.1 s, gobierno 74–98 s.
Capturas: m320-press-2.png y m390-press-2.png
El crédito de Adrián en los posts de gobierno no se puede leer
Qué se ve: Al tocar una publicación de la Secretaría, el visor la muestra a todo el ancho pero muy baja (294×90 px en 320, 359×109 en 390). El texto de Facebook que da crédito a Adrián («Productor Ejecutivo Cinematográfico Adrian Matias De Antoni») queda de 4 a 5 px y no se puede leer, y es justo la prueba que la sección promete.
Dónde: 320 a 430
Propuesta: En celular, mostrar esa imagen más alta, que se pueda deslizar de lado y que abra ya en la parte del texto. Otra opción es preparar un segundo recorte solo con el texto del post y mostrarlo como segunda imagen del visor.
Detalle técnico
Para data-adr-lb='gob' en ≤760: la imagen a ~62svh de alto con max-width:none, dentro de un contenedor con overflow-x:auto, y scrollLeft ~60 % al abrir. La imagen original es de 1280×390.
Capturas: m390-press-3.png (cinta de gobierno); visor en adv/cap/m320-visor-gob.png
Las fotos verticales quedan como tiras delgadas
Qué se ve: En celular el mosaico mantiene las filas de 3 fotos del PC. Como cada foto conserva su forma, las verticales quedan como tiras delgadas: en 320, la mitad de las fotos miden menos de 100 px de ancho (el Arco al atardecer, las palmas, el mar con niebla…). Se ven completas, pero muy chicas.
Dónde: 320 a 430 (en 390 todavía hay 4 bajo 100 px)
Propuesta: En celular, armar filas de máximo 2 fotos agrupadas por su forma, para que cada fila mida unos 180–280 px de alto. Las fotos siguen completas, sin recorte.
Detalle técnico
En el ancho de celular del mosaico (hoy el corte es 700 px): una función wic_adr_mosaico_movil() en PHP que cierre la fila cuando la suma de --r esté entre 1.3 y 2.2, o un script con matchMedia que reparta las piezas con la misma regla. Medido en la versión pública: en 320, F03 79, F01 79, F02 77, F04 73 y F26 98 px de ancho; en 390, F03 97, F01 97, F02 94 y F04 89.
Capturas: m320-gallery-1.png (tiras en la primera fila) y m390-gallery-0.png
Con el teléfono girado, la foto del visor sale diminuta
Qué se ve: Justo cuando alguien gira el teléfono para ver una foto más grande, el visor la muestra diminuta: 206×180 px, el 11 % de la pantalla. El pie de foto y el botón dorado ocupan más espacio que la foto.
Dónde: 844×390
Propuesta: Con el teléfono girado, poner la foto casi a todo el alto, con el pie y el botón en una sola línea abajo y la X más chica en la esquina. La foto quedaría de unos 330 px de alto, unas 3 veces más grande.
Detalle técnico
@media (orientation:landscape) and (max-height:500px){ #wic-adr .adr-lb__in{padding:8px 64px} #wic-adr .adr-lb__fig img{max-height:calc(100dvh - 88px)} #wic-adr .adr-lb__fig figcaption{font-size:13px} #wic-adr .adr-lb__acc{position:absolute;right:12px;bottom:10px} }. Causa: max-height:calc(100vh - 210px) más un padding superior de 56 px.
Capturas: land844-visor.png
Solo se ven 2 o 3 logos y la fila no se puede detener
Qué se ve: En celular caben 2 o 3 logos a la vez y la vuelta de los 12 tarda 35 s; con el dedo no se puede pausar ni deslizar. Quien pasa en unos segundos ve Wahu, Copa y Subaru, y casi nunca National Geographic, CONANP, Sectur, Pronatura, Coparmex o Lifestyle. Entre los logos queda mucho aire (unos 80 px), porque se encogen pero su caja no.
Dónde: 320 y 360 (2 logos a la vez), 390 y 430 (2 y medio a 3)
Propuesta: Logos un poco más chicos y más juntos para que quepan 3 o 4, y la misma pausa y arrastre con el dedo que en las cintas de prensa. Otra opción: dos filas de 6 que corran en sentidos opuestos.
Detalle técnico
@media (max-width:600px): margen entre logos de 52 a 28 px; cambiar transform:scale(.82) por alturas reales (img de 40 px, cuadrados de 56 px); pausa en touchstart y reanudar 3 s después. Volver a llamar fija() en window.load: hoy la duración se calcula antes de que carguen los logos (35 s en lugar de ~51 s con data-vel=42).
Capturas: m320-collaborators-0.png (solo Copa y Subaru)
La página de atrás se mueve con el visor o el diálogo abiertos
Qué se ve: Con el visor de fotos o el diálogo «Work with Adrián» abiertos, si deslizas el dedo, la página de atrás se mueve de 235 a 650 px. Al cerrar ya no estás donde estabas: por ejemplo, abres el diálogo en Contact y al cerrarlo estás en el formulario.
Dónde: Todas en vertical
Propuesta: Congelar la página de atrás mientras el visor o el diálogo estén abiertos, y devolverte al mismo punto al cerrar.
Detalle técnico
html:has(#wic-adr dialog[open]){overflow:hidden} y #wic-adr dialog{overscroll-behavior:contain}. Si en iPhone todavía se arrastra: al abrir (showModal) guardar scrollY y fijar el body (position:fixed; top:-Ypx; width:100%); en close quitarlo y hacer scrollTo(0,Y). Medido: 540 px (320) y 652 px (390) arrastrando sobre el fondo del diálogo; 400 y 235 px dentro del visor.
Capturas: m390-dialogo-trabajo-1.png (diálogo abierto; el movimiento se midió en vivo con toques reales)
«Request this photo in HD» te deja lejos del formulario
Qué se ve: El botón «Request this photo in HD» del visor sí llena el campo «Which photo?», pero te deja al inicio de la sección (título, texto y aviso de licencia). El campo ya lleno queda fuera de la pantalla y el brillo dorado que lo marca pasa sin que nadie lo vea, así que el visitante no sabe que su foto ya quedó puesta. Pasa lo mismo con «Prints & HD photos» (en Contact) y «Use our request form» (en el diálogo): el formulario empieza casi una pantalla más abajo.
Dónde: Todas (320 a 430 y girado)
Propuesta: Que esos botones lleven directo al formulario, con el campo de la foto a la vista y resaltado.
Detalle técnico
Poner un id al <form> (p. ej. id="adr-hd-form" con scroll-margin-top:80px) y apuntar ahí «Prints & HD photos», «Use our request form» y el botón del visor (hoy todos van a #request-hd en pagina.php). En pideFoto() (adrian.js), después de dlg.close(), hacer campo.scrollIntoView({block:'center'}) y resaltar después. Medido: campo en y=1,018 (320×640), 967 (390×844) y 797 (844×390).
Capturas: m390-request-hd-0.png (lo que se ve al llegar); más reciente adv/cap/m320-tras-hd.png
El celular descarga de más al abrir y la portada tarda con red lenta
Qué se ve: Sin mover la página, el celular ya descarga de 4.1 a 5.3 MB en unas 140 peticiones. Entre eso van capturas de prensa y gobierno con sus copias para las cintas, los logos y fotos de la sala, todos de 3,000 a 14,000 px más abajo, además de cosas del tema que esta página no usa (Google Maps, WooCommerce, fuentes). Con 4G lento, la foto de la portada aparece a los 7–11 s.
Dónde: Todas (medido en 390 con 4G lento)
Propuesta: Cargar las imágenes de las cintas y de la sala solo cuando la persona se acerca, y quitar de esta página lo del tema que no usa. La foto de la portada se queda como está: su tamaño es el correcto.
Detalle técnico
(a) Crear las copias [data-clon] de cada cinta dentro de un IntersectionObserver con rootMargin de ~1200px, o quitar src/srcset de las copias hasta que se acerquen. (b) Mover activar(conImagen[0], true) de la sala al callback de ioS. (c) En el mu-plugin, solo para la página 5835: wp_dequeue_script/style de google-maps, mylisting-google-maps, wc-*/woocommerce, sourcebuster, select2, vue y jquery-ui-slider si no se usan (probar que la cabecera y sus señales sigan funcionando). No tocar el sizes del hero: el <source> de celular con 740px es correcto (la foto se pinta a ~735 px CSS). Medido: LCP 7.2–11.0 s, DOMContentLoaded 10.9–12.9 s, 40 scripts y 45 hojas de estilo; con adrian.js bloqueado cargan 6 imágenes, con él 41.
Capturas: Sin captura (medición de red)
Renglones sueltos en los textos de la portada
Qué se ve: En la pantalla más angosta, la línea de arriba deja «SUR» solo en un renglón. En el subtítulo queda un punto «·» colgando al final de «Film Director & Producer», y el título en cursiva brinca abajo repartido en dos renglones.
Dónde: 320 (el punto colgando también de 360 a 430)
Propuesta: Apretar un poco el espaciado de la línea de arriba para que quepa en un renglón. En celular, poner «Nature Documentary Filmmaker» en su propio renglón y quitar el punto.
Detalle técnico
@media (max-width:360px){ #wic-adr .adr-hero__eyebrow{letter-spacing:.14em} } (hoy mide 30 px de alto en 320 y 15 px en los demás anchos). En ≤760: envolver el «·» en un span con display:none y dar display:block a .adr-hero__sub em.
Capturas: adv/cap/m320-inicio.png y adv/cap/m320-hero2.png
«About» lleva al retrato y el título sale mil px abajo
Qué se ve: En celular, About empieza con el retrato y la lista «What he does». Su título («About · in his own words / The Baja beyond the postcard») aparece unos 970 px más abajo. Al tocar «About» en la barra caes en el retrato, mientras que en las otras 6 secciones el título se ve de inmediato.
Dónde: 320 a 430 en vertical
Propuesta: Opcional: en celular, poner el título de About arriba del retrato, como en las demás secciones. Si prefieres que abra con la foto, se deja como está.
Detalle técnico
A ≤900 px: #wic-adr .adr-about__text{display:contents}, order:-2 al kicker y order:-1 al h2 (ajustar el gap del grid y los márgenes); o duplicar el encabezado arriba del retrato solo en celular. Medido: kicker a 971 px del inicio de la sección en 320 y a 961 en 390.
Capturas: m320-about-0.png y m320-about-1.png
En celulares grandes la lista queda desalineada con la bio
Qué se ve: En celulares grandes, la columna del retrato y de «What he does» se queda en 360 px pegada a la izquierda, mientras la bio de abajo usa todo el ancho. Las rayas de la lista terminan antes que el texto de la bio y se ve desalineado.
Dónde: 430 (cualquier celular de más de unos 392 px)
Propuesta: Que la lista use todo el ancho y que solo el retrato conserve su tope. Si lo prefieres, también se puede centrar el retrato.
Detalle técnico
@media (max-width:760px){ #wic-adr .adr-about__media{max-width:none} #wic-adr .adr-retratos__marco, #wic-adr .adr-retratos__barras{max-width:360px} } (opcional margin-inline:auto). Medido en 430: columna y lista de 360, bio de 398.
Capturas: m430-about-0.png y m430-about-1.png
La lista de servicios va en letra más chica que el resto
Qué se ve: La lista «What he does» va a 13.5 px, contra 17 px de la bio de abajo. Se lee, pero se ve apretada y más chica que todo lo demás.
Dónde: Todos los celulares
Propuesta: Subirla a 15 px solo en celular (la sección crece unos 60 px).
Detalle técnico
@media (max-width:760px){ #wic-adr .adr-servicios li{font-size:15px;line-height:1.5} }
Capturas: m320-about-1.png
La cita sale con un ícono gris de comillas y centrada
Qué se ve: Al abrir «Read the full story», la cita «A camera can be a way of caring for a place.» sale centrada, con un ícono gris grande de comillas encima (lo mete el tema del sitio), y queda desalineada con su raya dorada. Además va justo después del párrafo que termina con la misma frase, así que parece repetida.
Dónde: Todas (se ve con la bio abierta)
Propuesta: Quitar el ícono del tema y alinear la cita a la izquierda. Tú decides si se mueve a otro punto de la bio (por ejemplo, después del 2.º párrafo) para que no se lea dos veces seguidas.
Detalle técnico
#wic-adr .adr-quote p::before{content:none;display:none} #wic-adr .adr-quote p{text-align:left}. Hoy el ::before usa Material Icons de 50 px, en un bloque de 65 px de alto.
Capturas: m320-about-5.png; más reciente adv/cap/m320-cita.png
La cinta que dice quién es Adrián va en letra muy chica
Qué se ve: La cinta que corre con «Film director ▸ Producer ▸ Nature documentary filmmaker ▸ Explorer ▸ Drone pilot…» va a 9.5 px, en mayúsculas y en movimiento. Se alcanza a leer, pero es la letra más chica de la página para un mensaje clave. «CABO FILMS» y «▸ 01» en el marco del póster van a 9 px, pero esos son adorno.
Dónde: 320 a 430 (9.5 px); girado 10.5 px
Propuesta: Subir la cinta a 11 px en celular. Cabe sin tocar el diseño.
Detalle técnico
@media (max-width:760px){ #wic-adr .adr-cinta__txt{font-size:11px;letter-spacing:.2em} }. Entre perforaciones queda una franja de unos 27 px. El marco (.adr-cuadro__n) puede subir a 10 px o quedarse en 9.
Capturas: m320-about-7.png (cinta) y m320-projects-1.png (marco del póster)
Hueco blanco variable debajo del texto del carrete
Qué se ve: La caja de textos del carrete siempre mide lo del proyecto más largo. Con las descripciones cortas queda un hueco blanco de hasta unos 220 px entre el botón «Watch…» y la sala oscura, y el hueco cambia con cada póster.
Dónde: Todas
Propuesta: Acortar en celular las dos descripciones más largas (Tres Mares y Alas de la Sierra, a unas 25 palabras) o reducir el espacio de abajo de esa parte. No recomiendo que la caja cambie de alto cada 4 s, porque movería la página mientras bajas.
Detalle técnico
Caja de 467 px (320) y 410 (390); el contenido de cada proyecto mide entre 221 y 407 px. Alternativa: bajar el padding-bottom de .adr-projects__top en ≤760.
Capturas: adv/cap/m320-carrete-leyendo.png (hueco bajo «Watch on Wahu»)
Dos toques rápidos solo avanzan uno
Qué se ve: Si tocas la flecha o deslizas dos veces seguidas, o justo después de un cambio automático, el segundo toque se pierde durante el cambio de 1 s. Parece que el botón no responde.
Dónde: Todas
Propuesta: Guardar ese toque y ejecutarlo en cuanto termine el cambio.
Detalle técnico
adrian.js, ir(): en lugar de «if (ocupado) { return; }», guardar pendiente = dir y ejecutarla en transitionend; o acortar la transición a 0.6 s en celular. Medido: con dos deslizamientos pasó de 2 a 3 (se esperaba 4).
Capturas: Sin captura (prueba en vivo)
Número suelto y etiquetas en letra chica
Qué se ve: En 320, el número de la categoría queda solo en una segunda línea: «NATURE & LAND DOCUMENTARIES» y abajo un «3». Las etiquetas de cada fila («WAHU · DOCUMENTARY SERIES · DIRECTOR · 2024») van a 11 px en mayúsculas sobre la foto.
Dónde: 320 (el número suelto); etiquetas en todos los anchos
Propuesta: Pegar el número a su categoría para que no se separe, y subir un poco las etiquetas en celular.
Detalle técnico
pagina.php (encabezado de categoría de la sala): cambiar el espacio antes del <span> del número por , o bajar el letter-spacing de .adr-sala__cat a .14em en ≤760. .adr-row__tags a 12px con letter-spacing:.08em en ≤760.
Capturas: m320-projects-3.png
Tramo vacío al final de la sala
Qué se ve: Después de la última película y del crédito de las fotos quedan de 190 a 250 px de foto oscura vacía antes de «Press & Recognition». Se siente como un tramo muerto.
Dónde: 320 a 430
Propuesta: Reducir a la mitad ese espacio final en celular.
Detalle técnico
Bajar el padding inferior de .adr-sala__lista en ≤760 (hoy 30vh) a ~14vh. Medido hoy: 192 px (320) y 253 px (390) debajo del crédito.
Capturas: qa/final/m390-sala-final.png (medida hoy); antes m320-projects-6.png
Lista de reconocimientos angosta y desalineada
Qué se ve: En la lista sencilla, cada renglón va en 3 columnas: laurel, año y texto. En 320 el texto queda en una columna de unos 190 px y se parte en muchas líneas, mientras sobra espacio bajo el laurel y el año. El renglón «2025–26» empuja su texto 32 px más a la derecha que los demás, así que no quedan alineados. Los enlaces de fuente miden 32 px de alto.
Dónde: 320 a 430
Propuesta: En celular, poner el laurel y el año en una primera línea y el texto debajo a todo el ancho, con los enlaces un poco más altos para el dedo.
Detalle técnico
La lista usa las reglas de .adr-rec__mas (li con grid 30px auto 1fr). @media (max-width:600px){ #wic-adr .adr-rec__simple li{grid-template-columns:auto 1fr;row-gap:4px} #wic-adr .adr-rec__simple .adr-rec__mas-txt, #wic-adr .adr-rec__simple .adr-rec__mas-fuente{grid-column:1 / -1} #wic-adr .adr-rec__mas-fuente{min-height:44px} }. Si se prefieren 3 columnas, dar un ancho fijo al año: grid-template-columns:30px 5.2em minmax(0,1fr).
Capturas: adv/cap/m320-rec-simple.png
Los recortes de prensa son demasiado altos
Qué se ve: Cada recorte mide unos 490 px de alto: la cinta ocupa el 82 % de una pantalla de 320×640. Con el teléfono girado la tarjeta es más alta que la pantalla y nunca se ve completa. Con títulos cortos queda un hueco blanco antes de «Read the article».
Dónde: 320 a 430 y girado
Propuesta: Hacer la foto del recorte un poco más baja, limitar el título a 4 renglones y quitar relleno. Con el teléfono girado, tarjetas más angostas y bajas.
Detalle técnico
≤760: .adr-clip__shot{aspect-ratio:3/2} .adr-clip__t{font-size:17px;flex:none;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .adr-clip__body{gap:6px;padding:14px 16px 6px}. Girado (max-height:500px): .adr-clip{width:300px} .adr-clip__shot{aspect-ratio:16/9}. La tarjeta quedaría de unos 380 px.
Capturas: m320-press-2.png y land844-press-3.png
Hueco grande debajo de la cinta de gobierno
Qué se ve: Debajo de la cinta de gobierno quedan unos 130 px vacíos antes de «More coverage»; entre las otras piezas de Prensa hay unos 70. La cinta toma el alto de su publicación más alta, y las que no tienen enlace quedan más bajas.
Dónde: 320 a 430 y girado
Propuesta: Quitar parte de ese espacio en celular para que quede igual que entre las demás piezas.
Detalle técnico
≤760: .adr-marquesina--gob{padding-bottom:8px} .adr-h3--mas{margin-top:32px}. Opcional: limitar a 1 línea el título de cada publicación (.adr-gob__txt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}). Medido: piezas de 193 px (320) y 212 px (390); unos 127 px vacíos.
Capturas: m360-press-3.png y m390-press-3.png; más reciente adv/cap/m320-gob.png
Dos franjas de texto seguidas antes de las fotos
Qué se ve: En dos filas salen dos franjas de texto seguidas antes de sus fotos: «VICE TV · 2026» con «On set», y «National Geographic · Disney+» con «Night shoot · the sierra». Son de 220 a 260 px de puro texto. Dos de esas franjas llevan además un marco dorado fino que las demás no tienen.
Dónde: 320 a 430
Propuesta: En celular, que la segunda franja de cada fila baje después de sus fotos, para que quede texto, fotos, texto. Quitar el marco dorado y hacer las franjas un poco más compactas.
Detalle técnico
@media (max-width:700px){ #wic-adr .adr-mosaico__fila .adr-tesela--texto ~ .adr-tesela--texto{order:2} #wic-adr .adr-tesela--dorado{box-shadow:none} #wic-adr .adr-tesela__in{padding:12px 16px;gap:6px} #wic-adr .adr-tesela__frase{font-size:15.5px} }. Medido en 320: fila 2 con 142+120 px de texto; fila 4 con 98+120.
Capturas: adv/cap/m320-galeria-0.png y adv/cap/m320-galeria-1.png (en qa/movil, m320-gallery-2.png es de los textos anteriores)
Con el teléfono girado, la foto de contacto ocupa toda la pantalla
Qué se ve: Con el teléfono girado, la foto de contacto mide 475 px de alto en una pantalla de 390: es una pantalla completa de solo cielo y sol, y el crédito «Photo: Adrián De Antoni» queda fuera de la primera vista.
Dónde: 844×390
Propuesta: Con el teléfono girado, limitar su alto para que el crédito y el inicio del panel se vean.
Detalle técnico
#wic-adr .adr-contact__foto{max-height:70svh}, o aspect-ratio:21/9 en @media (orientation:landscape) and (max-height:500px). El object-position ya cuida el encuadre.
Capturas: land844-contact-0.png
Los dos botones de contacto quedan cortos y disparejos
Qué se ve: El margen lateral ya quedó igual que en el resto de la página (16 px, comprobado hoy). Lo que queda: «Work with Adrián» y «Prints & HD photos» son cortos y de anchos distintos (207 y 199 px), debajo de tarjetas de redes que van a todo el ancho.
Dónde: 320 a 430
Propuesta: En celulares angostos, poner los dos botones a todo el ancho, uno debajo del otro.
Detalle técnico
@media (max-width:480px){ #wic-adr .adr-contact__acc{flex-direction:column} #wic-adr .adr-contact__acc .adr-btn{width:100%} }
Capturas: m320-contact-1.png
Con el teléfono girado, el último paso no cabe y nada lo avisa
Qué se ve: Con el teléfono girado, el último paso del diálogo es más alto que la pantalla: «Use our request form» y «← Back» quedan abajo, fuera de la vista, y nada indica que hay más. Dentro del diálogo sí se puede bajar.
Dónde: 844×390 (el primer paso ya cabe)
Propuesta: Con el teléfono girado, compactar el diálogo (menos relleno, título más chico y botones en 2 columnas) para que todo quepa. Si aun así no cabe, poner un degradado abajo que avise que hay más.
Detalle técnico
@media (max-height:500px){ #wic-adr .adr-trabajo__in{padding:18px 24px} #wic-adr .adr-trabajo h2{font-size:20px} #wic-adr .adr-trabajo__ops, #wic-adr .adr-trabajo__salidas{display:grid;grid-template-columns:1fr 1fr} }. Medido: 485 px de contenido en un diálogo de 366.
Capturas: land844-dialogo-trabajo-3.png (versión anterior de 3 pasos); más reciente adv/cap/land844-trabajo-2.png
Último paso: enlace difícil de tocar y botón disparejo
Qué se ve: En el último paso, «Use our request form» es un enlace dentro del texto, partido en dos renglones de 18 px de alto: cuesta atinarle con el dedo (si le atinas, funciona). Y «Message Adrián on Instagram» se parte en dos renglones y queda centrado, mientras LinkedIn y Cabo Films van alineados a la izquierda, así que se ve disparejo.
Dónde: 320 a 430
Propuesta: Convertir «Use our request form» en un botón secundario, y alinear a la izquierda el de Instagram (o acortarlo a «Message on Instagram» para que quepa en un renglón).
Detalle técnico
Enlace → .adr-btn.adr-btn--line (alto mínimo 44 px), o display:inline-block con padding vertical. #wic-adr .adr-trabajo__salidas .adr-btn{text-align:left}. Medido: enlace en dos pedazos de 50×18 y 84×18 (390); botón de Instagram de 312×63 contra 312×50 los otros dos.
Capturas: m390-dialogo-trabajo-3.png y m320-dialogo-trabajo-3.png
Antes del formulario se repite «Work with Adrián»
Qué se ve: En celular, antes del formulario vienen el título, el texto, el aviso de licencia y la tarjeta «Want to hire Adrián?», que repite el botón «Work with Adrián» que ya estaba una pantalla antes, en Contact. El formulario empieza de 600 a 680 px abajo del inicio de la sección.
Dónde: 320 a 430
Propuesta: En celular, pasar esa tarjeta abajo del formulario o esconderla, porque el botón de Contact ya cumple esa función. El formulario sube unos 300 px.
Detalle técnico
≤760: .adr-hd__in con display:flex; flex-direction:column y order en la tarjeta (o display:none). Medido: el formulario empieza a 679 px (320), 629 (390) y 594 (430) del inicio de la sección.
Capturas: m390-contact-1.png (botón en Contact) seguido de m390-request-hd-0.png (se repite)
«Privacy policy» saca de la página a media captura
Qué se ve: «Privacy policy» abre en la misma pestaña: quien lo toca con el formulario a medio llenar sale de la página y puede perder lo que escribió. Además, el enlace es chico (90×18 px) y está pegado al texto de la casilla. Ahora pesa más, porque el formulario ya envía de verdad.
Dónde: Todas
Propuesta: Abrir la política en otra pestaña y agrandar un poco la zona que se puede tocar, sin mover el texto.
Detalle técnico
Agregar target="_blank" rel="noopener" al enlace de la casilla (pagina.php) y darle display:inline-block; padding:10px 0; margin:-10px 0.
Capturas: m320-request-hd-2.png
El ejemplo del campo «Which photo?» se corta
Qué se ve: En la pantalla más angosta, el ejemplo gris del campo «Which photo?» se corta: se lee «e.g. El Arco with a pelican at su».
Dónde: 320 (hasta unos 350 px)
Propuesta: Acortar el ejemplo a «e.g. El Arco at sunset», que cabe desde 320 px.
Detalle técnico
Cambiar el placeholder en pagina.php. Medido: el texto mide 244 px y hay 212 px útiles.
Capturas: m320-request-hd-1.png
El pie del sitio queda apretado en celular
Qué se ve: En el pie, «EXPLORE» queda pegado a los íconos de redes y «POPULAR PLACES» pegado a «All Categories», sin aire entre los bloques. Es el pie de todo el sitio: sale igual en /hotels/.
Dónde: 320 a 430
Propuesta: Decidirlo aparte, porque cambia el pie de todo el sitio: dar más aire arriba de cada título de columna en celular.
Detalle técnico
Pie de Elementor 1266: en ≤767 px, margin-top de unos 32 px a los títulos de columna.
Capturas: m360-request-hd-2.png; más reciente adv/cap/m320-pie.png
La barra de Safari puede tapar botones de abajo (confirmar en tu iPhone)
Qué se ve: Es un riesgo que solo se ve en un iPhone real. En tres lugares la página usa el alto de la pantalla con la barra de Safari escondida. Cuando la barra está a la vista, puede tapar el botón dorado «Request this photo in HD» y «Read the original» del visor (están a 16 px del borde), la parte de abajo del diálogo «Work with Adrián» y la parte de abajo de la sala «More projects». Al revisar, abre el visor con la barra de Safari visible y fíjate si el botón dorado se ve completo.
Dónde: iPhone real (no se puede reproducir en el navegador de pruebas)
Propuesta: Usar la medida de alto que sí toma en cuenta la barra de Safari, dejando la actual como respaldo.
Detalle técnico
.adr-lb{height:100vh;height:100dvh;max-height:100dvh}; imagen del visor con max-height:calc(100dvh - 210px); .adr-trabajo{max-height:calc(100dvh - 24px)}; .adr-sala__escena{height:100vh;height:100svh} y .adr-sala__lista{margin-top:-100vh;margin-top:-100svh}; sumar env(safe-area-inset-bottom) al padding inferior de .adr-lb__in.
Capturas: m390-visor.png (botón dorado a 16 px del borde)
Tus pruebas en la vista privada cuentan como visitante real
Aviso: La página ya es pública: tus visitas y pruebas cuentan en el embudo como visitas reales.
Qué se ve: No se ve en la página, pero importa mientras revisas. La página ya está en su versión pública 0.5.0: sin notas amarillas y con el formulario encendido. Al apagar las notas, la vista privada dejó de marcarse como prueba. Así, cuando tú (o una prueba automática) abras «Work with Adrián» o elijas una opción, el embudo lo cuenta como visitante real. Y si envías el formulario de prueba, llega de verdad a info@whatsincabo.com.
Dónde: Todas (también PC)
Propuesta: Que la vista privada siempre se marque como prueba, aunque las notas estén apagadas. Mientras tanto, si pruebas «Work with Adrián» desde tu teléfono, avísame para no contar esos pasos en el embudo.
Detalle técnico
pagina.php línea 36: data-prev="1" solo si $priv, y $priv = WIC_ADR_NOTAS && wic_adr_vista_previa() (wic-adrian-de-antoni.php línea 84; WIC_ADR_NOTAS = false). Poner data-prev="1" siempre que wic_adr_vista_previa() sea verdadero. En los arneses de prueba, bloquear /wp-json/wic-adr/v1/ igual que GA.
Capturas: Sin captura (código)
Página de trabajo, sin indexar. Informe del flujo wf_2a14eafd-50e.
