/* ============================================================
   HDH — Soporte (estética oscura de la home nueva)
   ============================================================ */
.soporte { background: #0A0A0A; color: var(--hdh-bone); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sop-hero { padding: 150px clamp(20px, 5vw, 72px) 40px;
  background: radial-gradient(ellipse 900px 420px at 50% -10%, rgba(196,57,29,.22), transparent 70%), #0A0A0A; }
.sop-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; color: #fff; margin: 14px 0 10px; }
.sop-bajada { color: var(--hdh-silver); font-size: clamp(16px, 1.5vw, 19px); margin: 0 0 30px; max-width: 56ch; }
.sop-buscar { display: flex; align-items: center; gap: 12px; max-width: 640px; height: 58px; padding: 0 18px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, background .2s; }
.sop-buscar:focus-within { border-color: var(--hdh-ember-light); background: rgba(255,255,255,.09); }
.sop-buscar svg { width: 20px; height: 20px; color: var(--hdh-silver); flex: 0 0 auto; }
.sop-buscar input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: 500 16px var(--font-body); outline: none; }
.sop-buscar input::placeholder { color: #7d8288; }
.sop-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.filtro { padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--hdh-bone);
  font: 600 14px var(--font-display); cursor: pointer; transition: all .2s; }
.filtro:hover { border-color: rgba(255,255,255,.35); }
.filtro.activo { background: var(--hdh-ember); border-color: var(--hdh-ember); color: #fff; }
.sop-preguntas { padding: 30px clamp(20px, 5vw, 72px) 70px; }
.sop-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 48px; align-items: start; }
.sop-grupo h2 { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--hdh-ember-light); margin: 0 0 8px; }
.sop-grupo details { border-bottom: 1px solid rgba(255,255,255,.1); }
.sop-grupo summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; position: relative; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.sop-grupo summary::-webkit-details-marker { display: none; }
.sop-grupo summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 300; color: var(--hdh-ember-light); transition: transform .25s; }
.sop-grupo details[open] summary::after { transform: rotate(45deg); }
.sop-grupo details p { margin: 0 0 16px; color: var(--hdh-silver); line-height: 1.6; font-size: 15px; }
.sop-grupo details p strong { color: #fff; }
.sop-grupo[hidden], .sop-grupo details[hidden] { display: none; }
.sop-vacio { text-align: center; padding: 40px 0; color: var(--hdh-silver); }
.sop-vacio a, .sop-wa { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sop-vacio a { margin-top: 10px; padding: 13px 20px; border-radius: 14px; background: var(--hdh-ember); color: #fff; font: 700 15px var(--font-display); }
.sop-vacio svg, .sop-wa svg { width: 20px; height: 20px; }
.sop-contacto { padding: 0 clamp(20px, 5vw, 72px) 110px; }
.sop-caja { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(26px, 4vw, 44px); border-radius: 24px;
  background: linear-gradient(135deg, rgba(196,57,29,.18), rgba(255,255,255,.04) 60%); border: 1px solid rgba(224,90,58,.35); }
.sop-caja h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3vw, 36px); color: #fff; margin: 10px 0 8px; }
.sop-caja p:not(.sobretitulo) { color: var(--hdh-silver); margin: 0; max-width: 52ch; }
.sop-wa { flex: 0 0 auto; padding: 16px 22px; border-radius: 16px; background: #1FA855; color: #fff; }
.sop-wa:hover { background: #178a45; }
.sop-wa span { display: flex; flex-direction: column; }
.sop-wa strong { font: 700 16px var(--font-display); }
.sop-wa small { font-size: 12.5px; opacity: .9; }
@media (max-width: 860px) {
  .sop-hero { padding-top: 120px; }
  .sop-lista { grid-template-columns: 1fr; }
  .sop-caja { flex-direction: column; align-items: flex-start; }
  .sop-wa { width: 100%; box-sizing: border-box; justify-content: center; }
}