/* --- RESET E GERAL --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #EDEDED;
  line-height: 1.6;
}

/* --- HEADER E NAV --- */
header {
  width: 100%;
  background-color: #fff;
  padding: 15px 0;
  position: fixed;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-container {
  width: 90%;
  max-width: 1400px; /* Limite maior para telas ultra-wide */
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-menu li a{
  transition: ease-in-out all 0.2s;
}
.nav-menu li a:hover{
  color: #6900ff;
}

.logo img {
  height: 45px; /* Aumentei um pouco para visibilidade */
  width: auto;
}

/* --- BOTÃO CONTATO (ESTILO BASE) --- */
.header-btn {
  background-color: #8e67b5;
  color: white !important;
  border: none;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  border-radius: 4px;
  transition: 0.3s;
  cursor: pointer;
  white-space: nowrap; /* Evita que o texto do botão quebre */
  transition: ease-in-out all 0.2s;
}

.header-btn:hover{
  background-color: #653ba0;
}

/* --- BOTÃO HAMBURGUER --- */
.btn-hamburguer {
  display: flex;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

#hamburger {
  display: block;
  width: 25px;
  border-top: 2px solid #6900ff;
  position: relative;
}

#hamburger::after,
#hamburger::before {
  content: "";
  display: block;
  width: 25px;
  height: 2px;
  background: #6900ff;
  margin-top: 5px;
  transition: 0.3s;
  position: relative;
}

/* --- MENU MOBILE --- */
@media (max-width: 1023px) {
  .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    background: #fff;
    height: 0;
    transition: 0.5s;
    z-index: 1000;
    visibility: hidden;
    overflow: hidden;
  }

  .nav-container.active .nav-menu {
    height: 100vh;
    visibility: visible;
  }

  .nav-container.active #hamburger {
    border-top-color: transparent;
  }
  .nav-container.active #hamburger::before {
    transform: rotate(135deg);
  }
  .nav-container.active #hamburger::after {
    transform: rotate(-135deg);
    top: -7px;
  }

  .nav-menu li {
    list-style: none;
    width: auto;
    text-align: center;
  }

  .nav-menu li a {
    text-decoration: none;
    color: black;
    font-size: 1.2rem;
    display: block;
    transition: ease-in-out all 0.2s;
  }

  .nav-menu li a:hover{
    color: #6900FF;
  }

  .nav-menu .header-btn {
    margin-top: 10px;
    width: auto;
    min-width: 180px;
    transition: ease-in-out all 0.2s;
  }

  .nav-menu .header-btn:hover{
    background-color: #7233c9;
  }
}

/* --- HERO SECTION --- */
.hero {
  background-color: #ededed;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 120px 20px 40px 20px;
}

.hero-subtitle {
  color: #6900ff;
  font-weight: 500;
  font-size: 0.9rem;
}

.hero-title {
  font-family: "Montaga", serif;
  font-size: 1.8rem;
  margin-top: 10px;
}

.hero-line {
  height: 1px;
  width: 100%;
  margin: 20px 0;
  background-color: #6900ff;
}

.hero-btn {
  display: inline-block;
  color: #000;
  border: 1px solid #6900ff;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin: 20px 0;
  transition: ease-in-out all 0.2s;
}

.hero-btn:hover{
  border-radius: 15px;
}

.hero-image {
  flex: 1;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.hero-image img {
  width: 100%;
  max-width: 320px;
  height: auto;
}

/* --- SEÇÃO SOBRE, HISTORIA E CARDS (Mantidos como estavam) --- */
.about {
  padding: 60px 20px;
  text-align: center;
  background-color: #ededed;
}
.section-title {
  font-family: "Montaga", serif;
  font-size: 2rem;
  color: #000;
  text-align: center;
  font-weight: 550;
}
.title-line {
  height: 1px;
  width: 150px;
  background-color: #6900ff;
  margin: 15px auto 30px auto;
}
.highlight-box {
  background-color: #f2f2f2;
  padding: 30px 20px;
  border-radius: 4px;
  margin-bottom: 25px;
}
.highlight-box p {
  color: #6900ff;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
}
.secondary-text {
  font-size: 0.95rem;
  color: #444;
  margin-bottom: 40px;
  text-align: center;
}
.imagem-container img {
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.historia-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
  background-color: #ededed;
}
.line-decorative {
  height: 1px;
  width: 90%;
  background-color: #6900ff;
  margin-bottom: 20px;
}
.historia-content {
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 4px;
  margin-top: 5%;
  border-left: 4px solid #6900ff;
}
.historia-content p {
  color: #333;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}
.cards-container {
  padding: 40px 20px 60px 20px;
  background-color: #ededed;
}
#cards {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 2rem;
  border: 1px solid rgba(106, 0, 255, 0.774);
  border-radius: 8px;
  padding: 30px;
  background-color: #fff;
}
#cards img {
  width: 80px;
  height: auto;
}
#cards h1 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #6900ff;
  text-align: center;
}
#cards p {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
}

