/* ============================================================
   Oficina do Ar e Refrigeração — Design System (base)
   Tokens, tipografia, componentes reutilizáveis e utilitários.
   Conceito: "engenharia do frio" — azul profundo da marca,
   ciano do logo como energia, laranja apenas na conversão.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Marca (extraída do logo por amostragem de pixel) */
  --brand-cyan:      #0095d9;
  --brand-blue:      #1d4199;

  /* Azuis institucionais */
  --navy-950:        #000f2e;
  --navy-900:        #001e57;
  --navy-800:        #052a6e;
  --navy-700:        #12306e;
  --navy-600:        #1d4199;

  /* Acentos frios */
  --ice-300:         #7dd3fc;
  --ice-200:         #bae6fd;
  --turquoise:       #00b4d8;

  /* Conversão (laranja acessível: 5,18:1 sobre branco) */
  --action-600:      #c2410c;
  --action-500:      #ea580c;
  --action-400:      #f97316;
  --action-300:      #fb923c;

  /* WhatsApp */
  --wa-500:          #25d366;
  --wa-700:          #128c7e;

  /* Neutros */
  --ink:             #0b1220;
  --ink-2:           #475569;
  --ink-3:           #64748b;
  --surface:         #ffffff;
  --surface-2:       #f4f7fb;
  --surface-3:       #e7eef6;
  --line:            #e2e8f0;
  --line-strong:     #cbd5e1;

  /* Cabeçalho (azul da marca, o mesmo tom do símbolo do logo) */
  --header-bg:       #204198;
  --header-bg-stuck: #1b3985;
  --header-fg:       #ffffff;

  /* Superfícies escuras */
  --dark-surface:    #001233;
  --dark-line:       rgba(125, 211, 252, .18);
  --dark-text:       #c7d8ee;

  /* Tipografia */
  /* Fjalla One tem um único peso (400). Nada que use esta fonte deve
     pedir bold, senão o navegador engrossa artificialmente. */
  --font-display: "Fjalla One", "Arial Narrow", sans-serif;
  --font-body:    "Manrope", "Segoe UI", sans-serif;

  --fs-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.063rem);
  --fs-md:   clamp(1.075rem, 1.02rem + 0.28vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.50vw, 1.563rem);
  --fs-xl:   clamp(1.5rem, 1.30rem + 1.00vw, 2.125rem);
  --fs-2xl:  clamp(1.875rem, 1.50rem + 1.85vw, 3rem);
  --fs-3xl:  clamp(2.25rem, 1.60rem + 3.20vw, 4.25rem);

  --lh-tight: 1.14;
  --lh-snug:  1.25;
  --lh-base:  1.7;

  /* Espaçamentos (base 4px) */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px; --sp-12: 112px;

  --section-y: clamp(64px, 8vw, 120px);
  --container: 1220px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Raios */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --r-pill: 999px;

  /* Sombras com tinta azul, nunca cinza puro */
  --sh-1: 0 1px 2px rgba(0, 30, 87, .06), 0 2px 8px rgba(0, 30, 87, .05);
  --sh-2: 0 4px 12px rgba(0, 30, 87, .08), 0 12px 32px rgba(0, 30, 87, .07);
  --sh-3: 0 12px 28px rgba(0, 30, 87, .12), 0 28px 64px rgba(0, 30, 87, .12);
  --sh-cyan: 0 14px 40px rgba(0, 149, 217, .28);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 480ms;
}

/* ---------- 2. Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-2);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration: none; transition: color 240ms var(--ease); }
a:hover { color: var(--brand-cyan); }

strong, b { font-weight: 700; color: var(--ink); }

/* Foco visível em tudo que é interativo */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-cyan); color: #fff; }

/* ---------- 3. Layout ---------- */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); position: relative; }
.section--tint { background: var(--surface-2); }
.section--dark { background: var(--dark-surface); color: var(--dark-text); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
/* O negrito herda a cor de texto escura e sumiria no fundo navy */
.section--dark strong, .section--dark b { color: #fff; }

/* Cabeçalho de seção */
.sec-head { max-width: 1000px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy-600);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--turquoise));
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--ice-300); }

.sec-head p { font-size: 18px; margin-top: var(--sp-5); }

