/* ============================================
   Dr. João Alberto Navarro — Landing Page
   ============================================ */

:root {
  --navy: #0A192F;
  --navy-mid: #112240;
  --clay: #A1887F;
  --clay-light: #BCAAA4;
  /* --clay-deep: usado apenas onde há texto/ícone branco sobre fundo clay
     (botões). var(--clay) puro dá só 3.31:1 de contraste com branco, abaixo
     do mínimo AA (4.5:1) para texto normal. #806C65 sobe para ~4.9:1. */
  --clay-deep: #806C65;
  --sand: #F9F9F6;
  --sand-dark: #EDE8E0;
  --text-dark: #1A1A2E;
  --text-muted: #8892A4;
  --gold: #C9A84C;
  --white: #FFFFFF;
}

*:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--sand);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.preloader-active {
  overflow: hidden;
}

body.preloader-active main,
body.preloader-active .navbar-links,
body.preloader-active .btn-nav-cta,
body.preloader-active .navbar-hamburger {
  visibility: hidden;
}

body.page-revealed main,
body.page-revealed .navbar-links,
body.page-revealed .btn-nav-cta,
body.page-revealed .navbar-hamburger {
  visibility: visible;
}

body.preloader-active .nav-logo-slot,
body.preloader-active .footer-logo-slot {
  opacity: 0;
}

.nav-logo-slot {
  width: 48px;
  height: 48px;
  display: block;
  line-height: 0;
}

.nav-logo-slot svg,
.footer-logo-slot svg {
  display: block;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: var(--navy);
}

::-webkit-scrollbar-thumb {
  background: var(--clay);
  border-radius: 2px;
}

h1, h2, h3, .serif {
  font-family: 'Cormorant Garamond', serif;
}

em {
  font-style: italic;
  color: var(--clay);
}

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

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

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-dark {
  background: var(--navy);
}

.section-dark-mid {
  background: var(--navy-mid);
}

.section-light {
  background: var(--sand);
}

.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1rem;
}

.section-line {
  width: 60px;
  height: 1px;
  background: var(--clay);
  margin: 1.5rem 0;
}

.section-line-center {
  margin-left: auto;
  margin-right: auto;
}

.section-header-center {
  text-align: center;
  margin-bottom: 2rem;
}

.section-title-light {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--sand);
  line-height: 1.15;
}

.section-title-dark {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.15;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 999px;
  padding: 1rem 2.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--clay-deep);
  color: var(--white);
}

.btn-primary:hover {
  /* brightness limitado a 105% para não cair abaixo do contraste mínimo
     AA (4.5:1) de texto branco sobre o fundo. */
  filter: brightness(105%);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(161, 136, 127, 0.35);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--clay-light);
  color: var(--clay-light);
}

.btn-secondary:hover {
  background: rgba(161, 136, 127, 0.1);
}

/* Preloader */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.preloader-curtain {
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform-origin: top center;
  z-index: 1;
}

.preloader-logo-wrap {
  position: fixed;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  z-index: 2;
}

.preloader-logo-wrap svg,
.preloader-logo {
  width: 160px;
  height: auto;
  max-height: 160px;
  display: block;
  overflow: visible;
}

.preloader-logo-wrap .logo-stroke {
  fill: none !important;
  stroke: #F9F9F6 !important;
}

.nav-logo-slot svg {
  width: 48px;
  height: 48px;
}

.footer-logo-slot svg {
  width: 42px;
  height: 42px;
  opacity: 0.9;
}

.nav-logo-slot .logo-stroke,
.footer-logo-slot .logo-stroke {
  fill: none;
  stroke: #F9F9F6;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2rem;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, border 0.3s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.navbar.scrolled {
  background: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(161, 136, 127, 0.15);
}

.navbar-logo {
  flex-shrink: 0;
  display: block;
  width: 48px;
  height: 48px;
}

.navbar-links {
  display: none;
  list-style: none;
  gap: 2.5rem;
}

.navbar-links a {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.navbar-links a:hover {
  color: var(--clay-light);
}

.btn-nav-cta {
  display: none;
  font-size: 0.85rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid var(--clay);
  color: var(--clay);
  border-radius: 999px;
  transition: all 0.3s ease;
}

.btn-nav-cta:hover {
  background: var(--clay-deep);
  color: var(--white);
}

.navbar-hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.navbar-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clay-light);
  transition: transform 0.3s ease;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--navy-mid);
  padding: 2rem;
  z-index: 200;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-close {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--clay-light);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}

.drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.drawer-links a {
  font-size: 1.2rem;
  color: var(--sand);
  letter-spacing: 0.05em;
}

.drawer-cta {
  display: inline-flex !important;
  align-self: flex-start;
}

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 7rem 0 4rem;
  overflow: hidden;
}

.hero-decor {
  position: absolute;
  border: 1px solid rgba(161, 136, 127, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.hero-decor-lg {
  width: 480px;
  height: 480px;
  top: 10%;
  right: -120px;
}

.hero-decor-sm {
  width: 280px;
  height: 280px;
  top: 35%;
  right: 40px;
  border-color: rgba(161, 136, 127, 0.04);
}

.hero-inner {
  display: flex;
  flex-direction: column-reverse;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.hero-content {
  flex: 1;
}

.hero-label {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5.5rem);
  color: var(--sand);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.hero-title em {
  color: var(--clay);
}

.hero-desc {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.85;
  max-width: 480px;
  margin-bottom: 0;
}

.hero-line {
  width: 40px;
  height: 1px;
  background: var(--clay);
  margin: 2rem 0;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
  transition: opacity 0.3s ease;
}

.hero-social-proof:hover {
  opacity: 0.8;
}

.hero-social-avatars {
  display: flex;
}

.hero-social-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--navy);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--navy);
}

