/* Servicios con las cajas del monograma (sistema 2026). Colores de tokens.css (--ot-*), con respaldo. */
.sc{--sc-azul:var(--ot-azul,#0E2A5C);--sc-profundo:var(--ot-azul-profundo,#081936);--sc-luz:var(--ot-azul-luz,#1C4384);
  --sc-celeste:var(--ot-celeste,#53BDEB);--sc-papel:var(--ot-papel,#F7F5F0);
  position:relative;width:100%;background:var(--sc-profundo);color:var(--sc-papel)}
.sc-pista{position:relative;height:calc(100svh + var(--sc-pasos,6) * 55svh)}
.sc-fijo{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:radial-gradient(ellipse 60% 75% at 72% 50%,var(--sc-luz) 0%,var(--sc-azul) 42%,var(--sc-profundo) 100%)}
.sc-texto{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,36px);
  padding:calc(var(--header-height,72px) + 24px) 0 48px var(--ot-margen,clamp(20px,5vw,64px));min-width:0;z-index:1}
.sc-texto h2{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1;font-size:clamp(40px,5.2vw,80px)}
.sc-bajada{margin:0;opacity:.72;font-size:clamp(17px,1.4vw,21px);max-width:28ch}
.sc-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(247,245,240,.18)}
.sc-lista li{border-bottom:1px solid rgba(247,245,240,.18)}
.sc-lista a{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:2px 12px;padding:clamp(10px,1.6vh,16px) 0;color:inherit;
  text-decoration:none;opacity:.38;transition:opacity .35s ease}
.sc-lista li.activo a,.sc-lista a:hover,.sc-lista a:focus-visible{opacity:1;outline:none}
.sc-num{grid-row:span 2;font-weight:700;font-size:clamp(14px,1vw,16px);letter-spacing:.06em;padding-top:.35em;font-variant-numeric:tabular-nums;transition:color .35s ease}
.sc-lista li.activo .sc-num{color:var(--sc-celeste)}
.sc-tit{font-weight:700;font-size:clamp(22px,2vw,32px);letter-spacing:-.015em;line-height:1.1}
.sc-lin{font-size:clamp(14px,1.05vw,17px);opacity:.8;line-height:1.35}
.sc-escena{position:relative;min-width:0}
.sc-escena svg{position:absolute;inset:0;width:100%;height:100%}
.sc-grano{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.28;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

@media (max-width:767px){
  .sc-fijo{grid-template-columns:minmax(0,1fr);grid-template-rows:calc(42svh + var(--header-height,64px)) minmax(0,1fr);
    background:radial-gradient(ellipse 90% 45% at 50% 22%,var(--sc-luz) 0%,var(--sc-azul) 45%,var(--sc-profundo) 100%)}
  .sc-escena{grid-row:1;margin-top:calc(var(--header-height,64px) + 4px)}
  .sc-texto{grid-row:2;justify-content:flex-start;padding:4px var(--ot-margen,20px) 28px;gap:14px}
  .sc-texto h2{font-size:clamp(34px,10vw,44px)}
  .sc-bajada{display:none}
  .sc-lista a{padding:9px 0;grid-template-columns:2.6em minmax(0,1fr)}
  .sc-tit{font-size:21px}
  .sc-lin{font-size:14px}
  .sc-lista li:not(.activo) .sc-lin{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sc-pista{height:auto}
  .sc-fijo{position:relative;height:auto;min-height:100svh}
  .sc-lista a{opacity:1}
}

/* Pantallas bajas (390x664, Safari con la barra): con seis servicios la lista no entra. Escena más baja y lista más compacta. */
@media (max-width:767px) and (max-height:760px){
  .sc-fijo{grid-template-rows:calc(30svh + var(--header-height,64px)) minmax(0,1fr)}
  .sc-texto{gap:8px;padding-bottom:10px}
  .sc-texto h2{font-size:clamp(28px,8vw,34px)}
  .sc-lista a{padding:5px 0;gap:0 10px}
  .sc-tit{font-size:18px;line-height:1.05}
  .sc-lin{font-size:13px;line-height:1.25}
}