/* Ajustes de responsividade do Croma Hub — Brand Book v0.2 */

@media (max-width: 760px) {
  .site-header {
    min-height: 68px;
    padding: 10px 16px;
    justify-content: flex-start;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    width: auto;
    max-width: 100%;
    gap: 10px;
    flex: 0 1 auto;
    overflow: visible;
  }

  .brand img,
  .footer-brand img {
    display: block !important;
    width: auto !important;
    height: 40px !important;
    max-width: min(190px, 52vw) !important;
    object-fit: contain !important;
    object-position: left center !important;
    flex: none;
  }

  .brand-tag {
    flex: none;
    padding-left: 10px;
    font-size: .64rem;
    letter-spacing: .24em;
    line-height: 1;
  }

  .hero {
    min-height: auto;
    padding: 58px 20px 68px;
    gap: 28px;
  }

  .hero::before {
    width: 300px;
    height: 300px;
    border-width: 54px;
    right: -185px;
    top: 48px;
    opacity: .62;
  }

  .hero-copy {
    max-width: 100%;
  }

  .eyebrow {
    margin-bottom: 16px;
    font-size: .67rem;
    line-height: 1.55;
    letter-spacing: .13em;
  }

  .hero h1 {
    max-width: 12ch;
    margin-bottom: 22px;
    font-size: clamp(2.55rem, 11vw, 3.35rem);
    line-height: .98;
    letter-spacing: -.045em;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
  }

  .hero p {
    max-width: 34rem;
    margin-bottom: 26px;
    font-size: 1.04rem;
    line-height: 1.55;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 360px;
  }

  .hero-actions .btn {
    width: 100%;
    min-height: 52px;
  }

  .hero-values {
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
  }

  .hero-art {
    min-height: 320px;
    margin-top: 4px;
  }

  .hero-card {
    inset: 38px 18px 28px 6px;
    padding: 26px;
    border-radius: 26px;
  }

  .hero-card::before {
    width: 250px;
    height: 250px;
    border-width: 52px;
    right: -92px;
    top: -92px;
  }

  .hero-card strong {
    max-width: 11ch;
    font-size: 1.72rem;
    line-height: 1.04;
  }

  .iris-1 { width: 108px; height: 108px; right: 2px; }
  .iris-2 { width: 86px; height: 86px; right: 2px; bottom: 15px; }
  .iris-3 { width: 82px; height: 82px; left: 2px; }
}

@media (max-width: 420px) {
  .site-header { min-height: 64px; padding-inline: 14px; }

  .brand img,
  .footer-brand img {
    height: 36px !important;
    max-width: 165px !important;
  }

  .brand-tag {
    font-size: .6rem;
    letter-spacing: .2em;
    padding-left: 8px;
  }

  .hero {
    padding: 50px 18px 60px;
  }

  .hero h1 {
    max-width: 11.5ch;
    font-size: clamp(2.35rem, 10.8vw, 2.9rem);
    line-height: 1;
  }

  .hero p { font-size: 1rem; }
  .hero-values { grid-template-columns: 1fr 1fr; }
}