/* ═══════════════════════════════════════
   MAZDA OF NORTH MIAMI — Leo Romero
   Brand: monochrome base (black / white / gray) + blue accent
   ═══════════════════════════════════════ */

:root {
  --black:     #111111;
  --black-deep:#0B0B0B;
  --white:     #FFFFFF;
  /* Blue accent. --red / --red-dark kept as var names (now blue) so every
     existing accent reference picks up the new color automatically. */
  --red:       #2563EB;
  --red-dark:  #1D4ED8;
  --blue:      #2563EB;
  --blue-deep: #1D4ED8;
  --blue-light:#5B9BFF;
  --grad-blue: linear-gradient(135deg,#2563EB 0%,#3B82F6 55%,#38BDF8 100%);
  --gray-100:  #F5F5F5;
  --gray-200:  #E5E5E5;
  --gray-400:  #9A9A9A;
  --gray-600:  #555555;

  --font:      'Inter', Helvetica Neue, Arial, sans-serif;

  --size-xs:   0.75rem;
  --size-sm:   0.875rem;
  --size-base: 1rem;
  --size-lg:   1.25rem;
  --size-xl:   1.5rem;
  --size-2xl:  2rem;
  --size-3xl:  3rem;
  --size-4xl:  4rem;
  --size-5xl:  5.5rem;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 7rem;

  --radius:    2px;
  --transition: 0.2s ease;
  --max-width: 1200px;
}

.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
*, *::before, *::after { box-sizing:border-box;margin:0;padding:0; }
html { scroll-behavior:smooth;font-size:16px; }
body { font-family:var(--font);background:var(--white);color:var(--black);line-height:1.6;-webkit-font-smoothing:antialiased; }
img  { max-width:100%;display:block; }
a    { color:inherit;text-decoration:none; }
ul   { list-style:none; }
button { cursor:pointer;font-family:var(--font);border:none;background:none; }

h1,h2,h3 { line-height:1.1;font-weight:900;letter-spacing:-0.03em; }
h1 { font-size:clamp(var(--size-3xl),8vw,var(--size-5xl)); }
h2 { font-size:clamp(var(--size-2xl),5vw,var(--size-4xl)); }
h3 { font-size:var(--size-xl);font-weight:700; }
p  { font-size:var(--size-base);color:var(--gray-600);line-height:1.7; }
em { font-style:normal;background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex;align-items:center;justify-content:center;
  padding:0.875rem 1.75rem;
  font-size:var(--size-sm);font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
  border-radius:var(--radius);
  transition:background var(--transition),color var(--transition),border-color var(--transition);
  white-space:nowrap;
}
.btn--primary { background:var(--grad-blue);color:var(--white);box-shadow:0 4px 18px rgba(37,99,235,0.28); }
.btn--primary:hover { filter:brightness(1.07);box-shadow:0 6px 22px rgba(37,99,235,0.38); }
.btn--ghost   { background:transparent;color:var(--white);border:2px solid rgba(255,255,255,0.4); }
.btn--ghost:hover { border-color:var(--white);background:rgba(255,255,255,0.08); }
.btn--ghost-dark { background:transparent;color:var(--black);border:2px solid var(--black); }
.btn--ghost-dark:hover { background:var(--black);color:var(--white); }
.btn--call    { background:var(--white);color:var(--black);border:2px solid var(--white); }
.btn--call:hover { background:var(--gray-100); }
.btn--nav     { background:var(--grad-blue);color:var(--white);padding:0.625rem 1.25rem;font-size:var(--size-xs); }
.btn--nav:hover { filter:brightness(1.07); }
.btn--full    { width:100%; }
.btn__loading { display:none; }
.btn.loading .btn__text    { display:none; }
.btn.loading .btn__loading { display:inline; }

/* ── LAYOUT ── */
.section-inner { max-width:var(--max-width);margin:0 auto;padding:var(--space-2xl) var(--space-lg); }
.section-inner--split { display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-xl);align-items:start; }
.section__label { font-size:var(--size-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--red);margin-bottom:var(--space-xs); }
.section__title { margin-bottom:var(--space-md); }

