/* ==========================================================================
   LS LITORAL — IDENTIDADE INSTITUCIONAL DE ALTO LUXO (2026)
   Cores: Preto Obsidiana, Grafite, Azul Oceano, Azul Ciano, Prata e Branco.
   ========================================================================== */

:root {
  /* Cores Base Dark Luxe */
  --ls-black: #05080E;
  --ls-black-deep: #030509;
  --ls-obsidian: #080B10;
  --ls-graphite-dark: #0B0F17;
  --ls-graphite-card: rgba(11, 17, 28, 0.85);
  --ls-graphite-card-hover: rgba(15, 23, 38, 0.95);
  --ls-border-subtle: rgba(255, 255, 255, 0.08);
  --ls-border-active: rgba(56, 189, 248, 0.4);

  /* Acentos Oceano & Ciano */
  --ls-blue-deep: #0D2447;
  --ls-blue-ocean: #0284C7;
  --ls-blue-glow: #0EA5E9;
  --ls-blue-cyan: #38BDF8;
  --ls-blue-neon: #00F2FE;

  /* Metais e Prata */
  --ls-silver: #94A3B8;
  --ls-silver-bright: #E2E8F0;
  --ls-white: #FFFFFF;

  /* Tipografia */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Física do Movimento Suave e Elástica */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-lux);
  --transition-normal: 0.35s var(--ease-lux);
  --transition-slow: 0.6s var(--ease-lux);

  /* Sombras em Camadas e Luz Interna */
  --shadow-glass: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 20px 48px -12px rgba(0, 0, 0, 0.85);
  --shadow-glow-cyan: 0 0 35px -5px rgba(56, 189, 248, 0.25);
  --shadow-card-hover: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 24px 50px -10px rgba(2, 132, 199, 0.3);
}

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

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

body {
  font-family: var(--font-body);
  background-color: var(--ls-black);
  color: var(--ls-silver-bright);
  line-height: 1.65;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* Fundo Dinâmico do Site */
.bg-ocean-mesh {
  background: radial-gradient(circle at 10% 10%, rgba(2, 132, 199, 0.18) 0px, transparent 40%),
              radial-gradient(circle at 90% 20%, rgba(13, 36, 71, 0.35) 0px, transparent 45%),
              radial-gradient(circle at 50% 70%, rgba(2, 132, 199, 0.12) 0px, transparent 50%),
              radial-gradient(circle at 80% 90%, rgba(56, 189, 248, 0.15) 0px, transparent 40%),
              var(--ls-black);
  background-attachment: fixed;
}

/* Glassmorphism Dark Luxe */
.ls-glass {
  background: var(--ls-graphite-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ls-border-subtle);
  box-shadow: var(--shadow-glass);
  transition: all var(--transition-normal);
}

.ls-glass:hover {
  border-color: var(--ls-border-active);
  box-shadow: var(--shadow-glass), var(--shadow-glow-cyan);
}

/* Showcase Cards de Serviço (Preservam a Proporção 1:1 Nativa sem Cortes!) */
.service-showcase-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ls-graphite-card);
  border: 1px solid var(--ls-border-subtle);
  box-shadow: var(--shadow-glass);
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.service-showcase-card .img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #020408;
  overflow: hidden;
}

.service-showcase-card .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform var(--transition-slow);
}

.service-showcase-card:hover {
  transform: translateY(-6px);
  border-color: var(--ls-blue-cyan);
  box-shadow: var(--shadow-card-hover);
}

.service-showcase-card:hover .img-wrapper img {
  transform: scale(1.03);
}

/* Banners Panorâmicos de Alta Definição (Proporção 3:1 sem Deformar) */
.widescreen-banner-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: #020408;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.widescreen-banner-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.widescreen-banner-frame:hover img {
  transform: scale(1.02);
}

/* Botões de Ação de Elite */
.btn-ls-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #0284C7 0%, #0369A1 100%);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px -4px rgba(2, 132, 199, 0.5);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-ls-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #0EA5E9 0%, #0284C7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 30px -4px rgba(14, 165, 233, 0.7);
  color: #FFFFFF;
}

.btn-ls-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ls-silver-bright);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-ls-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-2px);
}

.btn-ls-whatsapp {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 24px -4px rgba(16, 185, 129, 0.5);
  color: #FFFFFF;
}