.hero-social-avatar + .hero-social-avatar {
  margin-left: -10px;
}

.hero-social-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.hero-social-link {
  display: block;
  color: var(--clay);
  font-weight: 500;
}

.hero-visual {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin: 0 auto;
}

.hero-photo-wrap {
  position: relative;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  border: 2px solid rgba(161, 136, 127, 0.3);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  background: var(--navy-mid);
}

.hero-photo-wrap .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.hero-badge {
  position: absolute;
  background: var(--navy-mid);
  border: 1px solid var(--clay);
  border-radius: 1rem;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* animation:floatBadge só liga depois que o GSAP termina a entrada
   (classe .is-floating adicionada via JS em onComplete) para não disputar
   a propriedade transform com o tween de entrada — ver initHeroAnimations. */
.hero-badge.is-floating {
  animation: floatBadge 4s ease-in-out infinite;
}

.hero-badge-top {
  top: 8%;
  right: -5%;
}

.hero-badge-bottom {
  bottom: 12%;
  left: -5%;
}

.hero-badge-bottom.is-floating {
  animation-delay: 2s;
}

.badge-small {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--clay);
  letter-spacing: 0.08em;
}

.badge-main {
  font-size: 0.85rem;
  color: var(--sand);
}

@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 40px;
  border: 1px solid rgba(161, 136, 127, 0.35);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.scroll-indicator-dot {
  width: 4px;
  height: 4px;
  background: var(--clay);
  border-radius: 50%;
  animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Credentials */
.credentials {
  border-top: 1px solid rgba(161, 136, 127, 0.12);
  border-bottom: 1px solid rgba(161, 136, 127, 0.12);
  padding: 3.5rem 0;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 1rem;
}

.credential-item {
  text-align: center;
  position: relative;
  padding: 0 1rem;
}

.credential-value {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--clay);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.credential-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* About */
.about {
  padding: 5rem 0;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

.about-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* About photo album (closed deck) */
.about-carousel {
  position: relative;
  z-index: 1;
  width: 100%;
  will-change: transform;
}

.about-carousel-stage {
  position: relative;
  width: 100%;
  padding: 0 2.25rem 2.5rem 0;
  perspective: 1600px;
  -webkit-perspective: 1600px;
  perspective-origin: 40% 50%;
}

.about-carousel-deck {
  position: relative;
  width: 100%;
  height: clamp(280px, 40vw, 400px);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.about-carousel-slide {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid rgba(161, 136, 127, 0.35);
  background: #f3efe8;
  box-shadow:
    0 10px 28px rgba(10, 25, 47, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.55) inset;
  transform-origin: left center;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease,
    filter 0.45s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.about-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  pointer-events: none;
  user-select: none;
}

/* atendimento-6.webp (data-index 5) é a foto em frente ao Hospital
   Einstein: o letreiro/marquise ocupa o topo do enquadramento e o Dr.
   Alberto fica pequeno, mais abaixo no centro da imagem — precisa de um
   object-position bem mais alto que as demais fotos para puxar o rosto
   dele para dentro do recorte, mantendo o letreiro do hospital visível
   acima. */
.about-carousel-slide[data-index="5"] img {
  object-position: center 35%;
}

/* Paper backs for pages behind the cover photo */
.about-carousel-slide:not([data-depth='0'])::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(180deg, #f7f3ec 0%, #e8e0d4 100%);
  pointer-events: none;
}

.about-carousel-slide:not([data-depth='0']) img {
  opacity: 0.22;
  filter: grayscale(0.35);
}

/* Closed album stack — page edges peek behind the front photo */
.about-carousel-slide[data-depth='0'] {
  z-index: 5;
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1);
  box-shadow:
    0 18px 40px rgba(10, 25, 47, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.about-carousel-slide[data-depth='0']::after {
  display: none;
}

.about-carousel-slide[data-depth='0'] img {
  opacity: 1;
  filter: none;
}

.about-carousel-slide[data-depth='1'] {
  z-index: 4;
  opacity: 1;
  transform: translate3d(14px, 16px, -28px) rotateZ(1.6deg) scale(0.985);
}

.about-carousel-slide[data-depth='2'] {
  z-index: 3;
  opacity: 1;
  transform: translate3d(26px, 30px, -56px) rotateZ(2.8deg) scale(0.97);
}

.about-carousel-slide[data-depth='3'] {
  z-index: 2;
  opacity: 1;
  transform: translate3d(38px, 44px, -84px) rotateZ(3.8deg) scale(0.955);
}

.about-carousel-slide[data-depth='4'] {
  z-index: 1;
  opacity: 1;
  transform: translate3d(50px, 58px, -112px) rotateZ(4.6deg) scale(0.94);
}

.about-carousel-slide[data-depth='5'] {
  z-index: 0;
  opacity: 1;
  transform: translate3d(62px, 72px, -140px) rotateZ(5.2deg) scale(0.925);
}

/* Top page peels away ABOVE the next photo (never overlays it after) */
.about-carousel-slide.is-turning-out {
  z-index: 10 !important;
  pointer-events: none;
  animation: albumTurnOut 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.about-carousel-slide.is-turning-out::after {
  display: none !important;
}

.about-carousel-slide.is-turning-out img {
  opacity: 1;
  filter: none;
}

/* Next photo stays under the peeling page — no fade-in overlay */
.about-carousel-slide.is-revealing {
  z-index: 5 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg) scale(1) !important;
  box-shadow:
    0 18px 40px rgba(10, 25, 47, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition: none;
}

.about-carousel-slide.is-revealing::after {
  display: none !important;
}

.about-carousel-slide.is-revealing img {
  opacity: 1 !important;
  filter: none !important;
}

@keyframes albumTurnOut {
  0% {
    transform: translate3d(0, 0, 0) rotateY(0deg) scale(1);
    opacity: 1;
  }
  55% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(-28%, 4%, 40px) rotateY(-92deg) scale(0.94);
    opacity: 0;
  }
}

.about-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.85rem;
}

.about-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(161, 136, 127, 0.35);
  background: var(--white);
  color: var(--clay);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.about-carousel-btn:hover {
  background: var(--navy);
  color: var(--sand);
  border-color: var(--clay);
}

.about-carousel-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.about-carousel-dots {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.about-dot {
  /* Área de toque de 44x44px mantendo o ponto visual de 8px: com
     box-sizing:border-box (global), width precisa ser a caixa INTEIRA
     (44px), não o miolo — width menor que a padding faz o content-box
     ser clampado a 0, e background-clip:content-box não pinta nada
     (bug real encontrado: os pontos ficavam invisíveis). 44 - 18 - 18 = 8px
     de miolo visível. */
  width: 44px;
  height: 44px;
  padding: 18px;
  background-color: rgba(161, 136, 127, 0.3);
  background-clip: content-box;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.about-dot.is-active {
  background-color: var(--clay);
  transform: scale(1.2);
}

.about-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
}

.about-badge-row .authority-badge-small,
.about-badge-row .authority-badge-einstein {
  margin-top: 0;
  flex: 1 1 180px;
}

@media (max-width: 767px) {
  /* #sobre nunca teve overflow:hidden vertical (então nada corta o
     baralho por cima dele) — só trava o eixo X, pra nenhuma camada
     traseira do álbum abrir um scroll horizontal na página inteira. */
  #sobre {
    overflow-x: hidden;
  }

  .about-grid {
    overflow: visible;
  }

  /* .about-visual é o wrapper pai imediato de .about-carousel: o padding
     assimétrico (mais em cima/direita/baixo, onde as camadas traseiras se
     deslocam; só 8px à esquerda, que não recebe deslocamento) dá respiro
     pro baralho sem precisar cortar nada com overflow:hidden. */
  .about-visual {
    overflow: visible;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 8px;
  }

  /* Os 6 pontinhos do álbum, cada um com alvo de toque de 44px (ver
     comentário em .about-dot), somam ~308px + os dois botões de seta —
     mais do que a largura útil do container mobile, forçando a coluna
     inteira do grid a crescer além da viewport (grid 1fr usa min-content
     como piso). Deixar os pontos quebrarem em 2 linhas resolve o overflow
     sem reduzir a área de toque. */
  .about-carousel-dots {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 180px;
  }

  /* Sem isso, o default flex-shrink:1 encolhe os dots para o tamanho
     mínimo automático (~conteúdo vazio) em vez de simplesmente quebrar
     linha, fazendo os pontos "sumirem" visualmente (viram ~0px de miolo
     visível, só a padding). */
  .about-carousel-dots .about-dot {
    flex-shrink: 0;
  }

  /* overflow:hidden aqui cortava o topo da foto da frente durante o
     parallax de scroll (#about-carousel sobe até 54px via GSAP em
     initAbout) e o rabisco das camadas traseiras nas bordas — trocado
     para visible; quem contém o conjunto agora é o padding do wrapper
     (.about-visual) e o overflow-x:hidden em #sobre, que barra qualquer
     vazamento horizontal da página sem cortar nada verticalmente. */
  .about-carousel {
    overflow: visible;
    padding-top: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
  }

  .about-carousel-stage {
    width: calc(100% - 2rem);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    overflow: visible;
  }

  /* Altura responsiva (mesma faixa do desktop, só que menor) em vez de um
     valor fixo — a imagem principal fica mais completa/alta na tela,
     dentro de min/max. Continua height:100% no <img> (regra base) em vez
     de height:auto porque as 6 fotos têm proporções diferentes (a do
     índice 5 é retrato, as outras paisagem); com height:auto cada slide
     ficaria de um tamanho, quebrando o empilhamento absoluto por trás da
     foto da frente. */
  .about-carousel-deck {
    height: clamp(260px, 68vw, 380px);
  }

  /* Deslocamentos a 60% do valor do desktop (rotateZ/translateZ na mesma
     proporção) — antes eram reduzidos bem mais (até 16px) só porque
     .about-carousel cortava (overflow:hidden); sem esse corte, dá pra
     mostrar o baralho quase tão completo quanto no desktop, só mais
     compacto. */
  .about-carousel-slide[data-depth='1'] {
    transform: translate3d(8px, 10px, -17px) rotateZ(1deg) scale(0.988);
  }

  .about-carousel-slide[data-depth='2'] {
    transform: translate3d(16px, 18px, -34px) rotateZ(1.7deg) scale(0.976);
  }

  .about-carousel-slide[data-depth='3'] {
    transform: translate3d(23px, 26px, -50px) rotateZ(2.3deg) scale(0.964);
  }

  .about-carousel-slide[data-depth='4'] {
    transform: translate3d(30px, 35px, -67px) rotateZ(2.8deg) scale(0.952);
  }

  .about-carousel-slide[data-depth='5'] {
    transform: translate3d(37px, 43px, -84px) rotateZ(3.1deg) scale(0.94);
  }
}

.shimmer-badge::after,
.shimmer-text {
  position: relative;
}

.shimmer-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -200% 0;
  animation: shimmer 2.5s ease infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.authority-badge-small {
  margin-top: 1rem;
  background: var(--white);
  border: 1px solid var(--sand-dark);
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
}

.authority-badge-uepa {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}

.authority-badge-uepa img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.authority-badge-uepa .badge-small,
.authority-badge-uepa .badge-main {
  display: block;
}

.authority-badge-einstein {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: none;
  border-left: 3px solid var(--gold);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  box-shadow: 0 4px 20px rgba(201, 168, 76, 0.12);
  flex-direction: row;
}

.authority-badge-einstein::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-20deg);
  animation: shimmerPass 3s ease-in-out infinite;
  animation-delay: 2s;
  pointer-events: none;
}

@keyframes shimmerPass {
  0% { left: -100%; }
  100% { left: 150%; }
}

.authority-badge-einstein img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.badge-einstein-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.badge-einstein-text {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

.about-address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand-dark);
}