/* --- EQUIPE E LOCALIZAÇÃO (Estilos Mobile mantidos) --- */
.equipe,
.equipe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ededed;
}
.card-claudio,
.card-joao {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.img-claudio,
.img-joao {
  width: 100%;
  max-width: 320px;
  margin-bottom: 1.5rem;
  border-radius: 15px;
  box-shadow: 0px 0px 10px #757575;
}

.subcaixa-claudio{
  width: 100%;
}

.subcaixa-joao{
  width: 83%;
}

.subcaixa-claudio,
.subcaixa-joao {
  background-color: #7d57b2;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 5%;
  font-size: 13px;
}

.prof-info-side {
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.prof-name{
    margin-bottom: 3%;
  }

.prof-info-side .prof-name{
  text-align: center;
}
.prof-qualifications li {
  margin-bottom: 5%;
  list-style: none;
}

strong{
  color: #4500a7;
}

.esquerda-side-prof{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.localizacao {
  width: 100%;
  padding: 60px 20px;
  background-color: #ededed;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-loc {
  border: 1px solid #6a00ffbb;
  border-radius: 15px;
  padding: 20px;
  text-align: center;
  background: #fff;
}
.container-img-loc img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 3px 3px 10px #bbbbbb;
  transition: ease-in-out all 0.3s;
}

.container-img-loc img:hover{
  box-shadow: 5px 5px 0px #9a00f3;
}
.btn-loc {
  display: block;
  width: 100%;
  padding: 12px;
  background: #7d57b2;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  margin-top: 20px;
  transition: ease-in-out all 0.2s;
}

.btn-loc:hover{
  background: #893bf5;
  cursor: pointer;
}

.lista{
  list-style: none;
}

.decoracao-loc{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  margin: 3% 0%;
}
.line-decorative-loc{
  width: 35%;
  height: 1px;
  background-color: #6900FF;
}

/* --- LIVROS E PUBLICAÇÕES --- */
.livros {
  padding: 70px 20px;
  background: #fff;
}

.livros-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.livros-eyebrow {
  display: block;
  color: #6900ff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.livros .line-decorative {
  width: 150px;
  margin: 15px auto 25px;
}

.livros-intro {
  max-width: 680px;
  color: #555;
  font-size: 0.95rem;
  margin: 0 auto 38px;
}

.livros-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.livro-card {
  background: #ededed;
  border: 1px solid rgba(105, 0, 255, 0.22);
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(28, 12, 47, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.livro-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 30px rgba(64, 20, 105, 0.17);
}

.livro-capa {
  height: 300px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #d8d0e2, #f7f7f7);
}

.livro-capa img {
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  box-shadow: 7px 9px 18px rgba(0, 0, 0, 0.24);
}

.livro-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.livro-info h3 {
  color: #29212f;
  font-family: "Montaga", serif;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 10px;
}

.livro-info p {
  color: #6b4c89;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 23px;
}

.livro-info a {
  width: fit-content;
  margin-top: auto;
  padding: 10px 0;
  border-bottom: 1px solid #6900ff;
  color: #4c128f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
}

.livro-info a:hover {
  color: #8e67b5;
  letter-spacing: 0.1em;
}

.footer-simples {
    background-color: #333; /* Um cinza escuro para dar contraste e seriedade */
    padding: 30px 20px;
    width: 100%;
}

.footer-container-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Espaço entre o copyright e sua assinatura */
    text-align: center;
}

.footer-container-clean p {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 400;
    margin: 0;
}

.dev-signature {
    color: #bbb !important; /* Cor mais suave para a assinatura não brilhar mais que o copyright */
    font-size: 0.75rem !important;
}

.dev-signature strong {
    color: #ffffff; /* Um toque do roxo da marca no seu nome */
}

/* =============================================
   --- CONFIGURAÇÃO DESKTOP (CORRIGIDA) --- 
   ============================================= */

@media (min-width: 1024px) {
  .btn-hamburguer {
    display: none;
  }

  /* Centralização da Nav: Logo (E) - Links (C) - Botão (D) */
  .nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* Equilibra os espaços laterais */
  }

  .logo {
    flex: 1; /* Ocupa 1 parte do espaço na esquerda */
    display: flex;
    justify-content: flex-start;
  }

  .nav-menu {
    flex: 2; /* Ocupa o dobro de espaço no meio */
    display: flex;
    flex-direction: row;
    justify-content: center; /* CENTRALIZA OS LINKS NO MEIO */
    align-items: center;
    gap: 25px;
    position: static;
    height: auto;
    visibility: visible;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  /* O botão dentro da lista agora pula para a direita */
  .nav-menu li:last-child {
    margin-left: auto; /* Truque mágico: empurra o último item (o botão) para o fim */
  }

  /* Reset de estilos de lista para desktop */
  .nav-menu li {
    list-style: none;
  }
  .nav-menu li a {
    font-size: 0.95rem;
    color: #000;
    text-decoration: none;
    font-weight: 500;
  }

  /* --- HERO DESKTOP --- */
  .hero {
    padding: 0;
    justify-content: center;
  }

  .hero-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    width: 100%;
    padding: 100px 20px 0 20px;
  }

  .hero-content {
    flex: 1.2;
    text-align: left;
  }

  .hero-title {
    font-size: 3.2rem;
    line-height: 1.1;
  }

  .hero-image {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
  }

  .hero-image img {
    max-width: 480px; /* AGORA A IMAGEM APARECE GRANDE */
    width: 100%;
    height: auto;
  }

  /* --- OUTROS AJUSTES DESKTOP --- */
  .cards-container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  #cards {
    flex: 1;
  }

  .card-claudio,
  .card-joao {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    max-width: 1100px;
    margin: 50px auto;
  }

  .prof-info-side {
    align-items: flex-start;
  }

  .card-loc {
    flex-direction: row;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
  }
  .container-img-loc {
    flex: 1;
  }
}


