/* Estética "Organic Modern" — direção de arte 10/07/2026 (spec do Facury).
   Premissas: tons calmos (off-white quente + slate teal + terracota),
   serifa humanista SÓ em h1/h2 (Instrument Serif), UI/corpo em Inter,
   espaço negativo impositivo, sombras difusas sem borda sólida,
   micro-interações suaves (reveal por scroll + header glass no main.js).
   Carrega DEPOIS de style.css e sobrepõe os tokens. */

/* ── 01 · Tokens ───────────────────────────────────────────────────── */
:root{
  --red:#B4512E;            /* terracota/ferrugem: CTA primário (substitui o vermelho puro) */
  --red-dark:#93401F;
  --navy:#1E3B38;           /* slate teal escuro: cor primária (substitui o navy) */
  --navy-2:#2C4F4B;
  --ink:#26312E;
  --muted:#5C6B66;
  --bg:#F7F4EE;             /* alabaster quente (substitui o branco puro) */
  --bg-soft:#EFEAE1;
  --line:#E4DED2;
  --wa:#2E5D44;             /* WhatsApp em verde musgo: mantém o reconhecimento "verde = WhatsApp" dentro da paleta orgânica */
  --wa-dark:#234A36;
  --radius:12px;
  --shadow:0 18px 45px -18px rgba(30,59,56,.16);
  --font:'Inter',system-ui,-apple-system,sans-serif;
}

/* ── 02 · Tipografia ───────────────────────────────────────────────── */
body{ background:var(--bg); font-family:var(--font); }
h1, h2{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; letter-spacing:-.01em; }
h3, h4{ font-family:'Inter',sans-serif; font-weight:600; }
.logo .logo-name{ font-family:'Manrope','Segoe UI',system-ui,sans-serif; }

/* ── 03 · Shell: topbar, header glass, footer ─────────────────────── */
.topbar{ background:var(--navy); }
.site-header{
  background:var(--bg); border-bottom:1px solid transparent;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.site-header.scrolled{
  background:rgba(247,244,238,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-color:rgba(30,59,56,.08);
  box-shadow:0 10px 30px -18px rgba(30,59,56,.25);
}
.nav a{ font-weight:500; }
.site-footer{ background:#12211F; }
.site-footer h3{ font-weight:600; font-size:13px; letter-spacing:.1em; }

/* ── 04 · Botões: interação refinada, sem inversão agressiva ──────── */
.btn{
  border-radius:10px; font-family:'Inter',sans-serif; font-weight:600;
  font-size:15px; letter-spacing:0; text-transform:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1), background .25s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(30,59,56,.30); }
.btn-red:hover{ background:var(--red-dark); }
.wa-float{
  font-family:'Inter',sans-serif; font-weight:600; text-transform:none; letter-spacing:0;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -12px rgba(0,0,0,.35); }

/* ── 05 · Hero: título domina a viewport, overlay com contraste ───── */
.hero-cine{ min-height:86vh; display:flex; align-items:center; }
.hero-cine .hc-overlay{
  background:
    radial-gradient(ellipse at 28% 42%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.42) 68%),
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.48));
}
.hero-cine h1{
  font-size:clamp(2.7rem, 5.6vw, 4.5rem); line-height:1.06; max-width:18ch;
}
.hero-cine h1 .hl{ font-style:italic; }
.hero-cine .seal{ font-family:'Inter',sans-serif; font-weight:600; letter-spacing:.14em; }
.hero-cine .hc-lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); }

/* ── 06 · Respiro: ritmo de leitura desacelerado ──────────────────── */
.section{ padding:110px 0; }
.ds-sec{ padding:100px 0 24px; }
.ds-sec:last-of-type{ padding-bottom:110px; }
.sec-head{ margin-bottom:56px; }

/* ── 07 · Rótulos editoriais (ds-*) em linguagem orgânica ─────────── */
.ds-eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 20px;
}
.ds-tick{ display:inline-block; width:24px; height:2px; background:var(--red); flex:none; }
.ds-h{
  font-family:'Instrument Serif',Georgia,serif; font-weight:400;
  font-size:clamp(30px,3.8vw,44px); line-height:1.08; color:var(--navy);
  margin:0 0 14px; max-width:24ch;
}
.ds-sub{ font-size:16.5px; line-height:1.65; color:var(--muted); margin:0; max-width:58ch; }

/* ── 08 · Cards de serviço: flutuantes, sem borda sólida ──────────── */
#servicos .cards{ gap:26px; margin-top:44px; }
#servicos .card, .card{
  background:#FEFDFA; border:none; border-radius:var(--radius);
  box-shadow:0 10px 35px -18px rgba(30,59,56,.14);
  padding:30px 28px 26px; gap:12px; overflow:visible;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.card:hover{ transform:translateY(-2px); box-shadow:0 24px 55px -20px rgba(30,59,56,.24); }
#servicos .card .ic{
  width:52px; height:52px; border-radius:14px; margin:0 0 4px; padding:0;
  background:rgba(30,59,56,.07); color:var(--navy-2);
  display:flex; align-items:center; justify-content:center;
}
#servicos .card .ic::after{ content:none; }   /* remove o "COD. NN" do padrão despacho */
#servicos .card.card--urg .ic{ background:rgba(180,81,46,.10); color:var(--red); }
#servicos .card h3{ font-size:18.5px; margin:0; text-transform:none; letter-spacing:0; color:var(--navy); }
#servicos .card p{ margin:0; font-size:14.5px; }
#servicos .card .more{
  margin:4px 0 0; padding-top:0; border-top:none;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--svc);
}

