/* ==========================================================================
   Portafolio & Servicios — recorrido horizontal cinematográfico
   Tema único oscuro: negro carbón, espresso y luz naranja cobriza.
   Se apoya en la tipografía del sitio (Outfit) y suma una serif editorial
   (Instrument Serif) para las palabras destacadas.
   ========================================================================== */
.svc{
  --s-ink:#090909; --s-deep:#050505; --s-espresso:#21110D;
  --s-copper:#E85D17; --s-orange:#FF681C; --s-warm:#F5F0E9; --s-gray:#A7A19D;
  --s-line:rgba(245,240,233,.12); --s-line-soft:rgba(245,240,233,.07);
  --s-serif:"Outfit", system-ui, sans-serif;
  --s-ease:cubic-bezier(.19,.76,.18,1);
  --safe:96px;
  position:relative; isolation:isolate; overflow-x:clip; background:var(--s-ink); color:var(--s-warm);
  font-family:var(--font, "Outfit", system-ui, sans-serif);
}
.svc em{font-family:var(--s-serif); font-style:italic; font-weight:400; color:var(--s-orange); letter-spacing:-.01em}
.svc ::selection{background:rgba(232,93,23,.35); color:var(--s-warm)}
.svc :focus-visible{outline:1px solid var(--s-orange); outline-offset:6px; border-radius:6px}