@media (min-width: 1024px) {
    /* --- SEÇÃO SOBRE --- */
    .about {
        padding: 100px 20px; /* Aumenta o respiro vertical */
        background-color: #EDEDED; /* Fundo branco conforme o Figma */
    }

    .about-container {
        max-width: 900px; /* Centraliza o conteúdo em uma coluna mais elegante */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Título "Sobre nós" */
    .section-title {
        font-size: 3rem; /* Tamanho maior no desktop */
        margin-bottom: 10px;
    }

    .title-line {
        width: 350px; /* Linha mais longa conforme o design */
        margin-bottom: 50px;
    }

    /* Caixa Cinza com Texto Roxo */
    .highlight-box {
        background-color: #fff; /* Cinza claro de fundo */
        padding: 40px 60px;
        border-radius: 0; /* No Figma as bordas são retas */
        margin-bottom: 40px;
        width: 100%;
    }

    .highlight-box p {
        color: #6900FF;
        font-size: 1.15rem;
        line-height: 1.6;
        font-weight: 500;
        text-align: center; /* Centralizado conforme imagem */
    }

    /* Texto secundário abaixo da caixa */
    .secondary-text {
        font-size: 1.1rem;
        max-width: 750px;
        margin: 0 auto 60px auto;
        color: #000;
        font-weight: 500;
    }

    /* Container da Imagem Única */
    .imagem-container {
        width: 100%;
        max-width: 750px; 
        padding: 20px; 
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
    }

    .imagem-container img {
        width: 100%;
        height: auto;
        border-radius: 15px; 
        box-shadow: black 3px 3px 10px;
    }
}

@media (min-width: 1024px){
  /* --- SEÇÃO EQUIPE ---*/

  .esquerda-side-prof{
    width: 60%;
  }
  .img-claudio{
    width: 100%;
  }

  .subcaixa-claudio{
    width: auto;
    padding: 5%;
  }

  .prof-info-side{
    align-items: center;
  }

  .prof-name{
    margin-bottom: 3%;
  }

}

@media (min-width: 1024px) {
    /* --- SEÇÃO HISTÓRIA --- */
    .historia {
        padding: 100px 20px;
        background-color: #EDEDED;
    }

    .historia-container {
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
    }

    /* Título e Linha Decorativa */
    .historia .section-title {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .line-decorative {
        width: 350px;
        height: 2px;
        background-color: #6900FF;
        margin: 0 auto 50px auto;
    }

    /* Caixa Cinza de Destaque (Igual ao 'Sobre') */
    .historia-content {
        background-color: #fff; 
        padding: 60px 80px;
        margin-bottom: 80px;
        width: 100%;
    }

    .historia-content p {
        color: #6900FF; /* Texto Roxo conforme sua preferência */
        font-size: 1.15rem;
        line-height: 1.8;
        font-weight: 500;
        text-align: center;
    }

    /* Grid de Cards (Os 3 pilares) */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
        gap: 30px;
        justify-content: center;
    }

    /* Estilização dos Cards individuais */
    #cards {
        border: 1px solid #6900FF; /* Borda roxa fina do Figma */
        padding: 40px 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease;
    }

    #cards:hover {
        transform: translateY(-10px); /* Efeito suave ao passar o mouse */
    }

    #cards img {
        width: 80px; /* Ajuste o tamanho do ícone circular */
        height: auto;
        margin-bottom: 25px;
    }

    #cards h1 {
        font-size: 1.2rem;
        color: #333;
        margin-bottom: 20px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    #cards p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: #555;
        text-align: center;
    }
}

