/* ===========================================================================
   Checkout da Soan.ia.

   O desenho não é novo: é o checkout da Naut, portado. A Naut já resolveu o
   problema — o bilhete com recortes entre as seções, a ordem dados → pagamento
   → resumo, o rodapé jurídico — e inventar um segundo desenho para o mesmo
   fluxo criaria duas coisas para manter e nenhuma vantagem.

   UMA DIFERENÇA DELIBERADA: só Pix.
   A Naut oferece cartão e PayPal; aqui o método é um só. Ebook de R$ 13,89 a
   R$ 26,71 não comporta a taxa de cartão nem faz sentido parcelar, e Pix cai
   na hora — o comprador recebe o arquivo em seguida, sem antifraude no meio.
   Com um método só, o carrossel de métodos da Naut vira um bloco fixo.

   As regras abaixo vieram do checkout-builder.html da Naut e foram filtradas:
   saiu tudo de cartão, parcelamento, PayPal, banner, cronômetro e avaliações.
   =========================================================================== */

.co.co-mobile{max-width:390px}
.co-mobile .co-grid2{grid-template-columns:1fr}
.co{--acc:#111827;width:100%;max-width:640px;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#171717;-webkit-font-smoothing:antialiased}
.co *{font-family:inherit}
.co-ticket{background:#fff;border:1px solid #ececec;border-radius:18px;box-shadow:0 1px 3px rgba(0,0,0,.05);position:relative;margin-bottom:16px}
.co-card{background:none;border:none;border-radius:0;box-shadow:none;margin:0;padding:22px;position:relative}
.co-prod{display:flex;align-items:center;gap:14px}
.co-card + .co-card{border-top:2px dashed #e2e3dd}
.co-card + .co-card::before,.co-card + .co-card::after{content:'';position:absolute;top:-11px;width:11px;height:22px;background:#eceeea;z-index:2}
.co-card + .co-card::before{left:-1px;border-radius:0 11px 11px 0}
.co-card + .co-card::after{right:-1px;border-radius:11px 0 0 11px}
.co-dark .co-ticket{background:#0e0e0e;border-color:#3a3a3a;box-shadow:none}
.co-dark .co-card + .co-card{border-color:#3a3a3a}
.co-dark .co-card + .co-card::before{background:#000;border:1.5px solid #3a3a3a;border-left:none}
.co-dark .co-card + .co-card::after{background:#000;border:1.5px solid #3a3a3a;border-right:none}
.co-logo{width:52px;height:52px;border-radius:13px;background:#e9e9e7 center/cover no-repeat;flex:0 0 auto;border:1px solid #ececec}
.co-pinfo{min-width:0}
.co-pname{display:flex;align-items:center;gap:5px;font-size:15.5px;font-weight:700;color:#171717}
.co-verified{width:16px;height:16px;flex:0 0 auto;display:none}
.co-psub{font-size:13px;color:#8a8a8a;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.co-h{font-size:15px;font-weight:700;color:#171717}
.co-hsub{font-size:12.5px;color:#8a8a8a;margin:2px 0 16px}
.co-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-field{min-width:0}
.co-flbl{font-size:12.5px;font-weight:600;color:#3d3d3d;margin-bottom:6px;display:block}
.co-inp{width:100%;border:1px solid #e6e6e6;border-radius:10px;background:#f7f7f8;padding:11px 12px;font-size:13.5px;color:#171717;box-sizing:border-box}
.co-inp.ph{color:#a9a9a9}
.co-phone{display:flex;gap:8px}
/* Bandeira e "+55" fixos, sem seta: não há escolha de país a fazer, e um
   seletor que não abre nada é pior que nenhum. O "+55" está aqui para a pessoa
   ver que o código do país já foi dado e não precisa digitá-lo de novo. */
.co-flag{display:flex;align-items:center;gap:6px;border:1px solid #e6e6e6;border-radius:10px;
  background:#f7f7f8;padding:0 11px;flex:0 0 auto}
.co-ddi{font-size:13.5px;font-weight:600;color:#3d3d3d;letter-spacing:.2px}
.co-dark .co-ddi{color:#d6d6d6}
.co-dark .co-flag{background:#191919;border-color:#333}
.co-flag svg{width:20px;height:14px;border-radius:2px}
.co-flag img{width:24px;height:24px;border-radius:50%;object-fit:cover;display:block}
.co-flag i{width:8px;height:8px;border-right:2px solid #9a9a9a;border-bottom:2px solid #9a9a9a;transform:rotate(45deg);margin-left:2px}
.co-methods-wrap{position:relative;margin-top:16px}
.co-methods{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 0 6px;scroll-behavior:smooth}
.co-methods::-webkit-scrollbar{height:6px}
.co-methods::-webkit-scrollbar-thumb{background:#dcdfd8;border-radius:8px}
.co-methods::-webkit-scrollbar-track{background:transparent}
.co-method{flex:0 0 120px;scroll-snap-align:start;border:1.5px solid #e6e6e6;border-radius:12px;padding:8px 10px;cursor:pointer;background:#fff;transition:.14s;display:flex;align-items:center;justify-content:center;min-height:78px}
.co-method.on{border-color:#a8adb3;background:#fff}
.co-method[data-pm="apple"]{background:#000;border-color:#000}
.co-method[data-pm="pp"]{background:#ffc439;border-color:#ffc439}
.co-method[data-pm="apple"].on,.co-method[data-pm="pp"].on{box-shadow:0 0 0 2px #a8adb3}
.co-method[data-pm="apple"] .co-mico img{max-height:48px;max-width:150px}
.co-method[data-pm="google"] .co-mico img{max-height:26px;max-width:80px}
.co-method[data-pm="pp"] .co-mico img{max-height:60px;max-width:132px}
.co-method[data-pm="boleto"] .co-mico img{max-height:38px;max-width:52px}
.co-method[data-pm="card"] .co-mico img{max-height:34px;max-width:46px}
.co-method[data-pm="pix"] .co-mico img{max-height:31px;max-width:92px;object-fit:contain}
.co-pixbox{border:1px solid #ececec;border-radius:12px;background:#fafafa;padding:16px;margin-top:16px}
.co-pixttl{font-size:13px;font-weight:700;color:#171717;margin-bottom:12px}
.co-pixstep{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:#3d3d3d;margin-bottom:8px}
.co-pixn{width:20px;height:20px;border-radius:50%;background:#141518;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.co-pixnote{font-size:11.5px;color:#9a9a9a;margin-top:6px;line-height:1.4}
.co-inplock,.co-select{display:flex;align-items:center;justify-content:space-between;gap:8px}
.co-inplock svg,.co-select svg{width:15px;height:15px;stroke:#9a9a9a;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.co-safe-logo{height:15px;width:auto;opacity:.62;vertical-align:middle;position:relative;top:-1px}
.co-dark .co-safe-logo{filter:brightness(0) invert(1);opacity:.7}
.co-sumrow{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;color:#3d3d3d;padding:2px 0}
.co-sumdiv{border-top:1px solid #ececec;margin:14px 0}
.co-total{display:flex;align-items:center;justify-content:space-between}
.co-total span{font-size:16px;font-weight:600;color:#171717}
.co-total b{font-size:20px;font-weight:600;color:#171717}
.co-dark .co-parcnote{color:#8a8a8a}
.co-buy{width:100%;border:none;border-radius:8px;background:#1f2733;color:#fff;font-size:14px;font-weight:500;padding:14px;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:default;font-family:inherit}
.co-buy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2}
.co-safe{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;color:#9a9a9a;margin-top:12px}
.co-safe svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.co-foot{text-align:center;margin-top:18px;padding-top:16px;border-top:1px solid #ececec}
.co-dark .co-foot{border-color:#242424}
.co-foot .co-sold{font-size:12px;color:#8a8a8a}
.co-foot .co-terms{font-size:11.5px;color:#a2a2a2;line-height:1.6;margin-top:10px;text-align:center}
.co-foot .co-terms b{color:#6a6a6a}
.co-foot .co-ssl{font-size:11px;color:#a9a9a9;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px}
.co-foot .co-ssl svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.co-dark{background:#000;border-radius:16px;color:#f2f2f2;box-shadow:0 0 0 12px #000}
.co-dark .co-card{background:none}
.co-dark .co-pname,.co-dark .co-h,.co-dark .co-total span,.co-dark .co-total b{color:#fff}
.co-dark .co-psub,.co-dark .co-hsub,.co-dark .co-flbl,.co-dark .co-sumrow,.co-dark .co-safe,.co-dark .co-foot .co-sold,.co-dark .co-savecard{color:#b0b0b0}
.co-dark .co-inp{background:#191919;border-color:#333;color:#fff}
.co-dark .co-inp.ph,.co-dark .co-inp .ph{color:#8a8a8a}
.co-dark .co-flag{background:#191919;border-color:#333}
.co-dark .co-logo{background-color:#191919;border-color:#333}
.co-dark .co-sumdiv{border-color:#242424}
.co-dark .co-rev{border-color:#242424}
.co-dark .co-revbody p{color:#b0b0b0}
.co-dark .co-revtop b{color:#fff}
.co-dark .co-revav{background-color:#191919;border-color:#333}
.co-dark .co-pixbox,.co-dark .co-redir{background:#141414;border-color:#2a2a2a}
.co-dark .co-pixttl,.co-dark .co-redir b{color:#fff}
.co-dark .co-pixstep,.co-dark .co-redir p{color:#c8c8c8}
.co-dark .co-pixnote{color:#8a8a8a}
.co-dark .co-method:not([data-pm="apple"]):not([data-pm="pp"]){background:#191919;border-color:#333}
.co-dark .co-method:not([data-pm="apple"]):not([data-pm="pp"]).on{background:#242424;border-color:#5a5a5a;box-shadow:none}
.co-dark .co-method[data-pm="card"] .co-mico img{filter:brightness(0) invert(1)}
.co-dark .co-method[data-pm="pix"] .co-mico img,.co-dark .co-method[data-pm="google"] .co-mico img{filter:brightness(0) invert(1)}
.co-dark .co-method[data-pm="boleto"] .co-mico img{filter:invert(1)}

/* ------------------------------------------------ ajustes próprios da Soan */

/* Com um método só, o bloco não rola nem tem setas: ocupa a largura e fica. */
/* Selecionado é a BORDA, não um distintivo. Com método único não há escolha a
   fazer, então um botão de confirmação preto ao lado sugeria uma ação que não
   existe. A borda mais escura basta para dizer "é este". */
.co-metodo-unico{
  display:flex; align-items:center; gap:12px; margin-top:16px;
  border:1.5px solid #b9bcb4; border-radius:12px;
  padding:14px 16px; background:#fff;
  box-shadow:0 0 0 3px rgba(20,21,24,.045);
}
.co-dark .co-metodo-unico{border-color:#5a5a5a; box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.co-dark .co-metodo-unico{background:#141414; border-color:#3a3a3a}
.co-metodo-unico .co-pixlogo{
  width:52px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:7px; background:#f2f4f3; padding:0 6px;
}
.co-dark .co-metodo-unico .co-pixlogo{background:#1e1e1e}
.co-metodo-unico .co-pixlogo img{width:100%; height:auto; display:block}
.co-metodo-unico b{display:block; font-size:14px; font-weight:700; color:#171717}
.co-metodo-unico span{display:block; font-size:12.5px; color:#8a8a8a; margin-top:1px}
.co-dark .co-metodo-unico b{color:#fff}
.co-dark .co-metodo-unico span{color:#9a9a9a}


/* O botão herda a cor de acento do ebook, como o resto do produto. */
.co-buy{background:var(--co-acc,#1f2733) !important; color:var(--co-acc-tinta,#fff) !important;
  border-radius:10px !important; font-weight:700 !important; font-size:15px !important}
.co-buy:hover{filter:brightness(1.07)}

/* A capa do ebook no lugar do quadrado de logo. Mantém a proporção 1:1,5 do
   livro em vez de espremer num quadrado — capa de ebook achatada denuncia
   montagem, e é justamente o momento em que o comprador está decidindo. */
.co-capa{
  width:48px; flex:0 0 auto; border-radius:6px; overflow:hidden;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
}
.co-dark .co-capa{box-shadow:0 4px 12px -4px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08)}
.co-capa .capa{border-radius:0}

/* A marca no selo de segurança, no lugar do nome escrito. Herda o tamanho do
   texto ao redor por `em`, então acompanha o corpo do rodapé sem número mágico. */
.co-safe{display:flex; align-items:center; justify-content:center; gap:.45em}
.co-marca{display:inline-flex; align-items:center; gap:.4em; color:#12181b}
/* Só o nome, sem a esfera: nesse corpo ela virava um borrão, e o selo de
   segurança pede leitura imediata, não ornamento. */
.co-marca .nome{font-family:"Jost","Inter",sans-serif; font-weight:300;
  font-size:16px; letter-spacing:.005em; line-height:1}
.co-marca .nome i{font-style:normal; font-weight:400; color:#2f6b78}
.co-dark .co-marca{color:#f2f2f2}
.co-dark .co-marca .nome i{color:#7fc4d0}

/* Os números dos passos do Pix na cor do botão de compra: são o mesmo caminho —
   "clique em finalizar" leva a esses três passos — e a cor amarra os dois. */
.co-pixn{background:var(--co-acc,#141518) !important; color:var(--co-acc-tinta,#fff) !important}