/* Extensión visual de la versión 4.3. */
[hidden]{display:none!important}
.carousel-shell{max-width:var(--max);margin:auto}
.carousel-toolbar,.carousel-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.carousel-toolbar{margin-bottom:20px;color:#9fb9ca;font-size:12px}
.carousel-toolbar p{margin:0}
.carousel-action,.carousel-arrow{font:600 12px "DM Sans",Arial,sans-serif;color:#dceef8;background:#102d41;border:1px solid #2b536b;border-radius:6px;padding:9px 14px;cursor:pointer}
.carousel-action:hover,.carousel-arrow:hover{background:#16415a;border-color:#39b9fb}
.carousel-action[aria-pressed=true]{color:#73d0ff;border-color:#39b9fb}
.carousel-footer{padding-top:24px}
.carousel-navigation{display:flex;align-items:center;gap:12px}
.carousel-count{font-size:12px;color:#a6bfce}
.carousel-dots{display:flex;align-items:center;gap:8px}
.carousel-dot{width:9px;height:9px;border:0;padding:0;border-radius:50%;background:#456479;cursor:pointer;position:relative}
.carousel-dot:after{content:"";position:absolute;inset:-7px}
.carousel-dot[aria-current=true]{background:#35b9ff;box-shadow:0 0 10px #22acfa55}
.carousel-arrow:disabled{opacity:.4;cursor:default}
.project-card{min-width:0;display:flex;flex-direction:column}
.project-cover{display:block;position:relative;width:100%;height:270px;overflow:hidden;border:0;border-bottom:1px solid #27485d;padding:0;background:#102b3d;color:white;text-align:left;cursor:zoom-in}
.project-cover img,.project-cover video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.project-cover video{pointer-events:none}
.project-cover:hover img,.project-cover:focus-visible img{transform:scale(1.035)}
.project-cover-link{position:absolute;right:14px;bottom:14px;background:rgba(3,20,32,.86);border:1px solid #7cc5ed66;backdrop-filter:blur(6px);padding:7px 11px;font:600 11px "DM Sans",Arial,sans-serif;border-radius:5px;pointer-events:none}
.cover-video-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:48px;color:#fff;text-shadow:0 2px 15px #000}
.cover-fallback{display:flex;align-items:center;justify-content:center;padding:30px;height:100%;font:700 28px Manrope,Arial,sans-serif;background:radial-gradient(ellipse at 30% 30%,#164b69,#071a2a)}
.project-card .case-body{flex:1;padding:25px}
.project-card h3{font-size:20px;margin:12px 0 10px}
.technology-chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:19px 0 0}
.technology-chips li{font-size:10px;line-height:1.4;color:#a7d9f5;padding:5px 8px;border:1px solid #38617b;border-radius:4px;background:#123147}
.case-grid.is-changing .project-card{animation:project-arrive .4s ease both}
.case-grid.is-changing .project-card:nth-child(2){animation-delay:.035s}
.case-grid.is-changing .project-card:nth-child(3){animation-delay:.07s}
.case-grid.is-changing .project-card:nth-child(4){animation-delay:.105s}
@keyframes project-arrive{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.project-dialog{color:#ecf6fc;background:#091d2b;border:1px solid #30536a;border-radius:13px;width:min(1300px,96vw);max-width:96vw;max-height:94dvh;padding:0;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 110px #0009}
.project-dialog::backdrop{background:rgba(1,9,15,.88);backdrop-filter:blur(5px)}
.project-dialog-header{position:sticky;top:0;z-index:5;background:#091d2b;display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #244256;gap:20px}
.dialog-kicker{font-size:10px;letter-spacing:.16em;color:#83cdef}
.gallery-close{color:#e4f7ff;background:#133247;border:1px solid #4d748b;width:37px;height:37px;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;flex-shrink:0}
.project-dialog-content{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,1fr)}
.gallery-visual{min-width:0;background:#04111c;padding:20px}
.gallery-tabs{display:flex;gap:9px;margin:0 0 14px}
.gallery-tabs button{font:600 12px "DM Sans",Arial,sans-serif;color:#a8c3d4;border:1px solid #31526a;background:transparent;border-radius:30px;padding:7px 15px;cursor:pointer}
.gallery-tabs button[aria-pressed=true]{color:#061a29;background:#43bfff;border-color:#43bfff}
.gallery-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;background:#020b12;touch-action:pan-y}
.project-media{width:100%;height:min(55dvh,570px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.gallery-asset{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.gallery-step{position:absolute;top:calc(50% - 23px);z-index:2;width:39px;height:46px;border:1px solid #6d9ab977;border-radius:6px;color:#fff;background:#071b2ace;font-size:30px;cursor:pointer;line-height:1}
.gallery-step.prev{left:9px}.gallery-step.next{right:9px}
.gallery-step:disabled{opacity:.25;cursor:default}
.gallery-caption-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:13px 1px}
.gallery-caption{font-size:12px;line-height:1.6;color:#b9ccda;margin:0;white-space:pre-line}
.gallery-count{font:600 11px ui-monospace,Consolas,monospace;white-space:nowrap;color:#7fcdf6;margin:2px 0 0}
.gallery-thumbnails{display:flex;gap:8px;overflow:auto;padding:4px 2px 9px;scrollbar-width:thin;scrollbar-color:#385871 #071b29}
.gallery-miniature{position:relative;flex:0 0 75px;height:61px;overflow:hidden;padding:0;border-radius:5px;border:2px solid transparent;background:#17374c;color:#d5f2ff;cursor:pointer}
.gallery-miniature img{display:block;width:100%;height:100%;object-fit:cover}
.gallery-miniature[aria-current=true]{border-color:#37bdff}
.thumbnail-number{position:absolute;bottom:2px;right:3px;background:#041422d9;border-radius:2px;padding:1px 4px;font-size:9px}
.thumbnail-play{display:grid;place-items:center;height:100%;font-size:20px}
.project-details{padding:28px 26px 32px;align-self:start}
.project-details h2{font:800 clamp(22px,2.5vw,31px)/1.22 Manrope,Arial,sans-serif;margin:12px 0 17px;letter-spacing:-.025em}
.project-description{font-size:14px;line-height:1.75;color:#b4cad7;white-space:pre-line}
.project-technology-section{border-top:1px solid #25465b;padding-top:20px;margin-top:24px}
.project-technology-section h3{font-size:12px;color:#7acdf9;margin:0 0 13px}
.project-technology-section ul{margin:0;padding-left:18px;color:#b7cfde;font-size:12px;line-height:1.8}
.project-technology-section li{margin-bottom:5px}
.gallery-empty{text-align:center;font-size:14px;color:#87a7bc;padding:28px}
.media-direct-link{color:#62c7ff;text-decoration:underline;display:inline-block;margin-top:10px}
.carousel-shell button:focus-visible,.project-dialog button:focus-visible{outline:2px solid #61c9ff;outline-offset:4px}
/* El efecto se dibuja sobre la portada; no añade un panel opaco ni bloquea clics. */
.nexus-transition{background:transparent;transition:opacity .72s ease,visibility .72s}
.nexus-transition .nexus-anim-center{background:transparent;gap:0}
.nexus-anim-center strong,.nexus-anim-kicker,.nexus-anim-center>span,.nexus-anim-track,.nexus-anim-corner{display:none}
.nexus-anim-center{justify-content:flex-start;align-items:flex-end;padding:155px max(8vw,24px) 0}
.nexus-anim-symbol{width:clamp(105px,18vw,245px);height:clamp(105px,18vw,245px);opacity:.28;filter:drop-shadow(0 0 18px #18b4ff77)}
.nexus-orbit{left:auto;right:4vw;top:200px;width:min(390px,44vw);height:min(390px,44vw);opacity:.55}
.orbit-two{width:min(490px,54vw);height:min(490px,54vw)}
@media(max-width:850px){.project-dialog-content{grid-template-columns:1fr}.project-details{padding:22px}.project-dialog{width:96vw}.project-cover{height:220px}.project-media{height:46dvh}.nexus-anim-center{padding:120px 5vw 0}.nexus-anim-symbol{width:130px;height:130px}.nexus-orbit{right:0;top:160px}}
@media(max-width:560px){.project-cover{height:230px}.carousel-toolbar{font-size:11px;gap:12px}.carousel-footer{justify-content:center}.carousel-count{width:100%;text-align:center;order:2}.carousel-dots{gap:11px}.carousel-navigation{gap:7px}.carousel-arrow{padding:9px 11px}.gallery-visual{padding:12px}.project-dialog{max-height:96dvh;border-radius:9px}.project-dialog-header{padding:10px 13px}.project-media{height:43dvh}.gallery-stage{min-height:200px}.project-details h2{font-size:24px}.gallery-miniature{flex-basis:62px;height:53px}.gallery-step{width:34px;height:42px}.project-card .case-body{padding:22px}.nexus-anim-symbol{opacity:.18}.nexus-orbit{opacity:.3}}
@media(prefers-reduced-motion:reduce){.case-grid.is-changing .project-card{animation:none}.project-cover img{transition:none}.nexus-transition{transition:none}}

/* V4.5: seis miniaturas cuadradas por proyecto, como en la versión 4.3. */
.project-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;width:100%;min-width:0;padding:0}
.project-preview{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:1;min-width:0;overflow:hidden;padding:0;margin:0;border:1px solid rgba(177,207,226,.23);border-radius:8px;background:#0c2030;color:#e4f4ff;cursor:zoom-in;font-family:"DM Sans",Arial,sans-serif;text-align:left}
.project-preview:hover,.project-preview:focus-visible{border-color:#4cbef5;box-shadow:inset 0 0 0 1px #3eb9f333}
.preview-asset{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease,filter .35s ease;pointer-events:none}
.project-preview:hover .preview-asset,.project-preview:focus-visible .preview-asset{transform:scale(1.04);filter:brightness(1.08)}
.project-preview.is-empty{cursor:default;background:radial-gradient(circle at 50% 15%,#1a4156,#0b1d2b 85%)}
.preview-empty-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;color:#7fa4b9;font-size:clamp(7px,.75vw,11px);letter-spacing:.08em;text-align:center;line-height:1.7}
.preview-plus{position:absolute;top:9px;right:12px;color:#3792be;font-size:22px;line-height:1}
.preview-number{position:absolute;left:7px;bottom:7px;z-index:2;background:#020c13e6;border-radius:4px;padding:3px 6px;color:#eff9ff;font:500 10px/1.2 "DM Sans",Arial,sans-serif;pointer-events:none}
.preview-video-label{position:absolute;top:8px;left:8px;z-index:2;padding:4px 6px;border-radius:4px;color:#d3f2ff;background:#051823df;font:700 8px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.06em;pointer-events:none;border:1px solid #59b7e333}
.project-preview.is-playing .preview-video-label{color:#061827;background:#69d4ff;border-color:#69d4ff}
.preview-expand{position:absolute;right:8px;bottom:8px;z-index:2;border:1px solid #79b7d855;border-radius:4px;background:#051723dd;color:#d9f4ff;font-size:17px;line-height:1;padding:4px 5px;opacity:0;transition:opacity .2s;pointer-events:none}
.project-preview:hover .preview-expand,.project-preview:focus-visible .preview-expand{opacity:1}
.without-poster:before{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#72c9f3;pointer-events:none}
.without-poster.is-playing:before{display:none}
.project-open{display:inline-flex;align-items:center;gap:7px;margin-top:19px;padding:0;border:0;background:none;color:#57c4ff;font:700 12px "DM Sans",Arial,sans-serif;cursor:pointer}
.project-open:hover{color:#c6edff}
.project-card .case-body{padding-top:29px}
@media(max-width:640px){.project-preview-grid{gap:6px}.project-preview{border-radius:6px}.preview-number{font-size:9px;left:5px;bottom:5px;padding:3px 5px}.preview-video-label{left:5px;top:5px;font-size:7px;padding:3px 4px}.preview-empty-text{font-size:8px;padding:8px;letter-spacing:.04em}.project-card .case-body{padding-top:23px}.preview-plus{top:7px;right:9px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.preview-asset,.preview-expand{transition:none}.project-preview:hover .preview-asset,.project-preview:focus-visible .preview-asset{transform:none}}
.preview-story{position:absolute;left:0;right:0;bottom:0;padding:25px 8px 28px;pointer-events:none;background:linear-gradient(transparent,rgba(2,13,21,.86));color:#eef9ff;font:600 clamp(8px,.78vw,11px)/1.35 "DM Sans",Arial,sans-serif;text-shadow:0 1px 5px #000}
.project-preview.is-empty .preview-story{color:#86adbf;background:linear-gradient(transparent,#071823aa)}
.preview-number,.preview-expand{z-index:3}
.project-menu{position:relative}
.project-menu-toggle{border:0;padding:0;background:none;color:#d8e4eb;font:600 13px "DM Sans",Arial,sans-serif;cursor:pointer;display:flex;align-items:center;gap:7px}
.project-menu-toggle:hover,.project-menu-toggle[aria-expanded=true]{color:#54c6ff}
.project-menu-toggle:focus-visible{outline:2px solid #60caff;outline-offset:6px}
.project-menu-panel{position:absolute;top:calc(100% + 23px);right:-20px;width:min(720px,85vw);max-height:75dvh;overflow:auto;padding:19px;background:#0b2333;border:1px solid #315871;border-radius:10px;box-shadow:0 20px 80px #0007;z-index:30;scrollbar-width:thin}
.project-menu-heading{display:flex;justify-content:space-between;gap:15px;margin-bottom:14px;color:#e1f4ff;font-size:13px}
.project-menu-heading span{color:#6acbff;font-size:11px}
.project-menu-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;padding:0;margin:0;list-style:none}
.project-menu-entry{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;border-radius:5px;padding:10px 9px;background:transparent;color:#bdd2e0;font:500 12px/1.5 "DM Sans",Arial,sans-serif;cursor:pointer}
.project-menu-entry:hover,.project-menu-entry:focus-visible{color:#f2fbff;background:#16415a;outline:1px solid #2b739c}
.project-menu-number{color:#4fc0fa;font:700 10px ui-monospace,Consolas,monospace;flex:0 0 20px}
@media(max-width:850px){.project-menu{width:100%}.project-menu-toggle{padding:12px 4px;width:100%;justify-content:space-between;border-bottom:1px solid var(--line)}.project-menu-panel{position:relative;top:auto;right:auto;width:100%;max-height:58dvh;border:0;border-radius:0;padding:12px 0;box-shadow:none;background:#071c2b}.project-menu-list{grid-template-columns:1fr}.project-menu-entry{padding:9px 8px}}
@media(max-width:640px){.preview-story{font-size:8px;padding:20px 6px 25px}.project-menu-heading{padding:0 8px}}
.preview-example-label{position:absolute;top:8px;right:8px;z-index:3;padding:4px 5px;border-radius:3px;color:#d0e4ef;background:#092331dd;border:1px solid #7095aa55;letter-spacing:.06em;font:600 7px/1.1 "DM Sans",Arial,sans-serif;pointer-events:none}

/* V4.8: información técnica completa y vistas ligeras de archivo. */
.catalog-stats{max-width:var(--max);margin:-10px auto 23px;color:#69c9fa;font-size:12px;letter-spacing:.04em}
.project-status{display:block;margin:0 0 12px;color:#8ad7c8;font-size:10px;line-height:1.6;letter-spacing:.045em;text-transform:uppercase}
.project-card .tag{display:block}
.project-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:24px 0}
.project-metric{padding:15px 12px;background:#102d40;border:1px solid #2a526a;border-radius:7px;min-width:0}
.project-metric strong{display:block;color:#6acfff;font:800 21px/1.3 Manrope,Arial,sans-serif;overflow-wrap:anywhere}
.project-metric span{display:block;color:#a9c5d6;font-size:10px;line-height:1.5;margin-top:7px}
.dossier-section{border-top:1px solid #24485f;padding-top:17px;margin-top:22px}
.dossier-section h3{font-size:13px;color:#e0f4ff;margin:0 0 10px}
.dossier-section p{font-size:12px;line-height:1.85;color:#b0c9d9;margin:0 0 12px}
.project-documents{display:grid;gap:10px;margin-top:24px}
.project-document-link{display:grid;gap:6px;padding:14px;border:1px solid #396981;border-radius:6px;background:#123349;color:#bfeaff;text-decoration:none;font-size:11px;line-height:1.6}
.project-document-link span{color:#8eb7d0;font-size:10px}
.project-document-link:hover,.project-document-link:focus-visible{border-color:#60cbff;background:#17415a}
@media(min-width:851px){.gallery-visual{position:sticky;top:68px;align-self:start}.project-dialog-content{align-items:start}.project-media{height:min(51dvh,540px)}}
@media(max-width:560px){.catalog-stats{font-size:11px}.project-metrics{gap:8px}.project-metric strong{font-size:20px}.dossier-section p{font-size:13px}}


/* V5.0 · Giro de la imagen 12 de Real Madrid: 90 grados a la derecha. */
#projectMedia { container-type: size; }
#projectMedia img[src*="/10/12.jpg"] {
  transform: rotate(90deg);
  width: 100cqh;
  height: 100cqw;
  max-width: none;
  max-height: none;
  flex: none;
}
.gallery-miniature img[src*="/10/12.jpg"] { transform: rotate(90deg); object-fit: contain; }
.case-grid > .project-card:only-child { grid-column: 1 / -1; width: min(100%,640px); justify-self: center; }