/* ============================================================
   Centro de Ayuda — Estilos específicos
   Hereda de tpl/css/styles.css (variables, tipografía, colores)
   ============================================================ */

/* HERO --------------------------------------------------- */
.help-hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 85% 110%, rgba(244,162,97,.32), transparent 60%),
    radial-gradient(900px 500px at 8% -10%, rgba(231,111,81,.22), transparent 55%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.help-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 24px 80px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 48px;
  align-items: center;
}
.help-hero .eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(231,111,81,.12);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.help-hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 18px;
}
.help-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--orange-1), var(--orange-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.help-hero p.lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 28px;
  text-wrap: pretty;
}

/* Help search bar */
.help-search {
  position: relative;
  max-width: 560px;
  margin-bottom: 26px;
}
.help-search input {
  width: 100%;
  height: 60px;
  padding: 0 26px 0 60px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  outline: none;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.help-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(231,111,81,.15), var(--shadow);
}
.help-search .icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.1rem;
}
.help-search-suggest {
  position: absolute;
  inset: calc(100% + 8px) 0 auto 0;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
  z-index: 5;
  max-height: 360px;
  overflow-y: auto;
}
.help-search.open .help-search-suggest { display: block; }
.help-search-suggest .row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  font-size: .95rem;
  color: var(--ink);
  text-align: left;
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
}
.help-search-suggest .row:first-child { border-top: none; }
.help-search-suggest .row:hover,
.help-search-suggest .row.active { background: var(--bg-soft); }
.help-search-suggest .row i {
  color: var(--accent);
  width: 22px;
  text-align: center;
}
.help-search-suggest .row .tag {
  margin-left: auto;
  font-size: .7rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.help-search-suggest .empty {
  padding: 22px 18px;
  color: var(--ink-mute);
  font-size: .95rem;
}

/* Quick chips */
.help-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.help-quick .label {
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-right: 6px;
}
.help-quick a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: .88rem;
  color: var(--ink-soft);
  transition: all .18s var(--ease);
}
.help-quick a:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.help-quick a i { color: var(--accent); font-size: .9rem; }

/* Hero art */
.help-hero-art {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}
.help-hero-art .blob {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  border-radius: 38% 62% 56% 44% / 44% 38% 62% 56%;
  filter: blur(.5px);
  box-shadow: 0 30px 80px rgba(231,111,81,.35);
  animation: blobMorph 16s ease-in-out infinite;
}
@keyframes blobMorph {
  0%,100% { border-radius: 38% 62% 56% 44% / 44% 38% 62% 56%; }
  50%     { border-radius: 56% 44% 38% 62% / 60% 56% 44% 40%; }
}
.help-hero-art .card {
  position: absolute;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
}
.help-hero-art .card i {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}
.help-hero-art .card small {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .78rem;
  color: var(--ink-mute);
  letter-spacing: 0;
  margin-top: 2px;
}
.help-hero-art .card.c1 { top: 6%; right: -4%; animation: floatA 7s ease-in-out infinite; }
.help-hero-art .card.c2 { bottom: 22%; left: -10%; animation: floatB 8s ease-in-out infinite; }
.help-hero-art .card.c3 { bottom: -2%; right: 8%; animation: floatA 9s ease-in-out infinite reverse; }
@keyframes floatA { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }

.help-hero-art .ring {
  position: absolute;
  inset: 12%;
  border: 1.5px dashed rgba(255,255,255,.5);
  border-radius: 50%;
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.help-hero-art .center-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 4.5rem;
}

/* MAIN SECTION ------------------------------------------- */
.help-main {
  padding: 64px 0 80px;
  background: var(--bg);
}
.help-section-head {
  max-width: var(--container);
  margin: 0 auto 36px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.help-section-head h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink);
}
.help-section-head .sub {
  color: var(--ink-mute);
  font-size: .98rem;
  margin-top: 4px;
}
.help-section-head .breadcrumb {
  font-size: .85rem;
  color: var(--ink-mute);
}
.help-section-head .breadcrumb a { color: var(--ink-soft); }
.help-section-head .breadcrumb a:hover { color: var(--accent); }

.help-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

/* TABS (desktop) ------------------------------------------ */
.help-tabs {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 14px;
  border: 1px solid var(--line);
}
.help-tabs .tabs-title {
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 8px 14px 12px;
}
.help-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-soft);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  position: relative;
}
.help-tab .tab-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: .95rem;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.help-tab .tab-meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .78rem;
  color: var(--ink-mute);
  background: rgba(0,0,0,.04);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
}
.help-tab:hover {
  background: rgba(255,255,255,.6);
  color: var(--ink);
}
.help-tab:hover .tab-icon { background: var(--bg-soft); }

/* Tab active styles — switched via [data-tab-style] on .help-tabs */

