/* titulos.css — nombre del platillo MUCHO más grande en las slides con foto.
   Se carga DESPUÉS de pantalla.css. La foto NO se toca: mide exactamente lo
   mismo que antes (alto máx. 86vh); lo único que cambia es que el nombre usa
   el espacio vacío que quedaba a su izquierda. titulos.js ajusta el tamaño
   exacto para que el nombre llene ese espacio sin cortarse. */
@media (min-width: 768px) {
  /* La caja de la foto se encoge a lo que mide la foto (antes era un 74% fijo
     con aire vacío a los lados) y el texto toma todo lo que sobra. */
  .slide-main:has(.slide-main__title):not(.is-image-only) .slide-main__image-wrap {
    width: auto;
    flex: 0 0 auto;
    max-width: 80%;
  }
  .slide-main__text.has-image:has(.slide-main__title) {
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    padding: 0 clamp(48px, 2.6vw, 120px) 0 clamp(64px, 3.4vw, 160px);
  }
  .slide-main__text.has-image .slide-main__title {
    font-weight: 700;
    line-height: 1.04;
    /* respaldo si titulos.js no cargara: más grande que antes y seguro contra desbordes */
    font-size: clamp(1.6rem, 2.6vw, 3rem);
    /* nunca se parte una palabra a media palabra (titulos.js achica la letra) */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    text-shadow: 0 6px 28px rgba(0,0,0,.5);
  }
  .slide-main__text.has-image:has(.slide-main__title) .slide-main__rule { margin-top: 32px; width: 140px; height: 5px; }
  .slide-main__text.has-image:has(.slide-main__title) .slide-main__desc { max-width: none; font-size: clamp(18px, 1.5vw, 28px); }
}