/* ============================================================
   Vila da Madeira — pele "Contemporâneo" (única; era selecionável)
   O <html> de cada página fixa data-skin="premium" (sem seletor de
   visual — a opção "Precisão" foi removida). Só redefine variáveis
   e alguns componentes — não mexe no HTML.

   Claro/escuro do Contemporâneo é controlado por  data-theme  no
   <html>  (light | dark), definido pelo theme-switch.js a partir da
   escolha do visitante (Auto / Claro / Escuro). "Auto" resolve pelo
   tema do sistema operacional. Sem data-theme, cai na paleta escura.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

/* Precisão (e default) é sempre claro. */
:root{ color-scheme:light; }

/* ---------- paleta alinhada ao logo (Contemporâneo — escuro) ---------- */
html[data-skin="premium"]{
  color-scheme:dark;
  --ink:#f4f3f0;
  --paper:#141619;
  --surface:#1e2126;
  --accent:#e23a33;            /* vermelho da marca (planos do telhado) */
  --accent-dark:#a5261f;
  --accent-tint:#3a2422;
  --accent-on-dark:#e23a33;
  --muted:#9aa0a6;             /* cinza frio das facetas do grafite */
  --muted-on-dark:#9aa0a6;
  --line:rgba(244,243,240,.14);
  --line-on-dark:rgba(244,243,240,.14);
  --shadow-sm:0 2px 12px rgba(0,0,0,.40);
  --shadow:0 16px 40px rgba(0,0,0,.50);
  --shadow-lg:0 30px 70px rgba(0,0,0,.60);
  --font-body:'Archivo', Arial, sans-serif;
}
html[data-skin="premium"] body{ background:var(--paper); color:var(--ink); }

/* ---------- superfícies de seção ---------- */
html[data-skin="premium"] .section-paper{ background:var(--paper); color:var(--ink); }
html[data-skin="premium"] .section-surface{ background:var(--surface); color:var(--ink); }
html[data-skin="premium"] .section-dark{ background:#0f1114; color:var(--ink); }
html[data-skin="premium"] .section-dark .lede,
html[data-skin="premium"] .lede{ color:var(--muted); }

/* ---------- tipografia display mais fina ---------- */
html[data-skin="premium"] h1{ font-weight:300; letter-spacing:-.015em; }
html[data-skin="premium"] h2{ font-weight:400; }

/* ---------- header ---------- */
html[data-skin="premium"] header.topHeader{ background:rgba(20,22,25,.92); box-shadow:0 1px 0 var(--line); }
html[data-skin="premium"] nav.mainNav a:hover{ color:var(--accent); }
@media (max-width:820px){
  html[data-skin="premium"] nav.mainNav{ background:var(--paper); }
  html[data-skin="premium"] nav.mainNav li{ border-color:var(--line); }
}
html[data-skin="premium"] .menuBtn{ background:var(--surface); border-color:var(--line); color:var(--ink); }

/* ---------- hero: gradiente para fechar no fundo escuro ---------- */
html[data-skin="premium"] #hero{ color:#fff; }
html[data-skin="premium"] #hero .heroBg{
  background-image:linear-gradient(180deg, rgba(12,13,15,.42) 0%, rgba(12,13,15,.62) 55%, var(--paper) 100%), /*img:hero*/url('../imgs/site/hero/hero.jpeg')/*:img*/;
}

