/* Widols GPS · Soporte and Eliminar cuenta (the Support URL and the delete-account URL of the stores).
   On top of widols.css + legal.css (tokens). Navy hero with the contact cards, topic tiles, the FAQ by topic,
   the "still stuck" block and, on the deletion page, the request form. */
.sp-hero{position:relative;background:var(--navy) center/cover no-repeat;color:#fff;padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,88px);isolation:isolate}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(11,26,46,.96) 0%,rgba(11,26,46,.86) 48%,rgba(11,26,46,.45) 100%)}
.sp-hero-in{max-width:720px}
.sp-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2);margin-bottom:14px}
.wg .sp-hero h1{color:#fff;font-size:clamp(32px,4.4vw,54px);line-height:1.08;font-weight:300}
.wg .sp-hero h1 b{font-weight:700;color:var(--green-2)}
.sp-lead{margin-top:16px!important;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:#C9D4E3;max-width:600px}
.sp-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.sp-card{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 22px 20px 82px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff!important;text-decoration:none;transition:background .2s,transform .2s}
.sp-card:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.sp-card-ico{position:absolute;left:20px;top:20px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--grad)}
.sp-card-ico svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-card-mail .sp-card-ico{background:var(--blue)}
.sp-card-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9FB0C6}
.sp-card-v{font-size:19px;font-weight:700;word-break:break-all}
.sp-card-d{font-size:13.5px;line-height:1.45;color:#C9D4E3}
.sp-card-go{position:absolute;right:20px;top:20px;font-size:20px;color:var(--green-2)}
.sp-copy{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:#fff;font:600 13px var(--font);cursor:pointer}
.sp-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.sp-copy.done{border-color:var(--green-2);color:var(--green-2)}

.sp-topics{padding:clamp(48px,6vw,80px) 0 clamp(24px,3vw,40px);background:#fff}
.wg .sp-h2{font-size:clamp(26px,3vw,38px);line-height:1.15;font-weight:300;text-align:center}
.wg .sp-h2 b{font-weight:700;color:var(--green)}
.sp-topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.sp-topic{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:20px;background:var(--mist);border:1px solid var(--line);text-decoration:none;color:var(--text)!important;transition:transform .2s,box-shadow .2s,border-color .2s}
.sp-topic:hover{transform:translateY(-3px);border-color:var(--green-line);box-shadow:0 18px 40px -26px rgba(11,26,46,.35)}
.sp-topic-n{font-size:13px;font-weight:700;color:var(--green)}
.sp-topic b{font-size:17px;color:var(--title)}
.sp-topic span:last-child{font-size:14px;line-height:1.5;color:var(--grey)}

.sp-faq{padding:clamp(40px,5vw,72px) 0;background:#fff;scroll-margin-top:72px}
.sp-faq-alt{background:var(--mist)}
.sp-faq .wg-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,72px);align-items:start}
.sp-num{display:block;font-size:13px;font-weight:700;color:var(--green);margin-bottom:8px}
.wg .sp-faq-head h2{font-size:clamp(26px,2.8vw,36px);line-height:1.15;font-weight:300}
.wg .sp-faq-head h2 b{font-weight:700}
.sp-faq-head p{margin-top:12px!important;color:var(--grey);line-height:1.65}
.sp-faq-list{display:flex;flex-direction:column;gap:10px}
.sp-faq-list details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 20px;transition:border-color .2s,box-shadow .2s}
.sp-faq-alt .sp-faq-list details{background:#fff}
.sp-faq-list details[open]{border-color:var(--green-line);box-shadow:0 14px 34px -26px rgba(11,26,46,.4)}
.sp-faq-list details.is-target{animation:spFlash 1.6s ease}
@keyframes spFlash{0%,40%{box-shadow:0 0 0 4px rgba(137,197,64,.45)}100%{box-shadow:none}}
.sp-faq-list summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;position:relative;font-weight:600;color:var(--title);font-size:16px}
.sp-faq-list summary::-webkit-details-marker{display:none}
.sp-faq-list summary::after{content:"+";position:absolute;right:0;top:14px;font-size:24px;font-weight:300;color:var(--green)}
.sp-faq-list details[open] summary::after{content:"–"}
.sp-faq-list details p{padding:0 0 18px;color:var(--text);line-height:1.68;font-size:15px}

.sp-help{padding:clamp(48px,6vw,88px) 0;background:var(--navy);color:#fff}
.sp-help-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
.wg .sp-help h2{color:#fff;font-size:clamp(28px,3.2vw,42px);line-height:1.12;font-weight:300}
.wg .sp-help h2 b{font-weight:700;color:var(--green-2)}
.sp-help-copy p{margin-top:14px!important;color:#C9D4E3;line-height:1.65}
.sp-help-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.sp-btn-dark{background:transparent!important;border-color:rgba(255,255,255,.3)!important;box-shadow:none!important}
.sp-tips{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:26px 28px}
.wg .sp-tips h3{color:#fff;font-size:17px;margin:0 0 12px}
.sp-tips ul+h3{margin-top:24px!important}
.sp-tips ul{display:flex;flex-direction:column;gap:10px}
.sp-tips li{position:relative;padding-left:26px;color:#DCE4EF;font-size:15px;line-height:1.5}
.sp-tips li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--green-2)}
.sp-tips-note{margin-top:18px!important;font-size:13.5px;color:#9FB0C6}
.sp-final{padding:clamp(48px,6vw,80px) 0;text-align:center;background:#fff}
.wg .sp-final h2{font-size:clamp(26px,3vw,38px);font-weight:300}
.wg .sp-final h2 b{font-weight:700;color:var(--green)}
.sp-final .wg-btn{margin-top:22px}
.sp-final-note{margin-top:14px!important}
.sp-final-note a{color:var(--green-ink);font-weight:600}

/* ---- account deletion: the request form and the steps ---- */
.del-form-sec{background:var(--mist);color:var(--text)}
.del-form{max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;padding:clamp(24px,4vw,40px);box-shadow:0 24px 60px -36px rgba(11,26,46,.35)}
.del-form .sp-eyebrow{color:var(--green-ink)}
.wg .del-form h2{font-size:clamp(24px,2.6vw,32px);font-weight:300;color:var(--title)}
.wg .del-form h2 b{font-weight:700;color:var(--green)}
.del-form>p{margin-top:10px!important;color:var(--grey);line-height:1.6}
.del-fields{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.del-fields label{font-size:13px;font-weight:600;color:var(--title);margin-top:8px}
.del-fields input,.del-fields textarea{font:15px var(--font);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;resize:vertical}
.del-fields input:focus,.del-fields textarea:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(137,197,64,.25)}
.del-err{display:none;margin-top:8px;font-size:13.5px;color:#A11A2A}
.del-err.on{display:block}
.del-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.del-actions .wg-btn{min-height:50px;padding:0 22px;font-size:15px;cursor:pointer;font-family:var(--font)}
.del-steps{counter-reset:ds;display:flex;flex-direction:column;gap:14px;margin-top:22px}
.del-steps li{position:relative;padding-left:46px;color:#DCE4EF;line-height:1.6;counter-increment:ds}
.del-steps li::before{content:counter(ds);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green-2);color:var(--navy);font-weight:700;font-size:14px;display:grid;place-items:center}
.del-steps b{color:#fff}

@media (max-width:980px){
  .sp-topic-grid{grid-template-columns:1fr 1fr}
  .sp-faq .wg-wrap,.sp-help-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sp-cards,.sp-topic-grid{grid-template-columns:1fr}
  .sp-card{padding:18px 18px 18px 76px}
  .sp-help-cta .wg-btn,.del-actions .wg-btn{width:100%}
}