/* css/style.css
   Extracted styles from original page (kept selectors and responsive rules).
   For maintainability: keep colors and tokens at top for easy edits.
*/
:root {
  --bg: #0b0c0f;
  --elev: #12141a;
  --text: #ffffff;
  --muted: #e0e0e0;
  --brand: #ff6f61;
  --line: #1f232b;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --maxw: 1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body {
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 0px}

/* Intro box (nota) */
.intro {
  display:inline-block; width:fit-content; max-width:92vw; margin:12px auto; padding:10px 16px;
  background:rgba(18,20,26,.35); border:1px solid rgba(255,255,255,.06); border-radius:10px;
  backdrop-filter:blur(2px); text-align:center; animation:fadeInUp .7s ease both;
}
p.lead.intro{ max-width:none; }
@keyframes fadeInUp{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} }

/* Lead legível no fundo branco, com bordinha */
#marcas p.lead.intro-light{
  display: inline-block;
  color: #222;
  font-weight: 600;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 16px;
  margin: 8px auto 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Dá um espaço extra antes do carrossel para não “colar” no texto */
#marcas .brand-belt{
  padding-top: 22px;
}

/* Header */
header.site { position:sticky; top:0; z-index:50; backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 76%, transparent); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 14px 0; }
.brand { font-weight:800; letter-spacing:.02em; color: var(--text); transition: color .2s ease; }
.brand:hover { color:var(--brand); }
nav ul { display:flex; gap:.9rem; list-style:none; padding:0; margin:0; }
nav a { padding:.55rem .8rem; border-radius:0; font-weight:600; color:var(--text); transition: color .2s ease; }
nav a:hover { color:var(--brand); border:none; background:none; }
.socials { display:flex; gap:.6rem; }
.socials a { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:none; color:var(--text); transition:.2s ease; font-size:18px; background:none; }
.socials a:hover { color:var(--brand); background:none; }