/* ── NAV ── */
.nav { position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-200); }
.nav__inner { max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg);height:68px;display:flex;align-items:center;gap:var(--space-lg); }
.nav__logo { display:flex;align-items:center;gap:0.75rem;flex-shrink:0; }
.nav__dealer-logo { height:38px;width:auto;display:block;flex-shrink:0; }
.nav__logo-divider { width:1px;height:28px;background:var(--gray-200);flex-shrink:0;margin:0 2px; }
.nav__logo-name { font-size:var(--size-sm);font-weight:700;letter-spacing:-0.01em;color:var(--black);white-space:nowrap; }
.nav__links { display:flex;gap:var(--space-lg);margin-left:auto;margin-right:var(--space-md); }
.nav__links a { font-size:var(--size-sm);font-weight:500;color:var(--gray-600);transition:color var(--transition); }
.nav__links a:hover { color:var(--red); }
.nav__burger { display:none;flex-direction:column;gap:5px;padding:4px; }
.nav__burger span { display:block;width:22px;height:2px;background:var(--black);transition:all 0.2s; }
@media(max-width:768px){
  .nav__links { display:none;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--gray-200);padding:var(--space-md) var(--space-lg);gap:var(--space-sm); }
  .nav__links.open { display:flex; }
  .nav__burger { display:flex; }
}

