/* ==========================================================================
   BLOCOS — os 12 blocos da página
   Autoridade: specs/design.md §5 (estrutura), §11 (grelha), §14 (redlines)
   Sem sombra em lado nenhum. A profundidade vem da luminosidade (§7).
   ========================================================================== */

/* --- 1. HEADER ----------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--preto);
  border-bottom: 1px solid transparent;
  transition: height var(--transicao), background-color var(--transicao),
              border-color var(--transicao);
}

.header.encolhido {
  height: var(--header-h-scroll);
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--linha);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: 100%;
}

/* Logótipo oficial, lettering de duas linhas sem halo, proporção 5.65:1.
   O halo do ficheiro de origem foi removido por extração — ver imagens.md. */
.header__logo {
  height: 28px;
  width: auto;
  transition: height var(--transicao);
}
.header.encolhido .header__logo { height: 24px; }

@media (min-width: 768px) {
  .header__logo { height: 40px; }
  .header.encolhido .header__logo { height: 32px; }
}

.header__nav { display: none; }
@media (min-width: 1024px) {
  .header__nav { display: flex; gap: var(--s4); font-size: var(--t-botao); }
}

.header__acoes { display: flex; align-items: center; gap: var(--s2); }

/* Abaixo de 768px o CTA do header sai: com o logótipo a 158px não cabe ao lado
   do seletor de idioma e do menu. Não faz falta — o botão flutuante de WhatsApp
   já cobre o mesmo papel em mobile (§8), e ter os dois repete o canal. */
.header__acoes .btn { display: none; }
@media (min-width: 768px) { .header__acoes .btn { display: inline-flex; } }

.seletor-idioma {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-kicker);
  color: var(--texto-mudo);
}
.seletor-idioma a { color: inherit; text-decoration: none; }
.seletor-idioma a[aria-current='true'] { color: var(--ouro); font-weight: 600; }

.header__sociais { display: none; gap: var(--s2); }
@media (min-width: 1024px) { .header__sociais { display: flex; } }
.header__sociais a { color: var(--texto-mudo); transition: color var(--transicao); }
.header__sociais a:hover { color: var(--ouro); }
.header__sociais svg { width: 20px; height: 20px; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; color: var(--branco);
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.menu-movel {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--preto-alt);
  border-bottom: 1px solid var(--linha);
  padding: var(--s3) var(--gutter) var(--s5);
  display: grid;
  gap: var(--s1);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), transform var(--transicao),
              visibility var(--transicao);
}
.menu-movel[data-aberto='true'] {
  opacity: 1; visibility: visible; transform: translateY(0);
}
@media (min-width: 1024px) { .menu-movel { display: none; } }

/* --- 2. HERO ------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  padding-top: calc(var(--header-h) + var(--s6));
  padding-bottom: 120px;
}
@media (min-width: 1024px) {
  .hero {
    min-height: 640px;
    padding-top: calc(var(--header-h) + var(--s9));
    padding-bottom: 200px;
  }
}

.hero__fundo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}
/* O retrato do hero traz fundo preto sólido, não alfa: medido, o blazer dela em
   sombra tem a mesma luminância do fundo do estúdio (1.2), por isso não há
   recorte por luminância possível sem abrir buracos no casaco.
   A solução é a da referência — o retrato assenta numa poça de escuro própria,
   e é essa elipse que faz o retângulo desaparecer. */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 54% 104% at 73% 50%,
      rgba(13,13,13,0.95) 0%,
      rgba(13,13,13,0.86) 45%,
      rgba(13,13,13,0) 100%),
    linear-gradient(90deg,
      rgba(13,13,13,0.94) 0%,
      rgba(13,13,13,0.80) 50%,
      rgba(13,13,13,0.45) 100%),
    linear-gradient(0deg,
      rgba(13,13,13,0.55) 0%,
      rgba(13,13,13,0) 40%);
}

.hero__grelha {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s6);
}
@media (min-width: 1024px) {
  .hero__grelha {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--s7);
  }
}

