/* passada de design da home, 07/10/2026 - secoes #rafaela e #crie. Dono: agente RAFAELA-CRIE.
   So CSS. Le os tokens de base.css (--ds-*). Nao toca em animacao, em JS nem em texto.
   Seletores presos a section#rafaela e section#crie; !important so onde ha estilo embutido a vencer.
   Reversao: tirar o <link> deste arquivo do <head>. */

/* =====================================================================
   RAFAELA - editorial. O retrato perde a moldura, cresce e sangra a altura da secao;
   degrade para o vinho do lado do texto. A secao continua "parada" (sticky) na passagem para a Crie.
   Estrutura (sem classes): section#rafaela > .bg-vivo + div(wrapper) > div(grade) > [div(retrato) , div(texto)]
   ===================================================================== */

/* ---- base comum (todos os tamanhos) ---- */
section#rafaela > div:not(.bg-vivo) > div > div:last-child > span:first-child{
  font-size:max(12px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp)!important;
  color:var(--ds-ouro-claro)!important;margin-bottom:clamp(14px,1.6vw,22px)!important}
section#rafaela h2{
  font-family:var(--ds-serif)!important;font-weight:500!important;font-size:var(--ds-h2)!important;
  line-height:1!important;letter-spacing:-.015em!important;max-width:11.5em!important;text-wrap:balance}
section#rafaela h2 em{font-style:italic;font-weight:400;color:var(--ds-ouro-claro)}
section#rafaela > div:not(.bg-vivo) > div > div:last-child > p{
  max-width:34em!important;font-size:var(--ds-corpo)!important;line-height:1.65!important;color:var(--ds-sub-escuro)!important}
section#rafaela > div:not(.bg-vivo) > div > div:last-child > p:nth-of-type(1){
  font-size:var(--ds-lead)!important;line-height:1.5!important;color:var(--ds-txt-escuro)!important;margin-top:clamp(18px,2vw,28px)!important}
section#rafaela > div:not(.bg-vivo) > div > div:last-child > p:nth-of-type(2){margin-top:12px!important}
/* a citacao: frase grande, italico, aspa dourada de ornamento atras */
section#rafaela blockquote{
  position:relative;margin:clamp(30px,3.6vw,54px) 0 0!important;padding:clamp(34px,3vw,44px) 0 0!important;
  border:0!important;border-top:1px solid rgba(201,165,94,.38)!important;
  font-family:var(--ds-serif)!important;font-style:italic;font-weight:400;
  font-size:clamp(1.85rem,1.4vw + 1.15rem,2.7rem)!important;line-height:1.12!important;letter-spacing:-.01em;
  color:var(--ds-txt-escuro)!important;text-wrap:balance;max-width:15em}
section#rafaela blockquote::before{
  content:"\201C";position:absolute;left:0;top:-20px;z-index:1;pointer-events:none;
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-sizing:border-box;padding-top:.3rem;
  background:linear-gradient(135deg,var(--ds-ouro-claro),var(--ds-ouro));color:#2A0F18;
  box-shadow:0 0 0 6px rgba(50,21,31,.9),0 8px 22px -6px rgba(0,0,0,.6);
  font-family:var(--ds-serif);font-style:normal;font-weight:700;font-size:2.3rem;line-height:1}
section#rafaela blockquote > span{
  display:flex!important;align-items:center;gap:12px;margin-top:clamp(14px,1.4vw,20px)!important;
  font-family:var(--ds-mono)!important;font-style:normal!important;font-size:max(12px,var(--ds-meta))!important;
  letter-spacing:.06em;color:var(--ds-ouro-claro)!important;opacity:.9}
section#rafaela blockquote > span::before{content:"";flex:none;width:28px;height:1px;background:var(--ds-ouro)}
/* legenda do retrato (nome e funcao dela) */
section#rafaela > div:not(.bg-vivo) > div > div:first-child > div{pointer-events:none}
section#rafaela > div:not(.bg-vivo) > div > div:first-child > div b{font-size:clamp(1.35rem,1vw + 1rem,1.7rem)!important;font-weight:500!important}
section#rafaela > div:not(.bg-vivo) > div > div:first-child > div span:not([aria-hidden]){font-size:.86rem!important;color:var(--ds-sub-escuro)!important}