/* ── HERO ── */
.hero {
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(37,99,235,0.32), transparent 60%),
    radial-gradient(820px 520px at -5% 115%, rgba(56,189,248,0.14), transparent 55%),
    var(--black-deep);
  color:var(--white);overflow:hidden;
}
.hero__grid { max-width:var(--max-width);margin:0 auto;padding:var(--space-2xl) var(--space-lg);display:grid;grid-template-columns:1fr 340px;gap:var(--space-xl);align-items:center; }
.hero__eyebrow { font-size:var(--size-xs);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue-light);margin-bottom:var(--space-sm); }
.hero__headline { color:var(--white);margin-bottom:var(--space-md); }
.hero__sub { color:rgba(255,255,255,0.6);font-size:var(--size-lg);line-height:1.6;margin-bottom:var(--space-lg);max-width:520px; }
.hero__sub-stats { display:flex;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap; }
.hero__sub-stat { display:flex;align-items:center;gap:0.4rem;font-size:var(--size-xs);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.4); }
.hero__sub-stat__dot { width:5px;height:5px;background:var(--blue-light);border-radius:50%;flex-shrink:0; }
.hero__cta-group { display:flex;gap:var(--space-sm);flex-wrap:wrap; }
.hero__stat-block { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08); }
.stat { background:var(--black-deep);padding:var(--space-lg);display:flex;flex-direction:column;gap:4px; }
.stat__num { font-size:var(--size-3xl);font-weight:900;letter-spacing:-0.04em;color:var(--white); }
.stat__label { font-size:var(--size-xs);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.35); }
@media(max-width:900px){
  .hero__grid { grid-template-columns:1fr; }
  .hero__stat-block { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:600px){ .hero__stat-block { grid-template-columns:1fr 1fr; } }

/* ── LINEUP ── */
.lineup { background:var(--black);padding:var(--space-2xl) 0; }
.lineup .section__label { color:var(--red); }
.lineup .section__title { color:var(--white); }
.lineup__grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:rgba(255,255,255,0.06);
  margin-top:var(--space-lg);
}
.model-card {
  position:relative;
  background:var(--black-deep);
  overflow:hidden;
  aspect-ratio:4/3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  cursor:default;
}
.model-card__img {
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.55;
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.model-card:hover .model-card__img { opacity:0.75;transform:scale(1.03); }
.model-card__overlay {
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
}
.model-card__body {
  position:relative;z-index:1;
  padding:var(--space-md);
}
.model-card__name  { font-size:var(--size-lg);font-weight:800;color:var(--white);letter-spacing:-0.02em;line-height:1.2; }
.model-card__price { font-size:var(--size-xs);color:rgba(255,255,255,0.5);margin-top:3px;font-weight:500; }
.model-card__badge {
  display:inline-block;margin-top:var(--space-xs);
  background:var(--grad-blue);color:var(--white);
  font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:2px;
}
/* ── Model card clickable ── */
.model-card[data-url] { cursor:pointer; }
.model-card[data-url]:hover .model-card__img { opacity:0.75;transform:scale(1.03); }
.model-card__cta { font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:6px;transition:color 0.2s; }
.model-card[data-url]:hover .model-card__cta { color:var(--white); }

/* ── Lead gate modal ── */
.modal { position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--space-md); }
.modal[hidden] { display:none; }
.modal__backdrop { position:absolute;inset:0;background:rgba(0,0,0,0.72);backdrop-filter:blur(4px); }
.modal__box { position:relative;z-index:1;background:var(--white);width:100%;max-width:480px;border-radius:4px;padding:var(--space-lg);box-shadow:0 24px 64px rgba(0,0,0,0.4); }
.modal__close { position:absolute;top:var(--space-sm);right:var(--space-sm);background:none;border:none;font-size:24px;color:var(--gray-400);cursor:pointer;line-height:1;padding:4px 8px;border-radius:4px; }
.modal__close:hover { color:var(--black);background:var(--gray-100); }
.modal__eyebrow { font-size:var(--size-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--red);margin-bottom:6px; }
.modal__title { font-size:var(--size-2xl);font-weight:900;letter-spacing:-0.03em;line-height:1.1;color:var(--black);margin-bottom:var(--space-sm); }
.modal__sub { font-size:var(--size-sm);color:var(--gray-600);line-height:1.6;margin-bottom:var(--space-lg); }
.modal__fields { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin-bottom:var(--space-sm); }
.modal__field { display:flex;flex-direction:column;gap:5px; }
.modal__field label { font-size:var(--size-xs);font-weight:700;color:var(--black);text-transform:uppercase;letter-spacing:0.05em; }
.modal__field input { padding:0.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-family:var(--font);font-size:var(--size-base);color:var(--black);background:var(--white);width:100%;transition:border-color 0.2s; }
.modal__field input:focus { outline:none;border-color:var(--red); }
.modal__err { font-size:var(--size-xs);color:var(--gray-600);font-weight:600;margin-bottom:var(--space-sm); }
.modal__actions { display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-md); }
.modal__skip { font-size:var(--size-xs);color:var(--gray-400);text-align:center;text-decoration:underline;cursor:pointer; }
.modal__skip:hover { color:var(--gray-600); }
@media(max-width:480px){ .modal__fields { grid-template-columns:1fr; } }

/* Product shot variant — car on white/transparent bg; contain + dark bg */
.model-card--product .model-card__img {
  object-fit: contain;
  opacity: 0.9;
  background: var(--black-deep);
  padding: 12px;
}
.model-card--product .model-card__overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 100%);
}
@media(max-width:900px){ .lineup__grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .lineup__grid { grid-template-columns:1fr; } }

/* ── WHY ── */
.why { background:var(--white); }
.why__grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-sm);margin-top:var(--space-lg); }
.why__card { border:1px solid var(--gray-200);padding:var(--space-lg);transition:border-color var(--transition); }
.why__card:hover { border-color:var(--red); }
.why__num { display:block;font-size:var(--size-xs);font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--red);margin-bottom:var(--space-sm); }
.why__card h3 { margin-bottom:var(--space-xs); }

