/* ═══════════════════════════════════════════════════════════════════════
   equipe/equipe.css — CARROSSEL E MODAIS DA EQUIPE, PARA AS TRÊS PÁGINAS

   Usado por /mentalhelp, /terapias e /kids. É a ÚNICA folha do componente:
   mudou aqui, mudou nas três.

   ⚠ SEM o prefixo #mh de propósito. Em mentalhelp.html o carrossel nasceu
     dentro de #mh; terapias.html e kids.html não têm esse contêiner. As
     classes mhCar-* e mhBio* são exclusivas deste componente — conferido nas
     três páginas antes de tirar o escopo.

   ⚠ O reset `#mh .mhP *{margin:0;padding:0}` (especificidade 1,1,0) anula
     qualquer regra .mhBio* dentro dele. Por isso os modais são injetados
     ANTES de </body>, fora de #mh. Medido em 31/08/2026 — ver NOTA 29.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   ⚠ BLINDAGEM CONTRA O RESET DE /mentalhelp — 01/09/2026

   `#mh .mhP *{box-sizing:border-box;margin:0;padding:0}` tem especificidade
   (1,1,0) e DERROTA toda classe deste arquivo (0,1,0). Efeito medido: o
   `margin:0 auto` do palco e do cabeçalho computava 0 (bloco ancorado à
   ESQUERDA, cards colados na borda da janela) e o padding lateral da seção
   computava 0. Só em /mentalhelp — /terapias e /kids não têm .mhP.
   Sonda: a MESMA div .mhCar-sec-in computa margin-left 162px no body e 0px
   dentro de .mhP.

   Por isso as declarações de MARGIN e PADDING deste componente levam
   !important: é a defesa contra um reset externo de especificidade maior, o
   caso de uso legítimo da regra. NOTA 37.

   E box-sizing explícito: dentro de .mhP o reset dá border-box; fora (nas
   outras duas páginas) o padrão é content-box, e o mesmo card sairia com
   outra medida. Declarado aqui, é igual nas três. */
.mhCar-sec,.mhCar-sec *,.mhCar-sec *::before,.mhCar-sec *::after,
.mhBioModal,.mhBioModal *{box-sizing:border-box}

/* ── cabeçalho da seção: classes próprias, para a seção ficar igual nas três
      páginas (mentalhelp usa .mhSec*, terapias e kids têm as suas) ────────── */
/* a fonte vem declarada aqui: em mentalhelp ela vinha de #mh .mhP, e as
   outras duas páginas não têm esse contêiner */
.mhCar-sec{padding:72px 24px 80px !important;text-align:center;
           font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif}
