/* ==========================================================
   TONELLI & CYPRIANO ADVOGADOS
   CSS PRINCIPAL - LANDING PAGE
========================================================== */


/* ==========================================================
   01 - IMPORTAÇÃO DE FONTES
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');


/* ==========================================================
   02 - VARIÁVEIS DE CORES
========================================================== */
:root {
  --black: #151411;
  --gold: #b58a46;
  --cream: #f8f6f2;
  --muted: #efebe5;
  --ink: #26231f;
}


/* ==========================================================
   03 - RESET E CONFIGURAÇÕES GERAIS
========================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font: 16px/1.75 'DM Sans', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.container {
  max-width: 1160px;
  padding: 0 24px;
  margin: auto;
}


/* ==========================================================
   04 - CABEÇALHO / HEADER
========================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #151411;
  box-shadow: 0 4px 25px #0002;
}

/* ALTURA E ALINHAMENTO DO MENU */
.nav {
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}

/* LOGOMARCA */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* TAMANHO DA LOGOMARCA */
.brand img {
  display: block;
  width: 340px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* MENU DE NAVEGAÇÃO */
.nav nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav nav a {
  font-size: 16px;
  font-weight: 500;
  color: #e7e3db;
}

.nav nav a:hover {
  color: var(--gold);
}


/* ==========================================================
   05 - BOTÕES GERAIS
========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #17130e;
  padding: 14px 24px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  transition: .2s;
}

.btn:hover {
  background: #d4ac68;
}


/* BOTÃO COM BORDA */
.btn-outline {
  background: transparent;
  color: #e6c58d;
  border: 1px solid var(--gold);
  transition: all .2s ease;
}

/* EFEITO AO PASSAR O MOUSE */
.btn-outline:hover {
  background: var(--gold);
  color: #151411;
  border-color: var(--gold);
}


/* ==========================================================
   06 - BANNER PRINCIPAL / HERO
========================================================== */
.hero {
  min-height: 660px;
  display: flex;
  align-items: center;
  color: #fff;

  background:
    linear-gradient(
      90deg,
      rgba(17, 16, 15, 0.92) 0%,
      rgba(17, 16, 15, 0.72) 40%,
      rgba(17, 16, 15, 0.15) 100%
    ),
    url('../img/banner.jpg') center center / cover no-repeat;
}

/* ==========================================================
   07 - TIPOGRAFIA / TÍTULOS
========================================================== */
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  line-height: 1.2;
}

h1 {
  font-size: clamp(45px, 6vw, 76px);
  max-width: 820px;
  margin-bottom: 25px;
}

h1 em,
h2 em {
  color: var(--gold);
  font-weight: 500;
}

h2 {
  font-size: clamp(35px, 4vw, 51px);
  margin-bottom: 25px;
}


/* TEXTO DO BANNER */
.hero p {
  max-width: 540px;
  color: #d7d2c9;
  font-size: 17px;
}


/* ==========================================================
   08 - BOTÕES E INFORMAÇÕES DO BANNER
========================================================== */
.actions {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.text-link {
  color: #f1e9dc;
  font-size: 13px;
  font-weight: 700;
}


/* LOCALIDADES */
.hero-meta {
  font-size: 12px;
  letter-spacing: .6px;
  color: #d6cec0;
  margin-top: 90px;
}

.hero-meta span {
  padding: 0 14px;
  color: var(--gold);
}


/* ==========================================================
   09 - SEÇÕES GERAIS
========================================================== */
.section {
  padding: 105px 0;
}


/* ==========================================================
   10 - QUEM SOMOS / SOBRE O ESCRITÓRIO
========================================================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 85px;
  align-items: center;
}

.two-col p,
.section-head p,
.person p {
  color: #69645d;
}


/* IMAGEM DO ESCRITÓRIO */
.image-panel {
  position: relative;
}

.image-panel img {
  height: 470px;
}

.image-label {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--black);
  color: #e9c58a;
  padding: 18px 25px;
  font-family: Georgia, serif;
  font-size: 20px;
}


/* LINK INSTITUCIONAL */
.dark-link {
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 5px;
}


/* ==========================================================
   11 - ÁREAS DE ATUAÇÃO
========================================================== */
.section-muted {
  background: var(--cream);
}

