/* white you custom css code here. only css code will work */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sora:wght@100..800&display=swap');


/* COLOR SYSTEM */
:root {

    /* ========= BRAND ========= */

    --color-primary: #3182CE;
    --color-primary-light: #6AC6EE;
    --color-primary-dark: #1F6FB8;

    /* ========= GRADIENTS ========= */

    --gradient-primary: linear-gradient(
        90deg,
        #6AC6EE 0%,
        #0097DA 100%
    );

    --gradient-primary-hover: linear-gradient(
        90deg,
        #57BEE9 0%,
        #008DCC 100%
    );

    /* ========= BACKGROUNDS ========= */

    /* Fundo principal do site */
    --bg-body: #F8FBFE;

    /* Seções brancas */
    --bg-white: #FFFFFF;

    /* Fundo azul escuro */
    --bg-dark: #0D3156;

    /* ========= TEXT ========= */

    --text-title: #111111;
    --text-body: #4F5B66;
    --text-light: #6F7A85;
    --text-white: #FFFFFF;
    --text-muted: #6b7a8d;

    /* ========= BORDERS ========= */

    --border-color: #DDEAF5;
    --border-light: #EEF5FB;

    /* ========= STATES ========= */

    --success: #27AE60;
    --warning: #F2C94C;
    --danger: #EB5757;

    /* ========= SHADOWS ========= */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .08);
    --shadow-lg: 0 20px 60px rgba(49, 130, 206, .12);

}

/* ============================================================
   MAPA DE ANIMAÇÕES — sistema reutilizável baseado em atributos
   ============================================================
 
   Como usar no HTML:
 
   <div data-animate="fade-in">Aparece</div>
   <div data-animate="from-left">Vem da esquerda</div>
   <div data-animate="from-right">Vem da direita</div>
   <div data-animate="from-bottom">Vem de baixo</div>
 
   Delay (em ms):
   <div data-animate="from-left" data-delay="200">...</div>
 
   Duração customizada (em ms):
   <div data-animate="fade-in" data-duration="1000">...</div>
 
   Stagger automático nos filhos diretos (cada filho recebe um
   delay crescente, útil pra listas/cards):
   <div data-animate="from-bottom" data-stagger="100">
     <div>item 1</div>
     <div>item 2</div>
     <div>item 3</div>
   </div>
 
   O JS (animations.js) cuida de detectar quando o elemento entra
   na tela e adiciona a classe "is-visible".
   ============================================================ */
 
:root {
  --animate-duration: 700ms;
  --animate-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --animate-distance: 40px;
}
 
/* Estado inicial (escondido) de qualquer elemento com data-animate */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--animate-duration);
  transition-timing-function: var(--animate-easing);
  will-change: opacity, transform;
}
 
/* Variações de entrada */
[data-animate="fade-in"] {
  transform: none;
}
 
[data-animate="from-left"] {
  transform: translateX(calc(var(--animate-distance) * -1));
}
 
[data-animate="from-right"] {
  transform: translateX(var(--animate-distance));
}
 
[data-animate="from-bottom"] {
  transform: translateY(var(--animate-distance));
}
 
[data-animate="from-top"] {
  transform: translateY(calc(var(--animate-distance) * -1));
}
 
[data-animate="scale-in"] {
  transform: scale(0.92);
}
 
/* Estado final — visível, quando o JS marca com is-visible */
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}
 
/* Respeita usuários que pedem menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

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

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


body {
    font-family: "Inter", sans-serif !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    background: var(--bg-body);
    color: var(--text-body) !important;
}

a {
    text-decoration: none !important;
}

ul,
ol {
    list-style: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:"Sora", sans-serif !important;
}

/* HEADER */

.header-style-01 {
    z-index: 99 !important;
}
.navbar-nav li a i {
  display: none;
}
.navbar-nav li a {
  font-size: 1.1em;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  padding-inline: 10px;
}

@media (max-width:992px) {
.navbar-area .nav-container .responsive-mobile-menu .navbar-toggler {
  background-color: var(--color-primary);
}

.navbar-area.nav-style-01 .nav-container .navbar-collapse .navbar-nav li a{
  color: #fff !important;
}
.navbar-area.nav-style-01 .nav-container .navbar-collapse {
  background-color: var(--color-primary-dark);
  border-radius: 10px;
}
}

.top-bar-right {
    display: flex;
    padding: 10px;
}
.top-bar-right-item {
    display: flex;
    align-items: center;
}
.top-bar-right-item:first-child {
    margin-right: 20px;
}
.top-bar-right-item a {
    font-size: 14px;
    
}
.top-bar-right-item:last-child a {
    text-decoration: underline !important;
}
.top-bar-right-item svg {
    margin-right: 5px;
}
 

@media (max-width:766px) {
    .top-bar-area {
        display: none;
    }
}





/* Container dos botões */
.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* Wrapper individual — evita que overflow do pai corte o hover */
.btn-wrap {
  display: inline-flex;
  padding: 4px; /* espaço pra o translateY não ser cortado */
}

/* Base compartilhada dos botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;       /* aumentado */
  border-radius: 50px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 18px;           /* aumentado */
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
  will-change: transform;    /* resolve o bug do picotar */
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(0);
}

/* Primário */
.btn-primary {
  background-color: #1E9FDB;
  color: #ffffff;
  border-color: #1E9FDB;
}

.btn-primary:hover {
  background-color: #1a8fc7;
  border-color: #1a8fc7;
}

.btn-primary:active {
  box-shadow: 0 2px 8px rgba(30, 159, 219, 0.25);
}

/* Secundário */
.btn-secondary {
  background-color: transparent;
  color: #0d1b2a;
  border-color: #d0d5dd;
}

.btn-secondary:hover {
  border-color: #1E9FDB;
  color: #1E9FDB;
  box-shadow: 0 4px 14px rgba(30, 159, 219, 0.12);
  background-color: transparent !important;
}

.btn-secondary:active {
  border-color: #1780b4;
  color: #1780b4;
}

