/* ============================================================================
   PAINECOLOR — DESIGN SYSTEM  (híbrido: base clara + seções escuras de marca)
   Comunicação visual · Francisco Beltrão/PR · "há 50 anos"
   ----------------------------------------------------------------------------
   Base: metodologia IntuitivePixel (Jean)
   · 60-30-10  · off-black/off-white (sem #000/#fff puro)
   · contraste por brilho  · neutros com matiz quente da marca
   · Futura BT  · editorial/arquitetônico (ref.: Optik)

   TEMA: claro por padrão. Qualquer elemento com a classe `.pc-dark`
   (ou [data-theme="dark"]) inverte para o carvão da marca — os componentes
   usam tokens semânticos e se adaptam sozinhos.
   ============================================================================ */

/* ============================================================================
   0. FONTES DA MARCA (Futura BT)
   Vinham de um css/fonts.css separado. Juntar aqui tira uma requisição que
   bloqueava a renderização — o navegador precisava baixar fonts.css antes de
   sequer descobrir os .woff2. O <link rel="preload"> no HTML resolve o resto.
   ========================================================================== */
@font-face {
  font-family: "Futura BT";
  src: url("../assets/fonts/FuturaBT-Book.woff2") format("woff2"),
       url("../assets/fonts/futura-book-bt.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Futura BT";
  src: url("../assets/fonts/FuturaBT-Bold.woff2") format("woff2"),
       url("../assets/fonts/futura-bt-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   1. TOKENS
   ========================================================================== */
:root {

  /* --- 1.1 Espectro da marca (cores-assinatura) ---------------------------
     Laranja = ÚNICA cor funcional de ação/destaque (o "10").
     Coral/rosa/menta/turquesa + dourado = assinatura decorativa
     (logo, linha tricolor, gradientes). Nunca como sinal de "clicável". */
  --brand-orange: #FFA607;
  --brand-coral:  #FFA177;
  --brand-pink:   #CE697E;
  --brand-mint:   #82DDA4;
  --brand-cyan:   #70CED0;
  --brand-gold:   #A78B6B;

  --orange-soft:  #FFC24D;
  --orange-deep:  #E88400;
  --orange-tint:  rgba(255, 166, 7, 0.12);
  --gold-tint:    rgba(167, 139, 107, 0.16);

  /* --- 1.2 Neutros escuros (carvão quente) — para seções .pc-dark -------- */
  --ink-950: #17150F;
  --ink-900: #201E1B;
  --ink-850: #262320;
  --ink-800: #2E2A26;
  --ink-700: #38332E;
  --ink-600: #4A443C;
  --ink-500: #6E665B;

  /* --- 1.3 Neutros claros (papel quente) — base do site ----------------- */
  --paper-0:   #FDFCF9;   /* superfície elevada / card */
  --paper-50:  #F5F2EA;   /* fundo da página (dominante) */
  --paper-100: #ECE7DC;   /* seção alternada */
  --paper-200: #E0DACC;   /* divisores suaves */
  --paper-300: #CFC7B6;   /* borda em claro */

  /* Off-black quente (texto no tema claro) */
  --carbon-900: #1A1815;
  --carbon-700: #35302A;
  --carbon-500: #6E665B;
  --carbon-400: #8B8275;

  /* --- 1.4 Semânticos — DEFAULT CLARO (use estes na UI) ----------------- */
  --bg:              var(--paper-50);
  --bg-alt:          var(--paper-100);
  --surface:         var(--paper-0);
  --surface-raised:  #FFFFFCF2;            /* branco quase puro, translúcido */
  --surface-sunken:  var(--paper-0);

  --text-strong: var(--carbon-900);
  --text:        var(--carbon-700);
  --text-muted:  var(--carbon-500);
  /* carbon-400 (#8B8275) dava só 3.07:1 sobre o fundo alternado — reprovava no
     WCAG AA para texto pequeno, que é justamente onde este token é usado
     (rótulos e migalhas em caixa alta). A hierarquia visual em relação ao
     --text-muted passa a ser feita por tamanho, peso e espaçamento, não por cor. */
  --text-faint:  #6B6357;
  --text-on-accent: #201E1B;   /* texto SOBRE laranja = escuro */

  --border:        rgba(26, 24, 21, 0.12);
  --border-strong: rgba(26, 24, 21, 0.24);

  --accent:          var(--brand-orange);
  --accent-hover:    var(--orange-deep);
  --accent-contrast: var(--text-on-accent);
  --focus-ring:      var(--orange-deep);
  --heritage:        #8A6E48;   /* dourado mais fundo p/ legibilidade em claro */

  --error:    #D63A3F;
  --error-bg: rgba(214, 58, 63, 0.10);
  --success:  #3F9E57;
  --warning:  #E8890A;

  --shadow-sm: 0 2px 10px rgba(40, 34, 26, 0.06);
  --shadow-md: 0 14px 44px rgba(40, 34, 26, 0.10);
  --shadow-lg: 0 34px 90px rgba(40, 34, 26, 0.16);
  --glow-accent: 0 8px 30px rgba(255, 166, 7, 0.30);

  /* --- 1.5 Gradientes de marca ------------------------------------------ */
  --grad-spectrum: linear-gradient(90deg,
    var(--brand-orange) 0%, var(--brand-coral) 26%,
    var(--brand-pink) 52%, var(--brand-cyan) 100%);
  --grad-line: linear-gradient(90deg,
    var(--brand-orange) 0 34%, var(--brand-pink) 34% 67%, var(--brand-cyan) 67% 100%);
  --grad-warm: linear-gradient(135deg, var(--brand-orange), var(--brand-coral));

  /* ========================================================================
     2. TIPOGRAFIA — Futura BT
     ====================================================================== */
  --font-display: "Futura BT", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Futura BT", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Escala modular ~1.25, fluida.  --fs-mega = display gigante estilo Optik */
  --fs-mega:    clamp(2.75rem, 0.4rem + 9.4vw, 10.5rem);  /*  hero split */
  --fs-display: clamp(2.75rem, 1.7rem + 4.8vw, 5.5rem);  /*  44 → 88 */
  --fs-h1:      clamp(2.15rem, 1.5rem + 3.1vw, 3.75rem); /*  34 → 60 */
  --fs-h2:      clamp(1.7rem,  1.3rem + 1.9vw, 2.75rem); /*  27 → 44 */
  --fs-h3:      clamp(1.35rem, 1.15rem + 1.0vw, 1.85rem);/*  22 → 30 */
  --fs-h4:      1.25rem;
  --fs-body-lg: 1.1875rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-overline:0.78rem;

  --lh-tight:   0.95;
  --lh-heading: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.7;
  --lh-relaxed: 1.85;

  --track-tight:  -0.038em;
  --track-mega:   -0.05em;
  --track-snug:   -0.02em;
  --track-normal: 0;
  --track-wide:   0.08em;
  --track-widest: 0.22em;

  --fw-book: 400;
  --fw-bold: 700;

  /* ========================================================================
     3. ESPAÇAMENTO — grade de 8pt
     ====================================================================== */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  --section-y:   clamp(4rem, 8vw, 8rem);
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --container:        1280px;
  --container-narrow: 820px;
  --container-wide:   1480px;

  /* ========================================================================
     4. FORMA
     ====================================================================== */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ========================================================================
     5. MOVIMENTO — para GSAP e CSS
     ====================================================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.22s;
  --dur:      0.42s;
  --dur-slow: 0.8s;

  /* ========================================================================
     6. CAMADAS
     ====================================================================== */
  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --- 1.6 ESCOPO ESCURO — inverte os semânticos p/ o carvão da marca ------ */
.pc-dark,
[data-theme="dark"] {
  --bg:              var(--ink-900);
  --bg-alt:          var(--ink-850);
  --surface:         var(--ink-800);
  --surface-raised:  var(--ink-700);
  --surface-sunken:  var(--ink-950);

  --text-strong: #F5F1E9;
  --text:        #E3DED4;
  --text-muted:  #A79E90;
  --text-faint:  #948B7D;   /* era #7C7468: 3.61:1 no rodapé escuro, reprovava AA */

  --border:        rgba(245, 241, 233, 0.12);
  --border-strong: rgba(245, 241, 233, 0.24);

  --focus-ring: var(--orange-soft);
  --heritage:   var(--brand-gold);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 10px 34px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 26px 70px rgba(0, 0, 0, 0.50);

  background-color: var(--bg);
  color: var(--text);
}

/* ============================================================================
   7. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* o atributo [hidden] precisa vencer displays explícitos (flex/grid) */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--paper-300) var(--paper-50);
  overflow-x: hidden;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--brand-orange); color: var(--text-on-accent); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   8. TIPOGRAFIA — elementos base
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--track-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: var(--track-snug); }

p { max-width: 68ch; }
p + p { margin-top: var(--space-md); }
strong, b { font-weight: var(--fw-bold); color: var(--text-strong); }

.u-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--text-strong);
}
.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: var(--track-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.u-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text);
  max-width: 60ch;
}
.u-muted  { color: var(--text-muted); }
.u-strong { color: var(--text-strong); }
.u-uppercase { text-transform: uppercase; letter-spacing: var(--track-wide); }

