/* ==========================================================
   ACTION INFINITE
   PÁGINA: CONTATO
   ========================================================== */


/* ==========================================================
   1. PROTEÇÃO GERAL
   ========================================================== */

.contact-banner,
.contact-visit,
.visit-building{
  min-width: 0;
}

.contact-banner img,
.contact-visit img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ==========================================================
   2. BANNER PRINCIPAL
   ========================================================== */

.contact-banner {
  position: relative;
  overflow: hidden;

  padding: 35px 50px !important;

  background: linear-gradient(
    145deg,
    rgba(9, 31, 77, 0.96),
    rgba(5, 17, 48, 0.98)
  );

  border: 1px solid var(--border-orange);
  border-radius: 26px;

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 16px 45px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ==========================================================
   3. BRILHO DO BANNER
   ========================================================== */

.contact-banner::before {
  content: "";

  position: absolute;
  top: 0;
  left: -150%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.65s ease;

  pointer-events: none;

  z-index: 0;
}


/* ==========================================================
   4. HOVER DO BANNER
   ========================================================== */

@media (hover: hover) {

  .contact-banner:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 101, 0, 0.95);

    box-shadow:
      0 22px 55px rgba(0, 0, 0, 0.32),
      0 0 35px rgba(255, 101, 0, 0.1);
  }

  .contact-banner:hover::before {
    left: 160%;
  }
}


/* ==========================================================
   8. CARDS DE CONTATO
   ========================================================== */

/* Selo "CANAIS DE ATENDIMENTO": faltava o traço, presente nas outras páginas */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--orange);
}

.grid3 .card {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: flex-start;

  text-align: center;
}

.grid3 .card .icon {
  display: block;

  width: 60px;
  height: 60px;

  object-fit: contain;

  margin: 0 auto 18px;

  border: none;
  background: transparent;
  box-shadow: none;

  /* Escala a partir do centro para igualar o tamanho aparente entre os ícones */
  transform-origin: center;
}

/* Cada PNG tem uma margem transparente interna diferente, então o desenho
   aparece em tamanhos distintos mesmo com o box de 60px igual. As escalas
   abaixo compensam isso para os três ficarem visualmente do mesmo tamanho. */

/* Localização: desenho um pouco menor no canvas → aumenta levemente */
.grid3 .card .icon-endereco {
  transform: scale(1.06);
}

/* Telefone: desenho maior/mais baixo no canvas → reduz para alinhar aos demais */
.grid3 .card .icon-fone {
  transform: scale(0.86);
}

/* Horário: desenho um pouco maior → reduz sutilmente */
.grid3 .card .icon-horario {
  transform: scale(0.95);
}

.grid3 .card h3 {
  text-align: center;
}

.grid3 .card p {
  text-align: center;
}

/* Cards de contato sem efeitos: sem hover, brilho deslizante ou transicao */
.contact-channels .card {
  transition: none;
}

.contact-channels .card::before {
  display: none;
}

.contact-channels .card:hover {
  transform: none;
  border-color: var(--border-orange);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 16px 45px rgba(0, 0, 0, 0.18);
}


/* ==========================================================
   9. VISITE NOSSA SEDE
   ========================================================== */

