/* Diagramas de producto: vidrio azul y trazos legibles, sin bibliotecas. */
.project-diagram{color:var(--project-accent,#b9e0ff);filter:drop-shadow(0 0 7px #53adff55)}
.project-diagram .glass{fill:#163f625c;stroke:var(--project-accent,#a6d6ff)}
.project-diagram .node{fill:#234f75;stroke:var(--project-accent,#dbf1ff);stroke-width:2.2}
.project-diagram .wash{fill:#78baff66;stroke:#9dd4ff}
.card .face{padding:6%;border:1px solid #9bcbff61;box-shadow:inset 0 1px 0 #d0edff40,0 15px 40px #0005}
.card .c-top{color:#d6e4f0;font-size:max(9px,calc(var(--cw)*.04));letter-spacing:.08em}
.card .c-sig{width:49%;right:0;top:34%;opacity:.95;transition:transform .35s ease,filter .35s ease}
.card .c-t{max-width:95%;font-size:max(12px,calc(var(--cw)*.077));padding-bottom:20px;text-shadow:0 2px 7px #000}
.c-explore{position:absolute;bottom:6%;left:6%;z-index:2;display:inline-flex;align-items:center;gap:8px;border:1px solid #b3dfff80;background:#1a3854e6;padding:4px 8px;border-radius:99px;color:#e5f5ff;font:500 max(9px,calc(var(--cw)*.038))/1 var(--sans);letter-spacing:.02em}
.card:hover .face,.card:focus-visible .face{transform:scale(1.04);border-color:#d2eeff;box-shadow:0 0 25px #73bfff44,inset 0 0 22px #88c5ff12}
.card:hover .c-sig,.card:focus-visible .c-sig{transform:translateY(-56%);filter:drop-shadow(0 0 11px #72c3ff99)}
.card .back{background:radial-gradient(ellipse at 50% 35%,#325a7c,#0a1725 80%);border:1px solid #b1daff38}
.card .back::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 18px,#a0d1ff12 19px 20px),repeating-linear-gradient(45deg,transparent 0 34px,#a0d1ff0a 35px 36px)}
.card .back img{opacity:.65;filter:drop-shadow(0 0 12px #98cdff55)}
/* El reverso decorativo no intercepta la cara visible de otra tarjeta. */
.card{pointer-events:none}
.card .face{pointer-events:auto}
.card .back,.card .back *{pointer-events:none}
.lit-in{padding:clamp(20px,4vh,44px) var(--pad)}
.plate{width:100%;max-width:1040px;min-width:0}
.shot{aspect-ratio:auto;min-height:clamp(280px,36vw,390px);border-radius:20px;border:1px solid #a5d6ff66;background:radial-gradient(ellipse at 77% 45%,#214e77 0,transparent 62%),linear-gradient(145deg,#172b40,#070f19)!important;padding:clamp(22px,3vw,40px);isolation:isolate}
.shot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#95cfff08 1px,transparent 1px),linear-gradient(90deg,#95cfff08 1px,transparent 1px);background-size:32px 32px;z-index:-1}
.shot .c-top{font-size:11px;color:#bad6ed;justify-content:flex-start;gap:16px;padding-right:100px}
.shot .c-t{font-size:clamp(25px,3.3vw,46px);max-width:49%;line-height:1.13;margin-top:auto;padding-top:26px}
.shot .c-sig{width:48%;right:1%;top:48%;color:var(--project-accent,#c2e5ff);opacity:1;stroke-width:1.6}
.shot-subtitle{position:relative;z-index:1;max-width:46%;margin-top:15px;font-size:14px;line-height:1.55;color:#c5dbec}
.shot .c-explore{display:none}
.mia-art{position:absolute;inset:0 0 0 32%;z-index:-1;opacity:.8;mask-image:linear-gradient(90deg,transparent,#000 32%)}
.mia-art img{width:100%;height:100%;object-fit:cover}
.shot-mia .c-sig{display:none}
.shot-mia .c-t,.shot-mia .shot-subtitle{text-shadow:0 2px 16px #030a13}
.close{top:18px;right:18px;border-radius:99px;background:#18334a;color:#fff;border-color:#c6e5ff90;font-weight:500;min-width:94px}
.meta{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);padding:24px 6px 8px;gap:32px}
.meta dd{font-size:15px;line-height:1.7}
.meta dt{color:#adbdca;letter-spacing:.09em}
.where{color:#b4c5d2}
.project-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;counter-reset:none}
.project-steps li{padding:16px;border:1px solid #a6d0ff33;border-radius:12px;background:#122234;font-size:13px;line-height:1.5;color:#e3edf7}
.project-steps li>span{display:block;color:#96ccff;font:500 11px/1 var(--sans);margin-bottom:10px;letter-spacing:.1em}
.op{position:relative;overflow:hidden;min-height:150px}
.op .project-diagram{position:absolute;width:83px;right:-3px;top:31px;opacity:.65;transform:none}
.op .pt{position:relative;z-index:1;max-width:92%;text-shadow:0 2px 8px #06111f}
.op .c-explore{position:relative;bottom:auto;left:auto;margin-top:auto;font-size:10px}
.op .tipo{position:relative;z-index:1}
@media(max-width:640px){.shot{min-height:430px;padding:24px}.shot .c-sig{width:75%;top:37%;right:12%}.shot .c-t{font-size:26px;max-width:100%;padding-top:220px}.shot-subtitle{max-width:100%;font-size:13px}.meta{grid-template-columns:1fr;gap:20px}.meta dl div{grid-template-columns:6.4em 1fr}.project-steps{gap:6px}.project-steps li{padding:11px 9px;font-size:12px}.op{min-height:150px}.close{top:12px;right:12px}.shot .c-top{font-size:10px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-opt-in) .card .face,html:not(.motion-opt-in) .card .c-sig{transition:none}html:not(.motion-opt-in) .card:hover .face,html:not(.motion-opt-in) .card:focus-visible .face{transform:none}html:not(.motion-opt-in) .card:hover .c-sig,html:not(.motion-opt-in) .card:focus-visible .c-sig{transform:translateY(-50%)}}
html:not(.motion-opt-in) .card .face,html:not(.motion-opt-in) .card .c-sig{transition:none}
@media(max-width:640px){.mia-art{inset:44px 0 36%;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 70%,transparent)}.mia-art img{object-fit:contain}.shot-mia .c-t{padding-top:220px}}

.c-explore{border-color:var(--project-accent,#b3dfff)}
.project-steps li>span{color:var(--project-accent,#96ccff)}
.project-steps button{position:relative;min-height:98px;padding:16px 30px 16px 16px;border:1px solid #a6d0ff40;border-radius:12px;background:#102234;text-align:left;font-size:13px;line-height:1.45;color:#dfeaf4;transition:background-color .2s,border-color .2s}
.project-steps button>span:first-child{display:block;color:var(--project-accent,#96ccff);font-size:11px;letter-spacing:.1em;margin-bottom:10px}
.project-steps button .step-arrow{position:absolute;right:12px;top:14px;color:var(--project-accent,#96ccff);font-size:17px}
.project-steps button:hover,.project-steps button[aria-selected="true"]{border-color:var(--project-accent,#a6d0ff);background:#1c3850;color:#fff}
.project-steps button[aria-selected="true"]{box-shadow:inset 0 -3px 0 var(--project-accent,#a6d0ff)}
.project-step-panel{margin-top:10px;padding:20px 22px;border:1px solid #a6d0ff35;border-radius:12px;background:#0c1b29;color:#dceaf5;font-size:15px;line-height:1.7;min-height:98px}
.orbe-det{grid-template-columns:1fr;gap:4px}
.orbe-det .acts{margin-top:12px}
@media(max-width:640px){.project-steps button{min-height:110px;padding:12px 22px 12px 10px;font-size:12px}.project-steps button .step-arrow{right:7px;top:10px;font-size:14px}.project-step-panel{padding:16px;font-size:14px}}
html:not(.motion-opt-in) .card:hover .face,html:not(.motion-opt-in) .card:focus-visible .face{transform:none}
html:not(.motion-opt-in) .card:hover .c-sig,html:not(.motion-opt-in) .card:focus-visible .c-sig{transform:translateY(-50%)}
.ruta-arte{position:relative;margin:0 0 25px;border:1px solid #9acfff38;border-radius:18px;overflow:hidden;background:#0b1825;box-shadow:0 18px 45px #0004}
.ruta-arte img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.ruta-arte figcaption{position:relative;padding:12px 14px;color:#d3e9fa;border-top:1px solid #a6d0ff22;font:500 11px/1.5 var(--sans);letter-spacing:.025em;background:#101f30}
.ruta:nth-child(2) .ruta-arte{border-color:#68e5ed40}
.ruta:nth-child(3) .ruta-arte{border-color:#78d9c440}
html.motion-opt-in .ruta:hover .ruta-arte img{transform:scale(1.025)}
html:not(.motion-opt-in) .ruta-arte img{transition:none}
.doc-fig figcaption{font-size:13px;line-height:1.6;color:#b5c8d8}
.pasos li b{font-size:12px;color:#b1d8ff}

/* La ficha mantiene una superficie propia: la portada nunca compite con su texto. */
dialog#lit::backdrop{background:rgba(3,10,18,.94);backdrop-filter:blur(18px)}
dialog#lit{background:rgba(3,10,18,.35)}
.plate .meta{background:#081521;border:1px solid #97c8ee22;border-radius:16px;padding:24px}
.course-art{opacity:.95;inset:0 0 0 38%;mask-image:linear-gradient(90deg,transparent,#000 26%)}
.course-art img{object-fit:contain}
@media(max-width:640px){.course-art{inset:40px 0 34%;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 75%,transparent)}.plate .meta{padding:19px}}

/* Cada producto ocupa una escena propia. Una captura siempre se muestra completa. */
.shot-product-media{min-height:0;padding-bottom:18px;overflow:hidden}
.shot-product-media .c-sig{display:none}
.shot-product-media .c-t{max-width:85%;font-size:clamp(27px,3.5vw,46px);padding-top:24px;margin-top:0}
.shot-product-media .shot-subtitle{max-width:72ch;margin-top:12px}
.project-media{position:relative;width:100%;margin:26px 0 0;isolation:isolate}
.project-media-stage{position:relative;display:grid;place-items:center;min-height:220px;padding:20px 5%;perspective:1400px;background:radial-gradient(ellipse at 50% 55%,#469ee829,transparent 70%);isolation:isolate}
.project-media-stage::before{content:"";position:absolute;inset:15% 8% 4%;border-radius:50%;background:radial-gradient(ellipse,#6fbdff25,transparent 67%);filter:blur(24px);z-index:-1}
.project-media img{position:relative;z-index:1;display:block;width:100%;max-height:490px;height:auto;object-fit:contain;filter:drop-shadow(0 22px 30px #0007);border-radius:12px}
.project-media--concept img{max-height:430px}
.project-media--screen .project-media-stage{padding:14px 0;background:none}
.project-media--screen img{border:1px solid #b2deff50;background:#07111d;border-radius:10px}
.project-media figcaption{position:relative;text-align:center;font-size:11px;line-height:1.5;color:#a9c2d7;margin-top:12px;letter-spacing:.08em}
.media-orbit{position:absolute;inset:13% 8%;border:1px solid #87cdff24;border-radius:50%;transform:rotateX(62deg) rotateZ(-18deg);pointer-events:none}
.media-orbit-b{inset:4% 17%;transform:rotateX(48deg) rotateZ(28deg);border-color:#68e5ed29}
.project-media--screen .media-orbit{display:none}
html.motion-opt-in .project-media--concept img{animation:productFloat 9s ease-in-out infinite}
html.motion-opt-in .project-media-stage::before{animation:productGlow 8s ease-in-out infinite}
html.motion-opt-in .project-media--concept .media-orbit-a{animation:productOrbit 18s linear infinite}
@keyframes productFloat{0%,100%{transform:translateY(0) rotateX(1deg) rotateY(-2deg)}50%{transform:translateY(-9px) rotateX(-1deg) rotateY(2deg)}}
@keyframes productGlow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}
@keyframes productOrbit{from{transform:rotateX(62deg) rotateZ(-18deg)}to{transform:rotateX(62deg) rotateZ(342deg)}}
@media(max-width:640px){.shot-product-media{padding:22px 16px 16px}.shot-product-media .c-t{max-width:100%;font-size:27px;padding-top:24px}.shot-product-media .shot-subtitle{max-width:100%}.project-media{margin-top:18px}.project-media-stage{padding:10px 0;min-height:0}.project-media img{max-height:350px}.project-media--screen img{border-radius:6px}}
.project-thumb{display:block;aspect-ratio:16/10;isolation:isolate;filter:drop-shadow(0 7px 12px #030b1599);border-radius:7px;overflow:hidden}
.project-thumb img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.card .project-thumb{width:62%;right:-2%;top:35%;opacity:1;mask-image:linear-gradient(180deg,#000 76%,transparent)}
.card .c-t{background:linear-gradient(0deg,#0b1423dd,#0b142380 75%,transparent);border-radius:4px}
.op .project-thumb{position:absolute;width:72%;height:95px;right:-10%;top:15%;opacity:.55;transform:none;mask-image:linear-gradient(90deg,transparent,#000 35%)}
.op .project-thumb img{object-fit:contain}
.op .pt{max-width:94%}
.project-thumb--lexter{overflow:visible}
.project-thumb--lexter>img:first-child{width:72%;margin:0 auto}
.project-thumb .lexter-mail,.project-thumb .lexter-calendar{position:absolute;width:40%;height:auto;top:29%;left:-3%}
.project-thumb .lexter-calendar{left:auto;right:-3%;top:6%}
.project-media--lexter .project-media-stage{height:400px;min-height:0}
.project-media--lexter .media-main{width:54%;height:100%;object-fit:contain;max-height:400px}
.project-media--lexter .lexter-mail,.project-media--lexter .lexter-calendar{position:absolute;z-index:2;width:25%;height:auto;max-height:210px;object-fit:contain;left:4%;top:25%;filter:drop-shadow(0 18px 18px #0005)}
.project-media--lexter .lexter-calendar{left:auto;right:4%;top:9%}
html.motion-opt-in .project-media--lexter .lexter-mail{animation:productFloat 8s ease-in-out -2s infinite}
html.motion-opt-in .project-media--lexter .lexter-calendar{animation:productFloat 10s ease-in-out -5s infinite}
@media(max-width:640px){.project-media--lexter .project-media-stage{height:260px}.project-media--lexter .media-main{max-height:250px;width:66%}.project-media--lexter .lexter-mail,.project-media--lexter .lexter-calendar{width:28%;left:0;top:34%}.project-media--lexter .lexter-calendar{left:auto;right:0;top:7%}}
/* Ajuste al área útil del diálogo, descontando padding y scrollbar. */
.lit-in{width:100%;min-width:0}
.plate>.shot,.plate>.meta,#projectSteps,.project-steps,.project-step-panel{width:100%;min-width:0;max-width:100%}
.project-steps button,.meta>div,.meta dl,.meta dd{min-width:0;overflow-wrap:anywhere}
.plate .acts .btn{max-width:100%;white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px}