/* Seta do botão secundário */
.btn-secondary svg {
  flex-shrink: 0;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-secondary:hover svg {
  transform: translateX(2px);
}

/* Mobile */
@media (max-width: 767px) {
  .btn {
    padding: 14px 26px;
    font-size: 15px;
  }

  .btn:hover {
    transform: none;
  }
}

    /* ===============================
       HERO SECTION
    ================================ */
    .hero {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-color: #eaf5fc;
    }

    /*
      Imagem de fundo — substitua o src pela imagem real.
      height: 100% faz ela sempre preencher a altura da seção.
      width: auto mantém a proporção original sem distorcer.
      Ancorada no topo direito: em telas menores corta pelo lado
      esquerdo (fundo neutro), preservando o ar-condicionado.
    */
    .hero__bg {
      position: absolute;
      top: 0;
      right: 0;
      width: auto;
      height: 100%;
      max-width: none;
      z-index: 0;
    }

    /* Degradê branco da esquerda cobrindo o conteúdo */
    .hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 38%,
        rgba(255, 255, 255, 0.88) 52%,
        rgba(255, 255, 255, 0.40) 68%,
        rgba(255, 255, 255, 0.00) 80%
      );
    }

    /* Wrapper do conteúdo */
    .hero__container {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      padding: 170px 0 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 620px;
    }

    .hero__content {
      max-width: 720px;
    }
  

    /* Eyebrow */
    .hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 10px;
    }

    .hero__eyebrow-icon {
      font-size: 16px;
    }

    /* Título */
    .hero__title {
      font-family: var(--font-title);
      font-size: clamp(34px, 4vw, 52px);
      font-weight: 800;
      line-height: 1.12;
      color: var(--text-dark);
      margin-bottom: 20px;
    }

    .hero__title-highlight {
      color: var(--color-primary);
    }

    /* Parágrafo */
    .hero__desc {
      font-family: var(--font-body);
      font-size: 20px;
      line-height: 1.65;
      color: var(--text-body);
      margin-bottom: 36px;
      max-width: 550px;
    }

    /* Botões */
    .hero__actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 48px;
    }

    /* Badges inferiores */
    .hero__badges {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .hero__badge {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 20px 30px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(30, 159, 219, 0.15);
      border-radius: 0;
    }

    .hero__badge:first-child {
      border-radius: 16px 0 0 16px;
    }

    .hero__badge:last-child {
      border-radius: 0 16px 16px 0;
    }

    /* Separador entre badges */
    .hero__badge + .hero__badge {
      border-left: none;
    }

    .hero__badge-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e0f4fd, #c8ecfa);
      flex-shrink: 0;
    }

    .hero__badge-icon svg {
      width: 30px;
      height: 30px;
      fill: var(--color-primary);
    }

    .hero__badge-text {
      display: flex;
      flex-direction: column;
    }

    .hero__badge-label {
      font-family: var(--font-title);
      font-size: 18px;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.2;
      text-align: start;
    }

    .hero__badge-sub {
      font-family: var(--font-body);
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.3;
    }

    

    /* ===============================
       RESPONSIVE
    ================================ */
    @media (max-width: 900px) {
      .hero__overlay {
        background: linear-gradient(
          to right,
          #ffffff 0%,
          #ffffff 55%,
          rgba(255, 255, 255, 0.70) 72%,
          rgba(255, 255, 255, 0.10) 100%
        );
      }
      .hero__title {
        font-size: 2.7em;
      }
      
      .hero__badge-icon {
        width:40px;
        height: 40px;
      }
      .hero__badge-icon svg {
        width:25px;
        height:25px ;
      }
      .hero__badge-label {
        font-size: 16px;
      }
      .hero__badge-sub {
        font-size: 13px;
      }
    }

    @media (max-width: 767px) {
      .hero {
        min-height: auto;
      }

      /* Em mobile: vira cover centralizado com baixa opacidade
         pra não competir com o texto */
      .hero__bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: right;
        opacity: 0.80;
      }

      .hero__overlay {
        background: linear-gradient(to bottom, #ffffff 0%, #ffffff 38%, rgba(255, 255, 255, 0.88) 52%, rgba(255, 255, 255, 0.40) 68%, rgba(255, 255, 255, 0.00) 80%);
      }

      .hero__container {
        min-height: auto;
      }

      .hero__content {
        max-width: 100%;
      }

      .hero__title {
        font-size: 2.5em;
      }

      .hero__desc {
        max-width: 520px;
        
      }
      .hero__badge-label {
        font-size: 12px;
      }
      .hero__badge-sub {
        font-size: 10px;
      }
      .hero__badge {
        padding: 10px 20px;
      }

      

      /* Sem hover em mobile */
      .btn:hover { transform: none; }
    }
    @media (max-width:500px) {
      .hero__actions {
        flex-direction: column;
        align-items: center;
      }
      .hero__title {
        font-size: 2em;
      }
       .hero__title br {
        display: none;
       }
       .hero__content {
        text-align: center;
       }
       .hero__badges {
        flex-direction: column;
        align-items:normal;
       }
       .hero__badge:first-child {
        border-radius: 16px 16px 0 0 ;
      }
      .hero__badge:last-child {
        border-radius: 0 0 16px 16px;
      }
      .hero__badge-label {
        font-size: 16px;
      }
      .hero__badge-sub {
        font-size: 14px;
      }
      .hero__desc {
        font-size: 1em;
        margin-bottom: 30px;
      }
      .hero__actions {
        margin-bottom: 30px;
      }
      .hero__eyebrow {
        font-size: 14px;
        text-align: start;
      }
      .hero__eyebrow-icon img {
        width: 30px;
        height: 30px;
      }
    }
    

/* ========================
   ABOUT / A EMPRESA SECTION
========================== */

.about {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  padding: 100px 0;
}

/* ----- Flocos de neve caindo no fundo ----- */

