/* articulo.css — páginas de servicio y casos de éxito (Power It Up)
   Reutiliza variables y componentes de base/components/layout/pages. */

.art-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 7rem 1.5rem 4rem;
}
@media (max-width: 640px) { .art-wrap { padding-top: 6rem; } }

.art-crumbs {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.art-crumbs a { color: var(--text-mid); text-decoration: none; }
.art-crumbs a:hover { color: var(--primary-eco); }

.art-head { margin-bottom: 2.5rem; }
.art-head h1, .art-wrap > h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.6rem, 4.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 45%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-wrap: balance;
}
.art-lead {
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--text-light);
    font-weight: 300;
    margin-bottom: 1.75rem;
}
.art-lead strong { font-weight: 600; }

.art-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.art-link-btn {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.art-link-btn:hover { border-bottom-color: var(--accent-gold); }

.art-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 0 0 3rem;
}
.art-kpis .glass-panel {
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
}
.art-kpis strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.art-kpis span { font-size: 0.78rem; color: var(--text-mid); line-height: 1.4; }

.art-section { margin-bottom: 3rem; }
.art-section h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-light);
    margin: 0 0 1rem;
    line-height: 1.3;
    text-wrap: balance;
}
.art-section h3 { font-size: 1rem; font-weight: 700; color: var(--text-light); margin: 1.5rem 0 0.5rem; }
.art-section p, .art-section li {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-mid);
}
.art-section p { margin-bottom: 1rem; }
.art-section p strong, .art-section li strong { color: var(--text-light); font-weight: 600; }
.art-section a { color: var(--primary-eco); }
.art-section em { color: var(--accent-gold); font-style: italic; }
.art-small { font-size: 0.78rem !important; color: var(--text-faint) !important; }

.art-steps { padding-left: 0; list-style: none; counter-reset: paso; margin: 0 0 1.5rem; }
.art-steps li {
    counter-increment: paso;
    position: relative;
    padding: 0.9rem 0 0.9rem 3rem;
    border-bottom: 1px solid var(--glass-border);
}
.art-steps li:last-child { border-bottom: none; }
.art-steps li::before {
    content: counter(paso, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.95rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-eco);
    letter-spacing: 0.05em;
}

.art-checks { padding-left: 0; list-style: none; display: grid; gap: 0.6rem; }
.art-checks li { position: relative; padding-left: 1.75rem; }
.art-checks li::before {
    content: "";
    position: absolute; left: 0; top: 0.6rem;
    width: 0.9rem; height: 0.9rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-eco), var(--accent-gold));
    box-shadow: 0 0 10px rgba(249,115,22,0.45);
}

.art-note { padding: 1.25rem 1.5rem; margin: 1.5rem 0 0; font-size: 0.9rem; line-height: 1.7; color: var(--text-mid); }
.art-note strong { color: var(--text-light); display: block; margin-bottom: 0.35rem; }

.art-table-wrap { overflow-x: auto; margin: 1.25rem 0 0.5rem; border: 1px solid var(--glass-border); border-radius: 12px; }
.art-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 560px; }
.art-table th, .art-table td { padding: 0.75rem 0.9rem; text-align: left; border-bottom: 1px solid var(--glass-border); vertical-align: top; }
.art-table th { background: var(--glass-strong); color: var(--text-light); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; }
.art-table th:nth-child(2), .art-table td:nth-child(2) { color: var(--accent-gold); font-weight: 600; }
.art-table td:first-child { color: var(--text-light); font-weight: 500; }
.art-table tr:last-child td { border-bottom: none; }

/* FAQ: reutiliza .faq-item/.faq-q/.faq-a de pages.css con <h3> */
.art-section h3.faq-q { margin: 0; font-size: 0.95rem; }
.art-section .faq-a { padding-right: 1.5rem; }
.art-section .faq-item.open .faq-a { max-height: 600px; }
.faq-q::after {
    content: "";
    width: 0.6rem; height: 0.6rem;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin-left: 1rem;
    transition: transform 0.3s;
    opacity: 0.7;
}
.faq-item.open .faq-q::after { transform: rotate(-135deg); color: var(--primary-eco); }

.art-final { text-align: center; padding: 2.5rem 1.5rem; margin-top: 1rem; }
.art-final h2 { font-size: 1.4rem; font-weight: 700; color: var(--text-light); margin: 0 0 0.75rem; }
.art-final p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.7; max-width: 560px; margin: 0 auto 1.5rem; }
.art-final .art-cta-row { justify-content: center; }

/* Caso de éxito */
.art-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; }
.art-facts div { font-size: 0.86rem; color: var(--text-mid); line-height: 1.5; }
.art-facts div b { display: block; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-eco); margin-bottom: 0.15rem; }
.art-facts a { color: var(--text-light); }

.art-quote {
    border-left: 3px solid var(--primary-eco);
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin: 1.5rem 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-light);
    font-style: italic;
}
.art-quote cite { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-faint); font-style: normal; }

.art-figure { margin: 1.5rem 0; }
.art-figure img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--glass-border); display: block; }
.art-figure figcaption { font-size: 0.78rem; color: var(--text-faint); margin-top: 0.5rem; text-align: center; }

.public-footer .footer-bottom a { color: var(--text-faint); text-decoration: none; font-size: 0.8rem; }
.public-footer .footer-bottom a:hover { color: var(--primary-eco); }