@import url('./tokens.css');
  
@font-face {
  font-family:Montserrat;
  src:url('../fonts/Montserrat-variable.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap
}

* {
  box-sizing:border-box
}
html {
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--color-surface);
  color:var(--color-text);
  font:400 1rem/1.65 Montserrat,Arial,sans-serif
}
img,svg {
  max-width:100%
}
img {
  display:block;
  height:auto
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit;
  font-weight:600;
  text-underline-offset:4px
}
a:hover {
  text-decoration:underline
}
button:disabled {
  cursor:default;
  opacity:.6
}
h1,h2,h3,h4,h5,h6 {
  margin:0 0 var(--space-16);
  color:var(--color-primary);
  overflow-wrap:break-word
}
h1 {
  font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:700
}
h2 {
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:700
}
h3 {
  font-size:clamp(1.5rem,2.6vw,2.25rem);
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:600
}
h4 {
  font-size:clamp(1.25rem,2vw,1.625rem);
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:600
}
h5 {
  font-size:clamp(1.125rem,1.6vw,1.375rem);
  line-height:1.3;
  font-weight:600
}
h6 {
  font-size:1rem;
  line-height:1.35;
  letter-spacing:.01em;
  font-weight:600
}
p {
  margin:0 0 24px
}
small,.small {
  font-size:.875rem;
  line-height:1.55;
  letter-spacing:.005em
}
.body-lg {
  font-size:clamp(1.0625rem,1.4vw,1.125rem);
  line-height:1.7
}
.muted {
  color:var(--color-text-muted)
}
:focus-visible {
  outline:2px solid var(--color-primary);
  outline-offset:4px;
  box-shadow:0 0 0 4px var(--color-focus)
}
[hidden] {
  display:none!important
}
.container {
  width:min(100% - 32px,1280px);
  margin-inline:auto
}
.reading {
  max-width:760px
}
.section {
  padding-block:48px
}
.section--cream {
  background:var(--color-cream)
}
.stack>*+* {
  margin-top:24px
}
.grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px
}
.grid>* {
  min-width:0
}
.grid--cards {
  gap:24px
}
.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}
.icon--small {
  width:18px;
  height:18px
}
.icon-box {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--color-primary-soft);
  border-radius:12px;
  margin-bottom:16px
}
.button {
  min-height:48px;
  min-width:44px;
  padding:12px 24px;
  border:1px solid transparent;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  transition:background var(--transition-fast),box-shadow var(--transition-fast)
}
.button:hover {
  text-decoration:none
}
.button--primary {
  background:var(--color-primary);
  color:white
}
.button--primary:hover {
  background:var(--color-primary-hover)
}
.button--accent {
  background:var(--color-accent);
  color:var(--color-primary)
}
.button--accent:hover {
  background:var(--color-sand)
}
.button--secondary {
  border-color:var(--color-primary);
  background:transparent;
  color:var(--color-primary)
}
.actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap
}
.skip-link {
  position:absolute;
  top:8px;
  left:16px;
  z-index:20;
  transform:translateY(-200%)
}
.skip-link:focus {
  transform:none
}
.site-header {
  border-bottom:var(--border-default);
  position:relative;
  background:white;
  z-index:10
}
.header-inner {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
  gap:16px
}
.brand {
  display:block;
  padding:6px 8px;
  flex:none
}
.brand img {
  width:140px
}
.menu-toggle,.disclosure {
  border:0;
  background:transparent;
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--color-primary);
  border-radius:8px
}
.menu-toggle {
  gap:8px
}
.site-nav {
  width:100%;
  padding-block:16px
}
.nav-list,.nav-panel ul,.footer-links {
  list-style:none;
  padding:0;
  margin:0
}
.nav-list>li {
  margin-block:4px
}
.nav-item {
  display:flex;
  align-items:center;
  justify-content:space-between
}
.nav-item>a,.nav-list>li>a:not(.button) {
  display:block;
  padding:10px 8px;
  min-height:44px;
  text-decoration:none
}
.nav-item>a:hover,.nav-list>li>a:hover {
  text-decoration:underline
}
.nav-panel {
  padding:24px;
  background:white;
  border-radius:16px;
  box-shadow:var(--shadow-md)
}
.nav-panel .nav-group-title {
  color:var(--color-primary);
  font-weight:700;
  overflow-wrap:break-word;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:0;
  margin:0 0 8px
}
.nav-panel a {
  display:block;
  padding:10px 0;
  min-height:44px;
  text-decoration:none;
  font-size:.875rem
}
.nav-panel a:hover {
  text-decoration:underline
}
.nav-panel-grid {
  display:grid;
  gap:24px
}
.breadcrumb {
  margin-bottom:24px;
  font-size:.875rem;
  color:var(--color-text-muted)
}
.breadcrumb ol {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.breadcrumb li+li:before {
  content:'/';
  margin-right:8px
}
.breadcrumb [aria-current] {
  color:var(--color-primary)
}
.breadcrumb a {
  display:inline-block;
  min-height:44px;
  padding-block:10px
}
.card {
  background:white;
  border-radius:16px;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:box-shadow var(--transition-base)
}
.card:hover {
  box-shadow:var(--shadow-md)
}
.card-content {
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1
}
.card h3 {
  font-size:1.5rem
}
.card .card-link {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px
}
.card--differential {
  background:var(--color-cream);
  padding:24px;
  box-shadow:none
}
.media-slot {
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-surface-subtle);
  color:var(--color-text-muted);
  padding:24px;
  text-align:center;
  overflow-wrap:anywhere;
  width:100%
}
.media-slot--hero {
  aspect-ratio:16/9
}
.media-slot--editorial {
  aspect-ratio:3/2
}
.highlight {
  border-left:4px solid var(--color-accent);
  background:var(--color-primary-soft);
  border-radius:12px;
  padding:24px
}
.highlight p:last-child {
  margin-bottom:0
}
.form-card {
  padding:24px;
  border-radius:16px;
  box-shadow:var(--shadow-md);
  background:white
}
.form-fields {
  display:grid;
  gap:16px
}
.field label {
  display:block;
  font-weight:600;
  margin-bottom:8px
}
.field input,.field select,.field textarea {
  width:100%;
  min-height:48px;
  border:var(--border-default);
  border-radius:12px;
  padding:12px 16px;
  background:white;
  color:var(--color-text)
}
.field textarea {
  min-height:140px;
  resize:vertical
}
.field input:hover,.field select:hover,.field textarea:hover {
  border-color:var(--color-text-muted)
}
.field [aria-invalid=true] {
  border-color:var(--color-error)
}
.field-error {
  display:block;
  color:var(--color-error);
  font-size:.875rem;
  min-height:1.55em
}
.error-summary {
  border:2px solid var(--color-error);
  border-radius:12px;
  padding:16px;
  margin-bottom:24px
}
.error-summary p {
  margin-bottom:8px
}
.error-summary a {
  display:inline-block;
  min-height:44px;
  padding-block:8px
}
.form-status {
  margin:16px 0 0
}
.privacy-notice {
  margin-top:24px
}
.faq-item {
  border-bottom:var(--border-default)
}
.faq-trigger {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  color:var(--color-primary);
  font-weight:600;
  min-height:44px
}
.faq-trigger[aria-expanded=true] .icon {
  transform:rotate(180deg)
}
.faq-answer {
  max-width:760px;
  padding-bottom:24px
}
.faq-answer p {
  margin:0
}
.table-wrap {
  overflow-x:auto;
  border:var(--border-default);
  border-radius:12px
}
.table-wrap:focus-visible {
  outline-offset:-6px
}
table {
  border-collapse:collapse;
  width:100%;
  min-width:480px
}
caption {
  text-align:left;
  padding:16px;
  font-weight:600
}
th,td {
  text-align:left;
  padding:16px;
  border-top:var(--border-default);
  vertical-align:top
}
thead {
  background:var(--color-cream)
}
.cta-band {
  padding:32px;
  border-radius:24px;
  background:var(--color-primary);
  color:white;
  display:flex;
  flex-direction:column;
  gap:24px
}
.cta-band h2 {
  color:white
}
.cta-band p {
  margin:0
}
.site-footer {
  background:var(--color-primary);
  color:white;
  padding-block:48px
}
.site-footer .footer-group-title {
  margin:0 0 var(--space-16);
  font-weight:700;
  overflow-wrap:break-word;
  font-size:1rem;
  letter-spacing:0;
  color:white;
  line-height:1.5
}
.site-footer .brand img {
  width:190px
}
.footer-grid {
  display:grid;
  gap:32px
}
.footer-links a {
  display:inline-block;
  min-height:44px;
  padding-block:8px;
  font-size:.875rem;
  text-decoration:none
}
.footer-links a:hover {
  color:var(--color-sand);
  text-decoration:underline
}
.site-footer :focus-visible,.cta-band :focus-visible {
  outline-color:white
}
.preview-intro {
  border-bottom:var(--border-default)
}
.preview-index {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:24px
}
.preview-index a {
  min-height:44px;
  padding-block:8px
}
.swatches {
  display:flex;
  flex-wrap:wrap;
  gap:16px
}
.swatch {
  padding:16px;
  min-width:130px;
  border:var(--border-default);
  border-radius:8px
}
.prose h2 {
  margin-top:48px
}
.prose blockquote {
  border-left:4px solid var(--color-accent);
  padding-left:24px;
  font-size:1.125rem;
  line-height:1.7;
  margin:24px 0
}
.prose li+li {
  margin-top:8px
}

