/* ============ Grupo Expand — estilos próprios (sobre base.css) ============ */
:root {
  --teal: #0e7a6d;
  --teal-2: #13a08e;
  --teal-dark: #0b4f4a;
  --flag-red: #d7263d;
  --flag-yellow: #f2c230;
}

.eyebrow { color: var(--teal-2); }
.section:not(.section--dark) .eyebrow { color: var(--teal); }
.hero .eyebrow, .section--dark .eyebrow { color: var(--flag-yellow); }
.hero h1 span { color: var(--flag-yellow); }
.stats li { border-left-color: var(--teal-2); }

.brand img { height: 56px; }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-2); }

/* Faixa com as cores da bandeira, por baixo do herói */
.flagbar { display: grid; grid-template-columns: 3fr 1fr 3fr 1fr 3fr; height: 6px; }
.flagbar span:nth-child(1) { background: var(--teal); }
.flagbar span:nth-child(2) { background: #fff; }
.flagbar span:nth-child(3) { background: #111; }
.flagbar span:nth-child(4) { background: var(--flag-yellow); }
.flagbar span:nth-child(5) { background: var(--flag-red); }

.hero__shade { background: linear-gradient(90deg, rgba(7,32,29,.96) 0%, rgba(7,32,29,.82) 42%, rgba(7,32,29,.3) 78%), linear-gradient(0deg, rgba(7,20,18,.96) 0%, rgba(7,20,18,0) 40%); }

/* Um só parceiro */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.promise > div { padding: 30px 28px; border-radius: var(--radius); background: var(--soft); border-top: 4px solid var(--teal); }
.promise > div:nth-child(2) { border-top-color: var(--flag-yellow); }
.promise > div:nth-child(3) { border-top-color: var(--flag-red); }
.promise b { display: block; font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--teal-dark); margin-bottom: 10px; }
.promise p { color: var(--muted); margin: 0; }

/* Áreas do grupo */
.units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.unit { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.unit:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.unit__tag { align-self: flex-start; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(14,122,109,.1); color: var(--teal); margin-bottom: 18px; }
.unit__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.unit__head h3 { margin: 0; font-size: 1.35rem; }
.unit__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: rgba(14,122,109,.1); color: var(--teal); flex: none; }
.unit__icon svg { width: 28px; height: 28px; }
.unit__icon img { width: 44px; height: 44px; }
.unit > p { color: var(--muted); }
.unit ul { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.unit li { font-size: .85rem; padding: 5px 12px; border-radius: 999px; background: var(--soft); }
.unit .btn { margin-top: auto; align-self: flex-start; }
.unit--security { background: var(--ink); color: #fff; border-color: var(--ink); }
.unit--security > p { color: rgba(255,255,255,.75); }
.unit--security li { background: var(--ink-3); }
.unit--security .unit__tag { background: rgba(242,194,48,.15); color: var(--flag-yellow); }
.unit--security .unit__icon { background: #fff; }
.unit--fire .unit__icon { background: rgba(215,38,61,.1); color: var(--flag-red); }
.unit--insurance .unit__icon { background: rgba(242,194,48,.18); color: #9a7406; }

/* Presença */
.presence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; }
.presence li { padding: 26px 22px; border-radius: var(--radius); background: var(--ink-3); }
.presence b { display: block; font-size: 1.25rem; font-weight: 600; color: #fff; }
.presence span { font-size: .9rem; color: rgba(255,255,255,.6); }
.presence li:first-child { background: var(--teal); }
.presence li:first-child span { color: rgba(255,255,255,.85); }

/* Clientes */
.clients { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.clients li { display: grid; place-items: center; text-align: center; min-height: 96px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); font-weight: 600; color: var(--teal-dark); }

/* Diagnóstico */
.cta-band { background: linear-gradient(120deg, var(--teal-dark), var(--teal)); color: #fff; border-radius: 22px; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; }
.cta-band h2 { margin-bottom: .3em; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); max-width: 52ch; }
.cta-band .hero__ctas { margin: 0; }

.portrait figcaption { border-left-color: var(--teal); }
.timeline b { color: var(--teal); }
.timeline li:last-child::before { background: var(--flag-yellow); }
.contact-list svg { color: var(--flag-yellow); }
.footer nav a:hover { color: var(--flag-yellow); }
.footer__logo { background: #fff; border-radius: 10px; padding: 6px 10px; height: 64px; width: auto; }

@media (max-width: 1000px) {
  .clients { grid-template-columns: repeat(3, 1fr); }
  .presence { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .promise, .units { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .hero__shade { background: linear-gradient(0deg, rgba(7,32,29,.97) 30%, rgba(7,32,29,.6) 100%); }
}
@media (max-width: 560px) {
  .brand img { height: 46px; }
  .clients { grid-template-columns: 1fr 1fr; }
  .presence { grid-template-columns: 1fr; }
  .unit { padding: 26px 22px; }
  .cta-band .btn { width: 100%; }
}