/* ===== Reset e variáveis ===== */
:root{
  --c-primary:#7C9DB0;
  --c-primary-2:#7A9CAF;
  --c-bg:#EBECF0;
  --c-bg-2:#EFF0F2;
  --c-bg-3:#EAEBEF;
  --c-text:#222;
  --c-muted:#555;
  --radius:14px;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --maxw:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--c-text); background:#fff;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

/* ===== Layout base ===== */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.prose h1,.prose h2,.prose h3{line-height:1.25}
.prose p{margin:0 0 1rem}
.prose ul, .prose ol{padding-left:1.2rem}
img{max-width:100%;height:auto;display:block}

/* ===== Botões ===== */
.btn-primary,.btn-secondary,.wa-btn{
  display:inline-block;padding:.8rem 1.1rem;border-radius:999px;text-decoration:none;
  transition:.2s box-shadow, .2s transform; font-weight:600
}
.btn-primary,.wa-btn{background:var(--c-primary);color:#fff;border:1px solid var(--c-primary)}
.btn-primary:hover,.wa-btn:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--c-primary);border:1px solid var(--c-primary)}
.btn-secondary:hover{box-shadow:var(--shadow);transform:translateY(-1px)}

/* ===== Header fixo ===== */
#header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--c-bg-3);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}

/* Logo maior no desktop */
.logo img {
  height: 95px;   /* dobrado em relação ao original */
  width: auto;
}

/* Ajustes específicos para telas menores */
@media (max-width: 768px) {
  .logo img {
    height: 75px;  /* menor que no desktop, mas ainda maior que o original */
  }

  #menu-toggle {
    display: block;
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--c-bg-3);
    border-radius: 10px;
    padding: .4rem .6rem;
    font-size: 1.2rem;   /* aumenta o tamanho do ícone */
    line-height: 1;      /* centraliza melhor */
  }
}

#nav {
  margin-left: auto;
}

#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
}

#nav a {
  color: var(--c-text);
  text-decoration: none;
  font-weight: 600;
}

#nav a:hover {
  color: var(--c-primary);
}

.lang-wa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

#menu-toggle {
  display: none; /* só aparece em telas pequenas */
}

/* ===== Hero ===== */
#hero{display:grid;gap:24px;align-items:center;padding:40px 20px;background:linear-gradient(180deg,#fff, var(--c-bg-2))}
#hero .hero-text h1{font-size:clamp(1.6rem,2.6vw,2.6rem);margin:.2rem 0 .5rem}
#hero .hero-text p{color:var(--c-muted);margin-bottom:1rem}
#hero .hero-img{justify-self:center;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}

/* ===== Seções ===== */
section{padding:40px 20px;border-top:1px solid var(--c-bg-3)}
section h2{margin:0 0 12px}
/* antes: #sobre p{max-width:70ch}  -> permite largura total */
#sobre p{max-width:100%}
.highlight{
  background:var(--c-bg);padding:16px;border-radius:var(--radius);border:1px solid var(--c-bg-3)
}

/* ===== Grids ===== */
.grid-3{display:grid;gap:16px}
.grid-3 article.card{background:#fff;border:1px solid var(--c-bg-3);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.grid-3 h3{margin:0 0 .3rem}
.areas-grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.areas-grid li{list-style:none;background:var(--c-bg);border:1px solid var(--c-bg-3);padding:10px;border-radius:999px;text-align:center}

/* ===== Slider ===== */
.slider{position:relative;overflow:hidden;background:#fff;border:1px solid var(--c-bg-3);border-radius:var(--radius);padding:22px;min-height:90px;box-shadow:var(--shadow)}
.slide{display:none}
.slide.active{display:block}
.slider-controls{
  display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px
}
.slider-controls .dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-bg-3);border:1px solid var(--c-primary);cursor:pointer
}
.slider-controls .dot.active{background:var(--c-primary)}
.slider-controls .prev,.slider-controls .next{
  background:#fff;border:1px solid var(--c-bg-3);border-radius:8px;padding:.3rem .6rem;cursor:pointer
}