@media (min-width: 1024px){
  /* --- LOCALIZACAO ---*/

  .titulo-loc{
    text-align: center;
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
  }

  .container-img-loc{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .container-img-loc img{
    width: 50%;
    margin: 2% 0%;
  }

  .lista{
   text-align: center;
   margin: 2% 0%;
   font-weight: 550;
   color: #6900FF;
  }

  .btn-loc-div{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .btn-loc{
    width: 50%;
    text-align: center;
  }
}

.footer-contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: #bca7d7; font-size: 0.82rem; }
.footer-contacts a { color: #d8c5ee; text-decoration: none; transition: color 0.2s ease; }
.footer-contacts a:hover { color: #fff; }

/* --- MODAL DE CONTATO --- */
.contact-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
.contact-modal.is-open { opacity: 1; visibility: visible; }
.contact-modal-backdrop { position: absolute; inset: 0; background: rgba(24, 13, 34, 0.68); backdrop-filter: blur(4px); }
.contact-modal-card { position: relative; z-index: 1; width: min(100%, 520px); padding: 42px 28px 30px; background: #fff; border-top: 4px solid #6900ff; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); text-align: center; transform: translateY(14px); transition: transform 0.25s ease; }
.contact-modal.is-open .contact-modal-card { transform: translateY(0); }
.contact-modal-close { position: absolute; top: 10px; right: 14px; width: 34px; height: 34px; border: 0; background: transparent; color: #5e4b6b; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.contact-modal-eyebrow { display: block; margin-bottom: 8px; color: #6900ff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }
.contact-modal-card h2 { font-family: "Montaga", serif; font-size: 1.8rem; font-weight: 400; line-height: 1.2; }
.contact-modal-card > p { margin: 13px auto 25px; color: #555; font-size: 0.92rem; max-width: 390px; }
.contact-options { display: grid; gap: 12px; }
.contact-option { display: grid; grid-template-columns: 40px 1fr auto; gap: 13px; align-items: center; padding: 14px; border: 1px solid #dfd5ea; color: #33273b; text-align: left; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; }
.contact-option:hover { border-color: #8e67b5; background: #faf8fc; transform: translateX(4px); }
.contact-option-icon { display: grid; place-items: center; width: 40px; height: 40px; background: #efe8f7; color: #6900ff; border-radius: 50%; font-size: 1.2rem; font-weight: 700; }
.contact-option strong, .contact-option small { display: block; }
.contact-option strong { font-size: 0.9rem; }
.contact-option small { color: #6e6175; font-size: 0.72rem; overflow-wrap: anywhere; }
.contact-option b { color: #6900ff; font-size: 1.15rem; }
body.modal-open { overflow: hidden; }

@media (min-width: 700px) {
  .livros-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .livros {
    padding: 100px 20px;
  }

  .livros .section-title {
    font-size: 3rem;
  }

  .livros .line-decorative {
    width: 350px;
    height: 2px;
    margin-bottom: 30px;
  }

  .livros-intro {
    font-size: 1.05rem;
    margin-bottom: 50px;
  }

  .livros-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  .livro-capa {
    height: 340px;
  }
}