/* ============================================================================
   CASTOR BEZERRA — HOME V3 (2026-08-17, agente HOME)
   Carregado no <head> (layout.tpl) DEPOIS de cb-home-v4.css, só na home.
   v4 continua servindo a base (rail, avaliações, lightbox, .cb-head); este
   arquivo troca os TOKENS pra identidade azul + dourado, põe Baloo 2 nos
   títulos e desenha as seções novas: departamentos (thumbs), ofertas (faixa
   azul), queridinhos, carrosséis por departamento (chips), banner "por que
   comprar", guias e dúvidas (accordion), newsletter azul.
   Regra: só classes .cb-* e overrides pontuais de .ttd-trust/.ttd-newsletter
   (home). Nada aqui vaza pro resto da loja.
   Publicar = nome novo (v5 -> v6) — o CDN cacheia static/ pelo nome.
   ========================================================================== */

:root{
    --cb-royal:   #1E5FD8;
    --cb-royal-d: #0F3D9C;
    --cb-royal-l: #EAF1FD;
    --cb-royal-2: #2B6FE6;
    --cb-gold:    #F2C14E;
    --cb-gold-m:  #D4AF37;
    --cb-gold-t:  #9A6B00;   /* dourado pra TEXTO sobre claro (contraste AA) */
    --cb-amber:   #F59E0B;
    --cb-ink:     #1B2434;
    --cb-muted:   #4A5568;
    --cb-snow:    #F3F5F9;
    --cb-line:    #E2E8F0;
    --cb-display: "Baloo 2", "Nunito", "Sora", ui-rounded, system-ui, sans-serif;
    --cb-radius:  22px;
}

/* ===== Cabeçalhos v3: Baloo 2 + eyebrow dourado ============================ */
.cb-head--v3 .cb-head__eyebrow{ color:var(--cb-gold-t); letter-spacing:.16em; }
.cb-head--v3 .cb-head__eyebrow::before{ background:var(--cb-gold); width:22px; height:3px; }
.cb-head--v3 .cb-head__title{
    font:800 clamp(28px, 3vw, 42px)/1.04 var(--cb-display);
    letter-spacing:-.01em; color:var(--cb-ink);
}
.cb-head__title-soft{ display:block; font-weight:700; font-size:.55em; color:var(--cb-royal); letter-spacing:0; margin-top:4px; }
.cb-head--v3 .cb-head__link{ color:var(--cb-royal); }
.cb-head--v3 .cb-head__link:hover, .cb-head--v3 .cb-head__link:focus-visible{ color:var(--cb-royal-d); border-bottom-color:var(--cb-gold); }
.cb-head__side{ display:flex; align-items:center; gap:18px; flex:0 0 auto; }
/* os títulos das seções que ficaram da v2 (avaliações) também viram Baloo */
.cb-revs .cb-head__title, .cb-why__title{ font-family:var(--cb-display); font-weight:800; letter-spacing:-.01em; }
.cb-revs .cb-head__eyebrow{ color:var(--cb-gold-t); }
.cb-revs .cb-head__eyebrow::before{ background:var(--cb-gold); }

/* ===== Trust bar (home): ícone em pastilha azul com traço dourado ========== */
.ttd-trust__pill{ align-items:center; }
.ttd-trust__ico{
    width:42px !important; height:42px !important; flex:0 0 42px; padding:9px;
    border-radius:13px; background:var(--cb-royal); color:var(--cb-gold) !important;
    box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.55);
}
.ttd-trust__title{ font-family:var(--cb-display); font-weight:700; font-size:14.5px; color:var(--cb-ink); }

