/* ===================================================================
   SD3 Marine Services — modo claro (v2)

   Folha de sobreposicao. Carrega DEPOIS de style.css e nao substitui
   nada: so redefine a camada semantica de cor que o style.css passou
   a usar. Estrutura, espacamento, tipografia e animacao sao os mesmos
   arquivos da v1 — ha uma fonte de verdade so.

   A regra de ouro aqui: --ground e o fundo da pagina, --veil e o que
   se poe por cima dele. No escuro o fundo e quase preto e o veu e
   branco; no claro trocam de lugar. Todos os degrades e scrims da
   pagina estao escritos em funcao desses dois, por isso viram sozinhos.

   A excecao deliberada e o hero. O texto assenta sobre fotografia de
   marina, e so um veu escuro da contraste fiavel ali; veu branco
   lavava a foto e continuava ilegivel. Fotografia nao tem tema. Por
   isso o bloco do hero mantem o tratamento escuro e a pagina a volta
   e que fica clara — o entalhe do badge passa a claro e recorta a
   foto, que e o que torna a v2 imediatamente reconhecivel.
   =================================================================== */

:root{
  /* o par que troca de lugar */
  --ground-rgb:255,255,255;
  --veil-rgb:20,20,19;

  /* base */
  --paper:#faf9f6;          /* branco quente, a par do #141413 da v1 */
  --ink:#141413;
  --text:#3c3b37;
  --muted:#6e6c65;
  --muted-2:#86847d;

  /* tracos */
  --line:rgba(20,20,19,.16);
  --line-soft:rgba(20,20,19,.07);

  /* superficies: no claro sobem em direcao ao branco, nao ao preto */
  --soft:#f1efe9;
  --slot:#e9e6df;
  --surface:#fff;
  --surface-2:#f4f2ec;
  --surface-3:#fbfaf7;
  --surface-4:#efece5;
  --surface-5:#e7e4dc;

  /* faixa de servicos e palco do processo */
  --strip:#f1efe9;
  --stage-a:#fbfaf7;--stage-b:#f1efe9;

  /* a marca nao muda */
  --accent:#c60000;
  --on-accent:#fff;
}

/* -------------------------------------------------------------
   Texto sobre a cor da marca continua branco.
   O style.css troca color:#fff por var(--ink) — correto para texto
   corrente, errado onde o fundo e o vermelho ou um chip invertido.
   Aqui essas pecas voltam a ser explicitas.
   ------------------------------------------------------------- */
.button,
.button:not(.button--secondary){ color:var(--on-accent); }   /* o style.css usa :not(), que ganha em especificidade */
.button--secondary{ color:var(--ink); }

.tabs button[aria-selected="true"]{
  background:var(--ink);
  color:var(--on-accent);
  border-color:var(--ink);
}
.process-index li.is-active{ color:var(--ink); }   /* o palco aqui e claro: o ativo e escuro, nao branco */

/* -------------------------------------------------------------
   O hero mantem-se escuro — ver a nota do cabecalho.
   ------------------------------------------------------------- */
.hero-v2__frame{
  --ground-rgb:20,20,19;
  --veil-rgb:255,255,255;
  --ink:#fff;
  --text:#e7e6e1;
  --muted:#a8a69f;
  --line:rgba(255,255,255,.14);
  --surface:#1d1d1b;
  --surface-2:#242421;
  --surface-3:#181816;
  background:linear-gradient(135deg,#1d1d1b 0%,#181816 62%,#242421 100%);
}
/* o entalhe do badge segue a pagina, nao a moldura: e ele que recorta
   a foto e da a leitura clara */
.hero-v2__frame > .hero-v2__badge{
  background:var(--paper);
  --ink:#141413;
  --muted:#6e6c65;
  color:var(--text);
}
.hero-v2__frame > .hero-v2__badge b{ color:#141413; }

/* -------------------------------------------------------------
   Preloader: SVG inline, entao recolore-se por CSS.
   O fill do atributo perde para a folha de estilo.
   ------------------------------------------------------------- */
/* O preloader fica preto, como na v1 — pedido do cliente: tela preta com
   o logotipo e so depois a pagina clara. Nao se toca nas faixas das letras:
   sao brancas por dentro do vermelho e leem sobre qualquer fundo. Pintar
   essas faixas de escuro foi o erro que o cliente apontou. */

/* -------------------------------------------------------------
   Menu mobile: fundo claro, traco escuro.
   ------------------------------------------------------------- */
.mobile-menu{ background:var(--paper); color:var(--text); }
.mobile-menu::backdrop{ background:rgba(20,20,19,.4); }
.menu-toggle span{ background:var(--ink); }

/* -------------------------------------------------------------
   Peca a peca, o que so existia a pensar em fundo escuro.
   ------------------------------------------------------------- */
.section--cta{ background:linear-gradient(180deg,var(--soft),var(--paper)); }
.skip-link{ background:var(--ink); color:var(--on-accent); }
::selection{ background:var(--accent); color:var(--on-accent); }


/* ===================================================================
   Ajustes pedidos pelo Gabriel na v2
   =================================================================== */

/* A legenda do palco sai. E um unico <figcaption> que o JS reescreve a
   cada passo, por isso esconde-lo tira o "Step 01" e todos os outros.
   O indice numerado a esquerda ja diz em que passo se esta. */
.process-media figcaption{ display:none; }

/* Sem divisor entre o FAQ e o CTA, e o vao passa de 160px para 120px.
   Eram 80+80 com um tracejado de 1px a separar; sem a linha, as duas
   secoes leem como uma superficie continua, entao o espaco e um so:
   60 de cada lado. */
.section--cta{
  border-top:0;
  padding-top:60px;
}
.section--cta.sp-b-mesma{ padding-bottom:60px; }
/* so a seccao tintada que encosta no CTA — nao todas as da pagina */
.section--tint:has(+ .section--cta){ padding-bottom:60px; }


/* -------------------------------------------------------------
   Setas do carrossel de depoimentos (so aparecem no mobile).
   Em repouso sao escuras sobre fundo claro; ao tocar, o botao
   enche-se de vermelho e o style.css poe color:var(--ink) — que
   no escuro era branco e aqui seria quase preto sobre vermelho.
   Terceiro caso do mesmo tipo: texto sobre a cor da marca e
   sempre --on-accent, nunca --ink.
   ------------------------------------------------------------- */
.testimonial-controls button:hover,
.testimonial-controls button:focus-visible{ color:var(--on-accent); }


/* ===================================================================
   O arco no canto superior direito do rating — no modo claro
   -------------------------------------------------------------------
   Na v1 escura este canto foi resolvido recuando a fotografia para
   fora da costura. Aqui o problema volta por outra camada: a moldura
   continua escura (a foto precisa disso) mas a pagina passou a ser
   clara, entao o que vaza pela curva ja nao e a foto — e o proprio
   fundo da moldura, mais o veu escuro do ::before. O recorte do
   overflow e antisserrilhado e aplica-se a cada camada, por isso
   sobra alpha por onde o escuro passa.

   Perseguir camada a camada seria interminavel. A correcao e tirar a
   curva de baixo: o badge ja cobre o canto inteiro (transborda 2px
   nos dois lados) e tem a cor da pagina, portanto e ele que desenha
   aquele canto. Sem raio na moldura nao ha curva para vazar, e a
   silhueta nao muda porque ali ja era o badge que se via.
   Medido: 57 pixels de arco -> 0.
   =================================================================== */
.hero-v2__frame{ border-top-right-radius:0; }