/* ==========================================================================
   REBOQUE FREITAS BRAGA — estilo público
   Conceito: estrada à noite. Fundo cor de asfalto, acento âmbar de baliza
   rotativa de guincho, divisórias em linha tracejada (marcação rodoviária),
   badges de cobertura em forma de sinal de estrada.
   ========================================================================== */

:root{
  --asphalt:      #14181d;
  --asphalt-2:    #1d232b;
  --asphalt-3:    #262e38;
  --paper:        #f4f1ea;
  --paper-ink:    #1c1c1a;
  --ink:          #eef0f2;
  --ink-dim:      #a8b0ba;
  --beacon:       #ff7a1a;
  --beacon-dark:  #cc5f0f;
  --line:         #333c47;
  --ok:           #3fae6a;
  --err:          #e2543a;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius: 4px;
  --wrap: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--asphalt);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .4em; letter-spacing:.2px; }
p{ margin:0 0 1em; color:var(--ink-dim); }
.section--paper p, .legal p{ color:#4a4a45; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
.wrap--narrow{ max-width:760px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--beacon); color:#111; padding:10px 16px; z-index:200;
}
.skip-link:focus{ left:10px; top:10px; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  padding:.8em 1.3em; border-radius:var(--radius); text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:transform .12s ease, background-color .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn--beacon{ background:var(--beacon); color:#171008; }
.btn--beacon:hover{ background:#ff8b3b; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink-dim); }
.btn--dark{ background:var(--asphalt-3); color:var(--ink); }
.btn--dark:hover{ background:#2f3946; }
.btn--call{ background:var(--ink); color:var(--asphalt); }
.btn--lg{ padding:1em 1.5em; font-size:1.05rem; }
.btn--block{ width:100%; }
.btn--header{ display:none; }

/* ---------- Cabeçalho ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(20,24,29,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; gap:16px; padding:12px 20px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand__mark{ color:var(--beacon); display:flex; }
.brand__text{ font-family:var(--font-display); font-size:1.02rem; line-height:1.1; }
.brand__text small{ letter-spacing:2px; color:var(--ink-dim); font-size:.62em; }
.main-nav{ display:none; }
.nav-toggle{
  background:none; border:1px solid var(--line); border-radius:var(--radius);
  width:42px; height:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }
.mobile-nav{ display:flex; flex-direction:column; border-top:1px solid var(--line); background:var(--asphalt-2); }
.mobile-nav a{ padding:14px 20px; border-bottom:1px dashed var(--line); text-decoration:none; font-family:var(--font-display); }
.mobile-nav[hidden]{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:56px 0 64px; overflow:hidden; }
.hero__stripes{
  position:absolute; inset:auto 0 0 0; height:10px;
  background:repeating-linear-gradient(-45deg, var(--beacon) 0 22px, var(--asphalt) 22px 44px);
  opacity:.9;
}
.hero__inner{ position:relative; }
.hero__eyebrow{ color:var(--beacon); font-family:var(--font-display); letter-spacing:1px; margin-bottom:.6em; font-size:.92rem; }
.hero__title{ font-size:clamp(2rem, 7vw, 3.2rem); color:#fff; max-width:14ch; }
.hero__subtitle{ max-width:46ch; font-size:1.08rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 32px; }
.hero__trust{ list-style:none; display:flex; gap:26px; flex-wrap:wrap; padding:20px 0 0; margin:0; border-top:1px dashed var(--line); }
.hero__trust li{ display:flex; flex-direction:column; }
.hero__trust strong{ font-family:var(--font-display); font-size:1.4rem; color:var(--beacon); }
.hero__trust span{ font-size:.82rem; color:var(--ink-dim); }

/* ---------- Secções genéricas ---------- */
.section{ padding:56px 0; border-top:1px dashed var(--line); }
.section--dark{ background:var(--asphalt-2); }
.section--paper{ background:var(--paper); color:var(--paper-ink); border-top:none; }
.section--paper h2{ color:var(--paper-ink); }
.section__title{ font-size:clamp(1.5rem, 4vw, 2.1rem); color:#fff; }
.section--paper .section__title{ color:var(--paper-ink); }
.section__lead{ max-width:56ch; margin-bottom:2em; }

/* ---------- Serviços ---------- */
.service-list{ list-style:none; margin:0; padding:0; border-top:1px dashed var(--line); }
.service-row{ display:flex; gap:18px; padding:22px 0; border-bottom:1px dashed var(--line); align-items:flex-start; }
.service-row__icon{ color:var(--beacon); flex:none; margin-top:2px; }
.service-row h3{ font-size:1.15rem; color:#fff; margin-bottom:.3em; }
.service-row p{ margin:0; }

/* ---------- Sobre ---------- */
.about{ display:grid; gap:32px; }
.about__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0; }
.about__stats > div{ border:1px solid #ddd8c9; border-radius:var(--radius); padding:16px; text-align:center; background:#fff; }
.about__stats dt{ font-family:var(--font-display); font-size:1.6rem; color:var(--beacon-dark); }
.about__stats dd{ margin:0; font-size:.8rem; color:#6a6a60; }

/* ---------- Cobertura (sinais de estrada) ---------- */
.coverage-signs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.coverage-signs li{
  border:2px solid var(--ink); border-radius:2px; padding:.5em .9em;
  font-family:var(--font-display); font-size:.86rem; color:var(--ink);
  background:var(--asphalt-3);
}

/* ---------- Galeria (grelha 4 colunas x 3 linhas em ecrãs largos) ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
}
.gallery-grid__item{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:block; aspect-ratio:4/3; }
.gallery-grid__item img{ width:100%; height:100%; object-fit:cover; }
.gallery-empty{ border:1px dashed var(--line); padding:24px; text-align:center; border-radius:var(--radius); }

/* ---------- Formulários ---------- */
.section--urgent{ background:linear-gradient(180deg, var(--asphalt-2), var(--asphalt)); }
.urgent-card{ border:1px solid var(--line); background:var(--asphalt-2); border-radius:8px; padding:28px 22px; }
.contact-grid{ display:grid; gap:36px; }
.field-grid{ display:grid; gap:16px; }
.field{ display:block; margin-bottom:16px; }
.field span{ display:block; font-size:.86rem; margin-bottom:.4em; color:var(--ink-dim); }
.field input, .field textarea{
  width:100%; background:var(--asphalt); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--ink); padding:.75em .85em; font-family:var(--font-body); font-size:1rem;
}
.section--paper .field input, .section--paper .field textarea{ background:#fff; color:#222; }
.field input:focus, .field textarea:focus{ outline:2px solid var(--beacon); outline-offset:1px; }
.field--captcha input{ max-width:120px; }
.location-row{ display:flex; gap:8px; flex-wrap:wrap; }
.location-row input{ flex:1 1 200px; }
.btn--geo{ flex:0 0 auto; font-size:.82rem; padding:.7em 1em; white-space:nowrap; }
.geo-status{ display:block; font-size:.8rem; margin-top:.4em; color:var(--ink-dim); min-height:1.2em; }
.geo-status.is-ok{ color:#7fe3a8; }
.geo-status.is-err{ color:#ffb199; }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }
.consent{ display:flex; gap:10px; font-size:.85rem; color:var(--ink-dim); margin-bottom:18px; align-items:flex-start; }
.consent a{ text-decoration:underline; }
.lead-form__note{ font-size:.8rem; margin-top:10px; text-align:center; }
.contact-side{ border-top:1px dashed var(--line); padding-top:24px; }
.contact-side h3{ color:#fff; }
.contact-side p{ margin:0 0 .6em; }
.contact-side__coverage{ font-size:.85rem; margin-top:1em; }

.alert{ padding:14px 18px; border-radius:var(--radius); font-size:.92rem; margin:20px 0 0; }
.alert--sucesso{ background:rgba(63,174,106,.15); border:1px solid var(--ok); color:#bdf0d1; }
.alert--erro{ background:rgba(226,84,58,.15); border:1px solid var(--err); color:#ffc9bc; }

/* ---------- Rodapé ---------- */
.site-footer{ background:var(--asphalt); border-top:1px solid var(--line); padding:48px 0 0; }
.footer__grid{ display:grid; gap:28px; }
.footer__grid h3{ color:#fff; font-size:1rem; margin-bottom:.6em; }
.footer__grid p{ margin:0 0 .5em; font-size:.92rem; }
.footer__tagline{ margin-top:12px; max-width:32ch; }
.brand--footer{ display:flex; align-items:center; gap:10px; }
.footer__bottom{ border-top:1px solid var(--line); margin-top:32px; padding:16px 20px; font-size:.78rem; color:var(--ink-dim); }

/* ---------- Barra de ação fixa (mobile) ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  display:flex; border-top:1px solid var(--line);
}
.sticky-cta__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 10px; text-decoration:none; font-family:var(--font-display); font-size:.95rem;
}
.sticky-cta__btn--call{ background:var(--beacon); color:#171008; }
.sticky-cta__btn--wpp{ background:#1d1f1c; color:#fff; }
body{ padding-bottom:60px; }

/* ---------- Legal ---------- */
.legal h2{ color:#fff; font-size:1.1rem; margin-top:1.6em; }
.legal{ background:var(--asphalt); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:760px){
  .main-nav{ display:flex; gap:22px; font-family:var(--font-display); }
  .main-nav a{ text-decoration:none; }
  .nav-toggle{ display:none; }
  .btn--header{ display:inline-flex; }
  .about{ grid-template-columns:1.3fr 1fr; align-items:center; }
  .contact-grid{ grid-template-columns:1.4fr 1fr; }
  .field-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(4, 1fr); }
  .sticky-cta{ display:none; }
  body{ padding-bottom:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}