/* ================= PÁGINAS DE SERVICIO =================
   Diseño web, tiendas, sistemas, UX/UI, SEO, soporte, hosting, proyectos, casos y guías
   Se carga después de styles.css. Solo light. Animación: transform/opacity. */

/* La cabecera (.sp-top/.sp-nav) y el pie (.sp-foot) viven en styles.css: también los usan legales, casos, guías y 404. */

/* ----- Hero ----- */
.sp-hero{background:var(--paper);padding:48px 0 84px;position:relative;overflow:hidden}
.sp-hero::after{content:"";position:absolute;width:460px;height:460px;right:-140px;top:-180px;border-radius:50%;background:radial-gradient(circle,rgba(123,63,240,.28),transparent 70%);pointer-events:none}
.sp-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.sp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13.5px;color:var(--muted);margin-bottom:26px}
.sp-crumbs li{display:inline-flex;align-items:center;gap:8px}
.sp-crumbs li+li::before{content:"/";color:#a7a3bd}
.sp-crumbs a{color:var(--ink-2);font-weight:600;text-underline-offset:3px;padding:12px 6px;margin:-12px -6px}
.sp-crumbs a:hover{color:var(--purple)}
.sp-hero .eyebrow{display:block}
.sp-hero h1{font-size:clamp(34px,4.5vw,58px);font-weight:700;letter-spacing:-.03em;line-height:1.06;color:var(--ink);max-width:720px}
.sp-hero .lead{margin:22px 0 0;max-width:620px}
.sp-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.sp-actions .store{min-height:52px;justify-content:center}
.store.sp-primary{background:linear-gradient(120deg,#6a2ff0,#7d4af5);box-shadow:0 16px 32px -14px rgba(106,47,240,.55)}
.store.sp-primary svg{width:20px;height:20px;flex-shrink:0}
.store.outline.sp-on-paper{background:#fff}
.store.outline.sp-on-paper:hover{background:var(--ink)}
.sp-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:30px}
.sp-facts li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.sp-facts .sp-price-chip{background:#fff;border:1px solid var(--line);border-radius:30px;padding:7px 14px;color:var(--ink)}
.sp-hero-art{width:100%;max-width:440px;justify-self:center}

/* Entrada del hero (sin JS) */
@media(prefers-reduced-motion:no-preference){
  .sp-hero-txt>*{animation:spUp .8s var(--ease-out) both}
  .sp-hero-txt>:nth-child(2){animation-delay:.05s}
  .sp-hero-txt>:nth-child(3){animation-delay:.1s}
  .sp-hero-txt>:nth-child(4){animation-delay:.15s}
  .sp-hero-txt>:nth-child(5){animation-delay:.2s}
  .sp-hero-txt>:nth-child(6){animation-delay:.25s}
}
/* Nunca parte de opacity:0: el texto del hero siempre es visible (y cuenta para LCP) */
@keyframes spUp{from{opacity:.4;transform:translateY(14px)}}

/* ----- Títulos de sección ----- */
.sp-page .display{font-size:clamp(32px,4.2vw,52px);line-height:1.08}
.sp-page em.hl::after{right:-2px}
.sp-page .lead a,.sp-note a,.sp-page .faq-item p a{color:var(--purple);font-weight:600;text-underline-offset:3px}

/* ----- Qué incluye ----- */
.sp-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;width:100%;max-width:1020px;margin:52px auto 0}
.sp-offers.one{grid-template-columns:1fr}
.sp-offer{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px 32px;box-shadow:var(--shadow-sm);text-align:left;display:flex;flex-direction:column}
.sp-offer-head{display:flex;align-items:center;gap:16px}
.sp-offer-head .svc-ic{margin:0;flex-shrink:0}
.sp-offer h3{font-size:23px;color:var(--ink)}
.sp-offer-desc{margin-top:16px;color:var(--muted);font-size:15px;line-height:1.7}
.sp-price{margin-top:20px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;color:var(--ink)}
.sp-price small{font-size:14px;font-weight:600;color:var(--muted)}
.sp-price b{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sp-checks{list-style:none;display:grid;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.sp-checks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.45}
.sp-checks .hf-ic{margin-top:1px}
.sp-offer.wide{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:8px 40px;align-items:start}
.sp-offer.wide .sp-checks{grid-template-columns:1fr 1fr;margin-top:0;padding-top:0;border-top:0}
.sp-offer.wide .sp-offer-side{border-left:1px solid var(--line);padding-left:40px}
.sp-offer-side h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:16px}
.sp-note{max-width:720px;margin:24px auto 0;text-align:center;font-size:14px;color:var(--muted);line-height:1.6}

/* ----- Contrata sin riesgo ----- */
.sp-page .stats-row{max-width:1040px}
.sp-page .stat b{font-size:clamp(28px,3vw,38px);white-space:nowrap}

/* ----- Para quién es ----- */
.sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:52px}
.sp-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px 30px;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.sp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.sp-card h3{font-size:20px;color:var(--ink);margin-bottom:10px;line-height:1.2}
.sp-card p{color:var(--muted);font-size:15px;line-height:1.7}

/* ----- Proceso en 4 etapas ----- */
.steps.sp-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sp-steps .step{padding:32px 26px}
.sp-steps .step h3{font-size:20px}

/* ----- Proyectos ----- */
.sp-work .work-hit{display:block}
.sp-more{margin-top:34px}

/* ----- CTA final + otros servicios ----- */
.sp-cta-art{width:min(240px,60%);margin:0 auto 6px}
.sp-cta .lead{margin-bottom:0}
.sp-cta .sp-actions{justify-content:center}
.sp-xlinks-t{margin-top:64px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple)}
.sp-xlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;width:100%;max-width:860px;margin:20px auto 0;text-align:left}
.sp-xlink{display:flex;align-items:center;gap:18px;min-height:44px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 24px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.sp-xlink:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.sp-xlink .svc-ic{margin:0;flex-shrink:0;width:56px;height:56px}
.sp-xlink b{display:block;font-size:17px;font-weight:600}
.sp-xlink span.sp-x-desc{display:block;margin-top:4px;font-size:14px;color:var(--muted);line-height:1.5}
.sp-xlink .sp-x-arrow{margin-left:auto;flex-shrink:0;width:22px;height:22px;color:var(--purple);transition:transform .3s var(--ease-out)}
.sp-xlink:hover .sp-x-arrow{transform:translateX(4px)}

/* ----- Responsive ----- */
@media(max-width:1000px){
  .sp-hero-in{grid-template-columns:1fr;gap:28px}
  .sp-hero-art{max-width:320px}
  .sp-cards{grid-template-columns:1fr 1fr}
  .steps.sp-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .sp-offers{grid-template-columns:1fr}
  .sp-offer.wide{grid-template-columns:1fr}
  .sp-offer.wide .sp-offer-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px;margin-top:14px}
  .sp-xlinks{grid-template-columns:1fr}
}
@media(max-width:600px){
  .sp-hero{padding:28px 0 56px}
  .sp-hero-art{max-width:220px}
  .sp-hero h1{font-size:clamp(28px,8.2vw,38px)}
  .sp-actions .store{flex:1 1 100%}
  .sp-cards,.steps.sp-steps{grid-template-columns:1fr}
  .sp-offer{padding:26px 22px}
  .sp-offer.wide .sp-checks{grid-template-columns:1fr}
  .sp-price b{font-size:30px}
  .sp-xlinks-t{margin-top:44px}
}