/* Página: fases da vida. Carregado por último, depois de base, layout, components e responsive. */

:root{--fv-palido:#E6EFF6;}

/* abertura: título e frase à esquerda, introdução à direita */
.fv-hero{padding:28px 0 72px;}
.fv-hero .lead,.fv-intro p,.fv-fase-texto p,.fv-esp-desc,.fv-extra p,.fv-fecho-texto p,.fv-duvida p{text-wrap:pretty;}
.fv-hero h1,.fv-fase h2,.fv-fase-texto .fv-frase,.fv-esp h3,.fv-extra h3,.fv-fecho-texto h2,.fv-duvida h3{text-wrap:balance;}
.fv-rotulo{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--indigo);letter-spacing:.07em;text-transform:uppercase;}
.fv-rotulo::before{content:"";width:8px;height:8px;background:var(--ciano);border-radius:70% 70% 70% 4px;}
.fv-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.fv-hero-foto{height:clamp(360px,36vw,440px);border-radius:var(--folha-g);overflow:hidden;}
.fv-hero-foto img{width:100%;height:100%;object-fit:cover;}
.fv-hero h1{margin-top:20px;}
.fv-hero .lead{font-size:1.2rem;color:var(--tinta);margin-top:24px;max-width:62ch;}
.fv-intro{margin-top:40px;padding-top:30px;border-top:1px solid var(--linha);column-count:2;column-gap:56px;}
.fv-intro p{color:var(--tinta-2);margin-top:18px;line-height:1.7;break-inside:avoid;}
.fv-intro p:first-child{margin-top:0;}

/* atalhos para as três fases */
.fv-indice{padding-bottom:12px;}
.fv-indice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.fv-atalho{display:flex;align-items:center;gap:18px;padding:16px 22px 16px 16px; background:var(--branco);border:1px solid rgba(69,81,158,.13);border-radius:999px; transition:transform .18s ease,border-color .18s ease;}
.fv-atalho:hover{transform:translateY(-2px);border-color:rgba(69,81,158,.32);}
.fv-atalho-foto{width:62px;height:62px;border-radius:50%;overflow:hidden;flex:none;}
.fv-atalho-foto img{width:100%;height:100%;object-fit:cover;}
.fv-atalho-texto{display:flex;flex-direction:column;gap:3px;}
.fv-atalho-nome{font-family:var(--fonte-titulo);font-size:1.12rem;font-weight:700;color:var(--noite);letter-spacing:-.01em;}
.fv-atalho-faixa{font-size:13px;color:var(--tinta-2);}

/* cada fase */
.fv-fase{padding:88px 0;}
.fv-fase-clara{background:var(--branco);}
.fv-fase-topo{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:start;}
.fv-fase .tag{display:inline-block;background:var(--nevoa);color:var(--indigo);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:700;}
.fv-fase h2{margin-top:16px;}
.fv-fase-texto .fv-frase{font-family:var(--fonte-titulo);font-size:1.3rem;font-weight:700;color:var(--indigo);line-height:1.3;margin-top:14px;max-width:34ch;}
.fv-fase-texto p{color:var(--tinta-2);margin-top:17px;line-height:1.7;max-width:60ch;}
.fv-fase-foto{position:sticky;top:104px;height:clamp(320px,34vw,400px);border-radius:var(--folha-g);overflow:hidden;}
.fv-fase-foto img{width:100%;height:100%;object-fit:cover;}

/* especialidades e serviços da fase */
.fv-esp{margin-top:52px;background:var(--fv-palido);border-radius:30px;padding:40px 46px;}
.fv-esp h3{font-size:1.15rem;}
.fv-esp ul{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 44px;}
.fv-esp li{padding:15px 0;border-top:1px solid rgba(69,81,158,.18);}
.fv-esp-nome{display:block;font-size:16.5px;font-weight:600;color:var(--noite);}
a.fv-esp-nome{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;transition:color .18s ease;}
a.fv-esp-nome::after{content:"→";font-size:14px;color:var(--ciano-escuro);transition:transform .18s ease;}
a.fv-esp-nome:hover{color:var(--indigo);}
a.fv-esp-nome:hover::after{transform:translateX(3px);}
.fv-esp-desc{display:block;font-size:15px;color:var(--tinta-2);margin-top:6px;line-height:1.65;}

/* fecho de cada fase: família, contextos, projetos */
.fv-extra{margin-top:44px;max-width:70ch;padding-left:26px;border-left:3px solid var(--ciano);}
.fv-extra h3{font-size:1.1rem;}
.fv-extra p{color:var(--tinta-2);margin-top:16px;line-height:1.7;}
.fv-extra .tlink{color:var(--indigo);font-weight:600;text-decoration:none;}
.fv-extra .tlink:hover{text-decoration:underline;text-decoration-color:var(--ciano);text-decoration-thickness:1.5px;text-underline-offset:4px;}

/* fechamento da página */
.fv-fecho{padding:0 0 96px;}
.fv-fecho-caixa{position:relative;overflow:hidden;background:var(--noite);color:rgba(255,255,255,.8); border-radius:36px;padding:60px 64px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.fv-arvore{position:absolute;right:-44px;bottom:-56px;width:300px;height:315px;fill:#fff;opacity:.06;pointer-events:none;}
.fv-fecho-texto,.fv-duvida{position:relative;}
.fv-fecho-texto h2{color:var(--branco);max-width:20ch;}
.fv-fecho-texto p{margin-top:16px;max-width:52ch;}
.fv-duvida{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:32px 34px;}
.fv-duvida h3{color:var(--branco);font-size:1.2rem;}
.fv-duvida p{margin-top:12px;font-size:15.5px;}
.fv-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
.fv-duvida .btn-solid{background:var(--branco);color:var(--noite);}
.fv-duvida .btn-solid:hover{background:var(--nevoa);}
.fv-duvida .btn-linha{border-color:rgba(255,255,255,.35);color:#fff;}
.fv-duvida .btn-linha:hover{border-color:#fff;color:#fff;}

@media (max-width:920px){
  .fv-hero{padding:24px 0 56px;}
  .fv-hero-grid{grid-template-columns:1fr;gap:26px;}
  .fv-hero-foto{height:280px;}
  .fv-intro{column-count:1;margin-top:32px;padding-top:26px;}
  .fv-indice-grid{grid-template-columns:1fr;gap:12px;}
  .fv-fase{padding:64px 0;}
  .fv-fase-topo{grid-template-columns:1fr;gap:28px;}
  .fv-fase-foto{position:static;height:300px;order:-1;}
  .fv-esp{margin-top:40px;padding:32px 28px;}
  .fv-esp ul{grid-template-columns:1fr;gap:0;}
  .fv-extra{margin-top:36px;}
  .fv-fecho{padding-bottom:72px;}
  .fv-fecho-caixa{grid-template-columns:1fr;gap:32px;padding:44px 32px;border-radius:30px;}
}

@media (max-width:560px){
  .fv-hero .lead{font-size:1.05rem;}
  .fv-frase{font-size:1.15rem;}
  .fv-atalho{padding:12px 18px 12px 12px;gap:14px;}
  .fv-atalho-foto{width:52px;height:52px;}
  .fv-esp{padding:28px 22px;border-radius:24px;}
  .fv-extra{padding-left:18px;}
  .fv-fecho-caixa{padding:36px 24px;}
  .fv-duvida{padding:26px 22px;}
}