.mhCar-sec-in{max-width:1100px;margin:0 auto !important}
.mhCar-label{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:2.5px;
             text-transform:uppercase;color:#C9A84C;margin-bottom:8px !important}
.mhCar-titulo{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;color:#fff;margin:0 0 12px !important}
.mhCar-desc{font-size:.9rem;color:rgba(248,247,244,.6);max-width:600px;margin:0 auto 48px !important;line-height:1.8}

/* ── o palco ─────────────────────────────────────────────────────────── */
.mhCar{position:relative;overflow:hidden;padding:4px 0 8px !important;
           /* a mesma largura da grade de 9 (.mhSec-in), para as duas
              seções terminarem na mesma linha vertical */
           max-width:1100px;margin:0 auto !important;
           /* as bordas somem em degradê para o laço não ter emenda visível */
           -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
           mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.mhCar-trilha{display:flex;gap:24px;width:max-content;will-change:transform;
                  cursor:grab;touch-action:pan-y;}
.mhCar-trilha.arrastando{cursor:grabbing;}

/* ── o card — mesma linguagem da grade de cima, medidas próprias ─────── */
.mhCar-card{flex:0 0 196px;width:196px;height:269px;
                display:flex;flex-direction:column;align-items:center;
                text-align:center;padding:22px 14px 26px !important;
                background:linear-gradient(145deg,rgba(20,41,30,.6),rgba(14,30,22,.4));
                border:1px solid rgba(255,255,255,.06);border-radius:16px;
                font-family:inherit;cursor:pointer;position:relative;
                transition:border-color .3s,box-shadow .3s,background .3s;
                -webkit-user-select:none;user-select:none;}
/* ⚠ O HOVER NÃO MOVE O CARD — corrigido em 01/09/2026
   Antes: transform:translateY(-4px). O card sob o ponteiro subia 4px e saía da
   linha dos vizinhos — nome, cargo, registro e foto todos deslocados. Era o
   desalinhamento que o João via no print, e nenhuma medição minha pegou porque
   eu media offset DENTRO do card (cego a deslocamento do card inteiro) e sem o
   ponteiro em cima.
   Regra que passa a valer: nenhum estado visual (hover, foco, ativo) pode
   alterar posição de card ou de texto. Só cor, borda e sombra. */
.mhCar-card:hover{border-color:rgba(201,168,76,.45);
                  box-shadow:0 0 0 1px rgba(201,168,76,.18) inset;
                  background:linear-gradient(145deg,rgba(24,48,35,.72),rgba(16,34,25,.5));}
.mhCar-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;
                              border-color:rgba(201,168,76,.4);}
/* a mesma pista da grade: "Clique para ver mais" ao passar o mouse */
.mhCar-card::after{content:'Clique para ver mais';position:absolute;bottom:10px;
                       left:50%;transform:translateX(-50%);font-size:.58rem;
                       text-transform:uppercase;letter-spacing:1.5px;font-weight:600;
                       color:rgba(201,168,76,.4);opacity:0;transition:opacity .3s;
                       white-space:nowrap;pointer-events:none;}
.mhCar-card:hover::after,.mhCar-card:focus-visible::after{opacity:1;}

.mhCar-foto{width:118px;height:118px;border-radius:50%;object-fit:cover;
                border:3px solid rgba(201,168,76,.2);margin:0 auto 14px !important;display:block;
                background:rgba(201,168,76,.05);flex:none;pointer-events:none;}
/* ⚠ O TEXTO É CENTRADO DENTRO DA CAIXA RESERVADA — 01/09/2026
   Reservar duas linhas alinhou o CARGO e o REGISTRO, mas o texto ficava colado
   no TOPO da caixa: nome de uma linha deixava um buraco antes do cargo, e a
   coluna saía visualmente irregular mesmo com os offsets iguais. Foi isso que o
   João viu na terceira vez, e o que nenhuma medição de posição pegou — porque
   as posições ESTAVAM iguais; o que estava torto era o texto dentro da caixa.
   Com flex + align-items:center, uma linha ou duas ficam sempre centradas na
   mesma caixa, e a coluna fecha.

   ⚠ CARGO E REGISTRO RESERVAM DUAS LINHAS — corrigido em 01/09/2026
   Com uma linha só reservada, "Pediatra • Neuropediatria" e
   "CRM/PE 26.171 | RQE 3.502" (Dra. Joana, no carrossel de /kids) quebravam em
   duas no iPhone e empurravam o registro 12,27px abaixo do dos vizinhos.
   Medido com o min-height ZERADO — ligado, ele mascara a contagem de linhas.
   Reservar duas em todos custa um pouco de espaço onde o texto é curto e paga
   com topo igual em qualquer largura, nas três páginas.

   ⚠ FALLBACK NAS VARIÁVEIS: /terapias e /kids não declaram --txt3, e sem
   fallback o registro herdava branco em vez do cinza. Medido em produção.

   alturas fixas por bloco: é o que garante desvio 0,00px entre os cards.
   Medido em 31/08/2026: com os nomes abreviados, os 12 cabem em 2 linhas nas
   três larguras — por isso min-height de 2,6em (2 x line-height 1.3). */
.mhCar-nome{display:flex;align-items:center;justify-content:center;text-align:center;
                font-size:.82rem;font-weight:700;color:#fff;
                line-height:1.3;min-height:2.6em;margin-bottom:4px !important;}
.mhCar-cargo{display:flex;align-items:center;justify-content:center;text-align:center;
                 font-size:.68rem;color:var(--gold,#C9A84C);font-weight:600;
                 letter-spacing:.5px;line-height:1.3;min-height:2.6em;}
.mhCar-reg{display:flex;align-items:center;justify-content:center;text-align:center;
               font-size:.72rem;color:var(--txt3,rgba(248,247,244,.35));margin-top:6px !important;
               line-height:1.3;min-height:2.6em;}

@media(max-width:991px){
  .mhCar-trilha{gap:20px;}
  .mhCar-card{flex-basis:186px;width:186px;height:255px;padding:20px 12px 24px !important;}
  .mhCar-foto{width:104px;height:104px;}
}
@media(max-width:600px){
  .mhCar-trilha{gap:14px;}
  .mhCar-card{flex-basis:152px;width:152px;height:242px;padding:18px 10px 22px !important;}
  .mhCar-foto{width:92px;height:92px;margin-bottom:12px !important;}
  .mhCar-nome{font-size:.76rem;min-height:2.6em;}
  .mhCar-card::after{content:'Ver mais';}
}

/* ── sem animação: vira faixa rolável, sem clone e sem laço ───────────── */
@media(prefers-reduced-motion:reduce){
  .mhCar{overflow-x:auto;scroll-snap-type:x proximity;
             -webkit-mask-image:none;mask-image:none;
             scrollbar-width:thin;padding-bottom:14px;}
  .mhCar-trilha{cursor:default;}
  .mhCar{scroll-padding-inline:24px;}
  .mhCar-card{scroll-snap-align:center;}
  .mhCar-card:first-child{scroll-snap-align:start;}
  /* nada a neutralizar: o hover já não move o card */
}


/* ── o modal ─────────────────────────────────────────────────────────────
   Copiado de mentalhelp.html, onde já existia. Fica aqui porque terapias.html
   e kids.html não tinham nenhuma regra .mhBio*.
   ⚠ mentalhelp.html mantém a cópia original dessas regras no <style> da
     página. Os valores são idênticos; remover de lá exigiria recortar o meio
     de uma folha de 12,8 KB numa página pública, risco maior que o ganho.
     Registrado na NOTA 32 como pendência. */
/* === OVERLAY === */
.mhBioModal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);align-items:center;justify-content:center;padding:16px;}
.mhBioModal.active{display:flex;animation:mhFadeIn .35s ease;}
@keyframes mhFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mhSlideUp{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.mhBio-box{background:linear-gradient(160deg,rgba(14,30,22,.95),rgba(9,20,16,.98));border:1px solid rgba(201,168,76,.12);border-radius:24px;padding:0;overflow:hidden;max-width:580px;width:100%;position:relative;box-shadow:0 40px 100px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.06),inset 0 1px 0 rgba(255,255,255,.03);animation:mhSlideUp .4s cubic-bezier(.16,1,.3,1);}
.mhBio-box::before{content:'';position:absolute;top:0;left:0;right:0;height:180px;background:linear-gradient(180deg,rgba(201,168,76,.07) 0%,transparent 100%);pointer-events:none;border-radius:24px 24px 0 0;}
.mhBio-scroll{padding:40px 36px;overflow-y:auto;max-height:85vh;position:relative;z-index:1;}
.mhBio-close{position:absolute;top:16px;right:18px;z-index:2;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.45);font-size:1rem;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .25s;line-height:1;}
.mhBio-close:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.15);}
.mhBio-header{display:flex;align-items:center;gap:22px;margin-bottom:24px;}
.mhBio-photo{width:100px;height:100px;border-radius:50%;object-fit:cover;flex-shrink:0;border:3px solid rgba(201,168,76,.2);box-shadow:0 8px 28px rgba(0,0,0,.3),0 0 0 6px rgba(201,168,76,.06);}
.mhBio-name{font-size:1.4rem;font-weight:800;color:var(--gold,#C9A84C);letter-spacing:-.02em;line-height:1.2;}
.mhBio-role{font-size:.85rem;color:rgba(255,255,255,.4);margin-top:6px;font-weight:400;}
.mhBio-divider{width:60px;height:2px;background:linear-gradient(90deg,rgba(201,168,76,.5),transparent);margin-bottom:28px;border-radius:2px;}
.mhBio-section{margin-bottom:24px;}
.mhBio-section h5{font-size:.68rem;font-weight:700;color:var(--gold,#C9A84C);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:14px;display:flex;align-items:center;gap:10px;}
.mhBio-section h5::after{content:'';flex:1;height:1px;background:rgba(201,168,76,.1);}
.mhBio-section ul{list-style:none;padding:0;margin:0;}
.mhBio-section ul li{padding:10px 0 10px 20px;font-size:.88rem;color:rgba(255,255,255,.65);border-bottom:1px solid rgba(255,255,255,.04);position:relative;line-height:1.6;transition:color .2s;}
.mhBio-section ul li:hover{color:rgba(255,255,255,.9);}
.mhBio-section ul li:last-child{border-bottom:none;}
.mhBio-section ul li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:rgba(201,168,76,.15);border:2px solid rgba(201,168,76,.3);}
.mhBio-text{font-size:.9rem;line-height:1.85;color:rgba(255,255,255,.5);padding:16px 0 0;border-top:1px solid rgba(255,255,255,.04);margin-top:4px;}
.mhTeam-card{transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;position:relative;display:flex;flex-direction:column;align-items:center;}
.mhTeam-card::after{content:'Clique para ver mais';position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:.58rem;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;color:rgba(201,168,76,.4);opacity:0;transition:opacity .3s;white-space:nowrap;}
.mhTeam-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.3);}
.mhTeam-card:hover::after{opacity:1;}
.mhTeam-card:hover .mhTeam-photo{border-color:rgba(201,168,76,.4);transform:scale(1.06);}
.mhTeam-photo{transition:all .35s ease;}
@keyframes mhPulse{0%,100%{opacity:.4;}50%{opacity:1;}}
@media(max-width:600px){
  .mhBio-scroll{padding:28px 22px;}
  .mhBio-header{gap:16px;}
  .mhBio-photo{width:76px;height:76px;}
  .mhBio-name{font-size:1.15rem;}
  .mhBio-section ul li{font-size:.82rem;padding:8px 0 8px 18px;}
  .mhBio-text{font-size:.84rem;}
  .mhTeam-card{padding-bottom:40px!important;}
  .mhTeam-card::after{opacity:1!important;animation:mhPulse 1.8s ease-in-out infinite;}
}

/* A fonte que #mh .mhP dava aos modais em mentalhelp.html. Fora de #mh — e nas
   outras duas páginas — ela precisa ser declarada aqui. */
.mhBioModal{font-family:'Montserrat',sans-serif;color:#e0ddd4;line-height:1.7}