

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{line-height:1.5;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased}
ul,ol{padding:0;margin:0;list-style:none}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;background-color:transparent;color:inherit;border-width:0;padding:0;min-width:0}
a,button{color:inherit;text-decoration:none;cursor:pointer}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;font-weight:inherit}
span{display:inline-flex}
html{text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;scroll-padding-top:48px;scroll-behavior:smooth}

:root{
  --color-black:#333132;
  --color-charcoal250:#ededed;
  --color-white:#ffffff;
  --color-black--a20:rgba(51,49,50,.2);
  --color-charcoal250--a95:rgba(237,237,237,.95);
  --color-white--a70:rgba(255,255,255,.7);
  --color-white--a97:rgba(255,255,255,.97);
  --color-background:var(--color-white);
  --color-text:var(--color-black);
  --opacity-media--active:.2;

  --font-serif:"EB Garamond","Garamond","Times New Roman",serif;
  --font-sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --size-serif:12.8px;

  --vw:1vw;--scrollbar:0px;
  --s0:0px;--s1:1px;--s2:2px;--s4:4px;--s8:8px;--s10:10px;--s12:12px;--s16:16px;--s20:20px;--s24:24px;--s32:32px;--s40:40px;--s64:64px;--s80:80px;--s120:120px;--s200:200px;--s300:300px;--s400:400px;
  --column-count:24;--margin:16px;--gutter:16px;--container-max-width:3680px;
  --container-width:min(calc((100 * var(--vw)) - (2 * var(--margin))),var(--container-max-width));
  --column:calc((1 / var(--column-count)) * (var(--container-width) - ((var(--column-count) - 1) * var(--gutter))));
  --border-width:1px;
  --header-padding-top:var(--s8);
  --header-row-height:var(--s16);
  --header-row-gap:var(--s2);
  --header-height:calc(var(--header-padding-top) + var(--header-row-height) + var(--header-row-gap));
  --project-link-gap:var(--s16);
  --footer-height:93px;

  --ease-out-cubic:cubic-bezier(0,0,.58,1);
  --transition-default-duration:.15s;
  --transition-default:var(--transition-default-duration) var(--ease-out-cubic);
  --transition-slow:.3s var(--ease-out-cubic);
  --transition-media-load:1.2s var(--ease-out-cubic);
  --aspect-portrait:3 / 4;
}
@media (max-width:1000px){:root{--s200:120px;--s300:200px;--s400:300px;--column-count:12}}
@media (max-width:1100px){:root{--footer-height:109px}}
@media (max-width:500px){:root{--s24:16px;--s32:24px;--s40:32px;--s64:40px;--s80:64px;--s120:80px;--column-count:6;--margin:16px;--gutter:16px}}

body{font-family:var(--font-serif);font-size:var(--size-serif);line-height:16px;font-weight:400;background-color:var(--color-background);color:var(--color-text);position:relative}
::selection{background-color:var(--color-charcoal250)}

