.elementor-287 .elementor-element.elementor-element-4ee8a9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-287 .elementor-element.elementor-element-ae85169{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-287 .elementor-element.elementor-element-466464e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-287 .elementor-element.elementor-element-e4b9973{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-9f06425 *//* ================================
   RODAPÉ CRISTIANE TOLEDO – CINEMÁTICO
================================ */

.ct-footer {
  position: relative;
  padding: 80px 20px 40px;
  background: linear-gradient(180deg, #0f2d29 0%, #0a1e1b 100%);
  overflow: hidden;
  color: #e8fff9;
}

/* Partículas */
.ct-footer-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(130,255,240,0.45);
  border-radius: 50%;
  filter: blur(2px);
  animation: ctParticles 12s infinite linear;
}

@keyframes ctParticles {
  0% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-40px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.4; }
}

/* Conteúdo do Rodapé */
.ct-footer-content {
  max-width: 1300px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  position: relative;
  z-index: 2;
}

/* Logo */
.ct-footer-logo {
  width: 240px;
  filter: drop-shadow(0 0 12px rgba(140,255,240,0.4));
}

/* Descrição */
.ct-footer-desc {
  margin-top: 20px;
  font-size: 1rem;
  opacity: 0.7;
  line-height: 1.6;
}

/* Títulos */
.ct-footer-col h4 {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  color: #93f7e6;
  margin-bottom: 18px;
  position: relative;
}

/* Lista */
.ct-footer-col ul {
  list-style: none;
  padding: 0;
}

.ct-footer-col ul li {
  margin-bottom: 10px;
}

.ct-footer-col a {
  color: #e8fff9;
  text-decoration: none;
  transition: .3s;
}

.ct-footer-col a:hover {
  color: #93f7e6;
  text-shadow: 0 0 6px #93f7e6;
}

/* Redes Sociais */
.ct-footer-social {
  margin-top: 20px;
}

.ct-footer-social .social-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #93f7e6;
  font-size: 1.2rem;
  transition: .3s ease;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(130,255,240,0.4);
}

.ct-footer-social .social-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 0 15px rgba(130,255,240,0.6);
}

/* Linha final */
.ct-footer-bottom {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid rgba(130,255,240,0.25);
  opacity: 0.7;
  font-size: .9rem;
}

/* Borda energética ao redor do rodapé */
.ct-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(130,255,240,0.3);
  border-radius: 6px;
  pointer-events: none;
  animation: ctBorderGlow 6s infinite ease-in-out;
}

@keyframes ctBorderGlow {
  0% { box-shadow: 0 0 0px rgba(130,255,240,0.3); }
  50% { box-shadow: 0 0 22px rgba(130,255,240,0.55); }
  100% { box-shadow: 0 0 0px rgba(130,255,240,0.3); }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d94f53b *//* ================================
   CONTAINER FIXO
================================ */
.btn-topo-container {
  position: fixed;
  bottom: 32px;
  right: 100px;
  z-index: 9999;
}

/* ================================
   BOTÃO GLASS + GLOW + ANIMAÇÃO
================================ */
.btn-topo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  backdrop-filter: blur(12px) saturate(160%);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 6px 26px rgba(0,0,0,0.28),
    0 0 22px rgba(118,230,200,0.45);
  
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  
  position: relative;
  overflow: visible;

  transition: opacity .35s ease, transform .35s ease;
  opacity: 0;
  pointer-events: none;
}

/* ESTADO VISÍVEL */
.btn-topo.mostrar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* hover — leve elevação + glow */
.btn-topo:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.22),
    0 0 32px rgba(118,230,200,0.85);
}

/* ================================
   SETA MINIMALISTA
================================ */
.seta {
  position: relative;
  z-index: 3;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f3b34;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
  pointer-events: none;
}

/* ================================
   CÍRCULOS SVG
================================ */
.progresso-circulo {
  position: absolute;
  top: 0;
  left: 0;
}

.trilha {
  fill: none;
  stroke: rgba(255,255,255,0.35);
  stroke-width: 5;
}

.progresso {
  fill: none;
  stroke: #1a6f5b;
  stroke-width: 5;
  stroke-dasharray: 175.8;
  stroke-dashoffset: 175.8;
  transition: stroke-dashoffset .25s linear;
}

