/* Centro de ayuda v3 — página completa.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Ayuda.dc.html:187-271 (comportamiento en su dc-script, 492-593).

   Tres notas de traducción del template a CSS:

   1. El único valor de esta página que depende del ancho es el padding del hero: el dc-script lo
      resuelve con `mob = w < 760` (Ayuda.dc.html:518, 581). Aquí la base es el caso móvil y una
      sola media query abre a partir de 760 px. Los demás ternarios del dc-script (planCols,
      tCols, compMinW…) son de otras páginas del export y no tocan nada de esta.
   2. `dcRise` del template (helmet, línea 45) es idéntico a `dcFadeUp` de base.css, así que se
      reutiliza ese; no hace falta ningún keyframe propio de página.
   3. Los estados que el template calcula en JS (chip de tema activo, signo + girado, separador
      de la primera pregunta visible) son aquí clases: .is-active, [aria-expanded="true"] y
      .is-first — las mueven modules/faqfilter.js y modules/accordion.js. */

/* ---------- 1 · hero, buscador y temas (Ayuda.dc.html:187-213) ---------- */
.hc-hero{background:#f7faf8;background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.hc-hero__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:34px}

.hc-hero__copy{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;animation:dcFadeUp .5s ease .06s backwards}
.hc-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.hc-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:720px;text-wrap:balance}
.hc-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.hc-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-secondary);max-width:540px;text-wrap:pretty}

.hc-search{display:flex;justify-content:center;animation:dcFadeUp .5s ease .12s backwards}
.hc-search__box{position:relative;width:min(560px,100%)}
.hc-search__box i{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--c-muted);line-height:1}
.hc-search__input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:14px;padding:15px 18px 15px 46px;font-size:14.5px;font-family:inherit;color:var(--c-ink);outline:none;box-shadow:0 2px 10px rgba(23,36,28,.06);transition:border-color .15s,box-shadow .15s}
.hc-search__input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}

.hc-topics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;animation:dcFadeUp .5s ease .16s backwards}
/* los chips son <a> a la página de la categoría (sin JS navegan); faqfilter.js les cambia el
   papel a filtro y mueve .is-active. El hover del template solo toca el borde, así que las
   reglas repiten el color para ganarle al a:hover de base.css. */
.hc-topic{padding:9px 18px;border-radius:var(--r-pill);font-size:13px;font-weight:600;cursor:pointer;background:var(--c-white);color:var(--c-body);border:1px solid var(--c-border-input);transition:all .15s}
.hc-topic:hover{color:var(--c-body);border-color:var(--c-brand)}
.hc-topic.is-active,.hc-topic.is-active:hover{background:var(--c-green-ink);color:var(--c-white);border-color:var(--c-green-ink)}

/* ---------- 2 · preguntas (Ayuda.dc.html:215-247) ---------- */
.hc-faq{background:var(--c-white)}
.hc-faq__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column}
/* el template estrecha la caja a 900 px dentro del contenedor de 1180 (línea 218) */
.hc-faq__box{box-sizing:border-box;max-width:900px;margin:0 auto;width:100%;background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:6px 26px;display:flex;flex-direction:column}
.hc-faq__item{border-top:1px solid var(--c-divider)}
/* el separador lo pierde la primera pregunta VISIBLE, no la primera del HTML: al filtrar por
   texto o por tema, faqfilter.js mueve la clase (Ayuda.dc.html:593, `sep: i ? … : '0'`) */
