/* Bora Doutor: rules used only on the home page(s). Loaded after base.css. */

/* Hero. A photo banner since 14 Sep 2026 (a background video before), laid
   out like the Sobre hero because it is the same image family: doctor in the
   right half, empty blue on the left for the copy. */
.hero {
  position: relative;
  /* Tracks the photo's own 2:1 shape instead of the old fixed 1000px. At a
     fixed 1000px a 1440px screen had to crop the banner to a third of its
     width, which slid the doctor left, under the headline. */
  min-height: clamp(560px, 50vw, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 96px 0;
  background: #87ADC0; /* the banner's own blue, shown while it loads */
}
.hero-media { display: block; position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* x = 0 on purpose. Wherever the box is too narrow for the whole banner, the
     crop then comes off the empty blue on the RIGHT and she stays as far from
     the copy as the frame allows. At 800px the subtitle otherwise ran over her
     hand. The cost: between 768 and ~890px the edge of her coat is trimmed. */
  object-position: 0% 30%;
}
/* Deep blue from the left, anchored to the TEXT COLUMN rather than to the
   screen. Each stop is max(narrow-screen px, wide-screen offset from the
   centre): the container's left edge is 24px up to 1280px and 50% - 616px
   above it, so "50% - 96px" is 520px into the copy on a wide screen and 544px
   on a narrow one. Solid under the cyan line and the subtitle, fading across
   the tail of the headline, clear before her face.

   It was percentage stops first (0.66 / 0.44 at 40% / clear by 68%), and that
   measured 2.8:1 under "e no seu tempo" and 4.3:1 under the subtitle. Needs
   3:1 and 4.5:1. The copy is a fixed width, so the fade moved across it as
   the screen narrowed. The old overlay was a flat 50% black over a dark
   video; on a light photo that would only have made it muddy. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg,
    rgba(16, 40, 64, 0.72) 0,
    rgba(16, 40, 64, 0.62) max(544px, calc(50% - 96px)),
    rgba(16, 40, 64, 0.48) max(584px, calc(50% - 56px)),
    rgba(16, 40, 64, 0) max(784px, calc(50% + 144px)));
}
.hero-inner { position: relative; z-index: 2; }
.hero-content { max-width: 620px; }
.hero h1 {
  font-family: 'Noto Serif', serif;
  font-size: 56px;
  font-weight: 600;
  line-height: 64px;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.hero h1 span { color: var(--color-accent); }
.hero-subtitle {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  max-width: 46ch;
  margin-bottom: 32px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero > .hero-scroll { position: absolute; right: 40px; bottom: 36px; z-index: 2; }
/* Hidden below 1280px, earlier than the Sobre ring's 1025px. The ring's lettering
   is white, and on narrower screens this photo scales up until her white coat
   sits under it: at 1100px half the ring was on the coat and unreadable. At
   1280px it clears the coat by about 20px. */
@media (max-width: 1279px) {
 .hero > .hero-scroll { display: none; }
}
@media (max-width: 1024px) {
  .hero { min-height: 535px; padding: 56px 0; }
  .hero h1 { font-size: 48px; line-height: 56px; }
  /* Left-aligned here, where it used to be centred: centred copy over this
     photo lands on her face. Same call the Sobre hero makes at this width. */
  .hero-content { max-width: 560px; }
}
@media (max-width: 767px) {
  /* Stacked: the portrait crop on top, the copy on a deep-blue panel below. */
  .hero { display: block; min-height: 0; padding: 0; background: #1C3F5E; }
  /* width: 100% is not redundant. With aspect-ratio and a max-height, Chrome
     carries the capped height back through the ratio and shrinks the WIDTH to
     match (448px at a 700px viewport), leaving a strip of panel beside the
     photo. An explicit width stops that transfer. */
  .hero-media { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; }
  .hero-media img { object-position: 50% 20%; }
  .hero-media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36%;
    background: linear-gradient(180deg, rgba(28, 63, 94, 0) 0%, #1C3F5E 100%);
  }
  .hero-overlay { display: none; }
  .hero-inner { padding-top: 8px; padding-bottom: 40px; }
  .hero h1 { font-size: 32px; line-height: 40px; text-shadow: none; }
  .hero-subtitle { text-shadow: none; }
  .hero-content { max-width: 100%; margin: 0 auto; text-align: center; }
  .hero-actions { justify-content: center; }
  .hero .hero-caminho { margin-left: auto; margin-right: auto; }
}

.video-modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  transform: scale(0.94);
  transition: transform 0.4s var(--ease-reveal);
}

@media (max-width: 500px) {
  .video-modal { max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; border-radius: 0; }
}

/* Como funciona */
.how-it-works { padding: var(--section-y) 0; background: var(--color-bg-soft); }
.how-it-works-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.how-it-works-visual img { border-radius: var(--radius-lg); }
/* Matches the animation's own 3:4 canvas exactly — never crop it. Every scene
   uses the full frame (the WhatsApp one runs header to bubble edge to edge),
   so trimming to a different ratio cuts content off rather than letterboxing. */
.booking-lottie-frame {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.steps-list { display: flex; flex-direction: column; gap: 28px; margin-bottom: 32px; }
.step-row { display: flex; gap: 20px; align-items: flex-start; }
.step-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 209, 255, 0.08);
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s var(--ease-snap);
}
.step-row:hover .step-icon { transform: scale(1.08); }
.step-icon svg { width: 24px; height: 24px; }
.step-row h3 { font-size: 1.1rem; margin-bottom: 4px; }
.step-row p { color: var(--color-text-muted); margin: 0; }
@media (max-width: 860px) {
  .how-it-works-inner { grid-template-columns: 1fr; }
  .how-it-works-visual { max-width: 360px; margin: 0 auto; }
}

