@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Rodrigo García-Bernalt — oscuro cálido con acento dorado (paleta original); Jost para la estructura, EB Garamond para los textos largos. */
:root{--bg:#12100e;--panel:#1a1714;--fg:#ece6dc;--muted:#9c9389;--line:#34302b;--accent:#c9a46e;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;--serif:"EB Garamond",Garamond,Georgia,serif;
  --pad:clamp(16px,6vw,80px);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12100e;--fg:#ece6dc}}
:root[data-theme="dark"]{--bg:#12100e;--fg:#ece6dc}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.65}
p{margin:0}img{max-width:100%;display:block}ul,ol{list-style:none;margin:0;padding:0}
a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{color:var(--accent);border-color:var(--accent)}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
i,em{font-style:italic}

/* navegación: nombre a la izquierda, secciones en cajas; Proyectos despliega sus páginas */
.topnav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:10px 24px;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 14px;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.topnav.solid,.topnav.always{background:rgba(18,16,14,.95);border-color:var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.topnav a{border:0}
.topnav .brand{font-size:13px;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.menu{display:flex;gap:8px;align-items:stretch}
.menu>li{position:relative}
.menu .box{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);background:rgba(18,16,14,.35);color:var(--muted);
  font:inherit;font-size:11px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s}
.menu .box:hover,.menu li:hover>.box,.menu li:focus-within>.box,.menu .box[aria-current="page"],.menu .box.cur{color:var(--accent);border-color:var(--accent)}
.menu .box svg{width:8px;height:8px;fill:currentColor;transition:transform .2s}
.menu .sub{position:absolute;top:100%;left:0;min-width:240px;padding-top:8px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
.menu .sub ul{background:var(--panel);border:1px solid var(--line);padding:6px 0}
.menu .sub a{display:block;padding:10px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.menu .sub a:hover,.menu .sub a[aria-current="page"]{color:var(--accent);background:rgba(201,164,110,.06)}
.menu li:hover .sub,.menu li:focus-within .sub,.menu li.open .sub{opacity:1;visibility:visible;transform:none}
.menu li:hover .box svg,.menu li.open .box svg{transform:rotate(180deg)}
.home .topnav:not(.solid) .brand{opacity:0}
.topnav .brand{transition:opacity .3s}
@media (max-width:640px){.topnav .brand{display:none}.topnav{justify-content:flex-end}.menu{gap:6px}.menu .box{padding:0 10px;letter-spacing:.14em;height:34px}
  .menu .sub{right:auto;left:0}}

/* portada */
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;top:0;bottom:0;right:0;height:100%;width:min(62%,820px);object-fit:cover;object-position:62% 22%;
  -webkit-mask-image:radial-gradient(ellipse 58% 62% at 55% 40%,#000 22%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.18) 74%,rgba(0,0,0,.05) 86%,transparent 96%);
  mask-image:radial-gradient(ellipse 58% 62% at 55% 40%,#000 22%,rgba(0,0,0,.78) 40%,rgba(0,0,0,.45) 58%,rgba(0,0,0,.18) 74%,rgba(0,0,0,.05) 86%,transparent 96%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,var(--bg) 0%,rgba(18,16,14,0) 22%)}
.hero .in{position:relative;z-index:1;padding:0 var(--pad) clamp(40px,8vw,96px)}
@media (max-width:760px){.hero img{width:100%;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 40%,transparent 95%);mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 40%,transparent 95%)}
  .hero::after{background:linear-gradient(0deg,var(--bg) 10%,rgba(18,16,14,.4) 40%,rgba(18,16,14,0) 65%)}}
h1{font-weight:300;font-size:clamp(26px,5.2vw,64px);letter-spacing:.14em;text-transform:uppercase;line-height:1.12;margin:0}
.hero h1{white-space:nowrap}
.tag{margin-top:18px;color:var(--muted);letter-spacing:.06em}
.tag b{font-weight:400;color:var(--accent)}

/* etiquetas de sección */
.label{display:flex;align-items:center;gap:16px;font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:0 0 30px}
.label::after{content:"";flex:1;height:1px;background:var(--line)}

/* biografía de portada */
.bio-home{padding:clamp(56px,8vw,110px) var(--pad) 0;max-width:calc(760px + 2*var(--pad));margin:0 auto}
.prose{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.5vw,21px);line-height:1.62;color:#e4ddd1}
.prose p+p{margin-top:1em}
.prose .lead{font-size:clamp(22px,2.2vw,27px);line-height:1.45;color:var(--fg)}
.photo{margin:clamp(40px,6vw,64px) calc(-1 * min(12vw,120px));}
.photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.photo.wide img{aspect-ratio:16/8}
.photo figcaption{margin-top:10px;font-size:13px;letter-spacing:.06em;color:var(--muted)}
@media (max-width:1000px){.photo{margin-inline:0}}

/* índice al final del texto */
.toc{margin-top:clamp(56px,7vw,80px)}
.toc ul{border-top:1px solid var(--line)}
.toc li{border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:22px 0;border:0}
.toc .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.toc .t{grid-column:1;font-size:clamp(22px,2.4vw,28px);letter-spacing:.02em;color:var(--fg)}
.toc .d{grid-column:1;color:var(--muted);font-size:15px}
.toc .ar{grid-column:2;grid-row:1 / span 3;color:var(--muted);font-size:22px;transition:transform .25s,color .25s}
.toc a:hover .t,.toc a:hover .ar{color:var(--accent)}
.toc a:hover .ar{transform:translateX(4px)}

/* páginas interiores */
main{display:block}
.page-head{padding:calc(140px + env(safe-area-inset-top,0px)) var(--pad) 0;max-width:1100px}
.page-head h1{font-size:clamp(24px,3.6vw,40px);letter-spacing:.18em}
.subnav{margin-top:22px;display:flex;gap:8px 26px;flex-wrap:wrap}
.subnav a{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);border:0}
.subnav a:hover{color:var(--accent)}
section{padding:clamp(56px,7vw,96px) var(--pad) 0;max-width:1100px}
.note{color:var(--muted);font-size:15px;max-width:62ch}

/* canciones */
.tracks{border-top:1px solid var(--line)}
.track{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.play{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer;display:grid;place-items:center;grid-row:span 2;padding:0}
.play:hover,.track.on .play{border-color:var(--accent);color:var(--accent)}
.play svg{width:16px;height:16px;fill:currentColor}
.track .t{font-size:clamp(20px,2.4vw,26px);letter-spacing:.02em;min-width:0}
.track .meta{grid-column:3;grid-row:1;font-size:13px;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.track .bar{grid-column:2 / 4;height:18px;display:flex;align-items:center;cursor:pointer}
.track .bar span{display:block;height:1px;width:100%;background:var(--line);position:relative}
.track .bar i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--accent)}
.credits{margin-top:22px;color:var(--muted);font-size:15px;line-height:1.8;max-width:70ch}
.credits b{color:var(--fg);font-weight:400}

/* vídeos */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,32px)}
.video{border:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.video .ph{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.video .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.video:hover .ph img{opacity:.85}
.video .ph::after{content:"";position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:rgba(18,16,14,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l8 5-8 5z' fill='%23ece6dc'/%3E%3C/svg%3E") center/16px no-repeat;border:1px solid rgba(236,230,220,.3)}
.video .t{font-size:19px;color:var(--fg)}
.video .s{color:var(--muted);font-size:14px}

/* recital */
.recital{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.recital figure{margin:0}
.recital figure img{width:100%;border:1px solid var(--line)}
@media (max-width:820px){.recital{grid-template-columns:1fr}.recital figure{max-width:380px}}
.recital h3{font-weight:300;font-size:clamp(24px,2.8vw,32px);letter-spacing:.06em;margin:0 0 6px}
.recital .when{color:var(--muted);letter-spacing:.04em;margin-bottom:26px}
dl.facts{margin:0 0 30px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;font-size:16px}
dl.facts dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:3px}
dl.facts dd{margin:0}
.program{counter-reset:p;border-top:1px solid var(--line);margin-top:8px}
.program li{counter-increment:p;display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 12px;padding:11px 0;border-bottom:1px solid var(--line)}
.program li::before{content:counter(p,decimal-leading-zero);color:var(--accent);font-size:12px;letter-spacing:.1em;padding-top:5px}
.program .t{font-size:18px}
.program .s{grid-column:2;color:var(--muted);font-size:14px}
.btns{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.btn{font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);padding:9px 15px}
.btn:hover{border-color:var(--accent)}

/* partituras */
.scores{border-top:1px solid var(--line)}
.score{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.score .t{font-size:clamp(20px,2.4vw,26px)}
.score .s{grid-column:1;color:var(--muted);font-size:15px}
.score .dl{grid-column:2;grid-row:1 / span 2;display:flex;gap:10px}
@media (max-width:560px){.score{grid-template-columns:1fr}.score .dl{grid-column:1;grid-row:auto;margin-top:10px}}

/* prensa */
.press{max-width:760px}
.press + .press{padding-top:clamp(48px,6vw,72px)}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:24px;max-width:760px}
.photos a{border:0;display:flex;flex-direction:column;gap:10px}
.photos img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line)}
.photos span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.photos a:hover span{color:var(--accent)}

/* pie con contacto */
footer{margin-top:clamp(80px,10vw,130px);padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:baseline;color:var(--muted);font-size:12px;letter-spacing:.12em}
footer .f-mail{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
footer .f-k{text-transform:uppercase;letter-spacing:.24em;color:var(--accent)}
footer .f-mail a{font-size:16px;letter-spacing:.04em;color:var(--fg)}
footer .f-links{display:flex;gap:22px;text-transform:uppercase}
footer .f-links a{border:0;color:var(--muted)}footer .f-links a:hover{color:var(--accent)}
footer .f-c{grid-column:1 / -1;text-transform:uppercase;font-size:11px}
@media (max-width:560px){footer{grid-template-columns:1fr}}

/* canciones: pistas y créditos lado a lado */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.credits-dl{margin:0;padding-top:6px;font-size:15px}
.credits-dl dt{font-size:11px}
details.crew{margin-top:6px;border-top:1px solid var(--line)}
details.crew summary{cursor:pointer;list-style:none;padding:14px 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
details.crew summary::-webkit-details-marker{display:none}
details.crew summary::after{content:" +";color:var(--accent)}
details.crew[open] summary::after{content:" −"}
details.crew summary:hover{color:var(--accent)}
details.crew .facts{font-size:14px;gap:6px 20px}
.note-p{max-width:760px}
.note-p .prose{font-style:italic}
.note-p .sig{font-style:normal;margin-top:1.2em;font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}

/* intro de página */
.intro-p{margin-top:22px;max-width:62ch;color:#d9d1c4;font-family:var(--serif);font-size:clamp(19px,1.5vw,21px);line-height:1.6}
.page-head .kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.page-head .sub2{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,24px);color:var(--muted)}
.track .links{grid-column:2 / 4;font-size:12px;letter-spacing:.16em;text-transform:uppercase;display:flex;gap:20px;flex-wrap:wrap}
.track .links a{color:var(--muted);border:0}.track .links a:hover{color:var(--accent)}
.program .s a{color:var(--muted);border:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-left:10px}
.program .s a:hover{color:var(--accent)}
.program .s .lk{white-space:nowrap}

/* partituras en tarjetas */
.sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(24px,3vw,40px) clamp(18px,2.5vw,32px)}
.sheet{display:flex;flex-direction:column;gap:12px;min-width:0}
.sheet .pg{display:block;border:0;background:#f4f1ea;aspect-ratio:8.5/11;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 14px 30px -18px rgba(0,0,0,.8)}
.sheet .pg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:opacity .25s}
.sheet .pg:hover img{opacity:.88}
.sheet .t{font-size:20px;line-height:1.25}
.sheet .s{color:var(--muted);font-size:14px;margin-top:-6px}
.sheet .dl{display:flex;gap:8px;flex-wrap:wrap}
.sheet .dl .btn{padding:8px 11px;letter-spacing:.12em}

/* feria */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.feature{grid-template-columns:1fr}}
.feature .video .ph::after{width:56px;height:56px;background-size:20px}
.feature .facts{font-size:15px}

/* menú sin cajas: texto limpio, el activo en dorado */
.menu{gap:clamp(14px,2.4vw,30px)}
.menu .box{height:auto;padding:6px 0;border:0;background:none}
.menu .box:hover,.menu li:hover>.box,.menu li:focus-within>.box,.menu .box[aria-current="page"],.menu .box.cur{border:0}
.menu .sub{left:-18px}
@media (max-width:640px){.menu{gap:14px}.menu .box{padding:6px 0}}
.contact-dl{font-size:clamp(18px,1.8vw,22px);gap:14px 32px}
.contact-dl dt{padding-top:7px}
.contact-dl a{border-bottom:1px solid var(--line)}
.page-head .intro-p + .intro-p{margin-top:14px}
.sheet{scroll-margin-top:100px}
.sheet:target .pg{box-shadow:0 0 0 1px var(--accent),0 14px 30px -18px rgba(0,0,0,.8)}

/* notas personales: misma estética en todas las entradas */
.note-p .prose{font-style:normal}
.note-p .sig{font-family:var(--serif);font-style:italic;font-size:clamp(18px,1.5vw,20px);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:1.4em}
/* OLI */
.prose.oli{max-width:760px}
.prose.oli h3.yr{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.3em;color:var(--accent);margin:2.2em 0 .9em}
.prose.oli h3.yr:first-child{margin-top:0}
.replist{border-top:1px solid var(--line);font-family:var(--sans);font-size:16px}
.replist li{padding:10px 0;border-bottom:1px solid var(--line)}
.prose.oli p + .replist{margin-top:20px}
section .facts{max-width:760px;margin-top:22px}
.concerts details.crew summary{font-size:13px;letter-spacing:.14em;color:var(--fg)}
.concerts details.crew p{color:var(--muted);font-size:15px;margin:2px 0 10px}
.concerts .program{margin-bottom:14px}
.concerts .program li{font-size:15px}
.prose a{border-bottom:1px solid var(--line)}

.f-c a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.f-c a:hover{color:var(--accent)}
.legal{max-width:62ch}.legal h2{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin:2.2em 0 .8em}.legal a{color:var(--accent)}
