/* ==========================================================================
   Aline Candatten Fotografia — Home
   Design system: "Warm Editorial Studio" (Stitch)
   Réplica em CSS vanilla dos dois layouts entregues pelo Stitch:
     .d-*  → versão desktop  (visível a partir de 768px)
     .m-*  → versão mobile   (visível abaixo de 768px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Cores — Warm Editorial Studio */
  --background: #fff8f5;
  --surface: #fff8f5;
  --surface-dim: #e0d9d5;
  --surface-bright: #fff8f5;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #faf2ee;
  --surface-container: #f4ece9;
  --surface-container-high: #eee7e3;
  --surface-container-highest: #e8e1dd;
  --surface-variant: #e8e1dd;
  --on-surface: #1e1b19;
  --on-surface-variant: #52443f;
  --inverse-surface: #33302e;
  --inverse-on-surface: #f7efec;
  --outline: #84736e;
  --outline-variant: #d6c2bc;
  --surface-tint: #84523f;

  --primary: #70412f;
  --on-primary: #ffffff;
  --primary-container: #8c5845;
  --on-primary-container: #ffdcd0;
  --inverse-primary: #fab7a0;
  --secondary: #735a3d;
  --on-secondary: #ffffff;
  --secondary-container: #fddab5;
  --on-secondary-container: #785e40;
  --tertiary: #574b3d;
  --on-tertiary: #ffffff;
  --tertiary-container: #706354;
  --on-tertiary-container: #f2e0ce;

  --primary-fixed: #ffdbcf;
  --primary-fixed-dim: #fab7a0;
  --on-primary-fixed: #341104;
  --on-primary-fixed-variant: #693b29;
  --secondary-fixed: #ffddb9;
  --secondary-fixed-dim: #e3c19d;
  --on-secondary-fixed: #291802;
  --on-secondary-fixed-variant: #5a4227;
  --tertiary-fixed: #f2e0cd;
  --tertiary-fixed-dim: #d5c4b2;
  --on-tertiary-fixed: #231a0f;
  --on-tertiary-fixed-variant: #504537;

  /* Tipografia */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Raios — conforme o tailwind.config exportado pelo Stitch.
     (O DESIGN.md sugere --r-full: 9999px; o build usa 0.75rem.) */
  --r-sm: 0.125rem;
  --r-lg: 0.25rem;
  --r-xl: 0.5rem;
  --r-full: 0.75rem;

  /* Espaçamento */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --gutter-mobile: 1rem;
  --gutter-desktop: 2.5rem;
  --margin-mobile: 1.25rem;
  --margin-desktop: 4rem;

  /* Elevação (sombras quentes, nunca cinza sintético) */
  --shadow-sm: 0 1px 2px rgba(35, 32, 30, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(35, 32, 30, 0.07), 0 2px 4px -2px rgba(35, 32, 30, 0.05);
  --shadow-lg: 0 18px 45px -10px rgba(35, 32, 30, 0.07), 0 6px 16px -4px rgba(35, 32, 30, 0.04);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  font-weight: 400;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
::selection { background: var(--primary-fixed); color: var(--on-primary-fixed); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-lg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-lg);
  font-size: 13px;
  line-height: 20px;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* --------------------------------------------------------------------------
   3. ÍCONES (Material Symbols Outlined)
   -------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.is-filled { font-variation-settings: 'FILL' 1; }

.icon-14 { font-size: 14px; }
.icon-15 { font-size: 15px; }
.icon-16 { font-size: 16px; }
.icon-17 { font-size: 17px; }
.icon-18 { font-size: 18px; }
.icon-19 { font-size: 19px; }
.icon-20 { font-size: 20px; }
.icon-22 { font-size: 22px; }
.icon-24 { font-size: 24px; }
.icon-3xl { font-size: 30px; }
.icon-4xl { font-size: 36px; }

/* --------------------------------------------------------------------------
   4. PLACEHOLDER DE IMAGEM
   Enquanto as fotos finais não estiverem em /images/home/, o container
   mostra o nome do arquivo esperado em vez do ícone de imagem quebrada.
   Pode ser removido junto com o trecho equivalente do script.js.
   -------------------------------------------------------------------------- */
.ph { position: relative; background: var(--surface-container); }
.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  overflow: hidden;
  text-align: center;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--outline);
}
.ph > img { position: relative; z-index: 1; }
.ph > img.is-missing { opacity: 0; }

/* ==========================================================================
   D E S K T O P
   ========================================================================== */

