:root {
  --ink: #0d0e10;
  --paper: #f1eee9;
  --blue: #21477a;
  --red: #dd2b24;
  --white: #fffdf9;
  --sans: Arial, Helvetica, sans-serif;
  --serif: "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
a { color: inherit; }

.quick-actions { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.quick-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.3rem; min-width: 10.5rem; padding: .72rem .85rem; background: var(--ink); color: var(--white); border: 1px solid var(--paper); font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; box-shadow: 0 2px 14px rgba(0,0,0,.12); }
.quick-actions a:hover, .quick-actions a:focus-visible { background: var(--white); color: var(--ink); border-color: var(--ink); }

.hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.6rem 2rem 1.5rem;
}

.hero-image, .blue-wash { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 29%; filter: saturate(.86) contrast(1.02); transform: scale(1.3) translate(4%, 7%); }
.blue-wash { display: none; }

.topbar, .seal { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.eyebrow, .section-label, nav, .scroll-hint, .seal, .socials { font-size: .71rem; line-height: 1.1; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow { margin: 0; }
nav { display: flex; gap: 1rem; }
nav a { text-decoration: none; }
nav a:hover, nav a:focus-visible { text-decoration: underline; text-underline-offset: .25rem; }

.hero-content { align-self: center; text-align: center; transform: translateY(-1.5rem); width: 100%; }
h1, h2, p { margin-top: 0; }
h1 { font-family: var(--serif); font-weight: 400; line-height: .68; letter-spacing: -.08em; margin: 0 0 2.2rem; }
h1 em, h1 strong { display: block; font-style: normal; }
h1 em { font-size: clamp(5.2rem, 13.5vw, 12.5rem); font-style: italic; margin-left: 0; }
h1 strong { font-size: clamp(6.4rem, 15vw, 13.5rem); text-transform: uppercase; font-weight: 700; }
.scroll-hint { justify-self: end; text-decoration: none; }
.scroll-hint span { font-size: 1.2rem; vertical-align: -1px; }
.home-socials { align-items: center; bottom: 1.5rem; display: flex; gap: 1.05rem; left: 2rem; position: absolute; z-index: 2; }
.home-socials a { align-items: center; color: var(--white); display: inline-flex; height: 1.55rem; justify-content: center; text-decoration: none; width: 1.55rem; }
.platform-mark { fill: none; height: 1.42rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 1.42rem; }
.home-socials a:has(.imdb-mark), .footer-socials a:has(.imdb-mark) { width: 2.55rem; }
.home-socials a:has(.youtube-logo), .footer-socials a:has(.youtube-logo) { width: 4.85rem; }
.imdb-mark { font-family: "Arial Black", Impact, var(--sans); font-size: 1.05rem; font-weight: 900; letter-spacing: -.1em; line-height: 1; transform: scaleX(1.06); }
.youtube-logo { align-items: center; color: var(--white); display: inline-flex; font-family: Arial, Helvetica, var(--sans); font-size: .84rem; font-weight: 900; gap: .2rem; letter-spacing: -.075em; line-height: 1; white-space: nowrap; }
.youtube-logo svg { height: 1.12rem; width: 1.56rem; }
.home-socials a:hover, .home-socials a:focus-visible { transform: translateY(-2px); }

.bio { background: var(--paper); padding: clamp(3.5rem, 8vw, 8rem) max(2rem, 8vw); }
.bio > .section-label { margin-bottom: 3rem; }
.bio-layout { align-items: stretch; display: grid; gap: clamp(1.5rem, 3.5vw, 4rem); grid-template-areas: "copy portrait title"; grid-template-columns: minmax(11rem, .65fr) minmax(12rem, .7fr) minmax(22rem, 1.45fr); max-width: 78rem; min-height: clamp(27rem, 39vw, 38rem); }
.bio h2 { font-family: var(--serif); font-size: clamp(2.8rem, 5vw, 5.7rem); font-weight: 400; letter-spacing: -.06em; line-height: .86; margin: 0; }
.bio-intro { align-self: start; grid-area: title; max-width: 44rem; }
.bio-copy { align-self: end; font-size: .92rem; grid-area: copy; line-height: 1.35; max-width: 16rem; }
.bio-copy p { margin-bottom: 1.2rem; }
.bio-copy p:last-child { margin-bottom: 0; }
.bio em { font-family: var(--serif); font-weight: 700; }
.bio-portrait { align-self: center; grid-area: portrait; margin: 0; max-width: 21rem; }
.bio-portrait img { display: block; height: auto; width: 100%; }

.manifesto { background: var(--red); color: var(--white); padding: clamp(3rem, 9vw, 8rem) max(2rem, 12vw); }
.manifesto .section-label { margin-bottom: 5rem; }
.manifesto h2, .reel h2, .cv h2, .contact h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
.manifesto h2 { font-size: clamp(3.4rem, 9.5vw, 9.5rem); line-height: .79; max-width: 10ch; margin-bottom: 2rem; }
.manifesto > p:last-child { max-width: 31rem; font-size: 1.1rem; line-height: 1.3; }

.reel { padding: clamp(3.2rem, 7vw, 7rem) max(2rem, 8vw); display: grid; grid-template-columns: minmax(13rem, .7fr) minmax(18rem, 1.3fr); gap: 3rem; }
.reel { background: var(--ink); color: var(--white); }
.reel h2, .cv h2 { font-size: clamp(3rem, 7.5vw, 7rem); line-height: .8; margin-bottom: 0; }
.reel-year { font-family: var(--sans); font-size: .18em; font-weight: 700; letter-spacing: .03em; vertical-align: top; }
.reel-frame { display: grid; margin: 0; position: relative; width: 100%; }
.reel-frame img { display: block; height: auto; width: 100%; }
.reel-frame figcaption { align-items: center; background: rgba(0,0,0,.22); display: flex; flex-direction: column; gap: .7rem; inset: 0; justify-content: center; position: absolute; }
.reel-frame span, .reel-frame small { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.reel-frame strong { font-size: 3.7rem; font-weight: 400; line-height: 1; }

.cv { background: var(--paper); display: grid; gap: 1rem clamp(2rem, 6vw, 8rem); grid-template-columns: minmax(15rem, .72fr) minmax(20rem, 1.28fr); padding: clamp(3.2rem, 7vw, 7rem) max(2rem, 8vw); }
.career-statement { align-self: start; }
.career-statement h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.065em; line-height: .72; margin: 3.3rem 0 2.3rem; }
.career-statement h2 { font-size: clamp(3.4rem, 6.8vw, 7rem); line-height: .88; overflow-wrap: anywhere; }
.career-statement h2 span, .career-statement h2 strong, .career-statement h2 em { display: block; }
.career-statement h2 span { font-size: clamp(2.7rem, 4.3vw, 4.7rem); }
.career-statement h2 strong { font-size: clamp(4.8rem, 8.2vw, 8.7rem); font-weight: 400; margin: .025em 0 .05em; }
.career-statement h2 em { font-size: clamp(4rem, 6vw, 6.5rem); font-style: italic; margin-left: .03em; }
.career-statement > p:last-child { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.career-credits { align-self: end; grid-column: 2; }
.career-credits .section-label { margin-bottom: 1.25rem; }
.credits-groups { grid-column: 2; }
.credits-groups section + section { margin-top: 3.8rem; }
.credits-groups h3 { font: 700 .73rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 1rem; }
.credits-list { grid-column: 2; margin: 0; }
.credits-list div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; border-top: 1px solid var(--ink); padding: .8rem 0; }
.cv dt { font-family: var(--serif); font-size: 1.3rem; }
.cv dd { margin: 0; font-size: .78rem; text-align: right; }
.cv-note { grid-column: 2; margin: -.2rem 0 0; font-size: .75rem; text-transform: uppercase; }
.cv-note a { color: inherit; font-weight: 700; text-decoration: none; }
.cv-note a:hover, .cv-note a:focus-visible { text-decoration: underline; text-underline-offset: .28rem; }

.contact { background: var(--red); color: var(--white); padding: clamp(3.5rem, 8vw, 7rem) max(2rem, 8vw) 1.7rem; }
.contact h2 { font-size: clamp(3.2rem, 8.5vw, 9rem); line-height: .86; margin: 3.8rem 0 5.5rem; }
.contact h2 span { display: block; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid rgba(255,255,255,.75); padding-top: 1rem; }
.contact-grid p { font-size: 1rem; line-height: 1.25; }
.contact-grid span { opacity: .72; font-size: .78rem; }
.casting-material { align-items: end; border-top: 1px solid rgba(255,255,255,.75); display: flex; gap: 1.25rem; justify-content: space-between; margin-top: 3.25rem; padding-top: 1rem; }
.casting-material p { font-size: .72rem; font-weight: 700; letter-spacing: .04em; margin: 0; text-transform: uppercase; }
.casting-material a { appearance: none; background: var(--white); border: 1px solid var(--white); color: var(--red); font: 700 .72rem/1 var(--sans); letter-spacing: .04em; padding: .78rem 1rem; text-decoration: none; text-transform: uppercase; }
.casting-material a:hover, .casting-material a:focus-visible { background: transparent; color: var(--white); }
.footer-socials { align-items: center; display: flex; flex-wrap: wrap; gap: 1.05rem; margin: 4.5rem 0 3rem; }
.footer-socials a { align-items: center; color: var(--white); display: inline-flex; height: 1.55rem; justify-content: center; text-decoration: none; width: 1.55rem; }
.seal { border-top: 1px solid rgba(255,255,255,.75); padding-top: 1rem; }

@media (max-width: 700px) {
  .hero { min-height: 100svh; padding: 1.15rem 1rem 1.25rem; display: grid; }
  .topbar { color: var(--white); left: 1rem; position: absolute; right: 1rem; top: 1.15rem; z-index: 2; }
  .hero-image { height: auto; margin: 0; position: absolute; }
  .hero-image img { transform: scale(1.3) translate(4%, 11%); }
  nav { gap: .55rem; font-size: .62rem; }
  .hero-content { align-self: center; margin: 0; position: relative; transform: translateY(7.5rem); }
  h1 { margin-bottom: 1.3rem; }
  h1 em { font-size: clamp(3.9rem, 16vw, 4.6rem); margin-left: 0; }
  h1 strong { font-size: clamp(3.9rem, 16vw, 4.6rem); }
  .scroll-hint { align-self: end; display: inline-block; margin-top: 1rem; }
  .home-socials { bottom: 1.25rem; left: 1rem; }
  .bio, .manifesto, .reel, .cv, .contact { padding-left: 1rem; padding-right: 1rem; }
  .bio > .section-label { margin-bottom: 2rem; }
  .bio-layout { gap: 2rem; grid-template-areas: "title" "portrait" "copy"; grid-template-columns: 1fr; min-height: 0; }
  .bio h2 { font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: .91; }
  .bio-portrait { max-width: 18rem; }
  .bio-copy { font-size: .92rem; max-width: 20rem; }
  .manifesto .section-label { margin-bottom: 3.5rem; }
  .reel { grid-template-columns: 1fr; gap: 2.5rem; }
  .cv { grid-template-columns: 1fr; gap: 2.5rem; }
  .career-statement h2 { margin: 2.2rem 0 1.7rem; }
  .career-statement h2 strong { font-size: clamp(4.8rem, 22vw, 6.8rem); }
  .career-credits, .credits-groups, .credits-list, .cv-note { grid-column: auto; }
  .credits-list div { grid-template-columns: 1fr; gap: .25rem; }
  .cv dd { text-align: left; }
  .cv-note { grid-column: auto; margin: -1.5rem 0 0; }
  .contact h2 { margin: 3.2rem 0 4rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 0; }
  .casting-material { align-items: flex-start; flex-direction: column; margin-top: 2.8rem; }
  .seal { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .quick-actions { bottom: .75rem; right: .75rem; gap: .25rem; }
  .quick-actions a { font-size: .61rem; min-width: 8.5rem; padding: .65rem .7rem; }
}

/* V4: composition changes only; the V3 font families and palette are preserved. */
.hero {height:100svh; min-height:600px; display:block;}
.hero-image img {filter:none; transform:none; object-position:51% 33%;}
.hero-content {position:absolute; top:47%; left:0; transform:translateY(-50%); padding:0 2rem;}
h1 {margin:0; line-height:.74;}
h1 em {font-size:clamp(6rem,13.5vw,12.5rem);}
h1 strong {font-size:clamp(5.8rem,14.5vw,13.5rem);}
.topbar {position:relative; z-index:2;}
.scroll-hint {position:absolute; bottom:6.2rem; right:2rem;}
.home-socials a,.footer-socials a {min-height:44px;}
.bio-layout {grid-template-columns:minmax(12rem,.9fr) minmax(12rem,.75fr) minmax(20rem,1.3fr); gap:2.5rem;}
.bio h2 {font-size:clamp(2.4rem,3.9vw,4.6rem); line-height:.94;}
.bio-copy {max-width:24rem; line-height:1.5; font-size:.95rem;}
.bio-portrait {align-self:start;}
.manifesto {padding-top:clamp(3rem,6vw,6rem); padding-bottom:clamp(3rem,6vw,6rem);}
.manifesto .section-label {margin-bottom:3rem;}
.manifesto h2 {max-width:13ch; line-height:.88; font-size:clamp(3.4rem,8.5vw,8.5rem);}
.reel-frame {border:0; padding:0; background:transparent; color:var(--white); cursor:pointer;}
.reel-frame img {aspect-ratio:16/9; object-fit:contain; background:#000;}
.play-icon {position:absolute; inset:0; display:grid; place-items:center; font-size:3rem; text-shadow:0 1px 8px #000;}
.reel-frame:hover .play-icon {transform:scale(1.08);}
.reel-link {display:inline-block; margin-top:1rem; font-size:.78rem; text-underline-offset:.2rem;}
.reel-embed {width:100%; aspect-ratio:16/9; border:0; display:block;}
.contact {display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); column-gap:4rem; padding-bottom:0;}
.contact > .section-label {grid-column:1/-1;}
.contact h2 {grid-column:1; grid-row:2; font-size:clamp(3rem,6.2vw,6.8rem); margin:2rem 0 2.5rem;}
.contact-portrait {grid-column:2; grid-row:2/4; margin:2rem 0 3rem; max-width:25rem;}
.contact-portrait img {display:block; width:100%; height:auto;}
.contact-grid {grid-column:1; grid-row:3; grid-template-columns:1fr; gap:1rem;}
.contact-grid span {opacity:1; font-size:.88rem; line-height:1.8;}
.contact-grid a {text-underline-offset:.2rem;}
.contact-tail {grid-column:1/-1; padding-bottom:2rem;}
.pdf-link {display:inline-block; padding-top:.7rem!important; font-size:.75rem!important; text-transform:none!important; border:none!important; background:none!important; color:var(--white)!important; padding-left:0!important;}
.casting-material {margin-top:1.5rem;}
.footer-socials {margin:2rem 0;}
.quick-actions {flex-direction:row; gap:.4rem;}
.quick-actions a {min-width:0; min-height:44px; gap:.7rem;}
.option-b .bio-layout {grid-template-areas:"portrait title" "portrait copy"; grid-template-columns:minmax(12rem,.8fr) minmax(20rem,1.2fr);}
.option-b .bio-copy {max-width:42rem; columns:2; column-gap:2rem;}
.option-b .bio-copy p {break-inside:avoid;}
.option-b .manifesto > p:last-child {display:none;}
.option-b .manifesto {padding-bottom:3rem;}
.option-b .contact {background:var(--ink);}
.option-b .contact-tail {background:var(--red); margin:1rem min(-2rem,-8vw) 0; padding:2rem max(2rem,8vw);}
@media(min-width:701px) and (max-width:1050px) {
 .bio-layout {grid-template-columns:.7fr 1.3fr; grid-template-areas:"portrait title" "copy title";}
 .contact {gap:2rem;}
 .contact h2 {font-size:6vw;}
}
@media(max-width:700px) {
 .hero {min-height:580px;}
 .hero-image img {object-position:51% 33%; transform:none;}
 .hero-content {top:46%; padding:0 1rem; margin:0; left:0; transform:translateY(-50%);}
 h1 {line-height:.76; margin:0;}
 h1 em {font-size:clamp(2.9rem,19vw,6.8rem);}
 h1 strong {font-size:clamp(2.6rem,16.1vw,6rem);}
 .topbar {position:absolute;}
 .topbar nav {gap:.65rem; font-size:.6rem;}
 .scroll-hint {bottom:6.2rem;right:1rem;}
 .home-socials {bottom:6rem;}
 .bio {padding-top:3.5rem; padding-bottom:3.5rem;}
 .bio-layout {grid-template-columns:1fr; grid-template-areas:"title" "portrait" "copy"; gap:2rem;}
 .bio h2 {font-size:clamp(2rem,8vw,3.2rem); line-height:.98;}
 .bio-portrait {max-width:none; width:82%;}
 .bio-copy {max-width:none; font-size:1rem; line-height:1.5;}
 .manifesto {padding-top:3rem;padding-bottom:3rem;}
 .manifesto .section-label {margin-bottom:2.5rem;}
 .manifesto h2 {font-size:clamp(3.1rem,14vw,5.5rem); line-height:.88;}
 .manifesto > p:last-child {font-size:1rem;max-width:23ch; margin-bottom:0;}
 .contact {grid-template-columns:1fr; gap:0; padding-top:3.5rem;}
 .contact h2 {grid-column:1;grid-row:2; font-size:clamp(2.8rem,11vw,4.5rem);line-height:.92; margin:2rem 0;}
 .contact-portrait {grid-column:1;grid-row:3; width:82%;max-width:none;margin:0 0 2rem;}
 .contact-grid {grid-column:1;grid-row:4;gap:.8rem;}
 .contact-grid p {font-size:1rem;}
 .contact-grid span {font-size:.86rem;}
 .contact-tail {padding-bottom:6rem;}
 .quick-actions {left:1rem;right:1rem;bottom:.8rem;flex-direction:row;justify-content:space-between;gap:.5rem;}
 .quick-actions a {min-width:0; padding:.7rem .8rem;font-size:.65rem;gap:.6rem;}
 .option-b .bio-layout {grid-template-columns:1fr;grid-template-areas:"title" "copy" "portrait";}
 .option-b .bio-copy {columns:auto;}
 .option-b .bio-portrait {width:100%;}
 .option-b .contact-tail {margin:1rem -1rem 0;padding:2rem 1rem 6rem;}
 .credits-list div {padding:.9rem 0;}
 .cv dt {font-size:1.35rem;}
 .cv dd {font-size:.84rem;line-height:1.35;}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto;} * {transition:none!important;}}

@media(max-width:700px) {.hero-content {top:40%;}}

@media(max-width:700px) {
 body {overflow:hidden;}
 .page-scroll {position:fixed;inset:0 0 calc(4rem + env(safe-area-inset-bottom)); overflow-y:auto; scroll-behavior:smooth;}
 .hero {height:calc(100svh - 4rem - env(safe-area-inset-bottom));min-height:480px;}
 .quick-actions {left:0;right:0;bottom:0; height:calc(4rem + env(safe-area-inset-bottom));background:var(--ink);align-items:center;padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom));gap:.7rem;border-top:1px solid var(--paper);}
 .quick-actions a {flex:1;justify-content:space-between;min-height:44px;}
 .home-socials {bottom:1rem;}
 .scroll-hint {bottom:1.6rem;}
 .hero-content {top:40%;}
 .topbar nav {gap:.5rem;font-size:.57rem;}
 .contact-tail {padding-bottom:2rem;}
 .option-b .contact-tail {padding-bottom:2rem;}
}
@media(max-width:360px) {.topbar nav{gap:.4rem;font-size:.52rem;}.eyebrow{font-size:.62rem;}}

/* Apoyo biográfico ratificado por Joe en Créditos. */
.career-statement > p.career-claim {font-family:var(--sans);font-size:1.15rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.35;margin-top:1.5rem;}

/* V5: un acceso PDF; descarga en CTA permanente. */
.pdf-view {border-top:1px solid currentColor;padding-top:1.4rem;margin:1.5rem 0;}
.pdf-view .pdf-link {font-size:1rem;text-decoration:underline;text-underline-offset:.25em;}
@media(max-width:700px){.career-statement h2 em{font-size:clamp(3.5rem,18vw,5rem);}}

/* V6 · feedback Javier: etiquetas limpias y contenido literal. */
.topbar{justify-content:flex-end;}.topbar nav{margin-left:auto;}
.bio h2{font-size:clamp(2.4rem,4.1vw,4.5rem);line-height:.98;}
.option-b .manifesto > p:last-child{display:block;}
.reel{display:block;}.reel > div:first-child{margin-bottom:3rem;}.reel .reel-player{max-width:72rem;}
.cv{display:block;}.cv > .section-label{margin-bottom:3rem;}.credits-list{max-width:72rem;}
.contact{grid-template-areas:"label photo" "details photo" "tail tail";grid-template-columns:1.2fr .8fr;align-items:start;}
.contact-grid{margin:0;}.contact > .section-label{grid-area:label;margin-bottom:1rem;}.contact-portrait{grid-area:photo;}.contact-tail{grid-area:tail;}
@media(max-width:700px){
 .bio h2{font-size:clamp(1.85rem,7.2vw,2.5rem);line-height:1.02;}
 .bio-portrait{width:100%;max-width:none;}.bio-portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:45% 45%;}
 .contact{display:flex;flex-direction:column;gap:1.8rem;}.contact-portrait{width:82%;max-width:22rem;order:2;}.contact-grid{order:1;}.contact-tail{order:3;width:100%;}.contact > .section-label{order:0;}
 .option-b .contact-tail{margin:0 -1rem;width:calc(100% + 2rem);padding:2rem 1rem;}
 .topbar nav{font-size:.6rem;}.scroll-hint{max-width:7rem;}.home-socials{gap:.7rem;}
}

