/* =========================================================
   Dr. Luiz Maurício — Cirurgia Vascular
   Tema do projeto. Carregado DEPOIS de style.css.

   A base (style.css) é a mesma de todos os projetos desta linha e não
   deve ser editada: ela carrega as armadilhas já resolvidas do hero, do
   selo, da faixa, da timeline e da folha de impressão. Tudo que é
   específico deste cliente mora aqui.

   Paleta tirada da logo:
     vinho   #B22D30   (a fita vermelha)
     lilás   #8B85BF   (a fita roxa)
     grafite #373435   (o texto da logo)

   DETALHE ASSINATURA — "filete cruzado"
   Todo traço decorativo da página é desenhado como DOIS filetes de 2px,
   um vinho e um lilás, levemente inclinados em sentidos opostos, que se
   cruzam uma vez — a leitura gráfica do laço da logo. Aparece em quatro
   lugares: traço dos títulos de seção, sublinhado do menu, divisor entre
   os números e traço dos títulos do rodapé.
   ========================================================= */

/* =========================================================
   FONTES PRÓPRIAS
   Servidas do próprio domínio: zero requisição externa e nenhum host de
   terceiro para resolver antes de a página poder pintar. O Google Fonts
   custava duas requisições bloqueantes e 384 KB em 10 arquivos estáticos.

   São arquivos VARIÁVEIS no eixo de peso (400 a 700): um arquivo cobre os
   quatro pesos que o site usa. Recortados para o subconjunto latin, que já
   cobre o PT-BR inteiro (ã ç é ê õ estão em Latin-1). Resultado: 95 KB.

   O `unicode-range` é o mesmo que o Google informava para o bloco latin —
   sem ele o navegador baixa a fonte mesmo para texto que ela não cobre.
   ========================================================= */
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 700;          /* faixa, não peso fixo: é fonte variável */
  font-display:swap;
  src:url('../assets/fonts/lora-normal.woff2?v=20260819d') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/lora-italic.woff2?v=20260819d') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../assets/fonts/plex-normal.woff2?v=20260819d') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --vinho:#B22D30;
  --vinho-700:#94262A;
  --vinho-900:#6E1C1F;
  --lilas:#8B85BF;
  --lilas-claro:#B8B2DC;
  --grafite:#373435;

  /* Remapeamento das variáveis da base. Os nomes continuam "navy" e
     "silver" de propósito: trocá-los exigiria editar o style.css. */
  --navy:#B22D30;
  --navy-900:#6E1C1F;
  --navy-700:#94262A;
  --silver:#6F68A8;        /* lilás escurecido: o #8B85BF puro reprova em
                              contraste no texto pequeno sobre branco */
  --silver-100:#E9E7F4;
  --silver-050:#F7F6FC;
  --ink:#201E1F;
  --ink-70:#4A4749;
  --ink-55:#6B6669;
  --line:#E6E2EE;

  --serif:'Lora', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Canto quase reto: dá o tom clínico e sóbrio que a marca pede. */
  --r:4px;

  --shadow:0 1px 2px rgba(55,52,53,.05), 0 12px 32px -12px rgba(55,52,53,.18);
  --shadow-lg:0 2px 4px rgba(55,52,53,.06), 0 28px 60px -22px rgba(55,52,53,.30);
}

/* ---------- Tipografia ----------
   Lora tem itálico 700 real, necessário para o destaque do título
   (negrito sintético em serifa grande fica borrado). */
h1,h2,h3,h4{color:var(--grafite)}

/* O vinho é cor de acento, não de texto corrido: títulos em grafite,
   vinho só nos botões, traços e marcadores. */