/* Style 1: FILLED — naranja sólido (default) */
.help-tabs[data-tab-style="filled"] .help-tab.active {
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color: #fff;
  box-shadow: 0 6px 16px rgba(231,111,81,.28);
}
.help-tabs[data-tab-style="filled"] .help-tab.active .tab-icon {
  background: rgba(255,255,255,.22);
  border-color: transparent;
  color: #fff;
}
.help-tabs[data-tab-style="filled"] .help-tab.active .tab-meta {
  background: rgba(255,255,255,.22);
  color: #fff;
}

/* Style 2: BORDERED — barra izquierda + fondo blanco */
.help-tabs[data-tab-style="bordered"] .help-tab.active {
  background: #fff;
  color: var(--accent-dark);
  box-shadow: var(--shadow-sm);
  padding-left: 22px;
}
.help-tabs[data-tab-style="bordered"] .help-tab.active::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px; bottom: 14px;
  width: 4px;
  background: var(--accent);
  border-radius: 4px;
}
.help-tabs[data-tab-style="bordered"] .help-tab.active .tab-icon {
  background: rgba(231,111,81,.12);
  border-color: rgba(231,111,81,.25);
}

/* Style 3: UNDERLINE — texto en color y subrayado */
.help-tabs[data-tab-style="underline"] .help-tab.active {
  background: transparent;
  color: var(--accent-dark);
}
.help-tabs[data-tab-style="underline"] .help-tab.active .tab-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.help-tabs[data-tab-style="underline"] .help-tab.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* CONTENT PANELS ----------------------------------------- */
.help-content { min-width: 0; }
.help-panel { display: none; }
.help-panel.active {
  display: block;
  animation: fadeUp .35s var(--ease);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.help-panel-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.help-panel-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.help-panel-head p {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 640px;
  text-wrap: pretty;
}
.help-panel-head .head-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.help-panel-head .head-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(244,162,97,.18), rgba(231,111,81,.14));
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* ACCORDION ---------------------------------------------- */
.help-accordion { display: flex; flex-direction: column; gap: 12px; }
.help-acc-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  /* Para anclas/scroll: que no quede tapado por el header sticky */
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.help-acc-item:hover { border-color: rgba(231,111,81,.35); }
.help-acc-item[open] {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.help-acc-item.flash {
  animation: accFlash 1.2s var(--ease);
}
@keyframes accFlash {
  0%   { box-shadow: 0 0 0 0 rgba(231,111,81,.55), var(--shadow); }
  40%  { box-shadow: 0 0 0 8px rgba(231,111,81,.15), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(231,111,81,0),    var(--shadow); }
}
.help-acc-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  user-select: none;
}
.help-acc-summary::-webkit-details-marker { display: none; }
.help-acc-summary .acc-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.help-acc-summary .acc-title { flex: 1; }
.help-acc-summary .acc-sub {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .85rem;
  color: var(--ink-mute);
  margin-top: 2px;
}
.help-acc-summary .acc-chev {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  background: var(--bg-soft);
  transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.help-acc-item[open] .acc-chev {
  transform: rotate(180deg);
  background: var(--accent);
  color: #fff;
}
.help-acc-item[open] .acc-icon {
  background: rgba(231,111,81,.12);
}
.help-acc-body {
  padding: 4px 22px 22px 72px;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.65;
}
.help-acc-body p + p { margin-top: 10px; }
.help-acc-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink);
  margin: 14px 0 6px;
}
.help-acc-body ul {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0;
}
.help-acc-body ul li { margin: 4px 0; }
.help-acc-body a.inline { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.help-acc-body .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
}
.help-acc-body .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--font-display);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
}
.help-acc-body .pill i { color: var(--accent); }

.help-acc-body .steps {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 4px;
  counter-reset: step;
}
.help-acc-body .steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  counter-increment: step;
}
.help-acc-body .steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .82rem;
  display: grid;
  place-items: center;
}

