/* HERO — organização do CTA de agendamento (desktop + mobile)
   Apenas posicionamento/aparência. Não altera href, JS ou lógica de agendamento. */

/* Desktop: deixa o CTA realmente encostado na lateral esquerda da foto,
   menor e alinhado com o rodapé visual do hero. */
@media (min-width: 721px) {
  .hero-visual .hero-booking-chip {
    left: 22px !important;
    right: auto !important;
    bottom: 34px !important;
    top: auto !important;
    min-width: 236px !important;
    min-height: 60px !important;
    grid-template-columns: 44px minmax(0,1fr) 28px !important;
    gap: 9px !important;
    padding: 8px 10px 8px 8px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg,rgba(5,14,8,.96),rgba(4,10,6,.9)) !important;
    box-shadow: 0 16px 38px rgba(0,0,0,.42), 0 0 0 1px rgba(32,240,68,.035) inset !important;
    transform: none !important;
  }
  .hero-visual .hero-booking-chip:hover {
    transform: translateY(-2px) !important;
  }
  .hero-visual .hero-booking-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
  }
  .hero-visual .hero-booking-icon svg { width: 20px !important; height: 20px !important; }
  .hero-visual .hero-booking-copy small { font-size: 7.2px !important; margin-bottom: 3px !important; }
  .hero-visual .hero-booking-copy strong { font-size: 12px !important; }
  .hero-visual .hero-booking-arrow { width: 27px !important; height: 27px !important; }

  /* Mantém o selo do outro lado e cria uma linha visual limpa no rodapé da foto. */
  .hero-visual .badge-card {
    right: 24px !important;
    bottom: 34px !important;
  }
}

/* Notebooks / desktops mais estreitos */
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-visual .hero-booking-chip {
    left: 14px !important;
    bottom: 24px !important;
    min-width: 208px !important;
    min-height: 54px !important;
    grid-template-columns: 38px minmax(0,1fr) 25px !important;
    padding: 7px 8px 7px 7px !important;
  }
  .hero-visual .hero-booking-icon { width: 38px !important; height: 38px !important; }
  .hero-visual .hero-booking-copy small { font-size: 6.4px !important; }
  .hero-visual .hero-booking-copy strong { font-size: 10.5px !important; }
  .hero-visual .hero-booking-arrow { width: 24px !important; height: 24px !important; }
  .hero-visual .badge-card { right: 14px !important; bottom: 24px !important; }
}

/* Mobile: organiza CTA e selo em duas faixas separadas na parte inferior,
   sem um invadir o outro e sem cobrir o texto do topo. */
@media (max-width: 720px) {
  .hero-visual .hero-booking-chip {
    left: 14px !important;
    right: 14px !important;
    top: auto !important;
    bottom: 128px !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 56px !important;
    grid-template-columns: 40px minmax(0,1fr) 28px !important;
    gap: 9px !important;
    padding: 8px 10px 8px 8px !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg,rgba(5,15,8,.97),rgba(4,10,6,.91)) !important;
    box-shadow: 0 14px 32px rgba(0,0,0,.42), 0 0 20px rgba(32,240,68,.055) !important;
  }
  .hero-visual .hero-booking-copy small {
    font-size: 6.8px !important;
    letter-spacing: .14em !important;
  }
  .hero-visual .hero-booking-copy strong {
    font-size: 11.5px !important;
    white-space: normal !important;
  }
  .hero-visual .hero-booking-arrow {
    width: 27px !important;
    height: 27px !important;
  }
  .hero-visual .badge-card {
    left: 14px !important;
    right: 14px !important;
    bottom: 28px !important;
    width: auto !important;
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
  }
  .hero-visual .badge-card svg { font-size: 29px !important; }
  .hero-visual .badge-card strong { font-size: 9.5px !important; }
  .hero-visual .badge-card small { font-size: 8.5px !important; }
}

@media (max-width: 390px) {
  .hero-visual .hero-booking-chip {
    left: 10px !important;
    right: 10px !important;
    bottom: 120px !important;
  }
  .hero-visual .badge-card {
    left: 10px !important;
    right: 10px !important;
    bottom: 22px !important;
  }
}