/* Cor por serviço — paleta terrosa harmônica com o tema (slate teal + terracota).
   ACESSIBILIDADE (Facury daltônico): a cor é DECORATIVA. Cada card já se distingue
   por ícone + título; a cor agrupa/embeleza, não carrega significado sozinha.
   Tons escolhidos com variação de calor e valor (quente/frio/verde/roxo/azul/neutro)
   para não dependerem só de matiz. */
#servicos .card{ --svc:#2C4F4B; }                 /* fallback = teal do tema */
#servicos .card:nth-child(1){ --svc:#B4512E; }    /* Urgência — terracota (acento do tema) */
#servicos .card:nth-child(2){ --svc:#B0812A; }    /* Eventos — âmbar/ocre */
#servicos .card:nth-child(3){ --svc:#35707A; }    /* Remoções — azul petróleo */
#servicos .card:nth-child(4){ --svc:#2C4F4B; }    /* Hospitais/clínicas — slate teal */
#servicos .card:nth-child(5){ --svc:#6E7B45; }    /* Empresas — verde musgo/oliva */
#servicos .card:nth-child(6){ --svc:#7A5064; }    /* Convênios — ameixa */
#servicos .card:nth-child(7){ --svc:#3E6B8C; }    /* Programado — azul poeira */
#servicos .card:nth-child(8){ --svc:#A65A4B; }    /* Domiciliar — argila/rosé */
#servicos .card:nth-child(9){ --svc:#54607A; }    /* Locação — cinza-azulado */
#servicos .card .ic{
  background:color-mix(in srgb, var(--svc) 12%, #FEFDFA);
  color:var(--svc);
}

/* ── 09 · "Por que" e listas de cobertura ─────────────────────────── */
.ds-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:48px; border-top:1px solid var(--line); padding-top:44px; }
.ds-why .k{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.ds-why h3{ font-size:18.5px; text-transform:none; letter-spacing:0; color:var(--navy); margin:0 0 8px; }
.ds-why p{ font-size:14.5px; line-height:1.62; color:var(--muted); margin:0; }
.ds-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:44px; margin-top:48px; border-top:1px solid var(--line); padding-top:44px; }
.ds-facts .k{ font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.ds-facts p:not(.k){ font-size:14.5px; line-height:1.75; color:var(--ink); margin:0; }
.ds-close{ border-top:1px solid var(--line); margin-top:10px; padding:52px 0 16px; display:flex; justify-content:space-between; align-items:center; gap:26px; flex-wrap:wrap; }
.ds-close p{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:29px; line-height:1.2; color:var(--navy); margin:0; max-width:26ch; }

/* ── 10 · Logos: monocromático, cor só no hover ───────────────────── */
.logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:44px; }
.logo-item{ flex:none; width:150px; height:84px; background:transparent; border:none; border-radius:0; padding:12px; display:flex; align-items:center; justify-content:center; }
.logo-item img{ filter:grayscale(100%) opacity(.5); transition:filter .3s ease; }
.logo-item:hover img{ filter:grayscale(0%) opacity(1); }

/* ── 11 · Internas: page-hero, prosa, aside, FAQ, formulário ──────── */
.page-hero{
  background:linear-gradient(135deg, #14302D 0%, #1E3B38 62%, #3A2A20 100%);
  border-bottom:2px solid var(--red); padding:76px 0;
}
.page-hero h1{ font-size:clamp(2rem,4vw,3rem); }
.prose h2{ font-size:clamp(24px,2.6vw,32px); margin:44px 0 14px; color:var(--navy); }
.prose h2::before{ content:""; display:block; width:24px; height:2px; background:var(--red); margin-bottom:14px; }
.prose p, .prose li{ color:var(--ink); }
.aside-card{ border:none; box-shadow:var(--shadow); background:#FEFDFA; }
.aside-card h3{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.faq details{ border:none; background:#FEFDFA; box-shadow:0 8px 26px -16px rgba(30,59,56,.16); border-radius:var(--radius); }
.faq summary{ font-family:'Inter',sans-serif; font-weight:600; font-size:15.5px; text-transform:none; }
.field label{ font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:0; text-transform:none; }
.field input, .field select, .field textarea{ background:#FEFDFA; border-color:var(--line); }
.cta-band{ background:var(--navy); }
.ph{ background:#F3EDDE; border-color:#CBB98A; color:#6B5A28; }

/* ── 12 · Reveal por scroll (classe aplicada via main.js) ─────────── */
.reveal{ opacity:0; transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
/* prefers-reduced-motion: style.css já zera transition/animation globalmente;
   o .in ainda é aplicado pelo observer, então nada fica oculto. */

@media (max-width:820px){
  .section{ padding:72px 0; }
  .ds-sec{ padding:64px 0 16px; }
  .ds-why{ grid-template-columns:1fr; gap:30px; }
  .ds-close{ flex-direction:column; align-items:flex-start; }
  .hero-cine{ min-height:72vh; }
  .logo-item{ width:calc(33% - 18px); }
}