/* Páginas /ciao (Ciao para negócios) e /ciao-isp (Ciao ISP). Só tokens de tokens.css e variáveis de site.css. */

.ciao-hero__acoes {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.ciao-recursos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--castelapi-line);
    border: 1px solid var(--castelapi-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.ciao-recursos li {
    background: var(--castelapi-bone);
    padding: 1.5rem 1.75rem;
}
.ciao-recursos h3 { font-size: 1.0625rem; }
.ciao-recursos p { margin-top: 0.5rem; font-size: 0.9375rem; }
@media (max-width: 640px) {
    .ciao-recursos { grid-template-columns: 1fr; }
    .ciao-recursos li { padding: 1.25rem; }
}

.ciao-precos {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) { .ciao-precos { grid-template-columns: 1fr; } }

.ciao-plano {
    background: var(--castelapi-graphite);
    color: var(--castelapi-bone);
    border-radius: var(--radius);
    padding: 1.75rem;
}
.ciao-plano__nome {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    color: var(--castelapi-honey);
}
.ciao-plano__valor {
    margin-top: 0.5rem;
    font-family: var(--castelapi-font-display), sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: var(--castelapi-bone);
}
.ciao-plano__valor span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--castelapi-graphite-soft);
}
.ciao-plano__itens {
    margin: 1.25rem 0 0;
    padding: 1.25rem 0 0 1.25rem;
    border-top: 1px solid var(--castelapi-graphite-soft);
    display: grid;
    gap: 0.5rem;
}
.ciao-plano__itens li::marker { color: var(--castelapi-honey); }

.ciao-adicionais h3,
.ciao-uso h3 { font-size: 1.25rem; margin-bottom: 1rem; }

.ciao-uso { margin-top: 3rem; max-width: 760px; }

.ciao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--castelapi-bone);
}
.ciao-tabela th,
.ciao-tabela td {
    border: 1px solid var(--castelapi-line);
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
}
.ciao-tabela th { font-weight: 400; }
.ciao-tabela td { white-space: nowrap; font-weight: 600; }
.ciao-tabela tfoot th,
.ciao-tabela tfoot td {
    font-weight: 600;
    background: var(--castelapi-bone-dim);
}
.ciao-tabela--conta td { text-align: right; }

.ciao-conta__qtd {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--castelapi-honey-text);
}

.ciao-nota {
    margin-top: 1rem;
    font-size: 0.9375rem;
    max-width: 68ch;
}

.ciao-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 860px) { .ciao-calc { grid-template-columns: 1fr; } }

.ciao-calc__campos { display: grid; gap: 1.25rem; }
.ciao-calc__resultado .btn { margin-top: 1.25rem; }

.ciao-calc__plano { margin-bottom: 1rem; font-size: 1.0625rem; }

.ciao-versao { scroll-margin-top: 1rem; }
.ciao-versao__acao { margin-top: 1.25rem; }

.ciao-planos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1080px) { .ciao-planos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ciao-planos { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ciao-uso .ciao-tabela td { white-space: normal; } }
.ciao-planos .ciao-plano { padding: 1.5rem; }
.ciao-planos .ciao-plano__valor { font-size: clamp(1.625rem, 2.2vw, 2rem); white-space: nowrap; }
.ciao-planos .ciao-plano__valor span { display: block; white-space: normal; }

/* Linha que leva à outra versão do Ciao. */
.ciao-outro { padding-block: 2.5rem; }
.ciao-outro__linha { font-size: 1.0625rem; }
.ciao-outro__linha a { font-weight: 600; }

/* Em /ciao a lista tem 7 itens: o último ocupa a linha inteira em vez de deixar um buraco. */
.ciao-recursos li:last-child:nth-child(odd) { grid-column: 1 / -1; }