/* Hocico Phone — Página Soporte / FAQ · clara resolutiva */
.sp-page{ background:#fff; }

/* hero + search */
.sp-hero{ text-align:center; padding:56px 56px 14px;
  background:radial-gradient(70% 70% at 50% 0%, var(--hp-green-50) 0%, transparent 64%); }
.sp-eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px; white-space:nowrap;
  background:#fff; border:1px solid var(--hp-green-100); font-size:12.5px; font-weight:700; color:var(--hp-green-700); box-shadow:0 4px 14px rgba(42,159,132,.08); }
.sp-h1{ font-family:var(--font-display); font-weight:800; font-size:56px; line-height:1.05; letter-spacing:-.03em; margin:20px 0 0; color:var(--hp-ink); }
.sp-h1-em{ color:var(--hp-green); }
.sp-search{ display:flex; align-items:center; gap:14px; max-width:680px; margin:32px auto 0; padding:8px 8px 8px 22px; border-radius:20px;
  background:#fff; border:1.5px solid var(--hp-mist); box-shadow:0 18px 50px -24px rgba(20,36,31,.3);
  transition:border-color .2s, box-shadow .2s; }
.sp-search:focus-within{ border-color:var(--hp-green); box-shadow:0 0 0 5px var(--hp-green-50), 0 18px 50px -24px rgba(42,159,132,.45); }
.sp-search input{ flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:18px; font-weight:500; font-family:inherit; color:var(--hp-ink); padding:12px 0; }
.sp-search input::placeholder{ color:var(--hp-slate); font-weight:400; }
.sp-search-btn{ padding:14px 26px; border-radius:14px; border:none; cursor:pointer; white-space:nowrap; font-family:inherit;
  font-size:15px; font-weight:800; color:#04130D; background:linear-gradient(135deg,#2FE0A8,var(--hp-green));
  box-shadow:0 12px 26px -8px rgba(42,159,132,.5); transition:transform .15s; }
.sp-search-btn:hover{ transform:translateY(-2px); }
.sp-hint{ font-size:13.5px; color:var(--hp-slate); margin-top:16px; }

/* category grid */
.sp-cats{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:1180px; margin:0 auto; padding:44px 56px 20px; }
.sp-cat.on{ border-color:var(--hp-green); box-shadow:0 18px 44px -26px rgba(42,159,132,.5); background:var(--hp-green-50); }
.sp-clear{ margin-left:auto; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--hp-green-700); background:var(--hp-green-50); border:1px solid var(--hp-green-100); border-radius:999px; padding:7px 14px; cursor:pointer; }
.sp-clear:hover{ background:var(--hp-green-100); }
@media (max-width:1100px){ .sp-cats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sp-cats{ grid-template-columns:1fr; } }
/* escalación a 1 columna + paddings fluidos en móvil */
@media (max-width:820px){
  /* Centro de ayuda: héroe más compacto en móvil (título y buscador eran de escritorio) */
  .sp-hero{ padding:40px 20px 10px; }
  .sp-h1{ font-size:clamp(30px,7.6vw,42px); line-height:1.1; margin-top:14px; }
  .sp-search{ margin-top:22px; gap:8px; padding:6px 6px 6px 16px; border-radius:16px; }
  .sp-search input{ font-size:16px; padding:11px 0; }
  .sp-search-btn{ padding:11px 16px; font-size:14px; border-radius:11px; }
  .sp-hint{ font-size:13px; margin-top:12px; }
  .sp-escal{ padding:40px 20px 60px; }
  .sp-escal-inner{ display:grid; grid-template-columns:1fr; gap:24px; padding:32px 24px; }
  .sp-escal-h{ font-size:clamp(24px,6vw,30px); }
  .sp-escal-actions{ width:100%; }
  .sp-escal-btn{ white-space:normal; }
  .sp-cats{ padding:32px 20px 16px; }
  .sp-faq{ padding:40px 20px 16px; }
}
.sp-cat{ text-align:left; border-radius:20px; padding:24px 22px; cursor:pointer; background:#fff; border:1px solid var(--hp-mist);
  box-shadow:0 12px 36px -28px rgba(20,36,31,.3); transition:transform .2s, box-shadow .25s, border-color .2s; font-family:inherit; }
.sp-cat:hover{ transform:translateY(-4px); border-color:var(--hp-green-200); box-shadow:0 24px 50px -30px rgba(42,159,132,.4); }
.sp-cat-ic{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--hp-green-50); border:1px solid var(--hp-green-100); }
.sp-cat-t{ font-size:16.5px; font-weight:800; color:var(--hp-ink); margin-top:16px; letter-spacing:-.01em; }
.sp-cat-d{ font-size:13px; line-height:1.5; color:var(--hp-slate); margin-top:6px; }
.sp-cat-go{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--hp-green-700); margin-top:14px; white-space:nowrap; }