/* ── TRUST ── */
.trust { background:var(--gray-100); }
.trust__grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--gray-200);border:1px solid var(--gray-200);margin-top:var(--space-lg); }
.trust__stat { background:var(--white);padding:var(--space-lg);display:flex;flex-direction:column;gap:4px; }
.trust__num   { font-size:clamp(2rem,5vw,3.5rem);font-weight:900;letter-spacing:-0.04em;color:var(--black); }
.trust__label { font-size:var(--size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--red); }
.trust__desc  { font-size:var(--size-xs);color:var(--gray-400);margin-top:4px; }
@media(max-width:700px){ .trust__grid { grid-template-columns:1fr 1fr; } }

/* ── COMPARE ── */
.compare { background:var(--white); }
.compare__table-wrap { overflow-x:auto;margin-top:var(--space-lg); }
.compare__table { width:100%;border-collapse:collapse;font-size:var(--size-sm); }
.compare__table th { padding:var(--space-sm) var(--space-md);text-align:center;font-size:var(--size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border-bottom:2px solid var(--gray-200); }
.compare__table td { padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--gray-200); }
.col--feature { text-align:left;font-weight:600;color:var(--black);width:30%; }
.col--alone   { text-align:center;color:var(--gray-400);background:var(--gray-100); }
.col--leo     { text-align:center;background:#fff8f8; }
.col--leo span:first-child { font-weight:700;color:var(--white);background:var(--grad-blue);padding:2px 8px;border-radius:2px; }
.check--yes { color:var(--red);font-weight:700; }
.check--no  { color:var(--gray-400); }

/* ── FORM ── */
.form-section { background:var(--gray-100); }
.form-section__copy p { margin-bottom:var(--space-sm); }
.form-section__sub { font-style:italic;color:var(--red); }
.lead-form { background:var(--white);padding:var(--space-lg);border:1px solid var(--gray-200);display:flex;flex-direction:column;gap:var(--space-md); }
.form__group { display:flex;flex-direction:column;gap:0.375rem; }
.form__group label { font-size:var(--size-sm);font-weight:600;color:var(--black); }
.form__group input,
.form__group select,
.form__group textarea { padding:0.75rem 1rem;border:1.5px solid var(--gray-200);border-radius:var(--radius);font-family:var(--font);font-size:var(--size-base);color:var(--black);background:var(--white);transition:border-color var(--transition);width:100%; }
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus { outline:none;border-color:var(--red); }
.form__error { font-size:var(--size-xs);color:var(--gray-600);font-weight:600;display:none; }
.form__group.error input,
.form__group.error select { border-color:var(--red); }
.form__group.error .form__error { display:block; }
.form__honeypot { position:absolute;left:-9999px;opacity:0;pointer-events:none; }
.form__privacy { font-size:var(--size-xs);color:var(--gray-400);text-align:center; }
.form__privacy a { color:var(--red); }
.form__success { background:#f0fdf4;border:1px solid #86efac;color:#15803d;padding:var(--space-sm) var(--space-md);font-weight:600;display:none; }
.form__success.visible { display:block; }

/* ── HOW ── */
.how { background:var(--white); }
.how__steps { display:flex;flex-direction:column;margin-top:var(--space-lg);border:1px solid var(--gray-200); }
.how__step { display:flex;align-items:flex-start;gap:var(--space-lg);padding:var(--space-lg);border-bottom:1px solid var(--gray-200);transition:background var(--transition); }
.how__step:last-child { border-bottom:none; }
.how__step:hover { background:var(--gray-100); }
.how__step-num { font-size:var(--size-3xl);font-weight:900;letter-spacing:-0.04em;color:var(--red);flex-shrink:0;line-height:1;width:64px; }
.how__step h3 { margin-bottom:0.375rem; }

/* ── FAQ ── */
.faq { background:var(--gray-100); }
.faq__list { margin-top:var(--space-lg);border:1px solid var(--gray-200); }
.faq__item { border-bottom:1px solid var(--gray-200);background:var(--white); }
.faq__item:last-child { border-bottom:none; }
.faq__question { width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);text-align:left;gap:var(--space-sm); }
.faq__question-text { font-size:var(--size-base);font-weight:700;color:var(--black); }
.faq__icon { font-size:var(--size-xl);color:var(--red);flex-shrink:0;transition:transform 0.25s;line-height:1;font-weight:300; }
.faq__question[aria-expanded="true"] .faq__icon { transform:rotate(45deg); }
.faq__answer { max-height:0;overflow:hidden;transition:max-height 0.35s ease; }
.faq__answer-inner { padding:0 var(--space-lg) var(--space-md); }

/* ── ABOUT ── */
.about { background:var(--white); }
.about__lead { font-size:var(--size-lg);font-weight:600;color:var(--black);margin-bottom:var(--space-md); }
.about__body p { margin-bottom:var(--space-sm); }
.about__closing { font-weight:700;color:var(--black);font-size:var(--size-lg); }
.about__badges { display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-md); }
.badge { background:var(--gray-100);border:1px solid var(--gray-200);padding:0.375rem 0.875rem;font-size:var(--size-xs);font-weight:600;border-radius:100px; }