/* ---- computador (>= 900 px): retrato sangra a altura da secao, texto a direita ---- */
@media (min-width:900px){
  section#rafaela{padding:clamp(72px,10vh,128px) var(--ds-gutter)!important}
  section#rafaela > div:not(.bg-vivo){position:static!important;max-width:var(--ds-max)!important;margin:0 auto!important}
  section#rafaela > div:not(.bg-vivo) > div{
    position:static!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)!important;
    gap:0 clamp(28px,4vw,56px)!important;align-items:center!important}
  /* retrato: preso a secao (sai da grade), da borda de cima a de baixo e da borda esquerda ate perto do meio */
  section#rafaela > div:not(.bg-vivo) > div > div:first-child{
    position:absolute!important;left:0;top:0;bottom:0;width:min(51%,820px);z-index:0;
    border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child picture{
    position:absolute;inset:0;display:block;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 56%,rgba(0,0,0,.55) 78%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 56%,rgba(0,0,0,.55) 78%,transparent 100%)}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child img{
    width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:50% 12%!important}
  /* legenda no pe do retrato, alinhada a margem esquerda da pagina */
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div{
    left:0!important;right:0!important;bottom:0!important;padding:150px 0 clamp(26px,3.4vw,46px) var(--ds-gutter)!important;
    background:radial-gradient(90% 100% at 0% 100%,rgba(14,7,10,.86) 0%,rgba(14,7,10,.5) 42%,transparent 72%)!important}
  section#rafaela > div:not(.bg-vivo) > div > div:last-child{grid-column:2;position:relative;z-index:1;min-width:0}
}

/* ---- tablet e celular (< 900 px): retrato em faixa no topo, sangrando para os lados, esmaecendo no vinho ---- */
@media (max-width:899px){
  section#rafaela{padding:0 0 clamp(44px,8vw,72px)!important;justify-content:flex-start}
  section#rafaela > div:not(.bg-vivo){max-width:none!important;margin:0!important}
  section#rafaela > div:not(.bg-vivo) > div{display:block!important}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child{
    position:relative!important;height:clamp(330px,96vw,560px);
    border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child picture{
    position:absolute;inset:0;display:block;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.5) 82%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 60%,rgba(0,0,0,.5) 82%,transparent 100%)}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child img{
    width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;object-position:50% 10%!important}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div{
    padding:60px max(var(--ds-gutter),calc((100% - 680px)/2)) 18px!important;background:none!important;text-shadow:0 1px 14px rgba(11,8,9,.85)}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div span[aria-hidden]{margin-bottom:8px!important}
  section#rafaela > div:not(.bg-vivo) > div > div:last-child{
    position:relative;z-index:1;max-width:680px;margin:6px auto 0;padding:0 var(--ds-gutter)}
  }
@media (max-width:759px){
  section#rafaela{padding-bottom:44px!important}
  section#rafaela h2{max-width:none!important}
  section#rafaela blockquote{margin-top:26px!important;padding-top:22px!important;font-size:1.75rem!important}
  section#rafaela blockquote::before{width:34px;height:34px;top:-17px;font-size:1.95rem;padding-top:.26rem}
}

/* =====================================================================
   CRIE UMA RAFA - as 5 Rafas sao a identidade: cartoes maiores, a escolhida em destaque claro,
   painel de detalhe mais justo. O embaralhar e a explosao de codigo (JS) nao dependem destas medidas:
   so transform/translate/scale por animacao, medidas lidas na hora. A seta do painel (.cx-palco::before)
   usa gap 14 px e 5 colunas: nao mexer neste gap.
   ===================================================================== */

/* ---- ritmo da secao ---- */
section#crie{padding-top:clamp(64px,7vw,112px)!important;padding-bottom:clamp(52px,5vw,88px)!important}
section#crie > div:not(.cr-fundo){max-width:var(--ds-max)!important}