.btn-ls-whatsapp:hover {
  background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 30px -4px rgba(16, 185, 129, 0.7);
  color: #FFFFFF;
}

/* Modal Lightbox HD */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 5, 9, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox-modal.active {
  display: flex;
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Scrollbar Minimalista Escura */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #05080E;
}
::-webkit-scrollbar-thumb {
  background: #1A283D;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284C7;
}

/* Cards de servico: as fotos agora sao recortes largos (sem o texto cravado da
   peca original), entao a moldura quadrada esticava as mais panoramicas em ate
   1,6x. Em 16:10 elas entram praticamente no tamanho nativo.
   A secao Uniformes segue quadrada: la a arte e o proprio produto. */
/* Peca inteira, moldura do tamanho dela: as pecas sao 1254x1254 e a moldura
   e 1:1, entao entram exatas -- nenhum pixel cortado, nenhum zoom.
   Tentamos recortar so a foto (para tirar o logo cravado) e ficou pior:
   recorte largo em moldura quadrada ou ganha tarja preta (`contain`) ou corta
   a cabeca das pessoas (`cover`). O `contain` do CSS base ja resolve. */

/* ==== FUNDO: inicio do bloco gerado por ferramentas/gerar_fundo.py ==== */
/* Fundo do site: aurora oceanica + campo de LEDs.
   Gerado por ferramentas/gerar_fundo.py -- nao editar a mao, rode o script.
   Os pontos sao SVG em data: URI, entao nao ha requisicao nem arquivo extra. */

/* o mesh antigo (quatro gradientes parados) sai: quem pinta e a div */
.bg-ocean-mesh {
  background: var(--ls-black-deep);
}

.fundo-litoral {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(130% 85% at 50% -15%, #0B1A2E 0%, transparent 62%),
    linear-gradient(180deg, #061020 0%, #03070E 48%, #05080E 100%);
}

.fundo-litoral > span {
  position: absolute;
  display: block;
}

/* --- auroras: manchas grandes, ritmos desencontrados de proposito --- */
.fl-aurora-a,
.fl-aurora-b {
  inset: -25%;
  will-change: transform;
}

.fl-aurora-a {
  background:
    radial-gradient(38% 30% at 18% 22%, rgba(2, 132, 199, 0.52), transparent 70%),
    radial-gradient(30% 26% at 78% 16%, rgba(56, 189, 248, 0.34), transparent 72%),
    radial-gradient(48% 36% at 62% 82%, rgba(13, 36, 71, 0.75), transparent 70%);
  animation: fl-deriva-a 42s ease-in-out infinite alternate;
}

.fl-aurora-b {
  background:
    radial-gradient(34% 28% at 86% 60%, rgba(0, 242, 254, 0.26), transparent 72%),
    radial-gradient(44% 32% at 10% 76%, rgba(2, 132, 199, 0.32), transparent 72%);
  animation: fl-deriva-b 61s ease-in-out infinite alternate;
}

@keyframes fl-deriva-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1.04); }
  to   { transform: translate3d(4%, 3%, 0)   scale(1.15); }
}

@keyframes fl-deriva-b {
  from { transform: translate3d(3%, 2%, 0)   scale(1.13); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.02); }
}

/* --- LEDs: dois planos, o de perto maior e mais lento (paralaxe) --- */
.fl-leds-longe,
.fl-leds-perto {
  inset: -20%;
  will-change: transform, opacity;
}

