/* Instituto Areté — versão final (mobile-first) */
:root{
  --topbar-h: 64px;
  --anchor-offset: calc(var(--topbar-h) + 12px);

  --ink:#101417;
  --paper:#f5f1ea;
  --paper2:#efe9df;
  /* Unifica o “azul institucional” para não competir com o Hero */
  --petrol:#0E2433;
  /* Tom aproximado do miolo do fundo texturizado do Hero */
  --petrol2:#0E2433;
  --gold:#b59a55;
  --muted:#5f6b73;
  --line:rgba(16,20,23,.12);
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --max:1100px;
}

/* Força o atributo HTML "hidden" a realmente esconder (o menu tinha regras de display que sobrescreviam isso). */
[hidden]{display:none !important;}

/* Âncoras: evita que a seção "pare" por baixo do cabeçalho fixo */
section[id]{scroll-margin-top:92px;}

*{box-sizing:border-box}
html{scroll-behavior:auto;
  scroll-padding-top: var(--anchor-offset);
}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
/* Desktop: texto em coluna central (conteúdo alinhado à esquerda) */
@media (min-width: 900px){
  /* Desktop: uma única coluna de leitura; título/texto/form no mesmo eixo */
  .container--narrow{max-width:68ch;}
}


/* Topbar */
.topbar{
position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,0);
  overflow: visible;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.topbar.is-solid{
  /* Ao rolar, a barra precisa casar com o Hero (menos "barra antiga" destacada) */
  /* SOLIDO: sem transparência (não muda de tom conforme o conteúdo por trás) */
  background:#0E2433;
  border-bottom:1px solid rgba(181,154,85,.28);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.topbar.is-solid .brand__text{
  display:inline-block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 13px;
  opacity: .95;
}

/* No topo (antes do scroll), evita redundância com o logo central do Hero */
.topbar:not(.is-solid) .brand__text{display:none;}
.topbar:not(.is-solid) .brand__logo{display:none;}

.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 20px;
  /* Usa a mesma altura que governa âncoras/hero (evita desalinho no mobile/desktop) */
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
  cursor:pointer;
}
.brand__logo{
width: 44px;
  height: auto;
  margin-right: 12px;
  filter: none;
}
.brand__text{
  color:#f4f6f6;
  font-weight:600;
  letter-spacing:.5px;
  font-size:16px;
  line-height:1;
  /* Sem “empurrão” manual: centralização fica matemática junto do hambúrguer */
  transform:none;
}

/* Marca no topo: mesma linguagem dos links (linha fina que "cresce") */
.brand__text{
  position: relative;
}
.brand__text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background: currentColor;
  opacity:0;
  transform:none;
  transition:none;
}
.brand:hover .brand__text::after,
.brand:focus-visible .brand__text::after{
  opacity:.9;
}
.nav{display:none; gap:16px; align-items:center}
.nav a{
  color:rgba(244,246,246,.86);
  font-size:14px;
  padding:8px 10px;
  border-radius:0;
  text-decoration:none;
  position:relative;
  transition: color .18s ease;
}
.nav a:hover{background:transparent; color:rgba(244,246,246,.98)}

/* Consistent, understated hover indicator */
.nav a::after,
.mobileMenu a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:1px;
  background:rgba(244,246,246,.75);
  opacity:0;
  transform:none;
  transition:none;
}
.nav a:hover::after,
.nav a:focus-visible::after,
.mobileMenu a:hover::after,
.mobileMenu a:focus-visible::after{
  opacity:1;
}
.nav__cta{
  border:1px solid rgba(181,154,85,.55);
  background:rgba(181,154,85,.12);
  color:#f7f2e6;
}

