/*
Theme Name: Iluminando
Theme URI: https://iluminando.app.br
Author: Iluminando
Description: Tema institucional do Iluminando — plataforma de gestão participativa da iluminação pública para prefeituras brasileiras.
Version: 1.0.0
Text Domain: iluminando
*/

:root{
  --bg:#f4f6f8;
  --panel:#ffffff;
  --line:#d9dee5;
  --text:#1f2933;
  --muted:#667085;
  --brand:#00796b;
  --brand-dark:#005b50;
  --brand-tint:#e3f1ef;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:var(--brand)}
a:focus-visible,button:focus-visible{outline:3px solid var(--brand-dark);outline-offset:2px}
.container{max-width:880px;margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:8px 14px;border-radius:0 0 6px 0;z-index:100}
.skip-link:focus{left:0}

header.hero{background:var(--panel);border-bottom:1px solid var(--line);padding:36px 0 44px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;text-decoration:none}
.brand svg{flex-shrink:0}
.brand span{font-size:20px;font-weight:700;color:var(--brand-dark);letter-spacing:-0.01em;text-decoration:none}

.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:720px){.hero-grid{grid-template-columns:1fr}}
h1{margin:0 0 10px;font-size:34px;line-height:1.2;color:var(--brand-dark)}
.hero-sub{margin:0 0 16px;font-size:17px;font-weight:600;color:var(--brand)}
.hero-text{margin:0 0 24px;color:var(--muted);font-size:16px;max-width:520px}
.hero-art{background:var(--brand-tint);border-radius:16px;padding:28px;display:flex;align-items:center;justify-content:center}
.app-shot{width:100%;max-width:220px;height:auto;display:block;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.shot-desktop{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.1);margin-top:14px}

.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.cta{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  padding:14px 22px;
  border-radius:8px;
}
.cta:hover,.cta:focus-visible{background:var(--brand-dark);color:#fff}
.cta.secondary{background:transparent;color:var(--brand-dark);border:2px solid var(--brand);padding:12px 20px}
.cta.secondary:hover{background:var(--brand-tint)}

.highlight{color:var(--brand-dark);background:var(--brand-tint);padding:1px 5px;border-radius:4px}

section{padding:44px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
section h2{font-size:22px;margin:0 0 14px;color:var(--brand-dark)}
section p{margin:0 0 12px;max-width:620px}
.badge-row{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}
.badge-num{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:stretch}
/* Com 4 cards o auto-fit da 3 + 1 orfao: cabem 3 colunas de 269px no container de
   880px, mas nao 4 de 198px. Fixar 2x2 acima de 720px resolve e ainda dobra o
   tamanho dos prints, que a 269px eram ilegiveis. Abaixo disso o auto-fit volta a
   mandar e vira coluna unica. */
@media (min-width:721px){.cards{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column}
.card h3{margin:0 0 6px;font-size:16px;color:var(--brand-dark)}
.card p{margin:0 0 14px;font-size:14px;color:var(--muted)}
.card .cta{margin-top:auto;align-self:flex-start}

/* Card do app: texto a esquerda, ilustracao a direita. O flex-wrap empilha
   em tela estreita — a arte vai para baixo do texto, centralizada. */
.card-app{flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px;margin-top:20px}
.card-app-text{flex:1 1 260px;display:flex;flex-direction:column}
.card-app-text p{margin-bottom:18px}
.card-app-art{flex:0 0 140px;width:140px;height:auto;margin:0 auto;display:block}

footer{padding:28px 0 40px;color:var(--muted);font-size:13px}
footer a{color:var(--muted)}