/*
 * Reservamed — Hero com vidro fumê neutro, sem aspecto fosco.
 * Carregar depois de style.css. Mantém Hanken Grotesk e Open Sans.
 * Tamanho e largura do H1 são ajustados aqui, inclusive nos breakpoints.
 * O painel é desenhado atrás do conteúdo para preservar seu alinhamento.
 */

.hero .hero-photo {
  filter: none;
  opacity: 1;
}

.hero .hero-shade,
.hero .hero-glow {
  display: none;
}

.hero .hero-copy {
  width: calc(100% - 312px);
}

.hero h1 {
  font-size: 3.8rem;
  max-width: none;
  /* A quebra entre as duas frases continua definida pelo <br> no HTML. */
  text-wrap: wrap;
}

.hero .hero-copy::before {
  content: "";
  position: absolute;
  inset: -32px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-top-color: rgba(255, 255, 255, 0.65);
  border-left-color: rgba(255, 255, 255, 0.42);
  border-radius: 28px;
  background: rgba(18, 24, 30, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 16px 44px rgba(12, 18, 24, 0.18);
}

.hero h1,
.hero h1 span,
.hero .hero-float strong {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.hero .eyebrow,
.hero .hero-float > span:first-child,
.hero .float-foot {
  color: #f1f4f6;
}

.hero .hero-description {
  width: 100%;
  max-width: none;
  color: #f5f6f7;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero .hero-actions {
  flex-wrap: wrap;
  max-width: none;
}

.hero .button-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(12, 18, 24, 0.22);
}

.hero .button-outline:hover {
  border-color: rgba(255, 255, 255, 0.85);
  background: rgba(12, 18, 24, 0.36);
}

/* A coluna lateral não se sobrepõe ao vidro do conteúdo principal. */
.hero .hero-floating {
  flex-direction: column;
  width: 244px;
  gap: 16px;
  bottom: 0;
}

.hero .hero-float {
  width: 100%;
  background: rgba(18, 24, 30, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.6);
  border-left-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 28px rgba(12, 18, 24, 0.15);
}

.hero .hero-float:hover {
  background: rgba(18, 24, 30, 0.84);
  border-color: rgba(255, 255, 255, 0.65);
}

/* Sem suporte ao desfoque, o fundo mais opaco acima mantém o contraste. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero .hero-copy::before,
  .hero .hero-float {
    /* Reflexo sutil limitado ao vidro, sem lavar os detalhes da fotografia. */
    background-color: rgba(18, 24, 30, 0.16);
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      transparent 35%,
      transparent 70%,
      rgba(255, 255, 255, 0.02)
    );
    /* O fumê vem da luminosidade, não de uma camada de cor quase opaca. */
    -webkit-backdrop-filter: blur(3px) brightness(0.48);
    backdrop-filter: blur(3px) brightness(0.48);
  }

  .hero .hero-float:hover {
    background-color: rgba(18, 24, 30, 0.2);
  }
}

@media (max-width: 1200px) {
  .hero .hero-copy::before {
    inset: -28px -24px;
    border-radius: 24px;
  }
}

/* Libera a coluna antes que os cards laterais apertem a primeira frase. */
@media (max-width: 1167px) {
  .hero .hero-copy {
    width: 100%;
  }

  .hero .hero-floating {
    display: none;
  }
}

@media (min-width: 701px) and (max-width: 1023px) {
  .hero h1 {
    font-size: clamp(2.625rem, calc(8vw - 5.76px), 3.5rem);
  }
}

@media (max-width: 700px) {
  .hero h1 {
    /* A primeira frase cabe na largura útil: viewport menos 40px.
       Sem nowrap, para permitir a leitura com ampliação de texto. */
    font-size: clamp(1.375rem, calc(8vw - 3.2px), 3.125rem);
  }

  .hero .hero-copy::before {
    inset: -24px -12px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .hero .hero-copy::before,
  .hero .hero-float,
  .hero .hero-float:hover {
    background: #12181e;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}