/* Link page do Dr. David Rasteiro.
   Identidade DRDR, registada em _contexto/identidades-visuais.json.

   Revisao de 28/08/2026, a pedido do Nicolas: "ta muito escuro o tema, vamos
   deixar claro". A pagina passou de noite azulada a dia azulado. O que muda e
   a base, nao a marca: a tinta continua a ser o azul quase preto de bloco
   operatorio (#0E1920), o dourado champanhe continua a ser o unico acento e
   a Syne continua a carregar o nome. O papel e porcelana fria, com um resto
   de azul, nunca bege quente nem osso neutro, para nao encostar a nenhum
   outro dono da casa.

   Em fundo claro o dourado grande le-se bem cheio (botao de marcacao), mas
   em texto pequeno precisa de descer para o ouro velho --ouro-texto, senao
   nao tem contraste. Nao nomear aqui as fontes dos outros donos: o
   verificador de identidade le os comentarios. */

:root {
  --papel:       #F2F4F5;   /* fundo, porcelana fria */
  --papel-2:     #FFFFFF;   /* superficie */
  --papel-3:     #E9EDF0;   /* superficie premida */
  --linha:       #DCE3E6;
  --tinta:       #0E1920;
  --tinta-2:     #16222B;
  --cinza:       #56656E;
  --cinza-fundo: #8A979E;
  --ouro:        #D8B36A;
  --ouro-claro:  #EBCB92;
  --ouro-texto:  #9A7326;   /* o mesmo dourado, descido para ler em papel */

  --display: 'Syne', 'Jost', system-ui, sans-serif;
  --corpo:   'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --coluna: 30rem;
  --r:      10px;   /* raio contido: suaviza sem virar pastilha */
  --r-foto: 14px;

  --sombra:      0 1px 2px rgba(14,25,32,.05), 0 10px 26px -16px rgba(14,25,32,.28);
  --sombra-alta: 0 2px 4px rgba(14,25,32,.06), 0 16px 34px -18px rgba(14,25,32,.34);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ===================== FUNDO =====================
   O retrato dele continua la atras, desfocado e em fixed, mas agora por
   baixo de um veu de papel: le-se como uma sombra na parede, nao como uma
   fotografia. 3,3 KB em webp, serve telemovel e desktop na mesma. */

.fundo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(112% 78% at 50% 2%, rgba(216,179,106,.16), rgba(216,179,106,0) 56%),
    linear-gradient(180deg, rgba(242,244,245,.90) 0%, rgba(242,244,245,.95) 44%, rgba(242,244,245,1) 100%),
    url("../img/fundo.webp") center / cover no-repeat,
    var(--papel);
}

.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(74% 58% at 50% 34%, rgba(242,244,245,0) 30%, rgba(242,244,245,.7) 78%, rgba(242,244,245,.96) 100%);
}

/* ===================== PALCO ===================== */

.palco {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.75rem 1.25rem 3rem;
}

.cartao {
  width: 100%;
  max-width: var(--coluna);
  text-align: center;
}

/* ===================== RETRATO =====================
   A unica mancha escura da pagina, e e uma fotografia, nao um bloco de cor.
   O veu so aperta no fundo, o suficiente para o nome se ler. */

.capa {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-foto);
  box-shadow: var(--sombra-alta);
}

.capa__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: grayscale(.18) contrast(1.04);
}

.capa__veu {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(14,25,32,0)   0%,
      rgba(14,25,32,0)   34%,
      rgba(14,25,32,.34) 58%,
      rgba(14,25,32,.80) 82%,
      rgba(14,25,32,.92) 100%),
    linear-gradient(90deg, rgba(14,25,32,.42) 0%, rgba(14,25,32,0) 58%);
}

.capa__texto {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.6rem;
  text-align: left;
  color: #F6F7F7;
}

.kicker {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ouro-claro);
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 8vw, 2.4rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-shadow: 0 2px 24px rgba(14,25,32,.6);
}

.lema {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--ouro-claro);
}

.lema em { font-style: italic; }

/* Quase invisivel de proposito: quem procura ve, quem nao procura nao tropeca. */
.capa__locais {
  position: absolute;
  right: 1.4rem;
  bottom: 1.5rem;
  margin: 0;
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(246,247,247,.42);
}

/* ===================== DESCRIÇÃO ===================== */

.sobre {
  margin: 1.5rem auto 1.75rem;
  max-width: 25rem;
}

.sobre p {
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--cinza);
}

/* ===================== DESTINOS =====================
   Em papel o botao le-se por ser branco e ter sombra baixa, nao por ter
   contorno a toda a volta. A regra de nao meter caixas mantem-se. */

.destinos {
  display: grid;
  gap: .55rem;
  text-align: left;
}

.destino {
  position: relative;
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r);
  background: var(--papel-2);
  color: var(--tinta);
  box-shadow: var(--sombra);
  transition: box-shadow .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}

.destino:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }

.destino:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 3px; }

.ic {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--ouro-texto);
}

.ic svg { width: 100%; height: 100%; display: block; }

.txt { flex: 1 1 auto; min-width: 0; display: block; }

.mini {
  display: block;
  margin-bottom: .2rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ouro-texto);
}

.tit {
  display: block;
  font-family: var(--corpo);   /* Jost, nao a Syne: a Syne fica so no nome */
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: .002em;
}

