/* ============================================================
   Spa do Automóvel — Tokens de marca + base escopada
   Gerado a partir do Design System (tokens/*.css)
   Escopo: todo o reset de elementos vive sob .spa-page,
   para não vazar no cabeçalho e rodapé do Elementor.
   ============================================================ */

/* Spa do Automóvel — webfonts.
   Sora + Karla = institutional pair (Cap. 03 do Manual de Marca).
   Marcellus + Jost = marketing pair (peças de campanha).
   Sora, Karla e Jost são variáveis; um arquivo cobre toda a faixa de pesos. */

@font-face{font-family:"Sora";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/sora-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/sora-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/karla-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;font-display:swap;src:url("../fonts/karla-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/karla-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:italic;font-weight:400 700;font-display:swap;src:url("../fonts/karla-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/jost-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 600;font-display:swap;src:url("../fonts/jost-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Spa do Automóvel — cores.
   Os 7 valores oficiais do Manual de Marca (Cap. 03) estão marcados [OFICIAL].
   Tudo o mais é escala derivada para estados de UI e nunca substitui um valor oficial. */
:root{
  /* ---- Vermelho Spa [OFICIAL #ED3237] — logo, ação, CTA ---- */
  --red-50:#FDEDED;
  --red-100:#FAD6D7;
  --red-200:#F5A9AB;
  --red-300:#F17B7E;
  --red-400:#ED3237;   /* Vermelho Spa [OFICIAL] */
  --red-500:#D62A2F;   /* hover */
  --red-600:#B62125;   /* active/pressed */
  --red-700:#8E191C;
  --red-800:#5C1012;

  /* ---- Preto Logo [OFICIAL #000000] — wordmark "do automóvel" ---- */
  --black:#000000;

  /* ---- Grafite Ambiente [OFICIAL #150F0B] — fundos institucionais ---- */
  --graphite-900:#0C0806;
  --graphite-800:#150F0B;  /* Grafite Ambiente [OFICIAL] */
  --graphite-700:#211812;
  --graphite-600:#2E231B;
  --graphite-500:#3D2F25;

  /* ---- Nogueira [OFICIAL #4C362F] — marcenaria, texturas ---- */
  --walnut-700:#33231E;
  --walnut-600:#4C362F;    /* Nogueira [OFICIAL] */
  --walnut-500:#66493F;
  --walnut-400:#8A6759;

  /* ---- Couro Conhaque [OFICIAL #C9793F] — poltronas, calor humano ---- */
  --cognac-700:#8F5227;
  --cognac-600:#AC6532;
  --cognac-500:#C9793F;    /* Couro Conhaque [OFICIAL] */
  --cognac-300:#E0A473;
  --cognac-100:#F5DFCB;

  /* ---- Cinza Fachada [OFICIAL #92A4BD] — painel metálico da loja ---- */
  --steel-700:#4E5F76;
  --steel-600:#6C7E96;
  --steel-500:#92A4BD;     /* Cinza Fachada [OFICIAL] */
  --steel-300:#B9C6D6;
  --steel-100:#E3E9F1;

  /* ---- Areia [OFICIAL #F3ECE2] — papel, fundo claro ---- */
  --sand-50:#FBF8F4;
  --sand-100:#F3ECE2;      /* Areia [OFICIAL] */
  --sand-200:#E7DCCC;
  --sand-300:#D6C7B2;
  --sand-400:#B9A691;

  /* ---- Neutros quentes de texto (derivados do Grafite) ---- */
  --ink-900:#150F0B;
  --ink-800:#241C17;
  --ink-700:#3B2F27;
  --ink-500:#6B5B52;
  --ink-400:#8D7D73;
  --ink-200:#C6BBB1;
  --white:#FFFFFF;

  /* ---- Semânticos de sistema (DERIVADOS — não constam do manual) ---- */
  --success-500:#2F7D5A;
  --success-50:#E8F2ED;
  --warning-500:#C9793F;   /* reaproveita Couro Conhaque */
  --warning-50:#FAEEE3;
  --danger-500:#ED3237;    /* reaproveita Vermelho Spa */
  --danger-50:#FDEDED;
  --info-500:#4E5F76;      /* deriva do Cinza Fachada */
  --info-50:#E3E9F1;

  /* ===================== ALIASES SEMÂNTICOS ===================== */
  /* Superfícies */
  --surface-page:var(--sand-50);
  --surface-page-alt:var(--sand-100);
  --surface-card:var(--white);
  --surface-card-alt:var(--sand-100);
  --surface-inverse:var(--graphite-800);
  --surface-inverse-alt:var(--graphite-700);
  --surface-inverse-raised:var(--graphite-600);
  --surface-accent:var(--red-400);
  --surface-accent-subtle:var(--red-50);
  --surface-warm:var(--walnut-600);
  --surface-disabled:var(--sand-200);

  /* Texto */
  --text-strong:var(--black);
  --text-body:var(--ink-800);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-accent:var(--red-500);
  --text-on-accent:var(--white);
  --text-on-inverse:var(--sand-50);
  --text-on-inverse-muted:#A79A91;
  --text-disabled:var(--ink-200);
  --text-link:var(--red-500);
  --text-link-hover:var(--red-600);

  /* Bordas */
  --border-hairline:var(--sand-200);
  --border-subtle:var(--sand-300);
  --border-strong:var(--ink-700);
  --border-accent:var(--red-400);
  --border-inverse:rgba(243,236,226,.16);
  --border-inverse-strong:rgba(243,236,226,.34);

  /* Ações */
  --action-primary-bg:var(--red-400);
  --action-primary-bg-hover:var(--red-500);
  --action-primary-bg-active:var(--red-600);
  --action-secondary-bg:var(--graphite-800);
  --action-secondary-bg-hover:var(--graphite-700);
  --action-ghost-bg-hover:var(--sand-100);
  --focus-ring:rgba(237,50,55,.34);

  /* Overlays e véus de proteção */
  --overlay-scrim:rgba(12,8,6,.62);
  --overlay-photo-top:linear-gradient(180deg,rgba(12,8,6,.72) 0%,rgba(12,8,6,0) 62%);  /* @kind color */
  --overlay-photo-bottom:linear-gradient(0deg,rgba(12,8,6,.86) 0%,rgba(12,8,6,.30) 46%,rgba(12,8,6,0) 78%);  /* @kind color */
  --overlay-warm-wash:linear-gradient(180deg,rgba(76,54,47,.30) 0%,rgba(12,8,6,.78) 100%);  /* @kind color */
}

/* Escopo escuro — aplique em seções institucionais de fundo grafite. */
.spa-dark{
  --surface-page:var(--graphite-800);
  --surface-page-alt:var(--graphite-700);
  --surface-card:var(--graphite-700);
  --surface-card-alt:var(--graphite-600);
  --text-strong:var(--white);
  --text-body:var(--sand-50);
  --text-muted:#A79A91;
  --text-faint:#7E7269;
  --text-accent:var(--red-300);
  --text-link:var(--red-300);
  --text-link-hover:var(--red-200);
  --border-hairline:rgba(243,236,226,.12);
  --border-subtle:rgba(243,236,226,.20);
  --border-strong:rgba(243,236,226,.42);
  --action-ghost-bg-hover:rgba(243,236,226,.08);
}

/* Spa do Automóvel — tipografia.
   Institucional (site, propostas, orçamentos, UI): Sora + Karla.
   Marketing (posts, campanhas, captação): Marcellus + Jost — soma-se, nunca substitui. */
:root{
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;   /* títulos institucionais */
  --font-body:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;      /* corpo de texto */
  --font-campaign:"Marcellus",Georgia,"Times New Roman",serif;            /* títulos de campanha */
  --font-label:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;      /* rótulos e selos */
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;     /* placas, sinistro, OS */

  /* Escala — alinhada à tabela do Cap. 03 */
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;   /* corpo — manual: 14–15px */
  --fs-md:17px;     /* H3 — manual: 16–18px */
  --fs-lg:20px;
  --fs-xl:24px;
  --fs-2xl:29px;    /* H2 — manual: 24–29px */
  --fs-3xl:40px;    /* H1 — manual: 32–46px */
  --fs-4xl:46px;    /* H1 máximo */
  --fs-5xl:64px;    /* hero de campanha (fora da tabela; só em peça grande) */

  --fw-regular:400;  /* @kind font */
  --fw-medium:500;  /* @kind font */
  --fw-semibold:600;  /* @kind font */
  --fw-bold:700;  /* @kind font */

  --lh-tight:1.08;    /* @kind font */ /* H1 */
  --lh-snug:1.2;      /* @kind font */ /* H2/H3 */
  --lh-normal:1.5;    /* @kind font */ /* UI */
  --lh-relaxed:1.62;  /* @kind font */ /* corpo corrido */

  --ls-tight:-0.02em;   /* @kind font */ /* Sora em tamanhos grandes */
  --ls-normal:0;  /* @kind font */
  --ls-wide:0.06em;  /* @kind font */
  --ls-wider:0.14em;    /* @kind font */ /* rótulos Karla versalete */
  --ls-widest:0.22em;   /* @kind font */ /* Jost em selos e eyebrow */

  /* Papéis de texto compostos */
  --type-h1:var(--fw-bold) var(--fs-3xl)/var(--lh-tight) var(--font-display);  /* @kind font */
  --type-h2:var(--fw-bold) var(--fs-2xl)/var(--lh-snug) var(--font-display);  /* @kind font */
  --type-h3:var(--fw-semibold) var(--fs-md)/var(--lh-snug) var(--font-display);  /* @kind font */
  --type-body:var(--fw-regular) var(--fs-base)/var(--lh-relaxed) var(--font-body);  /* @kind font */
  --type-body-strong:var(--fw-medium) var(--fs-base)/var(--lh-relaxed) var(--font-body);  /* @kind font */
  --type-caption:var(--fw-medium) var(--fs-2xs)/var(--lh-normal) var(--font-body);  /* @kind font */
  --type-eyebrow:var(--fw-medium) var(--fs-xs)/var(--lh-normal) var(--font-label);  /* @kind font */
  --type-campaign:var(--fw-regular) var(--fs-3xl)/var(--lh-snug) var(--font-campaign);  /* @kind font */
  --type-button:var(--fw-semibold) var(--fs-sm)/1 var(--font-display);  /* @kind font */
}

/* Spa do Automóvel — espaçamento, medidas e raios.
   Base 4px. O manual pede "espaço em branco generoso ao redor da logomarca":
   por isso a área de proteção é um token próprio. */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* Ritmo de seção em página web */
  --section-y-sm:var(--space-16);  /* @kind spacing */
  --section-y:var(--space-24);  /* @kind spacing */
  --section-y-lg:var(--space-32);  /* @kind spacing */
  --gutter:var(--space-6);  /* @kind spacing */
  --container-max:1200px;  /* @kind spacing */
  --container-narrow:720px;  /* @kind spacing */
  --measure:66ch;        /* @kind other */ /* largura máxima de leitura confortável */

  /* Raios — a marca é retilínea: raio discreto, nunca "bolha" */
  --radius-xs:2px;
  --radius-sm:4px;       /* botões, inputs */
  --radius-md:8px;       /* cards */
  --radius-lg:14px;      /* imagens, painéis grandes */
  --radius-pill:999px;   /* badges, tags */

  --border-width:1px;  /* @kind spacing */
  --border-width-strong:2px;  /* @kind spacing */
  --rule-accent-height:4px;   /* @kind spacing */ /* viga vermelha da fachada, como régua gráfica */

  /* Logomarca */
  --logo-clearspace:1em;      /* @kind spacing */ /* = altura da palavra "Spa" (Cap. 03) */
  --logo-min-width-screen:120px;   /* @kind spacing */ /* mínimo em telas */
  --logo-min-width-print:24mm;     /* @kind spacing */ /* mínimo impresso */
  --logo-max-width-uniform:80mm;   /* @kind spacing */ /* máximo no uniforme: 8 cm */

  --hit-target-min:44px;  /* @kind spacing */
}

/* Spa do Automóvel — elevação, sombras e desfoque.
   Sombras sempre quentes (tingidas de grafite/nogueira), nunca cinza neutro azulado. */
:root{
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-1:0 1px 2px rgba(21,15,11,.07);
  --shadow-2:0 4px 14px -4px rgba(21,15,11,.16);
  --shadow-3:0 14px 34px -12px rgba(21,15,11,.26);
  --shadow-4:0 28px 60px -20px rgba(21,15,11,.38);
  --shadow-accent:0 10px 24px -10px rgba(237,50,55,.46);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-inset-inverse:inset 0 1px 0 rgba(243,236,226,.08);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  --blur-veil:12px;      /* @kind other */ /* barra fixa sobre foto */
  --blur-heavy:26px;     /* @kind other */ /* modal scrim */

  --z-base:0;  /* @kind other */
  --z-sticky:100;  /* @kind other */
  --z-header:200;  /* @kind other */
  --z-dropdown:300;  /* @kind other */
  --z-overlay:400;  /* @kind other */
  --z-dialog:500;  /* @kind other */
  --z-toast:600;  /* @kind other */
  --z-tooltip:700;  /* @kind other */
}

/* Spa do Automóvel — movimento.
   Tom de voz: "precisão que tranquiliza". Movimento calmo, curto, sem bounce,
   sem elástico, sem overshoot. Nada entra na tela "pulando". */
:root{
  --dur-instant:90ms;  /* @kind other */
  --dur-fast:140ms;    /* @kind other */
  --dur-base:200ms;    /* @kind other */
  --dur-slow:320ms;    /* @kind other */
  --dur-slower:520ms;  /* @kind other */

  --ease-standard:cubic-bezier(.2,.6,.2,1);   /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.28,1);     /* @kind other */
  --ease-in:cubic-bezier(.5,0,.75,.4);        /* @kind other */
  --ease-linear:linear;                        /* @kind other */

  --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);  /* @kind other */
  --transition-elevate:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);  /* @kind other */

  --lift-hover:-2px;   /* @kind spacing */ /* cards sobem 2px, nunca escalam */
  --press-scale:.985;  /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
  --dur-instant:0ms;  /* @kind other */
  --dur-fast:0ms;  /* @kind other */
  --dur-base:0ms;  /* @kind other */
  --dur-slow:0ms;  /* @kind other */
  --dur-slower:0ms;  /* @kind other */
  --lift-hover:0px;  /* @kind spacing */
  --press-scale:1;  /* @kind other */
  }
}

