/* Hero compacto — neuropsicologo.co (2026-08-31)
   Ojo: este hero traía min-height:100vh, que lo obligaba a ocupar la pantalla
   entera ADEMAS de su contenido. Se libera. */
.hero, .hero-grid { min-height: 0 !important; }
.hero { padding-top: clamp(48px, 7vh, 92px) !important;
        padding-bottom: clamp(24px, 4vh, 56px) !important; }

@media (max-width: 900px) {
  .hero-inner { gap: 18px !important; }
  .hero-content h1 { font-size: clamp(26px, 7.2vw, 33px) !important; line-height: 1.16 !important; }
  .hero-desc { font-size: 14.5px !important; line-height: 1.5 !important; }
  .hero-btns { gap: 10px !important; }
  .hero-metrics { margin-top: 14px !important; gap: 10px !important;
                  display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
  .hero-metrics > * { font-size: 12px !important; }
  .photo-card, .hero-photo { max-height: 290px !important; }
  .photo-card img, .hero-photo img { max-height: 290px !important;
                                     object-fit: cover; object-position: center top; }
}

/* Móvil: faltaban 154px. Las métricas y el alto de la foto son lo prescindible
   en la primera pantalla; ambas siguen visibles al hacer scroll. */
@media (max-width: 900px) {
  .hero .hero-metrics { display: none !important; }
  .hero-visual, .hero-visual > * { max-height: 260px !important; }
  .hero-visual img { max-height: 260px !important; object-fit: cover !important;
                     object-position: center 22% !important; }
}

/* La foto caía 104px por debajo del h1: se alinea arriba. */
@media (min-width: 901px) {
  .hero-inner { align-items: start !important; }
  .hero-visual { margin-top: 0 !important; align-self: start !important; }
}

/* Barra fija: 65px en móvil, 73px en escritorio. Tenía 63px de padding y en
   escritorio el h1 quedaba tapado. */
@media (max-width: 900px) { .hero { padding-top: 95px !important; } }
@media (min-width: 901px) { .hero { padding-top: 104px !important; } }