/* ================================
   PARTÍCULAS AO REDOR DO BOTÃO
================================ */
.btn-topo::before,
.btn-topo::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: -20px;
  background:
    radial-gradient(circle at 30% 30%, rgba(118,230,200,0.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.18), transparent 60%);
  mix-blend-mode: soft-light;
  animation: particulasTopo 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes particulasTopo {
  0% { transform: scale(1) translateY(0); opacity: .55; }
  50% { transform: scale(1.08) translateY(-4px); opacity: .9; }
  100% { transform: scale(1) translateY(0); opacity: .55; }
}
.icone-seta {
  position: relative;
  z-index: 3;
  color: #0f3b34; /* Verde profundo do site */
  width: 26px;
  height: 26px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.75));
  transition: transform .3s ease;
}

/* Ao passar o mouse a seta sobe levemente */
.btn-topo:hover .icone-seta {
  transform: translateY(-3px);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0579e12 *//* ============================================================
   WHATSAPP FLOAT BUTTON — efeito água
   ============================================================ */
.botao-chat-icone {
  position: fixed;
  bottom: 30px;
  right: 25px;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #76e6c8 40%, #22c495 100%);
  box-shadow: 0 0 15px rgba(118,230,200,0.45), 
              0 0 35px rgba(34,196,149,0.35),
              0 12px 28px rgba(0,0,0,0.25);

  animation: ondaAgua 4.5s ease-in-out infinite;
  transition: transform .25s ease;
}

@keyframes ondaAgua {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-4px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}

.botao-chat-icone:hover {
  transform: scale(1.12) translateY(-2px);
}

/* ============================================================
   CHAT GLASSMORPHISM
   ============================================================ */
.chatbot-falso {
  display: none;
  position: fixed;
  bottom: 110px;
  right: 25px;
  width: 300px;

  background: rgba(255,255,255,0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1.5px solid rgba(118,230,200,0.55);
  border-radius: 18px;
  box-shadow: 0 12px 45px rgba(0,0,0,0.22);

  animation: abrirChat .45s ease;
  z-index: 9999;
}

@keyframes abrirChat {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HEADER GLASS + ESMERALDA
   ============================================================ */
.chat-header {
  background: linear-gradient(135deg, #b8fff0 0%, #76e6c8 45%, #22c495 100%);
  color: #ffffff;
  padding: 12px 14px;
  font-weight: 600;
  border-radius: 18px 18px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ============================================================
   MENSAGEM
   ============================================================ */
.chat-mensagem {
  padding: 18px;
  color: #203331;
  font-size: .95rem;
}

/* digitando */
.digitando {
  color: #22c495;
  margin-bottom: 12px;
}

.digitando span {
  animation: bounce 1.3s infinite alternate;
}

@keyframes bounce {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

/* ============================================================
   INPUT + BOTÃO ENVIAR
   ============================================================ */
.chat-input {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

.chat-input input {
  flex: 1;
  padding: 8px 12px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.55);
  font-size: .9rem;
}

/* BOTÃO ✈ PREMIUM */
.botao-enviar {
  background: linear-gradient(135deg, #22c495, #178a67);
  color: white !important;
  padding: 9px 20px;
  border-radius: 22px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  transition: .25s ease;
}

.botao-enviar:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(135deg, #2fe0ad, #1fa27b);
}

/* AVIÃO DISPARA */
.aviao-dispara .icone-aviao {
  animation: aviaoVoando .6s ease-out forwards;
}

@keyframes aviaoVoando {
  0%   { transform: translateX(0) rotate(0deg); }
  40%  { transform: translateX(18px) rotate(18deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Brilho ao enviar */
.botao-brilho::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.6), transparent 70%);
  animation: brilhoEnvio .6s ease-out forwards;
}

@keyframes brilhoEnvio {
  0% { opacity: 0; transform: scale(.5); }
  50% { opacity: .7; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Botão WhatsApp dentro do chat */
.botao-chat-falso {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #76e6c8, #22c495);
  color: white;
  text-decoration: none;
}

.botao-chat-falso:hover {
  background: #25D366;
}/* End custom CSS */