/* Páginas de servicio: usan giorgio.css como base y suman esto. */
.page-hero{position:relative;background:var(--wall);padding:calc(var(--top-h) + clamp(36px,6vw,84px)) 0 clamp(44px,6vw,84px);overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 500px at 85% 30%,rgba(20,166,224,.12),transparent 60%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%);
}
.page-hero .wrap{position:relative}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crumbs a{color:var(--nickel);border-bottom:1px solid var(--line-2)}
.crumbs a:hover{color:#fff;border-color:var(--cyan)}
.page-hero h1{font-size:clamp(34px,5.4vw,72px);line-height:.95;max-width:17ch}
.page-lead{color:var(--muted);font-size:clamp(16px,1.35vw,19px);max-width:56ch;margin-top:22px;text-wrap:pretty}
.page-hero .cta-row{margin-top:30px}
.page-hero .btn > span{white-space:nowrap}
.page-alt{margin-top:16px;font-size:14.5px;color:var(--nickel)}

.svc{background:var(--ink);padding-block:clamp(56px,8vw,110px)}
.svc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,6vw,80px);align-items:start}
.prose{display:grid;gap:40px;max-width:68ch}
.prose h2{font-size:clamp(22px,2.4vw,30px);line-height:1.05}
.prose p{color:var(--muted);font-size:17px;line-height:1.7;margin-top:12px}
.prose p a,.aside-card a{color:var(--text);border-bottom:1px solid rgba(20,166,224,.6);transition:color .2s,border-color .2s}
.prose p a:hover,.aside-card a:hover{color:#fff;border-color:var(--cyan)}
.prose ul{display:grid;gap:8px;margin-top:16px}
.prose li{position:relative;padding-left:22px;color:var(--text);font-size:16.5px}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--cyan)}
.aside-card{position:sticky;top:calc(var(--top-h) + 24px);background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);border-radius:14px;padding:24px;display:grid;gap:14px}
.aside-title{font-family:var(--display);font-stretch:108%;font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.aside-card dl{display:grid;gap:0}
.aside-card dl div{padding:12px 0;border-top:1px solid var(--line)}
.aside-card dt{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.aside-card dd{margin-top:2px;font-size:15px;line-height:1.55;font-variant-numeric:tabular-nums}

.page-servicio .faq h2{font-size:clamp(26px,3.2vw,42px)}
.related{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,96px)}
.rel-title{font-size:clamp(22px,2.4vw,30px);margin-bottom:24px}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rel-card{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:18px 20px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);font-family:var(--display);font-stretch:108%;font-weight:700;text-transform:uppercase;font-size:16px;letter-spacing:.02em;transition:border-color .25s,background .25s}
.rel-card svg{width:18px;height:18px;flex:none;color:var(--cyan);transition:transform .3s var(--ease-out)}
.rel-card:hover{border-color:var(--cyan);background:var(--panel-2)}
.rel-card:hover svg{transform:translateX(4px)}
.rel-home{background:transparent;color:var(--nickel);font-family:var(--body);font-stretch:100%;text-transform:none;font-weight:600;letter-spacing:0}

@media (max-width:900px){
  .svc-grid{grid-template-columns:minmax(0,1fr)}
  .aside-card{position:static}
  .page-hero .cta-row .btn{flex:1 1 100%;justify-content:center}
  .rel-grid{grid-template-columns:minmax(0,1fr)}
  .prose{gap:32px}
  .prose p{font-size:16px}
  .aside-card a,.crumbs a{position:relative}
  .aside-card a::after,.crumbs a::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
}
@media (hover:none){.rel-card:hover svg{transform:none}}