@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/*
  BUZOLIN STUDIO — PADRÕES GLOBAIS
  Ajuste os valores abaixo para alterar o padrão visual do site inteiro.
  Os CSS de página devem conter apenas o que é exclusivo daquele layout.
*/
:root {
  /* Cores */
  --color-bg: #0f0f0f;
  --color-bg-deep: #090909;
  --color-section: #111111;
  --color-card: #070707;
  --color-card-dark: #050505;
  --color-white: #ffffff;
  --color-text: #f4f0ea;
  --color-muted: #b7b2ab;
  --color-muted-strong: #c7c1ba;
  --color-line: rgba(244, 240, 234, .18);
  --color-line-soft: rgba(244, 240, 234, .08);
  --color-red: #9b1515;
  --color-red-bright: #d1192b;
  --color-red-dark: #4a0808;

  /* Fontes */
  --font-logo: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-special: 'Orbitron', sans-serif;
  --font-title: 'Space Grotesk', sans-serif;
  --font-section: 'Rajdhani', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-nav: 'Inter', sans-serif;

  /* Containers */
  --site-max-width: 1360px;
  --content-max-width: 1180px;
  --project-max-width: 1200px;
  --site-side-gap: 56px;

  /* Escala única de espaçamento */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 112px;

  /* Ritmo vertical global — altera o espaçamento de todas as seções */
  --section-padding-block: var(--space-9);
  --section-padding-block-mobile: 80px;
  --section-heading-margin: 28px;
  --section-title-subtitle-gap: var(--space-3);
  --section-divider-margin: 80px;
  --section-content-gap: 64px;
  --content-gap: var(--space-5);
  --card-gap: 30px;

  /* Tipografia global */
  --font-size-h1: 64px;
  --font-size-h1-mobile: 40px;
  --font-size-section-title: 36px;
  --font-size-section-title-mobile: 26px;
  --font-size-section-category: 28px;
  --font-size-section-category-mobile: 22px;
  --font-size-section-subtitle: 28px;
  --font-size-section-subtitle-mobile: 23px;
  --font-size-h4: 20px;
  --font-size-body: 16px;
  --font-size-body-large: 18px;
  --font-size-small: 14px;
  --font-size-label: 14px;
  --font-size-caption: 12px;
  --font-size-micro: 11px;
  --font-size-tiny: 9px;
  --font-size-card-title: 20px;
  --font-size-card-title-large: 24px;
  --font-size-card-title-small: 17px;
  --font-size-card-text: 15px;
  --font-size-contact-title: 39px;
  --font-size-home-callout: 41px;
  --font-size-icon-large: 40px;
  --body-line-height: 1.7;
  --heading-line-height: 1.08;

  /* Heróis — Home e páginas internas usam a mesma altura */
  --hero-height: 820px;
  --hero-height-tablet: 690px;
  --hero-height-mobile: 650px;
  --page-hero-height: var(--hero-height);
  --page-hero-height-tablet: var(--hero-height-tablet);
  --page-hero-height-mobile: var(--hero-height-mobile);

  /* Cards e grids */
  --card-radius: 12px;
  --button-radius: 4px;
  --catalog-grid-column-gap: 40px;
  --catalog-grid-row-gap: 76px;
  --catalog-card-heading-height: 58px;
  --project-grid-column-gap: 56px;
  --project-grid-row-gap: 72px;
  --project-card-image-height: 270px;

  /* Navbar */
  --nav-height: 74px;
  --nav-logo-size: 62px;
  --nav-logo-size-mobile: 54px;
  --nav-brand-font-size: 27px;
  --nav-brand-font-size-mobile: 22px;
  --nav-link-font-size: 16px;
  --nav-link-font-size-tablet: 14px;
  --nav-link-padding-x: 23px;
  --nav-link-padding-x-tablet: 18px;
  --nav-language-width: 106px;

  /* Componentes compartilhados */
  --contact-card-width: 1120px;
  --contact-card-height: 210px;
}

/* Reset e elementos base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--body-line-height);
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-red-bright);
  outline-offset: 3px;
}

button,
input,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Hierarquia global */
h1,
.hero-title {
  color: var(--color-white);
  font-family: var(--font-special);
  font-size: clamp(var(--font-size-h1-mobile), 5vw, var(--font-size-h1));
  font-weight: 700;
  line-height: .98;
  letter-spacing: .03em;
  text-transform: uppercase;
}

h2,
.section-title {
  color: var(--color-red-bright);
  font-family: var(--font-special);
  font-size: clamp(var(--font-size-section-title-mobile), 2.2vw, var(--font-size-section-title));
  font-weight: 700;
  line-height: var(--heading-line-height);
  letter-spacing: .08em;
  text-transform: uppercase;
}

h3 {
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: clamp(var(--font-size-section-subtitle-mobile), 1.7vw, var(--font-size-section-subtitle));
  font-weight: 700;
  line-height: 1.18;
}

h4,
h5,
h6 {
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1.2;
}

p {
  color: var(--color-muted);
  font-size: var(--font-size-body);
  line-height: var(--body-line-height);
}

/* Containers e seções */
.site-container,
.content-container,
.project-container {
  width: min(var(--site-max-width), calc(100% - var(--site-side-gap)));
  margin-inline: auto;
}

.content-container {
  max-width: var(--content-max-width);
}

.project-container {
  max-width: var(--project-max-width);
}

.section,
.page-section,
.project-section {
  position: relative;
  padding-block: var(--section-padding-block);
  background: var(--color-section);
}

.section-title {
  margin-bottom: var(--section-heading-margin);
}

.section-title--small {
  font-size: clamp(var(--font-size-section-category-mobile), 1.7vw, var(--font-size-section-category));
}

.section-subtitle {
  margin-bottom: var(--space-4);
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: clamp(var(--font-size-section-subtitle-mobile), 1.7vw, var(--font-size-section-subtitle));
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0;
  text-transform: none;
}

.section-text {
  max-width: 800px;
  color: rgba(255, 255, 255, .82);
  font-size: var(--font-size-body);
  line-height: var(--body-line-height);
}

.section-text--large {
  font-size: var(--font-size-body-large);
}

.section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--content-gap);
  margin-bottom: var(--space-6);
}

.section-head-row .section-title {
  margin-bottom: var(--space-3);
}

.eyebrow,
.item-title {
  color: var(--color-red-bright);
  font-family: var(--font-section);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.card-title {
  color: var(--color-white);
  font-family: var(--font-title);
  font-size: var(--font-size-card-title);
  font-weight: 700;
  line-height: 1.15;
}

.card-text {
  color: rgba(255, 255, 255, .76);
  font-size: var(--font-size-body);
  line-height: var(--body-line-height);
}

.divider {
  width: min(420px, 48%);
  height: 1px;
  margin: var(--section-divider-margin) auto;
  background: linear-gradient(90deg, transparent, rgba(155, 21, 21, .85), transparent);
}

.center-action {
  display: flex;
  justify-content: center;
  margin-top: var(--space-7);
}

/* Títulos destacados que não são títulos de seção. */
.feature-title {
  color: var(--color-white);
  font-family: var(--font-special);
  font-size: clamp(var(--font-size-section-subtitle-mobile), 2.35vw, 42px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  :root {
    --site-side-gap: 32px;
    --section-padding-block: var(--section-padding-block-mobile);
    --section-heading-margin: var(--space-4);
    --section-divider-margin: var(--space-6);
    --project-card-image-height: 230px;
  }

  .section-head-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-5);
  }
}