/* =========================================================
   LAYOUT GERAL TOPÍSSIMA
   Header + Footer reutilizáveis
   Nova identidade: Azul + Laranja
   ========================================================= */

:root {

  --tg-ink: #18283a;
  --tg-muted: #687789;

  /* NOVA IDENTIDADE TOPÍSSIMA */
  --tg-orange: #f28c28;
  --tg-orange-bright: #ff8a12;
  --tg-orange-dark: #c9630c;
  --tg-orange-soft: #ffd0a3;
  --tg-orange-pale: #fff0e2;

  --tg-footer: #10283f;
  --tg-white: #ffffff;

}


/* =========================================================
   BASE
   ========================================================= */

.tg-header,
.tg-footer {
  box-sizing: border-box;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tg-header *,
.tg-footer * {
  box-sizing: border-box;
}

.tg-container {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.tg-header {

  position: relative;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.98);

  border-bottom:
    1px solid #e8edf2;

}


.tg-header-inner {

  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

}


/* =========================================================
   MARCA
   ========================================================= */

.tg-brand {

  display: inline-flex;
  align-items: center;

  gap: 11px;

  color: var(--tg-ink);

  text-decoration: none;

  flex: 0 0 auto;

}


/*
  Temporário:
  este bloco ainda recebe o "T" simples através do JS.

  Posteriormente será substituído pelo novo
  símbolo oficial TOPÍSSIMA.
*/

.tg-brand-mark {

  width: 42px;
  height: 42px;

  border-radius: 12px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(
      145deg,
      var(--tg-orange-bright),
      var(--tg-orange)
    );

  color: #ffffff;

  font-weight: 900;

  box-shadow:
    0 6px 16px rgba(242, 140, 40, 0.24);

}


.tg-brand-name {
  font-size: 17px;
  font-weight: 850;
  letter-spacing: .045em;
}

.tg-header .tg-brand-name {
  color: #173f74;
}

.tg-footer .tg-brand-name {
  color: #ffffff;
}


/* =========================================================
   NAVEGAÇÃO
   ========================================================= */

.tg-nav {

  display: flex;

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

  gap: 20px;

}


.tg-nav a {

  color: #33465a;

  text-decoration: none;

  font-size: 14px;

  font-weight: 650;

  white-space: nowrap;

  transition:
    color 0.15s ease,
    background 0.15s ease;

}


.tg-nav a:hover,
.tg-nav a[aria-current="page"] {

  color: var(--tg-orange);

}


/* =========================================================
   BOTÃO PUBLICAR
   ========================================================= */

.tg-publish {

  padding: 11px 17px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--tg-orange-bright),
      var(--tg-orange)
    );

  color: #ffffff !important;

  box-shadow:
    0 7px 18px rgba(242, 140, 40, 0.24);

}


.tg-publish:hover {

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #ff9938,
      var(--tg-orange-dark)
    );

}


/* =========================================================
   MENU MOBILE
   ========================================================= */

.tg-menu {

  display: none;

  width: 42px;
  height: 42px;

  border:
    1px solid #dce3ea;

  border-radius: 10px;

  background: #ffffff;

  color: var(--tg-ink);

  font-size: 22px;

  cursor: pointer;

}


/* =========================================================
   FOOTER
   ========================================================= */

.tg-footer {

  margin-top: 48px;

  color: #eaf1f7;

  background:
    linear-gradient(
      135deg,
      #10283f,
      #173c5c
    );

  border-top:
    3px solid var(--tg-orange);

}


/* =========================================================
   FOOTER — CONTEÚDO PRINCIPAL
   ========================================================= */

.tg-footer-main {

  display: grid;

  grid-template-columns:
    1.35fr
    0.72fr
    0.82fr
    1fr;

  gap: 34px;

  padding:
    34px 0 26px;

}


/* =========================================================
   FOOTER — MARCA
   ========================================================= */

.tg-footer .tg-brand {

  color: #ffffff;

  margin-bottom: 13px;

}


