/* Hero compacto — neuropsicologia.co (2026-08-31) */
.hero-np { padding-top: clamp(48px, 7vh, 88px) !important;
           padding-bottom: clamp(24px, 4vh, 48px) !important; }

@media (max-width: 900px) {
  .hero-np-inner { gap: 18px !important; }
  .hero-np h1 { font-size: clamp(25px, 7vw, 31px) !important; line-height: 1.18 !important; }
  .hero-np-desc { font-size: 14.5px !important; line-height: 1.5 !important; }
  .hero-np-btns { gap: 10px !important; }
  .hero-np-card { max-height: 290px !important; }
  .hero-np-card img { max-height: 290px !important; object-fit: cover; object-position: center top; }
  .hero-np-metrics { margin-top: 16px !important; gap: 18px !important; }
  .hero-np-metrics > * { font-size: 12px !important; }
  .qcf-card { margin-top: 14px !important; padding: 14px !important; }
}

/* Mismo criterio que en neuroes: el mini-formulario del hero se oculta en
   móvil porque el formulario completo está más abajo en la misma página. */
@media (max-width: 900px) {
  .hero-np .qcf-card { display: none !important; }
}

/* Escritorio: las dos columnas estaban pegadas a los extremos (texto en x=120,
   foto en x=807) con un vacío grande en medio, y la foto caía a y=186 porque la
   rejilla la centraba verticalmente. Se estrechan las columnas y se centra el
   conjunto: el texto entra hacia el centro, la foto se corre a la izquierda y
   sube al alinearse arriba. */
@media (min-width: 901px) {
  .hero-np-inner {
    grid-template-columns: minmax(0, 540px) minmax(0, 470px) !important;
    gap: 40px !important;
    justify-content: center !important;
    align-items: start !important;
  }
  .hero-np-photo { margin-top: 26px !important; }
}

/* Sello de Google sobre la foto + la foto un poco más arriba. */
.hero-np-card { position: relative; }
.photo-badge { position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,.08); border-radius: 10px; padding: 7px 12px;
  display: flex; flex-direction: column; gap: 1px; align-items: flex-start;
  box-shadow: 0 6px 18px rgba(15,23,42,.12); }
.photo-badge-stars { color: #facc15; font-size: 12px; letter-spacing: 1px; line-height: 1 }
.photo-badge-text { font-size: 11px; font-weight: 700; color: #475569; line-height: 1.2 }
@media (min-width: 901px) { .hero-np-photo { margin-top: 0 !important; } }

/* Barra fija de 63px; el hero tenía exactamente 63px de padding, así que el
   h1 arrancaba pegado al borde inferior de la barra, sin aire. */
.hero-np { padding-top: 95px !important; }

/* ------------------------------------------------------------------
   Carrusel de reseñas igual al de neuroes.co
   Allí la pista queda contenida en 1012px (el `.container` de 1100px menos
   sus 44px de padding a cada lado) y por eso se ve centrado. Aquí iba de
   borde a borde: 1440px de pista y tarjetas de 480px.
   ------------------------------------------------------------------ */
.reviews-carousel { max-width: 1012px !important; margin-inline: auto !important; }