/* ============================================================
 * EKIPATE · CSS modular — COMPONENTES   (PKG-EK-W1-02)
 * ------------------------------------------------------------
 * Componentes ekp-* portados del provisional, SOLO con tokens --ekp-*:
 * botones, tarjetas, secciones editoriales, hero. Acabado editorial
 * (hairlines y aire, no sombras genéricas), radios 2/4/8px, --t-*.
 * Frontera: aditivo — NO se reabre el style.css de PKG-01.
 * Carga: global, después de ekp-base.
 *
 * NOTA reuse-first: el grueso de los componentes ekp-* (.ekp-hero,
 * .ekp-btn y variantes, .ekp-section, .ekp-promo, .ekp-trust,
 * .ekp-cta) ya vive en el style.css de PKG-01. Aquí NO se duplican:
 * sólo se añade el vocabulario editorial que faltaba del provisional.
 * ============================================================ */

/* ── Botones (.ekp-btn) — sólo el acabado que faltaba ─────────
 * El botón base y sus variantes están en PKG-01. Se añade la
 * respuesta al :active y la flecha animada del provisional. */
.ekp-btn:active {
    transform: translateY(0);
}

.ekp-btn .ekp-arrow {
    transition: transform var(--t-med);
}

.ekp-btn:hover .ekp-arrow {
    transform: translateX(3px);
}

/* ── Eyebrow editorial (kicker con hairline) ──────────────────
 * Etiqueta de sección: versalita en cobre precedida de una rayita.
 * Pieza del sistema del provisional, reutilizable en plantillas. */
.ekp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ekp-accent);
    margin: 0 0 var(--space-md);
}

.ekp-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
}

/* ── Enlace editorial (subrayado deslizante) ──────────────────
 * "Ver más / catálogo": el subrayado entra de izquierda a derecha. */
.ekp-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ekp-accent);
    font-weight: 500;
    font-size: 0.92rem;
    padding-bottom: 2px;
}

.ekp-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med);
}

.ekp-link:hover::after {
    transform: scaleX(1);
}