/* 4.1 Header fixo -------------------------------------------------------- */
.d-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 248, 245, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.03);
}
.d-header__inner {
  height: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.d-header__brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.d-header__logo { height: 32px; width: auto; object-fit: contain; }
.d-header__brand-text { display: flex; flex-direction: column; }
.d-header__name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--on-surface);
  white-space: nowrap;
}
.d-header__tagline {
  white-space: nowrap;
  margin-top: 2px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.d-header__nav { display: none; }
.d-header__nav a {
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.025em;
  color: var(--on-surface-variant);
  transition: color 0.2s;
}
.d-header__nav a:hover { color: var(--on-surface); }
.d-header__nav a.is-active {
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--primary);
}
.d-header__actions { display: flex; align-items: center; gap: 1rem; }
.d-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s;
}
.d-header__cta:hover { background: var(--primary-container); }
.d-header__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-header__avatar .material-symbols-outlined { font-size: 18px; }

/* 4.2 Botões compartilhados (desktop) ------------------------------------ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { background: var(--primary-container); }

.btn-primary--lg {
  padding: 1rem 1.75rem;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.025em;
}
.btn-primary--lg .material-symbols-outlined { transition: transform 0.2s; }
.btn-primary--lg:hover .material-symbols-outlined { transform: translateX(2px); }

.btn-primary--sm {
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.75rem;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-primary--xl {
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  border-radius: var(--r-lg);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.025em;
  transition: background-color 0.2s;
}
.btn-ghost:hover { background: var(--surface-container-high); }

/* 4.3 SECTION 1 — Hero editorial ----------------------------------------- */
.d-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2rem 1.5rem 4rem;
  background: var(--surface);
}
.d-hero__grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
.d-hero__col-text {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.d-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.d-hero__dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--primary-container);
}
.d-hero__title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--on-surface);
  margin-bottom: 2rem;
}
.d-hero__lead {
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  max-width: 36rem;
  margin-bottom: 2.5rem;
}
.d-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
}
.d-hero__stats {
  margin-top: 3rem;
  padding-top: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.d-hero__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  color: var(--primary);
}
.d-hero__stat-label {
  display: block;
  margin-top: 0.25rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.d-hero__stat-divider { height: 2rem; width: 1px; background: var(--surface-variant); }

.d-hero__frame {
  position: relative;
  margin: 0 auto;
  max-width: 32rem;
  padding: 0.75rem;
  background: var(--surface-container-low);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 40px -15px rgba(50, 30, 20, 0.06);
}
.d-hero__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  aspect-ratio: 4 / 5;
}
.d-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s;
}
.d-hero__photo img:hover { transform: scale(1.01); }
.d-hero__photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 50%);
}
.d-hero__caption {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.d-hero__caption-name {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}
.d-hero__caption-role {
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--on-surface-variant);
}
.d-hero__caption-badge {
  flex-shrink: 0;
  padding: 0.375rem 0.75rem;
  background: var(--surface-container);
  border-radius: var(--r-sm);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
}

/* 4.4 SECTION 2 — Por trás de cada fotografia ---------------------------- */
.d-about {
  position: relative;
  width: 100%;
  padding: 5rem 0;
  background: var(--surface-container-low);
}
.d-about__inner { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.d-about__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 4rem;
}
.d-about__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.d-about__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 1.5rem;
}
.d-about__rule {
  width: 3rem;
  height: 2px;
  background: var(--primary-container);
  margin-bottom: 2.5rem;
}
.d-about__text {
  max-width: 48rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.d-about__p-lead {
  font-size: 18px;
  line-height: 1.625;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}
.d-about__p {
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
}
.d-about__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 48rem;
  margin: 0 auto;
}
.d-about__card {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.d-about__card .material-symbols-outlined {
  color: var(--primary-container);
  margin-bottom: 0.75rem;
}
.d-about__card-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.d-about__card-label {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.025em;
  color: var(--on-surface-variant);
}

/* 4.5 SECTION 3 — Introdução às experiências ----------------------------- */
.d-intro { width: 100%; padding: 5rem 0 2.5rem; background: var(--surface); }
.d-intro__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.d-intro__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.d-intro__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
  max-width: 42rem;
  margin-bottom: 1rem;
}
.d-intro__lead {
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  max-width: 36rem;
}