.fl-leds-longe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cdefs%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23E8F7FF' stop-opacity='1'/%3E%3Cstop offset='.3' stop-color='%236FD6FF' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%2338BDF8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='168.4' cy='78.4' r='1.42' fill='url(%23b)' opacity='0.4'/%3E%3Ccircle cx='278.7' cy='190.2' r='0.76' fill='url(%23b)' opacity='0.68'/%3E%3Ccircle cx='19.5' cy='225.5' r='0.78' fill='url(%23b)' opacity='0.41'/%3E%3Ccircle cx='220.7' cy='430.0' r='0.84' fill='url(%23b)' opacity='0.5'/%3E%3Ccircle cx='326.3' cy='492.8' r='1.33' fill='url(%23b)' opacity='0.61'/%3E%3Ccircle cx='507.7' cy='24.2' r='1.64' fill='url(%23b)' opacity='0.54'/%3E%3Ccircle cx='75.0' cy='61.3' r='1.04' fill='url(%23b)' opacity='0.88'/%3E%3Ccircle cx='94.0' cy='302.4' r='1.4' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='284.8' cy='32.7' r='0.77' fill='url(%23b)' opacity='0.48'/%3E%3Ccircle cx='353.8' cy='222.3' r='1.05' fill='url(%23b)' opacity='0.73'/%3E%3Ccircle cx='235.7' cy='155.9' r='1.57' fill='url(%23b)' opacity='0.8'/%3E%3Ccircle cx='126.9' cy='298.7' r='1.28' fill='url(%23b)' opacity='0.92'/%3E%3Ccircle cx='379.3' cy='149.7' r='1.78' fill='url(%23b)' opacity='0.43'/%3E%3Ccircle cx='217.4' cy='393.7' r='0.87' fill='url(%23b)' opacity='0.67'/%3E%3Ccircle cx='20.4' cy='347.5' r='1.54' fill='url(%23b)' opacity='0.72'/%3E%3Ccircle cx='455.2' cy='163.1' r='1.46' fill='url(%23b)' opacity='0.74'/%3E%3Ccircle cx='301.5' cy='237.2' r='1.62' fill='url(%23b)' opacity='0.96'/%3E%3Ccircle cx='246.5' cy='345.4' r='0.77' fill='url(%23b)' opacity='0.81'/%3E%3Ccircle cx='336.5' cy='516.4' r='1.6' fill='url(%23b)' opacity='0.53'/%3E%3Ccircle cx='200.6' cy='347.7' r='0.72' fill='url(%23b)' opacity='0.65'/%3E%3Ccircle cx='87.4' cy='60.9' r='0.76' fill='url(%23b)' opacity='0.85'/%3E%3Ccircle cx='67.3' cy='128.8' r='1.13' fill='url(%23b)' opacity='0.92'/%3E%3Ccircle cx='41.9' cy='233.6' r='1.3' fill='url(%23b)' opacity='0.92'/%3E%3Ccircle cx='426.0' cy='449.3' r='1.01' fill='url(%23b)' opacity='0.62'/%3E%3Ccircle cx='186.6' cy='459.8' r='1.75' fill='url(%23b)' opacity='0.45'/%3E%3Ccircle cx='91.6' cy='120.6' r='0.96' fill='url(%23b)' opacity='0.67'/%3E%3Ccircle cx='306.3' cy='136.6' r='0.7' fill='url(%23b)' opacity='0.62'/%3E%3Ccircle cx='192.0' cy='294.5' r='1.75' fill='url(%23b)' opacity='0.8'/%3E%3Ccircle cx='268.1' cy='321.1' r='1.44' fill='url(%23b)' opacity='0.39'/%3E%3Ccircle cx='467.8' cy='405.6' r='1.66' fill='url(%23b)' opacity='0.87'/%3E%3Ccircle cx='204.0' cy='207.5' r='0.81' fill='url(%23b)' opacity='0.76'/%3E%3Ccircle cx='32.4' cy='35.0' r='0.93' fill='url(%23b)' opacity='0.46'/%3E%3Ccircle cx='176.8' cy='27.3' r='0.7' fill='url(%23b)' opacity='0.45'/%3E%3Ccircle cx='52.8' cy='189.1' r='0.73' fill='url(%23b)' opacity='0.92'/%3E%3Ccircle cx='319.3' cy='77.2' r='0.98' fill='url(%23b)' opacity='0.58'/%3E%3Ccircle cx='189.4' cy='63.9' r='1.63' fill='url(%23b)' opacity='1.0'/%3E%3Ccircle cx='242.3' cy='251.6' r='0.79' fill='url(%23b)' opacity='0.42'/%3E%3Ccircle cx='178.2' cy='137.7' r='1.61' fill='url(%23b)' opacity='0.45'/%3E%3Ccircle cx='12.0' cy='494.5' r='1.28' fill='url(%23b)' opacity='0.45'/%3E%3Ccircle cx='282.4' cy='14.1' r='1.28' fill='url(%23b)' opacity='0.99'/%3E%3Ccircle cx='448.9' cy='362.0' r='0.99' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='86.9' cy='401.4' r='1.29' fill='url(%23b)' opacity='0.86'/%3E%3Ccircle cx='171.4' cy='116.0' r='1.59' fill='url(%23b)' opacity='0.99'/%3E%3Ccircle cx='443.4' cy='419.2' r='1.6' fill='url(%23b)' opacity='0.83'/%3E%3Ccircle cx='117.9' cy='269.2' r='1.09' fill='url(%23b)' opacity='0.37'/%3E%3Ccircle cx='14.5' cy='145.3' r='0.99' fill='url(%23b)' opacity='0.8'/%3E%3Ccircle cx='497.4' cy='232.6' r='1.73' fill='url(%23b)' opacity='0.99'/%3E%3Ccircle cx='496.6' cy='189.6' r='0.94' fill='url(%23b)' opacity='0.5'/%3E%3Ccircle cx='102.3' cy='106.3' r='1.39' fill='url(%23b)' opacity='0.94'/%3E%3Ccircle cx='437.0' cy='249.3' r='1.42' fill='url(%23b)' opacity='0.87'/%3E%3Ccircle cx='44.1' cy='343.5' r='1.7' fill='url(%23b)' opacity='0.86'/%3E%3Ccircle cx='390.1' cy='248.6' r='0.9' fill='url(%23b)' opacity='0.86'/%3E%3Ccircle cx='172.9' cy='416.4' r='1.77' fill='url(%23b)' opacity='0.61'/%3E%3Ccircle cx='208.7' cy='492.3' r='1.5' fill='url(%23b)' opacity='0.46'/%3E%3Ccircle cx='66.1' cy='78.6' r='1.7' fill='url(%23b)' opacity='0.87'/%3E%3Ccircle cx='76.0' cy='429.8' r='1.78' fill='url(%23b)' opacity='0.78'/%3E%3Ccircle cx='182.2' cy='285.3' r='0.84' fill='url(%23b)' opacity='0.36'/%3E%3Ccircle cx='504.9' cy='337.8' r='1.28' fill='url(%23b)' opacity='0.96'/%3E%3Ccircle cx='225.6' cy='453.3' r='1.61' fill='url(%23b)' opacity='0.49'/%3E%3Ccircle cx='131.0' cy='152.3' r='0.96' fill='url(%23b)' opacity='0.73'/%3E%3Ccircle cx='134.9' cy='217.9' r='0.84' fill='url(%23b)' opacity='0.94'/%3E%3Ccircle cx='184.0' cy='238.2' r='1.34' fill='url(%23b)' opacity='0.94'/%3E%3Ccircle cx='218.7' cy='477.2' r='1.25' fill='url(%23b)' opacity='0.7'/%3E%3Ccircle cx='272.2' cy='9.7' r='1.18' fill='url(%23b)' opacity='0.47'/%3E%3Ccircle cx='2.0' cy='415.6' r='0.89' fill='url(%23b)' opacity='0.66'/%3E%3Ccircle cx='377.1' cy='289.4' r='1.06' fill='url(%23b)' opacity='0.69'/%3E%3Ccircle cx='288.8' cy='407.8' r='0.82' fill='url(%23b)' opacity='0.71'/%3E%3Ccircle cx='129.2' cy='144.0' r='1.55' fill='url(%23b)' opacity='0.68'/%3E%3Ccircle cx='292.1' cy='395.2' r='1.7' fill='url(%23b)' opacity='0.64'/%3E%3Ccircle cx='318.5' cy='262.9' r='1.26' fill='url(%23b)' opacity='0.8'/%3E%3C/svg%3E");
  background-size: 520px 520px;
  opacity: 0.55;
  animation: fl-leds-sobe 90s linear infinite,
             fl-pisca 7s ease-in-out infinite alternate;
}