/* ---------- 4. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease),
              background-color 280ms var(--ease), color 280ms var(--ease),
              border-color 280ms var(--ease);
}
.btn svg { flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--action-600);
  color: #fff;
  box-shadow: 0 10px 24px rgba(194, 65, 12, .28);
}
.btn--primary:hover { background: var(--action-500); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(194, 65, 12, .34); }

.btn--navy {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--sh-2);
}
.btn--navy:hover { background: var(--navy-600); color: #fff; transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--line-strong);
}
.btn--outline:hover { border-color: var(--navy-900); background: var(--navy-900); color: #fff; transform: translateY(-2px); }

.btn--ghost-light {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; transform: translateY(-2px); }

/* ---------- 5. Botão WhatsApp com brilho ---------- */
@property --shiny-angle        { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --shiny-angle-offset { syntax: "<angle>";      initial-value: 0deg;    inherits: false; }
@property --shiny-percent      { syntax: "<percentage>"; initial-value: 5%;      inherits: false; }
@property --shiny-shine        { syntax: "<color>";      initial-value: #ffffff; inherits: false; }

.btn-shiny-wa {
  --wa-bg-from: #128c7e;
  --wa-bg-to: #25d366;
  --wa-bg-subtle: #0e6b5f;
  --wa-fg: #ffffff;
  --wa-highlight: #4ade80;
  --wa-highlight-subtle: #bbf7d0;
  --shiny-duration: 3s;
  --shiny-shadow-size: 2px;
  --shiny-transition: 800ms cubic-bezier(.25, 1, .5, 1);

  isolation: isolate;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline-offset: 4px;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--wa-fg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  background:
    linear-gradient(45deg, transparent 25%, rgba(255,255,255,.7) 50%, transparent 75%, transparent 100%) padding-box,
    linear-gradient(135deg, var(--wa-bg-from), var(--wa-bg-to)) padding-box,
    conic-gradient(
      from calc(var(--shiny-angle) - var(--shiny-angle-offset)),
      transparent,
      var(--wa-highlight) var(--shiny-percent),
      var(--shiny-shine) calc(var(--shiny-percent) * 2),
      var(--wa-highlight) calc(var(--shiny-percent) * 3),
      transparent calc(var(--shiny-percent) * 4)
    ) border-box;
  background-size: 250% 250%, 100% 100%, 100% 100%;
  background-position: 200% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--wa-bg-subtle), 0 8px 22px rgba(18, 140, 126, .35);
  transition:
    --shiny-angle-offset var(--shiny-transition),
    --shiny-percent var(--shiny-transition),
    --shiny-shine var(--shiny-transition),
    box-shadow var(--shiny-transition),
    transform var(--shiny-transition),
    background-position 1000ms ease;
}

.btn-shiny-wa::before,
.btn-shiny-wa::after,
.btn-shiny-wa > span::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  z-index: -1;
}
.btn-shiny-wa:active { translate: 0 1px; }

.btn-shiny-wa::before {
  --size: calc(100% - var(--shiny-shadow-size) * 3);
  --position: 2px;
  --space: calc(var(--position) * 2);
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), #ffffff calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), black, transparent 10% 90%, black);
          mask-image: conic-gradient(from calc(var(--shiny-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: .35;
  z-index: -1;
}

.btn-shiny-wa::after {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--wa-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
          mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .55;
}

.btn-shiny-wa > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  padding: 3px 0;
}
.btn-shiny-wa > span svg { flex-shrink: 0; }

.btn-shiny-wa > span::before {
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 90%, var(--wa-highlight) 0%, rgba(74, 222, 128, .35) 30%, transparent 60%);
  opacity: 0;
  transition: opacity var(--shiny-transition);
  animation: calc(var(--shiny-duration) * 1.5) shiny-breathe linear infinite;
}

.btn-shiny-wa,
.btn-shiny-wa::before,
.btn-shiny-wa::after {
  animation: shiny-angle linear infinite var(--shiny-duration),
             shiny-angle calc(var(--shiny-duration) / .4) linear infinite reverse paused;
  animation-composition: add;
}