/* 4.6 SECTION 4 — Natal 2026 em destaque --------------------------------- */
.d-feature { width: 100%; padding: 2.5rem 0; background: var(--surface); }
.d-feature__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.d-feature__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--surface-container);
  box-shadow: var(--shadow-md);
}
.d-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 440px;
}
.d-feature__media { position: relative; min-height: 320px; }
.d-feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.d-feature__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 50%);
}
.d-feature__body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--surface-container);
}
.d-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--secondary-fixed);
  color: var(--on-secondary-fixed);
  margin-bottom: 1.5rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.d-feature__title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 52px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin-bottom: 1rem;
}
.d-feature__text {
  font-size: 15px;
  line-height: 1.625;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  margin-bottom: 2rem;
}

/* 4.7 SECTION 5 — Demais experiências ------------------------------------ */
.d-cards { width: 100%; padding: 4rem 0; background: var(--surface); }
.d-cards__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.d-cards__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.d-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-container-low);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
}
.d-card:hover { box-shadow: var(--shadow-md); }
.d-card__media { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; }
.d-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.d-card__media img:hover { transform: scale(1.05); }
.d-card__body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.d-card__eyebrow {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.d-card__eyebrow--tight { margin-bottom: 0.25rem; }
.d-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}
.d-card__title--tight { margin-bottom: 0.25rem; }
.d-card__sub {
  font-size: 13px;
  line-height: 20px;
  font-style: italic;
  color: var(--tertiary);
  margin-bottom: 0.75rem;
}
.d-card__text {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  margin-bottom: 2rem;
}
.d-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.d-card__cta:hover { background: var(--primary); color: var(--on-primary); }

/* 4.8 SECTION 6 — Depoimentos -------------------------------------------- */
.d-quotes { width: 100%; padding: 5rem 0; background: var(--surface-container-low); }
.d-quotes__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.d-quotes__head { text-align: center; max-width: 42rem; margin: 0 auto 4rem; }
.d-quotes__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.d-quotes__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
}
.d-quotes__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.d-quote {
  background: var(--surface);
  padding: 2rem;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.d-quote__mark {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--secondary-fixed-dim);
}
.d-quote__text {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.625;
  font-weight: 400;
  font-style: italic;
  color: var(--on-surface);
  margin-bottom: 2rem;
}
.d-quote__author { display: flex; align-items: center; gap: 0.75rem; padding-top: 1rem; }
.d-quote__avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.d-quote__avatar--primary { background: var(--primary-fixed); color: var(--on-primary-fixed); }
.d-quote__avatar--secondary { background: var(--secondary-fixed); color: var(--on-secondary-fixed); }
.d-quote__avatar--tertiary { background: var(--tertiary-fixed); color: var(--on-tertiary-fixed); }
.d-quote__name {
  display: block;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-surface);
}
.d-quote__role {
  display: block;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* 4.9 SECTION 7 — Orçamento personalizado -------------------------------- */
.d-quote-cta { width: 100%; padding: 5rem 0; background: var(--surface); }
.d-quote-cta__inner { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem; }
.d-quote-cta__card {
  position: relative;
  overflow: hidden;
  padding: 2.5rem;
  border-radius: var(--r-xl);
  background: var(--surface-container);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.d-quote-cta__card > .material-symbols-outlined {
  color: var(--primary);
  margin-bottom: 1rem;
}
.d-quote-cta__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 1rem;
}
.d-quote-cta__text {
  font-size: 18px;
  line-height: 1.625;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  max-width: 36rem;
  margin-bottom: 2.5rem;
}

/* 4.10 SECTION 8 — Botão flutuante --------------------------------------- */
.d-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; }
.d-float__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.3s;
}
.d-float__link:hover { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); }
.d-float__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}
.d-float__link:hover .d-float__icon { transform: scale(1.05); }
.d-float__text { display: flex; flex-direction: column; text-align: left; }
.d-float__title { font-size: 13px; line-height: 1.25; font-weight: 600; color: var(--on-surface); }
.d-float__sub {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--on-surface-variant);
}

