/* ==============================
   HOME — NOVA HARMONIA DE CORES
   Base clara #ebe1d5
================================ */

:root{
    --bg-main: #ebe1d5;
    --surface: #f5efe7;
    --line: #d6cfc6;
    --text-main: #1c1c1c;
    --text-muted: #4b4b4b;
  
    /* mantém identidade do site */
    --brand: var(--brand, #1f4fd8);
    --inverse: #1c1c1c;
  }
  
  /* ===== BASE ===== */
  body{
    background: var(--bg-main);
    color: var(--text-main);
  }
  
  /* ===== HERO ===== */
  .hero--home{
    padding:56px 0 24px;
    border-bottom:1px solid var(--line);
    background: var(--bg-main);
  }
  
  .hero-grid{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap:32px;
    align-items:start;
  }
  
  .hero-video{
    border-radius:18px;
    border:1px solid var(--line);
    overflow:hidden;
    background: var(--surface);
  }
  
  .hero-video img,
  .hero-video video{
    display:block;
    width:100%;
    height:100%;
    aspect-ratio:16/9;
    object-fit:cover;
    filter: brightness(0.96);
  }
  
  .hero-aside{
    display:grid;
    gap:14px;
    padding:22px;
    background: var(--surface);
    border-radius:16px;
    border:1px solid var(--line);
  }
  
  .kicker{
    color: var(--text-muted);
  }
  
  .hero-aside__title{
    margin:0;
    letter-spacing:.22em;
    text-transform:uppercase;
    font-weight:300;
    color: var(--text-main);
  }
  
  .hero-aside__excerpt{
    margin:0;
    color: var(--text-muted);
  }
  
  .hero-aside__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  
  .hero-aside__tag{
    color: var(--brand);
    text-decoration:none;
  }
  
  .hero-aside__tag:hover{
    opacity:.9;
  }
  
  .hero-aside__progress{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:8px;
  }
  
  .hero-aside__progress span{
    width:28px;
    height:2px;
    background: var(--line);
    display:inline-block;
    border-radius:1px;
  }
  
  .hero-aside__progress .is-active{
    background: var(--inverse);
  }
  
  /* ===== CTA ===== */
  .hero-cta{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  
  .hero-cta .muted{
    color: var(--text-muted);
  }
  
  .hero-cta .button--light{
    border-radius:8px;
    padding:.6rem .9rem;
    background:#fff;
    color:#111;
  }
  
  /* ===== SEÇÕES ===== */
  .section{
    background: var(--bg-main);
  }
  
  .divider{
    background: var(--line);
  }
  
  /* ===== BAND ===== */
  .band--white.on-light{
    background: var(--bg-main);
  }
  
  .section__title{
    color: var(--text-main);
  }
  
  /* ===== CARDS DE SERVIÇOS ===== */
  .card{
    background:#fff;
    border:1px solid var(--line);
    color:#111;
    border-radius:16px;
  }
  
  /* ===== RESPONSIVO ===== */
  @media (max-width: 980px){
    .hero-grid{
      grid-template-columns:1fr;
      gap:18px;
    }
    .hero-cta{
      flex-direction:column;
      align-items:flex-start;
    }
  }