.about__snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.snowflake {
  position: absolute;
  top: -10%;
  opacity: 0.18;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

/* Delays NEGATIVOS: cada floco já nasce "no meio" do próprio ciclo
   de queda, então na primeira renderização já estão todos caindo
   em pontos diferentes — sem aquele efeito de "parado e depois some". */

.snowflake--1 { left: 4%;  width: 70px;  animation-duration: 22s; animation-delay: -3s;  }
.snowflake--2 { left: 16%; width: 100px; animation-duration: 28s; animation-delay: -14s; }
.snowflake--3 { left: 30%; width: 55px;  animation-duration: 18s; animation-delay: -8s;  }
.snowflake--4 { left: 66%; width: 90px;  animation-duration: 25s; animation-delay: -2s;  }
.snowflake--5 { left: 80%; width: 60px;  animation-duration: 20s; animation-delay: -11s; }
.snowflake--6 { left: 90%; width: 110px; animation-duration: 30s; animation-delay: -19s; }

@keyframes snow-fall {
  0% {
    transform: translate(0, -10%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.18;
  }
  90% {
    opacity: 0.18;
  }
  100% {
    transform: translate(24px, 110vh) rotate(20deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snowflake {
    animation: none;
    opacity: 0.12;
    top: 10%;
  }
}

/* ----- Grid principal ----- */

.about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* ----- Foto + moldura ----- */

.about__media {
  position: relative;
}

.about__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

.about__frame {
  position: absolute;
  left: -32px;
  bottom: -32px;
  width: 110px;
  height: 110px;
}

/* ----- Conteúdo textual ----- */

.about__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.about__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.about__eyebrow-icon img {
  width: 100%;
  height: 100%;
}

.about__title {
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 20px;
}

.about__title-highlight {
  display: block;
  color: var(--color-primary);
}

.about__desc {
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 16px;
}

.about__desc:last-of-type {
  margin-bottom: 32px;
}

/* ----- Card final ----- */

.about__card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 28px 32px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
}

/* Flocos grandes tipo "marca d'água" vazando nos cantos do card */
.about__card-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.card-flake {
  position: absolute;
  filter: brightness(0) invert(1); /* fica branco em cima do azul */
}

.card-flake--1 {
  width: 180px;
  top: -60px;
  left: -40px;
  opacity: 0.14;
}

.card-flake--2 {
  width: 220px;
  bottom: -90px;
  right: -60px;
  opacity: 0.12;
}

.about__card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.about__card-text {
  color: var(--text-white);
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
}

.about__card-text span {
  display: block;
  font-weight: 400;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 4px;
}

.about__card-btn {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  gap: 10px;
  background: var(--bg-white);
  color: var(--text-title);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform 0.2s var(--animate-easing);
}

.about__card-btn:hover {
  transform: translateY(-2px);
}

/* ----- Responsivo ----- */

@media (max-width: 1200px) and (min-width:992px){
  .about__grid {
    grid-template-columns: 1fr;
  }

  .about__content {
    order: 1;
  }

  .about__media {
    order: 2;
  }

  .about__title {
    font-size: 1.9rem;
  }
  .about__media {
    display: flex;
    justify-content: center;
  }
  .about__photo {
    max-width: 600px;
  }
  .about__frame {
    left: 140px;
    bottom: -28px;
  }
}

@media (max-width: 992px) {
    .about__grid {
    grid-template-columns: 1fr;
  }

  .about__content {
    order: 1;
  }

  .about__media {
    order: 2;
  }

  .about__title {
    font-size: 1.9rem;
  }
  /* Só aqui o card quebra pra coluna, quando realmente não cabe */
  .about__card-content {
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
    .about__frame {
        display: none;
    }
}



/* ========================
   SERVICES SECTION
========================== */

.services {
  position: relative;
  overflow: hidden;
  background: var(--bg-body);
  padding: 100px 0;
}

/* ----- Imagem de fundo ----- */

.services__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  z-index: 0;
}

/* ----- Cabeçalho centralizado ----- */

.services__header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.services__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.services__eyebrow-icon img {
  width: 100%;
  height: 100%;
}

.services__title {
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 16px;
}

.services__title-highlight {
  color: var(--color-primary);
}

.services__desc {
  color: var(--text-body);
  line-height: 1.6;
}

/* ----- Grid de cards ----- */

.services__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ----- Card ----- */

.service-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  min-height: 360px;
  text-decoration: none;
  box-shadow: var(--shadow-md);
}

.service-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--animate-easing);
}

.service-card:hover .service-card__bg {
  transform: scale(1.06);
}

/* Gradiente: azul sólido embaixo (onde fica o texto) até transparente em cima */
.service-card__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--color-primary-dark) 0%,
    rgba(31, 111, 184, 0.85) 35%,
    rgba(31, 111, 184, 0.15) 70%,
    rgba(31, 111, 184, 0) 100%
  );
}

.service-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  align-items: center;
  height: 100%;
  padding: 24px;
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-white);
  margin-bottom: 16px;
}

.service-card__icon img {
  width: 45px;
  height: 45px;
}

.service-card__title {
  color: #fff !important;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}

.service-card__desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 18px;
}

.service-card__btn {
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 8px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  color: var(--text-white);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s var(--animate-easing), border-color 0.2s var(--animate-easing);
}

.service-card:hover .service-card__btn {
  background: var(--bg-white);
  border-color: var(--bg-white);
  color: var(--color-primary-dark);
}

/* ----- Responsivo ----- */

@media (max-width: 992px) {
  .services__grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    min-height: 320px;
  }

  .services__title {
    font-size: 1.9rem;
  }
}


/* ========================
   MODELS SECTION
========================== */

.models {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  padding: 100px 0;
}

/* ----- Flocos de neve caindo no fundo (idêntico ao About) ----- */

