/*
 * Hablo compatibility layer for the La Capital home page. Loaded right after
 * styles.css.
 *
 * styles.css is the dealer's original stylesheet, byte for byte apart from
 * asset URLs. It includes the original stray "}" after `.trust-badges`, which
 * makes browsers drop the next rule, exactly as on the original site.
 *
 * On Hablo the page also carries Hablo's global CSS, which the original never
 * had. These rules undo it exactly where it reaches the static home markup
 * (inside .lc-home) or the page wrapper (.lc-root), so the page renders as it
 * did on lacapitaldelastrocas.com.
 */

/* styles.css restyles <body>; Hablo's <body> carries its own classes, so the
   original body rule is applied to the page wrapper, which everything inherits from. */
html { background-color: var(--white); }
.lc-root { line-height:1.6; font-family:var(--font-body); font-size:var(--text-base); color:var(--text-navy); }

/* `.theme-platform h1, h2, h3` (Satoshi, -0.03em) outranks these single-class
   heading rules; the shell resets h1-h3 to inherit, so restore them here. */
.lc-home .hero-title { font-family:var(--font-display); letter-spacing:.01em; }
.lc-home .section-title,
.lc-home .step-card h3,
.lc-home .truck-name { font-family:var(--font-display); }

/* Hablo's `.btn`/`.btn-outline` components share class names with this page:
   they add a fixed line-height, a focus ring and platform colours. */
.lc-home .btn { line-height:inherit; }
.lc-home .btn-outline { color:var(--white); border-color:var(--white); }
.lc-home .btn-outline:hover { color:var(--navy); border-color:var(--white); }
.lc-home .btn:focus { box-shadow:none; }
.lc-home .btn-primary:focus { box-shadow:var(--shadow-sm); }
.lc-home .btn-primary:hover:focus,
.lc-home .btn-whatsapp:hover:focus { box-shadow:var(--shadow-md); }
.lc-home .btn:focus-visible { outline:3px solid var(--orange); outline-offset:2px; }

/* Hablo's `.badge` component: inline-flex with a 1rem line-height. */
.lc-home .badge { display:inline; line-height:inherit; }