.about-address svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.about-address p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.authority-badge-small .badge-small {
  color: var(--clay);
}

.dark-text {
  color: var(--text-dark) !important;
}

.about-content p {
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.25rem;
}

.about-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--text-dark);
  line-height: 1.1;
}

/* Timeline */
.timeline {
  position: relative;
  margin-top: 2.5rem;
  padding-left: 2rem;
}

.timeline-line {
  position: absolute;
  left: 4px;
  top: 0;
  width: 1px;
  height: 0%;
  background: var(--clay);
}

.timeline-point {
  position: relative;
  padding-bottom: 2rem;
  opacity: 0;
}

.timeline-point:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -2rem;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--clay);
  margin-left: -4px;
}

.timeline-dot-gold {
  background: var(--gold);
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
}

.timeline-text h3 {
  font-size: 1.1rem;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.timeline-text p {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

.timeline-point-gold .timeline-text h3,
.timeline-point-gold .timeline-text p {
  background: linear-gradient(90deg, var(--text-dark), var(--gold), var(--text-dark));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerText 2.5s ease infinite;
}

@keyframes shimmerText {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Expertise cards */
.expertise {
  padding: 5rem 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 4rem;
}

.expertise-card {
  position: relative;
  overflow: hidden;
  background: rgba(17, 34, 64, 0.8);
  border: 1px solid rgba(161, 136, 127, 0.2);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}

.expertise-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 40%, rgba(10, 25, 47, 0.75) 100%);
  pointer-events: none;
}

.expertise-card > * {
  position: relative;
  z-index: 1;
}

.expertise-card > .card-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  background-color: rgba(10, 25, 47, 0.95);
}