.fl-leds-perto {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760'%3E%3Cdefs%3E%3CradialGradient id='b'%3E%3Cstop offset='0' stop-color='%23E8F7FF' stop-opacity='1'/%3E%3Cstop offset='.3' stop-color='%236FD6FF' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%2338BDF8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='125.4' cy='524.2' r='2.94' fill='url(%23b)' opacity='0.66'/%3E%3Ccircle cx='164.2' cy='602.4' r='3.25' fill='url(%23b)' opacity='0.68'/%3E%3Ccircle cx='383.9' cy='179.4' r='1.81' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='444.9' cy='52.6' r='3.23' fill='url(%23b)' opacity='0.5'/%3E%3Ccircle cx='176.8' cy='32.2' r='3.6' fill='url(%23b)' opacity='0.83'/%3E%3Ccircle cx='665.0' cy='468.1' r='1.86' fill='url(%23b)' opacity='0.56'/%3E%3Ccircle cx='378.1' cy='88.0' r='3.51' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='117.7' cy='621.3' r='2.02' fill='url(%23b)' opacity='0.95'/%3E%3Ccircle cx='344.4' cy='419.5' r='2.42' fill='url(%23b)' opacity='0.67'/%3E%3Ccircle cx='142.1' cy='28.2' r='3.36' fill='url(%23b)' opacity='0.5'/%3E%3Ccircle cx='593.0' cy='158.5' r='3.54' fill='url(%23b)' opacity='0.93'/%3E%3Ccircle cx='573.6' cy='579.7' r='2.85' fill='url(%23b)' opacity='0.82'/%3E%3Ccircle cx='93.1' cy='362.0' r='3.29' fill='url(%23b)' opacity='0.48'/%3E%3Ccircle cx='701.6' cy='674.5' r='2.54' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='343.0' cy='293.2' r='3.59' fill='url(%23b)' opacity='0.6'/%3E%3Ccircle cx='20.4' cy='70.9' r='3.09' fill='url(%23b)' opacity='1.0'/%3E%3Ccircle cx='377.0' cy='373.6' r='2.79' fill='url(%23b)' opacity='0.84'/%3E%3Ccircle cx='168.7' cy='462.8' r='2.8' fill='url(%23b)' opacity='0.75'/%3E%3Ccircle cx='137.3' cy='129.3' r='2.43' fill='url(%23b)' opacity='0.95'/%3E%3Ccircle cx='263.4' cy='453.9' r='2.35' fill='url(%23b)' opacity='0.42'/%3E%3Ccircle cx='49.9' cy='618.4' r='3.2' fill='url(%23b)' opacity='0.59'/%3E%3Ccircle cx='519.3' cy='513.7' r='3.42' fill='url(%23b)' opacity='0.97'/%3E%3Ccircle cx='309.3' cy='751.7' r='3.53' fill='url(%23b)' opacity='0.73'/%3E%3Ccircle cx='671.2' cy='373.1' r='2.48' fill='url(%23b)' opacity='0.51'/%3E%3Ccircle cx='665.9' cy='123.3' r='1.92' fill='url(%23b)' opacity='0.87'/%3E%3Ccircle cx='588.2' cy='367.2' r='3.31' fill='url(%23b)' opacity='0.38'/%3E%3Ccircle cx='196.1' cy='220.3' r='2.56' fill='url(%23b)' opacity='0.46'/%3E%3Ccircle cx='52.8' cy='256.9' r='3.42' fill='url(%23b)' opacity='0.99'/%3E%3Ccircle cx='566.8' cy='364.0' r='2.25' fill='url(%23b)' opacity='0.97'/%3E%3Ccircle cx='399.5' cy='553.7' r='1.85' fill='url(%23b)' opacity='0.49'/%3E%3Ccircle cx='637.1' cy='604.4' r='3.39' fill='url(%23b)' opacity='0.74'/%3E%3Ccircle cx='323.8' cy='441.7' r='3.33' fill='url(%23b)' opacity='0.55'/%3E%3Ccircle cx='406.1' cy='209.7' r='3.18' fill='url(%23b)' opacity='0.36'/%3E%3Ccircle cx='520.8' cy='725.0' r='1.84' fill='url(%23b)' opacity='0.74'/%3E%3C/svg%3E");
  background-size: 760px 760px;
  opacity: 0.75;
  animation: fl-leds-desce 130s linear infinite,
             fl-pisca 11s ease-in-out infinite alternate-reverse;
}

