:root {
    --green:       #45a839;
    --green-dark:  #1f5a38;
    --teal:        #143038;
    --red:         #e84b46;
    --bg:          #f9fbfa;
    --field:       #e6e9e4;
    --field-text:  #25323a;
    --placeholder: #aab0a8;
}

/* ===== Base ===== */
body {
    background: var(--bg);
    color: var(--teal);
    font-family: 'Barlow', sans-serif;
}
.radius-30 { border-radius: 30px; }

/* Onda do rodapé */
body::after {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 16vh;
    background: url('/img/footer.jpg') center bottom / 100% auto no-repeat;
    pointer-events: none;
    z-index: 0;
}
body.active-screen-0::after,
body.external-active::after { display: none; }

/* ===== Container / telas ===== */
.quiz-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 6%;
    position: relative;
    z-index: 1;
}
.quiz-screen { display: none; }
.quiz-screen.active { display: block; }

/* ===== Tela 0 (hero) ===== */
#screen-0 {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 5;
    text-align: center;
}
#screen-0 .hero-logo {
    width: 78%;
    max-width: 760px;
    margin: 14vh auto 0;
    display: block;
}
#screen-0 .hero-frog {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    display: block;
}
.link-full-content {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: block;
}

/* ===== Aviso LGPD (screen 1) ===== */
.lgpd-notice {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--green-dark);
    margin: 0 0 2rem;
}
.lgpd-notice strong { font-weight: 700; }

/* ===== Labels / perguntas ===== */
.q-label,
.q-question {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--teal);
    letter-spacing: .3px;
}
.q-label    { font-size: 1.5rem;  margin-bottom: .4rem; display: block; }
.q-question { font-size: 1.55rem; line-height: 1.15; margin-bottom: 1rem; }
.q-question b    { color: var(--green-dark); font-weight: 700; }
.q-question .q-hint { font-size: .9rem; letter-spacing: 0; }

/* ===== Inputs / selects ===== */
.quiz-form-input {
    background: var(--field);
    border: none;
    border-radius: 8px;
    color: var(--field-text);
    font-family: 'Barlow', sans-serif;
    font-size: 1.4rem;
    padding: .85rem 1.1rem;
    width: 100%;
}
.quiz-form-input::placeholder { color: var(--placeholder); }
.quiz-form-input:focus {
    background: #fff;
    outline: 2px solid var(--green);
    box-shadow: none;
}
.quiz-form-input[readonly] {
    opacity: .75;
    cursor: default;
}
select.quiz-form-input { appearance: none; -webkit-appearance: none; }

/* Textarea (screen 4) */
.quiz-textarea {
    resize: none;
    height: 13rem;
    display: block;
}

/* ===== Opções (radio/checkbox) ===== */
.opt-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.opt-list li { margin-bottom: .6rem; }
.opt-row { display: flex; align-items: flex-start; gap: .9rem; cursor: pointer; }
.opt-input {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto;
    width: 26px; height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    background: #cdd2cb;
    cursor: pointer;
    transition: background .15s;
}
.opt-input:checked { background: var(--green); box-shadow: inset 0 0 0 5px var(--bg); }
.opt-text {
    font-family: 'Barlow', sans-serif;
    font-size: 1.45rem;
    color: var(--field-text);
    line-height: 1.2;
}
.opt-text .q-hint { font-size: .85rem; color: #6b746e; }
.opt-other { margin: .5rem 0 0 calc(26px + .9rem); }

/* ===== Botões de navegação ===== */
.nav-row { display: flex; gap: 1rem; margin-top: 2rem; }
.btn-back,
.nav-next {
    border: none;
    border-radius: 8px;
    height: 70px;
    cursor: pointer;
}
.btn-back {
    background: var(--red);
    width: 86px;
    position: relative;
}
.btn-back::after {
    content: "";
    position: absolute;
    inset: 0; margin: auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e84b46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.nav-next {
    background: var(--green);
    flex: 1 1 auto;
    position: relative;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.7rem;
    text-transform: uppercase;
}
.nav-next::after {
    content: "";
    position: absolute;
    right: 14px; top: 0; bottom: 0; margin: auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345a839' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 20px no-repeat;
}

/* ===== Tela "Obrigado" (screen 4 – estado sucesso) ===== */
.thanks-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--green);
    font-size: 4.5rem;
    line-height: 1;
    margin: 10vh 0 0;
}
.thanks-sub {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--teal);
    font-size: 3rem;
    margin: .5rem 0 0;
}

/* ===== Iframe externo / inatividade ===== */
#external-frame {
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    display: none;
    background: #fff;
}
#external-frame.show { display: block; }

/* Botão "pesquisa" sobre o iframe */
#btn-pesquisa {
    position: absolute;
    bottom: 5%;
    left: 1%;
    z-index: 10;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .85rem 2rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.28);
    transition: background .15s, transform .1s;
    max-width: 80%;
}
#btn-pesquisa:hover,
#btn-pesquisa:focus { background: var(--green-dark); outline: none; }
#btn-pesquisa:active { transform: scale(.97); }
#external-iframe { width: 100%; height: 100%; border: 0; display: block; }
#idle-prompt {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(20, 48, 56, 0.9);
}
#idle-prompt.show { display: flex; }
#idle-prompt .idle-card {
    background: #fff;
    border-radius: 24px;
    padding: 3rem;
    max-width: 80%;
    text-align: center;
    color: var(--teal);
}
#idle-prompt .quiz-btn { background: var(--green); color: #fff !important; border: none; }
body.external-active { overflow: hidden !important; }

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

/* Padding-bottom: conteúdo não fica atrás da onda */
.quiz-content-wrap { padding-bottom: 20vh; }

/* Mobile pequeno (≤ 480px) */
@media (max-width: 480px) {
    .quiz-container { padding: 0 5%; }
    body::after { height: 13vh; }
    .lgpd-notice { font-size: 1.05rem; }
    .quiz-textarea { height: 9rem; }
}

/* Landscape: layout compacto para totem horizontal e PC */
@media (orientation: landscape) {
    body::after { height: 12vh; }
    .quiz-content-wrap { padding-top: 1.5rem; padding-bottom: 14vh; }
    .quiz-textarea { height: 8rem; }
    .lgpd-notice { margin-bottom: 1rem; }
    .opt-list { margin-bottom: .8rem; }
    .opt-list li { margin-bottom: .35rem; }
    .nav-row { margin-top: 1rem; }
}

/* Landscape hero: logo + sapo centralizados */
@media (orientation: landscape) and (min-width: 600px) {
    #screen-0 .hero-logo { margin-top: 5vh; width: 38%; max-width: 480px; }
    #screen-0 .hero-frog {
        width: auto;
        max-height: 54vh;
        left: 50%;
        transform: translateX(-50%);
    }
    .thanks-title { font-size: 3.5rem; margin-top: 4vh; }
    .thanks-sub   { font-size: 2.2rem; }
}

/* Tablet/desktop portrait */
@media (min-width: 768px) and (orientation: portrait) {
    .nav-row { margin-top: 2.5rem; }
}

/* Totem portrait ≥ 1080px — font boost exclusivo */
@media (min-width: 1080px) and (orientation: portrait) {
    html { font-size: 132%; }
    .quiz-content-wrap { padding-top: 6vh; padding-bottom: 22vh; }
    body::after { height: 18vh; }
}