/* ============================================================
   konekt.lab v3 — Design System
   Paleta da marca: Licorice / Black Olive / Mustard / Sky / Platinum / Powder
   Tipografia: Archivo Narrow (títulos) + Albert Sans (corpo)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Albert+Sans:wght@300;400;500;600&family=Nunito:wght@700&display=swap');

:root {
  /* ── Paleta da marca ── */
  --licorice:     #1B1212;
  --black-olive:  #44423F;
  --mustard:      #E8AF58;
  --mustard-dark: #C4922A;
  --sky:          #7FAED1;
  --platinum:     #E7E4DF;
  --powder:       #F9F7F5;

  /* ── Tipografia ── */
  --font-heading: 'Archivo Narrow', sans-serif;
  --font-body:    'Albert Sans', sans-serif;

  /* ── Escalas ── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  3.75rem;    /* 60px */

  /* ── Layout ── */
  --max-w:      1100px;
  --max-w-wide: 1100px;

  /* ── Espaçamento (base 8px) ── */
  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* ── Raios ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ── Transições ── */
  --t-fast: 150ms ease;
  --t-base: 260ms ease;

  /* ── Sombras ── */
  --shadow-card:       0 2px 12px rgba(127, 174, 209, 0.15);
  --shadow-card-hover: 0 8px 32px rgba(127, 174, 209, 0.28);
  --shadow-header:     0 1px 16px rgba(27, 18, 18, 0.09);

  /* ── Hero glow ── */
  --hero-glow: rgba(127, 174, 209, 0.55);  /* Sky suave — troque para ajustar */

  /* ================================================================
     TIPOGRAFIA POR SEÇÃO — edite aqui para ajustar fontes
     Salve e dê refresh; não precisa de build.

     Referência rápida de tamanhos:
     0.875rem = 14px  |  1rem = 16px  |  1.125rem = 18px
     1.25rem  = 20px  |  1.375rem = 22px  |  1.5rem = 24px
     ================================================================ */
  --fs-hero-sub:     1.775rem;   /* hero — subheadline              */
  --fs-intro:        1.5rem;     /* intro — parágrafo               */
  --fs-card-prob:    1.25rem;    /* problema — texto dos cards      */
  --fs-por-que:      1.25rem;    /* por que — parágrafo             */
  --fs-por-que-dest: 1.375rem;   /* por que — frase destaque        */
  --fs-bio:          1.15rem;    /* sobre — bio                     */
  --fs-servico:      1.125rem;   /* serviços — texto dos cards      */
  --fs-evidencia:    1rem;       /* evidências — resultado          */
  --fs-passos:       1.25rem;    /* como funciona — texto           */
  --fs-cta-final:    1.375rem;   /* CTA final — parágrafo           */

  /* ================================================================
     ESPAÇAMENTOS EDITÁVEIS — seções e blocos de texto
     Mesma lógica: edite o valor, salve, refresh.

     Referência rápida:
     var(--sp-4) = 2rem = 32px  |  var(--sp-6) = 3rem = 48px
     var(--sp-8) = 4rem = 64px  |  var(--sp-12) = 6rem = 96px
     var(--sp-16) = 8rem = 128px
     ================================================================ */
  --pd-secao:   var(--sp-16);  /* padding vertical padrão de todas as seções */
  --pd-intro:   var(--sp-16);   /* padding vertical da seção intro            */
  --gap-p:      var(--sp-3);   /* espaço entre parágrafos dentro das seções  */

  /* Hero — espaços internos independentes */
  --sp-hero-sub: var(--sp-6);  /* espaço entre h1 e subheadline             */
  --sp-hero-cta: var(--sp-6);  /* espaço entre subheadline e botão CTA      */
}

/* ============================================================
   Reset
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--licorice);
  background-color: var(--powder);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

ul, ol {
  list-style: none;
  padding: 0;
}

p {
  margin-bottom: var(--gap-p);
}

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

/* ============================================================
   Containers
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

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

/* ============================================================
   Tipografia — Headings
   ============================================================ */

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.25rem, 5vw, var(--text-5xl));
}

h2 {
  font-size: clamp(1.5rem, 3.5vw, var(--text-3xl));
  margin-bottom: var(--sp-4);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--sp-2);
}

