@font-face {
  font-family: 'Libertinus Serif';
  src: url('fonts/LibertinusSerif-Italic.ttf') format('truetype');
  font-style: italic;
  font-weight: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS
============================================================ */
:root {
  --color-clay:        #47352a;
  --color-white:       #ffffff;
  --color-sunny:       #d98449;
  --color-dark:        #282828;
  --color-mud:         #fbf7f4;
  --color-monstera:    #3f4d43;
  --color-olive:       #687461;
  --color-gray-300:    #919191;
  --color-clay-100:    #bab3af;
  --color-clay-300:    #5e4e45;
  --color-clay-500:    #3f322a;
  --color-clay-700:    #342d29;
  --color-sunny-50:    #f8eee8;

  --font-sans: 'Manrope', sans-serif;
  --font-serif: 'Libertinus Serif', Georgia, serif;

  --radius-card:   16px;
  --radius-btn:    999px;
  --radius-hero-img: 40px 40px 0 0;
}

/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-dark);
  background: var(--color-white);
  overflow-x: hidden;
}

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

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

/* ============================================================
   TYPOGRAPHY UTILITIES
============================================================ */
.text-light  { font-family: var(--font-sans); font-weight: 300; }
.text-serif  { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.text-sunny  { color: var(--color-sunny); }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}
.btn--sunny {
  background: var(--color-sunny);
  color: var(--color-white);
  transition: background 0.2s;
}
.btn--sunny:hover { background: #a5612b; }

.btn--whatsapp img { flex-shrink: 0; }

/* ============================================================
   SECTION HEADER LABELS
============================================================ */
.section-header__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.section-header__line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-dark);
  flex-shrink: 0;
}
.section-header__line--white { background: var(--color-white); }

.section-header__text {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dark);
}
.section-header__text--white { color: var(--color-white); }

.section-header__title {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-dark);
}
.section-header__title--white { color: var(--color-white); }

.section-header__title .text-serif {
  font-size: 52px;
}

.section-header--center { text-align: center; }
.section-header--center .section-header__label { justify-content: center; }

/* ============================================================
   SECTION 1 – HERO
============================================================ */
.hero {
  background: var(--color-clay);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 60px 60px;
  position: relative;
}

/* Hero image: sticky — trava no topo quando chega lá,
   section-projetos desliza por cima */
.hero-image-block {
  position: sticky;
  top: 0;
  z-index: 0;
  line-height: 0;
  background: var(--color-clay);
}


/* Nav */
.hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1246px;
  margin: 0 auto;
}
.hero__nav-left,
.hero__nav-right {
  display: flex;
  gap: 32px;
  align-items: center;
  min-width: 206px;
}
.hero__nav-right { justify-content: flex-end; }

.nav-link {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.4;
  transition: color 0.2s;
}
.nav-link:hover { color: var(--color-sunny); }

/* Desktop logo */
.hero__logo-link--desktop { display: block; }
.hero__logo-link--mobile  { display: none; }

.hero__logo {
  height: 55px;
  width: auto;
  display: block;
}

/* Hero content */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  margin-top: 60px;
  max-width: 886px;
  width: 100%;
}

.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.hero__title {
  font-size: 60px;
  font-weight: 200;
  color: var(--color-white);
  text-align: center;
  line-height: 0.9;
}
.hero__title-light {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 60px;
}
.hero__title-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 74px;
  color: var(--color-sunny);
}

.hero__description {
  font-size: 18px;
  font-weight: 300;
  color: var(--color-white);
  text-align: center;
  line-height: 1.4;
}

/* Hero image */
.hero__image-wrapper {
  margin-top: 0;
  width: 100vw;
  border-radius: var(--radius-hero-img);
  overflow: hidden;
  max-height: 520px;
}
.hero__image-wrapper picture { display: block; }
.hero__image {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center 60%;
  display: block;
}

/* ============================================================
   HAMBURGER BUTTON
============================================================ */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  align-items: center;
  justify-content: center;
  z-index: 20;
  flex-shrink: 0;
}
.nav-hamburger__bars {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 14px;
}

.nav-hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
}

/* Abre: barra 1 desce e gira +45°, barra 2 sobe e gira -45° → X */
.nav-hamburger[aria-expanded="true"] .nav-hamburger__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger__bar:nth-child(2) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ============================================================
   MOBILE MENU — aparece dentro do hero, não é overlay full screen
