/* ==========================================================================
YPF RUTA — Rediseño 2026 · Banner con foto
Componente compartido: una caja redondeada con una foto de fondo y un
bloque de texto encima. Lo usa una sección de "Qué es YPF RUTA" y está
pensado para reusarse en las páginas que faltan.
.nd-banner--cercana "Tu YPF más cercana" texto a la izquierda
mobile 267:28317 · tablet 274:44459 · desktop 267:27120
Para sumar un banner nuevo alcanza con un modificador que defina sus tres
fotos, la proporción de la caja en mobile y de qué lado va el texto.
Hubo un segundo modificador, .nd-banner--app ("App YPF RUTA", texto a la
derecha), con su velo oscuro en diagonal. Se dio de baja el 2026-08-10 al
unificar ese bloque con el del home (.nd-app en home-app.css): quedó un
solo modelo de "App YPF RUTA" en todo el sitio.
La foto se sirve en WebP. Los PNG originales quedan en assets/ de archivo.
========================================================================== */
.nd-banner {
background-color: var(--nd-black);
padding: 86px var(--nd-gutter);
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;
}
.nd-banner__inner {
margin: 0 auto;
max-width: var(--nd-max-width);
width: 100%;
}
/* --------------------------------------------------------------------------
La caja
En mobile la foto es vertical y el texto se apoya abajo; de tablet para
arriba la foto es apaisada y el texto va centrado a un costado.
-------------------------------------------------------------------------- */
.nd-banner__box {
align-items: flex-end;
border-radius: 12px;
display: flex;
overflow: hidden;
padding: 24px;
position: relative;
}
/* La foto va en un pseudo-elemento para poder animarla (ver reveal.css) */
.nd-banner__box::before {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.nd-banner__content {
display: flex;
flex-direction: column;
gap: 60px;
position: relative;
z-index: 2;
}
.nd-banner__group {
display: flex;
flex-direction: column;
gap: 20px;
}
/* --------------------------------------------------------------------------
Contenido
-------------------------------------------------------------------------- */
.nd-banner__pin {
display: block;
height: 48px;
width: 36px;
}
.nd-banner__title {
color: var(--nd-white);
font-family: var(--nd-font-display);
font-size: 36px;
font-weight: var(--nd-w-bold);
letter-spacing: 0.72px;
line-height: 42px;
margin: 0;
}
.nd-banner__text {
color: var(--nd-white);
font-family: var(--nd-font-display);
font-size: 16px;
font-weight: var(--nd-w-regular);
letter-spacing: 0.32px;
line-height: 20px;
margin: 0;
}
.nd-banner__cta {
align-items: center;
align-self: flex-start;
background-color: var(--nd-blue);
border-radius: var(--nd-radius);
color: var(--nd-white);
display: flex;
font-family: var(--nd-font-display);
font-size: 16px;
font-weight: var(--nd-w-medium);
height: 40px;
justify-content: center;
letter-spacing: 0.32px;
padding: 0 16px;
text-decoration: none;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.nd-banner__cta:hover,
.nd-banner__cta:focus-visible {
background-color: #0340b0;
color: var(--nd-white);
}
/* El salto de línea forzado del Figma sólo aplica en desktop.
Estuvo en tablet hasta que "YPF Ruta" pasó a "YPF RUTA": en versales el
texto es más ancho y en la caja de 283px de tablet ya no entra "La nueva
plataforma de YPF RUTA llegó para" en un renglón. El corte natural caía
antes de "para", y el
mandaba esa palabra sola a una línea:
La nueva plataforma de YPF RUTA llegó
para <- huérfana
transformar la gestión de todo tipo de
flotas.
En desktop la caja mide 420px, ahí el renglón entra completo y el salto
sigue haciendo lo que pide el Figma. Así que el
vive de 1100 para
arriba y en tablet el texto acomoda solo. */
.nd-banner__br {
display: none;
}
/* --------------------------------------------------------------------------
Tablet
OJO con la especificidad: los modificadores de abajo usan selectores de
dos clases (.nd-banner--x .nd-banner__box), así que le ganan a estas
reglas de una sola aunque estén dentro de un media query. Por eso cada
modificador repite su aspect-ratio en su propio media query.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.nd-banner {
padding: 80px var(--nd-gutter);
}
.nd-banner__box {
align-items: center;
aspect-ratio: 720 / 432;
}
.nd-banner__content {
width: 283px;
}
}
/* --------------------------------------------------------------------------
Desktop
-------------------------------------------------------------------------- */
@media (min-width: 1100px) {
.nd-banner__box {
aspect-ratio: 1440 / 480;
}
.nd-banner__content {
width: 420px;
}
.nd-banner__br {
display: inline;
}
.nd-banner__title {
font-size: 48px;
}
}
/* ==========================================================================
Modificador · Tu YPF más cercana — texto a la izquierda
========================================================================== */
.nd-banner--cercana .nd-banner__box {
aspect-ratio: 327 / 841;
padding-bottom: 86px;
}
.nd-banner--cercana .nd-banner__box::before {
background-image: url("../../images/newdesign/que-es-ypf-ruta/ypf-mas-cercana-mobile.webp");
}
@media (min-width: 768px) {
.nd-banner--cercana .nd-banner__box {
aspect-ratio: 720 / 432;
padding-bottom: 24px;
}
.nd-banner--cercana .nd-banner__box::before {
background-image: url("../../images/newdesign/que-es-ypf-ruta/ypf-mas-cercana-tablet.webp");
}
}
@media (min-width: 1100px) {
.nd-banner--cercana .nd-banner__box {
aspect-ratio: 1440 / 480;
/* 8.49% del ancho de la caja: donde el Figma apoya el texto */
padding-left: 8.49%;
}
.nd-banner--cercana .nd-banner__box::before {
background-image: url("../../images/newdesign/que-es-ypf-ruta/ypf-mas-cercana.webp");
}
.nd-banner--cercana .nd-banner__title {
letter-spacing: 0.96px;
line-height: 52px;
}
}