/* ═══════════════════════════════════════════════
   360º OBRAS — BASE.CSS
   Arquivo único compartilhado por todas as páginas
   Fontes: Economica (títulos) + Outfit (corpo)
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@300;400;500;600&display=swap');

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--B); background: var(--w); color: var(--pr); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

/* ── VARIÁVEIS ── */
:root {
  --w:   #ffffff;
  --of:  #faf9f7;
  --of2: #f4f1eb;
  --pr:  #111010;
  --la:  #d44f0a;
  --la2: #e8601a;
  --ci:  #6b6862;
  --bo:  #e2ddd8;
  --bo2: #ccc8c2;
  --F:   'Economica', Georgia, serif;
  --B:   'Outfit', sans-serif;
  /* Arco colorido do logo */
  --c1: #e63946;
  --c2: #f4a261;
  --c3: #e9c46a;
  --c4: #2a9d8f;
  --c5: #457b9d;
  --c6: #6a4c93;
}

/* ── BARRA COLORIDA ── */
.color-bar {
  height: 3px;
  background: linear-gradient(to right, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6));
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
}

/* ── NAV ── */
nav {
  position: sticky; top: 3px; left: 0; right: 0; z-index: 300;
  background: var(--w);
  border-bottom: 1px solid var(--bo);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px; height: 105px;
  transition: box-shadow .3s;
}
nav.scrolled { box-shadow: 0 2px 28px rgba(0,0,0,.08); }
.nav-logo img { height: 100px; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-family: revert; font-size: 15px; font-weight: 500;
  color: var(--ci); letter-spacing: .02em; transition: color .2s;
}
.nav-links a:hover, .nav-links a.act { color: var(--pr); }
.nav-cta {
  background: #08c2fd; color: var(--w) !important;
  padding: 9px 20px; font-size: 15px !important;
  font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s !important;
}
.nav-cta:hover { background: var(--la) !important; }

/* Mobile nav */
.nav-mob {
  display: none; background: none; border: none; 
  cursor: pointer; padding: 8px; flex-direction: column; gap: 5px;
}

.nav-mob span {
  display: block; width: 22px; height: 1px; background: var(--pr);
  transition: all .3s; 
}
.nav-mob span :hover {
  display: none; background-color: red; border: none; 
  cursor: pointer; padding: 8px; flex-direction: column; gap: 1px;
}

.mob-menu {
  display: none; position: fixed; inset: 0; top: 75px; padding-top: 20px;
  background: #ffffffc7; z-index: 290;
  flex-direction: column; align-items: center; justify-content: center; gap: 32px;
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-family: var(--F); font-size: 32px; font-weight: 700;
  color: var(--pr); letter-spacing: -.5px;
}
.mob-menu a:hover { color: var(--la); }
.mob-menu .mob-cta {
  font-family: var(--B); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--la);
}

