/* assets/css/site-info.css
   Blocos que explicam o site: passos, listas, modelos, preco e perguntas (pagina inicial e painel),
   frase "o que fazer agora" na lista de convites e o estado "aguardando o pagamento" da tela de pagamento; os nomes no
   topo da pagina inicial e o botao fixo no celular (index.php, assets/js/inicio.js).
   Carregado por oc_site_head() (includes/site_text.php). */

.oc-section-divider[id] { scroll-margin-top: 6rem; }

/* ---- passos numerados ---- */
.oc-how { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 0 1rem; padding: 0; }
.oc-how__step { display: flex; gap: 1rem; align-items: flex-start; background: var(--oc-white); border: 1px solid var(--oc-border); border-radius: var(--oc-radius-lg); padding: 1.5rem; box-shadow: var(--oc-shadow-sm); }
.oc-how__num { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--oc-ink); color: var(--oc-gold-light); font-family: var(--oc-font-display); font-size: 1.125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.oc-how__title { font-family: var(--oc-font-display); font-size: 1.125rem; font-weight: 600; color: var(--oc-ink); letter-spacing: -.01em; margin-bottom: .375rem; }
.oc-how__text { font-size: .9rem; color: var(--oc-ink-soft); line-height: 1.65; }
.oc-how__note { text-align: center; font-size: .9375rem; color: var(--oc-muted); margin: 0 0 3rem; }
.oc-how em, .oc-info-list em, .oc-price-box em, .oc-inv-hint em, .oc-note em, .oc-pay-steps em { font-style: normal; font-weight: 700; color: var(--oc-ink); }

/* ---- lista de itens ---- */
.oc-info-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem 1.25rem; margin: 0 0 3rem; padding: 0; }
.oc-info-list__item { display: flex; gap: .75rem; align-items: flex-start; background: var(--oc-white); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); padding: 1rem 1.125rem; }
.oc-info-list__mark { flex: none; width: .625rem; height: .625rem; margin-top: .4rem; border-radius: 50%; background: var(--oc-gold); }
.oc-info-list__title { font-size: .9375rem; font-weight: 600; color: var(--oc-ink); line-height: 1.4; }
.oc-info-list__text { font-size: .8375rem; color: var(--oc-muted); line-height: 1.6; margin-top: .2rem; }

/* ---- modelos ---- */
.oc-models { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1rem; }
.oc-models__card { display: flex; gap: .875rem; align-items: stretch; background: var(--oc-white); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); padding: .625rem; transition: border-color .2s, box-shadow .2s; }
.oc-models__card:hover { border-color: var(--oc-gold-light); box-shadow: var(--oc-shadow-sm); }
.oc-models__thumb { flex: none; width: 4.5rem; aspect-ratio: 4 / 5; align-self: flex-start; border-radius: .5rem; background: var(--oc-cream-dark); border: 1px solid var(--oc-border); overflow: hidden; }
.oc-models__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.oc-models__body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: .125rem .25rem .125rem 0; }
.oc-models__swatches { display: flex; gap: .3125rem; margin-top: auto; padding-top: .5rem; }
.oc-models__swatch { width: .875rem; height: .875rem; border-radius: 50%; border: 2px solid; display: inline-block; }
.oc-models__swatch i { display: none; }
.oc-models__name { font-family: var(--oc-font-display); font-size: 1rem; font-weight: 600; color: var(--oc-ink); }
.oc-models__desc { font-size: .78rem; color: var(--oc-muted); line-height: 1.45; margin-top: .125rem; }
.oc-models__more { text-align: center; margin: -1.75rem 0 3rem; }

