/* =========================================================
   SEJA DOOGIES — TUTOR
   =========================================================
   Imagens esperadas em assets/img/ (a classe .ph mostra o gradiente
   de placeholder enquanto o arquivo não existe):
     tutor-hero-cao.png     arte do hero (cão translúcido com o intestino)
     tutor-conteudo.png     foto da 2ª seção
     tutor-livro.png        foto da 3ª seção
   ========================================================= */

/* ---------------------------------------------------------
   HERO — cartão claro arredondado
   --------------------------------------------------------- */
/* O respiro vertical do hero vem do `.wrapper.py-0` no HTML: sem padding em
   cima e embaixo, só o lateral. */

.tutor-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  min-height: 32rem;
  padding: 4rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #eceff2 0%, #f4f6f8 60%, #f7f2f3 100%);
  overflow: hidden;
}

/* Iluminada azulada do fundo (spec Figma): mancha radial de 1232×1233 centrada
   perto do canto superior esquerdo do cartão, sangrando pra fora — o
   `overflow: hidden` do cartão é quem recorta. Fica atrás do conteúdo. */
.tutor-hero-card::before {
  content: "";
  position: absolute;
  top: -29rem; /* -464px */
  left: -37.125rem; /* -594px */
  width: 77rem; /* 1232px */
  height: 77.0625rem; /* 1233px */
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(36, 144, 172, 0.3) 0%,
    rgba(36, 144, 172, 0.142405) 39.9%,
    rgba(36, 144, 172, 0) 75.96%
  );
  pointer-events: none;
  z-index: 0;
}

/* O conteúdo fica acima da mancha. */
.tutor-hero-text,
.tutor-hero-art {
  position: relative;
  z-index: 1;
}

/* Mesma escala do h1 do hero do Veterinário (Light 64px): o título agora é uma
   frase, e os 80px de antes ("Tutor") deixavam a quebra impraticável. */
.tutor-hero-text h1 {
  font-weight: 300; /* Light */
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  color: var(--blue-700);
  margin: 0 0 1.5rem;
}

.tutor-hero-text p {
  color: var(--gray-400);
  font-size: .875rem;
  margin: 0 0 2rem;
}

/* A arte do cão é uma imagem só, sem fundo. Ela se ajusta ao espaço da coluna
   da direita (contain), sem estourar. */
.tutor-hero-art {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 24rem;
  overflow: hidden;
}

.tutor-hero-cao {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------------------------------------------------------
   CONTEÚDO — foto + texto
   --------------------------------------------------------- */
.tutor-conteudo-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
  padding-right: 6.5rem;
}

/* A arte já vem com o canto arredondado embutido: exibimos no tamanho natural,
   sem aspect-ratio nem object-fit (qualquer recorte comeria o arredondamento). */
.tutor-conteudo-media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Tag acima do título — usada em mais de uma seção da página. Spec: Inter
   Regular 10/120%, letter-spacing 10%, caixa alta, #631927. Mesmo padrão do
   kicker do hero do Veterinário. */
.tutor-kicker {
  display: block;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 10px;
  line-height: 1.2; /* 120% */
  letter-spacing: 0.1em; /* 10% */
  text-transform: uppercase;
  color: var(--red-700); /* #631927 */
  margin-bottom: 0.75rem;
}

.tutor-conteudo-text h2 {
  font-weight: 300; /* Light */
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: normal;
  color: var(--blue-700);
  margin: 0 0 1.5rem;
}

.tutor-conteudo-text p {
  color: var(--gray-400);
  line-height: 1.6;
  margin: 0 0 2rem;
}

/* ---------------------------------------------------------
   COMO FAZEMOS — título vinho + intro à esquerda e as três frentes à direita
   --------------------------------------------------------- */
/* Sem respiro embaixo — a seção cola na de baixo. O padding vertical do
   `.wrapper` global também é zerado só na base. */
.tutor-frentes {
  padding-bottom: 0;
  margin-bottom: 0;
}

.tutor-frentes .wrapper {
  padding-left: 6.5rem;
  padding-right: 6.5rem;
}

/* Título de abertura. Spec: Hubot Sans Expanded Light 64/100%, letter-spacing 0,
   centralizado, #631927. A família e o font-stretch vêm da regra global
   `main h2` em style.css. O max-width segura a quebra em duas linhas nas telas
   largas (senão a frase estica numa linha só). */
.tutor-frentes-titulo {
  margin: 0 auto 5rem;
  text-align: center;
  font-weight: 300; /* Light */
  font-size: 64px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: var(--red-700); /* #631927 */
}

