/* ========================================================================== YPF RUTA — Rediseño 2026 · Qué es YPF RUTA · Logos de marcas Figma: mobile 267:28469 (375x230) tablet 274:44519 (768x230) desktop 267:27224 (1440x316) En desktop entran las cuatro marcas repartidas a lo ancho. En mobile y tablet la fila se arrastra, sin flechas ni paginado. El arrastre lo maneja Swiper (js/newdesign/quees-logos.js), el mismo que ya usa el slider de la home. Con `grabCursor` anda tanto con el dedo como con el mouse apretado, que es lo que el scroll nativo no da. ========================================================================== */ .nd-logos { /* El bloque de cada marca en el Figma: el logo centrado adentro y la flecha pegada al canto derecho. En mobile (267:28469) el primer bloque está dibujado en 263px —375 menos 56 de margen a cada lado— justamente para que el logo centrado adentro caiga en el medio de la pantalla. Acá ese centrado lo hace Swiper (centeredSlides), así que los 30px extra no cumplen ninguna función y todos los bloques usan la misma medida: con 263 la segunda marca asomaba apenas un 4% y no se leía como "hay más". El ancho del primer logo entra en la cuenta sólo en desktop, porque ahí es el que tiene que quedar a ras del contenedor (ver el breakpoint de 1100). */ --nd-logos-bloque: 233.6px; --nd-logos-logo-1: 143px; background-color: var(--nd-black); overflow: hidden; padding: 40px 0 60px; position: relative; /* Full bleed, como el resto de las secciones nuevas */ margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; } /* El fondo va aparte para poder animarlo (ver reveal.css). En SVG: son formas vectoriales, así que escalan sin pixelarse y pesan menos de 2 KB. Mobile usa el archivo de tablet, que no existe uno propio. */ .nd-logos::before { background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-logos-tablet.svg"); background-position: center; background-repeat: no-repeat; /* 100% 100% y no cover: los SVG llevan preserveAspectRatio="none", así que el dibujo se mapea exacto sobre la caja de la sección a cualquier ancho. Con cover, arriba de 1440 el SVG se agrandaba y recortaba el 25% de abajo, y los trazos dejaban de encontrarse entre sección y sección: se veía un corte horizontal duro en cada juntura. */ background-size: 100% 100%; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 0; } /* -------------------------------------------------------------------------- La fila Se arrastra con el dedo. La barra de scroll se oculta porque el diseño no la contempla; el gesto sigue siendo el nativo. -------------------------------------------------------------------------- */ /* El cursor de "agarrar" se declara acá y no sólo desde Swiper: es la señal de que la fila se puede arrastrar, y conviene que esté aunque el JS tarde en inicializar. En MOBILE el track va a todo el ancho, sin márgenes: Swiper centra el bloque activo (centeredSlides) y ese centrado tiene que ser respecto de la ventana, no de un contenedor corrido. */ .nd-logos__track { cursor: grab; position: relative; z-index: 1; } .nd-logos__track:active { cursor: grabbing; } /* El bloque del Figma. En mobile y desktop el JS usa slidesPerView 'auto', así que Swiper respeta esta medida en vez de calcularla; en tablet la pisa con el ancho que sale de slidesPerView 2.3. El min() es por si algún teléfono muy angosto no llega a los 233.6. */ .nd-logos__track .swiper-slide { width: min(var(--nd-logos-bloque), 100%); } /* -------------------------------------------------------------------------- Cada marca -------------------------------------------------------------------------- */ /* El bloque ocupa todo el slide y el logo se centra adentro, con la flecha pegada al canto derecho: es como está armado en el Figma en mobile y en desktop. La excepción es tablet, donde el primer logo tiene que quedar a ras del contenedor (ver el breakpoint de 768). */ .nd-logos__item { align-items: center; display: flex; flex-direction: column; padding-bottom: 32px; text-decoration: none; width: 100%; } /* La flecha va arriba a la derecha del bloque */ .nd-logos__arrow { align-self: flex-end; background-image: url("../../images/newdesign/que-es-ypf-ruta/arrow.svg"); background-repeat: no-repeat; display: block; height: 26px; transition: transform 0.2s ease; width: 24px; } .nd-logos__item:hover .nd-logos__arrow, .nd-logos__item:focus-visible .nd-logos__arrow { transform: translate(3px, -3px); } .nd-logos__logo { display: block; height: auto; margin-top: 10px; max-width: 100%; } .nd-logos__item:focus-visible { outline: 2px solid var(--nd-white); outline-offset: 8px; } /* -------------------------------------------------------------------------- Tablet — Figma 274:44519 Acá no se centra: la fila arranca en el eje del contenedor —el mismo del banner de arriba, que también abre en var(--nd-gutter)— y se escapa por la derecha hasta el borde de la ventana, así la tercera marca queda cortada y se entiende que hay que arrastrar. Con padding en vez de margen no servía: el `overflow: hidden` de Swiper recorta en el borde exterior, o sea que al arrastrar los slides se veían igual por encima del padding izquierdo. El margen mueve la caja entera. -------------------------------------------------------------------------- */ @media (min-width: 768px) { .nd-logos__track { margin-left: var(--nd-gutter); } /* El bloque se encoge al ancho de su logo (max-content toma el hijo más ancho, que es la imagen). Dos cosas salen de ahí: el primer logo queda a ras del contenedor, porque no hay aire centrándolo adentro del slide; y la flecha, que va con align-self: flex-end, cae sobre la esquina derecha del logo y no en el canto del slide, que con slidesPerView 2.3 es bastante más ancho que el logo. */ .nd-logos__item { width: max-content; } } /* -------------------------------------------------------------------------- Desktop — las cuatro marcas repartidas, sin scroll -------------------------------------------------------------------------- */ @media (min-width: 1100px) { .nd-logos { padding: 100px 0; } .nd-logos::before { background-image: url("../../assets/newdesign/que-es-ypf-ruta/bkg-logos.svg"); } /* Las cuatro entran a lo ancho: Swiper queda desactivado por breakpoint. `margin: 0 auto` pisa el margin-left de mobile y vuelve a centrar. */ .nd-logos__track, .nd-logos__track:active { cursor: auto; margin: 0 auto; max-width: var(--nd-max-width); padding: 0; /* La sección es full-bleed (100vw), así que el ancho del contenedor hay que calcularlo: con max-width solo, entre 1100 y 1440 la fila se iba a todo el ancho de la ventana y el primer logo se salía del eje. */ width: calc(100% - var(--nd-gutter) * 2); } /* El ancho del bloque lo hereda de la regla base (--nd-logos-bloque): el JS vuelve a slidesPerView 'auto' en este breakpoint para que Swiper lo respete en vez de calcularlo en cuartos. Con el bloque de 311px que salía de slidesPerView 4, el logo quedaba 84px adentro y la flecha se iba lejos, que es lo que se leía como "alineado a la derecha". */ /* Vuelve a ocupar todo el bloque, con el logo centrado adentro (en tablet se encogía al ancho del logo para que el primero quede a ras del contenedor). */ .nd-logos__item { width: 100%; } /* space-between reparte los cuatro bloques a lo ancho del contenedor. El corrimiento a la izquierda es exactamente el aire que le queda al primer logo por ir centrado adentro de su bloque. Con eso su canto izquierdo cae en el eje del contenedor —el mismo del banner de arriba— y, como la fila termina donde termina el contenedor, la flecha del último cae en el eje derecho. Es lo mismo que hace el Figma cuando abre la fila en 26px en vez de 72 (72 - 45.3 = 26.7). Lo que sobresale por la izquierda es aire, no contenido: lo recorta el overflow de Swiper y no se ve. */ .nd-logos__track .swiper-wrapper { justify-content: space-between; margin-left: calc((var(--nd-logos-bloque) - var(--nd-logos-logo-1)) / -2); width: calc(100% + (var(--nd-logos-bloque) - var(--nd-logos-logo-1)) / 2); } }