/* ---- o app ---- */
.oc-app-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; max-width: 1000px; margin: 0 auto 3rem; background: var(--oc-white); border: 1px solid var(--oc-gold-light); border-radius: var(--oc-radius-lg); padding: 2rem; box-shadow: var(--oc-shadow-sm); }
.oc-app-box__icon { display: block; width: 4rem; height: 4rem; border-radius: 1rem; box-shadow: var(--oc-shadow); margin-bottom: 1rem; }
.oc-app-box__text { font-size: .9375rem; color: var(--oc-ink-soft); line-height: 1.7; }
.oc-app-box__text p + p { margin-top: .5rem; }
.oc-app-box__text em, .oc-app-box__lista em { font-style: normal; font-weight: 700; color: var(--oc-ink); }
.oc-app-box__lojas { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
.oc-loja { display: inline-flex; align-items: center; gap: .625rem; min-width: 10.5rem; padding: .5rem 1rem .5rem .75rem; border-radius: .75rem; background: var(--oc-ink); color: var(--oc-white); text-decoration: none; line-height: 1.15; }
.oc-loja:hover { background: var(--oc-ink-soft); color: var(--oc-white); }
.oc-loja__txt { display: flex; flex-direction: column; }
.oc-loja__txt small { font-size: .6875rem; opacity: .8; }
.oc-loja__txt b { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.oc-loja--breve { background: var(--oc-cream-dark); color: var(--oc-ink-soft); }
.oc-app-box__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.oc-app-box__lista li { display: flex; gap: .75rem; align-items: flex-start; }
.oc-app-box__check { flex: none; position: relative; width: 1.375rem; height: 1.375rem; margin-top: .05rem; border-radius: 50%; background: var(--oc-gold); }
.oc-app-box__check::after { content: ""; position: absolute; left: .47rem; top: .25rem; width: .3rem; height: .6rem; border: solid var(--oc-white); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.oc-app-box__titulo { font-size: .9375rem; font-weight: 600; color: var(--oc-ink); line-height: 1.4; }
.oc-app-box__item { font-size: .8375rem; color: var(--oc-muted); line-height: 1.55; margin-top: .125rem; }

/* ---- preco ---- */
.oc-price-box { max-width: 640px; margin: 0 auto 3rem; text-align: center; background: var(--oc-white); border: 1px solid var(--oc-gold-light); border-radius: var(--oc-radius-lg); padding: 2rem 1.5rem; box-shadow: var(--oc-shadow-sm); }
.oc-price-box__value { font-family: var(--oc-font-display); font-size: 2rem; font-weight: 700; color: var(--oc-ink); letter-spacing: -.02em; }
.oc-price-box__text { font-size: .9375rem; color: var(--oc-ink-soft); line-height: 1.7; margin-top: .625rem; }
.oc-price-box__text p + p { margin-top: .5rem; }

/* ---- perguntas ---- */
.oc-faq { max-width: 800px; margin: 0 auto 3rem; display: flex; flex-direction: column; gap: .625rem; }
.oc-faq__item { background: var(--oc-white); border: 1px solid var(--oc-border); border-radius: var(--oc-radius); padding: 0 1.125rem; }
.oc-faq__item summary { cursor: pointer; list-style: none; padding: 1rem 1.75rem 1rem 0; font-weight: 600; color: var(--oc-ink); font-size: .9375rem; position: relative; }
.oc-faq__item summary::-webkit-details-marker { display: none; }
.oc-faq__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 1.25rem; font-weight: 400; color: var(--oc-gold-dark); }
.oc-faq__item[open] summary::after { content: "\2212"; }
.oc-faq__item p { font-size: .9rem; color: var(--oc-ink-soft); line-height: 1.7; padding: 0 0 1rem; }

/* ---- textos curtos nas telas do cliente ---- */
.oc-note { background: var(--oc-white); border: 1px solid var(--oc-border); border-left: 3px solid var(--oc-gold); border-radius: var(--oc-radius); padding: .875rem 1.125rem; margin: 0 0 1.25rem; font-size: .9rem; color: var(--oc-ink-soft); line-height: 1.65; }
.oc-note p + p { margin-top: .5rem; }
.oc-inv-hint { font-size: .8125rem; color: var(--oc-ink-soft); line-height: 1.5; margin-top: .375rem; }
.oc-help { margin-top: 1rem; border-top: 1px solid var(--oc-border); padding-top: .875rem; }
.oc-help summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--oc-gold-dark); }
.oc-help dl { margin-top: .75rem; display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1rem; font-size: .875rem; }
.oc-help dt { font-weight: 600; color: var(--oc-ink); }
.oc-help dd { color: var(--oc-ink-soft); line-height: 1.55; margin: 0; }
.oc-pay-steps { font-size: .9rem; color: var(--oc-ink-soft); line-height: 1.85; padding-left: 1.25rem; }
.oc-pay-after { font-size: .8375rem; color: var(--oc-muted); line-height: 1.6; margin-top: 1rem; }