.scene-link{display:inline-flex;align-items:center;gap:.4rem;margin-left:.7rem;font:700 .65rem/1.4 var(--sans);text-decoration:underline;text-underline-offset:.2rem;vertical-align:middle;white-space:nowrap;}
.scene-player{grid-column:1/-1;min-width:0;padding:.8rem 0;}.scene-close{display:block;margin:0 0 .7rem auto;border:0;background:transparent;color:var(--ink);font:.8rem var(--sans);cursor:pointer;}
.contact{grid-template-rows:auto 1fr auto;row-gap:2rem;}
.contact > .contact-grid{grid-area:details;align-self:start;}
.contact > .contact-portrait{margin:0 0 1rem;}
.contact > .section-label{margin:0;}
@media(max-width:700px){.contact{gap:1.8rem;}.contact > .contact-portrait{margin:0;}}

/* Joe 06/10: contacto ocupa su columna sin margen adicional; mismo encuadre móvil que bio. */
.contact > .contact-portrait{width:100%;max-width:25rem;margin:0;}
@media(max-width:700px){
 .contact > .contact-portrait{width:100%;max-width:none;margin:0;}
 .contact-portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:45% 45%;}
}

/* ───────────────────────────────────────────────────────────────
   V7 · 9/10/2026 · pulido sin cambios de texto ni de la home.
   Solo afecta a reel, filmografía, contacto y accesibilidad.
   ─────────────────────────────────────────────────────────────── */

