se queda con lo que sobra y reparte esa altura. Las imagenes pierden el aspect-ratio fijo y llenan su celda con object-fit: cover. IMPORTANTE: todo esto vive dentro de una media query con minimo de ancho Y de alto. Abajo de 768px las grillas colapsan a una sola columna, y abajo de 700px de alto no hay lugar para las 9 fotos de Clientes sin que queden reducidas a nada (medido: a 600px de alto colapsaban 6 de 9). En cualquiera de esos dos casos se deja el scroll normal, que es preferible a recortar contenido. Se usa 100dvh y no 100vh para que la barra del navegador movil no empuje el contenido fuera de la pantalla. ============================================================ */ @media (min-width: 768px) and (min-height: 700px) { html:has(body.sin-scroll) { height: 100%; } body.sin-scroll { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; } /* el nav sale del modo fixed: aca esta en el flujo, como primera fila */ body.sin-scroll nav { position: static; } body.sin-scroll > [data-site-nav], body.sin-scroll > [data-site-footer] { flex: 0 0 auto; } body.sin-scroll > [data-site-nav] nav > div { padding-top: 1.25rem; padding-bottom: 1.25rem; } body.sin-scroll > main { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 1.5rem; padding-bottom: 1.5rem; } body.sin-scroll > [data-site-footer] footer { margin-top: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; } /* --- Portada -------------------------------------------------- */ body.sin-scroll[data-route="inicio"] > main { padding: 0; } body.sin-scroll[data-route="inicio"] main > section { height: 100%; min-height: 0; padding-top: 0; } body.sin-scroll[data-route="inicio"] main > section > div { min-height: 0; height: 100%; flex: 0 0 auto; } /* --- Imagenes en modo pantalla completa -------------------------- */ body.sin-scroll main .group, body.sin-scroll main .group > img { height: 100%; min-height: 0; } body.sin-scroll main img { width: 100%; height: 100%; object-fit: cover; } } /* ============================================================ UX y accesibilidad ============================================================ */ /* --- Foco visible ------------------------------------------------ El export no traia ningun estilo de foco: navegando con teclado no se veia donde estabas parado. Se usa :focus-visible para que el anillo aparezca con teclado y no al hacer click con el mouse. */ :focus-visible { outline: 2px solid #3e5219; outline-offset: 3px; border-radius: 2px; } /* sobre foto, el verde no contrasta: ahi el anillo va en claro */ .group:focus-visible, #lightbox :focus-visible { outline-color: #fcfbe1; outline-offset: -4px; } /* --- Salto al contenido ------------------------------------------ Primer tabulador de la pagina: permite saltarse la navegacion. */ .saltar-al-contenido { position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%); z-index: 200; background: #3e5219; color: #fcfbe1; padding: 0.75rem 1.5rem; font-size: 12px; letter-spacing: 0.2em; font-weight: 600; transition: transform 0.2s ease-out; } .saltar-al-contenido:focus { transform: translate(-50%, 0); } /* --- Afordancia tactil en Rubros --------------------------------- El rotulo "VER PROYECTOS" y el paso a color dependian de :hover. En un telefono no hay hover, asi que la tarjeta no daba ninguna senal de ser clickeable. En punteros gruesos se muestra siempre. */ @media (hover: none) { .category-card .reveal-text { clip-path: none; } .category-card img { filter: grayscale(0); } .category-card .image-container > div:last-child { opacity: 1; background-color: rgba(62, 82, 25, 0.15); } } /* --- Lightbox ------------------------------------------------------ */ [data-lightbox] .group, [data-lightbox] .image-container { cursor: pointer !important; } #lightbox > div { width: min(94vw, 1500px); height: min(84vh, 1000px); display: flex; align-items: center; justify-content: center; } #lightbox #lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; } #lightbox [data-lightbox-nav] { position: absolute; top: 50%; transform: translateY(-50%); color: #fcfbe1; background: rgba(27, 29, 13, 0.7); border: 1px solid rgba(252, 251, 225, 0.25); width: 3.25rem; height: 3.25rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; z-index: 50; cursor: pointer !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #lightbox [data-lightbox-nav]:hover { background: rgba(27, 29, 13, 0.95); border-color: rgba(252, 251, 225, 0.6); transform: translateY(-50%) scale(1.08); } #lightbox [data-lightbox-nav]:active { transform: translateY(-50%) scale(0.92); } #lightbox [data-lightbox-nav="anterior"] { left: 0.75rem; } #lightbox [data-lightbox-nav="siguiente"] { right: 0.75rem; } @media (min-width: 768px) { #lightbox [data-lightbox-nav="anterior"] { left: 2rem; } #lightbox [data-lightbox-nav="siguiente"] { right: 2rem; } } #lightbox [data-lightbox-contador] { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: #fcfbe1; background: rgba(27, 29, 13, 0.6); border: 1px solid rgba(252, 251, 225, 0.15); padding: 0.35rem 1rem; border-radius: 9999px; font-size: 12px; letter-spacing: 0.2em; font-weight: 600; opacity: 0.9; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Cerrado, el lightbox no debe recibir tabulador. Se usa visibility y no display para no perder el fundido: la transicion la retrasa hasta que termina el fade, asi el cierre sigue viendose. */ /* Abriendo: la visibilidad cambia YA, si no el foco no puede entrar (focus() sobre un elemento visibility:hidden falla en silencio). Cerrando: se retrasa 0.3s para que el fundido llegue a verse. */ #lightbox { transition: opacity 0.3s ease, visibility 0s linear 0s; } #lightbox.pointer-events-none { visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } /* --- Enlaces sin destino todavia ------------------------------------ Instagram/WhatsApp/email siguen en "#". Se marcan como no disponibles en vez de dejar que salten al tope de la pagina. */ [aria-disabled="true"] { cursor: default; opacity: 0.55; } /* --- Acordeón de Proyectos / Series ---------------------------- */ .acordeon-contenido { transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease; max-height: 8000px; opacity: 1; } .acordeon-contenido.colapsado { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* --- Cursor estándar interactivo (puntero/manito) ------------- */ [data-toggle-acordeon], [data-toggle-acordeon] *, .proyecto-acordeon, .proyecto-acordeon *, [data-galeria-contenedor] img, .image-container img { cursor: pointer !important; } [data-toggle-acordeon] [data-acordeon-icono] { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } [data-toggle-acordeon][aria-expanded="false"] [data-acordeon-icono] { transform: rotate(-90deg); }