/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTES · botões, bordas vivas, cartões, marquee, mídia, acordeão
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   BOTÕES
   Ênfase permanente sem grito: (1) luz correndo pela borda em conic-gradient
   mascarado, (2) varredura diagonal lenta atravessando o rótulo.
   Ambas de baixa amplitude e ciclo longo — presentes, não protagonistas.
   ────────────────────────────────────────────────────────────────────── */

.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--t-pequeno);
  font-weight: 600;
  letter-spacing: .01em;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-expressiva),
              box-shadow var(--dur-base) var(--ease-saida),
              background-color var(--dur-base) var(--ease-saida),
              color var(--dur-base) var(--ease-saida),
              border-color var(--dur-base) var(--ease-saida);
}
.botao:active { transform: scale(.985); }
.botao__rotulo { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; }

.botao--grande   { padding: 19px 34px; font-size: .95rem; }
.botao--compacto { padding: 11px 20px; font-size: .8rem; }
.botao--bloco    { width: 100%; }

/* Primário — teal profundo com luz de borda ciano */
.botao--primario {
  background: linear-gradient(150deg, var(--teal-600), var(--teal-800) 62%, var(--teal-900));
  color: #F2FBFC;
  box-shadow: 0 14px 34px -18px rgba(17,107,124,.9), inset 0 1px 0 rgba(255,255,255,.10);
}
.botao--primario:hover {
  box-shadow: 0 22px 48px -20px rgba(41,182,209,.75), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-2px);
}

/* Claro — para faixas de alto contraste */
.botao--claro {
  background: var(--papel);
  color: var(--teal-900);
  box-shadow: 0 16px 40px -20px rgba(0,0,0,.55);
}
.botao--claro:hover { transform: translateY(-2px); background: #FFFFFF; }

/* Fantasma — contorno */
.botao--fantasma {
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  background: rgba(255,255,255,.02);
}
.botao--fantasma:hover {
  border-color: var(--ciano);
  color: var(--ciano);
  background: var(--ciano-fraco);
}

/* (1) Luz correndo pela borda — conic-gradient mascarado no anel de 1px */
.botao--primario::before,
.botao--claro::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angulo-borda),
              transparent 0deg,
              rgba(127,216,232,.05) 24deg,
              rgba(127,216,232,.85) 52deg,
              rgba(233,246,248,.95) 62deg,
              rgba(127,216,232,.7) 72deg,
              transparent 108deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: girar-borda 5.5s linear infinite;
  opacity: .9;
  pointer-events: none;
}
.botao--claro::before {
  background: conic-gradient(from var(--angulo-borda),
              transparent 0deg,
              rgba(17,107,124,.45) 50deg,
              rgba(41,182,209,.9) 62deg,
              transparent 100deg,
              transparent 360deg);
}

/* (2) Varredura diagonal — ciclo longo, opacidade baixa */
.botao__brilho {
  position: absolute; inset: -60% -20%;
  z-index: 1;
  background: linear-gradient(105deg,
              transparent 38%,
              rgba(255,255,255,.16) 47%,
              rgba(255,255,255,.30) 50%,
              rgba(255,255,255,.16) 53%,
              transparent 62%);
  transform: translateX(-120%) rotate(6deg);
  animation: varrer 6.5s var(--ease-saida) infinite;
  pointer-events: none;
}
.botao--claro .botao__brilho {
  background: linear-gradient(105deg, transparent 38%, rgba(17,107,124,.16) 50%, transparent 62%);
}
.botao:hover .botao__brilho { animation-duration: 2.2s; }

.botao-circular {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--texto-suave);
  transition: transform var(--dur-base) var(--ease-expressiva),
              border-color var(--dur-base) var(--ease-saida),
              color var(--dur-base) var(--ease-saida),
              background-color var(--dur-base) var(--ease-saida);
}
.botao-circular svg { width: 20px; height: 20px; }
.botao-circular:hover {
  border-color: var(--ciano); color: var(--ciano);
  background: var(--ciano-fraco);
  transform: scale(1.06);
}

/* ──────────────────────────────────────────────────────────────────────────
   BORDA VIVA — cartões em destaque
   Mesma técnica do botão, ciclo 2× mais lento e amplitude menor.
   ────────────────────────────────────────────────────────────────────── */

[data-borda-viva] { position: relative; isolation: isolate; }
[data-borda-viva]::before {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--angulo-borda),
              transparent 0deg,
              rgba(41,182,209,.0) 30deg,
              rgba(41,182,209,.55) 62deg,
              rgba(201,162,74,.55) 74deg,
              rgba(41,182,209,.35) 86deg,
              transparent 130deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: girar-borda 11s linear infinite;
  pointer-events: none;
}
[data-borda-viva]:hover::before { animation-duration: 5s; }

/* ──────────────────────────────────────────────────────────────────────────
   CARTÕES
   ────────────────────────────────────────────────────────────────────── */

