:root{
  --bg:#00172b;
  --card-mustard: rgba(228,199,132,.8);
  --card-border: rgba(196,158,84,.7);

  --radius-lg:24px;
  --radius-md:12px;
  --shadow-soft:0 18px 40px rgba(0,0,0,.35);
  --shadow-subtle:0 10px 26px rgba(0,0,0,.22);
  --transition:220ms ease-out;

  /* LARGURA GLOBAL DO CONTEÚDO (DESKTOP) */
  --container-w: 1080px;

  /* TOPBAR */
  --topbar-h: 140px;
  --topbar-focus-x: 50%;
  --topbar-focus-y: 50%;

  /* Distância topbar -> conteúdo */
  --content-top-gap: 38px;

  /* MENU */
  --menu-btn-size:44px;
  --menu-left:14px;
  --menu-top-gap: 4px;
  --menu-panel-w:260px;

  /* CONTEÚDO */
  --content-shift-x:42px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#f5f0ea;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;

  background-color:var(--bg);
  background-image:url("bg-veios.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}

/* TOPBAR */
.topbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--topbar-h);
  z-index:100;

  background-image: url("Topbar.png");
  background-repeat:no-repeat;
  background-size: cover;
  background-position: var(--topbar-focus-x) var(--topbar-focus-y);
}

/* Botão hambúrguer */
.menu-fab{
  position:fixed;
  top:calc(var(--topbar-h) + var(--menu-top-gap));
  left:var(--menu-left);
  z-index:110;

  width:var(--menu-btn-size);
  height:var(--menu-btn-size);
  border:none;
  border-radius:999px;
  background:#f5f0ea;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.menu-fab:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(0,0,0,.45);
  background:#fff9ee;
}

.menu-fab-icon{
  position:relative;
  display:block;
  width:18px;
  height:2px;
  background:#1f2830;
  margin:0 auto;
  border-radius:2px;
}

.menu-fab-icon::before,
.menu-fab-icon::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background:#1f2830;
  border-radius:2px;
}
.menu-fab-icon::before{ top:-6px; }
.menu-fab-icon::after{ top: 6px; }

/* Menu */
.topmenu{
  position:fixed;
  top:calc(var(--topbar-h) + var(--menu-top-gap) + var(--menu-btn-size) + 8px);
  left:var(--menu-left);
  width:min(var(--menu-panel-w), calc(100vw - (var(--menu-left) * 2)));
  z-index:120;

  transform:translateY(-8px);
  opacity:0;
  pointer-events:none;
  transition:transform 180ms ease, opacity 180ms ease;

  background:rgba(253,249,244,.96);
  border:1px solid rgba(0,0,0,.15);
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  border-radius:14px;
  padding:10px;
  display:grid;
  gap:8px;
}

.topmenu.active{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.topmenu-link{
  text-decoration:none;
  color:#1f2830;
  background:rgba(242,231,220,.7);
  border:1px solid rgba(215,203,191,.9);
  padding:10px 12px;
  border-radius:12px;
  font-size:.95rem;
}

.topmenu-link:hover{ background:rgba(242,231,220,1); }

.topmenu-link-active{
  background:#00172b;
  color:#fdfaf7;
  border-color:#000d18;
}

/* Conteúdo */
.page-shell{
  max-width: var(--container-w);
  margin:0 auto;
  padding:calc(var(--topbar-h) + var(--content-top-gap)) 18px 40px;
  transform: translateX(var(--content-shift-x));
}

main{ margin-top:10px; }

/* Card de texto – padding interno reduzido */
.page-card{
  position:relative;
  overflow:hidden;
  background-color:var(--card-mustard);
  border-radius:var(--radius-lg);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow-soft);
  padding:20px 18px 18px; /* antes 26px 22px 22px */
  text-align:left;
  width:100%;
}

.page-header{ margin-bottom:14px; }

.page-kicker{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#5c666f;
  margin-bottom:4px;
}

.page-title{
  font-size:1.6rem;
  color:#2a2520;
  margin-bottom:2px;
}

.page-subtitle{
  font-size:.90rem;
  color:#5c666f;
  margin:2px 0 2px;
  line-height:1.00;
}

/* PARÁGRAFOS – menos espaço entre blocos */
.page-card p{
  font-size:.96rem;
  color:#4a433a;
  text-align: justify;
  text-justify: inter-word;
  line-height:1.75;
  margin-bottom:8px; /* antes 12px */
  overflow-wrap: break-word;
  hyphens:auto;
}

