/* EcoLar Cestas — style.css
   Cores extraidas da logo: cinza #484848, verde #8AA02C, amarelo #E0B018 */
:root{
  --verde:#8AA02C;
  --verde-escuro:#5F701C;   /* texto/botao com contraste AA sobre branco */
  --verde-claro:#EEF3DC;
  --amarelo:#E0B018;
  --amarelo-claro:#FBF3D6;
  --cinza:#484848;
  --cinza-escuro:#2E2E2E;
  --cinza-medio:#6B6B6B;
  --linha:#E3E3DC;
  --fundo:#FAFAF6;
  --branco:#FFFFFF;
  --whats:#1FA855;
  --raio:14px;
  --sombra:0 6px 24px rgba(46,46,46,.08);
  --max:1180px;
  --titulo:'Oswald',Impact,'Arial Narrow',sans-serif;
  --texto:'Nunito Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--texto);font-size:17px;line-height:1.6;color:var(--cinza);background:var(--fundo)}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde-escuro)}
a:hover{color:var(--cinza-escuro)}
h1,h2,h3,h4{font-family:var(--titulo);font-weight:600;line-height:1.15;color:var(--verde-escuro);margin:0 0 .5em;letter-spacing:.2px}
h1{font-size:clamp(2rem,4.6vw,3.3rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:absolute;left:-999px;top:0;background:var(--cinza-escuro);color:#fff;padding:10px 16px;z-index:200}
.pular:focus{left:10px}
:focus-visible{outline:3px solid var(--amarelo);outline-offset:2px}

/* ---------- Topo ---------- */
.topo{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linha);backdrop-filter:blur(6px)}
.topo .container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{flex:none}
.logo img{width:170px;height:auto}
.menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;white-space:nowrap;padding:8px 9px;border-radius:8px;text-decoration:none;color:var(--cinza);font-weight:700;font-size:15px}
.menu a:hover,.menu a[aria-current="page"]{background:var(--verde-claro);color:var(--verde-escuro)}
.menu .btn{display:inline-flex;align-items:center;gap:8px;margin-left:8px;border-radius:999px;padding:10px 18px;line-height:1}
.menu .btn svg{width:20px;height:20px;display:block}
.menu-btn{display:none;background:none;border:2px solid var(--linha);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--cinza)}
.menu-btn svg{display:block}
@media (max-width:1240px){
  .menu-btn{display:block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--linha);padding:10px 20px 18px;box-shadow:var(--sombra)}
  .menu.aberto{display:flex}
  .menu a{padding:12px 10px;font-size:17px}
  .menu .btn{margin:8px 0 0;text-align:center}
}

