/* assets/css/paginas.css */
/*
 * Paginas simples do site: criar convite em passo a passo (invite/create.php), os exemplos para se inspirar
 * (exemplos.php), a politica de privacidade e o suporte (privacidade.php, suporte.php). Tokens --oc-* de main.css.
 */

/* ---- criar convite: o essencial primeiro ---- */
.oc-create-ideia {
    display: flex;
    align-items: center;
    gap: .875rem;
    max-width: 800px;
    margin-bottom: 1.25rem;
    padding: .875rem 1.125rem;
    border: 1px dashed var(--oc-gold);
    border-radius: var(--oc-radius);
    background: var(--oc-white);
    font-size: .9375rem;
    color: var(--oc-ink-soft);
}
.oc-create-ideia p { margin: 0; }
.oc-create-ideia__ico {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--oc-cream);
    color: var(--oc-gold-dark);
    font-size: 1.125rem;
    line-height: 2.25rem;
    text-align: center;
}
.oc-create-ideia a { font-weight: 600; color: var(--oc-gold-dark); }
.oc-create-form { max-width: 800px; }
.oc-create-mais {
    margin: .5rem 0 1.25rem;
    border-top: 1px solid var(--oc-border);
}
.oc-create-mais > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    font-weight: 600;
    color: var(--oc-ink-soft);
    cursor: pointer;
    list-style: none;
}
.oc-create-mais > summary::-webkit-details-marker { display: none; }
.oc-create-mais > summary::after {
    content: "+";
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--oc-border);
    border-radius: 50%;
    line-height: 1.625rem;
    text-align: center;
    color: var(--oc-gold-dark);
}
.oc-create-mais[open] > summary::after { content: "\2212"; }
.oc-create-mais__sub {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--oc-muted);
}
.oc-create-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--oc-border);
}
@media (max-width: 560px) {
    .oc-create-acoes { flex-direction: column-reverse; }
    .oc-create-acoes .oc-btn { width: 100%; }
}

/* ---- exemplos para se inspirar ---- */
.oc-exemplos__filtro {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}
.oc-exemplos__chip {
    padding: .5rem 1rem;
    border: 1px solid var(--oc-border);
    border-radius: 99px;
    background: var(--oc-white);
    font-size: .875rem;
    font-weight: 600;
    color: var(--oc-ink-soft);
    text-decoration: none;
}
.oc-exemplos__chip:hover { border-color: var(--oc-gold); }
.oc-exemplos__chip.is-on { border-color: var(--oc-ink); background: var(--oc-ink); color: var(--oc-white); }
.oc-exemplos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.oc-exemplo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-lg);
    background: var(--oc-white);
    box-shadow: var(--oc-shadow-sm);
}
.oc-exemplo__capa {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--oc-cream-dark);
}
.oc-exemplo__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.oc-exemplo__capa:hover img { transform: scale(1.03); }
.oc-exemplo__tag {
    position: absolute;
    top: .625rem;
    left: .625rem;
    padding: .25rem .625rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .92);
    font-size: .75rem;
    font-weight: 600;
    color: var(--oc-ink-soft);
}
.oc-exemplo__txt { flex: 1; padding: 1rem 1.125rem .5rem; }
.oc-exemplo__tipo {
    margin: 0 0 .25rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oc-gold-dark);
}
.oc-exemplo__titulo {
    margin: 0 0 .5rem;
    font-family: var(--oc-font-display);
    font-size: 1.125rem;
    line-height: 1.3;
    color: var(--oc-ink);
}
.oc-exemplo__frase {
    margin: 0;
    font-size: .875rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--oc-muted);
}
.oc-exemplo__acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .75rem 1.125rem 1.125rem;
}
@media (max-width: 480px) {
    .oc-exemplos { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .oc-exemplo__txt { padding: .75rem .75rem .25rem; }
    .oc-exemplo__titulo { font-size: 1rem; }
    .oc-exemplo__frase { display: none; }
    .oc-exemplo__acoes { grid-template-columns: 1fr; padding: .5rem .75rem .75rem; }
    .oc-exemplo__acoes .oc-btn { padding-left: .5rem; padding-right: .5rem; }
}

/* ---- privacidade e suporte ---- */
.oc-legal { max-width: 800px; line-height: 1.65; color: var(--oc-ink-soft); }
.oc-legal p { margin: 0 0 1.125rem; }
.oc-legal p > em:first-child {
    display: block;
    margin-bottom: .25rem;
    font-family: var(--oc-font-display);
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 700;
    color: var(--oc-ink);
}
.oc-legal__contato { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 1rem; }
.oc-legal__links { margin: 0; font-size: .875rem; }