/* PAYMENTS GRID — used inside Pagos panel ------------ */
.pay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 14px 0 6px;
}
.pay-grid .pay-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pay-grid .pay-card .pay-mark {
  width: 44px; height: 30px;
  border-radius: 6px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink);
}
.pay-grid .pay-card .pay-mark.visa { background:#1a1f71; color:#fff; }
.pay-grid .pay-card .pay-mark.mc { background:linear-gradient(90deg,#eb001b 50%, #f79e1b 50%); color:transparent; }
.pay-grid .pay-card .pay-mark.amex { background:#2e77bb; color:#fff; }
.pay-grid .pay-card .pay-mark.diners { background:#0079be; color:#fff; }
.pay-grid .pay-card .pay-mark.yape { background:#742282; color:#fff; }
.pay-grid .pay-card .pay-mark.plin { background:#00b2a9; color:#fff; }
.pay-grid .pay-card .pay-mark.cash { background:#2a685f; color:#fff; }
.pay-grid .pay-card .pay-mark.bank { background:#1f3a72; color:#fff; }
.pay-grid .pay-card .pay-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
}
.pay-grid .pay-card .pay-desc {
  font-size: .85rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* CONTACT (stores + map) ---------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: stretch;
  min-height: 540px;
}
.stores-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.stores-list { scrollbar-width: thin; scrollbar-color: var(--accent) transparent; }
.stores-list::-webkit-scrollbar { width: 6px; }
.stores-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 3px;
}
.stores-list::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.store-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all .18s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.store-card:hover {
  border-color: rgba(231,111,81,.45);
  transform: translateY(-1px);
}
.store-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(231,111,81,.12);
  background: #fff;
}
.store-card .store-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.store-card .store-pin {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex-shrink: 0;
}
.store-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  flex: 1;
}
.store-card .badge-hours {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(42,104,95,.12);
  color: #2a685f;
}
.store-card .badge-hours.closed {
  background: rgba(231,111,81,.12);
  color: var(--accent-dark);
}
.store-card .meta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: .82rem;
  color: var(--ink-soft);
}
.store-card .meta-row i {
  color: var(--accent);
  margin-right: 5px;
}
.store-card .address {
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.store-card .store-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.store-card .store-actions a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  font-size: .8rem;
  font-weight: 600;
  font-family: var(--font-display);
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  transition: all .15s var(--ease);
}
.store-card .store-actions a:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.store-card .store-actions a i { font-size: .85rem; }

.map-wrap {
  position: relative;
  /* Confina los z-index altos de Leaflet (panes, controles, popups llegan a 700-800)
     dentro de su propio contexto de apilamiento — si no, el mapa "se monta" sobre
     drawers, overlays y otros UI con z-index < 800. */
  isolation: isolate;
  z-index: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  min-height: 540px;
}
#stores-map { width: 100%; height: 100%; min-height: 540px; }

/* Override Leaflet's default look for cleanliness */
.leaflet-container { font-family: var(--font-body); background: #f5efe8; }
.leaflet-control-attribution { font-size: 10px !important; background: rgba(255,255,255,.8) !important; }
.leaflet-popup-content-wrapper {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.leaflet-popup-content {
  margin: 14px 16px;
  font-family: var(--font-body);
}
.leaflet-popup-content strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.leaflet-popup-content small {
  display: block;
  color: var(--ink-mute);
  font-size: .78rem;
  margin-top: 4px;
}
.store-marker {
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 0;
  background: linear-gradient(135deg, var(--orange-1), var(--orange-2));
  transform: rotate(-45deg);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(231,111,81,.45);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .85rem;
}
.store-marker i { transform: rotate(45deg); }
.store-marker.active {
  width: 42px; height: 42px;
  box-shadow: 0 6px 18px rgba(231,111,81,.6);
  z-index: 1000 !important;
}

/* MOBILE: tabs → acordeón ------------------------------------ */
@media (max-width: 860px) {
  .help-hero-inner {
    grid-template-columns: 1fr;
    padding: 40px 20px 56px;
    gap: 28px;
  }
  /* En mobile escondemos el arte flotante: las quick-chips cumplen la misma función
     y los cards "flotantes" quedaban tapados por el header sticky */
  .help-hero-art { display: none; }
  .help-hero-copy { text-align: left; }
  .help-search input { height: 54px; font-size: .95rem; padding-left: 54px; }
  .help-search .icon { left: 20px; }
  .help-section-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  /* Convertir tabs en acordeón */
  .help-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 16px;
  }
  .help-tabs {
    position: static;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    gap: 10px;
  }
  .help-tabs .tabs-title { display: none; }
  .help-tab {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    position: relative;
  }
  .help-tab::after {
    content: "\f078"; /* chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    color: var(--ink-mute);
    transition: transform .25s var(--ease);
    font-size: .85rem;
  }
  .help-tab.active::after { transform: rotate(180deg); color: var(--accent); }
  .help-tab .tab-meta { display: none; }

  /* Active style adjustments on mobile: keep filled visual identical */
  .help-tabs[data-tab-style="bordered"] .help-tab.active { padding-left: 22px; }
  .help-tabs[data-tab-style="underline"] .help-tab.active::after { color: var(--accent); }

  /* Panels become inline collapsible cards under the tab */
  .help-content {
    display: contents;
  }
  .help-panel {
    order: var(--order, 0); /* set via JS to position right after its tab */
  }
  /* Use JS-driven mobile reordering: each panel gets data-order matching its tab */

  .help-panel.active {
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 22px 18px 24px;
    margin-top: -4px;
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .help-panel-head h2 { font-size: 1.4rem; }
  .help-panel-head .head-icon { width: 44px; height: 44px; font-size: 1.1rem; }

  .help-acc-summary { padding: 14px 16px; font-size: .98rem; }
  .help-acc-body { padding: 0 16px 18px 60px; font-size: .92rem; }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .stores-list { max-height: none; }
  .map-wrap, #stores-map { min-height: 380px; }
}

@media (max-width: 520px) {
  .help-hero h1 { font-size: 2rem; }
  .help-quick { gap: 8px; }
  .help-quick .label { display: none; }
  .help-acc-body { padding-left: 18px; }
}