/* Test theme based on the public Autotrac website, consulted 16 October 2026.
   Tokens and sources: DESIGN-SYSTEM-AUTOTRAC.md. Existing content and flows stay semantic. */
@font-face {
  font-family: 'Autotrac Gilroy'; src: url('autotrac-gilroy-regular.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Autotrac Gilroy'; src: url('autotrac-gilroy-medium.woff2') format('woff2');
  font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Autotrac Gilroy'; src: url('autotrac-gilroy-bold.woff2') format('woff2');
  font-style: normal; font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Autotrac Open Sans'; src: url('autotrac-open-sans-latin.woff2') format('woff2');
  font-style: normal; font-weight: 400 700; font-display: swap;
}
:root[data-design-system='autotrac'] {
  --at-blue-deep: #024663;
  --at-blue-strong: #036289;
  --at-blue: #007caf;
  --at-blue-bright: #0093d0;
  --at-blue-soft: #f1f9fd;
  --at-blue-light: #c2edff;
  --at-lime: #b1cc3d;
  --at-lime-soft: #f6f9ec;
  --at-ink: #1c1e1e;
  --at-text: #595959;
  --at-line: #d7d7d7;
  --at-radius: 32px;
  --at-radius-small: 16px;
  --at-heading: 'Autotrac Gilroy', sans-serif;
  --at-body: 'Autotrac Open Sans', sans-serif;
  --at-shadow: 0 24px 48px -24px #09090926;
  --navy: var(--at-blue-strong);
  --blue: var(--at-blue);
  --sky: var(--at-blue-soft);
  --ink: var(--at-ink);
  --muted: var(--at-text);
  --line: var(--at-line);
  --paper: #fff;
  --button-radius: var(--at-radius);
}
html { scrollbar-color: #007caf #f1f9fd; }
body { background: #fff; color: var(--at-ink); font-family: var(--at-heading); line-height: 1.5; }
::selection { background: var(--at-lime); color: var(--at-blue-deep); }
h1, h2, h3, .brand, .portal-benefits dt, .operation-list strong,
.portrait-photo figcaption strong { font-family: var(--at-heading); }
h2 { color: var(--at-blue-strong); font-weight: 700; letter-spacing: -.025em; }
h3 { color: var(--at-blue-strong); font-weight: 700; }
p, dd, li, label, select, input, button, .btn, .offer-choice, .fine,
.phone-link, .instagram-link, .footer-row { font-family: var(--at-body); }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible,
input:focus-visible { outline: 3px solid var(--at-blue-deep); outline-offset: 4px; }
.skip { background: var(--at-blue-deep); }

/* White navigation, with the supplied Camptrac signature above its descriptor. */
header, header.motion-scrolled { background: #fff; color: var(--at-ink); border-bottom: 1px solid #ededed; }
header .brand { color: var(--at-blue-strong); }
header .brand-technology { font-weight: 700; }
header nav .links { gap: 20px; }
header .links a { font-weight: 700; font-size: 12px; text-transform: uppercase; }
header .links a:hover, header .links a[aria-current] { color: var(--at-blue); }
.links a::after { height: 2px; background: var(--at-lime); }
.reading-progress > span { background: var(--at-blue); }
.nav-toggle { color: var(--at-blue-strong); border-color: var(--at-blue); border-radius: 32px; font-weight: 600; }
header[data-menu-open] .nav-toggle { color: var(--at-blue-deep); background: var(--at-blue-soft); }
header nav .links a[aria-current='location'] { background: var(--at-blue-soft); color: var(--at-blue-deep); }
header nav .links a:hover, header nav .links a:focus-visible { background: var(--at-blue-soft); }

/* Image-led panel with the rounded silhouette used on the Autotrac homepage. */
.cinema {
  width: calc(100% - 48px); max-width: 1424px; margin: 8px auto 0;
  border-radius: var(--at-radius); min-height: clamp(650px, 78svh, 820px);
  padding: 64px 0; background: var(--at-blue-deep);
}
.cinema-shade {
  background: linear-gradient(90deg, #02364def 0%, #02364dbf 30%, #02364d24 78%),
    linear-gradient(0deg, #02364de6 0%, transparent 55%);
}
.cinema h1 { font: 700 clamp(48px, 5.1vw, 74px)/1.04 var(--at-heading); letter-spacing: -.025em; max-width: 740px; color: #fff; }
.motion-line-emphasis { color: #fff; }
.motion-line-emphasis:last-child { color: var(--at-lime); }
.cinema .intro { color: #fff; font-size: 16px; line-height: 1.8; max-width: 510px; }
.cinema .fine, .cinema-role { color: #e2f3fa; }
.cinema-footer { border-color: #ffffff40; margin-top: 58px; }
.cinema-role { font-size: 11px; }
.cinema-brands.brand-logos > .starlink-wordmark { font-family: var(--at-heading); }
.cinema a:focus-visible, #contato .btn:focus-visible, footer a:focus-visible { outline-color: var(--at-lime); }

/* Brand blue pills retain the recognizable WhatsApp mark. */
body .btn.btn-whatsapp {
  background: var(--at-blue) !important; color: #fff !important;
  border: 2px solid var(--at-blue) !important; border-radius: var(--at-radius);
  box-shadow: var(--at-shadow); padding: 16px 23px; min-height: 56px;
  font-family: var(--at-body); font-size: 14px; font-weight: 600; text-transform: uppercase;
  transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--button-ease);
}
body .btn.btn-whatsapp::before { display: none; }
body .btn.btn-whatsapp:hover {
  background: var(--at-blue-deep) !important; border-color: var(--at-blue-deep) !important;
  box-shadow: var(--at-shadow); transform: translateY(-1px);
}
body .btn.btn-whatsapp:active, body .btn.btn-whatsapp:hover:active { transform: scale(.985); }
header .btn.btn-whatsapp { padding: 11px 17px; min-height: 46px; font-size: 11px; }
.cinema .cinema-more {
  background: #ffffff0a; color: #fff; border: 2px solid #fff; border-radius: var(--at-radius);
  font-family: var(--at-body); font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.cinema .cinema-more:hover, .cinema .cinema-more:focus-visible { background: #ffffff1f; border-color: #fff; }
.cinema-more > svg { color: var(--at-lime); }
.offer-choice {
  background: #fff; color: var(--at-blue-strong); border: 2px solid var(--at-blue);
  border-radius: var(--at-radius); padding: 11px 15px 11px 19px;
  gap: 14px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease;
}
.offer-choice::before, .offer-choice::after { display: none; }
.offer-choice > svg { width: 25px; height: 25px; flex-basis: 25px; padding: 4px; background: var(--at-lime); color: var(--at-blue-deep); border-radius: 50%; }
.offer-choice:hover, .offer-choice:focus-visible { background: var(--at-blue); color: #fff; }
.offer-choice:hover > span, .offer-choice:hover > svg { transform: none; }

/* The purchase conditions become a quick-reading strip under the opening. */
.purchase-benefits { position: relative; z-index: 1; margin-top: -24px; background: transparent; }
.purchase-benefits dl { padding: 0; gap: 0; background: #fff; border: 1px solid var(--at-line); border-radius: 24px; box-shadow: var(--at-shadow); overflow: hidden; }
.purchase-benefits dl > div { padding: 26px 28px; }
.purchase-benefits dl > div + div { border-left: 1px solid var(--at-line); }
.purchase-benefits dt { color: var(--at-blue-strong); font-family: var(--at-heading); font-weight: 700; }
.purchase-benefits dd { color: var(--at-text); }
.feature { border-top-color: var(--at-lime); }
.feature h3 { font-size: 24px; }
.heading p, .feature p, .offers-intro, .offer-row p, .about p { color: var(--at-text); }
.offer-row h3 { color: var(--at-blue-strong); }
.portal-benefits dt { color: var(--at-blue-strong); font-weight: 700; }
.portal-benefits dd { color: var(--at-text); }
.project-details summary { color: var(--at-blue-strong); }
.applications { background: var(--at-blue-soft); }
.operation-list strong { font-weight: 700; color: var(--at-blue-strong); }
.operation-list small { color: var(--at-text); }
.operation-list a { border-bottom-color: #02466333; }
.operation-list a[data-selected] { color: var(--at-blue-strong); }
.operation-list a[data-selected] small { color: var(--at-blue-strong); }
.operation-list .operation-state { background: var(--at-lime-soft); color: var(--at-blue-deep); border: 1px solid var(--at-lime); }
#solucoes { background: var(--at-blue-soft); color: var(--at-blue-strong); }
#solucoes .heading p, #solucoes .solution p { color: var(--at-text); }
.solution { border-top-color: #02466333; }
.solution h3 { color: var(--at-blue-strong); font-size: 23px; }
.portrait.portrait-photo { border-radius: var(--at-radius); }
.portrait-photo figcaption strong { font-weight: 700; }
.steps b { color: var(--at-blue-strong); }
.faq summary { color: var(--at-blue-strong); font-family: var(--at-heading); font-weight: 700; font-size: 18px; }
.faq summary::after { color: var(--at-blue); }
.faq details p { color: var(--at-text); }
.faq-source, .portal-note, .offers-source { color: var(--at-text); }

/* The requested cloud interaction remains within the same corporate form language. */
#contato { background: var(--at-blue-deep); }
#contato .contact-copy h2 { color: #fff; font-weight: 700; }
#contato .contact-copy > p, .contact-route li, .contact-route small { color: #e2f3fa; }
.contact-route svg { color: var(--at-lime); }
#contato .contact-copy .phone, #contato .contact-copy .instagram-contact { color: #e2f3fa; }
.cloud-form { background: #fff; border-radius: var(--at-radius); box-shadow: var(--at-shadow); }
#contato .cloud-form legend { color: var(--at-blue-strong); font-family: var(--at-heading); font-size: 26px; font-weight: 700; }
#contato .cloud-form .contact-helper, #contato .cloud-form .contact-next-step, .cloud-form label > span { color: var(--at-text); }
#contato .cloud-form label { color: var(--at-blue-deep); }
#contato .cloud-form input, #contato .cloud-form select {
  border: 1px solid #036289b3; border-radius: var(--at-radius); background: #fff;
  color: var(--at-text); font-family: var(--at-body); font-size: 16px;
  min-height: 54px; padding: 13px 18px; box-shadow: 0 2px 0 #00000012; caret-color: var(--at-blue);
}
#contato .cloud-form select { padding-right: 30px; }
#contato .cloud-form input::placeholder { color: var(--at-text); }
#contato .cloud-form input:focus-visible, #contato .cloud-form select:focus-visible {
  outline-color: var(--at-blue); border-color: var(--at-blue); box-shadow: none; background: #fff;
}
#contato .cloud-form .message-preview summary { color: var(--at-blue-strong); }
#contato .cloud-form .message-preview p { color: var(--at-blue-deep); background: var(--at-blue-soft); border-radius: var(--at-radius-small); }
.cloud-pupil { background: var(--at-blue-deep); }
.cloud-watch[data-blink] .cloud-eye, .cloud-watch[data-typing] .cloud-eye { background: var(--at-blue-deep); }

footer.wrap {
  width: 100%; max-width: none; background: var(--at-blue-deep); border: 0;
  padding-inline: max(54px, calc((100vw - 1172px) / 2));
}
footer .brand, footer .brand i, footer .footer-row, footer p { color: #fff; }
footer .footer-row { padding-top: 24px; border-top: 1px solid #ffffff40; }
footer p { line-height: 1.8; font-size: 12px; color: #e2f3fa; }
.footer-brands .logo-autotrac { width: 177px; height: 26px; }

@media (max-width: 1050px) {
  header nav .links a { background: var(--at-blue-soft); }
  .cinema { width: calc(100% - 32px); min-height: 650px; padding-top: 56px; }
  .cinema h1 { font-size: clamp(46px, 6.4vw, 64px); }
  .cinema-content { padding-inline: 36px; }
  .cinema .actions { gap: 15px; }
  .purchase-benefits dl > div { padding: 23px; }
}
@media (max-width: 760px) {
  header nav { min-height: 118px; }
  header .brand-technology { font-size: clamp(16px, 4.6vw, 18px); }
  .cinema { width: calc(100% - 24px); min-height: 0; margin-top: 4px; border-radius: 24px; padding: 220px 0 28px; }
  .cinema-content { padding-inline: 20px; }
  .cinema-image { height: 100%; object-position: 72% top; }
  .cinema-shade { background: linear-gradient(0deg, #02364d 3%, #02364df5 40%, #02364d40 80%, transparent); }
  .cinema h1 { font-size: clamp(36px, 8.8vw, 58px); line-height: 1.08; }
  .cinema .intro { font-size: 16px; line-height: 1.75; }
  .cinema .actions { gap: 12px; align-items: stretch; }
  body .cinema .btn.btn-whatsapp, body .portal-layout .btn.btn-whatsapp,
  body #contato .btn.btn-whatsapp, body .mobile-contact.btn.btn-whatsapp { font-size: 14px; padding: 15px 12px; gap: 9px; }
  .cinema .cinema-more { min-height: 54px; font-size: 11px; padding: 13px 10px; }
  .cinema-footer { margin-top: 36px; }
  .cinema .fine { font-size: 12px; }
  .purchase-benefits { margin-top: 20px; }
  .purchase-benefits dl { border-radius: 24px; }
  .purchase-benefits dl > div { padding: 21px; }
  .purchase-benefits dl > div + div { border-left: 0; border-top: 1px solid var(--at-line); }
  .heading h2, .about h2 { font-size: 34px; }
  .feature h3, .solution h3, .portal-benefits dt { font-size: 22px; }
  .offer-choice { font-size: 14px; }
  .faq summary { font-size: 17px; }
  .cloud-form { border-radius: 24px; }
  #contato .cloud-form legend { font-size: 24px; }
  footer.wrap { padding-inline: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  body .btn.btn-whatsapp, .offer-choice { transition: none; }
  body .btn.btn-whatsapp:hover, body .btn.btn-whatsapp:active,
  body .btn.btn-whatsapp:hover:active { transform: none; }
}
@media (forced-colors: active) {
  body .btn.btn-whatsapp, .offer-choice { border-color: ButtonText !important; }
}