.section-head {
  max-width: 720px;
  margin-bottom: 45px;
}

.section-head p {
  max-width: 580px;
}


/* GRID DOS SERVIÇOS */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}


/* CARD INDIVIDUAL */
.service {
  background: white;
  padding: 35px 30px;
  border: 1px solid #e8e3dc;
  min-height: 250px;
}

.service > span {
  font: 17px Georgia, serif;
  color: var(--gold);
}

.service h3 {
  font: 500 23px/1.3 'Playfair Display', serif;
  margin: 22px 0 12px;
}

.service p {
  color: #6b655e;
  font-size: 14px;
  line-height: 1.75;
}

/* ==========================================================
   12 - NOSSA EQUIPE / ADVOGADOS
========================================================== */

/* GRID COM TRÊS COLUNAS */
.team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 25px;
  align-items: stretch;
}


/* CARD DO PROFISSIONAL */
.person {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}


/* FOTOGRAFIAS VERTICAIS - 1080 X 1174 */
.person img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1174;
  object-fit: cover;
  object-position: center top;
}


/* INFORMAÇÕES DO PROFISSIONAL */
.person .person-info {
  padding: 28px 25px 32px;
  flex: 1;
}


/* NOME DO ADVOGADO */
.person h3 {
  font: 500 23px/1.3 'Playfair Display', serif;
  margin-bottom: 12px;
}


/* INSCRIÇÃO NA OAB */
.person .oab {
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  margin-bottom: 18px;
}


/* DESCRIÇÃO PROFISSIONAL */
.person p {
  color: #69645d;
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 0;
}


/* ==========================================================
   13 - RESPONSIVIDADE / TABLETS
   TELAS COM LARGURA ATÉ 900PX
========================================================== */
@media (max-width: 900px) {

  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }

}


/* ==========================================================
   14 - RESPONSIVIDADE / CELULARES
   TELAS COM LARGURA ATÉ 650PX
========================================================== */
@media (max-width: 650px) {

  .team {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .person img {
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 1174;
    object-fit: cover;
    object-position: center top;
  }

  .person .person-info {
    padding: 25px;
  }

  .person h3 {
    font-size: 25px;
  }

  .person p {
    font-size: 14px;
  }

}

/* ==========================================================
   15 - FAIXA DE CHAMADA PARA ATENDIMENTO
========================================================== */
.band {
  background: var(--black);
  color: white;
  padding: 65px 0;
}

.band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.band h2 {
  font-size: 39px;
  margin-bottom: 12px;
}

.band p {
  color: #c9c2b7;
  margin-bottom: 0;
}


/* BOTÃO CLARO */
.btn-light {
  background: #e2c28b;
}


/* ==========================================================
   16 - CONTATO E LOCALIZAÇÃO
========================================================== */
.locations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}


/* CARD DAS UNIDADES */
.locations article {
  border: 1px solid #e5e0d8;
  padding: 35px;
}

.locations h3 {
  font: 500 29px 'Playfair Display', serif;
}

.locations h3 small {
  display: block;
  font: 600 11px 'DM Sans', sans-serif;
  letter-spacing: 2px;
  color: var(--gold);
  text-transform: uppercase;
  margin-top: 8px;
}


/* ENDEREÇOS E CONTATOS */
.locations p {
  color: #5e5a54;
}

.locations p a:hover,
.social a:hover {
  color: var(--gold);
}


/* ==========================================================
   17 - REDES SOCIAIS
========================================================== */
.social {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 45px;
  border-top: 1px solid #eee;
  padding-top: 25px;
  font-size: 13px;
}

.social span {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
}


/* ==========================================================
   18 - RODAPÉ / FOOTER
========================================================== */
footer {
  background: var(--black);
  color: #ddd4c6;
  padding: 45px 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}


/* IDENTIDADE DO ESCRITÓRIO */
.footer-inner strong {
  display: block;
  color: var(--gold);
  font: 24px Georgia, serif;
}

.footer-inner small {
  font-size: 11px;
}


/* TEXTO INSTITUCIONAL */
.footer-inner p {
  margin: 0;
  font-size: 12px;
}


/* ==========================================================
   19 - BOTÃO FLUTUANTE DO WHATSAPP
========================================================== */
.whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: #216b46;
  color: #fff;
  border-radius: 30px;
  padding: 12px 19px;
  z-index: 15;
  box-shadow: 0 5px 20px #0004;
  font-size: 13px;
  font-weight: 700;
}


