/* ============================================================
   BASE — variáveis, reset e tipografia
   ============================================================ */

/* --- Fontes auto-hospedadas (subset latin, cobre português) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/playfair-display-900.woff2') format('woff2');
}


/* --- Acessibilidade --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  z-index: 999;
  transition: top 200ms;
}
.skip-link:focus {
  top: var(--space-4);
}

/* Foco visível consistente para navegação por teclado (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ============================================================
   1. CONFIG — custom properties, reset, tipografia base
   ============================================================ */

:root {
  /* Paleta */
  --color-bg:          #F4F1EC;
  --color-surface:     #FAF8F4;
  --color-ink:         #1A1A1A;
  --color-ink-light:   #5F5E5A;
  --color-accent:      #C23E20;
  --color-accent-dark: #9E2F14;
  --color-accent-light:#E4663B;   /* acento com contraste AA sobre fundos escuros */
  --color-white:       #FFFFFF;
  --color-success:     #157A3A;   /* verde com contraste AA sobre fundos claros */

  /* Tipografia */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Espaçamento */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, .08);
  --shadow-md: 0 4px 16px rgba(26, 26, 26, .10);

  /* Transição */
  --transition: 220ms ease;
}

html {
  scroll-behavior: smooth;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

abbr[title] {
  text-decoration: none;
}

/* --- Base --- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background-color: var(--color-bg);
  color: var(--color-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.15;
  color: var(--color-ink);
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* --- Container pattern --- */
.header__container,
.hero__container,
.services__container,
.differentials__container,
.how-it-works__container,
.portfolio__container,
.testimonials__container,
.about__container,
.cta__container,
.footer__container,
.page-intro__container,
.bio__container,
.values__container,
.skills__container,
.contact__container,
.faq__container,
.site-overview__container,
.site-types__container,
.site-features__container,
.site-plans__container,
.seo__container,
.integrations__container,
.works__container,
.orcamento__container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* --- Padrão de cabeçalho de seção --- */
.services__header,
.differentials__header,
.how-it-works__header,
.portfolio__header,
.testimonials__header,
.values__header,
.skills__header,
.faq__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.services__title,
.differentials__title,
.portfolio__title,
.testimonials__title,
.values__title,
.skills__title,
.faq__title {
  font-size: var(--text-3xl);
  font-weight: 900;
  margin-bottom: var(--space-3);
}

/* Traço vermelho acima dos títulos de seção */
.services__title::before,
.differentials__title::before,
.portfolio__title::before,
.testimonials__title::before,
.values__title::before,
.skills__title::before,
.faq__title::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background-color: var(--color-accent);
  margin: 0 auto var(--space-4);
  border-radius: 0 2px 1px 0;
}

.services__subtitle,
.differentials__subtitle,
.how-it-works__subtitle,
.portfolio__subtitle,
.testimonials__subtitle,
.values__subtitle,
.skills__subtitle,
.faq__subtitle {
  font-size: var(--text-lg);
  color: var(--color-ink-light);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.7;
}


/* --- Responsividade: container padding --- */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-8);
  }
}