/* ---- cabecalho: titulo --ds-h2, apoio e a Rafaela ao lado ---- */
section#crie .cx-head{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px clamp(32px,4.5vw,64px)}
section#crie .cx-head .cr-tit{
  font-family:var(--ds-serif);font-weight:500;font-size:var(--ds-h2)!important;line-height:1!important;letter-spacing:-.015em;max-width:none}
section#crie .cx-head .cr-tit em{font-style:italic;font-weight:400;color:var(--ds-ouro-claro)}
section#crie .cx-head > div:first-child > span{
  font-size:max(12px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp)!important;color:var(--ds-ouro-claro)!important}
section#crie .cx-head .cr-sub{font-size:var(--ds-lead)!important;line-height:1.5!important;color:var(--ds-sub-escuro)}
section#crie .cx-mae{margin-top:clamp(16px,1.6vw,22px);padding-top:clamp(14px,1.4vw,20px)}
section#crie .cx-mae b{font-size:1.5rem}
section#crie .rl-tag{font-size:12px!important;padding:5px 10px}
section#crie .cx-pick{margin:clamp(30px,3.4vw,52px) 0 6px}
section#crie .cx-pick > span{font-size:max(12px,var(--ds-rotulo))!important;letter-spacing:var(--ds-rotulo-esp);color:var(--ds-ouro-claro)}
section#crie .cx-pos{font-size:12.5px!important}

/* ---- as 5 Rafas: cartoes maiores, a escolhida clara, as outras recuadas ---- */
section#crie .cx-rafas{padding-top:20px}
section#crie .cx-rafa{aspect-ratio:3/4.3;border-radius:22px}
section#crie .cx-ia{font-size:12px!important;padding:6px 10px;top:14px;left:14px;letter-spacing:.12em}
section#crie .cx-txt{padding:92px 16px 18px}
section#crie .cx-txt b{font-size:1.62rem;line-height:1}
section#crie .cx-lim{margin-top:9px}
section#crie .cx-ck{width:34px;height:34px;top:12px;right:12px;font-size:1.1rem}
/* recuadas: foto menos saturada e uma camada escura (a camada ::after ja existe, so se aumenta) */
section#crie .cx-rafa:not([aria-pressed="true"]) .cx-foto img{filter:brightness(.86) saturate(.78)}
section#crie .cx-rafa:not([aria-pressed="true"])::after{opacity:.42}
/* a escolhida: mais viva, anel e halo na cor dela, rotulo claro */
section#crie .cx-rafa[aria-pressed="true"] .cx-foto img{filter:brightness(1.07) saturate(1.1)}
section#crie .cx-rafas .cx-rafa[aria-pressed="true"]{
  transform:translateY(-14px) scale(1.055);border-color:color-mix(in srgb,var(--rc) 55%,#F4ECDE);
  box-shadow:0 0 0 2px var(--rc),0 0 0 7px color-mix(in srgb,var(--rc) 22%,transparent),0 44px 70px -28px var(--rc)}
section#crie .cx-rafa[aria-pressed="true"] .cx-txt b{color:#FFFEFB;text-shadow:0 1px 14px rgba(0,0,0,.6)}
section#crie .cx-rafa[aria-pressed="true"] .cx-txt{background:linear-gradient(180deg,transparent,rgba(11,8,9,.92) 42%)}

/* ---- painel de detalhe: mais justo ---- */
section#crie .cx-palco{margin-top:34px;padding:clamp(20px,2.2vw,30px) clamp(18px,2.6vw,36px) clamp(18px,2vw,26px);border-radius:26px}
section#crie .cx-cab{gap:16px}
section#crie .cx-cab .cr-av{width:clamp(52px,4.6vw,68px);height:clamp(52px,4.6vw,68px)}
section#crie .cx-cabt b{font-size:var(--ds-h3);line-height:1}
section#crie .cx-faz{margin-top:12px;font-size:var(--ds-lead);line-height:1.45}
section#crie .cx-faz em{font-size:12px!important}
section#crie .cx-sabe{margin-top:16px;padding:14px 16px 16px;border-radius:16px}
section#crie .cx-sabe-t{margin-bottom:10px}
section#crie .cx-sabe-l{gap:8px}
section#crie .cx-sabe-l > div{padding:10px 12px 11px}
section#crie .cx-corpo{margin-top:16px;gap:20px}
section#crie .cx-conv{padding:18px;gap:12px}
section#crie .cx-trilha-cab{margin-bottom:10px}
section#crie .cx-passo{padding-bottom:14px}
section#crie .cx-muda{margin-top:18px;padding-top:14px;gap:10px 32px}
section#crie .cx-convite{margin:22px 0 0!important;padding-top:20px}
section#crie .cx-quem,section#crie .cx-consulta i{font-size:12px!important}

