/* =============================================
   HERO - CORREÇÃO DE RESPONSIVIDADE
   Carregar DEPOIS do Tailwind CSS.
   Não muda NADA até 1440px.
   ============================================= */

/* =============================================
   1440px+
   ============================================= */
@media (min-width: 1440px) {
  #hero-content {
    max-width: 1360px !important;
  }

  #hero-doctors {
    height: 405px !important;
  }

  #inicio h1 {
    font-size: 2.8rem !important;
  }
}

/* =============================================
   1600px+
   ============================================= */
@media (min-width: 1600px) {
  #hero-content {
    max-width: 1480px !important;
  }

  #hero-doctors {
    height: 435px !important;
  }

  #inicio h1 {
    font-size: 3rem !important;
  }

  #inicio p.leading-relaxed {
    font-size: 1.15rem !important;
  }
}

/* =============================================
   1920px+ (Full HD)
   ============================================= */
@media (min-width: 1920px) {
  #hero-content {
    max-width: 1650px !important;
  }

  #hero-doctors {
    height: 485px !important;
  }

  #inicio h1 {
    font-size: 3.4rem !important;
  }

  #inicio p.leading-relaxed {
    font-size: 1.25rem !important;
  }

  #inicio a[href*="wa.me"] {
    font-size: 1.1rem !important;
    padding: 16px 38px !important;
  }

  /* Ajustar posição dos doutores em 1920x1080 */
  #hero-doctors>div>div:nth-child(2) {
    transform: scale(1.15) translateY(85px) translateX(25px) !important;
  }

  #hero-doctors>div>div:nth-child(3) {
    transform: scale(1.1) translateY(105px) translateX(-25px) !important;
  }
}

/* =============================================
   2560px+ (QHD / 2K)
   ============================================= */
@media (min-width: 2560px) {

  /* TRAVA A ALTURA — mantém mesma proporção do Full HD */
  #inicio {
    min-height: 1080px !important;
    max-height: 1100px !important;
  }

  #hero-content {
    max-width: 2000px !important;
  }

  #inicio h1 {
    font-size: 4rem !important;
  }

  #inicio p.leading-relaxed {
    font-size: 1.4rem !important;
  }

  #inicio a[href*="wa.me"] {
    font-size: 1.2rem !important;
    padding: 18px 44px !important;
  }

  #hero-doctors [style*="scale(0.85)"] {
    transform: scale(0.95) !important;
  }

  /* Ajustar posição dos doutores em 2K */
  #hero-doctors>div>div:nth-child(2) {
    transform: scale(1.15) translateY(100px) translateX(30px) !important;
  }

  #hero-doctors>div>div:nth-child(3) {
    transform: scale(1.1) translateY(120px) translateX(-30px) !important;
  }
}

/* =============================================
   3840px+ (4K UHD)
   ============================================= */
@media (min-width: 3840px) {

  /* Sobrescreve o max-height do 2560px que cascateia */
  #inicio {
    min-height: 1400px !important;
    max-height: 1500px !important;
    padding-top: 160px !important;
  }

  #hero-content {
    max-width: 2600px !important;
  }

  #inicio h1 {
    font-size: 5rem !important;
    line-height: 1.25 !important;
  }

  #inicio p.leading-relaxed {
    font-size: 1.7rem !important;
  }

  #inicio a[href*="wa.me"] {
    font-size: 1.4rem !important;
    padding: 20px 50px !important;
  }

  /* Doutores com mais espaço vertical */
  #hero-doctors {
    height: 750px !important;
  }
}

/* =============================================
   AJUSTE DE ESCALA DOS DOUTORES
   Sobrescreve o scale() inline para diminuir
   ============================================= */
#hero-doctors>div>div[style*="transform"] {
  transform: var(--tw-transform-override) !important;
}

/* Dr. Gustavo - Desktop (baixar mais) */
#hero-doctors>div>div:nth-child(2) {
  transform: scale(1.15) translateY(80px) translateX(25px) !important;
}

/* Dra. Aussilene - Desktop (baixar mais) */
#hero-doctors>div>div:nth-child(3) {
  transform: scale(1.1) translateY(100px) translateX(-25px) !important;
}

/* =============================================
   MOBILE - CORREÇÃO DOS DOUTORES E BALÕES
   ============================================= */