.hero__texto { max-width: 560px; }
.hero__texto h1 { margin-bottom: var(--s3); }
@media (min-width: 1024px) { .hero__texto h1 { margin-bottom: var(--s3); } }

.hero__sub { margin-bottom: var(--s4); color: var(--branco); opacity: 0.88; }
.hero__reforco {
  margin-top: 20px;
  font-size: var(--t-kicker);
  color: var(--texto-mudo);
  display: flex; align-items: center; gap: var(--s1);
}
.hero__reforco svg { width: 18px; height: 18px; flex: none; color: var(--ouro); }

/* O retrato sangra na base da secção (§14) */
.hero__retrato {
  justify-self: center;
  margin-bottom: calc(-1 * 120px);
  max-width: 335px;
}
@media (min-width: 1024px) {
  .hero__retrato {
    justify-self: end;
    margin-bottom: -200px;
    max-width: 520px;
  }
}
.hero__retrato img { width: 100%; height: auto; }

/* --- 3. CARD SOBREPOSTO -------------------------------------------------- */

.narrativa { position: relative; z-index: 3; }

.narrativa__card {
  position: relative;
  margin-top: -64px;
  border-radius: var(--r-momento);
  overflow: hidden;
  background: var(--carvao);
  padding: var(--s4);
}
@media (min-width: 1024px) {
  .narrativa__card { margin-top: -120px; padding: 56px; }
}

.narrativa__fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.narrativa__veu {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgba(13,13,13,0.94) 0%,
    rgba(13,13,13,0.80) 55%,
    rgba(13,13,13,0.35) 100%);
}
.narrativa__conteudo { position: relative; z-index: 2; max-width: 52ch; }
.narrativa__conteudo h2 { margin-bottom: var(--s3); }
.narrativa__conteudo p + p { margin-top: var(--s2); }

/* --- 4. ÁREAS ------------------------------------------------------------ */

.areas__cabecalho { margin-bottom: var(--s4); }
.areas__cabecalho h2 { margin-bottom: var(--s2); }
@media (min-width: 768px) { .areas__cabecalho { margin-bottom: var(--s6); } }

.areas__grelha {
  display: grid;
  gap: 20px;
  align-items: stretch;   /* cards igualam-se pelo mais alto — §13 */
}
@media (min-width: 768px) {
  .areas__grelha { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
}

.card-area {
  background: var(--carvao);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .card-area { padding: var(--s5); } }

/* O destaque ocupa a linha inteira, em layout horizontal (§11) */
.card-area--destaque { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .card-area--destaque { flex-direction: row; gap: var(--s5); align-items: flex-start; }
  .card-area--destaque .card-area__corpo { flex: 1; }
}

.card-area__icone { margin-bottom: 20px; }
@media (min-width: 768px) {
  .card-area--destaque .card-area__icone { margin-bottom: 0; }
}
.card-area h3 { margin-bottom: 12px; }
.card-area__sub { color: var(--ouro); margin-bottom: var(--s2); }
.card-area__texto { color: var(--texto-mudo); }

/* --- 5. QUEM É A CAROLINE ------------------------------------------------ */

.sobre__grelha { display: grid; gap: var(--s5); }
@media (min-width: 768px) {
  .sobre__grelha {
    grid-template-columns: 5fr 7fr;
    gap: var(--s5);
    align-items: center;
  }
}
@media (min-width: 1024px) { .sobre__grelha { gap: var(--s7); } }

.sobre__retrato {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 5 / 6;
}
.sobre__retrato img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* o corte nunca come o queixo — §15 */
}

.sobre__texto h2 { margin-bottom: var(--s3); }
.sobre__texto p + p { margin-top: var(--s2); }
.sobre__texto .btn { margin-top: var(--s4); }

/* --- 5b. PARCEIROS INTERNACIONAIS ----------------------------------------
   Banda estreita entre "Quem é a Caroline" e os pilares. Não é uma secção
   do ritmo da §5: é um remate de credibilidade, e por isso vive entre duas
   linhas finas em vez de mudar a cor de fundo.
   ------------------------------------------------------------------------ */

