de bloque normal y `.portada` ocupa su ancho sin ayuda de nadie. */ .portada { position: relative; /* OJO: sin z-index. Ver §5. */ margin: 0 auto; width: 100%; } /* .hero recorta; .lienzo mantiene SIEMPRE la proporción original, de modo que los % de los hijos siguen refiriéndose al lienzo completo aunque el hero se acorte en móvil. */ .hero { position: relative; width: 100%; aspect-ratio: 4096 / 2733; overflow: hidden; } .lienzo { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4096 / 2733; } /* Sin decoding="async" en el HTML y sin object-fit aquí: .lienzo ya tiene la proporción exacta del lienzo, así que height:auto da la altura justa. El atributo decoding="async" hacía que el fondo no llegara a pintarse en la captura, y en una imagen LCP como ésta no aporta nada. */ .fondo { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; } /* Cada pieza se coloca por su esquina superior izquierda y su ancho; el alto lo deduce la imagen, así no hay redondeos que descuadren nada. height:auto es imprescindible en .pieza, no sólo en las imágenes hijas: el logo es un que ES la pieza y, con los width/height del HTML actuando de valor presentacional, sin esto se estira en vertical. */ .pieza { position: absolute; margin: 0; padding: 0; border: 0; background: none; height: auto; } .pieza img, .pieza picture, .feature__img { display: block; width: 100%; height: auto; } /* ── Contrato de posiciones: literal de HomeLimpia/posiciones.json ────── */ .pieza--menu { left: 2.3926%; top: 4.6469%; width: 8.0811%; } /* [PORTE 12] CONTACTO — el único elemento de esta portada que NO está en HomeLimpia/posiciones.json, porque no está en el mockup. El cliente pidió el 2026-08-14 sustituir «PRIVATE ACCESS» y su llave por un enlace a CONTACTO, y ahí ya no hay nada que recortar: la palabra no existe en el diseño. Tampoco valía escribirla con una webfont del tema —la tipografía del diseño nunca se identificó (11 serifas probadas glifo a glifo, las cuatro primeras dentro de 0,02 de IoU entre sí)—, así que habría quedado OTRA letra justo al lado del grabado real de MENU. Lo que se hace es seguir el método de la iteración 5 un paso más allá: la pieza se COMPONE con las letras del propio mockup (C, T y A de «PRIVATE ACCESS» a tamaño natural; la O de «ATMOSPHERE» y la N de «SYDAK LIVING» reducidas a la altura de mayúscula de la barra, 29 px), con el hueco medido en «PRIVATE ACCESS» (8 px). El generador es HomeLimpia/build/letras_contacto.py y estos tres números salen literales de su informe, HomeLimpia/build/informes/letras-contacto.json → geometria. Caja 307×56 px en el lienzo de 4096×2733, con el borde derecho en x=3987 —el mismo que tenía la caja de PRIVATE ACCESS, así que el aire de la derecha no cambia— y la línea de base en y=175, que es la del rótulo anterior Y la de MENU (medido: los tres a 175). */ .pieza--contacto { left: 89.8438%; top: 4.8664%; width: 7.4951%; } .pieza--logo { left: 41.2354%; top: 11.6356%; width: 21.4111%; } .pieza--tit-sydak { left: 27.9785%; top: 46.7984%; width: 49.7803%; } .pieza--tit-claim { left: 33.5693%; top: 55.5434%; width: 38.208%; } .pieza--tit-tagline { left: 38.3301%; top: 65.2763%; width: 27.2949%; } .feature--1 { left: 19.6045%; top: 80.5342%; width: 10.2051%; } .feature--2 { left: 37.3535%; top: 80.2781%; width: 8.0078%; } .feature--3 { left: 54.6631%; top: 80.3879%; width: 7.251%; } .feature--4 { left: 70.5322%; top: 80.3879%; width: 11.8408%; } /* ════ 2. Zonas interactivas ═══════════════════════════════════════════ */ .pieza--menu, .pieza--contacto, .feature { cursor: pointer; text-decoration: none; transition: opacity .25s ease, transform .25s ease; } /* [PORTE 2] MENU pasa de (una ruta que no existe y daría 404) a