@font-face{
  font-family:"Bodoni Moda";
  src:url("fonts/bodoni-moda-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("fonts/barlow-condensed-500-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:500;
  font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:600;
  font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

:root{
  --bg:#080907;
  --bg-2:#0f100d;
  --bg-3:#171814;
  --ink:#eee7dc;
  --ink-soft:#c8beaf;
  --ink-mute:#9d9385;
  --line:rgba(238,231,220,.18);
  --line-strong:rgba(238,231,220,.38);
  --violet:#b59be6;
  --violet-2:#d8c7fa;
  --paper:#dcd4c8;
  --paper-ink:#11120f;
  --paper-ink-3:rgba(17,18,15,.66);
  --paper-ink-4:rgba(17,18,15,.28);
  /* violeta sobre marfil: el tono display es más claro que el de etiqueta,
     que necesita 4.5:1 por ir a 13px */
  --violet-paper:#6f548e;
  --violet-paper-strong:#5f4a78;
  /* único verde del sistema: señal de disponibilidad, nunca texto */
  --live:#9bbd89;
  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"Hanken Grotesk",Arial,sans-serif;
  --mono:"Barlow Condensed","Arial Narrow",sans-serif;
  --hand:"Hanken Grotesk",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth;background:var(--bg);color-scheme:dark}
html,body{font-size:16px;background:var(--bg);color:var(--ink);font-family:var(--sans)}
body{min-width:320px}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--violet-2);outline-offset:4px}
[id]{scroll-margin-top:84px}

.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:1000;
  padding:10px 14px;
  color:var(--paper-ink);
  background:var(--violet-2);
  font-weight:700;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

.portfolio-shell{position:relative;z-index:2;min-height:100vh;background:var(--bg);isolation:isolate}
.home-header{
  position:sticky;
  top:0;
  z-index:80;
  min-height:68px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:28px;
  padding:0 clamp(20px,3.2vw,52px);
  background:rgba(8,9,7,.96);
  border-bottom:1px solid var(--line);
}
.home-brand{
  width:max-content;
  font-family:var(--display);
  font-size:22px;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.brand-mark{display:none}
.home-nav{display:flex;align-items:center;gap:28px}
.home-nav a,.home-nav button{
  position:relative;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:14px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.home-nav a::after,.home-nav button::after{
  content:"";
  position:absolute;
  right:0;
  bottom:7px;
  left:0;
  height:1px;
  background:var(--violet-2);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.home-nav a:hover,.home-nav button:hover{color:var(--ink)}
.home-nav a:hover::after,.home-nav button:hover::after{transform:scaleX(1);transform-origin:left}
.home-status{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.home-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live)}

.screen-hero{
  min-height:calc(100svh - 68px);
  max-height:980px;
  display:grid;
  grid-template-columns:minmax(360px,.72fr) minmax(480px,1.28fr) clamp(150px,12vw,188px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.screen-copy{
  position:relative;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  padding:clamp(44px,7vh,88px) 0 clamp(38px,7vh,78px) clamp(24px,5vw,80px);
  background:var(--bg);
  border-right:1px solid var(--line);
}
.screen-copy::after{
  content:"";
  position:absolute;
  top:0;
  right:-150px;
  bottom:0;
  width:150px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--bg),transparent);
}
.screen-title{
  position:relative;
  z-index:3;
  width:clamp(430px,45vw,700px);
  margin:0 0 24px;
  font-family:var(--display);
  font-size:clamp(68px,7vw,96px);
  font-weight:400;
  line-height:.82;
  letter-spacing:-.035em;
  color:var(--ink);
}
.screen-title span{display:block}
.screen-title em{font-style:italic;font-weight:400;color:var(--violet);margin-left:-.035em}
.screen-role{
  max-width:34ch;
  font-family:var(--mono);
  font-size:15px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
}
.screen-role span{color:var(--violet-2)}
.screen-copy p.screen-note{
  max-width:40ch;
  margin-top:18px;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.55;
}
.screen-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:540px}
.action-button{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 22px;
  border:1px solid var(--line-strong);
  border-radius:0;
  color:var(--ink);
  background:transparent;
  font-family:var(--mono);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.action-button.primary{color:var(--paper-ink);background:var(--violet);border-color:var(--violet)}
.action-button:hover{transform:translateY(-2px);border-color:var(--violet-2);background:var(--violet-2);color:var(--paper-ink)}
.action-button svg{width:18px;height:18px;flex:none}
.screen-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-top:34px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.screen-meta b{font-weight:700;color:var(--ink-soft)}

.screen-portrait{position:relative;min-width:0;overflow:hidden;background:#30302c}
.screen-portrait::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,9,7,.52),transparent 28%),linear-gradient(0deg,rgba(8,9,7,.22),transparent 35%);
}
.screen-portrait img{width:100%;height:100%;object-fit:cover;object-position:58% 38%;filter:saturate(.84) contrast(1.04);transform:scale(1.015)}
.screen-portrait-label{
  position:absolute;
  z-index:3;
  right:20px;
  bottom:18px;
  display:flex;
  gap:16px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}