.section-dark h2,.section-dark h3{color:#fff}
.stat strong{color:#fff}

/* ---------- Botões: retângulo, não pill ---------- */
.btn{border-radius:var(--r)}
.btn-primary{box-shadow:0 10px 24px -12px rgba(178,45,48,.58)}
.btn-primary:hover{box-shadow:0 16px 30px -14px rgba(178,45,48,.68)}
.btn-light{color:var(--vinho)}

.skip-link{background:var(--vinho)}
:focus-visible{outline-color:var(--vinho)}

/* ---------- Header ----------
   A base dimensiona a logo pela LARGURA, o que servia para a logo do projeto
   de referência (499×262, quase 2:1). Esta é praticamente quadrada
   (2128×1857 = 1,146:1): pela largura ela fica alta demais e encosta nas
   bordas do header. Aqui a medida é a ALTURA, e o header ganha um pouco de
   folga para a logo empilhada (marca + nome + assinatura) respirar. */
.site-header.scrolled{box-shadow:0 6px 24px -18px rgba(55,52,53,.55)}
.header-inner{min-height:92px}
.brand img{width:auto; height:62px}
/* O header cresceu: as âncoras precisam parar abaixo dele. */
html{scroll-padding-top:108px}

@media (max-width:900px){
  .header-inner{min-height:76px}
  .brand img{height:50px}
}
@media (max-width:640px){
  html{scroll-padding-top:92px}
}

/* ---------- Superfícies escuras ----------
   Vinho profundo no lugar do navy chapado da base. */
.stats,.faixa,.section-dark{background:var(--vinho-900)}
.section-dark{color:rgba(255,255,255,.80)}
.section-dark .section-title::after{background:var(--lilas-claro)}
.cards-dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13)}
.cards-dark .card:hover{border-color:rgba(184,178,220,.45)}

/* ---------- Selo ----------
   O anel de texto gira; por cima dele, um par de arcos opostos gira ao
   CONTRÁRIO, mais rápido. Os dois sentidos se cruzam o tempo todo — é o mesmo
   gesto do laço da logo e do filete cruzado que assina o resto da página. */
.selo{
  background:rgba(110,28,31,.94);
  box-shadow:0 18px 44px -18px rgba(110,28,31,.62);
}
.selo::before{border-color:rgba(255,255,255,.30)}
.selo-anel{animation:selo-girar 22s linear infinite}

.selo-arcos{
  position:absolute; inset:19px;
  border-radius:50%;
  /* dois arcos opostos: as outras duas bordas ficam invisíveis */
  border:2px solid transparent;
  border-top-color:rgba(255,255,255,.85);
  border-bottom-color:rgba(184,178,220,.95);
  animation:selo-arcos 13s linear infinite;
}
@keyframes selo-arcos{ to{ transform:rotate(-360deg) } }

/* O laço central respira devagar, para o miolo não ficar morto no meio dos
   dois giros. Amplitude baixa de propósito: quem lê a página está com pressa. */
.selo-marca{animation:selo-pulsa 5.5s ease-in-out infinite}
@keyframes selo-pulsa{
  0%,100%{ transform:scale(1);    opacity:.92 }
  50%    { transform:scale(1.07); opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  .selo-anel, .selo-arcos, .selo-marca{animation:none}
  .selo-marca{transform:none; opacity:1}
}
/* A marca do Luiz é larga (1736×960), não estreita como a do projeto de
   referência — por isso a largura muda bastante aqui e na faixa. */
.selo-marca{width:56px}
@media (max-width:900px){
  .selo-marca{width:40px}
  /* o selo cai de 150px para 104px: o recuo dos arcos acompanha */
  .selo-arcos{inset:13px}
}

/* ---------- Faixa rolante ----------
   Não é usada neste projeto: o carrossel de planos ocupa o lugar dela logo
   abaixo do topo. As regras ficam para o caso de a faixa voltar. */
.faixa-marca{width:19px; opacity:.46}
@media (max-width:640px){ .faixa-marca{width:16px} }
.faixa-item{letter-spacing:.17em}

/* =========================================================
   CARROSSEL DE PLANOS DE SAÚDE
   O convênio é o principal diferencial do Dr. Luiz Maurício, então esta é
   a primeira coisa depois do topo. Fundo claro para as logos (que quase
   sempre são coloridas sobre branco) aparecerem sem precisar de recorte.
   ========================================================= */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.planos{
  background:var(--silver-050);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:34px 0 38px;
  overflow:hidden;
}
.planos-rotulo{
  margin:0 0 26px;
  text-align:center;
  font-size:.76rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--silver);
}