.card-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.12;
  transition: opacity 0.4s ease;
}

.expertise-card:hover .card-bg-img img {
  opacity: 0.2;
}

.expertise-card:hover {
  border-color: var(--clay);
  transform: translateY(-6px);
  box-shadow: 0 0 28px rgba(161, 136, 127, 0.14), 0 20px 60px rgba(0, 0, 0, 0.3);
}

.expertise-card-featured {
  border-left: 3px solid var(--clay);
}

.card-icon {
  margin-bottom: 1.25rem;
  display: block;
  transition: transform 0.35s ease;
}

.expertise-card:hover .card-icon {
  transform: scale(1.12);
}

.card-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 1rem;
}

.expertise-card p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  font-size: 0.72rem;
  background: rgba(161, 136, 127, 0.1);
  border: 1px solid rgba(161, 136, 127, 0.25);
  color: var(--clay-light);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

/* Cases */
.cases {
  padding: 5rem 0;
}

.cases-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* Media */
.media {
  padding: 5rem 0 6rem;
}

.media-subtitle {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 1rem auto 0;
  line-height: 1.75;
}

.media-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.media-card {
  background: var(--navy-mid);
  border-radius: 1rem;
  border: 1px solid rgba(161, 136, 127, 0.15);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.media-card:hover {
  transform: translateY(-5px);
  border-color: rgba(161, 136, 127, 0.4);
}

.media-thumb {
  height: 200px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
  cursor: pointer;
}

.media-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: brightness(0.86);
  transition: transform 0.5s ease, filter 0.4s ease;
}

.media-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 25, 47, 0.1) 0%, rgba(10, 25, 47, 0.15) 55%, rgba(10, 25, 47, 0.75) 100%);
  pointer-events: none;
}

.media-thumb:hover .media-thumb-img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

.media-channel-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(10, 25, 47, 0.85);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.media-play-icon {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.media-thumb:hover .media-play-icon {
  transform: scale(1.08);
}

.media-info {
  padding: 1.5rem;
}

.media-channel-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--clay);
  margin-bottom: 0.65rem;
}

.media-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--sand);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.media-info > p:not(.media-channel-label) {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}

.media-link {
  display: inline-block;
  margin-top: 1rem;
  color: var(--clay);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.media-link:hover {
  text-decoration: underline;
  letter-spacing: 0.08em;
  filter: brightness(1.1);
}

.media-highlight-bar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: rgba(161, 136, 127, 0.06);
  border: 1px solid rgba(161, 136, 127, 0.15);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 700px;
  margin: 3rem auto 0;
}

.media-highlight-quote {
  font-size: 1.3rem;
  font-style: italic;
  color: var(--sand);
  line-height: 1.4;
  margin: 0;
  max-width: 34rem;
}

.media-highlight-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 32rem;
}

/* Testimonials */
.testimonials {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

.testimonials-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/fundo-avaliacoes.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.32) saturate(0.75);
  transform: scale(1.06);
  z-index: 0;
}

.testimonials-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(17, 34, 64, 0.55) 0%, rgba(17, 34, 64, 0.85) 45%, var(--navy-mid) 100%);
}

.testimonials .container {
  position: relative;
  z-index: 1;
}

.testimonials-title {
  font-size: clamp(2rem, 4vw, 3rem);
}

.carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}

.carousel-viewport {
  flex: 1;
  overflow: hidden;
}

.carousel-track {
  display: flex;
}

.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0 0.5rem;
}

