/* Servicios index — premium Flama-style */
.si-hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;padding:180px 0 90px;overflow:hidden}
.si-hero-bg{position:absolute;inset:0}
.si-hero-bg img{width:100%;height:115%;object-fit:cover;filter:saturate(.7) contrast(1.05);will-change:transform}
.si-hero-bg:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111113 8%,#111113cc 48%,#11111366),linear-gradient(90deg,#111113d0,transparent 55%)}
.si-hero .wrap{position:relative;z-index:2}
.si-hero .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--violet-hi);margin:0 0 22px;display:flex;align-items:center;gap:14px}
.si-hero .eyebrow:before{content:'';width:28px;height:1px;background:var(--violet-hi)}
.si-hero h1{font-size:clamp(28px,6.25vw,90px);line-height:.92;letter-spacing:-.06em;font-weight:750;text-transform:uppercase;margin:0 0 28px;max-width:min(1320px,96vw);color:var(--paper,#f4f1ea)}
.si-hero h1 .hl{color:var(--violet-hi,#9C7CC9);position:relative;display:inline-block}
.si-hero-sub{font-size:18px;line-height:1.55;color:#d5d0ca;max-width:540px;margin:0 0 34px}
.si-hero .cta-row{display:flex;flex-wrap:wrap;gap:14px}

.si-intro{padding:90px 0 40px}
.si-intro-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:8vw;align-items:start}
.si-intro .tag{margin-bottom:18px}
.si-intro h2{font-size:clamp(36px,4.6vw,68px);line-height:.95;letter-spacing:-.05em;margin:0 0 22px;text-transform:uppercase}
.si-intro p{color:var(--smoke);font-size:17px;line-height:1.65;margin:0 0 16px;max-width:58ch}

.si-list{list-style:none;margin:0;padding:40px 0 20px}
.si-row{border-top:1px solid var(--line);position:relative}
.si-row:last-child{border-bottom:1px solid var(--line)}
.si-row>a{display:grid;grid-template-columns:88px 1.15fr .95fr;gap:36px;align-items:center;padding:42px 0;color:var(--paper);transition:padding .45s var(--ease),color .3s;position:relative}
.si-row>a:hover{padding-left:22px;color:var(--violet-hi)}
.si-num{font-size:12px;letter-spacing:.18em;color:var(--smoke);align-self:start;margin-top:10px}
.si-copy .si-name{font-size:clamp(30px,4.2vw,58px);line-height:.95;letter-spacing:-.055em;font-weight:700;margin:0 0 14px;transition:transform .45s var(--ease);text-transform:none}
.si-row>a:hover .si-name{transform:translateX(10px)}
.si-copy .si-desc{font-size:15px;line-height:1.6;color:var(--smoke);margin:0;max-width:540px}
.si-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/10;background:#1a1a1d}
.si-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);filter:saturate(.85)}
.si-row>a:hover .si-media img{transform:scale(1.05);filter:none}
.si-arrow{position:absolute;right:18px;bottom:18px;width:52px;height:52px;border-radius:50%;border:1px solid rgba(244,241,234,.35);display:grid;place-items:center;font-size:22px;background:rgba(17,17,19,.55);backdrop-filter:blur(8px);transform:rotate(-40deg);transition:.45s var(--ease);color:var(--paper)}
.si-row>a:hover .si-arrow{background:var(--violet-hi);color:var(--ink);border-color:var(--violet-hi);transform:rotate(0)}

.si-cta{padding:100px 0 120px}
.si-cta-box{border:1px solid var(--line);border-radius:28px;padding:64px 48px;background:linear-gradient(135deg,#1a1224 0%,#111113 55%,#17171a 100%);display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
.si-cta-box h2{font-size:clamp(34px,4.5vw,62px);line-height:.95;letter-spacing:-.05em;margin:0 0 16px;text-transform:uppercase}
.si-cta-box p{color:var(--smoke);font-size:16px;line-height:1.55;margin:0;max-width:48ch}
.si-cta-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}

@media(max-width:980px){
  .si-intro-grid{grid-template-columns:1fr;gap:28px}
  .si-row>a{grid-template-columns:56px 1fr;gap:18px}
  .si-media{grid-column:1/-1;order:-1;aspect-ratio:16/9;max-height:280px}
  .si-cta-box{grid-template-columns:1fr;padding:40px 28px}
}
@media(max-width:560px){
  .si-hero{padding:140px 0 70px;min-height:78svh}
  .si-hero h1{font-size:clamp(26px,8.8vw,42px)}.si-hero h1 .svc-h1-l1{white-space:normal}
  .si-row>a{padding:28px 0}
  .si-copy .si-name{font-size:28px}
  .si-desc{display:none}
  .si-arrow{width:42px;height:42px;font-size:18px}
}

.si-hero h1 .hl:after{content:"";display:block;height:.08em;background:var(--violet-hi,#9C7CC9);margin-top:.13em;width:100%;transform-origin:left}
@media(min-width:901px){
  .si-hero h1 .svc-h1-l1{white-space:nowrap;display:inline-block}
}