/* GlowUp IoT — style.css — estilos comuns e paginas da oficina */
:root{--verde:#247c58;--verde-escuro:#174b39;--verde-claro:#e6f6ec;--rosa:#e86695;--rosa-claro:#fff0f5;--fundo:#f7faf8;--texto:#2a4238;--borda:#dfeae3}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--fundo);color:var(--texto);font:16px/1.65 Arial,Helvetica,sans-serif}
.container{width:92%;max-width:1120px;margin:auto}a{color:var(--verde)}
header{background:white;border-bottom:1px solid var(--borda)}
.topo{min-height:85px;display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:12px 0}
.logo{font-size:24px;font-weight:bold;color:var(--verde)}.logo span{color:var(--rosa)}
.topo-direita{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.instituicao-topo{font-size:13px;color:#668174;text-align:right}.versao{font-size:11px;color:#8b9c92;font-weight:normal}
.hero{background:linear-gradient(135deg,#e5f6eb,#fff0f5);padding:55px 0}.hero-conteudo{max-width:850px}
.tag{display:inline-block;background:white;color:var(--verde);padding:7px 16px;border-radius:25px;font-size:13px;font-weight:bold}
.hero h1{font-size:clamp(29px,5vw,46px);line-height:1.2;color:var(--verde-escuro);margin:20px 0}.hero h1 span{color:var(--rosa)}
.hero p{max-width:760px;font-size:17px;line-height:1.8}.botoes-hero{margin-top:25px}
.botao{display:inline-block;padding:12px 20px;margin:6px 8px 6px 0;border-radius:10px;background:var(--verde);color:white;text-decoration:none;font-size:14px;font-weight:bold;transition:background .2s}
.botao:hover{background:var(--verde-escuro)}.botao-secundario{background:white;color:var(--verde);border:1px solid #b8d3c2}.botao-secundario:hover{background:var(--verde-claro)}
.indicadores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:35px 0}
.indicador{padding:25px;border-radius:16px;background:white;border:1px solid var(--borda)}
.indicador h3{font-size:15px;color:#637c6e;margin:0 0 12px}.indicador strong{display:block;font-size:27px;color:var(--verde);margin-bottom:10px}.indicador a{font-size:14px;font-weight:bold;text-decoration:none}
.barra-progresso{height:13px;background:#e5eee8;border-radius:20px;overflow:hidden}.preenchimento{height:100%;width:0;background:linear-gradient(90deg,#47b582,#ec83ab);transition:width .3s}
.titulo-secao{margin:45px 0 10px;color:var(--verde-escuro);font-size:29px}.introducao-etapas{margin-bottom:25px;color:#667c70}
.grade-etapas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-bottom:55px}
.cartao{display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:white;border:1px solid var(--borda);transition:transform .2s,box-shadow .2s}
.cartao:hover{transform:translateY(-3px);box-shadow:0 8px 25px #174b3912}.cartao-conteudo{padding:25px;flex:1}
.numero-etapa{display:inline-block;padding:6px 14px;border-radius:25px;background:var(--verde-claro);color:var(--verde);font-size:12px;font-weight:bold}
.icone-etapa{font-size:40px;margin:17px 0}.cartao h3{font-size:22px;line-height:1.35;margin:10px 0;color:var(--verde-escuro)}.cartao p{font-size:15px;color:#647d70;min-height:65px}
.estado-etapa{margin-top:20px;font-size:13px;font-weight:bold;line-height:2;color:var(--verde)}
.acoes-etapa{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:17px;border-top:1px solid var(--borda)}
.acoes-etapa a{display:block;padding:11px 8px;border-radius:9px;text-align:center;text-decoration:none;font-size:14px;font-weight:bold;background:var(--verde-claro);color:var(--verde)}
.acoes-etapa a:nth-child(2){background:var(--rosa-claro);color:#ae3d69}.acoes-etapa a.desabilitado{background:#f0f3f1;color:#88968d;cursor:default}
footer{background:var(--verde-escuro);color:white;padding:32px 15px;text-align:center}
footer .nome-oficina{font-weight:bold;font-size:16px;margin-bottom:10px}footer .nome-instituto{font-size:13px;line-height:1.8}footer .nuria{margin-top:12px;font-size:12px;opacity:.85}
@media(max-width:700px){.indicadores,.grade-etapas{grid-template-columns:1fr}.hero{padding:38px 0}.topo-direita{align-items:flex-start}.instituicao-topo{text-align:left}.cartao p{min-height:auto}}


/* ===== ESTILOS ORIGINAIS: etapa01.html ===== */

body.pagina-etapa01 {--g:#247c58;--dark:#174b39;--pink:#e86695;--line:#dfeae3}
body.pagina-etapa01 * {box-sizing:border-box}
body.pagina-etapa01 {margin:0;background:#f7faf8;color:#2a4238;font:16px/1.7 Arial,sans-serif}
body.pagina-etapa01 .wrap {max-width:940px;margin:auto;padding:0 20px}
body.pagina-etapa01 header {background:white;border-bottom:1px solid var(--line)}
body.pagina-etapa01 nav {min-height:70px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
body.pagina-etapa01 .brand {font-weight:bold;font-size:23px;color:var(--g)}
body.pagina-etapa01 .brand span {color:var(--pink)}
body.pagina-etapa01 a {color:var(--g)}
body.pagina-etapa01 .hero {background:linear-gradient(120deg,#e5f6eb,#fff0f5);text-align:center;padding:40px 10px}
body.pagina-etapa01 .hero h1 {font-size:clamp(27px,4.5vw,39px);color:var(--dark);margin:10px}
body.pagina-etapa01 .tag {color:var(--g);background:white;border-radius:25px;padding:7px 14px;font-size:13px;font-weight:bold}
body.pagina-etapa01 .block {background:white;border:1px solid var(--line);border-radius:18px;padding:27px;margin:24px 0}
body.pagina-etapa01 .block h2 {color:var(--dark);margin-top:0}
body.pagina-etapa01 .block h3 {color:var(--dark)}
body.pagina-etapa01 .pic {max-width:100%;max-height:370px;display:block;margin:20px auto;object-fit:contain}
body.pagina-etapa01 .piclink img {width:100%;height:auto;max-width:780px;display:block;margin:18px auto;border:1px solid var(--line);border-radius:12px}
body.pagina-etapa01 .caption {text-align:center;font-size:13px;color:#718579}
body.pagina-etapa01 .note {background:#e8f6ee;padding:17px;border-radius:11px;margin:18px 0}
body.pagina-etapa01 .warn {background:#fff5e8;padding:17px;border-left:5px solid #e9a23b;border-radius:9px;margin:18px 0}
body.pagina-etapa01 .danger {background:#fff0f0;padding:18px;border-left:5px solid #de4c4c;border-radius:9px}
body.pagina-etapa01 .versions {display:grid;grid-template-columns:1fr 1fr;gap:14px}
body.pagina-etapa01 .version {padding:17px;text-align:center;border-radius:10px;background:#e4f6e8}
body.pagina-etapa01 .version.bad {background:#fee6e6}
body.pagina-etapa01 .version img {width:90px;height:90px;object-fit:contain}
body.pagina-etapa01 .table {overflow-x:auto}
body.pagina-etapa01 table {border-collapse:collapse;width:100%;font-size:14px}
body.pagina-etapa01 th, body.pagina-etapa01 td {border:1px solid var(--line);padding:10px;text-align:left}
body.pagina-etapa01 th {background:var(--g);color:white}
body.pagina-etapa01 .check {display:flex;gap:13px;align-items:center;background:#e6f6ec;border-radius:10px;padding:14px;margin-top:20px;font-weight:bold;cursor:pointer}
body.pagina-etapa01 .check input {width:22px;height:22px;accent-color:var(--g);flex-shrink:0}
body.pagina-etapa01 .advanced {border:2px solid #f0aac4;scroll-margin-top:20px}
body.pagina-etapa01 .advanced h2 {color:#ac3663}
body.pagina-etapa01 .advanced .check {background:#fff0f5}
body.pagina-etapa01 .code {position:relative;background:#1e293b;border-radius:12px;color:#f1f5f9;padding:18px;margin:18px 0;overflow:auto}
body.pagina-etapa01 .code pre {margin:28px 0 0;white-space:pre;font:14px/1.65 Consolas,Monaco,monospace}
body.pagina-etapa01 .copy {position:absolute;right:9px;top:9px;background:#def7e8;color:#174b39;border:0;border-radius:7px;padding:6px 11px;cursor:pointer}
body.pagina-etapa01 .bar {height:13px;background:#e4eee7;border-radius:20px;overflow:hidden}
body.pagina-etapa01 .fill {height:100%;width:0;background:linear-gradient(90deg,#47b582,#ec83ab)}
body.pagina-etapa01 .btn {display:inline-block;background:var(--g);color:#fff;text-decoration:none;border:0;border-radius:10px;padding:11px 16px;margin:6px;cursor:pointer;font-weight:bold}
body.pagina-etapa01 .btn.alt {background:#e8eeea;color:var(--dark)}
body.pagina-etapa01 footer {background:var(--dark);color:white;text-align:center;padding:24px}
body.pagina-etapa01 .end {text-align:center;background:#e7f6ed;border-radius:14px;padding:24px;margin:25px 0}
@media(max-width:620px){
    body.pagina-etapa01 .versions {grid-template-columns:1fr}
    body.pagina-etapa01 .block {padding:18px}
}



/* ===== ESTILOS ORIGINAIS: etapa02.html ===== */


/* ==========================================
   GLOWUP PLANT — ETAPA 02 — V1.2
   ========================================== */

body.pagina-etapa02 {
    --verde: #247c58;
    --verde-escuro: #174b39;
    --verde-claro: #e6f6ec;
    --rosa: #e86695;
    --rosa-claro: #fff0f5;
    --fundo: #f7faf8;
    --texto: #2a4238;
    --borda: #dfeae3;
}

body.pagina-etapa02 * {
    box-sizing: border-box;
}

body.pagina-etapa02 {
    scroll-behavior: smooth;
}

body.pagina-etapa02 {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

body.pagina-etapa02 .container {
    width: 92%;
    max-width: 950px;
    margin: auto;
}

body.pagina-etapa02 a {
    color: var(--verde);
}

/* CABEÇALHO */

body.pagina-etapa02 header {
    background: white;
    border-bottom: 1px solid var(--borda);
}

body.pagina-etapa02 .topo {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

body.pagina-etapa02 .logo {
    color: var(--verde);
    font-size: 23px;
    font-weight: bold;
}

body.pagina-etapa02 .logo span {
    color: var(--rosa);
}

body.pagina-etapa02 .voltar {
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

body.pagina-etapa02 .versao {
    font-size: 12px;
    color: #718579;
}

/* APRESENTAÇÃO */

body.pagina-etapa02 .hero {
    background: linear-gradient(
        135deg,
        #e5f6eb,
        #fff0f5
    );

    text-align: center;
    padding: 45px 15px;
}

body.pagina-etapa02 .hero h1 {
    color: var(--verde-escuro);
    font-size: clamp(28px, 5vw, 40px);
    margin: 12px 0;
}

body.pagina-etapa02 .hero p {
    max-width: 700px;
    margin: auto;
}

body.pagina-etapa02 .tag {
    display: inline-block;
    background: white;
    color: var(--verde);
    padding: 6px 15px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 13px;
}

/* BLOCOS */

body.pagina-etapa02 .bloco {
    background: white;
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 28px;
    margin: 25px 0;
}

body.pagina-etapa02 .bloco h2 {
    color: var(--verde-escuro);
    margin-top: 0;
}

body.pagina-etapa02 .bloco h3 {
    color: var(--verde-escuro);
    margin-top: 25px;
}

/* IMAGENS */

body.pagina-etapa02 .foto {
    display: block;
    width: 100%;
    max-width: 480px;
    max-height: 350px;
    object-fit: contain;
    margin: 22px auto;
}

body.pagina-etapa02 .imagem-link {
    display: block;
    max-width: 820px;
    margin: 20px auto 8px;
}

body.pagina-etapa02 .imagem-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--borda);
}

body.pagina-etapa02 .imagem-link:hover img {
    border-color: var(--verde);
}

body.pagina-etapa02 .legenda {
    text-align: center;
    color: #718579;
    font-size: 13px;
}

/* DESTAQUES */

body.pagina-etapa02 .destaque {
    background: var(--verde-claro);
    border-radius: 12px;
    padding: 18px;
    margin: 20px 0;
}

body.pagina-etapa02 .aviso {
    background: #fff5e8;
    border-left: 5px solid #e9a23b;
    border-radius: 9px;
    padding: 18px;
    margin: 20px 0;
}

/* PROGRESSO */

body.pagina-etapa02 .barra {
    height: 14px;
    background: #e4eee7;
    border-radius: 20px;
    overflow: hidden;
}

body.pagina-etapa02 .preenchimento {
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #47b582,
        #ec83ab
    );
    transition: width 0.3s;
}

body.pagina-etapa02 #contador {
    color: var(--verde);
    font-weight: bold;
}

/* TABELAS */

body.pagina-etapa02 .tabela-container {
    overflow-x: auto;
}

body.pagina-etapa02 table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    margin: 20px 0;
}

body.pagina-etapa02 th, body.pagina-etapa02 td {
    padding: 12px;
    border: 1px solid var(--borda);
    text-align: left;
}

body.pagina-etapa02 th {
    background: var(--verde);
    color: white;
}

body.pagina-etapa02 tr:nth-child(even) {
    background: #f5faf6;
}

/* CÓDIGOS */

body.pagina-etapa02 .codigo {
    position: relative;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    overflow-x: auto;
}

body.pagina-etapa02 .codigo pre {
    margin: 35px 0 0;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre;
    tab-size: 2;
}

body.pagina-etapa02 .copiar {
    position: absolute;
    right: 12px;
    top: 12px;

    background: #dff4e6;
    color: var(--verde-escuro);

    padding: 7px 13px;
    border: none;
    border-radius: 8px;

    font-weight: bold;
    cursor: pointer;
}

/* CHECKBOXES */

body.pagina-etapa02 .check {
    display: flex;
    align-items: center;
    gap: 12px;

    background: var(--verde-claro);
    padding: 15px;
    border-radius: 10px;

    margin-top: 25px;

    cursor: pointer;
    font-weight: bold;
}

body.pagina-etapa02 .check input {
    width: 23px;
    height: 23px;
    accent-color: var(--verde);
    flex-shrink: 0;
}

/* DESAFIOS AVANÇADOS */

body.pagina-etapa02 .avancado {
    border: 2px solid #f0aac4;
    scroll-margin-top: 20px;
}

body.pagina-etapa02 .avancado > h2 {
    color: #ac3663;
}

body.pagina-etapa02 .desafio {
    padding: 8px 0 25px;
    border-bottom: 2px dashed #e8c0cf;
    margin-bottom: 25px;
}

body.pagina-etapa02 .desafio:last-of-type {
    border-bottom: none;
}

body.pagina-etapa02 .desafio h3 {
    color: #ac3663;
    font-size: 21px;
}

body.pagina-etapa02 .desafio .check {
    background: var(--rosa-claro);
}

body.pagina-etapa02 .solucao {
    border: 2px solid #57b785;
}

/* Garante que as soluções permaneçam ocultas. */

body.pagina-etapa02 [hidden] {
    display: none !important;
}

/* BOTÕES */

body.pagina-etapa02 .botao {
    display: inline-block;

    background: var(--verde);
    color: white;

    padding: 11px 19px;
    border-radius: 10px;

    border: none;
    text-decoration: none;

    font-weight: bold;
    font-size: 14px;

    cursor: pointer;
    margin: 6px 6px 6px 0;
}

body.pagina-etapa02 .botao:hover {
    filter: brightness(0.94);
}

body.pagina-etapa02 .botao-secundario {
    background: #e8eeea;
    color: var(--verde-escuro);
}

body.pagina-etapa02 .botao-solucao {
    background: var(--rosa-claro);
    color: #ac3663;
    border: 1px solid #efb5c8;
}

/* FINALIZAÇÃO */

body.pagina-etapa02 .resultado {
    background: var(--verde-claro);
    text-align: center;
    padding: 25px;
    border-radius: 18px;
    margin: 30px 0;
}

body.pagina-etapa02 .resultado h2 {
    color: var(--verde-escuro);
}

/* RODAPÉ */

body.pagina-etapa02 footer {
    background: var(--verde-escuro);
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 14px;
}

/* RESPONSIVIDADE */

@media(max-width: 600px) {

    body.pagina-etapa02 .bloco {
        padding: 19px;
    }

    body.pagina-etapa02 .hero {
        padding: 35px 15px;
    }

    body.pagina-etapa02 .codigo {
        padding: 15px;
    }

    body.pagina-etapa02 .codigo pre {
        font-size: 12px;
    }

    body.pagina-etapa02 .desafio h3 {
        font-size: 19px;
    }

}




/* ===== ESTILOS ORIGINAIS: etapa03.html ===== */


/* ==========================================
   GLOWUP PLANT — ETAPA 03 — V1.1
   ========================================== */

body.pagina-etapa03 {
    --verde: #247c58;
    --verde-escuro: #174b39;
    --verde-claro: #e6f6ec;
    --rosa: #e86695;
    --rosa-claro: #fff0f5;
    --fundo: #f7faf8;
    --texto: #2a4238;
    --borda: #dfeae3;
}

body.pagina-etapa03 * {
    box-sizing: border-box;
}

body.pagina-etapa03 {
    scroll-behavior: smooth;
}

body.pagina-etapa03 {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}

body.pagina-etapa03 .container {
    width: 92%;
    max-width: 950px;
    margin: auto;
}

body.pagina-etapa03 a {
    color: var(--verde);
}

body.pagina-etapa03 header {
    background: white;
    border-bottom: 1px solid var(--borda);
}

body.pagina-etapa03 .topo {
    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

body.pagina-etapa03 .logo {
    color: var(--verde);
    font-size: 23px;
    font-weight: bold;
}

body.pagina-etapa03 .logo span {
    color: var(--rosa);
}

body.pagina-etapa03 .voltar {
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

body.pagina-etapa03 .versao {
    font-size: 12px;
    color: #718579;
}

body.pagina-etapa03 .hero {
    background: linear-gradient(
        135deg,
        #e5f6eb,
        #fff0f5
    );

    text-align: center;
    padding: 45px 15px;
}

body.pagina-etapa03 .hero h1 {
    color: var(--verde-escuro);
    font-size: clamp(28px, 5vw, 40px);
    margin: 12px 0;
}

body.pagina-etapa03 .hero p {
    max-width: 700px;
    margin: auto;
}

body.pagina-etapa03 .tag {
    display: inline-block;
    background: white;
    color: var(--verde);
    padding: 6px 15px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 13px;
}

/* BLOCOS */

body.pagina-etapa03 .bloco {
    background: white;
    border: 1px solid var(--borda);
    border-radius: 18px;
    padding: 28px;
    margin: 25px 0;
}

body.pagina-etapa03 .bloco h2 {
    color: var(--verde-escuro);
    margin-top: 0;
}

body.pagina-etapa03 .bloco h3 {
    color: var(--verde-escuro);
    margin-top: 25px;
}

body.pagina-etapa03 .bloco h4 {
    color: var(--verde-escuro);
}

/* IMAGENS */

body.pagina-etapa03 .foto {
    display: block;
    width: 100%;
    max-width: 480px;
    max-height: 350px;
    object-fit: contain;
    margin: 22px auto;
}

body.pagina-etapa03 .imagem-link {
    display: block;
    max-width: 820px;
    margin: 20px auto 8px;
}

body.pagina-etapa03 .imagem-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--borda);
}

body.pagina-etapa03 .imagem-link:hover img {
    border-color: var(--verde);
}

body.pagina-etapa03 .legenda {
    text-align: center;
    color: #718579;
    font-size: 13px;
}

/* DESTAQUES */

body.pagina-etapa03 .destaque {
    background: var(--verde-claro);
    border-radius: 12px;
    padding: 18px;
    margin: 20px 0;
}

body.pagina-etapa03 .aviso {
    background: #fff5e8;
    border-left: 5px solid #e9a23b;
    border-radius: 9px;
    padding: 18px;
    margin: 20px 0;
}

/* PROGRESSO */

body.pagina-etapa03 .barra {
    height: 14px;
    background: #e4eee7;
    border-radius: 20px;
    overflow: hidden;
}

body.pagina-etapa03 .preenchimento {
    width: 0;
    height: 100%;
    background: linear-gradient(
        90deg,
        #47b582,
        #ec83ab
    );
    transition: width 0.3s;
}

body.pagina-etapa03 #contador {
    color: var(--verde);
    font-weight: bold;
}

/* TABELAS */

body.pagina-etapa03 .tabela-container {
    overflow-x: auto;
}

body.pagina-etapa03 table {
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    margin: 20px 0;
}

body.pagina-etapa03 th, body.pagina-etapa03 td {
    padding: 12px;
    border: 1px solid var(--borda);
    text-align: left;
}

body.pagina-etapa03 th {
    background: var(--verde);
    color: white;
}

body.pagina-etapa03 tr:nth-child(even) {
    background: #f5faf6;
}

/* CÓDIGOS */

body.pagina-etapa03 .codigo {
    position: relative;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    overflow-x: auto;
}

body.pagina-etapa03 .codigo pre {
    margin: 35px 0 0;
    font-family: Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre;
    tab-size: 2;
}

body.pagina-etapa03 .copiar {
    position: absolute;
    right: 12px;
    top: 12px;
    background: #dff4e6;
    color: var(--verde-escuro);
    padding: 7px 13px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* CHECKBOXES */

body.pagina-etapa03 .check {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--verde-claro);
    padding: 15px;
    border-radius: 10px;
    margin-top: 15px;
    cursor: pointer;
    font-weight: bold;
}

body.pagina-etapa03 .check input {
    width: 23px;
    height: 23px;
    accent-color: var(--verde);
    flex-shrink: 0;
}

/* REGISTRO DAS MEDIÇÕES */

body.pagina-etapa03 .registro {
    background: #f9fcfa;
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 20px;
    margin: 22px 0;
}

body.pagina-etapa03 .registro h3 {
    margin-top: 0;
}

body.pagina-etapa03 .campo-medicao {
    display: grid;
    grid-template-columns: 1fr 170px;
    align-items: center;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid var(--borda);
}

body.pagina-etapa03 .campo-medicao:last-child {
    border-bottom: none;
}

body.pagina-etapa03 .campo-medicao label {
    font-weight: bold;
}

body.pagina-etapa03 .campo-medicao input {
    width: 100%;
    padding: 11px;
    border: 1px solid #b8d3c2;
    border-radius: 8px;
    background: white;
    font-size: 16px;
}

body.pagina-etapa03 .campo-medicao input:focus {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

body.pagina-etapa03 .ajuda {
    color: #607a6c;
    font-size: 13px;
}

body.pagina-etapa03 .resumo-medicoes {
    padding: 16px;
    background: white;
    border: 1px solid var(--borda);
    border-radius: 10px;
    margin-top: 20px;
}

body.pagina-etapa03 .resumo-medicoes strong {
    color: var(--verde);
}

/* ALTERNATIVAS DE OBSERVAÇÃO */

body.pagina-etapa03 .opcao-radio {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--borda);
    border-radius: 10px;
    margin: 10px 0;
    cursor: pointer;
}

body.pagina-etapa03 .opcao-radio input {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
    accent-color: var(--verde);
    margin-top: 4px;
}

/* DESAFIOS AVANÇADOS */

body.pagina-etapa03 .avancado {
    border: 2px solid #f0aac4;
    scroll-margin-top: 20px;
}

body.pagina-etapa03 .avancado > h2 {
    color: #ac3663;
}

body.pagina-etapa03 .desafio {
    padding: 8px 0 25px;
    border-bottom: 2px dashed #e8c0cf;
    margin-bottom: 25px;
}

body.pagina-etapa03 .desafio h3 {
    color: #ac3663;
    font-size: 21px;
}

body.pagina-etapa03 .desafio .check {
    background: var(--rosa-claro);
}

body.pagina-etapa03 .solucao {
    border: 2px solid #57b785;
}

body.pagina-etapa03 [hidden] {
    display: none !important;
}

/* BOTÕES */

body.pagina-etapa03 .botao {
    display: inline-block;
    background: var(--verde);
    color: white;
    padding: 11px 19px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    margin: 6px 6px 6px 0;
}

body.pagina-etapa03 .botao:hover {
    filter: brightness(0.94);
}

body.pagina-etapa03 .botao-secundario {
    background: #e8eeea;
    color: var(--verde-escuro);
}

body.pagina-etapa03 .botao-solucao {
    background: var(--rosa-claro);
    color: #ac3663;
    border: 1px solid #efb5c8;
}

/* FINALIZAÇÃO */

body.pagina-etapa03 .resultado {
    background: var(--verde-claro);
    text-align: center;
    padding: 25px;
    border-radius: 18px;
    margin: 30px 0;
}

body.pagina-etapa03 .resultado h2 {
    color: var(--verde-escuro);
}

body.pagina-etapa03 footer {
    background: var(--verde-escuro);
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 14px;
}

/* RESPONSIVIDADE */

@media (max-width: 600px) {

    body.pagina-etapa03 .bloco {
        padding: 19px;
    }

    body.pagina-etapa03 .hero {
        padding: 35px 15px;
    }

    body.pagina-etapa03 .codigo {
        padding: 15px;
    }

    body.pagina-etapa03 .codigo pre {
        font-size: 12px;
    }

    body.pagina-etapa03 .campo-medicao {
        grid-template-columns: 1fr;
        gap: 5px;
    }

}




/* ===== ESTILOS ORIGINAIS: etapa04.html ===== */

/* ==============================================
   GlowUP Plant — Etapa 04 — v1.1
   OLED SSD1306: branco ou bicolor
   ============================================== */

body.pagina-etapa04 {
  --verde: #247c58;
  --verde-escuro: #174b39;
  --verde-claro: #e6f6ec;
  --rosa: #e86695;
  --rosa-claro: #fff0f5;
  --fundo: #f7faf8;
  --texto: #2a4238;
  --borda: #dfeae3;
}

body.pagina-etapa04 * { box-sizing: border-box; }

body.pagina-etapa04 { scroll-behavior: smooth; }

body.pagina-etapa04 {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.7 Arial, Helvetica, sans-serif;
}

body.pagina-etapa04 .container {
  width: 92%;
  max-width: 950px;
  margin: auto;
}

body.pagina-etapa04 a { color: var(--verde); }

body.pagina-etapa04 header {
  background: white;
  border-bottom: 1px solid var(--borda);
}

body.pagina-etapa04 .topo {
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

body.pagina-etapa04 .logo {
  font-size: 23px;
  font-weight: bold;
  color: var(--verde);
}

body.pagina-etapa04 .logo span { color: var(--rosa); }

body.pagina-etapa04 .voltar {
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

body.pagina-etapa04 .versao {
  color: #718579;
  font-size: 12px;
}

body.pagina-etapa04 .hero {
  background: linear-gradient(135deg, #e5f6eb, #fff0f5);
  padding: 45px 15px;
  text-align: center;
}

body.pagina-etapa04 .hero h1 {
  font-size: clamp(28px, 5vw, 40px);
  color: var(--verde-escuro);
  margin: 12px 0;
}

body.pagina-etapa04 .hero p {
  max-width: 720px;
  margin: auto;
}

body.pagina-etapa04 .tag {
  display: inline-block;
  background: white;
  color: var(--verde);
  padding: 6px 15px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: bold;
}

body.pagina-etapa04 .bloco {
  background: white;
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: 28px;
  margin: 25px 0;
}

body.pagina-etapa04 .bloco h2 {
  margin-top: 0;
  color: var(--verde-escuro);
}

body.pagina-etapa04 .bloco h3 {
  margin-top: 28px;
  color: var(--verde-escuro);
}

body.pagina-etapa04 .bloco h4 {
  color: var(--verde-escuro);
}

body.pagina-etapa04 .destaque {
  background: var(--verde-claro);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}

body.pagina-etapa04 .aviso {
  background: #fff5e8;
  border-left: 5px solid #e9a23b;
  border-radius: 9px;
  padding: 18px;
  margin: 20px 0;
}

body.pagina-etapa04 .legenda {
  color: #718579;
  font-size: 13px;
  text-align: center;
}

body.pagina-etapa04 .tabela-container {
  overflow-x: auto;
}

body.pagina-etapa04 table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  margin: 18px 0;
}

body.pagina-etapa04 th, body.pagina-etapa04 td {
  padding: 12px;
  border: 1px solid var(--borda);
  text-align: left;
}

body.pagina-etapa04 th {
  background: var(--verde);
  color: white;
}

body.pagina-etapa04 tr:nth-child(even) {
  background: #f5faf6;
}

/* CÓDIGOS */

body.pagina-etapa04 .codigo {
  position: relative;
  background: #1e293b;
  color: #f1f5f9;
  padding: 20px;
  margin: 20px 0;
  border-radius: 12px;
  overflow-x: auto;
}

body.pagina-etapa04 .codigo pre {
  margin: 38px 0 0;
  font: 14px/1.65 Consolas, Monaco, monospace;
  white-space: pre;
  tab-size: 2;
}

body.pagina-etapa04 .codigo-simples pre {
  margin-top: 0;
}

body.pagina-etapa04 .copiar {
  position: absolute;
  right: 12px;
  top: 12px;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  color: var(--verde-escuro);
  background: #dff4e6;
  font-weight: bold;
  cursor: pointer;
}

body.pagina-etapa04 code {
  background: #edf3ee;
  padding: 2px 5px;
  border-radius: 4px;
}

/* PROGRESSO */

body.pagina-etapa04 .barra {
  height: 14px;
  background: #e4eee7;
  border-radius: 20px;
  overflow: hidden;
}

body.pagina-etapa04 .preenchimento {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #47b582, #ec83ab);
  transition: width .3s;
}

body.pagina-etapa04 #contador {
  color: var(--verde);
  font-weight: bold;
}

body.pagina-etapa04 .check {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--verde-claro);
  padding: 15px;
  border-radius: 10px;
  margin-top: 22px;
  cursor: pointer;
  font-weight: bold;
}

body.pagina-etapa04 .check input {
  width: 23px;
  height: 23px;
  accent-color: var(--verde);
  flex-shrink: 0;
}

/* ==============================================
   PRÉVIAS DO OLED
   Os desenhos SVG usam viewBox 128 x 64,
   igual à resolução real do display.
   ============================================== */

body.pagina-etapa04 .oled-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 20px 0;
}

body.pagina-etapa04 .oled-controles button {
  padding: 9px 15px;
  border: 1px solid #b8d3c2;
  border-radius: 9px;
  background: white;
  color: var(--verde-escuro);
  font-weight: bold;
  cursor: pointer;
}

body.pagina-etapa04 .oled-controles button.ativo {
  background: var(--verde);
  color: white;
  border-color: var(--verde);
}

body.pagina-etapa04 .oled-area {
  display: flex;
  justify-content: center;
  padding: 25px 12px;
  background: #f1f6f3;
  border-radius: 14px;
  margin: 20px 0;
}

body.pagina-etapa04 .oled-moldura {
  width: 100%;
  max-width: 430px;
  padding: 14px;
  border: 9px solid #253849;
  border-radius: 17px;
  background: #111b25;
  box-shadow: 0 5px 15px #0002;
}

body.pagina-etapa04 .oled-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  background: #010916;
  border-radius: 4px;
  image-rendering: pixelated;
}

body.pagina-etapa04 .oled-svg .faixa-topo {
  fill: #ffd53b;
}

body.pagina-etapa04 .oled-svg .faixa-baixo {
  fill: #67c5ff;
}

body.pagina-etapa04.oled-branco .oled-svg .faixa-topo, body.pagina-etapa04.oled-branco .oled-svg .faixa-baixo {
  fill: #eff8ff;
}

body.pagina-etapa04 .oled-svg text {
  font-family: monospace;
}

body.pagina-etapa04 .oled-svg .texto {
  font-size: 7.5px;
}

body.pagina-etapa04 .oled-svg .texto-grande {
  font-size: 15px;
  font-weight: bold;
}

body.pagina-etapa04 .oled-svg .contorno {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

body.pagina-etapa04 .oled-svg .pixel {
  fill: currentColor;
}

body.pagina-etapa04 .oled-svg .faixa-topo .contorno, body.pagina-etapa04 .oled-svg .faixa-baixo .contorno {
  stroke: currentColor;
}

/* GUIAS GRÁFICOS DE COORDENADAS */

body.pagina-etapa04 .guia {
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 18px;
  background: #f9fcfa;
  margin: 22px 0;
}

body.pagina-etapa04 .guia h4 {
  margin-top: 0;
}

body.pagina-etapa04 .guia-desenho {
  max-width: 500px;
  margin: 15px auto;
}

body.pagina-etapa04 .guia-desenho svg {
  display: block;
  width: 100%;
  height: auto;
  background: white;
  border-radius: 10px;
  border: 1px solid #dce8e0;
}

body.pagina-etapa04 .guia .explicacao {
  font-size: 14px;
}

body.pagina-etapa04 .parametros {
  font-family: Consolas, monospace;
  font-weight: bold;
  color: var(--verde-escuro);
}

/* CALIBRAÇÃO */

body.pagina-etapa04 .calibracao {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 0;
}

body.pagina-etapa04 .calibracao label {
  display: block;
  font-weight: bold;
}

body.pagina-etapa04 .calibracao input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid #b8d3c2;
  border-radius: 8px;
  font-size: 16px;
}

/* DESAFIOS */

body.pagina-etapa04 .avancado {
  border: 2px solid #f0aac4;
  scroll-margin-top: 20px;
}

body.pagina-etapa04 .avancado > h2 {
  color: #ac3663;
}

body.pagina-etapa04 .desafio {
  border-bottom: 2px dashed #e8c0cf;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

body.pagina-etapa04 .desafio h3 {
  color: #ac3663;
}

body.pagina-etapa04 .desafio .check {
  background: var(--rosa-claro);
}

body.pagina-etapa04 .solucao {
  border: 2px solid #57b785;
}

body.pagina-etapa04 [hidden] {
  display: none !important;
}

body.pagina-etapa04 .botao {
  display: inline-block;
  background: var(--verde);
  color: white;
  padding: 11px 19px;
  margin: 6px 6px 6px 0;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}

body.pagina-etapa04 .botao-secundario {
  background: #e8eeea;
  color: var(--verde-escuro);
}

body.pagina-etapa04 .botao-solucao {
  background: var(--rosa-claro);
  color: #ac3663;
  border: 1px solid #efb5c8;
}

body.pagina-etapa04 .resultado {
  margin: 30px 0;
  padding: 25px;
  background: var(--verde-claro);
  border-radius: 18px;
  text-align: center;
}

body.pagina-etapa04 .resultado h2 {
  color: var(--verde-escuro);
}

body.pagina-etapa04 footer {
  background: var(--verde-escuro);
  color: white;
  padding: 25px;
  text-align: center;
  font-size: 14px;
}

@media(max-width: 600px) {
  body.pagina-etapa04 .bloco { padding: 19px; }
  body.pagina-etapa04 .hero { padding: 35px 15px; }
  body.pagina-etapa04 .codigo { padding: 15px; }
  body.pagina-etapa04 .codigo pre { font-size: 12px; }
  body.pagina-etapa04 .calibracao { grid-template-columns: 1fr; }
}




/* ===== ESTILOS ORIGINAIS: etapa05.html ===== */

/* GlowUP Plant — Etapa 05 — v1.0 */

body.pagina-etapa05 {
  --verde:#247c58;
  --verde-escuro:#174b39;
  --verde-claro:#e6f6ec;
  --rosa:#e86695;
  --rosa-claro:#fff0f5;
  --texto:#2a4238;
  --fundo:#f7faf8;
  --borda:#dfeae3;
}
body.pagina-etapa05 * {box-sizing:border-box}
body.pagina-etapa05 {scroll-behavior:smooth}
body.pagina-etapa05 {
  margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.7 Arial,Helvetica,sans-serif
}
body.pagina-etapa05 .container {width:92%;max-width:950px;margin:auto}
body.pagina-etapa05 a {color:var(--verde)}
body.pagina-etapa05 header {background:white;border-bottom:1px solid var(--borda)}
body.pagina-etapa05 .topo {
  min-height:75px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;flex-wrap:wrap
}
body.pagina-etapa05 .logo {font-size:23px;font-weight:bold;color:var(--verde)}
body.pagina-etapa05 .logo span {color:var(--rosa)}
body.pagina-etapa05 .voltar {text-decoration:none;font-size:14px;font-weight:bold}
body.pagina-etapa05 .versao {font-size:12px;color:#718579}
body.pagina-etapa05 .hero {
  text-align:center;padding:45px 15px;
  background:linear-gradient(135deg,#e5f6eb,#fff0f5)
}
body.pagina-etapa05 .hero h1 {
  font-size:clamp(28px,5vw,40px);color:var(--verde-escuro);
  margin:12px 0
}
body.pagina-etapa05 .hero p {max-width:730px;margin:auto}
body.pagina-etapa05 .tag {
  display:inline-block;background:white;color:var(--verde);
  padding:6px 15px;border-radius:25px;font-size:13px;font-weight:bold
}
body.pagina-etapa05 .bloco {
  background:white;border:1px solid var(--borda);
  border-radius:18px;padding:28px;margin:25px 0
}
body.pagina-etapa05 .bloco h2 {color:var(--verde-escuro);margin-top:0}
body.pagina-etapa05 .bloco h3 {color:var(--verde-escuro);margin-top:26px}
body.pagina-etapa05 .destaque {
  background:var(--verde-claro);border-radius:12px;
  padding:18px;margin:20px 0
}
body.pagina-etapa05 .aviso {
  background:#fff5e8;border-left:5px solid #e9a23b;
  border-radius:9px;padding:18px;margin:20px 0
}
body.pagina-etapa05 table {border-collapse:collapse;width:100%;font-size:14px;margin:20px 0}
body.pagina-etapa05 th, body.pagina-etapa05 td {border:1px solid var(--borda);padding:12px;text-align:left}
body.pagina-etapa05 th {background:var(--verde);color:white}
body.pagina-etapa05 tr:nth-child(even) {background:#f5faf6}
body.pagina-etapa05 .tabela-container {overflow-x:auto}
body.pagina-etapa05 .codigo {
  position:relative;background:#1e293b;color:#f1f5f9;
  border-radius:12px;padding:20px;margin:20px 0;overflow-x:auto
}
body.pagina-etapa05 .codigo pre {
  margin:38px 0 0;font:14px/1.65 Consolas,Monaco,monospace;
  white-space:pre;tab-size:2
}
body.pagina-etapa05 .copiar {
  position:absolute;right:12px;top:12px;border:0;
  border-radius:8px;background:#dff4e6;color:var(--verde-escuro);
  padding:7px 13px;font-weight:bold;cursor:pointer
}
body.pagina-etapa05 code {
  background:#edf3ee;border-radius:4px;
  padding:2px 5px
}
body.pagina-etapa05 .barra {
  height:14px;background:#e4eee7;
  border-radius:20px;overflow:hidden
}
body.pagina-etapa05 .preenchimento {
  width:0;height:100%;
  background:linear-gradient(90deg,#47b582,#ec83ab);
  transition:width .3s
}
body.pagina-etapa05 #contador {font-weight:bold;color:var(--verde)}
body.pagina-etapa05 .check {
  display:flex;align-items:center;gap:12px;background:var(--verde-claro);
  padding:15px;border-radius:10px;margin-top:22px;
  cursor:pointer;font-weight:bold
}
body.pagina-etapa05 .check input {
  width:23px;height:23px;flex-shrink:0;accent-color:var(--verde)
}

/* Visor OLED representado em SVG 128 x 64 */

body.pagina-etapa05 .oled-controles {
  display:flex;justify-content:center;align-items:center;
  gap:10px;flex-wrap:wrap;margin:20px 0
}
body.pagina-etapa05 .oled-controles button {
  border:1px solid #b8d3c2;border-radius:9px;
  padding:9px 15px;cursor:pointer;background:white;
  color:var(--verde-escuro);font-weight:bold
}
body.pagina-etapa05 .oled-controles button.ativo {
  background:var(--verde);color:white
}
body.pagina-etapa05 .oled-area {
  display:flex;justify-content:center;
  background:#f1f6f3;border-radius:14px;
  padding:25px 12px;margin:20px 0
}
body.pagina-etapa05 .oled-moldura {
  width:100%;max-width:430px;padding:14px;
  background:#111b25;border:9px solid #253849;
  border-radius:17px;box-shadow:0 5px 15px #0002
}
body.pagina-etapa05 .oled-svg {
  display:block;width:100%;height:auto;aspect-ratio:2/1;
  background:#010916;border-radius:4px
}
body.pagina-etapa05 .oled-svg .topo-pixels {color:#ffd53b;fill:#ffd53b}
body.pagina-etapa05 .oled-svg .baixo-pixels {color:#67c5ff;fill:#67c5ff}
body.pagina-etapa05.oled-branco .oled-svg .topo-pixels, body.pagina-etapa05.oled-branco .oled-svg .baixo-pixels {
  color:#eff8ff;fill:#eff8ff
}
body.pagina-etapa05 .oled-svg text {font-family:monospace;font-size:7.5px}
body.pagina-etapa05 .oled-svg .grande {font-size:15px;font-weight:bold}
body.pagina-etapa05 .oled-svg .traço {fill:none;stroke:currentColor;stroke-width:1.3}

body.pagina-etapa05 .legenda {font-size:13px;color:#718579;text-align:center}
body.pagina-etapa05 .avancado {border:2px solid #f0aac4;scroll-margin-top:20px}
body.pagina-etapa05 .avancado>h2, body.pagina-etapa05 .desafio h3 {color:#ac3663}
body.pagina-etapa05 .desafio {
  border-bottom:2px dashed #e8c0cf;
  margin-bottom:30px;padding-bottom:30px
}
body.pagina-etapa05 .desafio .check {background:var(--rosa-claro)}
body.pagina-etapa05 .solucao {border:2px solid #57b785}
body.pagina-etapa05 [hidden] {display:none!important}
body.pagina-etapa05 .botao {
  display:inline-block;background:var(--verde);color:white;
  border:0;border-radius:10px;padding:11px 19px;
  margin:6px 6px 6px 0;text-decoration:none;
  font-size:14px;font-weight:bold;cursor:pointer
}
body.pagina-etapa05 .botao-secundario {background:#e8eeea;color:var(--verde-escuro)}
body.pagina-etapa05 .botao-solucao {
  background:var(--rosa-claro);color:#ac3663;
  border:1px solid #efb5c8
}
body.pagina-etapa05 .resultado {
  background:var(--verde-claro);text-align:center;
  border-radius:18px;padding:25px;margin:30px 0
}
body.pagina-etapa05 .resultado h2 {color:var(--verde-escuro)}
body.pagina-etapa05 footer {
  background:var(--verde-escuro);color:white;
  padding:25px;text-align:center;font-size:14px
}
@media(max-width:600px){
  body.pagina-etapa05 .bloco {padding:19px}
  body.pagina-etapa05 .hero {padding:35px 15px}
  body.pagina-etapa05 .codigo {padding:15px}
  body.pagina-etapa05 .codigo pre {font-size:12px}
}



/* ===== ESTILOS ORIGINAIS: materiais.html ===== */


/* ==========================================
   GLOWUP PLANT - MATERIAIS v1.1
   ========================================== */

body.pagina-materiais {
    --verde: #277857;
    --verde-escuro: #18563e;
    --verde-claro: #e6f5eb;
    --rosa: #ef8ca8;
    --rosa-claro: #fff0f5;
    --fundo: #f8faf8;
    --texto: #253b32;
    --cinza: #64756b;
    --borda: #e2eae4;
}

body.pagina-materiais * {
    box-sizing: border-box;
}

body.pagina-materiais {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    line-height: 1.6;
}

body.pagina-materiais .container {
    max-width: 1100px;
    width: 92%;
    margin: auto;
}

/* CABEÇALHO */

body.pagina-materiais header {
    background: white;
    border-bottom: 1px solid var(--borda);
}

body.pagina-materiais .topo {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

body.pagina-materiais .logo {
    font-size: 23px;
    font-weight: bold;
    color: var(--verde);
}

body.pagina-materiais .logo span {
    color: var(--rosa);
}

body.pagina-materiais .voltar {
    color: var(--verde);
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

/* APRESENTAÇÃO */

body.pagina-materiais .hero {
    padding: 42px 0;
    background: linear-gradient(
        135deg,
        #e4f5e9,
        #fff0f5
    );
    text-align: center;
}

body.pagina-materiais .hero h1 {
    color: var(--verde-escuro);
    font-size: clamp(27px, 5vw, 40px);
    margin: 5px 0 12px;
}

body.pagina-materiais .hero p {
    max-width: 650px;
    margin: auto;
    font-size: 17px;
}

body.pagina-materiais .etiqueta {
    display: inline-block;
    background: white;
    color: var(--verde);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* PROGRESSO */

body.pagina-materiais .progresso {
    background: white;
    margin-top: 30px;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid var(--borda);
}

body.pagina-materiais .progresso h2 {
    margin-top: 0;
}

body.pagina-materiais .barra {
    height: 15px;
    background: #e6eee8;
    border-radius: 20px;
    overflow: hidden;
    margin: 18px 0 10px;
}

body.pagina-materiais .preenchimento {
    width: 0%;
    height: 100%;
    background: linear-gradient(
        90deg,
        #52b788,
        #ef8ca8
    );
    transition: width 0.3s;
}

body.pagina-materiais .contador {
    font-weight: bold;
    color: var(--verde);
}

/* COMPONENTES */

body.pagina-materiais .secao {
    padding: 35px 0;
}

body.pagina-materiais .secao h2 {
    font-size: 26px;
}

body.pagina-materiais .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* CARTÕES */

body.pagina-materiais .card {
    background: white;
    border: 2px solid var(--borda);
    border-radius: 18px;
    overflow: hidden;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

body.pagina-materiais .card.conferido {
    border-color: #52b788;
    box-shadow: 0 4px 18px #52b78825;
}

/* ÁREA DA IMAGEM */

body.pagina-materiais .foto-container {
    height: 225px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid var(--borda);
}

body.pagina-materiais .foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 15px;
}

body.pagina-materiais .foto-placeholder {
    font-size: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.pagina-materiais .foto-placeholder small {
    font-size: 12px;
    color: var(--cinza);
    font-weight: normal;
    margin-top: 8px;
}

body.pagina-materiais .selo {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--verde-claro);
    color: var(--verde-escuro);
    font-size: 11px;
    font-weight: bold;
    padding: 4px 9px;
    border-radius: 12px;
}

/* CONTEÚDO DOS CARTÕES */

body.pagina-materiais .conteudo {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

body.pagina-materiais .conteudo h3 {
    margin: 0 0 8px;
    font-size: 19px;
}

body.pagina-materiais .descricao {
    font-size: 14px;
    color: var(--cinza);
    flex: 1;
}

body.pagina-materiais .quantidade {
    font-size: 13px;
    font-weight: bold;
    color: var(--verde);
    margin-bottom: 15px;
}

/* CHECKBOX */

body.pagina-materiais .opcao {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--verde-claro);
    padding: 13px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

body.pagina-materiais .opcao input {
    width: 23px;
    height: 23px;
    accent-color: var(--verde);
    cursor: pointer;
    flex-shrink: 0;
}

body.pagina-materiais .opcao span {
    font-size: 14px;
}

/* RESULTADO */

body.pagina-materiais .resultado {
    padding: 25px;
    border-radius: 18px;
    background: white;
    border: 1px solid var(--borda);
    margin-bottom: 30px;
}

body.pagina-materiais .resultado h2 {
    margin-top: 0;
}

body.pagina-materiais .resultado.completo {
    background: var(--verde-claro);
    border-color: #52b788;
}

body.pagina-materiais .botoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

body.pagina-materiais .botao {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    background: var(--verde);
    color: white;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

body.pagina-materiais .botao-secundario {
    background: #e8ede9;
    color: var(--texto);
}

body.pagina-materiais .botao:focus-visible, body.pagina-materiais .opcao input:focus-visible, body.pagina-materiais .voltar:focus-visible {
    outline: 3px solid #18563e;
    outline-offset: 3px;
}

/* RODAPÉ */

body.pagina-materiais footer {
    background: var(--verde-escuro);
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 14px;
}

/* RESPONSIVIDADE */

@media(max-width: 900px) {

    body.pagina-materiais .grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width: 600px) {

    body.pagina-materiais .grid {
        grid-template-columns: 1fr;
    }

    body.pagina-materiais .foto-container {
        height: 210px;
    }

    body.pagina-materiais .topo {
        flex-wrap: wrap;
        padding: 12px 0;
    }

}




/* ===== ESTILOS DA ETAPA 06 v1.0 ===== */
body.pagina-etapa06 {font:16px/1.7 Arial,Helvetica,sans-serif}
body.pagina-etapa06 .container{max-width:950px}
body.pagina-etapa06 .topo{min-height:75px}
body.pagina-etapa06 .logo{font-size:23px}
body.pagina-etapa06 .voltar{text-decoration:none;font-size:14px;font-weight:bold}
body.pagina-etapa06 .versao{font-size:12px;color:#718579}
body.pagina-etapa06 .hero{text-align:center;padding:45px 15px}
body.pagina-etapa06 .hero h1{font-size:clamp(28px,5vw,40px);margin:12px 0}
body.pagina-etapa06 .hero p{margin:auto;max-width:730px}
body.pagina-etapa06 .bloco{background:white;border:1px solid var(--borda);border-radius:18px;padding:28px;margin:25px 0}
body.pagina-etapa06 .bloco h2{color:var(--verde-escuro);margin-top:0}
body.pagina-etapa06 .bloco h3{color:var(--verde-escuro);margin-top:25px}
body.pagina-etapa06 .destaque{background:var(--verde-claro);border-radius:12px;padding:18px;margin:20px 0}
body.pagina-etapa06 .aviso{background:#fff5e8;border-left:5px solid #e9a23b;border-radius:9px;padding:18px;margin:20px 0}
body.pagina-etapa06 .tabela-container{overflow-x:auto}
body.pagina-etapa06 table{border-collapse:collapse;width:100%;font-size:14px;margin:18px 0}
body.pagina-etapa06 th,body.pagina-etapa06 td{padding:12px;border:1px solid var(--borda);text-align:left}
body.pagina-etapa06 th{background:var(--verde);color:white}
body.pagina-etapa06 tr:nth-child(even){background:#f5faf6}
body.pagina-etapa06 .codigo{position:relative;background:#1e293b;color:#f1f5f9;padding:18px;border-radius:12px;margin:18px 0;overflow-x:auto}
body.pagina-etapa06 .codigo pre{margin:36px 0 0;white-space:pre;font:13px/1.55 Consolas,Monaco,monospace}
body.pagina-etapa06 .codigo code{background:none;color:inherit;padding:0}
body.pagina-etapa06 .copiar{position:absolute;top:10px;right:10px;border:0;border-radius:8px;background:#dff4e6;color:#174b39;padding:7px 13px;font-weight:bold;cursor:pointer}
body.pagina-etapa06 code:not(pre code){background:#edf3ee;padding:2px 5px;border-radius:4px}
body.pagina-etapa06 .barra{height:14px;background:#e4eee7;border-radius:20px;overflow:hidden}
body.pagina-etapa06 .preenchimento{width:0;height:100%;background:linear-gradient(90deg,#47b582,#ec83ab)}
body.pagina-etapa06 .check{display:flex;gap:12px;align-items:center;background:var(--verde-claro);padding:15px;border-radius:10px;margin-top:20px;font-weight:bold;cursor:pointer}
body.pagina-etapa06 .check input{width:23px;height:23px;accent-color:var(--verde);flex-shrink:0}
body.pagina-etapa06 .avancado{border:2px solid #efb5c8;scroll-margin-top:20px}
body.pagina-etapa06 .avancado>h2,body.pagina-etapa06 .desafio h3{color:#ac3663}
body.pagina-etapa06 .desafio{border-bottom:2px dashed #e8c0cf;padding-bottom:25px;margin-bottom:25px}
body.pagina-etapa06 .desafio .check{background:var(--rosa-claro)}
body.pagina-etapa06 .solucao{border:2px solid #57b785}
body.pagina-etapa06 [hidden]{display:none!important}
body.pagina-etapa06 .botao{display:inline-block;background:var(--verde);color:white;border:0;border-radius:10px;padding:11px 19px;margin:6px;text-decoration:none;font-weight:bold;cursor:pointer}
body.pagina-etapa06 .botao-solucao{background:var(--rosa-claro);color:#ac3663;border:1px solid #efb5c8}
body.pagina-etapa06 .resultado{background:var(--verde-claro);text-align:center;padding:25px;border-radius:18px;margin:25px 0}
body.pagina-etapa06 .olhos-painel{background:#f1f6f3;padding:25px 12px;border-radius:14px;display:flex;justify-content:center;margin:18px 0}
body.pagina-etapa06 .visor{position:relative;max-width:420px;width:100%;aspect-ratio:2/1;background:#010916;border:12px solid #243849;box-shadow:0 5px 15px #0002;border-radius:18px;overflow:hidden}
body.pagina-etapa06 .olhos{width:100%;height:100%;display:block}
body.pagina-etapa06 .faixa-superior{fill:#ffdd52}
body.pagina-etapa06 .faixa-principal{fill:#64c5ff}
body.pagina-etapa06.oled-branco .faixa-superior,body.pagina-etapa06.oled-branco .faixa-principal{fill:#ecf7ff}
body.pagina-etapa06 .olhos-variantes{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
body.pagina-etapa06 .olhos-variantes button{cursor:pointer;padding:8px 14px;border:1px solid #bdd8c8;border-radius:9px;background:white;color:#174b39;font-weight:bold}
body.pagina-etapa06 .olhos-variantes button.ativo{background:var(--verde);color:white}
body.pagina-etapa06 .olhos-legenda{text-align:center;font-size:13px;color:#637c6e}
body.pagina-etapa06 .olhos-galeria{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}
body.pagina-etapa06 .olhos-galeria button{border:1px solid #bad3c3;background:#f5faf6;padding:10px 4px;border-radius:10px;cursor:pointer;font-size:12px;font-weight:bold;color:#17513b}
body.pagina-etapa06 .olhos-galeria button.ativo{background:#e3f4eb;border-color:var(--verde)}
body.pagina-etapa06 .ponto{background:#fff0f5;border-radius:12px;padding:18px;margin:16px 0}
@media(max-width:680px){body.pagina-etapa06 .bloco{padding:18px}body.pagina-etapa06 .olhos-galeria{grid-template-columns:repeat(3,1fr)}body.pagina-etapa06 .codigo pre{font-size:12px}}