.models__snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.models .snowflake {
  position: absolute;
  top: -10%;
  opacity: 0.18;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.models .snowflake--1 { left: 4%;  width: 70px;  animation-duration: 22s; animation-delay: -3s;  }
.models .snowflake--2 { left: 16%; width: 100px; animation-duration: 28s; animation-delay: -14s; }
.models .snowflake--3 { left: 30%; width: 55px;  animation-duration: 18s; animation-delay: -8s;  }
.models .snowflake--4 { left: 66%; width: 90px;  animation-duration: 25s; animation-delay: -2s;  }
.models .snowflake--5 { left: 80%; width: 60px;  animation-duration: 20s; animation-delay: -11s; }
.models .snowflake--6 { left: 90%; width: 110px; animation-duration: 30s; animation-delay: -19s; }

@keyframes snow-fall {
  0% {
    transform: translate(0, -10%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.18;
  }
  90% {
    opacity: 0.18;
  }
  100% {
    transform: translate(24px, 110vh) rotate(20deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .models .snowflake {
    animation: none;
    opacity: 0.12;
    top: 10%;
  }
}

/* ----- Topo: texto + imagem ----- */

.models__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}

.models__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.models__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.models__eyebrow-icon img {
  width: 100%;
  height: 100%;
}

.models__title {
  font-size: 2.2rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 16px;
}

.models__title-highlight {
  color: var(--color-primary);
}

.models__desc {
  color: var(--text-body);
  line-height: 1.6;
}

.models__media {
  position: relative;
}

.models__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 40px 180px 40px 180px;
  box-shadow: var(--shadow-md);
}

/* ----- Carrossel / grid de modelos ----- */

.models__carousel {
  position: relative;
  z-index: 1;
}

.models__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.model-card {
  background: var(--bg-body);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 20px;
}

.model-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--text-white);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.model-card__img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin-bottom: 14px;
}

.model-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 6px;
}

.model-card__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-body);
}

/* Setas: escondidas no desktop, o carrossel só existe no mobile */
.models__controls {
  display: none;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.models__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  color: var(--color-primary-dark);
  cursor: pointer;
  transition: background 0.2s var(--animate-easing), color 0.2s var(--animate-easing);
}

.models__arrow:hover {
  background: var(--color-primary);
  color: var(--text-white);
}

/* ----- CTA ----- */

.models__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ----- Responsivo ----- */

@media (max-width: 992px) {
  .models__top {
    grid-template-columns: 1fr;
  }

  .models__intro {
    order: 1;
  }

  .models__media {
    order: 2;
  }

  .models__title {
    font-size: 1.9rem;
  }

  /* A partir daqui o grid vira carrossel horizontal com scroll-snap */
  .models__track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    padding-bottom: 4px;
    /* Esconde a barra de rolagem nativa, mantendo o scroll funcional */
    scrollbar-width: none;
  }

  .models__track::-webkit-scrollbar {
    display: none;
  }

  .model-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  .models__controls {
    display: flex;
  }
}

@media (max-width: 480px) {
  .model-card {
    flex: 0 0 88%;
  }
}

/* ========================
   ENTERPRISE / EMPRESAS SECTION
========================== */

.enterprise {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 70px 0;
}

/* ----- Decoração de fundo ----- */

.enterprise__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.enterprise__decor-flake {
  position: absolute;
  top: 50%;
  right: -60px;
  width: 260px;
  transform: translateY(-50%);
  opacity: 0.08;
}

/* Grade de pontinhos no canto superior direito */
.enterprise__decor-dots {
  position: absolute;
  top: 32px;
  right: 60px;
  width: 140px;
  height: 100px;
  background-image: radial-gradient(
    var(--color-primary-light) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.25;
}

/* ----- Grid principal ----- */

.enterprise__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
}

/* ----- Imagem + moldura + badge ----- */

.enterprise__media {
  position: relative;
  padding: 14px 0 46px 0;
}

.enterprise__media-frame {
  position: relative;
  border-radius: 410px 410px 30px 30px;
  padding: 10px;
  background: linear-gradient(
    160deg,
    rgba(106, 198, 238, 0.35) 0%,
    rgba(13, 49, 86, 0) 60%
  );
  border: 1px solid rgba(106, 198, 238, 0.3);
}

.enterprise__photo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 400px 400px 20px 20px;
}

.enterprise__badge {
  position: absolute;
  left: 24px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(13, 49, 86, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(106, 198, 238, 0.35);
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow-lg);
}

.enterprise__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(106, 198, 238, 0.15);
  flex-shrink: 0;
}

.enterprise__badge-icon img {
  width: 34px;
  height: 34px;
}

.enterprise__badge-text {
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.enterprise__badge-highlight {
  display: block;
  color: var(--color-primary-light);
}

/* ----- Conteúdo textual ----- */

.enterprise__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text-white);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.enterprise__pill-icon {
  width: 16px;
  height: 16px;
}

.enterprise__title {
  font-size: 2.9rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-white) !important;
  margin-bottom: 20px;
}

.enterprise__title-highlight {
  display: block;
  color: var(--color-primary-light);
}

.enterprise__desc {
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  max-width: 460px;
  margin-bottom: 32px;
}

.enterprise__actions {
  display: flex;
}

/* ----- Responsivo ----- */

@media (max-width: 992px) {
  .enterprise__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .enterprise__content {
    order: 1;
    text-align: center;
  }

  .enterprise__media {
    order: 2;
    max-width: 460px;
    margin: 0 auto;
  }
  .enterprise__desc {
    justify-self: center;
  }
  .enterprise__actions {
    justify-content: center;
  }
  .enterprise__photo {
    border-radius: 200px 200px 16px 16px;
  }

  .enterprise__media-frame {
    border-radius: 210px 210px 26px 26px;
  }

  .enterprise__title {
    font-size: 1.9rem;
  }

  .enterprise__decor-dots {
    display: none;
  }
}

@media (max-width: 480px) {
  .enterprise__photo {
    border-radius: 140px 140px 14px 14px;
  }

  .enterprise__media-frame {
    border-radius: 150px 150px 20px 20px;
  }

  .enterprise__badge {
    left: 12px;
    padding: 14px 16px;
  }

  .enterprise__badge-text {
    font-size: 0.9rem;
  }

  .enterprise__title {
    font-size: 1.6rem;
  }
}

/* ========================
   CERTIFICATIONS / MARCAS SECTION
========================== */

.certifications {
  position: relative;
  overflow: hidden;
  background: var(--bg-body);
  padding: 100px 0;
}

/* ----- Flocos de neve caindo no fundo ----- */

