/* ==========================================================================
YPF RUTA — Rediseño 2026 · Financiamiento / Convenios
La grilla de tarjetas de bancos que va abajo del hero. En el Figma el frame
se llama "tabs / grid" y la tarjeta "card / image + text +cta".
mobile 267:28531 (375x2056)
tablet 274:45601 (768x1736)
desktop 267:26904 (1440x1148)
1920 331:6679 (1920x1148)
Ancho de contenido: 1080px, no los 1296 de --nd-max-width. En el Figma la
sección tiene 180px de padding lateral a 1440 (1440 - 180*2 = 1080), así que
este bloque es más angosto que el resto del sitio a propósito.
La tarjeta reusa .nd-panel de base.css (borde, blur y radio compartidos con
"Clientes que nos eligen" y "App YPF RUTA"); sólo se le pisa el ángulo del
degradado, que acá el Figma pone en 105° en vez de 130°.
Altura de las tarjetas: en el Figma miden 564px fijos porque el texto es
lorem ipsum. Acá se estiran a la más alta de la fila y el botón se manda al
piso con margin-top:auto, así los tres CTA quedan alineados aunque los
textos midan distinto.
========================================================================== */
.nd-conv {
background-color: var(--nd-black);
overflow: hidden;
padding: 80px var(--nd-gutter);
position: relative;
/* Full bleed, igual que el resto de las secciones nuevas */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
/* El fondo va en un pseudo-elemento aparte del contenido, para poder animarlo
sin arrastrar las tarjetas. Ver css/newdesign/reveal.css. */
.nd-conv::before {
background-image: url("../../assets/newdesign/financiamiento/bkg-grid-mobile.svg");
background-position: top center;
background-repeat: no-repeat;
/* 100% 100% y no cover: los SVG llevan preserveAspectRatio="none". Acá es
además indispensable, porque el alto de la sección depende del largo de
los textos y nunca va a ser exactamente el del archivo. */
background-size: 100% 100%;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.nd-conv__inner {
margin: 0 auto;
max-width: 1080px;
position: relative;
width: 100%;
z-index: 1;
}
.nd-conv__title {
color: var(--nd-white);
font-family: var(--nd-font-display);
font-size: 30px;
font-weight: var(--nd-w-medium);
letter-spacing: 0.6px;
line-height: 44px;
margin: 0 0 60px;
}
/* --------------------------------------------------------------------------
Grilla — 1 columna en mobile, 2 en tablet, 3 en desktop
-------------------------------------------------------------------------- */
.nd-conv__grid {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
/* --------------------------------------------------------------------------
Tarjeta
-------------------------------------------------------------------------- */
.nd-conv__card {
display: flex;
flex-direction: column;
gap: 60px;
padding: 20px;
/* Con los CTA ocultos el Figma deja la tarjeta en 464 y no en los 424 que
daría el contenido: 40px de aire extra abajo del último renglón.
Cuando vuelvan los botones, esta línea se borra. */
padding-bottom: 60px;
/* Mismo degradado que .nd-panel pero a 105°, como lo define este nodo */
background-image: linear-gradient(105deg,
rgba(40, 69, 112, 0.238) 7.407%,
rgba(4, 81, 221, 0.136) 99.894%);
}
/* Caja blanca del logo. En el Figma es el "Slot": 100px de alto, radio 2 y una
sombra suave. Los PNG que exportó diseño traían esta caja y su sombra
pintadas adentro; se recortaron a la imagen de 200x100 y la caja se rearma
acá, así escala bien en los tres anchos (el Slot mide 304 / 308 / 270 según
el breakpoint, pero el logo siempre va a 200x100). */
.nd-conv__logo {
align-items: center;
background-color: var(--nd-white);
border-radius: 2px;
box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
display: flex;
height: 100px;
justify-content: center;
padding: 10px;
width: 100%;
}
.nd-conv__logo-img {
display: block;
height: auto;
max-width: 100%;
width: 200px;
}
.nd-conv__body {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Tipografía: el Figma pide Neue Haas Grotesk Display Std en TODA la tarjeta
—título 75 Bold, cuerpo 55 Roman, botón 65 Medium—, no la DIN del resto del
sitio. Los tracking salen del mismo nodo. */
.nd-conv__card-title {
color: var(--nd-white);
font-family: var(--nd-font-display);
font-size: 18px;
font-weight: var(--nd-w-bold);
letter-spacing: 0.36px;
line-height: 28px;
margin: 0;
}
.nd-conv__card-text {
color: #e0e0e0;
font-family: var(--nd-font-display);
font-size: 14px;
font-weight: var(--nd-w-regular);
letter-spacing: 0.28px;
line-height: 20px;
margin: 0;
}
/* Los párrafos del cuerpo van separados por un renglón en blanco, que en el
Figma es un
de más: 20px, el line-height del texto. Por eso este gap
es 20 y no los 16 que separan al título del cuerpo. */
.nd-conv__copy {
display: flex;
flex-direction: column;
gap: 20px;
}
/* "¿Cómo solicitar la garantía?" no es un título aparte: en el Figma es una
línea del mismo párrafo en 65 Medium y del mismo color que el cuerpo.
Va en display:block y no con un
detrás porque el renglón quedaba de
21px: al mezclar 65 Medium y 55 Roman en una misma línea, la caja de línea
toma la unión de las métricas de las dos fuentes y se pasa del line-height.
Con el bloque, cada renglón tiene un solo peso y mide los 20px del Figma. */
.nd-conv__lead {
display: block;
font-weight: var(--nd-w-medium);
}
/* Links dentro del cuerpo. El celeste #00ADEE es el del Figma; no es ninguna
de las variables del sitio, que sólo tiene el azul #0451DD. El mail va sin
subrayado y "YPF RUTA" con subrayado, tal como está en el nodo. */
.nd-conv__mail,
.nd-conv__link {
color: #00adee;
/* El mail no entra en el ancho de la tarjeta a 375: se parte antes que
desbordar. */
word-break: break-word;
}
.nd-conv__mail {
text-decoration: none;
}
.nd-conv__link {
text-decoration: underline;
}
.nd-conv__mail:hover,
.nd-conv__mail:focus-visible {
color: #00adee;
text-decoration: underline;
}
.nd-conv__link:hover,
.nd-conv__link:focus-visible {
color: #00adee;
text-decoration: none;
}
/* margin-top:auto empuja el CTA al piso de la tarjeta: las tres tienen la
altura de la más alta, así que los botones quedan a la misma línea. El gap
de 60px del Figma sigue siendo el mínimo. */
.nd-conv__cta {
align-items: center;
align-self: flex-start;
background-color: var(--nd-blue);
border-radius: var(--nd-radius);
color: var(--nd-white);
display: inline-flex;
font-family: var(--nd-font-display);
font-size: 16px;
font-weight: var(--nd-w-medium);
justify-content: center;
letter-spacing: 0.32px;
line-height: 28px;
margin-top: auto;
/* El Figma da el botón en 40px de alto con la etiqueta en 16/28: sin padding
vertical, el min-height es el que fija los 40. */
min-height: 40px;
padding: 0 16px;
text-decoration: none;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.nd-conv__cta:hover,
.nd-conv__cta:focus-visible {
background-color: #0341b0;
color: var(--nd-white);
}
/* --------------------------------------------------------------------------
Tablet — 2 columnas y los 240px de aire arriba y abajo
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
.nd-conv {
padding: 240px var(--nd-gutter);
}
.nd-conv::before {
background-image: url("../../assets/newdesign/financiamiento/bkg-grid-tablet.svg");
}
.nd-conv__grid {
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
}
/* --------------------------------------------------------------------------
Desktop — las 3 columnas
-------------------------------------------------------------------------- */
@media (min-width: 1100px) {
.nd-conv::before {
background-image: url("../../assets/newdesign/financiamiento/bkg-grid-desktop.svg");
}
.nd-conv__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Arriba de 1440 entra la versión ancha del fondo, por el mismo motivo que en
el hero: el archivo de 1440 estirado achata las curvas. Ver el comentario
largo en css/newdesign/hero-secundario.css. */
@media (min-width: 1441px) {
.nd-conv::before {
background-image: url("../../assets/newdesign/financiamiento/bkg-grid-1920.svg");
}
}