/* Ecopedinha: faixa com a marca (0.10.0). */
.ecoc { --ecoc-fundo: #FFF4E0; --ecoc-borda: #FFD8A8; --ecoc-texto: #5C3D1E; --ecoc-campo: #FFC078; --ecoc-botao: #C2410C; background: var(--ecoc-fundo); border-bottom: 4px solid var(--ecoc-borda); font-family: 'Nunito', system-ui, sans-serif; }
.ecoc-sobrio { --ecoc-fundo: #EEF2F6; --ecoc-borda: #D5DEE8; --ecoc-texto: #2B3A52; --ecoc-campo: #B9C6D4; --ecoc-botao: #3B5B7E; }
.ecoc *, .ecoc *::before, .ecoc *::after { box-sizing: border-box; }
.ecoc-in { max-width: 1120px; margin: 0 auto; padding: 16px; display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.ecoc { --ecoc-nome: 44px; }
.ecoc a.ecoc-marca { display: block !important; padding: 2px 0 6px !important; margin: 0 !important; height: auto !important; }
.ecoc .ecoc-marca, .ecoc .ecoc-marca span { text-decoration: none !important; font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 700 !important; font-size: var(--ecoc-nome) !important; line-height: 1 !important; letter-spacing: .5px !important; }
.ecoc-frase { flex: 1 1 200px; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ecoc-texto); }
.ecoc-busca { display: flex; gap: 8px; flex: 0 1 380px; margin: 0; }
.ecoc-busca input[type=search] { flex: 1 1 auto; min-width: 0; height: 46px; border: 2px solid var(--ecoc-campo); border-radius: 14px; padding: 0 14px; font-size: 17px; background: #FFF; color: #26313D; }
.ecoc-busca button { height: 46px; border: 0; border-radius: 14px; background: var(--ecoc-botao); color: #FFF; font-weight: 800; padding: 0 18px; font-size: 17px; cursor: pointer; }
.ecoc-busca button:focus-visible, .ecoc-marca:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.ecoc-oculto { position: absolute; left: -9999px; }
.ecoc-sobrio .ecoc-busca input[type=search], .ecoc-sobrio .ecoc-busca button { border-radius: 6px; }
.eco-margem { padding: 0 16px; }
@media (max-width: 700px) {
    .ecoc { --ecoc-nome: 36px; }
    .ecoc-frase { flex-basis: 100%; order: 3; font-size: 15px; }
    .ecoc-busca { flex: 1 1 100%; order: 4; }
}
.ecop-pagina .eco { font-family: 'Nunito', system-ui, sans-serif; }
.ecop-pagina .eco .eco-titulo, .ecop-pagina .eco h2 { font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 700 !important; }
/* 0.10.1: faixa grande com a imagem da marca (entrada, temas e idades). A arte fica centrada; as laterais seguem o cinza do fundo da imagem. */
.ecoc-grande { background: #F6F6F6; }
.ecoc-arte { position: relative; max-width: 1344px; margin: 0 auto; aspect-ratio: 2560 / 800; background: var(--ecoc-faixa) center / 100% auto no-repeat; }
.ecoc-grande .ecoc-in { position: absolute; left: 44%; right: 3%; top: 9%; max-width: none; margin: 0; padding: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
.ecoc-grande { --ecoc-nome: clamp(40px, 4.6vw, 64px); }
.ecoc-grande .ecoc-frase { flex: 0 0 auto; max-width: 30ch; font-size: clamp(15px, 1.4vw, 19px); font-weight: 800; }
.ecoc-grande .ecoc-busca { flex: 0 0 auto; width: min(380px, 100%); }
/* Tablet: só a parte das crianças, à esquerda, e o nome à direita. */
@media (max-width: 1180px) and (min-width: 601px) {
    .ecoc-arte { aspect-ratio: auto; max-width: none; height: 270px; background: none; }
    .ecoc-arte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 370px; background: var(--ecoc-faixa) left center / auto 100% no-repeat; }
    .ecoc-grande .ecoc-in { left: 380px; right: 16px; top: 50%; transform: translateY(-50%); }
    .ecoc-grande { --ecoc-nome: 44px; }
}
/* Celular: a imagem em cima, o nome e a busca embaixo. */
@media (max-width: 600px) {
    .ecoc-grande { background: #FFF; }
    .ecoc-arte { aspect-ratio: auto; background: none; max-width: none; }
    .ecoc-arte::before { content: ""; display: block; height: 190px; background: #F6F6F6 var(--ecoc-faixa) 8% center / auto 100% no-repeat; }
    .ecoc-grande .ecoc-in { position: static; padding: 14px 16px 18px; }
    .ecoc-grande .ecoc-frase, .ecoc-grande .ecoc-busca { order: 0; }
}
/* 0.10.3: busca numa barra logo abaixo da faixa (Luiz, 29/10). */
.ecoc-barra { background: var(--ecoc-fundo); border-top: 1px solid var(--ecoc-borda); padding: 12px 16px; }
.ecoc-barra .ecoc-busca { max-width: 640px; width: 100%; margin: 0 auto; flex: none; order: 0; }
.ecoc-grande .ecoc-barra { background: #FFF4E0; }
.ecoc-sobrio.ecoc-grande .ecoc-barra { background: #EEF2F6; }
/* 0.11.0: entrada e páginas de tema mais limpas, no estilo do modelo C (Luiz, 29/10): fundo creme, cartões brancos. */
.ecop-pagina .eco-margem { background: #FFF6EA; padding-top: 8px; padding-bottom: 8px; }
.ecop-pagina .eco { max-width: 900px; padding-top: 20px; }
.ecop-pagina .eco-caminho { color: #6B5A4A; }
.ecop-pagina .eco-caminho a { color: #1D4F91; }
.ecop-pagina .eco-topo, .ecop-pagina .eco-topo-tema { background: #FFF; border-radius: 20px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 0 #F1E2CF; }
.ecop-pagina .eco .eco-titulo { color: #7A2A08 !important; font-size: clamp(28px, 4vw, 38px) !important; }
.ecop-pagina .eco-lead { font-size: 18px; margin: 0; color: #4A3A2C; }
.ecop-pagina .eco-bloco h2 { color: #7A2A08 !important; font-size: 24px !important; }
/* idades em pílulas */
.ecop-pagina .eco-idades { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ecop-pagina .eco-idade { min-height: 0; padding: 8px 16px; border-radius: 999px; border-width: 2px; background: #FFF; flex-direction: row; align-items: center; }
.ecop-pagina .eco-idade strong { font-size: 16px; }
.ecop-pagina .eco-idade span { display: none; }
.ecop-pagina .eco-todas { --eco-cor: #D9C9B6; }
.ecop-pagina .eco-todas.ativo { background: #4A3A2C; border-color: #4A3A2C; }
/* perguntas em lista de cartões brancos */
.ecop-pagina .eco-perguntas { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ecop-pagina .eco-pergunta { flex-direction: row; align-items: stretch; border: 0; border-radius: 18px; box-shadow: 0 1px 0 #F1E2CF; }
.ecop-pagina .eco-pergunta:hover { box-shadow: 0 0 0 2px var(--eco-cor, #C2410C); }
.ecop-pagina .eco-foto { flex: 0 0 150px; aspect-ratio: auto; min-height: 112px; }
.ecop-pagina .eco-pergunta-texto { padding: 14px 18px; justify-content: center; gap: 6px; }
.ecop-pagina .eco-pergunta-titulo { font-size: 19px; color: #7A2A08; }
.ecop-pagina .eco-pergunta-resumo { font-size: 15px; line-height: 1.45; color: #4A3A2C; }
/* temas da entrada em cartões brancos com marca de cor */
.ecop-pagina .eco-temas { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ecop-pagina .eco-tema { background: #FFF; border-left: 0; min-height: 0; padding: 16px 18px; border-radius: 18px; box-shadow: 0 1px 0 #F1E2CF; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 12px; }
.ecop-pagina .eco-tema::before { content: ""; flex: 0 0 14px; height: 14px; border-radius: 50%; background: var(--eco-cor); }
.ecop-pagina .eco-tema:hover { box-shadow: 0 0 0 2px var(--eco-cor); }
.ecop-pagina .eco-tema-nome { flex: 1; font-size: 18px; color: #26313D; }
.ecop-pagina .eco-tema-conta { flex: 0 0 100%; padding-left: 26px; font-size: 14px; color: #6B5A4A; }
.ecop-pagina .eco-adultos { background: #E3F1EA !important; border: 2px solid #2F7D5B !important; border-radius: 18px !important; padding: 18px 22px !important; font-size: 17px !important; line-height: 1.5; color: #1F3B2E; }
.ecop-pagina .eco-adultos strong { color: #1E5C41; font-weight: 800; }
.ecop-pagina .eco-adultos a { color: #1E5C41 !important; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
    .ecop-pagina .eco-foto { flex-basis: 96px; min-height: 96px; }
    .ecop-pagina .eco-pergunta-resumo { display: none; }
    .ecop-pagina .eco-pergunta-titulo { font-size: 17px; }
}

/* 0.11.1 (Luiz, 29/10): na entrada da base, os três títulos com cores tiradas do nome Ecopedinha. */
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) .eco-titulo { color: #B02A6B !important; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) ~ .eco-bloco:nth-of-type(1) h2 { color: #0F7A8C !important; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) ~ .eco-bloco:nth-of-type(2) h2 { color: #2B8A3E !important; }
.ecoc-so-nome .ecoc-in { justify-content: center; text-align: center; }
.ecoc-na-pergunta { background: none; border: 0; margin: 0 0 28px; }
.ecoc-na-pergunta .ecoc-busca { max-width: 640px; width: 100%; flex: none; }
.ecoc-dica { margin: 6px auto 0; font-size: 13px; line-height: 1.4; color: #6B5A48; max-width: 640px; }
.ecoc-barra .ecoc-dica { text-align: left; }
.ecoc-sobrio .ecoc-dica { color: #4F5B67; }
.ecoc-na-pergunta .ecoc-dica { margin-left: 0; }
/* 0.12.0: busca que responde — a pergunta que mais combina vem em destaque. */
.ecop-pagina .eco-melhor { background: #FFF; border: 2px solid #F59F00; border-radius: 18px; padding: 16px 18px 6px; margin: 0 0 26px; }
.ecop-pagina .eco-melhor h2, .ecop-pagina .eco-parecidas { font-size: 20px !important; color: #7A2A08 !important; margin: 0 0 12px !important; }
.ecop-pagina .eco-melhor .eco-perguntas { margin: 0; }
.ecop-pagina .eco-melhor .eco-pergunta { box-shadow: none; border: 0; padding-left: 0; padding-right: 0; }

/* 0.13.0 (Luiz, 29/10): busca em forma de conversa. */
.ecop-pagina:has(.ecob) .ecoc-barra { display: none; }
.ecop-pagina .ecob { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.ecob-linha { display: flex; gap: 10px; align-items: flex-end; }
.ecob-crianca { justify-content: flex-end; }
.ecob-avatar { flex: 0 0 42px; height: 42px; border-radius: 50%; background: #2F9E44; color: #FFF; display: grid; place-items: center; font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; font-size: 21px; }
.ecob-balao { max-width: 84%; margin: 0; padding: 12px 16px; border-radius: 20px; background: #FFF; box-shadow: 0 1px 0 #F1E2CF; color: #26313D; font-size: 17px; line-height: 1.5; }
.ecob-crianca .ecob-balao { background: #FFE8CC; border-bottom-right-radius: 6px; font-weight: 700; }
.ecob-eco .ecob-balao { border-bottom-left-radius: 6px; }
.ecob-fala { margin: 0; }
.ecob-fala a { color: #1E5C41; font-weight: 800; }
.ecob-resp { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.ecob-resp.ecob-sem-foto { grid-template-columns: 1fr; }
.ecob-resp img { width: 170px; height: 113px; object-fit: cover; border-radius: 14px; display: block; }
.ecop-pagina .ecob-titulo { font-family: 'Fredoka', 'Nunito', sans-serif !important; font-size: 21px !important; color: #7A2A08 !important; margin: 6px 0 6px !important; line-height: 1.25; }
.ecob-texto { margin: 0; }
.ecob-botao { display: inline-block; margin-top: 10px; background: #C2410C; color: #FFF !important; font-weight: 800; text-decoration: none !important; border-radius: 14px; padding: 9px 16px; }
.ecob-botao:focus-visible, .ecob-chip:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.ecob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ecob-chip { border: 2px solid #F1E2CF; background: #FFF9F1; color: #26313D !important; border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 15px; text-decoration: none !important; }
.ecob-chip:hover { border-color: #C2410C; }
.ecob-lista { margin-left: 52px; }
.ecob-campo { margin: 6px 0 0 52px; max-width: none; --ecoc-campo: #FFC078; --ecoc-botao: #C2410C; }
@media (max-width: 600px) {
    .ecob-resp { grid-template-columns: 1fr; }
    .ecob-resp img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
    .ecob-balao { max-width: 88%; }
    .ecob-lista, .ecob-campo { margin-left: 0; }
}

/* 0.14.0: Enciclopédia dos Bichos na entrada. */
.ecop-pagina .eco-bichos { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #FFF4E0; border: 2px solid #E8590C; border-radius: 22px; padding: 20px 24px; text-decoration: none !important; color: #3B2410 !important; }
.ecop-pagina .eco-bichos:hover { box-shadow: 0 0 0 3px #E8590C33; }
.ecop-pagina .eco-bichos:focus-visible { outline: 3px solid #1D4F91; outline-offset: 3px; }
.eco-bichos-texto { display: flex; flex-direction: column; gap: 4px; flex: 1 1 380px; }
.eco-bichos-novo { align-self: flex-start; background: #F59F00; color: #2B1A00; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 2px 12px; }
.eco-bichos-titulo { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 700; font-size: 26px; color: #9A3412; }
.eco-bichos-lead { font-size: 17px; }
.eco-bichos-lista { font-size: 15px; color: #6B4A2B; font-weight: 700; }
.eco-bichos-botao { background: #C2410C; color: #FFF; font-weight: 800; border-radius: 14px; padding: 11px 18px; white-space: nowrap; }

/* 0.15.0 (Luiz, 29/10): busca dentro da faixa grande, com chamada e sugestões; títulos da entrada com as cores do nome. */
.ecoc-grande .ecoc-in .ecoc-barra { background: none; border: 0; padding: 0; margin-top: 8px; width: min(440px, 100%); }
.ecoc .ecoc-barra p.ecoc-chamada { margin: 0 0 10px !important; font-family: 'Nunito', system-ui, sans-serif; font-weight: 900; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; color: #1E3A5F; }
.ecoc-grande .ecoc-in .ecoc-busca { width: 100%; max-width: none; gap: 0; background: #FFF; border: 3px solid #E8590C; border-radius: 999px; padding: 5px; box-shadow: 0 8px 24px rgba(232, 89, 12, .18); }
.ecoc-grande .ecoc-in .ecoc-busca:focus-within { outline: 3px solid #1D4F91; outline-offset: 2px; }
.ecoc-grande .ecoc-in .ecoc-busca input[type=search] { border: 0; outline: 0; height: 50px; border-radius: 999px; padding: 0 12px 0 46px; font-size: 18px; background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23C2410C' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") 15px center no-repeat; box-shadow: none; }
.ecoc-grande .ecoc-in .ecoc-busca button { height: 50px; border-radius: 999px; padding: 0 24px; font-size: 18px; font-weight: 900; background: #C2410C; }
.ecoc .ecoc-barra p.ecoc-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 !important; }
.ecoc a.ecoc-sug { font-family: 'Nunito', system-ui, sans-serif; font-weight: 800; font-size: 15px; line-height: 1.2; padding: 7px 14px; border-radius: 999px; background: #FFF; border: 2px solid currentColor; text-decoration: none !important; }
.ecoc a.ecoc-sug:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.ecoc a.ecoc-sug:focus-visible { outline: 3px solid #1D4F91; outline-offset: 2px; }
.ecoc a.ecoc-sug-1 { color: #0F7A8C !important; }
.ecoc a.ecoc-sug-2 { color: #237032 !important; }
.ecoc a.ecoc-sug-3 { color: #9C36B5 !important; }
.ecoc a.ecoc-sug-4 { color: #C92A2A !important; }
.ecoc-sobrio .ecoc-in .ecoc-busca { border-color: #3B5B7E; box-shadow: none; }
.ecoc-sobrio .ecoc-in .ecoc-busca button { background: #3B5B7E; }
.ecoc-sobrio .ecoc-in .ecoc-busca, .ecoc-sobrio .ecoc-in .ecoc-busca input[type=search], .ecoc-sobrio .ecoc-in .ecoc-busca button, .ecoc-sobrio a.ecoc-sug { border-radius: 10px; }
/* Computador: a faixa ganha altura para caber a busca. */
@media (min-width: 1181px) {
    .ecoc-grande .ecoc-arte { aspect-ratio: auto; height: calc(min(100vw, 1344px) * .3125); min-height: 460px; background-position: center; }
    .ecoc-grande .ecoc-in { top: 40px; }
}
/* Tablet: a faixa cresce com o conteúdo. */
@media (max-width: 1180px) and (min-width: 601px) {
    .ecoc-grande .ecoc-arte { height: auto; min-height: 300px; }
    .ecoc-grande .ecoc-in { position: relative; left: auto; right: auto; top: auto; transform: none; margin-left: 380px; padding: 24px 16px; }
}
@media (max-width: 600px) {
    .ecoc-grande .ecoc-in .ecoc-barra { width: 100%; }
    .ecoc-grande .ecoc-in .ecoc-busca input[type=search] { font-size: 16px; }
    .ecoc-grande .ecoc-in .ecoc-busca button { padding: 0 16px; font-size: 16px; }
}
/* Títulos da entrada (modelo A). Na conversa da busca a faixa continua escondendo a barra (regra 0.13.0). */
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) .eco-titulo .eco-t1 { color: #D9480F; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) .eco-titulo .eco-t2 { color: #3B5BDB; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) .eco-titulo .eco-t3 { color: #2B8A3E; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) ~ .eco-bloco:nth-of-type(1) h2 { color: #0F7A8C !important; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) ~ .eco-bloco:nth-of-type(2) h2 { color: #9C36B5 !important; }
.ecop-pagina .eco > .eco-topo:not(.eco-topo-tema) ~ .eco-bloco h2::after { content: ""; display: block; width: 56px; height: 5px; border-radius: 5px; margin-top: 6px; background: currentColor; }