.testimonial-card {
  position: relative;
  background: rgba(17, 34, 64, 0.9);
  border: 1px solid rgba(161, 136, 127, 0.15);
  border-radius: 1.5rem;
  padding: 3rem;
  max-width: 700px;
  margin: 0 auto;
}

.testimonial-source {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.quote-mark {
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  font-size: 7rem;
  color: rgba(161, 136, 127, 0.12);
  line-height: 1;
  pointer-events: none;
}

.testimonial-text {
  font-size: 1.2rem;
  font-style: italic;
  color: #E8E0D5;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

.testimonial-line {
  width: 40px;
  height: 1px;
  background: var(--clay);
  margin: 1.5rem 0;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testimonial-author cite {
  font-style: normal;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--navy);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-info {
  min-width: 0;
}

.author-name {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--sand);
  overflow-wrap: break-word;
  word-break: break-word;
}

.author-dx {
  font-size: 0.8rem;
  color: var(--clay);
}

/* transform/opacity aqui são só o estado inicial antes do JS carregar —
   initCarouselArrowsAndSwipeHints (main.js) assume o controle via GSAP
   (yPercent:-50 replica o translateY(-50%)) para animar a entrada e o
   hover/click sem os dois disputarem a propriedade transform. */
.carousel-btn {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 25, 47, 0.7);
  border: 1px solid rgba(161, 136, 127, 0.3);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  transition: background 0.3s ease, border-color 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0;
}

.carousel-prev {
  left: -26px;
}

.carousel-next {
  right: -26px;
}

.carousel-btn:hover {
  background: rgba(161, 136, 127, 0.15);
  border-color: rgba(161, 136, 127, 0.7);
}

@media (max-width: 640px) {
  .carousel-prev {
    left: -6px;
  }

  .carousel-next {
    right: -6px;
  }
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.dot {
  /* Mesma técnica de área de toque de 44x44px usada em .about-dot (e a
     mesma correção: width precisa ser 44px, a caixa inteira, não 8px). */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background-color: rgba(161, 136, 127, 0.3);
  background-clip: content-box;
  cursor: pointer;
  padding: 18px;
  transition: background-color 0.3s ease;
}

.dot.active {
  background-color: var(--clay);
}

/* CTA */
.cta {
  position: relative;
  padding: 6rem 0;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(161, 136, 127, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 700px;
}

@media (min-width: 1000px) {
  .cta-inner {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: start;
    text-align: left;
  }

  .cta-intro {
    padding-top: 0.5rem;
  }

  .cta-title,
  .cta-desc {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }

  .section-line-center {
    margin-left: 0;
    margin-right: auto;
  }

  .cta-buttons {
    justify-content: flex-start;
  }

  .contact-extra-info {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .booking-form-wrap {
    margin-top: 0;
    padding: 2.5rem;
    border-top: none;
    background: rgba(17, 34, 64, 0.5);
    border: 1px solid rgba(161, 136, 127, 0.15);
    border-radius: 1.25rem;
    position: sticky;
    top: 2rem;
  }

  .booking-form {
    max-width: none;
  }
}

.cta-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  color: var(--sand);
  line-height: 1.05;
  margin-bottom: 0;
}

.cta-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 500px;
  margin: 1.5rem auto 2rem;
  line-height: 1.85;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  background: rgba(17, 34, 64, 0.6);
  border: 1px solid rgba(161, 136, 127, 0.12);
  border-radius: 1rem;
  padding: 2rem;
  text-align: left;
}

.contact-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--clay);
  margin-bottom: 0.35rem;
}

.contact-value {
  font-size: 0.95rem;
  color: var(--sand);
}

.contact-value.link:hover {
  color: var(--clay-light);
}

.contact-extra-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(161, 136, 127, 0.15);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-address-block,
.contact-online-block {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
}

.contact-address-block svg,
.contact-online-block svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.contact-extra-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--clay);
  margin-bottom: 0.35rem;
}

.contact-extra-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--sand);
  line-height: 1.6;
  margin: 0;
}

/* Booking form (solicitação de avaliação) */
.booking-form-wrap {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(161, 136, 127, 0.15);
  text-align: left;
}

.booking-form-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 300;
  color: var(--sand);
  margin-bottom: 0.75rem;
}

.booking-form-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 2rem;
}

.booking-form-note strong {
  color: var(--sand);
}

.booking-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 720px;
}

@media (min-width: 640px) {
  .booking-form {
    grid-template-columns: 1fr 1fr;
  }
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.booking-field-full {
  grid-column: 1 / -1;
}

.booking-field label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--clay);
}

.booking-field input,
.booking-field select,
.booking-field textarea {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  color: var(--sand);
  background: rgba(17, 34, 64, 0.6);
  border: 1px solid rgba(161, 136, 127, 0.25);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  min-height: 44px;
  transition: border-color 0.3s ease;
}

.booking-field textarea {
  resize: vertical;
  min-height: 96px;
}

.booking-field input::placeholder,
.booking-field textarea::placeholder {
  color: rgba(136, 146, 164, 0.6);
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  border-color: var(--clay);
  outline: none;
}

.booking-field select {
  cursor: pointer;
}

.booking-field select option {
  background: var(--navy);
  color: var(--sand);
}

.booking-submit {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.booking-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-20deg);
  animation: submitShimmer 4s ease-in-out infinite;
  animation-delay: 2s;
  pointer-events: none;
}

@keyframes submitShimmer {
  0% { left: -100%; }
  30% { left: 150%; }
  100% { left: 150%; }
}

@media (min-width: 480px) {
  .booking-submit {
    width: auto;
  }
}

.booking-status {
  margin-top: 1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  color: var(--clay-light);
  min-height: 1.2em;
}

.booking-status.is-error {
  color: #E0A596;
}

.booking-consent {
  margin-top: 0.75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 480px;
}

