/* =========================================================
   WebAdex - Estilos públicos
   Site: Fernanda Psicologia

   /home/fernandapsicolog/public_html/includes-public/styles.css
========================================================= */


/* =========================================================
   PALETA / VARIÁVEIS
========================================================= */

:root {

  /* Identidade */
  --psi-terracota: #bf704b;
  --psi-terracota-hover: #a75e3d;
  --psi-terracota-claro: #ead3c6;

  /* Marrons derivados da identidade */
  --psi-marrom-escuro: #34251f;
  --psi-marrom: #4d3930;
  --psi-marrom-medio: #6b574d;

  /* Texto */
  --psi-texto: #453730;
  --psi-texto-suave: #776861;

  /* Fundos */
  --psi-fundo: #ffffff;
  --psi-fundo-header: #fcfaf8;
  --psi-fundo-hero: #f8f1ec;
  --psi-fundo-suave: #fbf7f4;

  /* Bordas */
  --psi-borda: rgba(88, 61, 48, .15);
}


/* =========================================================
   ESTRUTURA GERAL
========================================================= */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;

  color: var(--psi-texto);
  background: var(--psi-fundo);
}


/* Títulos gerais */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--psi-marrom-escuro);
}


/* Links dentro do conteúdo */

.webadex-conteudo a:not(.btn),
.webadex-modulo a:not(.btn) {
  color: var(--psi-terracota-hover);
}

.webadex-conteudo a:not(.btn):hover,
.webadex-modulo a:not(.btn):hover {
  color: var(--psi-marrom);
}


/* Estrutura WebAdex */

.webadex-header {
  position: relative;

  z-index: 1000;
}

.webadex-main {
  min-height: 60vh;
}

.webadex-footer {
  font-size: .95rem;
}


/* =========================================================
   HEADER / LOGO / MENU
========================================================= */

.webadex-header.bg-light {
  background-color: var(--psi-fundo-header) !important;
}

.webadex-header {
  border-color: var(--psi-borda) !important;
}


/* Logo */

.webadex-header .navbar-brand img {
  display: block;

  width: auto;

  max-width: 200px;
  max-height: 50px;

  object-fit: contain;
}


/* Menu */

.webadex-header .nav-link {
  color: var(--psi-marrom);

  font-weight: 500;

  transition:
    color .15s ease,
    opacity .15s ease;
}

.webadex-header .nav-link:hover,
.webadex-header .nav-link:focus {
  color: var(--psi-terracota);
}


/* Menu mobile */

.webadex-header .navbar-toggler {
  border-color: var(--psi-borda);
}

.webadex-header .navbar-toggler:focus {
  box-shadow:
    0 0 0 .2rem rgba(191, 112, 75, .12);
}


/* =========================================================
   CONTEÚDO GERAL
========================================================= */

.webadex-conteudo img,
.webadex-modulo img {
  max-width: 100%;

  height: auto;
}

.webadex-conteudo iframe,
.webadex-modulo iframe {
  max-width: 100%;
}

.webadex-conteudo p:last-child,
.webadex-modulo p:last-child {
  margin-bottom: 0;
}


/* Lead vazio */

.webadex-conteudo > .lead:empty {
  display: none;
}


/* Espaço entre o Hero e o primeiro título do conteúdo */
.webadex-conteudo > h1:first-child {
  margin-top: 2rem;
}


/*
 * As seções da Home já estão dentro do container
 * principal do WebAdex.
 */
.webadex-conteudo .home-section > .container {
  max-width: 100%;

  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   TÍTULOS AUTOMÁTICOS DO WEBADEX
========================================================= */

/*
 * Mantemos H1 e título do artigo.
 * Apenas integramos visualmente com a identidade.
 */

.webadex-main header:has(+ article.webadex-conteudo) {
  margin-top: 1.75rem;

  margin-bottom: 1.25rem !important;
}

.webadex-main header:has(+ article.webadex-conteudo) h1 {
  color: var(--psi-marrom-escuro);

  font-size: clamp(1.9rem, 3.2vw, 2.65rem);

  line-height: 1.1;

  margin-bottom: 0 !important;
}


/* Título automático do artigo */

.webadex-conteudo > h2:first-child {
  color: var(--psi-marrom);

  font-size: clamp(1.3rem, 2vw, 1.65rem);

  line-height: 1.2;

  margin-bottom: 1.25rem !important;
}


/* =========================================================
   MÓDULOS DO SISTEMA
========================================================= */

.webadex-modulo {
  width: 100%;
}


/*
 * Bootstrap adiciona mb-4 ao módulo Topo.
 * Aqui removemos para não gerar espaço desnecessário.
 */
.webadex-modulo-topo {
  margin-bottom: 0 !important;
}

.webadex-modulo-lateral {
  position: relative;
}


/* =========================================================
   MENUS DO SISTEMA
========================================================= */

.menu-contextual .list-group-item {
  background: transparent;
}

.menu-rodape {
  background: var(--psi-fundo-suave);
}


/* =========================================================
   HERO
========================================================= */

.home-hero {
  position: relative;

  z-index: 0;

  padding-top: 2.4rem !important;
  padding-bottom: 2.4rem !important;

  scroll-margin-top: 90px;
}


/* Fundo do Hero em largura total */

.home-hero::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: var(--psi-fundo-hero);

  z-index: -1;

  pointer-events: none;
}