/* Tablet/iPad em retrato (768x1024) - ajustar altura das imagens */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* Aumentar altura mínima do hero para acomodar texto + doutores */
  #inicio {
    min-height: 900px !important;
    overflow: visible !important;
  }

  /* Remover centralização vertical que causa corte */
  #inicio {
    align-items: flex-start !important;
  }

  /* Dr. Gustavo - iPad retrato (reduzir significativamente) */
  #hero-doctors>div>div:nth-child(2) {
    width: 55% !important;
    right: -5% !important;
  }

  /* Dra. Aussilene - iPad retrato (reduzir significativamente) */
  #hero-doctors>div>div:nth-child(3) {
    width: 52% !important;
    left: -3% !important;
  }

  /* Ajustar tamanho das imagens dos doutores - iPad retrato 
     FORÇAR contain para mostrar imagem completa */
  #hero-doctors>div>div:nth-child(2) img,
  #hero-doctors>div>div:nth-child(3) img {
    max-height: 400px !important;
    object-fit: contain !important;
    object-position: top center !important;
  }

  /* Balão Dr. Gustavo - iPad retrato */
  #hero-doctors>div>div:nth-child(4) {
    bottom: 12% !important;
    right: 3% !important;
    transform: scale(0.82) !important;
  }

  /* Balão Dra. Aussilene - iPad retrato */
  #hero-doctors>div>div:nth-child(5) {
    bottom: 18% !important;
    left: 3% !important;
    transform: scale(0.82) !important;
  }
}

/* Aumentar tamanho dos doutores no mobile */
@media (max-width: 768px) {

  /* Container dos doutores - garantir altura mínima */
  #hero-doctors {
    min-height: 500px !important;
  }

  /* Dr. Gustavo - Mobile (aumentar de 60% para 75% da largura) */
  #hero-doctors>div>div:nth-child(2) {
    width: 75% !important;
    right: -5% !important;
  }

  /* Dra. Aussilene - Mobile (aumentar de 58% para 72% da largura) */
  #hero-doctors>div>div:nth-child(3) {
    width: 72% !important;
    left: -3% !important;
  }

  /* Balão Dr. Gustavo - Mobile (posição mais baixa - no peito) */
  #hero-doctors>div>div:nth-child(4) {
    bottom: 8% !important;
    right: 8% !important;
    transform: scale(0.85) !important;
    padding: 10px 14px !important;
    min-width: 160px !important;
  }

  /* Balão Dra. Aussilene - Mobile (posição mais baixa - bem abaixo do rosto) */
  #hero-doctors>div>div:nth-child(5) {
    bottom: 5% !important;
    left: 8% !important;
    transform: scale(0.85) !important;
    padding: 10px 14px !important;
    min-width: 160px !important;
  }

  /* Ajustar tamanho do texto dos balões no mobile */
  #hero-doctors>div>div:nth-child(4) .font-headline,
  #hero-doctors>div>div:nth-child(5) .font-headline {
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
  }

  #hero-doctors>div>div:nth-child(4) .font-label,
  #hero-doctors>div>div:nth-child(5) .font-label {
    font-size: 6.5px !important;
  }

  /* Aumentar tamanho das imagens dos doutores - SUBIR para mostrar mãos */
  #hero-doctors>div>div:nth-child(2) img,
  #hero-doctors>div>div:nth-child(3) img {
    max-height: 380px !important;
    object-position: center bottom !important;
  }
}

/* Mobile muito pequeno (até 400px) */
@media (max-width: 400px) {

  /* Container dos doutores */
  #hero-doctors {
    min-height: 420px !important;
  }

  /* Dr. Gustavo - Mobile pequeno */
  #hero-doctors>div>div:nth-child(2) {
    width: 80% !important;
    right: -8% !important;
  }

  /* Dra. Aussilene - Mobile pequeno */
  #hero-doctors>div>div:nth-child(3) {
    width: 78% !important;
    left: -6% !important;
  }

  /* Balões - Mobile pequeno (mais separação vertical - posição no peito) */
  #hero-doctors>div>div:nth-child(4) {
    bottom: 10% !important;
    right: 2% !important;
    transform: scale(0.85) !important;
    padding: 10px 14px !important;
  }

  #hero-doctors>div>div:nth-child(5) {
    bottom: 16% !important;
    left: 2% !important;
    transform: scale(0.85) !important;
    padding: 10px 14px !important;
  }

  /* Texto dos balões - mobile pequeno */
  #hero-doctors>div>div:nth-child(4) .font-headline,
  #hero-doctors>div>div:nth-child(5) .font-headline {
    font-size: 0.95rem !important;
  }

  #hero-doctors>div>div:nth-child(4) .font-label,
  #hero-doctors>div>div:nth-child(5) .font-label {
    font-size: 7px !important;
  }
}

/* iPad em paisagem (correção adicional) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #hero-doctors>div>div:nth-child(2) {
    width: 68% !important;
  }

  #hero-doctors>div>div:nth-child(3) {
    width: 65% !important;
  }

  #hero-doctors>div>div:nth-child(4) {
    bottom: 20% !important;
    right: 8% !important;
  }

  #hero-doctors>div>div:nth-child(5) {
    bottom: 32% !important;
    left: 8% !important;
  }
}