/* Cargar después de cover.css. Complemento independiente. */
.cinema-caption > div > span:first-child:not(:last-child) { display: none; }
.cinema-caption > div { display: flex; justify-content: flex-end; }
.intro-statement.has-welcome .intro-statement-grid {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}
.welcome-portrait {
  display: block;
  width: 100%;
  max-width: 140px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px 4px 28px 4px;
  background: #173e35;
}
.welcome-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transition: transform .35s ease;
}
@media (hover: hover) {
  .welcome-portrait:hover img { transform: scale(1.035); }
}
.welcome-portrait:focus-visible { outline: 3px solid #789c27; outline-offset: 5px; }
.welcome-portrait:focus-visible img { transform: scale(1.035); }
.intro-statement-copy .welcome-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  color: #173e35;
  font-size: 1rem;
}
.welcome-words { display: inline-grid; font-weight: 500; }
.welcome-word { grid-area: 1 / 1; visibility: hidden; }
.welcome-word.is-current { visibility: visible; }
.welcome-toggle {
  appearance: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 8px 3px;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}
.intro-statement-copy .welcome-name {
  margin: 0 0 18px;
  color: #173e35;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.035em;
}
.intro-statement.has-welcome .intro-statement-copy h2 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.4;
}
.welcome-profile-link { display: inline-block; margin-top: 22px; color: #173e35; font-weight: 600; text-underline-offset: 5px; }
.welcome-profile-link:focus-visible, .welcome-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 680px) {
  .intro-statement.has-welcome .intro-statement-grid { grid-template-columns: 1fr; gap: 24px; }
  .welcome-portrait { max-width: 100px; aspect-ratio: 1; border-radius: 22px 4px 22px 4px; }
  .intro-statement.has-welcome .intro-statement-copy h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-portrait img { transition: none; }
  .welcome-portrait:hover img, .welcome-portrait:focus-visible img { transform: none; }
}

.intro-statement-copy .welcome-name em {
  display: inline-block;
  color: #964521;
  font-family: inherit;
  font-style: italic;
  font-weight: inherit;
}

/* Fotogramas completos en todos los tamaños, sin zoom que recorte logos. */
#proyectos .project > .project-image { background: transparent; border-radius: 0; }
#proyectos .project-image > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #173e35;
  transform: none;
  filter: none;
}
@media (hover: hover) {
  #proyectos .project-image:hover > img {
    transform: scale(1.025);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #proyectos .project-image:hover > img {
    transform: none;
  }
}
/* El botón queda debajo para no tapar textos ni marcas del fotograma. */
#proyectos .project-image > .watch {
  position: static;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  box-sizing: border-box;
}
/* Retrato con las cuatro esquinas iguales */
.intro-statement .welcome-portrait {
  border-radius: 24px;
}

/* Zoom suave del retrato */
.welcome-portrait {
  overflow: hidden;
  isolation: isolate;
}

.welcome-portrait img {
  display: block;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 450ms cubic-bezier(.2, .65, .3, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .welcome-portrait:hover img {
    transform: translateZ(0) scale(1.015);
  }
}

.welcome-portrait:focus-visible img {
  transform: translateZ(0) scale(1.015);
}

@media (prefers-reduced-motion: reduce) {
  .welcome-portrait img,
  .welcome-portrait:hover img,
  .welcome-portrait:focus-visible img {
    transform: none;
    transition: none;
  }
}