/* Nome */

.home-hero-name {
  color: var(--psi-marrom-medio);

  font-size: .82rem;

  font-weight: 600;

  letter-spacing: .065em;

  text-transform: uppercase;
}


/* Destaque principal */

.home-hero-location {
  color: var(--psi-marrom-escuro);

  font-size: clamp(1.8rem, 3vw, 2.4rem);

  line-height: 1.12;

  font-weight: 700;
}


/* Texto de apoio */

.home-hero-support {
  color: var(--psi-texto-suave);

  font-size: 1.05rem;

  line-height: 1.5;
}


/* =========================================================
   BOTÕES
========================================================= */

.btn-psi {
  color: #ffffff;

  background-color: var(--psi-terracota);

  border-color: var(--psi-terracota);

  font-weight: 500;

  border-radius: .55rem;
}

.btn-psi:hover,
.btn-psi:focus {
  color: #ffffff;

  background-color: var(--psi-terracota-hover);

  border-color: var(--psi-terracota-hover);
}

.btn-psi:focus-visible {
  outline: 3px solid rgba(191, 112, 75, .25);

  outline-offset: 2px;
}


/* Botão secundário Hero */

.home-hero .btn-outline-secondary {
  color: var(--psi-marrom-medio);

  border-color: rgba(77, 57, 48, .58);

  background:
    rgba(255, 255, 255, .35);

  border-radius: .55rem;
}

.home-hero .btn-outline-secondary:hover,
.home-hero .btn-outline-secondary:focus {
  color: #ffffff;

  border-color: var(--psi-marrom);

  background: var(--psi-marrom);
}


/* =========================================================
   SEÇÕES DA HOME
========================================================= */

.home-section {
  position: relative;

  z-index: 0;

  scroll-margin-top: 90px;
}


/* Texto */

.home-section p {
  color: var(--psi-texto);

  line-height: 1.65;
}

.home-section li {
  color: var(--psi-texto);

  line-height: 1.55;
}


/* H2 */

.home-section h2 {
  color: var(--psi-marrom-escuro);

  line-height: 1.15;

  margin-bottom: 1.5rem;
}


/* H3 */

.home-section h3 {
  color: var(--psi-marrom);

  line-height: 1.35;
}


/* Textos lead dentro das seções */

.home-section .lead {
  color: var(--psi-marrom-medio);
}


/* =========================================================
   FAIXAS DE FUNDO
========================================================= */

.home-band-soft {
  position: relative;

  z-index: 0;

  background: transparent;
}


/*
 * Faz a faixa atravessar toda a largura
 * sem alterar o container do conteúdo.
 */
.home-band-soft::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;

  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: var(--psi-fundo-suave);

  z-index: -1;

  pointer-events: none;
}


/* =========================================================
   LISTAS DE QUESTÕES
========================================================= */

.home-topics {
  padding-left: 0;

  list-style: none;
}

.home-topics li {
  position: relative;

  padding-left: 1.2rem;

  margin-bottom: .48rem;
}

.home-topics li::before {
  content: "•";

  position: absolute;

  left: 0;

  color: var(--psi-terracota);

  font-weight: 700;
}


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

.home-band-soft .card {
  border:
    1px solid var(--psi-borda) !important;

  background: #ffffff;

  box-shadow:
    0 5px 18px rgba(65, 43, 32, .055) !important;
}

.home-band-soft .card h3 {
  color: var(--psi-marrom);
}


/* Atendimento online */

.home-band-soft .bg-body.rounded-3 {
  border:
    1px solid var(--psi-borda);

  box-shadow:
    0 5px 18px rgba(65, 43, 32, .045);
}


/* Caixas da conversa inicial */

#conversa-inicial .border {
  border-color: var(--psi-borda) !important;

  background: #fffdfc;
}

#conversa-inicial strong {
  color: var(--psi-marrom);
}


/* =========================================================
   FAQ
========================================================= */

.home-faq {
  --bs-accordion-border-color: var(--psi-borda);
}


/* Caixa */

.home-faq .accordion-item {
  background:
    rgba(255, 255, 255, .78);
}


/* Pergunta */

