/* Direção C · Revista de Cachos (Figma Weave, 5-nov-2026). Por cima de estilo.css: editorial e social, fundo lilás,
   Baloo 2 nos títulos, sublinhado desenhado à mão, cartões tipo story, avaliações como adesivos. Gente de verdade só
   pelas capas dos vídeos oficiais (nada de imagem gerada). A composição abre a página num cartão branco. */
:root{--lilas:#EFE6FA;--lilas2:#DCCBF3;--raio:26px}
body.v-c{background:var(--lilas);font-family:'Nunito',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.v-c h1,.v-c h2,.v-c h3,.v-c .kicker,.v-c .selo,.v-c .num,.v-c .eyebrow,.v-c .marca-linha{font-family:'Baloo 2',ui-rounded,'Nunito',sans-serif;font-weight:800;letter-spacing:-.01em}
.v-c h2{font-size:clamp(34px,5vw,60px);line-height:1;position:relative;display:inline-block;padding-bottom:12px}
.v-c h2::after{content:'';position:absolute;left:0;right:12%;bottom:0;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 12, 120 6 S 180 4, 198 7' fill='none' stroke='%23F39743' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.v-c .eyebrow{font-size:14px;letter-spacing:1px;color:var(--acento)}
.v-c .secao{padding:56px 0}
.v-c .topo{background:rgba(255,255,255,.94);border-bottom:0;box-shadow:0 2px 14px rgba(81,52,133,.12)}
.v-c .menu .principal{background:var(--acento)}

/* composição: cartão branco no topo */
.v-c .legal{background:linear-gradient(180deg,color-mix(in srgb,var(--fundo) 35%,#fff),var(--lilas));padding:16px 0 30px;border:0}
.v-c .legal>.wrap{background:#fff;border-radius:var(--raio);padding:20px 20px 22px;box-shadow:0 10px 30px rgba(81,52,133,.14);max-width:1080px}
.v-c .legal h1{font-family:'Baloo 2',ui-rounded,sans-serif;font-weight:800;font-size:clamp(25px,3.4vw,40px);line-height:1.05}
.v-c .legal-codigo{color:var(--acento);font-weight:800}
.v-c .legal-cab img{background:color-mix(in srgb,var(--fundo) 30%,#fff)}
.v-c .frase-legal{font-family:'Baloo 2',ui-rounded,sans-serif;font-weight:800;font-size:clamp(21px,2.6vw,28px);border-bottom:3px solid var(--bloco)}
.v-c #composicao{font-size:17px;line-height:1.75}
.v-c .legal .busca{border-radius:18px;background:var(--lilas)}
.v-c .ler{border:2px dashed var(--acento);border-radius:var(--raio)}

/* abertura: mosaico de gente real (capas dos vídeos oficiais) */
.v-c .heroi{background:var(--lilas);color:#241535}
.v-c .heroi .grande{font-size:clamp(50px,7.6vw,110px);line-height:.92}.v-c .heroi .grande em{color:var(--acento)}
.v-c .packshot{border-radius:50%;background:#fff;box-shadow:0 14px 40px rgba(81,52,133,.18)}
.v-c .packshot figcaption{background:var(--bloco);border-radius:999px;transform:rotate(-3deg)}
.v-c .mosaico{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:-6px 0 26px}
.v-c .mosaico img{aspect-ratio:3/4;object-fit:cover;border-radius:22px;border:4px solid #fff;box-shadow:0 8px 20px rgba(81,52,133,.18)}
.v-c .mosaico img:nth-child(1){transform:rotate(-3deg)}.v-c .mosaico img:nth-child(2){transform:translateY(-10px)}.v-c .mosaico img:nth-child(3){transform:rotate(3deg)}
.v-c .faixa{border-radius:var(--raio);margin:0 0 20px}
.v-c .selo{font-weight:700;border-radius:999px}
.v-c .botao{background:var(--acento);border-radius:999px}.v-c .botao:hover{background:#241535}

/* sobre */
.v-c .sobre{background:#fff;border-radius:44px 44px 0 0}.v-c .ativo{border-radius:var(--raio)}

/* como usar: cartões de story que deslizam */
.v-c .uso{background:var(--acento);border-radius:44px}
.v-c .passos{display:flex;overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;padding-bottom:10px}
.v-c .passos li{flex:0 0 min(78%,300px);scroll-snap-align:start;min-height:200px;border:0;border-radius:var(--raio);background:var(--fundo);color:var(--t-fundo);box-shadow:0 8px 0 rgba(0,0,0,.18)}
.v-c .passos li:nth-child(2n){background:var(--bloco);color:var(--t-bloco)}
.v-c .passos li::before{font-family:'Baloo 2',sans-serif;font-weight:800;color:inherit;opacity:.9}

/* dicas e avaliações como adesivos */
.v-c .dica{border:0;border-radius:var(--raio);box-shadow:0 8px 24px rgba(81,52,133,.14)}
.v-c .avaliacoes{background:var(--lilas2);color:#241535}
.v-c .av{border-radius:22px;position:relative;box-shadow:0 10px 24px rgba(81,52,133,.16)}
.v-c .av::before{content:'';position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgba(243,151,67,.75);transform:rotate(-4deg);border-radius:3px}
.v-c .av:nth-child(3n+1){transform:rotate(-1.5deg)}.v-c .av:nth-child(3n+2){transform:rotate(1.2deg)}
.v-c .estrelas{color:var(--bloco)}

/* vídeos como reels */
.v-c .videos{background:#241535;border-radius:44px;margin:0 8px}.v-c .video .tela{border-radius:24px}
.v-c .comunidade h3{font-family:'Baloo 2',sans-serif}

/* rotina, galeria, dúvidas, final */
.v-c .etapa{background:#fff;border-radius:var(--raio);box-shadow:0 6px 18px rgba(81,52,133,.12)}.v-c .etapa::before{background:var(--acento)}
.v-c .foto{border-radius:var(--raio)}
.v-c .duvidas{background:#fff;border-radius:44px 44px 0 0}.v-c .duvida{background:var(--lilas)}
.v-c .final{border-radius:44px 44px 0 0}
.v-c .historia{background:#fff}.v-c .capitulo{background:var(--lilas);border-radius:var(--raio);border:0;padding:20px}
.v-c .frase-final{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--acento)}
@media(max-width:860px){.v-c .legal>.wrap{margin:0 12px;padding:16px}.v-c .mosaico{gap:6px}.v-c .mosaico img{border-width:3px;border-radius:16px}
 .v-c .videos{margin:0;border-radius:32px}.v-c .uso{border-radius:32px}}