/* Overline / pré-título */
.pc-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.pc-overline::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

.pc-accent-word { color: var(--accent); }

.pc-link {
  color: var(--text-strong);
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.pc-link:hover { color: var(--accent); border-color: var(--accent); }

/* ============================================================================
   9. LAYOUT
   ========================================================================== */
.pc-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.pc-container--narrow { max-width: var(--container-narrow); }
.pc-container--wide   { max-width: var(--container-wide); }

.pc-section { padding-block: var(--section-y); position: relative; }
.pc-section--alt { background: var(--bg-alt); }

.pc-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 64ch;
  margin-bottom: var(--space-2xl);
}

/* ============================================================================
   10. LINHA TRICOLOR — divisor-assinatura
   ========================================================================== */
.pc-line {
  width: 220px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-line);
}
.pc-line--vertical { width: 3px; height: 100%; min-height: 120px; }
.pc-line--full { width: 100%; }

/* ============================================================================
   11. BOTÕES
   ========================================================================== */
.pc-btn {
  --_pad-y: 0.95rem;
  --_pad-x: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--_pad-y) var(--_pad-x);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  line-height: 1;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.pc-btn:hover  { transform: translateY(-2px); }
.pc-btn:active { transform: translateY(0); }

.pc-btn__icon {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex-shrink: 0;
}
.pc-btn__icon svg { width: 0.9em; height: 0.9em; }