.home-faq .accordion-button {
  color: var(--psi-marrom);

  background:
    rgba(255, 255, 255, .82);

  font-weight: 500;
}


/* Aberto */

.home-faq .accordion-button:not(.collapsed) {
  color: var(--psi-marrom-escuro);

  background: #f5e9e2;

  box-shadow: none;
}


/* Foco */

.home-faq .accordion-button:focus {
  border-color:
    rgba(191, 112, 75, .35);

  box-shadow:
    0 0 0 .2rem rgba(191, 112, 75, .11);
}


/* Resposta */

.home-faq .accordion-body {
  color: var(--psi-texto);

  line-height: 1.6;

  background: #fffdfc;
}


/* =========================================================
   CONTATO
========================================================= */

#contato h2 {
  color: var(--psi-marrom-escuro);
}

#contato strong {
  color: var(--psi-marrom);
}


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

.webadex-footer.bg-light {
  background:
    var(--psi-fundo-header) !important;
}

.webadex-footer {
  color: var(--psi-texto-suave);

  border-color:
    var(--psi-borda) !important;
}

.webadex-footer strong {
  color: var(--psi-marrom);
}


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

.whatsapp-float {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 99999;
}

.whatsapp-float a {
  display: inline-flex;

  align-items: center;

  gap: .6rem;

  padding: .9rem 1.2rem;

  background: #25D366;

  color: #ffffff !important;

  font-weight: 700;

  line-height: 1;

  border-radius: 999px;

  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(48, 35, 29, .20);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.whatsapp-float a:hover {
  color: #ffffff !important;

  text-decoration: none;

  transform: translateY(-1px);

  box-shadow:
    0 12px 28px rgba(48, 35, 29, .25);
}

.whatsapp-float i {
  font-size: 1.45rem;

  line-height: 1;

  flex-shrink: 0;
}


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

@media (max-width: 991.98px) {

  .home-hero {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }


  .home-section {
    padding-top: 2.6rem !important;
    padding-bottom: 2.6rem !important;
  }


  .webadex-main header:has(+ article.webadex-conteudo) {
    margin-top: 1.5rem;
  }

}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 575.98px) {

  .webadex-header .navbar-brand img {
    max-width: 170px;

    max-height: 44px;
  }


  .home-hero {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }


  .home-hero-location {
    font-size: 1.75rem;
  }


  .home-hero-support {
    font-size: 1rem;
  }


  /* CTAs fáceis de tocar */

  .home-hero .btn {
    width: 100%;
  }


  #contato .btn {
    width: 100%;
  }


  /* Seções */

  .home-section {
    padding-top: 2.2rem !important;
    padding-bottom: 2.2rem !important;
  }


  .home-section h2 {
    margin-bottom: 1.2rem;
  }


  .home-section h3 {
    margin-top: 1.4rem;
  }


  /* Listas */

  .home-topics li {
    margin-bottom: .55rem;
  }


  /* FAQ */

  .home-faq .accordion-button {
    padding: 1rem;

    font-size: .98rem;

    line-height: 1.35;
  }


  .home-faq .accordion-body {
    padding: 1rem;

    font-size: .96rem;
  }


  /* WhatsApp */

  .whatsapp-float {
    right: 12px;
    bottom: 12px;
  }


  .whatsapp-float a {
    padding: .75rem 1rem;

    font-size: .9rem;
  }


  .whatsapp-float i {
    font-size: 1.3rem;
  }

}


/* =========================================================
   CELULARES PEQUENOS
========================================================= */

@media (max-width: 380px) {

  .webadex-header .navbar-brand img {
    max-width: 150px;
  }


  .home-hero-location {
    font-size: 1.6rem;
  }


  .whatsapp-float a {
    padding: .7rem .85rem;

    font-size: .85rem;
  }

}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  .whatsapp-float a,
  .webadex-header .nav-link {
    transition: none;
  }

}

/* =========================================================
   QUEM SOU - FOTO
========================================================= */

.quem-sou-foto-wrap {
  display: flex;
  justify-content: center;
}

.quem-sou-foto {
  display: block;

  width: 100%;
  max-width: 340px;

  aspect-ratio: 4 / 5;

  object-fit: cover;
  object-position: center 24%;

  border-radius: 1rem;

  box-shadow:
    0 8px 24px rgba(65, 43, 32, .10);
}


/* Desktop */

@media (min-width: 992px) {

  .quem-sou-foto-wrap {
    justify-content: flex-end;

    padding-top: .25rem;
  }

}


/* Celular / tablet */

@media (max-width: 991.98px) {

  .quem-sou-foto {
    max-width: 320px;

    aspect-ratio: 1 / 1;

    object-position: center 22%;

    margin-bottom: .75rem;
  }

}