/* ============================================================ LADO C — Agencia Módulo 1: Header + Hero slider ============================================================ */ /* ---------- Fuentes (self-hosted) ---------- Los .ttf originales quedaron en el root; las copias que usa la web están en /fonts. Cuando cerremos el diseño conviene convertirlos a .woff2 (pesan ~70% menos). -------------------------------------------- */ @font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight-Variable.ttf") format("truetype"); font-weight: 100 900; /* variable: Light (300) sale de acá */ font-style: normal; font-display: swap; } @font-face { font-family: "Inter Var"; src: url("../fonts/InterVariable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { /* Marca (muestreados del logo / de las imágenes) */ --c-red: #E42236; --c-paper: #FDFDFD; /* fondo papel de las ilustraciones */ --c-ink: #111111; --c-ink-50: rgba(17, 17, 17, .45); --c-nav: #727272; /* header: TRABAJOS / CONTACTO + hamburguesa */ --c-footer: #000000; /* textos del footer */ /* Layout */ --gutter: clamp(20px, 3.4vw, 64px); --header-pad: clamp(16px, 2.4vh, 34px); /* Tipografía del header — Inter Variable Medium 17,55px @1920 */ --nav-size: clamp(12px, .92vw, 20px); --nav-track: .26em; --nav-gap: clamp(24px, 2.4vw, 48px); /* Tipografía del footer — Inter Tight Light 19,78px @1920 */ --foot-size: clamp(12px, 1.03vw, 22px); --foot-track: .24em; --foot-leading: 2.4; --foot-inset: clamp(24px, 12.7vw, 260px); /* Hamburguesa */ --burger-w: clamp(20px, 1.5vw, 28px); --burger-bar: 2px; --burger-gap: 5px; /* Slider */ --slide-ease: cubic-bezier(.65, .05, .36, 1); --slide-dur: 900ms; } /* ---------- Reset acotado ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* `clip` en vez de `hidden`: evita el overflow horizontal sin convertir el en su propio contenedor de scroll. */ overflow-x: clip; } body { margin: 0; background: var(--c-paper); color: var(--c-ink); font-family: "Inter Var", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } :where(a):focus-visible, :where(button):focus-visible { outline: 2px solid var(--c-red); outline-offset: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--c-ink); color: #fff; font-size: 13px; } .skip-link:focus { left: 8px; top: 8px; } /* Aviso de file:// — sólo lo activa el JS si no hay servidor */ .aviso-archivo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 14px 20px; background: var(--c-red); color: #fff; font-size: 14px; line-height: 1.5; text-align: center; } .aviso-archivo[hidden] { display: none; } /* Compensa el header fijo al saltar por anchor */ [id] { scroll-margin-top: 96px; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: var(--header-pad) var(--gutter); /* Siempre transparente. El color del texto lo va cambiando el JS según el trabajo que esté ocupando la pantalla en ese momento (cada trabajo declara el suyo en data/trabajos.js). */ background: transparent; color: var(--header-color, var(--c-nav)); transition: color .35s ease; } /* Velo opcional: si en algún trabajo el texto pelea con la foto, agregar la clase "scrim" al

y aparece un degradado sutil detrás. Apagado por defecto. */ .site-header.scrim::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(0, 0, 0, .28), transparent); pointer-events: none; } /* ---------- Hamburguesa ---------- */ .burger { appearance: none; border: 0; background: none; padding: 6px; margin: -6px; cursor: pointer; color: inherit; /* hereda el color del header */ line-height: 0; } .burger__box { display: flex; flex-direction: column; justify-content: space-between; width: var(--burger-w); height: calc(var(--burger-bar) * 3 + var(--burger-gap) * 2); } .burger__line { display: block; width: 100%; height: var(--burger-bar); background: currentColor; border-radius: 1px; transition: transform .35s var(--slide-ease), opacity .2s ease; } /* Micro-interacción: la línea del medio se encoge en hover */ .burger:hover .burger__line:nth-child(2) { transform: scaleX(.62); transform-origin: left; } /* Estado abierto (X) — listo para cuando definan el menú */ .burger[aria-expanded="true"] .burger__line:nth-child(1) { transform: translateY(calc(var(--burger-bar) + var(--burger-gap))) rotate(45deg); } .burger[aria-expanded="true"] .burger__line:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] .burger__line:nth-child(3) { transform: translateY(calc((var(--burger-bar) + var(--burger-gap)) * -1)) rotate(-45deg); } /* ---------- Nav derecha ---------- */ .nav { display: flex; align-items: center; gap: var(--nav-gap); } .nav__link { position: relative; font-family: "Inter Var", system-ui, sans-serif; font-weight: 500; /* Medium, según el Illustrator */ font-size: var(--nav-size); letter-spacing: var(--nav-track); text-transform: uppercase; text-decoration: none; color: inherit; /* hereda el color del header */ padding-block: 4px; white-space: nowrap; } /* Subrayado que crece desde la izquierda */ .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--slide-ease); } .nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); } /* ---------- Panel del menú (placeholder) ---------- */ .menu-panel { position: fixed; inset: 0; z-index: 45; display: grid; place-content: center; gap: 20px; background: var(--c-paper); opacity: 0; pointer-events: none; transition: opacity .35s ease; } .menu-panel.is-open { opacity: 1; pointer-events: auto; } .menu-panel__nav { display: grid; gap: 18px; text-align: center; } .menu-panel__nav a { font-family: "Inter Tight", sans-serif; font-size: clamp(28px, 4vw, 56px); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--c-ink); } .menu-panel__nav a:hover { color: var(--c-red); } /* ============================================================ HERO / SLIDER ============================================================ */ .hero { position: relative; width: 100%; height: 100svh; min-height: 480px; background: var(--c-paper); overflow: hidden; touch-action: pan-y; user-select: none; /* que mantener presionado no seleccione nada */ } .hero__stage { position: absolute; inset: 0; } .slide { position: absolute; inset: 0; margin: 0; will-change: opacity, transform, clip-path; } .slide img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; } /* --- Encuadre --------------------------------------------- contain : nunca recorta. El logo y el número (que vienen quemados en el JPG) siempre se ven completos. Los bordes sobrantes quedan del mismo papel #FDFDFD, así que prácticamente no se notan. cover : full-bleed real, pero en pantallas que no sean 16:9 recorta y puede comerse el logo de la esquina. Sólo sirve si nos pasan el arte SIN logo quemado. ----------------------------------------------------------- */ .hero[data-fit="contain"] .slide img { object-fit: contain; object-position: center; } .hero[data-fit="cover"] .slide img { object-fit: cover; object-position: center; } /* ---------- Transición: FADE (default) ---------- */ .hero[data-transition="fade"] .slide { opacity: 0; transition: opacity var(--slide-dur) var(--slide-ease); z-index: 1; } .hero[data-transition="fade"] .slide.is-active { opacity: 1; z-index: 2; } /* ---------- Transición: WIPE (cortina desde la izquierda) ---------- */ .hero[data-transition="wipe"] .slide { clip-path: inset(0 0 0 0); z-index: 1; } .hero[data-transition="wipe"] .slide.is-active { z-index: 2; clip-path: inset(0 0 0 0); animation: wipe-in var(--slide-dur) var(--slide-ease) both; } @keyframes wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } } /* ---------- Transición: SLIDE (desplazamiento horizontal) ---------- */ .hero[data-transition="slide"] .slide { opacity: 0; transform: translateX(100%); transition: transform var(--slide-dur) var(--slide-ease), opacity 0s linear var(--slide-dur); z-index: 1; } .hero[data-transition="slide"] .slide.is-active { opacity: 1; transform: translateX(0); transition: transform var(--slide-dur) var(--slide-ease), opacity 0s; z-index: 2; } .hero[data-transition="slide"] .slide.is-leaving { opacity: 1; transform: translateX(-100%); transition: transform var(--slide-dur) var(--slide-ease); z-index: 2; } /* Dirección inversa (flecha izquierda / drag a la derecha) */ .hero[data-transition="slide"][data-dir="prev"] .slide:not(.is-active):not(.is-leaving) { transform: translateX(-100%); } .hero[data-transition="slide"][data-dir="prev"] .slide.is-leaving { transform: translateX(100%); } /* ---------- Indicadores ---------- */ .hero__dots { position: absolute; left: 50%; bottom: clamp(20px, 3.4vh, 44px); transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 10px; } .dot { appearance: none; border: 0; padding: 10px 0; /* área táctil */ background: none; cursor: pointer; line-height: 0; } .dot__track { display: block; position: relative; width: clamp(28px, 3.2vw, 52px); height: 2px; background: rgba(17, 17, 17, .18); overflow: hidden; } .dot__fill { position: absolute; inset: 0; background: var(--c-red); transform: scaleX(0); transform-origin: left; } .dot:hover .dot__track { background: rgba(17, 17, 17, .32); } /* El activo se llena en el tiempo del autoplay */ .dot.is-active .dot__fill { transform: scaleX(1); transition: transform var(--dot-dur, 6000ms) linear; } /* Pausa (hover sobre el hero / pestaña oculta) */ .hero.is-paused .dot.is-active .dot__fill { transform: scaleX(var(--dot-progress, 0)); transition: none; } /* ============================================================ TRABAJOS ------------------------------------------------------------ Apilado "sticky": cada trabajo mide 100svh y queda fijo arriba. El siguiente sube POR ENCIMA sin sacar al anterior de pantalla, que es exactamente el comportamiento pedido. Es CSS puro, sin JS escuchando el scroll, así que va a 60fps sin esfuerzo. ============================================================ */ .works { position: relative; background: var(--c-paper); } .works__list { position: relative; } .work { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #000; } /* --- "Scroll protection" --------------------------------- Separador en el flujo, entre trabajo y trabajo. Es lo que hace que el trabajo quede quieto a pantalla completa un rato antes de que el siguiente empiece a asomarse: durante estos píxeles de scroll no se mueve nada y se puede leer la franja. Subir el valor = más tiempo quieto (ojo: mucho se siente trabado). Bajarlo = vuelve a pasar rápido. --------------------------------------------------------- */ .work-gap { height: var(--work-dwell); } .work__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---------- Franja ---------- Valores tal cual el Illustrator (a 1920x1080): Inter Variable Light · 19,78pt · interlineado 23,74pt · tracking 920 El tracking de Illustrator son milésimas de em: 920 = .92em. ---------------------------------------------------------- */ :root { --work-dwell: 60svh; --band-fs: clamp(11px, 1.831svh, 22px); /* 19,78px @1080 */ --band-track: .92em; /* VA 920 */ --band-lh: 1.2; /* 23,74 / 19,78 */ --band-h: calc(var(--band-fs) * 1.92); --band-top: 50%; /* al medio de la imagen */ --band-gap: calc(var(--band-fs) * 1.15); /* texto <-> botón de play */ } /* Capa 1 — POSICIÓN. Quieta, al centro vertical. */ .work__band { position: absolute; left: 0; right: 0; top: calc(var(--band-top) - var(--band-h) / 2); height: var(--band-h); color: var(--band-fg); } /* Capa 2 — ENTRADA. Sube desde abajo del cuadro hasta el centro. Es IGUAL para todos los trabajos: sólo cambia el remate. La perspectiva es para el remate "giro": sin esto la franja giraría en plano y se vería como si se aplastara. */ .band-rise { height: 100%; perspective: 900px; } /* Capa 3 — REMATE. La animación que se sortea al llegar. Va separada de la anterior para que las dos transformaciones no se pisen entre sí. Sobresale un 2% por cada lado: los remates que inclinan o desplazan la franja necesitan ese excedente, si no aparecerían cuñas vacías en los bordes de la pantalla. Como sobresale parejo, el contenido sigue centrado. */ .band-settle { position: relative; height: 100%; width: 104%; margin-left: -2%; } /* El fondo va en su propia capa para poder animarlo sin deformar el texto ni el botón. */ .band-bg { position: absolute; inset: 0; z-index: 0; background: var(--band-bg); } /* Texto + botón, a lo ancho de toda la franja */ .band-content { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: var(--band-gap); } .work__title { position: relative; z-index: 1; flex: none; /* que no lo encoja el flex: el JS necesita medir el ancho real que pide el texto */ font-family: "Inter Var", system-ui, sans-serif; font-weight: 300; /* Light, según el Illustrator */ font-size: var(--band-fs); letter-spacing: var(--band-track); text-transform: uppercase; white-space: pre; line-height: var(--band-lh); /* Ojo: cada letra es un inline-block, así que acá el tracking NO deja cola fantasma al final (medido: 0px). No hay que compensar nada, a diferencia del nav, donde el texto es plano. */ } .work__title .ch { display: inline-block; } /* ---------- Botón de play, dentro de la franja ---------- */ .work__play { position: relative; z-index: 1; flex: none; appearance: none; display: grid; place-items: center; width: calc(var(--band-h) * .62); aspect-ratio: 1; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; /* el color del texto de la franja */ cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* Agranda el área clickeable a ~44px sin tocar el diseño */ .work__play::after { content: ""; position: absolute; inset: -11px; } .work__play svg { width: 38%; margin-left: 9%; /* centra ópticamente el triángulo */ fill: currentColor; } .work__play:hover, .work__play:focus-visible { background: var(--c-red); border-color: var(--c-red); color: #fff; } /* ---------- Botón "ver más trabajos" ---------- */ .works__more { display: grid; place-items: center; padding: clamp(70px, 11vh, 150px) var(--gutter); background: var(--c-paper); } .works__more[hidden] { display: none; } .btn-more { appearance: none; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 14px; padding: 10px 0; font-family: "Inter Var", system-ui, sans-serif; font-weight: 500; font-size: var(--nav-size); letter-spacing: var(--nav-track); text-transform: uppercase; color: var(--c-nav); } .btn-more span { position: relative; padding-bottom: 6px; } .btn-more span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-red); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--slide-ease); } .btn-more:hover span::after, .btn-more:focus-visible span::after { transform: scaleX(1); } .btn-more__arrow { width: 1.15em; flex: none; transition: transform .4s var(--slide-ease); } .btn-more:hover .btn-more__arrow { transform: translateY(4px); } /* ============================================================ ANIMACIÓN DE LA FRANJA — dos tiempos ------------------------------------------------------------ TIEMPO 1 (igual para todos los trabajos): la franja aparece desde abajo del cuadro y sube hasta el centro de la imagen. TIEMPO 2 (sorteado): al llegar al centro, ejecuta uno de los cuatro remates. Nunca repite el anterior. Ver ANIMS en js/main.js. ============================================================ */ :root { --rise-dur: 780ms; --rise-ease: cubic-bezier(.16, .84, .44, 1); --settle-dur: 620ms; } /* Antes de que el trabajo quede a pantalla completa no se ve nada */ .work__band { opacity: 0; } .work.is-in .work__band { opacity: 1; } /* ---------- TIEMPO 1: la subida (común) ---------- */ .work.is-in .band-rise { animation: band-rise var(--rise-dur) var(--rise-ease) both; } /* De dónde arranca la subida: siempre justo por debajo del borde inferior del cuadro. En desktop el cuadro es la pantalla; en mobile es el fotograma 16:9, mucho más bajo. Por eso es variable: si no, en mobile la franja recorrería 400px en el mismo tiempo y pasaría disparada. */ :root { --rise-from: calc(50svh + var(--band-h)); } @keyframes band-rise { from { transform: translateY(var(--rise-from)); } to { transform: translateY(0); } } /* ---------- TIEMPO 2: los remates ---------- La franja se comporta como un objeto físico: llega a su marca y reacciona. Los cuatro tienen AMORTIGUACIÓN — cada oscilación es más chica que la anterior hasta frenar sola. Eso es lo que hace la diferencia entre "se mueve" y "está viva". Arrancan 90ms ANTES de que termine la subida para que las dos cosas se empalmen y se lea como un solo movimiento con reacción, no como dos animaciones pegadas. El `ease-in-out` se aplica entre cada par de fotogramas, así que la oscilación sale redondeada en vez de en zigzag. --------------------------------------------------------------- */ :root { --settle-delay: calc(var(--rise-dur) - 90ms); } /* --- resorte: la franja se pasa de largo y oscila en vertical hasta frenar. El texto va 55ms atrasado respecto de la barra: esa inercia es lo que la hace sentir con peso. --- */ .work.is-in [data-anim="resorte"] .band-bg { animation: settle-resorte 980ms ease-in-out var(--settle-delay) both; } .work.is-in [data-anim="resorte"] .band-content { animation: settle-resorte 980ms ease-in-out calc(var(--settle-delay) + 55ms) both; } @keyframes settle-resorte { 0% { transform: translateY(0); } 17% { transform: translateY(-42%); } 35% { transform: translateY(22%); } 52% { transform: translateY(-11%); } 68% { transform: translateY(5.5%); } 83% { transform: translateY(-2.5%); } 93% { transform: translateY(1%); } 100% { transform: translateY(0); } } /* --- tambaleo: se inclina como una balanza y se va enderezando. Gira entera y rígida, que es como se movería de verdad. --- */ .work.is-in [data-anim="tambaleo"] .band-settle { animation: settle-tambaleo 1080ms ease-in-out var(--settle-delay) both; } @keyframes settle-tambaleo { 0% { transform: rotate(0deg); } 15% { transform: rotate(.66deg); } 32% { transform: rotate(-.42deg); } 49% { transform: rotate(.25deg); } 65% { transform: rotate(-.14deg); } 80% { transform: rotate(.07deg); } 92% { transform: rotate(-.03deg); } 100% { transform: rotate(0deg); } } /* --- vibración: temblor rápido en los dos ejes, como si hubiera golpeado contra algo. Alta frecuencia, se apaga enseguida. --- */ .work.is-in [data-anim="vibracion"] .band-settle { animation: settle-vibracion 760ms ease-out var(--settle-delay) both; } @keyframes settle-vibracion { 0% { transform: translate(0, 0); } 7% { transform: translate(-.28%, -30%); } 15% { transform: translate(.22%, 23%); } 23% { transform: translate(-.17%, -17%); } 31% { transform: translate(.13%, 12%); } 40% { transform: translate(-.09%, -8.5%); } 50% { transform: translate(.06%, 6%); } 61% { transform: translate(-.04%, -4%); } 72% { transform: translate(.025%, 2.5%); } 84% { transform: translate(-.012%, -1.2%); } 100% { transform: translate(0, 0); } } /* --- impacto: aterriza y se aplasta, después se estira y se acomoda. Squash & stretch de manual. La barra se deforma, el texto sólo rebota, así que la tipografía no se distorsiona. --- */ .work.is-in [data-anim="impacto"] .band-bg { animation: settle-impacto 900ms ease-in-out var(--settle-delay) both; } .work.is-in [data-anim="impacto"] .band-content { animation: settle-impacto-texto 900ms ease-in-out var(--settle-delay) both; } @keyframes settle-impacto { 0% { transform: scaleY(1); } 13% { transform: scaleY(.42); } 31% { transform: scaleY(1.32); } 49% { transform: scaleY(.82); } 66% { transform: scaleY(1.11); } 82% { transform: scaleY(.96); } 100% { transform: scaleY(1); } } @keyframes settle-impacto-texto { 0% { transform: translateY(0); } 13% { transform: translateY(14%); } 31% { transform: translateY(-9%); } 49% { transform: translateY(5%); } 66% { transform: translateY(-2.5%); } 82% { transform: translateY(1%); } 100% { transform: translateY(0); } } /* --- péndulo: igual que el tambaleo pero pivotando desde el extremo izquierdo, no desde el centro. Un extremo queda clavado y el otro barre: se lee como un cartel colgado de un solo lado. --- */ .work.is-in [data-anim="pendulo"] .band-settle { transform-origin: 2% center; /* el 2% es el borde real de la pantalla */ animation: settle-pendulo 1180ms ease-in-out var(--settle-delay) both; } @keyframes settle-pendulo { 0% { transform: rotate(0deg); } 16% { transform: rotate(.40deg); } 34% { transform: rotate(-.26deg); } 51% { transform: rotate(.15deg); } 67% { transform: rotate(-.08deg); } 82% { transform: rotate(.035deg); } 93% { transform: rotate(-.014deg); } 100% { transform: rotate(0deg); } } /* --- sello: un golpe seco. Se hunde comprimiéndose, rebota una sola vez y frena. Rítmicamente es lo opuesto al resorte: corto y contundente en vez de largo y elástico. --- */ .work.is-in [data-anim="sello"] .band-settle { animation: settle-sello 560ms cubic-bezier(.25, .9, .35, 1) var(--settle-delay) both; } @keyframes settle-sello { 0% { transform: translateY(0) scaleY(1); } 24% { transform: translateY(9.5%) scaleY(.84); } 52% { transform: translateY(-6%) scaleY(1.08); } 76% { transform: translateY(1.8%) scaleY(.98); } 100% { transform: translateY(0) scaleY(1); } } /* --- deriva: la barra no se mueve, el que se acomoda es el contenido. El texto entra corrido y se asienta de costado, como líquido que encuentra su nivel. --- */ .work.is-in [data-anim="deriva"] .band-content { animation: settle-deriva 1020ms ease-in-out var(--settle-delay) both; } @keyframes settle-deriva { 0% { transform: translateX(0); } 16% { transform: translateX(-1.2%); } 34% { transform: translateX(.72%); } 51% { transform: translateX(-.4%); } 67% { transform: translateX(.2%); } 82% { transform: translateX(-.08%); } 100% { transform: translateX(0); } } /* --- onda: al aterrizar emite una onda expansiva que se abre en vertical y se desvanece, mientras el texto da un bote. La onda es un pseudo-elemento: no agrega nada al DOM. --- */ .band-bg::after { content: ""; position: absolute; inset: 0; background: var(--band-bg); opacity: 0; pointer-events: none; } .work.is-in [data-anim="onda"] .band-bg::after { animation: settle-onda 840ms cubic-bezier(.15, .75, .3, 1) var(--settle-delay) both; } .work.is-in [data-anim="onda"] .band-content { animation: settle-onda-texto 640ms ease-out var(--settle-delay) both; } @keyframes settle-onda { 0% { opacity: .5; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(4.4); } } @keyframes settle-onda-texto { 0% { transform: translateY(0); } 22% { transform: translateY(-16%); } 52% { transform: translateY(6%); } 78% { transform: translateY(-2%); } 100% { transform: translateY(0); } } /* --- giro: la franja gira entera sobre su eje horizontal, como una regla que se da vuelta, y frena con un temblor. Sólido y rígido: se mueve como una sola pieza. --- */ .work.is-in [data-anim="giro"] .band-settle { animation: settle-giro 960ms cubic-bezier(.3, .78, .3, 1) var(--settle-delay) both; } @keyframes settle-giro { 0% { transform: rotateX(0deg); } 58% { transform: rotateX(-360deg); } 74% { transform: rotateX(-373deg); } 87% { transform: rotateX(-355deg); } 95% { transform: rotateX(-362deg); } 100% { transform: rotateX(-360deg); } } /* ============================================================ REPRODUCTOR (lightbox de YouTube) ============================================================ */ .player { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; padding: 0; border: 0; background: rgba(10, 10, 10, .96); color: #fff; overflow: hidden; } .player::backdrop { background: rgba(10, 10, 10, .9); } .player[open] { display: grid; place-items: center; } .player__frame { width: min(92vw, 168svh); aspect-ratio: 16 / 9; background: #000; } .player__frame iframe { width: 100%; height: 100%; border: 0; display: block; } .player__close { position: absolute; top: clamp(16px, 3vh, 40px); right: clamp(16px, 3vw, 48px); z-index: 2; appearance: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background-color .25s ease; } .player__close svg { width: 22px; } .player__close:hover { background: var(--c-red); } /* Utilidad */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ============================================================ FOOTER / CONTACTO ============================================================ */ .footer { background: #fff; padding: clamp(56px, 7vw, 130px) var(--gutter) clamp(56px, 7vw, 130px) var(--foot-inset); } .footer__inner { display: flex; align-items: center; gap: clamp(20px, 2.2vw, 44px); flex-wrap: wrap; } .footer__logo { flex: none; width: clamp(96px, 12vw, 234px); height: auto; } .footer__cols { display: flex; gap: clamp(32px, 4.6vw, 96px); flex-wrap: wrap; } .footer__col { display: grid; font-style: normal; /*

*/ font-family: "Inter Tight", system-ui, sans-serif; font-weight: 300; /* Light */ font-size: var(--foot-size); line-height: var(--foot-leading); letter-spacing: var(--foot-track); text-transform: uppercase; color: var(--c-footer); white-space: nowrap; } .footer__col a { color: inherit; text-decoration: none; } .footer__col a:hover { color: var(--c-red); } /* ============================================================ ACCESIBILIDAD ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ SNAP OPCIONAL Apagado por defecto: el apilado sticky ya da la sensación de "se acomoda a pantalla completa", y el snap obligatorio pelea con el trackpad. Para probarlo, poner SNAP = true en main.js. 'proximity' -> ayuda a acomodar, no fuerza 'mandatory' -> siempre encaja (más brusco) ============================================================ */ html.snap-proximity { scroll-snap-type: y proximity; } html.snap-mandatory { scroll-snap-type: y mandatory; } html.snap-proximity .hero, html.snap-proximity .work, html.snap-mandatory .hero, html.snap-mandatory .work { scroll-snap-align: start; scroll-snap-stop: normal; } /* ============================================================ MOBILE ------------------------------------------------------------ Todo el material es 16:9 apaisado. En un teléfono vertical eso ocupa apenas el 26% de la pantalla, así que las secciones a pantalla completa quedaban casi vacías. La adaptación: en vez de pantallas completas apiladas, el sitio pasa a ser una COLUMNA DE FOTOGRAMAS a todo el ancho, uno abajo del otro. Se lee como un reel y no desperdicia ni un píxel. La franja, el botón de play y los nueve remates siguen igual. ============================================================ */ @media (max-width: 767px) { :root { --gutter: 18px; --header-pad: 15px; /* La franja se mide contra el ANCHO, no contra el alto: el fotograma ahora es 56vw de alto, no una pantalla. */ --band-fs: 3.25vw; --band-track: .5em; --band-h: calc(var(--band-fs) * 2.3); --band-gap: calc(var(--band-fs) * 1.1); --rise-from: calc(28vw + var(--band-h)); --work-dwell: 0px; /* sin apilado no hace falta la pausa */ --foot-inset: var(--gutter); --foot-size: 12px; --foot-track: .18em; --foot-leading: 2.1; } /* ---------- Header ---------- TRABAJOS y CONTACTO se van adentro de la hamburguesa: en 375px entraban raspando y comerse el ancho por dos links no vale. */ .nav { display: none; } /* ---------- Hero ---------- Deja de ser pantalla completa y pasa a ser el fotograma solo, con aire arriba para que el header no se monte sobre el logo que viene quemado en la ilustración. */ .hero { height: auto; min-height: 0; aspect-ratio: 16 / 9; margin-top: 62px; margin-bottom: 2vh; } .hero__dots { bottom: 10px; gap: 8px; } .dot__track { width: 26px; } /* ---------- Trabajos ---------- Sin sticky: cada trabajo es un fotograma 16:9 en su lugar. */ .work { position: relative; height: auto; aspect-ratio: 16 / 9; margin-block: 6vh; background: transparent; } .work__img { height: 100%; } .work-gap { display: none; } /* Botón de play: chico en pantalla, pero con área de toque de ~46px para que se pueda apretar con el dedo. */ .work__play::after { inset: -14px; } .works__more { padding-block: 4vh 8vh; } .btn-more { font-size: 12px; } /* ---------- Footer ---------- */ .footer { padding-block: 8vh 10vh; } .footer__inner { flex-direction: column; align-items: flex-start; gap: 26px; } .footer__logo { width: 104px; } .footer__cols { flex-direction: column; gap: 24px; } } /* Teléfonos angostos (320-400px): con el tracking de mobile el título más largo obligaba al autoajuste a bajar hasta 8px. Aflojando el espaciado entre letras, el mismo texto entra con dos puntos más de cuerpo. Se lee bastante mejor. */ @media (max-width: 400px) { :root { --band-track: .34em; } } /* ============================================================ LOGO ANIMADO EN EL HEADER (reemplaza a la hamburguesa en desktop) ------------------------------------------------------------ El GIF mide 1200x840 pero el circulo rojo ocupa solo 620x622, o sea el 51,67% del ancho del archivo: el resto es transparente. Por eso la caja recorta y el GIF va escalado 1/0,5167 = 1,935, asi el diametro que se VE es exactamente --brand-size y el header no queda con un hueco invisible al lado. ============================================================ */ :root { --brand-size: clamp(40px, 2.9vw, 56px); } .brand { position: relative; flex: none; display: block; width: var(--brand-size); height: var(--brand-size); /* NO recortar: durante la animacion los trazos se extienden a 1192x808 sobre un circulo final de 620x622, o sea 286px por lado. Con overflow hidden se cortaban de golpe. El sobrante es transparente y no afecta el layout, porque la caja sigue midiendo --brand-size. */ overflow: visible; line-height: 0; transition: transform .35s var(--slide-ease); } .brand:hover { transform: scale(1.06); } .brand img { position: absolute; left: 50%; top: 50%; width: calc(var(--brand-size) * 1.935); max-width: none; height: auto; translate: -50% -50%; } /* En desktop manda el logo; la hamburguesa vuelve en mobile. */ .burger { display: none; } /* ============================================================ LETTERING SOBRE EL SLIDER ------------------------------------------------------------ Antes el "lado C" venia quemado dentro de cada JPG. Ahora es un SVG encima, fijo: las fotos rotan por debajo y el lettering no se mueve. Las medidas salen del arte anterior: el texto pegado ocupaba del 33,3% al 66,8% del ancho (centrado exacto en el 50%) y su centro vertical caia en el 39,7% del alto. Se replica igual. `translate` va como propiedad aparte y no como transform para que el parallax pueda usar `transform` sin pisar el centrado. ============================================================ */ :root { --word-width: 33.4%; --word-top: 44%; /* medido daba 39,7% pero optivamente pedia bajar */ } .hero__word { position: absolute; left: 50%; top: var(--word-top); width: var(--word-width); height: auto; z-index: 5; translate: -50% -50%; pointer-events: none; user-select: none; will-change: transform; } /* Margen de sobra para que el parallax pueda mover la foto sin descubrir los bordes del cuadro. */ .hero__stage { scale: 1.20; will-change: transform; } /* ============================================================ MOBILE (ajustes de lo anterior) ============================================================ */ @media (max-width: 767px) { /* Vuelve la hamburguesa: el menu de secciones se define mas adelante */ .brand { display: none; } .burger { display: block; } /* El cuadro es mucho mas chico, el lettering necesita mas peso */ :root { --word-width: 54%; } } /* ============================================================ DESPLEGABLE DE TRABAJOS ------------------------------------------------------------ Baja desde el header con la lista completa de clientes. Los que ya tienen trabajo van primero; el resto apunta al trabajo de relleno hasta que llegue su material. Son casi 30 nombres: en una sola columna no entran en pantalla, asi que la lista se reparte en columnas segun el ancho. ============================================================ */ .nav__toggle { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; } /* Flechita que gira al abrir */ .nav__toggle::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-right: .7em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.18em) rotate(45deg); transition: transform .35s var(--slide-ease); } .nav__toggle[aria-expanded="true"]::before { transform: translateY(.05em) rotate(-135deg); } .dropdown { position: fixed; top: 0; left: 0; right: 0; z-index: 46; /* debajo del header (50), encima de todo lo demas */ padding: calc(var(--header-pad) * 2 + var(--brand-size)) var(--gutter) clamp(40px, 6vh, 80px); max-height: 100svh; overflow-y: auto; overscroll-behavior: contain; background: var(--c-paper); box-shadow: 0 20px 60px rgba(0, 0, 0, .10); opacity: 0; transform: translateY(-14px); pointer-events: none; transition: opacity .3s ease, transform .38s var(--slide-ease); } .dropdown[hidden] { display: none; } .dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown__list { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: clamp(24px, 3vw, 64px); } @media (max-width: 1280px) { .dropdown__list { columns: 3; } } @media (max-width: 900px) { .dropdown__list { columns: 2; } } .dropdown__item { break-inside: avoid; margin-bottom: 2px; } /* Un cliente de la lista. Puede ser un link directo (un solo trabajo) o un boton que despliega sus trabajos (dos o mas). */ .dropdown__cliente { appearance: none; border: 0; background: none; cursor: pointer; display: block; width: 100%; text-align: left; padding: 7px 0; font-family: "Inter Var", system-ui, sans-serif; font-weight: 500; font-size: clamp(13px, .92vw, 19px); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--c-ink); transition: color .25s ease, padding-left .3s var(--slide-ease); } .dropdown__cliente:hover, .dropdown__cliente:focus-visible { color: var(--c-red); padding-left: 10px; } /* Los que todavia no tienen material van mas apagados: se ve de una cuales estan cargados y cuales son de la lista pendiente. */ .dropdown__cliente.es-pendiente { color: var(--c-ink-50); } .dropdown__cliente.es-pendiente:hover { color: var(--c-red); } /* Marca "+" para los clientes con mas de un trabajo */ .dropdown__cliente[aria-expanded]::after { content: "+"; margin-left: .6em; font-weight: 400; opacity: .55; transition: transform .3s var(--slide-ease); display: inline-block; } .dropdown__cliente[aria-expanded="true"]::after { transform: rotate(45deg); } /* Sub-lista con los trabajos de ese cliente */ .dropdown__obras { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--slide-ease); } .dropdown__obras > div { overflow: hidden; } .dropdown__cliente[aria-expanded="true"] + .dropdown__obras { grid-template-rows: 1fr; } .dropdown__obra { display: block; padding: 6px 0; font-family: "Inter Var", system-ui, sans-serif; font-weight: 400; font-size: clamp(12px, .8vw, 16px); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--c-ink-50); border-left: 1px solid rgba(17, 17, 17, .14); padding-left: 14px; transition: color .25s ease, border-color .25s ease; } .dropdown__obra:hover, .dropdown__obra:focus-visible { color: var(--c-red); border-color: var(--c-red); } /* Al saltar a un trabajo queremos que quede pegado arriba, sin el margen que usan el resto de los anchors del sitio. */ .work { scroll-margin-top: 0; } /* Aviso de que ese trabajo es relleno */ .work.es-placeholder .work__band { --band-bg: #E42236; --band-fg: #FFFFFF; } /* ============================================================ DESPLEGABLE — correcciones ------------------------------------------------------------ 1. Cuelga del boton TRABAJOS y baja en una sola columna, en vez de ocupar todo el ancho de la pantalla. 2. Todos los nombres de cliente van en negro. El gris queda solo para los sub-trabajos. ============================================================ */ .nav__grupo { position: relative; } .dropdown { position: absolute; top: calc(100% + 18px); left: 0; right: auto; width: max-content; min-width: 240px; max-width: min(340px, 92vw); /* Si la lista no entra en pantalla, scrollea ella sola */ max-height: calc(100svh - var(--header-pad) * 2 - var(--brand-size) - 40px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(18px, 2vh, 26px) clamp(20px, 1.6vw, 30px) clamp(20px, 2.4vh, 32px); } /* Una sola columna */ .dropdown__list { columns: 1; column-gap: 0; } /* Los clientes, todos en negro. El hover rojo se mantiene. */ .dropdown__cliente, .dropdown__cliente.es-pendiente { color: var(--c-ink); } .dropdown__cliente:hover, .dropdown__cliente:focus-visible, .dropdown__cliente.es-pendiente:hover, .dropdown__cliente.es-pendiente:focus-visible { color: var(--c-red); } /* Un pelin mas compacto: son casi 30 nombres en vertical */ .dropdown__cliente { padding: 6px 0; letter-spacing: .14em; } .dropdown__obra { padding: 5px 0 5px 14px; } /* ============================================================ PANEL IA ------------------------------------------------------------ No es una seccion del scroll: se superpone al sitio entero. El header queda por encima (z 50) para que el logo y el menu sigan a la vista, como se pidio. Reusa el lenguaje del resto: papel de fondo, mayusculas con tracking, rojo solo en los acentos, y para los videos la misma franja + boton de play de la seccion de trabajos. ============================================================ */ .panel { position: fixed; inset: 0; z-index: 44; /* debajo del header (50) y del desplegable (46) */ overflow-y: auto; overscroll-behavior: contain; background: var(--c-paper); opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .4s ease, transform .5s var(--slide-ease); } .panel[hidden] { display: none; } .panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Marca el item del menu mientras esta abierto */ .nav__panel { appearance: none; border: 0; background: none; cursor: pointer; font-family: inherit; } .nav__panel[aria-expanded="true"] { color: var(--c-red); } /* ---------- Cerrar ---------- */ .panel__cerrar { position: fixed; top: calc(var(--header-pad) * 2 + var(--brand-size) + 14px); right: var(--gutter); z-index: 3; appearance: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(17, 17, 17, .18); border-radius: 50%; background: var(--c-paper); color: var(--c-ink); cursor: pointer; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--slide-ease); } .panel__cerrar svg { width: 20px; } .panel__cerrar:hover { background: var(--c-red); border-color: var(--c-red); color: #fff; transform: rotate(90deg); } .panel__inner { padding: calc(var(--header-pad) * 2 + var(--brand-size) + clamp(30px, 5vh, 70px)) var(--gutter) clamp(60px, 10vh, 130px); max-width: 1680px; margin-inline: auto; } /* ---------- Bajada: imagen a la izquierda, texto a la derecha ---------- */ .panel__intro { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(30px, 5vw, 90px); align-items: center; } .panel__foto { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .panel__rotulo { display: block; margin-bottom: clamp(18px, 2.4vh, 30px); font-family: "Inter Var", system-ui, sans-serif; font-weight: 500; font-size: var(--nav-size); letter-spacing: .26em; text-transform: uppercase; color: var(--c-nav); } .panel__rotulo::after { content: ""; display: block; width: 46px; height: 2px; margin-top: 14px; background: var(--c-red); } .panel__texto { margin: 0; font-family: "Inter Var", system-ui, sans-serif; font-weight: 300; font-size: clamp(17px, 1.32vw, 27px); line-height: 1.62; letter-spacing: .005em; color: var(--c-ink); max-width: 30ch; } /* ---------- Los tres videos ---------- */ .panel__videos { margin-top: clamp(56px, 9vh, 130px); } .panel__nota { margin: 6px 0 clamp(22px, 3vh, 38px); font-family: "Inter Var", system-ui, sans-serif; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-red); } .panel__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 34px); } @media (max-width: 1100px) { .panel__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .panel__grilla { grid-template-columns: 1fr; } } /* Cada video usa la MISMA franja y el mismo boton de play que la seccion de trabajos, para que se lea como parte del mismo sitio. Las variables se re-declaran mas chicas porque el cuadro es una fraccion de pantalla, no una pantalla entera. */ .panel__video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; --band-fs: clamp(9px, .62vw, 13px); --band-h: calc(var(--band-fs) * 2.4); --band-gap: calc(var(--band-fs) * 1.1); --band-track: .34em; --band-bg: #000000; --band-fg: #FFFFFF; } .panel__video img { width: 100%; height: 100%; object-fit: cover; } /* Acá la franja no entra desde abajo ni rebota: es un cuadro chico y quieto, así que se muestra fija al pie. */ .panel__video .work__band { top: auto; bottom: 0; opacity: 1; translate: none; } /* Marca de que el material es de ejemplo */ .panel__video[data-ejemplo="true"]::after { content: "EJEMPLO"; position: absolute; top: 12px; left: 12px; z-index: 2; padding: 5px 9px; background: var(--c-red); color: #fff; font-family: "Inter Var", system-ui, sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .18em; } @media (max-width: 900px) { .panel__intro { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 40px); } .panel__foto { aspect-ratio: 16 / 10; } .panel__texto { max-width: none; } } /* ============================================================ PANEL IA — todo en una sola pantalla ------------------------------------------------------------ El objetivo es que la bajada Y los tres videos entren juntos sin scrollear. Por eso todo el ritmo vertical se mide en svh en vez de px: si la pantalla es mas baja, el bloque se compacta en lugar de desbordar. ============================================================ */ .panel__inner { padding: calc(var(--header-pad) * 2 + var(--brand-size) + clamp(18px, 3.2svh, 46px)) var(--gutter) clamp(24px, 4svh, 56px); max-width: 1600px; } /* La imagen ya no tiene proporcion fija: se estira al alto del texto que tiene al lado, que es lo que se pidio. */ .panel__intro { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); gap: clamp(24px, 3.4vw, 64px); align-items: stretch; } .panel__foto { aspect-ratio: auto; height: 100%; min-height: clamp(150px, 26svh, 300px); object-fit: cover; } /* La columna de texto centra su contenido contra la imagen */ .panel__intro > div { display: flex; flex-direction: column; justify-content: center; } /* Mas ancho de linea y cuerpo atado al alto: asi el parrafo ocupa ~7 renglones en vez de 11 y deja lugar para los videos. */ .panel__texto { max-width: 62ch; font-size: clamp(14px, 2.05svh, 23px); line-height: 1.55; } .panel__rotulo { margin-bottom: clamp(10px, 1.6svh, 20px); font-size: clamp(11px, 1.15svh, 15px); } .panel__rotulo::after { margin-top: clamp(8px, 1.1svh, 14px); } .panel__videos { margin-top: clamp(24px, 4.4svh, 64px); } .panel__nota { margin: 4px 0 clamp(12px, 1.8svh, 24px); font-size: clamp(10px, 1.05svh, 13px); } /* ---------- Play sobre el fotograma ---------- En la franja, a este tamano de cuadro, quedaba de 8px y no se veia. Aca va centrado y grande, como en el hero. */ .panel__play { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%; appearance: none; display: grid; place-items: center; width: clamp(42px, 6.4svh, 78px); aspect-ratio: 1; padding: 0; border: 1.5px solid rgba(255, 255, 255, .92); border-radius: 50%; background: rgba(0, 0, 0, .16); backdrop-filter: blur(2px); color: #fff; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, scale .3s var(--slide-ease); } .panel__play svg { width: 34%; margin-left: 9%; fill: currentColor; } .panel__play:hover, .panel__play:focus-visible { background: var(--c-red); border-color: var(--c-red); scale: 1.07; } /* La franja del video queda solo con el texto */ .panel__video { --band-fs: clamp(8px, 1.15svh, 13px); --band-h: calc(var(--band-fs) * 2.5); } /* Ya no deberia hacer falta scrollear; queda por las dudas en pantallas muy bajas. */ .panel { scrollbar-gutter: stable; } /* ============================================================ PANEL IA — centrado vertical ------------------------------------------------------------ En pantallas altas sobraba espacio y quedaba todo pegado arriba. Ahora el bloque se centra en el hueco que queda bajo el header, asi el aire se reparte parejo. `margin: auto` dentro de un flex y no `justify-content: center`: si algun dia el contenido creciera mas que la pantalla, esta variante deja llegar al principio scrolleando; la otra lo recortaria. ============================================================ */ .panel { display: flex; padding-top: calc(var(--header-pad) * 2 + var(--brand-size) + clamp(10px, 2svh, 34px)); padding-bottom: clamp(18px, 3svh, 48px); } .panel[hidden] { display: none; } .panel__inner { margin: auto; width: 100%; padding-block: 0; } /* ============================================================ PANEL SIN VIDEOS (Nosotros) ------------------------------------------------------------ Al no tener la grilla abajo le sobra media pantalla. En vez de dejar el hueco, el texto y la imagen crecen para ocuparla. La clase la pone el JS cuando los datos no traen videos. ============================================================ */ .panel--solo-texto .panel__texto { font-size: clamp(16px, 2.75svh, 30px); line-height: 1.6; max-width: 58ch; } .panel--solo-texto .panel__rotulo { font-size: clamp(12px, 1.35svh, 17px); margin-bottom: clamp(14px, 2.2svh, 28px); } .panel--solo-texto .panel__intro { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); } .panel--solo-texto .panel__foto { min-height: clamp(200px, 40svh, 520px); } /* ============================================================ FRANJA DE LOGOS DE CLIENTES ------------------------------------------------------------ Va entre "ver mas trabajos" y el footer, sobre el mismo papel del sitio, sin titulo. Es un contenedor con scroll horizontal real, no una animacion sobre un div: asi el usuario puede arrastrar con el mouse o con el dedo y el navegador se encarga de la inercia. El JS solo empuja el scroll de a poco y lo devuelve al principio cuando da la vuelta, para que el loop no se corte. ============================================================ */ .logos { background: var(--c-paper); padding-block: clamp(38px, 6vh, 84px); border-top: 1px solid rgba(17, 17, 17, .07); overflow-x: auto; overscroll-behavior-x: contain; cursor: grab; /* La barra de scroll se oculta: el gesto queda, el cromo no */ scrollbar-width: none; -ms-overflow-style: none; } .logos::-webkit-scrollbar { display: none; } .logos.is-dragging { cursor: grabbing; } .logos__pista { display: flex; align-items: center; gap: clamp(40px, 5.6vw, 110px); width: max-content; padding-inline: clamp(20px, 2.8vw, 55px); } .logo-item { flex: none; display: grid; place-items: center; height: clamp(46px, 5.4vw, 88px); user-select: none; } .logo-item img { max-height: 100%; width: auto; /* Gama de grises, como pidieron. Cuando lleguen los logos reales, este filtro los deja parejos aunque vengan en color. */ filter: grayscale(1); opacity: .55; transition: opacity .35s ease, filter .35s ease; -webkit-user-drag: none; } .logos:hover .logo-item img { opacity: .38; } .logos .logo-item:hover img { opacity: 1; } @media (prefers-reduced-motion: reduce) { .logos { scroll-behavior: auto; } } /* ============================================================ FRANJA DE LOGOS — correccion de tamano ------------------------------------------------------------ Con `max-height` sola las imagenes se salian del item: se renderizaban a su tamano natural (250px) dentro de una caja de 88, y el ancho de la pista terminaba siendo el triple de lo que correspondia. Con height + object-fit el alto manda y el ancho se acomoda solo, sirva el logo cuadrado o apaisado. ============================================================ */ .logo-item img { height: 100%; width: auto; max-height: none; max-width: none; object-fit: contain; } /* ============================================================ FRANJA DE LOGOS — alto explicito ------------------------------------------------------------ `height: 100%` en la imagen no resolvia: dentro de un grid item centrado, el porcentaje no encuentra contra que medir y el navegador cae al tamano natural del archivo (250px). Con una variable compartida el alto es el mismo numero en los dos lados y no depende de como resuelva el porcentaje. ============================================================ */ :root { --logo-h: clamp(46px, 5.4vw, 88px); } .logo-item { height: var(--logo-h); } .logo-item img { height: var(--logo-h); width: auto; max-height: none; max-width: none; object-fit: contain; } /* ============================================================ FRANJA DE LOGOS — que no se despegue del fondo ------------------------------------------------------------ Se veia como una barra gris por dos razones: 1. La linea de borde que separaba la franja del resto. 2. El footer estaba declarado en #fff mientras todo el resto del sitio usa el papel #FDFDFD. Esos 2 puntos de diferencia alcanzaban para que la franja, que si usaba el papel, se leyera gris al lado de un footer mas blanco. Se saca la linea y se unifica el footer al mismo papel, asi desde el slider hasta el pie hay un solo tono continuo. ============================================================ */ .logos { border-top: 0; } .footer { background: var(--c-paper); } /* ============================================================ ============================================================ VERSIÓN MOBILE — bloque 1: slider + barra inferior + menú ------------------------------------------------------------ Todo lo de acá abajo vive dentro de @media (max-width: 767px). Está al final del archivo a propósito: así gana por cascada sin tener que tocar ninguna regla de desktop, que queda intacta. La idea del mockup: cada sección ocupa la pantalla completa del teléfono, el lettering "lado C" va encima de las fotos, y la navegación se muda al pie — logo animado al centro (vuelve al inicio) con NOSOTROS y IA a los costados. ============================================================ ============================================================ */ /* ---------- Tokens propios de la barra inferior ---------- Fuera del media query porque el JS los lee y los pisa. */ :root { --c-nav-oscuro: #4A4A4A; /* plomo más oscuro: sobre fondo claro */ --c-nav-claro: #FFFFFF; /* sobre fotos oscuras */ --bar-alto: 0px; /* en desktop la barra no existe */ } .mobilebar { display: none; } @media (max-width: 767px) { :root { /* Alto reservado para que el contenido no quede tapado por la barra: el logo más el aire de arriba y abajo. */ --bar-logo: 56px; --bar-alto: calc(var(--bar-logo) + 40px + env(safe-area-inset-bottom, 0px)); --gutter: 22px; --header-pad: 16px; } /* ========================================================== HERO A PANTALLA COMPLETA ------------------------------------------------------------ El arte mobile es 1080x1920 (9:16). En un teléfono típico (0,46) "cover" recorta un poco a los lados y llena el alto, que es justo lo que se busca: cero franjas de papel. ========================================================== */ .hero { height: 100svh; min-height: 0; aspect-ratio: auto; margin-top: 0; margin-bottom: 0; } /* El