/* ===== 1) VARIÁVEIS (design tokens) =====
   :root é o elemento mais alto da página (o <html>). Variáveis criadas aqui
   valem para o site inteiro. Para mudar a paleta, basta mudar estas linhas. */
:root {
  --cor-fundo: #FAF7F2;            /* off-white: fundo da página */
  --cor-principal: #7A1F3D;        /* bordô: nome e botão de destaque */
  --cor-principal-escura: #5C1530; /* bordô escuro: botão ao ser tocado */
  --cor-texto: #2E1A20;            /* texto principal */
  --cor-texto-suave: #6B5258;      /* textos secundários (bio, subtítulos, rodapé) */
  --cor-borda: #EADBD8;            /* rosé claro: bordas e detalhes */
  --cor-cartao: #FFFFFF;           /* fundo dos botões comuns */

  --fonte-titulo: "Playfair Display", Georgia, serif;
  --fonte-texto: "Inter", system-ui, sans-serif;
  /* As fontes depois da vírgula são o "plano B", caso a do Google não carregue. */

  --raio: 16px; /* arredondamento padrão dos cantos */
}



/* ===== 2) BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Faz a largura incluir o padding e a borda. Sem isso, um elemento com 100% de
     largura e padding fica MAIOR que a tela e aparece rolagem para o lado. */
}

body {
  margin: 0;                     /* o navegador põe 8px de margem por padrão; tiramos */
  background: var(--cor-fundo);  /* var() lê o valor de uma variável */
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  line-height: 1.5;              /* espaço entre as linhas: melhora a leitura */
  -webkit-font-smoothing: antialiased; /* letras mais suaves no iPhone/Mac */
}

img {
  display: block;  /* remove um espacinho "fantasma" que aparece embaixo das imagens */
  max-width: 100%; /* a imagem nunca fica mais larga que o espaço disponível */
}

.pagina {
  max-width: 480px;      /* no computador a página não estica: fica com cara de celular */
  margin: 0 auto;        /* "auto" nas laterais = centraliza na horizontal */
  padding: 0 16px 32px;  /* topo 0 | laterais 16px | embaixo 32px */
}

/* ===== 3) PERFIL ===== */
.perfil {
  text-align: center;
}

.perfil__capa {
  position: relative; /* vira a referência para posicionar o degradê (::after) */
  margin: 0 -16px;    /* margem NEGATIVA: anula o padding da .pagina e a foto vai de ponta a ponta */
  height: 62vh;       /* vh = % da altura da tela. 62vh = 62% da tela */
  max-height: 560px;  /* ...mas sem exagerar em telas muito altas */
  overflow: hidden;   /* corta o que passar da caixa */
}

.perfil__capa img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* preenche a caixa SEM distorcer, cortando as sobras */
  object-position: center 20%; /* que parte fica visível: centro na horizontal, perto do topo (o rosto) */
}

.perfil__capa::after {
  /* ::after cria um elemento "de mentira" dentro da capa, só pelo CSS.
     Usamos ele para um degradê que faz a foto "derreter" no fundo off-white. */
  content: "";        /* obrigatório para o ::after existir, mesmo vazio */
  position: absolute; /* posicionado em relação à .perfil__capa (que é relative) */
  inset: 0;           /* atalho para top, right, bottom e left = 0: cobre a capa toda */
  background: linear-gradient(to bottom, transparent 55%, var(--cor-fundo) 100%);
  /* de cima até 55%: transparente (foto limpa). Dos 55% até o fim: vira off-white. */
}

.perfil__nome {
  position: relative;          /* faz o nome ficar POR CIMA do degradê */
  margin: -2.5rem 0 0.25rem;   /* margem negativa em cima: o nome "sobe" sobre o fim da foto */
  font-family: var(--fonte-titulo);
  font-size: 2.5rem;           /* rem = múltiplos de 16px (padrão). 2.5rem = 40px */
  font-weight: 700;
  color: var(--cor-principal);
}

.perfil__bio {
  margin: 0 0 1.75rem;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
}

/* ===== 4) LINKS (botões) ===== */
.links {
  display: flex;          /* Flexbox: organiza os filhos em linha ou em coluna */
  flex-direction: column; /* um embaixo do outro */
  gap: 14px;              /* espaço entre os botões: é ISTO que substitui os <br> */
}

.botao {
    display: grid;                        /* CSS Grid: divide o botão em colunas */
  grid-template-columns: 24px 1fr 24px; /* ícone | texto (1fr = "todo o resto") | coluna vazia */
  /* A 3ª coluna fica vazia, com a mesma largura do ícone: é isso que mantém
     o texto EXATAMENTE no centro do botão, mesmo com o ícone à esquerda. */
  align-items: center;                  /* centraliza o conteúdo na vertical */
  gap: 10px;                            /* espaço entre as colunas */
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
  color: var(--cor-texto);
  text-align: center;
  text-decoration: none; /* tira o sublinhado padrão dos links */
  box-shadow: 0 2px 6px rgba(46, 26, 32, 0.06);
  /* sombra: deslocamento X | Y | desfoque | cor (rgba = cor com transparência) */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  /* anima as mudanças dessas propriedades em 0.2s, em vez de trocar "seco" */
}

.botao__titulo {
  display: block; /* <span> fica na mesma linha por padrão; block põe cada um em sua linha */
  font-weight: 600;
}