/* ---------- capas de fondo: degradado, luces, ruido y viñeta ---------- */
.svc-bg{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  --gx:72%; --gy:38%; --gi:1;
  background:linear-gradient(155deg, var(--s-ink) 0%, #0D0807 48%, var(--s-espresso) 100%)}
.svc-bg .glow{position:absolute; left:0; top:0; width:110vmax; height:110vmax; margin:-55vmax 0 0 -55vmax; border-radius:50%; will-change:transform,opacity;
  background:radial-gradient(closest-side, rgba(232,93,23,.26), rgba(232,93,23,.08) 55%, transparent 100%);
  transform:translate3d(72vw,38vh,0)}
.svc-bg .drift{position:absolute; width:70vmax; height:70vmax; left:-20vmax; bottom:-40vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(255,104,28,.13), transparent 62%); will-change:transform; animation:svcDrift 22s ease-in-out infinite alternate}
.svc-bg .drift.b{left:auto; right:-26vmax; top:-36vmax; bottom:auto; width:60vmax; height:60vmax; animation-duration:28s; animation-direction:alternate-reverse; background:radial-gradient(circle, rgba(232,93,23,.1), transparent 60%)}
@keyframes svcDrift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(8vmax,-6vmax,0) scale(1.12)}}
.svc-bg .noise{position:absolute; inset:0; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
@keyframes svcGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.svc-bg .vignette{position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%)}
.svc-bg .noise{opacity:1; background-color:transparent}
.svc-bg .noise::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%)}
.svc-bg .noise{background-image:linear-gradient(rgba(9,9,9,0),rgba(9,9,9,0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- introducción ---------- */
.svc-intro{position:relative; min-height:118vh; min-height:118svh; display:grid; align-content:center; padding:34vh clamp(20px,6vw,96px) 14vh; overflow:hidden}
.svc-intro::before{content:""; position:absolute; inset:0 0 auto; height:36vh; z-index:1; pointer-events:none;
  background:linear-gradient(#D6D6D4 0%, rgba(214,214,212,.55) 26%, rgba(9,9,9,0) 100%)}
.svc-intro > *{position:relative; z-index:2}
.svc-eyebrow{display:flex; align-items:center; gap:16px; font-size:11px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--s-orange)}
.svc-eyebrow::before{content:""; width:44px; height:1px; background:currentColor; opacity:.7}
.svc-intro h2{margin:clamp(22px,3.4vh,40px) 0 0; font-weight:300; text-transform:uppercase; letter-spacing:-.035em; line-height:.9; font-size:clamp(56px,12.6vw,212px)}
.svc-intro h2 em{text-transform:none; letter-spacing:-.02em; font-size:1.06em}
.svc-intro .lead{margin:clamp(26px,4.4vh,48px) 0 0; max-width:30ch; font-weight:300; font-size:clamp(20px,2.3vw,34px); line-height:1.28; color:rgba(245,240,233,.86)}
.svc-intro .tags{margin-top:clamp(28px,4vh,44px); display:flex; align-items:center; gap:18px; font-size:12px; letter-spacing:.38em; text-transform:uppercase; color:var(--s-gray)}
.svc-intro .tags i{display:block; width:64px; height:1px; background:var(--s-line)}
.svc-hint{position:absolute; left:clamp(20px,6vw,96px); bottom:7vh; display:flex; align-items:center; gap:18px; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--s-gray); z-index:2}
.svc-hint .ln{position:relative; width:84px; height:1px; background:var(--s-line); overflow:hidden}
.svc-hint .ln::after{content:""; position:absolute; inset:0; background:var(--s-orange); transform:translateX(-100%); animation:svcHint 2.4s var(--s-ease) infinite}
@keyframes svcHint{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.svc-hint b{font-weight:400; color:var(--s-orange)}

/* ---------- carril fijo + pista horizontal ---------- */
.svc-rail{position:relative}
.svc-pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; overflow:clip}
.svc-track{position:relative; z-index:1; display:flex; height:100%; width:max-content; will-change:transform}

/* ---------- panel de servicio ---------- */
.svc-panel{position:relative; flex:0 0 100vw; width:100vw; height:100%; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr); align-items:center; gap:clamp(28px,5vw,96px);
  padding:var(--safe) clamp(24px,6vw,104px) clamp(110px,15vh,150px)}
.svc-panel--alt .svc-copy{order:2}
.svc-panel--alt .svc-media{order:1}
.svc-copy{position:relative; min-width:0}
.svc-num{position:absolute; right:-.04em; top:-.16em; z-index:-1; display:flex; align-items:flex-start; gap:.12em; font-weight:300; line-height:.8; letter-spacing:-.06em; font-size:clamp(110px,14vw,240px); color:transparent; -webkit-text-stroke:1px rgba(245,240,233,.14); user-select:none; pointer-events:none}
.svc-num small{font-size:.16em; letter-spacing:.06em; -webkit-text-stroke:0; color:var(--s-gray); margin-top:.55em}
.svc-tag{display:flex; align-items:center; gap:14px; white-space:nowrap; font-size:11px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--s-orange)}
.svc-tag b{font-weight:500; color:var(--s-warm)}
.svc-tag i{display:block; width:34px; height:1px; background:currentColor; opacity:.6}
.svc-copy h3{margin:clamp(16px,2.6vh,28px) 0 0; font-weight:300; font-size:clamp(38px,4.4vw,76px); line-height:1.02; letter-spacing:-.03em; max-width:13ch}
.svc-copy h3 em{font-size:1.04em}
.svc-copy p{margin:clamp(18px,2.8vh,30px) 0 0; max-width:42ch; font-weight:300; font-size:clamp(15px,1.12vw,18px); line-height:1.65; color:var(--s-gray)}
.svc-caps{list-style:none; margin:clamp(20px,3vh,34px) 0 0; padding:0; max-width:440px; border-top:1px solid var(--s-line-soft)}
.svc-caps li{position:relative; display:flex; align-items:baseline; gap:16px; padding:clamp(8px,1.3vh,12px) 0; border-bottom:1px solid var(--s-line-soft); font-size:clamp(13px,1vw,15px); color:rgba(245,240,233,.86)}
.svc-caps li span{font-size:10px; letter-spacing:.16em; color:var(--s-orange); font-variant-numeric:tabular-nums}
.svc-caps li::after{content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:linear-gradient(90deg, var(--s-orange), transparent); transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--s-ease) calc(.35s + var(--i,0) * .08s)}
.svc-panel.is-in .svc-caps li::after{transform:scaleX(.55)}
.svc-btn{display:inline-flex; align-items:center; gap:14px; margin-top:clamp(24px,3.6vh,40px); padding:15px 22px 15px 26px; border-radius:999px; border:1px solid rgba(245,240,233,.22); font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--s-warm); text-decoration:none; position:relative; overflow:hidden; transition:border-color .4s var(--s-ease), color .4s var(--s-ease)}
.svc-btn::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, var(--s-copper), var(--s-orange)); transform:translateY(102%); transition:transform .55s var(--s-ease)}
.svc-btn .ar{display:inline-block; transition:transform .45s var(--s-ease)}
.svc-btn:hover, .svc-btn:focus-visible{border-color:transparent; color:#120906}
.svc-btn:hover::before, .svc-btn:focus-visible::before{transform:none}
.svc-btn:hover .ar, .svc-btn:focus-visible .ar{transform:translate(3px,-3px)}

/* ---------- imagen protagonista ---------- */
.svc-media{position:relative; min-width:0}
.svc-visual{position:relative; aspect-ratio:4/3; max-height:calc(100vh - var(--safe) - 170px); margin-left:auto; border-radius:clamp(18px,2vw,32px); overflow:hidden;
  background:radial-gradient(80% 70% at 70% 30%, rgba(232,93,23,.22), transparent 60%), linear-gradient(160deg, #1A0F0B, #070606 70%);
  box-shadow:0 0 0 1px rgba(245,240,233,.08), 0 60px 120px -40px rgba(0,0,0,.9), 0 30px 80px -50px rgba(232,93,23,.5);
  clip-path:inset(0 0 0 100% round clamp(18px,2vw,32px)); transition:clip-path 1.5s var(--s-ease) .1s}
.svc-panel--alt .svc-visual{margin-left:0; margin-right:auto; clip-path:inset(0 100% 0 0 round clamp(18px,2vw,32px))}
.svc-panel.is-in .svc-visual{clip-path:inset(0 0 0 0 round clamp(18px,2vw,32px))}
.svc-visual-in{position:absolute; inset:-4% -8%; will-change:transform}
.svc-visual-in > img, .svc-visual-in .vz-svg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
/* fotos reales (capturas de proyectos): marco más ancho, sin velo inferior oscuro */
.svc-visual.has-img{aspect-ratio:16/10}
.svc-visual.has-video{aspect-ratio:16/9}
.svc-visual-in > video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#0A0F1C}
.svc-visual.has-img .svc-visual-in{inset:0 -6%}
.svc-visual.has-img::after{background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 24%)}
.svc-visual::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%), radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.55), transparent 60%)}
.svc-media .cap{position:absolute; left:0; right:0; bottom:-34px; display:flex; justify-content:space-between; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(167,161,157,.7)}
.svc-panel--alt .svc-media .cap{flex-direction:row-reverse}