/* ---- tablet (760-1099) ---- */
@media (max-width:1099px){
  section#crie .cx-head{grid-template-columns:minmax(0,1fr)}
  section#crie .cx-txt b{font-size:1.45rem}
  section#crie .cx-txt{padding-top:78px}
}
@media (max-width:900px){
  /* faixa que rola: folga embaixo para o halo da escolhida nao ser cortado */
  section#crie .cx-rafas{padding-bottom:28px!important;margin-bottom:-16px}
}
@media (min-width:901px) and (max-width:1099px){
  /* 5 colunas estreitas: nome e frase cabem sem quebrar */
  section#crie .cx-txt b{font-size:1.2rem}
  section#crie .cx-txt{padding:78px 12px 14px}
}

/* ---- celular (<= 759) ---- */
@media (max-width:759px){
  section#crie{padding-top:50px!important;padding-bottom:36px!important}
  section#crie .cx-head{gap:14px}
  section#crie .cx-mae{margin-top:14px;padding-top:12px;gap:12px}
  section#crie .cx-mae-foto{width:50px;height:50px}
  section#crie .cx-mae b{font-size:1.35rem}
  section#crie .cx-mae small{font-size:14px!important;margin-top:2px}
  section#crie .cx-pick{margin:22px 0 0}
  section#crie .cx-pos{min-width:76px}
  section#crie .cx-rafas{padding-top:26px!important;margin-top:-12px!important}
  section#crie .cx-rafa{aspect-ratio:3/3.85}
  section#crie .cx-ia{top:10px;left:10px}
  section#crie .cx-txt{padding:58px 12px 13px}
  section#crie .cx-txt b{font-size:1.32rem}
  section#crie .cx-lim{font-size:12.5px!important;margin-top:6px}
  /* painel */
  section#crie .cx-palco{margin-top:18px;padding:22px 14px 16px;border-radius:20px}
  section#crie .cx-cab{flex-wrap:nowrap;gap:12px}
  section#crie .cx-cab .cr-av{width:50px;height:50px}
  section#crie .cx-cabt{flex:1 1 auto}
  section#crie .cx-cabt b{font-size:1.55rem}
  section#crie .cx-demo{
    position:absolute;top:-12px;right:16px;order:0;padding:5px 10px;font-size:12px!important;
    background:color-mix(in srgb,var(--rc) 14%,#150F13);border-color:rgba(201,165,94,.6)}
  section#crie .cx-faz{margin-top:10px;font-size:15px!important}
  section#crie .cx-sabe{margin-top:12px;padding:12px 11px 12px}
  section#crie .cx-sabe-t{margin-bottom:8px;gap:2px 10px}
  section#crie .cx-sabe-t b{font-size:1.1rem}
  section#crie .cx-sabe-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  section#crie .cx-sabe-l > div{padding:7px 9px 8px}
  section#crie .cx-sabe-l dd{font-size:14px!important;line-height:1.38;margin-top:4px}
  section#crie .cx-corpo{margin-top:10px;gap:10px}
  section#crie .cx-conv{padding:10px;gap:8px}
  section#crie .cx-conv .cr-bolha{max-width:96%}
  section#crie .cx-trilha-cab{margin-bottom:6px}
  section#crie .cx-replay{min-height:44px}
  section#crie .cx-passo{padding-bottom:10px}
  section#crie .cx-muda{grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:10px;padding-top:10px;font-size:14px}
  section#crie .cx-muda p{font-size:14px!important;line-height:1.45}
  section#crie .cx-convite{margin:14px 0 0!important;padding-top:14px}
  section#crie .cx-convite p{font-size:1.42rem}
  section#crie .cx-cta{margin-top:14px!important;min-height:52px}
  /* rotulos de verdade nunca abaixo de 12 px (o refino.css baixa varios a 11 px no celular) */
  section#crie .cx-cabt small,section#crie .cx-sabe-t span,section#crie .cx-sabe-l dt,section#crie .cx-trilha-cab>span,
  section#crie .cx-muda b,section#crie .cx-demo,section#crie .cx-quem,section#crie .cx-consulta i,section#crie .cx-pos,
  section#crie .cx-faz em{font-size:12px!important}
  section#crie .cx-sabe-l dt{letter-spacing:.06em}
}

/* refino ad6466d7 07/10 (revisão crítica da home cffe492) */
/* Bloco acrescentado por sobreposição (mesma especificidade, vem depois); nada acima foi reescrito.
   Reversão: apagar daqui até o fim do arquivo. */

/* ---- RAFAELA ---- */
/* prova-rafaela[0] + prova-rafaela[5], numa regra só: a Crie sobe 28 px sobre o fim da Rafaela (margin-top:-28px inline),
   então o respiro de 46 px da legenda ganha +28 px por dentro; e a margem esquerda da legenda acompanha a grade de 1240 px
   (a mesma de Prova e Crie). Abaixo de ~1300 px o max() devolve o gutter de antes. */
@media (min-width:900px){
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div{
    padding:150px 0 calc(clamp(26px,3.4vw,46px) + 28px) max(var(--ds-gutter),calc((100vw - var(--ds-max))/2))!important}
}
/* prova-rafaela[0] (tablet e celular): mesmos 28 px no respiro de baixo da seção */
@media (max-width:899px){
  section#rafaela{padding-bottom:calc(clamp(44px,8vw,72px) + 28px)!important}
}
@media (max-width:759px){
  section#rafaela{padding-bottom:72px!important}
}
/* prova-rafaela[2]: o nome não parte entre linhas no segundo parágrafo (o <p> tem text-wrap:pretty inline) */
@media (min-width:900px){
  section#rafaela > div:not(.bg-vivo) > div > div:last-child > p:nth-of-type(2){text-wrap:balance!important}
}
/* prova-rafaela[7]: função da Rafaela sobre o antebraço do retrato lê mais firme (mesma sombra do bloco tablet/celular) */
@media (min-width:900px){
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div span:not([aria-hidden]){
    color:var(--ds-txt-escuro)!important;opacity:.88;text-shadow:0 1px 12px rgba(11,8,9,.9)}
  section#rafaela > div:not(.bg-vivo) > div > div:first-child > div b{text-shadow:0 1px 14px rgba(11,8,9,.85)}
}

/* ---- CRIE UMA RAFA ---- */
/* crie-seguranca[0]: no celular a seta "próxima Rafa" saía da tela (rótulo 160 + gap + nav 182 > 316 px). O rótulo pode quebrar,
   a navegação não encolhe e os botões ficam com 44 px. O inline usa '#crie .cx-pick>span' (menor), então vence sem !important. */
@media (max-width:420px){
  section#crie .cx-pick{gap:8px}
  section#crie .cx-pick > span{white-space:normal;line-height:1.35}
  section#crie .cx-nav{flex:none;gap:2px}
  section#crie .cx-seta{flex:none;min-width:44px;min-height:44px}
}
/* crie-seguranca[2]: sem palavra órfã no título (o balance do .cr-tit não alcança o trecho depois do <br>) */
section#crie .cr-tit em{display:block;text-wrap:balance}
/* crie-seguranca[4]: "Fica" alinha com a coluna da direita do painel (.cx-corpo = 1,1fr 1fr, gap 20 px, só em duas colunas, > 1000 px) */
@media (min-width:1001px){
  section#crie .cx-muda{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:20px}
}
/* crie-seguranca[5] (só computador): a folha da Segurança sobe 28 px sobre a Crie (#seguranca{margin-top:-28px} inline);
   devolve-se o ar ao painel. O celular não muda (continua 36 px). */
@media (min-width:760px){
  section#crie{padding-bottom:calc(clamp(52px,5vw,88px) + 28px)!important}
}