.contact-visit {
  position: relative;

  overflow: hidden;

  margin-top: 20px;
  /* Respiro antes do rodapé para o painel não colar na borda do footer */
  margin-bottom: var(--section-space);

  padding: 42px 55px 38px !important;

  background: linear-gradient(
    145deg,
    rgba(9, 31, 77, 0.96),
    rgba(5, 17, 48, 0.98)
  );

  border: 1px solid var(--border-orange);

  border-radius: 26px;

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 16px 45px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ==========================================================
   10. BRILHO DA SEÇÃO DA SEDE
   ========================================================== */

.contact-visit::before {
  content: "";

  position: absolute;

  top: 0;
  left: -150%;

  width: 80%;
  height: 100%;

  background: linear-gradient(
    110deg,
    transparent,
    rgba(255, 255, 255, 0.07),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.65s ease;

  pointer-events: none;

  z-index: 0;
}


/* ==========================================================
   11. HOVER DA SEDE
   ========================================================== */

@media (hover: hover) {

  .contact-visit:hover {
    transform: translateY(-6px);

    border-color: rgba(255, 101, 0, 0.95);

    box-shadow:
      0 22px 55px rgba(0, 0, 0, 0.32),
      0 0 35px rgba(255, 101, 0, 0.1);
  }

  .contact-visit:hover::before {
    left: 160%;
  }
}


/* ==========================================================
   12. TÍTULO DA SEDE
   ========================================================== */

.contact-visit .title {
  position: relative;

  z-index: 2;

  margin: 0 0 35px;

  text-align: center;

  color: var(--white);

  font-size: clamp(25px, 2.5vw, 36px);

  font-weight: 800;

  line-height: 1.2;
}

.contact-visit .title .orange {
  color: #ff6500;
}


/* ==========================================================
   14. ÁREA DA FOTO
   ========================================================== */

.visit-building {
  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;
}


/* ==========================================================
   15. FOTO DA SEDE
   ========================================================== */

.visit-building-img {
  display: block;

  width: 100%;

  max-width: 440px;

  height: 370px;

  object-fit: cover;

  object-position: center;

  border-radius: 18px;

  margin: 0 auto;

  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


@media (hover: hover) {

  .visit-building-img:hover {
    transform: scale(1.025);

    box-shadow:
      0 22px 42px rgba(0, 0, 0, 0.35),
      0 0 25px rgba(255, 101, 0, 0.08);
  }
}


/* ==========================================================
   19. NOTEBOOK
   992px até 1199px
   ========================================================== */

@media screen and (min-width: 992px) and (max-width: 1199px) {

  /* BANNER PRINCIPAL */

  .contact-banner {
    padding: 32px 38px !important;
  }


  /* VISITE NOSSA SEDE */

  .contact-visit {
    padding: 38px 40px 35px !important;
  }

  .visit-building-img {
    max-width: 390px;

    height: 340px;
  }
}


/* ==========================================================
   20. TABLET
   768px até 991px
   ========================================================== */

@media screen and (min-width: 768px) and (max-width: 991px) {

  /* BANNER PRINCIPAL */

  .contact-banner {
    padding: 30px 25px !important;
  }


  /* CARDS */

  .grid3 .card .icon {
    width: 55px;
    height: 55px;
  }


  /* VISITE NOSSA SEDE */

  .contact-visit {
    padding: 35px 30px !important;
  }

  .contact-visit .title {
    margin-bottom: 28px;

    font-size: 27px;
  }

  .visit-building-img {
    max-width: 330px;

    height: 300px;
  }
}


/* ==========================================================
   21. CELULAR
   até 767px
   ========================================================== */

@media screen and (max-width: 767px) {

  /* ========================================================
     BANNER PRINCIPAL
     ======================================================== */

  .contact-banner {
    padding: 30px 20px !important;

    border-radius: 22px;
  }


  /* ========================================================
     CARDS
     ======================================================== */

  .grid3 .card .icon {
    width: 55px;
    height: 55px;
  }


  /* ========================================================
     VISITE NOSSA SEDE
     ======================================================== */

  .contact-visit {
    padding: 30px 20px !important;

    border-radius: 22px;
  }

  .contact-visit .title {
    margin-bottom: 28px;

    font-size: 23px;

    line-height: 1.3;
  }


  /* FOTO PRIMEIRO */

  .visit-building {
    order: 1;
  }

  .visit-building-img {
    width: 100%;

    max-width: 390px;

    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;
  }
}


/* ==========================================================
   22. CELULAR PEQUENO
   até 520px
   ========================================================== */

@media screen and (max-width: 520px) {

  /* BANNER */

  .contact-banner {
    padding: 26px 16px !important;

    border-radius: 20px;
  }


  /* CARDS */

  .grid3 .card .icon {
    width: 50px;
    height: 50px;

    margin-bottom: 15px;
  }


  /* SEDE */

  .contact-visit {
    padding: 26px 16px !important;

    border-radius: 20px;
  }

  .contact-visit .title {
    margin-bottom: 24px;

    font-size: 20px;

    line-height: 1.35;
  }

  .visit-building-img {
    width: 100%;

    max-width: 100%;
  }
}


/* ==========================================================
   23. CELULAR MUITO PEQUENO
   até 380px
   ========================================================== */

@media screen and (max-width: 380px) {

  /* BANNER */

  .contact-banner {
    padding: 22px 14px !important;
  }


  /* SEDE */

  .contact-visit {
    padding: 22px 14px !important;
  }

  .contact-visit .title {
    font-size: 18px;
  }
}
/* ==========================================================
   24. HERO + ATENDIMENTO LOCAL — VERSÃO PROFISSIONAL
   ========================================================== */
.contact-hero {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 82% 22%, rgba(19, 103, 209, 0.12), transparent 31%),
    linear-gradient(180deg, rgba(2, 11, 29, 0.2), rgba(2, 11, 29, 0));
}

.contact-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

.contact-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: 40px;
  padding-block: 72px;
}

.contact-hero-copy {
  max-width: 640px;
}

.contact-eyebrow,
.support-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
}

