/* ==========================================================
   VOLTARIS · servicio.css (v2) — plantilla COMÚN de las páginas de servicio
   Franjas: hero con vídeo · capacidades (lista + foto) · cine (vídeo de caso)
            · proceso (foto fija + pasos) · galería (materiales) · cierre + FAQ
   Cada servicio rellena las mismas franjas con su contenido.
   ========================================================== */
/* Depende de base.css (tokens, nav, .btn, .skip) y footer.css. Todo lo de aquí va acotado a .svc (el <main>). */
:root{--wrap:1320px;--pad:clamp(24px,4vw,56px)}
body{overflow-x:clip}
.svc{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6}
:where(.svc) :where(h1,h2,h3,p,ul,ol,figure){margin:0}
:where(.svc) :where(ul,ol){padding:0;list-style:none}
:where(.svc) :where(img,video){display:block;max-width:100%}
:where(.svc) :where(button){font:inherit;color:inherit}
.svc :focus-visible{outline:2px solid var(--azul-luz);outline-offset:3px;border-radius:2px}
.h2,.cine h2{font-family:var(--cond)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.band{position:relative;padding:clamp(88px,13vh,150px) 0}
.band--glow::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 55% at 90% 10%,rgba(0,134,255,.13),transparent 70%)}
.band--grid::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(120,170,230,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,230,.05) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(60% 60% at 30% 40%,#000,transparent 80%);mask-image:radial-gradient(60% 60% at 30% 40%,#000,transparent 80%)}
.h2{font-weight:300;font-size:clamp(34px,3.9vw,62px);line-height:1.04;letter-spacing:-.015em;max-width:18ch}
.txt{color:#c0c6cd;font-size:clamp(15px,1.15vw,17px);line-height:1.7;max-width:56ch}
.txt a{color:var(--hueso);text-decoration:underline;text-decoration-color:var(--azul);text-underline-offset:4px;text-decoration-thickness:1px}
.txt a:hover{color:var(--azul-luz)}

/* ---------- 1 · HERO CON VÍDEO ---------- */
.vh{position:relative;min-height:max(640px,100svh);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.vh__media{position:absolute;inset:0}
.vh__media video,.vh__media img{width:100%;height:100%;object-fit:cover}
.vh::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,16,1) 0%,rgba(11,13,16,.72) 26%,rgba(11,13,16,.18) 62%,rgba(11,13,16,.5) 100%),linear-gradient(90deg,rgba(11,13,16,.7) 0%,transparent 60%)}
.vh__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:calc(76px + clamp(28px,5vh,56px)) var(--pad) clamp(56px,10vh,104px)} /* reserva bajo el menú fijo (76px): el texto nunca queda tapado */
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px;color:rgba(247,245,240,.55);margin-bottom:26px}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--hueso)}
.crumbs [aria-current]{color:rgba(247,245,240,.85)}
.vh h1{font-family:var(--cond);font-weight:500;text-transform:uppercase;font-size:clamp(44px,min(7.6vw,12vh),124px);line-height:.9;letter-spacing:.005em;max-width:12ch}
.vh h1 span{display:block;color:var(--azul-luz)}
.vh__sub{margin-top:26px;max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:rgba(247,245,240,.82)}
.vh__cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:38px}
.vh__tel{color:rgba(247,245,240,.75);text-decoration:none;font-size:15px}
.vh__tel:hover{color:var(--hueso)}
.vh__pause{position:absolute;z-index:3;right:var(--pad);bottom:clamp(56px,10vh,104px);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(11,13,16,.35);backdrop-filter:blur(6px);cursor:pointer;display:none;align-items:center;justify-content:center}
.js .vh__pause{display:flex}
.vh__pause svg{width:14px;height:14px;fill:var(--hueso)}
.vh__pause .i-play,.vh__pause.is-paused .i-pause{display:none}
.vh__pause.is-paused .i-play{display:block}
@media (max-width:700px){.vh__pause{bottom:auto;top:84px}}

