/* Explain: App-specific component classes (buttons, cards, etc.). */
.qp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease;
}

.qp-btn i { font-size: 1rem; }
.qp-btn-lg { padding: 1.05rem 2rem; font-size: 1rem; }
.qp-btn-sm { padding: .6rem 1.15rem; font-size: .85rem; }

.qp-btn-primary {
    background: linear-gradient(135deg, var(--gold-soft), var(--primary-color));
    color: #0a0e17;
    box-shadow: 0 12px 32px rgba(212, 175, 55, .26);
}
.qp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(212, 175, 55, .42); }

.qp-btn-ghost {
    background: rgba(255, 255, 255, .05);
    color: var(--text-color);
    border-color: rgba(255, 255, 255, .26);
    backdrop-filter: blur(6px);
}
.qp-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--gold); }

.qp-btn-whatsapp { background: #25d366; color: #062b16; }
.qp-btn-whatsapp:hover { background: #1ebe5b; transform: translateY(-2px); }

.qp-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
}

.qp-title {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    line-height: 1.06;
    color: var(--text-color);
    margin-bottom: 1rem;
}
.qp-title-xl { font-size: clamp(2.2rem, 5.6vw, 4rem); }

.qp-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-muted);
}

.qp-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .28);
    font-size: .85rem;
    font-weight: 500;
}
.qp-pill i { color: var(--gold); }

/* Scanning visual */
.qp-scan {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 2.5rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--border-color);
    font-size: 3rem;
    color: var(--gold);
    overflow: hidden;
}
.qp-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 14px var(--gold);
    animation: qpScan 2.6s ease-in-out infinite;
}
@keyframes qpScan {
    0%, 100% { top: 12%; }
    50% { top: 84%; }
}

/* Steps */
.qp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface-2), var(--surface-color));
    border: 1px solid var(--border-color);
    transition: transform .4s ease, border-color .4s ease;
}
.qp-step:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .45); }
.qp-step-num { font-family: var(--font-heading); font-size: 2.4rem; line-height: 1; color: rgba(212, 175, 55, .32); }
.qp-step-icon {
    width: 52px;
    height: 52px;
    margin: .75rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: var(--gold);
    background: rgba(212, 175, 55, .1);
    border: 1px solid rgba(212, 175, 55, .25);
}
.qp-step-title { font-size: 1.15rem; color: var(--text-color); margin-bottom: .5rem; }
.qp-step-text { font-size: .92rem; line-height: 1.65; color: var(--text-muted); }

/* Benefits */
.qp-benefit {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    border-radius: var(--radius);
    background: var(--background-color);
    border: 1px solid var(--border-color);
    transition: transform .4s ease, border-color .4s ease;
}
.qp-benefit:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .4); }
.qp-benefit-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 1.3rem;
    color: #0a0e17;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary-color));
}
.qp-benefit-title { font-size: 1.1rem; color: var(--text-color); margin-bottom: .5rem; }
.qp-benefit-text { font-size: .92rem; line-height: 1.65; color: var(--text-muted); }

/* Product cards */
.qp-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.qp-product-card:hover { transform: translateY(-6px); border-color: rgba(212, 175, 55, .4); box-shadow: var(--shadow-soft); }
.qp-product-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.qp-product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.qp-product-card:hover .qp-product-media img { transform: scale(1.06); }
.qp-product-tag {
    position: absolute;
    top: .75rem;
    left: .75rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(7, 10, 17, .78);
    border: 1px solid rgba(212, 175, 55, .4);
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.qp-product-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem; flex: 1; }
.qp-product-name { font-size: 1.1rem; }
.qp-product-desc { font-size: .9rem; line-height: 1.6; color: var(--text-muted); }
.qp-product-foot {
    margin-top: auto;
    padding-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-top: 1px solid var(--border-color);
}
.qp-product-price { font-family: var(--font-heading); font-size: 1.35rem; color: var(--gold); }

/* Phone mockup */
.qp-phone {
    position: relative;
    width: min(320px, 82vw);
    aspect-ratio: 9 / 19;
    padding: 12px;
    border-radius: 44px;
    background: linear-gradient(160deg, #2a3446, #0b1018);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .7), inset 0 0 0 2px rgba(255, 255, 255, .05);
}
.qp-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 33px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
}
.qp-phone-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .8rem;
    font-family: var(--font-heading);
    letter-spacing: .18em;
    font-size: .8rem;
    color: var(--gold);
    background: rgba(7, 10, 17, .7);
    border-bottom: 1px solid var(--border-color);
}
.qp-phone-body { padding: 1rem; display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }
.qp-pet-photo { width: 100%; height: 118px; object-fit: cover; border-radius: 14px; }
.qp-pet-name { font-size: 1.5rem; color: #fff; }
.qp-pet-breed { font-size: .8rem; letter-spacing: .05em; color: var(--text-muted); margin-top: -.35rem; }
.qp-pet-actions { display: flex; gap: .5rem; }
.qp-pet-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .55rem;
    border-radius: 10px;
    font-size: .78rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.qp-pet-btn-wa { background: rgba(37, 211, 102, .16); border-color: rgba(37, 211, 102, .4); color: #8ff0b6; }
.qp-pet-info { display: flex; flex-direction: column; gap: .55rem; font-size: .76rem; line-height: 1.5; color: var(--text-muted); }
.qp-pet-info p { display: flex; gap: .5rem; }
.qp-pet-info i { color: var(--gold); margin-top: .15rem; }
.qp-pet-info strong { color: var(--text-color); font-weight: 600; }
.qp-pet-primary {
    margin-top: .25rem;
    display: block;
    text-align: center;
    padding: .7rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: #0a0e17;
    background: linear-gradient(135deg, var(--gold-soft), var(--primary-color));
}

/* FAQ */
.qp-faq-item {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--surface-color);
    margin-bottom: .85rem;
    overflow: hidden;
    transition: border-color .3s ease;
}
.qp-faq-item[open] { border-color: rgba(212, 175, 55, .45); }
.qp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}
.qp-faq-item summary::-webkit-details-marker { display: none; }
.qp-faq-chevron { color: var(--gold); transition: transform .3s ease; }
.qp-faq-item[open] .qp-faq-chevron { transform: rotate(180deg); }
.qp-faq-answer { padding: 0 1.35rem 1.35rem; font-size: .95rem; line-height: 1.75; color: var(--text-muted); }

/* Forms */
.qp-field { display: flex; flex-direction: column; gap: .4rem; }
.qp-field label { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.qp-input {
    width: 100%;
    padding: .85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: .95rem;
    transition: border-color .25s ease, background .25s ease;
}
.qp-input::placeholder { color: rgba(151, 161, 178, .6); }
.qp-input:focus { outline: none; border-color: var(--gold); background: rgba(255, 255, 255, .07); }
.qp-form-status { display: none; }
.qp-form-status.is-success,
.qp-form-status.is-error { display: block; padding: .85rem 1rem; border-radius: 12px; font-size: .9rem; }
.qp-form-status.is-success { background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .4); color: #8ff0b6; }
.qp-form-status.is-error { background: rgba(239, 68, 68, .12); border: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; }