/* Plans */
.plans { padding: var(--section-y) 0; }
.plans-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.plan-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 209, 255, 0.08);
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.3s var(--ease-snap);
}
.plan-icon svg { width: 28px; height: 28px; }
.plan-subtitle { color: var(--color-text-muted); margin-bottom: 20px; font-weight: 300; }
@media (max-width: 720px) {
 .plans-grid { grid-template-columns: 1fr; }
}

/* Blog */
.blog { padding: var(--section-y) 0; background: var(--color-bg-soft); }
.blog-carousel { position: relative; }
.blog-carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 20px; }
.blog-nav-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-snap), border-color 0.2s var(--ease-snap), background-color 0.2s var(--ease-snap);
}
.blog-nav-btn svg { width: 18px; height: 18px; }
.blog-nav-btn:hover:not(:disabled) { border-color: var(--color-primary); background: rgba(0, 209, 255, 0.05); }
.blog-nav-btn:active:not(:disabled) { transform: scale(0.94); }
.blog-nav-btn:disabled { opacity: 0.35; cursor: default; }
.blog-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-snap); }
.blog-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  border-radius: 8px;
}
.blog-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-meta { color: var(--color-text-muted); font-size: 0.8rem; margin: 0 0 10px; }
.blog-card-body h3 { font-size: 1.1rem; margin-bottom: 10px; }
.blog-card-body h3 a:hover { color: var(--color-primary-strong); }
.blog-excerpt { color: var(--color-text-muted); font-size: 0.92rem; font-weight: 300; margin-bottom: 18px; flex-grow: 1; }
.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-primary-strong);
  /* padding, not height: keeps the text baseline where it is while lifting the
     tap target over the 24px floor */
  padding: 6px 0;
}
.blog-readmore svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-snap); }
.blog-readmore:hover svg { transform: translateX(3px); }
.blog-footer { text-align: center; margin-top: 44px; }

/* Stats */
.stats { padding: var(--section-y) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
/* These four are illustrations with their own circular ground, so no tinted
   chip behind them — that would read as a badge inside a badge. */
.stat-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.3s var(--ease-snap);
}
.stat-icon img { width: 72px; height: 72px; display: block; }
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--color-primary-strong);
  margin-bottom: 4px;
}
.stat-label { color: var(--color-text-muted); margin: 0; font-size: 0.92rem; font-weight: 300; }