/* Home */
.home-grid{
  display:grid;
  grid-template-columns:1.4fr 1.1fr;
  gap:22px;
}

.pills-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 14px;
}

.pill{
  font-size:.78rem;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #d7c9b8;
  background:rgba(249,241,230,.9);
  color:#5c666f;
}

.pill-strong{
  border-color:#00172b;
  background:rgba(227,237,252,.95);
  color:#00172b;
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 6px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 15px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.9rem;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--transition), box-shadow var(--transition),
    transform var(--transition), border-color var(--transition), color var(--transition);
}

.btn-primary{
  background:#00172b;
  color:#fdfaf7;
  box-shadow:0 10px 28px rgba(0,0,0,.55);
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 34px rgba(0,0,0,.7);
}

.btn-outline{
  background:#fdfaf7;
  color:#1f2830;
  border-color:#d7cbbf;
}

.btn-outline:hover{ background:#f7efe6; }

.btn-whatsapp{
  background:#d8a431;
  color:#3a2606;
  box-shadow:0 10px 26px rgba(138,93,14,.35);
}

.btn-whatsapp:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 34px rgba(138,93,14,.45);
}

.highlight-strip{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  margin:12px 0;
  padding:10px;
  border-radius:14px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  color:#4a433a;
  box-shadow:var(--shadow-subtle);
}

.highlight-strip .quote-author{
  margin-top: 8px;
  text-align: right;
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
}

.side-card{
  border-radius:var(--radius-md);
  padding:16px 14px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  box-shadow:var(--shadow-subtle);
}

/* Listas */
ul{ list-style:none; padding-left:0; margin:4px 0 0; }

li{
  font-size:.94rem;
  color:#4a433a;
  margin-bottom:4px;
  position:relative;
  padding-left:16px;
}

li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  font-size:.8rem;
  color:#00172b;
}

/* Rodapé */
footer{
  max-width: var(--container-w);
  margin:20px auto 0;
  padding:10px 0 24px;
  font-size:.8rem;
  color:#c6d0dd;
}

/* Tablet */
@media (max-width:840px){
  :root{
    --topbar-h:120px;
    --content-top-gap: 28px;
    --content-shift-x:26px;
    --topbar-focus-y: 52%;
    --container-w: 980px;
  }

  .page-shell{
    padding:calc(var(--topbar-h) + var(--content-top-gap)) 14px 34px;
  }

  .home-grid{ grid-template-columns:1fr; }
}

/* Mobile – card mais largo e com menos padding ainda */
@media (max-width:640px){
  :root{
    --topbar-h:110px;
    --content-top-gap: 22px;
    --menu-panel-w:240px;
    --content-shift-x:0px;
    --topbar-focus-y: 55%;
    --container-w: 100%;
  }

  .page-shell{
    max-width:100%;
    padding:calc(var(--topbar-h) + var(--content-top-gap)) 6px 22px;
    transform:none;
  }

  .page-card{
    width:100%;
    border-radius:20px;
    padding:16px 12px 16px; /* bem compacto no celular */
  }
}

/* Título de seções */
.section-title{
  font-size:1.1rem;
  margin:12px 0 6px;
  color:#2a2520;
}

/* =========================
   PUBLICAÇÕES
========================= */
.pub-section{ margin-top:10px; }

.pub-card{
  margin-top:10px;
  border-radius:14px;
  padding:12px 12px 10px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  box-shadow:var(--shadow-subtle);
}

.pub-head{ margin-bottom:6px; }

.pub-title{
  font-size:1.02rem;
  margin:0 0 4px;
  color:#2a2520;
}

.pub-sub{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:center;
  margin-bottom:6px;
}

.pub-chip{
  font-size:.75rem;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(227,237,252,.95);
  border:1px solid rgba(0,23,43,.25);
  color:#00172b;
}

.pub-source{
  font-size:.86rem;
  color:#5c666f;
}

/* TAGS */
.pub-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 6px;
}

.tag{
  font-size:.74rem;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(242,231,220,.75);
  border:1px solid rgba(215,203,191,.95);
  color:#4a433a;
}

.pub-excerpt{
  margin:0 0 10px;
  color:#4a433a;
}

.pub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.btn-sm{
  padding:7px 11px;
  font-size:.86rem;
}

/* =========================
   CONTATO
========================= */
.contact-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  margin-top:6px;
}

