/* =========================================================
   Páginas de servicio (plantilla nueva)
   Encabezado con foto · cinta en movimiento · situaciones · alcance con foto lateral
   ========================================================= */
body.svc2{background:var(--ice)}
.svc2 .px{display:inline-flex;align-items:center;gap:.09em;flex:none}
.svc2 .px i{display:block;width:.24em;height:.24em;border-radius:.05em;background:var(--dot)}
.svc2 .px i:nth-child(2){width:.17em;height:.17em;opacity:.55}.svc2 .px i:nth-child(3){width:.11em;height:.11em;opacity:.3}

/* Encabezado: foto en grafito con zoom lento; alto según el contenido */
.svh{position:relative;color:#fff;overflow:hidden;background:#000;display:flex;align-items:center}
.svh > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) sepia(.12) contrast(1.08) brightness(.9);animation:kbCalm 16s ease-out forwards}
.svh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,20,.88),rgba(11,15,20,.4) 60%,rgba(11,15,20,.15)),linear-gradient(180deg,rgba(11,15,20,.55),transparent 35%)}
.svh .wrap{position:relative;z-index:1;padding:170px 0 96px}
.crumb2{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumb2 a:hover{color:#fff}
.sv-title{display:flex;align-items:center;gap:.3em;font-weight:300;font-size:clamp(2.4rem,5.4vw,4.8rem);letter-spacing:-.035em;line-height:1}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13.5px;color:#D2D6DC}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust span::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--dot)}
.svh .wrap > *{opacity:0;transform:translateY(16px);animation:svUp .8s var(--ease-out,ease) forwards}
.svh .wrap > :nth-child(2){animation-delay:.12s}.svh .wrap > :nth-child(3){animation-delay:.24s}
@keyframes svUp{to{opacity:1;transform:none}}

/* Cinta en movimiento */
.tick{background:var(--ink);color:#fff;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tick-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.tick-track span{display:inline-flex;align-items:center;gap:22px;padding:22px 22px 22px 0;font-weight:300;font-size:clamp(1.15rem,1.8vw,1.6rem);letter-spacing:-.01em;white-space:nowrap}
.tick-track span::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--dot)}
@media (prefers-reduced-motion:reduce){.tick-track{animation-duration:90s}}

.sv-sec{padding:72px 0 0}.sv-sec.last{padding-bottom:90px}
.sv-sec h2{font-weight:300;font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.02em;margin-bottom:26px}

/* Íconos de línea (se dibujan al aparecer) */
.li{width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--ice);color:var(--ink);transition:background .3s ease,color .3s ease,transform .35s var(--ease-out,ease)}
.li svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.li svg *{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease-out,ease)}
.cascade.in .li svg *{stroke-dashoffset:0}
@media (hover:hover){.card-x:hover .li{background:var(--dot);color:#fff;transform:rotate(-6deg) scale(1.05)}}

/* Situaciones que resolvemos */
.sit{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.si{background:#fff;border:1px solid #E9E5DF;border-radius:14px;padding:24px;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;transition:transform .35s var(--ease-out,ease),box-shadow .35s var(--ease-out,ease)}
.si small{display:block;font-size:12px;letter-spacing:.08em;color:var(--dot);text-transform:uppercase;margin-bottom:6px}
.si h3{font-weight:400;font-size:1.12rem;line-height:1.3;margin-bottom:8px}
.si p{font-size:14px;line-height:1.55;color:var(--text-2)}

/* Alcance: foto lateral fija que cambia + tarjetas */
.alc{display:grid;grid-template-columns:.9fr 1.4fr;gap:20px;align-items:start}
.side{position:sticky;top:100px;height:calc(100vh - 140px);max-height:640px;border-radius:16px;overflow:hidden;background:#000}
.side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.12) contrast(1.08) brightness(.9);opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 6s ease-out}
.side img.on{opacity:1;transform:none}
.side::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(11,15,20,.6))}
.ig{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ic2{position:relative;background:#fff;border:1px solid #E9E5DF;border-radius:14px;padding:22px 22px 24px;overflow:hidden;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;transition:transform .35s var(--ease-out,ease),box-shadow .35s var(--ease-out,ease)}
.ic2::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--dot);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out,ease)}
.ic2 h3{font-weight:400;font-size:1.12rem;margin:2px 0 6px}
.ic2 p{font-size:14px;line-height:1.55;color:var(--text-2)}
@media (hover:hover){.si:hover,.ic2:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,15,20,.08)}.ic2:hover::before{transform:scaleX(1)}}
/* Pantallas táctiles: la tarjeta que cruza el centro de la pantalla se pinta como al pasar el mouse (clase .act desde main.js) */
@media (hover:none){
  .card-x.act .li{background:var(--dot);color:#fff;transform:rotate(-6deg) scale(1.05)}
  .si.act,.ic2.act{box-shadow:0 18px 40px rgba(11,15,20,.08)}
  .ic2.act::before{transform:scaleX(1)}
}

/* Cascada al bajar */
.cascade > *{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out,ease),transform .6s var(--ease-out,ease),box-shadow .35s var(--ease-out,ease)}
.cascade.in > *{opacity:1;transform:none}
.cascade.in > *:nth-child(2){transition-delay:60ms}.cascade.in > *:nth-child(3){transition-delay:120ms}.cascade.in > *:nth-child(4){transition-delay:180ms}
.cascade.in > *:nth-child(5){transition-delay:240ms}.cascade.in > *:nth-child(6){transition-delay:300ms}.cascade.in > *:nth-child(7){transition-delay:360ms}
.cascade.in > *:nth-child(8){transition-delay:420ms}.cascade.in > *:nth-child(9){transition-delay:480ms}
.cascade.done > *{transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){.cascade > *,.svh .wrap > *{transform:none!important}}

@media (max-width:1000px){.alc{grid-template-columns:1fr}.side{position:relative;top:0;height:300px}}
@media (max-width:900px){.sit,.ig{grid-template-columns:1fr}.svh .wrap{padding:140px 0 80px}}

/* El encabezado lleva también la clase .phero (para que la barra superior sea transparente sobre la foto): se anulan sus medidas antiguas */
.svh.phero{height:auto;min-height:0}
.svh.phero .wrap{height:auto;align-items:flex-start;justify-content:flex-start}