/* Soporte (/support.xhtml): on top of homepage.css (tokens, nav, buttons, FAQ accordion, final band, footer, chat).
   Hero on the owner photo with the two contact cards, the topics, the FAQ by topic, the "still stuck" band. */

/* ---- nav (same tools as the legal pages) ---- */
.sp-nav-tools{display:flex;align-items:center;gap:18px;margin-left:auto}

/* ---- shared ---- */
.sp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-ink)}
.sp-eyebrow::before{content:"";width:28px;height:2px;background:var(--lime-ink)}
.sp-h2{font-size:clamp(24px,2.6vw,34px);line-height:1.2;font-weight:400}
.sp-h2 strong{font-weight:600}

/* ---- hero: the photo, a cream veil that fades out to the right so the owner stays in view ---- */
.sp-hero{position:relative;isolation:isolate;overflow:hidden;background-size:cover;background-position:72% center;min-height:620px;display:flex;align-items:center;padding:72px 0 80px}
.sp-hero::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(255,254,235,.98) 0%,rgba(255,254,235,.96) 38%,rgba(255,254,235,.55) 62%,rgba(255,254,235,0) 100%)}
.sp-hero .hp-wrap{position:relative;z-index:1;width:100%}
.sp-hero-in{max-width:640px}
.hp .sp-hero h1{margin-top:18px;font-size:clamp(34px,4.2vw,58px);line-height:1.05;font-weight:300;letter-spacing:-.02em}
.sp-hero h1 strong{font-weight:700}
.sp-hero h1 em{font-style:italic;color:var(--pink);font-weight:400}
.sp-lead{margin-top:18px!important;font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:var(--grey);max-width:520px}