.contact-list{
  display:grid;
  gap:10px;
  margin:8px 0 12px;
}

.contact-label{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5c666f;
  margin-bottom:3px;
}

.contact-value{ color:#2a2520; }

.contact-link{
  color:#204a82;
  text-decoration: underline;
}

.address-block{
  margin-top:8px;
  padding:10px;
  border-radius:14px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  box-shadow:var(--shadow-subtle);
}

.contact-cta{ margin-top:8px; }

.disclaimer{
  margin-top:12px;
  padding:10px;
  border-radius:14px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  color:#4a433a;
  box-shadow:var(--shadow-subtle);
}

/* Formulário */
form{
  padding:12px;
  border-radius:14px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  box-shadow:var(--shadow-subtle);
}

.form-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:10px;
}

.form-field.full{ grid-column:1 / -1; }

label{
  font-size:.9rem;
  color:#2a2520;
}

input, select, textarea{
  width:100%;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid #e2d8cd;
  background:#fffdf9;
  color:#1f2830;
  outline:none;
}

input:focus, select:focus, textarea:focus{
  border-color:#00172b;
  box-shadow:0 0 0 4px rgba(0,23,43,.14);
}

.form-footer{
  font-size:.84rem;
  color:#5c666f;
  margin-top:6px;
  line-height:1.55;
}

@media (max-width:840px){
  .contact-grid{ grid-template-columns:1fr; }

  .page-card .page-image-portrait{
    width: 100%;
    aspect-ratio: 4/5;
    max-width: 520px;
    max-height: 260px;
    object-fit: cover;
  }
}

.highlight-strip .highlight-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Garante que os <a> se comportem como botão, mesmo dentro do highlight */
.highlight-strip .highlight-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
}

/* Publicações: título clicável com cara de título */
.pub-title-link{
  color: inherit;
  text-decoration: none;
}

.pub-title-link:hover{
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.pub-title-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}

/* HUB de Publicações (3 cards) */
.pub-hub-grid{
  display: grid;
  gap: 14px;
}

@media (min-width: 900px){
  .pub-hub-grid{
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

/* Cards do hub com o mesmo “branco” da entrevista (reutilize .pub-card no HTML) */
.pub-card--hub{
  display: flex;
  flex-direction: column;
}

.pub-card--hub .pub-actions{
  margin-top: auto;
}

/* Se você ainda estiver usando .pub-hub-card no HTML, este fallback mantém o visual branco */
.pub-hub-card{
  margin-top:10px;
  border-radius:14px;
  padding:12px 12px 10px;
  background:rgba(253,249,244,.92);
  border:1px solid #e2d8cd;
  box-shadow:var(--shadow-subtle);
  display:flex;
  flex-direction:column;
}

.pub-hub-actions{ margin-top: auto; }

.pub-back{
  text-decoration: none;
}
.pub-back:hover{
  text-decoration: underline;
}
/* Metadados do artigo: remove margens padrão que “inflam” o card */
.pub-meta{
  margin: 0 0 10px;
}

.pub-meta dt{
  margin: 0;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c666f;
}

.pub-meta dd{
  margin: 0 0 8px;
  color: #4a433a;
}

.contact-icons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 12px;
}

.contact-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:999px;

  background-color: var(--bg);
  border: 1px solid rgba(196,158,84,.70);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  text-decoration:none;

  transition:transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.contact-icon--lg{
  width:52px;
  height:52px;
}

.contact-icon:hover{
  transform: translateY(-1px);
  background-color:#00203a;
  box-shadow: 0 14px 30px rgba(0,0,0,.33);
}

.contact-icon:focus-visible{
  outline: 2px solid rgba(228,199,132,.95);
  outline-offset: 3px;
}

/* Ícone (Font Awesome) */
.contact-icon i{
  color: rgba(228,199,132,.95);
  font-size: 22px;
  line-height: 1;
}

.map-card{
  position: relative;
  display: block;
  margin-top: 10px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(196,158,84,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  text-decoration: none;
}

/* O iframe é só visual; o clique fica no <a> */
.map-embed{
  width: 100%;
  height: 190px;
  border: 0;
  display: block;
  pointer-events: none;
}

.map-overlay{
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,23,43,.92);
  color: rgba(228,199,132,.95);
  border: 1px solid rgba(196,158,84,.60);
  font-size: .9rem;
  letter-spacing: .02em;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.map-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}