.parceiros {
  padding-block: var(--s6);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}
@media (min-width: 768px) { .parceiros { padding-block: var(--s7); } }

.parceiros__titulo {
  font-family: var(--f-corpo);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-mudo);
  text-align: center;
  max-width: none;
  margin-bottom: var(--s4);
}

.parceiros__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s4) var(--s7);
}
@media (min-width: 768px) { .parceiros__lista { gap: var(--s5) var(--s8); } }

.parceiros__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                 /* alvo de toque (§10) */
  opacity: 0.72;
  transition: opacity var(--transicao);
}
.parceiros__link:hover,
.parceiros__link:focus-visible { opacity: 1; }

/* Alturas diferentes de propósito: um logótipo é largo e o outro empilhado.
   Igualá-los pela altura faria o empilhado parecer o dobro. Estas duas
   alturas dão-lhes praticamente a mesma área óptica. */
.parceiros__link img { width: auto; display: block; }
.parceiros__link--largo img    { height: 32px; }
.parceiros__link--empilhado img { height: 50px; }
@media (min-width: 768px) {
  .parceiros__link--largo img    { height: 38px; }
  .parceiros__link--empilhado img { height: 58px; }
}

/* --- 6. POR QUE ESCOLHER ------------------------------------------------- */

.pilares__painel {
  background: var(--claro);
  color: var(--texto-claro);
  border-radius: var(--r-painel);
  padding: var(--s4) var(--s3);
}
@media (min-width: 768px) { .pilares__painel { padding: var(--s7); } }

.pilares__painel h2 { color: var(--texto-claro); }
.pilares__cabecalho { margin-bottom: var(--s6); }
.pilares__cabecalho h2 { margin-bottom: var(--s2); }
.pilares__cabecalho p { color: var(--texto-claro); opacity: 0.8; }

.pilares__grelha { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .pilares__grelha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pilares__grelha { grid-template-columns: repeat(4, 1fr); } }

.pilar__icone { margin-bottom: var(--s2); color: var(--bronze); }
.pilar .t-h4 { margin-bottom: var(--s1); }
.pilar p { color: var(--texto-claro); opacity: 0.75; font-size: var(--t-kicker); line-height: var(--lh-corpo); }

/* --- 7. BANDA DE URGÊNCIA ------------------------------------------------ */

.urgencia { position: relative; overflow: hidden; background: var(--preto-alt); }
.urgencia__fundo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0.5;
}
.urgencia__veu { position: absolute; inset: 0; z-index: 1; background: rgba(13,13,13,0.8); }
.urgencia__conteudo { position: relative; z-index: 2; text-align: center; }
.urgencia__conteudo h2 { margin: 0 auto 20px; }
.urgencia__conteudo p { margin: 0 auto var(--s4); max-width: 62ch; color: var(--texto-mudo); }

/* --- 8. COMO FUNCIONA ---------------------------------------------------- */

.processo__cabecalho { margin-bottom: var(--s6); }
.processo__cabecalho h2 { margin-bottom: var(--s2); }

.processo__linha { position: relative; display: grid; gap: var(--s5); }

/* Mobile: linha à esquerda, cards todos do mesmo lado (§14) */
.processo__linha::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 24px;
  width: 1px;
  background: var(--linha-clara);
}

.passo { position: relative; padding-left: var(--s7); }

.passo__marca {
  position: absolute;
  left: 24px; top: 0;
  transform: translateX(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--claro);
  border: 1px solid var(--linha-clara);
  display: grid; place-items: center;
  font-size: var(--t-kicker); font-weight: 700; color: var(--texto-claro);
}

.passo__card {
  background: var(--carvao);
  color: var(--branco);
  border-radius: var(--r-card);
  padding: var(--s4);
}
.passo__card h3 { margin-bottom: var(--s1); }
.passo__card p { color: var(--texto-mudo); }
.passo__icone { margin-bottom: var(--s2); }