.sub {
  display: block;
  margin-top: .2rem;
  font-size: .79rem;
  font-weight: 400;
  line-height: 1.42;
  color: var(--cinza);
}

.seta {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  color: var(--cinza-fundo);
  transition: color .2s ease, transform .2s ease;
}

.destino:hover .seta,
.linha:hover .seta { color: var(--ouro-texto); transform: translateX(2px); }

/* --- Accao principal, o unico bloco cheio da pagina --- */
.destino--ouro {
  background: var(--ouro);
  color: var(--tinta);
  box-shadow: 0 1px 2px rgba(14,25,32,.06), 0 12px 28px -14px rgba(154,115,38,.55);
}

.destino--ouro:hover { background: var(--ouro-claro); }
.destino--ouro .ic   { color: var(--tinta); }
.destino--ouro .sub  { color: rgba(14,25,32,.72); }
.destino--ouro .seta { color: rgba(14,25,32,.5); }
.destino--ouro:hover .seta { color: var(--tinta); }

/* --- Credencial da clinica, um fio de ouro a esquerda e mais nada --- */
.destino--selo {
  background:
    linear-gradient(100deg, rgba(216,179,106,.16), rgba(216,179,106,0) 60%),
    var(--papel-2);
  box-shadow: inset 2px 0 0 var(--ouro), var(--sombra);
}

.destino--selo:hover { box-shadow: inset 2px 0 0 var(--ouro), var(--sombra-alta); }

/* ===================== PROCEDIMENTOS ===================== */

.mosaico {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin: .55rem 0 0;
}

.peca {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--papel-2);
  box-shadow: var(--sombra);
  color: var(--tinta);
}

/* Manequins de porcelana gerados de raiz para fundo claro (28/08/2026). Os
   renders antigos eram iluminados para fundo preto e nao havia tratamento que
   os salvasse em papel: invertidos, a luz invertia com eles e a anatomia lia-se
   ao contrario. */
.peca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}

.peca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 46%, rgba(255,255,255,.86) 76%, #fff 100%);
}

.peca span {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: .7rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: -.01em;
}

.peca:hover { box-shadow: var(--sombra-alta); }
.peca:hover img { transform: scale(1.04); }

/* ===================== ONDE ME ENCONTRA =====================
   Zero caixas. Um fio entre linhas e ar a mais. */

.lista {
  margin: 2.1rem 0 0;
  text-align: left;
}

.linha {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .95rem .3rem;
  border-top: 1px solid var(--linha);
  transition: padding-left .2s ease;
}

.lista .linha:last-child { border-bottom: 1px solid var(--linha); }

.linha:hover { padding-left: .55rem; }

.linha:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 2px; }

.linha__ic {
  flex: 0 0 auto;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--cinza-fundo);
  transition: color .2s ease;
}

.linha__ic svg { width: 100%; height: 100%; display: block; }

.linha:hover .linha__ic { color: var(--ouro-texto); }

.linha__txt { flex: 1 1 auto; min-width: 0; display: block; }

.linha__txt b {
  display: block;
  font-family: var(--corpo);
  font-weight: 500;
  font-size: .94rem;
  letter-spacing: .002em;
}

.linha__txt i {
  display: block;
  margin-top: .1rem;
  font-style: normal;
  font-size: .76rem;
  font-weight: 400;
  color: var(--cinza);
}

/* ===================== RODAPÉ ===================== */

.rodape {
  margin-top: 2.6rem;
  text-align: center;
}

.rodape__tel {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}

.rodape__tel a:hover { color: var(--ouro-texto); }

.rodape__hora {
  margin: .3rem 0 1.6rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--cinza);
}

.rodape__moradas {
  margin: 0 auto;
  max-width: 24rem;
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--cinza);
}

.rodape__cedula {
  margin: .85rem 0 0;
  font-size: .68rem;
  font-weight: 400;
  color: var(--cinza-fundo);
}

.rodape__legal {
  margin: .95rem 0 0;
  font-size: .72rem;
  color: var(--cinza);
}

.rodape__legal a { border-bottom: 1px solid var(--linha); padding-bottom: 1px; }
.rodape__legal a:hover { color: var(--ouro-texto); border-color: rgba(154,115,38,.45); }

.rodape__copy {
  margin: .7rem 0 0;
  font-size: .68rem;
  color: #9AA5AB;
}

/* ===================== ECRÃS GRANDES ===================== */

@media (min-width: 820px) {
  .palco { padding: 3.5rem 1.25rem 3.5rem; }

  /* Em ecra largo ha espaco de sobra dos lados, por isso o veu de papel
     alivia e deixa adivinhar-se a fotografia por tras. */
  .fundo {
    background:
      radial-gradient(112% 78% at 50% 2%, rgba(216,179,106,.2), rgba(216,179,106,0) 56%),
      linear-gradient(180deg, rgba(242,244,245,.80) 0%, rgba(242,244,245,.88) 46%, rgba(242,244,245,.98) 100%),
      url("../img/fundo.webp") center / cover no-repeat,
      var(--papel);
  }
  .fundo::after {
    background: radial-gradient(70% 56% at 50% 40%, rgba(242,244,245,0) 24%, rgba(242,244,245,.62) 76%, rgba(242,244,245,.94) 100%);
  }
}

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