============================================================ */
.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 32px;
}
.mobile-menu.is-open { display: flex; }

/* O header do menu é o mesmo nav row — sem header duplicado */
.mobile-menu__header { display: none; }

.mobile-menu__link {
  display: block;
  color: var(--color-white);
  font-size: 18px;
  font-weight: 400;
  text-decoration: none;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.2s;
}
.mobile-menu__link:hover { color: var(--color-sunny); }
.mobile-menu__cta {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ============================================================
   SECTION 2 – PROJETOS (Service cards)
============================================================ */
.section-projetos {
  background: var(--color-white);
  padding: 80px 140px;
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  position: relative;
  z-index: 1;
}
.section-projetos__container {
  max-width: 1086px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.cards-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Service card — sticky stack */
.service-card {
  background: var(--color-mud);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 80px;
  margin-bottom: 24px;
}

.service-card:last-child {
  margin-bottom: 0;
}

/* Z-index crescente: cada card cobre o anterior no mesmo topo */
.service-card:nth-child(1) { z-index: 1; }
.service-card:nth-child(2) { z-index: 2; }
.service-card:nth-child(3) { z-index: 3; }

.service-card__main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
}

.service-card__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 480px;
  flex-shrink: 0;
  padding: 8px 0;
}

.service-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.service-card__icon-wrap {
  width: 40px;
  height: 40px;
  background: rgba(217, 132, 73, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.service-card__icon { width: 24px; height: 24px; object-fit: contain; }

.service-card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  color: var(--color-dark);
  line-height: 1;
}

.service-card__desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--color-gray-300);
  line-height: 1.4;
}

/* Project image inside card */
.service-card__image {
  flex: 1;
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-monstera);
}
.service-card__image picture {
  display: block;
  width: 100%;
  height: 100%;
}
.service-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card__location {
  position: relative;
  font-size: 14px;
  color: var(--color-gray-300);
  text-align: right;
  z-index: 1;
}

/* Mobile CTA button hidden on desktop/tablet */
.service-card__btn--mobile { display: none; }
/* Desktop/Tablet CTA (inside info column) */
.service-card__btn--desktop { display: inline-flex; }

/* Divider */
.service-card__divider {
  height: 1px;
  background: linear-gradient(to right, rgba(40,40,40,0.1), rgba(40,40,40,0.1));
  width: 100%;
}

/* Deliverables */
.service-card__deliverables {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-card__deliverables-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-sunny);
  text-align: center;
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.deliverable-item {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-sunny-50);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deliverable-item__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.deliverable-item__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.2;
}

.deliverable-item__desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-gray-300);
  line-height: 1.4;
  margin-top: 12px;
}

/* Mobile deliverables carousel (hidden on desktop/tablet) */
.deliverables-carousel { display: none; }

/* ============================================================
   SECTION 3 – GALLERY / SERVIÇOS
============================================================ */
.gallery-scroll-wrapper {
  position: relative;
}

.section-gallery {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--color-monstera) 0%,
    var(--color-olive) 100%
  );
  padding: 80px 60px;
}

@media (min-width: 769px) {
  .section-gallery {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .section-gallery__container {
    width: 100%;
  }
  .gallery-grid {
    overflow-x: auto;
    will-change: scroll-position;
    flex-shrink: 0;
  }
}

.section-gallery__container {
  max-width: 1246px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.section-gallery__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 40px;
}

.section-gallery__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gallery-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  /* break out of section horizontal padding, re-apply as scroll padding */
  margin-left: -60px;
  margin-right: -60px;
  padding: 0 60px 4px;
  margin-top: 60px;
  scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }

.gallery-card {
  flex-shrink: 0;
  width: 380px;
  height: 400px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-monstera);
  position: relative;
}

/* picture wrapper for responsive + hover image swap */
.gallery-card__picture {
  display: block;
  position: absolute;
  inset: 0;
  transition: opacity 0.4s ease;
}
.gallery-card__picture--hover { opacity: 0; }
.gallery-card:hover .gallery-card__picture--hover { opacity: 1; }
.gallery-card:hover .gallery-card__picture:not(.gallery-card__picture--hover) { opacity: 0; }

.gallery-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,1) 3.2%, transparent 75.3%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-card:hover .gallery-card__overlay { opacity: 1; }

.gallery-card__info { flex: 1; }
.gallery-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}
.gallery-card__subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #919191;
  line-height: 1.2;
}