/* Header hamburger — quiet luxury: no button tile, thicker strokes, 2 lines */
.menuBtn, .menu-btn{
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  box-shadow:none;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.menuBtn:hover{background:transparent}
.menuBtn:hover{background:transparent}
.menuBtn span{
  display:block;
  width:28px;
  height:3px;
  background:rgba(244,246,246,.92);
  border-radius:3px;
  opacity:.95;
}

.mobileMenu, .mobile-menu{
  max-width:var(--max);
  margin:0 auto;
  padding:10px 20px 16px;
  display:grid;
  gap:6px;
  border-top:1px solid rgba(255,255,255,.10);
}

.mobileMenu.is-overlay{
  position:absolute;
  top:100%;
  left:0; right:0;
  z-index:60;

  width:min(var(--max), calc(100% - 24px));
  margin:10px auto 0;
  border-top:none;

  background:linear-gradient(180deg,var(--petrol),var(--petrol2));
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.mobileMenu a{
  color:rgba(244,246,246,.92);
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  text-decoration:none;
  position:relative;
}

/* HERO (imagem só aqui) */
.hero{
  /* usa altura real do header (definida via JS) para evitar “sobrar uma bordinha” */
  min-height: 100vh;
  min-height: 100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  /* mais “integrado” ao cabeçalho, sem parecer uma seção separada */
  /* Menos respiro no topo: mais “editorial” e melhor casamento com o header sólido */
  padding: calc(var(--topbar-h) + 8px) 24px 24px;
  color:#f4f1ec;
  background: url('../assets/bg-arete-v2.webp') center/cover no-repeat;
  position:relative;
  overflow:hidden;
  margin-bottom: 0;
}

/* Moldura/boiserie em latão (CSS, editável; não depende de imagem) */
.hero::before{
  display:none;
  content:"";
  position:absolute;
  /* um único traço (menos "fake") e começa abaixo do cabeçalho */
  /* Sobe a boiserie para alinhar com a lógica do header (menos “vazio” acima) */
  top: calc(var(--topbar-h) + 6px);
  left: 28px;
  right: 28px;
  bottom: 28px;
  border: 1px solid rgba(181,154,85,.62);
  /* boiserie mais "arquitetônica": canto vivo (sem arredondado) */
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(181,154,85,.14);
  pointer-events:none;
  opacity:.95;
}
.hero::after{
  display:none;
}
.hero__inner{
  position:relative;
  z-index:3;max-width:900px; display:flex; flex-direction:column; align-items:center; gap:0px;
  /* estava “caindo” um pouco; sobe só o suficiente pra ficar mais nobre */
  transform: translateY(-32px);
}
.logo{
width: 150px; /* ~-6% do tamanho base */
  height: auto;
  margin: 0 auto -10px;
  opacity: 1;
  filter: none;
  /* Aproxima o símbolo do "INSTITUTO" sem alterar a posição do texto */
  position: relative;
  top: 0;
}
.brandTitle{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.30em;
  line-height:1.0;
  text-shadow:0 10px 28px rgba(0,0,0,.55);
}
.brandTitle .inst{
  display:block;
  font-size:14px;
  font-weight:600;
  opacity:.90;
}
.brandTitle .arete{
  display:block;
  margin-top:6px;
  font-size:52px;
  font-weight:700;
  letter-spacing:.18em;
}
.tagline{ margin: 16px 0 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:14px;
  color:rgba(244,241,236,.88);
  letter-spacing: 0.07em;
  font-weight: 300;
  line-height: 1.6;
}
.hero__actions{display:flex; justify-content:center; gap:12px; flex-wrap:wrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 16px;
  border-radius:6px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn--primary{
  background:rgba(181,154,85,.92);
  color:#0c1112;
  border-color:rgba(181,154,85,1);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn--ghost{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#f4f6f6;
}

/* Sections */
.section{padding:56px 0 0; background:var(--paper)}
.section:last-of-type{padding-bottom:72px}
.section--alt{background:var(--paper)}

/* Desktop: manter títulos, texto e formulário no mesmo eixo (mesma coluna de leitura) */
.container--narrow > h2,
.container--narrow > .prose,
.container--narrow > .form{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Legado: caso algum HTML ainda use .section-title */
.section-title{max-width:68ch; margin-left:auto; margin-right:auto;}
h2{margin:0 0 16px; font-size:28px; letter-spacing:-.4px}
.prose p{margin:0 0 12px}
.prose strong{color:var(--petrol)}
.split{display:grid; gap:22px}
.portrait{
  width:100%;
  max-width:360px;
  border-radius:4px;
  box-shadow:var(--shadow);
  border:1px solid rgba(11,18,20,.10);
}
.split__media{display:flex; justify-content:flex-start}
.split__content{max-width:78ch}

/* Form */
.form{
  margin-top:18px;
  padding:18px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid rgba(11,18,20,.10);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
}
.grid{display:grid; gap:12px}
label span{
  display:block;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  color:var(--muted);
  margin:0 0 6px;
}
input{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(11,18,20,.18);
  outline:none;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:15px;
}
input:focus{
  border-color:rgba(11,47,51,.65);
  box-shadow:0 0 0 4px rgba(11,47,51,.10);
}
.hint,.fineprint,.status{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:13px;
  color:var(--muted);
}
.status{color:var(--petrol); margin-top:10px}
.footer{  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%), var(--petrol2);
  border-top:1px solid rgba(181,154,85,.22);
  color:rgba(244,246,246,.88);
  padding:0;
}
.footer__inner{
  display:flex;
  align-items:center;
  min-height:var(--topbar-h);
  padding:0 20px;
}

.footer__meta{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:12.5px;
  line-height:1.25;
  color:rgba(244,246,246,.70);
  letter-spacing:0.02em;
}


/* Seção de interesse: cria “respiro” antes do formulário sem empurrar o formulário para fora da página */
#interesse .prose{ margin-bottom: 28px; }
#interesse .interest-form{ margin-top: 0; }
.muted{color:rgba(244,246,246,.75)}
.successTitle{margin:0 0 10px; font-size:34px; letter-spacing:-.6px}
.leadDark{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  color:#243033;
  max-width:70ch;
}

/* Desktop */
@media (min-width: 900px){
  :root{ --topbar-h: 72px; }
  .nav{display:flex}
  .menuBtn, .menu-btn{display:none}
  .mobileMenu, .mobile-menu{display:none !important}
  /* alturas passam a derivar de --topbar-h (mantém alinhamento perfeito) */
  .footer__inner{min-height:var(--topbar-h)}
  .section{padding:72px 0 0}
  .split{grid-template-columns:360px 1fr; align-items:start}
  .grid{grid-template-columns: 1fr 1fr 1fr}
}

body{
  font-family:'Libre Baskerville', Georgia, serif;
  background:var(--paper);
  color:var(--ink);
}
.lead,.btn,.nav a,.brand__name,label span,input,.hint,.status{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.prose{max-width:68ch;}

/* Tighten HERO brand stack (almost touching) */
.hero .eyebrow{ margin-bottom: 8px !important; }
.hero h1{ margin-top: -12px; margin-bottom: 10px !important; 
  position: relative;
}
.hero__mark, .hero__logo, .hero__crest{ margin-bottom: 4px !important; }

.textblock{margin-top:-28px;}

/* SAFE FIX: precise anchor offset for fixed top bar */
:root{
  --header-offset: 88px; /* adjust to actual header height */
}
#hero{
  scroll-margin-top: var(--header-offset);
}

/* SUPER TIGHT HERO STACK – as requested */
.hero__inner{ gap: 0px !important; transform: translateY(-32px) !important; }

/* Default logo sizing (used in hero) */
.logo{
  width: 132px !important; /* -6% */
  height: auto !important;
  margin: 0 auto -10px !important;
}

/* HERO ONLY: bring the crest DOWN (closer to “INSTITUTO”), without moving any text */
#hero .hero__inner > img.logo,
#hero .hero__inner picture img.logo,
#hero .logoWrap img.logo {
  /* cola o símbolo no "INSTITUTO" */
  margin-bottom: -4px !important;
  transform: translateY(28px) !important;
}


/* Hero spacing: keep the mark clearly ABOVE the title (no overlap) */
.textblock{
  margin-top: 0 !important;
}

.hero h1{
  margin-top: 6px !important;
}

.tagline{
  /* Etapa 1: aumentar o respiro entre ARETÉ e o slogan (sem mexer na altura do “INSTITUTO ARETÉ”) */
  margin-top: 44px !important;
}


/* Google Forms embed (quiet luxury) */
.gform-wrap{
  margin-top: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(10,12,14,0.35);
  backdrop-filter: blur(6px);
}
.gform-iframe{
  width: 100%;
  height: 860px;
  border: 0;
  display: block;
}
@media (max-width: 520px){
  .gform-iframe{ height: 980px; }
}


/* --- Form (quiet luxury) --- */
.interest-form{
  margin: 18px auto 0;
  max-width: 100%;
  /* Quiet luxury: remove the outer "card" so only the inner divider lines remain */
  padding: 6px 12px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
}

@media (min-width: 900px){
  .interest-form{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Desktop: manter alinhado ao texto (mesma coluna de leitura) */
    margin-left: 0;
    margin-right: 0;
  }
}

.interest-form .fields-row{
  /* Mobile-first: stack fields */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 821px){
  .interest-form .fields-row{
    /* Desktop final: one column, same rhythm as mobile */
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: end;
  }
  /* Keep label + (opcional) as a single unit */
  .interest-form .label-row{justify-content:flex-start;}
  .interest-form .label-row .hint{margin-left:8px;}
}

.interest-form .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.interest-form label{
  display:block;
  font-size: 0.92rem;
  margin: 0 0 6px;
  color: rgba(15,56,74,0.78);
}
.interest-form label.label-row{
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  /* Darker for better legibility on the warm off-white */
  color: rgba(15, 56, 74, 0.82);
  font-weight: 500;
}
.interest-form label.label-row .hint{font-size:0.86em; color: rgba(15,56,74,0.60); white-space:nowrap;}
.interest-form label.label-row .label-text{min-width:0;color:inherit;}
.interest-form .req{
  color: rgba(15,56,74,0.70);
  font-weight: 600;
}
.interest-form input{
  width: 100%;
  /* Sem recuo lateral: alinha com a coluna do texto */
  padding: 14px 0 10px;
  border: none;
  border-bottom: 1px solid rgba(15,56,74,0.22);
  border-radius: 0;
  background: transparent;
  outline: none;
  transition: border-color .12s ease;
}

.interest-form input::placeholder{
  color: rgba(15,56,74,0.42);
}

.interest-form input:focus{
  border-bottom-color: rgba(15,56,74,0.38);
}
.interest-form .hp{ position:absolute; left:-9999px; opacity:0; }
.interest-form .btn-primary{
  width: 100%;
  height: 46px;
  /* Less "pill" – more sober */
  border-radius: 4px;
  border: 1px solid rgba(181,154,85,.42);
  background: var(--petrol2);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}
.interest-form .btn-primary:hover{
  filter: brightness(1.03);
}
.interest-form .form-note{
  margin: 10px 0 0;
  font-size: 0.90rem;
  color: rgba(15,56,74,0.70);
}
.form-status{
  margin-top: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(15,56,74,0.85);
}
.form-status.ok{ border-color: rgba(15,56,74,0.18); }
.form-status.err{ border-color: rgba(140,35,35,0.25); color: rgba(140,35,35,0.92); background: rgba(255,245,245,0.78); }

@media (max-width: 820px){
  .interest-form{ max-width: 720px; }
  .interest-form .fields-row{ grid-template-columns: 1fr; gap: 12px; }
  .interest-form .btn-primary{ width: 100%; }
}

/* Desktop-only polish: keep mobile exactly as-is */
@media (min-width: 821px){
  /* Desktop: keep the form truly "paper-like" (no container/panel) */
  .interest-form{
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* More breathing room between columns */
  .interest-form .fields-row{ gap: 18px; }

  /* Hairline separators should be even quieter on large screens */
  .interest-form .field input{
    padding: 16px 2px 12px;
    border-bottom-color: rgba(10, 31, 45, .12);
  }

  /* Button feels "designed", not stretched */
  .interest-form .btn-primary{
    max-width: 600px;
    /* Desktop: align with the left column (no centering) */
    margin: 18px 0 0;
    display: block;
    height: 52px;
    border-radius: 4px;
  }

  /* Desktop: keep label + (opcional) visually together */
  .interest-form label.label-row{
    justify-content: flex-start;
    gap: 8px;
  }
  .interest-form label.label-row .hint{
    margin-left: 0;
  }

  /* Success text: keep it calm and aligned */
  .form-status{
    text-align: left;
    margin-top: 16px;
  }
}

/* Desktop (path 1): align form/button/status with the left text column */
@media (min-width: 900px){
  .interest-form{
    margin-left: 0;
    margin-right: 0;
  }
  .interest-form .btn-primary{
    margin-left: 0;
    margin-right: 0;
  }
  .form-status{
    text-align: left;
  }
}

/* Typography refinement: book-like on desktop, breathable on mobile */
.prose{ text-align:left; hyphens:auto; }
@media (min-width: 900px){
  .prose{ text-align:justify; text-justify:inter-word; }
}

/* Medico section: mobile keeps stacked layout */
.medico-layout{ display:flex; flex-direction:column; gap: 0; }
.medico-layout .portrait{ margin:0 auto; }
   .medico-layout .medico-title{ margin: 0 0 6px; }
/* Mantém o espaçamento foto→texto (sem aumentar o espaço título→foto) */
.medico-text{ margin-top: 36px; }


/* Desktop: editorial clássico. Foto e texto com a MESMA altura. */
@media (min-width: 900px){
  .medico-layout{
    display: grid;
    grid-template-columns: 420px 1fr;
    column-gap: 40px;
    align-items: stretch;
  }

  /* título fica alinhado com a coluna do texto */
  .medico-title{
    grid-column: 2;
    margin: 0 0 10px;
  }

  .medico-photo{
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
  }

  .medico-photo {
    border-radius: 4px;
    overflow: hidden;
  }
  .medico-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
  }

  .medico-text{
    margin-top: 0; /* reset do ajuste do mobile */
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* ensure anchors land cleanly under fixed header */
:root{
  /* JS define --header-h; fallback preserva layout caso JS falhe */
  --topbar-h: var(--header-h, 64px);
  --anchor-offset: calc(var(--topbar-h) - 2px);
}
html{ scroll-padding-top: var(--anchor-offset); }
section[id], #hero{ scroll-margin-top: var(--anchor-offset); }

/* small label hints, ex: (opcional) */
label .hint{
  font-weight: 400;
  opacity: 0.72;
  font-size: 0.92em;
  margin-left: 6px;
}

/* Compact interest section on small screens so the full block fits better */
@media (max-width: 520px){
  #interesse{ padding: 56px 0 0; }
  #interesse h2{ margin-bottom: 10px; }
  #interesse .prose p{ margin: 0 0 8px; }
  #interesse .prose p:last-child{ margin-bottom: 12px; }
  .interest-form{ margin-top: 14px; }
  .interest-form .btn-primary{ margin-top: 20px; }
}


.mobileMenu[hidden]{display:none !important}


/* Mobile: evita corte do botão pelo UI do navegador */
#interesse{padding-bottom: calc(72px + env(safe-area-inset-bottom));}


/* medico credentials */
.medico-cred{
  margin: 6px 0 12px;
  text-align: left;
  color: #5a534c;
  max-width: none;
  width: 100%;
}

.medico-cred__name{
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  margin: 0 0 2px;
  color: rgba(0,0,0,.76);
}
.medico-cred__ids{
  font-size: .74rem;
  letter-spacing: .03em;
  margin: 0 0 2px;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
}
.medico-cred__spec{
  font-size: .80rem;
  margin: 0;
  color: rgba(0,0,0,.60);
}

@media (max-width: 768px) {
  .medico img,
  .medico-foto img,
  .foto-medico img {
    border-radius: 4px !important;
  }
}


/* v5: mobile portrait refinement (quiet luxury, less card) */
@media (max-width: 768px) {
  img.portrait {
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  .medico-photo {
    border-radius: 6px;
    overflow: hidden;
  }
}


/* Desktop rhythm fix: keep a clean horizontal "breath" before next section */
@media (min-width: 769px){
  #medico{padding-bottom:64px;}
}


/* ===== STEP 1 – AJUSTE TIPOGRÁFICO PREMIUM ===== */
p, li, .content, .text-block {
  text-align: left !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.6;
}


/* ===== STEP 1.1 – CENTRALIZAR SLOGAN DO HERO ===== */
.hero p,
.hero .subtitle,
.hero .hero-subtitle {
  text-align: center !important;
}


/* ===== STEP 2 – AJUSTE DE RESPIRO (LUXO SILENCIOSO) ===== */

/* Mais espaço entre seções */
section {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* Mais espaço entre títulos e conteúdo */
h1, h2, h3 {
  margin-bottom: 28px !important;
}

/* Mais espaço entre parágrafos */
p {
  margin-bottom: 1.4em !important;
}

/* Ajuste mobile refinado */
@media (max-width: 768px) {
  section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}


/* ===== STEP 2.1 – EQUALIZAR RESPIRO HERO -> PRIMEIRA SEÇÃO ===== */

/* Aumenta espaço entre hero e primeira section */
.hero + section,
header + section,
.hero-section + section {
  margin-top: 70px !important;
}

/* Ajuste refinado mobile */
@media (max-width: 768px) {
  .hero + section,
  header + section,
  .hero-section + section {
    margin-top: 60px !important;
  }
}


/* ===== STEP 3 – FORMULÁRIO PREMIUM ===== */

/* Inputs minimalistas com linha inferior */
input, textarea {
  border: none !important;
  border-bottom: 1px solid #9a9a9a !important;
  background: transparent !important;
  padding: 14px 4px !important;
  width: 100%;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

/* Foco elegante com azul institucional */
input:focus, textarea:focus {
  outline: none !important;
  border-bottom: 1px solid #0E2433 !important;
}

/* Espaçamento entre campos */
form div, .form-group {
  margin-bottom: 28px !important;
}

/* Botão centralizado menor */
form button, .form-button {
  display: block;
  margin: 40px auto 0 auto !important;
  padding: 16px 36px !important;
  width: auto !important;
  min-width: 240px;
  font-weight: 500;
  letter-spacing: 0.5px;
}


/* ===== STEP 4 – MENU MINIMALISTA (V2 – SELETORES REAIS) ===== */

/* container overlay do menu */
.mobileMenu.is-overlay{
  background: var(--petrol) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
}

/* base do menu (grid) */
.mobileMenu{
  padding: 26px 26px 18px !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

/* itens do menu */
.mobileMenu a{
  background: transparent !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
}

/* separador sutil entre itens */
.mobileMenu a + a{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* remover estilo de "botão" do CTA dentro do menu */
.mobileMenu a.nav__cta{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 18px 0 !important;
}


/* ===== STEP 5 – MENU FINAL REFINADO ===== */

/* ===== ÍCONE HAMBÚRGUER ===== */
.hamburger,
.menu-toggle,
.nav-toggle {
  right: 18px !important; /* recuo da borda */
}

.hamburger span,
.menu-toggle span,
.nav-toggle span {
  height: 2px !important;          /* linha mais fina */
  width: 22px !important;          /* levemente menor */
  margin: 6px 0 !important;        /* mais espaçamento entre barras */
}

/* ===== OVERLAY MENU ===== */
.mobileMenu.is-overlay{
  background: var(--petrol) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 34px 28px !important;
}

/* Itens do menu */
.mobileMenu a{
  padding: 20px 0 !important;       /* mais altura vertical */
  font-size: 1.15rem !important;    /* leve redução de tamanho */
  letter-spacing: 0.3px !important;
}

/* Linha divisória entre TODOS os itens */
.mobileMenu a + a{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Garantir linha também antes do último item */
.mobileMenu a:last-child{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Remover estilo especial do CTA */
.mobileMenu a.nav__cta{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ===== STEP 5B – CORREÇÃO REAL (menuBtn + linha no CTA) ===== */

/* Ícone hambúrguer (botão real é .menuBtn) */
header .menuBtn{
  width:40px !important;
  height:40px !important;
  padding:0 10px !important;
  gap:7px !important;                 /* mais leveza entre barras */
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.04) !important;
  border-radius:12px !important;
}

/* Recuo da borda direita (depende do layout; margin funciona na maioria dos casos) */
header .menuBtn{
  margin-right: 10px !important;
}

/* Barras */
header .menuBtn span{
  height:2px !important;              /* mantém 2px */
  border-radius:2px !important;
}

/* Menu overlay: garantir linha também antes do CTA */
.mobileMenu a.nav__cta{
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 20px !important;
  margin-top: 0 !important;
}


/* ===== STEP 5C – HAMBÚRGUER LIMPO (SEM CAIXA) ===== */

/* Botão sem contorno/caixa: só os três risquinhos */
header .menuBtn{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 7px !important;          /* respiro entre barras */
  margin-right: 12px !important; /* afasta da borda direita */
}

/* barras mais finas e elegantes */
header .menuBtn span{
  height: 2px !important;
  width: 22px !important;
  border-radius: 2px !important;
  opacity: 0.9 !important;
}


/* ===== STEP 6 – AJUSTE DE LEGIBILIDADE DO SUBTÍTULO (SEM OVERLAY) ===== */

/* Subtítulo dentro do hero */
.hero p,
.hero .subtitle,
.hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.96) !important;  /* branco mais sólido */
    font-weight: 400 !important;                  /* leve aumento de peso */
    letter-spacing: 0.2px;
}


/* ===== STEP 8 – CTA FINAL QUIET LUXURY ===== */

form button,
.form-button,
button[type="submit"] {
    background-color: #0E2433 !important; /* azul mais sofisticado */
    color: #d4b46a !important;            /* dourado elegante */
    padding: 12px 28px !important;
    border-radius: 4px !important;        /* igual aos outros botões */
    border: 1px solid rgba(212,180,106,0.35) !important;
    font-weight: 500 !important;
    letter-spacing: 0.6px;
    width: 100% !important;               /* largura total do container */
    transition: all 0.25s ease;
}

form button:hover,
button[type="submit"]:hover {
    background-color: #1A3A4F !important;
    border-color: rgba(212,180,106,0.6) !important;
}


/* ===== STEP 10 – CORREÇÕES DESKTOP (MENU + HOVERS + FOTO) ===== */
@media (min-width: 900px) {
  /* Se o menu horizontal está visível, o hambúrguer não pode aparecer */
  header .menuBtn { display: none !important; }

  /* Quiet luxury: sem “bolhas/círculos” no hover */
  .nav__link,
  .nav__cta {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .nav__link:hover,
  .nav__link:focus,
  .nav__cta:hover,
  .nav__cta:focus {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* evita sublinhado padrão (que cria 2 linhas). O hover fica no ::after */
    text-decoration: none !important;
  }

  /* “Manifestar interesse” não deve parecer botão no topo */
  .nav__cta { padding: 6px 10px !important; }

  /* Foto do médico: quadrada/institucional no desktop */
  .portrait { border-radius: 0 !important; }
}


/* ===============================
   Remove underline do título no mobile
   =============================== */
@media (max-width: 991px) {
  .site-title::after {
    display: none !important;
  }

  .site-title {
    border-bottom: none !important;
  }
}


/* ===============================
   Mobile: remover linha abaixo de "Instituto Areté" (marca no topo)
   =============================== */
@media (max-width: 899px) {
  .brand__text::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
  }
}


/* ===============================
   Formulário: refinamento "quiet luxury"
   - Botão com a mesma cor do header/footer
   - Asterisco discreto para campo obrigatório
   =============================== */
:root{
  /* fallback caso variáveis existentes mudem */
  --arete-bar-bg: #0E2433;
}

.site-header.is-solid,
.site-footer{
  background: var(--arete-bar-bg) !important;
}

/* Botão do formulário alinhado ao header/footer */
.form button,
.form .btn,
.form-submit,
#interestForm button,
#interestForm .btn{
  background: var(--arete-bar-bg) !important;
  color: #c8b27a !important; /* dourado fosco */
}

/* hover (desktop) */
@media (hover:hover){
  .form button:hover,
  .form .btn:hover,
  .form-submit:hover,
  #interestForm button:hover,
  #interestForm .btn:hover{
    filter: brightness(1.06);
  }
}

/* Asterisco obrigatório */
.req{
  margin-left: .2em;
  color: #c8b27a;
  font-weight: 600;
}


/* --- Refinamento do Hero (manifesto) --- */
.hero-subline{
  display:block;
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
@media (max-width: 480px){
  .hero-subline{
    margin-top: 16px;
    font-size: 0.92rem;
    max-width: 30ch;
    margin-left:auto;
    margin-right:auto;
  }
}

/* === Desktop Editorial Narrow Adjustment === */
@media (min-width: 1024px) {
  .prose {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}


.hero .hero__inner h1 {
  position: relative;
  top: -12px;
}


/* --- HERO: tighten crest-to-INSTITUTO without moving the text block --- */
.hero .logoWrap{
  width: 150px;
  height: 150px;              /* keeps the same reserved space => text doesn't move */
  margin: 0 auto -10px;
  overflow: visible;          /* we are not cropping; we just reposition inside */
  display: block;
}
.hero .logoWrap > img.logo,
.hero .logoWrap picture img.logo {
  width: 150px;
  height: auto;
  display: block;
  transform: translateY(28px) !important;  /* moves ONLY the mark down toward 'INSTITUTO' */
  will-change: transform;
}
/* ------------------------------------------------------ */



/* ===== Desktop Editorial Container ===== */
@media (min-width: 1024px) {
    .container,
    .content,
    .section,
    .form-container {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    .content p,
    .section p,
    .container p {
        text-align: left;
    }
}


/* ===== CORREÇÃO DEFINITIVA TOPO VS SCROLL ===== */

/* No topo (antes do scroll) */
header:not(.scrolled) .logo-text {
    display: none !important;
}

/* No scroll */
header.scrolled .logo-text {
    display: inline-block !important;
}


/* ======================================================
   MOBILE SAFETY NET
   Evita "vazamento" de layout desktop no mobile e corta
   qualquer overflow horizontal.
   ====================================================== */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

@media (max-width: 899px) {
  /* Força o padrão mobile: sem menu horizontal, com hamburger visível */
  nav, .nav, .desktopNav, .headerNav { display: none !important; }
  .menuBtn { display: inline-flex !important; opacity: 1 !important; visibility: visible !important; }

  /* Garante que nenhuma seção "estoure" a largura da tela */
  .container, .content, .section, .paper, .form-container, .hero { max-width: 100% !important; }
}


/* === Desktop (balanced): seção O médico mais larga, sem “salsicha” === */
@media (min-width: 900px){
  /* Âncora não fica escondida sob o header */
  #medico{ scroll-margin-top: 110px; }
}

@media (min-width: 1200px){

  /* Abre o palco só do médico (mais largo que as seções de texto) */
  #medico .container{
    max-width: 1400px;
  }

  /* Grid com largura “editorial”: foto grande + coluna de leitura igual às outras seções */
  .medico-layout{
    display: grid;
    grid-template-columns: 520px 65ch;
    column-gap: 72px;
    align-items: stretch;       /* mantém foto e texto com a mesma altura */
    justify-content: center;    /* evita sobra esquisita de lado */
  }

  /* Remove qualquer limitação interna que esteja esmagando a coluna */
  .medico-text .prose{
    max-width: none !important;
  }

  /* Garante que a foto ocupe toda a altura do grid sem “achatar” */
  .medico-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* === O médico: layout responsivo (desktop grande + desktop médio + mobile) === */
@media (min-width: 900px){
  /* Âncora não fica escondida sob o header */
  #medico{ scroll-margin-top: 110px; }
}

/* Desktop MÉDIO (notebook 15", tablets em landscape): evita “encostar” e evita overflow */
@media (min-width: 900px) and (max-width: 1199px){

  #medico .container{
    max-width: 1120px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .medico-layout{
    display: grid;
    /* Foto reduz e coluna de texto flexível; nada estoura e não cria scroll horizontal */
    grid-template-columns: minmax(360px, 40vw) minmax(0, 1fr);
    column-gap: 56px;
    align-items: stretch;
    justify-content: center;
  }

  /* leitura confortável, mas sem “salsicha” */
  .medico-text .prose{
    max-width: 60ch;
  }

  .medico-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Desktop GRANDE (monitores amplos): palco mais largo e coluna de leitura clássica */
@media (min-width: 1200px){

  #medico .container{
    max-width: 1400px;
  }

  .medico-layout{
    display: grid;
    grid-template-columns: 520px 65ch;
    column-gap: 72px;
    align-items: stretch;
    justify-content: center;
  }

  /* Remove limitação interna que possa esmagar a coluna */
  .medico-text .prose{
    max-width: none !important;
  }

  .medico-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* === Refinamento final seção O médico (menos dominante, mais proporcional) === */

/* Desktop médio */
@media (min-width: 900px) and (max-width: 1199px){
  #medico .container{
    max-width: 1040px;
  }

  .medico-layout{
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 48px;
  }

  .medico-text .prose{
    max-width: 60ch;
  }
}

/* Desktop grande */
@media (min-width: 1200px){
  #medico .container{
    max-width: 1240px;
  }

  .medico-layout{
    grid-template-columns: 440px 62ch;
    column-gap: 56px;
  }

  .medico-text .prose{
    max-width: none !important;
  }
}



/* Ajuste fino MOBILE – ritmo vertical consistente */
@media (max-width: 899px){
  .medico-title{
    margin-bottom: 24px !important;
  }
}


/* iOS header sentinel */
#scrollSentinel{position:absolute; top:0; left:0; right:0; height:1px; width:1px; pointer-events:none;}


/* ===== Mobile menu premium (fullscreen) — iOS-safe (no blur) ===== */
html.menu-open, body.menu-open{
  overflow:hidden;
  overscroll-behavior: contain;
  /* touch-action: none removido — bloqueava toque no botão X no iOS Safari */
}

.menuBtn span{
  transition: transform 180ms ease, opacity 180ms ease;
  transform-origin: center;
}
.menuBtn.is-open span:nth-child(1){
  transform: translateY(11px) rotate(45deg);
}
.menuBtn.is-open span:nth-child(2){
  opacity:0;
}
.menuBtn.is-open span:nth-child(3){
  transform: translateY(-11px) rotate(-45deg);
}

/* Fullscreen overlay panel */
.mobileMenu.is-open{
  position:fixed !important;
  inset:0 !important;
  z-index:9999;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background: var(--petrol);
  padding:
    calc(env(safe-area-inset-top) + var(--topbar-h) + 22px)
    22px
    calc(env(safe-area-inset-bottom) + 22px);
  display:flex !important;
  flex-direction:column;
  gap:14px;
}

.mobileMenu.is-open a{
  background: transparent;
  padding: 14px 4px;
  border-radius: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .2px;
}

.mobileMenu.is-open a::after{
  bottom: 6px;
  background: rgba(244,246,246,.35);
  opacity: 0;
}
.mobileMenu.is-open a:active::after,
.mobileMenu.is-open a:focus-visible::after{
  opacity: 1;
}

/* CTA separated */
.mobileMenu.is-open a.nav__cta{
  margin-top: 10px;
  align-self: stretch;
  text-align: center;
  padding: 14px 18px;
  border-radius: 4px;
  border: 1px solid rgba(181,154,85,.85);
  background: rgba(0,0,0,.10);
  color: #f7f2e6;
  font-weight: 600;
}

/* Optional tagline in overlay (if added later) */
.mobileMenu .menuTagline{ display:none; }
.mobileMenu.is-open .menuTagline{
  display:block;
  margin-top:auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(244,246,246,.70);
  font-size: 13px;
  line-height: 1.4;
}



/* ===== MENU PREMIUM FULLSCREEN – TOPBAR INTERNO + CTA ===== */
.mobileMenu.is-open{
  display:flex !important;
  flex-direction:column;
  justify-content:flex-start;
  gap: 0 !important;
  padding: 0 !important;
  /* iOS Safari: garante que o menu ocupe 100% da tela real */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: -webkit-fill-available;
}

.mobileMenu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.mobileMenu__brand{
  display:flex;
  align-items:center;
  gap:4px;
  text-decoration:none;
}

.mobileMenu__brand .brand__logo,
.mobileMenu__logo{
  width:44px;
  height:auto;
  margin-right:12px;
  display:block;
  filter:none;
}

.mobileMenu__brand .brand__text,
.mobileMenu__text{
  color:#f4f6f6;
  font-family:'Libre Baskerville', Georgia, serif;
  font-weight:600;
  letter-spacing:.22em;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
  display:inline-block;
  opacity:.95;
}

.mobileMenu__brand .brand__text::after{
  display:none;
}

.mobileMenu__close{
  width:44px;
  height:44px;
  border:none;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:pointer;
}

.mobileMenu__close span{
  position:absolute;
  width:22px;
  height:2px;
  background:rgba(244,246,246,.92);
  border-radius:2px;
}

.mobileMenu__close span:nth-child(1){ transform: rotate(45deg); }
.mobileMenu__close span:nth-child(2){ transform: rotate(-45deg); }

.mobileMenu__links{
  padding: 10px 22px 0;
}

.mobileMenu__links a{
  display:block;
  padding: 18px 0 !important;
}

.mobileMenu__links a + a{
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* CTA separado e com borda dourada */
.mobileMenu__links a.nav__cta{
  margin-top: 26px;
  border-top: none !important;
  border: 1px solid rgba(181,154,85,.95) !important;
  color: rgba(181,154,85,.98) !important;
  border-radius: 4px !important;
  padding: 14px 18px !important;
  text-align:center;
  font-weight: 600;
  background: transparent !important;
}

/* Rodapé discreto */
.mobileMenu__footer{
  margin-top:auto;
  padding: 18px 22px 22px;
  color: rgba(244,246,246,.70);
  font-size: 12px;
  letter-spacing: .06em;
  text-align:center;
  font-style: italic;
}


/* === Mobile menu polish (v3-safe): remove separators + subtle fade-in === */
.mobileMenu__links a + a{ border-top:none !important; }

@keyframes mobileMenuFadeIn{
  from{ opacity:0; transform: translateY(-8px); }
  to{ opacity:1; transform: translateY(0); }
}
.mobileMenu.is-open{
  animation: mobileMenuFadeIn 180ms ease-out both;
}

@media (prefers-reduced-motion: reduce){
  .mobileMenu.is-open{ animation: none !important; }
}

.prose p + p {
  margin-top: 2.1rem;
}

.prose .section-quote {
  margin: 2.5rem auto;
  max-width: 28ch;
  text-align: center;
  font-size: clamp(1.45rem, 4.1vw, 1.75rem);
  line-height: 1.3;
  font-style: italic;
  color: var(--ink);
}

/* Desktop: logo ligeiramente maior + respiro proporcional entre símbolo e INSTITUTO */
@media (min-width: 900px) {
  .logo,
  #hero .logoWrap img.logo,
  #hero .hero__inner picture img.logo {
    width: 172px !important;
    transform: translateY(14px) !important;
  }
}


/* ── Faixa marinha integrada — foto do médico ── */
.medico-faixa {
  background: #0f1f2e;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.medico-faixa__left { flex: 1; min-width: 0; }
.medico-faixa__name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 400;
  color: #f5f0e8;
  white-space: nowrap;
  margin-bottom: 5px;
}
.medico-faixa__spec {
  font-size: 11px;
  color: rgba(245,240,232,0.5);
  letter-spacing: 0.06em;
}
.medico-faixa__divider {
  width: 1px;
  height: 36px;
  background: rgba(184,146,42,0.35);
  flex-shrink: 0;
}
.medico-faixa__right { flex-shrink: 0; text-align: right; }
.medico-faixa__crm {
  font-size: 11px;
  color: #d4aa50;
  letter-spacing: 0.1em;
  line-height: 1.9;
  white-space: nowrap;
}

/* ── Espaço em branco: mais respiro entre seções internas ── */
.section { padding-top: 72px; }
.prose p + p { margin-top: 1.6rem; }

/* Foto + faixa grudados: sem gap entre img e faixa */
.medico-photo { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; }
.medico-photo img { display: block; margin-bottom: 0; }

/* Botão "Quero acompanhar" — igual aos demais botões do site */
#interestForm .btn-primary {
  border-radius: 4px;
}

/* Desativar hifenização automática em títulos */
h1, h2, h3, h4 {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}