/* FAQ accordion */
.sp-faq{ max-width:840px; margin:0 auto; padding:50px 56px 20px; }
.sp-faq-head{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; text-align:center; margin-bottom:30px; }
.sp-faq-head > div:first-child, .sp-faq-head .sp-sec-eyebrow, .sp-faq-head .sp-h2{ flex-basis:100%; }
.sp-sec-eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--hp-green); }
.sp-h2{ font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-.02em; margin:12px 0 0; color:var(--hp-ink); }
.sp-acc-list{ display:flex; flex-direction:column; gap:12px; }
.sp-acc{ border-radius:16px; border:1.5px solid var(--hp-mist); background:#fff; overflow:hidden; transition:border-color .25s, box-shadow .25s, background .25s; }
.sp-acc.open{ border-color:var(--hp-green); background:linear-gradient(180deg,#fff,var(--hp-green-50)); box-shadow:0 14px 36px -22px rgba(42,159,132,.4); }
.sp-acc-q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:700; color:var(--hp-ink); text-align:left; background:transparent; border:none; line-height:1.4; }
.sp-acc-chev{ flex:0 0 auto; margin-top:1px; color:var(--hp-slate); transition:transform .3s, color .25s; }
.sp-acc.open .sp-acc-chev{ transform:rotate(180deg); color:var(--hp-green-700); }
.sp-acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1); }
.sp-acc.open .sp-acc-panel{ grid-template-rows:1fr; }
.sp-acc-inner{ overflow:hidden; min-height:0; padding:0 22px; font-size:14.5px; line-height:1.65; color:var(--hp-graphite); }
.sp-acc.open .sp-acc-inner{ padding-bottom:22px; }
.sp-noresult{ display:flex; align-items:center; justify-content:center; gap:10px; padding:40px; border-radius:16px; border:1px dashed var(--hp-green-200); color:var(--hp-slate); font-size:14.5px; font-weight:600; }

/* escalation banner */
.sp-escal{ padding:60px 56px 84px; }
.sp-escal-inner{ position:relative; overflow:hidden; max-width:1080px; margin:0 auto; border-radius:26px; padding:48px;
  display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center;
  background:linear-gradient(150deg,#0E1A16,#0B1813); color:#fff; }
.sp-escal-glow{ position:absolute; }
.sp-escal-inner::before{ content:""; position:absolute; top:-40%; right:-5%; width:45%; height:180%; background:radial-gradient(closest-side,rgba(47,224,168,.16),transparent 70%); pointer-events:none; }
.sp-escal-copy{ position:relative; z-index:1; }
.sp-escal-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--hp-green-300); }
.sp-escal-h{ font-family:var(--font-display); font-weight:800; font-size:30px; letter-spacing:-.02em; margin:12px 0 0; line-height:1.15; }
.sp-escal-p{ font-size:15px; line-height:1.6; color:rgba(234,243,238,.68); margin:14px 0 0; }
.sp-escal-actions{ position:relative; z-index:1; display:flex; flex-direction:column; gap:11px; }
.sp-escal-btn{ display:flex; align-items:center; justify-content:center; gap:10px; padding:16px 22px; border-radius:14px; cursor:pointer;
  font-size:15px; font-weight:800; transition:transform .15s, box-shadow .2s; white-space:nowrap; }