/* === Alinhado ao Olá Doutor, com o teal do Bora Doutor ====================
   4 Oct 2026, fim do dia. O cliente apontou https://oladoutor.app/ e pediu
   que a home se parecesse com ela.

   Isso desfez as quatro passadas "corporativas" do mesmo dia, e com razão:
   o Olá Doutor NÃO é corporativo naquele sentido. É página de produto bem
   feita — serifa de 56px, botões de 8px com folga, vídeo tocando no herói,
   títulos de seção em 48px CENTRADOS. As passadas anteriores tinham levado
   a home para 44px, títulos à esquerda e botões de 4px, ou seja, para longe
   exatamente daquilo que agora é a referência.

   Em vez de empilhar reversões em cima de overrides, o arquivo voltou ao
   estado de 14:00 pelo snapshot e só o que sobrevive foi reescrito aqui.
   É mais curto e dá para ler.

   Medido na página deles, não suposto:
     corpo       Proxima Nova 18px, #28292B   (o Bora já usa as duas)
     h1          Noto Serif 56/64, peso 600, branco
     seções h2   48px, CENTRADO
     cartões h3  32px
     botões      8px de raio, 16px 24px, peso 500, #007A4D
     faixa de prova logo abaixo do herói, em 18px

   A única divergência deliberada é a cor: eles são verde #007A4D, e o Bora
   Doutor fica no teal #007791 — a pedido, para a marca não desaparecer
   dentro da outra. */
body.page-template-template-cholo {
  --color-primary: var(--color-primary-strong);
  --color-accent: var(--color-primary-strong);
}

/* O h1 deles é branco inteiro, sem uma frase colorida. Esta é a única coisa
   das passadas anteriores que sobrevive por coincidir com a referência. */
body.page-template-template-cholo .hero h1 span { color: inherit; }

/* 8px é o raio deles; o Bora estava em 10px. */
body.page-template-template-cholo .btn { border-radius: 8px; }

/* O ciano que não vem de token: sete SVGs com stroke no atributo e a faixa
   escura. Fora do `main` fica o logotipo, onde o ciano é a marca. */
body.page-template-template-cholo main svg[stroke="#00D1FF"] { stroke: var(--color-primary-strong); }
body.page-template-template-cholo main [fill="#00D1FF"] { fill: var(--color-primary-strong); }
body.page-template-template-cholo .proof-strip.band-ink .proof-mark {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
}
body.page-template-template-cholo .step-icon,
body.page-template-template-cholo .plan-icon { background: rgba(0, 119, 145, 0.08); }

/* Os títulos de seção. Em 17 de setembro eles viraram
   `clamp(2rem, 2.6vw, 2.6rem)` acima de 1025px — teto de 41,6px — para não
   competirem com o texto nas páginas de funil. O Olá Doutor usa 48px fixo,
   que é o valor que o próprio base.css tinha antes daquele ajuste. Só na
   home, para as páginas de serviço manterem a escala delas. */
@media (min-width: 1025px) {
  body.page-template-template-cholo .section-title { font-size: 48px; line-height: 56px; }
}

/* Proporção dos botões, medida neles: 16px 24px, corpo de 16px, peso 500. O
   Bora estava em 24px 28px (e 26px 34px nos grandes) com peso 600 — botão
   bem mais encorpado. O deles é mais contido e é o que dá o ar de produto
   acabado em vez de chamada de campanha. */
body.page-template-template-cholo .btn {
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 500;
}
body.page-template-template-cholo .btn-lg {
  padding: 16px 24px;
  font-size: 1rem;
}