.text-body{font-size:var(--size-serif);line-height:16px;font-weight:400}
.text-body--smallcaps{font-size:var(--size-serif);line-height:16px;text-transform:uppercase;letter-spacing:.02em;font-variant:all-small-caps}
.text-body--italic{font-size:var(--size-serif);line-height:16px;font-style:italic}
.text-body--nums{font-size:var(--size-serif);line-height:16px;font-variant-numeric:oldstyle-nums}
.text-caption{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600}
.text-caption--uppercase{font-family:var(--font-sans);font-size:12px;line-height:16px;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.text-caption--small{font-family:var(--font-sans);font-size:9px;line-height:10px;font-weight:600;font-variant-numeric:tabular-nums}

.button{color:inherit;transition:color var(--transition-default);cursor:pointer}
@media (hover:hover) and (pointer:fine){.button:hover{color:var(--color-black--a20)}}
.button[data-state=inactive]{color:var(--color-black--a20)}
:focus-visible{outline:2px solid var(--color-black);outline-offset:3px;border-radius:1px}
.salto{position:absolute;left:8px;top:-60px;z-index:100;background:var(--color-white);padding:8px 12px;font-family:var(--font-sans);font-size:12px;font-weight:600}
.salto:focus{top:8px}
.button-bulleted{display:inline-flex;align-items:center;gap:var(--s2)}
.button-bulleted.gutter{display:contents}
.button-bulleted.gutter .bullet{text-align:end;justify-self:end}


header{position:sticky;z-index:10;top:0;width:100%;padding:var(--s8) var(--margin) 0;display:grid;grid-template-columns:1fr auto 1fr}
.logo{position:fixed;top:var(--s8);left:var(--margin);z-index:30;transition:color var(--transition-default)}
.logo:hover{color:var(--color-charcoal250)}
header .center{height:var(--header-row-height);grid-column:2/3;display:flex;align-items:baseline;gap:var(--s4)}
header .buttons,header .button{display:flex;align-items:baseline;gap:var(--s4)}
header .right{height:var(--header-row-height);grid-column:3/4;justify-self:end;display:flex;align-items:baseline;gap:var(--s4)}
@media (max-width:1100px){
  header{grid-template-columns:1fr auto auto;column-gap:var(--s32)}
  header .center .heading,header .center .buttons,[data-trigger-overlay-open=about] .text-caption,[data-trigger-overlay-open=about] .text-body--nums,header .text-body--italic{display:none}
}
@media (min-width:1101px){[data-trigger-overlay-open=about] .text-caption--uppercase{display:none}}


main{min-height:100dvh}
.mobile-row{display:none}
@media (max-width:1100px){.mobile-row{display:flex;align-items:baseline;justify-content:center;column-gap:var(--s4)}}
.mobile-row .buttons{display:flex;align-items:baseline;gap:var(--s4)}
.nav{position:sticky;top:var(--header-height);z-index:10;width:100%;height:var(--header-row-height);display:flex;justify-content:center;align-items:baseline;gap:var(--s4)}
.nav .button{display:flex;align-items:baseline;gap:var(--s4)}
.views{position:relative;margin-top:var(--s8);--header-height:calc(var(--header-padding-top) + (2 * (var(--header-row-height) + var(--header-row-gap))))}
[data-view]{opacity:0;pointer-events:none;transition:opacity var(--transition-default)}
[data-view][data-state=active]{position:relative;z-index:1;opacity:1;pointer-events:auto;transition-delay:var(--transition-default-duration)}
[data-view][data-state=inactive]{position:absolute;inset:0;z-index:0;display:none}
[data-view=index]:not([data-state]){display:none}
.index{padding-top:var(--s300)}

.home-projects-overview{display:flex;flex-direction:column;align-items:center}
.project-full{display:contents}
.project-full .wrapper{align-self:stretch}
.scroll-fade--25,.scroll-fade--50{--scroll-opacity:1;opacity:var(--scroll-opacity)}
.project-carousel{display:contents}
@media (max-width:500px){.carousel{width:100%;padding:0 var(--margin)}}
.media-carousel-media{margin:0 auto;width:calc(10 * var(--column) + 9 * var(--gutter))}
@media (max-width:1000px){.media-carousel-media{width:calc(6 * var(--column) + 5 * var(--gutter))}}
media-carousel{display:block}
media-carousel [data-media-link]{display:block}
.media-stack{display:grid}
.media-stack>*{grid-area:1/1;opacity:0;transition:opacity var(--transition-default)}
[data-slide][data-state=inactive]{transition-delay:var(--transition-default-duration)}
[data-slide][data-state=active]{opacity:1;z-index:1}
.indicators{margin-top:var(--s8);display:flex;justify-content:center;flex-wrap:wrap;gap:var(--s2)}
.indicator{display:block;width:var(--s64);cursor:pointer;transition:opacity var(--transition-default)}
@media (max-width:500px){.indicator{width:var(--s80)}}
.indicator[data-state=active]{opacity:var(--opacity-media--active)}


.sanity-image{position:relative;display:grid;overflow:hidden;background-color:var(--color-charcoal250)}
.sanity-image>*{grid-area:1/1;min-width:0;min-height:0}
.sanity-image .image{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--transition-media-load);filter:saturate(.92) contrast(1.02)}
.sanity-image .image[data-loaded]{opacity:var(--media-opacity,1)}
.sanity-image.grano::after{content:"";grid-area:1/1;position:relative;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
.no-save{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}

.project-link.sticky{position:sticky;z-index:11;margin:var(--s16) 0}
.project-link{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.project-link .bullet{justify-self:end}
.index-stack{min-height:calc(100lvh - var(--header-height) - var(--footer-height));display:flex;flex-direction:column;justify-content:center}
.projects-index-stack{display:grid;place-items:center}
.stacked-item{grid-area:1/1/2/2;opacity:0;pointer-events:none;transition:opacity var(--transition-default)}
.stacked-item[data-state=active]{opacity:1;pointer-events:auto}

.project-index-item{display:contents}
.project-index-item .body{margin-bottom:var(--s300)}
.project-index{display:flex;flex-direction:column;align-items:center}
.media-grid{width:100%;padding:0 var(--margin);margin-bottom:var(--s16);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2)}
.project-index .media{display:block;width:var(--s64);transition:opacity var(--transition-default)}
.project-index .media.normalize-height{aspect-ratio:var(--aspect-portrait);overflow:hidden}
.project-index .media.normalize-height .sanity-image{height:100%}
@media (max-width:500px){.project-index .media{width:var(--s80)}}
@media (hover:hover) and (pointer:fine){.project-index .media:hover{opacity:var(--opacity-media--active)}}
.project-index .label{margin-top:var(--s4)}
.project-title{display:flex;align-items:baseline;gap:var(--s4)}
.project-title .titles{display:contents}
.project-title .credits{display:flex;align-items:baseline;gap:var(--s4)}
@media (max-width:1000px){.project-title .credits{display:none}}


.track{margin-bottom:var(--header-height)}
.track .sticky{position:sticky;z-index:10;top:var(--header-height)}
.track .title{display:flex;justify-content:center;align-items:baseline;gap:var(--s4)}
.sizer{padding-top:var(--s8);padding-bottom:var(--s200)}
.sizer>section.single{display:flex;flex-direction:column;align-items:center;margin-bottom:var(--s40)}
.sizer>section.single .media.small{width:calc(10 * var(--column) + 9 * var(--gutter))}
@media (max-width:1000px){.sizer>section.single .media.small{width:calc(6 * var(--column) + 5 * var(--gutter))}}
@media (max-width:500px){.sizer>section.single .media.small{width:100%;padding:0 var(--margin)}}
.piece-caption{margin-top:var(--s8);text-align:center}
.sizer>section.pair{display:grid;grid-template-columns:1fr 1fr;margin-bottom:var(--s40)}
@media (max-width:500px){.sizer>section.pair{grid-template-columns:1fr;gap:var(--s40)}}
.piece{display:flex;flex-direction:column;align-items:center}
.piece .media{width:100%;flex-grow:1;display:grid;place-items:center;background:#e4e4e3;padding:11% 0}
.piece .media .sanity-image{width:62%;box-shadow:0 1px 8px rgba(0,0,0,.14)}
.piece-buttons{display:flex;align-items:baseline;gap:var(--s4)}
.contact-sheet{display:inline-grid;grid-template-columns:auto auto;align-items:baseline;gap:var(--s4)}
.contact-sheet .expand{overflow:hidden;white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  .contact-sheet{grid-template-columns:0fr auto;transition:grid-template-columns .3s ease}
  .contact-sheet:hover,.contact-sheet:focus-visible{grid-template-columns:1fr auto}
}
@media (hover:none),(pointer:coarse){
  .contact-sheet{grid-template-columns:0fr auto;transition:grid-template-columns .3s ease}
  .contact-sheet[data-expanded]{grid-template-columns:1fr auto}
}
.contact-sheet[data-estado=en-hoja]{color:var(--color-black--a20)}
.selected-projects{min-height:calc(100lvh - var(--header-height) - var(--footer-height));display:flex;flex-direction:column}
.selected-projects .heading{text-align:center}
.selected-projects .links{display:flex;flex-direction:column;align-items:center}
.selected-projects .index-stack{margin:auto 0;min-height:0}
.index-page{margin:var(--s200) 0}


footer{position:relative;width:100%;padding:0 var(--margin) var(--s16) var(--margin);display:flex;flex-direction:column;justify-content:center;align-items:stretch}
footer .content{text-align:center}
footer .buttons{margin-bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
footer .text{margin-bottom:var(--s8)}
footer .bottom{width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s2)}
footer .bottom>:first-child{grid-area:1/2/2/3}
footer .bottom>:last-child{grid-area:1/3/2/4;justify-self:end}
@media (max-width:600px){
  footer .bottom{display:flex;justify-content:space-between;flex-wrap:wrap}
  footer .buttons-bulleted,footer .credits{margin:0 auto}
}
.button-suffix{margin-left:var(--s4)}
footer .credits .text-body{display:inline}
.button-copias{display:inline-flex;justify-content:center;align-items:baseline}
footer .button-copias .button{display:inline-flex;align-items:baseline}


overlay-root{position:fixed;z-index:20;pointer-events:none}
overlay-root[data-state]:not([data-state=false]){z-index:21;pointer-events:auto}
.panel{position:fixed;min-height:100%;display:grid;align-items:center;justify-content:center;background-color:var(--color-white--a97);overflow-y:auto;-webkit-overflow-scrolling:touch;outline:none}
.panel.fullscreen{top:0;right:0;height:100%;width:100%;padding:var(--s8) var(--margin);opacity:0;pointer-events:none;content-visibility:hidden;transition:opacity var(--transition-default),content-visibility var(--transition-default) allow-discrete}
overlay-root[data-state]:not([data-state=false]) .panel.fullscreen{opacity:1;pointer-events:auto;content-visibility:visible}
.panel.backdrop-charcoal{background-color:var(--color-charcoal250--a95)}
.overlay-root-close,overlay-root .close{position:fixed;top:var(--s8);right:var(--margin);opacity:0;pointer-events:none;transition:opacity var(--transition-default)}
overlay-root[data-state]:not([data-state=false]) .close{opacity:1;pointer-events:auto}
.overlay-panel{position:relative;width:clamp(418px,calc(8 * var(--column) + 7 * var(--gutter)),458px);padding:var(--s16);max-height:calc(100lvh - var(--s120) * 2);display:flex;flex-direction:column;justify-content:start;background-color:var(--color-white);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.overlay-panel::-webkit-scrollbar{display:none}
@media (max-width:1000px){.overlay-panel{width:clamp(418px,calc(6 * var(--column) + 5 * var(--gutter)),458px)}}
@media (max-width:500px){.overlay-panel{width:clamp(0px,calc(6 * var(--column) + 5 * var(--gutter)),458px)}}
overlay-root .heading{text-align:center;margin-bottom:var(--s8)}
overlay-root .body{margin-bottom:var(--s40)}
overlay-root#projects-index .body{margin-bottom:var(--s80)}
overlay-root .button-groups{margin-bottom:var(--s120)}
overlay-root .footer-ov{margin-top:auto;text-align:center}
.portable-text p{margin-bottom:var(--s16)}
.portable-text p:last-child{margin-bottom:0}
expandable-text{display:block}
expandable-text [data-content]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--expandable-text-lines);overflow:hidden}
expandable-text[data-state]:not([data-state=false]) [data-content]{display:block;-webkit-line-clamp:unset;overflow:visible}
expandable-text .toggle{display:inline-block;margin-top:var(--s8);cursor:pointer}
.label-more,.label-less{display:none}
.toggle:not([data-state]) .label-more,.toggle[data-state=false] .label-more{display:inline}
.toggle[data-state]:not([data-state=false]) .label-less{display:inline}
expandable-list{display:block}
expandable-list .toggle{padding-left:calc(var(--column) + var(--gutter))}
.overlay-button-group{margin-bottom:var(--s16);display:grid;grid-template-columns:.55fr 1fr;gap:var(--gutter)}
@media (max-width:1000px){.overlay-button-group{grid-template-columns:.42fr 1fr}}
.button-bulleted-wrapper{display:grid;grid-template-columns:var(--column) 1fr;gap:var(--gutter)}
.button-bulleted-wrapper>:first-child{justify-self:end}
.about-button{margin-top:var(--s8)}
.project-image-layer{position:fixed;inset:0;z-index:-1;pointer-events:none}
.project-image{position:absolute;z-index:0;inset:0;pointer-events:none}
.project-image[data-state=inactive]{z-index:0;opacity:0;pointer-events:none;transition:opacity var(--transition-slow)}
.project-image[data-state=active]{z-index:1;opacity:1;pointer-events:auto;transition:opacity var(--transition-slow)}
.project-image .sanity-image{height:100%;width:100%}
.project-image .sanity-image .image{object-fit:cover}
#project-index .panel .project-index{padding:0}


.contact-sheet-content{width:100%;padding:var(--s8) var(--margin);display:block}
.contact-sheet-body{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4)}
.contact-sheet-body .media{position:relative;width:var(--s80)}
.contact-sheet-body .media img{width:100%;opacity:1;transition:opacity var(--transition-default)}
@media (hover:hover) and (pointer:fine){.contact-sheet-body .media-item:hover .media img{opacity:var(--opacity-media--active)}}
.contact-sheet-body .remove{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity var(--transition-default)}
.contact-sheet-body .media-item:hover .remove,.contact-sheet-body .media-item:focus-within .remove{opacity:1}
.contact-sheet-body .label{margin-top:var(--s4);display:block}
.contact-sheet-footer{display:flex;justify-content:center;margin-top:var(--s32)}
.download-pdf{position:fixed;bottom:var(--s16);left:0;width:100%;display:flex;align-items:baseline;justify-content:center;gap:var(--s4)}
.contact-sheet-vacia{text-align:center}
.contact-sheet-button{position:absolute;z-index:10;top:0;width:100%;height:100%;padding-bottom:calc(var(--footer-height) - var(--s16));display:flex;flex-direction:row;justify-content:center;align-items:flex-start;transition:opacity var(--transition-default);opacity:0;pointer-events:none}
.contact-sheet-button[data-state=active]{opacity:1}
.contact-sheet-button .placer{position:sticky;top:0;height:100lvh;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:var(--s16);pointer-events:none}
.contact-sheet-button .item{pointer-events:auto}
.contact-sheet-button[data-state=inactive] .item{pointer-events:none}
.button-labels{position:relative;display:flex;flex-direction:row;align-items:baseline;gap:var(--s4)}