.certifications__snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cert-snowflake {
  position: absolute;
  top: -10%;
  opacity: 0.18;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.cert-snowflake--1 { left: 4%;  width: 70px;  animation-duration: 22s; animation-delay: -3s;  }
.cert-snowflake--2 { left: 16%; width: 100px; animation-duration: 28s; animation-delay: -14s; }
.cert-snowflake--3 { left: 30%; width: 55px;  animation-duration: 18s; animation-delay: -8s;  }
.cert-snowflake--4 { left: 66%; width: 90px;  animation-duration: 25s; animation-delay: -2s;  }
.cert-snowflake--5 { left: 80%; width: 60px;  animation-duration: 20s; animation-delay: -11s; }
.cert-snowflake--6 { left: 90%; width: 110px; animation-duration: 30s; animation-delay: -19s; }

@keyframes snow-fall {
  0% {
    transform: translate(0, -10%) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.18;
  }
  90% {
    opacity: 0.18;
  }
  100% {
    transform: translate(24px, 110vh) rotate(20deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cert-snowflake {
    animation: none;
    opacity: 0.12;
    top: 10%;
  }
}

/* ----- Cabeçalho centralizado ----- */

.certifications__header {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.certifications__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.certifications__eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.certifications__eyebrow-icon img {
  width: 100%;
  height: 100%;
}

.certifications__title {
  font-size: 2.1rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 16px;
}

.certifications__title-highlight {
  color: var(--color-primary);
}

.certifications__desc {
  color: var(--text-body);
  line-height: 1.6;
}

/* ----- Painéis: marcas + certificações ----- */

.certifications__panels {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2.4fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  min-width: 0;
}

/* Estilo base compartilhado dos dois painéis */
.brands-panel,
.certs-panel {
  min-width: 0; /* impede que o item de grid recuse encolher por causa do conteúdo interno */
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.brands-panel__header,
.certs-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.brands-panel__icon,
.certs-panel__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.brands-panel__icon img,
.certs-panel__icon img {
  width: 100%;
  height: 100%;
}

.brands-panel__header h3,
.certs-panel__header h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-title);
}

/* ----- Grid de marcas (desktop / tablet) ----- */

.brands-panel__viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.brands-panel__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-body);
  padding: 10px;
}

.brand-logo img {
  max-width: 100%;
  max-height: 28px;
  object-fit: contain;
}

/* Duplicatas ficam escondidas até o breakpoint de carrossel */
.brand-logo.is-duplicate {
  display: none;
}

/* ----- Lista de certificações (desktop: vertical) ----- */

.certs-panel__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-body);
  min-width: 0;
}

.cert-badge__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.cert-badge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cert-badge__text strong {
  font-size: 0.9rem;
  color: var(--text-title);
}

.cert-badge__text span {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-light);
  word-break: break-word;
}

/* ----- Card final ----- */

.certifications__cta {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  border-radius: 16px;
  padding: 26px 32px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-lg);
}

.certifications__cta-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cta-flake {
  position: absolute;
  filter: brightness(0) invert(1);
}

.cta-flake--1 {
  width: 180px;
  top: -60px;
  left: -40px;
  opacity: 0.14;
}

.cta-flake--2 {
  width: 220px;
  bottom: -90px;
  right: -60px;
  opacity: 0.12;
}

.certifications__cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.certifications__cta-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.certifications__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-white);
  flex-shrink: 0;
}

.certifications__cta-icon img {
  width: 22px;
  height: 22px;
}

.certifications__cta-item p {
  color: var(--text-white);
  font-weight: 600;
  font-size: 0.95rem;
  max-width: 220px;
  line-height: 1.4;
}

.certifications__cta-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.35);
}

.certifications__cta .btn-secondary {
    background-color: #fff;

}
.certifications__cta .btn-secondary:hover {
    color: #000;
    background-color: #fff !important;
}

/* ==========================================================
   RESPONSIVO
   ========================================================== */

/* Primeiro corte: 1200px — certificações descem e viram linha horizontal */
@media (max-width: 1200px) {
  .certifications__panels {
    grid-template-columns: 1fr;
  }

  .certs-panel__list {
    flex-direction: row;
  }

  .cert-badge {
    flex: 1;
    flex-direction: column;
    text-align: center;
    gap: 8px;
    min-width: 0;
  }
}

/* Ajustes gerais de título em telas médias */
@media (max-width: 900px) {
  .certifications__title {
    font-size: 1.8rem;
  }

  .certifications__cta-divider {
    display: none;
  }
}

/* Segundo corte: telas pequenas — marcas viram carrossel automático */
@media (max-width: 640px) {
  .brands-panel__grid {
    display: flex;
    grid-template-columns: none;
    width: max-content;
    gap: 16px;
    animation: brands-marquee 26s linear infinite;
  }

  .brand-logo {
    width: 110px;
    flex-shrink: 0;
  }

  .brand-logo.is-duplicate {
    display: flex;
  }

  /* Certificações voltam a empilhar em telas bem pequenas, pra não espremer o texto */
  .certs-panel__list {
    flex-direction: column;
  }

  .cert-badge {
    flex-direction: row;
    text-align: left;
  }

  .certifications__cta {
    justify-content: center;
    text-align: center;
  }

  .certifications__cta-content {
    justify-content: center;
  }
}

@keyframes brands-marquee {
  from {
    transform: translateX(0);
  }
  to {
    /* Anda exatamente metade da largura total (o conjunto original),
       já que o conjunto duplicado começa logo em seguida — cria o loop perfeito */
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brands-panel__grid {
    animation: none;
  }
}

/* ============================================================
   APPOINTMENT / CONTATO SECTION — formulário do CMS
   Atenção: HTML gerado pelo CMS, não pode ser alterado.
   Toda a customização abaixo é feita apenas via CSS,
   usando as classes que o próprio CMS já entrega.
   ============================================================ */

.appointment-area {
  position: relative;
  background: var(--bg-body);
  padding: 100px 0;
  overflow: hidden;
}

/* ----- Card branco principal ----- */

.appointment-inner-area {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  background: var(--bg-white);
  border-radius: 24px;
  padding: 56px;
  box-shadow: var(--shadow-md);
}

/* ----- Coluna esquerda: textos ----- */

.left-content-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin-bottom: 16px;
}

