/*
ABACO Web 2.0 — Sistema visual (Header, Footer, Home)
Adaptado de la referencia aprobada: ABACO_Home_Desktop_V05.html
Namespace "abaco-" en todas las clases para evitar colisiones con las clases
genéricas de Motors/Bootstrap (.container, .nav, .btn, etc.).
*/

:root{
  --abaco-black:#19181b;
  --abaco-black2:#0e0e10;
  --abaco-red:#d71920;
  --abaco-red-dark:#a90f15;
  --abaco-yellow:#f5c400;
  --abaco-yellow2:#ffd83d;
  --abaco-white:#fff;
  --abaco-gray:#f3f3f1;
  --abaco-gray2:#d9d9d6;
  --abaco-text:#242428;
  --abaco-muted:#6e6e73;
  --abaco-shadow:0 18px 45px rgba(0,0,0,.16);
  --abaco-max:1220px;
}

/* Reset local, no toca el resto del sitio */
.abaco-page *{box-sizing:border-box}
.abaco-page{font-family:Arial,Helvetica,sans-serif;color:var(--abaco-text);background:#fff;-webkit-font-smoothing:antialiased}
.abaco-page a{text-decoration:none;color:inherit}
.abaco-page img{max-width:100%;display:block}
.abaco-container{width:min(var(--abaco-max),calc(100% - 40px));margin:auto}

/* ===== Top bar ===== */
.abaco-top{height:34px;background:var(--abaco-black2);color:#bbb;display:flex;align-items:center;font-size:12px;letter-spacing:.3px}
.abaco-top .abaco-container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px}
.abaco-top strong{color:#fff}
/* ABACO-WEB-011 (punto 19): teléfono/WhatsApp discretos en la barra superior. */
.abaco-top-contact{display:flex;align-items:center;gap:14px}
.abaco-top-contact a{color:#bbb;transition:.15s}
.abaco-top-contact a:hover{color:#fff}
/* ABACO-WEB-013 (punto 9): iconos de redes sociales en el Header, discretos
   (barra superior de utilidad, no en la fila del logo/nav/Precalifícate),
   para no quitarle protagonismo a la navegación principal. */
.abaco-top-social{display:flex;align-items:center;gap:10px}
.abaco-top-social a{display:flex;color:#bbb}
.abaco-top-social a:hover{color:var(--abaco-yellow)}
.abaco-top-social svg{width:14px;height:14px}

/* ===== Header ===== */
.abaco-header{background:var(--abaco-black);color:#fff;position:relative;z-index:200;border-bottom:1px solid #303034}
.abaco-header .abaco-container{height:82px;display:flex;align-items:center;gap:28px}
.abaco-logo{width:100px;height:60px;object-fit:contain;display:block;flex-shrink:0}
.abaco-nav{display:flex;align-items:center;gap:24px;flex:1;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.35px}
.abaco-nav>a{opacity:.88;position:relative;padding:32px 0}
.abaco-nav>a:hover{opacity:1;color:var(--abaco-yellow)}
.abaco-nav>a:after{content:"";position:absolute;left:0;right:100%;bottom:20px;height:2px;background:var(--abaco-red);transition:.25s}
.abaco-nav>a:hover:after{right:0}
.abaco-header-actions{display:flex;gap:9px;align-items:center}

.abaco-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:13px 18px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;transition:.2s;cursor:pointer;border:0}
.abaco-btn-red{background:var(--abaco-red);color:#fff!important;box-shadow:0 9px 24px rgba(215,25,32,.25)}
.abaco-btn-red:hover{background:#ef242c;transform:translateY(-1px)}
.abaco-btn-yellow{background:var(--abaco-yellow);color:#151515!important}
.abaco-btn-yellow:hover{background:var(--abaco-yellow2);transform:translateY(-1px)}
.abaco-btn-outline{border:1px solid rgba(255,255,255,.35);color:#fff!important;background:transparent}
.abaco-btn-outline:hover{border-color:#fff}
.abaco-btn-dark{background:var(--abaco-black);color:#fff!important}
.abaco-btn-dark:hover{background:#000}

/* ===== Mega menu ===== */
.abaco-nav-mega{position:static;height:100%;display:flex;align-items:center}
.abaco-nav-mega>.abaco-mega-trigger{display:flex;gap:6px;align-items:center;height:100%;padding:32px 0;color:inherit}
.abaco-mega-trigger span{font-size:13px;color:#aaa;transition:.2s;display:inline-block}
.abaco-nav-mega:hover .abaco-mega-trigger,.abaco-nav-mega.abaco-open .abaco-mega-trigger{color:var(--abaco-yellow)}
.abaco-nav-mega:hover .abaco-mega-trigger span,.abaco-nav-mega.abaco-open .abaco-mega-trigger span{transform:rotate(180deg);color:var(--abaco-yellow)}
.abaco-mega-menu{position:absolute;left:0;right:0;top:82px;background:#fff;color:var(--abaco-text);display:grid;grid-template-columns:1.15fr .85fr .85fr 1.15fr;gap:0;padding:30px max(20px,calc((100vw - 1220px)/2 + 20px));box-shadow:0 22px 45px rgba(0,0,0,.22);border-top:4px solid var(--abaco-red);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;pointer-events:none}
.abaco-nav-mega:hover .abaco-mega-menu,.abaco-nav-mega.abaco-open .abaco-mega-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.abaco-mega-col{padding:0 25px;border-right:1px solid #eee;display:flex;flex-direction:column;align-items:flex-start}
.abaco-mega-feature{padding-left:0}
.abaco-mega-eyebrow{font-size:9px;font-weight:900;letter-spacing:1.3px;color:var(--abaco-red);margin-bottom:9px}
.abaco-mega-feature h3{font-size:26px;line-height:1;text-transform:uppercase;margin:0 0 10px}
.abaco-mega-feature h3 b{color:var(--abaco-red)}
.abaco-mega-feature p{font-size:13px;color:var(--abaco-muted);line-height:1.55;max-width:270px;margin:0 0 16px}
.abaco-mega-title{text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:1px;margin:0 0 12px;color:#222}
.abaco-mega-col>a{font-size:12px!important;text-transform:none!important;padding:6px 0!important;opacity:1!important;color:#555!important;font-weight:700!important;display:block}
.abaco-mega-col>a:hover{color:var(--abaco-red)!important}
/* ABACO-WEB-011 (punto 1): el botón "Ver inventario" es también hijo directo
   de .abaco-mega-col, así que la regla genérica de arriba le pintaba el
   texto gris — se restaura el blanco solo para el botón del mega menú. */
.abaco-mega-col>a.abaco-btn{color:#fff!important;font-size:13px!important;text-transform:uppercase!important;padding:13px 18px!important}
.abaco-mega-col>a.abaco-btn:hover{color:#fff!important}
/* ABACO-WEB-016 (Objetivo 3): recurso real de ABACO_ASSETS_2026 en vez de
   fotografía externa de Unsplash. */
.abaco-mega-image{min-height:190px;margin-left:25px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.05)),url('../../../../uploads/2026/10/WhatsApp-Image-2026-09-30-at-12.07.12-4.jpeg') center/cover;display:flex;align-items:flex-end;padding:22px;color:#fff}
.abaco-mega-image strong{display:block;font-size:17px;text-transform:uppercase;line-height:1.05}
.abaco-mega-image span{display:block;font-size:10px;color:#ddd;margin-top:5px}

/* ABACO-WEB-026 — submenú "Servicios": mismo trigger/flecha/hover que
   "Autos" y misma tarjeta (fondo blanco, borde rojo, sombra) y enlaces que
   las columnas del mega menú, pero anclado bajo su padre (2 enlaces). */
.abaco-nav-drop{position:relative;display:flex;align-items:center}
.abaco-nav-drop>.abaco-mega-trigger{display:flex;gap:6px;align-items:center;padding:32px 0;cursor:pointer;outline-offset:4px}
.abaco-nav-drop:hover .abaco-mega-trigger,.abaco-nav-drop:focus-within .abaco-mega-trigger{color:var(--abaco-yellow)}
.abaco-nav-drop:hover .abaco-mega-trigger span,.abaco-nav-drop:focus-within .abaco-mega-trigger span{transform:rotate(180deg);color:var(--abaco-yellow)}
.abaco-nav-drop-menu{position:absolute;right:-20px;top:82px;min-width:220px;background:#fff;padding:14px 25px;box-shadow:0 22px 45px rgba(0,0,0,.22);border-top:4px solid var(--abaco-red);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;pointer-events:none}
.abaco-nav-drop:hover .abaco-nav-drop-menu,.abaco-nav-drop:focus-within .abaco-nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.abaco-nav-drop-menu>a{display:block;font-size:12px;text-transform:none;padding:6px 0;color:#555;font-weight:700;white-space:nowrap}
.abaco-nav-drop-menu>a:hover{color:var(--abaco-red)}
/* Con la 6.ª opción el nav ya no cabe a 24px de separación entre 1001 y
   1100px ("Quiénes somos" se partía en 2 líneas): solo en ese rango se
   reduce la separación; fuera de él el Header queda idéntico. */
@media(min-width:1001px) and (max-width:1100px){
  .abaco-nav{gap:14px}
  .abaco-nav>a{white-space:nowrap}
}

/* ===== Mobile menu toggle ===== */
.abaco-burger{display:none;background:none;border:0;color:#fff;font-size:26px;cursor:pointer;padding:8px}

/* ===== Hero ===== */
.abaco-hero{height:640px;position:relative;overflow:hidden;background:#111}
.abaco-slide{position:absolute;inset:0;opacity:0;animation:abaco-hero-fade 15s infinite}
.abaco-slide:nth-child(1){opacity:1;animation-delay:0s}
.abaco-slide:nth-child(2){animation-delay:5s}
.abaco-slide:nth-child(3){animation-delay:10s}
.abaco-slide-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.abaco-slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,.12) 78%,rgba(0,0,0,.2) 100%)}
.abaco-hero-content{position:relative;z-index:2;height:100%;display:flex;align-items:center}
.abaco-hero-copy{width:62%;color:#fff;margin-top:-18px}
.abaco-kicker{display:inline-flex;align-items:center;gap:8px;color:var(--abaco-yellow);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.7px;margin-bottom:16px}
.abaco-kicker:before{content:"";width:32px;height:3px;background:var(--abaco-red)}
.abaco-hero h1{font-size:60px;line-height:.97;letter-spacing:-2.5px;margin:0 0 22px;max-width:760px;text-transform:uppercase;color:#fff}
.abaco-hero h1 span{color:var(--abaco-yellow)}
.abaco-hero p{font-size:18px;line-height:1.5;color:#e3e3e5;max-width:600px;margin:0 0 28px}
.abaco-hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.abaco-hero-badge{position:absolute;right:6%;top:90px;z-index:3;width:160px;height:160px;border-radius:50%;background:var(--abaco-red);color:#fff;display:grid;place-items:center;text-align:center;font-weight:900;text-transform:uppercase;transform:rotate(-8deg);box-shadow:var(--abaco-shadow)}
.abaco-hero-badge b{font-size:32px;line-height:.9;display:block}
.abaco-hero-badge small{font-size:10px;letter-spacing:1px}
.abaco-slider-ui{position:absolute;z-index:5;bottom:28px;left:0;right:0}
.abaco-slider-ui .abaco-container{display:flex;justify-content:flex-start;align-items:center}
.abaco-dots{display:flex;gap:8px}
.abaco-dot{width:35px;height:4px;background:rgba(255,255,255,.35)}
.abaco-dot.is-active{background:#fff}

/* ===== ABACO-WEB-002 — Hero real (Revolution Slider, alias abaco-home-hero) =====
   El hero anterior (bloque "Hero" arriba) se conserva sin usar hasta confirmar
   visualmente el render del slider real; ver ABACO-WEB-002_RESULTADO.md. */
.abaco-hero-rs{position:relative;overflow:hidden;background:var(--abaco-black2)}
.abaco-hero-rs sr7-adjuster{min-height:680px}
.abaco-hero-rs sr7-slide{display:flex;flex-wrap:wrap;align-items:center;align-content:center;padding:0 6%;box-sizing:border-box}
.abaco-hero-rs sr7-slide:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(14,14,16,.94) 0%,rgba(14,14,16,.74) 44%,rgba(14,14,16,.34) 76%,rgba(14,14,16,.16) 100%)}
.abaco-hero-rs sr7-slide[data-key="1"]{background:radial-gradient(circle at 82% 50%,#2b2b30 0%,#19181b 60%)}
.abaco-hero-rs sr7-slide[data-key="2"]{background:radial-gradient(circle at 82% 50%,#2c241f 0%,#19181b 60%)}
.abaco-hero-rs sr7-slide[data-key="3"]{background:radial-gradient(circle at 82% 50%,#232a2e 0%,#19181b 60%)}
.abaco-hero-rs .sr7-layer{position:relative;z-index:1}
.abaco-hero-rs sr7-txt:nth-of-type(1){position:absolute;z-index:0;right:4%;top:50%;transform:translateY(-50%);max-width:44%;font-size:96px;font-weight:900;line-height:.88;letter-spacing:-3px;text-transform:uppercase;text-align:right;color:rgba(255,255,255,.07);pointer-events:none}
.abaco-hero-rs sr7-txt:nth-of-type(2){flex:0 0 100%;max-width:600px;display:inline-flex;align-items:center;gap:8px;color:var(--abaco-yellow);font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:1.7px;margin-bottom:16px}
.abaco-hero-rs sr7-txt:nth-of-type(2):before{content:"";width:32px;height:3px;background:var(--abaco-red)}
.abaco-hero-rs h1.sr7-layer{flex:0 0 100%;max-width:680px;font-size:60px;line-height:.97;letter-spacing:-2.5px;margin:0 0 22px;text-transform:uppercase;color:#fff}
.abaco-hero-rs sr7-txt:nth-of-type(3){flex:0 0 100%;max-width:560px;font-size:18px;line-height:1.5;color:#e3e3e5;margin:0 0 28px}
.abaco-hero-rs sr7-txt:nth-of-type(4),
.abaco-hero-rs sr7-txt:nth-of-type(5){flex:0 0 auto;margin:0 11px 0 0}
.abaco-hero-rs sr7-txt:nth-of-type(6){position:absolute;z-index:2;right:6%;top:80px;width:150px;height:150px;border-radius:50%;background:var(--abaco-red);color:#fff;display:grid;place-items:center;text-align:center;font-weight:900;text-transform:uppercase;transform:rotate(-8deg);box-shadow:var(--abaco-shadow)}
.abaco-hero-rs sr7-txt:nth-of-type(6) b{font-size:32px;line-height:.9;display:block}
.abaco-hero-rs sr7-txt:nth-of-type(6) small{font-size:10px;letter-spacing:1px}
@keyframes abaco-hero-fade{0%,30%{opacity:1}33%,97%{opacity:0}100%{opacity:1}}

/* ===== Search panel ===== */
/* ABACO-WEB-016 (Objetivo 2): .abaco-search-wrap se superpone al Hero con
   margin-top negativo, pero no tenía fondo propio — fuera del panel blanco
   centrado (.abaco-search-panel, dentro de .abaco-container boxed) se veía
   el Hero de fondo asomando a los lados, lo que se percibía como un
   "marco/franja" alrededor del Hero, sobre todo en mobile/tablet. Con fondo
   blanco a todo el ancho, la franja pasa a ser sólida y el Hero termina
   limpio en su propio borde inferior. */
.abaco-search-wrap{position:relative;z-index:10;margin-top:-56px;background:#fff}
.abaco-search-panel{background:#fff;box-shadow:var(--abaco-shadow);border-top:5px solid var(--abaco-red);padding:23px 25px 25px}
.abaco-search-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;gap:10px}
.abaco-search-title{font-size:19px;font-weight:900;text-transform:uppercase}
.abaco-search-title span{color:var(--abaco-red)}
.abaco-search-sub{font-size:11px;color:var(--abaco-muted)}
.abaco-search-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1fr auto;gap:9px}
.abaco-field{border:1px solid #ddd;background:#fafafa;height:50px;padding:7px 12px;display:flex;flex-direction:column;justify-content:center;position:relative}
.abaco-field label{font-size:10px;text-transform:uppercase;color:#777;font-weight:800;margin-bottom:3px}
/* ABACO-WEB-013 (punto 1): Motors oculta TODO <select> del sitio por defecto
   (select:not(.qm-filter){opacity:0;visibility:hidden}, pensado para su
   propio selector visual con JS — ver app.css). El buscador de Home usa
   <select> nativos que nunca pasan por ese JS, así que quedaban invisibles:
   el usuario veía la etiqueta ("MARCA") pero ninguna opción ni flecha, y no
   había forma visual de saber que el campo era interactivo. Se restaura
   aquí, solo dentro del buscador de Home, sin tocar el resto del sitio. */
.abaco-field select{border:0;background:transparent;font-size:14px;font-weight:700;outline:none;width:100%;appearance:none;opacity:1!important;visibility:visible!important;cursor:pointer;padding-right:16px}
.abaco-field:after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid #999;border-bottom:2px solid #999;transform:translateY(-65%) rotate(45deg);pointer-events:none}
.abaco-search-btn{height:50px;min-width:120px}

/* ===== Brand strip ===== */
.abaco-brand-strip{padding:22px 0 18px;border-bottom:1px solid #eee}
.abaco-brand-strip .abaco-container{display:flex;align-items:center;gap:24px;max-width:1080px;flex-wrap:wrap}
.abaco-brand-label{font-size:10px;color:#999;text-transform:uppercase;font-weight:900;white-space:nowrap}
.abaco-brands{display:flex;justify-content:space-between;align-items:center;flex:1;color:#555;gap:14px;flex-wrap:wrap}
/* ABACO-WEB-013 (punto 2): "logos" reales de marca (VW/Chevrolet/etc.) no
   existen como archivo en el proyecto (no hay carpeta de assets de marca ni
   term-meta de logo en la taxonomía `make`) y las reglas del proyecto piden
   no descargarlos de fuentes externas dudosas. Se sustituye el texto plano
   por una insignia visual consistente (tarjeta blanca + wordmark de la
   marca), que ya no es solo texto suelto, conserva proporciones iguales
   entre sí y deja el sitio listo para que, cuando existan los logos
   oficiales, solo haya que reemplazar el contenido de .abaco-brand-badge
   por una <img> (misma estructura que ya usa el footer para socios
   comerciales) sin tocar el layout. */
.abaco-brand{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--abaco-gray2);border-radius:8px;padding:10px 16px;height:52px;min-width:96px;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:.2s}
.abaco-brand-badge{font-size:13px;font-weight:900;letter-spacing:.3px;color:var(--abaco-black);text-transform:uppercase;white-space:nowrap}
.abaco-brand:hover{border-color:var(--abaco-red);box-shadow:0 4px 12px rgba(215,25,32,.18);transform:translateY(-1px)}
.abaco-brand:hover .abaco-brand-badge{color:var(--abaco-red)}

/* ===== Sections generales ===== */
.abaco-section{padding:78px 0}
.abaco-section.abaco-alt{background:var(--abaco-gray)}
.abaco-section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px;flex-wrap:wrap;gap:16px}
.abaco-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:900;color:var(--abaco-red);margin-bottom:9px}
.abaco-section h2{font-size:36px;letter-spacing:-1.3px;text-transform:uppercase;margin:0;color:var(--abaco-black)}
.abaco-section-head p{max-width:460px;color:var(--abaco-muted);font-size:13px;line-height:1.6;margin:0}

/* ===== Inventario ===== */
.abaco-inventory{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.abaco-vehicle{background:#fff;border:1px solid #e6e6e3;position:relative;transition:.25s;overflow:hidden}
.abaco-vehicle:hover{transform:translateY(-5px);box-shadow:var(--abaco-shadow)}
.abaco-vehicle-img{height:180px;background-size:cover;background-position:center;background-color:#eee}
.abaco-vehicle-body{padding:17px}
.abaco-vehicle-brand{font-size:9px;text-transform:uppercase;color:#888;font-weight:900;letter-spacing:1px}
.abaco-vehicle h3{font-size:17px;margin:5px 0 10px;line-height:1.25;color:var(--abaco-black)}
.abaco-vehicle-line{display:flex;justify-content:space-between;color:#777;font-size:10px;padding-bottom:12px;border-bottom:1px solid #eee;text-transform:uppercase}
.abaco-vehicle-price{display:flex;justify-content:space-between;align-items:center;padding-top:13px}
.abaco-vehicle-price strong{font-size:19px;color:var(--abaco-black)}
.abaco-vehicle-price span{font-size:11px;color:var(--abaco-red);font-weight:900;text-transform:uppercase}
.abaco-ribbon{position:absolute;left:10px;top:10px;background:var(--abaco-red);color:#fff;padding:6px 8px;font-size:9px;font-weight:900;text-transform:uppercase;z-index:2}

/* ===== Financiamiento ===== */
.abaco-finance{background:var(--abaco-black);color:#fff;position:relative;overflow:hidden}
/* ABACO-WEB-011 (punto 5): fondo con textura/marca de agua ABACO — sutil,
   baja opacidad, resuelto en CSS puro (repetición del wordmark + textura
   diagonal), sin interferir con la lectura del texto. */
.abaco-finance:before{content:"ABACO";position:absolute;right:-30px;top:35px;font-size:150px;font-weight:900;color:rgba(255,255,255,.04);letter-spacing:-8px;pointer-events:none;z-index:0}
.abaco-finance:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 26px);}
.abaco-finance-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.abaco-finance h2{font-size:42px;line-height:1.02;max-width:560px;color:#fff;text-transform:uppercase;letter-spacing:-1px;margin:0 0 16px}
.abaco-finance h2 span{color:var(--abaco-yellow)}
.abaco-finance>div>p{color:#bbb;line-height:1.65;font-size:14px;max-width:520px}
.abaco-benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0}
.abaco-benefit{border-left:3px solid var(--abaco-red);background:#242427;padding:16px 17px}
.abaco-benefit strong{display:block;font-size:15px;color:#fff}
.abaco-benefit span{display:block;font-size:11px;color:#aaa;margin-top:4px}
.abaco-finance-visual{height:440px;position:relative;overflow:hidden;background:#111;box-shadow:0 25px 60px rgba(0,0,0,.28)}
.abaco-finance-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.83),rgba(0,0,0,.25)),url('../img/campaign-2026/banner-mg3.webp') center/cover}
.abaco-finance-overlay{position:absolute;inset:0;padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:#fff}
.abaco-finance-stamp{border:2px solid #fff;padding:7px 12px;font-size:13px;font-weight:900;letter-spacing:2px;margin-bottom:24px}
.abaco-finance-visual-kicker{font-size:10px;color:var(--abaco-yellow);font-weight:900;letter-spacing:1.6px;margin-bottom:9px}
.abaco-finance-overlay h3{font-size:33px;line-height:1;text-transform:uppercase;margin:0 0 15px;letter-spacing:-1px;color:#fff}
.abaco-finance-overlay h3 span{color:var(--abaco-yellow)}
.abaco-finance-overlay p{font-size:12px;line-height:1.55;color:#ddd;max-width:400px;margin:0 0 22px}

/* ===== Story / Nosotros ===== */
.abaco-story{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.abaco-story-image{height:420px;background:url('../img/campaign-2026/banner-hyundai-grand-i10.webp') center/cover;position:relative}
.abaco-story-image:after{content:"";position:absolute;inset:0;border:14px solid rgba(255,255,255,.12)}
.abaco-story-card{position:absolute;bottom:24px;left:24px;background:var(--abaco-red);color:#fff;padding:20px;width:230px}
.abaco-story-card strong{font-size:25px;display:block}
.abaco-story-card span{font-size:10px;text-transform:uppercase}
.abaco-story h2{font-size:38px;line-height:1.05;text-transform:none;letter-spacing:-1px;color:var(--abaco-black)}
.abaco-story>div>p{color:var(--abaco-muted);line-height:1.7;font-size:14px}
.abaco-story-list{display:grid;gap:13px;margin:22px 0}
.abaco-story-list div{display:flex;gap:12px;align-items:center;font-size:13px;font-weight:800;color:var(--abaco-black)}
.abaco-check{width:26px;height:26px;background:var(--abaco-yellow);display:grid;place-items:center;font-weight:900;flex-shrink:0}

/* ===== Proceso ===== */
.abaco-process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.abaco-process-item{padding:26px 22px;border-right:1px solid #ddd}
.abaco-process-item:last-child{border-right:0}
.abaco-num{font-size:38px;font-weight:900;color:#ddd;line-height:1}
.abaco-process-item h3{font-size:16px;text-transform:uppercase;margin:12px 0 8px;color:var(--abaco-black)}
.abaco-process-item p{font-size:12px;line-height:1.55;color:var(--abaco-muted);margin:0}
/* ABACO-WEB-011 (punto 4): iconos por paso — SVG en línea, sin librería nueva. */
.abaco-process-icon{display:block;width:34px;height:34px;color:var(--abaco-red);margin-bottom:14px}
.abaco-process-icon svg{width:100%;height:100%;display:block}
.abaco-process-icons .abaco-num{margin-top:0}

/* ===== CTA band ===== */
.abaco-cta-band{background:var(--abaco-yellow);padding:32px 0}
.abaco-cta-band .abaco-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.abaco-cta-band h2{font-size:26px;margin:0;text-transform:uppercase;letter-spacing:-.6px;color:#151515}
.abaco-cta-band p{margin:5px 0 0;font-size:12px;color:#151515}

/* ===== Sucursales (Home) — ABACO-WEB-011: espacio preparado para el
   shortcode real de WePlugins, sin selector de estados ni datos inventados. ===== */
.abaco-branches-section{padding:72px 0;background:var(--abaco-gray)}
.abaco-branches-intro{max-width:520px;color:var(--abaco-muted);font-size:13px;line-height:1.6;margin:0}
.abaco-branches-map-placeholder{background:var(--abaco-black2);border:1px dashed rgba(255,255,255,.25);border-radius:6px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:#cfcfd2}
.abaco-branches-map-placeholder span{font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:-.2px;color:#fff}
.abaco-branches-map-placeholder small{font-size:12px;color:#9a9a9e}
.abaco-branches-disclaimer{margin:18px 0 0;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.2px}
.abaco-branches-disclaimer a{color:var(--abaco-red)}

/* ===== Footer ===== */
.abaco-footer{background:var(--abaco-black);color:#aaa;padding:55px 0 22px}
.abaco-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.abaco-footer-logo{width:95px;height:58px;object-fit:contain}
.abaco-footer h4{color:#fff;text-transform:uppercase;font-size:11px;letter-spacing:1px;margin:0 0 4px}
.abaco-footer a{display:block;font-size:12px;margin:10px 0;color:#aaa}
.abaco-footer a:hover{color:#fff}
.abaco-footer-copy{font-size:12px;line-height:1.6;max-width:320px;margin-top:14px}

/* ABACO-WEB-011 (puntos 18-21): medios de contacto, enlaces operativos y socios comerciales. */
.abaco-footer-contact,.abaco-footer-ops,.abaco-footer-partners{border-top:1px solid #2a2a2e;margin-top:30px;padding-top:26px}
.abaco-footer-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 24px;margin-top:6px}
.abaco-footer-contact-grid a{margin:6px 0}
/* ABACO-WEB-013 (punto 3): iconos de redes sociales del Footer (antes solo
   el nombre en texto: "Facebook"/"Instagram"/"LinkedIn"). Mismas URLs ya
   oficiales, sin cambiar destinos ni duplicar los enlaces de texto de
   arriba (Teléfono/Correo/WhatsApp se mantienen igual). */
.abaco-footer-social{display:flex;gap:14px;margin-top:16px}
.abaco-footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#232327;color:#ccc;transition:.2s}
.abaco-footer-social a:hover{background:var(--abaco-red);color:#fff}
.abaco-footer-social svg{width:16px;height:16px}
.abaco-footer-ops{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.abaco-footer-ops h4{margin-bottom:8px}
.abaco-footer-ops a{color:var(--abaco-yellow);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.3px}
.abaco-footer-partners-grid{display:flex;align-items:stretch;gap:16px;flex-wrap:wrap;margin-top:14px}
.abaco-footer-partners-grid a{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:10px 22px;height:64px;width:150px;box-sizing:border-box;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s}
.abaco-footer-partners-grid a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.abaco-footer-partners-grid img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.abaco-footer-bottom{border-top:1px solid #333;margin-top:36px;padding-top:18px;font-size:9px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}

/* ===== CTA flotante ===== */
.abaco-float-cta{position:fixed;right:20px;bottom:20px;z-index:150;background:var(--abaco-red);color:#fff!important;padding:13px 18px;box-shadow:0 12px 35px rgba(0,0,0,.25);font-size:10px;font-weight:900;text-transform:uppercase;border-radius:4px}

/* ============================================================
   RESPONSIVE — Tablet (<= 1000px)
   ============================================================ */
@media(max-width:1000px){
  .abaco-mega-menu{display:none!important}
  .abaco-nav{display:none}
  .abaco-burger{display:block}
  .abaco-hero h1{font-size:44px}
  .abaco-hero-copy{width:100%}
  .abaco-hero-badge{width:120px;height:120px;top:70px;right:16px}
  .abaco-hero-badge b{font-size:24px}
  .abaco-hero-rs sr7-adjuster{min-height:600px}
  .abaco-hero-rs h1.sr7-layer{font-size:42px}
  .abaco-hero-rs sr7-txt:nth-of-type(1){font-size:64px;max-width:50%}
  .abaco-hero-rs sr7-txt:nth-of-type(6){width:120px;height:120px;top:70px;right:16px}
  .abaco-hero-rs sr7-txt:nth-of-type(6) b{font-size:24px}
  .abaco-search-grid{grid-template-columns:1fr 1fr 1fr}
  .abaco-inventory{grid-template-columns:1fr 1fr}
  .abaco-finance-grid,.abaco-story{grid-template-columns:1fr}
  .abaco-story-image{height:320px}
  .abaco-process{grid-template-columns:1fr 1fr}
  .abaco-footer-grid{grid-template-columns:1fr 1fr}
  .abaco-footer-contact-grid{grid-template-columns:1fr 1fr}
  .abaco-footer-ops{grid-template-columns:1fr 1fr}
  .abaco-section h2{font-size:30px}
}

/* ============================================================
   RESPONSIVE — Mobile (<= 640px)
   ============================================================ */
@media(max-width:640px){
  .abaco-top{height:auto;padding:6px 0}
  .abaco-top .abaco-container{flex-direction:column;gap:2px;text-align:center;font-size:10px}
  .abaco-header .abaco-container{height:66px}
  .abaco-logo{width:76px;height:46px}
  .abaco-header-actions .abaco-btn{padding:10px 12px;font-size:11px}
  .abaco-hero{height:560px}
  .abaco-hero h1{font-size:34px;letter-spacing:-1.5px}
  .abaco-hero p{font-size:15px}
  .abaco-hero-badge{display:none}
  .abaco-hero-actions{flex-direction:column;align-items:stretch}
  .abaco-hero-rs sr7-adjuster{min-height:560px}
  .abaco-hero-rs sr7-slide{padding:0 22px}
  .abaco-hero-rs h1.sr7-layer{font-size:32px;letter-spacing:-1.5px}
  .abaco-hero-rs sr7-txt:nth-of-type(1){display:none}
  .abaco-hero-rs sr7-txt:nth-of-type(3){font-size:15px}
  .abaco-hero-rs sr7-txt:nth-of-type(4),
  .abaco-hero-rs sr7-txt:nth-of-type(5){flex:0 0 100%;margin:0 0 11px}
  .abaco-hero-rs sr7-txt:nth-of-type(4) a,
  .abaco-hero-rs sr7-txt:nth-of-type(5) a{width:100%}
  .abaco-hero-rs sr7-txt:nth-of-type(6){display:none}
  .abaco-search-panel{padding:18px}
  .abaco-search-grid{grid-template-columns:1fr 1fr;gap:8px}
  .abaco-search-btn{grid-column:1/-1}
  .abaco-search-top{flex-direction:column;align-items:flex-start}
  .abaco-brand-strip .abaco-container{flex-direction:column;align-items:flex-start;gap:10px}
  .abaco-brands{justify-content:flex-start;gap:16px}
  .abaco-section{padding:52px 0}
  .abaco-section h2{font-size:26px}
  .abaco-inventory{grid-template-columns:1fr}
  .abaco-finance h2{font-size:30px}
  .abaco-benefits{grid-template-columns:1fr}
  .abaco-finance-visual{height:320px}
  .abaco-story-card{position:static;width:auto;margin-top:12px}
  .abaco-process{grid-template-columns:1fr;border-right:0}
  .abaco-process-item{border-right:0;border-bottom:1px solid #ddd}
  .abaco-process-item:last-child{border-bottom:0}
  .abaco-cta-band .abaco-container{flex-direction:column;align-items:flex-start}
  .abaco-branches-map-placeholder{min-height:220px}
  .abaco-footer-grid{grid-template-columns:1fr;gap:28px}
  .abaco-footer-contact-grid{grid-template-columns:1fr}
  .abaco-footer-ops{grid-template-columns:1fr;gap:18px}
  .abaco-footer-partners-grid{gap:12px;justify-content:center}
  .abaco-footer-partners-grid a{width:110px;height:52px;padding:8px 14px}
  .abaco-footer-bottom{flex-direction:column}
  .abaco-float-cta{right:12px;bottom:12px;padding:11px 14px;font-size:9px}
}

/* ===== Mobile off-canvas menu ===== */
.abaco-mobile-menu{position:fixed;inset:0;background:var(--abaco-black);z-index:300;transform:translateX(100%);transition:.3s;overflow-y:auto;padding:20px}
.abaco-mobile-menu.abaco-open{transform:translateX(0)}
.abaco-mobile-menu-head{display:flex;justify-content:flex-end;margin-bottom:20px}
.abaco-mobile-menu-close{background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
.abaco-mobile-menu a{display:block;color:#fff;font-size:16px;font-weight:800;text-transform:uppercase;padding:14px 0;border-bottom:1px solid #2a2a2e}
.abaco-mobile-menu .abaco-btn{margin-top:20px;width:100%}
.abaco-mobile-menu a.abaco-mobile-contact{font-size:12px;font-weight:700;color:#999;border-bottom:0;padding:8px 0 0;display:inline-block;margin-right:18px}
/* ABACO-WEB-026 — "Servicios" en el menú móvil: título como los demás
   elementos y sus dos páginas debajo, sangradas. */
.abaco-mobile-group-title{display:block;color:#fff;font-size:16px;font-weight:800;text-transform:uppercase;padding:14px 0;border-bottom:1px solid #2a2a2e}
.abaco-mobile-menu .abaco-mobile-group a{font-size:14px;color:#ccc;padding-left:16px}

/* ===== ABACO-WEB-014 — Home migrado a Elementor =====
   Elementor controla textos/orden/spacing; estas reglas solo dan contraste
   de color a dos widgets nativos (icon-list) dentro de secciones con fondo
   oscuro/claro específico, sin depender de nombres internos de controles
   de Elementor que no están garantizados entre versiones. */
.abaco-finance-benefits .elementor-icon-list-item,
.abaco-finance-benefits .elementor-icon-list-text{color:#fff}
.abaco-finance-benefits .elementor-icon-list-icon i{color:var(--abaco-yellow)}
.abaco-story-checklist .elementor-icon-list-icon i{color:var(--abaco-red)}
.abaco-hero-el .elementor-slides .swiper-slide-contents{text-align:left;max-width:640px;margin:0 0 0 max(20px,calc(50% - 590px))}
.abaco-hero-el .elementor-slides .elementor-slide-heading{text-transform:uppercase;letter-spacing:-1px;font-weight:800}

/* ABACO-WEB-014 — red de seguridad sitewide para el widget nativo
   "Icon List" de Elementor (usado en varias páginas migradas): en 768px
   (tablet, antes de que Elementor apile las columnas a una) algunos ítems
   largos podían no envolver el texto y provocar overflow horizontal
   mínimo. Se fuerza el ajuste de línea — no cambia colores ni contenido. */
.elementor-icon-list-item{max-width:100%}
.elementor-icon-list-text{overflow-wrap:break-word;word-break:break-word}
.elementor-icon-box-title,.elementor-icon-box-description,.elementor-heading-title,.elementor-widget-text-editor{overflow-wrap:break-word;word-break:break-word;max-width:100%}
/* Identidad ABACO (negro/blanco/rojo/amarillo) para los iconos nativos de
   Elementor (icon-box: los iconos de Font Awesome se renderizan como SVG
   inline con fill:currentColor, así que hay que forzar tanto el color del
   span contenedor como el fill del propio SVG). */
.elementor-icon-box-icon .elementor-icon,
.elementor-icon-box-icon svg{color:var(--abaco-red)!important;fill:var(--abaco-red)!important}
.elementor-icon-box-title,.elementor-icon-box-title a{color:var(--abaco-black)!important}

/* ABACO-WEB-014 — contraste de texto/icono para dos bloques "icon-list"
   sobre fondo oscuro/claro específico (Financiamiento en Home, checklist
   de "Quiénes somos"). El control "CSS Classes" de Elementor no propaga
   la clase de forma fiable al exportar datos por API en esta versión, así
   que se apunta directo al id de elemento que Elementor sí genera y usa
   consistentemente (mismo mecanismo que Elementor usa para sus propios
   colores por elemento) — sin tocar ningún otro icon-list del sitio. */
.elementor-element-sh .elementor-icon-list-text,
.elementor-element-sh .elementor-icon-list-item{color:#fff}
.elementor-element-sh .elementor-icon-list-icon svg{fill:var(--abaco-yellow)}
.elementor-element-sz .elementor-icon-list-icon svg{fill:var(--abaco-red)}
.elementor-element-rw.elementor-widget-button{position:fixed;right:20px;bottom:20px;z-index:150;width:max-content;left:auto}
@media(max-width:640px){.elementor-element-rw.elementor-widget-button{right:12px;bottom:12px}}

/* ABACO-WEB-018A — el botón flotante fixed en la esquina inferior derecha
   llega a superponerse a contenido real al hacer scroll: confirmado sobre
   la franja de marcas de Home (768/1024px), sobre la sección de
   Financiamiento (1280px) y, de forma crítica, sobre el campo real
   "Apellidos" del formulario de Precalificación en los 6 breakpoints
   probados (ese caso no depende del ancho — el formulario empieza muy
   cerca del borde superior en cualquier resolución). Un elemento fixed
   anclado a una esquina de la pantalla puede llegar a coincidir con
   cualquier contenido que pase por ahí al hacer scroll; no existe un
   offset/tamaño que lo evite en todos los casos sin JavaScript. El botón
   "PRECALIFÍCATE" del header ya cumple la misma función en todo momento y
   en todos los breakpoints, así que el duplicado flotante se oculta
   solamente donde se confirmó que tapa contenido real. */
@media(min-width:641px) and (max-width:1300px){
	.elementor-element-rw.elementor-widget-button{display:none}
}
body.page-id-3309 .elementor-element-rw.elementor-widget-button{display:none}

/* ABACO-WEB-015 (Parte C) — Store Locator del mapa de Sucursales
   (map_id=2, clon de map_id=1; Home sigue usando map_id=1 sin cambios).
   El plugin WP MAPS PRO (WePlugins) ya separa buscador / filtros / mapa /
   listado como hermanos directos dentro de .wpgmp_map_container (visto en
   modules/shortcode/views/put-wpgmp.php) — aquí solo se reordena con
   flexbox (desktop: lista 35% izquierda, mapa 65% derecha; mobile: orden
   natural buscador → mapa → lista). No se toca ningún archivo del plugin
   ni los datos de las sucursales. */
/* El plugin envuelve buscador/filtros/mapa/listado en un <div> intermedio
   sin clase (hijo directo de .wpgmp_map_container) antes de llegar a
   .wpgmp_filter_wrappers/.wpgmp_map_parent/.location_listing2 — confirmado
   inspeccionando el DOM real ya renderizado (no solo el PHP fuente). El
   flex se aplica ahí, no en .wpgmp-map-2 directamente. */
.wpgmp-map-2 > div{display:flex!important;flex-wrap:wrap;gap:22px;align-items:flex-start}
.wpgmp-map-2 .wpgmp_filter_wrappers{order:0;flex:0 0 100%}
.wpgmp-map-2 .location_listing2{
	order:1;flex:1 1 320px;max-width:100%;max-height:560px;overflow-y:auto;
	border:1px solid var(--abaco-gray2);border-radius:6px;background:#fff;
}
.wpgmp-map-2 .wpgmp_map_parent{order:2;flex:2 1 480px}
.wpgmp-map-2 .wpgmp_map_parent .wpgmp_map{min-height:520px!important;height:520px!important;border-radius:6px;overflow:hidden}
.wpgmp-map-2 .location_pagination2{order:3;flex:0 0 100%}

/* Tarjeta de sucursal dentro del listado (item_skin personalizado con
   datos reales: nombre, dirección, teléfono — ver reporte). */
.abaco-branch-card{padding:14px 16px;border-bottom:1px solid var(--abaco-gray2)}
.abaco-branch-card:last-child{border-bottom:0}
.abaco-branch-card .place_title{font-size:13px;font-weight:800;text-transform:uppercase;color:var(--abaco-black);letter-spacing:.2px}
.abaco-branch-card .place_title:hover{color:var(--abaco-red)}
.abaco-branch-body{margin-top:6px}
.abaco-branch-address{font-size:12px;color:var(--abaco-muted);line-height:1.5}
.abaco-branch-phone{margin-top:4px}
.abaco-branch-phone a{font-size:12px;font-weight:800;color:var(--abaco-red)}

@media(max-width:900px){
	.wpgmp-map-2 .location_listing2{order:0;flex-basis:100%;max-height:420px}
	.wpgmp-map-2 .wpgmp_map_parent{order:0;flex-basis:100%}
}