.availability-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
}

@media (min-width: 1000px) {
  .availability-hint {
    justify-content: flex-start;
  }
}

.availability-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4CAF50;
  flex-shrink: 0;
  animation: availabilityPulse 1.5s ease-in-out infinite;
}

.availability-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

@keyframes availabilityPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* Contact section — máscara de revelação do título */
.title-mask {
  display: block;
  overflow: hidden;
}

.title-reveal {
  display: block;
}

/* Contact section — partículas decorativas de fundo */
.contact-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.contact-particle {
  position: absolute;
  border-radius: 50%;
  background: var(--clay);
  opacity: 0.1;
}

/* Sticky WhatsApp CTA (mobile) */
.mobile-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .mobile-sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    background: var(--clay-deep);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.9rem 1.5rem;
    min-height: 44px;
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(10, 25, 47, 0.4);
    transition: transform 0.35s ease, opacity 0.35s ease;
  }

  .mobile-sticky-cta svg {
    flex-shrink: 0;
  }

  .mobile-sticky-cta.is-hidden {
    transform: translateY(150%);
    opacity: 0;
    pointer-events: none;
  }

  body.preloader-active .mobile-sticky-cta {
    display: none;
  }
}

/* Footer */
.site-footer {
  background: #060E1A;
  border-top: 1px solid rgba(161, 136, 127, 0.1);
  padding: 2.5rem 0 2rem;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-brand p {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer-links a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--clay-light);
}

.footer-social {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--clay);
}

.footer-divider {
  height: 1px;
  background: rgba(161, 136, 127, 0.08);
  margin-bottom: 1.5rem;
}

.footer-copy {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(136, 146, 164, 0.5);
}

/* Responsive — Tablet */
@media (min-width: 768px) {
  .navbar-links {
    display: flex;
  }

  .btn-nav-cta:not(.drawer-cta) {
    display: inline-flex;
  }

  .navbar-hamburger {
    display: none;
  }

  .hero-inner {
    flex-direction: row;
    align-items: center;
  }

  .hero-content {
    width: 58%;
  }

  .hero-visual {
    width: 42%;
    max-width: none;
    margin: 0;
  }

  .hero-badge {
    display: flex;
  }

  .credentials-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .credential-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: rgba(161, 136, 127, 0.15);
  }

  .about {
    padding: 7rem 0;
  }

  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: start;
  }

  /* .about-carousel tem z-index:1 e overflow visível — sem essa folga,
     as camadas traseiras do baralho (que se deslocam até 72px abaixo da
     caixa via transform) sobrepõem visualmente os badges UEPA/Einstein
     logo abaixo. */
  .about-badge-row {
    margin-top: 2.5rem;
    padding-top: 1rem;
  }

  .about-badge-row .authority-badge-small,
  .about-badge-row .authority-badge-einstein {
    position: relative;
    z-index: 2;
  }

  .expertise {
    padding: 7rem 0;
  }

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

  .cases {
    padding: 7rem 0;
  }

  .testimonials {
    padding: 7rem 0;
  }

  .cta {
    padding: 8rem 0;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    text-align: left;
    align-items: center;
  }

  .footer-brand {
    align-items: flex-start;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-social {
    justify-content: flex-end;
  }
}

/* Mobile cases accordion */
@media (max-width: 767px) {
  .hero-badge {
    display: none;
  }

  /* A foto some em telas estreitas porque flex:1 dentro de um flex-column
     de altura automática colapsa .hero-visual (flex-basis:0% sem espaço
     livre pra crescer). Em vez de disputar espaço com o texto no fluxo,
     ela vira uma camada posicionada atrás do texto, à direita. */
  .hero-inner {
    display: block;
    position: relative;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  /* .hero-content é um bloco normal no mobile (não mais flex:1) e por
     isso sua CAIXA ocupa 100% da largura mesmo onde o texto não chega
     visualmente — como está num z-index acima de .hero-visual, essa
     caixa "invisível" roubava todo toque destinado à foto sobreposta à
     direita, inclusive nas áreas sem texto. pointer-events:none aqui e
     :auto de volta nos elementos realmente clicáveis deixa o toque
     atravessar o resto do bloco até a foto por baixo. */
  .hero-content {
    pointer-events: none;
  }

  .hero-buttons,
  .hero-social-proof {
    pointer-events: auto;
  }

  .hero-visual {
    position: absolute;
    top: 0;
    right: -8%;
    width: 62%;
    max-width: 260px;
    margin: 0;
    z-index: 1;
    pointer-events: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .hero {
    padding-top: 8rem;
  }
}

/* Reduced motion */
@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;
  }
}

/* ============================================
   iPhone Cases Stage + Video Modal
   ============================================ */
.iphone-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.iphone-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10, 25, 47, 0.7);
  border: 1px solid rgba(161, 136, 127, 0.3);
  backdrop-filter: blur(8px);
  cursor: none;
  transition: background 0.3s ease, border-color 0.3s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0;
}

.iphone-carousel-prev {
  left: -26px;
}

.iphone-carousel-next {
  right: -26px;
}

.iphone-carousel-btn:hover {
  background: rgba(161, 136, 127, 0.15);
  border-color: rgba(161, 136, 127, 0.7);
}

.iphone-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.iphone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(161, 136, 127, 0.3);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.iphone-dot.is-active {
  background: var(--clay-deep);
  width: 22px;
  border-radius: 4px;
}

.iphone-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 1rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.iphone-stage.animated {
  opacity: 1;
  transform: translateY(0);
}

.iphone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: 220px;
  flex-shrink: 0;
  cursor: pointer;
  will-change: transform;
}

