/* Mecânico Móvel — estilos. Valores vêm de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; line-height: 0.95; letter-spacing: 0.005em; text-transform: uppercase; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: var(--linha-g) solid var(--laranja); outline-offset: 3px; border-radius: 4px; }

.saltar { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; background: var(--tinta); color: var(--papel); padding: var(--e-1) var(--e-2); border-radius: var(--raio); }
.saltar:focus { top: var(--e-2); }

/* Setas — o símbolo da marca, desenhado em CSS com a cor do texto */
.setas {
  display: inline-block; width: 1.05em; height: 0.8em; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 32'%3E%3Cpath d='M3 3 L15 16 L3 29 M21 3 L33 16 L21 29' fill='none' stroke='black' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 32'%3E%3Cpath d='M3 3 L15 16 L3 29 M21 3 L33 16 L21 29' fill='none' stroke='black' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Botões */
.botao {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--tinta); background: var(--laranja);
  border: var(--linha-g) solid var(--tinta); border-radius: var(--raio);
  padding: 0.75em 1.15em; min-height: 3.25rem;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--sombra-carimbo);
  transition: transform var(--r-rapido) var(--saida), box-shadow var(--r-rapido) var(--saida);
}
.botao .setas { transition: transform var(--r-medio) var(--saida); }
.botao:hover { transform: translate(-2px, -2px); box-shadow: var(--sombra-carimbo-g); }
.botao:hover .setas { transform: translateX(4px); }
.botao:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinta); }
.botao--pequeno { font-size: 1rem; min-height: 2.6rem; padding: 0.5em 0.9em; box-shadow: 3px 3px 0 var(--tinta); }
.botao--grande { font-size: 1.4rem; }
.botao--tinta { background: var(--tinta); color: var(--papel); border-color: var(--tinta); box-shadow: 4px 4px 0 var(--papel-alto); }
.botao--tinta:hover { box-shadow: 6px 6px 0 var(--papel-alto); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 92%, transparent); backdrop-filter: blur(8px); border-bottom: var(--linha) solid var(--tinta); }
.topo__dentro { max-width: var(--largura); margin: 0 auto; padding: 0.7rem var(--gutter); display: flex; align-items: center; gap: var(--e-3); }
.topo__marca img { width: clamp(11rem, 8rem + 8vw, 15rem); }
.topo__nav { display: flex; gap: var(--e-3); margin-left: auto; font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.04em; }
.topo__nav a { text-decoration: none; padding: 0.3em 0; border-bottom: var(--linha-g) solid transparent; transition: border-color var(--r-rapido) var(--saida); }
.topo__nav a:hover { border-color: var(--laranja); }

/* Etiqueta e marcos */
.etiqueta { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; }
.etiqueta .setas { color: var(--laranja); }
.marco { display: inline-block; font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; padding: 0.15em 0.6em; border: var(--linha) solid currentColor; border-radius: 6px; margin-bottom: var(--e-2); }
.marco--claro { color: var(--laranja); }
.marco--tinta { color: var(--tinta); }

/* Hero */
.hero { border-bottom: var(--linha) solid var(--tinta); background:
  linear-gradient(var(--betao-claro) 1px, transparent 1px) 0 0 / 100% 2.5rem,
  var(--papel); }
.hero__dentro { max-width: var(--largura); margin: 0 auto; padding: clamp(2.5rem, 1rem + 6vw, 6rem) var(--gutter) clamp(3rem, 1rem + 6vw, 6.5rem); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero__titulo { font-size: var(--t-mega); margin: var(--e-2) 0 var(--e-3); text-wrap: balance; }
.hero__sub { font-size: var(--t-sub); max-width: 36ch; color: var(--tinta-2); text-wrap: pretty; }

/* Matrícula */
.matricula-rapida { margin-top: var(--e-4); }
.matricula-rapida__rotulo { display: block; font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--e-1); }
.matricula-rapida__linha { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: stretch; }
.matricula-rapida__ajuda { margin-top: var(--e-1); font-size: var(--t-pequeno); color: var(--tinta-suave); }
.placa { display: flex; align-items: stretch; background: var(--papel-alto); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio); overflow: hidden; min-height: 3.25rem; }
.placa__banda { display: grid; place-items: center; width: 2.4rem; background: var(--laranja); border-right: var(--linha-g) solid var(--tinta); font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; }
.placa__input { flex: 1; width: 9.5rem; min-width: 0; border: 0; background: transparent; padding: 0 0.8rem; font-family: var(--f-display); font-weight: 800; font-size: 1.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); }
.placa__input::placeholder { color: var(--betao); }
.placa__input:focus { outline: none; }
.placa:focus-within { outline: var(--linha-g) solid var(--laranja); outline-offset: 3px; }