/* ============================================================
   Header — sticky, transparente → powder ao rolar
   ============================================================ */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: transparent;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}

#site-header.scrolled {
  background-color: var(--powder);
  box-shadow: var(--shadow-header);
}

.header-inner {
  position: relative;
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color var(--t-base);
}

.logo-dot {
  color: var(--mustard);
}

#site-header.scrolled .logo {
  color: var(--licorice);
}

#site-header.scrolled .logo-dot {
  color: var(--mustard);
}

/* ── Nav — links centrais do header ────────────────────────── */

.header-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}

.nav-link {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-base);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--t-fast);
  letter-spacing: -0.01em;
}

.nav-link:hover {
  color: #fff;
}

.nav-link--active {
  color: var(--mustard);
}

#site-header.scrolled .nav-link {
  color: var(--black-olive);
}

#site-header.scrolled .nav-link:hover {
  color: var(--licorice);
}

#site-header.scrolled .nav-link--active {
  color: var(--mustard-dark);
}

/* ── Hambúrguer — visível só em mobile ─────────────────────── */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #fff;
  transition: transform var(--t-base), opacity var(--t-base);
}

#site-header.scrolled .nav-toggle span {
  background-color: var(--licorice);
}

/* ── Menu mobile — dropdown abaixo do header ───────────────── */

.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  background-color: var(--licorice);
}

.mobile-menu.mobile-menu--open {
  display: flex;
}

.mobile-nav-link {
  font-family: 'Nunito', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}

.mobile-nav-link:hover { color: #fff; }
.mobile-nav-link--active { color: var(--mustard); }
.mobile-menu .cta-btn { margin-top: var(--sp-2); }

@media (max-width: 479px) {
  .header-nav,
  .header-inner > .cta-btn {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
}

/* ============================================================
   Botões CTA — pílula unificado
   ============================================================ */

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  padding: 0.875rem 2rem;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  min-height: 48px;
  cursor: pointer;
  background-color: transparent;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

/* Variante escura: sólido Licorice */
.cta-dark {
  background-color: var(--licorice);
  color: var(--powder);
  border-color: var(--licorice);
}

.cta-dark:hover {
  background-color: var(--mustard);
  color: var(--licorice);
  border-color: var(--mustard);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 175, 88, 0.3);
}

.cta-dark:active {
  transform: translateY(0);
}

/* Variante Powder: fundo Powder, texto Licorice (hero com fundo escuro) */
.cta-powder {
  background-color: var(--powder);
  color: var(--licorice);
}

.cta-powder:hover {
  background-color: var(--mustard);
  color: var(--licorice);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 175, 88, 0.3);
}

.cta-powder:active {
  transform: translateY(0);
}

/* Variante branca sólida: para navbar transparente sobre hero escuro */
.cta-white {
  background-color: #fff;
  color: var(--licorice);
  border: 2px solid transparent;
}
.cta-white:hover {
  background-color: var(--mustard);
  color: var(--licorice);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(232, 175, 88, 0.3);
}
.cta-white:active { transform: translateY(0); }
/* NavBar scrolled: Licorice fill + hover Mustard */
#site-header.scrolled .cta-white {
  background-color: var(--licorice);
  color: var(--powder);
  border-color: transparent;
}
#site-header.scrolled .cta-white:hover {
  background-color: var(--mustard);
  color: var(--licorice);
  box-shadow: 0 4px 16px rgba(232, 175, 88, 0.3);
}
/* CTA dentro do mobile-menu: mantém branco mesmo no estado scrolled */
#site-header.scrolled .mobile-menu .cta-btn {
  background-color: #fff;
  color: var(--licorice);
  border-color: transparent;
}
#site-header.scrolled .mobile-menu .cta-btn:hover {
  background-color: var(--mustard);
  color: var(--licorice);
}

/* Tamanho menor para header */
.cta-sm {
  font-size: var(--text-sm);
  padding: 0.6rem 1.25rem;
  min-height: 40px;
}

/* Centro de CTA abaixo de grids */
.cta-center {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}

/* ============================================================
   Seções — padding vertical padrão
   ============================================================ */

section {
  padding-top: var(--pd-secao);
  padding-bottom: var(--pd-secao);
}

/* ============================================================
   Hero — Black Olive, centralizado, tela cheia
   ============================================================ */