.tg-footer p {

  margin: 0;

  color: #c8d5e1;

  font-size: 13px;

  line-height: 1.65;

}


/* =========================================================
   FOOTER — TÍTULOS
   ========================================================= */

.tg-footer h3 {

  margin:
    0 0 12px;

  color: var(--tg-orange);

  font-size: 12px;

  letter-spacing: 0.11em;

  text-transform: uppercase;

}


/* =========================================================
   FOOTER — LINKS
   ========================================================= */

.tg-footer-links {

  display: grid;

  gap: 8px;

}


.tg-footer a {

  color: #e8eff5;

  text-decoration: none;

  font-size: 13px;

}


.tg-footer a:hover {

  color: var(--tg-orange-bright);

}


/* =========================================================
   WHATSAPP
   ========================================================= */

.tg-whatsapp {

  display: inline-flex;

  margin-top: 12px;

  padding:
    9px 12px;

  border:
    1px solid rgba(66, 214, 125, 0.45);

  border-radius: 9px;

  background:
    rgba(38, 186, 99, 0.14);

  color: #85efa9 !important;

  font-weight: 750;

}


/* =========================================================
   FOOTER INFERIOR
   ========================================================= */

.tg-footer-bottom {

  min-height: 54px;

  border-top:
    1px solid rgba(255, 255, 255, 0.10);

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

}


.tg-legal {

  display: flex;

  flex-wrap: wrap;

  gap: 16px;

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 980px) {

  .tg-menu {

    display: grid;

    place-items: center;

  }


  .tg-nav {

    display: none;

    position: absolute;

    inset:
      72px 16px auto;

    padding: 18px;

    border:
      1px solid #e1e7ed;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
      0 18px 40px rgba(20, 39, 58, 0.15);

    flex-direction: column;

    align-items: stretch;

    gap: 5px;

  }


  .tg-nav.tg-open {

    display: flex;

  }


  .tg-nav a {

    padding:
      10px 12px;

    border-radius: 8px;

  }


  .tg-nav a:hover,
  .tg-nav a[aria-current="page"] {

    background:
      var(--tg-orange-pale);

    color:
      var(--tg-orange-dark);

  }


  .tg-publish {

    text-align: center;

    margin-top: 5px;

  }


  .tg-footer-main {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .tg-container {

    width:
      min(
        100% - 24px,
        1180px
      );

  }


  .tg-header-inner {

    min-height: 64px;

  }


  .tg-nav {

    inset:
      64px 12px auto;

  }


  .tg-brand-name {

    font-size: 15px;

  }


  .tg-brand-mark {

    width: 38px;

    height: 38px;

    border-radius: 11px;

  }


  .tg-footer {

    margin-top: 34px;

  }


  .tg-footer-main {

    grid-template-columns: 1fr;

    gap: 22px;

    padding:
      28px 0 22px;

  }


  .tg-footer-bottom {

    align-items: flex-start;

    flex-direction: column;

    padding:
      17px 0;

  }

}


/* =========================================================
   MOBILE — FOOTER ALINHADO À ESQUERDA
   ========================================================= */

@media (max-width: 620px) {

  .tg-footer,
  .tg-footer * {

    text-align:
      left !important;

  }


  .tg-footer-main {

    align-items:
      start !important;

  }


  .tg-footer .tg-brand {

    justify-content:
      flex-start !important;

  }


  .tg-footer-links {

    align-items:
      flex-start !important;

  }


  .tg-whatsapp {

    align-self:
      flex-start !important;

  }


  .tg-footer-bottom {

    align-items:
      flex-start !important;

  }


  .tg-legal {

    justify-content:
      flex-start !important;

  }

}

/* =========================================================
   NOVO LOGO TOPÍSSIMA
   ========================================================= */

.tg-brand-mark {
  overflow: hidden;
  padding: 0;
  background: #10283f;
}

.tg-brand-logo-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
/* =========================================================
   FIM — LAYOUT GERAL TOPÍSSIMA
   ========================================================= */