.films .portfolio-index{padding:46px 0 64px;scroll-margin-top:90px}
.portfolio-index-intro{display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-bottom:22px;color:#bdb6c7}.portfolio-index-intro p{font-size:13px;margin:0}
.films .portfolio-chapter{padding:0;margin:0;border-top:1px solid #39333f;scroll-margin-top:92px}.portfolio-chapter:last-child{border-bottom:1px solid #39333f}
.films .chapter-heading{margin:0;font:inherit}.chapter-trigger{width:100%;display:grid;grid-template-columns:32px 1fr 50px;align-items:baseline;gap:14px;border:0;background:transparent;text-align:left;padding:24px 0;cursor:pointer;color:var(--chapter-color);transition:opacity .2s}
.chapter-tv{--chapter-color:#f397c3}.chapter-trabajos{--chapter-color:#8bdce2}.chapter-animacion{--chapter-color:#f2cf73}.chapter-turismo{--chapter-color:#baa3f5}
.chapter-name{font-family:'General Sans',sans-serif;font-size:clamp(26px,3.4vw,54px);font-weight:600;line-height:1.12;text-transform:none;letter-spacing:-.035em}
.chapter-number{font:400 12px 'General Sans',sans-serif;color:#9d94aa;align-self:start;margin-top:12px}.chapter-symbol{font:300 48px 'General Sans',sans-serif;transition:transform .25s;align-self:center}.chapter-trigger[aria-expanded=true] .chapter-symbol{transform:rotate(180deg)}
.chapter-trigger:focus-visible{outline:2px solid #6c3eef;outline-offset:6px;border-radius:3px}
.chapter-panel{padding:0 0 36px 46px;animation:chapter-reveal .3s ease both}.chapter-panel[hidden]{display:none!important}.chapter-intro{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 23px}.chapter-intro p{font-size:14px;line-height:1.6;color:#c8c0cf;margin:0}.chapter-intro a{white-space:nowrap;color:var(--chapter-color)}
.films .chapter-panel .tv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px}.films .chapter-panel .tv-feature{grid-column:auto}.films .chapter-panel .tv-image{aspect-ratio:16/9}.films .chapter-panel .tv-card{min-width:0}.films .chapter-panel .tv-caption h3{font-size:21px}.films .chapter-panel .tv-caption p{font-size:12px}
@keyframes chapter-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.portfolio-index-intro{display:block}.portfolio-index-intro p{margin-top:12px}.chapter-trigger{grid-template-columns:22px 1fr 25px;gap:7px;padding:22px 0}.chapter-name{font-size:clamp(25px,6vw,36px)}.chapter-number{font-size:10px;margin-top:5px}.chapter-symbol{font-size:27px}.chapter-panel{padding-left:0}.chapter-intro{display:block}.chapter-intro a{display:inline-block;margin-top:9px}.films .chapter-panel .tv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.films .chapter-panel .tv-caption h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.chapter-panel{animation:none}.chapter-symbol{transition:none}}

.films .portfolio-index{width:calc(100% - 8vw);max-width:1600px;margin:0 auto}.films #tv .chapter-panel .tv-grid>.tv-card{grid-column:auto!important}

.films .portfolio-index .tv-grid>.tv-card{grid-column:auto!important}

/* Four thematic cinema marks, framed like a viewfinder. */
.chapter-trigger{grid-template-columns:32px 1fr 52px}
.chapter-symbol{display:flex;align-items:center;justify-content:center;width:52px;height:52px;transform:none!important;transition:filter .25s}
.chapter-symbol svg{display:block;width:46px;height:46px;transition:transform .25s}
.cine-corners{opacity:.4;transition:opacity .25s}
.chapter-trigger:hover .cine-corners,.chapter-trigger[aria-expanded=true] .cine-corners{opacity:1}
.chapter-trigger:hover .chapter-symbol svg,.chapter-trigger[aria-expanded=true] .chapter-symbol svg{transform:scale(1.06)}
@media(max-width:700px){.chapter-trigger{grid-template-columns:22px 1fr 42px}.chapter-symbol{width:42px;height:42px}.chapter-symbol svg{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.chapter-symbol svg,.cine-corners{transition:none}}

/* Viewfinder corners package the whole chapter, including its open portfolio. */
.films .portfolio-chapter{position:relative;border:0!important;margin:22px 0;padding:0 24px;background:transparent;isolation:isolate}
.chapter-frame{position:absolute;inset:0;pointer-events:none;z-index:-1;color:var(--chapter-color);opacity:.55;background:linear-gradient(currentColor,currentColor) left top/24px 1px no-repeat,linear-gradient(currentColor,currentColor) left top/1px 24px no-repeat,linear-gradient(currentColor,currentColor) right top/24px 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px 24px no-repeat,linear-gradient(currentColor,currentColor) left bottom/24px 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px 24px no-repeat,linear-gradient(currentColor,currentColor) right bottom/24px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom/1px 24px no-repeat;transition:opacity .25s}
.chapter-tv{--chapter-color:#cd638e}.chapter-trabajos{--chapter-color:#48aab5}.chapter-animacion{--chapter-color:#cda052}.chapter-turismo{--chapter-color:#a080e8}
.chapter-name{color:var(--chapter-color);transition:color .2s}
.chapter-symbol{color:var(--chapter-color)}
.chapter-symbol .cine-corners{display:none}
.portfolio-chapter:hover .chapter-frame,.portfolio-chapter.is-open .chapter-frame{opacity:1}
.portfolio-chapter.is-open{background:transparent}
.portfolio-chapter.is-open .chapter-name{color:var(--chapter-color)}
.chapter-trigger{padding:26px 0}
.chapter-panel{padding-bottom:32px}
@media(max-width:700px){.films .portfolio-chapter{padding:0 14px;margin:14px 0}.chapter-frame{background-size:20px 1px,1px 20px,20px 1px,1px 20px,20px 1px,1px 20px,20px 1px,1px 20px}.chapter-trigger{padding:20px 0}.chapter-name{font-size:clamp(22px,5.5vw,32px)}}
@media(prefers-reduced-motion:reduce){.chapter-frame,.chapter-name{transition:none}}