.screen-strip{
  position:relative;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:8px;
  padding:15px 8px 15px 16px;
  background:#050604;
  border-left:1px solid rgba(238,231,220,.34);
}
.screen-strip::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:3px;
  width:8px;
  background:radial-gradient(circle at center,transparent 0 3px,rgba(238,231,220,.28) 3.5px 4px,transparent 4.5px) center 2px/8px 19px repeat-y;
}
.strip-frame{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(238,231,220,.16);
  background:#1a1a17;
  cursor:pointer;
}
.strip-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform .55s var(--ease)}
.strip-frame:nth-child(1) img{object-position:50% 38%}
.strip-frame:nth-child(2) img{object-position:52% 42%}
.strip-frame:nth-child(3) img{object-position:50% 38%}
.strip-frame:hover img{transform:scale(1.035)}
.strip-frame span{
  position:absolute;
  right:7px;
  bottom:6px;
  padding:3px 6px;
  background:rgba(5,6,4,.76);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ink);
}

.portfolio-section{padding:clamp(84px,10vw,150px) clamp(22px,4.5vw,72px)}
.section-heading-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,480px);
  align-items:end;
  gap:48px;
  margin-bottom:clamp(42px,6vw,78px);
}
.section-heading-row h2{
  max-width:11ch;
  font-family:var(--display);
  font-size:clamp(52px,7vw,92px);
  line-height:.88;
  letter-spacing:-.035em;
  font-weight:400;
}
.section-heading-row h2 em{font-style:italic;color:var(--violet)}
.section-heading-row p{max-width:48ch;color:var(--ink-soft);font-size:18px;line-height:1.6}
.section-heading-row .section-action{justify-self:start;margin-top:20px}

.scene-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.scene-card{grid-column:span 3;min-width:0;color:var(--ink);background:var(--bg-2);border-top:1px solid var(--line-strong)}
.scene-card:nth-child(1){grid-column:span 8}
.scene-card:nth-child(2){grid-column:span 4}
.scene-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#24251f}
.scene-card:nth-child(1) .scene-media,.scene-card:nth-child(2) .scene-media{aspect-ratio:16/9}
.scene-media::before{
  content:attr(data-frame);
  position:absolute;
  z-index:3;
  top:0;
  right:0;
  left:0;
  height:28px;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:rgba(5,6,4,.88);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ink-soft);
}
.scene-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.scene-card:hover .scene-media img{transform:scale(1.025)}
.scene-play{
  position:absolute;
  z-index:4;
  inset:50% auto auto 50%;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  color:#fff;
  background:rgba(8,9,7,.42);
  transform:translate(-50%,-50%);
  transition:background-color .25s var(--ease),transform .25s var(--ease);
}
.scene-card:hover .scene-play{background:var(--violet);color:var(--paper-ink);transform:translate(-50%,-50%) scale(1.05)}
.scene-play svg{width:19px;height:19px;margin-left:2px}
.scene-copy{display:grid;grid-template-columns:1fr auto;gap:12px;padding:16px 2px 8px}
.scene-title{font-family:var(--display);font-size:clamp(20px,2vw,29px);line-height:1.05;text-wrap:balance}
.scene-tag{
  align-self:start;
  font-family:var(--mono);
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--violet-2);
  text-align:right;
}

