/* Nuestros proyectos: estilos locales; el header y footer conservan Porto. */
#main.ps-projects { background: #faf8f3; color: #292822; }
.ps-projects .wrap { max-width: 1220px; margin: 0 auto; padding-inline: 24px; }
.ps-projects h1, .ps-projects h2, .ps-projects h3 { color: #292822; font-family: var(--porto-body-ff, "Lato"), sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; }
.ps-projects h1 { font-size: clamp(36px, 4vw, 56px); line-height: 1.12; margin: 18px 0 26px; }
.ps-projects h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin: 16px 0 24px; }
.ps-projects h3 { font-size: 26px; line-height: 1.25; margin: 10px 0 18px; }
.ps-projects p { color: #55514c; }
.ps-projects .eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: .14em; font-weight: 700; color: #795e43; }
.ps-projects .hero { display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 56px; padding-block: 72px 88px; }
.ps-projects .hero p { font-size: 21px; line-height: 1.65; max-width: 540px; margin: 0; }
.ps-projects .hero img { display: block; width: 100%; height: auto; }
.ps-projects .catalog { padding-bottom: 88px; }
.ps-projects .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 26px; }
.ps-projects .project { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.ps-projects .synopsis { flex: 1; font-size: 16px; line-height: 1.8; margin: 0; padding-bottom: 24px; }
@supports (grid-template-rows: subgrid) {
  .ps-projects .project { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
}
.ps-projects .cover { aspect-ratio: 4 / 3; background: #e9e5dd; overflow: hidden; }
.ps-projects .cover img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ps-projects .project > .eyebrow { margin-top: 24px; }
.ps-projects .extras { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: 4 / 3; }
.ps-projects .extras.double { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ps-projects .photo { display: block; position: relative; width: 100%; height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; cursor: zoom-in; background: transparent; }
.ps-projects .photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ps-projects .extras.double .photo img { object-fit: cover; }
.ps-projects .video-button { cursor: pointer; }
.ps-projects .play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #292822; color: white; font-size: 20px; }
.ps-projects .office { padding-block: 80px 96px; border-top: 1px solid #e4dfd5; }
.ps-projects .office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ps-projects .office-main { display: block; width: 100%; height: auto; }
.ps-projects .office p { font-size: 16px; line-height: 1.85; margin: 0 0 30px; }
.ps-projects .office-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-projects .office-photos .photo { aspect-ratio: 4 / 3; }
.ps-projects .office-photos img { object-fit: cover; }
.ps-projects .office-photos .photo:last-child img { object-position: center bottom; }
.ps-projects .end { background: #eee7dc; text-align: center; padding: 64px 24px 72px; }
.ps-projects .end h2 { margin-top: 0; margin-bottom: 16px; }
.ps-projects .end p { font-size: 18px; line-height: 1.7; max-width: 700px; margin: 0 auto 30px; }
.ps-projects .cta { display: inline-block; background: #70563a; color: #fff; padding: 16px 26px; border-radius: 4px; font-size: 16px; line-height: 1.5; text-decoration: none; }
.ps-projects .cta:hover { background: #55402b; }
.ps-projects :is(button, a):focus-visible { outline: 3px solid #70563a; outline-offset: 5px; }
.ps-project-dialog { border: 0; padding: 56px 20px 20px; max-width: 96vw; max-height: 96vh; background: #171717; color: white; overflow: auto; }
.ps-project-dialog::backdrop { background: rgba(0, 0, 0, .85); }
.ps-project-dialog .ps-project-close { position: absolute; top: 6px; right: 8px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: white; font-size: 32px; cursor: pointer; }
.ps-project-dialog :focus-visible { outline: 3px solid #e1c398; outline-offset: 3px; }
.ps-project-dialog img, .ps-project-dialog video { display: block; max-width: 86vw; max-height: 78vh; width: auto; height: auto; object-fit: contain; margin: auto; }
html.ps-project-modal-open { overflow: hidden; }
@media (max-width: 1023px) {
  .ps-projects .hero, .ps-projects .office-grid { gap: 30px; }
  .ps-projects .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; align-items: start; }
  .ps-projects .project { display: flex; grid-row: auto; }
  .ps-projects .synopsis { flex: initial; }
}
@media (max-width: 767px) {
  .ps-projects .hero, .ps-projects .office-grid, .ps-projects .cards { grid-template-columns: minmax(0, 1fr); }
  .ps-projects .hero { padding-block: 44px 60px; }
  .ps-projects .hero p { font-size: 19px; }
  .ps-projects .catalog { padding-bottom: 60px; }
  .ps-projects .office { padding-block: 56px; }
  .ps-projects .end { padding-inline: 20px; }
  .ps-projects .wrap { padding-inline: 20px; }
}