/* ========================================================================= URRETA — Techo del lienzo y bandas a sangre ------------------------------------------------------------------------- Hasta 1600px de ancho no cambia nada: el lienzo sigue escalando con el viewport y esta hoja no pinta. A partir de ahi js/scale.js congela el rem, asi que el lienzo se queda en 1600px y `.u-page` lo centra. Lo que sobra a cada lado es la SANGRIA: --sangria = (ancho del viewport − 1600) / 2 La escribe js/scale.js en el ; sin JavaScript vale 0 y todo se comporta como antes. Lo que hay aqui es una sola idea repetida: las piezas que en el diseno van de borde a borde no pueden quedarse en la columna de 1600 —se verian dos franjas de fondo a los lados—, asi que se estiran la sangria por cada lado. Su CONTENIDO no se mueve: sigue en las coordenadas del artboard, dentro de la columna centrada. Todo va dentro de la media query para no rozar siquiera el maquetado por debajo del techo. ========================================================================= */ /* Respaldo sin JavaScript. */ :root { --sangria: 0px; } @media (min-width: 1601px) { /* El recorte de `.u-page` se abre hasta el borde de la pantalla; si no, cortaria justo las bandas que acabamos de estirar. Nada del diseno desborda el lienzo por su cuenta —lo unico que lo hacia, la foto del hub, ya la recorta su propia mascara—, asi que abrirlo no deja escapar nada mas. */ .u-page { overflow-clip-margin: var(--sangria); } /* ---------------------- BARRAS FIJAS ------------------------------ `position: fixed` mide desde el viewport, no desde la columna: las barras se corren la sangria para que su contenido —logotipo, menu, boton, rotulos de idioma— siga cayendo donde marca el artboard. El fondo, en cambio, lo pinta un pseudo que si llega a los bordes. ------------------------------------------------------------------ */ .topbar { left: calc(-0.0625rem + var(--sangria)); } .navbar { left: calc(-0.0786rem + var(--sangria)); } .topbar::before, .navbar::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--sangria)); width: calc(100% + 2 * var(--sangria)); background: inherit; /* Dentro del contexto de apilamiento de la barra, el -1 lo deja sobre el fondo de la propia barra y debajo de su contenido. */ z-index: -1; } /* La sombra pasa al pseudo para que acompane a la banda entera. */ .navbar { box-shadow: none; } .navbar::before { box-shadow: 0 0.25rem 1.5rem rgba(109, 20, 86, 0.10); } /* ------------------- ELEMENTOS FIJOS DEL BORDE -------------------- El rotulo vertical y el boton de WhatsApp se pegan al borde de la COLUMNA, no al de la pantalla: sueltos en el margen se leerian como dos elementos a la deriva. ------------------------------------------------------------------ */ .sello-seccion { right: calc(1.75rem + var(--sangria)); } .wa-flotante { right: calc(2.5rem + var(--sangria)); } /* ------------------------ BANDAS A SANGRE ------------------------- Todas son cajas absolutas de ancho completo dentro de `.u-page`: fondos de seccion, degradados de portada y el pie. Se estiran la sangria por cada lado. ------------------------------------------------------------------ */ /* --- Bandas que solo son fondo --- No tienen dentro nada colocado en coordenadas del artboard, asi que se pueden correr enteras sin arrastrar contenido. */ .hero__bg, /* Home — fotografia de portada */ .hero__overlay, /* Home — velo sobre la fotografia */ .mapa-seccion, /* Home — franja gris del mapa */ .banda-track, /* Home — riel de la foto de equipo */ .continuidad__fondo, /* Home — fondo oscuro de continuidad */ .bp-hero, /* Articulo — fotografia de portada */ .bp-hero__velo, /* Articulo — velo */ .ati-fondo, /* Area interna — franjas grises */ .si-fondo, /* Siniestros — fondos de seccion */ .co-hero, /* Cotizador — fotografia de portada */ .co-hero__velo { /* Cotizador — velo */ left: calc(-1 * var(--sangria)); width: calc(var(--design-width) + 2 * var(--sangria)); /* Varias de estas bandas son , y el reset les pone `max-width: 100%`: sin esto el ancho se quedaria en el de la columna. */ max-width: none; } /* --- Bandas que ADEMAS son el contenedor de su seccion --- El pie, el acordeon y la portada del blog no son solo un fondo: dentro llevan el titular, la foto, el formulario o el mapa, colocados en coordenadas del artboard CONTRA ELLOS. Correrlos como a los de arriba movia tambien todo su contenido, que se iba al borde de la pantalla en vez de quedarse en la columna. Lo que se estira es la caja, no el sistema de coordenadas: la caja crece la sangria por cada lado con un BORDE transparente. El fondo se pinta bajo el borde —`background-clip` vale `border-box` por defecto—, asi que llega a los bordes de la pantalla; y los hijos absolutos se resuelven contra la caja de relleno, que queda exactamente donde estaba. `overflow: hidden` del pie tambien recorta contra ella, asi que sigue recortando igual. */ .faq, /* comun — fondo del acordeon */ .footer, /* comun — pie oscuro */ .bl-hero { /* Blog — degradado de portada */ left: calc(-1 * var(--sangria)); border-left: var(--sangria) solid transparent; border-right: var(--sangria) solid transparent; /* `background-origin` vale `padding-box` por defecto: el degradado se calcularia para la columna y se repetiria en los margenes, con dos costuras a la vista. Con `border-box` se calcula de borde a borde y cruza la pantalla de una pieza. */ background-origin: border-box; } .faq, .footer { width: calc(100% + 2 * var(--sangria)); } .bl-hero { width: calc(var(--design-width) + 2 * var(--sangria)); } /* La foto de equipo va en flujo dentro de su riel, que ya viene estirado por la regla de arriba: le basta con ocuparlo entero. */ .banda-equipo { width: 100%; max-width: none; } }