/* ============================================================
   Dr. César Torre — Link Page
   Estrutura: a mesma da versão publicada (feita no Lovable),
   coluna única centrada, retrato redondo, nome, função, régua,
   lema, três destinos em cartão e rodapé.
   Identidade: a da LP1 "Medo de Parar", e só dela.
   Base osso clara, tinta grafite, lima ELÉCTRICO como acento,
   Archivo nos títulos e Inter no corpo. Atlética, não clínica.

   NUNCA passar isto a fundo escuro nem trocar a tipografia:
   base escura com acento lima é a assinatura da link page do
   Dr João Pimentel. Ver .claude/skills/identidade-visual-por-cliente.
   ============================================================ */

:root{
  --osso:#F3F3F1;
  --osso-2:#E8E8E4;
  --branco:#FFFFFF;
  --grafite:#14161A;
  --tinta:#14161A;
  --tinta-suave:#5C6169;
  --lima:#C6F24E;
  --lima-escuro:#A8D62E;
  --linha:rgba(20,22,26,.12);
  --cuf:#0A5AA8;            /* azul do canal oficial, aproximado, confirmar com o cliente */
  --cuf-suave:rgba(10,90,168,.10);
  --r:14px;
  --maxw:480px;
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--osso);
  color:var(--tinta);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}

/* Radiografia do joelho, o mesmo material da versão publicada,
   aqui muito discreta sobre a base clara. */
.fundo{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('../img/joelho-fundo.jpg') no-repeat right center;
  background-size:cover;
  opacity:.032;
  filter:grayscale(1);
}

/* ---------- Palco ---------- */
.palco{
  position:relative;z-index:1;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:44px 22px 34px;
}
.cartao{width:100%;max-width:var(--maxw);text-align:center}

/* ---------- Topo ---------- */
.retrato{
  width:132px;height:132px;border-radius:50%;overflow:hidden;
  margin:0 auto 22px;
  border:1.5px solid var(--linha);
  box-shadow:0 16px 34px rgba(20,22,26,.12);
}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:50% 16%}

h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,8vw,40px);line-height:1.02;
  letter-spacing:-.04em;margin-bottom:8px;
}
.eyebrow{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  letter-spacing:.20em;text-transform:uppercase;
  color:var(--tinta-suave);
}
.regua{
  width:52px;height:3px;background:var(--lima);
  border-radius:2px;margin:16px auto 18px;
}
.lema{
  font-family:var(--display);font-weight:700;
  font-size:clamp(18px,4.6vw,21px);line-height:1.25;
  letter-spacing:-.03em;max-width:24ch;margin:0 auto 32px;
}
.lema em{font-style:normal;box-shadow:inset 0 -.32em 0 var(--lima)}

/* ---------- Destinos ----------
   Todos os cartões têm a mesma forma e o mesmo peso. A diferença
   entre eles é o conteúdo, não o tamanho: nada aqui grita. */
.destinos{display:grid;gap:12px;text-align:left}

.destino{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:15px;
  background:var(--branco);
  border:1px solid var(--linha);border-radius:var(--r);
  padding:17px 19px;text-decoration:none;color:var(--tinta);
  transition:border-color .18s,transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s;
}
.destino:hover{
  border-color:var(--grafite);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(20,22,26,.09);
}
.destino:focus-visible{outline:2px solid var(--grafite);outline-offset:3px}

.icone{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--osso-2);
  display:flex;align-items:center;justify-content:center;
  color:var(--grafite);
}
.icone svg{width:19px;height:19px}
/* o acento da casa aparece aqui, discreto, sem transformar o cartão em anúncio */
.icone-zap{background:var(--lima);color:var(--grafite)}
.icone-cuf{background:var(--cuf-suave);color:var(--cuf)}

.txt{display:flex;flex-direction:column;min-width:0;position:relative;z-index:2}
.tit{
  font-family:var(--display);font-weight:700;font-size:16.5px;
  letter-spacing:-.02em;line-height:1.25;
}
.sub{font-size:13.5px;color:var(--tinta-suave);margin-top:2px;opacity:.85}
.seta{
  width:19px;height:19px;margin-left:auto;flex:none;position:relative;z-index:3;
  color:var(--tinta-suave);transition:transform .18s,color .18s;
}
/* nos cartões com imagem a seta encosta à borda, não fica a meio do cartão */
.destino-lp .seta{position:absolute;right:19px;top:50%;margin-top:-9.5px}
.destino:hover .seta{color:var(--grafite);transform:translateX(3px)}

/* ---------- Cartões das landing pages ----------
   Sem ícone. Em vez disso, a radiografia do joelho entra pelo terço
   da direita, invertida e a multiplicar, para ficarem só as linhas
   do osso sobre o cartão branco. É material do próprio cliente. */
.destino-lp{padding-right:32%}
.detalhe{
  position:absolute;top:0;right:0;z-index:1;
  width:34%;height:100%;object-fit:cover;object-position:50% 56%;
  filter:grayscale(1) contrast(1.12);
  mix-blend-mode:multiply;opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 70%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 70%),
    linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect;
  pointer-events:none;
}
.destino-lp2 .detalhe{
  object-position:50% 34%;
  filter:grayscale(1) invert(1) contrast(2.1) brightness(1.1);
  opacity:.42;
}
.destino-lp::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:52px;z-index:2;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--branco) 78%);
  pointer-events:none;
}
/* nos cartões das landing pages o título é o que manda: linha pequena
   por cima, título grande, e a chamada apagada por baixo */
.mini{
  font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-suave);margin-bottom:5px;
}
.destino-lp .tit{font-size:21px;line-height:1.12;letter-spacing:-.035em}
.destino-lp .sub{font-size:13px;margin-top:5px}
.destino-lp{padding-top:19px;padding-bottom:19px}
.destino-lp:hover .detalhe{opacity:.58}

/* ---------- Canal oficial ----------
   Mesmo cartão, mesmo tamanho. Só o azul da CUF no ícone o distingue. */
.destino-cuf .tit{font-weight:700}
.destino-cuf:hover{border-color:var(--cuf);box-shadow:0 10px 26px rgba(10,90,168,.12)}
.destino-cuf:hover .seta{color:var(--cuf)}

/* ---------- Rodapé ---------- */
.rodape{margin-top:34px;padding-top:24px;border-top:1px solid var(--linha)}
.locais{
  font-family:var(--display);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:var(--tinta-suave);margin-bottom:14px;
}
.copy{font-size:12.5px;color:var(--tinta-suave)}
.legais{font-size:12.5px;margin-top:5px}
.legais a{color:var(--tinta-suave);text-decoration:none;border-bottom:1px solid var(--linha)}
.legais a:hover{color:var(--tinta);border-color:var(--tinta)}
.ponto{color:var(--tinta-suave);margin:0 7px}

/* ---------- Ecrã largo ----------
   Mantém-se a coluna única centrada, só cresce um pouco e
   fica no meio do ecrã, sem obrigar a rolar. */
@media (min-width:900px){
  :root{--maxw:520px}
  .palco{padding:56px 32px 44px}
  .retrato{width:148px;height:148px}
  h1{font-size:44px}
  .lema{font-size:23px}
}
@media (min-width:900px) and (max-height:860px){
  .palco{padding:26px 32px 18px}
  .rodape{margin-top:20px;padding-top:14px}
  .locais{margin-bottom:9px}
  .retrato{width:118px;height:118px;margin-bottom:16px}
  h1{font-size:38px}
  .lema{font-size:20px;margin-bottom:24px}
  .regua{margin:12px auto 14px}
  .destino{padding:14px 18px}
  .rodape{margin-top:26px;padding-top:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}