.service{position:relative}
.service-trigger{border:0;padding:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.service-trigger::after{content:"";position:absolute;inset:0}
.service-trigger:focus-visible{outline:2px solid #e1bc83;outline-offset:5px}
.service:has(.service-trigger:focus-visible){outline:3px solid #e1bc83;outline-offset:-3px;z-index:1}
.service:hover .service-trigger,.service:hover .service-prompt{color:#e4c490}
.service-prompt{margin:19px 0 0;color:#c8aa7c;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.portfolio-dialog{box-sizing:border-box;width:min(1120px,calc(100% - 48px));max-width:none;max-height:calc(100% - 48px);padding:0;border:1px solid #595143;background:#171815;color:#f5f3eb;box-shadow:0 24px 80px #000a}
.portfolio-dialog::backdrop{background:rgba(0,0,0,.78)}
.portfolio-inner{position:relative;padding:58px 6% 55px}
.portfolio-close{position:absolute;right:25px;top:22px;width:44px;height:44px;border:1px solid #665e50;border-radius:50%;background:transparent;color:#f5f3eb;cursor:pointer;font:28px/1 Arial,sans-serif}
.portfolio-close:hover{background:#37332b}
.portfolio-close:focus-visible{outline:3px solid #e1bc83;outline-offset:3px}
.portfolio-dialog .eyebrow{margin:0 55px 14px 0}
.portfolio-dialog h2{margin:0 55px 12px 0;font:400 clamp(36px,4.3vw,60px)/1.1 Georgia,serif;letter-spacing:-.035em}
.portfolio-category{margin:0;color:#d4b789;font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.portfolio-description{max-width:730px;margin:18px 0 32px;color:#d0cec4;font-size:16px;line-height:1.7}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portfolio-grid.single{display:block;max-width:760px}
.portfolio-grid.single .portfolio-item{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.portfolio-grid.single .portfolio-item figcaption{padding:28px;font-size:17px}
.portfolio-grid.single.wide{max-width:none}
.portfolio-grid.single.wide .portfolio-item{display:block}
.portfolio-grid.single.wide .portfolio-item img{height:auto;max-height:650px;object-fit:contain}
.portfolio-grid.single.wide .portfolio-item figcaption{padding:20px 22px}
.service-offering{margin:10px 0 0;color:#d0cabe;font-size:14px;line-height:1.5}
.portfolio-item{margin:0;background:#242521;overflow:hidden}
.portfolio-item img,.portfolio-item video{display:block;width:100%;height:340px;object-fit:contain;background:#10110f}
.portfolio-item figcaption{padding:17px 19px 19px;color:#f5f3eb;font-size:15px;line-height:1.5}
.portfolio-item figcaption strong{display:block;margin-bottom:5px;color:#d3b27f;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.portfolio-empty{border-top:1px solid #514c42;border-bottom:1px solid #514c42;padding:27px 0;color:#d0cec4;line-height:1.7}
.portfolio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:30px}
.portfolio-actions .button{font-size:12px}
.portfolio-all{color:#eee9df;font-size:14px;text-decoration:underline;text-underline-offset:4px}
body.portfolio-open{overflow:hidden}
body.photo-open{overflow:hidden}

/* Una selección real de la obra, visible dentro de la sección de altura. */
.height-art{background:#151613}
.height-art img{object-fit:contain}
.height-story{margin-top:82px}
.height-story-head{display:flex;justify-content:space-between;gap:32px;align-items:end;margin-bottom:28px}
.height-story-head .eyebrow{margin-bottom:14px}
.height-story-head h3{font:400 clamp(30px,3.5vw,46px)/1.15 Georgia,serif;letter-spacing:-.03em;margin:0;color:#f5f3eb}
.height-story-head p:not(.eyebrow){max-width:385px;margin:0;color:#c7c6bc;font-size:16px;line-height:1.65}
.height-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.height-story-grid figure,.height-gallery-grid figure{margin:0;min-width:0}
.height-story-grid button,.height-gallery-grid button{display:block;width:100%;padding:0;border:0;background:#171815;cursor:zoom-in}
.height-story-grid button:focus-visible,.height-gallery-grid button:focus-visible{outline:3px solid #d7b47a;outline-offset:3px}
.height-story-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#151613}
.height-story-grid figcaption{padding:17px 2px 10px;color:#e9e5dc;font-size:15px;line-height:1.5}
.height-story-grid figcaption strong{display:block;color:#d3b27f;text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin-bottom:6px}
.height-gallery-button{border:1px solid #d0aa72;background:transparent;color:#e9d3ad;font:700 12px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:17px 21px;cursor:pointer;margin-top:22px}
.height-gallery-button:hover{background:#d0aa72;color:#171815}
.height-gallery-button:focus-visible{outline:3px solid #e1bc83;outline-offset:4px}

/* Fotografías completas, con navegación accesible en computadora y celular. */
.height-modal-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:center;padding:28px;background:#20211e}
.height-modal-photo{margin:0}
.height-modal-photo button{display:block;width:100%;padding:0;border:0;background:#111210;cursor:zoom-in}
.height-modal-photo button:focus-visible{outline:3px solid #d7b47a;outline-offset:3px}
.height-modal-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
.height-modal-photo figcaption{color:#c9b89c;font-size:12px;line-height:1.5;margin-top:9px}
.height-modal-intro h3{font:400 clamp(28px,3vw,39px)/1.1 Georgia,serif;letter-spacing:-.03em;margin:0 0 18px;color:#f5f3eb}
.height-modal-intro p{color:#d0cec4;font-size:17px;line-height:1.7;margin:0 0 18px}
.height-modal-intro ul{list-style:none;padding:0;margin:0;border-top:1px solid #514c42}
.height-modal-intro li{border-bottom:1px solid #514c42;padding:11px 0;color:#eeeae2;font-size:16px;line-height:1.4}
.height-modal-intro li:before{content:'↗';color:#d1ae79;margin-right:10px}
.height-story-in-dialog{margin:55px 0 44px}
.height-gallery{margin:0 0 35px}
.height-gallery h3{font:400 27px/1.2 Georgia,serif;margin:0 0 7px;color:#f5f3eb}
.height-gallery>p{margin:0 0 18px;color:#bbb9af;font-size:14px}
.height-gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px}
.height-gallery-grid img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#10110f}
.height-gallery-grid figcaption{padding-top:8px;color:#d4c1a2;font-size:12px;line-height:1.4}
.height-videos-heading{font:400 27px/1.2 Georgia,serif;margin:45px 0 18px;color:#f5f3eb}
.photo-viewer{width:min(1000px,calc(100% - 32px));max-width:none;height:min(900px,calc(100vh - 32px));height:min(900px,calc(100dvh - 32px));max-height:none;padding:0;border:1px solid #665a45;background:#111210;color:#f5f3eb;box-shadow:0 24px 80px #000c}
.photo-viewer[open]{display:flex;flex-direction:column}
.photo-viewer::backdrop{background:rgba(0,0,0,.92)}
.photo-viewer-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid #3f3a30}
.photo-viewer-head p{margin:0;color:#d4b789;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.photo-viewer-close,.photo-viewer-nav button{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #665e50;background:transparent;color:#f5f3eb;font:24px/1 Arial,sans-serif;cursor:pointer}
.photo-viewer-close:hover,.photo-viewer-nav button:hover{background:#37332b}
.photo-viewer button:focus-visible{outline:3px solid #e1bc83;outline-offset:2px}
.photo-viewer-image{flex:1;min-height:0;padding:12px}
.photo-viewer-image img{display:block;width:100%;height:100%;object-fit:contain}
.photo-viewer-bottom{display:flex;justify-content:space-between;align-items:end;gap:14px;padding:13px 18px 16px;border-top:1px solid #3f3a30}
.photo-viewer-stage{color:#d4b789;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.photo-viewer-caption{margin:5px 0;color:#eeeae2;font-size:14px;line-height:1.35}
.photo-viewer-count{color:#aaa69a;font-size:12px}
.photo-viewer-nav{display:flex;gap:8px;flex-shrink:0}
@media(max-width:700px){
 .portfolio-dialog{width:calc(100% - 24px);max-height:calc(100% - 24px)}
 .portfolio-inner{padding:46px 6% 36px}
 .portfolio-close{top:12px;right:12px}
 .portfolio-dialog h2{font-size:36px}
 .portfolio-grid,.portfolio-grid.single{grid-template-columns:1fr}
 .portfolio-grid.single .portfolio-item{display:block}
 .portfolio-item img,.portfolio-item video{height:360px}
 .portfolio-actions .button{width:100%;text-align:center}
 .height-story{margin-top:55px}
 .height-story-head{display:block}
 .height-story-head p:not(.eyebrow){margin-top:14px}
 .height-story-grid{grid-template-columns:1fr;gap:25px}
 .height-modal-intro{grid-template-columns:1fr;gap:24px;padding:18px}
 .height-modal-intro h3{font-size:30px}
 .height-story-in-dialog .height-story-grid figure{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:center}
 .height-story-in-dialog .height-story-grid figcaption{padding:0;font-size:14px}
 .height-gallery-button{width:100%;min-height:52px}
 .height-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .photo-viewer{width:calc(100% - 20px);height:calc(100vh - 20px);height:calc(100dvh - 20px)}
 .photo-viewer-head,.photo-viewer-bottom{padding-left:12px;padding-right:12px}
 .photo-viewer-image{padding:8px}
}