/* Como não existe <img> pro floco no HTML do CMS,
   entra via ::before com background-image */
.subtitle::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("assets/frontend/img/floco-decorativo.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.title {
  font-size: 2.6rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 18px;
}

.description p {
  color: var(--text-body);
  line-height: 1.6;
  margin: 0 0 4px;
}

/* Badge de destaque no lugar dos cards de Instagram/Facebook,
   já que essa marcação não existe no HTML do CMS.
   Redesenhado pra dar um respiro mais sofisticado à área. */
.helpline {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin-top: 32px;
  padding: 18px 24px;
  background: var(--gradient-primary);
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-white) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Floco grande "vazando" no fundo do badge, mesmo efeito usado
   nos outros cards do site */
.helpline::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -20px;
  width: 90px;
  height: 90px;
  background-image: url("../img/floco-decorativo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.18;
  pointer-events: none;
}

.helpline::before {
  content: "";
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  background-image: url("../img/floco-decorativo.svg");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ----- Coluna direita: formulário ----- */

.right-content-area {
  display: flex;
  flex-direction: column;
}

.right-content-area form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Mensagem de erro: some quando está vazia (comportamento padrão do CMS)
   e aparece automaticamente quando o JS injeta um texto dentro */
.right-content-area .error-message:empty {
  display: none;
}

.right-content-area .error-message {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(235, 87, 87, 0.08);
  border: 1px solid rgba(235, 87, 87, 0.3);
  color: var(--danger);
  font-size: 0.85rem;
}

/* Labels escondidas: o design usa só o placeholder pra identificar o campo */
.right-content-area .form-group label {
  display: none;
}

.right-content-area .form-group {
  display: flex;
  flex-direction: column;
}

.right-content-area .form-control {
  width: 100%;
  min-height: 58px;
  padding: 17px 20px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-body);
  color: var(--text-title);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.right-content-area .form-control::placeholder {
  color: var(--text-light);
}

.right-content-area .form-control:focus {
  outline: none;
  background: var(--bg-white);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.12);
}

.right-content-area .form-group.textarea .form-control {
  min-height: 150px;
  padding-top: 17px;
  resize: vertical;
}

/* ----- Botão + loading ----- */

.right-content-area .btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* Especificidade alta + !important, porque o botão já carrega
   classes do tema (boxed-btn, medical-home) que podem ter
   estilos próprios competindo com os nossos */