/* ===== (3) Compre por departamento ======================================== */
.cb-depts{ margin:0 0 var(--cb-gap); }
.cb-depts__grid{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px 16px;
}
.cb-depts__cell.is-extra-d{ display:none; }
.cb-depts__grid.is-open .cb-depts__cell{ display:block; }
.cb-dept{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    text-decoration:none; color:var(--cb-ink); outline:none;
}
.cb-dept__frame{
    display:block; width:100%; aspect-ratio:1/1; border-radius:var(--cb-radius);
    overflow:hidden; background:var(--cb-royal); position:relative;
    box-shadow:0 1px 0 rgba(15,61,156,.08), 0 14px 30px -22px rgba(15,61,156,.7);
    transition:transform .24s var(--cb-ease), box-shadow .24s ease;
}
.cb-dept__frame::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    box-shadow:inset 0 0 0 0 var(--cb-gold); transition:box-shadow .24s ease;
}
.cb-dept__img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--cb-ease); }
.cb-dept__name{
    font:700 15px/1.2 var(--cb-display); text-align:center; letter-spacing:0;
    padding:0 4px; text-wrap:balance;
}
.cb-dept:hover .cb-dept__frame, .cb-dept:focus-visible .cb-dept__frame{
    transform:translateY(-4px); box-shadow:0 22px 40px -22px rgba(15,61,156,.75);
}
.cb-dept:hover .cb-dept__frame::after, .cb-dept:focus-visible .cb-dept__frame::after{ box-shadow:inset 0 0 0 3px var(--cb-gold); }
.cb-dept:hover .cb-dept__img{ transform:scale(1.05); }
.cb-dept:hover .cb-dept__name{ color:var(--cb-royal); }
.cb-dept:focus-visible .cb-dept__frame{ outline:3px solid var(--cb-royal); outline-offset:3px; }
.cb-depts__more{ display:flex; justify-content:center; margin-top:22px; }