/* ---------- 2 · CAPACIDADES: LISTA + FOTO ---------- */
.cap2__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:end;margin-bottom:clamp(48px,8vh,88px)}
.cap2{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center}
.cap2__list{position:relative;padding-left:28px}
.cap2__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--linea)}
.cap2__rail i{position:absolute;left:0;width:1px;top:0;height:var(--h,25%);transform:translateY(var(--y,0));background:var(--azul);box-shadow:0 0 14px var(--azul-glow),0 0 2px var(--azul);transition:transform .55s cubic-bezier(.6,.1,.2,1),height .55s}
.cap2__item{padding:22px 0;border-bottom:1px solid rgba(35,40,48,.6)}
.cap2__item:last-child{border-bottom:0}
.cap2__item h3{font:inherit;margin:0}
.cap2__btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(26px,2.4vw,38px);line-height:1;color:rgba(247,245,240,.38);transition:color .35s}
.cap2__btn:hover,.cap2__item.is-on .cap2__btn{color:var(--hueso)}
.cap2__body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s ease}
.cap2__body>div{overflow:hidden}
.cap2__body p{color:var(--acero);font-size:15px;line-height:1.65;max-width:44ch;padding-top:14px}
.js .cap2__item:not(.is-on) .cap2__body{grid-template-rows:0fr}
.cap2__img{display:none}
.cap2__fig{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
.cap2__fig>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.4s ease}
.cap2__fig>.is-on{opacity:1;transform:none}
.cap2__fig>:first-child{opacity:1}
.js .cap2__fig>:first-child:not(.is-on){opacity:0}
@media (max-width:900px){
  .cap2__head{grid-template-columns:1fr;gap:20px}
  .cap2{grid-template-columns:1fr}
  .cap2__fig,.cap2__rail{display:none}
  .cap2__list{padding-left:0}
  .js .cap2__item:not(.is-on) .cap2__body{grid-template-rows:1fr}
  .cap2__btn{color:var(--hueso);cursor:default}
  .cap2__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-top:18px}
  .cap2__item{padding:30px 0}
}

/* ---------- 3 · CINE: VÍDEO DE CASO A SANGRE ---------- */
.cine{position:relative;height:min(88vh,56.25vw);min-height:520px;overflow:hidden;background:#000}
.cine video,.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cine::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,16,.95) 0%,rgba(11,13,16,.35) 40%,transparent 70%),linear-gradient(180deg,rgba(11,13,16,1) 0%,transparent 18%)}
.cine__in{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) clamp(40px,8vh,80px)}
.cine h2{font-weight:300;font-size:clamp(32px,3.6vw,58px);line-height:1.04;max-width:16ch}
.cine p{margin-top:16px;color:rgba(247,245,240,.75);font-size:clamp(15px,1.15vw,17px);max-width:44ch}

/* ---------- 4 · PROCESO: FOTO FIJA + PASOS ---------- */
/* Foto fija centrada en pantalla; cada paso mide lo mismo que la foto, así el texto activo
   queda siempre a la altura del centro de la foto. El primero y el último encajan arriba y abajo. */
.steps{--sh:min(64vh,580px);display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:start;margin-top:clamp(40px,7vh,72px)}
.steps__fig{position:sticky;top:calc(50vh - var(--sh) / 2);height:var(--sh);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
.steps__fig>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity .6s ease,transform 1.2s ease}
.steps__fig>:first-child,.steps__fig>.is-on{opacity:1;transform:none}
.js .steps__fig>:first-child:not(.is-on){opacity:0;transform:scale(1.035)}
.steps__list{position:relative;padding-left:36px}
.steps__list .thread{position:absolute;left:0;top:calc(var(--sh) / 2);bottom:calc(var(--sh) / 2);width:1px;background:var(--linea)}
.steps__list .thread i{position:absolute;inset:0;background:var(--azul);box-shadow:0 0 14px var(--azul-glow);transform-origin:0 0;transform:scaleY(var(--p,1))}
.step{height:var(--sh);display:flex;flex-direction:column;justify-content:center;transition:opacity .45s ease,transform .45s ease}
.js .step:not(.is-on){opacity:.28;transform:translateX(-6px)}
.step h3{font-family:var(--cond);font-weight:500;text-transform:uppercase;font-size:clamp(30px,2.8vw,44px);line-height:1;letter-spacing:.02em}
.step p{color:#c0c6cd;font-size:clamp(15.5px,1.2vw,18px);line-height:1.7;max-width:40ch;margin-top:16px}
.step__img{display:none}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .steps__fig{display:none}
  .step{height:auto;padding:0 0 48px}
  .js .step:not(.is-on){opacity:1;transform:none}
  .steps__list .thread{top:0;bottom:48px}
  .step__img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:10px;margin-bottom:22px}
}