/* Intro (mais larga) à esquerda, lista das frentes à direita. */
.tutor-frentes-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Spec: Hubot Sans Expanded Light 44/100%, letter-spacing 0, #234E64.
   A família e o font-stretch vêm da regra global `main h3` em style.css. */
.tutor-frentes-intro h3 {
  margin: 0 0 1rem;
  font-weight: 300; /* Light */
  font-size: 44px;
  line-height: normal;
  letter-spacing: 0;
  color: var(--blue-700); /* #234E64 */
}

/* Spec: Inter Regular 14/140%, letter-spacing 0, #6A7282. */
.tutor-frentes-lead {
  margin: 0;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--gray-400);
  max-width: 52ch;
}

/* As três frentes: sem marcador, só o respiro entre elas. */
.tutor-frentes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tutor-frentes-item + .tutor-frentes-item {
  margin-top: 1.75rem;
}

/* Spec: Hubot Sans Expanded Regular 16/100%, letter-spacing 0, #631927.
   O h4 não entra na regra global `main h1, h2, h3` — a família e o
   font-stretch são declarados aqui. */
.tutor-frentes-item h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: var(--red-700); /* #631927 */
}

/* Spec: Inter Regular 14/140%, letter-spacing 0, #6A7282. */
.tutor-frentes-item p {
  margin: 0;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--gray-400);
}

/* ---------------------------------------------------------
   NOSSO RADAR — painel azul-escuro + arte do radar vazando pra cima
   --------------------------------------------------------- */
/* O painel é inteiro escuro, encostado na direita, com o canto de cima à
   esquerda arredondado (mesmo raio de 60px do painel vinho). SEM overflow
   hidden: é o que deixa o radar vazar pra cima e sangrar pela direita.

   O quanto a arte sobe acima do painel e o respiro interno do painel são as
   duas variáveis abaixo — a arte é puxada por elas e o painel é empurrado pela
   primeira, então o vazamento sempre cai EXATAMENTE no espaço reservado (nunca
   por cima do texto da seção de cima). */
.tutor-radar {
  --radar-vaza: 9rem; /* quanto a arte sobe acima do topo do painel */
  --radar-respiro: clamp(3rem, 6vw, 6.5rem); /* padding vertical do painel */

  margin-top: var(--radar-vaza); /* reserva o espaço que a arte vai ocupar */
  border-top-left-radius: 3.75rem; /* 60px */
  background-color: var(--dark-blue-900); /* #132436 */
}

/* O FUNDO cola nas duas laterais (a seção é full-bleed), mas o CONTEÚDO segue o
   `.wrapper` padrão: max-width 90rem centralizado. Por isso aqui só mexemos no
   padding — sem `max-width`, senão o texto e a arte grudariam na borda esquerda
   nas telas largas. Sem padding à direita: é por ali que a arte sangra. */
.tutor-radar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* metade texto, metade arte */
  gap: 2rem;
  align-items: center;
  padding: var(--radar-respiro) 0 var(--radar-respiro) var(--radar-respiro);
}

/* Spec: Hubot Sans Expanded Light 64/100%, letter-spacing 0, #59A6BE.
   A família e o font-stretch vêm da regra global `main h2` em style.css. */
.tutor-radar-text h2 {
  margin: 0 0 1.5rem;
  font-weight: 300; /* Light */
  font-size: 64px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #59a6be;
}

/* Spec: Inter Regular 14/140%, letter-spacing 0, #D1D5DC.
   Sem margem: os parágrafos correm colados, como um texto único. */
.tutor-radar-text p {
  margin: 0;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--gray-200); /* #D1D5DC */
}

/* Spec: Hubot Sans Expanded Regular 24/100%, letter-spacing 0, #D1D5DC.
   A família e o font-stretch vêm da regra global `main h3` em style.css. */
.tutor-radar-text h3 {
  margin: 2rem 0 1rem;
  font-weight: 400; /* Regular */
  font-size: 24px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: var(--gray-200); /* #D1D5DC */
}

.tutor-radar-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spec: Inter Regular 14/140%, letter-spacing 0, #D1D5DC. A bolinha é própria
   (o reset global tira o marcador padrão). */
.tutor-radar-text li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--gray-200); /* #D1D5DC */
}

.tutor-radar-text li:last-child {
  margin-bottom: 0;
}

/* A bolinha acompanha a cor do texto do item. */
.tutor-radar-text li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

/* A arte sobe além do topo do painel (ocupando o espaço reservado pelo
   margin-top da seção) e sangra pela direita. Ancorada no topo da linha do grid
   — assim a conta do vazamento é exata: sobe o respiro do painel + o vazamento.
   A arte ocupa a metade inteira da seção (a largura vem da coluna do grid), e
   encosta na borda direita do wrapper — sem margem negativa, que criaria barra
   de rolagem horizontal na página. */