/* Desktop: zig-zag dos dois lados de uma linha central */
@media (min-width: 1024px) {
  .processo__linha { gap: var(--s6); }
  .processo__linha::before { left: 50%; }

  .passo { padding-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .passo__card { width: 100%; }

  .passo:nth-child(odd)  .passo__card { grid-column: 1; margin-right: var(--s4); }
  .passo:nth-child(even) .passo__card { grid-column: 2; margin-left: var(--s4); }

  .passo__marca { left: 50%; top: var(--s4); }
}

/* --- 9. DEPOIMENTOS ------------------------------------------------------ */

.depoimentos__grelha { display: grid; gap: var(--s5); }
@media (min-width: 1024px) {
  .depoimentos__grelha { grid-template-columns: 4fr 8fr; gap: var(--s6); align-items: center; }
}

.carrossel {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s1);
}
.carrossel::-webkit-scrollbar { display: none; }

.avaliacao {
  flex: 0 0 min(340px, 82%);
  scroll-snap-align: start;
  background: var(--carvao);
  border-radius: var(--r-painel);
  padding: var(--s4);
  margin: 0;                       /* <figure> traz margem por defeito */
  display: flex;
  flex-direction: column;          /* a assinatura assenta na base do card */
}

.avaliacao__estrelas {
  color: var(--ouro);
  letter-spacing: 3px;
  margin-bottom: var(--s2);
  line-height: 1;
}

.avaliacao__texto {
  margin: 0 0 var(--s3);           /* <blockquote> também traz margem */
  flex: 1;
  color: var(--branco);
  opacity: 0.9;
}
.avaliacao__texto p { max-width: none; }

/* Aspas tipográficas via CSS: o texto fica verbatim no HTML, sem carateres
   acrescentados à citação de terceiro. */
.avaliacao__texto p::before { content: '\201C'; }
.avaliacao__texto p::after  { content: '\201D'; }

.avaliacao__autor {
  display: grid;
  gap: 2px;
  font-size: var(--t-kicker);
  color: var(--texto-mudo);
}
.avaliacao__autor strong { color: var(--branco); font-weight: 600; }

.link-google {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: var(--s2);
  color: var(--ouro);
  font-size: var(--t-kicker);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.link-google:hover { border-bottom-color: var(--ouro); }

.carrossel__controlos { display: flex; gap: var(--s1); margin-top: var(--s3); }
.carrossel__botao {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--linha);
  color: var(--branco);
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--transicao), color var(--transicao);
}
.carrossel__botao:hover { border-color: var(--ouro); color: var(--ouro); }

/* --- 10. CARD CREME DE CTA ----------------------------------------------- */

.convite__card {
  background: var(--creme);
  color: var(--texto-claro);
  border-radius: var(--r-momento);
  padding: var(--s5) var(--s3);
  text-align: center;
}
@media (min-width: 768px) { .convite__card { padding: var(--s7); } }

.convite__card h2 { color: var(--texto-claro); margin: 0 auto var(--s2); }
.convite__card p { margin: 0 auto var(--s4); max-width: 54ch; opacity: 0.8; }

/* --- 11. FAQ E FORMULÁRIO ------------------------------------------------ */

