@font-face {
  font-family: 'Auneli Serif';
  src: url('/assets/fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Auneli Sans';
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --ink: #0a1730;
  --navy: #0b1d36;
  --paper: #f6efe6;
  --orange: #ff8b14;
  --icon-orange: #bc5000;
  --serif: 'Auneli Serif', Georgia, serif;
  --sans: 'Auneli Sans', Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --section-space: clamp(32px, 4.1vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
:where(h1, h2, h3, p) { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.dark-section a:focus-visible { outline-color: var(--orange); }
img { display: block; max-width: 100%; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 10; transform: translateY(-200%); padding: 12px; background: var(--paper); }
.skip-link:focus { transform: none; }

.site-shell { max-width: 1680px; margin-inline: auto; }
.site-header-row {
  min-height: clamp(64px, 7vw, 96px);
  margin-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  border-bottom: 1px solid #657080;
}
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.65vw, 24px); font-weight: 800; letter-spacing: .23em; white-space: nowrap; }
.brand img { width: clamp(30px, 3.2vw, 48px); height: auto; }
.mobile-nav { display: flex; align-items: center; gap: clamp(22px, 3.2vw, 50px); font-size: 16px; font-weight: 720; }
.mobile-nav a { display: flex; align-items: center; min-height: 44px; }
.mobile-nav a:hover { text-decoration: underline; text-underline-offset: .28em; }
.menu-toggle { display: none; }

.option-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
  min-height: clamp(450px, 43vw, 680px);
  padding-inline-start: var(--gutter);
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 1; align-self: center; padding-block: clamp(35px, 4.1vw, 66px); }
.hero-copy h1 { font: 610 clamp(49px, 7.15vw, 106px)/.91 var(--serif); letter-spacing: -.047em; }
.hero-copy h1 span { display: none; }
.hero-lead { max-width: 25ch; font: italic 490 clamp(23px, 2.25vw, 34px)/1.08 var(--serif); }
.hero-lead::before, .section-title::before, .need-card span::after {
  content: '';
  display: block;
  width: 45px;
  height: 4px;
  border-radius: 10px;
  background: var(--orange);
}
.hero-lead::before { width: 55px; margin: 19px 0 15px; }
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 49px;
  padding: 10px clamp(16px, 2vw, 27px);
  border-radius: 100px;
  background: #ff8b14;
  color: var(--ink);
  font: 780 clamp(15px, 1.35vw, 20px)/1.2 var(--sans);
  text-align: center;
}
.whatsapp-button:hover { background: #ffa039; }
.whatsapp-button svg { width: 24px; height: 24px; flex: none; color: #fffaf2; }
.hero-copy .whatsapp-button { margin-top: 23px; }

.hero-art { position: relative; min-width: 0; margin: 12px 0 8px -11%; container-type: inline-size; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-background-mobile { display: none; }
.hero-screens { position: absolute; inset: 0; }
.mock-window {
  position: absolute;
  overflow: hidden;
  border: 1px solid #a9b9cf;
  border-radius: clamp(5px, .9cqw, 10px);
  background: #f1f5fc;
  box-shadow: 0 10px 25px #03102265;
  font-size: 1.22cqw;
  line-height: 1.15;
}
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1.3cqw 1.65cqw; white-space: nowrap; }
.mock-bar b { display: flex; align-items: center; gap: .4cqw; font-size: 1.48cqw; }
.mock-wordmark { letter-spacing: .24em; }
.mock-site { width: 55%; left: 34%; top: 8%; }
.mock-site-cover {
  min-height: 16cqw;
  padding: 2.35cqw;
  background: linear-gradient(90deg, #eef5fe 3%, #eef5fecc 43%, transparent 76%), url('/assets/vitrine/hero-site.webp') right 52% / cover;
}
.mock-site-cover strong, .mock-site-cover small, .mock-site-cover span { display: block; }
.mock-site-cover strong { font-size: 2.7cqw; letter-spacing: -.04em; }
.mock-site-cover small { margin-top: .75cqw; font-size: 1.28cqw; }
.mock-site-cover span { width: max-content; margin-top: 1.3cqw; padding: .55cqw .8cqw; border-radius: 3px; background: var(--orange); font-size: 1cqw; font-weight: 700; }
.mock-store { width: 59%; left: 23%; top: 34%; }
.mock-store .mock-bar svg { width: 2.4cqw; height: 2.4cqw; stroke: var(--icon-orange); stroke-width: 3; fill: none; }
.mock-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1cqw; padding: .7cqw 1.6cqw 2cqw; }
.mock-products > div { overflow: hidden; border-radius: 4px; background: #e4ebf7; }
.mock-products > div::before { content: ''; display: block; aspect-ratio: 3 / 2; background: var(--product-photo) center / cover; }
.mock-product-fone { --product-photo: url('/assets/vitrine/loja-fone.webp'); }
.mock-product-relogio { --product-photo: url('/assets/vitrine/loja-relogio.webp'); }
.mock-product-caixa { --product-photo: url('/assets/vitrine/loja-caixa.webp'); }
.mock-products span { display: block; width: 55%; height: .45cqw; margin: .62cqw .85cqw; border-radius: 5px; background: #a8bbd3; }
.mock-products span:last-child { width: 37%; }
.mock-dashboard { width: 63%; left: 13%; bottom: 5%; display: grid; grid-template-columns: 12% minmax(0, 1fr); background: #132d52; }
.mock-sidebar { display: grid; align-content: start; justify-items: center; gap: 1.2cqw; padding: 1.3cqw .6cqw; color: #eaf4ff; }
.mock-sidebar svg { width: 3.6cqw; height: 3.3cqw; padding: .6cqw; border-radius: 3px; fill: none; stroke: currentColor; stroke-width: 3; }
.mock-sidebar svg:nth-child(2) { color: var(--ink); background: var(--orange); }
.mock-dashboard .mock-bar { color: #f5f9ff; }
.mock-dashboard-body { padding: 1.15cqw; background: #f1f5fc; }
.mock-kpis, .mock-charts { display: grid; gap: .7cqw; }
.mock-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mock-kpis > div { padding: .7cqw; border-radius: 3px; background: #e2eaf7; white-space: nowrap; }
.mock-kpis strong { display: block; margin-top: .22cqw; font-size: 1.9cqw; letter-spacing: -.035em; }
.mock-charts { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); margin-top: .85cqw; }
.mock-charts svg { display: block; width: 100%; height: 10.5cqw; padding: .45cqw; border-radius: 3px; background: #e8f0fc; }

.option-section { padding: var(--section-space) var(--gutter); }
.dark-section { background: var(--navy); color: var(--paper); }
.section-title { font: 565 clamp(35px, 4.05vw, 60px)/1 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
.section-title::before { margin-bottom: 13px; }
.solutions-grid, .needs-grid, .projects-grid { display: grid; gap: clamp(14px, 1.5vw, 24px); margin-top: clamp(18px, 2vw, 30px); }
.solutions-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solution-card {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  padding: 18px 12px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}
.solution-card svg { width: 45px; height: 45px; flex: none; fill: none; stroke: var(--icon-orange); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.solution-card h3 { font: 645 clamp(23px, 2.2vw, 34px)/1 var(--serif); letter-spacing: -.025em; }
.solution-card p { max-width: 22ch; margin: 5px auto 0; font: 490 clamp(15px, 1.32vw, 20px)/1.15 var(--serif); }

.needs-grid, .projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.need-site { --photo: url('/assets/vitrine/necessidade-site.webp'); }
.need-store { --photo: url('/assets/vitrine/necessidade-loja.webp'); }
.need-system { --photo: url('/assets/vitrine/necessidade-sistema.webp'); }
.need-card {
  display: flex;
  align-items: flex-end;
  min-height: clamp(160px, 17vw, 255px);
  border-radius: 13px;
  padding: clamp(17px, 2vw, 30px);
  background: linear-gradient(90deg, #10100cc9, #10100c28 75%), var(--photo) center / cover no-repeat #30281f;
  color: #fff9f0;
}
.need-card span { font: 595 clamp(27px, 2.95vw, 44px)/.95 var(--serif); letter-spacing: -.026em; }
.need-card span::after { width: 32px; height: 3px; margin-top: 10px; }
.need-card:hover span { text-decoration: underline; text-underline-offset: .14em; }
.project-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #f5eee355; border-radius: 13px; background: var(--paper); color: var(--ink); }
.project-card img { width: 100%; height: auto; aspect-ratio: 1.86; object-fit: cover; }
.project-card:hover .project-caption { text-decoration: underline; text-underline-offset: .2em; }
.project-caption { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 10px 13px; font-size: clamp(13px, 1.15vw, 17px); font-weight: 720; }
.project-caption svg { width: 19px; height: 19px; flex: none; color: var(--icon-orange); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.about { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 52px); align-items: center; }
.about p { max-width: 32ch; margin-top: 10px; font: italic 490 clamp(22px, 2.2vw, 33px)/1.08 var(--serif); }
.about img { width: 100%; height: auto; aspect-ratio: 2.45; object-fit: cover; object-position: center 57%; border-radius: 13px; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: clamp(25px, 3.2vw, 44px); }
.contact .section-title { font-size: clamp(32px, 3.25vw, 51px); }
.contact .whatsapp-button { flex: none; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(13px, 2.2vw, 34px); min-height: 62px; padding: 12px var(--gutter); }
.site-footer .brand { gap: 8px; font-size: 13px; }
.site-footer .brand img { width: 25px; }
.site-footer > span { border-left: 1px solid #8993a0; padding-left: clamp(13px, 2.2vw, 34px); font-size: 12px; line-height: 1.25; font-weight: 590; }

.footer-links { display: flex; gap: 16px; margin-inline-start: auto; font-size: 13px; }
.footer-links a { display: flex; align-items: center; min-height: 32px; text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 960px) {
  .site-header-row { min-height: 65px; flex-wrap: wrap; }
  .brand { gap: 10px; font-size: 16px; }
  .brand img { width: 31px; }
  .mobile-nav { flex-wrap: wrap; gap: 4px 16px; font-size: 15px; }
  .navigation-ready .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .navigation-ready .mobile-nav { display: none; position: absolute; z-index: 3; top: 100%; right: 0; min-width: 168px; padding: 5px 14px; background: var(--paper); border: 1px solid #657080; border-radius: 0 0 12px 12px; }
  .navigation-ready .mobile-nav.is-open { display: grid; }
  .solution-card { min-height: 84px; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 11px 13px; text-align: left; }
  .solution-card svg { width: 34px; height: 34px; }
  .solution-card h3 { font: 750 18px/1.1 var(--sans); }
  .solution-card p { margin: 3px 0 0; font: 520 14px/1.24 var(--sans); }
  .solutions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .needs-grid, .projects-grid { gap: 12px; }
  .need-card { min-height: 145px; }
  .about { gap: 16px; }
  .contact { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .option-hero { display: block; min-height: 0; padding-inline: 0; }
  .hero-copy { padding: clamp(23px, 5vw, 42px) var(--gutter) 0; }
  .hero-copy h1 { font-size: clamp(48px, 11.25vw, 80px); }
  .hero-copy h1 span { display: inline; }
  .hero-lead { max-width: 27ch; font-size: clamp(21px, 5.1vw, 28px); }
  .hero-lead::before { width: 42px; margin: 13px 0 11px; }
  .hero-copy .whatsapp-button { margin-top: 16px; }
  .hero-art { min-height: clamp(180px, 54vw, 350px); width: 100%; margin: 12px auto 8px; }
  .hero-background-desktop { display: none; }
  .hero-background-mobile { display: block; }
  .mock-site, .mock-store { display: none; }
  .mock-dashboard { width: 86%; left: 6%; bottom: 10%; }
  .mock-window { font-size: 2.65cqw; }
  .mock-bar { padding: 2.15cqw 2.7cqw; }
  .mock-bar b { font-size: 3.1cqw; }
  .mock-sidebar { gap: 1.8cqw; padding: 2cqw 1cqw; }
  .mock-sidebar svg { width: 6.8cqw; height: 6.1cqw; padding: 1.25cqw; }
  .mock-dashboard-body { padding: 1.6cqw; }
  .mock-kpis, .mock-charts { gap: 1.05cqw; }
  .mock-kpis > div { padding: 1.35cqw 1.15cqw; }
  .mock-kpis strong { margin-top: .45cqw; font-size: 3.8cqw; }
  .mock-charts { margin-top: 1.25cqw; }
  .mock-charts svg { height: clamp(48px, 16cqw, 106px); }
}

@media (max-width: 560px) {
  .hero-copy .whatsapp-button { display: flex; }
  .option-section { padding-block: 28px 32px; }
  .section-title { font-size: clamp(30px, 8.3vw, 44px); }
  .section-title::before { width: 36px; margin-bottom: 9px; }
  .solutions-grid, .needs-grid, .projects-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 16px; }
  .solution-card { min-height: 63px; }
  .solution-card p { max-width: none; }
  .need-card { min-height: 108px; align-items: center; }
  .need-card:not(.need-system) br { display: none; }
  .project-card img { aspect-ratio: 3.35; }
  .project-caption { padding-inline: 11px; }
  .about { grid-template-columns: 1fr; }
  .about p { font-size: 22px; }
  .about img { aspect-ratio: 2.65; }
  .contact { display: grid; justify-items: start; gap: 16px; }
  .contact .section-title { text-wrap: initial; }
  .footer-links { width: 100%; margin-inline-start: 0; }
}