/*
* Landing Lonking — Asian Motor Perú
* Dirección visual: "Outseta industrial" (docs/visual-direction.md)
* Todo el diseño vive encapsulado bajo .lonking-page.
* Compartido entre preview.html y la plantilla del plugin WordPress.
*/
/* Fuente autoalojada (Google Fonts, licencia SIL Open Font License).
Variable font: un solo archivo cubre los pesos 100-900 usados en el
sitio (500/600/700/800). La ruta relativa (../fonts/...) resuelve
igual en el plugin de WordPress y en preview.html, porque los
navegadores resuelven url() en CSS respecto al propio archivo .css,
no respecto a la página que lo enlaza. */
@font-face {
font-family: 'Montserrat';
src: url('../fonts/montserrat-variable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Solo afecta a preview.html. WordPress conserva el control de su . */
.lonking-preview {
margin: 0;
}
.lonking-page {
--aml-blue: #0B4DA2;
--aml-blue-dark: #073875;
--aml-blue-light: #E8F0FB;
--aml-yellow: #FFC72C;
--aml-yellow-light: #FFD85A;
--aml-yellow-dark: #EFB600;
--aml-black: #161616;
--aml-gray: #667085;
--aml-gray-light: #F4F6F8;
--aml-white: #FFFFFF;
--aml-radius-sm: 12px;
--aml-radius-lg: 18px;
--aml-max-width: 1280px;
--aml-font: 'Montserrat', Arial, Helvetica, sans-serif;
display: block;
margin: 0;
font-family: var(--aml-font);
color: var(--aml-black);
background-color: var(--aml-white);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
width: 100%;
min-width: 0;
overflow-x: clip;
}
.lonking-page,
.lonking-page *,
.lonking-page *::before,
.lonking-page *::after {
box-sizing: border-box;
}
.lonking-page h1,
.lonking-page h2,
.lonking-page h3,
.lonking-page h4 {
margin: 0;
font-family: var(--aml-font);
font-weight: 700;
line-height: 1.2;
color: var(--aml-blue-dark);
}
.lonking-page p {
margin: 0;
}
.lonking-page ul {
margin: 0;
padding: 0;
list-style: none;
}
.lonking-page dl,
.lonking-page dt,
.lonking-page dd {
margin: 0;
}
.lonking-page img {
max-width: 100%;
display: block;
}
.lonking-page a {
color: inherit;
text-decoration: none;
}
.lonking-page button {
font-family: inherit;
cursor: pointer;
}
.lonking-page :focus-visible {
outline: 2px solid var(--aml-blue);
outline-offset: 2px;
}
.lonking-page .lonking-btn:focus-visible,
.lonking-page .lonking-hero__arrow:focus-visible,
.lonking-page .lonking-hero__toggle:focus-visible,
.lonking-page .lonking-hero__dot:focus-visible {
outline-color: var(--aml-white);
box-shadow: 0 0 0 4px var(--aml-blue-dark);
}
/* Evita que el header sticky tape el inicio de una sección al navegar. */
.lonking-page #lonking-hero,
.lonking-page #catalogo,
.lonking-page #respaldo,
.lonking-page #cotizar,
.lonking-page #soporte,
.lonking-page #faq,
.lonking-page [id^='cat-'] {
scroll-margin-top: 88px;
}
/* ---------- Utilidades ---------- */
.lonking-container {
max-width: var(--aml-max-width);
margin: 0 auto;
padding: 0 24px;
min-width: 0;
}
.lonking-section-title {
font-size: clamp(22px, 2.4vw, 30px);
}
.lonking-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Watermark decorativo "LONKING" — reutilizado en el hero y en el
encabezado del catálogo. El contenedor que lo usa debe tener
position: relative y overflow: hidden. */
.lonking-watermark {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(72px, 15vw, 220px);
font-weight: 800;
letter-spacing: 0.02em;
color: var(--aml-blue-dark);
opacity: 0.05;
white-space: nowrap;
pointer-events: none;
user-select: none;
z-index: 0;
}
.lonking-watermark--compact {
font-size: clamp(48px, 9vw, 120px);
}
/* Variante logo: isotipo real de Lonking en vez de texto, anclado
arriba del contenedor (no centrado verticalmente como el texto) y un
poco más visible por el detalle fino del trazo. */
.lonking-watermark--logo {
align-items: flex-start;
padding-top: 0;
margin-top: -14px;
opacity: 1;
}
.lonking-watermark--logo img {
display: block;
width: clamp(140px, 16vw, 220px);
height: auto;
}
/* ---------- Botones ---------- */
.lonking-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 22px;
border-radius: var(--aml-radius-sm);
border: 2px solid transparent;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
/* Azul: para usar sobre superficies claras/amarillas donde el amarillo
no daría suficiente contraste (hero, header). */
.lonking-btn--primary {
background-color: var(--aml-blue);
color: var(--aml-white);
border-color: var(--aml-blue);
}
.lonking-btn--primary:hover {
background-color: var(--aml-blue-dark);
border-color: var(--aml-blue-dark);
}
/* Amarillo: para usar sobre superficies blancas (header, tarjetas). */
.lonking-btn--accent {
background-color: var(--aml-yellow);
color: var(--aml-blue-dark);
border-color: var(--aml-yellow);
}
.lonking-btn--accent:hover {
background-color: var(--aml-yellow-dark);
border-color: var(--aml-yellow-dark);
}
/* Discreto, para el CTA secundario sobre el hero (fondo oscuro/imagen). */
.lonking-btn--ghost {
background-color: transparent;
color: var(--aml-white);
border-color: rgba(255, 255, 255, 0.6);
}
.lonking-btn--ghost:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: var(--aml-white);
}
.lonking-btn--outline {
background-color: transparent;
color: var(--aml-gray);
border-color: #D0D5DD;
}
.lonking-btn[disabled] {
cursor: not-allowed;
opacity: 0.7;
}
/* Negro: acción principal de mayor jerarquía (tarjetas de equipo,
envío del formulario de cotización) — deliberadamente distinto del
azul, para que destaque como "la" acción sobre el resto de botones. */
.lonking-btn--dark {
background-color: #111111;
color: var(--aml-white);
border-color: #111111;
}
.lonking-btn--dark:hover {
background-color: #2A2A2A;
border-color: #2A2A2A;
}
/* ---------- Encabezado ---------- */
.lonking-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--aml-yellow);
background-image: linear-gradient(180deg, #FFD451 0%, #FFC72C 100%);
box-shadow: 0 2px 10px rgba(22, 22, 22, 0.12);
}
.lonking-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 12px;
padding-bottom: 12px;
}
.lonking-header__brand {
display: flex;
align-items: center;
min-width: 0;
}
.lonking-header__logo-link {
display: flex;
align-items: center;
}
/* +40% aprox. sobre el alto anterior (32px), para dar más presencia
de marca al logo Lonking en el header. */
.lonking-header__logo-image {
height: 45px;
width: auto;
}
.lonking-header__nav {
display: flex;
align-items: center;
gap: 20px;
}
.lonking-header__navlink {
font-size: 15px;
font-weight: 700;
color: var(--aml-black);
padding: 8px 4px;
}
.lonking-header__navlink:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Botón hamburguesa: oculto en escritorio (el nav ya es visible),
visible únicamente en móvil. Mejora progresiva: sin JavaScript, el
nav nunca se oculta (la regla de colapso vive dentro de
.lonking-page.is-menu-enhanced, clase que solo añade lonking.js), así
que la navegación esencial sigue disponible si el script falla. */
.lonking-header__menu-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: var(--aml-radius-sm);
background-color: transparent;
flex: 0 0 auto;
}
.lonking-header__menu-toggle:hover {
background-color: rgba(22, 22, 22, 0.08);
}
.lonking-header__menu-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: var(--aml-black);
}
/* ---------- Hero: banner slider a pantalla completa ---------- */
.lonking-hero {
position: relative;
overflow: hidden;
height: clamp(560px, 76vh, 860px);
background-color: var(--aml-blue-dark);
}
.lonking-hero__track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.lonking-hero__track {
transition: none;
}
}
.lonking-hero__slide {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
}
.lonking-hero__media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
}
/* object-position es configurable por diapositiva mediante la variable
--lonking-hero-focal en el propio ![]()
. */
.lonking-hero__media-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--lonking-hero-focal, center);
}
/* Overlay sutil (no un degradado lateral intenso, ya que el contenido
ahora va centrado): oscurece ligeramente arriba y abajo, casi
transparente en el centro, solo lo necesario para el contraste del
texto sobre cualquier fotografía. */
.lonking-hero__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(7, 56, 117, 0.45) 0%,
rgba(7, 56, 117, 0.18) 35%,
rgba(7, 56, 117, 0.15) 65%,
rgba(7, 56, 117, 0.5) 100%
);
}
.lonking-hero__content {
position: relative;
z-index: 2;
height: 100%;
max-width: var(--aml-max-width);
width: 100%;
margin: 0 auto;
}
/* El título y los botones se anclan a alturas independientes (42% y
~74% del banner) en vez de agruparse como un único bloque
centrado, para dejar más aire entre ambos — ver .lonking-hero__title
y .lonking-hero__actions más abajo. */
.lonking-hero__copy {
position: absolute;
inset: 0;
}
/* .lonking-page antepuesto: la regla base ".lonking-page h1" ya tiene
especificidad (0,1,1) por combinar clase + tipo; una sola clase propia
(0,1,0) perdería la cascada y el color quedaría en azul oscuro sobre
fondo oscuro (invisible). */
.lonking-page .lonking-hero__title {
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
max-width: 720px;
padding: 0 24px;
text-align: center;
text-transform: uppercase;
font-weight: 800;
font-size: clamp(30px, 4.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--aml-white);
overflow-wrap: anywhere;
}
/* Fuera de .lonking-hero__track a propósito (ver comentario en el markup):
una sola instancia superpuesta sobre la diapositiva activa, igual que
.lonking-hero__arrow / __dots / __toggle más abajo — por eso comparte
su mismo z-index: 3, para quedar por encima de .lonking-hero__overlay
(z-index: 1) y no volverse inclicable. */
/* Anclado por bottom (no top + translate vertical) a propósito: así queda
a una distancia fija y predecible del borde inferior del banner sin
importar la altura del bloque (una fila en escritorio, dos apiladas en
móvil) ni la altura del propio .lonking-hero — 60px deja un espacio
claro sobre .lonking-hero__dots (bottom: 20px) sin volver a pegarse. */
.lonking-hero__actions {
position: absolute;
left: 50%;
bottom: 60px;
z-index: 3;
transform: translateX(-50%);
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 0 24px;
}
.lonking-hero__actions .lonking-btn {
padding: 10px 20px;
font-size: 14px;
}
/* Flechas circulares: ocultas por defecto vía [hidden] en el markup;
lonking.js solo las revela cuando existen 2+ diapositivas. */
.lonking-hero__arrow {
position: absolute;
top: 50%;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-top: -22px;
border: none;
border-radius: 50%;
background-color: rgba(7, 56, 117, 0.45);
color: var(--aml-white);
transition: background-color 0.15s ease;
}
.lonking-hero__arrow:hover {
background-color: rgba(7, 56, 117, 0.7);
}
.lonking-hero__arrow--prev {
left: 16px;
}
.lonking-hero__arrow--next {
right: 16px;
}
/* Indicadores: ocultos por defecto vía [hidden]; mismo criterio que las
flechas. */
.lonking-hero__dots {
position: absolute;
left: 50%;
bottom: 20px;
z-index: 3;
display: flex;
gap: 8px;
transform: translateX(-50%);
}
.lonking-hero__dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
}
.lonking-hero__dot.is-active {
background-color: var(--aml-yellow);
}
.lonking-hero__toggle {
position: absolute;
right: 20px;
bottom: 16px;
z-index: 3;
min-height: 36px;
padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: var(--aml-radius-sm);
background-color: rgba(7, 56, 117, 0.72);
color: var(--aml-white);
font-size: 12px;
font-weight: 700;
line-height: 1;
transition: background-color 0.15s ease;
}
.lonking-hero__toggle:hover {
background-color: var(--aml-blue-dark);
}
/* [hidden] tiene la misma especificidad que .lonking-hero__arrow / __dots
(ambas 0,1,0); esta regla debe ir después de ambas en la cascada para
ganar el empate — si no, el "display" explícito de arriba gana sobre
el [hidden] del navegador y los controles se verían aunque el
atributo esté presente (una sola diapositiva). */
.lonking-hero__arrow[hidden],
.lonking-hero__dots[hidden],
.lonking-hero__toggle[hidden] {
display: none;
}
@media (max-width: 640px) {
.lonking-hero {
height: clamp(460px, 66vh, 680px);
}
.lonking-page .lonking-hero__title {
padding: 0 20px;
}
.lonking-hero__actions {
bottom: 52px;
padding: 0 20px;
}
.lonking-hero__actions .lonking-btn {
width: 100%;
}
.lonking-hero__arrow {
width: 38px;
height: 38px;
margin-top: -19px;
}
.lonking-hero__toggle {
right: 12px;
bottom: 12px;
}
}
/* ---------- Sección editorial: marca global + mapa ---------- */
/* Mismo fondo amarillo rayado que .lonking-connect (sin repetir el
comentario aquí, ver esa regla más abajo): al ir justo debajo del
catálogo y compartir el mismo tratamiento, ambas secciones se leen
como una sola franja amarilla continua en vez de dos bloques
separados. */
.lonking-brand {
background-color: var(--aml-yellow);
background-image: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0,
rgba(255, 255, 255, 0.05) 2px,
transparent 2px,
transparent 26px
);
padding: 52px 0 112px;
}
.lonking-brand__layout {
display: grid;
grid-template-columns: 4fr 7fr;
gap: 40px;
align-items: center;
max-width: 1040px;
margin: 0 auto;
}
.lonking-brand__intro {
display: flex;
flex-direction: column;
gap: 12px;
}
.lonking-brand__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
font-weight: 700;
color: var(--aml-blue-dark);
}
.lonking-brand__text {
font-size: 16px;
color: var(--aml-black);
}
.lonking-brand__subtext {
font-size: 14px;
color: var(--aml-black);
}
/* Mapa mundial: imagen real (fronteras de países vía textura de
puntos), con fondo transparente — se apoya directo sobre el amarillo
rayado de la sección, sin panel/tarjeta de por medio. Tamaño
reducido (no ocupa toda la columna) y centrado, conservando su
proporción original. */
.lonking-brand__map .lonking-brand__map-image {
display: block;
width: 100%;
max-width: 460px;
height: auto;
margin: 0 auto;
}
@media (max-width: 900px) {
.lonking-brand__layout {
grid-template-columns: 1fr;
gap: 32px;
}
.lonking-brand__map {
max-width: 560px;
margin: 0 auto;
}
}
/* ---------- Frase animada: transición breve hacia el catálogo ---------- */
.lonking-tagline {
background-color: var(--aml-white);
padding: 32px 0;
text-align: center;
}
.lonking-tagline__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.lonking-page .lonking-tagline__headline {
font-size: clamp(22px, 3.4vw, 40px);
font-weight: 800;
line-height: 1.2;
color: var(--aml-black);
white-space: nowrap;
}
/* En móvil angosto, "nowrap" desbordaría horizontalmente: se permite
volver a dos líneas ahí, con una escala de fuente propia. */
@media (max-width: 480px) {
.lonking-page .lonking-tagline__headline {
white-space: normal;
font-size: clamp(22px, 6.5vw, 30px);
}
}
/* Reveal solo si JS está activo (lonking.js añade .is-reveal-enhanced
a .lonking-page antes de observar): el titular arranca oculto y se
revela al entrar en el viewport. Sin JavaScript, o si el elemento
nunca llega a observarse, permanece visible desde el primer render —
nunca depende del script para poder leerse. Slide lateral rápido
(~300ms) en vez de fundido: entra desde la izquierda con easing
rápido, sensación industrial, sin fundido lento. */
.lonking-page.is-reveal-enhanced [data-lonking-reveal] {
opacity: 0;
transform: translateX(-32px);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lonking-page.is-reveal-enhanced [data-lonking-reveal].is-visible {
opacity: 1;
transform: translateX(0);
}
/* Rotador "Mayor respaldo / potencia / eficiencia / confianza": estado
base (sin JS / prefers-reduced-motion) solo el primer bloque
(".is-current", sin [hidden]) se renderiza, en flujo normal. */
.lonking-tagline__rotator {
display: inline-block;
}
.lonking-tagline__plate {
display: inline-block;
background-color: var(--aml-yellow);
color: var(--aml-blue-dark);
text-transform: uppercase;
font-weight: 800;
font-size: clamp(13px, 1.6vw, 16px);
letter-spacing: 0.04em;
padding: 8px 20px;
border-radius: var(--aml-radius-sm);
white-space: nowrap;
}
/* Estado mejorado (JS activo, sin prefers-reduced-motion): los 4
bloques comparten la misma celda de grid (el ancho del contenedor
se reserva para el más ancho y no cambia mientras rota) y cada uno
entra con un desplazamiento vertical rápido, tipo slide/slip —
nada de fundidos lentos. */
.lonking-tagline__rotator.is-enhanced {
display: inline-grid;
overflow: hidden;
border-radius: var(--aml-radius-sm);
}
.lonking-tagline__rotator.is-enhanced .lonking-tagline__plate {
grid-row: 1;
grid-column: 1;
opacity: 0;
transform: translateY(65%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
pointer-events: none;
}
.lonking-tagline__rotator.is-enhanced .lonking-tagline__plate.is-current {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.lonking-tagline__rotator.is-enhanced .lonking-tagline__plate {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.lonking-page.is-reveal-enhanced [data-lonking-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
/* ---------- Respaldo Asian Motor (editorial, fondo navy continuo) ---------- */
.lonking-trust {
background-color: var(--aml-blue-dark);
padding: 72px 0;
}
.lonking-trust__layout {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 56px;
align-items: center;
}
.lonking-trust__intro {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 420px;
}
/* Recurso editorial corto: refuerza la presencia de la columna sin
añadir cajas ni decoraciones adicionales. */
.lonking-trust__accent {
display: block;
width: 44px;
height: 4px;
border-radius: 2px;
background-color: var(--aml-yellow);
}
.lonking-trust__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
font-weight: 700;
color: var(--aml-yellow);
}
.lonking-page .lonking-trust__title {
color: var(--aml-white);
font-size: clamp(30px, 3.6vw, 42px);
font-weight: 800;
line-height: 1.15;
margin-top: 10px;
}
.lonking-trust__text {
font-size: 16px;
color: var(--aml-blue-light);
margin-top: 2px;
}
/* Cuadrícula 2x2 sin tarjetas ni fondos individuales: la separación es
solo mediante bordes finos (cruz) con opacidad baja. */
.lonking-trust__grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.lonking-trust__item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 22px 26px;
}
.lonking-trust__item:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.18);
}
.lonking-trust__item:nth-child(-n+2) {
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.lonking-trust__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-top: 3px;
color: var(--aml-yellow);
}
.lonking-trust__item-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.lonking-trust__label {
font-weight: 700;
font-size: 15px;
color: var(--aml-white);
text-align: left;
}
.lonking-trust__microtext {
font-size: 13px;
line-height: 1.4;
color: var(--aml-blue-light);
text-align: left;
}
/* ---------- Franja exterior del catálogo ---------- */
/* Amarillo Lonking con rayas diagonales sutiles (10% blanco) a modo de
degradé ligero. El contenedor técnico interior (.lonking-catalog)
queda en blanco/gris muy claro, como una tarjeta flotando encima. */
.lonking-connect {
background-color: var(--aml-yellow);
background-image: repeating-linear-gradient(
135deg,
rgba(255, 255, 255, 0.05) 0,
rgba(255, 255, 255, 0.05) 2px,
transparent 2px,
transparent 26px
);
padding: 56px 0;
}
/* ---------- Catálogo ---------- */
.lonking-catalog {
position: relative;
overflow: hidden;
background-color: var(--aml-gray-light);
border-radius: 28px;
box-shadow: 0 24px 56px rgba(7, 56, 117, 0.26);
padding: 44px 24px 64px;
}
.lonking-catalog__heading {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto 36px;
padding-top: 64px;
}
/* Placa amarilla "EQUIPOS LONKING": badge compacto, sin inclinar. */
.lonking-catalog__heading .lonking-catalog__subtitle {
font-size: 16px;
color: var(--aml-gray);
max-width: 56ch;
margin: 20px auto 0;
text-align: center;
}
/* Cuatro categorías como un mismo componente: columnas de igual ancho,
cada una con su propio borde (no solo la activa se ve "con forma"),
para que ningún elemento parezca un botón aislado más grande que el
resto. */
.lonking-catalog__tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 36px;
}
.lonking-catalog__tab {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
text-align: center;
padding: 14px 16px;
border-radius: var(--aml-radius-sm);
border: 1px solid #D0D5DD;
font-size: 14px;
font-weight: 700;
color: var(--aml-blue-dark);
background-color: var(--aml-white);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lonking-catalog__tab:hover {
background-color: var(--aml-yellow);
border-color: var(--aml-yellow);
color: var(--aml-blue-dark);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(22, 22, 22, 0.16);
}
.lonking-catalog__tab.is-active,
.lonking-catalog__tab[aria-selected="true"] {
color: var(--aml-white);
background-color: var(--aml-blue);
border-color: var(--aml-blue);
box-shadow: 0 2px 6px rgba(11, 77, 162, 0.24);
}
.lonking-catalog__tab.is-active:hover,
.lonking-catalog__tab[aria-selected="true"]:hover {
background-color: var(--aml-yellow);
border-color: var(--aml-yellow);
color: var(--aml-blue-dark);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(22, 22, 22, 0.16);
}
.lonking-catalog__panel[hidden] {
display: none;
}
.lonking-catalog__panel + .lonking-catalog__panel {
margin-top: 40px;
}
/* Sin JS: cada categoría es una sección propia, con su título visible, apilada.
Con JS (.is-enhanced): solo el panel activo queda visible, controlado por hidden. */
.lonking-catalog__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.lonking-catalog__grid--split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
.lonking-catalog__grid--split {
grid-template-columns: 1fr;
}
}
/* ---------- Tarjeta de equipo ---------- */
.lonking-card {
background-color: var(--aml-white);
border-radius: var(--aml-radius-lg);
box-shadow: 0 10px 26px rgba(7, 56, 117, 0.10);
overflow: hidden;
}
.lonking-card--horizontal {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1024px) {
.lonking-card--horizontal {
grid-template-columns: 1fr;
}
}
.lonking-card--vertical {
display: flex;
flex-direction: column;
}
/* Escenario de la maquinaria. Fondo técnico sutil mientras no hay foto
real; overflow visible (no "hidden") para que la futura imagen pueda
sobresalir ligeramente del escenario sin salir de la tarjeta, que sí
recorta en su propio borde exterior (.lonking-card { overflow:hidden }). */
.lonking-card__media {
position: relative;
overflow: visible;
background-color: var(--aml-gray-light);
background-image:
repeating-linear-gradient(0deg, rgba(11, 77, 162, 0.05) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(11, 77, 162, 0.05) 0 1px, transparent 1px 28px);
display: flex;
align-items: center;
justify-content: center;
padding: 28px;
min-height: 160px;
}
.lonking-card--vertical .lonking-card__media {
aspect-ratio: 16 / 10;
}
/* Sombra de suelo bajo la maquinaria (solo para el placeholder sin foto:
una fotografía real ya trae su propio piso/sombra). */
.lonking-card__media::after {
content: "";
position: absolute;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
width: 55%;
height: 14px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(7, 56, 117, 0.16), transparent 72%);
}
.lonking-card__media-label {
position: relative;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--aml-gray);
text-align: center;
}
/* Fotografía real de producto: cubre la caja de lado a lado (sin la
cuadrícula técnica del placeholder ni la sombra falsa, la foto ya
trae ambiente y piso propios). Las fotos son cuadradas, y aspect-ratio
fija su alto en proporción al ancho de la columna en vez de heredar
el alto de la fila. */
.lonking-card__media--photo {
padding: 0;
background-image: none;
min-height: 280px;
aspect-ratio: 1 / 1;
}
/* .lonking-card--vertical .lonking-card__media (16/10, más arriba) es la
proporción del placeholder sin foto; con foto real, esta regla —misma
especificidad, declarada después— la sustituye por el cuadrado real. */
.lonking-card--vertical .lonking-card__media--photo {
aspect-ratio: 1 / 1;
}
.lonking-card__media--photo::after {
content: none;
}
/* En la variante horizontal, .lonking-card__media es un item de grid
(columna imagen | columna texto) que por defecto se estira (stretch)
al alto de la fila, ignorando su aspect-ratio cuando el texto vecino
es más alto o más bajo. align-self: center lo saca de ese estirado
para que la imagen siempre muestre la misma proporción cuadrada sin
importar cuánto texto tenga cada ficha (y si el texto es más alto,
el espacio sobrante queda repartido arriba/abajo en vez de todo debajo). */
.lonking-card--horizontal .lonking-card__media--photo {
align-self: center;
}
.lonking-card__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.lonking-card__body {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
}
/* Etiqueta amarilla de categoría: badge compacto, ancho ajustado al
contenido, sin inclinar. */
.lonking-card__category {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--aml-gray);
}
.lonking-page .lonking-card__model {
font-size: clamp(30px, 3vw, 44px);
font-weight: 800;
line-height: 1.05;
color: var(--aml-black);
}
/* Reserva ~2 líneas en escritorio (min-height, no line-clamp) para que
CDM6225 y CDM6336 mantengan alineadas sus especificaciones y botones
aunque el texto varíe ligeramente. El texto nunca se trunca: si una
descripción necesita más de 2 líneas, la tarjeta crece (min-height es
un piso, no un techo), y el grid de la categoría estira ambas
tarjetas de la fila a la misma altura. */
.lonking-card__description {
font-size: 14px;
line-height: 1.5;
color: var(--aml-gray);
min-height: 3em;
}
/* Insignia técnica del motor: texto plano, no interactivo, no debe
leerse como botón. align-self la ajusta a su propio contenido en
vez de estirarse al ancho de .lonking-card__body (flex column). */
.lonking-card__engine {
align-self: flex-start;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--aml-blue-dark);
background-color: var(--aml-blue-light);
padding: 4px 10px;
border-radius: 6px;
}
/* Cruz 2x2: el "gap" de 1px actúa como línea divisoria, sin necesidad de
bordes individuales por celda. Divisor algo más visible que un simple
fondo gris claro (gris con opacidad, dentro de la paleta aprobada). */
.lonking-card__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background-color: rgba(102, 112, 133, 0.22);
border: 1px solid rgba(102, 112, 133, 0.22);
border-radius: 10px;
overflow: hidden;
}
@media (max-width: 380px) {
.lonking-card__specs {
grid-template-columns: 1fr;
}
}
.lonking-card__spec {
background-color: var(--aml-white);
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lonking-card__spec dt {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--aml-blue);
}
.lonking-card__spec dd {
font-size: 19px;
font-weight: 800;
color: var(--aml-black);
}
/* Jerarquía clara entre las dos acciones: "Solicitar cotización" es un
botón grande que domina el espacio disponible; "Ver ficha técnica"
es un enlace de texto discreto al lado (o debajo en móvil), nunca un
segundo botón del mismo peso. */
.lonking-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin-top: auto;
}
.lonking-card__cta {
flex: 1 1 auto;
min-height: 54px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 4px 12px rgba(11, 77, 162, 0.18);
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lonking-card__cta:hover {
background-color: var(--aml-yellow);
border-color: var(--aml-yellow);
color: var(--aml-blue-dark);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(239, 182, 0, 0.35);
}
.lonking-card__link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: var(--aml-blue-dark);
border-bottom: 1px solid var(--aml-blue-dark);
padding-bottom: 1px;
white-space: nowrap;
}
.lonking-card__link:hover {
color: var(--aml-blue);
border-color: var(--aml-blue);
}
/* Cuando no existe la ficha todavía: texto pequeño y atenuado, sin
apariencia de enlace ni de acción disponible. */
.lonking-card__link--muted {
color: var(--aml-gray);
font-weight: 600;
font-size: 13px;
border-bottom: none;
}
/* ---------- 07. Asesoría y cotización ---------- */
/* Wash amarillo muy sutil (mismo rayado que catálogo/marca, a menor
opacidad) para que la transición desde el azul de "Respaldo Asian
Motor" no caiga en un blanco seco, sin restarle legibilidad al
formulario. */
.lonking-quote {
background-color: #FFFCF4;
background-image: repeating-linear-gradient(
135deg,
rgba(255, 199, 44, 0.06) 0,
rgba(255, 199, 44, 0.06) 2px,
transparent 2px,
transparent 26px
);
padding: 104px 0;
}
.lonking-quote__layout {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 56px;
align-items: start;
}
.lonking-quote__intro {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 420px;
}
.lonking-quote__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
font-weight: 700;
color: var(--aml-blue);
}
.lonking-page .lonking-quote__title {
font-size: clamp(28px, 3.2vw, 38px);
font-weight: 800;
line-height: 1.25;
text-wrap: balance;
}
.lonking-quote__text {
font-size: 16px;
color: var(--aml-gray);
margin-top: 2px;
}
.lonking-quote__points {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.lonking-quote__point {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: var(--aml-black);
}
.lonking-quote__point svg {
flex: 0 0 auto;
margin-top: 1px;
color: var(--aml-blue);
}
.lonking-quote__panel {
display: flex;
flex-direction: column;
}
.lonking-quote__form {
background-color: var(--aml-gray-light);
border: 1px solid #D0D5DD;
border-radius: var(--aml-radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Etiqueta compacta: solo aparece cuando hay un modelo seleccionado
(por defecto [hidden] en el markup — no se muestra "Por seleccionar"
cuando todavía no hay selección). Una sola línea, no una franja. */
.lonking-quote__summary {
align-self: flex-start;
font-size: 14px;
color: var(--aml-blue-dark);
background-color: var(--aml-gray-light);
border-left: 3px solid var(--aml-yellow);
border-radius: 6px;
padding: 8px 14px;
}
.lonking-quote__summary strong {
font-weight: 700;
}
.lonking-quote__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.lonking-quote__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.lonking-quote__field--full {
grid-column: 1 / -1;
}
.lonking-quote__field label {
font-size: 13px;
font-weight: 700;
color: var(--aml-blue-dark);
}
.lonking-quote__field input,
.lonking-quote__field select,
.lonking-quote__field textarea {
font-family: inherit;
font-size: 15px;
color: var(--aml-black);
background-color: var(--aml-white);
border: 1px solid #E2E5EA;
border-radius: var(--aml-radius-sm);
padding: 10px 14px;
}
.lonking-quote__field textarea {
resize: vertical;
min-height: 80px;
}
.lonking-quote__field [aria-invalid='true'],
.lonking-quote__consent input[aria-invalid='true'] {
border-color: var(--aml-blue-dark);
box-shadow: 0 0 0 2px rgba(255, 199, 44, 0.5);
}
.lonking-quote__consent {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--aml-gray);
}
.lonking-quote__consent input {
margin-top: 3px;
flex: 0 0 auto;
}
.lonking-quote__submit {
width: 100%;
min-height: 56px;
font-weight: 700;
}
.lonking-quote__feedback {
font-size: 14px;
font-weight: 600;
color: var(--aml-blue-dark);
background-color: var(--aml-gray-light);
border-left: 4px solid var(--aml-yellow);
border-radius: var(--aml-radius-sm);
padding: 14px 16px;
}
.lonking-quote__feedback.is-error {
color: var(--aml-blue-dark);
background-color: rgba(255, 199, 44, 0.18);
border-left-color: var(--aml-blue-dark);
}
/* ---------- 08. Soporte local (taller y almacén) ---------- */
/* Reemplaza el bloque anterior de 4 beneficios repetidos (ya cubiertos
en "Respaldo Asian Motor"): ahora es un lugar físico tangible, con
mapa + fotografía preparados para contenido real. grid-template-areas
define el orden de escritorio (intro y visuales arriba, datos abajo
a la izquierda); en móvil se elimina y el DOM ya sigue el orden
correcto (intro → visuales → datos), sin necesidad de reordenar nada. */
.lonking-workshop {
background-color: var(--aml-gray-light);
padding: 64px 0;
}
.lonking-workshop__layout {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 32px 56px;
align-items: center;
}
.lonking-workshop__intro {
display: flex;
flex-direction: column;
gap: 14px;
}
.lonking-workshop__accent {
display: block;
width: 44px;
height: 4px;
border-radius: 2px;
background-color: var(--aml-yellow);
}
.lonking-workshop__eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 13px;
font-weight: 700;
color: var(--aml-blue);
}
.lonking-page .lonking-workshop__title {
font-size: clamp(26px, 3vw, 34px);
font-weight: 800;
line-height: 1.2;
margin-top: 4px;
}
.lonking-workshop__text {
font-size: 15px;
color: var(--aml-gray);
}
.lonking-workshop__visuals {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Placeholders: proporción fija (evita saltos de layout cuando se
inserten la fotografía real o el iframe del mapa), fondo técnico
discreto, etiqueta centrada indicando que es contenido provisional. */
.lonking-workshop__map,
.lonking-workshop__photo {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--aml-radius-sm);
background-color: var(--aml-white);
background-image:
repeating-linear-gradient(0deg, rgba(11, 77, 162, 0.06) 0 1px, transparent 1px 24px),
repeating-linear-gradient(90deg, rgba(11, 77, 162, 0.06) 0 1px, transparent 1px 24px);
border: 1px dashed #D0D5DD;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.lonking-workshop__placeholder-label {
font-size: 13px;
font-weight: 600;
color: var(--aml-gray);
}
/* Una vez insertado el iframe real (--filled), se quita el look de
placeholder (borde punteado, trama) y se recorta al mismo radio —
el iframe no respeta border-radius por sí solo, por eso overflow. */
.lonking-workshop__map--filled {
overflow: hidden;
background-image: none;
border-style: solid;
border-color: var(--aml-gray-light);
}
.lonking-workshop__map-iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Misma idea que .lonking-workshop__map--filled: una vez subida la
fotografía real del taller/almacén, se quita el look de placeholder. */
.lonking-workshop__photo--filled {
background-image: none;
border-style: solid;
border-color: var(--aml-gray-light);
}
.lonking-workshop__photo--filled img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 900px) {
.lonking-workshop__layout {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.lonking-workshop {
padding: 48px 0;
}
.lonking-workshop__visuals {
grid-template-columns: 1fr;
}
}
/* ---------- 09. Preguntas frecuentes ---------- */
.lonking-faq {
background-color: var(--aml-white);
padding: 44px 0;
}
/* .lonking-faq__inner comparte elemento con .lonking-container (que ya
centra 1280px con padding 24px): no se toca su max-width/margin aquí
-eso rompería el centrado de toda la sección-, sino que el límite de
720px se aplica por separado al encabezado y a la lista, centrados
dentro de ese mismo contenedor ya centrado, para que ambos
compartan un único eje. */
.lonking-faq__heading {
max-width: 720px;
margin: 0 auto 20px;
text-align: center;
}
.lonking-faq__list {
max-width: 720px;
margin: 0 auto;
}
.lonking-faq__subtitle {
font-size: 16px;
color: var(--aml-gray);
margin: 14px auto 0;
}
.lonking-faq__list {
display: flex;
flex-direction: column;
}
.lonking-faq__item {
border-bottom: 1px solid #D0D5DD;
transition: background-color 0.15s ease;
}
.lonking-faq__item:first-child {
border-top: 1px solid #D0D5DD;
}
/* Contraste al abrir: tinte de fondo muy sutil en toda la fila, no solo
en el símbolo, para que el estado abierto se note de un vistazo. */
.lonking-faq__item[open] {
background-color: var(--aml-gray-light);
}
.lonking-faq__question {
list-style: none;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 32px 18px 4px;
font-size: 16px;
font-weight: 700;
color: var(--aml-blue-dark);
cursor: pointer;
}
.lonking-faq__item[open] .lonking-faq__question {
color: var(--aml-blue);
}
.lonking-faq__question::-webkit-details-marker {
display: none;
}
/* Indicador de apertura: "+" que rota a "×" cuando el está
abierto ([open]), sin depender de JavaScript. */
.lonking-faq__question::after {
content: "+";
position: absolute;
right: 4px;
font-size: 22px;
font-weight: 700;
color: var(--aml-blue);
transition: transform 0.2s ease;
flex: 0 0 auto;
}
.lonking-faq__item[open] .lonking-faq__question::after {
transform: rotate(45deg);
}
.lonking-faq__answer {
padding: 0 32px 18px 4px;
font-size: 15px;
line-height: 1.6;
color: var(--aml-gray);
}
.lonking-faq__answer a {
color: var(--aml-blue);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- 10. Footer ---------- */
/* Blanco y compacto (referencia: footer de Volvo Perú), en dos columnas
equilibradas: marca + respaldo a la izquierda, social/copyright/legal
a la derecha. Asian Motor es la marca protagonista (logo grande);
Corporación Withmory queda como respaldo secundario (texto pequeño,
sin el mismo peso visual). */
.lonking-footer {
background-color: var(--aml-white);
border-top: 1px solid #E5E7EB;
padding: 32px 0;
}
.lonking-footer__bar {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 24px 48px;
}
.lonking-footer__brand {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Logo junto al bloque de texto (Dealer oficial + Withmory),
alineados verticalmente al centro. */
.lonking-footer__brand-row {
display: flex;
align-items: center;
gap: 14px;
}
.lonking-footer__logo {
width: 140px;
height: auto;
}
.lonking-footer__brand-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.lonking-footer__brand-tagline {
font-size: 15px;
font-weight: 700;
color: var(--aml-black);
}
/* Withmory: respaldo secundario, justo debajo de "Dealer oficial",
muy pequeño y sin negrita para no competir en peso visual. Gris
oscuro (no azul). */
.lonking-footer__brand-sub {
font-size: 10px;
font-weight: 500;
color: #4B5563;
}
.lonking-footer__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.lonking-footer__social {
display: flex;
align-items: center;
gap: 10px;
}
.lonking-footer__social-label {
font-size: 13px;
font-weight: 700;
color: var(--aml-gray);
}
/* Cada ícono es un real solo cuando su URL está configurada en
Lonking → Contenido del sitio → Footer (ver landing-lonking.php) — sin
cuenta confirmada, el ícono directamente no se imprime, nunca enlaza a
un perfil inventado. */
.lonking-footer__social-icons {
display: flex;
align-items: center;
gap: 8px;
color: var(--aml-gray);
}
.lonking-footer__social-icons a {
display: inline-flex;
color: inherit;
text-decoration: none;
transition: color 150ms ease;
}
.lonking-footer__social-icons a:hover,
.lonking-footer__social-icons a:focus-visible {
color: var(--aml-blue);
}
.lonking-footer__copy {
font-size: 13px;
color: var(--aml-gray);
}
.lonking-footer__legal {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
font-size: 13px;
color: var(--aml-gray);
}
@media (max-width: 640px) {
.lonking-footer__bar {
flex-direction: column;
align-items: flex-start;
}
.lonking-footer__logo {
width: 120px;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 640px) {
.lonking-header__logo-image {
height: 38px;
}
.lonking-container {
padding: 0 16px;
}
.lonking-trust {
padding: 48px 0;
}
.lonking-trust__item {
padding: 14px 16px;
}
.lonking-catalog {
padding: 36px 16px 48px;
}
.lonking-card__actions {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.lonking-card__cta {
width: 100%;
}
.lonking-card__description {
min-height: 0;
}
/* Barra de categorías: en vez de columnas de igual ancho (que en
móvil comprimirían demasiado el texto), vuelve a una fila con
scroll horizontal propio y botones de ancho consistente. */
.lonking-catalog__tabs {
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow-x: auto;
}
.lonking-catalog__tab {
flex: 0 0 auto;
min-width: 168px;
}
/* Menú compacto: el botón de tres barras se hace visible; el nav se
colapsa detrás de él solo si lonking.js añade .is-menu-enhanced
(mejora progresiva). Sin JavaScript, el nav sigue en una sola fila
y sigue siendo utilizable, solo más apretado. */
.lonking-header__menu-toggle {
display: flex;
}
}
@media (max-width: 640px) {
.lonking-page.is-menu-enhanced .lonking-header__nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 4px;
padding: 8px 20px 20px;
background-color: var(--aml-yellow);
box-shadow: 0 10px 18px rgba(22, 22, 22, 0.14);
}
.lonking-page.is-menu-enhanced.is-menu-open .lonking-header__nav {
display: flex;
}
.lonking-page.is-menu-enhanced .lonking-header__navlink {
padding: 12px 4px;
border-bottom: 1px solid rgba(22, 22, 22, 0.1);
}
.lonking-page.is-menu-enhanced .lonking-header__cta {
margin-top: 8px;
}
}
/* La composición editorial de respaldo (40/60) necesita más ancho que el
resto de breakpoints del sitio; se apila por separado a partir de 900px. */
@media (max-width: 900px) {
.lonking-trust__layout {
grid-template-columns: 1fr;
gap: 40px;
}
.lonking-trust__intro {
max-width: 100%;
}
}
@media (max-width: 480px) {
.lonking-trust__grid {
grid-template-columns: 1fr;
}
.lonking-trust__item:nth-child(odd) {
border-right: none;
}
.lonking-trust__item:nth-child(-n+2) {
border-bottom: none;
}
.lonking-trust__item:not(:last-child) {
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
}
/* Cotización: misma composición 40/60 que el respaldo Asian Motor, con
el mismo punto de quiebre (900px): el título entra primero, el
formulario después. (El "Soporte local" tiene su propio breakpoint
junto a su bloque de estilos, ya que usa grid-template-areas.) */
@media (max-width: 900px) {
.lonking-quote__layout {
grid-template-columns: 1fr;
gap: 40px;
}
.lonking-quote__intro {
max-width: 100%;
}
}
@media (max-width: 640px) {
.lonking-quote {
padding: 48px 0;
}
.lonking-quote__grid {
grid-template-columns: 1fr;
}
.lonking-quote__form {
padding: 20px;
}
.lonking-faq {
padding: 48px 0;
}
.lonking-faq__question {
padding-right: 28px;
}
.lonking-footer {
padding: 40px 0 20px;
}
}
/* Botón flotante de WhatsApp — mismo patrón fijo abajo-a-la-derecha que
usa el sitio principal de Asian Motor (asianmotor-minimal), en verde
WhatsApp estándar para que se reconozca de inmediato. */
.aml-whatsapp-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 60;
display: flex;
width: 52px;
height: 52px;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--aml-white) !important;
background: #25D366;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
transition: background-color 200ms ease;
}
.aml-whatsapp-float:hover,
.aml-whatsapp-float:focus-visible {
background: #1EBE5A;
color: var(--aml-white) !important;
}
@media (prefers-reduced-motion: reduce) {
.aml-whatsapp-float {
transition: none;
}
}