/* movimientos internos de las composiciones */
.vz-3d{position:absolute; inset:0; perspective:1400px}
.vz-3d .vz-svg{transform:rotateX(16deg) rotateY(-20deg) rotateZ(3deg) scale(.92); transform-origin:60% 50%}
.vz-radar{position:absolute; left:37.5%; top:50%; width:58%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,104,28,.42), rgba(255,104,28,0) 22%, transparent 100%); animation:vzSpin 6s linear infinite; opacity:.85; will-change:transform}
.vz-float{animation:vzFloat 7s ease-in-out infinite}
.vz-d2{animation-delay:-2.4s} .vz-d3{animation-delay:-4.6s}
@keyframes vzFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.vz-led{animation:vzLed 2.6s ease-in-out infinite; animation-delay:var(--d,0s)}
@keyframes vzLed{0%,100%{opacity:.25}50%{opacity:1}}
.vz-flow{stroke-dasharray:6 14; animation:vzFlow 2.4s linear infinite; animation-delay:var(--d,0s)}
@keyframes vzFlow{to{stroke-dashoffset:-80}}
.vz-ping{animation:vzPing 3s ease-out infinite; animation-delay:var(--d,0s); transform-box:fill-box; transform-origin:center}
@keyframes vzPing{0%{transform:scale(.6); opacity:.2}40%{transform:scale(1.4); opacity:1}100%{transform:scale(1); opacity:.5}}
.vz-spin{animation:vzSpin 18s linear infinite; transform-box:fill-box; transform-origin:center}
@keyframes vzSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.vz-spin{animation-name:vzSpinSvg}
@keyframes vzSpinSvg{to{transform:rotate(360deg)}}
.vz-bar{transform-box:fill-box; transform-origin:bottom; transform:scaleY(.2); transition:transform 1.2s var(--s-ease) calc(.5s + var(--d,0s))}
.svc-panel.is-in .vz-bar{transform:none}
.vz-ring{stroke-dashoffset:276; transition:stroke-dashoffset 1.8s var(--s-ease) .6s}
.svc-panel.is-in .vz-ring{stroke-dashoffset:70}
.vz-draw{stroke-dasharray:1200; stroke-dashoffset:1200; transition:stroke-dashoffset 2.2s var(--s-ease) .5s}
.svc-panel.is-in .vz-draw{stroke-dashoffset:0}
.vz-rise{transform:translateY(30px); opacity:0; transition:transform 1.2s var(--s-ease) calc(.4s + var(--d,0s)), opacity 1.2s var(--s-ease) calc(.4s + var(--d,0s))}
.svc-panel.is-in .vz-rise{transform:none; opacity:1}