.right-content-area .btn-wrapper .submit-btn {
  width: 100% !important;
  min-height: 58px !important;
  padding: 17px 24px !important;
  border: none !important;
  border-radius: 999px !important;
  background: var(--gradient-primary) !important;
  color: var(--text-white) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.right-content-area .btn-wrapper .submit-btn:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.ajax-loading-wrap.hide {
  display: none;
}

/* Ajusta a cor do spinner padrão do tema (Spinkit) pro azul da marca.
   Só funciona se a estrutura de cor do spinner usar background-color
   no ::before de cada .sk-circle — confirma isso testando no navegador. */
.sk-fading-circle .sk-circle:before {
  background-color: var(--color-primary) !important;
}

/* ----- Responsivo ----- */

@media (max-width: 900px) {
  .appointment-inner-area {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 32px;
  }

  .appointment-inner-area .left-content-area .title {
    font-size: 2rem !important;
  }
}

@media (max-width: 480px) {
  .appointment-inner-area {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .appointment-inner-area .left-content-area .title {
    font-size: 1.7rem !important;
  }

  .subtitle {
    font-size: 1rem !important;
  }

  .helpline {
    font-size: 0.9rem !important;
    padding: 14px 18px;
  }

  .right-content-area .form-control,
  .right-content-area .btn-wrapper .submit-btn {
    min-height: 52px !important;
  }
}


/* FOOTER */

.footer-area.home-21.footer-color-five,
.home-21.footer-area .footer-top {
    background: linear-gradient(
        180deg,
        #031A33 0%,
        #062A52 50%,
        #052243 100%
    );
}

.home-21.footer-area .copyright-area.copyright-bg {
    background: linear-gradient(90deg, #6AC6EE 0%, #0097DA 100%) !important;
}

.home-variant-21 {
    padding: 0;
}

.widget .recent_post_item li.single-recent-post-item .thumb {
    display: none;
}

.home-21 .widget.footer-widget .widget-title,
.widget .recent_post_item li.single-recent-post-item .content .title ,
.home-21.footer-area .widget.footer-widget p,
.home-21.footer-area .widget.footer-widget ul li a {
    color: var(--text-white) !important;
}

.home-21.footer-area .footer-widget.widget_nav_menu ul li a:after {
    color: var(--color-primary) !important;
}

/* ============================================================
   ESTILO — Coluna Contato (redes sociais)
   ============================================================ */
 
.contact-social-widget .widget-title {
    color: var(--text-white);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
 
.contact-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
 
.contact-social-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
 
.contact-social-item a:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(4px);
}
 
/* Card do Whatsapp usa o gradiente da marca, se destacando dos demais */
.contact-social-whatsapp a {
    background: var(--gradient-primary);
    border: none;
}
 
.contact-social-whatsapp a:hover {
    background: var(--gradient-primary-hover);
}
 
/* Ícone solto, sem bolinha de fundo */
.contact-social-icon {
    flex-shrink: 0;
    width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
 
/* Cores específicas por rede (aplicadas direto no ícone) */
.contact-social-instagram .contact-social-icon i {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
 
.contact-social-facebook .contact-social-icon i {
    color: #1877F2;
}
 
/* No card do Whatsapp o ícone fica branco, já que o fundo do card é colorido */
.contact-social-whatsapp .contact-social-icon i {
    color: var(--text-white);
}
 
/* Texto (nome + handle) */
.contact-social-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-grow: 1;
    min-width: 0;
}
 
.contact-social-name {
    color: var(--text-white);
    font-size: 16x;
    font-weight: 600;
    line-height: 1.2;
}
 
.contact-social-handle {
    color: var(--text-white);
    font-size: 16x;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
.contact-social-whatsapp .contact-social-handle {
    color: rgba(255, 255, 255, 0.8);
}
 
/* Seta */
.contact-social-arrow {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    transition: color 0.25s ease, transform 0.25s ease;
}
 
.contact-social-whatsapp .contact-social-arrow {
    color: rgba(255, 255, 255, 0.7);
}
 
.contact-social-item a:hover .contact-social-arrow {
    color: var(--text-white);
    transform: translateX(3px);
}

.breadcrumb-area:before
 {
    background-color: rgba(255, 255, 255, .5);
}


/* ============================================================
   SOBRE — Empresa / Estrutura / História / Missão-Visão-Valores
   ============================================================ */

/* ----- Flocos de neve caindo (reaproveitado em cada seção clara) ----- */

.ap-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ap-flake {
  position: absolute;
  top: -10%;
  opacity: 0.18;
  animation-name: snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.ap-flake--1 { left: 4%;  width: 70px;  animation-duration: 22s; animation-delay: -3s;  }
.ap-flake--2 { left: 16%; width: 100px; animation-duration: 28s; animation-delay: -14s; }
.ap-flake--3 { left: 30%; width: 55px;  animation-duration: 18s; animation-delay: -8s;  }
.ap-flake--4 { left: 66%; width: 90px;  animation-duration: 25s; animation-delay: -2s;  }
.ap-flake--5 { left: 80%; width: 60px;  animation-duration: 20s; animation-delay: -11s; }
.ap-flake--6 { left: 90%; width: 110px; animation-duration: 30s; animation-delay: -19s; }

@keyframes snow-fall {
  0%   { transform: translate(0, -10%) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.18; }
  90%  { opacity: 0.18; }
  100% { transform: translate(24px, 110vh) rotate(20deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-flake {
    animation: none;
    opacity: 0.12;
    top: 10%;
  }
}

/* ----- Elementos de texto compartilhados entre as 3 primeiras seções ----- */

.ap-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 14px;
}

.ap-eyebrow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.ap-eyebrow-icon img {
  width: 100%;
  height: 100%;
}

.ap-title {
  font-size: 2.3rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-title);
  margin-bottom: 20px;
}

.ap-title-highlight {
  color: var(--color-primary);
}

.ap-desc {
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 16px;
}

.ap-desc:last-of-type {
  margin-bottom: 0;
}

/* ----- Moldura decorativa reaproveitada nas fotos ----- */

.ap-frame-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.ap-photo {
  width: 100%;
  height: auto;
  display: block;
}

.ap-frame {
  position: absolute;
  width: 90px;
  height: 90px;
}

.ap-frame--tr {
  top: -24px;
  right: -24px;
}

.ap-frame--bl {
  bottom: -24px;
  left: -24px;
}

/* ============================================================
   1. EMPRESA
   ============================================================ */

.ap-company {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  padding: 100px 0;
}

.ap-company__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.ap-company__media {
  position: relative;
}

/* ============================================================
   2. ESTRUTURA
   ============================================================ */

.ap-structure {
  position: relative;
  overflow: hidden;
  background: var(--bg-body);
  padding: 100px 0;
}

.ap-structure__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.ap-structure__media {
  position: relative;
}

/* ============================================================
   3. HISTÓRIA
   ============================================================ */

.ap-history {
  position: relative;
  overflow: hidden;
  background: var(--bg-white);
  padding: 100px 0;
}

.ap-history__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.ap-history__media {
  position: relative;
}

.ap-history__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-md);
  width: fit-content;
}

.ap-history__badge strong {
  font-family: "Sora", sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1;
}

.ap-history__badge span {
  max-width: 160px;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.9);
}

/* ============================================================
   4. MISSÃO, VISÃO E VALORES (bloco escuro de fechamento)
   ============================================================ */

.ap-values {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 100px 0;
}

.ap-values__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ap-values__decor-flake {
  position: absolute;
  top: 50%;
  left: -80px;
  width: 300px;
  transform: translateY(-50%);
  opacity: 0.06;
}

.ap-values__decor-dots {
  position: absolute;
  bottom: 40px;
  right: 60px;
  width: 140px;
  height: 100px;
  background-image: radial-gradient(
    var(--color-primary-light) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.2;
}

.ap-values__header {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}

.ap-values__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--text-white);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.ap-values__eyebrow-icon {
  width: 16px;
  height: 16px;
}

.ap-values__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-white);
}

.ap-values__title-highlight {
  color: var(--color-primary-light);
}

.ap-values__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 32px 28px;
  transition: transform 0.25s var(--animate-easing), background 0.25s var(--animate-easing);
}

.value-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.06);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(106, 198, 238, 0.12);
  margin-bottom: 20px;
}

.value-card__icon img {
  width: 28px;
  height: 28px;
}

.value-card__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 12px;
}

.value-card__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.65);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 900px) {
  .ap-company__grid,
  .ap-structure__grid,
  .ap-history__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Texto sempre antes da imagem no empilhamento mobile */
  .ap-company__content,
  .ap-history__content,
  .ap-structure__content {
    order: 1;
  }
  .ap-company__media,
  .ap-history__media,
  .ap-structure__media {
    order: 2;
  }

  .ap-title {
    font-size: 1.9rem;
  }

  .ap-values__grid {
    grid-template-columns: 1fr;
  }

  .ap-values__title {
    font-size: 1.8rem;
  }

  .ap-values__decor-dots {
    display: none;
  }
}

@media (max-width: 580px) {
  .ap-company,
  .ap-structure,
  .ap-history,
  .ap-values {
    padding: 70px 0;
  }

  .ap-title {
    font-size: 1.6rem;
  }

  .ap-frame {
    display: none;
  }
}

/* ============================================================
   HIGHLIGHTS STRIP
   Faixa curta, escura e reutilizável com 4 pontos de destaque,
   ícone e texto lado a lado, separados por divisores sutis.
   Usada em várias páginas do site — sem dependências de
   outras seções.
   ============================================================ */

