/* =====================================================================
   CLÍNICA DA DOR SALUS DOLORIS — FOLHA DE ESTILO PRINCIPAL
   Estrutura: Tokens → Reset → Tipografia → Layout Base → Componentes → Seções
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS DE DESIGN
   Toda a paleta deriva estritamente das cores institucionais fornecidas.
   Tons "tint/shade" são variações matemáticas das cores-base, não cores
   novas — isso mantém a elegância e evita poluição visual.
--------------------------------------------------------------------- */
:root{
  /* Paleta institucional */
  --azul-petroleo:      #0F2C38;   /* fundo escuro, rodapé, overlays */
  --azul-petroleo-90:   #143847;
  --azul-institucional: #2F627C;   /* cor de ação, links, destaques */
  --azul-institucional-l: #3E7998;
  --branco:              #FFFFFF;
  --cinza-claro:          #F5F7F8; /* fundo alternado de seções */
  --cinza-medio:          #7D8A92; /* texto secundário, bordas */
  --texto-principal:      #15232B;

  /* Tints/shades derivados (glass, overlays, sombras) — mesma família cromática */
  --petroleo-glass:     rgba(15, 44, 56, 0.62);
  --petroleo-glass-leve:rgba(15, 44, 56, 0.28);
  --branco-glass:       rgba(255, 255, 255, 0.08);
  --linha-sutil:         rgba(125, 138, 146, 0.25);
  --dourado-sutil:       #B99A6A; /* único acento quente, usado com extrema moderação */

  /* Tipografia */
  --fonte-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --fonte-corpo:   'Montserrat', 'Poppins', sans-serif;

  /* Espaçamento e ritmo */
  --espaco-secao: clamp(4.5rem, 8vw, 8rem);
  --largura-max: 1240px;
  --raio: 14px;
  --raio-grande: 28px;

  /* Sombras suaves */
  --sombra-suave: 0 20px 45px -25px rgba(15, 44, 56, 0.35);
  --sombra-card: 0 12px 30px -18px rgba(15, 44, 56, 0.28);
  --sombra-elevada: 0 30px 60px -20px rgba(15, 44, 56, 0.45);

  /* Transições */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.6s;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--fonte-corpo);
  color: var(--texto-principal);
  background: var(--branco);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea{ font-family: inherit; font-size: 1rem; max-width: 100%; }

/* Segurança contra corte de texto: qualquer palavra ou nome mais longo
   quebra a linha em vez de ser cortado pela borda da tela/elemento */
h1, h2, h3, h4, p, a, span, li, label, button{
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Foco visível para acessibilidade (navegação por teclado) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid var(--dourado-sutil);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Respeita preferência de redução de movimento */
@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;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   TIPOGRAFIA
--------------------------------------------------------------------- */
h1, h2, h3, h4{
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--azul-petroleo);
  letter-spacing: 0.2px;
}

h1{ font-size: clamp(2.6rem, 5.5vw, 4.6rem); font-weight: 500; }
h2{ font-size: clamp(2rem, 3.6vw, 3rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
h4{ font-size: 1.15rem; }

p{ color: var(--texto-principal); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fonte-corpo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--azul-institucional);
  margin-bottom: 1.1rem;
}

.eyebrow::before{
  content: '';
  width: 28px;
  height: 1px;
  background: var(--dourado-sutil);
  display: inline-block;
}

.texto-lead{
  font-size: 1.15rem;
  color: var(--cinza-medio);
  max-width: 60ch;
}

/* ---------------------------------------------------------------------
   LAYOUT BASE
--------------------------------------------------------------------- */
.container{
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 3rem);
}

.secao{
  padding: var(--espaco-secao) 0;
}

.secao--clara{ background: var(--cinza-claro); }
.secao--escura{ background: var(--azul-petroleo); color: var(--branco); }
.secao--escura h2, .secao--escura h3{ color: var(--branco); }