.contact-eyebrow::before,
.support-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: var(--orange);
}

.contact-hero-title {
  color: var(--white);
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -2px;
}

.contact-hero-title span { color: var(--orange); }

.contact-hero-subtitle {
  max-width: 560px;
  margin-top: 22px;
  color: #aebbd0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.75;
}

.contact-hero-cta {
  display: inline-flex;
  margin-top: 30px;
}

.contact-hero-art {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-hero-mascot {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  max-height: 460px;
  object-fit: contain;
  animation:
    contactMascotIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    contactMascotGlow 4.5s ease-in-out 0.9s infinite;
}

@keyframes contactMascotIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes contactMascotGlow {
  0%,
  100% {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35))
      drop-shadow(0 0 0 rgba(255, 101, 0, 0));
  }
  50% {
    filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.3))
      drop-shadow(0 0 20px rgba(255, 101, 0, 0.4));
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero-mascot {
    animation: none;
  }
}

@media (max-width: 1000px) {
  .contact-hero {
    min-height: auto;
  }
  .contact-hero-grid {
    grid-template-columns: 1fr 0.8fr;
  }
  .contact-hero-art {
    min-height: 390px;
  }
}

@media (max-width: 760px) {
  .contact-hero-grid {
    grid-template-columns: 1fr;
    padding-block: 54px 24px;
    text-align: center;
  }
  .contact-hero-copy {
    margin: 0 auto;
  }
  .contact-eyebrow {
    justify-content: center;
  }
  .contact-hero-subtitle {
    margin-inline: auto;
  }
  .contact-hero-art {
    min-height: 300px;
  }
  .contact-hero-mascot {
    width: min(82%, 360px);
    max-height: 330px;
  }
}

@media (max-width: 480px) {
  .contact-hero-art {
    min-height: 250px;
  }
}

.contact-support-card {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(380px, 1.05fr);
  align-items: stretch;
  gap: 32px;
  min-height: 490px;
  margin-top: 0;
  padding: clamp(38px, 4.5vw, 64px) !important;
  background:
    radial-gradient(circle at 85% 50%, rgba(0, 115, 255, .14), transparent 33%),
    linear-gradient(135deg, rgba(9, 34, 83, .98), rgba(3, 17, 48, .99));
  border: 1px solid rgba(91, 135, 203, .42);
}

.contact-support-card::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -150px;
  width: 520px;
  height: 520px;
  border: 2px solid rgba(0, 128, 255, .09);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(0, 128, 255, .025), 0 0 0 110px rgba(255, 101, 0, .02);
  pointer-events: none;
}

