/* Páginas de servicio (/servicios/ y /servicios/<id>/). Se apoyan en casos.css (.cs, --accent,
   migas, encabezados y tarjetas) y en la paleta de styles.css. Archivo externo a propósito:
   un <style> en línea añadiría un hash a la CSP. */
.sv-hero{position:relative;padding:116px 0 20px}
.sv-hero:before{content:"";position:absolute;inset:0 0 auto;height:720px;pointer-events:none;
  background:radial-gradient(55% 60% at 88% 0%,var(--acc-mid),transparent 72%),
             radial-gradient(38% 46% at 0% 28%,color-mix(in srgb,var(--accent) 7%,#fff),transparent 72%)}
.sv-hero>.wrap{position:relative}
.sv-h1{font-size:clamp(38px,5.2vw,80px);line-height:1;letter-spacing:-.04em;font-weight:860;margin:20px 0 0;max-width:17ch;text-wrap:balance}
.sv-lead{font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:#52525b;max-width:660px;margin:24px 0 0}
.sv-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.sv-sec{padding:90px 0 0}
.sv-tint{margin-top:90px;padding:80px 0;background:linear-gradient(180deg,var(--acc-soft),#fff)}
.sv-tint+.sv-sec{padding-top:10px}
.sv-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.sv-split .cs-head{margin:0;position:sticky;top:110px}

.sv-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv-list li{position:relative;padding:20px 22px 20px 54px;border:1px solid var(--acc-mid);border-radius:18px;background:#fff;font-size:18px;line-height:1.5}
.sv-list li:before{content:"";position:absolute;left:22px;top:27px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}

.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sv-item{background:#fff;border:1px solid var(--acc-mid);border-top:4px solid var(--accent);border-radius:20px;padding:26px}
.sv-item h3{font-size:21px;letter-spacing:-.02em;line-height:1.2;margin:0}
.sv-item p{margin:12px 0 0;color:#52525b;line-height:1.6}

.sv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.sv-steps li{border:1px solid #e6e6ec;border-radius:20px;padding:22px;background:#fff;display:flex;flex-direction:column}
.sv-n{font:var(--mono-font);font-weight:700;letter-spacing:.08em;color:var(--acc-ink)}
.sv-steps h3{font-size:20px;letter-spacing:-.02em;margin:10px 0 14px}
.sv-steps dl{margin:0;display:grid;gap:14px}
.sv-steps dt{font:var(--mono-font);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6c6c74}
.sv-steps dd{margin:4px 0 0;line-height:1.55;font-size:15px}
.sv-steps dl>div+div{padding-top:14px;border-top:1px dashed var(--acc-mid)}

.sv-aviso{border:1px solid var(--acc-mid);border-left:6px solid var(--accent);border-radius:22px;padding:clamp(24px,4vw,40px);background:var(--acc-soft)}
.sv-aviso h2{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1;margin:0}
.sv-aviso p{margin:14px 0 0;font-size:18px;line-height:1.6;max-width:62ch}
.sv-aviso a{display:inline-block;margin-top:16px;font-weight:700;color:var(--acc-ink);text-decoration:underline;text-underline-offset:5px}

.sv .cs-more{padding-top:90px}
.sv-nota{font-size:18px;line-height:1.6;color:#52525b;max-width:62ch;margin:0;padding:24px 26px;border:1px dashed var(--acc-mid);border-radius:18px}

.sv-faq{display:grid;gap:12px}
.sv-faq details{border:1px solid #e6e6ec;border-radius:18px;background:#fff}
.sv-faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;position:relative}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary:after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font:700 24px var(--mono);color:var(--acc-ink)}
.sv-faq details[open] summary:after{content:"−"}
.sv-faq summary h3{display:inline;font-size:18px;line-height:1.4;letter-spacing:-.01em;margin:0}
.sv-faq details p{margin:0;padding:0 22px 22px;line-height:1.65;color:#3f3f46}

.sv-otros{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sv-otros a{display:block;height:100%;padding:22px;border-radius:18px;background:#fff;border:1px solid color-mix(in srgb,var(--tone) 30%,#fff);border-left:4px solid var(--tone);color:#0a0a0f;transition:transform .2s,box-shadow .2s}
.sv-otros a:hover{transform:translateY(-2px);box-shadow:0 12px 30px color-mix(in srgb,var(--tone) 18%,transparent)}
.sv-otros b{display:block;font-size:19px;letter-spacing:-.015em}
.sv-otros span{display:block;margin-top:8px;color:#52525b;line-height:1.5;font-size:15px}

.sv-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sv-index li:first-child{grid-column:1/-1}
.sv-index a{display:flex;flex-direction:column;height:100%;padding:clamp(24px,3vw,36px);border-radius:24px;color:#0a0a0f;
  background:linear-gradient(140deg,color-mix(in srgb,var(--tone) 12%,#fff),#fff 70%);border:1px solid color-mix(in srgb,var(--tone) 32%,#fff);transition:transform .2s,box-shadow .2s}
.sv-index a:hover{transform:translateY(-3px);box-shadow:0 16px 40px color-mix(in srgb,var(--tone) 20%,transparent)}
.sv-index .sv-n{color:color-mix(in srgb,var(--tone) 65%,#111)}
.sv-index h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.035em;line-height:1.05;margin:12px 0 0}
.sv-index p{margin:12px 0 0;color:#52525b;line-height:1.6;font-size:17px;max-width:58ch}
.sv-go{margin-top:auto;padding-top:22px;font-weight:700;color:color-mix(in srgb,var(--tone) 65%,#111)}

/* Cierre oscuro: el texto blanco necesita fondo oscuro con cualquier color de servicio (el lima no da contraste). */
.sv-cta{margin:110px 0 0;border-radius:36px;padding:clamp(34px,6vw,80px);color:#fff;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:30px;align-items:end;
  background:linear-gradient(135deg,#0b0b14,color-mix(in srgb,var(--accent,#5a5cff) 55%,#0b0b14))}
.sv-cta h2{font-size:clamp(32px,4vw,58px);letter-spacing:-.04em;line-height:1;margin:0;max-width:16ch;font-weight:870}
.sv-cta p{margin:16px 0 0;color:rgba(255,255,255,.86);font-size:17px;line-height:1.55;max-width:50ch}
.sv-cta .btn.primary{background:#fff;color:#0c0c0f}

@media(max-width:1100px){
  .sv-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-steps li:last-child{grid-column:1/-1}
  .sv-otros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:799.98px){
  .sv-split{grid-template-columns:1fr;gap:8px}
  .sv-split .cs-head{position:static;margin-bottom:24px}
  .sv-cta{grid-template-columns:1fr}
}
@media(max-width:720px){
  .sv-hero{padding-top:96px}
  .sv-sec{padding-top:64px}
  .sv-tint{margin-top:64px;padding:56px 0}
  .sv .cs-more{padding-top:64px}
  .sv-grid,.sv-steps,.sv-otros,.sv-index{grid-template-columns:1fr}
  .sv-steps li:last-child{grid-column:auto}
  .sv-list li{font-size:16px;padding:16px 18px 16px 46px}
  .sv-list li:before{left:18px;top:22px}
  .sv-cta{margin-top:72px;border-radius:26px}
  .sv-actions .btn,.sv-cta .btn{white-space:normal;text-align:center;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.sv-otros a,.sv-index a{transition:none}.sv-otros a:hover,.sv-index a:hover{transform:none}}

/* Tarjetas de proyectos: con 4 o 2 casos, 2 columnas (evita una tarjeta huérfana en la fila de 3). */
@media(min-width:800px){.sv .cs-more .tw-cards:is(:has(>:nth-child(4):last-child),:has(>:nth-child(2):last-child)){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tras la franja de color de «Otros servicios», el cierre no necesita todo su margen. */
.sv-tint+.wrap>.sv-cta{margin-top:56px}
@media(min-width:721px){.sv-grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Migas largas («Páginas web y tiendas online») en celular: pasan a otra línea en vez de partirse en columnas. */
.sv .cs-crumbs{flex-wrap:wrap;row-gap:0}
.sv .cs-crumbs li{white-space:nowrap}
@media(max-width:380px){.sv .cs-crumbs li[aria-current]{white-space:normal}}
@media(max-width:720px){.sv .cs-crumbs{margin-bottom:18px}}