/* ===== FAQ ===== */
#faq details{background:#fff;border:1px solid var(--c-bg-3);border-radius:var(--radius);padding:12px;margin:10px 0}
#faq summary{cursor:pointer;font-weight:600}

/* ===== Resources ===== */
.page-resources .intro{color:var(--c-muted)}
.cards{display:grid;gap:16px}
.card{background:#fff;border:1px solid var(--c-bg-3);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 20px}
.chip{
  border:1px solid var(--c-primary);background:#fff;color:var(--c-primary);
  padding:.45rem .8rem;border-radius:999px;cursor:pointer
}
.chip.active, .chip:hover{background:var(--c-primary);color:#fff}

/* ===== Subpáginas (blog/resources/legal) ===== */
.subheader{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--c-bg-3);background:#fff;position:sticky;top:0;z-index:40
}
.subheader .brand{color:var(--c-primary);text-decoration:none;font-weight:700}
.subnav a{color:var(--c-text);text-decoration:none}
.subnav a:hover{color:var(--c-primary)}
.subfooter{padding:20px;border-top:1px solid var(--c-bg-3);text-align:center}

/* ===== Footer ===== */
footer{padding:30px 20px;border-top:1px solid var(--c-bg-3);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
footer a{color:var(--c-primary);text-decoration:none}

/* ===== Responsividade ===== */
@media (min-width:760px){
  #hero{grid-template-columns:1.1fr .9fr}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .areas-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .areas-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* ===== Mobile menu ===== */
@media (max-width:959px){
  #menu-toggle{display:block}
  #nav{position:fixed;inset:60px 10px auto 10px;background:#fff;border:1px solid var(--c-bg-3);
    border-radius:12px; padding:10px; display:none; box-shadow:var(--shadow)}
  #nav.open{display:block}
  #nav ul{flex-direction:column}
}

/* WhatsApp brand color */
.wa-btn{
  background:#25D366 !important;
  border-color:#25D366 !important;
  color:#fff !important;
}
.wa-btn:hover{
  background:#20bd59 !important;
  border-color:#20bd59 !important;
}

/* Títulos de artigos com cor do texto (sem "azul padrão") */
.grid-3 h3 a,
.page-blog .card h2 a{
  color: var(--c-text);
  text-decoration: none;
}
.grid-3 h3 a:hover,
.page-blog .card h2 a:hover{
  color: var(--c-primary);
  text-decoration: underline;
}

/* Foto padrão (mobile first) */
.foto-perfil {
  width: 100%;
  max-width: 300px;   /* controla bem no mobile */
  border-radius: 12px;
  height: auto;
}

/* Ajuste para telas grandes (desktop) */
@media (min-width: 992px) {
  .foto-perfil {
    max-width: 220px;  /* diminui um pouco no desktop */
  }
}

/* Abas (chips) clicáveis das áreas */
.areas-tabs{
  display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 16px;
}
.area-tab{
  border:1px solid var(--c-bg-3);
  background: var(--c-bg-2);
  color: var(--c-text);
  padding:.8rem 1.2rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
}
.area-tab[aria-selected="true"]{
  background:#fff;
  border-color: var(--c-primary);
  box-shadow: var(--shadow);
}

/* Painel que muda */
.area-panel{
  background: var(--c-bg-2);
  border:1px solid var(--c-bg-3);
  border-radius: var(--radius);
  padding: 18px;
}
.area-panel .area-title{ margin:0 0 .4rem }

/* ============================
   TEMA: azul acinzentado + texto branco
   ============================ */

/* 0) Utilidades de cor */
:root{
  --brand-blue: #7C9DB0;              /* azul acinzentado da logo */
  --brand-blue-dark: #6B8EA3;         /* variação p/ hover/bordas */
  --on-brand: #FFFFFF;                /* texto sobre o azul */
  --on-brand-muted: rgba(255,255,255,.85);
  --on-brand-subtle: rgba(255,255,255,.65);
}

/* 1) HEADER / MENU PRINCIPAL */
#header{
  background: var(--brand-blue);
  border-bottom: 1px solid var(--brand-blue-dark);
}
#nav a{
  color: var(--on-brand);
}
#nav a:hover{
  color: var(--on-brand-muted);
}
.lang-wa a{
  color: var(--on-brand);
}
#menu-toggle{
  color: var(--on-brand);
  background: transparent;
  border: 1px solid var(--on-brand-subtle);
}
@media (max-width:959px){
  /* dropdown do menu mobile */
  #nav{
    background: var(--brand-blue);
    border: 1px solid var(--brand-blue-dark);
  }
  #nav a{ color: var(--on-brand); }
  #nav a:hover{ color: var(--on-brand-muted); }
}