/* Ficha de orçamento (exemplo) */
.ficha { background: var(--papel-alto); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio-g); box-shadow: 8px 8px 0 var(--tinta); padding: var(--e-3); rotate: 1.2deg; font-size: 1rem; }
.ficha__topo { display: flex; justify-content: space-between; align-items: center; border-bottom: var(--linha) dashed var(--tinta); padding-bottom: var(--e-2); }
.ficha__titulo { font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; text-transform: uppercase; }
.ficha__nota { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--t-etiqueta); background: var(--laranja-fundo); border: var(--linha) solid var(--tinta); border-radius: 999px; padding: 0.1em 0.7em; }
.ficha__dados { margin: var(--e-2) 0; display: grid; gap: 0.35rem; }
.ficha__dados div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e-1); }
.ficha__dados dt { color: var(--tinta-suave); font-size: var(--t-pequeno); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.15em; }
.ficha__dados dd { margin: 0; font-weight: 600; }
.ficha__linhas { list-style: none; margin: 0; padding: var(--e-2) 0; border-top: var(--linha) dashed var(--tinta); display: grid; gap: 0.4rem; }
.ficha__linhas li, .ficha__total { display: flex; justify-content: space-between; gap: var(--e-2); }
.ficha__linhas li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.ficha__total { border-top: var(--linha-g) solid var(--tinta); padding-top: var(--e-2); font-family: var(--f-display); font-weight: 800; font-size: 2rem; text-transform: uppercase; }
.ficha__rodape { margin-top: var(--e-1); font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* Fita */
.fita { background: var(--tinta); color: var(--papel); overflow: hidden; border-bottom: var(--linha) solid var(--tinta); }
.fita__trilho { display: flex; width: max-content; animation: fita 38s linear infinite; }
.fita span { font-family: var(--f-display); font-weight: 800; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.7rem 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem; white-space: nowrap; }
.fita span::after { content: ""; width: 0.55rem; height: 0.55rem; background: var(--laranja); rotate: 45deg; }
@keyframes fita { to { transform: translateX(-50%); } }

/* Secções */
.seccao { border-bottom: var(--linha) solid var(--tinta); }
.seccao__dentro { max-width: var(--largura); margin: 0 auto; padding: clamp(3.5rem, 2rem + 5vw, 7rem) var(--gutter); }
.seccao__dentro--dividido { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.seccao__cabeca { margin-bottom: var(--e-4); }
.seccao__dentro--dividido .seccao__cabeca { margin-bottom: 0; position: sticky; top: 7rem; }
.seccao__titulo { font-size: var(--t-display); text-wrap: balance; }
.seccao__intro { margin-top: var(--e-3); max-width: 46ch; color: var(--tinta-2); text-wrap: pretty; }
.seccao--betao { background: var(--betao-claro); }
.seccao--tinta { background: var(--tinta); color: var(--papel); }
.seccao--tinta .seccao__intro { color: var(--betao); }
.seccao--laranja { background: var(--laranja); }

/* Passos */
.passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio-g); overflow: hidden; background: var(--papel-alto); }
.passo { padding: var(--e-3); border-right: var(--linha) solid var(--tinta); display: grid; gap: var(--e-1); align-content: start; }
.passo:last-child { border-right: 0; }
.passo__n { font-family: var(--f-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--laranja); -webkit-text-stroke: 2px var(--tinta); }
.passo h3 { font-size: 1.6rem; }
.passo p { color: var(--tinta-2); }