.highlights-strip {
  position: relative;
  background: var(--bg-dark);
  padding: 44px 0;
}

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

.highlight-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.highlight-item:first-child {
  border-left: none;
  padding-left: 0;
}

.highlight-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(106, 198, 238, 0.12);
  border: 1px solid rgba(106, 198, 238, 0.3);
  transition: background 0.25s var(--animate-easing), transform 0.25s var(--animate-easing);
}

.highlight-item:hover .highlight-item__icon {
  background: var(--gradient-primary);
  transform: translateY(-2px);
}

.highlight-item__icon img {
  width: 24px;
  height: 24px;
}

.highlight-item__text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-white);
}

/* ----- Responsivo ----- */

@media (max-width: 900px) {
  .highlights-strip__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 28px;
  }

  .highlight-item:nth-child(2) {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .highlight-item:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }

  .highlight-item:nth-child(3),
  .highlight-item:nth-child(4) {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .highlights-strip__grid {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }

  .highlight-item {
    border-left: none !important;
    padding-left: 0 !important;
  }

  .highlight-item__icon {
    width: 46px;
    height: 46px;
  }

  .highlight-item__icon img {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   ESTILO — Seção de Contato (cards)
   ============================================================ */
 
.contact-cards-section {
    padding: 90px 0;
}
 
.contact-cards-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 50px;
}
 
.contact-cards-title {
    color: var(--text-title);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 16px;
}
 
.contact-cards-subtitle {
    color: var(--text-body);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}
 
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
 
.contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px;
    background: var(--bg-body);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
 
.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}
 
.contact-card-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    color: var(--text-white);
    font-size: 22px;
}
 
.contact-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
 
.contact-card-label {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
}
 
.contact-card-value {
    color: var(--text-title);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
/* ========= RESPONSIVO ========= */
 
@media (max-width: 992px) {
    .contact-cards-section {
        padding: 60px 0;
    }
 
    .contact-cards-title {
        font-size: 26px;
    }
 
    .contact-cards-grid {
        grid-template-columns: 1fr;
    }
 
    .contact-card {
        padding: 22px;
    }
}

@media (max-width: 576px) {
    .contact-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
    }

    .contact-card-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 12px;
    }

    .contact-card-info {
        width: 100%;
    }

    .contact-card-value {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        word-break: break-word;
        font-size: 15px;
    }

    .contact-card-label {
        font-size: 12px;
    }
}



/* BLOG */

.blog-details-content-area .col-lg-4 .widget-area .blog-widget {
  background-color: var(--color-primary-dark) !important;
  border-radius: 10px;
}

.blog-details-content-area .col-lg-4 .widget-area .blog-widget:first-child {
  background-color: transparent !important;
}

.widget .recent_post_item li.single-recent-post-item .content .time {
  color: var(--text-white) !important;
}
.blog-details-item .thumb img {
  border-radius: 10px;
}
.related-post-area .thumb img {
  border-radius: 10px !important;
}
.blog-classic-item-01 .thumbnail img {
  border-radius: 10px ;
}





/* contato */

/* ============================================================
   VISIT US / LOCALIZAÇÃO SECTION
   ============================================================ */

.visit-us {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  padding: 100px 0;
}

/* ----- Decoração de fundo (mesmo padrão do Enterprise) ----- */

.visit-us__decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.visit-us__decor-flake {
  position: absolute;
  top: 50%;
  right: -70px;
  width: 280px;
  transform: translateY(-50%);
  opacity: 0.06;
}

.visit-us__decor-dots {
  position: absolute;
  bottom: 40px;
  left: 60px;
  width: 140px;
  height: 100px;
  background-image: radial-gradient(
    var(--color-primary-light) 1.5px,
    transparent 1.5px
  );
  background-size: 14px 14px;
  opacity: 0.2;
}

/* ----- Grid principal ----- */

.visit-us__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
  min-width: 0;
}

/* ----- Coluna esquerda: textos + cards ----- */

.visit-us__content {
  min-width: 0;
}

.visit-us__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-primary-light);
  margin-bottom: 14px;
}

.visit-us__eyebrow-icon {
  width: 20px;
  height: 20px;
}

.visit-us__title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-white);
  margin-bottom: 32px;
}

.visit-us__title-highlight {
  color: var(--color-primary-light);
}

.visit-us__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  min-width: 0;
  transition: background 0.25s var(--animate-easing);
}

.info-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.info-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: rgba(106, 198, 238, 0.14);
  color: var(--color-primary-light);
}

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

.info-card__body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 6px;
}

.info-card__body p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  word-break: break-word;
}

/* ----- Coluna direita: mapa ----- */

.visit-us__map {
  position: relative;
  width: 100%;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-lg);
  min-height: 380px;
}

.visit-us__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  /* Deixa o mapa com tons frios/escuros, combinando com o fundo da seção.
     Se preferir o Google Maps com as cores originais, é só remover este filter. */
  filter: invert(92%) hue-rotate(180deg) contrast(90%);
}

/* ----- Responsivo ----- */

@media (max-width: 900px) {
  .visit-us__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .visit-us__title {
    font-size: 1.9rem;
  }

  .visit-us__map {
    min-height: 320px;
  }

  .visit-us__map-frame {
    min-height: 320px;
  }
}

@media (max-width: 576px) {
  .visit-us {
    padding: 60px 0;
  }

  .visit-us__title {
    font-size: 1.6rem;
    margin-bottom: 24px;
  }

  .info-card {
    padding: 14px;
    gap: 12px;
  }

  .info-card__icon {
    width: 38px;
    height: 38px;
  }

  .info-card__icon svg {
    width: 18px;
    height: 18px;
  }

  .info-card__body h3 {
    font-size: 0.88rem;
  }

  .info-card__body p {
    font-size: 0.84rem;
  }

  .visit-us__map {
    min-height: 260px;
  }

  .visit-us__map-frame {
    min-height: 260px;
  }
}


.breadcrumb-area {
  background-image: url(../img/breadcrumb.webp) !important;
}