/* Sem mascote ao lado: o anel decorativo perde o sentido */
.contact-support-card--simple::after {
  display: none;
}

.support-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.support-kicker { margin-bottom: 18px; }
.support-kicker::after { display: none; }

.support-copy > h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -1.7px;
}

.support-copy > h2 span { color: var(--orange); }

.support-description {
  max-width: 590px;
  margin: 24px 0 0;
  color: #c3cee0 !important;
  font-size: 17px;
  line-height: 1.55;
}

.support-features {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.support-feature {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 112px;
  padding: 18px;
  background: rgba(3, 20, 53, .7);
  border: 1px solid rgba(112, 151, 209, .35);
  border-radius: 17px;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.support-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--orange);
  font-size: 26px;
  font-weight: 800;
  border: 1px solid rgba(255, 101, 0, .38);
  border-radius: 14px;
  background: rgba(255, 101, 0, .07);
}

.support-feature h3 {
  margin: 0 0 6px;
  color: var(--white);
  font-size: 15px;
}

.support-feature p {
  margin: 0;
  color: #aebbd0 !important;
  font-size: 13px;
  line-height: 1.45;
}

.support-cta {
  min-width: 270px;
  margin-top: 26px;
  gap: 18px;
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(255, 101, 0, .25);
}

.support-cta span { font-size: 23px; line-height: 0; }

.support-art {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
}

.support-glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 119, 255, .24), rgba(255, 101, 0, .08) 45%, transparent 70%);
  filter: blur(7px);
}

.support-art-img {
  position: relative;
  z-index: 2;
  width: min(100%, 600px);
  max-height: 430px;
  object-fit: contain;
  transform: scale(1.04);
}

@media (max-width: 991px) {
  .contact-support-card {
    grid-template-columns: 1fr 1fr;
    min-height: 420px;
    padding: 36px 30px !important;
  }
  .support-features { grid-template-columns: 1fr; }
  .support-feature { min-height: 88px; }
  .support-copy > h2 { font-size: clamp(30px, 4.5vw, 42px); }
}

@media (max-width: 767px) {
  .contact-eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: 1.15px; }
  .contact-eyebrow::before { width: 18px; }
  .contact-hero-title { font-size: clamp(30px, 9vw, 42px); letter-spacing: -1.2px; }
  .contact-hero-subtitle { margin-top: 20px; font-size: 14px; }
  .desktop-break { display: none; }

  .contact-support-card {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    padding: 30px 20px !important;
  }
  .support-copy { align-items: center; text-align: center; }
  .support-kicker { font-size: 9px; }
  .support-copy > h2 { font-size: clamp(29px, 9vw, 40px); }
  .support-description { margin-top: 18px; font-size: 15px; }
  .support-features { grid-template-columns: 1fr; max-width: 520px; }
  .support-feature { text-align: left; }
  .support-cta { width: 100%; max-width: 360px; min-width: 0; }
}

@media (max-width: 420px) {
  .contact-hero-title { font-size: 29px; }
  .support-feature { padding: 15px; }
}
.support-icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  filter: none;
}

/* ===== Mobile refinement 2026-10-01 ===== */
@media (max-width: 767px){
  .contact-visit{display:flex !important;flex-direction:column;gap:22px;padding:24px 18px !important;margin-bottom:52px;border-radius:22px;}
  .visit-info{order:1;text-align:center;}
  .visit-building{order:2;width:100%;}
  .visit-details{gap:12px;}
  .visit-detail{padding:16px 14px;border-radius:16px;}
  .visit-info .btn{width:min(100%,320px);justify-content:center;margin-inline:auto;}
  .visit-building-img{width:100%;max-width:100%;height:auto !important;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:18px;}
}
@media (max-width: 420px){
  .contact-visit{padding:20px 14px !important;}
  .visit-building-img{aspect-ratio:1/1.05;}
}