/* 4.11 Footer ------------------------------------------------------------ */
.d-footer { width: 100%; background: var(--surface-container-low); }
.d-footer__inner { max-width: 1280px; margin: 0 auto; padding: 4.5rem 1.5rem; }
.d-footer__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.d-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.d-footer__brand-line { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.d-footer__logo { height: 28px; width: auto; object-fit: contain; }
.d-footer__name {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--on-surface);
}
.d-footer__text {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  max-width: 24rem;
}
.d-footer__col { display: flex; flex-direction: column; gap: 0.75rem; }
.d-footer__col-title {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface);
}
.d-footer__nav { display: flex; flex-direction: column; gap: 0.5rem; }
.d-footer__nav a {
  font-size: 13px;
  line-height: 20px;
  color: var(--on-surface-variant);
  transition: color 0.15s;
}
.d-footer__nav a:hover { color: var(--on-surface); }
.d-footer__note { font-size: 13px; line-height: 20px; color: var(--on-surface-variant); }
.d-footer__cta-wrap { padding-top: 0.5rem; }
.d-footer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 13px;
  line-height: 20px;
  transition: background-color 0.2s;
}
.d-footer__cta:hover { background: var(--surface-container-high); }
.d-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.d-footer__copy { font-size: 13px; line-height: 20px; color: var(--on-surface-variant); }
.d-footer__tag {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* ==========================================================================
   M O B I L E
   ========================================================================== */
.m-page { padding-bottom: 6rem; }

/* Botões mobile ---------------------------------------------------------- */
.m-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  transition: background-color 0.2s, transform 0.2s;
}
.m-btn--primary {
  background: var(--primary-container);
  color: var(--on-primary);
  padding: 0.875rem 1rem;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-sm);
}
.m-btn--primary:active { transform: scale(0.98); }
.m-btn--surface {
  background: var(--surface-container);
  color: var(--on-surface);
  padding: 0.75rem 1rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m-btn--surface:active { background: var(--surface-container-high); }
.m-btn--primary-solid {
  background: var(--primary);
  color: var(--on-primary);
  padding: 0.875rem 1rem;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.m-btn--primary-solid:active { background: rgba(112, 65, 47, 0.9); }

/* 1. Hero compacta ------------------------------------------------------- */
.m-hero { display: flex; flex-direction: column; padding: 0.5rem 1.25rem 1.5rem; }
.m-brandline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}
.m-brandline__logo { height: 36px; width: auto; object-fit: contain; }
.m-brandline__badge {
  flex-shrink: 0;
  padding: 0.25rem 0.625rem;
  background: var(--surface-container);
  border-radius: var(--r-full);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  white-space: nowrap;
}
.m-hero__card {
  background: var(--surface-container-low);
  border-radius: var(--r-xl);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.m-hero__row { display: flex; align-items: center; gap: 1rem; }
.m-hero__thumb {
  width: 6rem;
  height: 6rem;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.m-hero__thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-hero__headings { display: flex; flex-direction: column; min-width: 0; }
.m-hero__name {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.m-hero__title {
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 500;
  color: var(--on-surface);
}
.m-hero__text {
  font-size: 15px;
  line-height: 1.625;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
}
.m-hero__actions { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; }
.m-hero__actions .m-btn--surface { gap: 0.375rem; }

/* 2. Quem sou eu --------------------------------------------------------- */
.m-about {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  background: var(--surface-container-lowest);
}
.m-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
.m-kicker__rule { height: 1px; width: 1.5rem; background: var(--primary); }
.m-about__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}
.m-about__text {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
}
.m-about__badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.m-about__badge {
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.m-about__badge-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.m-about__badge-label {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

/* 3. Introdução às experiências ------------------------------------------ */
.m-intro { display: flex; flex-direction: column; padding: 2rem 1.25rem 0.5rem; }
.m-intro__eyebrow {
  text-align: center;
  margin-bottom: 0.25rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
}
.m-intro__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  text-align: center;
  color: var(--on-surface);
}
.m-intro__text {
  max-width: 24rem;
  margin: 0.25rem auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
}

/* 4. Natal 2026 em destaque ---------------------------------------------- */
.m-feature { display: flex; flex-direction: column; padding: 0.75rem 1.25rem; }
.m-feature__card {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
}
.m-feature__media { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.m-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.m-feature__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.m-feature__body { padding: 1rem; display: flex; flex-direction: column; }
.m-feature__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.m-feature__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-secondary-container);
}
.m-feature__chip {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  background: rgba(255, 248, 245, 0.5);
  border-radius: var(--r-sm);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--secondary);
  white-space: nowrap;
}
.m-feature__text {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(120, 94, 64, 0.9);
  margin-bottom: 1rem;
}

/* 5. Demais experiências ------------------------------------------------- */
.m-experiences { display: flex; flex-direction: column; gap: 1rem; padding: 0.75rem 1.25rem; }
.m-exp {
  background: var(--surface-container-low);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.m-exp__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.m-exp__media img { width: 100%; height: 100%; object-fit: cover; }
.m-exp__body { padding: 1rem; display: flex; flex-direction: column; }
.m-exp__eyebrow {
  margin-bottom: 0.25rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}
.m-exp__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}
.m-exp__title--tight { margin-bottom: 0.25rem; }
.m-exp__sub {
  margin-bottom: 0.5rem;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--secondary);
}
.m-exp__text {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
}

/* 6. Depoimentos --------------------------------------------------------- */
.m-quotes { display: flex; flex-direction: column; padding: 2rem 1.25rem; }
.m-quotes__title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 1rem;
}
.m-quotes__list { display: flex; flex-direction: column; gap: 0.75rem; }
.m-quote {
  background: var(--surface-container-lowest);
  padding: 1rem;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.m-quote__stars { display: flex; color: var(--primary); margin-bottom: 0.5rem; }
.m-quote__text {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--on-surface);
  margin-bottom: 0.5rem;
}
.m-quote__author {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--on-surface-variant);
}

