/* ═══════════════════════════════════════════════════════════════════
   COPY v5 (Hugo, 30-sep-2026) — auditoría de copywriting
   1) Héroe: especialidad + ciudad VISIBLES dentro del mismo <h1>
      ("Dra. [Mariel] Garza, Ginecóloga y obstetra en Puebla").
   2) Nota discreta de opiniones de ejemplo (demo).
   Se carga al final; no cambia nada más del diseño.
   ═══════════════════════════════════════════════════════════════════ */

/* sitio web: justo ARRIBA de "Garza", alineada a su inicio (debajo chocaba con
   las tarjetas de navegación en 1025–1600px) */
.garza-title .garza-role{
  position:absolute;grid-column:3;grid-row:1;left:0;bottom:100%;
  margin-bottom:.55em;padding-left:.08em;
  font-size:.118em;font-weight:500;letter-spacing:.01em;line-height:1.2;
  color:var(--plum);white-space:nowrap;
  animation:title-in 1s var(--ease) .16s backwards;
}

/* celular / tableta: centrada bajo "Dra. Garza"; la foto baja lo mismo */
@media (max-width:1024px),(max-aspect-ratio:10/11){
  .garza-hero{--role-h:clamp(20px,5.2vw,26px);--sub-top:calc(var(--title-fs)*.8 + 12px + var(--role-h))}
  .garza-title{flex-wrap:wrap;row-gap:0}
  .garza-title .garza-role{
    position:static;flex:0 0 100%;margin-bottom:0;padding-left:0;margin-top:calc(var(--title-fs)*.06);
    font-size:clamp(13.5px,3.9vw,19px);text-align:center;
  }
}

/* opiniones de ejemplo */
.garza-demo-note{margin:8px 0 0;font-size:12.5px;line-height:1.4;opacity:.62}