.copias-lista{display:flex;flex-direction:column;align-items:center;gap:var(--s64);padding:var(--s80) 0 var(--s120)}
.copias-lista figure{display:flex;flex-direction:column;align-items:center;gap:var(--s8);text-align:center;width:min(360px,100%)}
.copias-lista .sanity-image{width:100%}
.copias-lista dl{display:grid;grid-template-columns:auto auto;column-gap:var(--s8);justify-content:center}
.copias-nota{text-align:center;max-width:420px;margin:0 auto}
.copias-lista .consulta{display:inline-flex}
.copias-lista .consulta:disabled{color:inherit;cursor:default}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important;scroll-behavior:auto!important}
  .scroll-fade--25,.scroll-fade--50{opacity:1!important}
}
html:not(.js) .sanity-image .image{opacity:1}
html:not(.js) [data-slide]:not(:first-child){display:none}
html:not(.js) overlay-root{display:none}
html:not(.js) [data-view=index]{display:none}


@media print{
  body.imprime-hoja>*:not(overlay-root#contact-sheet){display:none!important}
  body.imprime-hoja overlay-root#contact-sheet{position:static!important;display:block!important;pointer-events:auto!important}
  body.imprime-hoja #contact-sheet .panel{position:static!important;opacity:1!important;content-visibility:visible!important;height:auto!important;overflow:visible!important;padding:0!important}
  body.imprime-hoja #contact-sheet .close,body.imprime-hoja #contact-sheet .download-pdf{display:none!important}
  body.imprime-hoja .contact-sheet-body{gap:6mm}
  body.imprime-hoja .contact-sheet-body .media{width:42mm}
  body.imprime-hoja .contact-sheet-body .remove{display:none}
  body.imprime-hoja .contact-sheet-content::before{content:"Albúmina · Hoja de contactos";display:block;text-align:center;margin-bottom:10mm;font-family:var(--font-sans);font-size:10pt;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
}