/* 2) ÁREAS DE ATUAÇÃO (abas + painel) */
.areas-tabs{ gap: 12px; }
.area-tab{
  background: var(--brand-blue);
  color: var(--on-brand);
  border: 1px solid var(--brand-blue-dark);
}
.area-tab:hover,
.area-tab:focus{
  filter: brightness(0.96);
  outline: none;
}
.area-tab[aria-selected="true"]{
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  box-shadow: none;
}
.area-panel{
  background: var(--brand-blue);
  color: var(--on-brand);
  border: 1px solid var(--brand-blue-dark);
}
.area-panel .area-title{ color: var(--on-brand); }
.area-panel .area-desc{ color: var(--on-brand-muted); }

/* 3) DEPOIMENTOS (slider) */
.slider{
  background: var(--brand-blue);
  color: var(--on-brand);
  border: 1px solid var(--brand-blue-dark);
}
.slide{ color: var(--on-brand); }
.slider-controls .dot{
  background: var(--on-brand-subtle);
  border: 1px solid var(--on-brand);
}
.slider-controls .dot.active{
  background: var(--on-brand);
}
.slider-controls .prev,
.slider-controls .next{
  background: transparent;
  color: var(--on-brand);
  border: 1px solid var(--on-brand-subtle);
}
.slider-controls .prev:hover,
.slider-controls .next:hover{
  background: var(--brand-blue-dark);
}

/* 4) FAQ (janelas expansíveis) */
#faq details{
  background: var(--brand-blue);
  color: var(--on-brand);
  border: 1px solid var(--brand-blue-dark);
}
#faq summary{
  color: var(--on-brand);
}
#faq details p{
  color: var(--on-brand-muted);
}
#faq a{ color: var(--on-brand); }      /* links dentro do FAQ */

/* 5) Bloco especial "Atendimento em Inglês / For Expats" */
#areas .highlight{
  background: var(--brand-blue);
  color: var(--on-brand);
  border: 1px solid var(--brand-blue-dark);
}
#areas .highlight h3{ color: var(--on-brand); }
#areas .highlight p{ color: var(--on-brand-muted); }

/* 6) Acessibilidade: foco visível sobre o fundo azul */
.area-tab:focus,
.slider-controls .prev:focus,
.slider-controls .next:focus,
#nav a:focus,
#menu-toggle:focus,
#faq summary:focus{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ===== Texto do Sobre: sem rolagem, quebra natural ===== */
#sobre p,
#about p {
  white-space: normal !important;   /* permite quebrar linha quando necessário */
  overflow-x: visible !important;   /* remove qualquer barra horizontal */
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: anywhere;          /* quebra apenas palavras muito longas */
  max-width: 100% !important;
}

/* ===== FIX: Sobre Mim / About Me — sem barra, quebra natural ===== */
#sobre p,
#sobre span,
#sobre strong,
#sobre em,
#about p,
#about span,
#about strong,
#about em {
  white-space: normal !important;   /* permite quebra */
  overflow: visible !important;     /* remove qualquer scroll */
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: anywhere;          /* só quebra palavras gigantes */
  display: block;                   /* garante bloco padrão no <p> */
}

/* Se algum contêiner pai estiver forçando overflow */
#sobre, #about {
  overflow: visible !important;
}