.cartao {
  position: relative;
  padding: 32px;
  border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  background:
    linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 42%, transparent 78%),
    var(--superficie);
  overflow: hidden;
  transition: transform var(--dur-lenta) var(--ease-saida),
              border-color var(--dur-lenta) var(--ease-saida),
              background-color var(--dur-lenta) var(--ease-saida);
}
.cartao::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--rato-x, 50%) var(--rato-y, 0%),
              rgba(41,182,209,.13), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-lenta) var(--ease-saida);
  pointer-events: none;
}
.cartao:hover { transform: translateY(-4px); border-color: var(--linha-forte); }
.cartao:hover::after { opacity: 1; }

.cartao h3 {
  font-family: var(--fonte-display);
  font-size: var(--t-h3);
  line-height: 1.14;
  letter-spacing: -.015em;
  font-weight: 400;
  font-variation-settings: 'opsz' 40;
  margin-bottom: 12px;
}
.cartao p { color: var(--texto-suave); font-size: var(--t-pequeno); line-height: 1.62; }

.cartao__indice {
  display: block;
  font-family: var(--fonte-display);
  font-size: .95rem;
  color: var(--ciano);
  letter-spacing: .12em;
  margin-bottom: 26px;
  opacity: .8;
}

.cartao__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: 24px;
  border-radius: 14px;
  border: 1px solid var(--linha-forte);
  background: var(--ciano-fraco);
  color: var(--ciano);
}
.cartao__icone svg { width: 26px; height: 26px; }

.cartao--dor { padding: 30px 30px 34px; }

.cartao--servico {
  padding: 30px;
  background: var(--superficie);
  border-color: var(--linha);
}

.cartao--caso {
  width: min(78vw, 400px);
  flex: none;
  padding: 30px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(168deg, rgba(255,255,255,.05), transparent 60%), var(--superficie);
}
.cartao--caso__etiqueta {
  font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro);
  margin-bottom: 4px;
}
.cartao--caso h3 { font-size: 1.22rem; margin-bottom: 6px; }

/* ──────────────────────────────────────────────────────────────────────────
   VIDRO — fallback obrigatório
   Três camadas fazem vidro: cor de base translúcida que já segura a leitura
   sozinha, backdrop-filter que traz a cor de trás para dentro do painel, e
   uma alta-luz de 1px no topo simulando a quina.
   Sem backdrop-filter, o painel vira sólido — texto translúcido sobre foto
   é ilegível, e isso não é degradação aceitável.
   ────────────────────────────────────────────────────────────────────── */

