/* N1 Tips — identidade visual própria: estrada, asfalto, marcos de pedra.
   Nada partilhado com outros sites do portefólio nem com sites de apostas. */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --asfalto: #1c1f22;
  --asfalto-2: #26292d;
  --bruma: #6d7580;
  --pedra: #eeeae1;
  --pedra-2: #f7f4ed;
  --linha: #d8d2c3;
  --marca: #d3792b;   /* laranja terracota — sinalética de estrada portuguesa */
  --marca-2: #a85a1c;
  --verde: #4c6b52;   /* verde de placa de estrada nacional */
  --branco: #fffdf8;
  --sombra: 0 12px 32px -16px rgba(28,31,34,.35);
  --radius: 10px;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--pedra-2); color:var(--asfalto);
  font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--marca-2); }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--asfalto); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 1.5rem; }

/* ---------- topo ---------- */
.topo{
  position:sticky; top:0; z-index:40; background:rgba(247,244,237,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--linha);
}
.topo .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; gap:1rem; }
.marca-nome{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--asfalto);
  font-family:var(--mono); font-weight:600; letter-spacing:.02em; font-size:1.05rem;
}
.placa-n1{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:1.6rem; border-radius:3px; background:var(--verde);
  color:var(--branco); font-family:var(--mono); font-weight:700; font-size:.72rem;
  border:2px solid var(--branco); box-shadow:0 0 0 1.5px var(--verde);
}
nav.principal ul{ list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; }
nav.principal a{
  text-decoration:none; color:var(--asfalto); font-size:.92rem; font-weight:500;
  padding-bottom:.2rem; border-bottom:2px solid transparent; transition:border-color .2s, color .2s;
}
nav.principal a:hover, nav.principal a[aria-current="page"]{ border-color:var(--marca); color:var(--marca-2); }

/* ---------- hero / estrada animada ---------- */
.hero{ position:relative; overflow:hidden; background:var(--asfalto); color:var(--pedra); }
.hero .wrap{ position:relative; padding:5rem 1.5rem 6.5rem; z-index:2; }
.hero-tag{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--marca); display:block; margin-bottom:1rem;
}
.hero h1{ color:var(--branco); font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:18ch; }
.hero p.lead{ color:#c7cbd1; max-width:46ch; font-size:1.08rem; margin-top:1rem; }

/* estrada SVG a percorrer o hero, com faixa a "andar" */
.estrada-hero{
  position:absolute; inset:0; z-index:1; opacity:.9;
}
.estrada-hero svg{ width:100%; height:100%; }
.faixa-anima{ stroke-dasharray: 18 22; animation: andar 2.2s linear infinite; }
@keyframes andar{ to{ stroke-dashoffset:-80; } }

/* ---------- coluna da estrada (índice de troços) ---------- */
.mapa-troços{ position:relative; padding:4.5rem 0 3rem; }
.mapa-troços .linha-estrada{
  position:absolute; left:calc(1.5rem + 27px); top:0; bottom:0; width:4px;
  background:repeating-linear-gradient(var(--linha),var(--linha) 10px, transparent 10px, transparent 20px);
}
@media (min-width:720px){
  .mapa-troços .linha-estrada{ left:50%; transform:translateX(-2px); }
}
.marco{
  position:relative; display:grid; grid-template-columns:56px 1fr; gap:1.2rem; margin-bottom:2.6rem;
  opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;
}
.marco.em-vista{ opacity:1; transform:none; }
.marco .km{
  width:56px; height:56px; border-radius:50%; background:var(--branco); border:3px solid var(--marca);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-weight:700;
  font-size:.82rem; color:var(--marca-2); box-shadow:var(--sombra); position:relative; z-index:2;
}
.marco-conteudo{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--radius);
  padding:1.4rem 1.6rem; box-shadow:var(--sombra);
}
.marco-conteudo h2{ font-size:1.3rem; margin-bottom:.35rem; }
.marco-conteudo .subtitulo{ font-family:var(--mono); font-size:.76rem; color:var(--bruma); text-transform:uppercase; letter-spacing:.08em; }
.marco-conteudo p{ margin:.7rem 0 0; color:#3c4047; }
.marco-conteudo a.btn-ler{ margin-top:.9rem; }
@media (min-width:720px){
  .marco{ grid-template-columns:1fr 56px 1fr; }
  .marco:nth-child(odd) .marco-conteudo{ grid-column:1; text-align:right; }
  .marco:nth-child(odd) .km{ grid-column:2; }
  .marco:nth-child(even) .km{ grid-column:2; order:1; }
  .marco:nth-child(even) .marco-conteudo{ grid-column:3; order:2; }
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.3rem; border-radius:999px;
  font-weight:600; font-size:.92rem; text-decoration:none; border:2px solid transparent; transition:transform .15s, background .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primario{ background:var(--marca); color:var(--branco); }
.btn-primario:hover{ background:var(--marca-2); }
.btn-fantasma{ border-color:var(--branco); color:var(--branco); }
.btn-fantasma:hover{ background:var(--branco); color:var(--asfalto); }
.btn-ler{ border-color:var(--marca); color:var(--marca-2); }
.btn-ler:hover{ background:var(--marca); color:var(--branco); }

/* ---------- secções genéricas ---------- */
section{ padding:3.5rem 0; }
.secao-clara{ background:var(--pedra-2); }
.secao-escura{ background:var(--asfalto); color:var(--pedra); }
.secao-escura h2{ color:var(--branco); }
.grelha-paragens{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:2rem; }
.paragem{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--radius); padding:1.3rem 1.4rem;
  transition:transform .2s, box-shadow .2s;
}
.paragem:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
.paragem .tipo{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--marca-2); }
.paragem h3{ font-size:1.05rem; margin:.4rem 0; }
.paragem p{ margin:0; color:#4a4e55; font-size:.94rem; }

/* ---------- rodapé ---------- */
footer{ background:var(--asfalto-2); color:#aeb3ba; padding:3rem 0 2rem; font-size:.88rem; }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; }
footer a{ color:#d7dae0; }
footer .col h4{ color:var(--branco); font-family:var(--sans); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .8rem; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.creditos{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #3a3e43; font-size:.8rem; color:#787e86; }

/* ---------- formulário de contacto ---------- */
.form-shell{ max-width:560px; }
.campo{ margin-bottom:1.1rem; }
.campo label{ display:block; font-weight:600; margin-bottom:.35rem; font-size:.92rem; }
.campo input, .campo textarea, .campo select{
  width:100%; padding:.7rem .85rem; border:1.5px solid var(--linha); border-radius:8px;
  font:inherit; background:var(--branco); color:var(--asfalto);
}
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--marca); }
.campo textarea{ min-height:120px; resize:vertical; }
.aviso-ok{ background:#eef4ee; border:1px solid var(--verde); color:#2f4a34; padding:1rem 1.2rem; border-radius:8px; margin-bottom:1.5rem; }

@media (max-width:640px){
  nav.principal{ display:none; }
}