.tutor-radar-art {
  align-self: start;
  margin-top: calc(-1 * (var(--radar-vaza) + var(--radar-respiro)));
}

.tutor-radar-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   FAIXA VINHO — base compartilhada por duas seções:
   "Para quem é este livro" (.tutor-livro, hoje arquivada) e
   "Apoie nossa causa" (.tutor-apoie). Mesmo vinho, mesma estrutura de duas
   metades (foto + painel de texto) e mesma tipografia do título.
   --------------------------------------------------------- */
/* O vinho cobre a seção inteira (não só a metade do texto): a imagem fica por
   cima dele. */
.tutor-livro,
.tutor-apoie {
  background-color: #861735;
}

.tutor-livro {
  border-bottom-right-radius: 3.75rem; /* 60px */
}

/* Nestas seções o .wrapper NÃO tem padding: a faixa é full-bleed e a imagem
   encosta na esquerda, no topo e no rodapé. Quem define a altura da faixa é a
   imagem (altura natural); o painel estica junto. */
.tutor-livro-grid,
.tutor-apoie-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0; /* as duas metades se encostam, como no layout */
  max-width: 100%;
  padding: 0;
}

/* A imagem preenche a metade esquerda inteira — encosta na esquerda, no topo e
   no rodapé. Quando o painel de texto fica mais alto que a proporção natural da
   arte (telas mais estreitas), o cover recorta em vez de deixar sobra de vinho. */
.tutor-livro-media img,
.tutor-apoie-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ancorada no rodapé para o canto arredondado de baixo nunca ser cortado. */
.tutor-livro-media img {
  object-position: left bottom;
}

/* O painel ocupa a metade direita da tela (a faixa é full-bleed), mas o TEXTO
   dentro dele para na mesma borda do `.wrapper` (max-width 90rem centralizado) —
   assim ele fica alinhado com o texto do resto da página em telas largas, em vez
   de correr até o fim. Fora dos 90rem, o padding cai para os 3rem de sempre.

   A conta: o painel é a metade direita, então sua largura (o 100% do padding) é
   metade da tela; a borda do conteúdo do wrapper fica a 45rem - 2.5rem = 42.5rem
   do centro. Daí `100% - 42.5rem`. Usar 100% em vez de vw é o que faz a medida
   fechar exata — vw conta a barra de rolagem, o wrapper não. */
.tutor-livro-panel,
.tutor-apoie-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
  padding-right: max(3rem, calc(100% - 42.5rem));
  color: var(--white-100);
}

/* A família, o font-stretch e o peso Light são iguais nas duas; o corpo e a cor
   mudam (cada seção tem sua spec). */
.tutor-livro-panel h2,
.tutor-apoie-panel h2 {
  font-weight: 300; /* Light */
  line-height: 1; /* 100% */
  letter-spacing: 0;
  margin: 0 0 1.75rem;
}

/* Spec: Hubot Sans Expanded Light 44/100%, letter-spacing 0, branco. */
.tutor-livro-panel h2 {
  font-size: 44px;
  color: var(--white-100);
}

/* Spec: Hubot Sans Expanded Light 52/100%, letter-spacing 0, #FAF1F3. */
.tutor-apoie-panel h2 {
  font-size: 52px;
  color: #faf1f3;
}

.tutor-livro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Cada coluna: ícone à esquerda, título + lista à direita. */
.tutor-livro-col {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Círculo cheio atrás do ícone (o SVG é só o desenho, sem fundo).
   Caixa QUADRADA fixa (45px) com border-radius 50% — assim continua redonda
   mesmo que o SVG tenha proporção diferente. O desenho dentro tem 40px de
   altura (spec). */
.tutor-livro-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #ac1246;
}

.tutor-livro-icon img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.tutor-livro-col-text {
  min-width: 0; /* deixa o texto quebrar dentro da coluna do grid */
}

/* Spec: Hubot Sans Expanded Regular 16/100%, letter-spacing 0. */
.tutor-livro-col h3 {
  font-family: var(--font-primary);
  font-stretch: expanded;
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #faf1f3;
  margin: 0 0 0.625rem;
}

.tutor-livro-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spec: Inter Light 12/140%, letter-spacing 0. */
.tutor-livro-col li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-base);
  font-weight: 300; /* Light */
  font-size: 12px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: #e5bbc5;
}

/* Marcador próprio (o list-style padrão não aceita cor). */
.tutor-livro-col li::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: #e5bbc5;
}

.tutor-livro-panel .btn,
.tutor-apoie-panel .btn {
  align-self: flex-start;
}