/* ==========================================================
   20 - RESPONSIVIDADE / TABLETS
   TELAS COM LARGURA ATÉ 900PX
========================================================== */
@media (max-width: 900px) {

  /* MENU */
  .nav nav {
    display: none;
  }

  /* SEÇÃO QUEM SOMOS */
  .two-col {
    gap: 35px;
  }

  /* CARDS DOS SERVIÇOS */
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* BOTÃO DO CABEÇALHO */
  .nav-cta {
    display: none;
  }

}


/* ==========================================================
   21 - RESPONSIVIDADE / CELULARES
   TELAS COM LARGURA ATÉ 650PX
========================================================== */
@media (max-width: 650px) {

  /* CABEÇALHO */
  .nav {
    height: 70px;
  }

  .brand {
    font-size: 25px;
  }

  .brand span {
    font-size: 10px;
    letter-spacing: .6px;
  }


  /* BANNER PRINCIPAL */
  .hero {
    min-height: 590px;
  }

  .hero-meta {
    margin-top: 60px;
  }

  .hero-meta span {
    padding: 0 5px;
  }


  /* ESPAÇAMENTO DAS SEÇÕES */
  .section {
    padding: 65px 0;
  }


  /* GRIDS EM COLUNA ÚNICA */
  .two-col,
  .team,
  .locations,
  .cards {
    grid-template-columns: 1fr;
  }


  /* IMAGEM DO ESCRITÓRIO */
  .image-panel img {
    height: 300px;
  }


  /* FOTOGRAFIAS DOS ADVOGADOS */
  .person img,
  .photo-placeholder {
    height: 340px;
  }


  /* FAIXA DE ATENDIMENTO */
  .band-inner {
    display: block;
  }

  .band .btn {
    margin-top: 25px;
  }


  /* CARDS DE LOCALIZAÇÃO */
  .locations article {
    padding: 25px;
  }


  /* RODAPÉ */
  .footer-inner {
    display: block;
  }

  .footer-inner > * {
    margin-bottom: 18px;
  }


  /* BOTÕES DO BANNER */
  .actions {
    gap: 22px;
  }

}


/* ==========================================================
   22 - MENU MOBILE / ABERTURA E FECHAMENTO
========================================================== */

/* BOTÃO OCULTO NO COMPUTADOR */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}

.menu-toggle span {
  display: block;
  width: 27px;
  height: 2px;
  background: var(--gold);
  transition: .3s ease;
}

/* TABLETS E CELULARES */
@media (max-width: 900px) {

  .header {
    z-index: 100;
  }

  .nav {
    position: relative;
    min-height: 90px;
    height: auto;
  }

  .brand img {
    width: 240px;
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  /* MENU ABERTO */
  .nav nav.active {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 20px 25px;
    background: var(--black);
    box-shadow: 0 15px 25px #0003;
    z-index: 101;
  }

  .nav nav a {
    display: block;
    padding: 14px 5px;
    border-bottom: 1px solid #ffffff15;
  }

  /* ANIMAÇÃO DO ÍCONE */
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

}

/* CELULARES */
@media (max-width: 650px) {

  .nav {
    min-height: 80px;
  }

  .brand img {
    width: 200px;
  }

}


/* ==========================================================
   CRÉDITOS DE DESENVOLVIMENTO - AGÊNCIA NEW
========================================================== */

.footer-agencia {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.footer-agencia span {
  font-size: 10px;
  font-weight: 400;
  color: #a9a39a;
  white-space: nowrap;
}

.footer-agencia a {
  display: inline-flex;
  align-items: center;
}

.footer-agencia img {
  display: block;
  width: 135px;
  height: auto;
  object-fit: contain;
  transition: opacity .2s ease;
}

.footer-agencia a:hover img {
  opacity: .75;
}

/* AJUSTE PARA CELULARES */
@media (max-width: 650px) {

  .footer-agencia {
    justify-content: center;
    margin-top: 25px;
  }

  .footer-agencia img {
    width: 120px;
  }

}


/* ==========================================================
   FIM DO CSS PRINCIPAL
   TONELLI & CYPRIANO ADVOGADOS
========================================================== */