.cabecalho-secao{
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.cabecalho-secao.esquerda{ margin: 0 0 3.5rem; text-align: left; }

/* ---------------------------------------------------------------------
   BOTÕES
--------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}

.btn--primario{
  background: linear-gradient(135deg, var(--azul-institucional-l), var(--azul-institucional));
  color: var(--branco);
  box-shadow: var(--sombra-card);
}
.btn--primario:hover{
  background: linear-gradient(135deg, var(--azul-institucional), var(--azul-petroleo));
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}

.btn--secundario{
  background: transparent;
  color: var(--branco);
  border: 1px solid rgba(255,255,255,0.5);
}
.btn--secundario:hover{
  background: var(--branco);
  color: var(--azul-petroleo);
  transform: translateY(-3px);
}

.btn--outline-escuro{
  background: transparent;
  color: var(--azul-petroleo);
  border: 1px solid var(--linha-sutil);
}
.btn--outline-escuro:hover{
  background: var(--azul-petroleo);
  color: var(--branco);
  border-color: var(--azul-petroleo);
}

.btn--whatsapp{
  background: var(--azul-petroleo);
  color: var(--branco);
}
.btn--whatsapp:hover{ background: var(--azul-institucional); transform: translateY(-3px); }

/* ---------------------------------------------------------------------
   CABEÇALHO / MENU FIXO
--------------------------------------------------------------------- */
.cabecalho{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  padding: 1.6rem 0;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}

.cabecalho .container{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  flex-wrap: nowrap;
}

.cabecalho--rolado{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(15,44,56,0.25);
  padding: 0.85rem 0;
}

.nav-principal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex: 1;
}

.nav-principal a{
  font-size: clamp(0.66rem, 0.58rem + 0.3vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--branco);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur) var(--ease);
  /* Nunca corta uma palavra no meio: só quebra a linha entre duas
     palavras (ex.: "Corpo Clínico"), e somente se não houver espaço,
     nunca no meio de uma palavra única. */
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-align: center;
}

.nav-principal a::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--dur) var(--ease);
}
.nav-principal a:hover::after,
.nav-principal a.ativo::after{ width: 100%; }

.cabecalho--rolado .nav-principal a{ color: var(--texto-principal); }
.cabecalho--rolado .nav-principal a:hover{ color: var(--azul-institucional); }

.cabecalho__acoes{ display: flex; align-items: center; gap: 1.4rem; flex-shrink: 0; }

/* Menu Mobile — botão hambúrguer */
.botao-menu{
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
  z-index: 600;
}
.botao-menu span{
  height: 2px;
  width: 100%;
  background: var(--branco);
  border-radius: 2px;
  transition: all var(--dur) var(--ease);
}
.cabecalho--rolado .botao-menu span{ background: var(--azul-petroleo); }

.botao-menu.aberto span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.botao-menu.aberto span:nth-child(2){ opacity: 0; }
.botao-menu.aberto span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   HERO / HOME
--------------------------------------------------------------------- */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--branco);
  overflow: hidden;
}

.hero__fundo{
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/hero-recepcao.jpg');
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,44,56,0.55) 0%, rgba(15,44,56,0.72) 55%, rgba(15,44,56,0.92) 100%),
    linear-gradient(100deg, rgba(15,44,56,0.55) 0%, rgba(15,44,56,0.15) 60%);
}

/* Elemento-assinatura: o sunburst da marca, ampliado e sutil ao fundo do hero */
.hero__sunburst{
  position: absolute;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: min(60vw, 780px);
  height: min(60vw, 780px);
  opacity: 0.14;
  pointer-events: none;
  animation: girar-lento 140s linear infinite;
}

.hero__conteudo{
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-top: 4rem;
}

.hero__marca{
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--dourado-sutil);
  margin-bottom: 1.4rem;
  display: block;
}

