.qs-page { --qs-primary: #0C2036; --qs-secondary: #1E3A5F; --qs-support: #4D7FB8; --qs-accent: #D4A72C; --qs-bg: #F4F1E8; --qs-white: #FFFFFF; --qs-serif: 'Playfair Display', serif; --qs-sans: 'Inter', sans-serif; background-color: var(--qs-bg); overflow-x: hidden; } .qs-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .qs-padding { padding: 100px 0; } /* Hero Section */ .qs-hero { background: linear-gradient(135deg, var(--qs-primary) 0%, var(--qs-secondary) 100%); padding: 140px 0 100px; color: var(--qs-white); text-align: center; } .qs-tagline { display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 0.85rem; font-weight: 600; color: var(--qs-support); margin-bottom: 15px; } .qs-hero__title { font-family: var(--qs-serif); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--qs-accent); margin-bottom: 10px; line-height: 1.2; } .qs-hero__subtitle { max-width: 700px; margin: 0 auto; font-size: 1.15rem; opacity: 0.9; font-family: var(--qs-sans); } /* Header e Controles */ .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .btn-theme { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); padding: 8px 15px; border-radius: 20px; cursor: pointer; font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow); } /* Acordeão */ .accordion { margin-bottom: 15px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow); } .accordion-header { padding: 18px 20px; width: 100%; text-align: left; background: none; border: none; color: var(--text-main); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .accordion-header::after { content: '▼'; font-size: 0.7rem; transition: transform 0.3s; color: var(--accent); } .accordion.active .accordion-header::after { transform: rotate(180deg); } .accordion-content { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border); } .accordion.active .accordion-content { display: block; } /* Form Elements */ .form-group { margin: 20px 0; } label.select-label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; color: var(--text-muted); } select { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: var(--text-main); font-size: 1rem; } /* Checkboxes Grandes Mobile-First */ .checkbox-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border); cursor: pointer; } .checkbox-item:last-child { border-bottom: none; } input[type="checkbox"] { min-width: 24px; min-height: 24px; cursor: pointer; accent-color: var(--accent); margin-top: 3px; } .checkbox-text { font-size: 0.95rem; line-height: 1.4; } /* Roteiro de Confissão (Modo Confessionário) */ .script-container { margin-top: 40px; background: var(--confessional-bg); border: 2px solid var(--accent); border-radius: 16px; padding: 25px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } .script-title { color: var(--accent); font-size: 1.2rem; margin-bottom: 15px; text-align: center; text-transform: uppercase; letter-spacing: 1px; } #confession-script { white-space: pre-wrap; font-size: 1.1rem; color: var(--confessional-text); font-style: italic; margin-bottom: 25px; line-height: 1.6; } /* Botões de Ação */ .action-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .btn { padding: 15px; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--transition); } .btn-copy { background: var(--accent); color: var(--primary); } .btn-copy:active { transform: scale(0.98); } .btn-clear { background: #E53E3E; color: white; } /* Footer Missa em Teresina */ .footer-logo { text-align: center; margin-top: 50px; opacity: 0.6; } @media (max-width: 480px) { .container { padding: 15px; } #confession-script { font-size: 1rem; } }

/* =========================
   Ajuste geral da página
========================= */


/* Espaçamento entre hero e accordions */
.qs-hero {
    margin-bottom: 60px;
}

/* =========================
   Accordions centralizados
========================= */

.qs-page > .accordion {
    width: min(calc(100% - 40px), 920px);
    margin: 0 auto 18px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(12, 32, 54, 0.08);
}

/* Cabeçalho do accordion */
.accordion-header {
    width: 100%;
    padding: 20px 26px;
    text-align: left;
    background: var(--bg-card);
    border: none;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* Ícone */
.accordion-header::after {
    content: '▼';
    flex-shrink: 0;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    color: var(--accent);
}

.accordion.active .accordion-header::after {
    transform: rotate(180deg);
}

/* Conteúdo do accordion */
.accordion-content {
    display: none;
    padding: 26px;
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.45);
}

/* Quando aberto */
.accordion.active .accordion-content {
    display: block;
}

/* Centraliza o conteúdo interno sem deixar o texto estranho */
.accordion-content > * {
    width: 100%;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* =========================
   Formulários e selects
========================= */

.form-group {
    margin: 0 auto 24px;
}

label.select-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-muted);
}

select {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
}

/* =========================
   Checkboxes organizados
========================= */

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.checkbox-item:last-child {
    border-bottom: none;
}

input[type="checkbox"] {
    min-width: 24px;
    min-height: 24px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--accent);
}

.checkbox-text {
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--text-main);
}

/* =========================
   Modo Confessionário
========================= */

.qs-page > .script-container {
    width: min(calc(100% - 40px), 920px);
    margin: 55px auto 0;
    background: var(--confessional-bg);
    border: 2px solid var(--accent);
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 8px 30px rgba(12, 32, 54, 0.1);
}

.script-title {
    color: var(--accent);
    font-size: 1.2rem;
    margin-bottom: 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#confession-script {
    max-width: 780px;
    margin: 0 auto 28px;
    white-space: pre-wrap;
    font-size: 1.08rem;
    color: var(--confessional-text);
    font-style: italic;
    line-height: 1.7;
}

/* Botões */
.action-btns {
    max-width: 520px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* =========================
   Responsivo
========================= */

@media (max-width: 768px) {
    .qs-hero {
        padding: 110px 0 75px;
        margin-bottom: 38px;
    }

    .qs-page > .accordion,
    .qs-page > .script-container {
        width: min(calc(100% - 28px), 920px);
    }

    .accordion-header {
        padding: 18px 20px;
        font-size: 0.96rem;
    }

    .accordion-content {
        padding: 22px 20px;
    }

    .checkbox-item {
        gap: 12px;
        padding: 15px 0;
    }

    .checkbox-text {
        font-size: 0.94rem;
    }

    .script-container {
        padding: 26px 20px;
    }

    .action-btns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .qs-container {
        padding: 0 16px;
    }

    .qs-hero__title {
        font-size: 2.35rem;
    }

    .qs-hero__subtitle {
        font-size: 1rem;
    }

    #confession-script {
        font-size: 1rem;
    }
}