/* Huecos de fotografía comunes a las cinco demos.
   Cada hueco lleva data-foto-slot="id". Mientras no haya foto muestra un fondo
   de color de su marca (--foto-fundo); cuando se integra la fotografía, se
   inserta un <img> dentro y cubre el hueco con un recorte cuidado. */
[data-foto-slot]:not(.hero__foto) { position: relative; overflow: hidden; }
[data-foto-slot] > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 50%);
  display: block; border-radius: inherit;
}
[data-foto-slot]:has(> img) { color: transparent; }
.foto { border-radius: var(--foto-r, 16px); background: var(--foto-fundo, linear-gradient(160deg, #ECE7DF, #CFC6B8)); }
.nota-demo { margin-top: 18px; font-size: .84rem; line-height: 1.5; opacity: .8; max-width: 60ch; }

/* Móvil y tablet: la foto del hero pasa a ser una franja nítida encima del texto
   (no un fondo tenue detrás del titular). */
@media (max-width: 1000px) {
  .hero__foto[data-foto-slot]:has(> img) {
    position: relative; inset: auto; width: auto; height: clamp(200px, 52vw, 340px);
    margin: 0 clamp(16px, 4vw, 40px) 28px; opacity: 1; border-radius: 18px; overflow: hidden;
  }
  .hero__foto[data-foto-slot]:has(> img)::after { display: none; }
  [data-foto-slot="clinica-hero"] > img { object-position: 50% 22%; }
  [data-foto-slot="restaurante-hero"] > img { object-position: 45% 62%; }
  [data-foto-slot="contabilistas-hero"] > img { object-position: 70% 40%; }
}