/* las composiciones solo se animan en el panel que está en pantalla */
.svc.is-h .svc-panel:not(.is-active) .vz-svg *, .svc.is-h .svc-panel:not(.is-active) .vz-radar, .svc.is-h .svc-panel:not(.is-active) .vz-float{animation-play-state:paused}
.svc-track{backface-visibility:hidden}
.svc-visual-in{backface-visibility:hidden}

/* ---------- revelado de textos ---------- */
.mw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.mw > span{display:inline-block; transform:translateY(108%); transition:transform 1.2s var(--s-ease); transition-delay:calc(var(--w,0) * .05s + var(--base,0s))}
.is-in .mw > span{transform:none}
.rv{opacity:0; transform:translateY(34px); transition:opacity 1.1s var(--s-ease), transform 1.1s var(--s-ease); transition-delay:calc(var(--i,0) * .07s + .25s)}
.is-in .rv{opacity:1; transform:none}
.svc-num .digit{display:inline-block; transform:translateY(40%); opacity:0; transition:transform 1.4s var(--s-ease), opacity 1.4s var(--s-ease)}
.svc-panel.is-in .svc-num .digit{transform:none; opacity:1}
.svc-panel.is-active .svc-num{-webkit-text-stroke-color:rgba(255,104,28,.34)}
.svc-num{transition:-webkit-text-stroke-color .8s var(--s-ease)}

/* ---------- indicador de progreso ---------- */
.svc-progress{position:absolute; z-index:4; left:clamp(24px,6vw,104px); right:clamp(24px,6vw,104px); bottom:clamp(24px,4.6vh,44px); display:grid; grid-template-columns:auto minmax(0,auto) 1fr auto; align-items:center; gap:22px; font-size:12px; letter-spacing:.2em; font-variant-numeric:tabular-nums; color:var(--s-gray)}
.svc-progress .now{min-width:2.4ch; color:var(--s-warm); font-weight:500; display:inline-block; overflow:hidden; height:1.2em; line-height:1.2em}
.svc-progress .now span{display:block; transition:transform .6s var(--s-ease)}
.svc-progress .label{order:2; min-width:22ch; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--s-orange); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.svc-progress .now{order:1} .svc-progress .svc-bar{order:3} .svc-progress .end{order:4}
.svc-bar{position:relative; height:24px}
.svc-bar .base{position:absolute; left:0; right:0; top:50%; height:1px; background:var(--s-line)}
.svc-bar .fill{position:absolute; left:0; top:50%; height:1px; width:100%; background:linear-gradient(90deg, var(--s-copper), var(--s-orange)); transform-origin:left; transform:scaleX(0)}
.svc-bar .dot-track{position:absolute; inset:0; will-change:transform; pointer-events:none}
.svc-bar .dot{position:absolute; top:50%; left:0; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--s-orange); box-shadow:0 0 0 5px rgba(255,104,28,.16), 0 0 18px rgba(255,104,28,.8)}
.svc-bar .ticks{position:absolute; inset:0; display:flex; justify-content:space-between}
.svc-bar .ticks button{position:relative; width:24px; height:24px; margin:0 -12px; border:0; padding:0; background:none; cursor:pointer}
.svc-bar .ticks button::before{content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:rgba(245,240,233,.3); transition:background .3s ease, transform .3s ease}
.svc-bar .ticks button:hover::before, .svc-bar .ticks button.on::before{background:var(--s-warm); transform:scale(1.4)}