/* ---------- Botoes ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;border:0;font-family:var(--texto);font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;line-height:1.2}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.12)}
.btn svg{flex:none}
.btn-whats{background:var(--whats);color:#fff !important}
.btn-whats:hover{background:#178a45;color:#fff}
.btn-verde{background:var(--verde-escuro);color:#fff !important}
.btn-verde:hover{background:var(--cinza-escuro)}
.btn-contorno{background:transparent;color:var(--cinza-escuro) !important;box-shadow:inset 0 0 0 2px var(--cinza-escuro)}
.btn-contorno:hover{background:var(--cinza-escuro);color:#fff !important}
.btn-pequeno{padding:10px 18px;font-size:15px}
.btn-bloco{width:100%}

/* WhatsApp fixo */
.whats-fixo{position:fixed;right:18px;bottom:18px;z-index:150;width:62px;height:62px;border-radius:50%;background:var(--whats);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .15s}
.whats-fixo:hover{transform:scale(1.07);color:#fff}
.whats-fixo svg{width:34px;height:34px}

/* ---------- Secoes ---------- */
.secao{padding:72px 0}
.secao-clara{background:var(--branco)}
.secao-verde{background:var(--verde-claro)}
.secao-escura{background:var(--cinza-escuro);color:#E9E9E4}
.secao-escura h2,.secao-escura h3{color:#fff}
.sobretitulo{display:inline-block;font-weight:800;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--verde-escuro);margin-bottom:10px}
.secao-escura .sobretitulo{color:var(--amarelo)}
.cabecalho-secao{max-width:720px;margin:0 0 36px}
.cabecalho-secao.centro{margin-left:auto;margin-right:auto;text-align:center}
.lead{font-size:1.15rem;color:var(--cinza-medio)}
.secao-escura .lead{color:#CFCFC8}

/* Hero */
.hero{background:linear-gradient(180deg,#fff 0%,var(--fundo) 100%);padding:56px 0 64px;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 span{color:var(--verde-escuro)}
.hero .apoio{font-size:1.2rem;color:var(--cinza-medio);max-width:520px}
.hero .acoes{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 22px}
.hero .selos{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:0;font-weight:700;font-size:15px}
.hero .selos li{display:flex;align-items:center;gap:6px}
.hero .selos svg{color:var(--verde)}
.hero-foto{position:relative}
.hero-foto img{border-radius:22px;box-shadow:var(--sombra);aspect-ratio:4/3;object-fit:contain;background:#fff;width:100%}
.hero-foto .etiqueta{position:absolute;left:-14px;bottom:22px;background:var(--amarelo);color:var(--cinza-escuro);font-family:var(--titulo);font-size:1.25rem;padding:10px 18px;border-radius:12px;box-shadow:var(--sombra)}
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr}
  .hero-foto .etiqueta{left:10px}
}

/* Diferenciais */
.grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grade-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:center}
@media (max-width:860px){.grade-3,.grade-2{grid-template-columns:1fr}}
.cartao{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:28px;box-shadow:var(--sombra)}
.cartao .icone{width:54px;height:54px;border-radius:14px;background:var(--verde-claro);color:var(--verde-escuro);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cartao p:last-child{margin-bottom:0}

/* Vitrine de cestas */
.vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.produto{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .15s,box-shadow .15s}
.produto:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(46,46,46,.12)}
.produto img{aspect-ratio:4/3;object-fit:contain;width:100%;background:#fff}
.produto .corpo{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.produto h3{margin:0;font-size:1.35rem}
.produto h3 a{text-decoration:none;color:var(--verde-escuro)}
.produto h3 a::after{content:"";position:absolute;inset:0}
.produto{position:relative}
.produto .info{font-size:15px;color:var(--cinza-medio)}
.preco{font-family:var(--titulo);color:var(--cinza-escuro);font-size:1.9rem;line-height:1}
.preco small{font-size:.55em;vertical-align:top;margin-right:2px}
.preco sup{font-size:.5em}
.vitrine.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.vitrine.tres{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.vitrine.tres{grid-template-columns:1fr}}
.produto .ver{margin-top:auto;padding-top:10px;font-weight:800;color:var(--verde-escuro)}
.faixa-cat{display:inline-block;align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;background:var(--amarelo-claro);color:#6b5205;padding:3px 9px;border-radius:999px}

/* Banner */
.banner{background:var(--verde-escuro);color:#fff;border-radius:22px;padding:44px;display:grid;grid-template-columns:1.4fr auto;gap:24px;align-items:center}
.banner h2{color:#fff;margin-bottom:.2em}
.banner p{margin:0;color:#E6EDCC;font-size:1.1rem}
.banner.amarelo{background:var(--amarelo);color:var(--cinza-escuro)}
.banner.amarelo h2{color:var(--cinza-escuro)}
.banner.amarelo p{color:#4a3c05}
@media (max-width:760px){.banner{grid-template-columns:1fr;padding:30px}}

/* Historia / versiculo */
.foto-moldura img{border-radius:18px;box-shadow:var(--sombra)}
.foto-moldura figcaption{font-size:14px;color:var(--cinza-medio);margin-top:10px}
.versiculo{border-left:5px solid var(--amarelo);background:#fff;padding:22px 26px;border-radius:0 var(--raio) var(--raio) 0;font-size:1.15rem;font-style:italic;margin:24px 0}
.versiculo cite{display:block;margin-top:8px;font-style:normal;font-weight:800;font-size:15px;color:var(--verde-escuro)}
.secao-escura .versiculo{background:rgba(255,255,255,.06);color:#fff}
.secao-escura .versiculo cite{color:var(--amarelo)}
.valores{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.valores li{background:#fff;border:1px solid var(--linha);border-radius:999px;padding:7px 16px;font-weight:700;font-size:15px}

/* Listas com check */
.check{list-style:none;padding:0;margin:0 0 1em}
.check li{position:relative;padding-left:32px;margin-bottom:10px}
.check li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- Pagina de produto ---------- */
.migalhas{font-size:14px;padding:18px 0 0;color:var(--cinza-medio)}
.migalhas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.migalhas li+li::before{content:"›";margin-right:6px}
.migalhas a{color:var(--cinza-medio)}
.ficha{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start;padding:28px 0 20px}
@media (max-width:900px){.ficha{grid-template-columns:1fr;gap:26px}}
.galeria .principal{background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden}
.galeria .principal img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.galeria .miniaturas{display:flex;gap:12px;margin-top:12px}
.galeria .miniaturas button{padding:0;border:2px solid var(--linha);border-radius:12px;overflow:hidden;background:#fff;cursor:pointer;width:96px}
.galeria .miniaturas button[aria-pressed="true"]{border-color:var(--verde)}
.galeria .miniaturas img{aspect-ratio:1;object-fit:cover;width:100%}
.resumo h1{margin-bottom:.2em}
.resumo .meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--cinza-medio);font-weight:700;margin-bottom:16px}
.resumo .preco{font-size:3rem;margin:4px 0 6px}
.resumo .obs-preco{font-size:14px;color:var(--cinza-medio);margin-bottom:22px}
.aviso{background:var(--amarelo-claro);border:1px solid #F0DC96;border-radius:12px;padding:14px 16px;font-size:15px;color:#5a4506;margin:18px 0}
.tabela-itens{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;font-size:16px}
.tabela-itens th,.tabela-itens td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--linha)}
.tabela-itens thead th{background:var(--verde-escuro);color:#fff;font-weight:800;font-size:14px;letter-spacing:.5px;text-transform:uppercase}
.tabela-itens td:first-child,.tabela-itens th:first-child{width:64px;text-align:center;font-weight:800}
.tabela-itens td:last-child,.tabela-itens th:last-child{text-align:right;white-space:nowrap}
@media (max-width:560px){.tabela-itens{font-size:15px}.tabela-itens th,.tabela-itens td{padding:9px 8px}.tabela-itens td:first-child,.tabela-itens th:first-child{width:44px}}
.tabela-itens tbody tr:nth-child(even){background:#FBFBF7}
.tabela-itens tfoot td{font-weight:800;background:var(--verde-claro);text-align:left !important}

/* ---------- Formularios ---------- */
.painel{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:26px;box-shadow:var(--sombra)}
.painel h2,.painel h3{margin-top:0}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.campo label{font-weight:800;font-size:15px}
.campo .ajuda{font-size:13px;color:var(--cinza-medio)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid #D3D3CB;border-radius:10px;background:#fff;color:var(--cinza-escuro);width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(138,160,44,.25)}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.campos-2{grid-template-columns:1fr}}
.erro-form{color:#A12C1B;font-weight:700;font-size:15px;min-height:1.2em;margin:4px 0 10px}
.nota-form{font-size:13px;color:var(--cinza-medio);margin-top:10px}

/* Monte sua cesta */
.monte{display:grid;grid-template-columns:1.5fr 1fr;gap:30px;align-items:start}
@media (max-width:920px){.monte{grid-template-columns:1fr}}
.grupo-itens{margin-bottom:28px}
.grupo-itens h2{font-size:1.5rem;display:flex;align-items:center;gap:10px}
.lista-itens{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.lista-itens li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:1px solid var(--linha)}
.lista-itens li:last-child{border-bottom:0}
.lista-itens li.ativo{background:var(--verde-claro)}
.lista-itens .nome{font-weight:700}
.lista-itens .nome small{display:block;font-weight:600;color:var(--cinza-medio);font-size:13px}
.contador{display:flex;align-items:center;gap:6px;flex:none}
.contador button{width:38px;height:38px;border-radius:50%;border:1.5px solid #CFCFC6;background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--cinza-escuro);display:flex;align-items:center;justify-content:center}
.contador button:hover{border-color:var(--verde);color:var(--verde-escuro)}
.contador output{min-width:26px;text-align:center;font-weight:800;font-size:17px}
.resumo-monte{position:sticky;top:96px}
.resumo-monte .contagem{font-family:var(--titulo);font-size:1.4rem;color:var(--verde-escuro)}
.resumo-monte ul{list-style:none;padding:0;margin:8px 0 16px;max-height:220px;overflow:auto;font-size:15px}
.resumo-monte ul li{padding:4px 0;border-bottom:1px dashed var(--linha)}
.resumo-monte .vazio{color:var(--cinza-medio);font-size:15px}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);margin-bottom:12px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font-weight:800;font-size:1.05rem;position:relative;color:var(--cinza-escuro)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:26px;color:var(--verde-escuro);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq .resposta{padding:0 20px 18px}
.faq .resposta ul{margin:0;padding-left:20px}

/* Contato */
.info-contato{list-style:none;padding:0;margin:0}
.info-contato li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--linha)}
.info-contato li:last-child{border-bottom:0}
.info-contato svg{flex:none;color:var(--verde-escuro);margin-top:3px}
.info-contato strong{display:block;color:var(--cinza-escuro)}
.mapa{border:0;width:100%;height:380px;border-radius:18px;box-shadow:var(--sombra);background:#eee}

/* ---------- Rodape ---------- */
.rodape{background:var(--cinza-escuro);color:#D6D6CF;padding:56px 0 24px;font-size:15px}
.rodape a{color:#fff;text-decoration:none}
.rodape a:hover{color:var(--amarelo)}
.rodape .colunas{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
@media (max-width:900px){.rodape .colunas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rodape .colunas{grid-template-columns:1fr}}
.rodape h2{font-family:var(--texto);font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--amarelo);margin-bottom:14px}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:8px}
.rodape .logo-rodape img{width:170px;margin-bottom:14px}
.rodape .slogan{font-style:italic;color:#fff}
.rodape .base{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:13px;color:#A9A9A2}
.rodape .base a{color:#D6D6CF;text-decoration:underline}

/* Utilitarios */
.centro{text-align:center}
.mt-0{margin-top:0}
.mt-2{margin-top:24px}
.acoes-linha{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.nao-quebra{white-space:nowrap}
.pagina-topo{padding:44px 0 8px}
.pagina-topo .lead{max-width:760px}
.erro-404{padding:90px 0;text-align:center}
.erro-404 .codigo{font-family:var(--titulo);font-size:7rem;line-height:1;color:var(--verde)}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* v2 — ajustes de cor e legendas */
.ilustrativa{font-size:12px;color:var(--cinza-medio);font-style:italic;margin:6px 0 0;line-height:1.3}
.produto .ilustrativa{margin:0;padding:6px 18px 0;background:#fff}
.hero-foto .ilustrativa{text-align:right}
.foto-moldura figcaption.ilustrativa{margin-top:8px}
.secao-escura .ilustrativa{color:#A9A9A2}
.preco{color:var(--cinza-escuro)}
.cartao h3,.grupo-itens h2,.painel h2,.painel h3,.resumo-monte h2{color:var(--verde-escuro)}
.grupo-itens h2 svg{color:var(--amarelo)}

.hero h1 span{color:var(--verde-escuro)}
.banner h2{color:#fff}
.banner.amarelo h2{color:var(--cinza-escuro)}
.faq summary{color:var(--verde-escuro)}
.erro-404 h1{color:var(--verde-escuro)}
@media (max-width:1240px){.menu .btn{display:inline-flex;justify-content:center}}
.monte>*{min-width:0}.lista-itens .nome{min-width:0;overflow-wrap:anywhere}
/* v3 — logo em destaque */
.logo img{width:255px}
@media (max-width:560px){.logo img{width:200px}}
.topo .container{min-height:96px}
.foto-card{position:relative}
.selo-logo{position:absolute;right:10px;bottom:10px;width:104px !important;height:auto !important;aspect-ratio:auto !important;background:rgba(255,255,255,.92);padding:5px 8px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08);object-fit:contain !important}
.galeria .principal{position:relative}
.galeria .principal .selo-logo{width:150px !important;right:14px;bottom:14px}
.logo-pagina{width:220px;margin-bottom:18px}
.logo-explica{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center}
.logo-explica img{width:220px}
@media (max-width:640px){.logo-explica{grid-template-columns:1fr;justify-items:center;text-align:center}}
.simbolos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
@media (max-width:640px){.simbolos{grid-template-columns:1fr}}
.simbolos li{background:var(--verde-claro);border-radius:12px;padding:12px 16px}
.simbolos strong{color:var(--verde-escuro)}
.ficha>*{min-width:0}
@media (max-width:560px){.btn{white-space:normal;text-align:center}}