.btn-shiny-wa:is(:hover, :focus-visible) {
  /* Sem isto o `a:hover` global (mais específico) pinta o rótulo de ciano */
  color: var(--wa-fg);
  --shiny-percent: 20%;
  --shiny-angle-offset: 95deg;
  --shiny-shine: var(--wa-highlight-subtle);
  background-position: -100% 0, 0 0, 0 0;
  box-shadow: inset 0 0 0 1px var(--wa-bg-subtle), 0 12px 28px rgba(37, 211, 102, .45);
}
.btn-shiny-wa:is(:hover, :focus-visible),
.btn-shiny-wa:is(:hover, :focus-visible)::before,
.btn-shiny-wa:is(:hover, :focus-visible)::after { animation-play-state: running; }
.btn-shiny-wa:is(:hover, :focus-visible) > span::before { opacity: 1; }

@keyframes shiny-angle   { to { --shiny-angle: 360deg; } }
@keyframes shiny-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }

.btn-shiny-wa--sm { padding: 11px 22px; }
.btn-shiny-wa--sm > span { font-size: var(--fs-xs); }

/* ---------- 6. Cartões ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: rgba(0, 149, 217, .45); }

/* Cartão dentro de seção escura.
   O branco padrão não serve aqui: o título herda #fff de .section--dark e
   desaparece. Vira vidro escuro, mantendo a atmosfera da seção.
   Contraste medido sobre o fundo resultante (#0d1e3d):
   título 16,5:1 · texto 10,2:1 · número 9,9:1, todos AAA. */
.section--dark .card {
  background:
    linear-gradient(158deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .025) 62%),
    rgba(0, 18, 51, .5);
  border-color: rgba(125, 211, 252, .22);
  box-shadow: 0 10px 30px rgba(0, 8, 25, .38);
  backdrop-filter: blur(4px);
}
.section--dark .card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .55), transparent);
}
.section--dark .card:hover {
  border-color: rgba(0, 149, 217, .6);
  box-shadow: 0 20px 48px rgba(0, 8, 25, .55), 0 0 0 1px rgba(0, 149, 217, .2);
}
.section--dark .card p { color: #b9cde6; }

/* Borda com brilho em movimento.
   Um gradiente radial 300% maior que o card desliza pelo quadro; a máscara
   subtrai o miolo e deixa visível apenas a moldura. */
.card--shine {
  --shine-width: 2px;
  --shine-duration: 14s;
  --shine-1: var(--brand-blue);
  --shine-2: var(--brand-cyan);
  --shine-3: var(--ice-300);
}
.card--shine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: var(--shine-width);
  background-image: radial-gradient(
    transparent, transparent,
    var(--shine-1), var(--shine-2), var(--shine-3),
    transparent, transparent
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: shine-pulse var(--shine-duration) infinite linear;
  pointer-events: none;
  opacity: .75;
  transition: opacity var(--dur) var(--ease);
}
.card--shine:hover::before { opacity: 1; }

@keyframes shine-pulse {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ---------- 7. Etiquetas e listas ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  transition: border-color 260ms var(--ease), color 260ms var(--ease), background-color 260ms var(--ease), transform 260ms var(--ease);
}
.chip:hover { border-color: var(--brand-cyan); color: var(--navy-900); background: #fff; transform: translateY(-2px); }

.chip--dark {
  background: rgba(255, 255, 255, .04);
  border-color: var(--dark-line);
  color: #e8f2fb;
}
.chip--dark:hover { background: rgba(0, 149, 217, .16); border-color: var(--brand-cyan); color: #fff; }

.ticklist { display: grid; gap: var(--sp-3); }
.ticklist li {
  position: relative;
  padding-left: 34px;
  font-size: var(--fs-base);
}
.ticklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 149, 217, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230095d9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--dark .ticklist li::before { background-color: rgba(125, 211, 252, .16); }

/* ---------- Bairros atendidos (home e internas) ---------- */
.hoods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.hoods li {
  position: relative;
  padding: 9px 0 9px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  border-bottom: 1px solid rgba(125, 211, 252, .10);
  transition: color 240ms var(--ease), transform 240ms var(--ease);
}
.hoods li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 9px; height: 1px;
  background: var(--brand-cyan);
  transition: width 240ms var(--ease);
}
.hoods li:hover { color: var(--ice-200); transform: translateX(6px); }
.hoods li:hover::before { width: 15px; }
.hoods .kw { color: #90b2d6; font-weight: 500; }

/* ---------- 8. Animação de entrada ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

/* ---------- 9. Utilitários ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  z-index: 999;
  padding: 12px 20px;
  background: var(--navy-900);
  color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: top 220ms var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* Malha técnica de linhas, textura de fundo dos blocos escuros */
.grid-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(125, 211, 252, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 211, 252, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

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