/* ---------- cards ---------- */
html[data-skin="premium"] .card{ background:var(--surface); border-left:3px solid var(--accent); box-shadow:var(--shadow-sm); }
html[data-skin="premium"] .section-paper .card,
html[data-skin="premium"] .section-surface .card{ background:#20242b; border-left:3px solid var(--accent); }
html[data-skin="premium"] .card h3,
html[data-skin="premium"] .section-paper .card h3,
html[data-skin="premium"] .section-surface .card h3{ color:var(--accent); }
html[data-skin="premium"] .card p,
html[data-skin="premium"] .section-paper .card p,
html[data-skin="premium"] .section-surface .card p{ color:var(--muted); }

/* ---------- botões ---------- */
html[data-skin="premium"] .btn{ background:var(--accent); color:#fff; border-radius:2px; box-shadow:none; }
html[data-skin="premium"] .btn:hover{ background:var(--accent-dark); box-shadow:var(--shadow-sm); }
html[data-skin="premium"] .section-paper .btn-outline:hover,
html[data-skin="premium"] .section-surface .btn-outline:hover{ background:rgba(255,255,255,.06); }

/* ---------- detalhes que tinham cor fixa ---------- */
html[data-skin="premium"] .badge{ border-color:var(--ink); color:var(--ink); }
html[data-skin="premium"] .ctaCard{ background:var(--surface); box-shadow:var(--shadow-sm); }
html[data-skin="premium"] .ctaCard h3{ color:var(--accent); }
html[data-skin="premium"] .ctaCard p,
html[data-skin="premium"] .step p,
html[data-skin="premium"] .faqItem p{ color:var(--muted); }
html[data-skin="premium"] .faqItem{ border-color:var(--line); }
html[data-skin="premium"] input,
html[data-skin="premium"] textarea{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink); }
html[data-skin="premium"] input::placeholder,
html[data-skin="premium"] textarea::placeholder{ color:var(--muted); }
html[data-skin="premium"] footer{ background:#0f1114; }
html[data-skin="premium"] footer h4{ color:var(--ink); }
html[data-skin="premium"] .footerSeal{ background:#f4f3f0; }

/* seções que usavam --ink/--paper como cor literal (invertiam no tema escuro) */
html[data-skin="premium"] #contato{ background:#0f1114; color:var(--ink); }
html[data-skin="premium"] #contato .contactInfo .label{ color:var(--muted); }
html[data-skin="premium"] #contato .contactInfo a{ color:var(--ink); }
html[data-skin="premium"] .ctaBox{ background:#0f1114; color:var(--ink); }
html[data-skin="premium"] .section-dark .card{ background:#20242b; }

/* ============================================================
   Contemporâneo — paleta CLARA.  Aplicada quando data-theme="light"
   (o theme-switch.js põe isso no <html> em "Claro" ou em "Auto" com
   o sistema claro). Um só seletor, sem @media — funciona igual em
   desktop e celular.
   ============================================================ */
html[data-skin="premium"][data-theme="light"]{
  color-scheme:light;
  --ink:#191a1d;
  --paper:#f4f3f0;
  --surface:#ffffff;
  --accent:#c62d22;               /* vermelho um tom mais fechado p/ contraste no claro */
  --accent-dark:#9e2019;
  --accent-tint:#f3d9d6;
  --accent-on-dark:#e8756c;
  --muted:#6b6660;
  --muted-on-dark:#b7b0a8;
  --line:rgba(25,26,29,.12);
  --line-on-dark:rgba(244,243,240,.14);
  --shadow-sm:0 2px 10px rgba(25,26,29,.06);
  --shadow:0 12px 32px rgba(25,26,29,.10);
  --shadow-lg:0 24px 64px rgba(25,26,29,.18);
}
html[data-skin="premium"][data-theme="light"] header.topHeader{ background:rgba(244,243,240,.94); }
html[data-skin="premium"][data-theme="light"] .section-dark{ background:var(--ink); color:var(--paper); }
html[data-skin="premium"][data-theme="light"] .section-dark .lede{ color:var(--muted-on-dark); }
html[data-skin="premium"][data-theme="light"] #hero .heroBg{
  background-image:linear-gradient(180deg, rgba(20,18,16,.32) 0%, rgba(17,15,14,.52) 55%, var(--paper) 100%), /*img:hero*/url('../imgs/site/hero/hero.jpeg')/*:img*/;
}
html[data-skin="premium"][data-theme="light"] .card,
html[data-skin="premium"][data-theme="light"] .section-paper .card,
html[data-skin="premium"][data-theme="light"] .section-surface .card{ background:var(--surface); }
html[data-skin="premium"][data-theme="light"] .section-dark .card{ background:rgba(255,255,255,.05); }
html[data-skin="premium"][data-theme="light"] .section-dark .card h3{ color:var(--accent-on-dark); }
html[data-skin="premium"][data-theme="light"] .section-dark .card p{ color:var(--muted-on-dark); }
html[data-skin="premium"][data-theme="light"] input,
html[data-skin="premium"][data-theme="light"] textarea{ color:var(--paper); }
html[data-skin="premium"][data-theme="light"] input::placeholder,
html[data-skin="premium"][data-theme="light"] textarea::placeholder{ color:var(--muted-on-dark); }
html[data-skin="premium"][data-theme="light"] #contato{ background:var(--ink); color:var(--paper); }
html[data-skin="premium"][data-theme="light"] #contato .contactInfo .label{ color:var(--muted-on-dark); }
html[data-skin="premium"][data-theme="light"] #contato .contactInfo a{ color:var(--paper); }
html[data-skin="premium"][data-theme="light"] .ctaBox{ background:var(--ink); color:var(--paper); }
html[data-skin="premium"][data-theme="light"] footer{ background:var(--ink); }
html[data-skin="premium"][data-theme="light"] footer h4{ color:var(--paper); }

/* Não há mais seletor flutuante: nem de visual (Precisão/Contemporâneo,
   removido antes) nem de tema (Auto/Claro/Escuro, removido agora). O
   Contemporâneo é o único visual e claro/escuro é 100% automático, pelo
   prefers-color-scheme do visitante — ver redesign/theme-switch.js. */