/*
  TARGET Check-up Automotivo — Layout primitives
  Closed set of "l-" prefixed classes. Each rule targets the element it's
  applied to and controls OUTER rhythm only (padding-block of a section,
  max-width of a container, gaps of a grid/stack). Never combine a layout
  class with a component class in the same selector — components own their
  own internal spacing in components.css. See components.css header comment.
*/

/* 0. Remove margins and padding */
html, body,
html *, body * {
	margin: 0;
	padding: 0;
	border: 0;	
}
/* 1. Box sizing global */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* 2. Previne o aumento automático de fontes em dispositivos móveis */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* 3. Remove margens padrão e define o comportamento do scroll */
body, h1, h2, h3, h4, h5, h6 p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}
/* 4. Remove estilos de lista apenas quando usamos o atributo 
   (Útil para acessibilidade sem perder o estilo padrão de textos longos) */
ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* 5. Configurações base do corpo do site */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Melhora a renderização no macOS/iOS */
}
/* 6. Melhora a legibilidade em títulos e elementos interativos */
h1, h2, h3, h4, h5, h6,
button, input, label {
  line-height: 1.1;
}
/* 8. Evita espaços estranhos abaixo das imagens */
img,
picture {  
  display: block;
}
/* 9. Faz com que inputs e botões herdem as fontes do projeto */
input,
button,
textarea,
select,
address {
  font: inherit;
}
/* 10. Garante que textareas sem atributo 'rows' tenham um tamanho mínimo decente */
textarea:not([rows]) {
  min-height: 5em;
}
/* 11. limpa propriedades de campos de formulários */
input,
select,
textarea,
button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    outline: none;  
    background-color: transparent;
    box-shadow: none; 
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
textarea {
    resize: vertical; /* Oculta o arrasto horizontal para não quebrar o layout, permite só vertical */
}
/* Remove o "X" de limpar que o Chrome/Safari injeta nos inputs de pesquisa */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}
/* Remove a setinha padrão do select em navegadores da Microsoft */
select::-ms-expand {
    display: none;
}
/* 12. Rolagem suave até âncoras, compensando a altura do header fixo — mesmo
   deslocamento tanto para cliques em links "#..." quanto para o
   scrollIntoView() disparado por JS (botão de scroll-down do Hero) */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--scroll-offset);
}
@media (min-width: 900px) {
  html { scroll-padding-top: var(--scroll-offset-desktop); }
}
/* 13. ACESSIBILIDADE: Respeita a preferência de movimento reduzido do utilizador */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto-900);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

p{
    margin-bottom: 1em;
}
p:last-child{
    margin-bottom: 0;
}


img { max-width: 100%; height: auto; display: block; }

.prose{
    margin-bottom: 1.5rem;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: 0;
  background: var(--vermelho-target);
  color: var(--branco);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: var(--z-overlay);
  transform: translateY(-100%);
  transition: transform var(--transition-fast);
}
.skip-link:focus { transform: translateY(1rem); }

/* ---- Section rhythm ---- */
.l-section {
  padding-block: 4rem;
}
.l-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.l-section--dark   { background: var(--grafite-900); color: var(--texto-on-dark); }
.l-section--light  { background: var(--cinza-100); color: var(--texto-900); }
.l-section--white  { background: var(--branco); color: var(--texto-900); }

/* ---- Container ---- */
.l-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--space-3);
}
@media (min-width: 900px) {
    .l-container {
        padding: 0 var(--space-4);
}
}
.l-container--narrow { max-width: 860px; }


/* ---- Grid ---- */
.l-grid {
  display: grid;
  gap: var(--space-5);
}
.l-grid--2 { grid-template-columns: repeat(1, 1fr); }
.l-grid--3 { grid-template-columns: repeat(1, 1fr); }
.l-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) {
  .l-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .l-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .l-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Split (two-column content/media layout) ---- */
.l-split {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .l-split { grid-template-columns: 1fr 1fr; }
  .l-split--reverse { direction: rtl; }
  .l-split--reverse > * { direction: ltr; }
}

/* ---- Visually hide below/above breakpoints ---- */
.l-hide-mobile { display: none; }
.l-hide-desktop { display: block; }
@media (min-width: 768px) {
  .l-hide-mobile { display: block; }
  .l-hide-desktop { display: none; }
}

/* ---- Eyebrow / kicker text above a heading ---- */
.l-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--vermelho-target);
  margin-block-end: var(--space-2);
}
.l-section--dark .l-eyebrow { color: var(--vermelho-target); }