.sp-escal-btn.primary{ color:#04130D; background:linear-gradient(135deg,#37E6A4,var(--hp-green)); box-shadow:0 14px 30px -10px rgba(55,230,164,.5); }
.sp-escal-btn.primary:hover{ transform:translateY(-2px); }
.sp-escal-btn.ghost{ color:#fff; background:rgba(143,194,172,.08); border:1px solid rgba(143,194,172,.25); }
.sp-escal-btn.ghost:hover{ background:rgba(143,194,172,.14); border-color:rgba(143,194,172,.4); }
.sp-escal-meta{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:11.5px; color:#8FC2AC; font-weight:600; margin-top:2px; white-space:nowrap; }
.sp-escal-btn.primary[disabled]{ opacity:.6; cursor:default; transform:none; }

/* ── modal de ticket ── */
.sp-modal-back{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(8,16,13,.62); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); animation:spfade .2s ease; }
@keyframes spfade{ from{ opacity:0; } to{ opacity:1; } }
.sp-modal{ position:relative; width:100%; max-width:540px; max-height:90vh; overflow:auto; border-radius:24px; padding:34px 34px 30px;
  background:#fff; box-shadow:0 40px 90px -30px rgba(8,16,13,.6); animation:sppop .32s cubic-bezier(.2,1,.4,1); }
@keyframes sppop{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.sp-modal-x{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--hp-slate); background:var(--hp-fog); border:1px solid var(--hp-mist); transition:background .15s, color .15s; }
.sp-modal-x:hover{ background:var(--hp-mist); color:var(--hp-ink); }
.sp-modal-head{ margin-bottom:20px; padding-right:30px; }
.sp-modal-title{ font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:-.02em; color:var(--hp-ink); margin:10px 0 0; }
.sp-modal-sub{ font-size:13.5px; line-height:1.5; color:var(--hp-slate); margin:7px 0 0; }
.sp-form{ display:flex; flex-direction:column; gap:15px; }
.sp-f{ display:flex; flex-direction:column; gap:7px; }
.sp-f label{ font-size:12.5px; font-weight:700; color:var(--hp-graphite); }
.sp-req{ color:var(--hp-green); }
.sp-opt{ color:var(--hp-slate); font-weight:500; }
.sp-sel-wrap{ position:relative; }
.sp-sel, .sp-input, .sp-textarea{ width:100%; padding:13px 14px; border-radius:12px; font-family:inherit; font-size:14.5px; color:var(--hp-ink);
  background:var(--hp-fog); border:1.5px solid var(--hp-mist); outline:none; transition:border-color .18s, box-shadow .18s; }
.sp-sel{ appearance:none; padding-right:38px; cursor:pointer; }
.sp-sel:disabled{ opacity:.55; cursor:default; }
.sp-sel:focus, .sp-input:focus, .sp-textarea:focus{ border-color:var(--hp-green); box-shadow:0 0 0 4px var(--hp-green-50); background:#fff; }
.sp-sel.err{ border-color:#F2715A; }
.sp-sel-chev{ position:absolute; right:13px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--hp-slate); display:flex; }
.sp-textarea{ resize:vertical; line-height:1.5; }
.sp-file{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:12px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--hp-slate);
  background:var(--hp-fog); border:1.5px dashed var(--hp-mist); transition:border-color .18s, color .18s; }
.sp-file:hover{ border-color:var(--hp-green-200); color:var(--hp-graphite); }
.sp-form-err{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#D4502F; }
.sp-modal-actions{ display:flex; gap:11px; margin-top:6px; }
.sp-modal-actions .sp-escal-btn{ flex:1; }
.sp-modal-actions .sp-escal-btn.ghost{ color:var(--hp-graphite); background:var(--hp-fog); border:1px solid var(--hp-mist); }
.sp-modal-actions .sp-escal-btn.ghost:hover{ background:var(--hp-mist); }
.sp-modal-done{ text-align:center; padding:14px 6px 6px; }
.sp-modal-done-ic{ width:64px; height:64px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#37E6A4,var(--hp-green)); box-shadow:0 14px 30px -10px rgba(55,230,164,.5); }
.sp-modal-done-ic.err{ background:linear-gradient(135deg,#F2715A,#D4502F); box-shadow:0 14px 30px -10px rgba(212,80,47,.45); }
.sp-modal-done-t{ font-family:var(--font-display); font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--hp-ink); margin:0; }
.sp-modal-done-p{ font-size:14px; line-height:1.6; color:var(--hp-graphite); margin:10px auto 22px; max-width:380px; }
.sp-modal-done .sp-escal-btn{ display:inline-flex; }
.sp-modal .cob-spin{ display:inline-flex; animation:cobspin .8s linear infinite; }

/* ── Override móvil del banner de escalación · DESPUÉS de la base para ganar el cascade ──
   (las reglas móviles de arriba quedaban anuladas por .sp-escal-inner base, que va más abajo) */
@media (max-width:820px){
  .sp-escal{ padding:40px clamp(16px,5vw,40px) 56px; }
  .sp-escal-inner{ grid-template-columns:1fr; gap:24px; padding:clamp(24px,5vw,40px); }
  .sp-escal-h{ font-size:clamp(24px,6vw,30px); }
  .sp-escal-actions{ width:100%; }
  .sp-escal-btn{ white-space:normal; }
  .sp-escal-meta{ white-space:normal; text-align:center; }
}
/* modal de ticket: más aire en pantallas pequeñas (34px de padding apretaba el formulario) */
@media (max-width:480px){
  .sp-modal{ padding:28px 20px 24px; }
  .sp-modal-x{ top:14px; right:14px; }
}