/* ============================================================
   Telemedico.med.br — folha de estilo ÚNICA de todas as páginas
   Editar AQUI muda o site inteiro. Não duplicar CSS em página.
   ============================================================ */
:root{--azul:#2c3e50;--azul2:#3498db;--bg:#f4f6f8;--txt:#2c3e50;--mut:#5a6c7d;--line:#e8ecef;--amb:#b9770e;--ambbg:#fef6e7;--verde:#27ae60}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--txt);line-height:1.7}

/* ---- barra de progresso ---- */
#prog{position:fixed;top:0;left:0;height:3px;background:var(--azul2);width:0;z-index:60;transition:width .1s}

/* ---- header fixo ---- */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topin{max-width:1120px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--azul);text-decoration:none;font-size:15px;white-space:nowrap}
.logo img{width:26px;height:26px;flex:none;display:block;border-radius:6px}
nav.menu{display:flex;gap:19px;margin-left:auto;align-items:center}
nav.menu a{color:var(--mut);text-decoration:none;font-size:14px;font-weight:600}
nav.menu a:hover{color:var(--azul2)}
nav.menu a.cta{background:var(--azul2);color:#fff;padding:0 17px;border-radius:7px;
               min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.2}
@media(max-width:820px){nav.menu a.hidem,nav.menu .hidem{display:none}}

/* ---- submenu de ferramentas (alimentado pelo catálogo) ----
   Os links ficam no HTML de verdade, então o Google rastreia mesmo fechado.
   Abre no hover E no foco por teclado. */
.temsub{position:relative}
.temsub>a{color:var(--mut);text-decoration:none;font-size:14px;font-weight:600;
          display:inline-flex;align-items:center;gap:5px;padding:6px 0}
.temsub:hover>a,.temsub:focus-within>a{color:var(--azul2)}
.seta{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
      transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.temsub:hover .seta,.temsub:focus-within .seta{transform:rotate(-135deg) translateY(-1px)}
.sub{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
     min-width:290px;background:#fff;border:1px solid var(--line);border-radius:12px;
     box-shadow:0 12px 34px rgba(44,62,80,.15);padding:9px;z-index:70;
     opacity:0;visibility:hidden;transition:opacity .16s,transform .16s}
.temsub:hover .sub,.temsub:focus-within .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sub:before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} /* ponte p/ o mouse não perder o hover */
.sub .subtit{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
             color:var(--azul2);font-weight:800;padding:9px 11px 5px}
.sub a{display:block;padding:8px 11px;border-radius:8px;text-decoration:none;
       color:var(--txt);font-size:14px;font-weight:600;line-height:1.35}