/* the two contact cards */
.sp-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px}
.sp-card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:14px;align-content:start;padding:20px 20px 18px;border-radius:22px;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--title)!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.sp-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(16,33,0,.35)}
.sp-card:active{transform:translateY(-1px);transition-duration:.05s}
.sp-card-ico{grid-row:1/4;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--cream);border:1px solid var(--line)}
.sp-card-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-card-k{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.sp-card-v{display:block;margin-top:3px;font-size:clamp(16px,1.35vw,19px);font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.sp-card-mail .sp-card-v{font-size:clamp(14.5px,1.15vw,16px);letter-spacing:-.02em}
.sp-card-d{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--grey)}
.sp-card-go{position:absolute;right:18px;top:18px;font-size:18px;line-height:1;color:var(--grey);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.sp-card:hover .sp-card-go{transform:translateX(4px)}
.sp-card-wa{background:var(--lime);border-color:var(--lime);box-shadow:0 14px 30px -18px rgba(91,119,32,.55)}
.sp-card-wa .sp-card-ico{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.sp-card-wa .sp-card-k,.sp-card-wa .sp-card-d,.sp-card-wa .sp-card-go{color:#3E5312}
.sp-card-mail .sp-card-ico{color:var(--lime-ink)}
/* copy the address with one tap */
.sp-copy{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:0 14px;min-height:36px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.7);color:var(--grey);font:600 12.5px var(--font);cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.sp-copy:hover{border-color:var(--grey);color:var(--title)}
.sp-copy.done{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.sp-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- topics ---- */
.sp-topics{padding:64px 0 24px;background:#fff}
.sp-topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px}
.sp-topic{display:flex;flex-direction:column;gap:6px;padding:22px 22px 24px;border-radius:20px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--title)!important;transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.sp-topic:hover{background:var(--lime);border-color:var(--lime);transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(91,119,32,.5)}
.sp-topic-n{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--lime-ink);margin-bottom:8px}
.sp-topic:hover .sp-topic-n{color:#3E5312}
.sp-topic b{font-size:17px;font-weight:600;line-height:1.25}
.sp-topic>span:last-child{font-size:13.5px;line-height:1.5;color:var(--grey)}
.sp-topic:hover>span:last-child{color:#3E5312}

/* ---- faq by topic: the landing's accordion (.hp-faq-list), the topic on the left stays put ---- */
.sp-faq{padding:56px 0 48px;background:#fff;scroll-margin-top:70px}
.sp-faq-alt{background:var(--cream)}
.sp-faq .hp-split{grid-template-columns:5fr 7fr;align-items:start}
.sp-faq-head{position:sticky;top:92px}
.sp-num{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border-radius:999px;background:var(--ink);color:var(--lime);font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em}
.hp .sp-faq-head h2{margin-top:18px;font-size:clamp(28px,3.2vw,44px);line-height:1.15}
.sp-faq-head h2 strong{font-weight:700}
.sp-faq-head p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--grey);max-width:420px}
.sp-faq .hp-faq-list details{border-bottom:1px solid var(--line)}
.sp-faq .hp-faq-list details:last-child{border-bottom:0}
.sp-faq .hp-faq-list summary{font-size:clamp(16px,1.4vw,19px)}
.sp-faq .hp-faq-list details p strong{color:var(--title);font-weight:600}
.sp-faq .hp-faq-list details p a{color:var(--lime-ink);font-weight:600}
/* opened from a link (#q-forgot): a soft lime highlight that fades */
.sp-faq details.is-target{animation:spTarget 2.4s ease-out}
@keyframes spTarget{0%,40%{background:#F4FBE3;box-shadow:0 0 0 12px #F4FBE3}100%{background:transparent;box-shadow:0 0 0 12px transparent}}

/* ---- still stuck: ink band, lime headline, what to send ---- */
.sp-help{background:var(--ink);color:#F4F3EE;padding:88px 0}
.sp-help-in{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center}
.sp-help .sp-eyebrow{color:var(--lime)}
.sp-help .sp-eyebrow::before{background:var(--lime)}
.hp .sp-help h2{margin-top:16px;color:#fff;font-size:clamp(28px,3.4vw,46px);line-height:1.15;font-weight:300}
.sp-help h2 strong{font-weight:700;color:var(--lime)}
.sp-help-copy>p{margin-top:16px;font-size:16px;line-height:1.7;color:#C9CBD0;max-width:520px}
.sp-help-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sp-btn-dark{background:transparent;border-color:#4B4D55;color:#fff!important}
.sp-btn-dark:hover{border-color:var(--lime);box-shadow:none}
.sp-tips{background:#161619;border:1px solid #2C2D33;border-radius:24px;padding:28px 28px 24px}
.hp .sp-tips h3{color:#fff;font-size:16px;font-weight:600;letter-spacing:.01em}
.sp-tips ul{list-style:none;padding:0;margin:16px 0 0;counter-reset:tip}
.sp-tips li{position:relative;padding:11px 0 11px 42px;border-top:1px solid #2C2D33;font-size:14.5px;line-height:1.55;color:#DADBE0;counter-increment:tip}
.sp-tips li::before{content:counter(tip);position:absolute;left:0;top:10px;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--ink);font-family:'Inter',sans-serif;font-size:12px;font-weight:700;display:grid;place-items:center}
.sp-tips-note{margin-top:14px!important;font-size:12.5px;color:#8E9098;line-height:1.5}

/* ---- final (hp-final of the landing, tighter) ---- */
.sp .hp-final{min-height:380px}
.sp .hp-final h2{margin-bottom:34px}
.sp-final-note{margin-top:26px!important;font-size:14px}
.sp-final-note a{color:#F4F3EE;opacity:.85;text-decoration:underline;text-underline-offset:4px}
.sp-final-note a:hover{opacity:1}

/* ---- responsive ---- */
@media (max-width:980px){
  .sp-faq .hp-split{grid-template-columns:1fr;gap:20px}
  .sp-faq-head{position:static}
  .sp-faq-head p{max-width:none}
  .sp-topic-grid{grid-template-columns:1fr 1fr}
  .sp-help-in{grid-template-columns:1fr}
  .sp-help{padding:64px 0}
}
@media (max-width:640px){
  /* the photo goes on top, the copy and the cards below it on cream (like the landing's hero) */
  .sp-hero{min-height:0;padding:58vw 0 0;background-size:100% auto;background-position:top center;background-repeat:no-repeat;background-color:var(--cream);display:block}
  .sp-hero::before{background:linear-gradient(180deg,rgba(255,254,235,0) 0%,rgba(255,254,235,0) 36vw,rgba(255,254,235,1) 56vw,rgba(255,254,235,1) 100%)}
  .sp-hero .hp-wrap{padding:0 16px 40px}
  .sp-hero-in{max-width:none}
  .sp-cards{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .sp-nav-tools{gap:10px}
  .sp-topics{padding:44px 0 12px}
  .sp-topic-grid{grid-template-columns:1fr;gap:12px}
  .sp-faq{padding:44px 0 32px}
  .sp-tips{padding:22px 18px 18px}
  .sp-help-cta .hp-btn{width:100%}
}
@media (max-width:430px){
  .sp-nav-tools .hp-lang a{padding:4px 8px}
}

/* ---- motion: cards and tips rise in (homepage.js adds .is-in); nothing moves with "reduce motion" ---- */
.hp-io .sp-hero-in>.sp-eyebrow,.hp-io .sp-hero-in>h1,.hp-io .sp-hero-in>.sp-lead{animation:hpFadeIn .8s ease both}
.hp-io .sp-hero-in>h1{animation-delay:.08s}
.hp-io .sp-hero-in>.sp-lead{animation-delay:.16s}

/* ---- Eliminar cuenta (delete-account.xhtml): the request form ---- */
.del-form-sec{padding-top:56px;padding-bottom:16px}
.del-form{max-width:640px;margin:0 auto}
.del-form h2{margin:8px 0 10px}
.del-form p{margin:0 0 18px;line-height:1.6}
.del-fields{display:grid;gap:8px;margin:0 0 22px}
.del-fields label{font-weight:600;font-size:14px;margin-top:6px}
.del-fields .ui-inputfield,.del-fields .ui-selectonemenu,.del-fields textarea{width:100%;box-sizing:border-box}
.del-send.ui-button{border-radius:999px}
.del-done{padding:28px;border-radius:18px;background:#F3F7EA}
.del-steps{margin:16px 0 18px;padding-left:20px;line-height:1.7}
.del-steps li{margin:0 0 8px}