/* ---------------------------------------------------------
   APOIE NOSSA CAUSA — foto à esquerda + painel vinho à direita
   (vinho, estrutura e tipografia herdados do bloco compartilhado acima)
   --------------------------------------------------------- */
/* Canto de cima à direita arredondado, no mesmo raio de 60px usado na faixa do
   livro — é por ali que o vinho aparece atrás da foto. */
.tutor-apoie-media img {
  border-top-right-radius: 3.75rem; /* 60px */
}

/* Frase de destaque logo abaixo do título.
   Spec: Hubot Sans Expanded Regular 16/100%, letter-spacing 0, #F8F9FA. */
.tutor-apoie-lead {
  margin: 0 0 1.25rem;
  font-family: var(--font-primary); /* Hubot Sans */
  font-stretch: expanded; /* Hubot Sans Expanded */
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #f8f9fa;
}

/* Texto corrido. Spec: Inter Regular 14/140%, letter-spacing 0, #FAFBFC. */
.tutor-apoie-panel p:not(.tutor-apoie-lead) {
  margin: 0;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--white-200); /* #FAFBFC */
}

/* Caixa "Você recebe". Spec: fundo #FAF1F31A (rosa-claro a 10% sobre o vinho) e
   filete no topo #234E6412 — o mesmo par usado na caixa de planos dos modais da
   Jornada. */
.tutor-apoie-recebe {
  margin: 2rem 0;
  padding: 1.5rem;
  border-top: 1.11px solid rgba(35, 78, 100, 0.07); /* #234E6412 */
  border-radius: 0.75rem;
  background-color: rgba(250, 241, 243, 0.1); /* #FAF1F31A */
}

/* Título da caixa. Spec: Hubot Sans Expanded Regular 16/100%, letter-spacing 0,
   centralizado, #FAF1F3. */
.tutor-apoie-recebe h3 {
  margin: 0 0 1.25rem;
  font-weight: 400; /* Regular */
  font-size: 16px;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  color: #faf1f3;
}

.tutor-apoie-recebe ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Itens. Spec: Inter Regular 14px/22.75px, letter-spacing 0, #FFFFFF.
   O flex é por causa do último item, que tem a pílula da insígnia ao lado do
   texto. */
.tutor-apoie-recebe li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-base); /* Inter */
  font-weight: 400; /* Regular */
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: 0;
  color: var(--white-100); /* #FFFFFF */
}

.tutor-apoie-recebe li:last-child {
  margin-bottom: 0;
}

/* Bolinha própria (o list-style padrão não aceita cor). Spec: #BE4C6E.
   O `top` centra o ponto na primeira linha do item (22,75px). */
.tutor-apoie-recebe li::before {
  content: "";
  position: absolute;
  top: 0.5625rem; /* (22,75 - 4,8) / 2 */
  left: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background-color: #be4c6e;
}

/* Pílula da insígnia. Spec: fundo #AC1246, texto #FFFFFF, ícone
   assets/icon/medal-w.svg (a versão branca do medalhão). */
.tutor-apoie-insignia {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background-color: #ac1246;
  font-family: var(--font-base);
  font-weight: 500; /* Medium */
  font-size: 10px;
  line-height: 1.2; /* 120% */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-100); /* #FFFFFF */
}

/* O SVG já vem branco — entra como imagem, sem máscara. */
.tutor-apoie-insignia::before {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  background: url(../assets/icon/medal-w.svg) no-repeat center / contain;
}

/* ---------------------------------------------------------
   RESPONSIVO
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .tutor-hero-card {
    grid-template-columns: 1fr;
    padding: 2.5rem;
    min-height: 0;
  }
  /* No mobile a arte do cão vira apoio visual abaixo do texto. */
  .tutor-hero-art {
    min-height: 18rem;
  }

  .tutor-conteudo-grid,
  .tutor-livro-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .tutor-frentes-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .tutor-frentes-titulo {
    margin-bottom: 3rem;
  }

  /* Empilhado: o texto em cima, o radar abaixo e centrado. Aqui a arte NÃO vaza
     (não há coluna ao lado para ela ocupar) — zerar a variável já tira o
     vazamento e o espaço reservado acima do painel. */
  .tutor-radar {
    --radar-vaza: 0px;
  }
  .tutor-radar-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: clamp(2.5rem, 6vw, 4rem);
  }
  .tutor-radar-art {
    align-self: auto;
    justify-self: center;
    width: 100%;
    margin-top: 0;
    margin-right: 0;
  }

  .tutor-livro-panel {
    padding: 2.5rem;
  }
}

@media (max-width: 768px) {
  .tutor-hero-card {
    padding: 1.5rem;
  }
  .tutor-livro-cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}