/* botão revelável (usado em departamentos e chips) */
.cb-more{
    display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 22px;
    border-radius:999px; border:2px solid var(--cb-royal); background:#fff; color:var(--cb-royal);
    font:700 15px/1 var(--cb-display); cursor:pointer;
    transition:background .18s ease, color .18s ease, transform .18s var(--cb-ease);
}
.cb-more svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.cb-more:hover{ background:var(--cb-royal); color:#fff; }
.cb-more:focus-visible{ outline:3px solid var(--cb-gold); outline-offset:3px; }
.cb-more[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* ===== (4) Ofertas — faixa azul royal com filete dourado ================== */
.cb-ofertas{
    margin:0 0 var(--cb-gap); padding:30px clamp(18px, 2.6vw, 34px) 22px;
    border-radius:28px; background:var(--cb-royal); position:relative; overflow:hidden;
    color:#fff;
}
.cb-ofertas::before{     /* filete dourado no topo, o "fio" da marca */
    content:""; position:absolute; left:0; right:0; top:0; height:5px;
    background:linear-gradient(90deg, var(--cb-gold-m), var(--cb-gold) 40%, var(--cb-gold-m));
}
.cb-ofertas::after{      /* arco dourado discreto (mesmo motivo das thumbs) */
    content:""; position:absolute; right:-70px; bottom:-140px; width:280px; height:280px;
    border-radius:50%; border:3px solid rgba(242,193,78,.55); pointer-events:none;
}
.cb-head--onblue .cb-head__eyebrow{ color:var(--cb-gold); }
.cb-head--onblue .cb-head__eyebrow::before{ background:var(--cb-gold); }
.cb-head--onblue .cb-head__title{ color:#fff; }
.cb-head--onblue .cb-head__title-soft{ color:var(--cb-gold); }
.cb-head--onblue .cb-head__sub{ color:rgba(255,255,255,.86); }
.cb-head--onblue .cb-head__link{ color:#fff; }
.cb-head--onblue .cb-head__link:hover, .cb-head--onblue .cb-head__link:focus-visible{ color:var(--cb-gold); border-bottom-color:var(--cb-gold); }
.cb-head__link--gold{ color:var(--cb-gold) !important; }
.cb-head--onblue .cb-rail__btn{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); color:#fff; }
.cb-head--onblue .cb-rail__btn:hover:not(:disabled){ background:var(--cb-gold); border-color:var(--cb-gold); color:var(--cb-ink); }
.cb-ofertas .cb-rail__dot{ background:rgba(255,255,255,.35); }
.cb-ofertas .cb-rail__dot.is-on{ background:var(--cb-gold); }
.cb-ofertas .cb-rail{ position:relative; z-index:1; }
.cb-ofertas .cb-rail__nav, .cb-ofertas .cb-head{ position:relative; z-index:1; }

/* ===== (5) Queridinhos + (6) carrosséis por departamento ================== */
.cb-quer, .cb-dept-rail{ margin:0 0 var(--cb-gap); }
.cb-dept-rail .cb-head__title{ font-size:clamp(24px, 2.4vw, 32px); }
.cb-dept-rail .cb-head{ margin-bottom:18px; }

.cb-chips{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cb-chips__item.is-extra{ display:none; }
.cb-chips.is-open .cb-chips__item.is-extra{ display:block; }
.cb-chip{
    display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px;
    background:var(--cb-royal-l); color:var(--cb-royal-d); text-decoration:none;
    font:700 13px/1 var(--cb-ui); border:1.5px solid transparent; cursor:pointer;
    transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.cb-chip:hover{ background:var(--cb-royal); color:#fff; }
.cb-chip:focus-visible{ outline:3px solid var(--cb-royal); outline-offset:2px; }
.cb-chip--more{ background:#fff; border-color:var(--cb-royal-l); color:var(--cb-royal); }
.cb-chip--more:hover{ border-color:var(--cb-royal); background:#fff; color:var(--cb-royal-d); }

/* cartão final "Ver tudo" no fim do rail */
.cb-railcell--end{ display:flex; text-decoration:none; }
.cb-railend{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px;
    width:100%; min-height:100%; padding:26px 22px; border-radius:18px;
    background:var(--cb-royal); color:#fff; position:relative; overflow:hidden;
    transition:background .2s ease, transform .22s var(--cb-ease);
}
.cb-railend::after{
    content:""; position:absolute; right:-40px; bottom:-60px; width:150px; height:150px; border-radius:50%;
    border:3px solid rgba(242,193,78,.6);
}
.cb-railend__n{ font:700 12px/1 var(--cb-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--cb-gold); }
.cb-railend__t{ font:800 24px/1.1 var(--cb-display); }
.cb-railend__go{ margin-top:10px; font:800 26px/1 var(--cb-display); color:var(--cb-gold); transition:transform .2s var(--cb-ease); }
.cb-railcell--end:hover .cb-railend{ background:var(--cb-royal-d); }
.cb-railcell--end:hover .cb-railend__go{ transform:translateX(6px); }
.cb-railcell--end:focus-visible{ outline:3px solid var(--cb-royal); outline-offset:3px; border-radius:18px; }

/* ===== (8) Por que comprar — banner com faixa de ações ==================== */
.cb-whyban--v3{ background:var(--cb-royal-d); border-radius:26px; }
.cb-whyban--v3 .cb-whyban__img{ display:block; width:100%; height:auto; }
.cb-whyban__acts{
    display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
    padding:16px 20px 20px; background:var(--cb-royal-d);
}
.cb-btn{
    display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 24px;
    border-radius:999px; font:700 15.5px/1 var(--cb-display); text-decoration:none; letter-spacing:.005em;
    transition:transform .18s var(--cb-ease), background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cb-btn--gold{ background:var(--cb-gold); color:var(--cb-ink); box-shadow:0 10px 24px -14px rgba(0,0,0,.6); }
.cb-btn--gold:hover{ background:#F7CF6E; transform:translateY(-1px); }
.cb-btn--ghost{ color:#fff; border:2px solid rgba(255,255,255,.55); }
.cb-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.cb-btn:focus-visible{ outline:3px solid var(--cb-gold); outline-offset:3px; }

/* ===== (9) Guias e dúvidas ================================================ */
.cb-faq{ margin:0 0 var(--cb-gap); }
.cb-faq__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
.cb-faq__acc{ border-top:2px solid var(--cb-royal-l); }
.cb-faq__item{ border-bottom:2px solid var(--cb-royal-l); }
.cb-faq__q{ margin:0; font:inherit; }
.cb-faq__btn{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 4px; background:none; border:0; cursor:pointer; text-align:left;
    font:700 17px/1.3 var(--cb-display); color:var(--cb-ink); min-height:52px;
}
.cb-faq__btn:hover{ color:var(--cb-royal); }
.cb-faq__btn:focus-visible{ outline:3px solid var(--cb-royal); outline-offset:-3px; border-radius:8px; }
.cb-faq__chev{ width:20px; height:20px; flex:0 0 20px; fill:none; stroke:var(--cb-royal); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s ease; }
.cb-faq__btn[aria-expanded="true"] .cb-faq__chev{ transform:rotate(180deg); }
.cb-faq__panel{ padding:0 4px 18px; }
.cb-faq__panel[hidden]{ display:none; }
.cb-faq__panel p{ margin:0; font:400 15px/1.6 var(--cb-ui); color:var(--cb-muted); max-width:60ch; }
.cb-faq__go{ display:inline-block; margin-left:6px; font-weight:700; color:var(--cb-royal); text-decoration:none; border-bottom:2px solid var(--cb-gold); }
.cb-faq__go:hover{ color:var(--cb-royal-d); }
.cb-faq__glabel{ margin:0 0 12px; font:700 11px/1 var(--cb-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--cb-gold-t); }
.cb-guias{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cb-guia{
    display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
    background:var(--cb-snow); text-decoration:none; color:var(--cb-ink); border:1.5px solid transparent;
    transition:border-color .18s ease, background .18s ease, transform .2s var(--cb-ease);
}
.cb-guia:hover{ background:#fff; border-color:var(--cb-royal); transform:translateX(3px); }
.cb-guia:focus-visible{ outline:3px solid var(--cb-royal); outline-offset:2px; }
.cb-guia__ico{
    width:44px; height:44px; flex:0 0 44px; border-radius:13px; background:var(--cb-royal); color:var(--cb-gold);
    display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(242,193,78,.5);
}
.cb-guia__ico svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cb-guia__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.cb-guia__t{ font:700 15.5px/1.25 var(--cb-display); }
.cb-guia__s{ font:400 13.5px/1.4 var(--cb-ui); color:var(--cb-muted); }
.cb-guia__go{ font:800 22px/1 var(--cb-display); color:var(--cb-royal); }

/* ===== (10) Newsletter — faixa azul ======================================== */
.ttd-home .ttd-newsletter{
    background:var(--cb-royal); border-color:var(--cb-royal); color:#fff; border-radius:28px; position:relative; overflow:hidden;
}
.ttd-home .ttd-newsletter::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--cb-gold-m), var(--cb-gold) 40%, var(--cb-gold-m)); }
.ttd-home .ttd-newsletter__badge{ background:var(--cb-gold); color:var(--cb-ink); }
.ttd-home .ttd-newsletter__title{ color:#fff; font-family:var(--cb-display); font-weight:800; letter-spacing:-.005em; }
.ttd-home .ttd-newsletter__sub{ color:rgba(255,255,255,.86); }
.ttd-home .ttd-newsletter-form input[type="email"]{ background:#fff; border-color:#fff; color:var(--cb-ink); }
.ttd-home .ttd-newsletter-form button{ background:var(--cb-gold); color:var(--cb-ink); border-color:var(--cb-gold); font-family:var(--cb-display); font-weight:700; }
.ttd-home .ttd-newsletter-form button:hover{ background:#F7CF6E; border-color:#F7CF6E; }
.ttd-home .ttd-newsletter__feedback.is-ok{ color:#fff; }

/* ===== Responsivo ======================================================== */
@media (max-width:1180px){
    .cb-depts__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:900px){
    .cb-faq__grid{ grid-template-columns:1fr; }
    .cb-head__side{ width:100%; justify-content:space-between; }
}
@media (max-width:760px){
    .cb-depts__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 10px; }
    .cb-depts__cell.is-extra-m{ display:none; }
    .cb-depts__cell.is-extra-d{ display:none; }
    .cb-depts__grid.is-open .cb-depts__cell{ display:block; }
    .cb-dept__frame{ border-radius:16px; }
    .cb-dept__name{ font-size:13.5px; }
    .cb-ofertas{ border-radius:20px; padding:22px 14px 16px; }
    .cb-ofertas .cb-rail{ margin:0 -14px; padding-left:14px; padding-right:14px; }
    .cb-head--rail .cb-rail__nav{ display:none; }
    .cb-head__side{ width:auto; }
    .cb-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:10px -12px 0; padding:0 12px 4px; }
    .cb-chips::-webkit-scrollbar{ display:none; }
    .cb-chips__item{ flex:0 0 auto; }
    .cb-chips__item.is-extra{ display:block; }   /* no toque, o rail de chips já rola: nada escondido */
    .cb-chips__more{ display:none; }
    .cb-railend{ padding:20px 16px; }
    .cb-railend__t{ font-size:20px; }
    .cb-whyban--v3{ border-radius:20px; }
    .cb-whyban__acts{ padding:14px 14px 18px; }
    .cb-btn{ min-height:44px; padding:0 18px; font-size:14.5px; }
    .cb-faq__btn{ font-size:16px; }
}
@media (max-width:430px){
    .cb-depts__grid{ gap:12px 8px; }
    .cb-dept__name{ font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce){
    .cb-dept__frame, .cb-dept__img, .cb-more, .cb-more svg, .cb-chip, .cb-railend, .cb-railend__go,
    .cb-btn, .cb-faq__chev, .cb-guia{ transition:none !important; }
    .cb-dept:hover .cb-dept__frame, .cb-dept:hover .cb-dept__img, .cb-guia:hover, .cb-btn--gold:hover,
    .cb-railcell--end:hover .cb-railend__go{ transform:none; }
}