/* HERO */
    .hero{
        position:relative;
        min-height:78vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:120px 20px 40px;
        overflow: hidden;
    }

    .hero-canvas{
        position:absolute;
        inset:0;
        z-index:0}

    #globeCanvas{
        width:100%;
        height:100%;
        display:block;
        opacity: 0.85;
    }

    .hero-inner{
        position:relative;
        z-index:2;
        max-width:1100px;
        width:100%;
        display:grid;
        grid-template-columns:1fr 420px;
        gap:28px;
        align-items:center}

    .hero-text{
        background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
        padding:28px;
        border-radius:var(--radius);
        box-shadow:0 10px 30px rgba(11,17,24,0.08)}

    .hero h1{
        font-family:'Playfair Display';
        margin:0;
        font-size:36px;
        color:var(--blue-deep)}

    .hero p{
        margin:12px 0 18px;
        color:rgba(27,42,56,0.9);
        line-height:1.5}

    .hero .meta{
        display:flex;
        gap:12px;
        flex-wrap:wrap}

    .pill{
        background:var(--beige);
        padding:8px 12px;
        border-radius:10px;
        border:1px solid rgba(0,0,0,0.04);
        font-weight:600}

    .cta-group{
        display:flex;
        gap:12px;
        margin-top:10px}

    .btn{
        padding:12px 16px;
        border-radius:12px;
        border:0;
        cursor:pointer;
        font-weight:700}

    .btn-primary{
        background:var(--brown);
        color:var(--beige)}

    .btn-ghost{background:transparent;
        border:2px solid var(--brown);
        color:var(--brown)}

    .hero-figure{
        position:relative;
        z-index:2;
        display:flex;
        align-items:center;
        justify-content:center;
        margin:0;
        padding:0;
        pointer-events:none;
        width:100%}

    .hero-image-large{
      display:block;
      max-width:92vw;
      width:auto;
      max-height:82vh;
      height:auto;
      object-fit:contain;
      border-radius:18px;
      animation: floatY 7s ease-in-out infinite;
      transform-origin:center;
      transition: transform 300ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms;
      pointer-events:auto;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
    }

    /* Animação sutil do logo */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* RESPONSIVIDADE */
@media (max-width: 1024px) {
  .hero {
    padding: 100px 16px 40px;
    min-height: 72vh;
  }

  .hero-image-large {
    max-width: 75vw;
    max-height: 58vh;
  }
}

@media (max-width: 768px) {
  .hero {
    padding: 90px 12px 30px;
    min-height: 65vh;
  }

  .hero-image-large {
    max-width: 82vw;
    max-height: 50vh;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 80px 10px 24px;
    min-height: 60vh;
  }

  .hero-image-large {
    max-width: 88vw;
    max-height: 42vh;
  }

  #globeCanvas {
    opacity: 0.75; /* reduz o destaque do globo em telas pequenas */
  }
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, var(--beige) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}