.hero {
  background: radial-gradient(ellipse 80% 55% at 50% -5%, var(--hero-glow), transparent 68%),
              var(--licorice);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 160px;
  padding-bottom: var(--sp-16);
  position: relative;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Espaços internos do hero — edite as variáveis em :root */
.hero .subheadline {
  margin-top: var(--sp-hero-sub);
}

.hero .cta-btn {
  margin-top: var(--sp-hero-cta);
}

.hero h1 {
  color: #fff;
  max-width: 860px;
}

.h1-line2 {
  color: var(--mustard);
  display: block;
}

.subheadline {
  font-size: var(--fs-hero-sub);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 680px;
}

/* ── Hero Shapes ─────────────────────────────────────────── */

.hero-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.hero-shape--1 {
  width: 480px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(232, 175, 88, 0.08), transparent 70%);
  top: -60px;
  left: -120px;
  animation: heroShapeIn 1.2s ease 0s forwards, float 12s ease-in-out 0s infinite;
}

.hero-shape--2 {
  width: 360px;
  height: 240px;
  background: radial-gradient(ellipse, rgba(127, 174, 209, 0.08), transparent 70%);
  top: 10%;
  right: -80px;
  animation: heroShapeIn 1.2s ease 0.2s forwards, float 12s ease-in-out -2s infinite;
}

.hero-shape--3 {
  width: 280px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(232, 175, 88, 0.06), transparent 70%);
  bottom: 15%;
  left: 5%;
  animation: heroShapeIn 1.2s ease 0.4s forwards, float 12s ease-in-out -4s infinite;
}

.hero-shape--4 {
  width: 200px;
  height: 160px;
  background: radial-gradient(ellipse, rgba(127, 174, 209, 0.07), transparent 70%);
  bottom: 20%;
  right: 10%;
  animation: heroShapeIn 1.2s ease 0.6s forwards, float 12s ease-in-out -6s infinite;
}

.hero-shape--5 {
  width: 320px;
  height: 220px;
  background: radial-gradient(ellipse, rgba(232, 175, 88, 0.05), transparent 70%);
  top: calc(50% - 110px);
  left: 40%;
  animation: heroShapeIn 1.2s ease 0.8s forwards, float 12s ease-in-out -8s infinite;
}

@keyframes heroShapeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(15px); }
}

@keyframes wordIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-word {
  display: inline-block;
  opacity: 0;
  animation: wordIn 0.45s ease forwards;
}

.hero-block-animate {
  opacity: 0;
  animation: wordIn 0.5s ease forwards;
}

/* ============================================================
   Seção Intro — transição entre Hero e Problema
   ============================================================ */

.intro {
  background-color: var(--platinum);
  padding-top: var(--pd-intro);
  padding-bottom: var(--pd-intro);
  text-align: center;
}

.intro-text {
  font-size: var(--fs-intro);
  line-height: 1.78;
  color: var(--licorice);
  opacity: 0.72;
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 0;
}

/* ============================================================
   Seção Problema — Powder
   ============================================================ */

.problema {
  background-color: var(--powder);
}

/* ============================================================
   Cards Grid — responsivo (base 1 col)
   ============================================================ */

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.cards-grid--2col {
  grid-template-columns: 1fr;
}

/* ============================================================
   Card de Problema
   ============================================================ */

.card-problema {
  background-color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  border: 1px solid var(--platinum);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), background-color 0.4s ease;
}

.card-problema:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

/* Estado ativo via JS (animated background) */
.card-problema.card-active {
  background-color: rgba(232, 175, 88, 0.08);
}

.card-problema p {
  font-size: var(--fs-card-prob);
  line-height: 1.72;
  color: var(--licorice);
  margin-bottom: 0;
}

/* ============================================================
   Card Icon — quadrado arredondado Sky
   ============================================================ */

.card-icon {
  width: 46px;
  height: 46px;
  background-color: var(--sky);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-3);
  color: #fff;
  flex-shrink: 0;
  transition: background-color var(--t-base), color var(--t-base);
}

/* ============================================================
   Seção Por Que — Platinum
   ============================================================ */

.por-que {
  background-color: var(--platinum);
  position: relative;
  overflow: hidden;
}