/* Foco visible para teclado, en el tono de cada fondo. */
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Reel: botón de reproducción reconocible (antes, un glifo pequeño). */
.play-icon { font-size: 2rem; padding-left: .25rem; text-shadow: none; z-index: 1; transition: transform .25s ease; }
.play-icon::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem;
  border: 1.5px solid var(--white); border-radius: 50%;
  z-index: -1; background: rgba(13,14,16,.35);
  transition: background .25s ease;
}
.reel-frame:hover .play-icon, .reel-frame:focus-visible .play-icon { transform: scale(1.06); }
.reel-frame:hover .play-icon::before, .reel-frame:focus-visible .play-icon::before { background: var(--red); border-color: var(--red); }
.reel-link { text-decoration: underline; }

/* Filmografía: director alineado a la línea base del título. */
.credits-list > div { align-items: baseline; }
.credits-list > div:last-child { border-bottom: 1px solid var(--ink); }
/* Enlace «Escena»: misma apariencia, zona táctil de 44 px. */
.scene-link { padding: .95rem .35rem; margin: -.95rem 0 -.95rem .35rem; }
.scene-link:hover { color: var(--red); }
.scene-player { padding-top: .4rem; }
.scene-close { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; padding: .6rem 0; }
.scene-close:hover { color: var(--red); }