.botao__icone {
  display: flex;               /* tira um espaço extra que o SVG ganha por ser "inline" */
  color: var(--cor-principal); /* nos botões brancos, o ícone fica bordô */
}

.botao__icone svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* currentColor = "pinte com a mesma cor do 'color' deste elemento" */
}


.botao__subtitulo {
  display: block;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

/* :hover = mouse em cima | :focus-visible = selecionado pelo teclado (tecla Tab).
   Usamos "a.botao" (só links) para o card "em breve", que é <div>, não reagir. */
a.botao:hover,
a.botao:focus-visible {
  transform: translateY(-2px); /* sobe 2px: efeito de "levantar" o botão */
  box-shadow: 0 6px 16px rgba(46, 26, 32, 0.12);
}

.botao--destaque .botao__icone {
  color: var(--cor-fundo); /* no botão bordô, o ícone fica off-white */
}

a.botao:focus-visible {
  outline: 2px solid var(--cor-principal); /* contorno visível para quem usa teclado */
  outline-offset: 3px;                     /* afasta o contorno 3px do botão */
}

/* Variação: botão principal (WhatsApp) */
.botao--destaque {
  background: var(--cor-principal);
  border-color: var(--cor-principal);
  color: var(--cor-fundo); /* texto off-white sobre o bordô */
}

.botao--destaque .botao__subtitulo {
  /* Seletor composto: "o subtítulo QUE ESTÁ DENTRO de um botão de destaque" */
  color: var(--cor-fundo);
  opacity: 0.85; /* um pouco mais apagado que o título, mas ainda bem legível */
}

.botao--destaque:hover,
.botao--destaque:focus-visible {
  background: var(--cor-principal-escura);
}

/* Variação: "em breve" (ainda não clicável) */
.botao--em-breve,
.botao--lotado {

  background: transparent;
  border-style: dashed; /* borda tracejada: passa a ideia de "ainda não está pronto" */
  box-shadow: none;
}

/* ===== 4.1) LIVRO: vitrine discreta, abaixo dos botões =====
   Hierarquia visual: o ÚNICO bloco bordô "cheio" da página continua sendo o
   Grupo VIP. O livro usa cartão branco e link sublinhado (chamada secundária):
   aparece bem, mas não compete com o grupo. */
.livro {
  position: relative;               /* referência para o link "esticado" (ver .livro__cta::after) */
  display: grid;
  grid-template-columns: 88px 1fr;  /* capa | texto */
  align-items: center;
  gap: 16px;
  margin-top: 28px;                 /* o dobro do espaço entre os botões: separa "links" de "livro" */
  padding: 16px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-cartao);
  box-shadow: 0 2px 6px rgba(46, 26, 32, 0.06); /* mesma sombra dos botões: parecem da mesma família */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.livro__capa {
  width: 88px;
  height: auto;       /* altura proporcional à largura: a capa não distorce */
  border-radius: 4px; /* canto quase reto, como um livro de verdade */
  box-shadow: 0 4px 12px rgba(46, 26, 32, 0.2); /* sombra mais forte: a capa "salta" do cartão */
}

.livro__selo {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase; /* MAIÚSCULAS só no visual; no HTML o texto continua normal */
  letter-spacing: 0.08em;    /* afasta as letras: maiúsculas pequenas ficam mais legíveis */
  color: var(--cor-texto-suave);
}

.livro__titulo {
  margin: 2px 0 6px;
  font-family: var(--fonte-titulo);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--cor-principal);
}

.livro__descricao {
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.livro__cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cor-principal);
  text-underline-offset: 3px; /* o sublinhado vem do navegador; só o afastamos das letras */
}

.livro__cta::after {
  /* "Link esticado": a mesma técnica do degradê da foto (::after + inset: 0),
     agora criando uma camada invisível do link por cima do cartão INTEIRO.
     Assim, tocar na capa ou no texto também abre o livro (bom para o dedão no celular). */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio);
}

.livro:hover {
  transform: translateY(-2px);                   /* mesmo "levantar" dos botões */
  box-shadow: 0 6px 16px rgba(46, 26, 32, 0.12);
}

/* :has() = "o cartão que TEM dentro um link selecionado pelo teclado".
   Desenha o contorno no cartão todo, e não só na frase do link. */
.livro:has(.livro__cta:focus-visible) {
  outline: 2px solid var(--cor-principal);
  outline-offset: 3px;
}

.livro__cta:focus-visible {
  outline: none; /* o contorno já está no cartão; evita desenhar dois */
}

/* ===== 5) RODAPÉ ===== */
.rodape {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 24px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.rodape p {
  margin: 0.25rem 0; /* aproxima os dois parágrafos do rodapé */
}

/* ===== 6) TELAS MAIORES E ACESSIBILIDADE =====
   Escrevemos o CSS pensando primeiro no celular (mobile-first).
   O bloco abaixo SÓ vale quando a tela tem 600px de largura ou mais. */
@media (min-width: 600px) {
  .pagina {
    padding-top: 32px; /* afasta a página do topo da janela */
  }

  .perfil__capa {
    margin: 0; /* no computador a foto não vai de ponta a ponta */
    border-radius: var(--raio) var(--raio) 0 0; /* arredonda só os cantos de cima */
  }
}

/* Algumas pessoas ativam "reduzir movimento" no celular (enjoo, labirintite).
   Respeitamos essa preferência desligando as animações. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important; /* !important força esta regra sobre as outras */
  }
}