.hero h1{
  color: var(--branco);
  margin-bottom: 0.6rem;
}

.hero__subtitulo{
  font-family: var(--fonte-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  color: rgba(255,255,255,0.88);
  font-weight: 500;
  margin-bottom: 1.8rem;
}

.hero__texto{
  font-size: 1.05rem;
  color: rgba(255,255,255,0.78);
  max-width: 52ch;
  margin-bottom: 2.6rem;
}

.hero__botoes{ display: flex; flex-wrap: wrap; gap: 1.1rem; }

.hero__scroll{
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__scroll-icone{
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 20px;
  position: relative;
}
.hero__scroll-icone::before{
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--branco);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: scroll-pulsa 1.8s ease-in-out infinite;
}

/* ---------------------------------------------------------------------
   SOBRE
--------------------------------------------------------------------- */
.sobre__grade{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.sobre__imagem{
  position: relative;
}

.sobre__imagem img{
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-elevada);
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.sobre__selo{
  position: absolute;
  bottom: -1.6rem;
  left: -1.6rem;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 240px;
}

.sobre__selo svg{ width: 34px; height: 34px; flex-shrink: 0; color: var(--azul-institucional); }
.sobre__selo strong{ display: block; font-family: var(--fonte-display); font-size: 1.05rem; color: var(--azul-petroleo); }
.sobre__selo span{ font-size: 0.75rem; color: var(--cinza-medio); }

.sobre__texto p{ margin-bottom: 1.3rem; color: var(--cinza-medio); }
.sobre__texto p:last-of-type{ margin-bottom: 2rem; }

.pilares{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 2.2rem;
}

.pilar{ border-left: 2px solid var(--dourado-sutil); padding-left: 1rem; }
.pilar h4{ font-size: 0.95rem; margin-bottom: 0.3rem; }
.pilar p{ font-size: 0.85rem; color: var(--cinza-medio); margin: 0; }

/* ---------------------------------------------------------------------
   CARDS — ESPECIALIDADES / DIFERENCIAIS
--------------------------------------------------------------------- */
.grade-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.6rem;
}

.card{
  background: var(--branco);
  border-radius: var(--raio-grande);
  padding: 2.4rem 2rem;
  box-shadow: var(--sombra-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}

.card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--dourado-sutil), var(--azul-institucional));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.card::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
  pointer-events: none;
}

.card:hover{ transform: translateY(-8px); box-shadow: var(--sombra-elevada); }
.card:hover::before{ transform: scaleX(1); }
.card:hover::after{ border-color: rgba(185,154,106,0.4); }

.card__icone{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cinza-claro), #EAEFF1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  color: var(--azul-institucional);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card__icone svg{ width: 24px; height: 24px; }
.card:hover .card__icone{
  background: linear-gradient(135deg, var(--azul-institucional), var(--azul-petroleo));
  color: var(--branco);
  transform: rotate(-8deg) scale(1.08);
}

.card h3{ margin-bottom: 0.7rem; }
.card p{ color: var(--cinza-medio); font-size: 0.95rem; margin: 0; }

/* Cards escuros (Diferenciais) */
.secao--escura .card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}
.secao--escura .card__icone{ background: rgba(255,255,255,0.08); color: var(--dourado-sutil); }
.secao--escura .card:hover .card__icone{ background: var(--dourado-sutil); color: var(--azul-petroleo); }
.secao--escura .card p{ color: rgba(255,255,255,0.68); }
.secao--escura .card:hover{ background: rgba(255,255,255,0.08); }