/* ---------- 5 · GALERÍA (materiales) ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);margin-top:clamp(40px,7vh,72px)}
.gal figure{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--panel)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.gal figure:hover img{transform:scale(1.05)}
.gal figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,16,.88) 0%,rgba(11,13,16,.2) 45%,transparent 70%)}
.gal figcaption{position:absolute;z-index:1;left:22px;right:22px;bottom:20px}
.gal h3{font-family:var(--cond);font-weight:500;text-transform:uppercase;font-size:clamp(24px,2vw,32px);line-height:1;letter-spacing:.03em}
.gal figcaption p{color:rgba(247,245,240,.72);font-size:14px;margin-top:8px}
.gal__note{margin-top:36px}
@media (max-width:860px){.gal{grid-template-columns:1fr}}

/* ---------- 6 · CIERRE + FAQ ---------- */
.end{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:start}
.end .txt{margin-top:26px}
.faq__lbl{font-size:13px;color:var(--acero);margin-bottom:6px}
.faq__item{border-bottom:1px solid var(--linea)}
.faq__item h3{font:inherit;margin:0}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left;background:none;border:0;cursor:pointer;padding:22px 0;font-size:clamp(16px,1.3vw,19px);line-height:1.35;color:var(--hueso)}
.faq__q:hover{color:var(--azul-luz)}
.faq__q svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .3s}
.faq__a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s ease}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--acero);font-size:15px;line-height:1.65;padding-bottom:24px;max-width:60ch}
.js .faq__item:not(.is-open) .faq__a{grid-template-rows:0fr}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
@media (max-width:860px){.end{grid-template-columns:1fr}}

/* ---------- Entrada al aparecer (visible sin JS) ---------- */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease;transition-delay:var(--d,0s)}
.js .rv.is-in{opacity:1;transform:none}

/* ---------- Añadidos v2.1 (compatibles con las páginas anteriores) ---------- */
/* Envoltorio del hero: invisible salvo en la variante "scrub" */
.vh__stick{display:contents}
.vh__prog,.vh__hint{display:none}

/* Hero con vídeo controlado por el scroll: la clase .is-scrub la pone servicio.js (solo escritorio) */
.vh--scrub.is-scrub{display:block;overflow:visible;min-height:0;height:270vh;background:#0b0d10}
.vh--scrub.is-scrub::after{display:none}
.vh--scrub.is-scrub .vh__stick{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.vh--scrub.is-scrub .vh__stick::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,13,16,1) 0%,rgba(11,13,16,.72) 26%,rgba(11,13,16,.18) 62%,rgba(11,13,16,.5) 100%),linear-gradient(90deg,rgba(11,13,16,.7) 0%,transparent 60%)}
.vh--scrub.is-scrub .vh__pause{display:none}
.vh--scrub.is-scrub .vh__prog{display:block;position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.vh--scrub.is-scrub .vh__prog i{display:block;height:100%;background:var(--azul);box-shadow:0 0 14px var(--azul-glow),0 0 2px var(--azul);transform-origin:0 0;transform:scaleX(var(--sp,0))}
.vh--scrub.is-scrub .vh__hint{display:flex;align-items:center;gap:12px;position:absolute;z-index:3;right:var(--pad);bottom:clamp(56px,10vh,104px);font-size:14px;color:rgba(247,245,240,.8);opacity:calc(1 - var(--sp,0)*14);pointer-events:none}
.vh--scrub.is-scrub .vh__hint::after{content:"";width:1px;height:46px;background:linear-gradient(var(--azul-luz),transparent);animation:vhhint 1.8s ease-in-out infinite}
@keyframes vhhint{0%{transform:scaleY(.2);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(.2);transform-origin:0 100%}}
@media (prefers-reduced-motion:reduce){.vh__hint::after{animation:none!important}}

/* Hueco de foto (marcado [[PENDIENTE]] en el HTML): panel neutro hasta que llegue la foto */
.cap2__ph,.steps__ph{display:flex;align-items:flex-end;padding:clamp(20px,3vw,40px);background:radial-gradient(70% 70% at 80% 10%,rgba(0,134,255,.16),transparent 70%),linear-gradient(rgba(120,170,230,.05) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(120,170,230,.05) 1px,transparent 1px) 0 0/48px 48px,var(--panel)}
.cap2__ph b,.steps__ph b{font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(40px,5vw,84px);line-height:.95;color:rgba(247,245,240,.14)}
/* Fotos con fondo transparente (render sobre panel) */
.is-contain{object-fit:contain!important;background:var(--panel)}
.step__img.is-contain{padding:12px}