.mapa button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cartao-flutuante { background: #0B2A32; }
  .cabecalho.esta-colado { background: #061A1F; }
  .menu-mobile { background: #051419; }
  .mapa button { background: #0A2128; }
  .media.esta-vazia::after { background: rgba(5,22,26,.86); }
}

/* ──────────────────────────────────────────────────────────────────────────
   MÍDIA — molduras com placeholder elegante enquanto a imagem não existe
   ────────────────────────────────────────────────────────────────────── */

.media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio-g);
  background:
    linear-gradient(150deg, rgba(17,107,124,.24), rgba(5,22,26,.9)),
    var(--superficie-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; }

.media--retrato      { aspect-ratio: 4 / 5;  border-radius: var(--raio-xg); background: none; }
.media--retrato-alto { aspect-ratio: 4 / 5; }
.media--quadrada     { aspect-ratio: 1 / 1; }
.media--4x5          { aspect-ratio: 4 / 5; }
.media--4x3          { aspect-ratio: 4 / 3; }
.media--3x2          { aspect-ratio: 3 / 2; }
.media--16x10        { aspect-ratio: 16 / 10; }
.media--9x16         { aspect-ratio: 9 / 16; }

/* Estado "imagem ainda não gerada": placeholder assinado com o ID do asset */
.media.esta-vazia img { opacity: 0; }
.media.esta-vazia::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
    radial-gradient(120% 90% at 30% 10%, rgba(41,182,209,.18), transparent 62%);
}
.media.esta-vazia::after {
  content: attr(data-media);
  position: absolute; inset: auto 16px 16px 16px;
  font-family: var(--fonte-texto);
  font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(233,246,248,.62);
  padding: 8px 12px;
  border: 1px dashed rgba(233,246,248,.28);
  border-radius: var(--raio-p);
  text-align: center;
  backdrop-filter: blur(4px);
}

/* ──────────────────────────────────────────────────────────────────────────
   MARQUEE — rolagem contínua + arraste (pointer events, mouse e toque)
   ────────────────────────────────────────────────────────────────────── */

.marquee {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.marquee.esta-arrastando { cursor: grabbing; }
.marquee__pista {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__grupo { display: flex; align-items: stretch; flex: none; }
.marquee__grupo > li { flex: none; }

.marquee__vinheta {
  position: absolute; top: 0; bottom: 0; width: clamp(48px, 8vw, 140px);
  pointer-events: none; z-index: 2;
}
.marquee__vinheta--esq { left: 0;  background: linear-gradient(90deg, var(--tinta), transparent); }
.marquee__vinheta--dir { right: 0; background: linear-gradient(270deg, var(--tinta), transparent); }

/* Faixa de credibilidade */
.faixa-credibilidade .marquee__grupo { gap: 0; }
.faixa-credibilidade .marquee__grupo li {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 0 26px;
  font-size: var(--t-pequeno);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto-suave);
  white-space: nowrap;
}
.faixa-credibilidade .marquee__grupo li::after {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ciano); opacity: .55;
}

/* Marquee de cartões */
.marquee--cartoes .marquee__grupo { gap: 20px; padding-right: 20px; }

/* Sangra: o marquee escapa do container e vai até a borda da tela, mas o
   primeiro cartão nasce alinhado à coluna de texto. É o que separa
   "carrossel dentro de uma caixa" de "faixa que atravessa a página". */
.marquee--sangra {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(var(--respiro), calc(50vw - var(--largura-max) / 2));
}

/* ──────────────────────────────────────────────────────────────────────────
   CARTÃO DE MÍDIA (Reels, vídeos, depoimentos)
   ────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   CHIPS / FILTROS
   ────────────────────────────────────────────────────────────────────── */

.chip {
  padding: 10px 18px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--linha);
  font-size: var(--t-pequeno); font-weight: 500;
  color: var(--texto-suave);
  transition: color var(--dur-base) var(--ease-saida),
              border-color var(--dur-base) var(--ease-saida),
              background-color var(--dur-base) var(--ease-saida);
}
.chip:hover { color: var(--texto); border-color: var(--linha-forte); }
.chip.is-ativo {
  color: #04171B;
  background: var(--ciano);
  border-color: transparent;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
   ACORDEÃO
   ────────────────────────────────────────────────────────────────────── */

.acordeao { display: grid; }
.acordeao__item { border-bottom: 1px solid var(--linha); }
.acordeao__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 0;
  font-family: var(--fonte-display);
  font-size: clamp(1.05rem, .95rem + .5vw, 1.32rem);
  font-weight: 400;
  letter-spacing: -.01em;
  font-variation-settings: 'opsz' 40;
  list-style: none;
  transition: color var(--dur-base) var(--ease-saida);
}
.acordeao__item summary:hover { color: var(--ciano); }
.acordeao__item summary i {
  position: relative; flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--linha-forte);
  transition: transform var(--dur-lenta) var(--ease-expressiva), border-color var(--dur-base) var(--ease-saida);
}
.acordeao__item summary i::before,
.acordeao__item summary i::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-lenta) var(--ease-expressiva), opacity var(--dur-base) linear;
}
.acordeao__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.acordeao__item[open] summary { color: var(--ciano); }
.acordeao__item[open] summary i { transform: rotate(180deg); border-color: var(--ciano); }
.acordeao__item[open] summary i::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.acordeao__corpo {
  overflow: hidden;
  padding-bottom: 26px;
  color: var(--texto-suave);
  max-width: 62ch;
}
.acordeao__item[open] .acordeao__corpo { animation: abrir-corpo var(--dur-lenta) var(--ease-saida); }

/* ──────────────────────────────────────────────────────────────────────────
   MAPA — carrega o iframe só no clique (privacidade + performance)
   ────────────────────────────────────────────────────────────────────── */

.mapa {
  position: relative;
  margin-top: 40px;
  border-radius: var(--raio-g);
  border: 1px solid var(--linha);
  overflow: hidden;
  background: var(--superficie);
}

.mapa__abas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--linha);
}
.mapa__externo { margin-left: auto; }

.mapa__palco {
  position: relative;
  min-height: 380px;
  display: grid; place-items: center; align-content: center; gap: 12px;
  padding: 24px;
  text-align: center;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 44px),
    radial-gradient(80% 120% at 50% 0%, rgba(17,107,124,.22), transparent 70%);
}
.mapa__palco > button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--linha-forte);
  background: rgba(5,22,26,.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: var(--t-pequeno); font-weight: 600;
  transition: border-color var(--dur-base) var(--ease-saida), color var(--dur-base) var(--ease-saida);
}
.mapa__palco > button:hover { border-color: var(--ciano); color: var(--ciano); }
.mapa__nota { font-size: var(--t-micro); color: var(--texto-fraco); max-width: 46ch; }

.mapa iframe { width: 100%; height: 440px; border: 0; display: block; }
.mapa.esta-carregado .mapa__palco {
  display: block; min-height: 0; padding: 0; background: none;
}
.mapa.esta-carregado .mapa__palco > button,
.mapa.esta-carregado .mapa__nota { display: none; }

@media (max-width: 560px) {
  .mapa__externo { margin-left: 0; }
  .mapa iframe { height: 340px; }
  .mapa__palco { min-height: 300px; }
}