/* ==========================================================================
   Artsessions · services.css
   Páginas de servicios (hub y fichas de servicio). Usa los tokens y
   componentes de main.css (cabecera, botones, temas, pie).
   ========================================================================== */

/* ---------- Cabecera de la página ---------------------------------------- */
.svc-hero{position:relative;padding-block:clamp(32px,5vw,72px) clamp(56px,7vw,104px);overflow:hidden;isolation:isolate}
.svc-hero::before,.svc-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(110px);opacity:.45;pointer-events:none}
.svc-hero::before{width:52vw;height:36vw;left:-16vw;bottom:-18vw;background:radial-gradient(closest-side,var(--replai-a),rgba(0,210,224,.35) 60%,transparent)}
.svc-hero::after{width:46vw;height:34vw;right:-16vw;top:-14vw;background:radial-gradient(closest-side,var(--omw-c),rgba(240,85,60,.4) 55%,transparent);opacity:.3}

.crumbs{margin-bottom:clamp(28px,4vw,48px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:0;padding:0;list-style:none;color:var(--faint)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li + li::before{content:"/";margin:0 10px;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current="page"]{color:var(--text)}

.svc-kicker{display:flex;align-items:center;gap:10px;color:var(--muted);margin:0 0 22px}
.svc-kicker::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--tulip)}
.svc-hero h1{font-size:clamp(2.2rem,5.2vw,4.4rem);font-stretch:118%;font-weight:800;letter-spacing:-.035em;line-height:.98;max-width:20ch}
.svc-hero .svc-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--muted);max-width:62ch;margin-top:28px}

/* ---------- Secciones ----------------------------------------------------- */
.svc-section{padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line-soft)}
.svc-band{background:var(--surface)}
.svc-h2{font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.05;margin-bottom:clamp(28px,4vw,44px)}
.svc-intro{color:var(--muted);max-width:62ch;margin:-14px 0 clamp(28px,4vw,40px)}

/* Qué hacemos: rejilla tipo «módulos» */
.svc-grid{display:flex;flex-wrap:wrap;gap:1px;margin:0;padding:0;list-style:none;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:18px;overflow:hidden}
.svc-grid li{flex:1 1 300px;min-width:0;background:var(--ink);padding:26px 24px 28px;display:flex;flex-direction:column;gap:10px}
.svc-band .svc-grid li{background:var(--surface)}
.svc-grid h3{font-size:18px;font-stretch:108%;font-weight:640;letter-spacing:0;line-height:1.25;display:flex;align-items:baseline;gap:10px}
.svc-grid h3::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--tulip);transform:translateY(-3px)}
.svc-grid p{font-size:15px;line-height:1.55;color:var(--muted)}

/* Para quién / Qué entregamos */
.svc-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.ticks{margin:0;padding:0;list-style:none}
.ticks li{position:relative;padding:14px 0 14px 26px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:16px;line-height:1.55}
.ticks li:last-child{border-bottom:1px solid var(--line-soft)}
.ticks li::before{content:"";position:absolute;left:2px;top:23px;width:9px;height:5px;border:2px solid var(--live);border-top:0;border-right:0;transform:rotate(-45deg)}

/* Cómo trabajamos */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.steps li{padding:28px 26px 6px 0;display:flex;flex-direction:column;gap:10px}
.steps li + li{padding-left:26px;border-left:1px solid var(--line-soft)}
.steps .mono{color:var(--tulip)}
.steps h3{font-size:20px;font-stretch:110%;font-weight:640;letter-spacing:-.01em;line-height:1.2}
.steps p{font-size:15px;color:var(--muted)}

/* Tecnologías */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;padding:8px 11px;border-radius:8px;background:var(--raised);color:var(--muted)}

/* Prueba: productos propios */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.proof li{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line);border-radius:20px;background:var(--surface)}
.svc-band .proof li{background:var(--ink)}
.proof h3{font-size:19px;font-stretch:110%;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.proof p{font-size:15px;line-height:1.55;color:var(--muted)}
.proof a{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text);text-decoration:none}
.proof a span{transition:transform .25s}
.proof a:hover span{transform:translateX(3px)}

/* Preguntas frecuentes */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,72px);margin:0}
.faq div{padding:24px 0;border-top:1px solid var(--line)}
.faq dt{font-family:var(--display);font-size:18px;font-stretch:108%;font-weight:640;line-height:1.3;margin-bottom:8px}
.faq dd{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}

/* Servicios (hub) y otros servicios */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;margin:0;padding:0;list-style:none}
.svc-cards--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.svc-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--surface);transition:border-color .25s,transform .25s}
.svc-card:hover{border-color:var(--faint);transform:translateY(-2px)}
.svc-card .mono{color:var(--faint)}
.svc-card h2,.svc-card h3{font-size:clamp(21px,2vw,25px);font-stretch:112%;font-weight:660;letter-spacing:-.015em;line-height:1.15}
.svc-card h2 a,.svc-card h3 a{color:inherit;text-decoration:none}
.svc-card h2 a::after,.svc-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.svc-card p{color:var(--muted);font-size:15.5px;line-height:1.55}
.svc-card__go{margin-top:auto;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--text)}

/* Por qué Artsessions (hub) */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.why li{padding:28px 26px 6px 0;display:flex;flex-direction:column;gap:10px}
.why li + li{padding-left:26px;border-left:1px solid var(--line-soft)}
.why h3{font-size:20px;font-stretch:110%;font-weight:640;letter-spacing:-.01em;line-height:1.2}
.why p{font-size:15px;color:var(--muted)}

.svc-founder{margin-top:28px;display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--muted)}
.svc-founder .mono{color:var(--faint)}
.svc-founder a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.svc-founder a:hover{border-color:var(--text)}

/* Llamada final */
.svc-cta{padding-block:clamp(56px,7vw,96px)}
.svc-cta .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.svc-cta h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.svc-cta p{margin-top:14px;color:var(--muted);max-width:52ch}
.svc-cta .actions{margin-top:0}

@media (max-width:980px){
  .steps,.why{grid-template-columns:1fr 1fr}
  .steps li:nth-child(3),.why li:nth-child(3){padding-left:0;border-left:0}
  .steps li:nth-child(n+3),.why li:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:760px){
  .svc-cols,.faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .steps,.why{grid-template-columns:minmax(0,1fr)}
  .steps li,.steps li + li,.why li,.why li + li{padding-left:0;border-left:0}
  .steps li + li,.why li + li{border-top:1px solid var(--line-soft)}
  .svc-hero::before{width:120vw;height:90vw}
}