/* =============================================================================
Remolques INDECAR — sistema visual
Derivado midiendo tres referencias, no estimando:
· visionmotors.com.ar → ritmo de sección 112px, tarjetas r16 sin sombra,
alternancia de fondos claro/oscuro, banda de acento.
· mercedes-benz.com.ar → sobriedad industrial: titulares grandes de peso
contenido, sin tracking exagerado, radios chicos en controles.
· apple.com/iphone-17-pro → SF Pro, base 17px/1.47, gris de apoyo,
aire asimétrico (más abajo que arriba de cada sección).
========================================================================== */
:root{
/* --- Color -------------------------------------------------------------
Todo medido con scripts/contrast.py. Dos reglas que gobiernan la paleta:
1) Ningún color de marca sirve para texto sobre claro. Cada uno tiene una
variante derivada que conserva tono y saturación y sólo baja la luz.
2) Las variantes se derivan contra el fondo MÁS CLARO donde viven, que no
es el blanco sino el papel tintado de azul. Derivarlas contra blanco
las deja fallando en las secciones alternas. */
/* Naranja de marca #E56200, el mismo del logo del header (muestreado del
PNG: 3.263 píxeles de ese valor exacto). Por pedido del cliente se usa
este único tono en TODO lo naranja del sitio, sin derivar variantes.
Queda constancia de lo que eso implica, medido:
· sobre blanco 3.45:1 (la norma pide 4.5 para texto normal)
· sobre el papel tintado 3.29:1
· con blanco encima 3.45:1 (botones)
· sobre el oscuro #121316 5.38:1 (este sí cumple)
Es decir: el naranja como texto o como fondo de botón queda por debajo
del umbral AA. Fue una decisión explícita del cliente, priorizando la
fidelidad de marca. Si alguna vez se quiere corregir sin cambiar el
color a la vista, la derivada #BF5200 da 4.52:1 y es casi idéntica. */
--marca: #E56200;
--marca-ink: #E56200;
--marca-btn: #E56200;
--marca-luz: #E56200;
--marca-hero: #E56200;
/* Azul. Es el color de los títulos. Se parte en dos porque el de marca
alcanza para texto grande (≥24px pide 3:1) pero no para un h3 de 17px
(pide 4.5:1). Mismo tono y saturación: se leen como un solo color. */
--azul: #0081CB; /* marca. Titulares ≥24px: 4.20 blanco / 3.99 papel */
--azul-titulo: #0076B9; /* h3 y títulos chicos: 4.89 blanco / 4.65 papel */
--azul-btn: #0076B9; /* 4.89:1 con texto blanco encima */
--azul-fondo: #0076B9; /* sección azul plena con texto blanco: 4.89:1 */
--azul-luz: #4FB0E8; /* 7.70:1 sobre #121316 */
/* Vidrio de marca: el tinte de baja opacidad de las tarjetas */
--azul-vidrio: rgba(0,129,203,.045);
--azul-vidrio2: rgba(0,129,203,.09);
--azul-borde: rgba(0,129,203,.16);
--tinta: #2B2B2B; /* 14.16:1 sobre blanco, 13.47:1 sobre el papel */
--tinta-2: #5E5E5E; /* 6.48:1 / 6.17:1 — texto secundario */
--papel: #FFFFFF;
--papel-2: #F5FAFD; /* el azul de marca al 4% sobre blanco: la sección
alterna deja de ser gris neutro y pasa a la marca */
--papel-3: #EBF5FB; /* superficie hundida */
--noche: #121316; /* queda sólo en el pie y en el filtro del hero */
--noche-2: #1B1D21;
--tinta-inv: #F5F5F7; /* 17.06:1 sobre noche */
--tinta-inv-2:#A8A8B0; /* 7.87:1 sobre noche */
--sobre-azul: rgba(255,255,255,.86); /* texto secundario sobre azul pleno */
--linea: #DCE7EF; /* separadores decorativos, tintados */
--linea-form: #8FA3B2; /* bordes de control: necesitan 3:1 contra su fondo */
/* --- Tipografía ---------------------------------------------------------
San Francisco es la fuente pedida. Existe de verdad sólo en Apple, así
que Inter la respalda: es la que más se le parece de las disponibles.
El orden importa — en Mac/iPhone se ve SF real, en Windows/Android Inter. */
/* Figtree PRIMERO, y esto importa: antes la pila arrancaba con -apple-system
y system-ui, que ganan siempre —SF Pro en Mac, Segoe UI en Windows— y la
webfont no la usaba nadie en ninguna plataforma. Se descargaba al pedo.
El sitio se veía distinto según el sistema, y en Windows el titular se
partía en tres renglones porque Segoe UI en peso 800 es más ancha.
MEDIDO sobre los 90 textos del sitio: de diez candidatas de Google Fonts
NINGUNA iguala el ancho de SF Pro —es muy compacta y encima lleva tracking
negativo—. Figtree es la más cercana, +9%, y mantiene el titular en dos
renglones de 1512 hasta 1024. El peso 800 va en el pedido: el titular lo
usa, y sin él el navegador falsifica la negrita sobre el 700. */
--tipo: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Display",
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Escala fluida. El extremo alto sale de la referencia (Vision Motors H1
84px), bajado a 72 porque el titular de INDECAR es más largo. */
--t-h1: clamp(2.5rem, 1.15rem + 5.4vw, 5.28rem); /* 84.5px a 1280, medido */
--t-h2: clamp(1.85rem, 1.15rem + 2.8vw, 3.25rem); /* 52px a 1280, medido */
--t-h3: clamp(1.05rem, 0.98rem + 0.3vw, 1.1875rem); /* 19px, cerca de los 17 */
--t-base: 1.0625rem; /* 17px, la base de Apple */
--t-sm: 0.9375rem; /* 15px */
--t-xs: 0.8125rem; /* 13px */
--t-eyebrow: 0.75rem; /* 12px versalitas */
/* --- Forma y ritmo ----------------------------------------------------- */
--r-card: 16px; /* de Vision Motors */
--r-ctrl: 10px; /* controles: más seco, de Mercedes */
--r-pill: 999px;
--sec-y: 112px; /* ritmo vertical de sección, medido */
--sec-y-m: 68px; /* el mismo ritmo en mobile */
/* Medidas tomadas de visionmotors.com.ar midiendo, no estimando: contenedor
de 1240px con 34px de aire a cada lado, header de 74px, hero de 720px. */
--ancho: 1240px;
/* El header es una píldora flotante. --nav-h es el alto TOTAL que ocupa,
incluido el aire de afuera: 14 + 74 de píldora + 14. La píldora mide 74 y
no 72 porque su borde de 1px arriba y abajo empuja el contenido: 52 de
logo + 20 de relleno + 2 de borde. El hero se sube ese total. */
--nav-h: 102px;
--pastilla: 72px; /* alto de la píldora: 52 de logo + 10 y 10 */
--pastilla-r: 20px;
--sangria: 34px; /* el aire interno del contenedor de la referencia */
/* El hero ocupa la pantalla entera. svh y no vh: en el celular vh mide el
alto SIN la barra del navegador, así que la fila de datos quedaría cortada
abajo. svh toma el alto chico —el que queda con la barra a la vista— y por
eso nunca desborda. */
--hero-h: 100svh;
--gap: 24px;
--sombra-card: 0 1px 2px rgba(20,22,26,.04), 0 8px 24px -16px rgba(20,22,26,.28);
--sombra-flot: 0 6px 18px rgba(20,22,26,.24);
/* Vidrio del header. Subir --vidrio-opacidad lo vuelve más sólido; bajarlo,
más transparente. Con .62 el menú conserva 6,6:1 contra el peor fondo que
puede pasar por debajo, así que hay margen hasta ~.45 antes de acercarse
al límite de la norma. */
/* Filtro de la foto del hero. Ver la medición en .hero__velo antes de
tocarlo: por debajo de .55 el texto deja de cumplir la norma. */
--velo-hero: .62;
/* Filtro del header mientras flota sobre la foto. Plano, un escalón por
debajo del velo del hero. */
--velo-header: .52;
--vidrio-opacidad: .62;
--vidrio-blur: 28px;
--transicion: 180ms cubic-bezier(.32,.72,0,1);
/* Entrar y salir van con ease-out fuerte; nunca ease-in en interfaz, porque
arranca lento justo en el instante que el usuario está mirando. */
--ease-out: cubic-bezier(.23, 1, .32, 1);
--ease-in-out: cubic-bezier(.77, 0, .175, 1);
}
/* --- Reset acotado -------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
body{
margin:0; background:var(--papel); color:var(--tinta);
font-family:var(--tipo); font-size:var(--t-base); line-height:1.55;
/* Impide que la última línea de un párrafo quede con una sola palabra.
MEDIDO: con Figtree y sin esto el sitio pasaba de 6 huérfanas a 8; con
esto baja a 3, y los cortes que fuimos acordando quedan intactos. */
text-wrap:pretty;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
/* Cada dentro de su : es el ÚLTIMO
hijo, nunca el primero. Sin esto, `display:contents` esconde el source. */
picture{ display:contents; }
picture source{ display:none; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* El trae `background: buttonface` (#EFEFEF) del navegador. Sobre un
header blanco no se notaba; sobre el oscuro aparecía una píldora gris
detrás de "Productos". Se apaga acá y cada botón pone el suyo. */
button{ background:none; border:0; }
:focus-visible{ outline:3px solid var(--azul-btn); outline-offset:2px; border-radius:4px; }
/* --- Tipografía ----------------------------------------------------------- */
/* Pesos, interlineados y tracking copiados de la referencia. El tracking es
específico por tamaño: el titular grande necesita apretarse porque las
letras se leen demasiado separadas al crecer; el texto chico, no. */
h1,.h1{ font-size:var(--t-h1); font-weight:800; line-height:.98; letter-spacing:-.03em; }
h2,.h2{ font-size:var(--t-h2); font-weight:700; line-height:1.05; letter-spacing:-.02em; }
h3,.h3{ font-size:var(--t-h3); font-weight:700; line-height:1.05; letter-spacing:-.01em; }
/* Todos los títulos en el azul de la marca. El h1 y el h2 usan el azul puro
—a ese tamaño la norma pide 3:1 y da 4.20—; el h3 usa la variante derivada
porque a 19px la norma pide 4.5 y el puro se queda en 4.20. */
h1,h2,.h1,.h2{ color:var(--azul); }
h3,.h3{ color:var(--azul-titulo); }
.sec--azul h1,.sec--azul h2,.sec--azul h3,
.sec--noche h1,.sec--noche h2,.sec--noche h3,
.hero h1,.card--todos h3,.entrega__txt h3,.svc__item h3{ color:inherit; }
.eyebrow{
display:flex; align-items:center; gap:10px;
font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--marca-ink); margin-bottom:16px;
}
/* La barra de acento delante del eyebrow se sacó a pedido. El gesto vivía en
.eyebrow::before y alcanzaba a todas las secciones del sitio de una sola vez.
El gap del flex queda igual: sin hijo que separar, no deja hueco. */
.sec-head--centro .eyebrow{ justify-content:center; }
.eyebrow--inv{ color:var(--marca-luz); }
.hero .eyebrow--inv{ color:var(--marca-hero); } /* sobre foto, no sobre sólido */
/* Sobre el azul pleno el naranja da 2.17:1: no hay variante que lo salve, son
dos colores de luminancia parecida. El eyebrow ahí va en blanco y se
distingue del título por tamaño, peso y tracking, no por color. */
.sec--azul .eyebrow{ color:#fff; }
/* 18px fijo, no fluido: son los once textos de apoyo del sitio y el cliente
pidió que midan todos lo mismo. Es el tamaño de la bajada de la referencia.
Los colores quedan como están, a pedido: gris en la mayoría y tinta en los
párrafos institucionales de Contacto. */
.bajada{ font-size:1.125rem; line-height:1.55; color:var(--tinta-2); }
.bajada--inv{ color:var(--tinta-inv-2); }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* El enlace de salto sale de su escondite al recibir el foco: si queda de 1×1
siempre, el auditor lo cuenta como área táctil chica y nadie puede usarlo. */
a.sr-only:focus-visible{
position:fixed; top:10px; left:10px; z-index:100;
width:auto; height:auto; min-height:44px; padding:12px 20px; margin:0;
clip:auto; overflow:visible;
background:var(--noche); color:var(--tinta-inv);
border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600;
display:inline-flex; align-items:center;
}
/* --- Estructura ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:var(--sangria); }
.sec{ padding-block:var(--sec-y) calc(var(--sec-y) * 1.1); } /* más aire abajo, como Apple */
.sec--noche{ background:var(--noche); color:var(--tinta-inv); }
/* Azul de marca pleno. Es #0076B9 y no el #0081CB de marca porque el texto
blanco encima necesita 4.5:1 y el de marca sólo da 4.20. */
.sec--azul{ background:var(--azul-fondo); color:#fff; }
.sec--azul .bajada{ color:var(--sobre-azul); }
.sec--gris{ background:var(--papel-2); }
/* 790 y no 760. MEDIDO sobre las siete bajadas del sitio: a 760 dos quedaban
con una sola palabra en el último renglón —la segunda de Contacto, que
colgaba "profesional.", y la de Promociones—. A 790 la de Contacto pasa a
tres renglones con doce palabras en el último y la de Promociones entra
entera en uno. Las otras cinco no se mueven. */
.sec-head{ max-width:790px; margin-bottom:56px; }
.sec-head--centro{ margin-inline:auto; text-align:center; }
.sec-head p{ margin-top:18px; }
/* --- Botones -------------------------------------------------------------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-height:48px; padding:13px 26px; border:1px solid transparent;
border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:600;
letter-spacing:-.01em; cursor:pointer; transition:var(--transicion);
transition-property:background-color,border-color,color,transform;
}
@media (hover:hover){ .btn:hover{ transform:translateY(-1px); } }
/* Retroceso al presionar: es el acuse de recibo de la interfaz, y va en el
pointer-down, no al soltar. Sutil a propósito —0.97— porque scale() también
achica el texto y los íconos de adentro. */
.btn:active{ transform:scale(.97); transition-duration:140ms; }
.btn--primario{ background:var(--marca-btn); color:#fff; }
/* Sólo el del hero va en azul de marca, a pedido. El resto de los botones
principales del sitio siguen en naranja.
MEDIDO: #0081CB con blanco encima da 4.20:1 y la norma pide 4.5 para texto
de 15px. Es la misma decisión que ya se tomó para "Pedir cotización": el
color exacto de la marca por encima del umbral. El derivado #0076B9 da
4.89:1 y a ojo es indistinguible, por si se quiere corregir. */
.hero__cta .btn--primario{ background:var(--azul); }
.hero__cta .btn--primario:hover{ background:#0076B9; } /* 4.91:1 */
.btn--primario:hover{ background:#9C4600; }
.btn--azul{ background:var(--azul-btn); color:#fff; } /* 4.87:1 */
.btn--azul:hover{ background:#00679F; }
.btn--linea{ background:transparent; border-color:var(--linea-form); color:var(--tinta); }
.btn--linea:hover{ border-color:var(--tinta); background:var(--papel-2); }
.btn--linea-inv{ background:transparent; border-color:rgba(245,245,247,.32); color:var(--tinta-inv); }
.btn--linea-inv:hover{ border-color:var(--tinta-inv); background:rgba(245,245,247,.08); }
.btn--wa{ background:#188840; color:#fff; } /* 4.53:1 — el verde de marca de
WhatsApp (#25D366) da 1.7:1 con texto blanco. Derivado conservando tono y
saturación; el flotante sí usa el verde original porque no lleva texto. */
.btn--wa:hover{ background:#136B33; }
.btn--sm{ min-height:44px; padding:10px 18px; font-size:var(--t-xs); }
.btn svg{ width:18px; height:18px; flex:none; }
/* --- Cabecera ------------------------------------------------------------- */
/* El header es una capa traslúcida por la que pasa el contenido, no una
franja opaca que se come 70px. Arranca invisible sobre el hero —integrado
con el fondo— y se materializa al scrollear. El peor caso de fondo es
contenido blanco pasando por debajo: con alfa .80 el color efectivo es
#414143, donde el texto #F5F5F7 da 9.2:1. */
.nav{
position:sticky; top:0; z-index:60;
color:var(--tinta-inv);
padding:14px 20px;
background:transparent;
/* Sin border-bottom: un borde de 1px ocupa espacio aunque sea transparente,
y hacía que el header midiera 93px contra los 92 que se sube el hero.
Ese píxel de diferencia dejaba ver una línea blanca del body arriba de
todo. La línea del estado sólido se dibuja con box-shadow, que pinta
fuera de la caja y no cuenta para el layout. */
box-shadow:none;
transition:background-color 220ms var(--ease-out),
box-shadow 220ms var(--ease-out),
backdrop-filter 220ms var(--ease-out);
}
/* Sólido = claro. Era oscuro de cuando el sitio entero era oscuro, y con la
vuelta a fondos claros quedaba barra negra sobre sección blanca —y el 0800,
que es texto oscuro, invisible encima—. Ahora el header sólo es oscuro
mientras flota sobre la foto del hero. */
/* La píldora. Dos estados: vidrio oscuro mientras flota sobre la foto del
hero, vidrio claro para el resto de la navegación. El claro es obligatorio
ahí: sobre las secciones claras el vidrio oscuro se vuelve una placa gris. */
.nav__in{
max-width:var(--ancho); margin-inline:auto;
padding:10px 12px 10px 18px; min-height:var(--pastilla);
border-radius:var(--pastilla-r);
background:rgba(14,17,22,.55);
border:1px solid rgba(255,255,255,.14);
backdrop-filter:saturate(180%) blur(26px);
-webkit-backdrop-filter:saturate(180%) blur(26px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 18px 44px -26px rgba(0,0,0,.7);
transition:background-color 260ms var(--ease-out),
border-color 260ms var(--ease-out),
box-shadow 260ms var(--ease-out);
}
.nav[data-solido="true"] .nav__in,
.nav:has(.nav__menu[data-abierto="true"]) .nav__in{
background:rgba(255,255,255,.62);
border-color:rgba(255,255,255,.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 18px 44px -28px rgba(0,60,100,.5);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav__in{ background:rgba(14,17,22,.9); }
.nav[data-solido="true"] .nav__in{ background:rgba(255,255,255,.96); }
}
/* Sin backdrop-filter el fondo al 62% dejaría pasar el contenido sin desenfocar
y el menú se leería sobre cualquier cosa. Ahí el vidrio se vuelve opaco. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.nav:has(.nav__menu[data-abierto="true"]),
.nav[data-solido="true"]{ background:rgba(255,255,255,.96); }
}
/* Los colores del contenido siguen al estado de la barra, no al revés. */
.nav:has(.nav__menu[data-abierto="true"]) .nav__link,
.nav:has(.nav__menu[data-abierto="true"]) .nav__burger,
.nav[data-solido="true"] .nav__link,
.nav:has(.nav__menu[data-abierto="true"]) .nav__link{ color:rgba(43,43,43,.66); }
.nav[data-solido="true"] .nav__burger,
.nav:has(.nav__menu[data-abierto="true"]) .nav__burger{ color:var(--tinta); }
@media (hover:hover){ .nav[data-solido="true"] .nav__link:hover{ color:var(--tinta); } }
@media (hover:hover){
.nav[data-solido="true"] .nav__link:hover{ background:var(--azul-vidrio2); color:var(--azul-fondo); }
}
.nav[data-solido="true"] .nav__link[aria-expanded="true"]{ background:var(--azul-vidrio2); color:var(--azul-fondo); }
/* Sin relleno propio: el contenido se centra solo y los dos aires quedan
iguales, 14px arriba y 14 abajo. */
/* El filtro plano se retira: ahora el vidrio de la píldora hace ese trabajo,
y un velo a lo ancho de toda la barra taparía el aire que la rodea. */
/* El contenido tiene que quedar POR ENCIMA del filtro: un ::before absoluto
pinta arriba de los hijos estáticos, y sin esto el degradé tapaba el logo
y el menú. */
.nav__in{ position:relative; z-index:1; display:flex; align-items:center; gap:20px; }
.nav__logo{ display:flex; align-items:center; min-height:44px; }
.nav__logo img{ height:52px; width:auto; }
.nav__menu{ position:relative; display:flex; align-items:center; gap:2px; margin-left:8px; }
/* Subrayado de sección activa. Es UN solo elemento que se desplaza y cambia de
ancho, no un borde por enlace: así el paso de una palabra a otra es un
deslizamiento continuo y no un encendido/apagado. Va por transform y width
—el transform no dispara relayout— y arranca invisible hasta que el scroll
entra en alguna de las secciones observadas. */
.nav__subrayado{
position:absolute; left:0; bottom:7px; height:2px; width:0;
background:var(--azul); opacity:0; border-radius:2px;
pointer-events:none;
transition:transform 380ms var(--ease-in-out),
width 380ms var(--ease-in-out),
opacity 220ms var(--ease-out);
}
.nav__subrayado[data-visible="true"]{ opacity:.8; }
/* En mobile el menú es un panel apilado: el subrayado deslizante no aplica. */
@media (max-width:900px){ .nav__subrayado{ display:none; } }
@media (prefers-reduced-motion:reduce){
.nav__subrayado{ transition:opacity 220ms var(--ease-out); }
}
.nav__link{
display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:10px 13px;
border-radius:var(--r-pill); font-size:var(--t-sm); font-weight:500;
letter-spacing:-.01em;
transition:background-color var(--transicion), padding 220ms var(--ease-out);
}
/* Vibrancia: sobre un material traslúcido el texto necesita algo más de peso
y de tracking que sobre un fondo sólido, o se deshace contra lo que pasa. */
.nav__link{ font-weight:500; letter-spacing:-.005em; color:rgba(255,255,255,.74); }
@media (hover:hover){ .nav__link:hover{ color:#fff; } }
@media (hover:hover){ .nav__link:hover{ background:rgba(245,245,247,.12); } }
.nav__link[aria-expanded="true"]{ background:rgba(245,245,247,.12); }
.nav__link svg{ width:12px; height:12px; transition:transform var(--transicion); }
.nav__link[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav__acciones{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:none; }
/* Sin flex:none el logo es un ítem flexible más y, cuando la fila se pasa de
ancho, el navegador lo achica antes que al texto: llegó a medir 0px de ancho
y el header se veía sin marca. Las imágenes con width:auto son las primeras
víctimas de un flex sobrevendido. */
.nav__logo{ flex:none; }
.nav__acciones .btn{ white-space:nowrap; }
/* Azul de marca exacto, a pedido, con el texto en negrita.
MEDICIÓN: #0081CB con blanco encima da 4.20:1 y la norma pide 4.5 para texto
de este tamaño. La negrita ayuda a la lectura pero no cambia el umbral: para
pasar habría que subir el texto a 19px, o usar el derivado #0076B9 (4.89:1),
que a ojo es el mismo azul. Queda documentado y es decisión del cliente. */
.nav__acciones .btn--primario{ background:var(--azul); font-weight:700; }
.nav__acciones .btn--primario:hover{ background:#0076B9; }
@media (hover:hover){
}
/* Buscador de la cabecera.
Presupuesto medido a 1280 después de sacar el 0800 y "Preguntas":
logo 93 + menú 606 + acciones 140 + huecos 40 = 879, contra 1172
disponibles. Sobran 293 y el buscador ocupa 220 con su hueco, así que
entra. El corte queda en 1240 —el ancho del contenedor— porque por debajo
de 1207 ya no entraría. */
@media (max-width:1239px){ .nav .busca{ display:none; } }
.busca{ position:relative; flex:none; }
/* Con el header sólido y claro, un campo blanco sobre barra blanca desaparece.
Se le da el vidrio de marca y un borde con 3:1 real contra el fondo. */
.nav[data-solido="true"] .busca__input{
background:var(--azul-vidrio2); border-color:var(--azul-borde); color:var(--tinta);
}
.nav[data-solido="true"] .busca__input::placeholder{ color:var(--tinta-2); }
.nav[data-solido="true"] .busca__lupa{ color:var(--azul-titulo); }
.nav[data-solido="true"] .busca__input:focus{ background:var(--papel); border-color:var(--azul); }
.busca__input{
width:210px; min-height:44px; padding:10px 14px 10px 40px;
background:rgba(245,245,247,.12); color:var(--tinta-inv);
border:1px solid rgba(245,245,247,.18);
border-radius:var(--r-pill); font-size:var(--t-sm);
transition:width 220ms var(--ease-out), background-color 220ms var(--ease-out),
border-color 220ms var(--ease-out);
}
.busca__input::placeholder{ color:rgba(245,245,247,.62); }
/* Crece 40px y no 80. Medido a 1280 con los siete enlaces: en la fila
sobran 46px, así que los 80 de antes desbordaban por 34 y empujaban
"Pedir cotización" fuera del header.
Crece hacia la IZQUIERDA sola: .nav__acciones va pegada a la derecha por
margin-left:auto y el botón es su último hijo, así que al ensancharse el
campo el que se corre es su borde izquierdo, no el botón. */
.busca__input:focus{ width:250px; background:rgba(245,245,247,.18); border-color:rgba(245,245,247,.45); outline-offset:0; }
/* Y para que esos 40px salgan de algún lado sin que nada se mueva de golpe,
los siete enlaces aprietan su relleno lateral de 13 a 8px mientras el campo
está enfocado: 70px liberados, repartidos parejo entre todos. Con la
transición, el reacomodo se ve como un solo movimiento. */
.nav__in:has(.busca__input:focus) .nav__link{ padding-inline:8px; }
.nav .busca__lupa{ color:rgba(245,245,247,.7); }
.busca__lupa{
position:absolute; left:14px; top:50%; translate:0 -50%;
width:17px; height:17px; color:var(--tinta-2); pointer-events:none;
}
/* Botón hamburguesa */
.nav__burger{
display:none; width:44px; height:44px; align-items:center; justify-content:center;
background:transparent; border:0; border-radius:var(--r-ctrl); cursor:pointer;
}
.nav__burger svg{ width:22px; height:22px; }
/* --- Hero ----------------------------------------------------------------- */
/* El hero sube por debajo del header. Sin esto, un header transparente deja
ver el blanco del body en vez de la foto: no se "integra con el fondo",
se recorta contra él. El header queda encima por su z-index. */
.hero{
position:relative; background:var(--noche); color:var(--tinta-inv);
overflow:hidden; margin-top:calc(-1 * var(--nav-h));
min-height:720px; /* piso, por si svh no está soportado */
min-height:var(--hero-h);
display:flex; flex-direction:column;
}
.hero__media{ position:absolute; inset:0; }
/* Centrado: la foto anterior tenía la unidad a la derecha y hacía falta correr
el encuadre al 60%. En ésta el camión cruza el centro y la cordillera ocupa
todo el ancho, así que centrado es lo natural.
La foto es 1500x870 (1.72) y la caja 1280x900 (1.42): `cover` escala por
alto y recorta 272px a lo ancho, 136 de cada lado. El camión va de 270 a
1330 en el original, así que entra entero. */
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* Filtro plano, sin degradés.
El alfa está medido sobre ESTA foto, no heredado. Se muestreó el píxel más
claro de cada zona donde cae texto —dibujando la foto en un canvas y
leyendo píxeles— y se calculó el contraste resultante:
zona píxel más claro contraste a .62
eyebrow rgb(253,229,225) 6,32:1
titular rgb(240,224,227) 6,55:1
bajada rgb(147,171,199) 6,42:1
botones rgb(229,248,242) 5,97:1
fila de datos rgb(230,255,255) 5,76:1
La anterior era una refinería pareja y clara y pedía .80. Ésta es un
atardecer con la cumbre nevada arriba y el camión en sombra abajo: con .80
la foto desaparecía. A .62 todo sigue por encima de los 4,5 que pide la
norma y la unidad se ve. El piso real es .55, donde la fila de datos cae
a 4,51 y ya no queda margen. */
.hero__velo{ position:absolute; inset:0; background:rgba(10,11,13,var(--velo-hero, .62)); }
/* El bloque de texto se centra en el alto que sobra y la fila de datos queda
anclada abajo. Los anchos máximos son los de la referencia: 880px el
titular, 470px la bajada. Una bajada angosta se lee de un golpe de vista. */
.hero__in{
position:relative; flex:1;
display:flex; flex-direction:column; justify-content:center;
/* El 38 compensa lo que creció el header respecto del original, para que el
bloque de texto quede exactamente donde estaba. */
padding-block:calc(30px + var(--nav-h)) 56px;
}
/* Titular un escalón más chico que el de la referencia: centrado y en tres
líneas, a 84px se comía el alto del hero y empujaba la bajada fuera. */
.hero h1{ max-width:880px; margin-bottom:24px; font-size:clamp(2rem, 1.1rem + 3.5vw, 3.75rem); }
/* La bajada lleva los cortes escritos en el HTML, así que no necesita tope de
ancho: se deja suelta y los , así que hay que apagarle el fondo y el borde del navegador */
padding:0; font:inherit; -webkit-appearance:none; appearance:none;
}
@media (hover:hover) and (pointer:fine){ .flot a:hover{ transform:scale(1.06); } }
.flot a:active{ transform:scale(.94); }
.flot svg{ width:26px; height:26px; }
/* El de WhatsApp pasó a contorno para igualar al del correo: el globo va con
el mismo grosor de trazo y sólo el tubo queda relleno. */
.flot__wa svg{ width:27px; height:27px; }
.flot__wa{ background:#1EAD52; }
/* El flotante tapa el pie si no se le despeja lugar */
.pie{ padding-bottom:100px; }
/* =============================================================================
MOBILE — es un diseño propio, no un ajuste.
Corte en 900px: la tablet vertical (768px) entra en la versión compacta.
========================================================================== */
@media (max-width:900px){
:root{ --sec-y:var(--sec-y-m); --gap:16px; }
.sec{ padding-block:var(--sec-y) calc(var(--sec-y) * 1.05); }
.sec-head{ margin-bottom:36px; }
.nav__menu{ display:none; }
.nav__burger{ display:flex; }
/* MEDIDO, no estimado: en mobile el header ocupa 100px y no 80.
Sale de 14+14 de relleno del .nav más los 72px de la píldora, que en
mobile conserva su min-height de --pastilla —con box-sizing:border-box
los 8+10 de relleno y el borde entran adentro de esos 72—.
Con el token en 80, la portada subía sólo 80 y quedaban 20px de body
blanco arriba de todo: la barra blanca que se veía al abrir el sitio y el
catálogo en el celular. El token tiene que ser el alto REAL que ocupa. */
:root{ --nav-h:100px; }
.nav__in{ gap:12px; padding-top:8px; }
/* El alto del logo en mobile se define más abajo, en la regla de 38 -> 46:
ésta quedaba muerta porque la posterior la pisaba. */
.busca{ display:none; } /* el buscador grande vive en su sección */
.nav__acciones .btn{ display:none; }
/* Menú desplegado */
.nav__menu[data-abierto="true"]{
display:block; position:absolute; left:0; right:0; top:100%;
/* Claro, como el resto del sitio. Era oscuro de cuando el sitio era
oscuro: con los enlaces ya pasados a tinta quedaba texto oscuro sobre
panel oscuro, ilegible. */
background:rgba(255,255,255,.97); color:var(--tinta);
backdrop-filter:saturate(180%) blur(24px);
-webkit-backdrop-filter:saturate(180%) blur(24px);
border-bottom:1px solid var(--linea);
box-shadow:0 26px 50px -34px rgba(0,60,100,.42);
padding:10px 20px 26px; max-height:calc(100dvh - 100px); overflow-y:auto;
}
.nav__menu[data-abierto="true"] .nav__link{
width:100%; justify-content:space-between; padding:14px 0; min-height:52px;
border-bottom:1px solid var(--linea); border-radius:0; font-size:1.05rem;
color:var(--tinta);
}
/* Sobre el hero el header es transparente y el burger va en claro; en
cuanto la barra se vuelve sólida —o se abre el menú— pasa a tinta. */
.nav:not([data-solido="true"]):not(:has(.nav__menu[data-abierto="true"])) .nav__burger{ color:var(--tinta-inv); }
.nav__logo img{ height:52px; }
/* Hero mobile. El recorte vertical mide 675×900 y la caja es mucho más alta
que ancha, así que `cover` recorta los costados y deja ver toda la altura.
Anclarlo en 68% sube el tanque a la franja donde está el titular; centrado
dejaba el cielo y la refinería detrás del texto y la unidad fuera de vista. */
.hero__media img{ object-position:50% 68%; }
.hero__in{ padding-block:calc(64px + var(--nav-h)) 56px; }
/* En mobile el texto ocupa el ancho completo, así que el velo no puede
abrirse a los costados: se mantiene arriba de 0.84 en toda la altura. */
.hero__velo{
background:
linear-gradient(to bottom, rgba(10,11,13,.90) 0%, rgba(10,11,13,.84) 52%, rgba(10,11,13,.93) 100%);
}
.hero__cta{ margin-top:26px; }
.hero__cta .btn{ flex:1 1 100%; }
/* Señal de scroll. Con el hero a pantalla completa no asoma nada de la sección
siguiente, y sin una pista mucha gente no baja. Va entre los botones y la
fila de datos, centrada. */
.hero__cue{
position:relative; align-self:center; margin-top:auto; padding-bottom:22px;
display:flex; flex-direction:column; align-items:center; gap:8px;
color:rgba(255,255,255,.72); font-size:var(--t-xs); letter-spacing:.1em;
text-transform:uppercase;
}
.hero__cue svg{ width:20px; height:20px; animation:cue-bajar 1.9s ease-in-out infinite; }
@keyframes cue-bajar{
0%,100%{ transform:translateY(0); opacity:.55; }
50% { transform:translateY(5px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .hero__cue svg{ animation:none; opacity:.9; } }
.hero__datos{ grid-auto-flow:row; grid-template-columns:repeat(2,1fr); } /* dos por fila, no cuatro */
/* A dos columnas la línea divisoria de la izquierda sólo corresponde en la
segunda de cada fila; si no, corta el borde del bloque. */
/* Señal de scroll. Con el hero a pantalla completa no asoma nada de la sección
siguiente, y sin una pista mucha gente no baja. Va entre los botones y la
fila de datos, centrada. */
.hero__cue{
position:relative; align-self:center; margin-top:auto; padding-bottom:22px;
display:flex; flex-direction:column; align-items:center; gap:8px;
color:rgba(255,255,255,.72); font-size:var(--t-xs); letter-spacing:.1em;
text-transform:uppercase;
}
.hero__cue svg{ width:20px; height:20px; animation:cue-bajar 1.9s ease-in-out infinite; }
@keyframes cue-bajar{
0%,100%{ transform:translateY(0); opacity:.55; }
50% { transform:translateY(5px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .hero__cue svg{ animation:none; opacity:.9; } }
.hero__datos{ grid-template-columns:repeat(2,1fr); padding-bottom:34px; row-gap:22px; }
.hero__dato{ padding:22px 14px 0 0; }
.hero__dato + .hero__dato{ padding-left:0; border-left:0; }
.hero__dato:nth-child(even){ padding-left:18px; border-left:1px solid rgba(245,245,247,.12); }
/* A dos columnas cada celda mide ~170px: con 1.35rem "ISO 9001-2015" partía
en dos renglones por el guion. 1.1rem entra entero. */
.hero__dato b{ font-size:1.1rem; letter-spacing:-.02em; }
.hero__dato span{ font-size:.75rem; }
/* Flotas: la escena manda el alto, así que se achica; los logos entran de
a tres o cuatro por fila sin bajar del piso táctil de 44px. */
.flotas{ padding-block:48px 54px; }
/* A 375 el 22% deja la celda en 68px y el logo ilegible: se agrandan las dos
pistas. Se ve menos de las vecinas, pero lo del centro se lee.
Y el min-width vuelve a 0: un mínimo en píxeles hacía que la celda midiera
88 en vez del 34% que manda el paso del carrusel, y el logo activo
terminaba 127px corrido del centro. El área táctil la da min-height. */
.flotas{ --u-w:62%; --m-w:34%; padding-block:52px 56px; }
.flotas__visor{
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.flotas__marca{ min-height:56px; min-width:0; padding:12px 10px; }
.flotas__marca img{ height:24px; }
.flotas__marca[data-flota="ypf"] img{ height:29px; }
.flotas__marca[data-flota="shell"] img{ height:17px; }
.flotas__marca[data-flota="axion"] img{ height:25px; }
.flotas__marca[data-flota="puma"] img{ height:15px; }
.flotas__marca[data-flota="refinor"] img{ height:18px; }
.hallar{ padding-block:58px 62px; }
.hallar__campo input{ min-height:54px; font-size:1rem; }
/* Grillas → carruseles. Once tarjetas de producto apiladas eran 8,4 pantallas
de scroll; en carrusel ocupan una. Mismo criterio en servicios y promos. */
.prods,.svc{
display:flex; grid-template-columns:none; gap:14px;
overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scrollbar-width:none;
margin-inline:calc(-1 * var(--sangria)); padding-inline:var(--sangria);
/* 10px arriba y 34px abajo alojan la sombra de la tarjeta: con
overflow-y:hidden el recorte cae en el borde de la caja de relleno. */
padding-block:10px 34px;
}
.prods::-webkit-scrollbar,.svc::-webkit-scrollbar{ display:none; }
/* El 84% deja asomar la tarjeta siguiente: es la señal de que se desliza,
más eficaz que cualquier flecha. */
.prods > .card,.svc > .svc__item{
flex:0 0 84%; scroll-snap-align:center;
}
.prods > .card{ box-shadow:0 14px 34px -20px rgba(0,0,0,.30), 0 3px 10px -5px rgba(0,0,0,.10); }
/* El CATÁLOGO es la excepción: no es carrusel, es grilla de a dos que sigue
hacia abajo. El carrusel tiene sentido para las 5 destacadas de la home
—una tira que se recorre—, pero acá hay 22 fichas y seis filtros: el
visitante viene a comparar y a barrer un listado, y un carrusel de 22
esconde 21. Además el filtro cambia cuántas hay, y un carrusel que pasa de
22 a 1 tarjeta se lee como si se hubiera roto.
Gana por especificidad de id sobre .prods, así que no depende del orden. */
/* ESTRUCTURA TOMADA DE LA GRILLA DE MERCADOLIBRE, con nuestra estética.
Lo que se copió son las proporciones, no el aspecto: allá la tarjeta ocupa
el 50% exacto de la pantalla y acá ocupaba el 39,7%, porque entre los 16px
de sangría de cada lado y los 14 de canaleta se iban 46px de los 375.
La grilla se sale de la sangría con un margen negativo y queda a 8px de
cada borde, con 8 de canaleta: la tarjeta pasa de 149 a 175px, un 18% más.
Se conservan el radio, el vidrio, el borde y la sombra de nuestras
tarjetas; sólo cambian márgenes y tamaños. */
/* El inset lo maneja el contenedor, NO un margen negativo en la grilla.
Un margen negativo obliga a saber cuánto suma el contenedor, y ahí me
equivoqué: a 375 son 32px —16 de margen del .wrap más 16 de --sangria—
pero a 768 son 34, porque tanto el --sangria de 16 como el .wrap angosto
viven en @media (max-width:520px) y no en el de 900. Con -42px calculado
desde la sangría, a 768 la grilla arrancaba en -8 y sacaba la página 8px
fuera de pantalla. Neutralizar el contenedor no depende de ningún ancho.
Gana por especificidad —dos clases contra una— así que no importa que la
regla de .wrap esté más abajo en el archivo. */
.sec--catalogo > .wrap{ width:100%; max-width:none; margin-inline:0; padding-inline:8px; }
#grilla{
display:grid; grid-template-columns:1fr 1fr; gap:8px;
overflow:visible; scroll-snap-type:none;
margin-inline:0; padding-inline:0; padding-block:10px 24px;
}
#grilla > .card{ flex:none; scroll-snap-align:none; }
/* A dos columnas la tarjeta baja a ~165px: los rellenos pensados para 272
se comen el contenido. El recuadro de "foto pendiente" tenía 30px de
margen a cada lado, o sea 60 de los 165. */
/* La foto casi a sangre, como allá: tenía 30px de relleno a cada lado, o sea
60 de los 149 de la tarjeta, y la imagen quedaba en 87px. Con 7 entra en
161 y la ficha se reconoce de un vistazo, que es para lo que está. */
#grilla .card__media{ padding:7px 7px 0; }
#grilla .card__media--vacia{ margin:7px 7px 0; }
#grilla .card__cuerpo{ padding:11px 11px 12px; }
/* Título de dos renglones con interlineado apretado, como el de allá. */
#grilla .card h3{ font-size:15px; line-height:1.25; margin-bottom:9px; }
#grilla .card__tag{ margin-bottom:5px; }
/* Los dos botones en fila no entran: la tarjeta mide 149px y con 15 de
relleno a cada lado quedan 119 de contenido, contra 62+62+8 que piden
WhatsApp y Mail. "Mail" se salía 5px del borde de la pantalla. Apilados
ocupan todo el ancho y conservan sus 44px de alto táctil. */
#grilla .card__pie{ flex-direction:column; align-items:stretch; gap:7px; }
/* La bajada de cada ficha se esconde en mobile. A 149px de ancho rompía en
ocho o diez renglones y era casi todo el alto de la tarjeta: el catálogo
medía 11,3 pantallas de scroll. Quedan la foto, la categoría, el título,
las specs y los dos botones, que es lo que sirve para barrer un listado y
decidir en cuál entrar.
Se oculta con display:none y NO se saca del HTML a propósito: el buscador
de la página lee ese texto con textContent para armar su índice, así que
buscar por una palabra que sólo está en la bajada sigue funcionando. */
#grilla .card__cuerpo > p:not(.card__tag){ display:none; }
/* Las specs en una tarjeta de 149px. Sin la bajada quedaron a la vista y
ahí se notó que "Multicompartimento" mide 141px de pastilla y se salía 24px
del borde de la tarjeta: es UNA SOLA palabra, así que no tenía por dónde
cortar. Con la letra y el relleno más chicos entra, y `overflow-wrap`
cubre cualquier término largo que aparezca más adelante sin que haya que
descubrirlo mirando. Además dos specs cortas ahora entran en un renglón. */
#grilla .card__specs{ gap:5px; margin-bottom:14px; }
#grilla .card__spec{
font-size:11.5px; padding:4px 9px; max-width:100%; overflow-wrap:anywhere;
}
/* LA FILA DE BANCOS VUELVE A ENVOLVER. El nowrap es una decisión de desktop,
donde el interior mide 1074 y los siete entran en 800. En mobile esta fila
vive DENTRO de una tarjeta del carrusel de promociones, así que su interior
baja a 197px: con nowrap los siete seguían pidiendo 799 y quedaban cinco
cortados —Pyme, Galicia, BICE, Santander y Santa Fe—. Y no se veía, porque
un ancestro recorta el desborde sin dejar barra de scroll: el visitante
simplemente veía dos logos y creía que eran todos.
Acá van max-height y no height, con width y height en auto: así cada logo
se achica si no entra a lo ancho SIN deformarse. Con height fijo, el
max-width le apretaba el ancho y lo dejaba chato. Los valores son los
mismos de desktop; a 197px cada uno entra de a uno, y el más ancho —BICE,
162px— tiene margen incluso en una pantalla de 320. */
.pr-bancos{ flex-wrap:wrap; justify-content:center; gap:18px 20px; }
.pr-bancos img{ width:auto; height:auto; max-width:100%; }
.pr-bancos img[src*="m-banco-agro-nacion"]{ max-height:32.1px; height:auto; }
.pr-bancos img[src*="m-banco-nacion.png"]{ max-height:31.8px; height:auto; }
.pr-bancos img[src*="m-banco-galicia"]{ max-height:26.5px; height:auto; }
.pr-bancos img[src*="m-banco-santa-fe"]{ max-height:24.9px; height:auto; }
.pr-bancos img[src*="m-banco-santander"]{ max-height:21.9px; height:auto; }
.pr-bancos img[src*="m-banco-pyme-nacion"]{ max-height:21.7px; height:auto; }
.pr-bancos img[src*="m-banco-bice"]{ max-height:16.9px; height:auto; }
.card--todos{ padding:26px 22px 22px; }
.puntos{ display:flex; }
.entrega{ grid-template-columns:1fr; }
.entrega__caja{ min-height:260px; padding:26px; }
.emp{ grid-template-columns:1fr; gap:36px; }
.empresa__top{ grid-template-columns:1fr; gap:32px; }
.empresa__pilares{ grid-template-columns:1fr 1fr; gap:28px 20px; margin-top:44px; padding-top:34px; }
.empresa__pilar svg{ margin-bottom:12px; }
.marquee__grupo figure{ width:150px; padding-inline:16px; }
.marquee__grupo img{ max-height:34px; }
.cont{ grid-template-columns:1fr; gap:28px; }
.mapa{ min-height:200px; }
.form__fila{ grid-template-columns:1fr; gap:0; }
.pie__marca img{ height:52px; }
.emp--invertida{ grid-template-columns:1fr; }
/* El texto ya va primero en el HTML, así que en mobile apila solo. */
.emp__destacados{ padding:6px 20px 12px; }
.pie__legal{ margin-top:36px; }
.pie__firma{ margin-left:0; width:100%; }
.flot{ right:14px; bottom:14px; }
.flot__wa{ width:50px; height:50px; }
.flot svg{ width:24px; height:24px; }
}
@media (max-width:520px){
.wrap{ width:calc(100% - 32px); }
:root{ --sangria:16px; }
.prov{ grid-template-columns:1fr 1fr; }
/* Señal de scroll. Con el hero a pantalla completa no asoma nada de la sección
siguiente, y sin una pista mucha gente no baja. Va entre los botones y la
fila de datos, centrada. */
.hero__cue{
position:relative; align-self:center; margin-top:auto; padding-bottom:22px;
display:flex; flex-direction:column; align-items:center; gap:8px;
color:rgba(255,255,255,.72); font-size:var(--t-xs); letter-spacing:.1em;
text-transform:uppercase;
}
.hero__cue svg{ width:20px; height:20px; animation:cue-bajar 1.9s ease-in-out infinite; }
@keyframes cue-bajar{
0%,100%{ transform:translateY(0); opacity:.55; }
50% { transform:translateY(5px); opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .hero__cue svg{ animation:none; opacity:.9; } }
.hero__datos{ grid-auto-flow:row; grid-template-columns:1fr 1fr; }
}
/* --- Preguntas frecuentes -------------------------------------------------
/ nativos: se abren sin JavaScript, el buscador lee el
contenido aunque esté cerrado y el teclado los maneja solo. */
.faq{ max-width:820px; }
.faq__item{ border-top:1px solid var(--linea); }
.faq__item:last-child{ border-bottom:1px solid var(--linea); }
.faq__item summary{
display:flex; align-items:center; gap:16px; justify-content:space-between;
min-height:44px; padding:22px 0; cursor:pointer; list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary h3{ margin:0; font-size:1.0625rem; font-weight:600; }
/* La cruz se dibuja con dos barras: gira 45° al abrir y queda como una X. */
.faq__item summary::after{
content:''; flex:none; width:15px; height:15px;
background:
linear-gradient(var(--marca-ink),var(--marca-ink)) center/15px 2px no-repeat,
linear-gradient(var(--marca-ink),var(--marca-ink)) center/2px 15px no-repeat;
transition:transform var(--transicion);
}
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary:hover h3{ color:var(--marca-ink); }
.faq__item > p{
padding-bottom:24px; margin-top:-4px; max-width:70ch;
font-size:var(--t-sm); color:var(--tinta-2);
}
@media (max-width:900px){
.faq__item summary{ padding:19px 0; }
.faq__item summary h3{ font-size:1rem; }
}
/* --- Preferencias del sistema ---------------------------------------------
Transparencia reducida no significa "sin fondo": significa fondo sólido.
Sin esto, quien la activa se queda con texto blanco sobre la foto. */
@media (prefers-reduced-transparency:reduce){
.nav[data-solido="true"],
.nav__menu[data-abierto="true"]{
background:var(--papel);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
.busca__input,
.hallar__campo input{ background:rgba(245,245,247,.20); }
}
@media (prefers-contrast:more){
.nav[data-solido="true"]{ background:var(--papel); box-shadow:0 1px 0 var(--tinta); }
.flotas__marca{ opacity:.7; }
.card{ border-color:var(--tinta-2); }
}
/* --- Página de productos --------------------------------------------------
Sin hero de foto: la portada es tipográfica sobre el oscuro de marca, y el
header ya arranca sólido (data-solido="true" en el HTML). */
/* Sube por debajo del header, igual que el hero de la home, para que la barra
pueda arrancar transparente sobre el oscuro. Sin esto la sección empieza
DEBAJO del header y detrás de la barra queda el fondo claro de la página:
un header transparente ahí deja el texto blanco sobre blanco.
El relleno de arriba se compensa con el mismo token, así el título no se
corre ni un píxel respecto de antes. */
/* --- La portada del catálogo ----------------------------------------------
La banda azul llega desde arriba de todo hasta debajo del buscador: dentro
viven el botón de volver, el título, la bajada, los seis filtros y el campo.
Las tarjetas empiezan después, sobre el claro.
El relleno de arriba bajó de 56 a 26px y el de abajo de 72 a 34. Sumado a
que la miga de pan se fue, eso sube el buscador ~150px. El objetivo es
medible y está verificado abajo, en .sec--catalogo: que el campo entre
entero en la pantalla más baja que atendemos —1280x800 de CSS, que es lo que
da un 1920x1200 de Windows al 150%— y que además asome la primera fila de
fichas, para que se vea que hay catálogo debajo. */
.portada{
margin-top:calc(-1 * var(--nav-h));
padding-block:calc(22px + var(--nav-h)) 34px;
}
/* Un solo renglón, en blanco pleno: 4.89:1 sobre el azul. El naranja de marca
acá no sirve —da 1.42:1, ilegible— y por eso no hay acento de color en la
portada del catálogo. */
/* Sin volanta y sin bajada, el título es lo único que hay entre el botón de
volver y los filtros, así que su margen inferior deja de separarlo de un
párrafo y pasa a ser el único hueco hasta el grupo de filtros. Ese hueco lo
fija .portada .filtros; acá va a cero para no sumarse. */
.portada h1{ font-size:clamp(2rem,1.3rem + 3vw,3.4rem); margin-bottom:0; }
/* Reemplaza a la miga de pan. Es un solo destino y se comporta como botón: la
miga repetía "Inicio / Productos" para decir lo mismo con dos elementos. */
.volver{
display:inline-flex; align-items:center; gap:9px;
min-height:44px; padding:9px 17px 9px 14px; margin-bottom:20px;
border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:600;
color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34);
transition:background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.volver svg{ width:17px; height:17px; flex:none; }
@media (hover:hover){ .volver:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.6); } }
/* Sobre el azul pleno el naranja de marca no sirve para nada: 1.42:1. El
volanta y la bajada pasan a blanco. La bajada usa el token que el sitio ya
tenía para texto secundario sobre azul. */
.eyebrow--sobre-azul{ color:#fff; }
.bajada--sobre-azul{ color:var(--sobre-azul); }
/* --- Enlaces en línea dentro de un párrafo --------------------------------
Medían 15px de alto y el piso de área táctil de la norma es 24px. No pueden
crecer a 44 sin romper el interlineado del párrafo, así que se los lleva a
26px con relleno vertical: entra en la norma sin descuadrar el texto. */
.enlace-texto{
display:inline-block; padding-block:5px;
color:var(--azul-titulo); text-decoration:underline;
text-underline-offset:2px;
transition:color 160ms var(--ease-out);
}
.enlace-texto:hover{ color:var(--marca-ink); }
/* Sobre el azul pleno, el blanco roto #F5F5F7 da 4.49:1 y la norma pide 4.50.
Falla por una centésima, que es exactamente el tipo de error que sólo
aparece midiendo. Blanco puro sobre el mismo fondo da 4.89:1. */
.sec--azul .btn--linea-inv{ color:#fff; border-color:rgba(255,255,255,.42); }
.sec--azul .btn--linea-inv:hover{ border-color:#fff; background:rgba(255,255,255,.14); }
/* --- Contadores -----------------------------------------------------------
Cifras provistas por INDECAR. Van en la home entre el buscador y las flotas,
y otra vez dentro de Empresa. Misma pieza en los dos lugares. */
.cifras{ background:var(--papel); padding-block:64px 68px; }
.cifras__grid{
display:grid; grid-template-columns:repeat(3,1fr);
gap:1px; background:var(--azul-borde);
border:1px solid var(--azul-borde); border-radius:var(--r-card); overflow:hidden;
}
.cifra{
background:var(--papel); padding:34px 26px; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.cifra__num{
font-size:clamp(2.1rem, 1.4rem + 2.2vw, 3.1rem); font-weight:800;
line-height:1; letter-spacing:-.035em; color:var(--azul);
/* Ancho tabular: sin esto los dígitos cambian de ancho mientras el contador
sube y el número entero tiembla de izquierda a derecha. */
font-variant-numeric:tabular-nums;
}
.cifra span{ font-size:var(--t-sm); color:var(--tinta-2); letter-spacing:-.01em; }
/* La variante de Empresa va sobre el papel tintado de esa sección */
.cifras__grid--compacto{ margin-top:44px; }
.cifras__grid--compacto .cifra{ padding:26px 20px; }
.cifras__grid--compacto .cifra__num{ font-size:clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem); }
/* --- Pilares de texto de Empresa ------------------------------------------
Sin ícono y a dos columnas: los textos institucionales son mucho más largos
que los de las cuatro tarjetas de arriba y no entran en el mismo molde. */
.empresa__texto-pilares{
margin-top:44px; display:grid; grid-template-columns:repeat(2,1fr); gap:34px 48px;
}
.empresa__texto-pilares article{ border-top:2px solid var(--azul-borde); padding-top:18px; }
.empresa__texto-pilares h3{ margin-bottom:9px; }
.empresa__texto-pilares p{ font-size:var(--t-sm); color:var(--tinta-2); }
/* --- Lista de posventa ---------------------------------------------------- */
.svc__lista{ margin:14px 0 22px; display:grid; gap:9px; }
.svc__lista li{
position:relative; padding-left:24px;
font-size:var(--t-sm); color:var(--sobre-azul);
}
.svc__lista li::before{
content:''; position:absolute; left:2px; top:.5em;
width:9px; height:9px; border-radius:50%;
border:2px solid #fff; opacity:.9;
}
/* --- Pastillas del buscador: doce, en dos líneas --------------------------
Con 12 pastillas suman 1.596px en una caja de 832 y caían en tres líneas.
Bajando el relleno lateral de 18 a 12 y la tipografía de 13 a 12 quedan en
~1.495, que entra en dos. El alto táctil de 44px no se toca. */
.hallar__pista{ padding-inline:12px; font-size:0.75rem; }
/* --- Horarios de turno, todos en una línea --------------------------------
Ocho botones con min-width de 76px no entran en el ancho de la columna del
formulario. Con flex:1 y min-width:0 se reparten el ancho disponible y
quedan siempre en un renglón; nowrap impide que alguno se caiga. */
.turno__horas{ flex-wrap:nowrap; gap:6px; }
.turno__hora{
flex:1 1 0; min-width:0; padding:10px 4px;
font-size:0.875rem; white-space:nowrap; text-align:center;
}
@media (max-width:900px){
.cifras{ padding-block:44px 48px; }
.cifras__grid{ grid-template-columns:1fr; }
.cifra{ padding:24px 20px; }
.empresa__texto-pilares{ grid-template-columns:1fr; gap:26px; margin-top:32px; }
/* En una pantalla angosta ocho botones en un renglón quedarían de 30px:
ahí sí se permiten dos filas de cuatro. */
.turno__horas{ flex-wrap:wrap; }
.turno__hora{ flex:1 1 calc(25% - 6px); }
}
/* Los tres párrafos que no llevan .bajada —los institucionales de Contacto y
el segundo de Empresa— se igualan a los otros ocho. */
.sec-head p:not(.eyebrow),
.empresa__texto p:not(.eyebrow){ font-size:1.125rem; line-height:1.55; }
/* --- BNA Conecta sin marco -----------------------------------------------
Queda igual que las otras tarjetas de la sección, a pedido. */
.promo__caja--destaca{ border-color:var(--azul-borde); border-width:1px; }
/* ============================================================================
LIQUID GLASS — fondo de marca y superficies de vidrio
==========================================================================*/
/* --- El campo de color que hace posible el vidrio -------------------------
Una sola capa fija detrás de todo, en vez de un fondo por sección: se pinta
una vez, no se repite al scrollear y da continuidad. El vidrio necesita algo
detrás para refractar; sobre blanco plano una tarjeta translúcida es sólo
una tarjeta gris. Los colores son los de marca, muy diluidos. */
body{ background:var(--papel); }
body::before{
content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
/* G2 · degradado diagonal limpio. Reemplaza a las manchas difusas, que
quedaban borrosas. Un solo barrido: celeste de marca arriba a la
izquierda, blanco en el medio y un apenas de naranja abajo a la derecha.
Sin filter:blur, así que además es más barato de pintar. */
background:linear-gradient(155deg, #DCEEFA 0%, #F2F9FD 42%, #FFFFFF 72%, #FDF3EA 100%);
}
/* Un solo velo parejo para TODAS las secciones claras.
Antes alternaban 0,42 y 0,16 para dar ritmo, y eso dejaba un escalón de
opacidad en cada junta: el campo de atrás es continuo, pero el velo de
encima cortaba. Con un valor único el campo se lee como una sola pieza de
punta a punta, que es lo que hace un vidrio apoyado sobre una superficie.
El ritmo entre secciones pasa a darlo el espaciado. */
.sec--gris,
.hallar,
.sec:not(.sec--azul):not(.sec--noche),
.flotas,
.cifras{ background:rgba(255,255,255,.30); }
/* --- Superficies de vidrio ------------------------------------------------
Un solo juego de variables para todas: tarjetas, cifras, promos, destacados
y el campo del buscador. Cambiar el vidrio del sitio entero es tocar acá. */
:root{
--glass-fondo: rgba(255,255,255,.42);
--glass-borde: rgba(255,255,255,.85);
--glass-blur: 18px;
--glass-luz: inset 0 1px 0 rgba(255,255,255,.9);
--glass-sombra: 0 12px 34px -22px rgba(0,60,100,.45);
}
.card,
.cifra,
.promo__caja,
.emp__destacados,
.hallar__campo input,
.hallar__hit{
background:var(--glass-fondo);
border:1px solid var(--glass-borde);
backdrop-filter:blur(var(--glass-blur)) saturate(180%);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
box-shadow:var(--glass-luz), var(--glass-sombra);
}
/* La grilla de cifras usaba huecos de 1px sobre un fondo para simular filetes;
con vidrio cada celda es una pieza propia y separada. */
.cifras__grid{ background:none; border:0; gap:16px; overflow:visible; }
.cifra{ border-radius:var(--r-card); }
/* --- Las cifras, en azul ---------------------------------------------------
Salen del vidrio blanco y pasan a un degradado de marca con texto blanco:
son el primer corte fuerte después del hero y con vidrio se perdían en la
sábana clara.
MEDIDO. El resultante del degradado es #0072B2 y da 5.19:1 con blanco, así
que pasa en los dos textos: el número grande (piso 3) y la etiqueta chica
(piso 4,5).
El azul de marca NO sirve acá: #0081CB con blanco da 4.20:1 y la etiqueta
no llega. Es la misma decisión que ya tomó el sitio para "Pedir cotización"
y el CTA del hero. Y translúcido es peor todavía: ni al 97% de opacidad
pasa de 4.0:1, por eso esto es opaco y no vidrio. */
.cifra{
background:linear-gradient(160deg, var(--azul) 0%, #00639A 100%);
border-color:rgba(255,255,255,.22);
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
0 16px 38px -24px rgba(0,60,100,.6);
}
.cifra__num,
.cifra span{ color:var(--tinta-inv); }
/* La grilla de arriba termina justo donde termina el recuadro de "¿Qué
necesitás transportar?", que mide 900px: antes se pasaba 136px por lado y
los dos bloques se leían descolgados uno del otro. Cada tarjeta queda en
289px. La compacta de Empresa queda afuera: ésa acompaña el ancho de su
propia sección, que ya estaba bien. */
.cifras__grid:not(.cifras__grid--compacto){ max-width:900px; margin-inline:auto; }
/* Píldoras del buscador y botones de contorno, también en vidrio */
.hallar__pista,
.btn--linea{
background:rgba(255,255,255,.38);
border:1px solid rgba(255,255,255,.8);
backdrop-filter:blur(12px) saturate(160%);
-webkit-backdrop-filter:blur(12px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
@media (hover:hover){
.hallar__pista:hover,
.btn--linea:hover{ background:rgba(255,255,255,.62); border-color:#fff; }
}
/* La tarjeta azul y la sección azul mantienen su color: son las anclas que
evitan que la página entera se vuelva un vidrio sin jerarquía. */
.card--todos{ background:var(--azul-fondo); border-color:var(--azul-fondo); box-shadow:none; }
/* Sin backdrop-filter todo esto sería translúcido sin desenfocar y el texto
caería sobre las manchas de color. Ahí las superficies se vuelven sólidas. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.card,.cifra,.promo__caja,.emp__destacados,.hallar__campo input,.hallar__hit,
.hallar__pista,.btn--linea{ background:rgba(255,255,255,.94); }
}
/* Quien pide menos transparencia recibe superficies opacas, sin desenfoque. */
@media (prefers-reduced-transparency:reduce){
body::before{ display:none; }
.sec--gris,.hallar,.sec:not(.sec--azul):not(.sec--noche),.flotas,.cifras{ background:var(--papel); }
.card,.cifra,.promo__caja,.emp__destacados,.hallar__campo input,.hallar__hit,
.hallar__pista,.btn--linea{
background:var(--papel); border-color:var(--linea);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
}
/* --- Botones: relleno sólido con lenguaje de vidrio -----------------------
El relleno sigue siendo pleno y el contraste no se mueve ni un punto; lo que
se suma es el borde de luz, el brillo interior y la sombra, que es lo que
hace que una pieza se lea como vidrio pulido.
Medido, por si alguna vez se quiere el vidrio teñido de verdad: con el botón
al 72% de opacidad el naranja cae de 3,45 a 2,49 y el azul de 4,20 a 2,80, y
además el valor CAMBIA según qué sección pase por detrás — el mismo botón se
lee distinto arriba que abajo. Por eso el relleno queda sólido. */
.btn--primario,
.btn--azul,
.btn--wa,
.nav__acciones .btn--primario,
.hero__cta .btn--primario,
.flot__wa{
border:1px solid rgba(255,255,255,.34);
box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(0,0,0,.14),
0 10px 26px -14px rgba(0,0,0,.45);
}
.flot__wa{
border-color:rgba(255,255,255,.4);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
inset 0 -1px 0 rgba(0,0,0,.16),
0 12px 28px -12px rgba(0,0,0,.5);
}
/* Los de contorno tenían tan poco cuerpo que sobre el campo de color se
perdían. Suben de 0,38 a 0,55 de blanco y toman el mismo borde de luz. */
.hallar__pista{
background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.92);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -18px rgba(0,60,100,.5);
}
@media (hover:hover){ .hallar__pista:hover{ background:rgba(255,255,255,.78); } }
/* Sobre el azul pleno el vidrio claro no aplica: ahí el contorno sigue siendo
un borde blanco sobre color, que es lo que se lee. */
.sec--azul .btn--linea-inv{
background:rgba(255,255,255,.14);
border-color:rgba(255,255,255,.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
@media (prefers-reduced-transparency:reduce){
.btn--linea,.hallar__pista{ background:var(--papel); border-color:var(--linea-form); box-shadow:none; }
}
/* ============================================================================
AJUSTES DE LEGIBILIDAD SOBRE EL CAMPO DE COLOR
El problema de estos elementos no era el contraste del texto —el "Mail" de
las tarjetas ya tenía 14:1— sino que la pieza no se despegaba de su
contenedor. Es contraste de superficie contra superficie.
==========================================================================*/
/* --- Botones secundarios: blanco pleno con borde azul ---------------------
Alcanza a todos los "Mail" de las fichas, "Enviar CV", "Pedir condiciones",
"Cotizar mi usado" y "Ver publicaciones". Se sale del vidrio a propósito:
opaco es la única forma de que la pieza no dependa de lo que pase detrás. */
.btn--linea{
background:#fff;
border:1px solid rgba(0,129,203,.35);
color:var(--azul-titulo); /* 4.89:1 sobre blanco */
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:0 6px 18px -12px rgba(0,60,100,.5);
}
@media (hover:hover){
.btn--linea:hover{ background:#F2F9FD; border-color:var(--azul); color:var(--azul-fondo); }
}
/* --- "Hablar con un asesor": vidrio oscuro sobre la foto ------------------
Le da cuerpo y lo empareja en peso con el azul de al lado. Medido contra el
peor píxel del hero: sube de 10,15 a 14,60:1. */
.hero__cta .btn--linea-inv{
background:rgba(14,17,22,.45);
border-color:rgba(255,255,255,.5); color:#fff;
backdrop-filter:blur(16px) saturate(180%);
-webkit-backdrop-filter:blur(16px) saturate(180%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px -16px rgba(0,0,0,.55);
}
@media (hover:hover){
.hero__cta .btn--linea-inv:hover{ background:rgba(14,17,22,.62); border-color:#fff; }
}
/* --- El buscador: barra destacada dentro de un panel propio ---------------
La sección se diluía en el campo de color. El panel la vuelve una pieza y la
barra deja de ser translúcida: blanca, con borde del azul de marca y un halo
suave. El borde da 4,15:1 contra la superficie y un borde necesita 3:1. */
.hallar__caja{
background:rgba(255,255,255,.55);
border:1px solid rgba(255,255,255,.95);
border-radius:26px; padding:40px 34px 42px;
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
box-shadow:inset 0 1px 0 #fff, 0 20px 50px -34px rgba(0,60,100,.6);
}
.hallar__campo input{
background:#fff;
border:2px solid var(--azul);
backdrop-filter:none; -webkit-backdrop-filter:none;
/* Sin el aro exterior: queda sólo el marco azul de 2px y la sombra de caída.
El halo era una segunda línea concéntrica que competía con el borde. */
box-shadow:0 14px 34px -20px rgba(0,60,100,.55);
}
.hallar__campo input:focus{
border-color:var(--azul-fondo);
box-shadow:0 14px 34px -20px rgba(0,60,100,.55);
}
.hallar .busca__lupa{ color:var(--azul); }
/* --- La tarjeta de datos, más sólida --------------------------------------
Al 82% de blanco deja de mezclarse con el campo. */
.datos{
background:rgba(255,255,255,.82);
border:1px solid #fff;
backdrop-filter:blur(22px) saturate(180%);
-webkit-backdrop-filter:blur(22px) saturate(180%);
box-shadow:inset 0 1px 0 #fff, 0 16px 40px -26px rgba(0,60,100,.55);
}
@media (max-width:900px){ .hallar__caja{ padding:28px 20px 30px; border-radius:20px; } }
@media (prefers-reduced-transparency:reduce){
.hallar__caja,.datos{ background:var(--papel); border-color:var(--linea);
backdrop-filter:none; -webkit-backdrop-filter:none; }
.hero__cta .btn--linea-inv{ background:var(--noche); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
/* --- Flotante de WhatsApp con dos destinos --------------------------------
El botón abre dos opciones que suben desde abajo. Las opciones son enlaces
reales, así que una vez desplegadas funcionan con clic del medio y con
"abrir en pestaña nueva". */
.flot{ align-items:flex-end; }
.flot__opciones{
display:flex; flex-direction:column; align-items:flex-end; gap:8px;
margin-bottom:2px;
}
.flot__opciones[hidden]{ display:none; }
.flot__opcion{
display:flex; align-items:center; gap:12px;
padding:9px 12px 9px 16px; border-radius:var(--r-pill);
background:#188840; color:#fff; box-shadow:var(--sombra-flot);
border:1px solid rgba(255,255,255,.34);
/* Entran escalonadas desde abajo. La segunda arranca 45ms después, que es
lo que hace que se lean como una lista y no como un bloque. */
animation:flot-subir 220ms var(--ease-out) both;
}
.flot__opcion:nth-child(2){ animation-delay:45ms; }
.flot__opcion svg{ width:22px; height:22px; flex:none; }
.flot__opcion-txt{ display:flex; flex-direction:column; line-height:1.25; text-align:right; }
.flot__opcion-txt b{ font-size:var(--t-sm); font-weight:600; letter-spacing:-.01em; }
.flot__opcion-txt span{ font-size:var(--t-xs); color:rgba(255,255,255,.82); }
@media (hover:hover){ .flot__opcion:hover{ background:#12702F; } }
@keyframes flot-subir{
from{ opacity:0; transform:translateY(10px) scale(.96); }
to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .flot__opcion{ animation:none; } }
/* El botón gira un octavo al abrirse: avisa que el estado cambió sin agregar
otro ícono. */
.flot__wa{ border:0; cursor:pointer; transition:transform 220ms var(--ease-out); }
.flot__wa[aria-expanded="true"]{ transform:rotate(45deg); }
/* Número y aclaración en la misma línea. Apiladas, las cuatro líneas
estiraban la tarjeta y la desalineaban del formulario de al lado. */
.datos__par{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin:0 0 4px; }
.datos__par:last-child{ margin-bottom:0; }
/* El :not() no alcanza acá: la regla que gana es `.datos__fila span`, así que
la aclaración se especifica desde la fila. Mismo patrón que .card p vs
.card__tag y que .empresa__texto p vs .eyebrow. */
.datos__fila .datos__aclara{ font-size:var(--t-xs); color:var(--tinta-2); letter-spacing:-.005em; }
/* ==========================================================================
PRECARGA
Aparece al entrar al sitio y al recargar; no al navegar dentro. Cubre el
sitio con un velo oscuro que deja intuir lo que hay detrás, mientras el
marco del logo se dibuja desde la muesca de arriba hacia abajo. Al cerrarse
abajo, se va.
Todo el movimiento es de CSS a propósito. El único JS es el que decide si
mostrarla; si ese guion falla, la precarga aparece y estas animaciones la
retiran igual. El sitio nunca queda tapado por un JS que no corrió.
PRESUPUESTO: 800ms de dibujo + 350ms de salida = 1150ms. El umbral que nos
pusimos es 1200. El LCP del sitio es el (532ms medido en producción) y
la marca de la precarga ocupa menos de la mitad de su área, así que no le
puede ganar como candidato.
========================================================================== */
.precarga{
position:fixed; inset:0; z-index:9000;
display:grid; place-items:center;
animation:precarga-salir 350ms var(--ease-out) 800ms forwards;
}
/* Quien pidió menos movimiento entra directo: ni velo ni animación. */
@media (prefers-reduced-motion:reduce){ .precarga{ display:none; } }
/* Y quien ya está dentro del sitio tampoco la ve. */
.sin-precarga .precarga{ display:none; }
.precarga__velo{
position:absolute; inset:0; background:rgba(0,0,0,.75);
/* 20px y no 9: a 75% de negro un desenfoque chico no se percibe, porque el
negro ya tapó el detalle que el desenfoque venía a difuminar. MEDIDO en
desktop a 101Hz: de 0 a 32px de radio, entre 0 y 1 cuadro perdido de 81.
Es ruido. El radio no cuesta nada acá; en mobile está apagado igual.
Subido a 35 a pedido: 20 seguía leyéndose como nada detrás del 75%. */
backdrop-filter:blur(35px); -webkit-backdrop-filter:blur(35px);
}
/* En mobile no va el desenfoque: backdrop-filter obliga a recomponer la
pantalla entera en cada cuadro, y en un Android de gama media eso cae justo
mientras el sitio está cargando. Mismo velo, plano. */
@media (max-width:900px){
.precarga__velo{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}
.precarga__marca{ position:relative; width:180px; height:auto; overflow:visible; }
/* El trazo es la máscara, no el dibujo: se engrosa por encima del ancho de la
banda (que mide entre 25 y 31 unidades) para descubrirla entera. */
.precarga__trazo{
fill:none; stroke:#fff; stroke-width:36;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:1; stroke-dashoffset:1;
animation:precarga-dibujar 800ms var(--ease-in-out) forwards;
}
.precarga__letras{
opacity:0;
animation:precarga-letras 336ms var(--ease-out) 464ms forwards;
}
@keyframes precarga-dibujar{ to{ stroke-dashoffset:0; } }
@keyframes precarga-letras{ to{ opacity:1; } }
/* 8% y no más: en 350ms un salto grande se lee como un tirón. `visibility`
al final saca la capa del camino sin depender de ningún JS. */
@keyframes precarga-salir{
to{ opacity:0; scale:1.08; visibility:hidden; }
}
/* La animación no arranca hasta que la página se ve de verdad.
MEDIDO: sin esto el reloj corre desde que se resuelven los estilos, no desde
que hay algo en pantalla. En una carga fría el primer pintado llegó a los
896ms, así que de los 1150ms de precarga el visitante alcanzaba a ver 254 —un
destello sin sentido—. Y en una pestaña abierta en segundo plano las cuatro
animaciones terminaban con visibilityState "hidden": la precarga entera se
consumía sin que nadie la viera. Con F5 no se notaba porque todo está en
caché y el primer pintado es inmediato.
La pausa la pone el JS. Si el JS no corre no se pausa nada y la precarga se
comporta como antes: nunca puede quedar trabada. */
.precarga-espera .precarga,
.precarga-espera .precarga__trazo,
.precarga-espera .precarga__letras{ animation-play-state:paused; }
/* ==========================================================================
HERO EN PANTALLAS BAJAS
El hero mide 100svh pero su contenido era de altura fija: pedía 732px y no
cedía. Por debajo de eso desbordaba, y lo primero que se caía del borde era
la fila de datos —ISO, Pioneros, Taller propio y el 0800—.
MEDIDO antes del arreglo, con la fila de datos como testigo:
1512 × 890 (MacBook 14") entra justo
1536 × 730 (Windows 1920 al 125%) se cortaba 2px
1280 × 660 (Windows 1920 al 150%) se cortaba 72px
1366 × 620 (notebook 1366×768) se cortaba 112px
El escalado de Windows es lo que lo dispara: una pantalla de 1920×1200 al
150% queda en 1280×800 de CSS, y las tres barras de Chrome se comen otros
140. Por eso una máquina de más resolución se veía PEOR que una MacBook.
Se recuperan ~150px apretando rellenos, bajando el titular de 60 a 46px y
sacando el "VER MÁS", que son 70px y es lo que menos falta hace justo cuando
no sobra alto. Con eso entra hasta los 600px de alto útil.
Un solo escalón a propósito: con dos, el titular caía a 35px y se veía
apagado. Sólo desktop —el corte de mobile es 900px y allá el hero ya se
resuelve aparte—.
========================================================================== */
@media (min-width:901px) and (max-height:820px){
.hero__in{ padding-block:calc(16px + var(--nav-h)) 30px; }
.hero h1{ font-size:clamp(2.1rem, 1.2rem + 2.1vw, 2.9rem); }
.hero .bajada{ font-size:.98rem; }
.hero__cta{ margin-top:22px; }
.hero__cue{ display:none; }
.hero__datos{ padding-block:14px; }
}
/* ==========================================================================
PROMOCIONES: la tarjeta de bancos a todo el ancho
========================================================================== */
/* Seis columnas para que convivan una tarjeta de ancho completo y una fila de
tres. Bancos ocupa las seis; las otras, dos cada una. En mobile, apiladas. */
.promo{ grid-template-columns:repeat(6,1fr); }
/* El envoltorio de las tres cajas chicas NO existe para el layout de desktop:
display:contents lo borra de la caja y sus tres hijas vuelven a ser hijas
directas de la grilla, cada una con su span 2. Existe sólo para que en mobile
las tres puedan ser un carrusel mientras la caja ancha va a lo alto. */
.promo__tercios{ display:contents; }
.promo__caja--ancha { grid-column:span 6; }
.promo__caja--tercio{ grid-column:span 2; }
@media (max-width:900px){
.promo{ grid-template-columns:1fr; }
.promo__caja--ancha, .promo__caja--tercio{ grid-column:auto; }
}
/* El desplegable usa EL MISMO componente que los demás botones: las clases
btn btn--azul btn--sm van en el . Acá sólo se le saca el triangulito
nativo y se le agrega la flecha. Copiar los valores a mano se despega al
primer cambio del botón; reusar la clase, no. */
.pr-desp>summary{ list-style:none; cursor:pointer; }
.pr-desp>summary::-webkit-details-marker{ display:none; }
.pr-desp>summary::after{
content:''; width:8px; height:8px; margin-left:2px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s;
}
.pr-desp[open]>summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.pr-cuerpo{ padding-top:22px; }
.pr-vigencia{ font-size:var(--t-xs); color:var(--tinta-2); margin-bottom:14px; }
.pr-vigencia b{ color:var(--tinta); }
.pr-legal{
font-size:var(--t-xs); color:var(--tinta-2); margin-top:16px; padding-top:12px;
border-top:1px solid var(--linea); line-height:1.5;
}
/* Tabla comparativa de las líneas de crédito. Scroll propio: son seis columnas
de datos y en una pantalla angosta no hay forma de que entren sin achicar la
letra por debajo de lo legible. */
.pr-tabla-env{ overflow-x:auto; }
.pr-tabla{ width:100%; border-collapse:collapse; font-size:var(--t-xs); }
.pr-tabla th, .pr-tabla td{
text-align:left; vertical-align:top; padding:11px 12px;
border-bottom:1px solid var(--linea);
}
.pr-tabla thead th{
font-size:var(--t-eyebrow); letter-spacing:.08em; text-transform:uppercase;
color:var(--azul-titulo); border-bottom-width:2px; white-space:nowrap;
}
/* La columna Línea se achica: con la de Requisitos son ocho columnas y lo que
suelta se lo reparten las que llevan frase entera.
Va `width` y no `min-width`. La tabla es de layout automático, así que el
ancho lo decide el CONTENIDO y un min-width por debajo de lo que el contenido
pide no hace nada: con min-width:150 la columna seguía midiendo 196, porque
"Maquinaria nueva en pesos · Santa Fe y Entre Ríos" es largo. Con `width` el
navegador la aprieta y deja que el nombre rompa en varios renglones. */
.pr-tabla tbody th, .pr-tabla thead th:first-child{ width:150px; }
.pr-tabla tbody th{ font-weight:600; }
.pr-tabla tbody th span{
display:block; font-weight:400; color:var(--tinta-2); font-size:11px; margin-top:2px;
}
/* La vigencia comparte caja con el número de reglamento, así que se separa por
peso y no por color: los dos son grises chicos y si no se distinguen se leen
como un solo bloque de dos renglones. */
.pr-tabla tbody th .pr-vig{ font-style:italic; margin-top:4px; }
/* Cada grupo de líneas lleva arriba el banco al que pertenecen. Hoy las seis
son del Banco Nación; el día que entre otro banco se suma un tbody con su
propia fila de título y la tabla no cambia en nada más. */
.pr-tabla .pr-banco th{
font-weight:700; font-size:var(--t-xs);
/* NO usa --azul-titulo. Ese token está medido contra el blanco (4.89) y el
papel tintado (4.65), pero esta fila va sobre --papel-3, que es más oscuro,
y ahí cae a 4.42 — por debajo del 4.5 que pide texto de 13px. La derivada
baja la luz del 37% al 36%, da 4.54:1 y a la vista es el mismo azul.
La otra salida era aclarar el fondo a --papel-2, pero ese es justo el color
del hover de fila y el título del grupo pasaba a parecer una fila señalada. */
color:#0074B7;
background:var(--papel-3); border-bottom:1px solid var(--azul-borde);
padding-top:13px; padding-bottom:13px;
}
/* El hover de fila no tiene que alcanzar al título del grupo: no es un dato,
es un encabezado, y encenderlo sugiere que se puede hacer clic. */
@media (hover:hover){ .pr-tabla tbody tr.pr-banco:hover{ background:var(--papel-3); } }
/* El botón que cierra el cuadro desde abajo. En desktop no hace falta —la
tabla entra en una pantalla— pero no molesta y evita mantener dos reglas. */
.pr-cerrar{
display:inline-flex; align-items:center; gap:8px;
min-height:44px; padding:11px 20px; margin-top:18px;
border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:600;
color:var(--azul-titulo); background:var(--azul-vidrio);
border:1px solid var(--azul-borde);
transition:background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.pr-cerrar::before{
content:''; width:9px; height:9px; flex:none;
border-left:2px solid currentColor; border-top:2px solid currentColor;
transform:rotate(45deg) translate(1px,1px);
}
@media (hover:hover){ .pr-cerrar:hover{ background:var(--azul-vidrio2); border-color:var(--azul); } }
@media (hover:hover){ .pr-tabla tbody tr:hover{ background:var(--papel-2); } }
/* Ficha compacta: las condiciones de financiación propia entran en la tarjeta
sin desplegable, a pedido. */
.pr-ficha{ display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0 0 12px; font-size:var(--t-xs); }
.pr-ficha dt{ color:var(--tinta-2); }
.pr-ficha dd{ margin:0; font-weight:500; }
.pr-chico{ font-size:11.5px !important; color:var(--tinta-2); margin-bottom:20px !important; }
/* Logos. La tira de bancos y el logo de plataforma quedan previstos: el
marcado está comentado en el HTML hasta que existan los archivos, que van a
assets/img/web/ —NO a assets/img/marcas/, que está en el .gitignore y no
llega a producción—. */
/* align-self es imprescindible: .promo__caja es un flex en columna y estira a
sus hijos a todo el ancho, así que sin esto el logo sale deformado a 313px
en vez de sus 190. Es el mismo motivo por el que los botones de esa tarjeta
ya llevan align-self:flex-start. */
/* margin-top:auto lo empuja al fondo de la tarjeta, justo encima del botón.
Así los logos de BNA Conecta y Mercado Libre quedan alineados entre sí
aunque sus textos tengan distinto largo: los dos se apoyan sobre el botón,
que mide lo mismo en las dos tarjetas.
align-self es imprescindible: .promo__caja es un flex en columna y estira a
sus hijos a todo el ancho; sin esto el logo sale deformado a 313px. */
.pr-logo{
display:block; height:26px; width:auto;
align-self:flex-start; margin:auto 0 18px;
}
/* El botón ya no necesita empujarse solo: lo hace el logo que tiene arriba.
Con dos margin-top:auto el espacio libre se repartiría entre los dos. */
.promo__caja:has(.pr-logo) .btn{ margin-top:0; }
.pr-bancos{
display:flex; align-items:center;
margin:0 0 22px; padding:16px 18px;
border:1px solid var(--linea); border-radius:12px; background:var(--papel-2);
}
/* Alineación óptica por ÁREA PAREJA. Un wordmark ancho y chato se ve más
grande que una marca compacta puesta a la misma altura, y lo que el ojo
compara no es el alto sino la superficie que ocupa cada logo. Así que cada
uno recibe la altura que hace que su área sea la misma:
alto = raíz(K / aspecto) con K ≈ 2750 y aspecto = ancho/alto
MEDIDO sobre los archivos, que son todos de 72px de alto. Los siete suman
800px dentro de un interior de 1074, así que space-between reparte huecos de
46px —el mismo aire que tenían los cinco de antes—.
Se ve en los extremos: BICE es 9,58 de ancho por 1 de alto y baja a 17px,
mientras que Banco Nación y AgroNación, que son casi cuadrados, suben a 32.
A la misma altura, BICE ocupaba tres veces y media más ancho que AgroNación
y se leía como el patrocinador principal.
Si se agrega o se saca un logo hay que rehacer la cuenta: la fila ya no tiene
margen para uno más sin achicar el conjunto. */
/* Galicia viene blanco sobre naranja pleno, a diferencia de los otros seis.
Se le da su propia caja para que el bloque de color se lea como una decisión
y no como un recorte mal hecho. Va fuera del media porque vale en los dos. */
.pr-bancos img[src*="m-banco-galicia"]{ border-radius:4px; }
/* TODO ESTE BLOQUE VA ACOTADO A DESKTOP, y eso es lo que importa. Estaba suelto
y como está más abajo en el archivo que el bloque de mobile —misma
especificidad, y una media query no suma— le ganaba al de mobile en TODOS los
anchos: en el celular la fila seguía en nowrap y quedaban cinco logos
cortados fuera de una caja de 197px, sin barra de scroll que lo delatara.
Es la segunda vez en esta tanda que aparece la misma trampa. */
@media (min-width:901px){
/* space-between reparte los siete de borde a borde, y nowrap los mantiene en
una sola línea: con wrap el séptimo caía solo a un segundo renglón y la
fila se leía como dos grupos. Sólo sirve acá, donde el interior mide 1074. */
.pr-bancos{ flex-wrap:nowrap; justify-content:space-between; }
.pr-bancos img{ height:24.9px; width:auto; flex:none; }
.pr-bancos img[src*="m-banco-agro-nacion"]{ height:32.1px; }
.pr-bancos img[src*="m-banco-nacion.png"]{ height:31.8px; }
.pr-bancos img[src*="m-banco-santander"]{ height:21.9px; }
.pr-bancos img[src*="m-banco-pyme-nacion"]{ height:21.7px; }
.pr-bancos img[src*="m-banco-bice"]{ height:16.9px; }
.pr-bancos img[src*="m-banco-galicia"]{ height:26.5px; }
}
/* --- Enlaces del pie ------------------------------------------------------ */
.pie__enlaces{
display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
margin-top:40px; padding-top:32px;
border-top:1px solid rgba(245,245,247,.14); text-align:left;
}
.pie__enlaces h3{
font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.12em;
text-transform:uppercase; color:var(--tinta-inv); margin-bottom:12px;
}
.pie__enlaces ul{ list-style:none; margin:0; padding:0; }
.pie__enlaces li{ margin-bottom:8px; }
.pie__enlaces a{ font-size:var(--t-sm); color:var(--tinta-inv-2); }
@media (hover:hover){ .pie__enlaces a:hover{ color:var(--tinta-inv); } }
@media (max-width:900px){ .pie__enlaces{ grid-template-columns:1fr 1fr; gap:22px; } }
/* ==========================================================================
CATÁLOGO DE PRODUCTOS
Seis filtros por tipo, con contador, y el buscador de la página debajo.
Los contadores se recalculan mientras se escribe: así se ve en qué categoría
está lo que se busca sin ir probando botón por botón.
========================================================================== */
.filtros{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:18px; }
.filtro{
display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 18px;
border-radius:var(--r-pill); font-size:var(--t-xs); font-weight:600; cursor:pointer;
color:var(--tinta); background:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.92);
backdrop-filter:blur(12px) saturate(160%); -webkit-backdrop-filter:blur(12px) saturate(160%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -18px rgba(0,60,100,.5);
transition:background .2s, border-color .2s, color .2s;
}
.filtro b{ font-weight:600; color:var(--tinta-2); font-variant-numeric:tabular-nums; }
@media (hover:hover){ .filtro:hover{ background:rgba(255,255,255,.8); border-color:#fff; } }
.filtro[aria-pressed="true"]{
background:var(--azul-btn); border-color:rgba(255,255,255,.34); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px -18px rgba(0,60,100,.5);
}
.filtro[aria-pressed="true"] b{ color:rgba(255,255,255,.72); }
.filtro[data-vacio="true"]{ opacity:.45; }
/* Los filtros viven dentro de la banda azul, así que se invierten. El estado
elegido NO puede seguir siendo --azul-btn: es #0076B9, exactamente el fondo
de la banda, y el botón activo desaparecía contra su propio fondo. Pasa a
blanco pleno con el texto azul, que es el mismo par de colores dado vuelta.
MEDIDO: blanco sobre azul 4.89:1 y azul sobre blanco 4.89:1; el contador en
blanco al 72% da 3.60:1, suficiente para un dato accesorio que además está
duplicado en el aria-live. */
/* Dentro de la portada los filtros se alinean a la izquierda, con el título y
la bajada, y no centrados: centrados formaban un tercer eje en una columna
que ya tenía todo alineado al margen izquierdo.
Los 28px de arriba separan el grupo del título. Eran 40 cuando arriba había
una bajada de tres renglones que ya daba respiro; sin ella, 40 abría un
hueco vacío en el medio de la banda. */
.portada .filtros{ justify-content:flex-start; margin-top:28px; }
.portada .filtro{
color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.34);
box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
}
.portada .filtro b{ color:rgba(255,255,255,.72); }
@media (hover:hover){
.portada .filtro:hover{ background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.6); }
}
.portada .filtro[aria-pressed="true"]{
background:#fff; color:var(--azul-titulo); border-color:#fff; box-shadow:none;
}
.portada .filtro[aria-pressed="true"] b{ color:var(--azul-titulo); opacity:.62; }
/* El catálogo arranca pegado a la banda: el aire de arriba ya lo puso el
relleno inferior de la portada y duplicarlo alejaba las fichas de la
búsqueda que las filtra. */
.sec--catalogo{ padding-top:38px; }
/* El recuadro que marca dónde va la foto que todavía no existe. */
.card__media--vacia{
aspect-ratio:4/3; margin:30px 30px 0; border-radius:calc(var(--r-card) - 6px);
border:1px dashed var(--azul-borde); background:var(--papel-3);
display:grid; place-items:center;
}
.card__media--vacia span{ font-size:var(--t-xs); color:var(--tinta-2); letter-spacing:.02em; }
/* Cuántas por fila, por ancho: 4 arriba de 1180, 3 entre 901 y 1180, y 2 en
mobile —esta última vive en el bloque de max-width:900px—.
LAS TRES VAN ACOTADAS POR MEDIA QUERY, incluida la de 4, y eso es a
propósito. Antes la de 4 estaba suelta y la de mobile quedaba en un
@media anterior del archivo: como las dos son `#grilla` tienen la MISMA
especificidad —una media query no suma nada— y ganaba la última escrita.
Resultado: en el celular la grilla salía de a 4 columnas de 67px.
Con las tres acotadas, los rangos no se pisan y el orden deja de importar.
El porqué de cada número: a 4, el contenedor de 1172 deja cada tarjeta en
~272px y entra la foto 4:3, el título, las specs y los dos botones. Entre
901 y 1180 a 4 caían por debajo de 230 y las specs se apilaban de a una. */
@media (min-width:1181px){
#grilla{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:1180px) and (min-width:901px){
#grilla{ grid-template-columns:repeat(3,1fr); }
}
.card[hidden]{ display:none; }
.vacio{ text-align:center; padding:46px 20px; }
.vacio p{ color:var(--tinta-2); margin-bottom:16px; }
.vacio b{ color:var(--tinta); }
/* ==========================================================================
EL HEADER EN MOBILE: LA PÍLDORA SE ALINEA CON EL CONTENIDO
Quedaba a 36px de cada borde —20 de relleno del .nav más 16 del .wrap, que
por debajo de 520px es calc(100% - 32px) centrado—. Contra las tarjetas eso
se leía como un error: en la home la caja de promociones arranca en 32, o sea
4px de diferencia, y una casi-coincidencia se nota más que una diferencia
franca. En productos es peor: la grilla del catálogo arranca en 8 y la
píldora quedaba 28px más adentro de cada lado.
Pasa a 16. La píldora queda más ancha que el contenido de la home y bastante
más cerca de la grilla del catálogo. El relleno se pone en el .nav y el
.wrap se anula: si se dejaran los dos, se suman.
========================================================================== */
@media (max-width:900px){
.nav{ padding-inline:16px; }
.nav__in.wrap{ width:100%; margin-inline:0; }
/* EL MENÚ DESPLEGADO SE ALINEA CON LA PÍLDORA. Se veía cortado y corrido a
la izquierda, y por buenas razones: se posiciona contra la CAJA DE RELLENO
de la píldora —no contra su borde— y encima arrastra un margin-left de 8px
del flex del menú. MEDIDO: el panel arrancaba en 25 contra los 16 de la
píldora y terminaba en 373 contra 374. Nueve píxeles de un lado y uno del
otro: una asimetría chica es justo lo que se lee como "descentrado".
Se anula el margen y se corre 1px a cada lado para pasar del borde interno
de relleno al borde exterior. El techo baja el mismo píxel, que era la
franja clara que lo hacía ver despegado.
Y toma el radio de abajo de la píldora, para que se lea como si la píldora
se estirara y no como una placa apoyada encima. */
.nav__menu[data-abierto="true"]{
margin-inline:0;
left:-1px; right:-1px; top:calc(100% + 1px);
/* El mismo borde que toma la píldora al abrirse, para que los costados
sigan de largo y no se vea dónde termina una y empieza el otro. */
border:1px solid rgba(255,255,255,.7);
border-top:0;
border-radius:0 0 var(--pastilla-r) var(--pastilla-r);
overflow:hidden;
}
/* LA UNIÓN CON LA PÍLDORA. Abierta, la píldora seguía redondeando sus
esquinas de abajo y conservaba su vidrio al 62% contra un panel al 97%:
se veía el escalón de las curvas y, además, un cambio de tono justo en la
juntura. Los dos defectos son de la misma juntura.
Al abrirse, la píldora cuadra las esquinas de abajo, toma exactamente la
superficie del panel y suelta su raya inferior y su sombra: la sombra la
dibuja el panel, que ahora es el que termina el bloque. Los dos leen como
una sola pieza que se estira. */
.nav:has(.nav__menu[data-abierto="true"]) .nav__in{
border-bottom-left-radius:0; border-bottom-right-radius:0;
border-bottom-color:transparent;
background:var(--papel);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
/* EL MENÚ ABIERTO VA OPACO, y no es un capricho de estilo. El panel estaba
al 97% y ese 3% alcanzaba para que el titular del hero —blanco sobre casi
negro, que es el contraste más alto de la página— se leyera atravesando
los siete enlaces. COMPROBADO aislando la causa: sin backdrop-filter el
traspaso seguía igual, y con un fondo opaco desaparecía; o sea que era la
transparencia y no el vidrio.
El vidrio tiene sentido para la píldora flotando sobre una foto. Para un
panel que tapa media pantalla y hay que leer, no: es la única superficie
del sitio que compite con su propio contenido. */
.nav__menu[data-abierto="true"]{
background:var(--papel);
backdrop-filter:none; -webkit-backdrop-filter:none;
}
/* El último enlace no lleva raya: quedaba una línea suelta contra la curva. */
.nav__menu[data-abierto="true"] .nav__link:last-child{ border-bottom:0; }
}
/* ==========================================================================
PROMOCIONES EN MOBILE
Tres cambios, y el primero manda sobre los otros dos.
1. LA TARJETA DE BANCOS SALE DEL CARRUSEL. Las cuatro cajas de promociones
se vuelven carrusel en mobile, así que ésta medía 272px y a la tabla le
quedaban 212 de ancho útil contra los 674 que pide: se desbordaba 462px.
En desktop esta caja ya ocupa las seis columnas de la grilla mientras las
otras tres van en fila, así que darle el ancho completo acá respeta la
jerarquía que el diseño ya tenía. Las otras tres siguen en carrusel.
2. LOS LOGOS EN GRILLA DE TRES. Sueltos caían de a uno y formaban una torre
de 318px: el reparto libre no puede emparejar un BICE de 162px de ancho
con un PymeNación de 127 en el interior disponible. En grilla quedan 3+3+1
y, cuando entren dos más, 3+3+3 sin tocar nada.
3. LA TABLA SE VUELVE FICHAS. Ocho columnas no entran en un teléfono por
mucho que se achique la letra. Cada línea de crédito pasa a ser una ficha
y cada celda un renglón etiqueta/valor, con la etiqueta saliendo del
atributo data-et —que se copia del propio thead, así no se desincronizan—.
El se queda en el HTML: sigue siendo lo correcto para el dato,
funciona sin CSS y es lo que se ve en desktop.
========================================================================== */
@media (max-width:900px){
.promo{
display:block; overflow:visible; scroll-snap-type:none;
margin-inline:0; padding-inline:0; padding-block:0;
}
.promo__caja--ancha{ flex:none; width:auto; margin-bottom:14px; }
/* Las otras tres vuelven a ser carrusel: se envuelven en su propio riel. */
.promo__tercios{
display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
margin-inline:calc(-1 * var(--sangria)); padding-inline:var(--sangria);
padding-block:10px 34px;
}
.promo__tercios::-webkit-scrollbar{ display:none; }
.promo__tercios > .promo__caja{ flex:0 0 84%; scroll-snap-align:center; }
.promo__caja{ padding:22px 18px; }
/* --- 2. Los logos --- */
.pr-bancos{
display:grid; grid-template-columns:repeat(3,1fr); gap:26px 14px;
justify-items:center; align-items:center;
padding:20px 14px;
}
/* El 78% es el aire. Con max-width:100% cada logo llenaba su celda de borde a
borde y los tres se tocaban: la grilla ordenaba pero no despegaba. Dejando
que cada uno ocupe como mucho tres cuartos de su celda, el hueco entre
logos deja de depender del gap y pasa a ser proporcional a la celda, así
que se mantiene cuando entren el octavo y el noveno. */
.pr-bancos img{ max-width:78%; }
/* --- 3. La tabla se vuelve fichas --- */
.pr-tabla-env{ overflow:visible; }
.pr-tabla, .pr-tabla tbody, .pr-tabla tr, .pr-tabla td, .pr-tabla th{ display:block; }
/* El thead se va: sus títulos ya viajan en cada celda por data-et. Se oculta
con clip y no con display:none para que siga anunciándose a un lector. */
.pr-tabla thead{
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* El banco encabeza su grupo UNA vez, en vez de repetirse en las seis fichas:
cuando entre un segundo banco, cada grupo va a tener su propio encabezado y
la repetición se leería como ruido. */
.pr-tabla .pr-banco th{
border-radius:9px; margin:16px 0 10px; padding:9px 13px; border-bottom:0;
}
.pr-tabla tbody tr:not(.pr-banco){
border:1px solid var(--linea); border-radius:12px;
padding:13px 14px 11px; margin-bottom:11px; background:var(--papel);
}
/* El nombre de la línea es el título de la ficha. */
.pr-tabla tbody th[scope="row"]{
width:auto; padding:0 0 9px; border-bottom:0; font-size:1rem; line-height:1.3;
}
.pr-tabla tbody th span{ font-size:11.5px; }
/* Cada celda: etiqueta a la izquierda, valor a la derecha. */
.pr-tabla tbody td{
padding:6px 0; border-bottom:0; border-top:1px solid var(--linea);
display:flex; gap:12px; font-size:13px;
}
.pr-tabla tbody td::before{
content:attr(data-et); flex:0 0 82px; color:var(--tinta-2); font-weight:400;
}
/* El hover de fila no tiene sentido cuando la fila es una ficha. */
@media (hover:hover){ .pr-tabla tbody tr:hover{ background:var(--papel); } }
}