/* Preços */
.precos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
.preco { position: relative; background: var(--papel-alto); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio-g); padding: var(--e-3); display: flex; flex-direction: column; gap: var(--e-1); }
.preco__nome { font-size: 1.65rem; }
.preco__inclui { color: var(--tinta-2); font-size: 1rem; flex: 1; }
.preco__valor { margin-top: var(--e-2); padding-top: var(--e-2); border-top: var(--linha) dashed var(--tinta); display: flex; align-items: baseline; gap: 0.4rem; }
.preco__valor span { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.preco__valor small { color: var(--tinta-suave); font-size: var(--t-pequeno); }
.preco--destaque { background: var(--tinta); color: var(--papel); box-shadow: 6px 6px 0 var(--laranja); }
.preco--destaque .preco__inclui, .preco--destaque .preco__valor small { color: var(--betao); }
.preco--destaque .preco__valor { border-color: var(--betao); }
.preco__fita { position: absolute; top: -0.85rem; left: var(--e-3); background: var(--laranja); color: var(--tinta); border: var(--linha) solid var(--tinta); border-radius: 999px; padding: 0.05em 0.75em; font-family: var(--f-display); font-weight: 800; font-size: var(--t-etiqueta); text-transform: uppercase; letter-spacing: 0.08em; }
.deslocacao { margin-top: var(--e-4); display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--e-3); align-items: baseline; border-top: var(--linha-g) solid var(--tinta); padding-top: var(--e-3); }
.deslocacao__titulo { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; grid-row: span 2; }
.deslocacao__nota { color: var(--tinta-suave); font-size: var(--t-pequeno); }

/* Cuidados */
.cuidados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4) var(--e-5); }
.cuidados li { border-top: var(--linha-g) solid var(--laranja); padding-top: var(--e-2); }
.cuidados h3 { font-size: 1.9rem; margin-bottom: var(--e-1); }
.cuidados p { color: var(--betao); max-width: 44ch; }

/* Zona */
.zonas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.zona { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); background: var(--papel-alto); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio); padding: var(--e-2) var(--e-3); }
.zona__nome { font-family: var(--f-display); font-weight: 800; font-size: 1.9rem; text-transform: uppercase; line-height: 1; }
.zona__preco { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; border: var(--linha) solid var(--tinta); border-radius: 6px; padding: 0.1em 0.5em; font-variant-numeric: tabular-nums; }
.zona--principal { grid-column: 1 / -1; background: var(--tinta); color: var(--papel); }
.zona--principal .zona__nome { font-size: 3rem; }
.zona--principal .zona__preco { border-color: var(--laranja); color: var(--laranja); }
.zona--outra { grid-column: 1 / -1; background: transparent; border-style: dashed; }
.zona--outra .zona__nome { font-size: 1.4rem; }
.zona__ligacao { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Empresas */
.empresas { display: grid; gap: var(--e-3); justify-items: start; font-size: var(--t-sub); }
.empresas__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-1); font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; }
.empresas__lista li { display: flex; align-items: center; gap: 0.6em; }
.empresas__lista li::before { content: ""; width: 0.9em; height: 0.7em; background: var(--tinta); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 32'%3E%3Cpath d='M3 3 L15 16 L3 29 M21 3 L33 16 L21 29' fill='none' stroke='black' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 32'%3E%3Cpath d='M3 3 L15 16 L3 29 M21 3 L33 16 L21 29' fill='none' stroke='black' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Perguntas */
.perguntas { border-top: var(--linha-g) solid var(--tinta); }
.perguntas details { border-bottom: var(--linha) solid var(--tinta); }
.perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: var(--e-3) 0; font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; line-height: 1.05; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; flex: none; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: var(--linha) solid var(--tinta); border-radius: 50%; font-size: 1.6rem; transition: rotate var(--r-medio) var(--saida), background-color var(--r-rapido) var(--saida); }
.perguntas details[open] summary::after { rotate: 45deg; background: var(--laranja); }
.perguntas details p { padding: 0 0 var(--e-3); max-width: 58ch; color: var(--tinta-2); }