/* ---------- Base escopada (ex-tokens/base.css) ---------- */
.spa-page,.spa-page *,.spa-page *::before,.spa-page *::after{box-sizing:border-box}
.spa-page{position:relative;z-index:1;color:var(--text-body);font:var(--type-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
.spa-page h1,.spa-page h2,.spa-page h3,.spa-page h4{margin:0;color:var(--text-strong);text-wrap:balance}
.spa-page h1{font:var(--type-h1);letter-spacing:var(--ls-tight)}
.spa-page h2{font:var(--type-h2);letter-spacing:var(--ls-tight)}
.spa-page h3{font:var(--type-h3)}
.spa-page p{margin:0 0 var(--space-4)}
.spa-page a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 34%,transparent);transition:var(--transition-color)}
.spa-page a:hover{color:var(--text-link-hover);border-bottom-color:currentColor}
.spa-page a.btn,.spa-page a.btn:hover{border-bottom:1px solid transparent}
.spa-page :focus-visible{outline:2px solid var(--red-400);outline-offset:2px}
.spa-page img{max-width:100%;display:block}
/* O navegador aplica margem propria em figure e blockquote. O design system
   zerava isso caso a caso; como a conversao semantica introduz figure em
   lugares novos, o reset passa a ser global dentro da pagina. */
.spa-page figure,.spa-page blockquote{margin:0}
.spa-page strong{font-weight:var(--fw-bold);color:var(--text-strong)}
.spa-page em{font-style:italic}
.spa-page small{font-size:var(--fs-xs)}
.spa-page ::selection{background:var(--red-100);color:var(--ink-900)}

/* Utilitários de marca */
.spa-page .spa-label{font:var(--type-caption);text-transform:uppercase;letter-spacing:var(--ls-wider);color:var(--text-muted)}
.spa-page .spa-eyebrow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-widest);color:var(--text-accent)}
.spa-page .spa-rule{width:56px;height:var(--rule-accent-height);background:var(--red-400);border:0}
.spa-page .spa-divider{display:flex;align-items:center;gap:var(--space-3);color:var(--border-subtle)}
.spa-page .spa-divider::before,.spa-page .spa-divider::after{content:"";flex:1;height:1px;background:currentColor}
.spa-page .spa-veil-bottom{background:var(--overlay-photo-bottom)}
.spa-page .spa-veil-top{background:var(--overlay-photo-top)}
.spa-page .spa-veil-warm{background:var(--overlay-warm-wash)}
.spa-page .spa-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}