/* === O herói, nas proporções do Olá Doutor ================================
   Medido na página deles em 4 Oct 2026, a 1098px de largura:

     herói          1000px de altura   (o Bora fazia 560 ali — quase metade)
     coluna do h1   408px de largura   (o Bora deixava 620)
     h1             56/64, peso 600, branco, à esquerda
     respiro acima  273px do topo do herói até o h1
     h1 -> subtítulo  32px
     subtítulo      18px, peso 500, branco puro, entre-linhas 28px
     subtítulo -> botões  64px
     respiro abaixo 281px até o fim do herói

   A diferença que mais pesa no "feel" é a altura. Um herói de 560px é uma
   faixa; um de 1000px é uma tela inteira, e é isso que faz a página deles
   parecer cinema e a nossa parecer cabeçalho grande. A coluna estreita vem
   junto: 408px quebra o título em três linhas curtas em vez de duas longas,
   e é o que dá o ritmo vertical.

   O fundo fica como está até o cliente subir o vídeo dele. A referência usa
   imagem de fundo + vídeo de fundo por cima; quando o vídeo chegar, ele entra
   nesta mesma caixa. */
body.page-template-template-cholo .hero {
  min-height: clamp(640px, 72vw, 1000px);
}
/* No desktop o valor deles é 1000px cravado — medido a 1098px de largura, e
   1000 não é função de 1098 em nenhuma conta redonda, então é fixo. Abaixo de
   1025px o clamp acima continua valendo, porque 1000px num tablet seria uma
   tela inteira de foto antes de qualquer palavra. */
@media (min-width: 1025px) {
  body.page-template-template-cholo .hero { min-height: 1000px; }
}
body.page-template-template-cholo .hero-content {
  /* 440px, e não os 408px exatos deles — com motivo medido.

     A coluna de 408 existe na referência para que os dois botões caibam numa
     linha só: 213 + 16 + 179 = 408, cravado. Os rótulos daqui são mais
     longos ("Agendar Consulta" com ícone de calendário, "Ver como funciona"
     com ícone de play): 208 + 16 + 213 = 437. Em 408 a dupla quebra em duas
     linhas, que é precisamente o que a coluna de 408 serve para evitar.

     Entre copiar o número e reproduzir o resultado, vale o resultado. 440
     mantém a quebra do título em três linhas curtas — conferido, o h1 dá os
     mesmos 192px de altura nas duas larguras — e devolve os botões para a
     mesma linha. */
  max-width: 440px;
}
body.page-template-template-cholo .hero-subtitle {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  margin-top: 32px;
  margin-bottom: 64px;
}

/* O ritmo vertical dentro do herói. Medido depois de acertar a altura:
   213 / 66 / 177 / 180 contra os 273 / 32 / 64 / 281 deles. Os 177 no meio
   são o traço desenhado à mão, que mora entre o subtítulo e os botões — a
   referência não tem nada ali. Ele sai; é justamente o espaço onde o vídeo
   do cliente vai entrar.

   Com o traço fora e as margens explícitas, o bloco fica em ~446px de altura
   e o herói centraliza sozinho: (1000 - 446) / 2 = 277 em cima e embaixo,
   contra 273 e 281 deles. */
body.page-template-template-cholo .hero-caminho { display: none; }
body.page-template-template-cholo .hero h1 { margin-bottom: 0; }
body.page-template-template-cholo .hero-subtitle {
  margin-top: 32px;
  margin-bottom: 64px;
}

/* O herói, continuando a aproximação. Medido neles:
     botão principal   16px 72px  (bem largo, ancora a coluna)
     botão secundário  fundo transparente, texto branco, sem borda
     indicador de rolagem  não existe

   O `btn-outline-light` do Bora tem borda e `backdrop-filter: blur(4px)`; o
   deles é texto branco puro sobre a foto. */
/* O 16px 72px deles NAO foi copiado, e isso e a correcao e nao a preguica.
   Aquele padding existe para que os dois botoes ocupem exatamente a coluna de
   408px: 213 + 16 + 179 = 408. O rotulo daqui e "Agendar Consulta" com icone,
   mais longo que "Baixe o app"; com 72px de cada lado ele vai a 304px e a
   dupla quebra em duas linhas. Copiar o numero quebraria justamente o que o
   numero servia para fazer. Mantido o padding padrao, e os dois cabem lado a
   lado como nos deles. */
body.page-template-template-cholo .hero .btn-outline-light {
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
}
body.page-template-template-cholo .hero-scroll { display: none; }