/* ---- pagamento: aguardando o PIX ---- */
.oc-pix-wait { display: flex; gap: .875rem; align-items: center; border: 1px solid #FDE68A; background: #FFFBEB; border-radius: var(--oc-radius); padding: .875rem 1rem; margin: 0 0 .25rem; }
.oc-pix-wait__icon { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 3px solid #FDE68A; border-top-color: #B45309; animation: oc-pix-spin .9s linear infinite; position: relative; }
.oc-pix-wait__title { font-weight: 700; font-size: .9375rem; color: #92400E; }
.oc-pix-wait__text { font-size: .8125rem; color: #92400E; line-height: 1.5; margin-top: .125rem; }
.oc-pix-wait__last { font-size: .75rem; color: #B45309; margin-top: .25rem; opacity: .85; }
.oc-pix-wait--paid { border-color: #BBF7D0; background: #F0FDF4; }
.oc-pix-wait--paid .oc-pix-wait__icon { animation: none; border-color: #16A34A; background: #16A34A; }
.oc-pix-wait--paid .oc-pix-wait__icon::after { content: ""; position: absolute; left: .5rem; top: .2rem; width: .375rem; height: .75rem; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.oc-pix-wait--paid .oc-pix-wait__title, .oc-pix-wait--paid .oc-pix-wait__text { color: #166534; }
.oc-pix-wait--paid .oc-pix-wait__last, .oc-pix-wait--idle .oc-pix-wait__last { display: none; }
.oc-pix-wait--fail .oc-pix-wait__icon { animation-duration: 2.4s; }
.oc-pix-wait--idle { border-color: var(--oc-border); background: var(--oc-cream); }
.oc-pix-wait--idle .oc-pix-wait__icon { animation: none; border-color: var(--oc-border); }
.oc-pix-wait--idle .oc-pix-wait__title, .oc-pix-wait--idle .oc-pix-wait__text { color: var(--oc-ink-soft); }
@keyframes oc-pix-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oc-pix-wait__icon { animation-duration: 3s; } }

@media (max-width: 1024px) {
    .oc-models { grid-template-columns: repeat(3, 1fr); }
    .oc-info-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .oc-how, .oc-info-list { grid-template-columns: 1fr; }
    .oc-models { grid-template-columns: repeat(2, 1fr); }
    .oc-app-box { grid-template-columns: 1fr; padding: 1.5rem 1.25rem; }
    .oc-help dl { grid-template-columns: 1fr; gap: .125rem; }
    .oc-help dd { margin-bottom: .5rem; }
}
@media (max-width: 480px) {
    .oc-models { grid-template-columns: 1fr; gap: .5rem; }
    .oc-models__thumb { width: 4rem; }
    .oc-loja { flex: 1 1 9rem; min-width: 0; gap: .5rem; padding: .5rem .75rem .5rem .625rem; }
    .oc-loja__txt b { font-size: 1rem; }
}
@media (hover: none) { .oc-models__card:hover { border-color: var(--oc-border); box-shadow: none; } }

/* ---- os nomes no topo da pagina inicial (index.php) ---- */
.oc-hero-nomes { max-width: 34rem; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: .75rem; }
.oc-hero-nomes__campos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.oc-hero-nomes .oc-input { font-size: 1.0625rem; padding: .875rem 1.125rem; background: var(--oc-white); }
.oc-hero-nomes__dica { margin: 0; font-size: .9375rem; color: var(--oc-muted); }
.oc-hero-nomes__botao { justify-content: center; }
.oc-hero-nomes__linha { margin: 0; font-size: .875rem; color: var(--oc-muted); }
.oc-hero-nomes__conta { font-size: .875rem; font-weight: 600; color: var(--oc-gold-dark); }
.oc-home-fixo { display: none; }
@media (max-width: 720px) {
    .oc-hero-nomes__campos { grid-template-columns: 1fr; }
    .oc-home-fixo:not([hidden]) {
        position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 120;
        display: flex; justify-content: center; box-shadow: 0 .5rem 1.5rem rgba(26, 18, 9, .25);
    }
}