/* SOBRE */
.hero { padding: 100px 0 60px; }
#sobre.hero-bg { position: relative; background: url('https://braian.com.br/imagens/fundo.jpg') center top / auto 100% repeat-x; color:#fff; }
#sobre.hero-bg::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,0.24); }
#sobre.hero-bg .container { position:relative; z-index:1; }
.wrap { display:grid; grid-template-columns: 1.2fr .8fr; gap:40px; align-items:center; }
.hero h1 { font-size: clamp(28px, 6vw, 46px); margin:0 0 28px; font-weight:900; line-height:1.08; color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.sub { font-size: clamp(16px, 2.4vw, 19px); color:#fff; margin:0 0 34px; }
.stats { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 14px; }
.tag { display:inline-flex; align-items:center; padding:.65rem .95rem; border-radius:999px; font-size:.9rem; background:var(--elev); border:1px solid var(--line); color:#fff; box-shadow:var(--shadow); line-height:1.4; transition: transform .35s ease, background .3s ease; cursor:default; }
.tag:hover { transform: translateY(-3px); }
.tag i { font-size:1rem; color:var(--brand); }
.tag .t { display:inline-block; margin-left:.55rem; font-weight:600; }
.tag .t strong { font-weight:800; }
.hero-side { display:flex; align-items:end; justify-content:flex-end; }
.portrait { width:100%; max-width: 420px; transform: translateY(0); transition: transform .35s ease; }
.portrait img { width:100%; height:auto; display:block; transform: scaleX(-1); }
.portrait:hover { transform: translateY(-6px); }

/* Elementos auxiliares */
.hero-socials{ display:none; justify-content:center; gap:16px; margin:10px 0 12px; }
.masthead-name{ display:none; }

/* Seções genéricas */
section { padding: 40px 0; border-top:1px solid var(--line); }
main > section:not(#sobre) { padding: 32px 0; text-align:center; }

/* Títulos de seção refinados */
h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; text-align:center; }
h2::after { content:""; display:block; width:60px; height:3px; margin:6px auto 10px; background:var(--brand); border-radius:2px; }
#timeline h2::after { margin:14px auto 18px; }
p.lead { color: var(--muted); font-size: 1.08rem; margin:12px auto 0; max-width:70ch; line-height:1.7; letter-spacing:.01em; text-wrap: balance; }

/* Ajustes entre seções */
#timeline.container { padding-top: 24px; }
#timeline .timeline { margin-top: 16px; }

/* =========================
   Marcas (full-bleed)
   ========================= */
#marcas {
  background:#fff;
  color:#0b0c0f;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
}
#marcas h2 { color:#0b0c0f; }
#marcas .lead { color:#444; }

.brands{
  --logo-h: clamp(90px, 14vw, 140px);
  --cell-w: clamp(160px, 24vw, 260px);
}
.brand-belt{ overflow:hidden; padding:18px 0 26px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.brand-track{ display:flex; flex-wrap:nowrap; gap:0; align-items:center; width:max-content; animation: scroll var(--marquee-duration, 28s) linear infinite; will-change: transform; }
.brand-track .logos{ display:flex; gap:32px; align-items:center; }
.brand-track .logo{ display:flex; align-items:center; justify-content:center; width: var(--cell-w); height: var(--logo-h); }
.brand-track img{ height: 100%; width: auto; max-width: 100%; display:block; object-fit: contain; }
.brand-track.pause{ animation: none !important; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .brand-track{ animation: none; }
}

/* Timeline */
.timeline-wrap{ position:relative; }
.timeline{ position:relative; list-style:none; margin:40px 0 0; padding:0; }
.timeline::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background: var(--line); }
.tl-item{ position:relative; width:100%; display:flex; align-items:flex-start; margin-bottom:100px; padding-top:60px; opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.tl-item.is-visible{ opacity:1; transform:none; }
.tl-year{ position:absolute; left:50%; transform:translateX(-50%); top:0; background:#1a1d24; border:1px solid var(--line); padding:6px 14px; border-radius:999px; font-weight:800; letter-spacing:.02em; z-index:3; }
.tl-col{ width:50%; padding:12px 24px; position:relative; }
.tl-col.left{ text-align:right; }
.tl-col.right{ text-align:left; }
.tl-col.left::before, .tl-col.right::before{ content:""; position:absolute; top:50%; transform:translateY(-50%); width:28px; height:1px; background: var(--line); }
.tl-col.left::before{ right:0; }
.tl-col.right::before{ left:0; }

/* Cards da timeline */
.tl-card{ display:inline-block; background: var(--elev); border:1px solid var(--line); border-radius:14px; padding:18px; max-width:380px; box-shadow: var(--shadow); position:relative; z-index:1; font-size:.9rem; margin-top:28px; line-height:1.6; opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.tl-card{ content-visibility:auto; contain-intrinsic-size: 1px 320px; }
.tl-card.is-visible{ opacity:1; transform: none; }
.tl-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.tl-title{ font-weight:800; font-size:1.1rem; margin:0; display:inline; }
.tl-when{ display:inline-block; margin-left:8px; font-size:.85rem; color:var(--muted); font-weight:700; opacity:.9; }
.tl-roles { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; justify-content:center; }
.tl-role { background: var(--line); color: var(--muted); font-size:.78rem; padding:4px 10px; border-radius:8px; font-weight:600; }
.tl-text{ margin:12px 0 0; color:#e7e7e7; font-size:.9rem; line-height:1.6; max-width: 65ch; text-align:justify; }
.tl-media{ margin:0 0 10px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.tl-media img{ display:block; width:100%; height:auto; max-height:200px; object-fit:cover; }

/* Controles da timeline */
.tl-controls{ display:flex; justify-content:center; margin-top:18px; gap:10px; }
.tl-btn{ background:transparent; color:var(--muted); border:1px solid var(--line); padding:10px 14px; border-radius:999px; font-weight:700; cursor:pointer; transition:.2s ease; }
.tl-btn:hover{ color:#fff; border-color: var(--brand); box-shadow:0 0 0 3px rgba(255,111,97,.12); }
.is-hidden{ display:none; }
.tl-end{ display:none; color:var(--muted); font-weight:700; border:none; padding:0; text-align:center; margin-top:10px; }
.tl-col.no-connector::before{ display:none; }

/* Form classes */
.form{max-width:720px;margin:24px auto 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field{text-align:left}
.label{display:block;font-weight:700;margin-bottom:6px}
.input,.textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#0f1218;color:#fff}
.inline-captcha{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:12px 0 16px;flex-wrap:wrap}
.captcha-box{display:flex;align-items:center;gap:10px}
.captcha-equation{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#0f1218;font-weight:800}
.form-feedback{text-align:center;color:var(--muted)}

/* Responsivo */
@media (max-width: 900px){
  .container{ padding:0 20px; }
  .nav{ flex-direction:column; align-items:center; gap:6px; padding:14px 0; }

  header.site{ display:none; }
  .brand{ display:none; }
  nav{ display:none; }
  .socials{ display:none; }
  .mobile-menu{ display:none !important; }
  .nav{ padding:10px 0; }

  .hero { padding: calc(28px + env(safe-area-inset-top)) 0 40px; }
  .wrap { grid-template-columns:1fr; gap:24px; align-items:start; }
  .hero-side { order:-1; justify-content:center; margin-top:6px; flex-direction:column; align-items:center; }
  .portrait{ max-width: 220px; margin:0 auto 8px; }
  .portrait img{ max-height:50vh; object-fit:contain; transform:none; }
  #sobre.hero-bg{ background-size: cover; background-repeat: no-repeat; }
  #sobre .container{ overflow:hidden; }

  .masthead-name{ display:block; font-weight:800; font-size:clamp(22px,7vw,34px); letter-spacing:.06em; text-transform:uppercase; text-align:center; color:#fff; margin:12px auto 8px; text-shadow:0 1px 6px rgba(0,0,0,.35); }
  .masthead-name::after{ content:""; display:block; width:48px; height:2px; margin:10px auto 0; background:var(--brand); border-radius:2px; }

  .hero-socials{ display:flex; justify-content:center; gap:14px; margin:4px 0 10px; }
  .hero-socials a{ width:56px; height:56px; font-size:24px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; opacity:.92; transition: transform .2s ease, opacity .2s ease; }
  .hero-socials a:hover{ opacity:1; transform:translateY(-1px); }
  .hero h1{ font-size: clamp(24px, 7vw, 34px); line-height:1.08; margin-bottom:18px; }
  .sub{ font-size: clamp(15px, 4vw, 18px); margin-bottom:18px; }
  .stats{ display:none; }

  .grid-2{ grid-template-columns:1fr; }
  #contato .form{ padding-inline:20px; }
  section{ padding: 24px 0; }
  main > section:not(#sobre) { padding: 28px 0; }
  .intro{ max-width:100%; padding-inline:18px; }

  #timeline .lead.intro{ display:none; }
  #marcas p.lead.intro-light{ display:none; }

  .timeline{ margin-top:12px; }
  .timeline::before{ left:50%; }
  .tl-item{ flex-direction:column; margin-bottom:40px; padding-top:36px; }
  .tl-year{ top:0; font-size:.95rem; }
  .tl-col{ width:100%; padding:8px 16px; text-align:center; }
  .tl-col.left::before, .tl-col.right::before{ display:none; }
  .tl-card{ max-width:520px; width:100%; margin:12px auto 0; text-align:left; }
  .tl-header{ flex-direction:column; align-items:flex-start; gap:2px; }
}

/* Mobile específico para marcas */
@media (max-width: 600px){
  #marcas.brands{
    --cell-w: clamp(120px, 48vw, 220px);
    --logo-h: clamp(72px, 18vw, 110px);
  }
  #marcas .brand-track .logos{ gap: 16px; }
}

/* === BOTÕES UNIFICADOS (ajustados para contraste automático) === */
.tl-btn {
  --btn-fg: var(--text);
  --btn-bg: transparent;
  --btn-bd: var(--line);
  --btn-fg-hover: #fff;
  --btn-bg-hover: color-mix(in srgb, var(--elev) 88%, transparent);
  --btn-bd-hover: var(--brand);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 18px;
  font: 700 0.95rem/1 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  letter-spacing:.02em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:12px;
  cursor:pointer;
  transition:.15s ease;
}

.tl-btn:hover,
.tl-btn:focus-visible {
  color: var(--btn-fg-hover);
  background: var(--btn-bg-hover);
  border-color: var(--btn-bd-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(255,111,97,.12);
}

.tl-btn--brand {
  --btn-fg: #fff;
  --btn-bg: var(--brand);
  --btn-bd: var(--brand);
  --btn-fg-hover: #fff;
  --btn-bg-hover: color-mix(in srgb, var(--brand) 85%, #000 15%);
  --btn-bd-hover: var(--brand);
}

.light-bg .tl-btn {
  --btn-fg: #0b0c0f;
  --btn-bd: #d7d7d7;
  --btn-fg-hover: #0b0c0f;
  --btn-bg-hover: color-mix(in srgb, #000 6%, transparent);
  --btn-bd-hover: var(--brand);
}

.light-bg .tl-btn--brand {
  --btn-fg: #fff;
  --btn-bg: var(--brand);
  --btn-bd: var(--brand);
}

@media (max-width: 600px){
  .tl-btn{ padding:11px 16px; font-size:0.9rem; }
}
/* ====== Form – capricho extra (erros/estado) ====== */
.field .error-msg{
  color:#ffb4a8;
  min-height:1.1em;
  display:block;
  margin-top:6px;
  line-height:1.2;
}
.field.invalid .input,
.field.invalid .textarea{
  border-color:#ffb4a8;
  box-shadow: 0 0 0 3px rgba(255,180,168,.12);
}
.field.valid .input,
.field.valid .textarea{
  border-color:#2ecc71;
}
.req{ color:var(--brand); font-weight:800; }
.char-counter{ color:var(--muted); opacity:.9; }
.tl-btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }
.tl-btn[aria-busy="true"]{ pointer-events:none; opacity:.85; }
.tl-btn[aria-busy="true"]::after{
  content:""; display:inline-block; width:1em; height:1em; margin-left:.6em; vertical-align:-.15em;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ====== Human Check (modal) ====== */
.hc-dialog{ padding:0; border:none; background:transparent; }
.hc-dialog::backdrop{ background:rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.hc-card{
  width:min(520px, 92vw);
  margin:auto;
  background: color-mix(in srgb, var(--elev) 94%, transparent);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  color:#fff;
  padding:20px 18px;
}
.hc-card h3{ margin:0 0 6px; font-size:1.2rem; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.hc-sub{ margin:0 0 14px; color:var(--muted); }
.hc-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.hc-alt{ display:flex; align-items:center; gap:10px; justify-content:center; margin-top:8px; color:var(--muted); font-size:.9rem; }
.hc-alt span{ opacity:.85; }

.hc-slider{ margin: 6px 0 2px; }
.hc-slider input[type="range"]{
  width:100%;
  height:12px;
  border-radius:999px;
  appearance:none;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 0%, #2a2e37 0%);
  outline:none;
}
.hc-slider input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:2px solid var(--brand);
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  cursor:grab;
}
.hc-slider input[type="range"]::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:2px solid var(--brand);
  box-shadow: 0 1px 6px rgba(0,0,0,.35);
  cursor:grab;
}
/* === FIX: linha preta vertical + scroll horizontal fino === */

/* 1) evita qualquer overflow horizontal global (sem afetar scroll Y) */
html, body { overflow-x: clip; } /* se preferir: hidden */

/* 2) o fundo do herói estava com repeat-x e a imagem tem costura.
      trocamos pra cover/no-repeat pra não “emendar” na horizontal */
#sobre.hero-bg{
  background: url('https://braian.com.br/imagens/fundo.jpg') center top / cover no-repeat !important;
}

/* 3) full-bleed da faixa de marcas sem “sangrar” 1px (subpixel de 100vw) */
#marcas .brand-belt{
  overflow: hidden;           /* já tinha, reforçamos */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* evita que subpixel crie barra: */
  transform: translateZ(0);
  will-change: transform;
}

/* 4) se a linha vier da timeline em alguns browsers, suaviza (opcional) */
.timeline::before{
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

/* 5) belt/track não deve causar X-scroll mesmo em zoom alto */
#marcas .brand-track{ max-width: 100vw; }