.por-que::before {
  content: '\201C';
  font-family: var(--font-heading);
  font-size: 20rem;
  color: var(--mustard);
  opacity: 0.07;
  position: absolute;
  top: -4rem;
  right: -1rem;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.por-que h2 {
  color: var(--licorice);
}

.por-que p {
  font-size: var(--fs-por-que);
  line-height: 1.78;
  color: var(--licorice);
  max-width: 680px;
}

.por-que-destaque {
  font-style: normal;
  color: var(--licorice);
  font-weight: 600;
  background-color: rgba(232, 175, 88, 0.12);
  padding: var(--sp-4) var(--sp-4);
  border-radius: var(--r-md);
  border-left: 4px solid var(--mustard);
  max-width: 680px;
}

/* ── Layout 2 colunas — Por que ────────────────────────────── */

.por-que-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: coluna única */
  gap: var(--sp-6);
  align-items: start;
}

.por-que-dir .por-que-destaque {
  font-size: var(--fs-por-que-dest);
  max-width: none;
  line-height: 1.65;
}

/* ============================================================
   Seção Sobre — Powder
   ============================================================ */

.sobre {
  background-color: var(--powder);
}

.sobre-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  margin-top: 0;
}

.bio h2 {
  margin-bottom: var(--sp-2);
}

.foto-wrapper {
  flex-shrink: 0;
  position: relative;
  align-self: flex-start;
}

.foto-bg-shape {
  position: absolute;
  background: rgba(232, 175, 88, 0.12);
  border-radius: var(--r-lg);
  transform: rotate(-3deg);
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  z-index: 0;
}

.foto-danilo {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 250px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card-hover);
}

.bio p {
  font-size: var(--fs-bio);
  line-height: 1.78;
  color: var(--licorice);
}

.sobre-stats {
  display: flex;
  gap: 3rem;
  margin-top: var(--sp-4);
}

.stat-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--mustard);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-lg);
  color: #666;
  line-height: 1.5;
  margin-top: 0.25rem;
}

/* ============================================================
   Seção Serviços — Platinum
   ============================================================ */

.servicos {
  background-color: var(--platinum);
}

.card-servico {
  background-color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.card-servico:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card-servico:hover .card-icon {
  background-color: var(--mustard);
  color: #fff;
}

.card-servico h3 {
  color: var(--licorice);
}

.card-servico p {
  font-size: var(--fs-servico);
  line-height: 1.72;
  color: #4a4848;
}

/* ============================================================
   Seção Evidências — Powder
   ============================================================ */

.evidencias {
  background-color: var(--powder);
}

.card-evidencia {
  padding: var(--sp-4) 0;
  border-top: 3px solid var(--mustard-dark);
  transition: transform var(--t-base);
}

.card-evidencia:hover {
  transform: translateY(-4px);
}

.evidencia-numero {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--mustard-dark);
  line-height: 1;
  margin-bottom: var(--sp-1);
}

.evidencia-contexto {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.0em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: var(--sp-2);
}

.caso-titulo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--licorice);
  margin-bottom: var(--sp-2);
}

.card-evidencia .situacao {
  font-size: var(--text-base);
  color: #666;
  line-height: 1.7;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--platinum);
}

.card-evidencia .resultado {
  font-size: var(--fs-evidencia);
  font-weight: 600;
  line-height: 1.65;
  color: var(--licorice);
  margin-bottom: 0;
}

/* ============================================================
   Seção Palestrante Teaser — Sky
   ============================================================ */

.palestras-teaser {
  background-color: var(--sky);
  text-align: center;
}

.palestras-teaser .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.palestras-teaser h2 {
  color: var(--licorice);
  margin-bottom: 0;
}

.palestras-teaser p {
  font-size: 1.25rem;
  color: var(--licorice);
  max-width: 520px;
  line-height: 1.72;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ============================================================
   Seção Custo da Inação — Black Olive
   ============================================================ */

.custo {
  background-color: var(--black-olive);
  text-align: center;
}

.custo .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.custo-text {
  font-size: 1.5rem;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.65);
  max-width: 580px;
  margin-bottom: 0;
}

.custo-destaque {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, var(--text-4xl));
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 0;
}

/* ============================================================
   Seção Como Funciona — Powder
   ============================================================ */

.como-funciona {
  background-color: var(--powder);
}

.passos {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-2);
}

.passo {
  display: flex;
  gap: var(--sp-4);
  position: relative;
}