.proof-section{padding:clamp(86px,10vw,148px) clamp(22px,4.5vw,72px);background:var(--paper);color:var(--paper-ink)}
.proof-section .section-heading-row{margin-bottom:52px}
.proof-section .section-heading-row h2{color:var(--paper-ink)}
.proof-section .section-heading-row h2 em{color:var(--violet-paper)}
.proof-section .section-heading-row p{color:var(--paper-ink-3)}
.stage-lines{border-top:1px solid rgba(17,18,15,.38);margin-bottom:56px}
.stage-line{
  display:grid;
  grid-template-columns:minmax(160px,.65fr) minmax(0,1.7fr) auto;
  gap:28px;
  align-items:center;
  min-height:76px;
  border-bottom:1px solid rgba(17,18,15,.24);
}
.stage-line span:first-child{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.stage-line strong{font-family:var(--display);font-size:clamp(22px,2.2vw,31px);font-weight:500;line-height:1.1}
.stage-line span:last-child{text-align:right;color:var(--paper-ink-3);font-size:15px}
.credit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.credit-card{position:relative;min-width:0;border-top:1px solid rgba(17,18,15,.44)}
.credit-photo{position:relative;aspect-ratio:4/3;overflow:hidden;background:#777268;margin-top:10px}
.credit-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.credit-card:hover .credit-photo img{transform:scale(1.025)}
.credit-card:nth-child(1) img{object-position:74% 50%}
.credit-card:nth-child(2) img{object-position:68% 47%}
.credit-card:nth-child(3) img{object-position:54% 46%}
.credit-card:nth-child(4) img{object-position:36% 50%}
.credit-meta{padding-top:18px}
.credit-meta h3{font-family:var(--display);font-size:clamp(25px,2.4vw,34px);font-weight:500;line-height:1}
.credit-meta p{margin-top:9px;color:var(--paper-ink-3);font-size:15px;line-height:1.45}
.credit-index{display:block;margin-bottom:6px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet-paper-strong)}
.proof-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:56px;padding-top:26px;border-top:1px solid rgba(17,18,15,.32)}
.proof-footer p{max-width:52ch;color:var(--paper-ink-3);font-size:16px;line-height:1.55}
.proof-footer .action-button{border-color:rgba(17,18,15,.48);color:var(--paper-ink)}
.proof-footer .action-button:hover{border-color:var(--paper-ink);background:var(--paper-ink);color:var(--paper)}
.proof-section :focus-visible,.contact-final :focus-visible{outline-color:var(--paper-ink)}

.profile-section{
  display:grid;
  grid-template-columns:minmax(0,1.24fr) minmax(360px,.76fr);
  gap:clamp(48px,7vw,110px);
  align-items:start;
  padding:clamp(90px,11vw,160px) clamp(22px,4.5vw,72px);
}
.profile-contact-sheet{display:grid;grid-template-columns:1.05fr .8fr .9fr;grid-template-rows:repeat(2,clamp(220px,27vw,390px));gap:9px}
.profile-frame{position:relative;overflow:hidden;background:#22231e;border:1px solid var(--line)}
.profile-frame:first-child{grid-row:span 2}
.profile-frame:nth-child(4){grid-column:span 2}
.profile-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);transition:transform .65s var(--ease)}
.profile-frame:first-child img{object-position:52% 44%}
.profile-frame:nth-child(2) img{object-position:50% 38%}
.profile-frame:nth-child(3) img{object-position:68% 47%}
.profile-frame:nth-child(4) img{object-position:54% 46%}
.profile-frame:hover img{transform:scale(1.02)}
.profile-frame span{
  position:absolute;
  left:9px;
  bottom:8px;
  padding:4px 7px;
  background:rgba(5,6,4,.78);
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.profile-copy{position:sticky;top:108px;padding-top:6px}
.profile-copy h2{max-width:8ch;font-family:var(--display);font-size:clamp(56px,6.6vw,92px);line-height:.86;letter-spacing:-.035em;font-weight:400}
.profile-copy h2 em{display:block;color:var(--violet);font-style:italic}
.profile-copy .profile-lead{margin-top:32px;color:var(--ink);font-family:var(--display);font-size:clamp(24px,2.4vw,34px);line-height:1.16}
.profile-copy .profile-body{max-width:64ch;margin-top:22px;color:var(--ink-soft);font-size:17px;line-height:1.7}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}