/* ── INSTAGRAM ── */
.instagram { background:var(--black-deep);color:var(--white);text-align:center; }
.instagram .section__label { color:var(--blue-light); }
.instagram .section__title { color:var(--white); }
.instagram__sub { color:rgba(255,255,255,0.45);margin-bottom:var(--space-lg); }
.instagram__feed { margin-bottom:var(--space-lg); }
.instagram__placeholder { display:block;text-decoration:none; }
.ig-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:3px;max-width:540px;margin:0 auto var(--space-md); }
.ig-tile { aspect-ratio:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);transition:background 0.2s; }
.ig-tile:hover { background:rgba(255,255,255,0.08); }
.ig-cta { color:rgba(255,255,255,0.35);font-size:var(--size-sm);transition:color 0.2s;margin-top:var(--space-sm); }
.instagram__placeholder:hover .ig-cta { color:var(--white); }

/* ── FOOTER ── */
.footer { background:var(--black-deep);border-top:1px solid rgba(255,255,255,0.07); }
.footer__inner { max-width:var(--max-width);margin:0 auto;padding:var(--space-xl) var(--space-lg);display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--space-xl); }
.footer__brand p { color:rgba(255,255,255,0.45);font-size:var(--size-sm); }
.footer__tagline { color:rgba(255,255,255,0.25)!important;font-size:var(--size-xs)!important;margin-top:4px; }
.footer__heading { font-size:var(--size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:var(--space-sm); }
.footer__links { display:flex;flex-direction:column;gap:var(--space-xs); }
.footer__links a { color:rgba(255,255,255,0.45);font-size:var(--size-sm);transition:color var(--transition); }
.footer__links a:hover { color:var(--white); }
.footer__bottom { border-top:1px solid rgba(255,255,255,0.06);padding:var(--space-md) var(--space-lg);max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:var(--size-xs);color:rgba(255,255,255,0.2); }
@media(max-width:768px){
  .footer__inner { grid-template-columns:1fr 1fr; }
  .section-inner--split { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .footer__inner { grid-template-columns:1fr; }
  .section-inner { padding:var(--space-xl) var(--space-sm); }
}

/* ── LANGUAGE TOGGLE (EN | ES) ── */
.nav__lang { display:inline-flex;align-items:center;gap:0.4rem;padding:0.3rem 0.6rem;border:1px solid var(--gray-200);border-radius:999px;background:transparent;cursor:pointer;line-height:1;user-select:none; }
.nav__lang-opt { font-size:var(--size-xs);font-weight:700;letter-spacing:0.04em;color:var(--gray-600);transition:color var(--transition);cursor:pointer; }
.nav__lang-opt:hover { color:var(--red); }
.nav__lang-opt.is-active { color:var(--black); }
.nav__lang-sep { font-size:var(--size-xs);color:var(--gray-200); }
@media(max-width:768px){
  .nav__lang { margin-left:auto;margin-right:0.5rem; }
}
@media(max-width:480px){
  .nav__lang { padding:0.25rem 0.5rem;gap:0.3rem; }
}