.pc-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-sm);
}
.pc-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-md), var(--glow-accent); }
.pc-btn--primary .pc-btn__icon { background: var(--accent-contrast); }
.pc-btn--primary .pc-btn__icon svg { color: var(--accent); }

.pc-btn--secondary {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--border-strong);
}
.pc-btn--secondary:hover { border-color: var(--accent); color: var(--accent); }

.pc-btn--dark {
  background: var(--carbon-900);
  color: #F5F1E9;
}
.pc-btn--dark:hover { background: var(--accent); color: var(--accent-contrast); }
.pc-btn--dark .pc-btn__icon { background: #F5F1E9; }
.pc-btn--dark .pc-btn__icon svg { color: var(--carbon-900); }

.pc-btn--ghost { background: transparent; color: var(--text); padding-inline: var(--space-sm); }
.pc-btn--ghost:hover { color: var(--accent); }

.pc-btn--whatsapp { background: #25D366; color: #0B2E17; }
.pc-btn--whatsapp:hover { background: #1FBA59; box-shadow: var(--shadow-md); }
/* sem isso o ícone (fill: currentColor) fica da mesma cor do fundo do
   círculo (currentColor também), ambos #0B2E17 — o ícone some. */
.pc-btn--whatsapp .pc-btn__icon { background: #0B2E17; }
.pc-btn--whatsapp .pc-btn__icon svg { color: #25D366; }

.pc-btn--lg { --_pad-y: 1.15rem; --_pad-x: 2.1rem; font-size: var(--fs-body); }
.pc-btn--block { display: flex; width: 100%; }
.pc-btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ============================================================================
   12. CARDS / SUPERFÍCIES
   ========================================================================== */
.pc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.pc-card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
/* tom cheio do dourado como fundo de um card grande ficava pesado — vira
   um tingimento leve + borda de destaque, o dourado como acento, não como
   preenchimento (princípio 60-30-10). */
.pc-card--heritage {
  background: rgba(167, 139, 107, 0.10);
  border-color: rgba(167, 139, 107, 0.32);
  border-left: 3px solid var(--brand-gold);
  color: var(--text);
}
.pc-card--heritage h1, .pc-card--heritage h2,
.pc-card--heritage h3, .pc-card--heritage strong { color: var(--text-strong); }

/* Tile de portfólio (imagem + rótulo) */
.pc-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ink-800);
}
.pc-tile img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); }
.pc-tile:hover img { transform: scale(1.06); }
.pc-tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg);
  color: #fff;
  background: linear-gradient(to top, rgba(15, 13, 11, 0.88), transparent);
}
.pc-tile__title { font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); color: #fff; }

/* ============================================================================
   13. TAGS / PÍLULAS
   ========================================================================== */
.pc-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.pc-tag--accent { color: var(--accent-hover); background: var(--orange-tint); border-color: transparent; }
.pc-tag--solid  { color: #fff; background: rgba(15,13,11,0.55); border-color: transparent;
  backdrop-filter: blur(6px); }

/* ============================================================================
   14. FORMULÁRIOS
   ========================================================================== */
.pc-field { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.pc-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.pc-label__opt { color: var(--text-faint); font-weight: var(--fw-book); }

.pc-input, .pc-textarea, .pc-select {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: var(--surface-sunken);
  color: var(--text-strong);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pc-textarea { min-height: 150px; resize: vertical; line-height: var(--lh-body); }
.pc-input::placeholder, .pc-textarea::placeholder { color: var(--text-faint); }
.pc-input:focus, .pc-textarea:focus, .pc-select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--orange-tint);
}
.pc-field--error .pc-input, .pc-field--error .pc-textarea {
  border-color: var(--error); box-shadow: 0 0 0 3px var(--error-bg);
}
.pc-error-msg { display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--fs-xs); color: var(--error); }
.pc-form__submit { margin-top: var(--space-2xl); }

/* ============================================================================
   15. UTILITÁRIOS
   ========================================================================== */
.pc-grid { display: grid; gap: var(--space-xl); }
.pc-flex { display: flex; gap: var(--space-md); }
.pc-flex--between { justify-content: space-between; align-items: center; }
.pc-flex--center  { justify-content: center; align-items: center; }
.pc-flex--wrap    { flex-wrap: wrap; }
.pc-stack > * + * { margin-top: var(--space-md); }
.pc-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}