/* =============================================================
   DOXEN – help.css  (Centro de ayuda)
   Paleta: cream #f5efe6 · gold #b68a43 · dark #1a1a1a
   ============================================================= */

/* =============================================================
   HERO
   ============================================================= */
.help-hero {
    padding-top: calc(var(--navbar-h, 66px) + 1.5rem);
    padding-bottom: 2rem;
    background: var(--bg, #F5EFE6);
    text-align: center;
}

.help-hero__title {
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--dark, #1a1a1a);
    line-height: 1.1;
    margin-bottom: .65rem;
}

.help-hero__subtitle {
    font-size: clamp(.86rem, 1.2vw, .96rem);
    color: var(--text-muted, #7a7a7a);
    line-height: 1.6;
}

/* =============================================================
   FAQ SECTION
   ============================================================= */
.help-faq {
    padding-bottom: 1.5rem;
    background: var(--bg, #F5EFE6);
}

.help-faq__card {
    background: var(--white, #fff);
    border-radius: 20px;
    padding: 2.25rem 2rem 2rem;
    border: 1px solid rgba(224, 216, 204, .4);
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.help-faq__title {
    font-family: var(--font-display, 'Droid Serif', serif);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    text-align: center;
    margin-bottom: 1.75rem;
}

/* ── FAQ Grid (2 columns) ──────────────────────────────────── */
.help-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── FAQ Item ──────────────────────────────────────────────── */
.faq-item {
    border: 1.5px solid #eae5db;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .28s ease, box-shadow .28s ease;
}

.faq-item:hover {
    border-color: #d6d0c5;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

.faq-item--open {
    border-color: var(--accent, #b68a43);
    box-shadow: 0 4px 18px rgba(182, 138, 67, .1);
}

/* Header (button) */
.faq-item__header {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    width: 100%;
    padding: 1.1rem 1.15rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font, 'Segoe UI', system-ui, sans-serif);
    transition: background .28s ease;
}

.faq-item__header:hover {
    background: rgba(245, 239, 230, .5);
}

/* Icon wrap */
.faq-item__icon-wrap {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--bg, #F5EFE6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #7a7a7a);
    transition: background .28s ease, color .28s ease;
}

.faq-item--open .faq-item__icon-wrap {
    background: var(--accent, #b68a43);
    color: #fff;
}

/* Text */
.faq-item__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding-top: .1rem;
}

.faq-item__question {
    font-size: .88rem;
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    line-height: 1.35;
}

.faq-item__answer {
    font-size: .8rem;
    color: var(--text-muted, #7a7a7a);
    line-height: 1.5;
}

/* Chevron */
.faq-item__chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #b0a899;
    transition: transform .28s ease, color .28s ease;
    margin-top: .35rem;
}

.faq-item--open .faq-item__chevron {
    transform: rotate(180deg);
    color: var(--accent, #b68a43);
}

/* Body (expandable) */
.faq-item__body {
    padding: 0 1.15rem 1.15rem calc(42px + .85rem + 1.15rem);
    animation: faqSlideDown .25s ease;
}

.faq-item__body p {
    font-size: .84rem;
    color: var(--text-muted, #7a7a7a);
    line-height: 1.6;
}

.faq-item__body a {
    color: var(--accent, #b68a43);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.faq-item__body a:hover {
    color: #8f6a2e;
}

@keyframes faqSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   RESOURCE CARDS
   ============================================================= */
.help-resources {
    padding-bottom: 1.5rem;
    background: var(--bg, #F5EFE6);
}

.help-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.help-resource-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--white, #fff);
    border-radius: 16px;
    padding: 1.35rem 1.25rem;
    border: 1px solid rgba(224, 216, 204, .4);
    box-shadow: 0 3px 16px rgba(0,0,0,.05);
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    cursor: pointer;
}

.help-resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(0,0,0,.09);
    border-color: var(--accent, #b68a43);
}

/* Icon wraps */
.help-resource-card__icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s ease;
}

.help-resource-card:hover .help-resource-card__icon-wrap {
    transform: scale(1.08);
}

.help-resource-card__icon-wrap--terms {
    background: var(--bg, #F5EFE6);
    color: var(--accent, #b68a43);
}

.help-resource-card__icon-wrap--privacy {
    background: var(--bg, #F5EFE6);
    color: var(--accent, #b68a43);
}

.help-resource-card__icon-wrap--report {
    background: #FFF3E0;
    color: #E65100;
}

/* Text */
.help-resource-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.help-resource-card__title {
    font-size: .9rem;
    font-weight: 700;
    color: var(--dark, #1a1a1a);
    line-height: 1.3;
}

.help-resource-card__desc {
    font-size: .78rem;
    color: var(--text-muted, #7a7a7a);
    line-height: 1.45;
}

/* Arrow */
.help-resource-card__arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: #c4bdb0;
    transition: color .28s ease, transform .28s ease;
}

.help-resource-card:hover .help-resource-card__arrow {
    color: var(--accent, #b68a43);
    transform: translateX(3px);
}

/* =============================================================
   FOOTER
   ============================================================= */
.help-footer {
    background: var(--white, #fff);
    border-top: 1px solid rgba(224, 216, 204, .5);
    padding: 1.5rem 0;
    text-align: center;
}

.help-footer__copy {
    font-size: .8rem;
    color: #999;
}

/* =============================================================
   ANIMATIONS
   ============================================================= */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
}
[data-animate].visible {
    opacity: 1;
    transform: none;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* ── 1024px ── */
@media (max-width: 1024px) {
    .help-faq__grid {
        grid-template-columns: 1fr;
    }

    .help-resources__grid {
        grid-template-columns: 1fr;
    }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .help-hero {
        padding-top: calc(var(--navbar-h, 58px) + 1.5rem);
        padding-bottom: 1.5rem;
    }

    .help-faq__card {
        padding: 1.75rem 1.25rem 1.5rem;
        border-radius: 16px;
    }

    .faq-item__header {
        padding: .9rem 1rem;
    }

    .faq-item__icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .help-hero__title {
        font-size: 2rem;
    }

    .help-faq__card {
        padding: 1.25rem .9rem 1rem;
    }

    .faq-item__header {
        gap: .6rem;
        padding: .8rem .75rem;
    }

    .help-resource-card {
        padding: 1.1rem 1rem;
    }
}