@media(min-width:768px) {
  .container {
  width:min(100% - 48px,1280px)
}
.section {
  padding-block:64px
}
.grid {
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:24px
}
.grid--cards {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.grid--two {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.form-card {
  padding:32px
}
.footer-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.header-inner {
  min-height:80px
}
.brand {
  padding-block:8px
}
.brand img {
  width:177px
}
.cta-band {
  flex-direction:row;
  align-items:center;
  justify-content:space-between
}
.cta-band .button {
  flex:none
}

}

@media(min-width:1024px) {
  .container {
  width:min(100% - 64px,1280px)
}

}

@media(min-width:1280px) {
  .section {
  padding-block:96px
}
.grid {
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:32px
}
.grid--cards {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}
.grid--two {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.footer-grid {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
}

/* Navegação HTML nativa: layout idêntico com ou sem JavaScript. */
.site-header .header-inner { display:block; }
.site-header .brand { width:max-content; }
.nav-shell { width:100%; }
.nav-shell > .menu-toggle { position:absolute; top:10px; right:16px; }
summary.menu-toggle, summary.disclosure { list-style:none; }
summary::-webkit-details-marker { display:none; }
.nav-group-item { position:relative; }
.site-nav .nav-list > li > a:not(.button) { display:flex; align-items:center; gap:8px; padding:10px 8px; }
.site-nav .nav-list > .nav-group-item > .nav-parent { padding-right:56px; }
.nav-group > .disclosure { position:absolute; top:0; right:0; }
.nav-group[open] > .disclosure .icon { transform:rotate(180deg); }
.site-header .nav-icon { width:18px; height:18px; }
.nav-group .nav-panel { margin-block:8px 16px; }
.faq-item > h3 { margin:0; line-height:1.5; letter-spacing:0; }
.faq-trigger { font-size:1rem; line-height:1.5; font-weight:600; padding-block:16px; }
.faq-answer { padding-bottom:20px; }
@media(min-width:768px) {
  .nav-shell > .menu-toggle { top:18px; right:24px; }
  .faq-trigger { font-size:1.125rem; padding-block:20px; }
}
@media(min-width:1024px) {
  .nav-shell > .menu-toggle { right:32px; }
}
@media(min-width:1280px) {
  .site-header .header-inner { display:flex; flex-wrap:nowrap; gap:24px; }
  .site-header .brand img { width:168px; }
  .nav-shell { width:auto; margin-left:auto; }
  .nav-shell > .menu-toggle { display:none; }
  .site-nav { width:auto; padding:0; }
  .site-nav .nav-list { display:flex; align-items:center; gap:8px; }
  .site-nav .nav-list > li > a:not(.button) { font-size:.875rem; padding-inline:6px; gap:7px; white-space:nowrap; }
  .site-nav .nav-list > li > .button { padding-inline:20px; margin-left:12px; white-space:nowrap; }
  .nav-group-item { position:static; display:flex; align-items:center; }
  .site-nav .nav-list > .nav-group-item > .nav-parent { padding-right:0; }
  .nav-group > .disclosure { position:static; }
  .nav-group .nav-panel { position:absolute; top:100%; left:32px; right:32px; padding:32px; margin:0; }
  .nav-panel-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nav-group-item:has(.nav-panel--business) { position:relative; }
  .nav-group .nav-panel--business { left:0; right:auto; top:calc(100% + 10px); width:380px; border-radius:12px; }
}

.whatsapp-float{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:40;width:60px;height:60px;display:grid;place-items:center;border:0;border-radius:50%;background:#25D366;color:white;box-shadow:0 6px 20px rgba(15,59,95,.25);text-decoration:none;cursor:pointer;transition:transform 180ms ease,box-shadow 180ms ease}
.whatsapp-float svg{width:30px;height:30px}
.whatsapp-float[aria-disabled="true"]{cursor:default}
.whatsapp-float:not([aria-disabled="true"]):hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,59,95,.3)}
.whatsapp-float:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px}
.whatsapp-panel{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(max(20px,env(safe-area-inset-bottom)) + 76px);z-index:41;width:min(360px,calc(100vw - 40px));max-height:calc(100dvh - 116px);overflow:auto;background:white;border-radius:18px;box-shadow:0 16px 50px rgba(15,59,95,.25);border:1px solid #d5e4dc}
.whatsapp-panel[hidden]{display:none}
.whatsapp-header{display:flex;align-items:center;gap:12px;padding:18px 16px;background:#075E54;color:white}
.whatsapp-header img{width:44px;height:44px;border-radius:50%;flex:none}
.whatsapp-header .whatsapp-title{font-size:1rem;font-weight:700;line-height:1.4;letter-spacing:-.025em;color:white;margin:0;overflow-wrap:break-word}
.whatsapp-header p{font-size:.75rem;margin:2px 0 0;color:white}
.whatsapp-close{display:grid;place-items:center;background:transparent;color:white;border:0;min-width:44px;min-height:44px;margin-left:auto;cursor:pointer}
.whatsapp-close svg{width:20px;height:20px}
.whatsapp-conversation{padding:24px 18px;background:#ECE5DD}
.whatsapp-greeting{display:inline-block;background:white;border-radius:0 12px 12px 12px;padding:14px 16px;font-size:.9375rem;line-height:1.6;margin:0;box-shadow:0 1px 3px rgba(0,0,0,.06);color:#19382e}
.whatsapp-compose{padding:18px;background:white}
.whatsapp-compose label{display:block;font-size:.875rem;font-weight:600;margin-bottom:8px}
.whatsapp-compose textarea{display:block;box-sizing:border-box;resize:vertical;min-height:88px;width:100%;border:1px solid #b3c6bd;border-radius:10px;padding:12px;font:inherit;font-size:.9375rem}
.whatsapp-notice{font-size:.75rem;line-height:1.5;margin:8px 0 14px;color:#40564c}
.whatsapp-send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;padding:12px;border:0;border-radius:8px;background:#075E54;color:white;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer}
.whatsapp-send svg{width:18px;height:18px}
.whatsapp-widget :focus-visible{outline:3px solid #22C4B6;outline-offset:3px}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important
}

}

/* Links direcionais: padrão compartilhado de texto e seta circular. */
a.arrow-link, .card a.card-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;text-decoration:none;min-height:44px}
a.arrow-link:hover, .card a.card-link:hover{text-decoration:none}
a.arrow-link>svg, .card a.card-link>svg{box-sizing:border-box;flex:0 0 32px;width:32px;height:32px;padding:8px;border-radius:50%;background:var(--color-primary);color:white}
.section--navy a.arrow-link>svg,.home-hero a.arrow-link>svg{background:white;color:var(--color-primary)}
a.arrow-link:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}
.section--navy a.arrow-link:focus-visible,.home-hero a.arrow-link:focus-visible{outline-color:white}