h2 {
    font-family: var(--F);
    font-size: clamp(28px, 3.8vw, 48px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.2px;
    color: var(--preto);
    margin-bottom: 16px;
}
    /* ── DIFERENCIAIS ── */
    #dif{background:var(--fundo);display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
    .dif-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .dc{
      background:#e5e5e5;border:1px solid #d44f0a;
      border-radius:6px;padding:26px 22px;
      transition:border-color .25s,transform .25s;
    }
    .dc:hover{border-color:var(--laranja);transform:translateY(-2px)}
    .dc-ico{
      width:36px;height:36px;background:#e5e5e5;border-radius:5px;
      display:flex;align-items:center;justify-content:center;margin-bottom:14px;
    }
    .dc-ico svg{width:65px;height:65px;stroke:#d44f0a;fill:none;stroke-width:1.5}
    .dc-t{font-family:var(--F);font-size:22px;font-weight:700;color:#d44f0a;margin-bottom:6px;letter-spacing: 0.1px;}
    .dc-p{font-size:15px;color:#000000;font-weight:300}

.case-hero img { width: 100%; display: block; margin-top: -60px; }

/* ── FOOTER ── */
footer {
  background: var(--of);
  padding: 7px;
  display: grid;
  border-top: 1px solid var(--bo);
}
.f-logo img { height: 36px; }
.f-mid { text-align: center; }
.f-copy { font-size: 12px; color: var(--ci); font-weight: 300; margin-bottom: 4px; }
.f-addr { font-size: 11px; color: var(--bo2); }
.f-links { display: flex; gap: 20px; justify-content: flex-end; flex-wrap: wrap; }
.f-links a { font-size: 12px; color: var(--ci); transition: color .2s; }
.f-links a:hover { color: var(--pr); }
.f-bottom { background: var(--pr); text-align: center; padding: 16px 52px; }
.f-bottom p { font-size: 11px; color: rgba(255,255,255,.2); font-weight: 300; }

/* ── WHATSAPP FLOAT ── */
.wa {
  position: fixed; bottom: 28px; right: 28px; z-index: 400;
  display: flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  padding: 12px 20px;
  font-size: 13px; font-weight: 500; font-family: var(--B);
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
  transition: transform .2s, box-shadow .2s;
}
.wa:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.4); }
.wa svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }

/* ── TIPOGRAFIA BASE ── */
.s-tag {
  font-size: 15px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #08c2fd;
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.s-tag::after { content: ''; width: 28px; height: 1px; background: #08c2fd; display: block; }
.s-tag.lt { color: var(--la2); }
.s-tag.lt::after { background: var(--la2); }
.s-tag.muted { color: var(--ci); }
.s-tag.muted::after { background: var(--bo); }

h1.display {
  font-family: var(--F); font-weight: 700; letter-spacing: -1px;
  line-height: .98; color: var(--pr);
}
h2.title {
  font-family: var(--F); font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 700; line-height: 1; letter-spacing: -1px;
  color: var(--pr); margin-bottom: 14px;
}
h2.title em { font-style: italic; color: var(--la); font-weight: 400; }
h2.title.light { color: #000000; }
.lead { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--ci); max-width: 560px; }
.lead.light { color: #000000; }
h2.title em2 { font-style: italic; color:#08c2fd; font-weight: 400; }

/* ── BOTÕES BASE ── */
.btn-dark {
  display: inline-flex; align-items: center; gap: 10px;
  background: #08c2fd; color: var(--w);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 26px; transition: background .2s, transform .15s;
}
.btn-dark:hover { background: var(--la); transform: translateY(-1px); }
.btn-light {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--w); color: #000000;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 13px 26px; white-space: nowrap; transition: transform .2s;
}
.btn-light:hover { transform: translateY(-1px);color: #08c2fd; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--pr);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 26px; border: 1px solid var(--bo);
  transition: border-color .2s;
}
.btn-outline:hover { border-color: var(--pr); }
.btn-text {
  font-size: 13px; font-weight: 400; color: var(--ci);
  border-bottom: 1px solid var(--bo); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.btn-text:hover { color: var(--pr); border-color: var(--pr); }

/* ── SEÇÃO PADRÃO ── */
.section { padding: 62px 52px; }
.section.dark { background: var(--pr); }
.section.tinted { background: #efefef; }
.section.tinted2 { background: var(--of2); }
.section.tinted3 { background: var(--of2);}

/* ── CARD CTA (laranja) ── */
.cta-band {
  background: #08c2fd; padding: 72px 52px;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 40px;
}
.cta-band h3 {
  font-family: var(--F); font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 700; color: #000000; letter-spacing: -.5px; margin-bottom: 8px;
}
.cta-band p { font-size: 15px; color:#000000; font-weight: 300; }

/* ── BREADCRUMB ── */
.breadcrumb {
  padding: 86px 52px 0;
  display: flex; align-items: center; gap: 8px;
}
.breadcrumb a { font-size: 12px; font-weight: 500; color: var(--ci); transition: color .2s; }
.breadcrumb a:hover { color: var(--la); }
.breadcrumb span { font-size: 12px; color: var(--bo); }
.breadcrumb strong { font-size: 12px; font-weight: 500; color: var(--pr); }

/* ── FORMULÁRIO ESCURO ── */
.dark-form { display: flex; flex-direction: column; gap: 13px; }
.dark-form .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dark-form .fg { display: flex; flex-direction: column; gap: 5px; }
.dark-form label { font-size: 11px; font-weight: 500; color:var(--ci); letter-spacing: .04em; }
.dark-form input, .dark-form select, .dark-form textarea {background: var(--w);
    border: 1px solid var(--bo);
    padding: 11px 13px;
    font-size: 14px;
    font-family: var(--B);
    color: #6b6862ab;
    transition: border-color .2s;
    outline: none;
}
.dark-form input::placeholder, .dark-form textarea::placeholder { color: rgba(107, 104, 98, .6); }
.dark-form input:focus, .dark-form select:focus, .dark-form textarea:focus { border-color: var(--la); }
.dark-form select {  }
.dark-form select option { background:#fff ; color: #1a1a1a; }
.dark-form textarea { resize: vertical; min-height: 100px; }
.dark-form .fsub {
  align-self: flex-start; background: #08c2fd; color: #fff; border: none;
  padding: 13px 28px; font-size: 12px; font-weight: 600;
  font-family: var(--B); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: background .2s;
}
.dark-form .fsub:hover { background: var(--la2); }

/* ── SCRIPT COMPARTILHADO (carregado via JS inline) ── */

/* ── RESPONSIVE GLOBAL ── */
@media (max-width: 900px) {
  nav { padding: 0 20px; position: fixed;}
  .nav-links { display: none; }
  .nav-mob { display: flex; }
  .section { padding: 64px 24px; }
  footer { grid-template-columns: 1fr; text-align: center; padding: 40px 24px; gap: 16px; }
  .f-links { justify-content: center; }
  .f-logo { display: flex; justify-content: center; }
  .cta-band { grid-template-columns: 1fr; padding: 52px 24px; gap: 24px; }
  .breadcrumb { padding: 82px 24px 0; }
  .dark-form .fr { grid-template-columns: 1fr; }
.case-hero img{ margin-top: 95px;}
.breadcrumb-bar{ padding:10px 20px; }	
}