.passo:not(:last-child) {
  padding-bottom: var(--sp-8);
}

/* Linha conectora vertical entre passos */
.passo:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 48px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--sky) 60%, transparent);
}

.passo-numero {
  width: 46px;
  height: 46px;
  background-color: var(--sky);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background-color var(--t-base);
}

.passo:hover .passo-numero {
  background-color: var(--mustard);
}

.passo-content {
  padding-top: 0.55rem;
}

.passo-content h3 {
  color: var(--licorice);
  margin-bottom: var(--sp-1);
}

.passo-content p {
  font-size: var(--fs-passos);
  line-height: 1.7;
  color: #585454;
  margin-bottom: 0;
}

/* ── CTA Final — bloco LinkedIn secundário ── */
/* Parâmetros ajustáveis:
   - Fonte do texto  → font-size em .linkedin-teaser
   - Tamanho do bloco → padding em .linkedin-teaser
   - Tamanho do ícone → width/height em .linkedin-icon-link svg  */

.linkedin-teaser {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  border: 1px solid currentColor;
  border-radius: var(--r-md);
  padding: 0.75rem var(--sp-3);   /* ← tamanho do bloco */
  font-size: var(--text-sm);      /* ← tamanho da fonte */
  opacity: 0.6;
  transition: opacity var(--t-fast);
}

.linkedin-teaser:hover {
  opacity: 0.9;
}

.linkedin-icon-link {
  display: flex;
  align-items: center;
  color: inherit;
  flex-shrink: 0;
}

.linkedin-icon-link svg {
  width: 20px;   /* ← tamanho do ícone */
  height: 20px;
}

/* ============================================================
   CTA Final — Sky background
   ============================================================ */

.cta-final {
  background-color: var(--sky);
  text-align: center;
}

.cta-final .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.cta-final h2 {
  color: var(--licorice);
  margin-bottom: 0;
}

.cta-final p {
  font-size: var(--fs-cta-final);
  line-height: 1.7;
  color: var(--licorice);
  max-width: 540px;
  opacity: 1;
}

/* ============================================================
   Footer — Licorice
   ============================================================ */

footer {
  background-color: var(--licorice);
  padding: var(--sp-6) var(--sp-4);
}

.footer-inner {
  max-width: var(--max-w-wide);
  margin: 0 auto;
  text-align: center;
}

footer p {
  font-size: var(--text-sm);
  color: var(--platinum);
  opacity: 0.6;
  margin-bottom: 0;
}

/* ── Footer — link LinkedIn ── */

.footer-linkedin {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.72;
  transition: opacity var(--t-fast);
}

.footer-linkedin:hover {
  opacity: 1;
}


/* ============================================================
   Scroll Reveal — fade-in + translateY
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Responsividade — Tablet 640px+
   ============================================================ */

@media (min-width: 640px) {

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .por-que-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }

  .sobre-content {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-8);
  }

  .foto-danilo {
    width: 220px;
    height: 270px;
  }
}

/* ============================================================
   Responsividade — Desktop 1024px+
   ============================================================ */

@media (min-width: 1024px) {

  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4 cards do problema mantêm 2 colunas em desktop */
  .cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  .foto-danilo {
    width: 260px;
    height: 320px;
  }
}

/* ============================================================
   Mobile — ajustes < 480px
   ============================================================ */

@media (max-width: 479px) {

  section {
    padding-top: var(--sp-12);
    padding-bottom: var(--sp-12);
  }

  .hero {
    padding-top: 100px;
  }

  .hero .cta-btn {
    align-self: stretch;
    text-align: center;
    justify-content: center;
  }

  .cta-center .cta-btn {
    width: 100%;
    max-width: 320px;
  }

  .cta-final .cta-btn {
    width: 100%;
    max-width: 320px;
  }

  .sobre-stats {
    flex-direction: column;
    gap: var(--sp-3);
  }

  .foto-wrapper {
    align-self: center;
  }

  .por-que::before {
    font-size: 12rem;
    right: -1rem;
    top: -2rem;
  }

  /* Hero shapes menores em mobile */
  .hero-shape--1 { width: 280px; height: 180px; }
  .hero-shape--2 { width: 220px; height: 140px; }
  .hero-shape--5 { display: none; }
}