:root {
  --paper: #dedede;
  --ink: #171717;
  --muted: #5d5a55;
  --line: #17171733;
  --menu-accent: #765096;
  --serif: 'Times New Roman', Times, 'Liberation Serif', serif;
  --sans: 'Manrope', Arial, sans-serif;
  color-scheme: light;
}
:root[data-theme='light'] { --paper: #fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
::selection { color: var(--paper); background: var(--ink); }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--paper); padding: 8px 16px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.masthead { height: 266px; position: relative; z-index: 30; }
.identity { position: fixed; top: 30px; left: 50%; transform: translateX(-50%); text-align: center; padding: 0 18px 8px; background: transparent; }
.identity h1 { font-family: 'Caveat', cursive; font-size: 56px; font-weight: 500; line-height: 1.04; white-space: nowrap; }
.identity p { font-family: 'Fraunces', Georgia, serif; font-size: 15px; font-weight: 350; margin-top: 8px; }
.identity-initials { display: none; }
.identity.identity-compact { width: auto; padding: 0; }
.identity.identity-compact h1 { font-size: 38px; }
.identity-compact .identity-full, .identity-compact p { display: none; }
.identity-compact .identity-initials { display: inline; }
.portfolio-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.portfolio-nav a { background: transparent; font-family: var(--sans); font-size: clamp(26px, 2.6vw, 34px); font-weight: 400; line-height: 1.25; letter-spacing: -.02em; min-height: 44px; padding: 2px 4px; text-decoration: none; transition: color .18s; }
.portfolio-nav a:hover, .portfolio-nav a.selected, .portfolio-nav a[aria-current='location'], .portfolio-nav a:focus-visible, .portfolio-nav a:active { color: var(--menu-accent); text-decoration: none; }
.menu-toggle, .menu-close { position: fixed; top: 38px; right: 30px; z-index: 60; min-width: 44px; min-height: 44px; padding: 5px 0; border: 0; background: transparent; font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.2; letter-spacing: .04em; transition: color .18s; }
.menu-toggle:hover, .menu-close:hover, .menu-toggle[aria-expanded='true'], .menu-toggle:focus-visible, .menu-close:focus-visible, .menu-toggle:active, .menu-close:active { color: var(--menu-accent); text-decoration: none; }
.hero { position: relative; max-width: 1240px; margin: 0 auto; height: auto; }
.hero-reel-panel { position: relative; width: 80%; margin: 0 auto; z-index: 1; }
.hero-background { position: relative; aspect-ratio: 16 / 9; background: #171717; overflow: hidden; }
.hero-poster, #hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#hero-video { opacity: 0; transition: opacity .4s; }
#hero-video.playing { opacity: 1; }
#hero-online { position: absolute; inset: 0; }
.hero-bottom { display: flex; justify-content: flex-start; align-items: baseline; gap: 24px; width: 100%; padding-top: 12px; }
.hero-bottom button { background: var(--paper); border: 0; padding: 0; font-size: 13px; line-height: 1.5; text-align: left; }
.hero-bottom button:hover { text-decoration: underline; text-underline-offset: 4px; }
#hero-toggle { font-size: 11px; color: var(--muted); }
.hero-still { position: absolute; }
.hero-still button { display: block; width: 100%; border: 0; padding: 0; background: transparent; overflow: hidden; }
.hero-still img { width: 100%; height: auto; transition: transform .65s; }
.hero-still button:hover img { transform: scale(1.025); }
.hero-still figcaption { margin-top: 12px; font-family: var(--serif); font-size: 25px; font-weight: 350; }
.hero-still figcaption a:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-fiction { width: 53%; left: 43%; top: 23%; z-index: 2; }
.hero-fiction img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 65%; }
.hero-fiction figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; padding-left: 9%; }
.hero-still figcaption .hero-series-trailer { display: inline-block; width: auto; padding: 0; border: 0; background: transparent; font-family: var(--sans); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.hero-fiction figcaption > span { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.hero-spaces { width: 35%; left: 11%; top: 62%; z-index: 3; }
.gallery { width: calc(100% - 54px); max-width: 1440px; margin: 90px auto 0; }
.work-group { padding-top: 40px; margin-bottom: 130px; scroll-margin-top: 130px; }
.work-group > h2, .section > h2 { font-family: var(--serif); font-size: clamp(32px, 3.5vw, 48px); font-weight: 350; line-height: 1.15; margin-bottom: 42px; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 52px; align-items: start; }
#ficcion .work-grid { display: block; }
#ficcion .work:not(.series-work) { max-width: 720px; margin: 0 auto; }
.series-work { margin-bottom: 90px; }
.series-title { font-family: var(--serif); font-size: 30px; font-weight: 350; margin-bottom: 28px; }
.series-stage { position: relative; height: clamp(680px, 70vw, 940px); }
.series-trailer { position: absolute; left: 0; top: 0; width: 70%; }
.series-trailer figcaption { padding-top: 12px; }
.series-trailer figcaption button { border: 0; background: transparent; padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.series-trailer figcaption a { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.series-art { position: absolute; }
.series-art-1 { left: 64%; top: 21%; width: 34%; }
.series-art-2 { left: 8%; top: 62%; width: 42%; }
.series-art > button { display: block; width: 100%; border: 0; padding: 0; background: transparent; }
.series-art img { width: 100%; height: auto; }
.series-art figcaption { margin-top: 10px; font-family: var(--serif); font-size: 22px; font-weight: 350; }
.film-details { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; font-size: 14px; }
.film-details a { text-decoration: underline; text-underline-offset: 4px; }
.film-gallery { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.film-gallery .film-cover { margin-top: 90px; width: 85%; max-width: 370px; justify-self: end; }
.film-gallery .film-development { grid-column: 1; width: 64%; max-width: 420px; margin-left: 12%; }
.film-gallery button { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
.film-gallery img { width: 100%; height: auto; }
.film-gallery figcaption { margin-top: 10px; font-family: var(--serif); font-size: 22px; font-weight: 350; }
.film-video figcaption { font-size: 18px; }
.film-video figcaption a { text-decoration: underline; text-underline-offset: 4px; }
.photo-feature { grid-column: 1 / -1; }
.photo-feature .series-title { margin-bottom: 20px; }
.project-subtitle { margin-top: -10px; margin-bottom: 20px; font-size: 15px; }
.project-gallery { width: 100%; max-width: 700px; margin-inline: auto; }
.project-gallery[data-gallery-project='broche'] { max-width: 654px; }
.photo-cover > button { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
.photo-cover img { width: 100%; height: auto; }
.project-thumbnails { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.project-gallery[data-gallery-project='broche'] .project-thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-gallery[data-gallery-project='sidra-real-cumbia'] .project-thumbnails { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-gallery[data-gallery-project='sidra-1888-cumbia'] .project-thumbnails { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.project-thumbnail { display: block; width: 100%; min-height: 44px; aspect-ratio: 4 / 3; padding: 0; border: 0; background: transparent; overflow: hidden; }
.project-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.project-thumbnail:hover img { opacity: .75; }
.work { min-width: 0; }
.work-media { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #d4d4d4; overflow: hidden; }
.work-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s; }
.work-media:hover > img { transform: scale(1.025); }
.work-media.portrait { aspect-ratio: 4 / 5; }
.work-media.portrait > img { object-position: center; }
.media-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: white; background: #171717a6; font-size: 20px; transition: background .25s; }
.media-icon.play { padding-left: 3px; }
.media-icon.photo { font-size: 32px; font-weight: 400; }
.work-media:hover .media-icon { background: #171717d9; }
.work-caption { padding-top: 14px; }
.work-caption h3 { font-size: 15px; font-weight: 400; line-height: 1.5; }
.work-caption > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.caption-photos { border: 0; padding: 0; background: transparent; text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.caption-photos:hover, .caption-vimeo:hover { color: var(--ink); }
.caption-vimeo { text-decoration: underline; text-underline-offset: 4px; }
.embedded-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.film-card { display: flex; align-items: center; gap: 22px; padding: 26px; background: #d2d2d2; }
.film-card-text { flex: 1; min-width: 0; }
.film-card-text > span:first-child { font-size: 9px; letter-spacing: .08em; }
.film-card-text h3 { font-family: var(--serif); font-size: clamp(23px, 2.8vw, 39px); font-weight: 350; line-height: 1.1; margin: 12px 0 20px; }
.film-card-text p { font-size: 12px; }
.film-card-text small { display: block; font-size: 10px; margin-top: 6px; }
.film-card-text .film-card-link { display: inline-block; font-size: 11px; margin-top: 20px; text-decoration: underline; text-underline-offset: 4px; }
.film-card .film-poster { width: 36%; height: 100%; object-fit: contain; }
.film-card:hover .film-poster { transform: none; }
.campaign-note { margin-top: 45px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 480px; }
.campaign-note h3 { font-family: var(--serif); font-size: 25px; font-weight: 350; }
.campaign-note p, .campaign-note a { font-size: 12px; }
.campaign-note a { text-decoration: underline; text-underline-offset: 4px; }
.more-work { display: inline-block; font-family: var(--serif); font-weight: 350; font-size: 24px; margin: -50px 0 100px; text-decoration: underline; text-underline-offset: 7px; }
#espacios .work-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
#espacios .work-media { aspect-ratio: 3 / 2; }
.section { width: calc(100% - 108px); max-width: 1320px; margin: 0 auto; padding: 65px 0 110px; scroll-margin-top: 130px; }
.bio-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: start; }
.bio-layout > img { width: 100%; height: auto; object-fit: contain; }
.bio-copy p { font-size: 16px; line-height: 1.85; }
.bio-copy p + p { margin-top: 22px; }
.text-link { display: inline-block; margin-top: 25px; font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.contact { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 65px; padding-bottom: 90px; }
.contact > h2 { margin-bottom: 30px; }
.email { font-family: var(--serif); font-size: clamp(22px, 4.5vw, 52px); font-weight: 350; overflow-wrap: anywhere; }
.email:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.contact-links { display: flex; flex-wrap: wrap; gap: 30px; margin: 30px 0 22px; font-size: 14px; }
.contact-links a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact > p { font-size: 13px; color: var(--muted); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 25px 54px 35px; font-size: 11px; }
footer a:hover { text-decoration: underline; }
.theme-switch { display: flex; gap: 12px; }
.theme-switch button { background: transparent; border: 0; padding: 2px 0; color: var(--muted); font-size: 11px; }
.theme-switch button[aria-pressed='true'] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.dialog-open { overflow: hidden; }
dialog { margin: auto; padding: 0 0 22px; border: 0; background: var(--paper); color: var(--ink); width: min(1120px, calc(100% - 40px)); max-height: calc(100svh - 40px); overflow: auto; }
dialog::backdrop { background: #171717df; }
dialog.menu-dialog { inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; height: 100svh; max-height: none; overflow-y: auto; background: #dedede; }
.menu-dialog::backdrop { background: #dedede; }
.menu-content { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 100px 24px; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.dialog-header h2 { font-family: var(--serif); font-size: 21px; font-weight: 350; line-height: 1.3; }
.dialog-close { background: transparent; border: 0; padding: 4px 0 4px 10px; flex-shrink: 0; font-size: 12px; }
.dialog-close span { margin-left: 8px; font-size: 22px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #171717; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-fallback { display: inline-block; margin: 20px 24px 0; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.photo-stage { position: relative; background: #d5d5d5; }
.photo-stage > img { width: 100%; height: min(65svh, 700px); object-fit: contain; }
.photo-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 24px; background: var(--paper); font-size: 12px; }
.photo-controls button { background: transparent; border: 0; padding: 7px 0; font-size: 12px; }
.photo-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px 8px; }
.photo-thumbnails button { width: 110px; height: 70px; flex-shrink: 0; border: 1px solid transparent; padding: 3px; background: transparent; }
.photo-thumbnails button[aria-pressed='true'] { border-color: var(--ink); }
.photo-thumbnails img { width: 100%; height: 100%; object-fit: cover; }
.online-reel { position: relative; overflow: hidden; }
.online-reel iframe { position: absolute; inset: auto; top: 50%; left: 50%; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.online-reel.remote-active iframe.reel-current-frame { opacity: 1; z-index: 1; }
.video-frame > .reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-frame > .reel-backup { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.remote-active > .reel-poster, .remote-active > .reel-backup { visibility: hidden; }
.reel-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 24px 0; }
.reel-controls button { background: transparent; border: 1px solid var(--line); padding: 6px 14px; min-height: 40px; font-size: 12px; }
.reel-current { font-size: 12px; color: var(--muted); text-align: right; }
.js-reveal .work { opacity: 0; transform: translateY(16px); transition: opacity .7s, transform .7s; }
.js-reveal .work.visible { opacity: 1; transform: none; }
@media (min-width: 1600px) { .menu-toggle, .menu-close { right: 50px; } }
@media (max-width: 1050px) {
  .menu-toggle, .menu-close { right: 25px; }
  .bio-layout { gap: 35px; }
  .hero-fiction { top: 24%; }
  .hero-spaces { top: 62%; width: 38%; }
}
@media (max-width: 760px), (max-width: 950px) and (orientation: landscape) and (max-height: 500px) {
  html { scroll-padding-top: 116px; }
  .masthead { height: 175px; }
  .identity { top: 24px; left: 20px; transform: none; text-align: left; width: calc(100% - 100px); padding: 0 0 10px; }
  .identity h1 { font-size: clamp(28px, 8vw, 48px); }
  .identity.identity-compact h1 { font-size: 32px; }
  .identity p { font-size: 14px; margin-top: 7px; }
  .menu-toggle, .menu-close { top: 24px; right: 20px; font-size: 16px; }
  .menu-content { padding: 90px 20px; }
  .portfolio-nav { gap: 6px; }
  .portfolio-nav a { font-size: clamp(24px, 6vw, 28px); line-height: 1.25; }
  .hero { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 42px; padding: 0 16px; }
  .hero-reel-panel, .hero-still { position: relative; left: auto; top: auto; }
  .hero-reel-panel { width: 100%; }
  .hero-fiction { width: 86%; align-self: flex-end; }
  .hero-fiction img { aspect-ratio: auto; object-fit: contain; }
  .hero-fiction figcaption { padding-left: 0; gap: 15px; }
  .hero-spaces { width: 78%; }
  .hero-still figcaption { font-size: 23px; margin-top: 9px; }
  .hero-bottom { width: 100%; justify-content: space-between; flex-wrap: wrap; padding-top: 10px; gap: 10px; }
  .hero-bottom button { font-size: 14px; min-height: 44px; }
  #hero-toggle { font-size: 14px; }
  .gallery { width: calc(100% - 32px); margin-top: 70px; }
  .work-group { margin-bottom: 75px; padding-top: 20px; scroll-margin-top: 116px; }
  .work-group > h2, .section > h2 { font-size: 33px; margin-bottom: 26px; }
  .work-grid, #espacios .work-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .series-work { margin-bottom: 65px; }
  .series-title { font-size: 27px; margin-bottom: 24px; }
  .series-stage { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; height: auto; }
  .series-trailer, .series-art { position: relative; left: auto; top: auto; }
  .series-trailer { width: 100%; }
  .series-art-1 { width: 82%; align-self: flex-end; }
  .series-art-2 { width: 78%; }
  .series-art figcaption { font-size: 21px; }
  .film-details { flex-wrap: wrap; gap: 16px; }
  .film-gallery { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .film-gallery .film-cover { margin-top: 0; width: 68%; margin-left: auto; }
  .film-gallery .film-development { width: 76%; margin-left: 0; }
  .project-thumbnails { gap: 6px; margin-top: 8px; }
  .work-caption { padding-top: 11px; }
  .work-caption h3 { font-size: 14px; }
  .work-caption > span { margin-top: 5px; }
  .work-media.portrait { aspect-ratio: 4 / 5; }
  .film-card { padding: 24px; min-height: 250px; aspect-ratio: auto; }
  .film-card-text h3 { font-size: 32px; }
  .media-icon { width: 46px; height: 46px; font-size: 17px; }
  .campaign-note { margin-top: 35px; }
  .more-work { margin: -10px 0 55px; font-size: 22px; }
  .section { width: calc(100% - 32px); padding: 30px 0 65px; scroll-margin-top: 116px; }
  .bio-layout { grid-template-columns: 1fr; gap: 28px; }
  .bio-copy p { font-size: 16px; line-height: 1.85; }
  .contact { padding-top: 45px; margin-top: 10px; }
  .contact-links { gap: 20px; font-size: 13px; margin-top: 25px; }
  footer { padding: 16px 16px 30px; flex-wrap: wrap; gap: 16px; font-size: 10px; }
  footer > span { width: 100%; }
  footer > a { margin-left: auto; }
  dialog { width: calc(100% - 20px); max-height: calc(100svh - 24px); padding-bottom: 18px; }
  .dialog-header { padding: 14px 16px; gap: 12px; }
  .dialog-header h2 { font-size: 18px; }
  .photo-stage > img { height: 50svh; }
  .photo-controls { padding-inline: 16px; }
  .photo-label, .photo-thumbnails { padding-inline: 16px; }
  .photo-thumbnails button { width: 85px; height: 58px; }
  .reel-controls { padding-inline: 16px; gap: 12px; }
  .reel-current { font-size: 11px; }
  .video-fallback { margin-inline: 16px; }
}
@media (max-width: 420px) {
  .project-gallery[data-gallery-project='sidra-1888-cumbia'] .project-thumbnails { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js-reveal .work { opacity: 1; transform: none; }
}