/* ════════════════════════════════════════════════════════════════════
   CRMA · Camada mobile (carregar DEPOIS do CSS base)
   Corrige o header em ecrãs pequenos, adiciona o menu móvel (drawer)
   e refina a leitura em tablet/smartphone. 2026-06-11
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Topbar: esconder em ecrãs pequenos ───────────────────────────
   A informação (horário, telefone, email) passa a viver no menu móvel
   e no rodapé — evita 3 linhas de topbar num telemóvel. */
@media(max-width:767px){ .topbar{display:none} }

/* ── 2. Header compacto, logótipo sempre visível ───────────────────── */
@media(max-width:1023px){
  .header .row{padding:10px 16px; gap:10px; flex-wrap:nowrap; justify-content:space-between}
  .brand{flex:none; min-width:0}
  .brand img{height:46px; margin-block:0}            /* sem truque de margem negativa em mobile */
  .header-actions{margin-left:auto; gap:8px}
  .header-actions .btn{padding:9px 14px; font-size:13.5px; white-space:nowrap}
  .btn-mobile{flex:none; width:44px; height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:20px; line-height:1}
}
@media(max-width:639px){
  .header-actions .btn-secondary{display:none}        /* telefone vive no menu móvel */
  .brand img{height:40px}
}
@media(max-width:379px){
  .header-actions .btn-primary{padding:8px 11px; font-size:12.5px}
}

/* ── 2b. Botão hambúrguer → «X» (transição ao abrir/fechar o menu) ────
   O botão fica FIXO no topo-direito e ACIMA do drawer (z-index>90) para o
   «X» continuar visível e clicável quando o menu está aberto. As 3 barras
   giram/colapsam para formar o X (e voltam a barras ao fechar). */
@media(max-width:1023px){
  .btn-mobile{transition:background var(--dur), border-color var(--dur), color var(--dur)}
  /* 3 barras (em repouso, no header) */
  .btn-mobile .hamb{position:relative; display:block; width:22px; height:14px}
  .btn-mobile .hamb > span{
    position:absolute; left:0; right:0; height:2px; border-radius:2px; background:currentColor;
    transition:transform .3s var(--curva, ease), top .3s var(--curva, ease), opacity .15s ease;
  }
  .btn-mobile .hamb > span:nth-child(1){top:0}
  .btn-mobile .hamb > span:nth-child(2){top:6px}
  .btn-mobile .hamb > span:nth-child(3){top:12px}
  /* .no-canto: aplicado JÁ ao abrir — fixa o botão no canto (acima do drawer),
     ainda EM BARRAS. A rotação para «X» vem só com .menu-aberto, no frame
     seguinte, para a transição barras→X ser VISÍVEL (animada). */
  .btn-mobile.no-canto{
    position:fixed; top:14px; right:16px; z-index:95;
    color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.06);
  }
  body.menu-aberto .btn-mobile .hamb > span:nth-child(1){top:6px; transform:rotate(45deg)}
  body.menu-aberto .btn-mobile .hamb > span:nth-child(2){opacity:0; transform:scaleX(.3)}
  body.menu-aberto .btn-mobile .hamb > span:nth-child(3){top:6px; transform:rotate(-45deg)}
  .menu-fechar{display:none}                        /* o próprio botão transforma-se em X */
  .menu-mobile-topo{min-height:44px}
}
@media (prefers-reduced-motion: reduce){
  .btn-mobile, .btn-mobile .hamb > span{transition:none}
}