/* JS (initCasesCarousel) always adds .is-interactive on load and drives
   --tx/--rot/--sc/--op/--z/--pe/--cap-op per card to build a 3D coverflow
   ("roleta") — controlled by mouse wheel on desktop, and by arrows, dots,
   swipe or tapping a side card on any screen size. Without JS the cards
   fall back to the plain stacked list below. */
.iphone-stage.is-interactive {
  position: relative;
  display: block;
  width: 100%;
  height: 760px;
  padding: 2.5rem 0 0;
  perspective: 1400px;
  -webkit-perspective: 1400px;
  perspective-origin: 50% 32%;
}

.iphone-stage.is-interactive .iphone-card {
  position: absolute;
  top: 0;
  left: 50%;
  opacity: var(--op, 1);
  z-index: var(--z, 1);
  pointer-events: var(--pe, auto);
  transform: translateX(-50%) translateX(var(--tx, 0px)) rotateY(var(--rot, 0deg)) scale(var(--sc, 1));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.iphone-stage.is-interactive .iphone-card.is-center {
  cursor: default;
}

.iphone-stage.is-interactive .iphone-caption {
  opacity: var(--cap-op, 0);
  pointer-events: var(--cap-pe, none);
  transition: opacity 0.35s ease;
}

.iphone-wrap {
  position: relative;
  width: 220px;
  height: 450px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3));
  will-change: transform;
}

.iphone-wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

.iphone-screen-content {
  position: absolute;
  top: 2.5%;
  left: 5.6%;
  width: 88.8%;
  height: 95%;
  border-radius: 36px;
  overflow: hidden;
  z-index: 1;
}

.iphone-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s ease;
}

.iphone-card:hover .iphone-thumb {
  transform: scale(1.06);
}

.iphone-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 25, 47, 0.25);
  transition: background 0.3s ease;
}

.iphone-card:hover .iphone-play-overlay {
  background: rgba(10, 25, 47, 0.1);
}

.iphone-caption {
  text-align: center;
  max-width: 220px;
}

.iphone-case-num {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 0.4rem;
}

.iphone-case-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.iphone-case-desc {
  font-size: 0.82rem;
  color: #6b7280;
  line-height: 1.65;
  margin: 0 0 1rem;
}

.iphone-watch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--clay);
  color: var(--clay);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.iphone-watch-btn:hover {
  background: var(--clay-deep);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(161, 136, 127, 0.4);
}

/* Video modal */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.vmodal.is-open {
  pointer-events: all;
  opacity: 1;
}

.vmodal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 20, 0.94);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.vmodal-container {
  position: relative;
  z-index: 1;
  width: 320px;
  max-width: 85vw;
  transform: scale(0.85) translateY(30px);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
  will-change: transform;
}

.vmodal.is-open .vmodal-container {
  transform: scale(1) translateY(0);
}

.vmodal-phone-frame {
  position: relative;
  width: 100%;
  background: #1a1a1f;
  border-radius: 44px;
  overflow: hidden;
  border: 1.5px solid #3a3a4a;
  aspect-ratio: 9 / 19.5;
}

.vmodal-video-wrap {
  position: absolute;
  top: 2.5%;
  left: 5.6%;
  width: 88.8%;
  height: 95%;
  border-radius: 36px;
  overflow: hidden;
  background: #000;
}

.vmodal-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vmodal-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 9100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(26, 26, 31, 0.9);
  border: 1px solid rgba(161, 136, 127, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.vmodal-close:hover {
  background: var(--clay);
  border-color: var(--clay);
  transform: scale(1.1);
}

.vmodal-info {
  margin-top: 1.25rem;
  text-align: center;
  max-width: 320px;
}

.vmodal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f9f9f6;
  margin: 0 0 0.35rem;
  display: block;
}

.vmodal-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(168, 186, 200, 0.8);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 640px) {
  .iphone-card {
    width: 200px;
  }

  .iphone-wrap {
    width: 200px;
    height: 410px;
    /* Sombra dupla e cara em GPU; com 5 cartões simultâneos em 3D no
       celular (eram 3 antes) isso pesava bastante no scroll. Uma sombra
       única e mais barata no card central, nenhuma nos laterais
       (já discretos por opacidade/escala). */
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
  }

  .iphone-stage.is-interactive .iphone-card:not(.is-center) .iphone-wrap {
    filter: none;
  }

  .vmodal-container {
    width: 280px;
  }

  .iphone-stage.is-interactive {
    height: 700px;
  }

  .iphone-carousel {
    gap: 0.25rem;
  }

  .iphone-carousel-btn {
    width: 40px;
    height: 40px;
  }

  .iphone-carousel-prev {
    left: -6px;
  }

  .iphone-carousel-next {
    right: -6px;
  }

  /* Padding/fonte de desktop deixavam o card de depoimento estreito e
     comprido em telas pequenas; reduz para manter proporção de retângulo. */
  .testimonial-card {
    padding: 1.75rem 1.5rem;
  }

  .quote-mark {
    font-size: 4.5rem;
    top: 0.25rem;
    left: 1rem;
  }

  .testimonial-text {
    font-size: 1.02rem;
    line-height: 1.65;
  }

  /* No desktop a tag "via Instagram" flutua no canto superior direito do
     card sem problema, mas em telas estreitas ela caía em cima da
     primeira linha da citação. Em vez de tentar reservar espaço com
     padding, tira do posicionamento absoluto: vira uma legenda normal
     logo abaixo do autor, sem risco de sobrepor o texto. */
  .testimonial-source {
    position: static;
    display: block;
    margin-top: 0.75rem;
    text-align: left;
  }

  .carousel-wrap {
    gap: 0.5rem;
  }

  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .testimonials-bg {
    background-image: url('../assets/images/fundo-avaliacoes-mobile.webp');
  }
}

