/* divulgue.css - pagina "Divulgue sua participacao" (campanha EU VOU!) */

.divulgue {
    --divulgue-pink: var(--pink-20);
    --divulgue-line: var(--purple-30);
    --divulgue-panel: var(--purple-20);
    background-color: var(--purple-10);
    padding: var(--space-140) var(--space-24);
    font-family: 'Proxima Nova', sans-serif;
}

.divulgue__title {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto 10px;
    padding-top: 0.2em;
    text-align: center;
    text-transform: uppercase;
}

.divulgue__title-pink,
.divulgue__title-cream {
    line-height: 1.05;
}

.divulgue__title-pink {
    color: var(--divulgue-pink);
}

.divulgue__title-cream {
    color: var(--accent-cream);
}

.divulgue__intro {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}

.divulgue__intro p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--white);
}

/* ---------------------------------------------------------------- dropzone */

.divulgue__dropzone {
    max-width: 620px;
    margin: 0 auto;
    padding: 48px 24px;
    border: 1px solid var(--divulgue-line);
    border-radius: var(--space-8);
    background: var(--divulgue-panel);
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.divulgue__dropzone:hover,
.divulgue__dropzone:focus,
.divulgue__dropzone.is-dragging {
    border-color: var(--divulgue-pink);
    background: var(--purple-30);
    outline: none;
}

.divulgue__dropzone-title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    color: var(--accent-cream);
    margin-bottom: 6px;
}

.divulgue__dropzone-hint {
    display: block;
    font-size: 14px;
    color: var(--purple-40);
}

.divulgue__file { display: none; }

/* Estados da tela: escolha -> camera -> edicao */
.divulgue:not(.is-ready) .divulgue__chooser { opacity: .55; pointer-events: none; }

.divulgue__editor,
.divulgue__cam { display: none; }

.divulgue.has-photo .divulgue__editor { display: block; }
.divulgue.has-photo .divulgue__chooser { display: none; }

/* is-camera vem depois de propositalmente: mesma especificidade, ganha do has-photo */
.divulgue.is-camera .divulgue__cam { display: block; }
.divulgue.is-camera .divulgue__chooser,
.divulgue.is-camera .divulgue__editor { display: none; }

/* ---------------------------------------------------------------- chooser */

.divulgue__chooser {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}

.divulgue__or {
    position: relative;
    margin: 18px 0;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-40);
}

.divulgue__or::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid var(--divulgue-line);
}

.divulgue__or span {
    position: relative;
    padding: 0 12px;
    background: var(--purple-10);
}

.divulgue__cam-open { width: 100%; }

/* ----------------------------------------------------------------- camera */

.divulgue__cam {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.divulgue__video {
    display: block;
    width: 100%;
    max-height: 60vh;
    border-radius: var(--space-8);
    background: var(--purple-20);
    border: 1px solid var(--divulgue-line);
    object-fit: cover;
}

/* espelha so o preview frontal; a foto capturada sai sem espelho */
.divulgue__video.is-mirrored { transform: scaleX(-1); }

.divulgue__cam-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* ------------------------------------------------------------------ editor */

.divulgue__editor {
    margin-top: 8px;
}

.divulgue__stage {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: center;
}

.divulgue__preview-wrap {
    flex: 0 1 380px;
    max-width: 380px;
}

.divulgue__preview {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--space-8);
    border: 1px solid var(--divulgue-line);
    box-shadow: 0 10px 34px rgba(0,0,0,.4);
    cursor: grab;
    touch-action: none;
    background: #fff;
}

.divulgue__preview.is-dragging { cursor: grabbing; }

.divulgue__hint {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--purple-40);
    text-align: center;
}

.divulgue__controls {
    flex: 1 1 320px;
    max-width: 420px;
    padding: var(--space-24);
    border: 1px solid var(--divulgue-line);
    border-radius: var(--space-8);
    background: var(--divulgue-panel);
}

.divulgue__section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--purple-40);
    margin: 0 0 12px;
}

/* --------------------------------------------------------------- miniaturas */

.divulgue__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 28px;
}

.divulgue__thumb {
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 9px;
    background: var(--purple-10);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.divulgue__thumb:hover { background: var(--purple-30); }
.divulgue__thumb.is-active {
    border-color: var(--divulgue-pink);
    background: var(--purple-30);
}

.divulgue__thumb-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.divulgue__thumb-label {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--purple-40);
    text-align: center;
}

/* ------------------------------------------------------------------- zoom */

.divulgue__field { margin-bottom: 26px; }

.divulgue__zoom {
    width: 100%;
    accent-color: var(--divulgue-pink);
}

/* --------------------------------------------------------------- downloads */

.divulgue__downloads {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.divulgue__btn {
    flex: 1 1 auto;
    min-width: 132px;
    padding: 12px 18px;
    border: 0;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s ease, transform .12s ease;
}

.divulgue__btn:hover { opacity: .88; }
.divulgue__btn:active { transform: translateY(1px); }

.divulgue__btn--ghost {
    background: var(--purple-10);
    color: var(--accent-cream);
    border: 1px solid var(--divulgue-line);
}

.divulgue__btn--primary {
    flex-basis: 100%;
    background: var(--divulgue-pink);
    color: #fff;
}

.divulgue__btn--link {
    flex-basis: 100%;
    background: none;
    color: var(--purple-40);
    font-weight: 400;
    text-decoration: underline;
    min-width: 0;
    padding: 6px;
}

/* ----------------------------------------------------------------- status */

.divulgue__status {
    min-height: 22px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--white);
    text-align: center;
}

.divulgue__status.is-error { color: #ff5c85; }

.divulgue__privacy {
    max-width: 620px;
    margin: 34px auto 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--purple-40);
    text-align: center;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 998px) {
    .divulgue { padding: var(--space-80) var(--space-16); }
}

@media (max-width: 767px) {
    .divulgue__stage { gap: 24px; }
    .divulgue__preview-wrap { flex-basis: 100%; max-width: 320px; }
    .divulgue__controls { flex-basis: 100%; max-width: 100%; padding: var(--space-16); }
    .divulgue__dropzone { padding: 36px 18px; }
}