/* ── 3. Menu móvel (drawer de ecrã inteiro) ─────────────────────────── */
body.menu-aberto{overflow:hidden}
.menu-mobile{
  position:fixed; inset:0; z-index:90; display:flex; flex-direction:column;
  background:linear-gradient(165deg, #00282c 0%, #0d4f56 100%);
  padding:16px 22px 26px; overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.menu-mobile.aberto{opacity:1; visibility:visible; transform:none}
.menu-mobile-topo{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.menu-mobile-topo img{height:40px; display:block}
.menu-fechar{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.25); border-radius:12px;
  background:transparent; color:#fff; font-size:19px; line-height:1; cursor:pointer;
}
.menu-fechar:hover{background:rgba(255,255,255,.08)}
.menu-mobile nav{display:flex; flex-direction:column; margin-top:10px}
.menu-mobile nav a{
  color:#fff; text-decoration:none; font-size:19px; font-weight:600;
  padding:14px 6px; border-bottom:1px solid rgba(255,255,255,.10);
}
.menu-mobile nav a:active{background:rgba(255,255,255,.05)}
.menu-mobile nav a.is-active{color:var(--crma-turquesa-200,#62E1CD)}
.menu-mobile-acoes{display:flex; flex-direction:column; gap:10px; margin-top:24px}
.menu-mobile-acoes a{display:flex; justify-content:center; padding:14px; border-radius:12px; font-weight:700; font-size:15.5px; text-decoration:none}
.menu-mobile-acoes .btn-marcar{background:var(--crma-turquesa-500,#15CCB6); color:#00282c}
.menu-mobile-acoes .btn-tel{border:1px solid rgba(255,255,255,.3); color:#fff}
.menu-mobile-info{margin-top:auto; padding-top:24px; color:rgba(255,255,255,.72); font-size:13.5px; line-height:1.75}
.menu-mobile-info a{color:var(--crma-turquesa-200,#62E1CD); text-decoration:none}

/* ── Acordeão «Exames» (menu móvel): <details>/<summary> nativo ──
   Abrir/fechar é nativo do browser (toca-se no <summary>) — fiável no
   Safari iOS. O <summary> fica display:block e a linha (texto+chevron) vai
   num .m-acc-row em flex (summary{display:flex} parte o toggle no Safari).
   O conteúdo é mostrado/escondido nativamente pelo <details>. */
.m-exames{border-bottom:1px solid rgba(255,255,255,.10)}
.menu-mobile .m-acc-head{
  display:block; width:100%; cursor:pointer; list-style:none;
  background:transparent; border:0; text-align:left; font-family:inherit; color:#fff;
}
.menu-mobile .m-acc-head::-webkit-details-marker{display:none}   /* esconde o triângulo (Safari) */
.menu-mobile .m-acc-head::marker{content:""}                     /* idem (outros browsers) */
.m-acc-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.menu-mobile .m-acc-head--top{font-size:19px; font-weight:600; padding:14px 6px; color:#fff}
/* «Exames» só fica turquesa como os restantes itens ativos: quando a página atual
   pertence à secção (is-active, herdado do nav) ou com o acordeão aberto. */
.menu-mobile .m-acc-head--top.is-active,
.m-exames[open] > .m-acc-head--top{color:var(--crma-turquesa-200,#62E1CD)}
.menu-mobile .m-acc-head--mod{font-size:16.5px; font-weight:500; padding:12px 6px 12px 16px; border-top:1px solid rgba(255,255,255,.08)}
.m-chev{width:18px; height:18px; flex-shrink:0; color:rgba(255,255,255,.6); transition:transform .25s ease}
.m-exames[open] > .m-acc-head .m-chev,
.m-mod[open] > .m-acc-head .m-chev{transform:rotate(180deg)}
/* entrada subtil do conteúdo quando o <details> abre */
.m-acc-inner{min-height:0}
.m-exames[open] > .m-acc-inner,
.m-mod[open] > .m-acc-inner{animation:m-acc-in .28s var(--curva, ease)}
@keyframes m-acc-in{from{opacity:0; transform:translateY(-7px)} to{opacity:1; transform:none}}
.m-area-lbl{font:700 11px/1 var(--crma-fonte-base, inherit); text-transform:uppercase; letter-spacing:1.2px; color:var(--crma-turquesa-200,#62E1CD); opacity:.72; padding:15px 6px 7px 16px}
.menu-mobile .m-mod-link{display:block; text-decoration:none; font-size:16.5px; font-weight:500; color:rgba(255,255,255,.92); padding:12px 6px 12px 16px; border-top:1px solid rgba(255,255,255,.08); border-bottom:0}
.menu-mobile .m-sub{display:block; text-decoration:none; font-size:15.5px; font-weight:500; color:rgba(255,255,255,.80); padding:11px 6px 11px 32px; border-top:1px solid rgba(255,255,255,.06); border-bottom:0}
.menu-mobile .m-sub--all,.menu-mobile .m-exames-all{color:var(--crma-turquesa-200,#62E1CD); font-weight:700}
.menu-mobile .m-mod-link:active,.menu-mobile .m-sub:active,.menu-mobile .m-acc-head:active{background:rgba(255,255,255,.05)}
@media (prefers-reduced-motion: reduce){
  .m-chev{transition:none}
  .m-exames[open] > .m-acc-inner,.m-mod[open] > .m-acc-inner{animation:none}
}

@media(min-width:1024px){.menu-mobile{display:none}}

/* ── 3b. "Porquê CRMA": o bloco esquerdo só é sticky em desktop ──────
   Em mobile a grelha é de coluna única e o sticky fazia o título
   deslizar por cima dos cards (sobreposição reportada em iPhone). */
@media(max-width:1023px){ .porque-grid .esq{position:static} }

/* ── 4. Refinamentos de leitura em ecrãs pequenos ───────────────────── */
@media(max-width:767px){
  /* Tabelas (protocolos, resultados) deslizam horizontalmente em vez de partir o layout */
  .container table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  /* Breadcrumb com respiração lateral consistente */
  .breadcrumb{padding-left:16px; padding-right:16px}
}

/* ── 5. Compactação vertical em smartphone (decisão Roberto, 2026-06-11) ──
   Objetivo: reduzir 12–18% do scroll sem tocar no conteúdo. Nota sobre o
   !important: muitas secções têm padding INLINE no HTML (style="padding:64px 32px"),
   que vence qualquer stylesheet — o !important é a única forma de compactar
   transversalmente sem editar 37 ficheiros. Razão documentada (convenção do projeto). */
@media(max-width:767px){
  section{padding-top:44px !important; padding-bottom:44px !important;
          padding-left:20px !important; padding-right:20px !important}
  .hero{padding-top:44px !important; padding-bottom:48px !important}
  .sec-head{margin-bottom:24px}
  .sec-head-grid{margin-bottom:22px; gap:14px}
  .cta-card{padding:30px 22px}
  .bloco-destaque-corpo{padding:36px 22px}
  .footer{padding-top:44px; margin-top:48px}
  .divider{margin:32px 0}
  .faq summary{padding-top:15px; padding-bottom:15px}
  .cards{gap:14px}
  .vantagens-grid{gap:14px}
}


/* ── 7. Chips «Nesta página» sticky (smartphone) ─────────────────────
   Construídos por JS a partir do sumário existente (26 páginas de exame).
   Ficam colados por baixo do header; o bloco de sumário original é
   escondido em <768px (os chips substituem-no). Decisão Roberto 2026-06-11. */
.chips-pagina{
  position:sticky; z-index:40;            /* top definido por JS = altura do header */
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:10px 16px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(13,79,86,.10);
  scrollbar-width:none;
}
.chips-pagina::-webkit-scrollbar{display:none}
.chips-pagina a{
  flex:none; padding:8px 14px; border-radius:999px;
  border:1px solid rgba(13,79,86,.18); background:#fff;
  font-size:13px; font-weight:600; color:var(--crma-petroleo-600,#0d4f56);
  text-decoration:none; white-space:nowrap;
}
.chips-pagina a.ativa{background:var(--crma-petroleo-600,#0d4f56); color:#fff; border-color:var(--crma-petroleo-600,#0d4f56)}
@media(min-width:768px){.chips-pagina{display:none}}
@media(max-width:767px){
  .sumario{display:none}                       /* substituído pelos chips */
  h2[id]{scroll-margin-top:128px}              /* âncoras não ficam sob header+chips */
}

/* ── 8. «Voltar ao topo» (smartphone) ────────────────────────────────
   Botão flutuante discreto; aparece após ~2 ecrãs de scroll.
   Decisão Roberto 2026-06-11. */
.voltar-topo{
  position:fixed; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:70;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(13,79,86,.18);
  background:rgba(255,255,255,.95); color:var(--crma-petroleo-600,#0d4f56);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 16px rgba(0,0,0,.16);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.voltar-topo.visivel{opacity:1; visibility:visible; transform:none}
.voltar-topo svg{width:20px; height:20px; display:block}
@media(min-width:768px){.voltar-topo{display:none}}


/* HERO-FOTO em mobile: banda responsiva em vez de altura fixa de 540px,
   para não recortar a foto nem ocupar o ecrã todo. */
@media (max-width:768px){
  .hero-foto{
    height:auto;
    aspect-ratio:16/9;     /* banda discreta (~220px a 390px de largura) */
    max-height:50vh;       /* salvaguarda em ecrãs baixos */
    object-position:center;
  }
}

/* FIGURA DE EXAME em mobile: quadros menos altos e com menos folga. */
@media (max-width:768px){
  .exame-figura .exame-figura__quadro{min-height:210px; padding:20px}
}