/* Pedido */
.pedido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-3); background: var(--papel-alto); border: var(--linha-g) solid var(--tinta); border-radius: var(--raio-g); padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); box-shadow: 8px 8px 0 var(--tinta); }
.campo { display: grid; gap: 0.4rem; align-content: start; }
.campo--largo, .pedido__fim { grid-column: 1 / -1; }
.campo label { font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.opcional { color: var(--tinta-suave); text-transform: none; letter-spacing: 0; font-family: var(--f-corpo); font-weight: 400; font-size: var(--t-pequeno); }
.campo input:not(.placa__input), .campo select, .campo textarea {
  font: inherit; color: var(--tinta); background: var(--papel); width: 100%;
  border: var(--linha) solid var(--tinta); border-radius: var(--raio); padding: 0.7rem 0.85rem; min-height: 3.1rem;
}
.campo textarea { resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); opacity: 0.75; }
.campo [aria-invalid="true"], .placa:has([aria-invalid="true"]) { border-color: #B42318; }
.campo__erro { min-height: 1.2em; font-size: var(--t-pequeno); color: #B42318; }
.placa--campo .placa__input { width: 100%; font-size: 1.5rem; }
.pedido__fim { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding-top: var(--e-1); }
.pedido__estado { font-weight: 600; max-width: 42ch; }

/* Rodapé */
.rodape { background: var(--tinta); color: var(--betao); }
.rodape__dentro { max-width: var(--largura); margin: 0 auto; padding: var(--e-5) var(--gutter); display: grid; gap: var(--e-2); justify-items: start; }
.rodape img { width: min(22rem, 100%); margin-bottom: var(--e-1); }
.rodape__ligacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-3); }
.rodape__ligacoes a { color: var(--papel); text-underline-offset: 4px; }
.rodape__legal { font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* Botão flutuante (telemóvel) */
.flutuante { display: none; }

/* Revelar ao entrar no ecrã */
.js .revelar { opacity: 0; transform: translateY(18px); transition: opacity var(--r-lento) var(--saida), transform var(--r-lento) var(--saida); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Responsivo */
@media (max-width: 64rem) {
  .precos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo:nth-child(2) { border-right: 0; }
  .passo:nth-child(-n+2) { border-bottom: var(--linha) solid var(--tinta); }
}
@media (max-width: 56rem) {
  .topo__nav { display: none; }
  .topo__dentro .botao--pequeno { margin-left: auto; }
  .hero__dentro { grid-template-columns: 1fr; }
  .ficha { rotate: 0deg; max-width: 30rem; }
  .seccao__dentro--dividido { grid-template-columns: 1fr; }
  .seccao__dentro--dividido .seccao__cabeca { position: static; margin-bottom: var(--e-2); }
  .cuidados { grid-template-columns: 1fr; gap: var(--e-4); }
}
@media (max-width: 36rem) {
  .precos, .passos, .zonas, .pedido { grid-template-columns: 1fr; }
  .passo { border-right: 0; border-bottom: var(--linha) solid var(--tinta); }
  .passo:last-child { border-bottom: 0; }
  .zona--principal .zona__nome { font-size: 2.4rem; }
  .matricula-rapida__linha .placa { flex: 1 1 100%; }
  .matricula-rapida__linha .botao { flex: 1 1 100%; justify-content: center; }
  .deslocacao { grid-template-columns: 1fr; }
  .deslocacao__titulo { grid-row: auto; }
  .topo__dentro .botao--pequeno { display: none; }
  .flutuante {
    display: inline-flex; align-items: center; gap: 0.5em; position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
    background: var(--laranja); color: var(--tinta); border: var(--linha-g) solid var(--tinta); border-radius: 999px; box-shadow: var(--sombra-carimbo);
    padding: 0.7rem 1.1rem; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; text-decoration: none;
    transition: transform var(--r-medio) var(--saida), opacity var(--r-medio) var(--saida);
  }
  .flutuante.escondido { opacity: 0; transform: translateY(150%); pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fita__trilho { animation: none; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .botao, .botao .setas, .perguntas summary::after { transition: none; }
}