/* ---------- cómo trabajo ---------- */
.svc-method{position:relative; overflow:hidden; padding:clamp(110px,18vh,190px) clamp(20px,6vw,96px) clamp(90px,14vh,150px)}
.svc-method-in{position:relative; z-index:2; max-width:1320px; margin:0 auto}
.svc-method h2{margin:clamp(20px,3vh,32px) 0 0; font-weight:300; letter-spacing:-.03em; line-height:1; font-size:clamp(40px,6vw,96px); max-width:14ch}
.svc-method .lead{margin:clamp(22px,3.4vh,36px) 0 0; max-width:46ch; font-weight:300; font-size:clamp(17px,1.5vw,22px); line-height:1.5; color:var(--s-gray)}
.svc-steps{list-style:none; margin:clamp(48px,8vh,96px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--s-line)}
.svc-steps li{position:relative; padding:clamp(26px,4vh,40px) clamp(16px,2vw,32px) 0 0}
.svc-steps li + li{padding-left:clamp(16px,2vw,32px); border-left:1px solid var(--s-line-soft)}
.svc-steps li::before{content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:linear-gradient(90deg, var(--s-orange), transparent); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--s-ease) calc(.4s + var(--i,0) * .1s)}
.svc-method.is-in .svc-steps li::before{transform:scaleX(.7)}
.svc-steps .n{font-size:11px; font-weight:500; letter-spacing:.24em; color:var(--s-orange); font-variant-numeric:tabular-nums}
.svc-steps h3{margin:14px 0 0; font-weight:400; font-size:clamp(20px,1.7vw,26px); letter-spacing:-.015em; line-height:1.15}
.svc-steps p{margin:12px 0 0; font-weight:300; font-size:clamp(14px,1.05vw,16px); line-height:1.6; color:var(--s-gray)}
@media (max-width:980px){ .svc-steps{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:36px} .svc-steps li:nth-child(3){padding-left:0; border-left:0} }
@media (max-width:560px){ .svc-steps{grid-template-columns:minmax(0,1fr)} .svc-steps li, .svc-steps li + li{padding-left:0; border-left:0} }

/* ---------- cierre ---------- */
.svc-outro{position:relative; min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center; padding:clamp(120px,18vh,200px) clamp(20px,6vw,96px); overflow:hidden;
  background:radial-gradient(60% 50% at 50% 58%, rgba(232,93,23,.16), transparent 70%), linear-gradient(180deg, var(--s-espresso) 0%, #0B0706 26%, var(--s-deep) 60%)}
.svc-outro .svc-bg{background:none}
.svc-outro-in{position:relative; z-index:2; display:grid; justify-items:center}
.svc-outro h2{margin:0; font-weight:300; text-transform:uppercase; letter-spacing:-.035em; line-height:.94; font-size:clamp(44px,8.2vw,148px); max-width:13ch}
.svc-outro h2 em{text-transform:none; letter-spacing:-.02em}
.svc-outro p{margin:clamp(22px,3.4vh,36px) 0 0; font-weight:300; font-size:clamp(17px,1.6vw,24px); color:var(--s-gray)}
.svc-chip{margin-top:26px; display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; border:1px solid rgba(255,104,28,.35); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--s-warm)}
.svc-chip[hidden]{display:none}
.svc-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--s-orange)}
.svc-cta{margin-top:clamp(34px,5vh,56px); display:inline-flex; align-items:center; gap:18px; padding:22px 34px 22px 40px; border-radius:999px; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:#120906;
  background:linear-gradient(100deg, var(--s-copper), var(--s-orange)); box-shadow:0 20px 60px -18px rgba(255,104,28,.7), inset 0 1px 0 rgba(255,255,255,.3); position:relative; overflow:hidden; transition:transform .5s var(--s-ease), box-shadow .5s var(--s-ease)}