/* translada exatamente um ladrilho: o loop fecha sem salto */
@keyframes fl-leds-sobe {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-520px, -520px, 0); }
}

@keyframes fl-leds-desce {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(760px, -760px, 0); }
}

@keyframes fl-pisca {
  from { opacity: 0.42; }
  to   { opacity: 0.95; }
}

/* --- brilho que atravessa devagar, como luz na agua --- */
.fl-brilho {
  inset: -40% -60%;
  background: linear-gradient(100deg,
    transparent 40%,
    rgba(125, 211, 252, 0.09) 50%,
    transparent 60%);
  animation: fl-varredura 26s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes fl-varredura {
  from { transform: translate3d(-26%, 0, 0) rotate(4deg); }
  to   { transform: translate3d(26%, 0, 0)  rotate(4deg); }
}

/* --- grao fino: tira o aspecto de plastico chapado --- */
.fl-grao {
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23r)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* --- vinheta: joga o olho para o centro --- */
.fundo-litoral::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 90% at 50% 38%, transparent 45%, rgba(3, 5, 9, 0.72) 100%);
}

/* celular: corta as camadas mais caras e menos percebidas */
@media (max-width: 768px) {
  .fl-brilho { display: none; }
  .fl-leds-longe { display: none; }
}

/* quem pediu menos movimento no sistema recebe o fundo parado */
@media (prefers-reduced-motion: reduce) {
  .fl-aurora-a,
  .fl-aurora-b,
  .fl-leds-longe,
  .fl-leds-perto,
  .fl-brilho { animation: none; }
}
/* ==== FUNDO: fim do bloco gerado ==== */