@media (prefers-reduced-motion: reduce) {
  .iphone-card,
  .iphone-wrap,
  .vmodal,
  .vmodal-container,
  .iphone-thumb {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   Hero flip 3D
   ============================================ */
.hero-flip-container {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  border-radius: inherit;
  /* .hero-visual vira pointer-events:none no mobile (para não capturar
     toques destinados ao texto atrás dela — ver regra de .hero-visual no
     bloco @media max-width:767px). Sem isso o toque pro flip nunca
     chegaria aqui, já que pointer-events:none é herdado por descendentes
     que não o sobrescrevem. */
  pointer-events: auto;
}

.hero-flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: inherit;
  will-change: transform;
}

.hero-flip-card.is-flipped {
  transform: rotateY(180deg);
}

/* -webkit-backface-visibility é necessário além da propriedade padrão:
   sem ele, Safari (desktop e todo navegador em iOS, que roda sobre
   WebKit) às vezes ignora o backface-visibility:hidden de um elemento
   que também tem overflow:hidden dentro de um pai com preserve-3d,
   deixando o verso (com o texto "atendimento") visível por cima da
   frente em vez de escondido atrás dela. */
.hero-flip-front,
.hero-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: inherit;
}

.hero-flip-back {
  transform: rotateY(180deg);
}

.hero-flip-front img,
.hero-flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-flip-back img {
  object-position: center 15%;
}

.flip-hint {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(161, 136, 127, 0.6);
  pointer-events: none;
}

@media (max-width: 767px) {
  .flip-hint {
    display: none;
  }
}

.tap-hint-mobile {
  display: none;
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(10, 25, 47, 0.6);
  color: rgba(245, 240, 232, 0.85);
  pointer-events: none;
}

@media (max-width: 767px) {
  .tap-hint-mobile {
    display: flex;
  }
}

/* ============================================
   Custom cursor
   ============================================ */
body {
  cursor: none;
}

#cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--clay);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease;
}

#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(161, 136, 127, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

@media (hover: none) {
  body {
    cursor: auto;
  }

  #cursor-dot,
  #cursor-ring {
    display: none;
  }
}

/* ============================================
   Swipe hint
   ============================================ */
.swipe-hint {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  color: rgba(136, 146, 164, 0.6);
  opacity: 0;
  white-space: nowrap;
}

.swipe-hint span {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(136, 146, 164, 0.6);
}

.swipe-hint-icon {
  animation: swipeHint 1.2s ease-in-out infinite alternate;
}

@keyframes swipeHint {
  from { transform: translateX(-6px); }
  to { transform: translateX(6px); }
}

.iphone-carousel .swipe-hint {
  bottom: -28px;
}

/* ============================================
   Correções mobile (cirúrgicas — não afetam >768px)
   ============================================ */

/* Correção 1 — textos ultrapassando a tela no mobile */
@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
    word-break: break-word;
    overflow-wrap: break-word;
  }

  section p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }

  .section-title-light,
  .section-title-dark,
  .about-title,
  .cta-title {
    font-size: clamp(1.8rem, 7vw, 2.8rem);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  h3 {
    font-size: clamp(1.2rem, 5vw, 1.6rem);
  }

  .hero-title {
    max-width: 100%;
  }

  .container,
  section {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    max-width: 100%;
  }

  .hero-badge {
    padding: 0.4rem 0.75rem;
  }

  .hero-badge .badge-small,
  .hero-badge .badge-main {
    font-size: 0.65rem;
  }

  .credential-label {
    font-size: 0.6rem;
    word-break: break-word;
  }

  .timeline-text {
    max-width: calc(100% - 40px);
    padding-right: 1rem;
    overflow-wrap: break-word;
  }

  .timeline {
    max-width: 100%;
    overflow: hidden;
  }

  .about-content {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .about-content p {
    font-size: clamp(0.9rem, 4vw, 1rem);
    line-height: 1.8;
    overflow-wrap: break-word;
  }
}

@media (max-width: 480px) {
  .section-label,
  .hero-label,
  .badge-einstein-label,
  .media-channel-label,
  .iphone-case-num,
  .contact-label,
  .contact-extra-label,
  .flip-hint {
    letter-spacing: 0.08em;
  }
}

/* Correção 3 — setas do carrossel de depoimentos saindo do card (mobile) */
@media (max-width: 768px) {
  .carousel-wrap {
    overflow: visible;
  }

  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(10, 25, 47, 0.85);
    border: 1px solid rgba(161, 136, 127, 0.4);
    z-index: 10;
  }

  .carousel-prev {
    left: 8px;
  }

  .carousel-next {
    right: 8px;
  }
}

/* Correção 4 — hint de swipe ilegível (mobile). Aplica-se ao carrossel de
   depoimentos (.carousel-wrap) e ao de casos (.iphone-carousel): o
   swipe-hint deixa de flutuar em position:absolute sobre o conteúdo e
   passa a ocupar a linha de baixo do próprio flex row (flex-basis:100%
   força o wrap para uma nova linha), virando um pill legível abaixo do
   carrossel em vez de sobrepor os dots. */
@media (max-width: 768px) {
  .carousel-wrap,
  .iphone-carousel {
    flex-wrap: wrap;
  }

  .swipe-hint,
  .iphone-carousel .swipe-hint {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    flex: 0 0 100%;
    justify-content: center;
    gap: 6px;
    margin: 16px auto 0;
    width: fit-content;
    color: rgba(245, 240, 232, 0.75);
    background: rgba(10, 25, 47, 0.6);
    border-radius: 999px;
    padding: 6px 16px;
  }

  .swipe-hint span {
    font-size: 11px;
    color: rgba(245, 240, 232, 0.75);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .swipe-hint-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}