.gallery-card__btn {
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(2px);
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.gallery-card__btn:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   SECTION 4 – AVALIAÇÕES (Testimonials)
============================================================ */
.section-testimonials {
  background: var(--color-white);
  padding: 80px 60px;
  position: relative;
}

.section-testimonials__container {
  max-width: 1246px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.section-testimonials__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 40px;
}

/* Testimonials arrows */
.testimonials__arrows {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 24px;
  border-radius: var(--radius-btn);
  border: none;
  cursor: pointer;
  background: var(--color-sunny);
  transition: background 0.2s;
}
.arrow-btn img { width: 16px; height: 16px; object-fit: contain; display: block; }
.arrow-btn:hover { background: #a5612b; }

/* Slides container */
.testimonials-slides { position: relative; }

.testimonial-slide {
  display: none;
}
.testimonial-slide.is-active {
  display: flex;
}

.section-testimonials__body {
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* Photo column */
.testimonials__photo-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 610px;
  flex-shrink: 0;
}

.testimonials__project-photo {
  width: 100%;
  height: 340px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.testimonials__project-photo picture { display: block; width: 100%; height: 100%; }
.testimonials__project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials__rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.testimonials__address {
  font-size: 14px;
  color: var(--color-gray-300);
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}

.testimonials__google-icon {
  width: 32px;
  height: 32px;
  background: rgba(217, 132, 73, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.google-icon-img { width: 20px; height: 20px; object-fit: contain; }

.testimonials__score {
  font-size: 20px;
  color: var(--color-dark);
}

.testimonials__stars {
  display: flex;
  gap: 4px;
  align-items: center;
}
.testimonials__stars img { height: 16px; width: auto; object-fit: contain; }

/* Review card */
.testimonials__review-card {
  width: 540px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.testimonials__quote-mark {
  width: 60px;
  height: 42px;
  display: block;
  flex-shrink: 0;
}

.testimonials__quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonials__quote-headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  color: var(--color-dark);
  line-height: 1.1;
}

.testimonials__quote-body {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-dark);
  line-height: 1.6;
}

.testimonials__divider {
  height: 1px;
  background: rgba(40, 40, 40, 0.12);
}

.testimonials__client {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonials__client-avatar {
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background: rgba(217, 132, 73, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-sunny);
  font-weight: 400;
  flex-shrink: 0;
}

.testimonials__client-name {
  font-size: 18px;
  color: var(--color-dark);
  line-height: 1;
}
.testimonials__client-role {
  font-size: 14px;
  color: var(--color-gray-300);
  line-height: 1;
  margin-top: 4px;
}

/* Mobile testimonials (hidden on desktop/tablet) */
.testimonials-mobile { display: none; }

.testimonials-mobile__quote-mark {
  width: 40px;
  height: 28px;
  display: block;
  flex-shrink: 0;
}

/* Carousel dots (shared) */
/* Scroll indicator — container pill + dots */
.carousel-dots-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  padding: 8px 12px;
}

.testimonials-mobile__dots .carousel-dots-wrap {
  background: #FBF7F4;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8e6e4;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s;
}
.carousel-dot.is-active {
  background: var(--color-sunny);
}

/* ============================================================
   SECTION 5 – SOBRE
============================================================ */
.section-about {
  background: var(--color-clay);
  padding: 80px 140px;
  position: relative;
}

/* Desktop: CSS grid — text-top + text-bottom in left col, photo-col spans both rows on right */
.section-about__container {
  max-width: 1086px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 450px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  row-gap: 40px;
}

.section-about__text-top {
  grid-column: 1;
  grid-row: 1;
  padding-top: 60px;
}

.section-about__text-bottom {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Photo column: spans both grid rows on the right */
.section-about__photo-col {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-about__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  color: var(--color-white);
  line-height: 1;
}

/* bio-short: tablet only — hidden on desktop and mobile */
.section-about__bio-short {
  display: none;
  font-size: 16px;
  color: var(--color-white);
  line-height: 1.4;
}

.section-about__bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  color: var(--color-white);
  line-height: 1.4;
}

.section-about__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: auto; /* push social to bottom of left col on desktop */
}

/* CTA button: hidden on desktop, shown on tablet/mobile */
.section-about__cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.section-about__social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.section-about__social-text {
  font-size: 14px;
  color: var(--color-clay-100);
  white-space: nowrap;
}

.social-icons { display: flex; gap: 8px; }

.social-btn {
  width: 40px;
  height: 40px;
  background: var(--color-clay-300);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.social-btn:hover { background: var(--color-clay-500); }
.social-btn img { width: 20px; height: 20px; object-fit: contain; }

.section-about__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 40px;
}

.section-about__profile-wrap {
  position: relative;
  width: 100%;
  height: 540px;
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}

.section-about__profile-wrap picture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section-about__profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%; /* mostra rosto + torso */
}

.section-about__stats {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  background: rgba(71, 53, 42, 0.8);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.section-about__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  text-align: center;
}

.section-about__stat-number {
  font-size: 20px;
  font-weight: 300;
  color: var(--color-mud);
  letter-spacing: 0.4px;
}

.section-about__stat-label {
  font-size: 8px;
  font-weight: 500;
  color: var(--color-clay-100);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-about__name {
  text-align: right;
  font-size: 40px;
  font-weight: 300;
  color: var(--color-white);
  padding: 0 40px;
}
.section-about__name .text-serif { font-size: 48px; }

/* ============================================================
   SECTION 6 – FAQ
============================================================ */
.section-faq {
  background: var(--color-white);
  padding: 80px 140px 40px;
  position: relative;
}

.section-faq__container {
  max-width: 1086px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.section-faq__header {
  text-align: center;
}
.section-faq__header .section-header__title {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
}
.section-faq__header .section-header__title .text-serif {
  font-size: 52px;
}

/* FAQ items */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background: var(--color-mud);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  color: var(--color-dark);
  line-height: 1.2;
  transition: color 0.2s;
}
.faq-item__question:hover { color: var(--color-clay-300); }
.faq-item__question:hover .faq-item__toggle { background: #a5612b; }

.faq-item__toggle {
  width: 32px;
  height: 32px;
  background: var(--color-sunny);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.faq-item__toggle img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.faq-item.is-open .faq-item__toggle img {
  transform: rotate(180deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 24px;
}

.faq-item.is-open .faq-item__answer {
  max-height: 500px;
  padding: 0 24px 24px;
}

.faq-item__answer-box {
  background: var(--color-white);
  border: 1px solid #f8eee8;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item__answer-box p {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-gray-300);
  line-height: 1.5;
}

/* CTA at bottom of FAQ */
.faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 20px 0 40px;
}

.faq-cta__text {
  font-size: 32px;
  font-weight: 300;
  color: var(--color-dark);
  text-align: left;
}
.faq-cta__text .text-serif { font-size: 40px; }

/* ============================================================
   FOOTER IMAGE STRIP
============================================================ */

/* Wrapper cobre as áreas dos cantos arredondados com branco,
   impedindo que o hero sticky marrom apareça atrás deles */
.footer-image-strip-wrap {
  background: var(--color-white);
  position: relative;
}

.footer-image-strip {
  width: 100%;
  height: 450px;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  position: relative;
}
.footer-image-strip picture {
  display: block;
  position: absolute;
  inset: 0;
}
.footer-image-strip__img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--color-clay-700);
  border-top: 1px solid var(--color-clay-500);
  padding: 41px 60px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  backdrop-filter: blur(6px);
}

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__logo {
  height: 36px;
  width: 120px;
  object-fit: contain;
  object-position: left center;
}

.footer__socials { display: flex; gap: 8px; }

.footer__social-btn {
  width: 40px;
  height: 40px;
  background: var(--color-clay-300);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.footer__social-btn:hover { background: var(--color-clay-500); }
.footer__social-btn img { width: 20px; height: 20px; object-fit: contain; }

.footer__bottom {
  border-top: 1px solid var(--color-clay-500);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__legal {
  font-size: 14px;
  color: var(--color-clay-100);
}

.footer__credit {
  font-size: 14px;
  color: var(--color-clay-100);
}

.footer__credit-link {
  color: var(--color-clay-100);
  text-decoration: underline;
}

/* ============================================================
   RESPONSIVE – TABLET (769px–1100px)
============================================================ */
@media (max-width: 1100px) and (min-width: 769px) {
  /* Show hamburger, hide desktop nav links */
  .hero__nav-left, .hero__nav-right { display: none; }
  .hero__logo-link--desktop { display: none; }
  /* Logo centered via absolute centering */
  .hero__nav { position: relative; justify-content: center; }
  .hero__logo-link--mobile  { display: block; }
  .nav-hamburger { display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

  .hero__content.is-hidden { display: none; }

  /* Hero: tablet font sizes and spacing */
  .hero { padding: 40px 40px 60px; }
  .hero__content { margin-top: 40px; }
  .hero__title-light { font-size: 52px; }
  .hero__title-serif { font-size: 62px; }
  .hero__image { height: 397px; }
  .hero__image-wrapper { max-height: 397px; }
}

@media (max-width: 1100px) {
  .section-projetos { padding-left: 40px; padding-right: 40px; }
  .section-faq { padding: 50px 80px; }

  /* Section container gaps: 60px → 40px on tablet */
  .section-projetos__container,
  .section-gallery__container,
  .section-testimonials__container,
  .section-faq__container { gap: 40px; }
  .gallery-grid { margin-top: 40px; }

  /* FAQ — tablet */
  .section-faq__header .section-header__title { font-size: 36px; }
  .section-faq__header .section-header__title .text-serif { font-size: 48px; }
  .faq-item__question { font-size: 24px; }
  .faq-item__answer-box { padding: 16px; }
  .faq-cta { flex-direction: column; align-items: center; gap: 24px; padding-bottom: 0; }
  .faq-cta__text { text-align: center; }

  /* Tablet: stack sticky com peek */
  .cards-list { gap: 0; }
  .service-card { position: sticky; margin-bottom: 24px; }
  .service-card:last-child { margin-bottom: 0; }
  .service-card:nth-child(1) { z-index: 1; top: 72px; }
  .service-card:nth-child(2) { z-index: 2; top: 72px; }
  .service-card:nth-child(3) { z-index: 3; top: 72px; }

  /* Tablet service card: info LEFT + image RIGHT (same as desktop), only grid becomes 2 cols */
  .service-card__info { width: auto; flex: 1; }
  .service-card__image { min-height: 240px; }
  .deliverables-grid { grid-template-columns: repeat(2, 1fr); }

  /* About — tablet: single centered column */
  .section-about { padding: 50px 80px; }
  .section-about__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  /* About — tablet */
  .section-about__text-top { padding-top: 0; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 24px; }
  .section-about__headline { font-size: 44px; }
  .section-about__headline br { display: none; }
  .section-about__bio-short { display: block; }
  .section-about__photo-col { width: 100%; gap: 0; align-items: center; }
  /* Reorder: image first, then label + name below */
  .section-about__profile-wrap { order: 1; height: 360px; padding: 16px; border-radius: 8px; }
  .section-about__profile-wrap picture { inset: 0; }
  .section-about__profile-img { object-position: center 18%; }
  .section-about__label { order: 2; padding: 0; align-self: center; margin-top: 24px; }
  .section-about__name { order: 3; text-align: center; padding: 0; font-size: 32px; margin-top: 4px; }
  .section-about__name .text-serif { font-size: 40px; }
  .section-about__text-bottom { width: 100%; align-items: center; gap: 40px; justify-content: flex-start; }
  .section-about__bio { text-align: center; }
  .section-about__bio-p3 { display: none; }
  .section-about__actions { align-items: center; gap: 24px; width: 100%; margin-top: 0; }
  .section-about__cta { display: flex; width: 260px; }
  .section-about__social { flex-direction: column; gap: 16px; align-items: center; }

  /* Testimonials: stack photo + text, rating above image on tablet */
  .section-testimonials__body { flex-direction: column; }
  .testimonials__photo-col { width: 100%; flex-direction: column-reverse; }
  .testimonials__review-card { width: 100%; }

  /* Footer image strip */
  .footer-image-strip { height: 332px; border-radius: 24px 24px 0 0; overflow: hidden; }
}

/* ============================================================
   RESPONSIVE – MOBILE (≤768px)
============================================================ */
@media (max-width: 768px) {
  /* Hero */
  .hero { padding: 24px 24px 40px; }
  .hero__nav { flex-wrap: nowrap; gap: 0; position: relative; justify-content: center; }
  .hero__nav-left, .hero__nav-right { display: none; }
  .hero__logo-link--desktop { display: none; }
  .hero__logo-link--mobile  { display: block; }
  .nav-hamburger { display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
  .hero__logo--mobile { height: 40px; width: auto; }
  .hero__content.is-hidden { display: none; }
  .hero__content { margin-top: 40px; }
  .hero__image-wrapper { margin-top: 0; }

  /* Title flows inline on mobile (no forced break between light and serif spans) */
  .hero__title { font-size: 0; }
  .hero__title br { display: none; }
  .hero__title-light { font-size: 40px; }
  .hero__title-serif { font-size: 52px; }

  .hero__description { font-size: 16px; }
  .hero__description br { display: none; }
  .hero__image { height: 280px; }

  /* CTA full width on mobile */
  .hero__content > .btn--sunny { width: 100%; }

  /* Services */
  .section-projetos { padding: 60px 0 50px; border-radius: 24px 24px 0 0; }
  .section-projetos__container { padding: 0 24px; gap: 40px; }
  .section-projetos__container > .section-header { padding: 0 0 0 0; }
  .section-header__title { font-size: 32px; }
  .section-header__title .text-serif { font-size: 44px; }

  /* Mobile: sem animação, cards normais com gap */
  .cards-list { flex-direction: column; gap: 24px; }

  .service-card {
    padding: 20px;
    position: static;
    top: auto;
    margin-bottom: 0;
    z-index: auto;
  }

  /* Inside mobile card: stacked column */
  .service-card__main { flex-direction: column; gap: 16px; }
  .service-card__info { width: 100%; gap: 12px; align-items: flex-start; }
  .service-card__image { width: 100%; height: 180px; min-height: 0; }

  /* On mobile: hide desktop button, show mobile button — centered */
  .service-card__btn--desktop { display: none; }
  .service-card__btn--mobile  { display: inline-flex; align-self: center; }

  /* Hide grid, show carousel on mobile */
  .deliverables-grid { display: none; }
  .deliverables-carousel { display: block; }

  /* Deliverables carousel: horizontal scroll com peek do próximo */
  .deliverables-carousel__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-right: 20px;
    scrollbar-width: none;
  }
  .deliverables-carousel__track::-webkit-scrollbar { display: none; }

  .deliverables-carousel__slide {
    display: flex !important;
    flex-shrink: 0;
    width: calc(100% - 20px); /* fresta de ~20px do próximo */
    scroll-snap-align: start;
  }
  .deliverables-carousel__slide .deliverable-item {
    width: 100%;
    border: 1px solid var(--color-sunny-50);
  }

  .deliverables-carousel__dots {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  /* Gallery */
  .section-gallery { padding: 60px 24px; }
  .section-gallery__container { gap: 40px; }
  .section-gallery__header { flex-direction: column; align-items: center; gap: 24px; padding: 0; text-align: center; }
  .gallery-grid { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; margin-top: 40px; }
  .gallery-card { width: 300px; height: 250px; }

  /* Testimonials: hide desktop slides, show mobile */
  .section-testimonials { padding: 50px 24px; }
  .section-testimonials__container { gap: 40px; }
  .section-testimonials__header { flex-direction: column; gap: 24px; padding: 0; }
  .testimonials__arrows { display: none; }
  .testimonials-slides { display: none; }
  .testimonials-mobile { display: block; }

  /* Horizontal scroll track — same pattern as deliverables */
  .testimonials-mobile__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-right: 20px;
    scrollbar-width: none;
  }
  .testimonials-mobile__track::-webkit-scrollbar { display: none; }

  .testimonials-mobile__slide {
    display: flex !important;
    flex-shrink: 0;
    width: 312px;
    scroll-snap-align: start;
  }

  /* Card: fixed height, justify-between to push content up / client down */
  .testimonials-mobile__card {
    background: var(--color-mud);
    border-radius: var(--radius-card);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 516px;
    gap: 0;
  }

  /* Top content wrapper (aspas+rating row + text) */
  .testimonials-mobile__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Bottom wrapper (divider + client) */
  .testimonials-mobile__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Header row: aspas top-left, rating top-right */
  .testimonials-mobile__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* Smaller rating components on mobile cards */
  .testimonials-mobile .testimonials__google-icon {
    width: 20px; height: 20px; border-radius: 5px;
  }
  .testimonials-mobile .google-icon-img { width: 10px; height: 10px; }
  .testimonials-mobile .testimonials__score { font-size: 12px; }
  .testimonials-mobile .testimonials__stars img { height: 10px; }
  .testimonials-mobile .testimonials__quote-headline { font-size: 22px; }
  .testimonials-mobile .testimonials__client-avatar { width: 32px; height: 32px; font-size: 14px; }
  .testimonials-mobile .testimonials__client-name { font-size: 16px; }
  .testimonials-mobile .testimonials__client-role { font-size: 12px; }

  .testimonials-mobile__dots {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }

  /* About — mobile: single left-aligned column */
  .section-about { padding: 50px 24px; }
  .section-about__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .section-about__text-top { padding-top: 0; width: 100%; text-align: left; gap: 0; }
  .section-about__headline { font-size: 40px; }
  .section-about__bio-short { display: none; }
  .section-about__photo-col { width: 100%; gap: 0; align-items: flex-start; }
  /* Reorder: image first, then label + name below */
  .section-about__profile-wrap { order: 1; height: 340px; padding: 16px; border-radius: 8px; }
  .section-about__profile-wrap picture { inset: 0; }
  .section-about__profile-img { object-position: center 18%; }
  .section-about__label { order: 2; padding: 0; align-self: flex-start; margin-top: 24px; }
  .section-about__name { order: 3; text-align: left; padding: 0; font-size: 32px; align-self: flex-start; margin-top: 4px; }
  .section-about__name .text-serif { font-size: 40px; }
  .section-about__text-bottom { width: 100%; gap: 40px; justify-content: flex-start; align-items: flex-start; }
  .section-about__bio { text-align: left; }
  .section-about__bio-p3 { display: block; }
  .section-about__actions { align-items: flex-start; gap: 24px; width: 100%; }
  .section-about__cta { display: flex; width: 100%; }
  .section-about__social { flex-direction: column; gap: 16px; align-items: center; width: 100%; }

  /* FAQ */
  .section-faq { padding: 50px 24px; }
  .section-faq__container { gap: 40px; }
  .faq-item__question { font-size: 24px; }
  .faq-item__answer-box { padding: 16px; }
  .faq-item__answer-box p { font-size: 14px; }
  .faq-cta { flex-direction: column; gap: 24px; align-items: center; }
  .faq-cta__text { font-size: 28px; text-align: center; }
  .faq-cta__text .text-serif { font-size: 36px; }
  .faq-cta .btn { width: 100%; justify-content: center; }

  /* Footer image strip */
  .footer-image-strip { height: 280px; border-radius: 24px 24px 0 0; overflow: hidden; }
  .footer-image-strip__img { object-position: 59% center; }

  /* Footer */
  .footer { padding: 32px 24px; }
  .footer__top { flex-direction: column; gap: 24px; align-items: flex-start; }
  .footer__bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ============================================================
   ANIMATIONS
============================================================ */

/* Desabilita para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  [data-anim], .hero-anim {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* --- Elementos animados pelo scroll --- */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.25, 0, 0, 1),
              transform 0.7s cubic-bezier(0.25, 0, 0, 1);
}

[data-anim="fade"] {
  transform: none;
}

[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* --- Animações de carga do hero --- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroScaleIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-anim {
  animation: heroFadeUp 0.75s cubic-bezier(0.25, 0, 0, 1) both;
}

.hero-anim--nav {
  animation: heroFadeDown 0.5s ease both;
}

.hero-anim--image {
  animation: heroScaleIn 1s cubic-bezier(0.25, 0, 0, 1) both;
  animation-delay: 0.1s;
}

.hero-anim--d1 { animation-delay: 0.25s; }
.hero-anim--d2 { animation-delay: 0.4s; }
.hero-anim--d3 { animation-delay: 0.55s; }
.hero-anim--d4 { animation-delay: 0.7s; }
.hero-anim--d5 { animation-delay: 0.85s; }

/* --- Nav ao scroll --- */
.hero__nav {
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.hero__nav.is-scrolled {
  background: rgba(71, 53, 42, 0.97);
}

/* --- Card stack: service cards --- */
/* Overlay de escurecimento quando o card está sendo coberto */
.service-card {
  transition: opacity 0.4s ease;
}
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  background: rgba(40, 40, 40, 0);
  pointer-events: none;
  transition: background 0.4s ease;
}
.service-card.is-covered::after {
  background: rgba(255, 255, 255, 0.5);
}

/* --- Hover: FAQ toggle --- */
.faq-item__toggle {
  transition: background 0.25s ease, transform 0.3s ease;
}

/* --- Hover: footer social buttons --- */
.footer__social-btn {
  transition: background 0.25s ease, transform 0.25s ease;
}
.footer__social-btn:hover {
  transform: translateY(-2px);
}