/* ==========================================================================
   FOTOS DA EQUIPE (secao Uniformes)
   Cada foto fica na PROPORCAO NATIVA dela: a da equipe e 4:3, os retratos sao
   4:5. Por isso nao ha aspect-ratio fixo aqui e a altura e automatica -- assim
   nada e cortado e nao sobra tarja preta, que foi o problema quando tentamos
   encaixar foto em moldura de tamanho diferente.
   ========================================================================== */
.foto-equipe {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--ls-border-subtle);
  background: #020408;
  box-shadow: var(--shadow-glass);
  transition: transform var(--transition-normal), border-color var(--transition-normal);
}

.foto-equipe img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--transition-slow);
}

.foto-equipe:hover {
  transform: translateY(-4px);
  border-color: var(--ls-blue-cyan);
}

.foto-equipe:hover img {
  transform: scale(1.02);
}

/* a legenda entra por cima do rodape da foto, sobre um degrade que garante
   leitura sem precisar escurecer a imagem inteira */
.foto-equipe figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(3, 5, 9, 0.92) 0%, rgba(3, 5, 9, 0.6) 55%, transparent 100%);
}

@media (max-width: 640px) {
  .foto-equipe figcaption {
    padding: 1.5rem 1rem 1rem;
  }
}

/* ==========================================================================
   SELO "EMPRESA DO ANO"
   Dourado de proposito: o site inteiro e azul e prata, entao o premio so vira
   destaque se sair da paleta. Sem isso ele viraria mais um card azul no meio
   dos numeros e ninguem repararia.
   ========================================================================== */
.selo-premio {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  text-align: left;
  padding: 1.25rem 1.75rem;
  border-radius: 20px;
  color: #FCD34D;
  background:
    linear-gradient(120deg, rgba(252, 211, 77, 0.14) 0%, rgba(252, 211, 77, 0.04) 45%, rgba(2, 132, 199, 0.10) 100%),
    rgba(11, 17, 28, 0.75);
  border: 1px solid rgba(252, 211, 77, 0.38);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.14),
    0 18px 44px -16px rgba(252, 211, 77, 0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 640px) {
  .selo-premio {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
  }
}

/* ==========================================================================
   BOTAO FLUTUANTE DE WHATSAPP
   Mesmo padrao dos outros sites: redondo, anel pulsante e balao no hover.
   Verde do WhatsApp de proposito -- e o affordance que todo mundo reconhece;
   em azul viraria "mais um botao do site" e perderia o reflexo de clique.
   ========================================================================== */
.whatsapp-float-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 12px;
}

.whatsapp-tooltip {
  background: rgba(11, 17, 28, 0.92);
  color: #FFFFFF;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all var(--transition-normal);
  pointer-events: none;
}

.whatsapp-float-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  flex-shrink: 0;
}

.whatsapp-float-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0.8;
  animation: waPulse 2s infinite;
}

@keyframes waPulse {
  0%   { transform: scale(1);    opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}

.whatsapp-float-wrap:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.whatsapp-float-btn:hover {
  background: #1EBE5A;
  transform: scale(1.08);
}

.whatsapp-float-btn svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
}

@media (max-width: 640px) {
  .whatsapp-float-wrap { bottom: 20px; right: 20px; }
  .whatsapp-tooltip { display: none; }
  .whatsapp-float-btn { width: 56px; height: 56px; }
  .whatsapp-float-btn svg { width: 30px; height: 30px; }
}

/* o anel pulsante para para quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float-btn::before { animation: none; }
}