.faq__grelha { display: grid; gap: var(--s6); }
@media (min-width: 1024px) {
  .faq__grelha { grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
}

.faq__lista { display: grid; gap: 12px; margin-top: var(--s4); }

.faq__item { border: 1px solid var(--linha); border-radius: var(--r-pilula); overflow: hidden; }
.faq__item[data-aberto='true'] { border-radius: var(--r-painel); }

.faq__botao {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: 20px 28px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: var(--t-corpo);
  font-weight: 600;
  color: var(--branco);
  cursor: pointer;
  min-height: 44px;
}
.faq__botao:hover { color: var(--ouro); }
.faq__sinal { flex: none; width: 16px; height: 16px; color: var(--ouro); transition: transform var(--transicao); }
.faq__item[data-aberto='true'] .faq__sinal { transform: rotate(45deg); }

.faq__resposta { padding: var(--s1) 28px 20px; color: var(--texto-mudo); }
.faq__resposta[hidden] { display: none; }

/* Formulário (§8) */
.formulario { background: var(--carvao); border-radius: var(--r-card); padding: var(--s4); }
@media (min-width: 768px) { .formulario { padding: var(--s5); } }
.formulario h3 { margin-bottom: var(--s1); }
.formulario > p { color: var(--texto-mudo); font-size: var(--t-kicker); margin-bottom: var(--s4); }

.campo { display: grid; gap: var(--s1); margin-bottom: var(--s2); }
.campo label { font-size: var(--t-kicker); font-weight: 600; }

.campo input, .campo select, .campo textarea {
  height: 52px;
  padding: 0 var(--s2);
  background: var(--preto-alt);
  border: 1px solid var(--linha);
  border-radius: var(--r-botao);
  color: var(--branco);
  transition: border-color var(--transicao);
}
.campo textarea { height: auto; min-height: 120px; padding: var(--s2); resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ouro); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-mudo-frio); }

.campo--duplo { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .campo--duplo { grid-template-columns: 1fr 1fr; } }

.formulario .btn { margin-top: var(--s2); }
.formulario__nota { margin-top: var(--s2); font-size: var(--t-legal); color: var(--texto-mudo-frio); }

/* --- 12. RODAPÉ ---------------------------------------------------------- */

.rodape { background: var(--preto-alt); padding-top: var(--s8); padding-bottom: var(--s5); }

.rodape__grelha { display: grid; gap: var(--s5); }
@media (min-width: 640px) { .rodape__grelha { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .rodape__grelha { grid-template-columns: 4fr 3fr 3fr 2fr; gap: var(--s6); }
}

.rodape__marca img { height: 40px; width: auto; margin-bottom: var(--s2); margin-left: -6px; }
.rodape__marca p { color: var(--texto-mudo); font-size: var(--t-kicker); }

.rodape__contacto {
  display: grid;
  gap: 4px;
  margin-top: var(--s3);
  font-style: normal;                    /* <address> vem em itálico por defeito */
  font-size: var(--t-kicker);
  color: var(--texto-mudo);
}
.rodape__contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                      /* alvo de toque (§10) */
  color: var(--branco);
  text-decoration: none;
}
.rodape__contacto a:hover { color: var(--ouro); }
.rodape__contacto span { line-height: var(--lh-corpo); padding-block: var(--s1); }

.rodape .t-h4 { margin-bottom: var(--s2); font-size: var(--t-kicker); text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-mudo); }
.rodape ul { line-height: 2; }
.rodape a { color: var(--branco); text-decoration: none; }
.rodape a:hover { color: var(--ouro); }

.rodape__sociais { display: flex; gap: var(--s2); }
.rodape__sociais svg { width: 22px; height: 22px; }

.rodape__legal {
  margin-top: 56px;
  padding-top: var(--s4);
  border-top: 1px solid var(--linha);
  display: grid; gap: var(--s2);
}
@media (min-width: 768px) {
  .rodape__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* --- Página 404 ---------------------------------------------------------- */

.erro-404 {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding-top: calc(var(--header-h) + var(--s9));
}
.erro-404 .kicker { margin-inline: auto; }
.erro-404 h1 { margin-inline: auto; }

.erro-404__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s5);
  max-width: none;
}

/* --- WhatsApp flutuante (§8) --------------------------------------------- */

.whatsapp-flutuante {
  position: fixed;
  right: var(--s2); bottom: var(--s2);
  z-index: 40;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ouro);
  color: var(--preto);
  display: grid; place-items: center;
  box-shadow: none;
}
.whatsapp-flutuante svg { width: 28px; height: 28px; }
@media (min-width: 1024px) { .whatsapp-flutuante { display: none; } }