/* As pontas desvanecem: sem isso os tiles entram e saem "cortados" na
   borda da tela e o laço fica evidente. */
.planos-pista{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 84px, #000 calc(100% - 84px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 84px, #000 calc(100% - 84px), transparent 100%);
}
.planos-trilho{display:flex; width:max-content; will-change:transform}
.planos-grupo{display:flex; align-items:center; flex:0 0 auto}

.plano{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:168px; height:82px;
  margin:0 9px;
  padding:12px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.planos-pista:hover .plano{border-color:var(--lilas)}

/* Fallback: se um dia um tile voltar a mostrar o nome em vez da logo. */
.plano-nome{
  font-size:.92rem; font-weight:600; letter-spacing:.01em;
  color:var(--grafite); text-align:center; line-height:1.25;
}
/* Todas as logos vêm no mesmo canvas de 340×120 (2x de 136×48), com a marca
   já centralizada e equilibrada por área dentro dele. Por isso aqui é uma
   medida fixa para as 12 — sem `max-height` e sem exceção por logo. */
.plano-logo{
  width:136px; height:48px;
  object-fit:contain;
}

@media (max-width:640px){
  .planos{padding:26px 0 30px}
  .planos-rotulo{
    font-size:.68rem; letter-spacing:.12em;
    max-width:24ch; margin-inline:auto; margin-bottom:20px; line-height:1.7;
  }
  .plano{width:136px; height:70px; margin:0 7px; padding:10px 12px}
  .plano-nome{font-size:.84rem}
  .plano-logo{width:112px; height:40px}
  .planos-pista{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* Acima de 1360px os 7 convênios cabem inteiros na tela. Aí o carrossel só
   serviria para mostrar a mesma logo duas vezes no mesmo quadro, que é o que
   denuncia o laço — então vira fila estática centrada. O planos.js remove os
   clones e cancela a animação nessa faixa (LIMITE_FILA). */
@media (min-width:1360px){
  .planos-pista{
    -webkit-mask-image:none; mask-image:none;
  }
  .planos-trilho{width:auto; justify-content:center}
  .plano{margin:0 11px}
}

/* Sem animação: o trilho vira uma grade que quebra em linhas, e o segundo
   grupo (que é cópia) sai de cena para não repetir os nomes. */
@media (prefers-reduced-motion:reduce){
  .planos-trilho{width:auto; flex-wrap:wrap; justify-content:center; transform:none !important}
  .planos-grupo{flex-wrap:wrap; justify-content:center}
  .planos-grupo ~ .planos-grupo{display:none}
  .plano{margin:5px}
}

/* ---------- Hero ----------
   Mesma cor chapada do canto superior esquerdo da arte de desktop (medida no
   arquivo: #F6F3F8, com desvio ~1). É o que faz a emenda sumir em telas mais
   largas que a arte, onde o fundo aparece à esquerda dela. */
.hero{background-color:#F6F3F8; background-image:none}

/* A arte virou camada própria (.hero-arte) para poder ser animada por
   `transform`, que roda no compositor. Animar `background-position` no .hero
   forçaria repintura da seção inteira a cada quadro. A caixa é a mesma, então
   a geometria de `auto 100%` ancorada à direita não muda. */
.hero-arte{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url('../assets/img/hero-desktop.jpg?v=20260819d');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 100%;
  /* origem à direita: a respiração não desloca o médico na horizontal, só
     "infla" a arte para dentro. E a folga de escala cobre o vaivém vertical
     sem nunca revelar a borda da arte. */
  transform-origin:100% 50%;
  transform:scale(1.035);
  animation:hero-respira 15s ease-in-out infinite;
  will-change:transform;
}
/* Empilhamento acima da arte. CUIDADO: o .selo já é `position:absolute` e é
   posicionado por medição no main.js — dar `position:relative` nele o joga
   para o fluxo normal e ele vai parar em cima do botão. Aqui, só z-index. */
.hero .wrap{position:relative; z-index:1}
.hero .selo{z-index:1}

@keyframes hero-respira{
  0%,100%{ transform:scale(1.035) translate3d(0,4px,0) }
  50%    { transform:scale(1.052) translate3d(0,-4px,0) }
}

/* Brilho radial que passeia devagar atrás do médico. É o "algo a mais" do
   topo: dá profundidade sem competir com a cascata de entrada do texto.
   Fica ATRÁS da arte (z-index menor), então nunca lava o rosto dele. */
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  inset:-30% -20% -30% 10%;
  background:
    radial-gradient(46% 52% at 62% 40%, rgba(139,133,191,.30), transparent 68%),
    radial-gradient(38% 44% at 84% 74%, rgba(178,45,48,.14), transparent 70%);
  filter:blur(12px);
  animation:hero-brilho 19s ease-in-out infinite;
}
@keyframes hero-brilho{
  0%,100%{ transform:translate3d(-2%,0,0) scale(1) }
  50%    { transform:translate3d(4%,-3%,0) scale(1.08) }
}

@media (prefers-reduced-motion:reduce){
  .hero-arte{animation:none; transform:scale(1.035)}
  .hero::before{animation:none}
}

/* No mobile a arte também sai do .hero e vem para a camada — se ficasse na
   regra da base, o `background-image:none` acima (que vem depois no arquivo)
   apagaria ela. Aqui NÃO há respiração: a arte mobile é justa, calibrada pela
   base, e qualquer escala mexeria na folga entre o botão e a cabeça. */
@media (max-width:900px){
  .hero-arte{
    background-image:url('../assets/img/hero-mobile.jpg?v=20260819d');
    background-position:center bottom;
    background-size:cover;
    transform:none;
    animation:none;
  }
  .hero::before{display:none}
}

/* Arte mobile 480×1200 — 1:2,5 exato, como a base pressupõe. Mas a cabeça do
   médico está a 50% da altura da arte, e a base foi calibrada para ~55%: ela
   sobe e encostaria no botão com o padding original de 129vw.
   Medido no navegador em 375px: 150vw devolve ~45px de folga. */
@media (max-width:640px){
  .hero{padding-bottom:150vw}
}
/* Abaixo de 360px o texto ocupa mais linhas, o hero passa de 250vw de altura e
   o `cover` deixa de escalar a arte pela largura e passa a escalar pela
   ALTURA. Nesse regime a cabeça fica sempre a 49% da altura do hero, então a
   folga só cresce ~0,49px por px de padding — daí o valor ser tão alto.
   Medido em 320px. */
@media (max-width:360px){
  .hero{padding-bottom:171vw}
}
.hero h1{color:var(--grafite)}
.hero .eyebrow{color:var(--silver)}

.destaque{
  color:var(--vinho);
  background-image:linear-gradient(100deg,
    var(--vinho) 0%,
    var(--vinho) 26%,
    #C2474A 40%,
    #8B85BF 50%,
    #C2474A 60%,
    var(--vinho) 74%,
    var(--vinho) 100%);
}

/* ---------- Cards: fundo tonal, sem borda marcada ---------- */
.card{background:var(--silver-050); border-color:transparent}
.card:hover{border-color:var(--lilas)}
.section-alt .card{background:#fff}
.card::after{
  background:linear-gradient(115deg, transparent 38%, rgba(139,133,191,.20) 50%, transparent 62%);
}

/* ---------- Placeholders de foto ---------- */
.photo-ph{color:var(--vinho); border-color:var(--lilas)}

/* ---------- Contato ----------
   Na base o valor do bloco herda a cor primária. Com o vinho isso deixava
   endereço e registro em vermelho — texto de leitura fica em grafite, o
   vinho fica só no link. */
.info-block p{color:var(--ink)}
.info-block p a{color:var(--vinho)}

/* =========================================================
   DETALHE ASSINATURA — filete cruzado
   Dois traços de 2px, vinho e lilás, inclinados ±2,6° e sobrepostos:
   cruzam uma vez, como as fitas da logo.
   ========================================================= */

/* 1. Títulos de seção
   ±4,5° sobre 86px separa as pontas em ~6px: o cruzamento é legível sem
   virar enfeite. Abaixo de 3° os dois traços viram um só, borrado. */
.section-title::after{
  width:86px; margin-left:-43px; height:2px;
  background:var(--vinho);
  transform:scaleX(0) rotate(-4.5deg);
}
.section-title.is-visible::after{transform:scaleX(1) rotate(-4.5deg)}
.section-title::before{
  content:''; position:absolute; left:50%; bottom:-18px;
  width:86px; height:2px; margin-left:-43px;
  background:var(--lilas);
  transform:scaleX(0) rotate(4.5deg); transform-origin:50% 50%;
  transition:transform .8s var(--ease) .38s;
}
.section-title.is-visible::before{transform:scaleX(1) rotate(4.5deg)}
.section-title.left::before{left:0; margin-left:0; transform-origin:0 50%}
.section-title.left::after{transform-origin:0 50%}
.section-dark .section-title::before{background:rgba(255,255,255,.34)}

@media (prefers-reduced-motion:reduce){
  .section-title::before{transition:none}
}

/* 2. Sublinhado do menu */
.nav a::after{background:var(--vinho); transform:rotate(-4.5deg)}
.nav a::before{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--lilas); transform:rotate(4.5deg);
  transition:width .3s var(--ease) .05s;
}
.nav a:hover::before{width:100%}
@media (max-width:900px){ .nav a::before{display:none} }

/* 3. Divisor entre os números */
.stat + .stat::before{
  width:2px; height:64%; top:18%;
  background:rgba(255,255,255,.32);
  transform:rotate(7deg);
}
.stat + .stat::after{
  content:''; position:absolute; left:0; top:18%;
  width:2px; height:64%;
  background:rgba(184,178,220,.42);
  transform:rotate(-7deg);
}
@media (max-width:640px){ .stat + .stat::after{display:none} }

/* 4. Títulos do rodapé */
.footer-col h4{position:relative; padding-bottom:14px}
.footer-col h4::after{
  content:''; position:absolute; left:0; bottom:2px;
  width:48px; height:2px; background:#E2696B;
  transform:rotate(-5.5deg);
}
.footer-col h4::before{
  content:''; position:absolute; left:0; bottom:2px;
  width:48px; height:2px; background:var(--lilas-claro);
  transform:rotate(5.5deg);
}

/* ---------- Impressão ----------
   Vem por último para vencer as regras de mobile da base, pela mesma
   razão explicada no fim do style.css. */
@media print{
  /* A arte de tela é background e o Chrome não a inclui no PDF; quem imprime
     é o <img class="hero-arte-print">, que a base já trata. */
  .hero-arte{display:none !important}
  .hero::before{display:none !important}

  /* background-clip:text não é honrado na impressão: o gradiente do
     destaque viraria tarja escura. No papel, cor sólida. */
  .destaque{
    background-image:none !important;
    color:var(--vinho) !important;
    -webkit-text-fill-color:var(--vinho) !important;
  }
  /* No papel o carrossel vira grade: sem animação, sem duplicata. */
  .planos-pista{-webkit-mask-image:none !important; mask-image:none !important}
  .planos-trilho{width:auto !important; flex-wrap:wrap; justify-content:center; transform:none !important}
  .planos-grupo{flex-wrap:wrap; justify-content:center}
  .planos-grupo ~ .planos-grupo{display:none}
  .plano{margin:4px; width:130px; height:62px}

  /* Os filetes inclinados imprimem mal em 2px; no papel, um traço só. */
  .section-title::before{display:none}
  .section-title::after{transform:scaleX(1) !important}
  .footer-col h4::before{display:none}
  .stat + .stat::after{display:none}
}