/* ---------------------------------------------------------------------
   TRATAMENTOS
--------------------------------------------------------------------- */
.grade-tratamentos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.card-tratamento{
  background: var(--branco);
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card-tratamento:hover{ transform: translateY(-6px); box-shadow: var(--sombra-elevada); }

.card-tratamento__imagem{
  height: 190px;
  overflow: hidden;
}
.card-tratamento__imagem img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card-tratamento:hover .card-tratamento__imagem img{ transform: scale(1.08); }

.card-tratamento__corpo{ padding: 1.8rem; }
.card-tratamento__corpo p{ color: var(--cinza-medio); font-size: 0.92rem; margin: 0.6rem 0 1.3rem; }

/* ---------------------------------------------------------------------
   GRADE-SCROLL — Carrossel horizontal para Especialidades e Tratamentos
   Em vez de empilhar todos os cards, mostra alguns por vez com
   deslize (toque/mouse) e setas/indicadores para navegar aos demais.
--------------------------------------------------------------------- */
.grade-scroll{ position: relative; }

/* Trilho: transforma o grid original em uma fileira rolável */
.grade-cards.grade-scroll__trilho,
.grade-tratamentos.grade-scroll__trilho{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; /* evita cortar a sombra do hover */
  margin-bottom: -6px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;
}
.grade-cards.grade-scroll__trilho::-webkit-scrollbar,
.grade-tratamentos.grade-scroll__trilho::-webkit-scrollbar{
  display: none; /* Chrome/Safari/Edge */
}

/* 3 cards visíveis por padrão (telas largas) */
.grade-cards.grade-scroll__trilho > .card{
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * 1.6rem) / 3);
}
.grade-tratamentos.grade-scroll__trilho > .card-tratamento{
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * 1.8rem) / 3);
}

/* Setas + indicadores abaixo da fileira de cards */
.grade-scroll__controles{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  margin-top: 2.2rem;
}

.grade-scroll__seta{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul-petroleo);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-card);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.grade-scroll__seta svg{ width: 18px; height: 18px; }
.grade-scroll__seta:hover:not(:disabled){ background: var(--azul-petroleo); color: var(--branco); transform: translateY(-2px); }
.grade-scroll__seta:disabled{ opacity: 0.32; cursor: default; box-shadow: none; transform: none; }

.grade-scroll__indicadores{
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.grade-scroll__ponto{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--linha-sutil);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.grade-scroll__ponto.ativo{ background: var(--azul-institucional); transform: scale(1.35); }

/* Quando todos os cards já cabem na tela, esconde os controles */
.grade-scroll--sem-rolagem .grade-scroll__controles{ display: none; }

/* Cursor indicando que é possível arrastar (desktop) */
.grade-cards.grade-scroll__trilho,
.grade-tratamentos.grade-scroll__trilho{ cursor: grab; }
.grade-scroll__trilho--arrastando{ cursor: grabbing !important; scroll-snap-type: none !important; user-select: none; }

.link-saiba-mais{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--azul-institucional);
}
.link-saiba-mais svg{ width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-saiba-mais:hover svg{ transform: translateX(4px); }

/* ---------------------------------------------------------------------
   CORPO CLÍNICO
--------------------------------------------------------------------- */
.medico{
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--branco);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
  padding: clamp(1.6rem, 4vw, 3rem);
}

.medico__foto{ border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-card); }
.medico__foto img{ width: 100%; aspect-ratio: 3/4; object-fit: cover; }

.medico__crm{
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--azul-institucional);
  background: var(--cinza-claro);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin: 0.6rem 0 1rem;
}

.medico__especialidade{
  font-family: var(--fonte-display);
  font-style: italic;
  color: var(--cinza-medio);
  margin-bottom: 1rem;
}
.medico__especialidade--sem-crm{ margin-top: 0.6rem; }