/* Contacto: en ordenador, el teléfono es texto (evita que salte FaceTime). */
@media (hover: hover) and (pointer: fine) {
  .contact a[href^="tel:"] { pointer-events: none; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  .play-icon, .play-icon::before { transition: none; }
}
@media (max-width: 700px) {
  .play-icon::before { width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; }
  .play-icon { font-size: 1.6rem; }
}
/* V7 · triángulo dibujado, independiente de la fuente del dispositivo. */
.play-icon { font-size: 0; padding: 0; }
.play-icon::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -.85rem 0 0 -.5rem; border-style: solid; border-width: .85rem 0 .85rem 1.45rem; border-color: transparent transparent transparent var(--white); }
@media (max-width: 700px) { .play-icon::after { margin: -.7rem 0 0 -.42rem; border-width: .7rem 0 .7rem 1.2rem; } }

/* ───────────────────────────────────────────────────────────────
   V7 · movimiento. La home no se toca: todo empieza bajo ella.
   Sin JS o con «reducir movimiento» no se oculta nada.
   ─────────────────────────────────────────────────────────────── */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Retratos: el marco aparece y la foto se asienta con un zoom suave. */
.bio-portrait, .contact-portrait { overflow: hidden; }
.js .bio-portrait[data-reveal], .js .contact-portrait[data-reveal] { transform: none; }
.js .bio-portrait[data-reveal] img, .js .contact-portrait[data-reveal] img { transform: scale(1.09); transition: transform 1.5s cubic-bezier(.2,.65,.2,1); }
.js .bio-portrait[data-reveal].is-in img, .js .contact-portrait[data-reveal].is-in img { transform: none; }

