/* D’Ascola / Selected Works. Escopo isolado da home; sem bibliotecas ou imagens externas. */
.dt-case-experience {
  --cx-bg: #09182a;
  --cx-surface: #0d2138;
  --cx-surface2: #102b47;
  --cx-text: #f3f9ff;
  --cx-muted: #aac3d8;
  --cx-border: rgba(118,195,255,.22);
  --cx-turquoise: #62dfed;
  --cx-blue: #68aaff;
  position: relative; isolation:isolate; overflow:hidden;
  padding: clamp(74px,8vw,118px) 0 64px;
  color:var(--cx-text); background:var(--cx-bg);border-block:1px solid var(--nx-line);
}
.dt-case-experience::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 86% 0%,#2465a546,transparent 48%),radial-gradient(ellipse at 5% 75%,#047f9940,transparent 38%),linear-gradient(#6ab8e507 1px,transparent 1px),linear-gradient(90deg,#6ab8e507 1px,transparent 1px);background-size:auto,auto,60px 60px,60px 60px;}
.dt-case-experience * {box-sizing:border-box}
.dt-case-experience [hidden]{display:none!important}
.dt-case-experience button{font:inherit;cursor:pointer}
.dt-case-experience :is(a,button):focus-visible{outline:3px solid #ffe398;outline-offset:4px}
.dt-case-experience .container{width:min(1320px,calc(100% - 80px));max-width:1320px}
.dt-case-heading{display:flex;align-items:end;justify-content:space-between;gap:38px;margin-bottom:34px}
.dt-case-heading>div{min-width:0}
.dt-case-eyebrow{font:750 10px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:var(--cx-turquoise);display:inline-flex;align-items:center;gap:11px}
.dt-case-eyebrow i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#48e4cc;box-shadow:0 0 0 5px #48e4cc23,0 0 20px #48e4cc99}
.dt-case-heading h2{font-size:clamp(35px,4.15vw,61px);line-height:1.05;letter-spacing:-.065em;font-weight:750;margin:18px 0 15px;color:var(--cx-text);max-width:835px;text-wrap:balance}
.dt-case-heading h2 em{font-style:normal;background:linear-gradient(100deg,#76e9ea,#6baeff 57%,#bca4ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.dt-case-heading p{font-size:14px;line-height:1.8;max-width:650px;margin:0;color:var(--cx-muted)}
.dt-case-all{display:inline-flex;align-items:center;gap:16px;flex-shrink:0;white-space:nowrap;text-decoration:none;border:1px solid #79bdff70;color:var(--cx-text);padding:14px 18px;border-radius:9px;font-size:12px;font-weight:750;transition:background .2s,border-color .2s,translate .2s}
.dt-case-all:hover{border-color:#82eaf0;background:#72e4fa1c;translate:0 -2px}
.dt-case-all span{color:var(--cx-turquoise);font-size:18px}
.dt-case-shell{border:1px solid var(--cx-border);border-radius:19px;overflow:hidden;background:linear-gradient(135deg,#122e4d 0%,#0b1e33 58%,#09172a 100%);box-shadow:0 35px 85px #020a178c,0 0 0 1px #ffffff05}
.dt-case-topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 25px;border-bottom:1px solid var(--cx-border);font:700 9px/1.6 ui-monospace,monospace;letter-spacing:.13em;color:#92cde8}
.dt-case-topbar>span:first-child{display:flex;align-items:center;gap:7px}
.dt-case-topbar i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ed7eb}
.dt-case-topbar i:nth-child(2){background:#6a9ffc}
.dt-case-topbar i:nth-child(3){background:#9b98f0;margin-right:12px}
.dt-case-layout{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);min-width:0}
.dt-case-visual{display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:25px;border-right:1px solid var(--cx-border);background:radial-gradient(ellipse at 40% 33%,#2376ac40,transparent 70%),#0a1b30}
.dt-case-visual-top,.dt-case-gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dt-case-visual-top{font:700 9px/1.6 ui-monospace,monospace;letter-spacing:.1em;color:#a4cee3;margin-bottom:20px}
.dt-case-status{display:flex;align-items:center;gap:9px}
.dt-case-status i{width:7px;height:7px;border-radius:50%;background:#61e8c3;box-shadow:0 0 10px #61e8c3}
.dt-case-gallery{position:relative;width:100%;overflow:hidden;border:1px solid #81b9e655;border-radius:13px;background:#071221;box-shadow:0 18px 60px #0007;touch-action:pan-y}
.dt-case-gallery-project{width:100%}
.dt-case-frame{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;background:#091624;animation:cx-frame-in .4s ease both}
.dt-case-frame img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.dt-case-frame figcaption{position:absolute;bottom:0;left:0;right:0;padding:25px 13px 10px;font:650 10px/1.4 ui-monospace,monospace;color:#fff;background:linear-gradient(transparent,#041424da);text-shadow:0 1px 4px #000}
.dt-case-gallery-toolbar{min-height:57px;margin-top:13px}
.dt-case-gallery-hint{font:700 10px/1.6 ui-monospace,monospace;letter-spacing:.13em;color:#a6d8ed;white-space:nowrap}
.dt-case-screen-controls{display:flex;align-items:center;gap:9px}
.dt-case-screen-controls>button,.dt-case-switch-controls>button{width:36px;height:36px;border-radius:10px;color:var(--cx-text);border:1px solid var(--cx-border);background:#ffffff0c;transition:background .2s,border-color .2s,translate .2s}
.dt-case-screen-controls>button:hover,.dt-case-switch-controls>button:hover{background:#68d8f32d;border-color:#79d7f4;translate:0 -1px}
.dt-case-screen-controls>button:disabled{cursor:not-allowed;opacity:.4;translate:none}
.dt-case-screen-controls [data-dt-case-screen-indicators]{display:flex;align-items:center;gap:6px;min-height:27px}
.dt-case-screen-controls [data-dt-case-screen-indicators] button{width:7px;height:7px;border:0;border-radius:50%;background:#7ca5c4;opacity:.5;padding:0;transition:width .22s,background .22s,opacity .22s}
.dt-case-screen-controls [data-dt-case-screen-indicators] button[aria-pressed="true"]{width:24px;border-radius:6px;background:#71e0ef;opacity:1}
.dt-case-editorial{display:flex;flex-direction:column;min-width:0;padding:clamp(24px,3.4vw,48px)}
.dt-case-index{display:flex;align-items:center;justify-content:space-between;gap:10px;font:750 10px/1.6 ui-monospace,Consolas,monospace;letter-spacing:.13em;color:#89d8f1;margin-bottom:30px}
.dt-case-index strong{font-size:10px;color:#afd1e5}
.dt-case-story{animation:cx-story-in .4s ease both}
.dt-case-tags{display:flex;gap:7px;flex-wrap:wrap}
.dt-case-tags>span{display:inline-flex;padding:7px 10px;border:1px solid #74caff53;border-radius:7px;font-size:9px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:#86d6ef;background:#72c9f111}
.dt-case-tags>span:nth-child(even){color:#c4b6ff;border-color:#aa9bff55;background:#aa9bff0d}
.dt-case-story h3{font-size:clamp(27px,2.85vw,41px);font-weight:760;color:#f6faff;line-height:1.08;letter-spacing:-.055em;margin:24px 0 14px;text-wrap:balance}
.dt-case-subtitle{font-size:13px;line-height:1.75;color:#aac4da;margin:0 0 20px}
.dt-case-brief{border-top:1px solid var(--cx-border);padding-top:14px;margin-top:13px}
.dt-case-brief>span,.dt-case-tech>span{font:750 9px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#6bdef1}
.dt-case-brief p{font-size:12px;line-height:1.75;color:#d0e3f2;margin:7px 0 0}
.dt-case-tech{margin-top:20px}
.dt-case-tech>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dt-case-tech small{border:1px solid #ffffff23;border-radius:5px;padding:6px 8px;font-size:10px;color:#b8d0e0;background:#ffffff08}
.dt-case-detail{margin-top:22px;display:inline-flex;align-items:center;justify-content:space-between;gap:16px;width:max-content;max-width:100%;padding:13px 16px;border-radius:8px;background:linear-gradient(100deg,#1776eb,#19a9d7);color:white!important;text-decoration:none;font-size:12px;font-weight:780;transition:filter .2s,translate .2s}
.dt-case-detail:hover{filter:brightness(1.14);translate:0 -2px}
.dt-case-detail span{font-size:16px}
.dt-case-switch{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--cx-border);padding-top:21px;margin-top:auto;transform:translateY(15px);font:700 9px/1.5 ui-monospace,monospace;letter-spacing:.13em;color:#a7c9df}
.dt-case-switch-controls{display:flex;gap:8px}
.dt-case-project-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--cx-border)}
.dt-case-project-nav button{position:relative;display:flex;align-items:center;gap:13px;min-width:0;text-align:left;border:0;border-right:1px solid var(--cx-border);border-top:3px solid transparent;padding:21px 15px;background:transparent;color:#95b7d0;transition:background .2s,color .2s,border-color .2s}
.dt-case-project-nav button:last-child{border-right:0}
.dt-case-project-nav button[aria-pressed="true"]{color:#f1faff;background:#4290da19;border-top-color:#67dfec}
.dt-case-project-nav button:hover{background:#4b94d51c}
.dt-case-nav-number{font:750 10px ui-monospace,monospace;color:#65d9ee;flex:none}
.dt-case-nav-title{font-size:11px;font-weight:725;line-height:1.45;min-width:0}
.dt-case-nav-indicator{font-size:14px;opacity:.6;flex:none;margin-left:auto}
.dt-case-note{color:#9cbbd4;font-size:10px;line-height:1.7;margin:20px 0 0}
@keyframes cx-frame-in{from{opacity:.6;transform:scale(1.022)}to{opacity:1;transform:scale(1)}}
@keyframes cx-story-in{from{opacity:.5;translate:0 8px}to{opacity:1;translate:0 0}}
@media (max-width:1080px){.dt-case-layout{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}.dt-case-editorial{padding:25px}.dt-case-visual{padding:20px}.dt-case-story h3{font-size:29px}.dt-case-nav-indicator{display:none}}
@media (max-width:800px){.dt-case-experience .container{width:calc(100% - 40px)}.dt-case-heading{align-items:start;flex-direction:column;gap:21px}.dt-case-layout{grid-template-columns:1fr}.dt-case-visual{border-right:0;border-bottom:1px solid var(--cx-border)}.dt-case-editorial{padding:28px}.dt-case-story h3{font-size:clamp(27px,6vw,37px)}.dt-case-switch{margin-top:23px;transform:none}.dt-case-project-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.dt-case-project-nav button:nth-child(2){border-right:0}.dt-case-project-nav button:nth-child(n+3){border-top:1px solid var(--cx-border)}.dt-case-gallery .dt-case-frame{aspect-ratio:16/9}}
@media (max-width:490px){.dt-case-experience{padding:58px 0 38px}.dt-case-experience .container{width:calc(100% - 30px)}.dt-case-heading h2{font-size:clamp(32px,10vw,45px)}.dt-case-heading p{font-size:12px}.dt-case-topbar{padding:12px;font-size:8px}.dt-case-topbar>span:last-child{display:none}.dt-case-visual{padding:12px}.dt-case-visual-top{margin-bottom:12px}.dt-case-editorial{padding:20px}.dt-case-index{margin-bottom:18px}.dt-case-story h3{margin:15px 0 10px}.dt-case-detail{width:100%;justify-content:center}.dt-case-project-nav button{gap:7px;padding:15px 10px}.dt-case-nav-number{font-size:9px}.dt-case-nav-title{font-size:10px}.dt-case-screen-controls{gap:7px}.dt-case-screen-controls>button{width:31px;height:32px}.dt-case-gallery-hint{font-size:9px}.dt-case-frame figcaption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.dt-case-experience *, .dt-case-experience *::before,.dt-case-experience *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Explicit dark/light site modes retain a single branded exhibition room for the imagery. */
html[data-theme="light"] .dt-case-experience{border-color:#c6dae8}
/* Variante clara: conserva o palco das telas escuro, com leitura editorial luminosa. */
html[data-theme="light"] .dt-case-experience{
  --cx-bg:#edf5fc;--cx-text:#102944;--cx-muted:#4f6c88;--cx-border:rgba(28,101,162,.19);--cx-turquoise:#087f99;
  background:#edf5fc;color:var(--cx-text);
}
html[data-theme="light"] .dt-case-experience::before{background:radial-gradient(ellipse at 81% 0%,#93cbff49,transparent 50%),radial-gradient(ellipse at 3% 89%,#a1e7ed61,transparent 40%),linear-gradient(#317eb209 1px,transparent 1px),linear-gradient(90deg,#317eb209 1px,transparent 1px);background-size:auto,auto,60px 60px,60px 60px}
html[data-theme="light"] .dt-case-heading h2{color:#0b2b4b}
html[data-theme="light"] .dt-case-heading h2 em{background-image:linear-gradient(100deg,#038ca3,#2478dc 60%,#7459bd)}
html[data-theme="light"] .dt-case-all{color:#17456a;border-color:#4e9dd285;background:#ffffffad}
html[data-theme="light"] .dt-case-shell{background:linear-gradient(140deg,#fefeff,#eaf5ff);box-shadow:0 30px 75px #12518e20}
html[data-theme="light"] .dt-case-topbar{color:#28608d}
html[data-theme="light"] .dt-case-editorial{background:#f7fbff}
html[data-theme="light"] .dt-case-index,html[data-theme="light"] .dt-case-index strong{color:#16728f}
html[data-theme="light"] .dt-case-tags>span{background:#dceff8;color:#126b82;border-color:#88cad4}
html[data-theme="light"] .dt-case-tags>span:nth-child(even){background:#f1ebff;color:#6247a9;border-color:#c6b7eb}
html[data-theme="light"] .dt-case-story h3{color:#0d2a47}
html[data-theme="light"] .dt-case-subtitle{color:#526b82}
html[data-theme="light"] .dt-case-brief>span,html[data-theme="light"] .dt-case-tech>span{color:#096e91}
html[data-theme="light"] .dt-case-brief p{color:#284c6b}
html[data-theme="light"] .dt-case-tech small{background:#e7f1fa;color:#3c5b76;border-color:#c6dbe9}
html[data-theme="light"] .dt-case-switch{color:#47708d}
html[data-theme="light"] .dt-case-switch-controls>button{color:#1d537a;border-color:#bbd1e4;background:white}
html[data-theme="light"] .dt-case-project-nav button{color:#55718b}
html[data-theme="light"] .dt-case-project-nav button[aria-pressed="true"]{color:#0c344f;background:#d5ecff;border-top-color:#168cc2}
html[data-theme="light"] .dt-case-project-nav button:hover{background:#d9eeff}
html[data-theme="light"] .dt-case-nav-number{color:#0e8ca4}
html[data-theme="light"] .dt-case-note{color:#5b7287}

/* Indicador do catálogo: leitura dinâmica com animação somente quando visível. */
.dt-case-catalog-badge{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:17px;padding:9px 15px;border:1px solid rgba(77,174,255,.3);border-radius:999px;background:rgba(34,125,220,.08);color:var(--p-ink,#183457)}
.dt-case-catalog-badge strong{font-variant-numeric:tabular-nums;font-size:22px;font-weight:900;line-height:1;color:#2c96f2}
.dt-case-catalog-badge span{font-size:11px;font-weight:800;letter-spacing:.04em}

/* Catálogo completo: grade navegável mesmo após muitos novos projetos. */
.dt-case-project-nav{max-height:320px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(88,178,255,.55) transparent}
.dt-case-project-nav button{scroll-margin-block:8px}
.dt-case-project-nav button:nth-child(4n){border-right:0}
.dt-case-project-nav button:nth-child(n+5){border-top:1px solid var(--cx-border)}
@media(max-width:800px){.dt-case-project-nav{max-height:278px}.dt-case-project-nav button:nth-child(even){border-right:0}.dt-case-project-nav button:nth-child(n+3){border-top:1px solid var(--cx-border)}}