.hc-faq__item.is-first{border-top:0}
.hc-faq__item[hidden]{display:none}
.hc-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 0;background:none;border:0;font-family:inherit;color:inherit;text-align:left;cursor:pointer}
.hc-faq__q-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.hc-faq__cat{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-brand)}
.hc-faq__q-text{font-size:15px;font-weight:600;color:var(--c-ink);transition:color .15s}
.hc-faq__q:hover .hc-faq__q-text{color:var(--c-green-text)}
.hc-faq__sign{width:27px;height:27px;border-radius:50%;border:1px solid var(--c-border-input);background:var(--c-white);color:var(--c-ink);display:flex;align-items:center;justify-content:center;font-size:16px;flex:none;line-height:1;transition:all .2s ease}
.hc-faq__q[aria-expanded="true"] .hc-faq__sign{border-color:var(--c-brand);background:var(--c-brand);color:var(--c-white);transform:rotate(45deg)}
.hc-faq__a{padding:0 44px 20px 0;font-size:14px;color:var(--c-secondary);line-height:1.6;text-wrap:pretty}
.hc-faq__a[hidden]{display:none}
/* la respuesta del template es un único <p> con margin:0 (línea 229); las nuestras llegan de BD
   y pueden traer varios, así que el segundo y siguientes se separan a mano. Sus enlaces llevan
   la clase legacy .stri-a, que aquí no existe: se les da el mismo peso que al enlace del estado
   vacío de esta misma caja. */
.hc-faq__a p{margin:0}
.hc-faq__a p + p{margin-top:10px}
.hc-faq__a a{font-weight:600}

.hc-faq__empty{padding:44px 0 42px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:dcFadeUp .25s ease}
.hc-faq__empty[hidden]{display:none}
.hc-faq__empty-icon{width:78px;height:78px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:8px}
.hc-faq__empty-icon i{font-size:30px;color:var(--c-brand);line-height:1}
.hc-faq__empty-badge{position:absolute;right:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--c-white);border:1px solid var(--c-border-chip);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--c-muted);box-shadow:0 3px 8px rgba(23,36,28,.1)}
.hc-faq__empty-title{font-size:16.5px;font-weight:700;color:var(--c-ink)}
.hc-faq__empty-text{font-size:13.5px;color:var(--c-muted);max-width:360px;line-height:1.6;text-wrap:pretty}
/* botón propio, no .btn-cta: el del template no se levanta al pasar por encima — cambia el
   degradado por un verde plano y solo se hunde al pulsar (línea 241) */
.hc-faq__empty-cta{margin-top:12px;display:inline-flex;align-items:center;gap:8px;background:var(--g-cta);color:var(--c-white);border-radius:var(--r-sub);padding:13px 26px;font-size:14px;font-weight:600;box-shadow:var(--sh-cta);transition:background .15s,transform .12s}
.hc-faq__empty-cta:hover{background:var(--c-brand-hover);color:var(--c-white)}
.hc-faq__empty-cta:active{transform:scale(.98)}
.hc-faq__empty-cta i{font-size:14px;line-height:1}

/* ---------- 3 · contacto (Ayuda.dc.html:249-271) ---------- */
.hc-contact{background:var(--c-page)}
.hc-contact__inner{padding:clamp(64px,9vw,110px) clamp(18px,4vw,28px);display:flex;flex-direction:column;gap:34px}
.hc-contact__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hc-contact__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.hc-contact__title{margin:0;font-size:clamp(26px,4vw,34px);font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.hc-contact__title-accent{color:var(--c-brand)}
.hc-contact__text{margin:0;font-size:16px;line-height:1.55;color:var(--c-secondary);max-width:520px;text-wrap:pretty}
.hc-contact__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;max-width:760px;margin:0 auto;width:100%}
.hc-contact__card{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 1px 3px rgba(23,36,28,.05);padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease}
.hc-contact__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(23,36,28,.09)}
.hc-contact__icon{width:44px;height:44px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center}
.hc-contact__icon i{font-size:20px;color:var(--c-green-text);line-height:1}
.hc-contact__card-title{margin:0;font-size:16px;font-weight:700;color:var(--c-ink)}
.hc-contact__card-text{font-size:13.5px;color:var(--c-secondary);line-height:1.6}
.hc-contact__card-link{font-size:12px;font-weight:600;color:var(--c-brand)}

/* ---------- ancho >= 760 px: el hero recupera su padding grande (Ayuda.dc.html:581) ---------- */
@media (min-width:760px){
  .hc-hero__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
}