/* Reel: el círculo de play «respira» hasta que alguien lo pulsa. */
@keyframes v7-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,253,249,.42); } 70%, 100% { box-shadow: 0 0 0 1.3rem rgba(255,253,249,0); } }
.reel-frame:not(:hover):not(:focus-visible) .play-icon::before { animation: v7-pulse 2.6s ease-out infinite; }

/* Filmografía: la fila activa se marca en rojo y el título se desplaza. */
@media (hover: hover) and (pointer: fine) {
  .credits-list dt { transition: transform .35s cubic-bezier(.2,.65,.2,1); }
  .credits-list > div:hover { border-top-color: var(--red); }
  .credits-list > div:hover dt { transform: translateX(.65rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal] img { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reel-frame .play-icon::before { animation: none !important; }
}


/* ───────────────────────────────────────────────────────────────
   V7 · zoom en fotos, entrada del nombre y «sostener los silencios».
   ─────────────────────────────────────────────────────────────── */

/* Fotos: zoom suave al pasar el ratón (la home no lleva zoom: su encuadre está cerrado). */
@media (prefers-reduced-motion: no-preference) {
  .reel-frame { overflow: hidden; }
  .bio-portrait img, .contact-portrait img, .reel-frame img { transition: transform 1.1s cubic-bezier(.2,.65,.2,1); }
  .js .bio-portrait[data-reveal].is-in img, .js .contact-portrait[data-reveal].is-in img { transition: transform 1.1s cubic-bezier(.2,.65,.2,1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bio-portrait:hover img, .contact-portrait:hover img,
  .js .bio-portrait[data-reveal].is-in:hover img, .js .contact-portrait[data-reveal].is-in:hover img { transform: scale(1.045); }
  .reel-frame:hover img { transform: scale(1.03); }
}

/* Home: el nombre entra con un fundido suave, sin movimiento. Termina en el mismo sitio y tamaño. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes v7-fade { from { opacity: 0; } }
  h1 em { animation: v7-fade 1.3s ease-out .15s backwards; }
  h1 strong { animation: v7-fade 1.3s ease-out .3s backwards; }
}

/* «Sostener los silencios»: serif cursiva en minúscula, dos líneas del mismo tamaño (Times, como el nombre de la home).
   Las líneas suben una a una al entrar.
   Regla de espaciado: la nota queda a una distancia de la línea base igual al 20 % del tamaño (--t). */
.manifesto h2.statement { --t: clamp(4rem, 18vw, 18rem); display: flex; flex-direction: column; align-items: flex-start; font-family: var(--serif); font-weight: 400; font-size: var(--t); line-height: .8; letter-spacing: -.07em; max-width: none; margin-bottom: calc(var(--t) * .1377 - .31rem); }
@media (max-width: 700px) { .manifesto h2.statement { --t: clamp(3.2rem, 22.5vw, 9rem); } }
/* dos líneas en cursiva minúscula, mismo tamaño */
.statement .a { font-style: italic; }
.statement .b { font-style: italic; }
.statement .ln { display: block; overflow: hidden; padding: .12em .1em .24em; margin: -.12em -.1em -.24em; }
.statement .ln > span { display: inline-block; white-space: nowrap; transition: transform 1.15s cubic-bezier(.2,.7,.1,1); }
.statement .b > span { transition-delay: .2s; }
.js .manifesto:not(.is-in) .statement .ln > span { transform: translateY(135%); }
.statement-note { transition: opacity .9s ease .7s; }
.js .manifesto:not(.is-in) .statement-note { opacity: 0; }

/* Bio: películas en cursiva y directores en negrita. */
.bio-copy em { font-style: italic; font-family: inherit; font-weight: 400; }
.bio-copy strong { font-weight: 700; }

/* Páginas legales */
.legal-page { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; font-size: 1rem; line-height: 1.55; }
.legal-page .back { font: 700 .71rem/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.legal-page h1 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(2.6rem, 8vw, 4.4rem); line-height: .95; letter-spacing: -.04em; margin: 2.5rem 0 3rem; }
.legal-page h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; margin: 3.2rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.legal-page p, .legal-page li { margin: 0 0 .9rem; }
.legal-page .todo { background: #ffe6a8; padding: 0 .25em; }

/* Bio: una sola escala para el texto bajo la foto (antes había .92, .95 y 1 rem según el ancho). */
.bio-copy, .option-b .bio-copy { font-family: var(--sans); font-size: 1rem; line-height: 1.5; max-width: 21rem; }
.bio-copy p { margin: 0 0 1.1rem; }
.bio-copy p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .bio-copy, .option-b .bio-copy { max-width: none; } }

/* «Ver PDF» vive dentro del bloque de contacto, con el mismo estilo que los demás datos. */
.contact-grid .pdf-link { display: inline; padding: 0 !important; font-size: inherit !important; text-decoration: underline; text-underline-offset: .2rem; color: inherit !important; }
.contact-tail { border-top: 1px solid rgba(255,255,255,.35); margin-top: 2.5rem; padding-top: 1.6rem; }
.footer-socials { margin: 0 !important; }

/* Más zoom al pasar el ratón por las fotos. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bio-portrait:hover img, .contact-portrait:hover img,
  .js .bio-portrait[data-reveal].is-in:hover img, .js .contact-portrait[data-reveal].is-in:hover img { transform: scale(1.11); }
  .reel-frame:hover img { transform: scale(1.06); }
}

/* Home: la foto entra con un zoom lento que se asienta exactamente en el encuadre aprobado (usa la propiedad `scale`, no toca el transform). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes v7-heroin { from { scale: 1.1; } }
  .hero-image img { animation: v7-heroin 2.6s cubic-bezier(.2,.65,.2,1) backwards; }
}
.hero-image { overflow: hidden; }

/* Contacto (Joe 10/10): orden filmografía → contacto personal → foto → materiales → línea → representación → redes → legal.
   Contacto negro; el faldón legal rojo cierra la página. Esta capa sustituye a los layouts anteriores del bloque. */
footer.contact { display: block; background: var(--ink); color: var(--white); padding: clamp(3.5rem, 8vw, 7rem) max(2rem, 8vw) 0; }
footer.contact > .section-label { margin: 0 0 1.4rem; }
.contact-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "photo personal rep" "photo materials rep"; grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 3.5vw, 4rem); row-gap: 2.2rem; align-items: start; border-top: 1px solid rgba(255,255,255,.75); padding-top: 1.6rem; }
.contact-personal { grid-area: personal; }
.contact-materials { grid-area: materials; align-self: start; }
footer.contact .contact-portrait { grid-area: photo; width: 100%; max-width: none; margin: 0; }
footer.contact .contact-portrait img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: 45% 45%; }
.contact-personal p, .contact-materials p, .contact-rep p { font-size: 1rem; line-height: 1.25; margin: 0; }
.contact-personal span, .contact-materials span, .contact-rep span { display: block; margin-top: .35rem; opacity: 1; font-size: .88rem; line-height: 1.8; }
.contact-personal a, .contact-materials a, .contact-rep a { color: inherit; text-decoration: underline; text-underline-offset: .2rem; }
.contact-materials .pdf-link { display: inline; padding: 0; font-size: inherit; }
.contact-rep { grid-area: rep; }
footer.contact .contact-tail { border-top: 1px solid rgba(255,255,255,.35); margin: 2.5rem 0 0; padding: 1.6rem 0 2.2rem; background: none; width: auto; }
.legal-band { background: var(--red); margin: 0 min(-2rem, -8vw); padding: 1.3rem max(2rem, 8vw) 5.5rem; }
.legal { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; font-size: .7rem; line-height: 1.3; }
.legal a { color: inherit; text-decoration: underline; text-underline-offset: .15rem; }
.legal-by { opacity: .8; }
@media (min-width: 701px) { .legal-by { margin-left: auto; } }
@media (max-width: 700px) {
  footer.contact { padding: 3.5rem 1rem 0; }
  .contact-main { display: flex; flex-direction: column; gap: 1.6rem; }
  .contact-main > *, footer.contact > * { order: 0 !important; }
  footer.contact .contact-portrait { max-width: none; }
  .contact-rep { width: 100%; align-self: stretch; margin-top: .8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.35); }
  .legal-band { margin: 0 -1rem; padding: 1.3rem 1rem 6rem; }
}

/* V8 · 12/10: triángulo de «Escena»/«Scene» en SVG (iOS pintaba ▶ como emoji azul). Hereda el color del enlace. */
.scene-link .scene-tri { display:inline-block; width:.62em; height:.75em; flex:none; fill:currentColor; transform:translateY(-.06em); }