.materials-section{padding:clamp(86px,10vw,150px) clamp(22px,4.5vw,72px);border-top:1px solid var(--line);background:var(--bg-2)}
.materials-section .section-heading-row{margin-bottom:38px}
.material-list{border-top:1px solid var(--line-strong)}
.material-row{
  width:100%;
  min-height:118px;
  display:grid;
  grid-template-columns:minmax(190px,.65fr) minmax(0,1.35fr) 56px;
  align-items:center;
  gap:32px;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  transition:color .25s var(--ease),background-color .25s var(--ease),transform .35s var(--ease);
}
.material-row:hover{color:var(--violet-2);background:rgba(238,231,220,.025);transform:translateX(10px)}
.material-row strong{font-family:var(--display);font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1}
.material-row span{max-width:54ch;color:var(--ink-soft);font-size:16px;line-height:1.5}
.material-row svg{justify-self:end;width:26px;height:26px;color:var(--ink-mute);transition:transform .3s var(--ease),color .3s var(--ease)}
.material-row:hover svg{color:var(--violet-2);transform:translate(4px,-4px)}

.contact-final{
  min-height:68vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:72px;
  align-items:end;
  padding:clamp(90px,11vw,168px) clamp(22px,4.5vw,72px) clamp(70px,8vw,120px);
  color:#11120f;
  background:var(--violet);
}
.contact-final h2{max-width:10ch;font-family:var(--display);font-size:clamp(58px,7vw,96px);line-height:.86;letter-spacing:-.035em;font-weight:400}
.contact-final h2 em{font-style:italic}
.contact-final p{max-width:50ch;margin-top:28px;font-size:18px;line-height:1.6;color:rgba(17,18,15,.74)}
.contact-final-links{border-top:1px solid rgba(17,18,15,.48)}
.contact-final-links a,.contact-final-links button{
  width:100%;
  min-height:72px;
  display:grid;
  grid-template-columns:110px minmax(0,1fr) 28px;
  align-items:center;
  gap:20px;
  border-bottom:1px solid rgba(17,18,15,.34);
  color:#11120f;
  text-align:left;
}
.contact-final-links small{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.contact-final-links strong{min-width:0;overflow-wrap:anywhere;font-family:var(--sans);font-size:clamp(18px,2vw,27px);font-weight:600}
.contact-final-links svg{width:22px;height:22px;transition:transform .3s var(--ease)}
.contact-final-links a:hover svg,.contact-final-links button:hover svg{transform:translate(4px,-4px)}

.home-footer{
  min-height:84px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:20px clamp(22px,4.5vw,72px);
  border-top:1px solid var(--line);
  background:var(--bg);
  color:var(--ink-mute);
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.home-footer a{min-height:44px;display:inline-flex;align-items:center;color:var(--ink-soft)}
.home-footer a:hover{color:var(--violet-2)}
.mobile-dock{display:none}

/* The dossier overlays inherit the same screen-test world. */
.overlay{z-index:200}
.ov-backdrop{background:rgba(3,4,3,.9);backdrop-filter:none}
.ov-window{max-width:1440px;background:var(--bg);border-color:var(--line);overscroll-behavior:contain}
.lightbox{overscroll-behavior:contain}
.ov-bars{min-height:68px;padding:12px clamp(18px,3vw,42px);background:rgba(8,9,7,.97);backdrop-filter:none;font-size:12px;color:var(--ink-soft)}
.ov-close{min-height:44px;padding:0 16px;border-radius:0;font-size:12px;background:transparent}
.ov-close:hover{background:var(--violet-2);border-color:var(--violet-2);color:var(--paper-ink)}
.ov-body{padding:clamp(38px,5vw,72px) clamp(18px,4vw,58px) 90px}
.ov-title{max-width:15ch;font-family:var(--display);font-size:clamp(48px,6vw,96px);font-weight:400;letter-spacing:-.035em}
.ov-title i{color:var(--violet);font-weight:400}
.ov-sub{max-width:65ch;margin-bottom:48px;color:var(--ink-soft);font-family:var(--sans);font-style:normal;font-size:16px}
/* Si el panel no lleva subtítulo, el titular asume su aire inferior. */
.ov-title:not(:has(+ .ov-sub)){margin-bottom:48px}
.ov-sub::before{background:var(--violet)}
.ov-metabar{border-radius:0}
.mb-cell{font-size:11px;color:var(--ink-soft)}
.foto-tab,.cv-btn,.contact-mini,.soylu-actions button,.soylu-actions a{border-radius:0;min-height:44px}
.foto-card-tag{opacity:1;border-radius:0}
.folder-card,.cc-card,.reel-frame,.short,.cv-preview,.hero-soon,.pbtn{border-radius:0}
.cval{overflow-wrap:anywhere}

@media(min-width:1101px){
  /* Las tarjetas 3 a 6 ocupan un cuarto de la retícula: su titular baja de
     escala para que un título largo entre en dos líneas y no en tres. */
  .scene-card:nth-child(n+3) .scene-title{font-size:clamp(19px,1.7vw,25px)}
}

@media(max-width:1100px){
  .home-header{grid-template-columns:1fr auto;padding-inline:24px}
  .home-nav{display:none}
  .screen-hero{grid-template-columns:minmax(320px,.8fr) minmax(420px,1.2fr) 142px}
  .screen-copy{padding-left:32px}
  .screen-title{width:clamp(390px,48vw,610px);font-size:clamp(64px,8vw,88px)}
  .scene-card:nth-child(1),.scene-card:nth-child(2){grid-column:span 6}
  .scene-card{grid-column:span 6}
  .credit-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 14px}
  .profile-section{grid-template-columns:1fr;gap:68px}
  .profile-copy{position:static;display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:52px}
  .profile-copy h2{grid-row:span 3}
  .profile-copy .profile-lead{margin-top:4px}
  .contact-final{grid-template-columns:1fr;gap:64px}
  .contact-final-links{max-width:760px;width:100%}
}

@media(max-width:900px){
  html{scroll-padding-bottom:72px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .home-header{position:absolute;inset:0 0 auto;z-index:20;min-height:64px;background:linear-gradient(180deg,rgba(8,9,7,.9),transparent);border-bottom:0}
  /* Sobre el retrato, el nombre completo repetiría el titular que viene justo
     debajo: se reduce al monograma, que además se lee como botón de inicio. */
  .home-brand{min-height:44px;display:inline-flex;align-items:center}
  .brand-full{display:none}
  .brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    margin-left:-6px;
    font-family:var(--display);
    font-style:italic;
    font-size:27px;
    letter-spacing:-.01em;
    color:var(--ink);
  }
  .home-status{font-size:12px;color:rgba(255,255,255,.82)}
  .screen-hero{min-height:100svh;max-height:none;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(480px,62svh) auto auto;border-bottom:0}
  .screen-portrait{grid-row:1;grid-column:1}
  .screen-portrait::before{background:linear-gradient(0deg,var(--bg) 0,rgba(8,9,7,.72) 20%,transparent 54%),linear-gradient(180deg,rgba(8,9,7,.2),transparent 24%)}
  .screen-portrait img{object-position:50% 42%;filter:saturate(.88) contrast(1.03);transform:none}
  .screen-portrait-label{display:none}
  .screen-copy{grid-row:2;padding:6px 20px 34px;border:0;background:var(--bg)}
  .screen-copy::after{display:none}
  .screen-title{width:auto;margin:-78px 0 24px;font-size:clamp(58px,19vw,84px);line-height:.82}
  .screen-role{font-size:14px}
  .screen-copy p.screen-note{font-size:16px}
  .screen-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:24px}
  .action-button{min-width:0;padding-inline:12px;font-size:14px}
  .screen-actions .action-button:first-child{grid-column:1/-1}
  .screen-meta{margin-top:26px;gap:8px 18px}
  .screen-strip{grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:142px;padding:8px 8px 8px 15px;border-top:1px solid var(--line);border-left:0}
  .screen-strip::before{top:0;right:0;bottom:auto;left:0;width:auto;height:7px;background:radial-gradient(circle at center,transparent 0 2px,rgba(238,231,220,.3) 2.5px 3px,transparent 3.5px) 2px center/18px 7px repeat-x}
  .portfolio-section,.proof-section,.profile-section,.materials-section{padding:84px 20px}
  .section-heading-row{grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .section-heading-row h2{font-size:clamp(49px,16vw,70px)}
  .section-heading-row p{font-size:16px}
  .scene-grid{display:grid;grid-template-columns:1fr;gap:34px}
  .scene-card,.scene-card:nth-child(1),.scene-card:nth-child(2){grid-column:1}
  .scene-card .scene-media,.scene-card:nth-child(1) .scene-media,.scene-card:nth-child(2) .scene-media{aspect-ratio:16/9}
  .scene-copy{padding-top:13px}
  .scene-title{font-size:25px}
  .stage-line{grid-template-columns:1fr auto;gap:7px 16px;padding:18px 0}
  .stage-line strong{grid-column:1/-1;grid-row:1;font-size:25px}
  .stage-line span:first-child{grid-column:1;grid-row:2}
  .stage-line span:last-child{grid-column:2;grid-row:2;font-size:13px}
  .credit-grid{grid-template-columns:1fr;gap:42px}
  .credit-photo{aspect-ratio:16/10}
  .proof-footer{align-items:flex-start;flex-direction:column}
  .profile-contact-sheet{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,210px);gap:7px}
  .profile-frame:first-child{grid-row:span 2}
  .profile-frame:nth-child(4){grid-column:span 2}
  .profile-copy{display:block}
  .profile-copy h2{font-size:clamp(54px,17vw,76px)}
  .profile-copy .profile-lead{margin-top:30px}
  .material-row{grid-template-columns:1fr 36px;gap:10px;min-height:118px}
  .material-row strong{font-size:32px}
  .material-row span{grid-column:1;grid-row:2;font-size:15px}
  .material-row svg{grid-column:2;grid-row:1/3}
  .contact-final{min-height:auto;padding:88px 20px 82px}
  .contact-final h2{font-size:clamp(54px,17vw,76px)}
  .contact-final-links a,.contact-final-links button{grid-template-columns:74px minmax(0,1fr) 22px;gap:12px;min-height:76px}
  .contact-final-links strong{font-size:18px}
  .home-footer{flex-direction:column;align-items:flex-start;padding:24px 20px 30px}
  .mobile-dock{
    position:fixed;
    z-index:120;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    /* El monograma ocupa una columna estrecha fija; los cinco accesos con
       texto se reparten el resto por igual. */
    grid-template-columns:52px repeat(5,1fr);
    min-height:64px;
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(8,9,7,.98);
    border-top:1px solid var(--line-strong);
  }
  .mobile-dock button,.mobile-dock a{
    min-width:0;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    border-right:1px solid var(--line);
    color:var(--ink-soft);
    font-family:var(--mono);
    font-size:11px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .mobile-dock .dock-primary{color:var(--violet-2)}
  .mobile-dock .dock-home{
    padding:0;
    font-family:var(--display);
    font-style:italic;
    font-size:22px;
    font-weight:400;
    letter-spacing:-.01em;
    text-transform:none;
    color:var(--ink);
  }
  .ov-bars{min-height:60px;padding:8px 14px}
  .ov-bars>span{max-width:58vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ov-body{padding:34px 16px 80px}
  .ov-title{font-size:clamp(43px,14vw,62px)}
  .ov-sub{margin-bottom:34px}
  .cv-preview-pages{grid-template-columns:1fr}
}

@media(max-width:390px){
  .home-status{gap:6px;font-size:11px}
  .screen-hero{grid-template-rows:minmax(430px,58svh) auto auto}
  .screen-strip{grid-template-rows:118px}
  .screen-actions{grid-template-columns:1fr}
  .screen-actions .action-button:first-child{grid-column:1}
  .profile-contact-sheet{grid-template-rows:repeat(3,170px)}
  .contact-final-links a,.contact-final-links button{grid-template-columns:1fr 22px;gap:8px}
  .contact-final-links small{grid-column:1;display:block;margin-top:12px}
  .contact-final-links strong{grid-column:1;grid-row:2;margin-bottom:12px}
  .contact-final-links svg{grid-column:2;grid-row:1/3}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .screen-portrait img,.scene-media img,.profile-frame img{transform:none!important}
}

@media(prefers-contrast:more){
  :root{--line:rgba(255,255,255,.38);--line-strong:rgba(255,255,255,.66);--ink-soft:#eee7dc;--ink-mute:#d0c8bc}
}