/* ========================================================================== Fasoli Reyna — bloques style.css es la capa de sistema (tokens, tipografia, botones, cabecera, pie). Aca viven las primitivas decorativas y los bloques de cada pagina. La regla que ordena todo: ninguna pagina repite la secuencia de bloques de otra. La portada es cinematografica, empresa editorial, servicios un indice pegajoso y el catalogo una planilla densa. El unico bloque compartido es el cierre, porque es la accion que importa. ========================================================================== */ /* ========================================================================== 1. Motor de scroll ========================================================================== */ /* El estado oculto lo pone el JS al marcar , nunca el CSS por su cuenta. Si el motor no arranca —sin JS, prefers-reduced-motion, saveData, navegador viejo— no hay nada que revelar y todo se ve de una. Es el error clasico de estos motores: contenido invisible esperando un evento que no llega. Aca no puede pasar. */ html.motor-listo [data-revelar] { opacity: 0; transform: translateY(26px); } /* Las entradas laterales arrancan corridas 34px y, sobre el borde derecho, eso asomaba fuera de la pantalla y aparecia una barra de scroll horizontal hasta que el bloque terminaba de entrar. Se usa "clip" y no "hidden" a proposito: hidden convierte a main en un contenedor de scroll y los position:sticky de adentro —el indice de servicios, la ficha de obra, la barra de filtros— dejarian de pegarse. */ main { overflow-x: clip; } html.motor-listo [data-revelar].se-ve { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); transition-delay: var(--retardo, 0ms); } /* Variantes de entrada, para que no todo suba igual. */ html.motor-listo [data-revelar="lado"] { transform: translateX(-34px); } html.motor-listo [data-revelar="lado-d"] { transform: translateX(34px); } html.motor-listo [data-revelar="escala"] { transform: scale(.94); } html.motor-listo [data-revelar="cortina"] { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; } html.motor-listo [data-revelar="cortina"].se-ve { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.2,.7,.3,1); } /* ========================================================================== 2. Primitivas decorativas Todas son de adorno: van con aria-hidden y ninguna aporta contenido. Si se apagaran, las paginas se leerian igual. ========================================================================== */ /* -- Retícula de plano tecnico ------------------------------------------- */ .reticula { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(to right, rgba(185,180,172,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(185,180,172,.10) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 85%); } .reticula--clara { background-image: linear-gradient(to right, rgba(43,47,52,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(43,47,52,.10) 1px, transparent 1px); } /* -- Curvas de nivel ------------------------------------------------------ */ /* Movimiento de suelos: el plano topografico es literalmente el oficio. */ .curvas-nivel { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .curvas-nivel svg { position: absolute; inset: 0; width: 100%; height: 100%; } .curvas-nivel path { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .13; } /* -- Cifra fantasma ------------------------------------------------------- */ .cifra-fantasma { position: absolute; z-index: 0; pointer-events: none; font-family: var(--display); font-size: clamp(11rem, 30vw, 30rem); line-height: .72; letter-spacing: -.04em; color: currentColor; opacity: .055; user-select: none; right: calc(var(--gutter) * -.2); bottom: -.14em; } /* -- Marco tecnico -------------------------------------------------------- */ /* Esquinas en L, como las marcas de corte de un plano. */ .marco-tecnico { position: relative; } .marco-tecnico::before, .marco-tecnico::after { content: ""; position: absolute; width: 18px; height: 18px; z-index: 3; pointer-events: none; transition: width .3s ease, height .3s ease; } .marco-tecnico::before { top: 10px; left: 10px; border-top: 2px solid var(--vial); border-left: 2px solid var(--vial); } .marco-tecnico::after { bottom: 10px; right: 10px; border-bottom: 2px solid var(--vial); border-right: 2px solid var(--vial); } .marco-tecnico:hover::before, .marco-tecnico:hover::after { width: 30px; height: 30px; } /* -- Linea de cota -------------------------------------------------------- */ .cota { display: flex; align-items: center; gap: .6rem; margin-block: 2.5rem; color: var(--acero); font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .cota::before, .cota::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .4; } .cota span { flex: none; border: 1px solid currentColor; padding: .25rem .6rem; } /* -- Hachurado ------------------------------------------------------------ */ /* Trama de corte de material. Reemplaza a la foto que no esta, y se lee como decision de plano, no como imagen rota. */ .hachurado { background-image: repeating-linear-gradient( 135deg, var(--grafito) 0 14px, var(--asfalto-alto) 14px 28px ); } /* -- Cinta (marquesina) --------------------------------------------------- */ .cinta { overflow: hidden; border-block: var(--borde); background: var(--hueso-claro); padding-block: 1.1rem; position: relative; z-index: 1; } .cinta--oscura { background: var(--asfalto); border-color: var(--grafito); color: var(--hueso); } .cinta__pista { display: flex; width: max-content; gap: 0; will-change: transform; } .cinta__grupo { display: flex; align-items: center; gap: 2.6rem; padding-right: 2.6rem; flex: none; } .cinta__item { font-family: var(--display); font-size: clamp(1rem, 1.7vw, 1.45rem); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; color: inherit; text-decoration: none; flex: none; } a.cinta__item:hover { color: var(--oxido); } .cinta--oscura a.cinta__item:hover { color: var(--vial); } .cinta__punto { width: 9px; height: 9px; background: var(--vial); flex: none; transform: rotate(45deg); } /* Sin motor, la pista no se mueve: se la deja quieta y recortada. */ html.sin-animacion .cinta__pista { animation: none; } /* ========================================================================== 3. Bloques compartidos ========================================================================== */ /* -- Encabezado de pagina (se le suma decoracion al que ya existia) ------- */ .encabezado-pagina { position: relative; overflow: hidden; } .encabezado-pagina .envoltura { position: relative; z-index: 2; } .encabezado-pagina__bajada { max-width: 56ch; color: var(--cemento); margin-top: 1.5rem; font-size: clamp(1rem, 1.4vw, 1.15rem); } /* -- Rotulo de seccion con contador --------------------------------------- */ .titulo-bloque { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); } .titulo-bloque h2 { margin: 0; max-width: 18ch; } /* -- Tarjeta de obra: se le agrega el marco tecnico ----------------------- */ .obra .marco-tecnico::before, .obra .marco-tecnico::after { opacity: 0; transition: opacity .3s ease; } .obra::before, .obra::after { content: ""; position: absolute; width: 16px; height: 16px; z-index: 3; opacity: 0; transition: opacity .3s ease, width .3s ease, height .3s ease; pointer-events: none; } .obra::before { top: 12px; left: 12px; border-top: 2px solid var(--vial); border-left: 2px solid var(--vial); } .obra::after { bottom: 12px; right: 12px; border-bottom: 2px solid var(--vial); border-right: 2px solid var(--vial); } .obra:hover::before, .obra:hover::after, .obra:focus-visible::before, .obra:focus-visible::after { opacity: 1; width: 26px; height: 26px; } /* Obra sin foto: el hachurado con su numero y rubro bien grandes. */ .obra__sinfoto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient( 135deg, var(--grafito) 0 14px, var(--asfalto-alto) 14px 28px ); } .obra__sinfoto span { font-family: var(--display); font-size: clamp(3rem, 7vw, 5rem); color: rgba(233,229,222,.14); line-height: 1; } /* ========================================================================== 4. Portada — ritmo cinematografico ========================================================================== */ /* -- Hero con video ------------------------------------------------------- */ .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__media img, .hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.85) contrast(1.15); } .hero__ticker { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--grafito); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--acero); } .hero__ticker span { display: flex; align-items: center; gap: .6rem; } .hero__ticker span::before { content: ""; width: 7px; height: 7px; background: var(--vial); transform: rotate(45deg); flex: none; } /* -- Contadores ----------------------------------------------------------- */ .cifras { position: relative; background: var(--hueso-claro); border-block: var(--borde); padding-block: clamp(3rem, 7vw, 4.5rem); overflow: hidden; color: var(--asfalto); } .cifras__grid { position: relative; z-index: 1; display: grid; /* A 150px entran de a dos en un telefono; a 190 quedaba una sola por fila y la seccion se estiraba cuatro pantallas. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); } .cifra { border-left: 2px solid var(--asfalto); padding-left: 1.25rem; } .cifra__numero { font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: .9; display: flex; align-items: baseline; gap: .04em; } .cifra__sufijo { color: var(--vial); } .cifra__texto { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acero); margin-top: .6rem; max-width: 18ch; } /* -- Servicios con revelacion de foto ------------------------------------- */ /* Son ocho: en cuatro columnas cierran dos filas justas. A tres queda una celda vacia al final, que se lee como una tarjeta que falto cargar. */ @media (min-width: 1180px) { .grilla-servicios { grid-template-columns: repeat(4, 1fr); } } .servicio { overflow: hidden; } .servicio__foto { position: absolute; inset: 0; z-index: 0; opacity: 0; transform: scale(1.08); transition: opacity .45s ease, transform .7s cubic-bezier(.2,.7,.3,1); pointer-events: none; } .servicio__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.2) brightness(.42); } .servicio:hover .servicio__foto, .servicio:focus-visible .servicio__foto { opacity: 1; transform: none; } .servicio > *:not(.servicio__foto) { position: relative; z-index: 1; } .servicio:focus-visible { background: var(--asfalto); color: var(--hueso); } /* -- Proceso (scrollytelling) --------------------------------------------- */ .proceso { background: var(--asfalto); color: var(--hueso); position: relative; /* "clip" y no "hidden": hidden convierte a la seccion en contenedor de scroll y el bloque pegajoso de adentro deja de pegarse. Solo hace falta recortar la reticula del fondo, y para eso clip alcanza. */ overflow: clip; padding-block: clamp(3.5rem, 9vw, 7rem); } .proceso__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); /* Sin align-items:start la columna se estira a lo alto de la fila, que es lo que le da recorrido al bloque pegajoso de adentro. */ } .proceso__fijo { position: sticky; top: calc(var(--tope) + 2rem); transition: top .28s cubic-bezier(.2,.7,.3,1); } .proceso__fijo h2 { max-width: 12ch; } .proceso__fijo .rotulo { color: var(--cemento); } /* Barra de avance de los pasos. */ .proceso__barra { margin-top: 2.5rem; height: 4px; background: var(--grafito); position: relative; max-width: 260px; } .proceso__barra i { position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--vial); transition: width .45s cubic-bezier(.2,.7,.3,1); } .proceso__cuenta { margin-top: .9rem; font-family: var(--display); font-size: 1.1rem; color: var(--acero); } .proceso__cuenta b { color: var(--vial); font-weight: 400; } .proceso__pasos { display: flex; flex-direction: column; gap: 1px; background: var(--grafito); } .paso { background: var(--asfalto); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); border-left: 3px solid transparent; transition: border-color .4s ease, background .4s ease; position: relative; } .paso.activo { border-left-color: var(--vial); background: var(--asfalto-alto); } /* Donde hay dos columnas, cada paso ocupa casi media pantalla: es lo que le da recorrido al bloque pegajoso de al lado y hace que cada etapa tenga su momento en vez de pasar las cuatro de un scrollazo. */ @media (min-width: 1001px) { .paso { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; } } .paso__indice { font-family: var(--display); font-size: .95rem; color: var(--acero); letter-spacing: .08em; transition: color .4s ease; } .paso.activo .paso__indice { color: var(--vial); } .paso h3 { margin: .5rem 0 .7rem; } .paso p { color: var(--cemento); margin: 0; max-width: 48ch; font-size: .97rem; } /* -- Mosaico de obras destacadas ------------------------------------------ */ /* Asimetrico a proposito: el catalogo ya tiene la grilla pareja, y si la portada la repitiera las dos paginas se leerian igual. */ .mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); } .mosaico .obra { aspect-ratio: auto; min-height: 230px; } .mosaico .obra:first-child { grid-column: span 2; grid-row: span 2; min-height: 480px; } .mosaico .obra:first-child .obra__titulo { font-size: clamp(1.35rem, 2.6vw, 2.1rem); } /* -- Banda de maquinaria (scroll horizontal) ------------------------------ */ /* Las seis maquinas entran en tres columnas por dos filas y se ven todas de una: en fila con scroll, la mitad quedaba fuera de pantalla. El hilo de 1px sobre el grafito es lo que les da el aire de ficha tecnica. */ .flota { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1px; background: var(--grafito); border: 1px solid var(--grafito); } .maquina { background: var(--asfalto); color: var(--hueso); padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; min-height: 230px; user-select: none; } .maquina__indice { font-family: var(--display); font-size: .9rem; color: var(--vial); } .maquina h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); } .maquina p { margin: 0; font-size: .9rem; color: var(--cemento); } .maquina__ideal { margin-top: auto; font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--acero); border-top: 1px solid var(--grafito); padding-top: .8rem; } /* -- Pilares -------------------------------------------------------------- */ .pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .pilar { border: var(--borde); background: var(--hueso-claro); padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.5rem, 2.5vw, 2rem); position: relative; display: flex; flex-direction: column; gap: .85rem; } .pilar__indice { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; color: var(--cemento); } .pilar h3 { margin: 0; max-width: 15ch; } .pilar p { margin: 0; font-size: .96rem; color: var(--grafito); } /* ========================================================================== 5. Empresa — ritmo editorial ========================================================================== */ .manifiesto { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); /* Igual que en el bloque Proceso: la columna se estira para que la frase destacada tenga por donde viajar. */ } .manifiesto__entrada { position: sticky; top: calc(var(--tope) + 2rem); transition: top .28s cubic-bezier(.2,.7,.3,1); font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.06; text-transform: uppercase; border-left: 4px solid var(--vial); padding-left: 1.5rem; } /* Capitular: el primer parrafo arranca con una letra de titular. */ .manifiesto__cuerpo > p:first-of-type::first-letter { font-family: var(--display); font-size: 3.6em; line-height: .78; float: left; margin: .06em .12em 0 0; color: var(--oxido); } .manifiesto__cuerpo h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; } .manifiesto__cuerpo h4 { display: none; } /* el "Nuestra" suelto del contenido viejo */ /* -- Carrusel de obra ------------------------------------------------------ */ /* Tres tarjetas del mismo ancho a la vista. Con mas de tres fotos la pista lleva el grupo dos veces y gira de corrido, igual que la cinta de clientes de la portada; con tres o menos queda una grilla quieta. */ .carrusel { --hueco: clamp(.75rem, 1.5vw, 1.15rem); --visibles: 3; overflow: hidden; } .carrusel__pista { display: flex; gap: var(--hueco); width: max-content; } .carrusel__grupo { display: flex; gap: var(--hueco); flex: none; margin-right: var(--hueco); } /* Sin giro no hace falta pista: una grilla pareja alcanza y no depende del JS. */ .carrusel:not(.carrusel--gira) .carrusel__pista, .carrusel:not(.carrusel--gira) .carrusel__grupo { display: grid; grid-template-columns: repeat(var(--visibles), 1fr); width: auto; margin-right: 0; } .banda__foto { /* El motor calcula el ancho en pixeles y lo deja en --ancho-tarjeta: un porcentaje no sirve porque la pista mide max-content y la referencia seria circular. Hasta que llega, el flex-basis de respaldo evita el salto. */ flex: 0 0 var(--ancho-tarjeta, calc((100vw - 2 * var(--gutter) - 2 * var(--hueco)) / 3)); aspect-ratio: 4 / 3; border: var(--borde); overflow: hidden; position: relative; background: var(--asfalto); } .banda__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5) contrast(1.08); transition: filter .4s ease, transform .6s cubic-bezier(.2,.7,.3,1); user-select: none; -webkit-user-drag: none; } .banda__foto:hover img, .banda__foto:focus-visible img { filter: grayscale(0); transform: scale(1.04); } /* Sin motor la pista no gira, asi que se la deja deslizar a mano. */ html.sin-animacion .carrusel { overflow-x: auto; scrollbar-width: thin; } html.sin-animacion .carrusel__grupo[aria-hidden="true"] { display: none; } /* -- Cobertura ------------------------------------------------------------- */ /* Reemplaza el bloque de Google Maps del contenido importado, que imprimia "API Key Is Missing". Un mapa dibujado a mano no decia nada que el dato no diga mejor: donde se trabajo y cuanto, ordenado de mayor a menor. */ .cobertura__intro { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .cobertura__lista { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--asfalto); counter-reset: lugar; } .cobertura__lista li { display: flex; align-items: baseline; gap: clamp(.75rem, 2vw, 1.5rem); padding-block: clamp(.85rem, 1.8vw, 1.3rem); border-bottom: 1px solid var(--cemento); } .cobertura__lugar { font-family: var(--display); font-size: clamp(1.35rem, 3.4vw, 2.6rem); line-height: 1; text-transform: uppercase; flex: none; transition: color .25s ease; } .cobertura__lista li:first-child .cobertura__lugar { color: var(--oxido); } /* El filete de puntos que une el nombre con la cifra, como en un indice. */ .cobertura__filete { flex: 1 1 auto; height: 0; min-width: 1.5rem; border-bottom: 2px dotted var(--cemento); transform: translateY(-.28em); } .cobertura__cuenta { flex: none; font-family: var(--display); font-size: clamp(1.35rem, 3.4vw, 2.6rem); line-height: 1; color: var(--oxido); display: flex; align-items: baseline; gap: .5rem; } .cobertura__cuenta em { font-family: var(--texto); font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acero); } /* ========================================================================== 6. Servicios — indice pegajoso ========================================================================== */ .indice-servicios { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 4.5rem); /* Sin align-items:start el