.sub a em{display:block;font-style:normal;font-size:12.4px;color:var(--mut);font-weight:400;margin-top:1px}
.sub a:hover{background:#f2f8fc;color:var(--azul2)}
.sub .subtodas{margin-top:5px;border-top:1px solid var(--line);border-radius:0 0 8px 8px;
               color:var(--azul2);font-size:13.4px;padding-top:10px}

/* ---- navegação do celular: os mesmos links, em fita rolável ---- */
.menumob{display:none}
@media(max-width:820px){
  .menumob{display:flex;gap:7px;overflow-x:auto;padding:0 14px 9px;
           background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
           -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .menumob::-webkit-scrollbar{display:none}
  .menumob a{flex:none;font-size:13.5px;font-weight:600;color:var(--mut);text-decoration:none;
             padding:0 14px;min-height:40px;display:inline-flex;align-items:center;
             border:1px solid var(--line);border-radius:99px;background:#fff;white-space:nowrap}
  .menumob a:active{color:var(--azul2);border-color:var(--azul2)}
  .top{padding-bottom:0}
  .topin{padding-bottom:9px}
}
@media(max-width:400px){.logo{font-size:13.5px}nav.menu a.cta{padding:11px 12px;font-size:13.5px}}

/* ---- grid artigo + sidebar ---- */
.grid{max-width:1120px;margin:0 auto;padding:26px 18px 60px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:38px;align-items:start}
.grid.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
@media(max-width:960px){.grid{grid-template-columns:1fr;gap:0}}
article,.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px}
@media(max-width:600px){article,.card{padding:22px 18px;border-radius:10px}}
.card{margin-bottom:18px}

.crumbs{font-size:12.5px;color:var(--mut);margin-bottom:14px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--azul2)}
h1{font-size:30px;line-height:1.24;margin:0 0 12px;letter-spacing:-.4px}
@media(max-width:600px){h1{font-size:25px}}
.byline{font-size:13px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.byline .rev{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%}
.byline .dot{width:5px;height:5px;border-radius:50%;background:var(--verde);flex:none;margin-top:8px}
.lead{font-size:18.5px;color:#40525f;margin:0 0 22px;line-height:1.62}
h2{font-size:21px;margin:34px 0 10px;padding-top:6px;scroll-margin-top:76px;letter-spacing:-.2px}
h3{font-size:16.5px;margin:20px 0 5px}
p,li{font-size:16.5px}
article a,.card a{color:var(--azul2)}

/* ---- caixas ---- */
.cta-box{background:linear-gradient(135deg,var(--azul),var(--azul2));color:#fff;border-radius:12px;padding:26px;margin:34px 0;text-align:center}
.cta-box h3{margin:0 0 6px;font-size:19px;color:#fff}
.cta-box p{margin:0 0 14px;opacity:.94;font-size:15.5px}
.cta{display:inline-block;background:#fff;color:var(--azul);text-decoration:none;padding:12px 28px;border-radius:8px;font-weight:700}
.faq h3{margin:18px 0 4px;font-size:16px}

/* ---- FAQ em acordeão (nativo, sem JS) ---- */
.faq details{border:1px solid var(--line);border-radius:10px;margin:9px 0;background:#fcfdfe;overflow:hidden}
.faq details[open]{background:#fff;border-color:#d6e4ef}
.faq summary{cursor:pointer;list-style:none;padding:14px 42px 14px 16px;font-weight:700;font-size:15.5px;
             color:var(--azul);position:relative;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:17px;top:20px;width:8px;height:8px;
                   border-right:2px solid var(--azul2);border-bottom:2px solid var(--azul2);
                   transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary:after{transform:rotate(-135deg);top:23px}
.faq summary:hover{color:var(--azul2)}
.faq .resp{padding:0 16px 4px}
.faq .resp p{margin:0 0 14px;color:#42525f}

/* ---- CTA discreto no meio do texto ---- */
.ctameio{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;
         background:var(--bg);border:1px solid #dde5ec;border-left:3px solid var(--azul2);
         border-radius:10px;padding:15px 18px;margin:30px 0}
.ctameio p{margin:0;font-size:15.3px;font-weight:600;color:var(--azul)}
.ctameio a{background:var(--azul2);color:#fff;text-decoration:none;font-weight:700;font-size:14.3px;
           border-radius:8px;padding:0 18px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
@media(max-width:520px){.ctameio a{width:100%;justify-content:center}}
.disc{background:var(--ambbg);border:1px solid #f3e2bd;border-radius:11px;padding:17px;color:#6b4e12;font-size:13.4px;line-height:1.62;margin:30px 0 0}
.nota{background:var(--ambbg);border:1px solid #f3e2bd;border-radius:10px;padding:14px 16px;color:#6b4e12;font-size:14px;margin:12px 0}

/* ---- sidebar ---- */
aside{position:sticky;top:74px}
@media(max-width:960px){aside{position:static;margin-top:22px}}
.side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:16px}
.side h4{margin:0 0 11px;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--azul2);font-weight:800}
.toc{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 3px}
.toc a{display:block;color:var(--mut);text-decoration:none;font-size:14px;padding:5px 9px;border-left:2px solid var(--line);line-height:1.45}
.toc a:hover{color:var(--azul2);border-left-color:var(--azul2);background:#f7fafc}
.toc a.on{color:var(--azul2);border-left-color:var(--azul2);font-weight:600;background:#f0f7fc}
/* lista de ferramentas na lateral */
.listaf{list-style:none;margin:0;padding:0}
.listaf li{margin:0 0 4px}
.listaf a{display:block;padding:9px 11px;border-radius:9px;text-decoration:none;
          color:var(--txt);font-size:14px;font-weight:600;line-height:1.34;
          border:1px solid transparent;transition:.15s}
.listaf a em{display:block;font-style:normal;font-size:12.3px;color:var(--mut);font-weight:400;margin-top:1px}
.listaf a:hover{background:#f2f8fc;border-color:#d6e6f2;color:var(--azul2)}

.rel2{list-style:none;margin:0;padding:0}
.rel2 li{margin:0 0 9px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.rel2 li:last-child{border:0;margin:0;padding:0}
.rel2 a{color:var(--txt);text-decoration:none;font-size:14px;font-weight:600;line-height:1.42;display:block}
.rel2 a:hover{color:var(--azul2)}
.sidecta{background:linear-gradient(135deg,var(--azul),var(--azul2));border-radius:12px;padding:19px;text-align:center;color:#fff}
.sidecta p{margin:0 0 12px;font-size:14.5px;font-weight:600;line-height:1.45}
.sidecta a{display:block;background:#fff;color:var(--azul);text-decoration:none;padding:10px;border-radius:7px;font-weight:700;font-size:14px}

/* ---- grade de cards (hubs) ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cardlink{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:inherit;transition:.18s}
.cardlink:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(44,62,80,.11);border-color:var(--azul2)}
.cardlink h2{margin:0 0 8px;font-size:16.5px;line-height:1.35;color:var(--azul)}
.cardlink p{margin:0 0 10px;font-size:14px;color:var(--mut)}
.cardlink .more{font-size:13.5px;font-weight:700;color:var(--azul2)}

/* ---- rodapé ---- */
footer{background:var(--azul);color:#c6d4de;margin-top:20px}
.fin{max-width:1120px;margin:0 auto;padding:36px 18px 26px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:26px}
@media(max-width:880px){.fin{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:560px){.fin{grid-template-columns:1fr;gap:20px}}
.fin a{padding:3px 0}
.fin h5{color:#fff;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 11px}
.fin a{color:#c6d4de;text-decoration:none;font-size:14px;display:block;margin-bottom:7px}
.fin a:hover{color:#fff}
.fin p{font-size:13.5px;line-height:1.62;margin:0 0 9px}
.fbot{border-top:1px solid rgba(255,255,255,.14);padding:15px 18px 30px;text-align:center;font-size:12.4px;color:#94a8b8;max-width:1120px;margin:0 auto;line-height:1.9}
.fbot a{color:#c6d4de;text-decoration:none}
.fbot a:hover{color:#fff;text-decoration:underline}
.fin .selos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fin .selos span{font-size:11.6px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
                 border-radius:99px;padding:5px 11px;color:#dbe6ee}

/* ---- cartão de perfil médico (/dr/) ---- */
.page{max-width:520px;margin:0 auto}

/* ---- pular para o conteúdo (acessibilidade / teclado) ---- */
.pular{position:absolute;left:-999px;top:0;z-index:99;background:var(--azul2);color:#fff;
       padding:11px 17px;border-radius:0 0 8px 0;text-decoration:none;font-weight:700;font-size:14px}
.pular:focus{left:0}

/* ---- barra fixa do celular: discreta, fechável, some no fim da página ---- */
.fixmob{display:none}
@media(max-width:820px){
  .fixmob{display:flex;align-items:center;gap:10px;position:fixed;left:10px;right:10px;bottom:10px;z-index:55;
          background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:12px;
          box-shadow:0 5px 20px rgba(44,62,80,.17);padding:9px 10px 9px 14px}
  .fixmob span{font-size:13px;font-weight:600;color:var(--azul);line-height:1.3;flex:1}
  .fixmob a{background:var(--azul2);color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
            border-radius:8px;padding:0 14px;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
  .fixmob button{border:0;background:none;color:var(--mut);font-size:19px;line-height:1;
                 min-width:34px;min-height:34px;cursor:pointer;padding:0}
  footer{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#prog{transition:none}}