/* Carrossel do Corpo Clínico — 1 profissional por vez */
.corpo-clinico__trilho.grade-scroll__trilho{
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  margin-bottom: -6px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.corpo-clinico__trilho.grade-scroll__trilho::-webkit-scrollbar{ display: none; }
.corpo-clinico__trilho.grade-scroll__trilho > .medico{
  scroll-snap-align: start;
  flex: 0 0 100%;
  width: 100%;
}

/* ---------------------------------------------------------------------
   FAQ — ACCORDION
--------------------------------------------------------------------- */
.faq-lista{ max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }

.faq-item{
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}

.faq-pergunta{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.8rem;
  text-align: left;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: 1rem;
  color: var(--azul-petroleo);
}

.faq-pergunta .icone-mais{
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
}
.faq-pergunta .icone-mais::before,
.faq-pergunta .icone-mais::after{
  content: '';
  position: absolute;
  background: var(--azul-institucional);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.faq-pergunta .icone-mais::before{ top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-pergunta .icone-mais::after{ left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }

.faq-item.ativo .icone-mais::after{ transform: rotate(90deg); opacity: 0; }

.faq-resposta{
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease);
}
.faq-resposta__conteudo{ padding: 0 1.8rem 1.6rem; color: var(--cinza-medio); font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   LOCALIZAÇÃO
--------------------------------------------------------------------- */
.localizacao__grade{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--raio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-elevada);
}

.localizacao__info{
  background: var(--azul-petroleo);
  color: var(--branco);
  padding: clamp(2.4rem, 5vw, 4rem);
}

.localizacao__item{
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
}
.localizacao__item svg{ width: 22px; height: 22px; color: var(--dourado-sutil); flex-shrink: 0; margin-top: 3px; }
.localizacao__item strong{ display: block; margin-bottom: 0.2rem; font-family: var(--fonte-display); font-size: 1.1rem; }
.localizacao__item span{ color: rgba(255,255,255,0.72); font-size: 0.92rem; }

.localizacao__botoes{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.localizacao__mapa{ min-height: 420px; position: relative; }
.localizacao__mapa iframe{ width: 100%; height: 100%; min-height: 420px; border: 0; filter: grayscale(0.15) contrast(1.05); }

/* ---------------------------------------------------------------------
   CONTATO
--------------------------------------------------------------------- */
.contato__grade{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.formulario{ display: flex; flex-direction: column; gap: 1.3rem; }

.campo{ display: flex; flex-direction: column; gap: 0.5rem; }
.campo label{ font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--azul-petroleo); text-transform: uppercase; }

.campo input,
.campo textarea{
  border: 1px solid var(--linha-sutil);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  background: var(--branco);
  color: var(--texto-principal);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.campo input:focus,
.campo textarea:focus{
  outline: none;
  border-color: var(--azul-institucional);
  box-shadow: 0 0 0 4px rgba(47,98,124,0.12);
}
.campo textarea{ resize: vertical; min-height: 130px; }

.formulario .btn{ align-self: flex-start; margin-top: 0.4rem; }

.contato__lateral{ display: flex; flex-direction: column; gap: 1.6rem; }

.contato__bloco{
  background: var(--cinza-claro);
  border-radius: var(--raio);
  padding: 1.6rem 1.8rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.contato__bloco svg{ width: 22px; height: 22px; color: var(--azul-institucional); flex-shrink: 0; margin-top: 2px; }
.contato__bloco strong{ display: block; font-family: var(--fonte-display); font-size: 1.05rem; margin-bottom: 0.2rem; }
.contato__bloco span, .contato__bloco a{ color: var(--cinza-medio); font-size: 0.9rem; }

.redes-sociais{ display: flex; gap: 0.8rem; }
.redes-sociais a{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--azul-petroleo);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.redes-sociais a:hover{ background: var(--azul-institucional); transform: translateY(-4px); }
.redes-sociais svg{ width: 18px; height: 18px; }

/* Mensagem de status do formulário */
.formulario__status{
  font-size: 0.88rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  display: none;
}
.formulario__status.visivel{ display: block; }
.formulario__status.sucesso{ background: rgba(47,98,124,0.1); color: var(--azul-institucional); }
.formulario__status.erro{ background: rgba(180,60,60,0.08); color: #a33; }

/* ---------------------------------------------------------------------
   GALERIA / CARROSSEL
--------------------------------------------------------------------- */
.carrossel{
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.carrossel__viewport{
  overflow: hidden;
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-elevada);
}

.carrossel__trilho{
  display: flex;
  transition: transform 0.7s var(--ease);
}

.carrossel__slide{
  min-width: 100%;
  position: relative;
  aspect-ratio: 16/9;
}
.carrossel__slide img{ width: 100%; height: 100%; object-fit: cover; }

.carrossel__legenda{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem;
  background: linear-gradient(0deg, rgba(15,44,56,0.75), transparent);
  color: var(--branco);
  font-family: var(--fonte-display);
  font-size: 1.2rem;
}

.carrossel__seta{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--branco);
  color: var(--azul-petroleo);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-card);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 5;
}
.carrossel__seta:hover{ background: var(--azul-petroleo); color: var(--branco); }
.carrossel__seta svg{ width: 20px; height: 20px; }
.carrossel__seta--esq{ left: -25px; }
.carrossel__seta--dir{ right: -25px; }

.carrossel__indicadores{
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.carrossel__ponto{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--linha-sutil);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.carrossel__ponto.ativo{ background: var(--azul-institucional); transform: scale(1.3); }

/* ---------------------------------------------------------------------
   CTA FINAL (HOME)
--------------------------------------------------------------------- */
.cta-final{
  position: relative;
  border-radius: var(--raio-grande);
  overflow: hidden;
  background: var(--azul-petroleo);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.6rem, 6vw, 4rem);
  text-align: center;
  color: var(--branco);
}
.cta-final .sunburst-decorativo{
  position: absolute;
  top: -30%;
  left: -10%;
  width: 480px;
  opacity: 0.08;
  animation: girar-lento 160s linear infinite reverse;
}
.cta-final h2{ color: var(--branco); margin-bottom: 1rem; }
.cta-final p{ color: rgba(255,255,255,0.72); max-width: 55ch; margin: 0 auto 2.2rem; }

/* ---------------------------------------------------------------------
   RODAPÉ
--------------------------------------------------------------------- */
.rodape{
  background: var(--azul-petroleo);
  color: rgba(255,255,255,0.75);
  padding: 4.5rem 0 0;
}

.rodape__grade{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.rodape__logo img{ height: 40px; margin-bottom: 1.2rem; }
.rodape__marca p{ color: rgba(255,255,255,0.6); font-size: 0.9rem; max-width: 32ch; }

.rodape h4{ color: var(--branco); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.3rem; font-family: var(--fonte-corpo); }

.rodape__lista{ display: flex; flex-direction: column; gap: 0.7rem; }
.rodape__lista a{ font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color var(--dur) var(--ease); }
.rodape__lista a:hover{ color: var(--branco); }

.rodape__base{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.rodape__base a{ color: rgba(255,255,255,0.5); }
.rodape__base a:hover{ color: var(--branco); }
.rodape__base-links{ display: flex; gap: 1.4rem; }

/* ---------------------------------------------------------------------
   BOTÃO FLUTUANTE WHATSAPP
--------------------------------------------------------------------- */
.whatsapp-flutuante{
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  z-index: 400;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.35);
}
.whatsapp-flutuante svg{ width: 28px; height: 28px; }
.whatsapp-flutuante::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulse-whatsapp 2.4s ease-out infinite;
  z-index: -1;
}

/* ---------------------------------------------------------------------
   CONTADORES (números institucionais, se usados)
--------------------------------------------------------------------- */
.contador{
  font-family: var(--fonte-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--azul-petroleo);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   UTILITÁRIOS DE ÍCONE SUNBURST (assinatura visual da marca)
--------------------------------------------------------------------- */
.sunburst-divisor{
  width: 46px;
  height: 46px;
  margin: 0 auto 1.6rem;
  color: var(--dourado-sutil);
  opacity: 0.85;
}