@charset "UTF-8";
/* ==========================================================================
AMIFER · hoja de estilos del sitio
--------------------------------------------------------------------------
Un solo archivo, sin build. El orden importa y es este:
1. Fuentes Poppins y Lato servidas por nosotros
2. Tokens color, tipografia y espacio del manual de marca
3. Base reset corto y ajustes de documento
4. Utilidades envoltura, rotulo, cifra, revela
5. Cabezal barra fija, menu de escritorio y panel movil
6. Hero y escala la escala de potencia
7. Catalogo filtros y tarjetas de maquina
8. Ficha tecnica solapas y tablas
9. Bloques motivos, marcas, contacto, cierre, pie
10. Barra movil acciones fijas abajo en telefono
11. Movimiento apariciones y prefers-reduced-motion
Regla de oro: ningun color se escribe suelto, todo sale de un token. El
sitio es solo tema claro a proposito (ver CLAUDE.md) -- esto no es para
soportar un tema oscuro, es para poder cambiar la paleta entera en un
solo lugar sin salir a cazar hexadecimales sueltos por los componentes.
========================================================================== */
/* 1. FUENTES ============================================================== */
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fuentes/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fuentes/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fuentes/poppins-800.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fuentes/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fuentes/lato-700.woff2') format('woff2')}
/* 2. TOKENS =============================================================== */
/* El sitio se apoya en TRES niveles de superficie, y de ahi sale casi todo el
ritmo visual:
--fondo la pagina
--superficie las tarjetas, un escalon por encima de la pagina
--noche las bandas azules (cabezal, hero, cierre)
Los tres tienen que verse distintos SIEMPRE. En el tema oscuro viejo
--fondo y --noche eran los dos #001B36: cada seccion terminaba contra otra
del mismo color exacto, los limites desaparecian y el sitio entero se leia
como una sola mancha azul. Por eso ahora en oscuro la pagina es casi negra
y la banda es un azul MAS claro que la pagina: la banda sigue destacando,
que es todo su proposito. */
:root{
/* El sitio es claro siempre. Esto NO es decorativo: le avisa al navegador
que pinte lo suyo -- barras de scroll, inputs, selectores de fecha, el
relleno automatico de contraseñas -- con la paleta clara. Sin esta linea,
en un telefono con el sistema en oscuro los campos del formulario de
contacto salen con fondo oscuro y texto claro puestos por el navegador,
adentro de una tarjeta blanca. */
color-scheme:light;
--display:'Poppins','Segoe UI',Arial,sans-serif;
--texto:'Lato','Segoe UI',Arial,sans-serif;
/* Superficies y tinta */
--fondo:#F4F8FC;
--superficie:#FFFFFF;
--superficie-alt:#EDF4FB;
--tinta:#0A1E33;
--tinta-media:#3B5876;
/* Antes #6E849E: 3.85:1 sobre --superficie, no pasa WCAG AA (min 4.5:1)
en ninguno de los ~10 usos (etiquetas, placeholders, texto secundario),
todos por debajo del piso de "texto grande". Este tono da 5.06:1. */
--tinta-suave:#5B7186;
--borde:#E1EAF4;
--borde-vivo:#BFD6EE;
/* Marca */
--marca:#003A79;
--marca-viva:#0A5290;
--sobre-marca:#FFFFFF; /* texto encima de --marca */
/* Tres alturas de sombra. Sin esto las tarjetas quedan pegadas al fondo y
la pagina se ve plana por mas que los colores esten bien. */
--sombra:0 1px 2px rgba(0,27,54,.04),0 2px 8px -2px rgba(0,27,54,.08);
--sombra-media:0 2px 4px rgba(0,27,54,.05),0 10px 24px -8px rgba(0,27,54,.16);
--sombra-alta:0 4px 8px rgba(0,27,54,.06),0 22px 48px -16px rgba(0,27,54,.28);
/* WhatsApp: el unico verde del sitio, y solo para la accion de contacto.
No es el #25D366 de la marca -- ese da 1.98:1 con texto blanco, no pasa
WCAG AA (hace falta 4.5:1). Este tono da 4.8:1 con --sobre-marca, lo
bastante oscuro para pasar sin dejar de leerse como "verde WhatsApp". */
--verde:#16833F;
--verde-hover:#126B33;
/* La banda azul oscura: cabezal, hero y cierre */
--noche:#001B36;
--noche-alt:#002F5E;
--noche-tinta:#FFFFFF;
--noche-suave:#A9BCD6;
--noche-borde:rgba(169,188,214,.22);
--noche-borde-vivo:rgba(169,188,214,.5);
/* Placa de las fotos de catalogo.
Las fotos (tools/recortar-fondo.mjs) salen sin fondo -- el archivo es
transparente, la placa la pone este token -- asi que ya no hace falta
que se mantenga clara: eso era para tapar el fondo blanco que traian
pegado del folleto, y ese fondo ya no existe. Cambiarla es solo probar
un valor nuevo aca.
Sigue siendo un degradado y no un gris plano porque le da algo de
profundidad, como un fondo de estudio real. Es tambien la placa que va
sobre las bandas azules (hero y ficha). */
--placa:linear-gradient(160deg,#FFFFFF 0%,#E8F1FA 100%);
/* Escena generica detras de la maquina del hero (home y ficha): una foto
real de campo arado (recorte de tools/_fondos-hero/, el mismo banco de
fondos generados con IA para el hero -- ver tools/README.md), no un
render por tractor -- ese enfoque (una escena generada por unidad) ya
se probo y se saco, ver historial de escala.php. El tractor en si sigue
siendo el recorte transparente de siempre por encima -- esto solo
reemplaza --placa como fondo de esa placa, nunca se mezcla con la
maquina.
Este valor es solo el respaldo: fondo_hero() (sitio_helper.php) elige
al azar entre hero-campo.webp, hero-campo-2.webp y hero-campo-3.webp en
cada carga de pagina y la vista pisa la variable con un style inline en
.ficha-hero__foto, asi cada visita ve una de las tres. Tres fotos y no
una sola por lo mismo que --escena-campo no es una por tractor: da
sensacion de variedad sin el peso de generar y mantener 15.
Solo la usa .ficha-hero__foto -- .pieza__foto (tarjetas del catalogo) y
.galeria (clientes) siguen con --placa lisa. */
--escena-campo:url('../images/hero-campo.webp');
--radio:14px;
--radio-chico:10px;
--ancho:1180px;
--canal:clamp(18px,5vw,52px);
--toque:44px; /* area minima de toque */
--cabezal-alto:64px;
--barra-movil-alto:0px; /* lo sube la media query cuando aparece */
/* Movimiento: las dos curvas distinguen una entrada editorial de una
respuesta corta. Nunca se animan propiedades que recalculen el layout. */
--entra:cubic-bezier(.22,1,.36,1);
--respuesta:cubic-bezier(.2,.8,.2,1);
--duracion-rapida:180ms;
--duracion-media:420ms;
}
/* NO HAY TEMA OSCURO.
---------------------------------------------------------------------------
El sitio es claro siempre, decidido con el cliente: la marca es azul sobre
blanco y asi esta el manual, los folletos y las fotos del catalogo (que
traen el fondo blanco pegado). Mantener una segunda paleta significaba
revisar cada pantalla dos veces, y de ahi salio el peor bug que tuvo el
diseño: en oscuro --fondo y --noche quedaron los dos #001B36, o sea que
.seccion y .seccion.noche pintaban el mismo color exacto, se borraban los
limites entre secciones y el sitio entero se leia como una mancha plana.
Si algun dia se vuelve a querer tema oscuro, va en un solo lugar: otro
bloque que redefina estos mismos tokens. NO agregar colores sueltos dentro
de los componentes. */
/* 3. BASE ================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
margin:0;
background:var(--fondo);
color:var(--tinta);
font-family:var(--texto);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
padding-bottom:var(--barra-movil-alto);
}
body.sin-scroll{overflow:hidden}
body.cargando{overflow:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}
figure{margin:0} /* el margen que trae el navegador descoloca el carrusel */
img{max-width:100%;display:block}
a{color:var(--marca);text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{flex:none}
:focus-visible{outline:2px solid var(--marca-viva);outline-offset:3px;border-radius:var(--radio)}
.noche :focus-visible,.cabezal :focus-visible{outline-color:var(--noche-tinta)}
/* Que el ancla no quede tapada por el cabezal fijo */
:target{scroll-margin-top:calc(var(--cabezal-alto) + 16px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* 4. UTILIDADES =========================================================== */
.envoltura{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.rotulo{
font-family:var(--display);font-weight:700;
font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--tinta-suave);
}
.noche .rotulo{color:var(--noche-suave)}
.cifra{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.solo-lectores{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Salto de teclado: invisible hasta que recibe foco */
.saltar{
position:absolute;left:8px;top:-60px;z-index:200;
background:var(--noche-tinta);color:var(--noche);
padding:10px 16px;border-radius:var(--radio);
font-family:var(--display);font-weight:700;font-size:.85rem;text-decoration:none;
transition:top .2s ease;
}
.saltar:focus{top:8px}
/* La banda azul. Lleva un degradado muy suave y no un color plano: a pantalla
completa un azul liso de 900 px de alto se ve muerto, y este medio tono de
diferencia alcanza para que respire sin que se note el truco. */
.noche{
background:var(--noche);
background-image:linear-gradient(170deg,var(--noche-alt) 0%,var(--noche) 55%);
color:var(--noche-tinta);
}
/* Carga y navegacion ------------------------------------------------------
Las dos cortinas usan la misma geometria: una presentacion tranquila al
entrar y un corte veloz al cambiar de pagina. Asi la espera no parece un
fallo tecnico ni se introduce una libreria de transiciones. */
.cortina-carga,.cortina-ruta{display:none}
html.js .cortina-carga,html.js .cortina-ruta{
position:fixed;inset:0;z-index:200;display:grid;place-items:center;
background:var(--noche);background-image:linear-gradient(170deg,var(--noche-alt) 0%,var(--noche) 55%);
color:var(--noche-tinta);
}
.cortina-carga{transition:opacity var(--duracion-media) var(--entra),visibility 0s linear var(--duracion-media)}
.cortina-carga__marca{width:min(128px,30vw);position:relative;z-index:1}
.cortina-carga__marca img{width:100%;height:auto}
.cortina-carga__marca span{display:block;height:2px;background:var(--noche-borde);margin-top:22px;overflow:hidden}
.cortina-carga__marca span::after{content:'';display:block;width:55%;height:100%;background:var(--noche-tinta);animation:progreso-carga 1s var(--entra) infinite alternate}
.cortina-carga.lista{opacity:0;visibility:hidden;pointer-events:none}
.cortina-ruta{visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path var(--duracion-media) var(--entra),visibility 0s linear var(--duracion-media)}
.cortina-ruta.activa{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path var(--duracion-media) var(--entra),visibility 0s}
.cortina-ruta__marca{position:relative;z-index:1;width:min(128px,30vw);height:auto}
@keyframes progreso-carga{from{transform:translateX(-90%)}to{transform:translateX(180%)}}
/* Esqueletos: cada variante guarda la proporcion del contenido que aparece.
La animacion es una respiracion tenue, no un shimmer llamativo. */
.esqueleto{display:block;position:relative;overflow:hidden;background:var(--superficie-alt);border-radius:var(--radio-chico)}
.esqueleto::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:recorre-esqueleto 1.8s ease-in-out infinite}
.esqueleto--texto{height:.8em;width:var(--ancho-esqueleto,100%)}
.esqueleto--imagen{aspect-ratio:4/3}
.esqueleto--tarjeta{min-height:330px}
.esqueleto--hero{min-height:clamp(350px,50vw,570px);border-radius:var(--radio)}
.esqueleto--linea-tiempo{height:86px;border-radius:0}
.esqueleto--evento{height:120px}
.esqueleto--ficha{height:280px}
.noche .esqueleto{background:rgba(255,255,255,.12)}
.noche .esqueleto::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
@keyframes recorre-esqueleto{to{transform:translateX(100%)}}
/* Boton verde de WhatsApp */
.wa{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:var(--toque);
background:var(--verde);color:var(--sobre-marca);
font-family:var(--display);font-weight:700;font-size:.88rem;
padding:11px 18px;border-radius:var(--radio);text-decoration:none;
transition:background .2s ease,transform .2s ease;
white-space:nowrap;
}
.wa:hover{background:var(--verde-hover);transform:translateY(-1px)}
.wa svg{width:18px;height:18px;fill:currentColor}
.wa--chico{min-height:38px;padding:8px 14px;font-size:.8rem}
/* Boton secundario, borde fino */
.boton-linea{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--toque);
font-family:var(--display);font-weight:600;font-size:.84rem;
color:var(--marca);text-decoration:none;
border:1px solid var(--borde-vivo);border-radius:var(--radio);
padding:10px 16px;
transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.boton-linea svg{width:18px;height:18px}
.boton-linea:hover{border-color:var(--marca);background:var(--superficie-alt)}
.noche .boton-linea{color:var(--noche-tinta);border-color:var(--noche-borde-vivo)}
.noche .boton-linea:hover{background:rgba(255,255,255,.06);border-color:var(--noche-tinta)}
/* 5. CABEZAL ============================================================== */
.cabezal{
position:sticky;top:0;z-index:60;
background:var(--noche);
border-bottom:1px solid var(--noche-borde);
}
.cabezal__fila{
display:flex;align-items:center;gap:clamp(14px,3vw,38px);
min-height:var(--cabezal-alto);
padding-block:10px;
}
/* El isologo original. No lleva texto al lado: el nombre y "IMPORTADORES" ya
estan dibujados adentro del logo.
El minimo de 132 px sale del manual de marca: por debajo de 120 px de ancho
"IMPORTADORES" deja de leerse. Y el manual tambien pide aire alrededor, de
ahi el padding-right en vez de pegarlo al menu. */
.marca-logo{
display:flex;align-items:center;
min-height:var(--toque);
text-decoration:none;
margin-right:auto;padding-right:12px;
}
.marca-logo img{width:clamp(132px,16vw,164px);height:auto}
.menu{display:flex;gap:clamp(14px,2.2vw,30px)}
.menu a{
color:var(--noche-suave);text-decoration:none;
font-family:var(--display);font-weight:600;font-size:.82rem;
padding-block:6px;position:relative;
}
.menu a::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--noche-tinta);transform:scaleX(0);transform-origin:left;
transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.menu a:hover,.menu a[aria-current="page"]{color:var(--noche-tinta)}
.menu a[aria-current="page"]::after,.menu a:hover::after{transform:scaleX(1)}
/* Hamburguesa: solo en telefono y tablet chica */
.hamburguesa{
display:none;
width:var(--toque);height:var(--toque);
align-items:center;justify-content:center;
color:var(--noche-tinta);
}
.hamburguesa svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* Panel de navegacion en telefono */
.panel-menu{
position:fixed;inset:0;z-index:70;
background:var(--noche);
display:flex;flex-direction:column;
padding:0 var(--canal) calc(24px + env(safe-area-inset-bottom));
overflow-y:auto;
opacity:0;visibility:hidden;transform:translateY(-8px);
/* visibility conmuta de golpe, no se interpola: al cerrar espera a que
termine el desvanecido, y al abrir cambia ya. Si se la deja dentro de la
transicion normal, el panel sigue invisible durante los 280 ms y no
acepta foco -- quien navega con teclado abre el menu y queda afuera. */
transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
}
.panel-menu[data-abierto="si"]{
opacity:1;visibility:visible;transform:none;
transition:opacity .28s ease,transform .28s ease,visibility 0s;
}
.panel-menu__fila{display:flex;align-items:center;min-height:var(--cabezal-alto);padding-block:10px}
.panel-menu__cerrar{margin-left:auto;width:var(--toque);height:var(--toque);display:flex;align-items:center;justify-content:center;color:var(--noche-tinta)}
.panel-menu__cerrar svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.panel-menu nav{display:flex;flex-direction:column;margin-top:14px}
.panel-menu nav a{
font-family:var(--display);font-weight:700;
font-size:1.5rem;letter-spacing:-.02em;
color:var(--noche-tinta);text-decoration:none;
padding-block:14px;border-bottom:1px solid var(--noche-borde);
}
.panel-menu nav a[aria-current="page"]{color:var(--noche-suave)}
.panel-menu__datos{margin-top:auto;padding-top:28px;display:grid;gap:2px;color:var(--noche-suave);font-size:.92rem}
.panel-menu__datos a:not(.wa){
color:var(--noche-tinta);text-decoration:none;font-weight:700;
min-height:var(--toque);display:flex;align-items:center;
}
.panel-menu .wa{margin-top:20px}
@media (max-width:880px){
.menu{display:none}
.hamburguesa{display:flex}
.cabezal .wa{display:none} /* en telefono la accion vive en la barra de abajo */
}
@media (min-width:881px){
.panel-menu{display:none}
}
/* 6. HERO Y ESCALA ======================================================== */
.hero{
position:relative;
padding-top:clamp(20px,4vw,44px);overflow:hidden;
}
.hero>.envoltura{position:relative;z-index:2}
/* Tractor a trazos (IA, ver comentario en escala.php): reemplaza a la rueda
decorativa en este rincon puntual -- las fichas de tractor.php siguen
usando hero-rueda.php tal cual. Es una imagen con fondo navy propio, no
un SVG transparente como la rueda, asi que la mascara radial es la que
hace que se lea como parte del fondo del hero y no como un recorte
pegado encima -- sin ella se veria el borde rectangular de la foto. */
.hero-tractor-trazos{
position:absolute;z-index:0;
bottom:0;left:clamp(-40px,-4vw,-10px);
width:clamp(360px,45vw,600px);height:auto;
opacity:.85;
pointer-events:none;user-select:none;
-webkit-mask-image:radial-gradient(120% 120% at 20% 85%,#000 45%,rgba(0,0,0,0) 88%);
mask-image:radial-gradient(120% 120% at 20% 85%,#000 45%,rgba(0,0,0,0) 88%);
}
/* Entre 901 y ~1300px .elegido pasa a dos filas (ver comentario en
.elegido__cifra): el hero queda mas bajo de contenido pero el ancho
todavia reserva columna completa para el intro, asi que a este tamano
de imagen (pensado para el hero angosto de escritorio grande) le sobra
alto y termina tapando el rotulo de "Escala de potencia". Achicarla en
este tramo intermedio es mas simple que perseguir la altura real del
contenido con JS. */
@media (max-width:1560px){
.hero-tractor-trazos{ width:clamp(160px,18vw,300px); }
}
@media (max-width:900px){
.hero-tractor-trazos{ width:clamp(200px,44vw,300px); }
}
/* Segunda columna: la foto real del tractor elegido (misma placa que la
ficha, .ficha-hero__foto) mas la marca de agua tipografica con marca y
modelo (.ficha-hero__hp, reusada tal cual -- mismo recurso que la ficha
y que el hero de Empresa). Antes esto era un fondo a pantalla completa
horneado con IA por tractor (Gemini, a partir del recorte real); ahora es
la foto real del catalogo, la misma que ya se usa en /catalogo y en la
ficha de cada modelo. */
.hero__grilla{
display:grid;
grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
grid-template-areas:
"intro foto"
"elegido foto";
gap:0 clamp(24px,5vw,64px);
align-items:end;
}
.hero__intro{grid-area:intro;min-width:0}
.hero__elegido{grid-area:elegido;min-width:0}
.hero__grilla .ficha-hero__foto{grid-area:foto;align-self:center;margin-top:clamp(20px,4vw,44px)}
.hero__grilla .ficha-hero__foto img{transition:opacity .25s ease}
/* #heroMarca es hijo directo de .hero (hermano de .envoltura), no de
.hero__grilla -- el top tiene que igualar el padding-top de .hero, no el
de .ficha-hero__hp base, o el adorno asoma solo arriba del titulo. */
.hero>.ficha-hero__hp{top:clamp(20px,4vw,44px)}
/* Titulo deliberadamente mas chico que .elegido__cifra: la maquina elegida
(foto + HP + modelo) es el centro visual del hero, este es el texto de
apoyo que lo entrega, no el que compite por la mirada. */
.hero__titulo{max-width:15ch;font-size:clamp(1.8rem,2.6vw,2.6rem);font-weight:800;letter-spacing:-.045em;margin:8px 0 10px}
.hero__bajada{color:var(--noche-suave);max-width:40ch;font-size:.9rem}
/* Placa de datos de la maquina elegida */
.elegido{margin-top:clamp(14px,2.5vw,28px);display:flex;align-items:flex-end;gap:clamp(12px,2vw,24px);flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--noche-borde)}
.elegido__hp{display:flex;align-items:baseline;gap:10px;line-height:.78}
.elegido__cifra{
font-family:var(--display);font-weight:800;
/* El tope (6.2rem) esta calculado para que "130" (el HP de 3 cifras mas
ancho de la escala) mas .elegido__datos (min-width abajo) mas el gap de
arriba sigan entrando en una sola fila -- pasarse de esto hace que
.elegido se envuelva en dos filas SOLO para los tractores de 3 cifras
(100/110/120/130 HP) y la altura del hero salta al elegirlos. Si se
vuelve a agrandar esta cifra, hay que volver a probar la escala completa
con la maquina de 130 HP elegida antes de dar por bueno el cambio. */
font-size:clamp(3.4rem,8vw,6.2rem);
letter-spacing:-.055em;
background:linear-gradient(180deg,#FFFFFF 30%,var(--noche-suave));
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.elegido__unidad{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--noche-suave)}
.elegido__datos{padding-bottom:6px;min-width:170px}
.elegido__modelo{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.01em}
.elegido__serie{color:var(--noche-suave);font-size:.88rem;margin-top:2px}
.elegido__uso{
display:inline-block;margin-top:8px;
border:1px solid var(--noche-borde-vivo);border-radius:var(--radio);
padding:4px 10px;font-family:var(--display);font-weight:600;font-size:.7rem;
letter-spacing:.08em;text-transform:uppercase;
}
.elegido__acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;width:100%}
.boton-sobre{display:inline-flex;align-items:center;justify-content:center;min-height:var(--toque);padding:10px 16px;background:var(--noche-tinta);color:var(--noche);border:1px solid var(--noche-tinta);font-family:var(--display);font-size:.84rem;font-weight:700;text-decoration:none;transition:transform var(--duracion-rapida) var(--respuesta),background var(--duracion-rapida) var(--respuesta)}
.boton-sobre:hover{background:transparent;color:var(--noche-tinta);transform:translateY(-1px)}
/* Cambio suave de un modelo a otro */
.muta{transition:opacity .22s ease,transform .22s ease}
.muta.saliendo{opacity:0;transform:translateY(6px)}
/* --- El instrumento --- */
.escala{margin-top:clamp(16px,3vw,32px);padding-bottom:clamp(16px,2.5vw,28px)}
.escala__cabecera{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.escala__ayuda{color:var(--noche-suave);font-size:.78rem}
.escala__controles{display:flex;align-items:center;gap:14px}
/* Flechas anterior/siguiente: la escala ya se podia arrastrar o tocar un
punto, pero nada avisaba que era interactiva -- un boton "anterior/
siguiente" es el control mas obvio que existe para recorrerla. */
.escala__flechas{display:flex;gap:6px}
.escala__flecha{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;flex:none;border-radius:50%;
border:1px solid var(--noche-borde-vivo);background:transparent;color:var(--noche-suave);
cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.escala__flecha svg{width:16px;height:16px}
.escala__flecha:hover{background:var(--noche-tinta);color:var(--noche);border-color:var(--noche-tinta)}
.escala__flecha:disabled{opacity:.3;cursor:default;pointer-events:none}
@media (max-width:520px){.escala__ayuda{display:none}}
.escala__riel{position:relative;height:84px;touch-action:pan-y}
.escala__linea{position:absolute;left:0;right:0;bottom:28px;height:2px;background:rgba(169,188,214,.26)}
.escala__cursor{
position:absolute;left:0;bottom:28px;height:2px;
background:var(--noche-tinta);width:0;
transition:width .42s cubic-bezier(.22,1,.36,1);
}
.tick{
position:absolute;bottom:28px;left:var(--pos);
transform:translateX(-50%);
width:26px;height:46px;
display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.tick::before{
content:'';width:2px;height:15px;background:rgba(169,188,214,.75);
transition:height .3s cubic-bezier(.22,1,.36,1),background .2s ease;
}
.tick:hover::before{height:26px;background:var(--noche-tinta)}
.tick[aria-checked="true"]::before{height:38px;background:var(--noche-tinta)}
.tick[aria-checked="true"]::after{
content:'';position:absolute;bottom:43px;left:50%;transform:translateX(-50%);
width:8px;height:8px;background:var(--noche-tinta);border-radius:50%;
}
.escala__marca{
position:absolute;bottom:0;left:var(--pos);transform:translateX(-50%);
font-family:var(--display);font-weight:600;font-size:.72rem;
color:var(--noche-suave);white-space:nowrap;transition:color .2s ease;
}
.escala__marca.activa{color:var(--noche-tinta)}
@media (max-width:900px){
.hero{padding-top:12px}
.hero>.ficha-hero__hp{top:12px}
.elegido__acciones{margin-top:8px}
/* En telefono el orden visual no es el del escritorio (foto/HP primero, el
titulo al final). Antes la escala iba justo despues del titulo para que
"el eje del sitio" quedara a mano sin scrollear -- pero eso empujaba la
foto y la placa de datos (el tractor de verdad, el HP, el boton de
WhatsApp) a mas de una pantalla de distancia, y el primer tramo del hero
terminaba siendo puro texto. La escala pasa a ultima: la foto y la placa
ya estan a la vista apenas se pasa el titulo, y elegir otra maquina no
depende de llegar hasta la escala -- #heroSec ya escucha swipe horizontal
en toda su superficie (ver sitio.js), asi que deslizar sobre la foto
tambien cambia de tractor. La escala queda al final como el instrumento
de precision (saltar a un HP puntual), no como el unico modo de moverse.
.hero__grilla pasa a display:contents para que sus tres hijos (intro,
foto, elegido) se acomoden como items directos del mismo flex que ya
envuelve a .escala, y ahi "order" decide el orden real. */
.hero>.envoltura{display:flex;flex-direction:column}
.hero__grilla{display:contents}
.hero__intro{order:1;margin-top:0}
.hero__grilla .ficha-hero__foto{order:2;margin-top:16px;margin-bottom:16px}
.hero__elegido{order:3}
.escala{order:4;margin-top:24px;padding-bottom:12px;border-top:1px solid var(--noche-borde);padding-top:20px}
.elegido{margin-top:10px;padding-top:10px;gap:14px}
.escala__marca.saltea{display:none}
.elegido__acciones>*{flex:1}
}
/* 7. CATALOGO ============================================================= */
.seccion{padding-block:clamp(48px,8vw,110px)}
/* Franja con tinte azul claro. Es lo que le da ritmo a la pagina: blanco,
tinte, banda azul, blanco. Sin esto son diez secciones seguidas del mismo
color y el ojo no encuentra donde termina una y empieza la otra. */
.seccion--tinte{background:var(--superficie-alt)}
.seccion__intro{max-width:60ch;margin-bottom:clamp(26px,4vw,48px)}
.seccion__titulo{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;margin:12px 0 14px}
.seccion__texto{color:var(--tinta-media);font-size:1.02rem}
.noche .seccion__texto{color:var(--noche-suave)}
/* La portada abre con una composicion calibrada; las dos secciones siguientes
responden con cambio de escala, no con otra fila de tarjetas identicas. */
.home-surtido .seccion__intro{max-width:52ch;border-left:3px solid var(--marca);padding-left:clamp(16px,3vw,28px)}
.home-surtido .seccion__titulo{max-width:11ch}
/* Filete corto arriba del rotulo: un detalle chico que le da terminacion a
cada encabezado y ata la seccion al azul de la marca. */
.seccion__intro .rotulo{display:flex;align-items:center;gap:10px}
.seccion__intro .rotulo::before{
content:'';width:26px;height:3px;border-radius:2px;
background:var(--marca);flex:none;
}
.noche .seccion__intro .rotulo::before{background:var(--noche-suave)}
/* Los filtros se desplazan de costado en telefono en vez de amontonarse */
.filtros{display:flex;gap:8px;margin-bottom:24px;flex-wrap:wrap}
.filtro{
display:inline-flex;align-items:center;gap:6px;min-height:var(--toque);
border:1px solid var(--borde-vivo);border-radius:var(--radio);
padding:9px 16px;
font-family:var(--display);font-weight:600;font-size:.82rem;
color:var(--tinta-media);background:var(--superficie);
transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filtro:hover{border-color:var(--marca);color:var(--marca)}
.filtro[aria-pressed="true"]{background:var(--marca);border-color:var(--marca);color:var(--sobre-marca)}
.filtro__n{opacity:.6;font-variant-numeric:tabular-nums}
/* minmax(min(290px,100%),1fr) y no minmax(290px,1fr): en un telefono angosto
de verdad (320px de ancho, todavia se venden) 290px mas el padding de la
envoltura no entra, y una columna que no puede achicarse desborda la
pagina entera de costado. min(290px,100%) le pone un techo: por debajo de
290px de contenedor, la columna ocupa el 100% en vez de insistir. */
.grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:clamp(16px,2vw,26px)}
.pieza{
position:relative;
display:flex;flex-direction:column;
background:var(--superficie);
border:1px solid var(--borde);border-radius:var(--radio);
box-shadow:var(--sombra);
overflow:hidden;
transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1),
border-color .25s ease,box-shadow .35s ease;
}
/* La tarjeta se levanta al pasar por encima. Es la unica señal de "esto se
toca" que tiene la grilla en escritorio. */
.pieza:hover{
border-color:var(--borde-vivo);
transform:translateY(-4px);
box-shadow:var(--sombra-alta);
}
.pieza:focus-within{border-color:var(--marca);box-shadow:var(--sombra-alta)}
.pieza[hidden]{display:none}
.pieza.entrando{opacity:0;transform:translateY(10px)}
.pieza__foto{
position:relative;aspect-ratio:4/3;
background:var(--placa);
border-bottom:1px solid var(--borde);
overflow:hidden;
}
/* padding y no imagen a sangre: las fotos vienen recortadas del folleto
(tools/recortar-fotos.mjs) y necesitan un poco de aire para no chocar
contra el filo de la tarjeta. */
.pieza__foto img{
width:100%;height:100%;object-fit:contain;
padding:10px 12px;
transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.pieza:hover .pieza__foto img{transform:scale(1.05)}
/* Esqueleto mientras la foto todavia no bajo (loading="lazy"): ver la regla
compartida .pieza__esqueleto,.galeria__esqueleto junto a .galeria en este
mismo archivo -- sitio.js le suma "lista" apenas el ![]()
termina de cargar. */
/* La potencia es el dato con el que la gente compara, asi que va grande y
pegada a la foto, no perdida en la lista de specs. */
.pieza__hp{
position:absolute;left:12px;top:12px;
display:inline-flex;align-items:baseline;gap:3px;
background:var(--noche);color:var(--noche-tinta);
border-radius:999px;
font-family:var(--display);font-weight:700;font-size:.8rem;
padding:5px 13px;
box-shadow:0 2px 10px -2px rgba(0,27,54,.5);
}
.pieza__cuerpo{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.pieza__modelo{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.015em}
.pieza__modelo a{color:inherit;text-decoration:none}
/* El link cubre la tarjeta entera: en telefono nadie apunta al titulo de
17 px, se toca la tarjeta en cualquier lado. Los botones de abajo quedan
por encima porque tienen position propia. */
.pieza__modelo a::after{content:'';position:absolute;inset:0;z-index:1}
.pieza__modelo a:hover{color:var(--marca)}
.pieza__serie{color:var(--tinta-suave);font-size:.82rem;margin-top:-6px}
.pieza__resumen{color:var(--tinta-media);font-size:.91rem;line-height:1.55}
.pieza__specs{
display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--borde);
border:1px solid var(--borde);border-radius:var(--radio-chico);
overflow:hidden;
margin-top:auto;
}
.pieza__spec{background:var(--superficie);padding:10px 12px}
.pieza__spec dt{font-family:var(--display);font-weight:600;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-suave)}
.pieza__spec dd{margin:2px 0 0;font-size:.88rem;font-weight:700;font-variant-numeric:tabular-nums}
.pieza__acciones{display:flex;gap:8px;padding-top:4px;position:relative;z-index:2}
.pieza__acciones>*{flex:1}
.vacio{
grid-column:1/-1;text-align:center;padding:48px 20px;
color:var(--tinta-suave);border:1px dashed var(--borde-vivo);border-radius:var(--radio);
}
/* Buscador + orden: mismo alto de toque y borde que .filtro, para que la
fila entera se lea como un solo grupo de controles. */
.catalogo-controles{display:flex;gap:8px;flex-wrap:wrap;margin:-10px 0 24px}
.catalogo-buscador,.catalogo-orden{
min-height:var(--toque);
border:1px solid var(--borde-vivo);border-radius:var(--radio);
padding:9px 14px;
font-family:var(--texto);font-size:.9rem;color:var(--tinta);
background:var(--superficie);
}
.catalogo-buscador{flex:1 1 240px}
.catalogo-buscador:focus,.catalogo-orden:focus{outline:none;border-color:var(--marca-viva)}
.catalogo-orden{flex:0 1 220px}
/* Tandas de mas abajo: el mismo esqueleto de tarjeta ya definido en la
seccion 4, asi la carga progresiva se ve igual que cualquier otro estado
"todavia no bajo" del sitio. Se oculta con [hidden] mientras no hace
falta -- filtrando, buscando, con otro orden o ya sin tandas por revelar. */
.mas-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(16px,2vw,26px)}
.mas-tarjetas[hidden]{display:none}
.mas-tarjetas .esqueleto--tarjeta{border-radius:var(--radio)}
/* Checkbox de comparar: esquina libre de la foto, opuesta a .pieza__hp. El
checkbox nativo se esconde -- el rotulo entero es el area de toque, con el
mismo criterio de z-index que .pieza__acciones para no disparar el link de
toda la tarjeta (.pieza__modelo a::after). */
.pieza__comparar{
position:absolute;right:10px;top:10px;z-index:2;
display:inline-flex;align-items:center;gap:5px;
background:rgba(255,255,255,.92);color:var(--tinta-media);
border-radius:999px;padding:5px 11px 5px 8px;
font-family:var(--display);font-weight:600;font-size:.72rem;
box-shadow:0 2px 10px -2px rgba(0,27,54,.3);
cursor:pointer;user-select:none;
}
.pieza__comparar input{width:15px;height:15px;accent-color:var(--marca);margin:0}
.pieza__comparar:has(input:checked){background:var(--marca);color:var(--sobre-marca)}
/* Barra flotante del comparador. En telefono se corre arriba de
.tr-barra-movil (seccion 10) para no taparla ni quedar tapada. */
.barra-comparar{
position:fixed;left:0;right:0;bottom:0;z-index:56;
display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
padding:12px var(--canal);
background:var(--noche);border-top:1px solid var(--noche-borde);
box-shadow:var(--sombra-alta);
}
.barra-comparar[hidden]{display:none}
.barra-comparar__cuenta{color:var(--noche-tinta);font-family:var(--display);font-weight:600;font-size:.88rem;margin-right:auto}
.barra-comparar__aviso{flex-basis:100%;color:var(--noche-suave);font-size:.82rem}
.barra-comparar__acciones{display:flex;gap:8px}
.barra-comparar .boton-linea{color:var(--noche-tinta);border-color:var(--noche-borde-vivo)}
.barra-comparar .wa:disabled{opacity:.5;pointer-events:none}
@media (max-width:880px){
.barra-comparar{bottom:var(--barra-movil-alto,70px);padding:10px var(--canal)}
}
/* Dialogo del comparador: mismo