.svc-cta::after{content:""; position:absolute; top:0; bottom:0; width:40%; left:-50%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); transition:left .9s var(--s-ease)}
.svc-cta:hover, .svc-cta:focus-visible{transform:translateY(-3px); box-shadow:0 30px 80px -20px rgba(255,104,28,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.svc-cta:hover::after, .svc-cta:focus-visible::after{left:120%}
.svc-cta .ar{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#120906; color:var(--s-orange); transition:transform .5s var(--s-ease)}
.svc-cta:hover .ar{transform:rotate(45deg)}
.svc-outro .line-v{width:1px; height:80px; margin:0 auto clamp(30px,5vh,52px); background:linear-gradient(transparent, var(--s-orange))}

/* ---------- cursor personalizado (solo puntero fino) ---------- */
.vx-cursor, .vx-ring{position:fixed; left:0; top:0; z-index:60; pointer-events:none; border-radius:50%; opacity:0; transition:opacity .3s ease}
.vx-cursor{width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--s-orange, #FF681C)}
.vx-ring{width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid rgba(245,240,233,.4); display:grid; place-items:center; font:500 9px/1 "Outfit", sans-serif; letter-spacing:.2em; text-transform:uppercase; color:#120906; transition:opacity .3s ease, width .4s cubic-bezier(.19,.76,.18,1), height .4s cubic-bezier(.19,.76,.18,1), margin .4s cubic-bezier(.19,.76,.18,1), background .4s ease, border-color .4s ease}
.vx-ring span{opacity:0; transition:opacity .3s ease}
.vx-on .vx-cursor, .vx-on .vx-ring{opacity:1}
.vx-hover .vx-ring{width:64px; height:64px; margin:-32px 0 0 -32px; border-color:rgba(255,104,28,.7)}
.vx-view .vx-ring{width:92px; height:92px; margin:-46px 0 0 -46px; background:#FF681C; border-color:transparent}
.vx-view .vx-ring span{opacity:1}
.vx-view .vx-cursor{opacity:0}
@media (hover:hover) and (pointer:fine){ .vx-enabled .svc, .vx-enabled .svc a, .vx-enabled .svc button{cursor:none} }

/* ---------- cabecera sobre fondo oscuro ---------- */
.top{transition:color .5s ease}
.top.on-dark{color:#F5F0E9}
.top.on-dark .menu i{background:#F5F0E9}
.top.on-dark .brand svg circle:first-of-type{fill:#F5F0E9}
.top.on-dark .brand svg path{stroke:#0B0C0F}
.top.on-dark .nav a.on::after{background:#FF681C}

/* ---------- tableta vertical: el panel se apila dentro del recorrido horizontal ---------- */
@media (orientation:portrait) and (min-width:700px){
  .svc.is-h .svc-panel{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:start; gap:clamp(36px,4.4vh,56px); padding-top:calc(var(--safe) + 12px); padding-bottom:120px}
  .svc.is-h .svc-panel .svc-media{order:1} .svc.is-h .svc-panel .svc-copy{order:2}
  .svc.is-h .svc-visual{max-height:min(34vh,520px); width:100%; margin:0}
  .svc.is-h .svc-copy h3{font-size:clamp(36px,6vw,64px)}
  .svc.is-h .svc-copy p{font-size:16px}
  .svc.is-h .svc-caps li{font-size:14px; padding:9px 0}
  .svc.is-h .svc-visual{max-height:min(30vh,480px)}
  .svc.is-h .svc-copy{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); column-gap:clamp(24px,4vw,48px); align-items:start}
  .svc.is-h .svc-copy > .svc-tag, .svc.is-h .svc-copy > h3{grid-column:1 / -1}
  .svc.is-h .svc-copy > p:not(.svc-tag){grid-column:1; grid-row:3}
  .svc.is-h .svc-copy > .svc-caps{grid-column:2; grid-row:3 / span 2; margin-top:clamp(18px,2.8vh,30px)}
  .svc.is-h .svc-copy > .svc-btn{grid-column:1; grid-row:4; justify-self:start}
  .svc.is-h .svc-copy h3{max-width:16ch}
  .svc.is-h .svc-num{font-size:clamp(120px,22vw,220px)}
}
/* pantallas horizontales bajas */
@media (orientation:landscape) and (max-height:880px){
  .svc-copy h3{font-size:clamp(30px,min(4.2vw,7.4vh),64px); margin-top:12px}
  .svc-caps{margin-top:16px}
  .svc-panel{padding-bottom:clamp(96px,14vh,130px)}
  .svc-caps li{padding:6px 0; font-size:13px}
  .svc-copy p{font-size:14px; margin-top:14px}
  .svc-btn{margin-top:18px; padding:12px 18px 12px 22px}
  .svc-num{font-size:clamp(110px,min(17vw,30vh),240px)}
}
@media (max-width:1100px){ .svc-progress .label{display:none} .svc-progress{grid-template-columns:auto 1fr auto} }
@media (orientation:landscape) and (max-height:560px){ .svc-caps li:nth-child(n+4){display:none} .svc-copy p{display:none} }

/* ---------- modo apilado: móvil y movimiento reducido ---------- */
.svc.is-stack .svc-pin{position:relative; height:auto; overflow:visible}
.svc.is-stack .svc-track{flex-direction:column; width:auto; height:auto; transform:none !important}
.svc.is-stack .svc-panel{flex:none; width:auto; height:auto; grid-template-columns:minmax(0,1fr); gap:44px; padding:clamp(72px,12vh,110px) clamp(20px,6vw,56px)}
.svc.is-stack .svc-panel .svc-media{order:1} .svc.is-stack .svc-panel .svc-copy{order:2}
.svc.is-stack .svc-visual{width:100%; max-height:none; margin:0}
.svc.is-stack .svc-visual-in{transform:none !important}
.svc.is-stack .svc-num{font-size:clamp(96px,30vw,180px)}
.svc.is-stack .svc-copy h3{font-size:clamp(34px,9vw,56px); max-width:none}
.svc.is-stack .svc-progress{display:none}
.svc.is-stack .svc-rail{height:auto !important}
.svc.is-stack .svc-panel + .svc-panel{border-top:1px solid var(--s-line-soft)}
.svc.is-stack .svc-hint{display:none}
@media (max-width:699px){
  .svc-intro{min-height:auto; padding-top:30vh; padding-bottom:12vh}
  .svc-intro h2{font-size:clamp(48px,15vw,88px)}
  .svc-intro .tags{letter-spacing:.24em; font-size:11px; flex-wrap:wrap}
  .svc-cta{padding:18px 22px 18px 26px; letter-spacing:.16em; font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  .svc *, .svc *::before, .svc *::after{animation:none !important; transition:none !important}
  .svc .mw > span, .svc .rv, .svc .svc-num .digit, .svc .vz-rise{transform:none; opacity:1}
  .svc .svc-visual{clip-path:none}
  .svc .vz-draw, .svc .vz-ring{stroke-dashoffset:0}
  .svc .vz-bar{transform:none}
  .vx-cursor, .vx-ring{display:none}
}