/* CLAROSCURO BRAND — ART DIRECTION / 2026
   Capa de diseño aditiva sobre el código original. Copy, galerías y lógica conservados.
   Paleta: negro volcánico, violeta Claroscuro, lavanda luminosa y blanco óptico.
*/
:root {
  --ink: #080511;
  --ink-violet: #110920;
  --ink-violet-2: #170e2e;
  --void: #06030d;
  --paper: #f8f6ff;
  --paper-dim: rgba(247,244,255,.73);
  --paper-soft: rgba(247,244,255,.54);
  --line: rgba(189,154,255,.24);
  --line-soft: rgba(189,154,255,.13);
  --logo-violet: #7700ff;
  --logo-violet-2: #af83ff;
  --violet: #8c42fa;
  --violet-2: #bc99ff;
  --violet-3: #d6bfff;
  --violet-deep: #5520b4;
  --violet-glow: rgba(125,37,255,.33);
  --violet-soft: rgba(141,77,255,.26);
  --violet-mist: rgba(174,131,255,.15);
  --violet-mid: rgba(107,36,234,.21);
  --violet-dim: rgba(86,39,174,.12);
  --grad-violet: linear-gradient(105deg,#fff 0%,#cfadff 35%,#985aff 76%,#d9c5ff 100%);
  --grad-violet-warm: linear-gradient(112deg,#fff 0%,#d9c4ff 32%,#a969ff 74%,#f4edff 100%);
  --divider: linear-gradient(90deg,transparent,rgba(171,122,255,.25) 25%,rgba(207,175,255,.55) 50%,rgba(171,122,255,.25) 75%,transparent);
  --gutter: clamp(22px,5.2vw,90px);
}
html { background:#080511; scroll-behavior:smooth; }
body {
 background:#080511;
 background-image:radial-gradient(ellipse 70% 12% at 65% 18%,rgba(83,35,174,.13),transparent 85%);
 font-weight:400;
}
::selection{background:#9a69ff;color:#090414}
.grain { opacity:.043; mix-blend-mode:screen; }
.cursor-dot { background:#b89aff; box-shadow:0 0 14px #ac65ff; }
.cursor-ring { border-color:#c6a6ff; }
.loader { background:#080412; }
.loader-num { font-family:var(--font-sans);font-size:clamp(62px,13vw,162px);font-weight:300;letter-spacing:-.09em; }
.loader-bar::after { background:linear-gradient(90deg,#6e1aff,#d6b9ff); }
/* Floating navigation: one consistent element on both pages. */
.nav {
 top:16px; left:var(--gutter); right:var(--gutter); padding:14px 16px 14px 24px;
 border:1px solid rgba(223,204,255,.2);
 border-radius:18px; background:rgba(13,7,29,.73);
 box-shadow:0 18px 60px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.045);
 -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
 mix-blend-mode:normal;
}
.nav-mark { font-family:var(--font-sans);font-size:15px;font-weight:700;letter-spacing:-.055em;gap:12px; }
.nav-mark svg{width:28px;height:28px;filter:drop-shadow(0 0 11px rgba(153,62,255,.55));}
.brand-accent { color:#c8a7ff; font-family:var(--font-serif);font-weight:500; }
.nav-toggle{ padding:12px 18px; border:1px solid rgba(190,152,255,.32);border-radius:12px; background:linear-gradient(110deg,rgba(93,28,187,.46),rgba(43,18,93,.54));font-size:10px;font-weight:700;letter-spacing:.14em; }
.nav-toggle:hover {background:#c0a2ff; color:#0b0619;}
.menu-overlay { background:radial-gradient(ellipse 64% 72% at 86% 60%,#391479 0%,#160929 52%,#09050f 95%); }
.menu-nav a{ font-family:var(--font-sans);font-weight:500;letter-spacing:-.07em; }
.menu-nav a em{font-family:var(--font-serif);}
.progress { right:clamp(8px,1.7vw,25px); }
.progress-rail::after {background:#b18afa;}
/* Home hero — an authored banner composition instead of a full bleed photograph. */
.art-hero {
 height:min(940px,100svh);min-height:690px; background:#080510;
 border-bottom:1px solid rgba(183,145,255,.24);
}
.art-hero:before {
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,rgba(2,1,7,.1),transparent 72%,#080511 100%),
 radial-gradient(ellipse 37% 34% at 74% 47%,rgba(111,32,238,.22),transparent 90%);
}
.art-hero:after {
 content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:106px;height:1px;
 background:linear-gradient(90deg,rgba(228,209,255,.45),rgba(149,95,243,.19),transparent);z-index:4;
}
.art-hero-slides{background:linear-gradient(135deg,#080511,#140727 56%,#080511)}
.art-slide{overflow:hidden;isolation:isolate;background:#080511;}
.art-slide:nth-child(1){background:radial-gradient(ellipse 50% 56% at 88% 40%,#391180 0%,transparent 85%),radial-gradient(ellipse 55% 44% at 48% 86%,#24104f 0%,transparent 80%),#080511;}
.art-slide:nth-child(2){background:radial-gradient(ellipse 62% 50% at 100% 72%,#5c249e 0%,transparent 78%),radial-gradient(ellipse 50% 40% at 37% 15%,#27134d 0%,transparent 90%),#080511;}
.art-slide:nth-child(3){background:radial-gradient(ellipse 52% 60% at 80% 20%,#351268 0%,transparent 83%),radial-gradient(ellipse 46% 36% at 34% 82%,#51218e 0%,transparent 87%),#080511;}
.art-slide:nth-child(4){background:radial-gradient(ellipse 66% 64% at 76% 62%,#3d146a 0%,transparent 85%),radial-gradient(ellipse 35% 45% at 29% 20%,#1f1244 0%,transparent 90%),#080511;}
.art-slide::before {
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
 background:url('./img/aurora-ribbon.svg') center 67%/110% auto no-repeat;
 opacity:.85; transform:translateY(0) scale(1.05);transition:transform 9s ease;
}
.art-slide:nth-child(2)::before{transform:translateX(10%) translateY(-6%) scale(1.3) rotate(-9deg);opacity:.7;}
.art-slide:nth-child(3)::before{transform:translateX(-5%) translateY(-2%) scale(1.22) rotate(11deg);opacity:.65;}
.art-slide:nth-child(4)::before{transform:translateX(12%) translateY(8%) scale(1.16) rotate(-14deg);opacity:.8;}
.art-slide.on::before{animation:aurora-drift 13s ease-in-out infinite alternate;}
@keyframes aurora-drift{0%{background-position:50% 68%;filter:hue-rotate(0deg)}100%{background-position:55% 62%;filter:hue-rotate(15deg)}}
.art-slide img {
 position:absolute;width:34%;height:54%;right:8%;top:22%;border-radius:220px 220px 20px 20px;
 object-fit:cover;object-position:center;mix-blend-mode:luminosity;
 filter:grayscale(1) brightness(.74) contrast(1.1) sepia(.12);opacity:.68;
 box-shadow:0 40px 100px #000;
 -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 99%);mask-image:linear-gradient(to bottom,#000 65%,transparent 99%);
 transition:transform 9s ease,opacity 1s;
}
.art-slide.on img{transform:scale(1.045);}
.art-slide-scrim{background:linear-gradient(90deg,#080511 4%,rgba(8,5,17,.76) 29%,transparent 80%);z-index:1;}
.art-slide-copy {
 left:var(--gutter);top:31%;right:auto;bottom:auto;
 padding:0;max-width:min(780px,70%);z-index:3;
}
.art-slide-eyebrow {
 width:max-content; max-width:100%;margin-bottom:36px;padding:10px 16px;border:1px solid rgba(215,186,255,.3);
 color:#e8d9ff;background:rgba(114,61,204,.12);border-radius:80px;
 letter-spacing:.21em;font-size:10px;font-weight:600;
}
.art-slide-phrase {
 font-family:var(--font-sans);font-size:clamp(45px,6.6vw,104px);
 letter-spacing:-.075em;line-height:1.035;font-weight:500;
 max-width:12ch;text-wrap:balance;text-shadow:0 10px 30px rgba(0,0,0,.25);
}
.art-slide-phrase em{
 font-family:var(--font-serif);font-weight:400;letter-spacing:-.045em;
 color:#c9a6ff;display:inline;
}
.art-hero-top {top:134px;padding:0 var(--gutter);}
.art-hero-credit{font-size:10px;letter-spacing:.06em;color:rgba(235,225,255,.67);max-width:280px;line-height:1.5;}
.art-hero-ui{bottom:36px;padding:0 var(--gutter) 0;align-items:center;}
.art-hero-cta {
 padding:14px 18px;border:1px solid rgba(228,206,255,.35);border-radius:50px;
 background:rgba(255,255,255,.055);letter-spacing:.17em;font-size:11px;font-weight:700;
 transition:background .3s,border-color .3s;
}
.art-hero-cta:hover {background:#fff;color:#120925;border-color:#fff;}
.art-hero-controls{gap:12px;}
.art-hero-btn {width:44px;height:44px;background:rgba(255,255,255,.06);border-color:rgba(222,194,255,.35);}
.art-hero-btn:hover {background:#6d2ed5;border-color:#a074ee;}
.art-hero-dots{gap:7px;align-items:center;margin:0 8px;}
.art-hero-dots button{width:28px;height:3px;background:rgba(207,184,244,.3);border-radius:5px;transition:width .4s,background .4s;}
.art-hero-dots button.on {width:46px;background:#caa8ff;}
/* White editorial interlude. Images are not replaced or retouched. */
.contemp-art {
 max-width:none;margin:0; color:#170c30;background:#f7f6fa;
 padding:clamp(92px,12vw,175px) var(--gutter) clamp(95px,12vw,170px);
}
.contemp-art::before{display:none;}
.contemp-art-head{ max-width:1200px;margin:0 auto 65px; }
.contemp-art-head .eyebrow {color:#7536bd;font-size:11px;font-weight:700;letter-spacing:.21em;}
.contemp-art-head h2 {
 max-width:24ch;font-family:var(--font-sans);font-weight:500;
 font-size:clamp(36px,4.6vw,71px);letter-spacing:-.062em;line-height:1.14;
}
.contemp-art-head h2 em{font-family:var(--font-serif);color:#743ac0;letter-spacing:-.05em;font-weight:500;}
.contemp-grid{max-width:1400px;margin:0 auto;gap:18px;grid-auto-rows:clamp(64px,7.5vw,110px);}
.contemp-piece{border-radius:20px;box-shadow:0 18px 45px rgba(34,15,60,.09);}
.contemp-piece img{filter:grayscale(.08) contrast(1.06);}
.contemp-piece::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(5,4,10,.65));pointer-events:none;}
.contemp-piece-label{z-index:3;letter-spacing:.09em;font-size:11px;text-transform:none;font-weight:600;}
.contemp-piece-label small{color:rgba(255,255,255,.8);font-size:10px;}
/* Horizontal service experience — luminous violet glass cards. */
.svc-track {background:#0a0615;}
.svc-track::before{display:none;}
.svc-viewport{background:radial-gradient(ellipse 45% 70% at 88% 35%,#25104d 0%,transparent 85%),linear-gradient(122deg,#0b0517,#0b071a 65%,#130828);}
.svc-viewport::before{
 top:0;right:0;width:80vw;height:100vh;max-width:none;max-height:none;
 background:url('./img/aurora-ribbon.svg') center center / cover no-repeat;opacity:.23;z-index:-1;
}
.svc-intro{border-right:none;}
.svc-intro .eyebrow,.work-intro .eyebrow,.collabs-head .eyebrow,.contact-side .eyebrow {color:#b38cfc;font-size:11px;letter-spacing:.21em;}
.svc-intro h2{font-family:var(--font-sans);font-weight:500;letter-spacing:-.075em;}
.svc-intro h2 em{font-family:var(--font-serif);font-weight:400;}
.svc-intro p{font-size:16px;line-height:1.9;}
.svc-card{
 margin:clamp(80px,12vh,126px) 18px; padding:clamp(34px,5vw,78px);
 height:calc(100% - clamp(160px,24vh,252px));min-width:0;flex-basis:45vw;
 border:1px solid rgba(192,145,255,.25);border-radius:26px;
 background:radial-gradient(ellipse 74% 56% at 70% 0%,rgba(117,52,234,.30),transparent 74%),linear-gradient(135deg,rgba(49,25,93,.58),rgba(15,8,35,.85));
 box-shadow:inset 0 1px rgba(255,255,255,.09),0 25px 60px rgba(0,0,0,.22);overflow:hidden;
}
.svc-card:last-child{border-right:1px solid rgba(192,145,255,.25);}
.svc-card::before{content:"";position:absolute;width:45%;aspect-ratio:1;right:-13%;top:-15%;background:radial-gradient(circle,rgba(172,114,255,.32),transparent 70%);filter:blur(12px);pointer-events:none;}
.svc-card .num{font-family:var(--font-sans);font-weight:300;font-size:clamp(70px,10vw,158px);letter-spacing:-.09em;}
.svc-card .name{font-family:var(--font-sans);font-weight:500;font-size:clamp(30px,3vw,50px);letter-spacing:-.05em;}
.svc-card .short{font-size:clamp(18px,2vw,28px);}
.svc-card .items{color:rgba(234,221,255,.70);font-size:12px;line-height:1.5;}
.svc-card .items span::before{color:#b489ff;}
/* Intentional portfolio boundary: .project and .project-* rules are untouched. */
.work-intro {
 max-width:none; margin:0;min-height:72vh; display:flex;flex-direction:column;justify-content:center;
 padding:clamp(120px,14vw,200px) var(--gutter);
 background:radial-gradient(ellipse 56% 45% at 95% 55%,rgba(81,27,184,.32),transparent 80%),
 linear-gradient(120deg,#090510,#150a2b);
}
.work-intro::before{display:none;}
.work-intro h2 {font-family:var(--font-sans);font-style:normal;font-weight:500;letter-spacing:-.072em;font-size:clamp(54px,8vw,127px);line-height:1.01;}
.work-intro h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.04em;}
.work-intro .count{margin-top:48px;}
.collabs{padding-top:clamp(110px,12vw,180px);}
.collabs-head h2{font-family:var(--font-sans);font-weight:500;letter-spacing:-.06em;}
.collabs-head h2 em{font-family:var(--font-serif);font-weight:400;}
.collab{border-radius:12px;}
.reel{background:radial-gradient(ellipse 68% 75% at 18% 85%,rgba(71,20,152,.3),transparent 75%);max-width:none;}
.reel-quote{letter-spacing:-.035em;}
.contact{background:linear-gradient(138deg,#170a30,#090512 52%,#170c32);max-width:none;}
.contact-side h2{font-family:var(--font-sans);font-weight:500;letter-spacing:-.065em;}
.contact-side h2 em{font-family:var(--font-serif);font-weight:400;}
.field input,.field textarea{background:rgba(255,255,255,.045);border:1px solid rgba(192,162,248,.24);border-radius:12px;padding:18px 20px;}
.field input:focus,.field textarea:focus{background:rgba(255,255,255,.07);border-color:#b685ff;}
.form-submit{background:linear-gradient(115deg,#9b60fa,#6f22da);color:#fff;border-color:transparent;border-radius:12px;}
.form-submit:hover{background:#f8f6ff;color:#160a30;}
.footer{background:#080511;max-width:none;}
.footer-mark{font-family:var(--font-sans);font-weight:600;letter-spacing:-.04em;}
.footer-word{opacity:.48;}
:focus-visible{outline:2px solid #cdabff;outline-offset:4px;}
@media (max-width:1100px){
 .art-slide-copy{max-width:72%;top:35%;}
 .art-slide-phrase{font-size:clamp(48px,7vw,84px);}
 .art-slide img{width:42%;right:2%;height:48%;top:30%;}
 .svc-card{flex-basis:54vw;}
}
@media (max-width:900px){
 .svc-track{height:auto;}
 .svc-viewport{height:auto;position:static;}
 .svc-rail{flex-direction:column;width:100%;}
 .svc-intro{min-width:0;width:100%;padding:105px var(--gutter) 40px;}
 .svc-card,.svc-card:last-child{min-width:0;flex:none;width:auto;height:auto;min-height:360px;margin:12px var(--gutter);padding:42px;border:1px solid rgba(192,145,255,.25);}
 .svc-card:last-child{margin-bottom:95px;}
 .svc-card .num{font-size:90px;}
 .work-intro{min-height:460px;}
 .contemp-grid{grid-auto-rows:70px;}
}
@media (max-width:640px){
 :root{--gutter:22px;}
 .nav{top:9px;left:12px;right:12px;padding:11px 12px 11px 16px;border-radius:14px;}
 .nav-mark{font-size:13px;gap:7px;}
 .nav-mark svg{width:23px;height:23px;}
 .nav-toggle{font-size:10px;padding:10px 12px;}
 .art-hero{min-height:690px;height:100svh;}
 .art-slide img{width:70%;height:45%;top:21%;right:-12%;opacity:.27;border-radius:150px 150px 20px 20px;}
 .art-slide-scrim{background:linear-gradient(90deg,rgba(8,5,17,.85),rgba(8,5,17,.1));}
 .art-slide::before{background-size:auto 80%;background-position:40% 76%;opacity:.87;}
 .art-slide-copy{top:32%;left:var(--gutter);max-width:calc(100% - 2 * var(--gutter));}
 .art-slide-phrase{font-size:clamp(43px,11.1vw,65px);max-width:11ch;line-height:1.08;}
 .art-slide-eyebrow{margin-bottom:25px;letter-spacing:.12em;font-size:9px;}
 .art-hero-top{top:102px;}
 .art-hero-credit{max-width:210px;font-size:9px;}
 .art-hero:after{bottom:115px;}
 .art-hero-ui{bottom:29px;flex-direction:row;align-items:center;gap:8px;padding:0 var(--gutter);}
 .art-hero-cta{padding:12px 13px;font-size:10px;letter-spacing:.08em;}
 .art-hero-btn{width:33px;height:33px;}
 .art-hero-controls{gap:5px;}
 .art-hero-dots{margin:0 3px;gap:4px;}
 .art-hero-dots button{width:9px;height:3px;}
 .art-hero-dots button.on{width:19px;}
 .contemp-art{padding:95px var(--gutter);}
 .contemp-art-head{margin-bottom:44px;}
 .contemp-art-head h2{font-size:clamp(33px,9vw,48px);}
 .contemp-grid{grid-auto-rows:52px;gap:9px;}
 .contemp-piece{border-radius:12px;}
 .contemp-piece-label{left:12px;bottom:12px;font-size:10px;}
 .svc-card{padding:35px;min-height:370px;}
 .work-intro{padding:115px var(--gutter);}
 .work-intro h2{font-size:clamp(49px,11vw,68px);}
 .field input,.field textarea{padding:15px;}
}
@media (prefers-reduced-motion:reduce){
 .art-slide.on::before{animation:none;}
 .art-slide img,.art-slide.on img{transform:none;transition:none;}
}

/* CLAROSCURO PERFORMANCE + 4-PROJECT VISUAL WALL — V1.2
   Stable GPU composition: avoid continuously repainting animated hue-rotate, blur
   and translucent fixed overlays. Visual language stays violet/black. */
.art-slide.on::before { animation:none; }
/* Nav translucency remains without a costly fixed backdrop blur when scrolling. */
.nav { background:rgba(13,7,29,.94); backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Noise is aesthetic-only and costly on older GPU configurations. */
.grain { display:none; }
/* Avoid blurring each large card while maintaining the soft radial-gradient glow. */
.svc-card::before { filter:none; }
/* Large editorial visual wall adapted to portrait + landscape client work. */
.contemp-grid { grid-auto-rows:clamp(72px,7vw,104px); gap:18px; }
.contemp-piece:nth-child(1) { grid-column:1 / 6; grid-row:span 7; }
.contemp-piece:nth-child(2) { grid-column:6 / 10; grid-row:span 7; }
.contemp-piece:nth-child(3) { grid-column:10 / 13; grid-row:span 3; }
.contemp-piece:nth-child(4) { grid-column:10 / 13; grid-row:span 4; }
.contemp-piece img { filter:none; }
.contemp-piece:hover img { filter:none; transform:scale(1.025); }
.contemp-piece:nth-child(1) img { object-position:50% 40%; }
.contemp-piece:nth-child(2) img { object-position:50% 30%; }
.contemp-piece:nth-child(3) img { object-position:50% 50%; }
.contemp-piece:nth-child(4) img { object-position:50% 50%; }
@media (max-width: 900px) {
 .contemp-grid { grid-auto-rows:72px; gap:12px; }
 .contemp-piece:nth-child(1), .contemp-piece:nth-child(2) { grid-row:span 6; }
 .contemp-piece:nth-child(1) { grid-column:1 / 7; }
 .contemp-piece:nth-child(2) { grid-column:7 / 13; }
 .contemp-piece:nth-child(3),.contemp-piece:nth-child(4) { grid-row:span 4; }
 .contemp-piece:nth-child(3) { grid-column:1 / 7; }
 .contemp-piece:nth-child(4) { grid-column:7 / 13; }
}
@media (max-width: 640px) {
 .contemp-grid { grid-auto-rows:58px; gap:12px; }
 .contemp-piece:nth-child(1),.contemp-piece:nth-child(2),
 .contemp-piece:nth-child(3),.contemp-piece:nth-child(4) { grid-column:1 / 13; }
 .contemp-piece:nth-child(1) { grid-row:span 7; }
 .contemp-piece:nth-child(2) { grid-row:span 7; }
 .contemp-piece:nth-child(3) { grid-row:span 5; }
 .contemp-piece:nth-child(4) { grid-row:span 6; }
 .contemp-piece:nth-child(1) img {object-position:50% 32%;}
 .contemp-piece:nth-child(2) img {object-position:50% 25%;}
}
@media (prefers-reduced-motion:reduce) {
 .art-slide img,.contemp-piece img {transition:none!important;}
}


/* V1.3 — wordmark superior: conservar el isotipo original y sumar “Studios”. */
.nav .nav-wordmark,
.menu-top .nav-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .36em;
  white-space: nowrap;
  font-style: normal;
  min-width: 0;
}
.nav .nav-wordmark em,
.menu-top .nav-wordmark em {
  color: #caa6ff;
  font-family: var(--font-serif);
  font-size: 1.05em;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -.035em;
}
@media (max-width: 420px) {
  .nav .nav-mark { font-size: 12px; gap: 7px; }
  .nav .nav-wordmark { gap: .27em; }
}


/* V1.3 — cifras 01 a 04 con espacio tipográfico de seguridad.
   El interletrado negativo anterior acortaba la caja de pintado;
   el gradiente de texto y el line-height 0.9 podían cortar terminales. */
.svc-card .top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: clamp(126px, 13vw, 184px);
  overflow: visible;
}
.svc-card .num {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  font-family: var(--font-sans);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(72px, 8.6vw, 140px);
  line-height: 1.14;
  letter-spacing: -.035em;
  padding: .035em .20em .06em .035em;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 901px) {
  .svc-card { padding-left: clamp(40px, 4.3vw, 76px); padding-right: clamp(40px, 4.3vw, 76px); }
}
@media (max-width: 900px) {
  .svc-card .top { min-height: 124px; }
  .svc-card .num { font-size: clamp(76px, 14vw, 112px); }
}
@media (max-width: 420px) {
  .svc-card .top { min-height: 110px; }
  .svc-card .num { font-size: 82px; }
}


/* ================================================================
   CLAROSCURO STUDIOS — SERVICIOS / V1.5
   ÚNICO ÁMBITO MODIFICADO: #servicios.
   Se eliminó el scroll horizontal y se sustituyó por 4 tarjetas
   visibles simultáneamente (desktop) con interacción por hover.
   ================================================================ */
#servicios.svc-track {
  position: relative;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse 49% 75% at 97% 13%, rgba(107, 43, 216, .30), transparent 78%),
    radial-gradient(ellipse 50% 60% at 3% 100%, rgba(91, 24, 166, .20), transparent 72%),
    linear-gradient(122deg, #090513, #100822 51%, #090512 100%);
}
#servicios .svc-viewport {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  display: block;
  overflow: visible;
  isolation: auto;
  background: none;
}
#servicios .svc-viewport::before {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  z-index: 0;
  opacity: .11;
  background: url('./img/aurora-ribbon.svg') center 50% / cover no-repeat;
  pointer-events: none;
}
#servicios .svc-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  column-gap: clamp(12px, 1.2vw, 20px);
  row-gap: 0;
  width: min(calc(100% - 2 * var(--gutter)), 1600px);
  max-width: 1600px;
  height: auto;
  margin-inline: auto;
  padding-block: clamp(88px, 9vw, 145px) clamp(95px, 9vw, 145px);
  transform: none !important;
  will-change: auto;
}
#servicios .svc-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: 0 clamp(34px, 5vw, 110px);
  flex: none;
  width: auto;
  min-width: 0;
  margin: 0 0 clamp(36px, 4.4vw, 68px);
  padding: 0;
  border: 0;
  background: none;
}
#servicios .svc-intro .eyebrow {
  grid-column: 1 / -1;
  margin: 0 0 24px;
  color: #b992ff;
}
#servicios .svc-intro h2 {
  margin: 0;
  font-size: clamp(54px, 5.8vw, 100px);
  line-height: 1.02;
}
#servicios .svc-intro p {
  max-width: 53ch;
  margin: 0 0 5px;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.85;
  color: rgba(244, 235, 255, .71);
}
#servicios .svc-card,
#servicios .svc-card:last-child {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  flex: none;
  width: auto;
  min-width: 0;
  min-height: clamp(360px, 30vw, 445px);
  height: auto;
  margin: 0;
  padding: clamp(22px, 2vw, 34px);
  border: 1px solid rgba(199, 161, 255, .23);
  border-radius: clamp(18px, 1.55vw, 24px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 125% 86% at 104% -18%, rgba(123, 55, 229, .35), transparent 67%),
    linear-gradient(150deg, rgba(36, 17, 71, .92), rgba(16, 9, 34, .96));
  box-shadow: inset 0 1px rgba(255, 255, 255, .085), 0 15px 45px rgba(0, 0, 0, .14);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1),
              border-color .38s ease,
              box-shadow .38s ease;
}
/* La segunda tarjeta aporta ritmo al conjunto sin crear animación continua. */
#servicios .svc-card:nth-child(3) {
  background:
    radial-gradient(ellipse 100% 95% at 102% 0%, rgba(151, 82, 255, .47), transparent 71%),
    linear-gradient(153deg, rgba(50, 23, 101, .97), rgba(19, 9, 43, .98));
}
#servicios .svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  background: radial-gradient(ellipse 95% 70% at 80% 4%, rgba(178, 113, 255, .21), transparent 74%);
  filter: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
}
#servicios .svc-card::after {
  content: '';
  position: absolute;
  inset: auto clamp(22px, 2vw, 34px) 0;
  height: 2px;
  background: linear-gradient(90deg, #ad71ff, #e0cfff, transparent);
  opacity: 0;
  transform: scaleX(.5);
  transform-origin: left;
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
}
#servicios .svc-card .top {
  min-height: 0;
  flex: none;
  align-items: flex-start;
  overflow: visible;
}
#servicios .svc-card .num {
  display: block;
  width: max-content;
  max-width: 100%;
  padding: 0 .12em .10em .015em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(63px, 5.4vw, 90px);
  font-style: normal;
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
  background: linear-gradient(110deg, #f5eeff 8%, #bb83ff 75%, #a25cfb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#servicios .svc-card .name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(24px, 2.25vw, 35px);
  line-height: 1.15;
  letter-spacing: -.055em;
}
#servicios .svc-card .short {
  max-width: none;
  margin-top: 15px;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.33;
}
#servicios .svc-card .items {
  margin-top: clamp(22px, 2.5vw, 36px);
  gap: 8px;
  font-size: clamp(10px, .78vw, 12px);
  line-height: 1.45;
  letter-spacing: .025em;
  color: rgba(242, 230, 255, .7);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #servicios .svc-card:hover {
    transform: translateY(-8px);
    border-color: rgba(205, 162, 255, .67);
    box-shadow: inset 0 1px rgba(255,255,255,.11),
                0 25px 55px rgba(31, 5, 71, .35);
  }
  #servicios .svc-card:hover::before {
    opacity: 1;
    transform: translateY(0);
  }
  #servicios .svc-card:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }
}
@media (max-width: 1080px) {
  #servicios .svc-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }
  #servicios .svc-intro { margin-bottom: 20px; }
  #servicios .svc-card,
  #servicios .svc-card:last-child {
    min-height: 340px;
    padding: clamp(25px, 3.4vw, 42px);
  }
  #servicios .svc-card .num { font-size: clamp(72px, 9vw, 110px); }
  #servicios .svc-card .name { font-size: clamp(29px, 3.2vw, 40px); }
  #servicios .svc-card .short { font-size: 20px; }
  #servicios .svc-card .items { font-size: 12px; }
}
@media (max-width: 640px) {
  #servicios .svc-rail {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding-block: 95px 100px;
  }
  #servicios .svc-intro {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 18px;
  }
  #servicios .svc-intro .eyebrow { margin-bottom: 18px; }
  #servicios .svc-intro h2 { font-size: clamp(53px, 11vw, 72px); }
  #servicios .svc-intro p { margin-top: 22px; font-size: 14px; }
  #servicios .svc-card,
  #servicios .svc-card:last-child {
    min-height: 330px;
    height: auto;
    margin: 0;
    padding: 31px;
  }
  #servicios .svc-card .num { font-size: 83px; }
  #servicios .svc-card .name { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  #servicios .svc-card,
  #servicios .svc-card::before,
  #servicios .svc-card::after { transition: none !important; transform: none !important; }
}


/* ===========================================================
   V1.6 — RESEÑAS / CORRECCIÓN DE UNIÓN DE DEGRADADO EN MÓVIL
   La antigua capa ::after tenía ancho 70vw y finalizaba antes
   del borde de pantalla, dejando una costura vertical visible.
   Pintamos ahora un único fondo continuo en toda la sección.
   Solo aplica a testimonios en móvil y tablet.
   =========================================================== */
@media (max-width: 900px) {
  .reel {
    background-color: #0b0617;
    background-image:
      radial-gradient(ellipse 104% 78% at 14% 51%,
        rgba(94, 40, 178, 0.39) 0%,
        rgba(66, 24, 135, 0.23) 43%,
        rgba(22, 9, 50, 0) 83%),
      linear-gradient(110deg, #130922 0%, #090613 100%);
  }
  .reel::after {
    content: none;
  }
}

/* ==================== CLAROSCURO / V1.7 ====================
   Menú completo en la altura visible, corrección de contacto en móvil,
   sexta imagen en Fevent y galería ampliable por proyecto. */

/* Menú: la fuente responde tanto al ancho como a la altura del viewport. */
.menu-overlay {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  padding: clamp(13px, 2.6svh, 30px) var(--gutter);
  grid-template-rows: min-content minmax(0, 1fr) min-content;
}
.menu-overlay .menu-nav {
  min-height: 0;
  max-width: 1180px;
  justify-content: space-evenly;
  gap: 0;
  padding: clamp(4px, 1.3svh, 18px) 0;
}
.menu-overlay .menu-nav a {
  font-size: clamp(33px, min(6.4vw, 9svh), 106px);
  line-height: 1;
  min-height: 0;
  padding-block: .055em;
  gap: clamp(12px, 2vw, 26px);
}
.menu-overlay .menu-nav a .num {
  font-size: clamp(10px, 1vw, 13px);
  min-width: clamp(24px, 3vw, 38px);
  flex-shrink: 0;
}
.menu-overlay .menu-bottom {
  flex: none;
  align-items: center;
  row-gap: 6px;
  padding-top: clamp(8px, 1.3svh, 16px);
}
@media (max-width: 640px) {
  .menu-overlay {padding-inline: clamp(17px, 5vw, 28px);}
  .menu-overlay .menu-top .nav-mark {font-size: 12px;}
  .menu-overlay .menu-close {padding: 9px 13px;font-size: 10px;}
  .menu-overlay .menu-nav a {font-size: clamp(31px, min(11.6vw, 8.1svh), 57px);}
  .menu-overlay .menu-bottom {font-size: 10px;letter-spacing: .02em;}
}
@media (max-height: 560px) {
  .menu-overlay {padding-block: 9px;}
  .menu-overlay .menu-nav a {font-size: clamp(25px, min(5vw, 8svh), 44px);}
  .menu-overlay .menu-bottom {font-size: 10px;padding-top: 5px;}
}

/* Contacto en tablet/móvil: degradado de borde a borde, sin pseudocapa recortada. */
@media (max-width: 900px) {
  #contacto.contact {
    background-color: #0b0616;
    background-image:
      radial-gradient(ellipse 120% 67% at 23% 46%, rgba(97, 34, 194, .33), transparent 82%),
      radial-gradient(ellipse 100% 65% at 88% 96%, rgba(59, 25, 133, .20), transparent 78%),
      linear-gradient(145deg, #170b31 0%, #0b0616 77%, #110825 100%);
  }
  #contacto.contact::after { content: none; }
}

/* Fevent: seis imágenes encajan sin celdas vacías ni recortes negros. */
@media (min-width: 901px) {
  .gallery-fevent {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(125px, auto));
  }
  .gallery-fevent .g:nth-child(1) {grid-column:1 / 5;grid-row:1 / 3;aspect-ratio: 4 / 3;}
  .gallery-fevent .g:nth-child(2) {grid-column:5 / 7;grid-row:1 / 2;aspect-ratio: 4 / 3;}
  .gallery-fevent .g:nth-child(3) {grid-column:5 / 7;grid-row:2 / 3;aspect-ratio: 4 / 3;}
  .gallery-fevent .g:nth-child(4) {grid-column:1 / 3;grid-row:3 / 4;aspect-ratio: 4 / 3;}
  .gallery-fevent .g:nth-child(5) {grid-column:3 / 5;grid-row:3 / 4;aspect-ratio: 4 / 3;}
  .gallery-fevent .g:nth-child(6) {grid-column:5 / 7;grid-row:3 / 4;aspect-ratio: 4 / 3;}
}
@media (max-width: 900px) {
  .gallery-fevent {grid-template-columns: repeat(2,minmax(0,1fr));grid-template-rows:none;}
  .gallery-fevent .g:nth-child(1) {grid-column:1 / 3 !important;grid-row:auto !important;aspect-ratio:16 / 10 !important;}
  .gallery-fevent .g:nth-child(2), .gallery-fevent .g:nth-child(3),
  .gallery-fevent .g:nth-child(4), .gallery-fevent .g:nth-child(5) {
    grid-column:auto !important;grid-row:auto !important;aspect-ratio:4 / 3 !important;
  }
  .gallery-fevent .g:nth-child(6) {grid-column:1 / 3 !important;grid-row:auto !important;aspect-ratio:16 / 9 !important;}
}
/* Botones de proyecto conservan exactamente las mismas celdas que los div originales. */
.project-gallery .project-photo {
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: zoom-in;
  min-width: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.project-gallery .project-photo:focus-visible { outline: 2px solid #cda6ff;outline-offset: 3px; }
.project-gallery .project-photo img {pointer-events:none;}
/* Visor a pantalla completa, independiente del scroll/transform de los proyectos. */
.project-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: #080511;
  color: #f8f6ff;
  overflow: hidden;
}
.project-lightbox::backdrop {background:rgba(3,1,9,.88);}
.project-lightbox[open] {display:block;}
.project-lightbox-layout {
  width:100%;height:100%;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(8px,1.5vh,18px);
  padding:clamp(16px,2.5vh,28px) clamp(14px,3vw,44px);
  background:radial-gradient(ellipse 65% 80% at 50% 80%,rgba(88,28,178,.23),transparent 72%), #080511;
}
.project-lightbox-head {display:flex;justify-content:space-between;align-items:center;gap:16px;}
.project-lightbox-project {font:500 clamp(15px,2vw,23px)/1.25 var(--font-sans);letter-spacing:-.04em;}
.project-lightbox-tools {display:flex;align-items:center;gap:clamp(10px,3vw,36px);}
.project-lightbox-counter {font:600 12px/1 var(--font-sans);letter-spacing:.13em;color:#cba8ff;white-space:nowrap;}
.project-lightbox-close,
.project-lightbox-arrow {
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(63,27,124,.45);border:1px solid rgba(218,180,255,.4);
  color:#fff;border-radius:999px;cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
.project-lightbox-close {gap:10px;padding:12px 18px;font:600 11px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.12em;}
.project-lightbox-close span {font-size:22px;line-height:.6;}
.project-lightbox-stage {position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(30px,5vw,82px);}
.project-lightbox-stage img {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 12px 64px rgba(0,0,0,.3);}
.project-lightbox-arrow {position:absolute;top:50%;transform:translateY(-50%);width:clamp(36px,4vw,56px);height:clamp(36px,4vw,56px);z-index:2;}
.project-lightbox-arrow svg {width:22px;height:22px;}
.project-lightbox-prev {left:0;}
.project-lightbox-next {right:0;}
.project-lightbox-caption {font:500 11px/1.5 var(--font-sans);letter-spacing:.08em;color:rgba(237,225,255,.7);text-align:center;min-height:1.5em;}
@media (hover:hover){
  .project-lightbox-close:hover,.project-lightbox-arrow:hover {background:#6d2cce;border-color:#dbc2ff;}
}
@media (max-width:640px){
  .project-lightbox-project {font-size:14px;max-width:45vw;}
  .project-lightbox-counter {font-size:10px;}
  .project-lightbox-close {font-size:10px;padding:10px 12px;}
  .project-lightbox-stage {padding:0 clamp(0px,2vw,12px);}
  .project-lightbox-arrow {top:auto;bottom:12px;transform:none;background:rgba(16,8,40,.85);}
  .project-lightbox-prev {left:8px;}
  .project-lightbox-next {right:8px;}
}
@media (prefers-reduced-motion:reduce) {
  .project-lightbox-close,.project-lightbox-arrow {transition:none;}
}

/* ============================================================
   V1.8 — CURSOR EN GALERÍAS AMPLIADAS (ESCRITORIO)
   <dialog> se representa en la top layer del navegador, por encima
   del cursor personalizado. Usar el cursor nativo en esta ventana.
   Los enlaces/controles del resto del sitio no se modifican.
   ============================================================ */
#projectLightbox,
#projectLightbox * {
  cursor: default !important;
}
#projectLightbox button,
#projectLightbox button * {
  cursor: pointer !important;
}
#projectLightbox::backdrop {
  cursor: default;
}
/* Ocultar el cursor decorativo solo cuando se abre la galería. */
body:has(#projectLightbox[open]) .cursor-dot,
body:has(#projectLightbox[open]) .cursor-ring {
  visibility: hidden;
}


/* ===========================================================
   Expostand Latam: mosaico sin recortes ni celdas solapadas.
   Solo se aplica a la galería identificada como gallery-expostand.
   Escritorio/tablet: 2 fotografías arriba + 3 abajo.
   Móvil: una columna con las 5 fotografías completas.
   =========================================================== */
.gallery-a.gallery-expostand {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: none;
  gap: clamp(10px, 1.15vw, 16px);
  align-items: stretch;
}
.gallery-a.gallery-expostand > .g {
  grid-row: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #201234 0%, #0c0717 100%);
  display: grid;
  place-items: center;
}
.gallery-a.gallery-expostand > .g:nth-child(-n+2) {
  grid-column: span 3;
  aspect-ratio: 5 / 6;
}
.gallery-a.gallery-expostand > .g:nth-child(n+3) {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}
.gallery-expostand .plate img,
html.js-anim .gallery-expostand .plate img,
.gallery-expostand .plate:hover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
@media (min-width: 601px) and (max-width: 900px) {
  /* Sobrescribe solo para Expostand la rejilla móvil heredada. */
  .gallery-a.gallery-expostand > .g:nth-child(-n+2) {
    grid-column: span 3 !important;
    grid-row: auto !important;
    aspect-ratio: 5 / 6 !important;
  }
  .gallery-a.gallery-expostand > .g:nth-child(n+3) {
    grid-column: span 2 !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}
@media (max-width: 600px) {
  .gallery-a.gallery-expostand { grid-template-columns: minmax(0, 1fr); }
  .gallery-a.gallery-expostand > .g:nth-child(n) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    aspect-ratio: auto !important;
  }
  .gallery-expostand .plate img,
  html.js-anim .gallery-expostand .plate img,
  .gallery-expostand .plate:hover img {
    position: static;
    display: block;
    height: auto;
    width: 100%;
    object-fit: contain;
    transform: none;
  }
}