/* 7. Orçamento personalizado + nota de rodapé ---------------------------- */
.m-cta { display: flex; flex-direction: column; padding: 1rem 1.25rem; }
.m-cta__card {
  background: var(--surface-container-high);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-cta__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-full);
  background: var(--surface-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.m-cta__title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--on-surface);
  margin-bottom: 0.25rem;
}
.m-cta__text {
  max-width: 20rem;
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  margin-bottom: 1rem;
}
.m-cta .m-btn--primary {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m-footnote {
  padding: 2rem 0 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-footnote__name {
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.m-footnote__text { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--outline); }

/* 8. Botão flutuante ----------------------------------------------------- */
.m-float { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 50; }
.m-float__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-full);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 0.2s;
}
.m-float__link:active { transform: scale(0.95); }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* Alternância entre os dois layouts do Stitch (Tailwind md = 768px) */
.d-only { display: none; }

@media (min-width: 640px) {
  .d-hero__actions { flex-direction: row; align-items: center; width: auto; }
  .d-hero__caption { padding: 1.25rem; }
  .d-about__text { text-align: center; }
  .btn-primary--sm { width: auto; }
  .d-feature__body { padding: 3rem; }
  .d-quote { padding: 2.5rem; }
  .d-quote-cta__card { padding: 4rem; }
  .d-footer__bottom { flex-direction: row; }
}

@media (min-width: 768px) {
  .d-only { display: block; }
  .m-only { display: none; }

  main { padding-top: 80px; }
  [id] { scroll-margin-top: 96px; }

  /* Entre 768px e 1023px a barra do Stitch estoura: o gap de 2rem do menu e o
     avatar decorativo não cabem. Tudo volta ao original a partir de 1024px,
     largura para a qual o design foi desenhado. */
  .d-header__nav { display: flex; align-items: center; gap: 0.875rem; }
  .d-header__inner { padding: 0 1.25rem; gap: 0.75rem; }
  .d-header__avatar { display: none; }
  .d-about__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-cards__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-quotes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .d-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .d-footer__brand { grid-column: span 5; }
  .d-footer__col { grid-column: span 3; }
  .d-footer__col--wide { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .d-hero { padding: 6rem 3rem; }
  .d-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
  .d-hero__col-text { grid-column: span 6; }
  .d-hero__col-image { grid-column: span 6; }
  .d-hero__title { font-size: 56px; }
  .d-hero__frame { max-width: none; padding: 1rem; }

  .d-about { padding: 7rem 0; }
  .d-about__inner { padding: 0 3rem; }
  .d-about__title,
  .d-intro__title,
  .d-quotes__title,
  .d-quote-cta__title {
    font-size: 40px;
    line-height: 52px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .d-intro__inner,
  .d-feature__inner,
  .d-cards__inner,
  .d-quotes__inner,
  .d-quote-cta__inner { padding: 0 3rem; }

  .d-feature__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .d-feature__media { grid-column: span 7; min-height: 100%; }
  .d-feature__scrim { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent 50%); }
  .d-feature__body { grid-column: span 5; padding: 3.5rem; }

  .d-cards { padding: 6rem 0; }
  .d-cards__grid { gap: 2.5rem; }

  .d-quotes { padding: 7rem 0; }
  .d-quote-cta { padding: 7rem 0; }

  .d-header__inner { padding: 0 3rem; gap: 1rem; }
  .d-header__nav { gap: 2rem; }
  .d-header__avatar { display: flex; }
  .d-footer__inner { padding: 4.5rem 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}